hgwms-2098 fix 物料主档弹窗修改

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

@@ -1,19 +1,69 @@
 <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="skuCode" label="物料编号" name="skuCode">
-        <a-input v-model:value="formState.skuCode" placeholder="请输入物料编号" :disabled="true"/>
+            <a-input
+              v-model:value="formState.skuCode"
+              placeholder="请输入物料编号"
+              :disabled="true"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="skuName" label="物料名称" name="skuName">
-        <a-input v-model:value="formState.skuName" placeholder="请输入物料名称" />
+            <a-input
+              v-model:value="formState.skuName"
+              placeholder="请输入物料名称"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="ABC分类" name="abc">
+            <a-select
+              v-model:value="formState.abc"
+              :options="skuAbc"
+              placeholder="请选择ABC分类"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item ref="baseUnit" label="库存单位" name="baseUnit">
+            <a-input
+              v-model:value="formState.baseUnit"
+              placeholder="请选择库存单位"
+              :disabled="true"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item ref="remark" label="备注" name="remark">
+            <a-textarea
+              v-model:value="formState.remark"
+              laceholder="请输入备注"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
       <!-- <a-form-item ref="barCode" label="条码" name="barCode">
         <a-input v-model:value="formState.barCode" placeholder="请输入条码" />
       </a-form-item> -->
-     <a-form-item label="ABC分类" name="abc">
+
-        <a-select v-model:value="formState.abc" :options="skuAbc" placeholder="请选择ABC分类">
-        </a-select>
-      </a-form-item>
       <!-- <a-form-item ref="categoryCode" label="种类编号" name="categoryCode">
         <a-input v-model:value="formState.categoryCode" placeholder="请选择种类编号" />
       </a-form-item> -->
@@ -23,9 +73,7 @@
           <a-select-option value="原材料">原材料</a-select-option>
         </a-select>
       </a-form-item> -->
-      <a-form-item ref="baseUnit" label="库存单位" name="baseUnit">
+
-        <a-input v-model:value="formState.baseUnit" placeholder="请选择库存单位" :disabled="true" />
-      </a-form-item>
       <!-- <a-form-item ref="primaryUnit" label="换算单位" name="primaryUnit">
         <a-input v-model:value="formState.primaryUnit" placeholder="请选择换算单位" />
       </a-form-item> -->
@@ -52,140 +100,134 @@
       <!-- <a-form-item ref="expire" label="有效期" name="expire">
         <a-input-number v-model:value="formState.expire" placeholder="请选择有效期" style="width: 100%" />
       </a-form-item> -->
-<!--
+      <!--
       <a-form-item label="使用标志" name="useFlag">
         <a-switch v-model:checked="formState.useFlag" checked-children="启用" un-checked-children="禁用"/>
       </a-form-item> -->
-
-      <a-form-item ref="remark" label="备注" name="remark">
-        <a-textarea v-model:value="formState.remark" laceholder="请输入备注" />
-      </a-form-item>
     </a-form>
   </a-modal>
 </template>
 <script>
-    import {
+import { message } from "@hwork/ant-design-vue";
-    message
+import { edit } from "@/api/wms/sku";
-  } from '@hwork/ant-design-vue';
+import { defineComponent, reactive, ref, toRaw, watch } from "vue";
-  import {
+export default defineComponent({
-    edit
-  } from "@/api/wms/sku";
-  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({});
 
     watch(props, (props) => {
-        formState.id = props.record.id
+      formState.id = props.record.id;
-        formState.skuCode = props.record.skuCode
+      formState.skuCode = props.record.skuCode;
-        formState.skuName = props.record.skuName
+      formState.skuName = props.record.skuName;
-        formState.barCode = props.record.barCode
+      formState.barCode = props.record.barCode;
-        formState.abc = props.record.abc
+      formState.abc = props.record.abc;
-        formState.categoryCode = props.record.categoryCode
+      formState.categoryCode = props.record.categoryCode;
-        formState.categoryName = props.record.categoryName
+      formState.categoryName = props.record.categoryName;
-        formState.baseUnit = props.record.baseUnit
+      formState.baseUnit = props.record.baseUnit;
-        formState.primaryUnit = props.record.primaryUnit
+      formState.primaryUnit = props.record.primaryUnit;
-        formState.ext3 = props.record.ext3
+      formState.ext3 = props.record.ext3;
-        formState.stackType = props.record.stackType
+      formState.stackType = props.record.stackType;
-        formState.ext1 = props.record.ext1
+      formState.ext1 = props.record.ext1;
-        formState.ext2 = props.record.ext2
+      formState.ext2 = props.record.ext2;
-        formState.fullQty = props.record.fullQty
+      formState.fullQty = props.record.fullQty;
-        formState.expire = props.record.expire
+      formState.expire = props.record.expire;
-        formState.useFlag = props.record.useFlag
+      formState.useFlag = props.record.useFlag;
-
+    });
-      })
 
     const formRules = {};
 
     const editKey = "add";
 
