hgwms-2098 fix 物料分类弹窗修改

src/view/wms/baseInfo/skuCategory/modal/edit.vue

@@ -1,114 +1,156 @@
 <template>
-  <a-modal :open="visible" title="修改" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel">
+  <a-modal
-    <a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
+    :open="visible"
+    title="修改"
+    cancelText="取消"
+    okText="提交"
+    @ok="submit"
+    @cancel="cancel"
+  >
+    <a-form
+      ref="formRef"
+      :model="formState"
+      :rules="formRules"
+      layout="vertical"
+    >
+      <a-row :gutter="[16, 0]">
+        <a-col :span="12">
           <a-form-item ref="categoryCode" label="种类编号" name="categoryCode">
-      <a-input v-model:value="formState.categoryCode"  placeholder="请输入种类编号"/>
+            <a-input
+              v-model:value="formState.categoryCode"
+              placeholder="请输入种类编号"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="categoryName" label="种类名称" name="categoryName">
-      <a-input v-model:value="formState.categoryName"  placeholder="请输入种类名称"/>
+            <a-input
+              v-model:value="formState.categoryName"
+              placeholder="请输入种类名称"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="categoryDesc" label="种类描述" name="categoryDesc">
-       <a-input v-model:value="formState.categoryDesc" placeholder="请输入种类描述"/>
+            <a-input
+              v-model:value="formState.categoryDesc"
+              placeholder="请输入种类描述"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="treeLevel" label="树层级" name="treeLevel">
-       <a-input v-model:value="formState.treeLevel" placeholder="请输入树层级"/>
+            <a-input
+              v-model:value="formState.treeLevel"
+              placeholder="请输入树层级"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="treeCode" label="树编号" name="treeCode">
-       <a-input v-model:value="formState.treeCode" placeholder="请输入树编号"/>
+            <a-input
+              v-model:value="formState.treeCode"
+              placeholder="请输入树编号"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="isActive" label="是否有效" name="isActive">
-       <a-select v-model:value="formState.isActive"  :options="skuCategoryIsActive"  laceholder="请选择是否有效"/>
+            <a-select
+              v-model:value="formState.isActive"
+              :options="skuCategoryIsActive"
+              laceholder="请选择是否有效"
+            />
           </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>
   </a-modal>
 </template>
 <script>
-    import {
+import { message } from "@hwork/ant-design-vue";
-    message
+import { edit } from "@/api/wms/skuCategory";
-  } from '@hwork/ant-design-vue';
+import { defineComponent, reactive, ref, toRaw, watch } from "vue";
-  import {
+export default defineComponent({
-    edit
-  } from "@/api/wms/skuCategory";
-  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 skuCategoryIsActive = ref([{
+    const skuCategoryIsActive = ref([
-        value: '1',
+      {
-        label: '是',
+        value: "1",
-      }, {
+        label: "是",
-        value: '0',
+      },
-        label: '否',
+      {
-      }, ]);
+        value: "0",
+        label: "否",
+      },
+    ]);
 
     watch(props, (props) => {
-        formState.id = props.record.id
+      formState.id = props.record.id;
-        formState.categoryName = props.record.categoryName
+      formState.categoryName = props.record.categoryName;
-        formState.categoryDesc = props.record.categoryDesc
+      formState.categoryDesc = props.record.categoryDesc;
-        formState.categoryCode = props.record.categoryCode
+      formState.categoryCode = props.record.categoryCode;
-        formState.treeLevel = props.record.treeLevel
+      formState.treeLevel = props.record.treeLevel;
-        formState.treeCode = props.record.treeCode
+      formState.treeCode = props.record.treeCode;
-        formState.fullTreeCode = props.record.fullTreeCode
+      formState.fullTreeCode = props.record.fullTreeCode;
-        formState.isActive = props.record.isActive
+      formState.isActive = props.record.isActive;
-        formState.remark = props.record.remark
+      formState.remark = props.record.remark;
-      })
+    });
 
