wms_vue/src/view/wms/warehouse/loc/modal/edit.vue

<template>
  <a-modal :open="visible" title="编辑货位" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel" :width='1200'>
    <a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <div>
        <page-layout>
          <a-row :gutter="[0, 0]">
            <a-col :span="24">
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="locCode" label="位置编号" name="locCode">
                    <a-input v-model:value="formState.locCode" placeholder="请输入位置编号" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="locName" label="位置描述" name="locName">
                    <a-input v-model:value="formState.locName" placeholder="请输入位置描述" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="houseCode" label="仓库号" name="houseCode">
                    <a-input v-model:value="formState.houseCode" placeholder="请输入仓库号" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="houseName" label="仓库名称" name="houseName">
                    <a-input v-model:value="formState.houseName" placeholder="请输入仓库名称" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="parentCode" label="父编号" name="parentCode">
                    <a-input v-model:value="formState.parentCode" placeholder="请输入父编号" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="locRelation" label="关联位置" name="locRelation">
                    <a-input v-model:value="formState.locRelation" placeholder="请输入关联位置" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="locWcs" label="WCS位置编号" name="locWcs">
                    <a-input v-model:value="formState.locWcs" placeholder="请输入WCS位置编号" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="位置类型" name="locType">
                    <a-select v-model:value="formState.locType" placeholder="请选择位置类型" :options="locTypeOption">
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="货位高矮类型" name="locHighType">
                    <a-select v-model:value="formState.locHighType" placeholder="请选择货位高矮类型"
                      :options="locHighTypeOption">
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="货位大小" name="locSizeType">
                    <a-select v-model:value="formState.locSizeType" placeholder="请选择货位大小" :options="locSizeTypeOption">
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="row" label="排" name="row">
                    <a-input v-model:value="formState.row" placeholder="请输入排" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="col" label="列" name="col">
                    <a-input v-model:value="formState.col" placeholder="请输入列" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="layer" label="层" name="layer">
                    <a-input v-model:value="formState.layer" placeholder="请输入层" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="trackCode" label="巷道号" name="trackCode">
                    <a-input v-model:value="formState.trackCode" placeholder="请输入巷道号" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="channelCode" label="通道号" name="channelCode">
                    <a-input v-model:value="formState.channelCode" placeholder="请输入通道号" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="area" label="位置分区" name="area">
                    <a-input v-model:value="formState.area" placeholder="请输入位置分区" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="channelType" label="通道类型" name="channelType">
                    <a-input v-model:value="formState.channelType" placeholder="请输入通道类型" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="位置状态" name="locStatus">
                    <a-select v-model:value="formState.locStatus" placeholder="请选择位置状态" :options="locStatusOption">
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="存储状态" name="storeStatus">
                    <a-select v-model:value="formState.storeStatus" placeholder="请选择存储状态" :options="storeStatusOption">
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="优先级" name="priority">
                    <a-select v-model:value="formState.priority" placeholder="请选择优先级" :options="locPriority">
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="备注" name="remark">
                    <a-textarea v-model:value="formState.remark" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="Mes工位号" name="ext1">
                    <a-input v-model:value="formState.ext1" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </page-layout>
      </div>
    </a-form>
  </a-modal>
