MachineTransferToOtherAreaModal.vue 9.13 KB
<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="起始点位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fromLocationCode">
              <a-input placeholder="请输入起始点位" :disabled="true" v-model="model.fromLocationCode"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="出库口" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="toPort">
              <a-select
                placeholder="请选择出库口"
                v-model="model.toPort"
                clearable
                style="width: 100%"
                :disabled="!portOptions.length"
              >
              <a-select-option
                v-for="item in portOptions"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import {getAction, httpAction} from '@/api/manage'
import {validateDuplicateValue} from '@/utils/util'
import {createTransferAgv, createTransferTask} from '@/api/api'

export default {
  name: "MachineTransferToOtherAreaModal",
  components: {},
  props: {
    // 从父组件传入仓库编码(必填,默认值保留)
    warehouseCode: {
      type: String,
      required: true,
      default: 'CS0001'
    }
  },
  data() {
    return {
      title: "操作",
      width: 500,
      fromPortList: [], // 起始机台点位列表
      toPortList: [],   // 目标机台点位列表
      machineList: [],
      querySource: {},
      visible: false,
      model: {
        fromMachineCode: '', // 起始机台
        fromLocationCode: '', // 起始点位
        toPort: ''            // 目标出库口(绑定下拉)
      },
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      validatorRules: {
        fromMachineCode: [
          {required: true, message: '请选择起始机台!', trigger: 'change'},
        ],
        fromLocationCode: [
          {required: true, message: '请选择起始点位!', trigger: 'change'},
        ],
        toPort: [
          {required: true, message: '请选择目标出库口!', trigger: 'change'},
        ]
      },
      url: {
        add: "/task/taskHeader/createTransferTask",
      },
      modelDefault: {}, // 备份原始值
      // 出库口查询参数(对接后端接口,不变)
      portQueryParams: {
        warehouseCode: '',
        zoneCodes: ['A', 'B']
      },
      portOptions: [] // 【新增】出库口下拉选项数组,存储{code: '', name: ''}
    }
  },
  watch: {
    // 监听父组件传入的仓库编码,同步更新查询参数并重新加载出库口
    warehouseCode(newVal) {
      this.portQueryParams.warehouseCode = newVal;
      this.loadPortOptions(); // 仓库编码变化,重新请求出库口
    },
    // // 监听父组件传入的库区编码,同步更新查询参数并重新加载出库口
    // zoneCodes(newVal) {
    //   this.portQueryParams.zoneCodes = newVal;
    //   this.loadPortOptions(); // 库区编码变化,重新请求出库口
    // },
    // 监听弹窗显隐,打开时加载出库口数据
    visible(newVal) {
      if (newVal) {
        this.loadPortOptions(); // 弹窗打开,主动加载出库口
      } else {
        this.model.toPort = ''; // 弹窗关闭,清空出库口选择
      }
    }
  },
  created() {
    // 备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    // 初始化出库口查询参数
    this.portQueryParams.warehouseCode = this.warehouseCode;
  },
  methods: {
    /**
     * 【新增】加载出库口下拉选项(封装原接口请求逻辑,赋值给portOptions)
     */
    async loadPortOptions() {
      try {
        // 校验仓库编码
        if (!this.portQueryParams.warehouseCode) {
          this.$message.warning('仓库编码为空,无法获取出库口!');
          this.portOptions = [];
          return;
        }
        // 调用原后端接口,保留原有参数
        // const res = await getAction("config/port/getPortListByZone", this.portQueryParams);
        const res = await httpAction("config/port/getPortListByZone", this.portQueryParams, "post");
        if (res.success) {
          // 直接将接口返回的列表赋值给下拉选项(字段code/name与后端一致)
          this.portOptions = res.result;
        } else {
          this.$message.warning(res.message || '获取出库口列表失败');
          this.portOptions = [];
        }
      } catch (error) {
        this.$message.error('获取出库口列表异常,请重试');
        console.error('出库口查询异常:', error);
        this.portOptions = [];
      }
    },

    /**
     * 切换机台获取点位列表(原有方法,不变)
     * @param {String} machineCode 机台编码
     * @param {String} type 类型(from-起始/to-目标)
     */
    changeMachine(machineCode, type) {
      this.model[`${type}LocationCode`] = '';
      this.getPortList(machineCode, type);
    },

    /**
     * 获取机台点位列表(原有方法,不变)
     * @param {String} machineCode 机台编码
     * @param {String} type 类型(from-起始/to-目标)
     */
    async getPortList(machineCode, type) {
      if (!machineCode) return;
      let params = {"machineCode": machineCode};
      try {
        const res = await getAction("/config/location/list", params);
        if (res.success) {
          this[`${type}PortList`] = res.result.records;
        }
        if (res.code === 510) {
          this.$message.warning(res.message);
        }
      } catch (error) {
        this.$message.error('获取点位列表失败');
        console.error(error);
      }
    },

    /**
     * 新增操作(原有方法,无需额外修改,visible监听会自动加载出库口)
     */
    add() {
      this.model = JSON.parse(JSON.stringify(this.modelDefault));
      this.visible = true;
      this.fromPortList = [];
      this.toPortList = [];
    },

    /**
     * 编辑操作(原有方法,不变)
     * @param record
     */
    edit(record) {
      this.model = JSON.parse(JSON.stringify(this.modelDefault));
      this.model.fromLocationCode = record['fromLocationCode'];
      this.visible = true;
      this.getMachineList(record['zoneCode']);
      this.fromPortList = [];
      this.toPortList = [];
    },

    /**
     * 获取机台列表(原有方法,不变)
     * @param {String} zoneCode 区域编码
     */
    async getMachineList(zoneCode) {
      if (!zoneCode) return;
      let params = {"zoneCode": zoneCode};
      try {
        const res = await getAction("/config/location/getMachineListByZoneCode", params);
        if (res.success) {
          this.machineList = res.result;
        }
        if (res.code === 510) {
          this.$message.warning(res.message);
        }
      } catch (error) {
        this.$message.error('获取机台列表失败');
        console.error(error);
      }
    },

    /**
     * 关闭弹窗(原有方法,不变)
     */
    close() {
      this.$emit('close');
      this.visible = false;
      if (this.$refs.form) {
        this.$refs.form.clearValidate();
      }
      this.fromPortList = [];
      this.toPortList = [];
    },

    /**
     * 确认提交(原有方法,不变,toPort取值逻辑一致)
     */
    async handleOk() {
      try {
        const valid = await this.$refs.form.validate();
        if (!valid) return;
        this.confirmLoading = true;
        const taskParams = {
          fromPort: this.model.fromLocationCode,
          toPort: this.model.toPort, // 出库口值取值不变
          taskType: null,
          priority: 10,
          status: 0,
          zoneCode: this.querySource.zoneCode,
          preTaskNo: 0,
          containerCode: '',
          carno: '',
          backWarehouse: 0,
          productionDetailId: 0,
          checkContainer: 0
        };
        const res = await createTransferAgv(taskParams);
        if (res.success) {
          this.$message.success(res.message);
          this.$emit('ok');
          this.model = JSON.parse(JSON.stringify(this.modelDefault));
        } else {
          this.$message.warning(res.message);
        }
      } catch (error) {
        this.$message.error('提交失败,请重试');
        console.error(error);
      } finally {
        this.confirmLoading = false;
        this.close();
      }
    },

    /**
     * 取消操作(原有方法,不变)
     */
    handleCancel() {
      this.close();
    }
  }
}
</script>

<style scoped>
.ant-select {
  margin-bottom: 0;
}
</style>