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

src/views/faultManage/history-alarm/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 } 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 } 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 {
   listAct,
   updateConfirm,
@@ -262,13 +263,13 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**显示过滤设置是否显示 */
-  visibleByShowSet: boolean;
+  openByShowSet: boolean;
   /**个性化设置置是否显示 */
-  visibleByMyselfSet: boolean;
+  openByMyselfSet: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -281,10 +282,10 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  visibleByShowSet: false,
-  visibleByMyselfSet: false,
+  openByView: false,
+  openByEdit: false,
+  openByShowSet: false,
+  openByMyselfSet: false,
   title: '全部信息',
   from: {
     alarmId: '',
@@ -336,7 +337,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
   modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
     alarmId: row.alarmId,
   });
-  modalState.visibleByView = true;
+  modalState.openByView = true;
 }
 
 /**
@@ -351,7 +352,7 @@ function fnModalOk() {
       duration: 3,
     });
     modalState.confirmLoading = false;
-    modalState.visibleByView = false;
+    modalState.openByView = false;
     return false;
   }
   const result = updateConfirm(from);
@@ -363,7 +364,7 @@ function fnModalOk() {
           content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 3,
         });
-        modalState.visibleByView = false;
+        modalState.openByView = false;
         fnGetList();
       } else {
         message.error({
@@ -430,13 +431,16 @@ function fnCancelConfirm() {
 function mapKeysWithReduce(data: any[], titleMapping: Record<string, string>) {
   return data.map((item: any) => {
     if (typeof item !== 'object' || item === null) {
-      return item; 
+      return item;
     }
-    return Object.keys(item).reduce((newItem: Record<string, any>, key: string) => {
-      const title = titleMapping[key] || key;
-      newItem[title] = item[key];
-      return newItem;
-    }, {}); 
+    return Object.keys(item).reduce(
+      (newItem: Record<string, any>, key: string) => {
+        const title = titleMapping[key] || key;
+        newItem[title] = item[key];
+        return newItem;
+      },
+      {}
+    );
   });
 }
 
@@ -518,9 +522,9 @@ function fnExportAll() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
-  modalState.visibleByShowSet = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
+  modalState.openByShowSet = false;
 }
 
 /**查询列表, pageNum初始页数 */
@@ -644,7 +648,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -684,7 +688,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -805,7 +809,7 @@ onMounted(() => {
           onChange: onSelectChange,
         }"
         :pagination="tablePagination"
-        :scroll="{ x: 2500, y: 400 }"
+        :scroll="{ x: tableColumns.length * 120, y: 400 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'origSeverity'">
@@ -853,7 +857,7 @@ onMounted(() => {
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -865,7 +869,7 @@ onMounted(() => {
         layout="horizontal"
         :label-col="{ span: 8 }"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -884,7 +888,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.faultManage.activeAlarm.neId')"
@@ -903,7 +907,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.faultManage.activeAlarm.neType')"
@@ -922,7 +926,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.faultManage.activeAlarm.alarmTitle')"
@@ -941,7 +945,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.faultManage.activeAlarm.pvFlag')"
@@ -968,7 +972,7 @@ onMounted(() => {
         >
           {{ modalState.from.locationInfo }}
         </a-form-item>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.province')"
@@ -1009,7 +1013,7 @@ onMounted(() => {
         >
           {{ modalState.from.specificProblem }}
         </a-form-item>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.clearType')"
@@ -1028,7 +1032,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.faultManage.activeAlarm.ackUser')"
@@ -1047,7 +1051,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.faultManage.activeAlarm.ackTime')"