-      const formRules = {
+    const formRules = {};
-      };
 
     const editKey = "add";
 
     const submit = (e) => {
       message.loading({
-          content: '提交中...',
+        content: "提交中...",
-          key: editKey
+        key: editKey,
       });
       formRef.value
         .validate()
         .then(() => {
           edit(toRaw(formState)).then((response) => {
             if (response.success) {
-                message.success({
+              message
-                  content: '保存成功',
+                .success({
+                  content: "保存成功",
                   key: editKey,
-                  duration: 1
+                  duration: 1,
-                }).then(() => {
+                })
+                .then(() => {
                   cancel();
                 });
             } else {
-                message.success({
+              message
-                  content: '保存失败',
+                .success({
+                  content: "保存失败",
                   key: editKey,
-                  duration: 1
+                  duration: 1,
-                }).then(() => {
+                })
+                .then(() => {
                   cancel();
                 });
             }
           });
         })
-          .catch(error => {
+        .catch((error) => {
-            console.log('error', error);
+          console.log("error", error);
         });
     };
 
@@ -118,7 +160,6 @@
     };
 
     return {
-
       submit,
       cancel,
       formRef,
@@ -127,12 +168,12 @@
       skuCategoryIsActive,
 
       labelCol: {
-          span: 8
+        span: 8,
       },
       wrapperCol: {
-          span: 12
+        span: 12,
       },
     };
   },
-  });
+});
 </script>

src/view/wms/baseInfo/skuCategory/modal/save.vue

@@ -1,45 +1,84 @@
 <template>
-  <a-modal :open="visible" title="新增" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel">
+  <a-modal
-    <a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
+    :open="visible"
+    title="新增"
+    cancelText="取消"
+    okText="提交"
+    @ok="submit"
+    @cancel="cancel"
+  >
+    <a-form
+      ref="formRef"
+      :model="formState"
+      :rules="formRules"
+      layout="vertical"
+    >
+      <a-row :gutter="[16, 0]">
+        <a-col :span="12">
           <a-form-item ref="categoryCode" label="种类编号" name="categoryCode">
-        <a-input v-model:value="formState.categoryCode" placeholder="请输入种类编号" />
+            <a-input
+              v-model:value="formState.categoryCode"
+              placeholder="请输入种类编号"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="categoryName" label="种类名称" name="categoryName">
-        <a-input v-model:value="formState.categoryName" placeholder="请输入种类名称" />
+            <a-input
+              v-model:value="formState.categoryName"
+              placeholder="请输入种类名称"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="categoryDesc" label="种类描述" name="categoryDesc">
-        <a-input v-model:value="formState.categoryDesc" placeholder="请输入种类描述" />
+            <a-input
+              v-model:value="formState.categoryDesc"
+              placeholder="请输入种类描述"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="treeLevel" label="树层级" name="treeLevel">
-        <a-input v-model:value="formState.treeLevel" placeholder="请输入树层级" />
+            <a-input
+              v-model:value="formState.treeLevel"
+              placeholder="请输入树层级"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="treeCode" label="树编号" name="treeCode">
-        <a-input v-model:value="formState.treeCode" placeholder="请输入树编号" />
+            <a-input
+              v-model:value="formState.treeCode"
+              placeholder="请输入树编号"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="isActive" label="是否有效" name="isActive">
-        <a-select v-model:value="formState.isActive" :options="skuCategoryIsActive" :disabled="false" placeholder="请选择是否有效" />
+            <a-select
+              v-model:value="formState.isActive"
+              :options="skuCategoryIsActive"
+              :disabled="false"
+              placeholder="请选择是否有效"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item label="备注" name="remark">
-        <a-textarea v-model:value="formState.remark"/>
+            <a-textarea v-model:value="formState.remark" />
           </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
   </a-modal>
 </template>
 <script>
