hgwms-2098 fix 部门管理弹窗修改

src/view/dept/modal/edit.vue

@@ -8,14 +8,14 @@
     @cancel="cancel"
   >
     <a-form
-       ref="formRef"
+      ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
+      layout="vertical"
     >
-      <!-- 当前部门为根部门, 则不提供上级部门选择 -->
-      <a-form-item label="上级" name="parent" v-if="formState.parent != 0 ">
+      <a-col :span="12" v-if="formState.parent != 0">
+        <!-- 当前部门为根部门, 则不提供上级部门选择 -->
+        <a-form-item label="上级" name="parent">
           <a-tree-select
             v-model:value="formState.parent"
             style="width: 100%"
@@ -26,27 +26,38 @@
             :replaceFields="replaceFields"
           >
           </a-tree-select>
-      </a-form-item>
-      <a-form-item ref="name" label="名称" name="name">
-        <a-input v-model:value="formState.name" />
-      </a-form-item>
-      <a-form-item ref="sort" label="排序" name="sort">
-        <a-input-number v-model:value="formState.sort" />
-      </a-form-item>
-      <a-form-item label="状态" name="state">
-        <a-switch v-model:checked="formState.enable" />
-      </a-form-item>
-      <a-form-item ref="address" label="地址" name="address">
-        <a-input v-model:value="formState.address" />
-      </a-form-item>
-      <a-form-item label="备注" name="remark">
-        <a-textarea v-model:value="formState.remark" />
-      </a-form-item>
+        </a-form-item>
+      </a-col>
+      <a-col :span="24">
+        <a-form-item ref="name" label="名称" name="name">
+          <a-input v-model:value="formState.name" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="24">
+        <a-form-item ref="sort" label="排序" name="sort">
+          <a-input-number style="width: 100%" v-model:value="formState.sort" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="24">
+        <a-form-item ref="address" label="地址" name="address">
+          <a-input v-model:value="formState.address" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="24">
+        <a-form-item label="状态" name="state">
+          <a-switch v-model:checked="formState.enable" />
+        </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-form>
   </a-modal>
 </template>
 <script>
-import { message } from '@hwork/ant-design-vue';
+import { message } from "@hwork/ant-design-vue";
 import { edit, tree } from "@/api/module/dept";
 import { defineComponent, reactive, ref, toRaw, watch } from "vue";
 export default defineComponent({
@@ -56,14 +67,13 @@ export default defineComponent({
     },
     record: {
       type: Object,
-    }
+    },
   },
   emit: ["close"],
   setup(props, context) {
-
     const state = reactive({
       depts: [],
-    })
+    });
 
     const formRef = ref();
 
@@ -72,40 +82,42 @@ export default defineComponent({
       enable: true,
     });
 
