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

<template>
  <a-drawer :open="visible" title="编辑货位">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="formRules"
      layout="vertical"
      style="padding: 0 8px"
    >
      <a-row :gutter="[16, 0]">
        <a-col :span="12">
          <a-form-item ref="locCode" label="位置编号" name="locCode">
            <a-input
              v-model:value="formState.locCode"
              placeholder="请输入位置编号"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="locName" label="位置描述" name="locName">
            <a-input
              v-model:value="formState.locName"
              placeholder="请输入位置描述"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="houseCode" label="仓库号" name="houseCode">
            <a-input
              v-model:value="formState.houseCode"
              placeholder="请输入仓库号"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="houseName" label="仓库名称" name="houseName">
            <a-input
              v-model:value="formState.houseName"
              placeholder="请输入仓库名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="parentCode" label="父编号" name="parentCode">
            <a-input
              v-model:value="formState.parentCode"
              placeholder="请输入父编号"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="locRelation" label="关联位置" name="locRelation">
            <a-input
              v-model:value="formState.locRelation"
              placeholder="请输入关联位置"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <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="12">
          <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="12">
          <a-form-item label="货位高矮类型" name="locHighType">
            <a-select
              v-model:value="formState.locHighType"
              placeholder="请选择货位高矮类型"
              :options="locHighTypeOption"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <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="12">
          <a-form-item ref="row" label="排" name="row">
            <a-input v-model:value="formState.row" placeholder="请输入排" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="col" label="列" name="col">
            <a-input v-model:value="formState.col" placeholder="请输入列" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="layer" label="层" name="layer">
            <a-input v-model:value="formState.layer" placeholder="请输入层" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="trackCode" label="巷道号" name="trackCode">
            <a-input
              v-model:value="formState.trackCode"
              placeholder="请输入巷道号"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="channelCode" label="通道号" name="channelCode">
            <a-input
              v-model:value="formState.channelCode"
              placeholder="请输入通道号"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="area" label="位置分区" name="area">
            <a-input
              v-model:value="formState.area"
              placeholder="请输入位置分区"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="channelType" label="通道类型" name="channelType">
            <a-input
              v-model:value="formState.channelType"
              placeholder="请输入通道类型"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="位置状态" name="locStatus">
            <a-select
              v-model:value="formState.locStatus"
              placeholder="请选择位置状态"
              :options="locStatusOption"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <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="12">
          <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="12">
          <a-form-item label="Mes工位号" name="ext1">
            <a-input v-model:value="formState.ext1" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" name="remark">
            <a-textarea v-model:value="formState.remark" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <a-button @click="cancel">取消</a-button>
      <a-button type="primary" @click="submit">提交</a-button>
    </template>
  </a-drawer>
</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) => {
      formRef.value
      .validate()
      .then(() => {
          message.loading({
            content: "提交中...",
            key: editKey,
          });
          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>