jonhon-mes-web/src/views/logisticsManagement/components/addPackingDialog.vue

<template>
  <el-dialog title="新增" append-to-body :modelValue="openShow" width="30%" @close="closeDialog">
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="auto"
      @submit.prevent
      v-loading="formLoading"
    >
      <el-form-item label="箱条码：" prop="boxBarcode">
        <el-input
          v-model="form.boxBarcode"
          @keyup.enter.prevent="changeCode"
          clearable
          placeholder="请扫描箱条码"
        />
      </el-form-item>
      <el-form-item label="配送终点：">
        {{ boxBarInfo.wcName }}-{{ boxBarInfo.stationRegion }}
      </el-form-item>
      <el-form-item label="流程卡号：" prop="orderNo">
        <el-input
          v-model="form.orderNo"
          @keyup.enter.prevent="changeOrderCode"
          clearable
          placeholder="请扫描箱条码"
        />
      </el-form-item>
      <el-form-item label="" prop="orderNo">
        <el-tag
          :key="tag"
          v-for="tag in orderIdList"
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
      </el-form-item>
    </el-form>
    <!-- <el-table :data="orderIdList" style="width: 100%">
      <el-table-column prop="id" label="订单号"> </el-table-column>
      <el-table-column prop="name" label="作业中心"> </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template #default="scope">
          <el-button type="danger" size="small" @click="deleteOrder(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table> -->

    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="submitLoading">确 定</el-button>
      </span>
    </template> -->
  </el-dialog>
</template>
<script>
import {
  boxBinding,
  getOrderInfo,
  getCardNo,
  getQuantityLocation,
} from '@/api/logisticsManagement/materialPacking';
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formLoading: false,
      submitLoading: false,
      tableData: [],
      openShow: false,
      form: {},
      rules: {
        boxBarcode: [{ required: true, message: '请扫描箱条码', trigger: 'blur' }],
      },
      workCenterOptions: [],
      orderIdList: [],
      boxBarInfo: {},
    };
  },
  mounted() {
    this.openShow = this.showDialog;
  },
  methods: {
    // 扫描箱条码
    changeCode() {
      getQuantityLocation({ boxBarcode: this.form.boxBarcode,isDetail:false }).then(res => {
        this.formLoading = true;
        this.boxBarInfo = res.data.data;
        if(res.data.data.yieldOrderList!= null ){
           this.orderIdList = res.data.data.yieldOrderList.map(item => item.cardNo);
        }else{
          this.orderIdList = []
        }
       
        setTimeout(() => {
          this.$message.success('箱条码获取数据成功！');
          this.formLoading = false;
        }, 500);
      });
    },
    // 扫描订单号 - 添加到流程卡号列表
    changeOrderCode() {
      const orderNo = this.form.orderNo?.trim();
      if (!orderNo) {
        this.$message.warning('请输入订单号');
        return;
      }

      getCardNo({ cardNo: this.form.orderNo })
        .then(res => {
          // 检查是否已存在
          const exists = this.orderIdList.includes(orderNo);
          if (exists) {
            this.$message.warning('该订单号已添加');
            this.form.orderNo = '';
            return;
          }
          // 调用 API 获取订单信息（如果需要验证）
          this.orderIdList.push(orderNo);
          // 调用绑定接口数据
          let params = {
            boxBarcode: this.form.boxBarcode,
            orderIdList: [this.form.orderNo],
          };
          boxBinding(params)
            .then(res => {
              this.$message.success('绑定成功');
              this.submitLoading = false;
              // this.closeDialog();
              this.changeCode();
            })
            .catch(err => {
              this.submitLoading = false;
              this.orderIdList.pop(orderNo);
            });
          this.form.orderNo = '';
        })
        .catch(err => {
          this.form.orderNo = '';
        });
    },
    // 删除流程卡号标签
    handleClose(tag) {
      this.orderIdList = this.orderIdList.filter(item => item !== tag);
    },
    closeDialog() {
      this.openShow = false;
      this.form = {
        boxBarcode: '',
        orderNo: '',
      };
      this.orderIdList = [];
      this.$emit('closeDialog');
    },
    submit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.submitLoading = true;
          let params = {
            boxBarcode: this.form.boxBarcode,
            orderIdList: this.orderIdList,
          };

          boxBinding(params)
            .then(res => {
              this.$message.success('操作成功');
              this.submitLoading = false;
              this.closeDialog();
            })
            .catch(err => {
              this.submitLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>