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

src/views/traceManage/pcap/file.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { Modal, message } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { Modal, message } from 'ant-design-vue/es';
 import { parseDateToStr } from '@/utils/date-utils';
 import { getNeFile, listNeFiles } from '@/api/tool/neFile';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -275,7 +275,7 @@ function fnGetList(pageNum?: number) {
 
 /**抽屉状态 */
 const viewDrawerState = reactive({
-  visible: false,
+  open: false,
   /**文件路径 /var/log/amf.log */
   filePath: '',
   /**网元类型 */
@@ -289,7 +289,7 @@ function fnDrawerOpen(row: Record<string, any>) {
   viewDrawerState.filePath = [...nePathArr.value, row.fileName].join('/');
   viewDrawerState.neType = neTypeSelect.value[0];
   viewDrawerState.neId = neTypeSelect.value[1];
-  viewDrawerState.visible = !viewDrawerState.visible;
+  viewDrawerState.open = !viewDrawerState.open;
 }
 
 onMounted(() => {
@@ -315,51 +315,39 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-form :model="queryParams" name="queryParams" layout="horizontal">
-          <a-row :gutter="16" :wrap="true">
+        <a-row :gutter="16" :wrap="true" align="middle">
+          <a-col>
+            <a-button type="default" @click.prevent="fnClose()">
+              <template #icon><CloseOutlined /></template>
+              {{ t('common.close') }}
+            </a-button>
+          </a-col>
+          <a-col>
+            <span>{{ t('views.logManage.neFile.neType') }}:</span>&nbsp;
+            <a-cascader
+              v-model:value="neTypeSelect"
+              :options="neInfoStore.getNeCascaderOptions"
+              @change="fnNeChange"
+              :allow-clear="false"
+              :placeholder="t('views.logManage.neFile.neTypePlease')"
+              :disabled="downLoading || tableState.loading"
+            />
+          </a-col>
+          <template v-if="nePathArr.length > 0">
+            <span>{{ t('views.logManage.neFile.nePath') }}:</span>&nbsp;
             <a-col>
-              <a-form-item style="margin-bottom: 0">
-                <a-button type="default" @click.prevent="fnClose()">
-                  <template #icon><CloseOutlined /></template>
-                  {{ t('common.close') }}
-                </a-button>
-              </a-form-item>
+              <a-breadcrumb>
+                <a-breadcrumb-item
+                  v-for="(path, index) in nePathArr"
+                  :key="path"
+                  @click="fnDirCD(path, index)"
+                >
+                  {{ path }}
+                </a-breadcrumb-item>
+              </a-breadcrumb>
             </a-col>
-            <a-col>
-              <a-form-item
-                :label="t('views.logManage.neFile.neType')"
-                name="neType"
-                style="margin-bottom: 0"
-              >
-                <a-cascader
-                  v-model:value="neTypeSelect"
-                  :options="neInfoStore.getNeCascaderOptions"
-                  @change="fnNeChange"
-                  :allow-clear="false"
-                  :placeholder="t('views.logManage.neFile.neTypePlease')"
-                  :disabled="downLoading || tableState.loading"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col v-if="nePathArr.length > 0">
-              <a-form-item
-                :label="t('views.logManage.neFile.nePath')"
-                name="configName"
-                style="margin-bottom: 0"
-              >
-                <a-breadcrumb>
-                  <a-breadcrumb-item
-                    v-for="(path, index) in nePathArr"
-                    :key="path"
-                    @click="fnDirCD(path, index)"
-                  >
-                    {{ path }}
-                  </a-breadcrumb-item>
-                </a-breadcrumb>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
+          </template>
+        </a-row>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -433,7 +421,7 @@ onMounted(() => {
 
     <!-- 文件内容查看抽屉 -->
     <ViewDrawer
-      v-model:visible="viewDrawerState.visible"
+      v-model:open="viewDrawerState.open"
       :file-path="viewDrawerState.filePath"
       :ne-type="viewDrawerState.neType"
       :ne-id="viewDrawerState.neId"

src/views/traceManage/pcap/index.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, reactive } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { message, Modal } from 'ant-design-vue/lib';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { PageContainer } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
 import { dumpStart, dumpStop, traceUPF } from '@/api/trace/pcap';
 import { listAllNeInfo } from '@/api/ne/neInfo';
 import { getNeDirZip, getNeFile, getNeViewFile } from '@/api/tool/neFile';
@@ -63,7 +64,7 @@ type ModalStateType = {
     stop: string;
   }[];
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**详情框内容 */
   viewFrom: {
     neType: string;
@@ -112,7 +113,7 @@ let modalState: ModalStateType = reactive({
       stop: 'pcap dispatch trace off',
     },
   ],
-  visibleByView: false,
+  openByView: false,
   viewFrom: {
     neType: '',
     neId: '',
@@ -526,7 +527,7 @@ function fnModalVisibleByVive(id: string | number) {
   modalState.viewFrom.path = path;
   modalState.viewFrom.files = [...files];
   fnViveTab(files[0]);
-  modalState.visibleByView = true;
+  modalState.openByView = true;
 }
 
 /**对话框tab查看 */
@@ -559,7 +560,7 @@ function fnViveTab(action: any) {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByView = false;
+  modalState.openByView = false;
   modalState.viewFrom.action = '';
   modalState.viewFrom.files = [];
 }
@@ -751,7 +752,7 @@ onMounted(() => {
       :fullscreen="true"
       :borderDraw="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :footer="false"
       :maskClosable="false"
       :keyboard="false"