hgwms-2098 fix 租户管理弹窗修改

src/view/tenant/modal/edit.vue

@@ -11,19 +11,25 @@
       ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
+      layout="vertical"
-      :wrapper-col="wrapperCol">
+    >
-      <a-form-item ref="name" label="名称" name="name">
+      <a-row :gutter="[16, 0]">
-        <a-input v-model:value="formState.name" />
+        <a-col :span="24">
-      </a-form-item>
+          <a-form-item ref="name" label="名称" name="name">
-      <a-form-item label="备注" name="describe">
+            <a-input v-model:value="formState.name" />
-        <a-textarea v-model:value="formState.describe" />
+          </a-form-item>
-      </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="备注" name="describe">
+            <a-textarea v-model:value="formState.describe" />
+          </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 { edit } from "@/api/module/tenant";
 import { defineComponent, reactive, ref, toRaw, watch } from "vue";
 
@@ -35,25 +41,26 @@ export default defineComponent({
     },
     record: {
       type: Object,
-    }
+    },
   },
   emit: ["close"],
   setup(props, context) {
-
     const formRef = ref();
 
     let formState = reactive({});
 
     const formRules = {
       name: [{ required: true, message: "请输入租户名称", trigger: "blur" }],
-      describe: [{ required: true, message: "请输入租户描述", trigger: "blur" }],
+      describe: [
+        { required: true, message: "请输入租户描述", trigger: "blur" },
+      ],
     };
 
-    watch(props,(props) => {
+    watch(props, (props) => {
-        formState.id = props.record.id
+      formState.id = props.record.id;
-        formState.name = props.record.name
+      formState.name = props.record.name;
-        formState.describe = props.record.describe
+      formState.describe = props.record.describe;
-    })
+    });
 
     const submit = (e) => {
       message.loading({
@@ -65,21 +72,25 @@ export default defineComponent({
         .then(() => {
           edit(toRaw(formState)).then((response) => {
             if (response.success) {
-              message.success({
+              message
-                content: "保存成功",
+                .success({
-                key,
+                  content: "保存成功",
-                duration: 1,
+                  key,
-              }).then(()=>{
+                  duration: 1,
-                cancel();
+                })
-              });
+                .then(() => {
+                  cancel();
+                });
             } else {
-              message.error({
+              message
-                content: "保存失败",
+                .error({
-                key,
+                  content: "保存失败",
-                duration: 1,
+                  key,
-              }).then(()=>{
+                  duration: 1,
-                cancel();
+                })
-              });
+                .then(() => {
+                  cancel();
+                });
             }
           });
         })

src/view/tenant/modal/give.vue

@@ -1,21 +1,19 @@
 <template>
-  <a-modal
+  <a-drawer :open="visible" title="权限配置">
-    :open="visible"
+    <a-tree
-    title="权限配置"
+      style="padding: 0 6px"
-    cancelText="取消"
+      checkable
-    okText="保存"
+      checkStrictly
-    @ok="submit"
+      show-line="true"
-    @cancel="cancel"
+      :tree-data="state.powers"
-  >
+      :replace-fields="state.powerReplaceFields"
-       <a-tree
+      v-model:checkedKeys="state.checkedPowerIds"
-          checkable
+    />
-          checkStrictly
+    <template #footer>
-          show-line="true"
+      <a-button @click="cancel">取消</a-button>
-          :tree-data="state.powers"
+      <a-button type="primary" @click="submit">保存</a-button>
-          :replace-fields="state.powerReplaceFields"
+    </template>
-          v-model:checkedKeys="state.checkedPowerIds"
+  </a-drawer>
-        />
-  </a-modal>
 </template>
 <script>
 import { message } from "@hwork/ant-design-vue";
@@ -33,10 +31,9 @@ export default defineComponent({
   },
   emit: ["close"],
   setup(props, context) {
-
     const state = reactive({
       powers: [],
-      checkedPowerIds: {checked:[]},
+      checkedPowerIds: { checked: [] },
       powerReplaceFields: { key: "id" },
     });
 
@@ -61,19 +58,20 @@ export default defineComponent({
     const submit = (e) => {
       give({
         tenantId: props.record.id,
-        powerIds: state.checkedPowerIds.checked?state.checkedPowerIds.checked:state.checkedPowerIds}).then(
+        powerIds: state.checkedPowerIds.checked
-        (response) => {
+          ? state.checkedPowerIds.checked
-          if (response.success) {
+          : state.checkedPowerIds,
-            message.success({ content: "保存成功", duration: 1 }).then(() => {
+      }).then((response) => {
-              cancel();
+        if (response.success) {
-            });
+          message.success({ content: "保存成功", duration: 1 }).then(() => {
-          } else {
+            cancel();
-            message.error({ content: "保存失败", duration: 1 }).then(() => {
+          });
-              cancel();
+        } else {
-            });
+          message.error({ content: "保存失败", duration: 1 }).then(() => {
-          }
+            cancel();
+          });
         }
-      );
+      });
     };
 
     const cancel = (e) => {

src/view/tenant/modal/info.vue

@@ -11,14 +11,20 @@
       ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
+      layout="vertical"
-      :wrapper-col="wrapperCol">
+    >
-      <a-form-item ref="name" label="名称" name="name">
+      <a-row :gutter="[16, 0]">
-        <a-input v-model:value="formState.name" />
+        <a-col :span="24">
-      </a-form-item>
+          <a-form-item ref="name" label="名称" name="name">
-      <a-form-item label="备注" name="describe">
+            <a-input v-model:value="formState.name" />
-        <a-textarea v-model:value="formState.describe" />
+          </a-form-item>
-      </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="备注" name="describe">
+            <a-textarea v-model:value="formState.describe" />
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
   </a-modal>
 </template>
@@ -33,25 +39,26 @@ export default defineComponent({
     },
     record: {
       type: Object,
-    }
+    },
   },
   emit: ["close"],
   setup(props, context) {
-
     const formRef = ref();
 
     let formState = reactive({});
 
     const formRules = {
       name: [{ required: true, message: "请输入租户名称", trigger: "blur" }],
-      describe: [{ required: true, message: "请输入租户描述", trigger: "blur" }],
+      describe: [
+        { required: true, message: "请输入租户描述", trigger: "blur" },
+      ],
     };
 
-    watch(props,(props) => {
+    watch(props, (props) => {
-        formState.id = props.record.id
+      formState.id = props.record.id;
-        formState.name = props.record.name
+      formState.name = props.record.name;
-        formState.describe = props.record.describe
+      formState.describe = props.record.describe;
-    })
+    });
 
     const submit = (e) => {
       formRef.value.resetFields();

src/view/tenant/modal/save.vue

@@ -1,18 +1,14 @@
 <template>
-  <a-modal
+  <a-drawer
     :open="visible"
     title="新增租户"
-    cancelText="取消"
-    okText="提交"
-    @ok="submit"
-    @cancel="cancel"
   >
     <a-form
       ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
+      layout="vertical"
-      :wrapper-col="wrapperCol"
+      style="padding: 0 6px"
     >
       <a-tabs v-model:activeKey="state.active">
         <a-tab-pane key="0" tab="租户信息">
@@ -43,7 +39,11 @@
         </a-tab-pane>
       </a-tabs>
     </a-form>
-  </a-modal>
+    <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";