-      const skuAbc = ref([{
+    const skuAbc = ref([
-        value: 'A类',
+      {
-        label: 'A类',
+        value: "A类",
-      }, {
+        label: "A类",
-        value: 'B类',
-        label: 'B类',
-      }, {
-        value: 'C类',
-        label: 'C类',
-      }]);
-
-      const skuCategoryName = ref([{
-          value: '成品',
-          label: '成品',
       },
       {
-          value: '原材料',
+        value: "B类",
-          label: '原材料',
+        label: "B类",
+      },
+      {
+        value: "C类",
+        label: "C类",
       },
     ]);
 
-      const skuPrimaryUnit = ref([{
+    const skuCategoryName = ref([
-          value: '台',
+      {
-          label: '台',
+        value: "成品",
+        label: "成品",
       },
       {
-          value: '箱',
+        value: "原材料",
-          label: '箱',
+        label: "原材料",
+      },
+    ]);
+
+    const skuPrimaryUnit = ref([
+      {
+        value: "台",
+        label: "台",
       },
       {
-          value: '盒',
+        value: "箱",
-          label: '盒',
+        label: "箱",
+      },
+      {
+        value: "盒",
+        label: "盒",
       },
     ]);
 
     const valueChanged = (e) => {
-        formState.ext3 = (formState.ext3).toFixed(2);
+      formState.ext3 = formState.ext3.toFixed(2);
-      }
+    };
 
     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);
         });
     };
 
@@ -195,7 +237,6 @@
     };
 
     return {
-
       submit,
       cancel,
       formRef,
@@ -207,12 +248,12 @@
       skuPrimaryUnit,
 
       labelCol: {
-          span: 8
+        span: 8,
       },
       wrapperCol: {
-          span: 12
+        span: 12,
       },
     };
   },
-  });
+});
 </script>

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

@@ -1,17 +1,17 @@
 <template>
-  <a-modal :open="visible" title="新增物料信息" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel" :width='1000'>
+  <a-modal :open="visible" title="新增物料信息" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel" :width='720'>
-    <a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
+    <a-form ref="formRef" :model="formState" :rules="formRules" layout="vertical">
       <div>
         <page-layout>
-          <a-row :gutter="[0, 0]">
+          <!-- <a-row :gutter="[0, 0]"> -->
-            <a-col :span="24">
+            <!-- <a-col :span="24"> -->
-              <a-row>
+              <a-row :gutter="[16, 0]">
-                <a-col :span="8">
+                <a-col :span="12">
                   <a-form-item ref="skuCode" label="物料编号" name="skuCode">
                     <a-input v-model:value="formState.skuCode" placeholder="请输入物料编号" />
                   </a-form-item>
                 </a-col>
-                <a-col :span="8">
+                <a-col :span="12">
                   <a-form-item ref="skuName" label="物料名称" name="skuName">
                     <a-input v-model:value="formState.skuName" placeholder="请输入物料名称" />
                   </a-form-item>
@@ -28,14 +28,14 @@
                   </a-col> -->
 
               </a-row>
-              <a-row>
+              <a-row :gutter="[16, 0]">
-                <a-col :span="8">
+                <a-col :span="12">
                   <a-form-item label="ABC分类" name="abc">
                     <a-select v-model:value="formState.abc" :options="skuAbc" placeholder="请选择ABC分类">
                     </a-select>
                   </a-form-item>
                 </a-col>
-                <a-col :span="8">
+                <a-col :span="12">
                   <a-form-item ref="categoryCode" label="物料种类" name="categoryCode">
                     <a-select v-model:value="formState.categoryCode" show-search placeholder="请选择物料种类"
                       style="width: 100%" :default-active-first-option="false" :show-arrow="false"
@@ -47,11 +47,16 @@
                     </a-select>
                   </a-form-item>
                 </a-col>
-                <a-col :span="8">
+                <a-col :span="12">
                   <a-form-item ref="baseUnit" label="库存单位" name="baseUnit">
                     <a-input v-model:value="formState.baseUnit" placeholder="请选择库存单位" :disabled="true" />
                   </a-form-item>
                 </a-col>
+                <a-col :span="12">
+                  <a-form-item label="使用标志" name="useFlag">
+                    <a-switch v-model:checked="formState.useFlag" checked-children="启用" un-checked-children="禁用" />
+                  </a-form-item>
+                </a-col>
               </a-row>
               <!-- <a-row>
                 <a-col :span="8">
@@ -101,19 +106,15 @@
                     <a-input-number v-model:value="formState.expire" placeholder="请选择有效期" style="width: 100%" />
                   </a-form-item>
                 </a-col> -->
-                <a-col :span="8">
+                
-                  <a-form-item label="使用标志" name="useFlag">
+                <a-col :span="24">
-                    <a-switch v-model:checked="formState.useFlag" checked-children="启用" un-checked-children="禁用" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="8">
                   <a-form-item ref="remark" label="备注" name="remark">
                     <a-textarea v-model:value="formState.remark" laceholder="请输入备注" />
                   </a-form-item>
                 </a-col>
               </a-row>
-            </a-col>
+            <!-- </a-col> -->
-          </a-row>
+          <!-- </a-row> -->
         </page-layout>
       </div>
       <!-- <a-form-item ref="skuCode" label="物料编号" name="skuCode">