</template>
<script>
    import {
    message
  } from '@hwork/ant-design-vue';
  import {
    edit
  } from "@/api/wms/loc";
  import {
    defineComponent,
    reactive,
    ref,
    toRaw,
    watch
  } from "vue";
  export default defineComponent({
    props: {
      visible: {
        type: Boolean,
      },
      record: {
        type: Object,
      }
    },
    emit: ["close"],
    setup(props, context) {

      const formRef = ref();

      const formState = reactive({});

      const locTypeOption = ref([{
        value: 'Point',
        label: '道路',
      }, {
        value: 'Loc',
        label: '货位',
      }, {
        value: 'Station',
        label: '站台',
      },{
        value: 'Area',
        label: '区域',
      }]);

      const locHighTypeOption = ref([{
        value: 'High',
        label: '高货位',
      }, {
        value: 'Short',
        label: '矮货位',
      }, {
        value: 'None',
        label: '不区分高矮',
      }]);

      const locSizeTypeOption = ref([{
        value: 'Big',
        label: '大货位',
      }, {
        value: 'Small',
        label: '小货位',
      }, {
        value: 'None',
        label: '不区分大小',
      }]);

      const locStatusOption = ref([{
        value: 'Normal',
        label: '正常',
      }, {
        value: 'NoIn',
        label: '禁入',
      }, {
        value: 'NoOut',
        label: '禁出',
      }, {
        value: 'Freeze',
        label: '冻结',
      }]);

      const storeStatusOption = ref([{
        value: 'Free',
        label: '空闲',
      }, {
        value: 'Load',
        label: '载货',
      }, {
        value: 'DoIn',
        label: '预入',
      }, {
        value: 'DoOut',
        label: '预出',
      }, {
        value: 'Fault',
        label: '故障',
      }]);

      const locPriority = ref([{
        value: '2',
        label: '高',
      }, {
        value: '1',
        label: '中',
      }, {
        value: '0',
        label: '低',
      }]);

      watch(props, (props) => {
        formState.id = props.record.id
        formState.locCode = props.record.locCode;
        formState.locName = props.record.locName;
        formState.houseCode = props.record.houseCode;
        formState.houseName = props.record.houseName;
        formState.parentCode = props.record.parentCode;
        formState.locRelation = props.record.locRelation;
        formState.locWcs = props.record.locWcs;
        formState.locType = props.record.locType;
        formState.locHighType = props.record.locHighType;
        formState.locSizeType = props.record.locSizeType;
        formState.row = props.record.row;
        formState.col = props.record.col;
        formState.layer = props.record.layer;
        formState.trackCode = props.record.trackCode;
        formState.channelCode = props.record.channelCode;
        formState.area = props.record.area;
        formState.channelType = props.record.channelType;
        formState.locStatus = props.record.locStatus;
        formState.storeStatus = props.record.storeStatus;
        formState.priority = props.record.priority;
        formState.ext1 =props.record.ext1;
      })

      const formRules = {
        locCode: [{
          required: true,
          message: '请输入locCode(必填)',
          trigger: 'blur'
        }],
        locName: [{
          required: true,
          message: '请输入位置描述(必填)',
          trigger: 'blur'
        }],
        parentCode: [{
          required: true,
          message: '请输入父编号(必填)',
          trigger: 'blur'
        }],
        locWcs: [{
          required: true,
          message: '请输入WCS位置编号(必填)',
          trigger: 'blur'
        }],
        locType: [{
          required: true,
          message: '请输入位置类型(必填)',
          trigger: 'blur'
        }],
        channelType: [{
          required: true,
          message: '请输入通道类型(必填)',
          trigger: 'blur'
        }],
        locStatus: [{
          required: true,
          message: '请输入位置状态(必填)',
          trigger: 'blur'
        }],
        storeStatus: [{
          required: true,
          message: '请输入存储状态(必填)',
          trigger: 'blur'
        }],
      };

      const editKey = "add";

      const submit = (e) => {
        message.loading({
          content: '提交中...',
          key: editKey
        });
        formRef.value
          .validate()
          .then(() => {
            edit(toRaw(formState)).then((response) => {
              if (response.success) {
                message.success({
                  content: '保存成功',
                  key: editKey,
                  duration: 1
                }).then(() => {
                  cancel();
                });
              } else {
                message.error({
                  content: response.msg,
                  key: editKey,
                  duration: 1
                }).then(() => {
                  // cancel();
                });
              }
            });
          })
          .catch(error => {
            console.log('error', error);
          });
      };

      const cancel = (e) => {
        formRef.value.resetFields();
        context.emit("close", false);
      };

      return {

        submit,
        cancel,
        formRef,
        formState,
        formRules,

        locTypeOption,
        locHighTypeOption,
        locSizeTypeOption,
        locStatusOption,
        storeStatusOption,
        locPriority,

        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 12
        },
      };
    },
  });
</script>