fix: 导出带取消操作按钮

src/views/neUser/auth/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, notification } 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, notification } 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 UploadModal from '@/components/UploadModal/index.vue';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import useNeInfoStore from '@/store/modules/neinfo';
@@ -184,11 +185,11 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**批量新增新增框是否显示 */
-  visibleByBatch: boolean;
+  openByBatch: boolean;
   /**批量新增删除框是否显示 */
-  visibleByBatchDel: boolean;
+  openByBatchDel: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -203,9 +204,9 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
-  visibleByBatch: false,
-  visibleByBatchDel: false,
+  openByEdit: false,
+  openByBatch: false,
+  openByBatchDel: false,
   title: 'UDM鉴权用户',
   from: {
     num: 1,
@@ -271,7 +272,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
   if (!row) {
     modalStateFrom.resetFields(); //重置表单
     modalState.title = t('common.addText') + t('views.neUser.auth.authInfo');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -283,7 +284,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
           modalState.from = Object.assign(modalState.from, res.data);
           modalState.title =
             t('common.editText') + t('views.neUser.auth.authInfo');
-          modalState.visibleByEdit = true;
+          modalState.openByEdit = true;
         } else {
           message.error(t('common.getInfoFail'), 2);
         }
@@ -303,7 +304,7 @@ function fnModalVisibleByBatch() {
   modalStateBatchDelFrom.resetFields(); //重置表单
   modalState.title =
     t('views.neUser.auth.batchDelText') + t('views.neUser.auth.authInfo');
-  modalState.visibleByBatchDel = true;
+  modalState.openByBatchDel = true;
 }
 
 /**
@@ -349,7 +350,7 @@ function fnModalOk() {
                 fnGetList(1);
               }, timerS * 1000);
             }
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
           } else {
             if (from.num === 1) {
@@ -396,7 +397,7 @@ function fnBatchDelModalOk() {
             duration: timerS,
           });
           setTimeout(() => {
-            modalState.visibleByBatchDel = false;
+            modalState.openByBatchDel = false;
             modalState.confirmLoading = false;
             modalStateBatchDelFrom.resetFields();
             fnGetList(1);
@@ -421,7 +422,7 @@ function fnBatchDelModalOk() {
  * 进行表达规则校验
  */
 function fnBatchDelModalCancel() {
-  modalState.visibleByBatchDel = false;
+  modalState.openByBatchDel = false;
   modalStateBatchDelFrom.resetFields();
 }
 
@@ -430,7 +431,7 @@ function fnBatchDelModalCancel() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalStateFrom.resetFields();
 }
 
