MachineDischargingModal.vue 5.11 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="machineCode">
              <a-select
                v-model="model.machineCode"
                placeholder="请选择机台"
                style="width:100%"
                allowClear>
                <a-select-option
                  v-for="machineCode in machineList"
                  :key="machineCode"
                  :value="machineCode">
                  {{ machineCode }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="jCheckboxOptions.length > 0">
            <a-form-model-item label="下料位置" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="fromLocationCodes">
              <j-checkbox
                v-model="model.fromLocationCodes"
                :options="jCheckboxOptions"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="jCheckboxOptions.length > 0 ">
            <a-form-model-item label="下料位置编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              {{ model.fromLocationCodes }}
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="出库楼层" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="outLayer">
              <a-select show-search placeholder="请选择出库楼层" option-filter-prop="children"
                        v-model="model.outLayer">
                <a-select-option value="layer1">
                  一楼
                </a-select-option>
                <a-select-option value="layer2">
                  二楼
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>

import JSelectMultiEmptyContainer from "@comp/jeecgbiz/JSelectMultiEmptyContainer";
import {getAction, httpAction} from "@api/manage";

export default {
  name: "MachineDischargingModal",
  components: {JSelectMultiEmptyContainer},
  data() {
    return {
      title: "操作",
      width: 750,
      portList: [],
      querySource: {},
      visible: false,
      model: {
        fromLocationCodes: null
      },
      machineList: [],
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      jCheckboxOptions: [],
      validatorRules: {
        fromLocationCodes: [
          {required: true, message: '请选择下料点'},
        ],
      }
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    this.loadFrom();
  },
  watch: {
    'model.machineCode': {
      handler(newVal) {
        if (newVal) {
          this.model.fromLocationCodes = null
          getAction("/config/location/getLocationListByMachineCode", {machineCode: newVal})
            .then(res => {
              if (res.success) {
                let data = res.result;
                let list = data[1] || data[2] || [];
                this.jCheckboxOptions = list.map((item, index) => {
                  return {
                    label: `位置${index + 1}`,
                    value: item
                  }
                });
              } else {
                this.$message.error("获取机台库位失败");
              }
            })
        }
      }
    }
  },
  methods: {
    show() {
      this.visible = true;
    },
    loadFrom() {
      httpAction("/config/location/getCacheMachineList", {}, "get").then((res) => {
        if (res.success) {
          this.machineList = res.result;
        } else {
          this.$message.warning("获取机台列表失败:" + res.message);
        }
      }).catch((err) => {
        this.$message.error("获取机台列表异常,请重试");
      })
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.$refs.form.clearValidate();
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          getAction("/task/taskHeader/machineDischarging", this.model).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    },
  }
}
</script>