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

src/views/system/role/auth-user.vue

@@ -2,10 +2,10 @@
 import { useRoute, useRouter } from 'vue-router';
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } 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 { message, Modal } 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 AuthUserSelect from './components/auth-user-select.vue';
 import { authUserAllocatedList, authUserChecked } from '@/api/system/role';
 import { parseDateToStr } from '@/utils/date-utils';
@@ -176,14 +176,14 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**选择用户框是否显示 */
-  visibleBySelectUser: boolean;
+  openBySelectUser: boolean;
   /**标题 */
   title: string;
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleBySelectUser: false,
+  openBySelectUser: false,
   title: t('views.system.role.distributeUser'),
 });
 
@@ -191,7 +191,7 @@ let modalState: ModalStateType = reactive({
  * 对话框弹出显示为 选择用户
  */
 function fnModalVisibleBySelectUser() {
-  modalState.visibleBySelectUser = true;
+  modalState.openBySelectUser = true;
 }
 
 /**
@@ -211,7 +211,7 @@ function fnModalOk(userIds: string[] | number[]) {
     roleId: roleId,
   }).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
-      modalState.visibleBySelectUser = false;
+      modalState.openBySelectUser = false;
       message.success({
         content: t('views.system.role.suss', {
           oper: t('views.system.role.giveUser'),
@@ -390,7 +390,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="default" @click.prevent="fnClose()">
             <template #icon><CloseOutlined /></template>
             {{ t('common.cancel') }}
@@ -413,12 +413,12 @@ onMounted(() => {
             <template #icon><UsergroupDeleteOutlined /></template>
             {{ t('views.system.role.batchCancel') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -458,7 +458,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -505,7 +505,7 @@ onMounted(() => {
     <AuthUserSelect
       :role-id="roleId"
       :title="modalState.title"
-      v-model:visible="modalState.visibleBySelectUser"
+      v-model:open="modalState.openBySelectUser"
       @ok="fnModalOk"
     />
   </PageContainer>