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

src/views/traceManage/task/analyze.vue

@@ -2,7 +2,7 @@
 import { onBeforeUnmount, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
+import { message, Modal } from 'ant-design-vue/es';
 import DissectionTree from '../tshark/components/DissectionTree.vue';
 import DissectionDump from '../tshark/components/DissectionDump.vue';
 import PacketTable from '../tshark/components/PacketTable.vue';
@@ -50,7 +50,7 @@ let downLoading = ref<boolean>(false);
 /**信息文件下载 */
 function fnDownloadFile() {
   if (downLoading.value) return;
-  const fileName = `trace_${traceId.value}.pcap`
+  const fileName = `trace_${traceId.value}.pcap`;
   Modal.confirm({
     title: t('common.tipTitle'),
     content: t('views.logManage.neFile.downTip', { fileName }),
@@ -248,7 +248,7 @@ onBeforeUnmount(() => {
         :onScrollBottom="handleScrollBottom"
       ></PacketTable>
 
-      <a-row :gutter="20">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree

src/views/traceManage/task/index.vue

@@ -2,10 +2,11 @@
 import { reactive, onMounted, toRaw, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, 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 { Form, 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 { parseDateToStr } from '@/utils/date-utils';
 import { MENU_PATH_INLINE } from '@/constants/menu-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -268,7 +269,7 @@ function fnGetList(pageNum?: number) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**网元类型设备对象 */
@@ -305,8 +306,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '',
   neType: [],
   neTypeInterface: [],
@@ -452,11 +453,11 @@ function fnSelectInterfaceInit(neType: string) {
  * 对话框弹出显示为 新增或者修改
  * @param noticeId 网元id, 不传为新增
  */
-function fnModalVisibleByEdit(id?: string) {
+function fnModalOpenByEdit(id?: string) {
   if (!id) {
     fnModalCancel();
     modalState.title = t('views.traceManage.task.addTask');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -479,7 +480,7 @@ function fnModalVisibleByEdit(id?: string) {
           fnSelectInterfaceInit(res.data.neType);
         }
         modalState.title = t('views.traceManage.task.editTask');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('views.traceManage.task.errorTaskInfo'), 3);
       }
@@ -541,7 +542,7 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   modalState.timeRangePicker = ['', ''];
@@ -676,7 +677,7 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+          <a-button type="primary" @click.prevent="fnModalOpenByEdit()">
             <template #icon><PlusOutlined /></template>
             {{ t('common.addText') }}
           </a-button>
@@ -767,7 +768,7 @@ onMounted(() => {
                 <template #title>{{ t('common.editText') }}</template>
                 <a-button
                   type="link"
-                  @click.prevent="fnModalVisibleByEdit(record.id)"
+                  @click.prevent="fnModalOpenByEdit(record.id)"
                 >
                   <template #icon><FormOutlined /></template>
                 </a-button>
@@ -803,7 +804,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -815,7 +816,7 @@ onMounted(() => {
         :label-col="{ span: 4 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.ne.common.neType')"
@@ -917,12 +918,12 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.traceManage.task.signalPortTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                 </a-tooltip>
               </template>
             </a-input-number>
           </a-form-item>
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.traceManage.task.srcIp')"
@@ -940,7 +941,7 @@ onMounted(() => {
                       <template #title>
                         <div>{{ t('views.traceManage.task.srcIpTip') }}</div>
                       </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -963,7 +964,7 @@ onMounted(() => {
                       <template #title>
                         <div>{{ t('views.traceManage.task.dstIpTip') }}</div>
                       </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -989,7 +990,7 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.traceManage.task.imsiTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -1009,7 +1010,7 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.traceManage.task.msisdnTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                 </a-tooltip>
               </template>
             </a-input>