@@ -598,7 +599,7 @@ function fnGetList(pageNum?: number) {
 /**对话框表格信息导入对象信息状态类型 */
 type ModalUploadImportStateType = {
   /**是否显示 */
-  visible: boolean;
+  open: boolean;
   /**标题 */
   title: string;
   /**是否上传中 */
@@ -613,7 +614,7 @@ type ModalUploadImportStateType = {
 
 /**对话框表格信息导入对象信息状态 */
 let uploadImportState: ModalUploadImportStateType = reactive({
-  visible: false,
+  open: false,
   title: t('components.UploadModal.uploadTitle'),
   loading: false,
   msg: '',
@@ -639,12 +640,12 @@ function fnModalUploadImportOpen() {
   uploadImportState.from.typeVal = 'default';
   uploadImportState.from.typeData = undefined;
   uploadImportState.loading = false;
-  uploadImportState.visible = true;
+  uploadImportState.open = true;
 }
 
 /**对话框表格信息导入关闭窗口 */
 function fnModalUploadImportClose() {
-  uploadImportState.visible = false;
+  uploadImportState.open = false;
   fnGetList(1);
 }
 
@@ -776,7 +777,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-flex wrap="wrap" gap="small">
           <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
             <template #icon>
               <PlusOutlined />
@@ -825,9 +826,6 @@ onMounted(() => {
             ok-text="TXT"
             ok-type="default"
             @confirm="fnExportList('txt')"
-            :show-cancel="false"
-            cancel-text="CSV"
-            @cancel="fnExportList('csv')"
           >
             <a-button type="dashed">
               <template #icon><ExportOutlined /></template>
@@ -852,9 +850,6 @@ onMounted(() => {
             ok-text="TXT"
             ok-type="default"
             @confirm="fnRecordExport('txt')"
-            :show-cancel="false"
-            cancel-text="CSV"
-            @cancel="fnRecordExport('csv')"
             :disabled="tableState.selectedRowKeys.length <= 0"
           >
             <a-button
@@ -865,12 +860,12 @@ onMounted(() => {
               {{ t('views.neUser.auth.checkExport') }}
             </a-button>
           </a-popconfirm>
-        </div>
+        </a-flex>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -915,7 +910,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -974,7 +969,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -986,7 +981,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :labelWrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.neUser.auth.numAdd')"
@@ -1004,7 +999,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="IMSI"
@@ -1025,7 +1020,7 @@ onMounted(() => {
                       {{ t('views.neUser.auth.imsiTip2') }}<br />
                       {{ t('views.neUser.auth.imsiTip3') }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -1041,7 +1036,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               label="AMF"
@@ -1058,7 +1053,7 @@ onMounted(() => {
                     <template #title>
                       {{ t('views.neUser.auth.amfTip') }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -1082,7 +1077,7 @@ onMounted(() => {
                     <template #title>
                       {{ t('views.neUser.auth.algoIndexTip') }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input-number>
@@ -1108,7 +1103,7 @@ onMounted(() => {
                 <template #title>
                   {{ t('views.neUser.auth.kiTip') }}
                 </template>
-                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
               </a-tooltip>
             </template>
           </a-input>
@@ -1131,7 +1126,7 @@ onMounted(() => {
                 <template #title>
                   {{ t('views.neUser.auth.opcTip') }}
                 </template>
-                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
               </a-tooltip>
             </template>
           </a-input>
@@ -1145,7 +1140,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByBatchDel"
+      :open="modalState.openByBatchDel"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnBatchDelModalOk"
@@ -1157,7 +1152,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :labelWrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
               :label="t('views.neUser.auth.startIMSI')"
@@ -1177,7 +1172,7 @@ onMounted(() => {
                       {{ t('views.neUser.auth.imsiTip2') }}<br />
                       {{ t('views.neUser.auth.imsiTip3') }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -1208,7 +1203,7 @@ onMounted(() => {
       :loading="uploadImportState.loading"
       @upload="fnModalUploadImportUpload"
       @close="fnModalUploadImportClose"
-      v-model:visible="uploadImportState.visible"
+      v-model:open="uploadImportState.open"
       :ext="['.txt']"
       :size="10"
     >

src/views/neUser/sub/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, notification } 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, notification } 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 UploadModal from '@/components/UploadModal/index.vue';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import useNeInfoStore from '@/store/modules/neinfo';
@@ -218,13 +219,13 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**批量新增否显示 */
-  visibleByBatch: boolean;
+  openByBatch: boolean;
   /**批量删除否显示 */
-  visibleByBatchDel: boolean;
+  openByBatchDel: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -239,10 +240,10 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  visibleByBatch: false,
-  visibleByBatchDel: false,
+  openByView: false,
+  openByEdit: false,
+  openByBatch: false,
+  openByBatchDel: false,
   title: 'UDM签约用户',
   from: {
     id: undefined,
@@ -377,7 +378,7 @@ function fnModalVisibleByBatch() {
   modalStateBatchDelFrom.resetFields(); //重置表单
   modalState.title =
     t('views.neUser.sub.batchDelText') + t('views.neUser.sub.subInfo');
-  modalState.visibleByBatchDel = true;
+  modalState.openByBatchDel = true;
 }
 
 /**
@@ -388,7 +389,7 @@ function fnModalVisibleByEdit(imsi?: string) {
   if (!imsi) {
     modalStateFrom.resetFields();
     modalState.title = t('common.addText') + t('views.neUser.sub.subInfo');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -438,7 +439,7 @@ function fnModalVisibleByEdit(imsi?: string) {
 
           modalState.title =
             t('common.editText') + t('views.neUser.sub.subInfo');
-          modalState.visibleByEdit = true;
+          modalState.openByEdit = true;
         } else {
           message.error(t('common.getInfoFail'), 2);
         }
@@ -715,7 +716,7 @@ function fnBatchDelModalOk() {
             duration: timerS,
           });
           setTimeout(() => {
-            modalState.visibleByBatchDel = false;
+            modalState.openByBatchDel = false;
             modalState.confirmLoading = false;
             modalStateBatchDelFrom.resetFields();
             fnGetList(1);
@@ -740,8 +741,8 @@ function fnBatchDelModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
   modalStateFrom.resetFields();
   bigRows.value = [
     {
@@ -772,8 +773,8 @@ function fnModalCancel() {
  * 进行表达规则校验
  */
 function fnBatchDelModalCancel() {
-  modalState.visibleByBatchDel = false;
-  modalState.visibleByView = false;
+  modalState.openByBatchDel = false;
+  modalState.openByView = false;
   modalStateBatchDelFrom.resetFields();
 }
 
@@ -964,7 +965,7 @@ function fnGetList(pageNum?: number) {
 /**对话框表格信息导入对象信息状态类型 */
 type ModalUploadImportStateType = {
   /**是否显示 */
-  visible: boolean;
+  open: boolean;
   /**标题 */
   title: string;
   /**是否上传中 */
@@ -975,7 +976,7 @@ type ModalUploadImportStateType = {
 
 /**对话框表格信息导入对象信息状态 */
 let uploadImportState: ModalUploadImportStateType = reactive({
-  visible: false,
+  open: false,
   title: t('components.UploadModal.uploadTitle'),
   loading: false,
   msg: '',
@@ -985,12 +986,12 @@ let uploadImportState: ModalUploadImportStateType = reactive({
 function fnModalUploadImportOpen() {
   uploadImportState.msg = '';
   uploadImportState.loading = false;
-  uploadImportState.visible = true;
+  uploadImportState.open = true;
 }
 
 /**对话框表格信息导入关闭窗口 */
 function fnModalUploadImportClose() {
-  uploadImportState.visible = false;
+  uploadImportState.open = false;
   fnGetList();
 }
 
@@ -1166,7 +1167,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-flex wrap="wrap" gap="small">
           <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
             <template #icon>
               <PlusOutlined />
@@ -1219,9 +1220,6 @@ onMounted(() => {
             ok-text="TXT"
             ok-type="default"
             @confirm="fnExportList('txt')"
-            :show-cancel="false"
-            cancel-text="CSV"
-            @cancel="fnExportList('csv')"
           >
             <a-button type="dashed">
               <template #icon>
@@ -1248,9 +1246,6 @@ onMounted(() => {
             ok-text="TXT"
             ok-type="default"
             @confirm="fnRecordExport('txt')"
-            :show-cancel="false"
-            cancel-text="CSV"
-            @cancel="fnRecordExport('csv')"
             :disabled="tableState.selectedRowKeys.length <= 0"
           >
             <a-button
@@ -1261,12 +1256,12 @@ onMounted(() => {
               {{ t('views.neUser.sub.checkExport') }}
             </a-button>
           </a-popconfirm>
-        </div>
+        </a-flex>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -1311,7 +1306,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -1383,10 +1378,10 @@ onMounted(() => {
       :width="800"
       :destroyOnClose="true"
       style="top: 0px"
-      :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
+      :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -1398,7 +1393,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :labelWrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.neUser.sub.numAdd')"
@@ -1417,7 +1412,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               label="IMSI"
@@ -1438,7 +1433,7 @@ onMounted(() => {
                       {{ t('views.neUser.sub.imsiTip2') }}<br />
                       {{ t('views.neUser.sub.imsiTip3') }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -1460,7 +1455,7 @@ onMounted(() => {
                     <template #title>
                       {{ t('views.neUser.sub.msisdnTip', { num: '32' }) }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -1496,7 +1491,7 @@ onMounted(() => {
         ></a-divider>
         <!-- 大数组布局 -->
         <div v-for="(row, index) in bigRows" :key="String(row.id)">
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="6" :md="6" :xs="24">
               <a-form-item
                 label="SST"
@@ -1520,7 +1515,7 @@ onMounted(() => {
               </a-form-item>
             </a-col>
             <a-col :lg="10" :md="10" :xs="24">
-              <a-row :gutter="8">
+              <a-row>
                 <a-col :span="4">
                   <a-tooltip title="Add DNN">
                     <a-button shape="circle" @click="addSmallRow(row.id)">
@@ -1544,7 +1539,7 @@ onMounted(() => {
             v-for="(smallRow, smallIndex) in row.smallRows"
             :key="String(smallRow.id)"
           >
-            <a-row :gutter="16">
+            <a-row>
               <a-col :lg="6" :md="7" :xs="24">
                 <a-form-item
                   label="DNN/APN"
@@ -1594,7 +1589,7 @@ onMounted(() => {
             <template #header>
               <a-divider orientation="left" style="margin: -2px">5G</a-divider>
             </template>
-            <a-row :gutter="16">
+            <a-row>
               <a-col :lg="24" :md="24" :xs="24">
                 <a-form-item
                   label="5GC Flag"
@@ -1628,7 +1623,7 @@ onMounted(() => {
                           {{ t('views.neUser.sub.inputTip', { num: '50' }) }}
                         </template>
                         <InfoCircleOutlined
-                          style="color: rgba(0, 0, 0, 0.45)"
+                          style="opacity: 0.45; color: inherit"
                         />
                       </a-tooltip>
                     </template>
@@ -1652,7 +1647,7 @@ onMounted(() => {
                           {{ t('views.neUser.sub.inputTip', { num: '50' }) }}
                         </template>
                         <InfoCircleOutlined
-                          style="color: rgba(0, 0, 0, 0.45)"
+                          style="opacity: 0.45; color: inherit"
                         />
                       </a-tooltip>
                     </template>
@@ -1675,7 +1670,7 @@ onMounted(() => {
                           {{ t('views.neUser.sub.inputTip', { num: '50' }) }}
                         </template>
                         <InfoCircleOutlined
-                          style="color: rgba(0, 0, 0, 0.45)"
+                          style="opacity: 0.45; color: inherit"
                         />
                       </a-tooltip>
                     </template>
@@ -1695,7 +1690,7 @@ onMounted(() => {
                           {{ t('views.neUser.sub.arfbTip') }}
                         </template>
                         <InfoCircleOutlined
-                          style="color: rgba(0, 0, 0, 0.45)"
+                          style="opacity: 0.45; color: inherit"
                         />
                       </a-tooltip>
                     </template>
@@ -1719,7 +1714,7 @@ onMounted(() => {
                           {{ t('views.neUser.sub.inputTip', { num: '50' }) }}
                         </template>
                         <InfoCircleOutlined
-                          style="color: rgba(0, 0, 0, 0.45)"
+                          style="opacity: 0.45; color: inherit"
                         />
                       </a-tooltip>
                     </template>
@@ -1742,7 +1737,7 @@ onMounted(() => {
                           {{ t('views.neUser.sub.sarTip') }}
                         </template>
                         <InfoCircleOutlined
-                          style="color: rgba(0, 0, 0, 0.45)"
+                          style="opacity: 0.45; color: inherit"
                         />
                       </a-tooltip>
                     </template>
@@ -1790,7 +1785,7 @@ onMounted(() => {
                           {{ t('views.neUser.sub.ueTypeTip') }}
                         </template>
                         <InfoCircleOutlined
-                          style="color: rgba(0, 0, 0, 0.45)"
+                          style="opacity: 0.45; color: inherit"
                         />
                       </a-tooltip>
                     </template>
@@ -1812,7 +1807,7 @@ onMounted(() => {
                           {{ t('views.neUser.sub.rfspTip') }}
                         </template>
                         <InfoCircleOutlined
-                          style="color: rgba(0, 0, 0, 0.45)"
+                          style="opacity: 0.45; color: inherit"
                         />
                       </a-tooltip>
                     </template>
@@ -1826,7 +1821,7 @@ onMounted(() => {
             <template #header>
               <a-divider orientation="left" style="margin: -2px">4G</a-divider>
             </template>
-            <a-row :gutter="16">
+            <a-row>
               <a-col :lg="24" :md="24" :xs="24">
                 <a-form-item
                   label="4G EPS Flag"
@@ -1860,7 +1855,7 @@ onMounted(() => {
                           {{ t('views.neUser.sub.inputTip', { num: '50' }) }}
                         </template>
                         <InfoCircleOutlined
-                          style="color: rgba(0, 0, 0, 0.45)"
+                          style="opacity: 0.45; color: inherit"
                         />
                       </a-tooltip>
                     </template>
@@ -1868,7 +1863,7 @@ onMounted(() => {
                 </a-form-item>
               </a-col>
             </a-row>
-            <a-row :gutter="16">
+            <a-row>
               <a-col :lg="24" :md="24" :xs="24">
                 <a-form-item
                   label="4G Static IP"
@@ -1882,7 +1877,7 @@ onMounted(() => {
                           {{ t('views.neUser.sub.staticIpTip') }}
                         </template>
                         <InfoCircleOutlined
-                          style="color: rgba(0, 0, 0, 0.45)"
+                          style="opacity: 0.45; color: inherit"
                         />
                       </a-tooltip>
                     </template>
@@ -1897,7 +1892,7 @@ onMounted(() => {
                     <template #title>
                       {{ t('views.neUser.sub.contextIdTip') }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -1985,7 +1980,7 @@ onMounted(() => {
       style="top: 0px"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByBatchDel"
+      :open="modalState.openByBatchDel"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnBatchDelModalOk"
@@ -1997,7 +1992,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :labelWrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
               :label="t('views.neUser.sub.startIMSI')"
@@ -2017,7 +2012,7 @@ onMounted(() => {
                       {{ t('views.neUser.sub.imsiTip2') }}<br />
                       {{ t('views.neUser.sub.imsiTip3') }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -2048,7 +2043,7 @@ onMounted(() => {
       :loading="uploadImportState.loading"
       @upload="fnModalUploadImportUpload"
       @close="fnModalUploadImportClose"
-      v-model:visible="uploadImportState.visible"
+      v-model:open="uploadImportState.open"
       :ext="['.txt']"
       :size="10"
     >