-    import {
+import { message } from "@hwork/ant-design-vue";
-    message
+import { save } from "@/api/wms/skuCategory";
-  } from '@hwork/ant-design-vue';
-  import {
-    save
-  } from "@/api/wms/skuCategory";
 
-  import {
+import { defineComponent, reactive, ref, toRaw } from "vue";
-    defineComponent,
+export default defineComponent({
-    reactive,
-    ref,
-    toRaw
-  } from "vue";
-  export default defineComponent({
   props: {
     visible: {
       type: Boolean,
@@ -47,88 +86,107 @@
   },
   emit: ["close"],
   setup(props, context) {
-
     const formRef = ref();
 
     const formState = reactive({
       isActive: "1",
     });
 
-      const skuCategoryIsActive = ref([{
+    const skuCategoryIsActive = ref([
-        value: '1',
+      {
-        label: '是',
+        value: "1",
-      }]);
+        label: "是",
+      },
+    ]);
 
     const formRules = {
-        categoryCode: [{
+      categoryCode: [
+        {
           required: true,
-          message: '请输入种类编号',
+          message: "请输入种类编号",
-          trigger: 'blur'
+          trigger: "blur",
-        }],
+        },
-        categoryName: [{
+      ],
+      categoryName: [
+        {
           required: true,
-          message: '请输入种类名称',
+          message: "请输入种类名称",
-          trigger: 'blur'
+          trigger: "blur",
-        }],
+        },
-        categoryDesc: [{
+      ],
+      categoryDesc: [
+        {
           required: true,
-          message: '请输入种类描述',
+          message: "请输入种类描述",
-          trigger: 'blur'
+          trigger: "blur",
-        }],
+        },
-        treeLevel: [{
+      ],
+      treeLevel: [
+        {
           required: true,
-          message: '请输入树层级',
+          message: "请输入树层级",
-          trigger: 'blur'
+          trigger: "blur",
-        }],
+        },
-        treeCode: [{
+      ],
+      treeCode: [
+        {
           required: true,
-          message: '请输入树编号',
+          message: "请输入树编号",
-          trigger: 'blur'
+          trigger: "blur",
-        }],
+        },
-        fullTreeCode: [{
+      ],
+      fullTreeCode: [
+        {
           required: true,
-          message: '请输入全树编号',
+          message: "请输入全树编号",
-          trigger: 'blur'
+          trigger: "blur",
-        }],
+        },
-        isActive: [{
+      ],
+      isActive: [
+        {
           required: true,
-          message: '是否有效',
+          message: "是否有效",
-          trigger: 'blur'
+          trigger: "blur",
-        }],
+        },
+      ],
     };
 
     const saveKey = "save";
 
     const submit = (e) => {
       message.loading({
-          content: '提交中...',
+        content: "提交中...",
-          key: saveKey
+        key: saveKey,
       });
       formRef.value
         .validate()
         .then(() => {
           save(toRaw(formState)).then((response) => {
             if (response.success) {
-                message.success({
+              message
-                  content: '保存成功',
+                .success({
+                  content: "保存成功",
                   key: saveKey,
-                  duration: 1
+                  duration: 1,
-                }).then(() => {
+                })
+                .then(() => {
                   cancel();
                 });
             } else {
-                message.success({
+              message
-                  content: '保存失败',
+                .success({
+                  content: "保存失败",
                   key: saveKey,
-                  duration: 1
+                  duration: 1,
-                }).then(() => {
+                })
+                .then(() => {
                   cancel();
                 });
             }
           });
         })
-          .catch(error => {
+        .catch((error) => {
-            console.log('error', error);
+          console.log("error", error);
         });
     };
 
@@ -146,12 +204,12 @@
       skuCategoryIsActive,
 
       labelCol: {
-          span: 8
+        span: 8,
       },
       wrapperCol: {
-          span: 12
+        span: 12,
       },
     };
   },
-  });
+});
 </script>