pda-uni-app-perkins/pages/stock-in/engine.vue

<template>
  <view class="container">
    <view class="header">
      <button class="back" @click="back"><i class="icon icon-arrow_back" style="color:#05DCEF;font-size:36rpx"></i></button>
      <text class="title">发动机入库</text>
    </view>

    <view class="content">
      <view class="tip">
        <view class="tip-icon"><i class="icon icon-info" style="color:#05DCEF"></i></view>
        <text class="tip-text">请依次扫描入库口、母托号与发动机信息后提交</text>
      </view>

      <view class="field">
        <text class="label">入库口 <text class="required">*</text></text>
        <view class="input-wrap">
          <i class="left-icon icon icon-qr_code_2" style="font-size:36rpx"></i>
          <input class="input" placeholder="请扫描或输入入库口" v-model="standId" />
        </view>
      </view>

      <view class="field">
        <text class="label">母托号 <text class="required">*</text></text>
        <view class="input-wrap">
          <i class="left-icon icon icon-qr_code_2" style="font-size:36rpx"></i>
          <input class="input" placeholder="请扫描或输入母托号" v-model="vehicleNo" />
        </view>
      </view>

      <view class="field">
        <text class="label">发动机序列号 <text class="required">*</text></text>
        <view class="input-wrap">
          <i class="left-icon icon icon-qr_code_2" style="font-size:36rpx"></i>
          <input class="input" placeholder="请扫描或输入发动机序列号" v-model="goodsId" />
        </view>
      </view>

      <view class="field">
        <text class="label">发动机机型 <text class="required">*</text></text>
        <view class="input-wrap">
          <i class="left-icon icon icon-qr_code_2" style="font-size:36rpx"></i>
          <input class="input" placeholder="请扫描或输入发动机机型" v-model="model" />
        </view>
      </view>

      <button class="submit" :disabled="loading" @click="submit">
        <i class="icon icon-save" style="margin-right:12rpx"></i> 确认入库
      </button>
    </view>
  </view>
</template>

<script>
import { WmsApiClient } from '@/common/wmsApi.js';
import { DialogUtils } from '@/utils/dialog.js';
export default {
  data() {
    return {
      standId: '',
      vehicleNo: '',
      goodsId: '',
      model: '',
      loading: false,
    };
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    resolveError(error, fallback = '请求失败') {
      if (!error) return fallback;
      if (typeof error === 'string') return error;
      if (typeof error.message === 'string') return error.message;
      if (typeof error.errMsg === 'string') return error.errMsg;
      if (typeof error.code === 'number') return `${fallback} (${error.code})`;
      return fallback;
    },
    resetForm() {
      this.standId = '';
      this.vehicleNo = '';
      this.goodsId = '';
      this.model = '';
    },
    async submit() {
      const stand = (this.standId || '').trim();
      const vehicle = (this.vehicleNo || '').trim();
      const goods = (this.goodsId || '').trim();
      const model = (this.model || '').trim();

      if (!stand) {
        DialogUtils.showWarningMessage('提示', '请先输入入库口');
        return;
      }
      if (!vehicle) {
        DialogUtils.showWarningMessage('提示', '请输入母托号');
        return;
      }
      if (!goods) {
        DialogUtils.showWarningMessage('提示', '请输入发动机序列号');
        return;
      }
      if (!model) {
        DialogUtils.showWarningMessage('提示', '请输入发动机机型');
        return;
      }
      if (this.loading) return;

      this.loading = true;
      uni.showLoading({ title: '正在请求', mask: true });
      try {
        const response = await WmsApiClient.engineStockIn({
          standId: stand,
          vehicleNo: vehicle,
          goodsId: goods,
          model,
        });
        const code = Number(response.code);
        if (code === 0) {
          DialogUtils.showSuccessMessage('成功', '入库成功');
          this.resetForm();
        } else {
          DialogUtils.showWarningMessage('操作未成功', `${response.message || '提交失败'} (${response.code})`);
        }
      } catch (error) {
        DialogUtils.showErrorMessage('错误', this.resolveError(error));
      } finally {
        this.loading = false;
        uni.hideLoading();
      }
    },
  },
};
</script>

<style scoped>
.header {
  position: relative;
  height: 120rpx;
  padding: 0;
  background: linear-gradient(90deg, var(--grad-primary-start), var(--grad-primary-mid));
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  min-height: 100vh;
  background: #F5F5F5;
}

.title {
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
}

.content {
  padding: 24rpx;
}

.tip {
  flex-direction: row;
  display: flex;
  align-items: center;
  background: #f2fdff;
  border-radius: 12rpx;
  padding: 24rpx;
  color: #333;
  margin-bottom: 28rpx;
}

.tip-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background: #e6f7ff;
  text-align: center;
  line-height: 40rpx;
  margin-right: 12rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tip-text {
  color: #333;
  font-size: 26rpx;
}

.field {
  margin-bottom: 20rpx;
}

.label {
  color: #333;
  font-size: 30rpx;
  margin-bottom: 12rpx;
  display: block;
}

.required {
  color: #ff4d4f;
}

.input-wrap {
  height: 96rpx;
  border-radius: 12rpx;
  border: 1px solid #e6e6e6;
  background: #fff;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
}

.left-icon {
  color: #05DCEF;
  font-size: 36rpx;
  margin-right: 12rpx;
}

.input {
  flex: 1;
  height: 100%;
  font-size: 30rpx;
}

.submit {
  width: 100%;
  height: 92rpx;
  border: none;
  color: #fff;
  border-radius: 46rpx;
  background: linear-gradient(90deg, var(--grad-primary-start), var(--grad-primary-mid));
  font-size: 32rpx;
  box-shadow: 0 8rpx 22rpx rgba(5, 220, 239, .25);
  text-align: center;
  margin-top: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit[disabled] {
  opacity: .6;
}

.back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 80rpx;
  height: 64rpx;
  line-height: 64rpx;
  border: none;
  color: #05DCEF;
  background: #fff;
  border-radius: 12rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>