fix: 终端UDM数据勾选导出和勾选删除

src/views/neUser/auth/index.vue

@@ -70,6 +70,8 @@ type TabeStateType = {
   seached: boolean;
   /**记录数据 */
   data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
 };
 
 /**表格状态 */
@@ -79,6 +81,7 @@ let tableState: TabeStateType = reactive({
   striped: false,
   seached: true,
   data: [],
+  selectedRowKeys: [],
 });
 
 /**表格字段列 */
@@ -180,6 +183,11 @@ function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
   fnGetList(1);
 }
 
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
@@ -482,36 +490,79 @@ function fnModalCancel() {
 
 /**
  * UDM鉴权用户删除
- * @param row 网元编号ID
+ * @param imsi  编号imsi
  */
-function fnRecordDelete(row: Record<string, any>) {
+function fnRecordDelete(imsi: string) {
+  const neID = queryParams.neId;
+  if (!neID) return;
+  let imsiMsg = imsi;
+  if (imsi === '0') {
+    imsiMsg = `${tableState.selectedRowKeys[0]}... ${t(
+      'views.neUser.auth.numDel'
+    )} ${tableState.selectedRowKeys.length}`;
+    imsi = tableState.selectedRowKeys.join(',');
+  }
+
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.neUser.auth.delSure', { imsi: row.imsi }),
+    content: t('views.neUser.auth.delSure', { imsi: imsiMsg }),
     onOk() {
-      const key = 'delNotice';
-      message.loading({ content: t('common.loading'), key });
-      const neID = queryParams.neId || '-';
-      delAuth(neID, row).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.msgSuccess', { msg: t('common.deleteText') }),
-            key,
-            duration: 2,
-          });
+      modalState.loadDataLoading = true;
+      const hide = message.loading({ content: t('common.loading') });
+      delAuth(neID, imsi)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            const msgContent = t('common.msgSuccess', {
+              msg: t('common.deleteText'),
+            });
+            message.success({
+              content: `${msgContent} : ${imsiMsg}`,
+              duration: 3,
+            });
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
           fnGetList();
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            key: key,
-            duration: 2,
-          });
-        }
-      });
+          modalState.loadDataLoading = false;
+        });
     },
   });
 }
 
+/**
+ * UDM鉴权用户导出
+ */
+function fnRecordExport(type: string = 'txt') {
+  const selectLen = tableState.selectedRowKeys.length;
+  if (selectLen <= 0) return;
+  const rows: Record<string, any>[] = tableState.data.filter(
+    (row: Record<string, any>) =>
+      tableState.selectedRowKeys.indexOf(row.imsi) >= 0
+  );
+
+  let content = '';
+  if (type == 'txt') {
+    for (const row of rows) {
+      content += `${row.imsi},${row.ki},${row.algoIndex},${row.amf},${row.opc}\r\n`;
+    }
+  }
+  if (type == 'csv') {
+    content = `IMSI,ki,Algo Index,AMF,OPC\r\n`;
+    for (const row of rows) {
+      content += `${row.imsi},${row.ki},${row.algoIndex},${row.amf},${row.opc}\r\n`;
+    }
+  }
+
+  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+  saveAs(blob, `UDMAuth_${Date.now()}.${type}`);
+}
+
 /**列表导出 */
 function fnExportList(type: string) {
   const neID = queryParams.neId;
@@ -583,6 +634,10 @@ function fnGetList(pageNum?: number) {
   }
   listAuth(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
       tablePagination.total = res.total;
       tableState.data = res.rows;
     }
@@ -742,6 +797,18 @@ onMounted(() => {
             </template>
             {{ t('views.neUser.auth.batchAddText') }}
           </a-button>
+
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.loadDataLoading"
+            @click.prevent="fnRecordDelete('0')"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('views.neUser.auth.checkDel') }}
+          </a-button>
+
           <a-button
             type="primary"
             danger
@@ -753,6 +820,7 @@ onMounted(() => {
             </template>
             {{ t('views.neUser.auth.batchDelText') }}
           </a-button>
+
           <a-popconfirm
             :title="t('views.neUser.auth.loadDataConfirm')"
             :ok-text="t('common.ok')"
@@ -778,6 +846,7 @@ onMounted(() => {
 
           <a-popconfirm
             :title="t('views.neUser.auth.exportConfirm')"
+            placement="topRight"
             ok-text="TXT"
             ok-type="default"
             @confirm="fnExportList('txt')"
@@ -790,6 +859,26 @@ onMounted(() => {
               {{ t('views.neUser.auth.export') }}
             </a-button>
           </a-popconfirm>
+
+          <a-popconfirm
+            :title="t('views.neUser.auth.checkExportConfirm')"
+            placement="topRight"
+            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
+              type="default"
+              :disabled="tableState.selectedRowKeys.length <= 0"
+            >
+              <template #icon><ExportOutlined /></template>
+              {{ t('views.neUser.auth.checkExport') }}
+            </a-button>
+          </a-popconfirm>
         </div>
       </template>
 
@@ -864,6 +953,11 @@ onMounted(() => {
         :scroll="{ y: 'calc(100vh - 480px)' }"
         @change="fnTableChange"
         @resizeColumn="(w:number, col:any) => (col.width = w)"
+        :row-selection="{
+          type: 'checkbox',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'imsi'">
@@ -881,7 +975,10 @@ onMounted(() => {
               </a-tooltip>
               <a-tooltip>
                 <template #title>{{ t('common.deleteText') }}</template>
-                <a-button type="link" @click.prevent="fnRecordDelete(record)">
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordDelete(record.imsi)"
+                >
                   <template #icon>
                     <DeleteOutlined />
                   </template>