feat: PCF补充增加online和offline字段，导出有取消操作

src/views/neUser/pcf/index.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form, TableColumnsType } from 'ant-design-vue/lib';
+import { ProModal } from 'antdv-pro-modal';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
+import { message, Modal, Form, TableColumnsType } from 'ant-design-vue/es';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import UploadModal from '@/components/UploadModal/index.vue';
 import {
   listRules,
@@ -103,7 +104,7 @@ let tableColumns = ref<TableColumnsType>([
     title: 'SAR',
     dataIndex: 'sar',
     align: 'left',
-    width: 50,
+    width: 150,
   },
   {
     title: 'RFSP',
@@ -121,34 +122,54 @@ let tableColumns = ref<TableColumnsType>([
     title: 'QoS Audio',
     dataIndex: 'qosAudio',
     align: 'left',
+    width: 100,
+  },
+  {
+    title: 'Online Billing', // 在线计费
+    dataIndex: 'online',
+    align: 'left',
+    width: 120,
+    customRender(opt) {
+      const status = +opt.value;
+      return status ? 'Enable' : 'Disable';
+    },
+  },
+  {
+    title: 'Offline Billing', // 离线计费
+    dataIndex: 'offline',
+    align: 'left',
+    width: 120,
+    customRender(opt) {
+      const status = +opt.value;
+      return status ? 'Enable' : 'Disable';
+    },
+  },
+  {
+    title: 'PCC Rules',
+    dataIndex: 'pccRules',
+    align: 'left',
     resizable: true,
     width: 150,
     minWidth: 100,
     maxWidth: 300,
   },
-  {
-    title: 'PCC Rules',
-    dataIndex: 'pccRules',
-    align: 'left',
-    width: 120,
-  },
   {
     title: 'SESS Rules',
     dataIndex: 'sessRules',
     align: 'left',
-    width: 120,
+    width: 150,
   },
   {
     title: 'HDR Enrich',
     dataIndex: 'hdrEnrich',
     align: 'left',
-    width: 100,
+    width: 150,
   },
   {
     title: 'UE Policy',
     dataIndex: 'uePolicy',
     align: 'left',
-    width: 100,
+    width: 150,
   },
   {
     title: t('common.operate'),
@@ -202,7 +223,7 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -217,7 +238,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '用户策略',
   from: {
     num: 1,
@@ -266,7 +287,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
       if (!row) {
         modalStateFrom.resetFields(); //重置表单
         modalState.title = t('views.neUser.pcf.addTitle');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
         modalState.type = 'add';
       } else {
         if (modalState.confirmLoading) return;
@@ -300,7 +321,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
               modalState.title = t('views.neUser.pcf.updateTitle', {
                 imsi: row.imsi,
               });
-              modalState.visibleByEdit = true;
+              modalState.openByEdit = true;
               modalState.type = 'update';
             } else {
               message.error(t('common.getInfoFail'), 2);
@@ -424,7 +445,7 @@ function fnModalOk() {
 function fnModalCancel() {
   modalState.type = 'add';
   modalState.isBatch = false;
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalStateFrom.resetFields();
 }
 
@@ -444,15 +465,15 @@ function fnModalVisibleByBatch(type: 'delete' | 'add' | 'update') {
       modalState.type = type;
       if (type === 'add') {
         modalState.title = t('views.neUser.pcf.batchAddText');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       }
       if (type === 'update') {
         modalState.title = t('views.neUser.pcf.batchUpdateText');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       }
       if (type === 'delete') {
         modalState.title = t('views.neUser.pcf.batchDelText');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       }
     });
 }
@@ -544,7 +565,7 @@ function fnGetList() {
 /**对话框表格信息导入对象信息状态类型 */
 type ModalUploadImportStateType = {
   /**是否显示 */
-  visible: boolean;
+  open: boolean;
   /**标题 */
   title: string;
   /**是否上传中 */
@@ -555,7 +576,7 @@ type ModalUploadImportStateType = {
 
 /**对话框表格信息导入对象信息状态 */
 let uploadImportState: ModalUploadImportStateType = reactive({
-  visible: false,
+  open: false,
   title: t('components.UploadModal.uploadTitle'),
   loading: false,
   msg: '',
@@ -565,12 +586,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();
 }
 
@@ -708,7 +729,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()">
             <template #icon>
               <PlusOutlined />
@@ -760,21 +781,18 @@ 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>
               {{ t('views.neUser.pcf.export') }}
             </a-button>
           </a-popconfirm>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>
               {{
@@ -825,7 +843,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -883,7 +901,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -930,7 +948,7 @@ onMounted(() => {
                     {{ t('views.neUser.pcf.imsiTip2') }}<br />
                     {{ t('views.neUser.pcf.imsiTip3') }}
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -939,7 +957,7 @@ onMounted(() => {
 
         <template v-else>
           <!--批量数-->
-          <a-row :gutter="16" v-if="modalState.isBatch">
+          <a-row v-if="modalState.isBatch">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.neUser.pcf.batchNum')"
@@ -957,7 +975,7 @@ onMounted(() => {
             </a-col>
           </a-row>
 
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="
@@ -982,7 +1000,9 @@ onMounted(() => {
                         {{ t('views.neUser.pcf.imsiTip2') }}<br />
                         {{ t('views.neUser.pcf.imsiTip3') }}
                       </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined
+                        style="opacity: 0.45; color: inherit"
+                      />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -1007,7 +1027,7 @@ onMounted(() => {
             </a-col>
           </a-row>
 
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="PCC Rules" name="pccRules">
                 <a-select
@@ -1032,7 +1052,7 @@ onMounted(() => {
             </a-col>
           </a-row>
 
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="QoS Audio" name="qosAudio">
                 <a-auto-complete
@@ -1055,7 +1075,7 @@ onMounted(() => {
             </a-col>
           </a-row>
 
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="HDR Enrich" name="hdrEnrich">
                 <a-auto-complete
@@ -1078,7 +1098,9 @@ onMounted(() => {
                       <template #title>
                         {{ t('views.neUser.pcf.ueTip') }}
                       </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined
+                        style="opacity: 0.45; color: inherit"
+                      />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -1086,7 +1108,7 @@ onMounted(() => {
             </a-col>
           </a-row>
 
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="SAR" name="sar">
                 <a-auto-complete
@@ -1111,7 +1133,9 @@ onMounted(() => {
                       <template #title>
                         {{ t('views.neUser.pcf.rfsfTip') }}
                       </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined
+                        style="opacity: 0.45; color: inherit"
+                      />
                     </a-tooltip>
                   </template>
                 </a-input-number>
@@ -1128,7 +1152,7 @@ onMounted(() => {
       :loading="uploadImportState.loading"
       @upload="fnModalUploadImportUpload"
       @close="fnModalUploadImportClose"
-      v-model:visible="uploadImportState.visible"
+      v-model:open="uploadImportState.open"
       :ext="['.txt']"
     >
       <template #default>