EmptyInTaskModal.vue 4.89 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">
        <a-row>
          <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-row>
          <a-col :span="24">
<!--            <a-form-model-item label="起始站台" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fromPortCode">-->
<!--              <j-search-select-tag-->
<!--                placeholder="请选择起始站台"-->
<!--                v-model="model.fromPortCode"-->
<!--                dict="port,name,code,type='1'&&zone_code='C'"-->
<!--                :pageSize="10"-->
<!--                :async="true">-->
<!--              </j-search-select-tag>-->
<!--            </a-form-model-item>-->
            <a-form-model-item label="起始站台" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fromPortCode">
              <j-checkbox
                v-model="model.fromPortCode"
                :options="jCheckboxOptions"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="入库站台编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              {{ model.fromPortCode }}
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="是否带柱子" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mainBar">
              <j-checkbox
                v-model="model.mainBar"
                :options="jCheckboxMainBarOptions"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>

import {createEmptyIn} from '@/api/api'
import {getAction} from "@api/manage";

export default {
  name: "EmptyInTaskModal",
  components: {},
  data() {
    return {
      title: "操作",
      width: 750,
      visible: false,
      model: {
        fromPortCode: null,
        mainBar: null
      },
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      jCheckboxOptions: [],
      jCheckboxMainBarOptions: [],
      confirmLoading: false,
      url: {
        add: "/task/taskHeader/createEmptyIn",
      }
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  watch: {
    'model.outLayer': {
      handler(newVal) {
        if (newVal) {
          this.model.fromPortCode = null
          if (newVal === 'layer1') {
            this.jCheckboxOptions = [
              {label: '站台一', value: 'P31061'},
              {label: '站台二', value: 'P31062'},
              {label: '站台三', value: 'P31063'},
              {label: '站台四', value: 'P31064'},
              {label: '站台五', value: 'P31065'}
            ]
          } else {
            this.jCheckboxOptions = [
              {label: '站台一', value: 'P31051'},
              {label: '站台二', value: 'P31052'},
              {label: '站台三', value: 'P31053'},
              {label: '站台四', value: 'P31054'},
              {label: '站台五', value: 'P31055'}
            ]
          }
        }
      }
    }
  },
  methods: {
    add() {
      this.edit(this.modelDefault);
    },
    edit() {
      this.visible = true;
      this.jCheckboxMainBarOptions = [{label: '带柱子', value: '1'}];
    },
    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;
          createEmptyIn(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>