-    watch(props,(props) => {
-        formState.id = props.record.id
-        formState.name = props.record.name
-        formState.sort = props.record.sort
-        formState.parent = props.record.parent
-        formState.remark = props.record.remark
-        formState.enable = props.record.enable
-        formState.address = props.record.address
-    })
+    watch(props, (props) => {
+      formState.id = props.record.id;
+      formState.name = props.record.name;
+      formState.sort = props.record.sort;
+      formState.parent = props.record.parent;
+      formState.remark = props.record.remark;
+      formState.enable = props.record.enable;
+      formState.address = props.record.address;
+    });
 
     const formRules = {
-      name: [ { required: true, message: '请输入部门名称', trigger: 'blur'} ],
-      address: [ { required: true, message: '请输入详细地址', trigger: 'blur'} ],
-      parent: [ { required: true, message: '请选择上级部门', trigger: 'change'} ]
+      name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
+      address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
+      parent: [
+        { required: true, message: "请选择上级部门", trigger: "change" },
+      ],
     };
 
     const submit = (e) => {
       formRef.value
         .validate()
         .then(() => {
-          edit(toRaw(formState)).then((response)=>{
-              if(response.success){
-                message.success({ content: '保存成功', duration: 1 }).then(()=>{
-                  cancel();
-                });
-              }else{
-                message.success({ content: '保存失败', duration: 1 }).then(()=>{
-                  cancel();
-                });
-              }
+          edit(toRaw(formState)).then((response) => {
+            if (response.success) {
+              message.success({ content: "保存成功", duration: 1 }).then(() => {
+                cancel();
+              });
+            } else {
+              message.success({ content: "保存失败", duration: 1 }).then(() => {
+                cancel();
+              });
+            }
           });
         })
-        .catch(error => {
-          console.log('error', error);
+        .catch((error) => {
+          console.log("error", error);
         });
     };
 
@@ -115,10 +127,10 @@ export default defineComponent({
     };
 
     const loadTree = () => {
-      tree({}).then((response)=>{
+      tree({}).then((response) => {
         state.depts = response.data;
-      })
-    }
+      });
+    };
 
     /// 加载部门
     loadTree();
@@ -134,7 +146,12 @@ export default defineComponent({
       labelCol: { span: 6 },
       wrapperCol: { span: 18 },
 
-      replaceFields: {children:'children', title:'name', key:'id', value: 'id' }
+      replaceFields: {
+        children: "children",
+        title: "name",
+        key: "id",
+        value: "id",
+      },
     };
   },
 });

src/view/dept/modal/info.vue

@@ -11,11 +11,11 @@
        ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
+      layout="vertical"
     >
+    <a-col :span="12" v-if="formState.parent != 0 ">
       <!-- 当前部门为根部门, 则不提供上级部门选择 -->
-      <a-form-item label="上级" name="parent" v-if="formState.parent != 0 ">
+      <a-form-item label="上级" name="parent" >
           <a-tree-select
             v-model:value="formState.parent"
             style="width: 100%"
@@ -27,18 +27,19 @@
           >
           </a-tree-select>
       </a-form-item>
+    </a-col>
       <a-form-item ref="name" label="名称" name="name">
         <a-input v-model:value="formState.name" />
       </a-form-item>
       <a-form-item ref="sort" label="排序" name="sort">
-        <a-input-number v-model:value="formState.sort" />
-      </a-form-item>
-      <a-form-item label="状态" name="state">
-        <a-switch v-model:checked="formState.enable" />
+        <a-input-number style="width: 100%" v-model:value="formState.sort" />
       </a-form-item>
       <a-form-item ref="address" label="地址" name="address">
         <a-input v-model:value="formState.address" />
       </a-form-item>
+      <a-form-item label="状态" name="state">
+        <a-switch v-model:checked="formState.enable" />
+      </a-form-item>
       <a-form-item label="备注" name="remark">
         <a-textarea v-model:value="formState.remark" />
       </a-form-item>

src/view/dept/modal/save.vue

@@ -8,44 +8,60 @@
     @cancel="cancel"
   >
     <a-form
-       ref="formRef"
+      ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
+      layout="vertical"
     >
-      <a-form-item label="上级" name="parent">
-          <a-tree-select
-            v-model:value="formState.parent"
-            style="width: 100%"
-            :tree-data="state.depts"
-            placeholder="所属部门"
-            replace
-            tree-default-expand-all
-            :replaceFields="replaceFields"
-          >
-          </a-tree-select>
-      </a-form-item>
-      <a-form-item ref="name" label="名称" name="name">
-        <a-input v-model:value="formState.name" />
-      </a-form-item>
-      <a-form-item ref="sort" label="排序" name="sort">
-        <a-input-number v-model:value="formState.sort" />
-      </a-form-item>
-      <a-form-item label="状态" name="state">
-        <a-switch v-model:checked="formState.enable" />
-      </a-form-item>
-      <a-form-item ref="address" label="地址" name="address">
-        <a-input v-model:value="formState.address" />
-      </a-form-item>
-      <a-form-item label="备注" name="remark">
-        <a-textarea v-model:value="formState.remark" />
-      </a-form-item>
+      <a-row :gutter="[16, 0]">
+        <a-col :span="12">
+          <a-form-item label="上级" name="parent">
+            <a-tree-select
+              v-model:value="formState.parent"
+              style="width: 100%"
+              :tree-data="state.depts"
+              placeholder="所属部门"
+              replace
+              tree-default-expand-all
+              :replaceFields="replaceFields"
+            >
+            </a-tree-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item ref="name" label="名称" name="name">
+            <a-input v-model:value="formState.name" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item ref="sort" label="排序" name="sort">
+            <a-input-number
+              style="width: 100%"
+              v-model:value="formState.sort"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item ref="address" label="地址" name="address">
+            <a-input v-model:value="formState.address" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="状态" name="state">
+            <a-switch v-model:checked="formState.enable" />
+          </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 { message } from '@hwork/ant-design-vue';
+import { message } from "@hwork/ant-design-vue";
 import { save, tree } from "@/api/module/dept";
 import { defineComponent, reactive, ref, toRaw } from "vue";
 export default defineComponent({
@@ -56,10 +72,9 @@ export default defineComponent({
   },
   emit: ["close"],
   setup(props, context) {
-
     const state = reactive({
       depts: [],
-    })
+    });
 
     const formRef = ref();
 
@@ -69,29 +84,31 @@ export default defineComponent({
     });
 
     const formRules = {
-      name: [ { required: true, message: '请输入部门名称', trigger: 'blur'} ],
-      address: [ { required: true, message: '请输入详细地址', trigger: 'blur'} ],
-      parent: [ { required: true, message: '请选择上级部门', trigger: 'change'} ]
+      name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
+      address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
+      parent: [
+        { required: true, message: "请选择上级部门", trigger: "change" },
+      ],
     };
 
     const submit = (e) => {
       formRef.value
         .validate()
         .then(() => {
-          save(toRaw(formState)).then((response)=>{
-              if(response.success){
-                message.success({ content: '保存成功', duration: 1 }).then(()=>{
-                  cancel();
-                });
-              }else{
-                message.success({ content: '保存失败', duration: 1 }).then(()=>{
-                  cancel();
-                });
-              }
+          save(toRaw(formState)).then((response) => {
+            if (response.success) {
+              message.success({ content: "保存成功", duration: 1 }).then(() => {
+                cancel();
+              });
+            } else {
+              message.success({ content: "保存失败", duration: 1 }).then(() => {
+                cancel();
+              });
+            }
           });
         })
-        .catch(error => {
-          console.log('error', error);
+        .catch((error) => {
+          console.log("error", error);
         });
     };
 
@@ -101,10 +118,10 @@ export default defineComponent({
     };
 
     const loadTree = () => {
-      tree({}).then((response)=>{
+      tree({}).then((response) => {
         state.depts = response.data;
-      })
-    }
+      });
+    };
 
     /// 加载部门
     loadTree();
@@ -120,7 +137,12 @@ export default defineComponent({
       labelCol: { span: 6 },
       wrapperCol: { span: 18 },
 
-      replaceFields: {children:'children', title:'name', key:'id', value: 'id' }
+      replaceFields: {
+        children: "children",
+        title: "name",
+        key: "id",
+        value: "id",
+      },
     };
   },
 });