feat: 页面调整组件属性升级

src/views/system/role/index.vue

@@ -2,10 +2,11 @@
 import { useRouter, useRoute } from 'vue-router';
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   exportRole,
   addRole,
@@ -21,7 +22,7 @@ import { roleDeptTreeSelect } from '@/api/system/dept';
 import { saveAs } from 'file-saver';
 import { parseDateToStr } from '@/utils/date-utils';
 import useDictStore from '@/store/modules/dict';
-import { DataNode } from 'ant-design-vue/lib/tree';
+import { DataNode } from 'ant-design-vue/es/tree';
 import { parseTreeKeys, parseTreeNodeKeys } from '@/utils/parse-tree-utils';
 import { hasPermissions } from '@/plugins/auth-user';
 import { MENU_PATH_INLINE } from '@/constants/menu-constants';
@@ -225,11 +226,11 @@ let deptTree: TreeDataType = {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**分配角色数据权限修改框是否显示 */
-  visibleByDataScope: boolean;
+  openByDataScope: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -244,9 +245,9 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  visibleByDataScope: false,
+  openByView: false,
+  openByEdit: false,
+  openByDataScope: false,
   title: '角色',
   from: {
     roleId: undefined,
@@ -330,7 +331,7 @@ function fnModalVisibleByVive(roleId: string | number) {
         modalState.from.menuIds = checkedKeys;
       }
       modalState.title = t('views.system.role.roleInfo');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('common.getInfoFail'), 2);
     }
@@ -347,7 +348,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
     if (menuTree.treeData.length > 0) {
       modalState.menuTree.treeData = menuTree.treeData;
       modalState.title = t('common.addText') + t('views.system.role.roleInfo');
-      modalState.visibleByEdit = true;
+      modalState.openByEdit = true;
     } else {
       if (modalState.confirmLoading) return;
       const hide = message.loading(t('common.loading'), 0);
@@ -363,7 +364,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
           modalState.menuTree.treeData = res.data;
           modalState.title =
             t('common.addText') + t('views.system.role.roleInfo');
-          modalState.visibleByEdit = true;
+          modalState.openByEdit = true;
         }
       });
     }
@@ -388,7 +389,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
         }
         modalState.title =
           t('common.editText') + t('views.system.role.roleInfo');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -417,7 +418,7 @@ function fnModalOk() {
               key,
               duration: 2,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
             fnGetList(1);
           } else {
@@ -442,9 +443,9 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
-  modalState.visibleByDataScope = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
+  modalState.openByDataScope = false;
   modalStateFrom.resetFields();
   modalState.menuTree.checkedKeys = [];
   modalState.menuTree.expandedKeys = [];
@@ -527,7 +528,7 @@ function fnModalOkDataScope() {
           content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 2,
         });
-        modalState.visibleByDataScope = false;
+        modalState.openByDataScope = false;
         modalStateFrom.resetFields();
       } else {
         message.error({
@@ -569,7 +570,7 @@ function fnRecordDataScope(roleId: string | number) {
           modalState.from.deptIds = checkedKeys;
         }
         modalState.title = t('views.system.role.distribute');
-        modalState.visibleByDataScope = true;
+        modalState.openByDataScope = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -823,7 +824,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button
             type="primary"
             @click.prevent="fnModalVisibleByEdit()"
@@ -850,7 +851,7 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -1003,12 +1004,12 @@ onMounted(() => {
       :drag="true"
       :width="800"
       :destroyOnClose="false"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.role.roleId')" name="roleId">
               {{ modalState.from.roleId }}
@@ -1025,7 +1026,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleSort')"
@@ -1046,7 +1047,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleName')"
@@ -1109,7 +1110,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -1121,7 +1122,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleName')"
@@ -1149,7 +1150,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleKey')"
@@ -1164,7 +1165,7 @@ onMounted(() => {
                         {{ t('views.system.role.roleKeyTip') }}
                       </div>
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -1254,7 +1255,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByDataScope"
+      :open="modalState.openByDataScope"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOkDataScope"
@@ -1266,7 +1267,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.role.roleId')" name="roleId">
               {{ modalState.from.roleId }}
@@ -1283,7 +1284,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleSort')"
@@ -1304,7 +1305,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleName')"