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

src/views/system/config/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 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 {
   exportConfig,
   listConfig,
@@ -182,9 +183,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -195,8 +196,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '参数配置',
   from: {
     configId: undefined,
@@ -253,7 +254,7 @@ function fnModalVisibleByVive(configId: string | number) {
     if (res.code === RESULT_CODE_SUCCESS && res.data) {
       modalState.from = Object.assign(modalState.from, res.data);
       modalState.title = t('views.system.config.viewInfo');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('views.system.config.viewInfoErr'), 2);
     }
@@ -268,7 +269,7 @@ function fnModalVisibleByEdit(configId?: string | number) {
   if (!configId) {
     modalStateFrom.resetFields();
     modalState.title = t('views.system.config.addInfo');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -279,7 +280,7 @@ function fnModalVisibleByEdit(configId?: string | number) {
       if (res.code === RESULT_CODE_SUCCESS && res.data) {
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title = t('views.system.config.editInfo');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('views.system.config.viewInfoErr'), 2);
       }
@@ -308,7 +309,7 @@ function fnModalOk() {
               key,
               duration: 2,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
             fnGetList(1);
           } else {
@@ -333,8 +334,8 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -559,7 +560,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()"
@@ -595,12 +596,12 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </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
@@ -640,7 +641,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -705,12 +706,12 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :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.config.configName')"
@@ -731,7 +732,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.config.configKey')"
@@ -776,7 +777,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -788,7 +789,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.config.configName')"
@@ -818,7 +819,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.config.configKey')"