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>
      <el-form-item label="箱条码：" prop="boxBarcode">
        <el-input
          v-model="form.boxBarcode"
          @keyup.enter.prevent="changeCode"
          placeholder="请扫描箱条码"
        />
      </el-form-item>
      <el-form-item label="订单号：" prop="orderNo">
        <el-input
          v-model="form.orderNo"
          @keyup.enter.prevent="changeOrderCode"
          placeholder="请扫描箱条码"
        />
      </el-form-item>
      <el-form-item label="流程卡号：" prop="orderNo">
        <el-tag
          :key="tag"
          v-for="tag in orderIdList"
          closable
          :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 } from '@/api/logisticsManagement/materialPacking';
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      submitLoading: false,
      tableData: [],
      openShow: false,
      form: {},
      rules: {
        boxBarcode: [{ required: true, message: '请扫描箱条码', trigger: 'blur' }],
      },
      workCenterOptions: [],
      orderIdList:[]
    };
  },
  mounted() {
    this.openShow = this.showDialog;
  },
  methods: {
    // 扫描箱条码
    changeCode() {
      console.log('箱条码:', this.form.boxBarcode);
      // 可在此处添加箱条码查询逻辑
    },
    // 扫描订单号 - 添加到流程卡号列表
    changeOrderCode() {
      const orderNo = this.form.orderNo?.trim();
      if (!orderNo) {
        this.$message.warning('请输入订单号');
        return;
      }

      // 检查是否已存在
      const exists = this.orderIdList.includes(orderNo);
      if (exists) {
        this.$message.warning('该订单号已添加');
        this.form.orderNo = '';
        return;
      }

      // 调用 API 获取订单信息（如果需要验证）
       this.orderIdList.push(orderNo);
        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>