feat: 给AMF/MME对应的IMEI白名单添加批量导入和批量删除功能

src/views/ne/neConfig/hooks/useArrayBatchDel.ts

@@ -0,0 +1,84 @@
+import { delNeConfigData } from '@/api/ne/neConfig';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { message } from 'ant-design-vue';
+import { reactive, toRaw } from 'vue';
+
+/**
+ * 批量删除array
+ * @param param 父级传入 { t, neTypeSelect, fnActiveConfigNode }
+ * @returns
+ */
+export default function useArrayBatch({
+  t,
+  neTypeSelect,
+  fnActiveConfigNode,
+}: any) {
+  /**状态属性 */
+  const batchState = reactive({
+    open: false,
+    loading: false, //批量删除
+    paramName: '',
+    startIndex: 1,
+    num: 1,
+  });
+
+  /**对话框表格信息导入弹出窗口 */
+  function modalBatchOpen(paramName: string) {
+    batchState.paramName = paramName;
+    batchState.open = true;
+  }
+  function modalBatchClose() {
+    if (batchState.loading) {
+      message.error({
+        content: 'Delete is in progress, please wait for it to complete',
+        duration: 3,
+      });
+      return;
+    }
+    batchState.open = false;
+    batchState.loading = false;
+    batchState.startIndex = 1;
+    batchState.num = 1;
+    fnActiveConfigNode('#')
+  }
+
+  async function modalBatchOk() {
+    let okNum = 0;
+    let failNum = 0;
+    const endIndex = batchState.startIndex + batchState.num - 1;
+    for (let i = endIndex; i >= batchState.startIndex; i--) {
+      const res = await delNeConfigData({
+        neType: neTypeSelect.value[0],
+        neId: neTypeSelect.value[1],
+        paramName: batchState.paramName,
+        loc: `${i}`,
+      });
+      if (res.code === RESULT_CODE_SUCCESS) {
+        okNum++;
+      } else {
+        failNum++;
+        break;
+      }
+    }
+
+    if (okNum > 0) {
+      message.success({
+        content: `Successfully deleted ${okNum} items`,
+        duration: 3,
+      });
+    }
+    if (failNum > 0) {
+      message.error({
+        content: `Delete failed, please check the index range`,
+        duration: 3,
+      });
+    }
+  }
+
+  return {
+    batchState,
+    modalBatchOpen,
+    modalBatchClose,
+    modalBatchOk,
+  };
+}

src/views/ne/neConfig/hooks/useArrayImport.ts

@@ -0,0 +1,197 @@
+import { addNeConfigData, editNeConfigData } from '@/api/ne/neConfig';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { readSheet } from '@/utils/execl-utils';
+import { message } from 'ant-design-vue';
+import { reactive, toRaw } from 'vue';
+import saveAs from 'file-saver';
+
+/**
+ * 导入文件加array
+ * @param param 父级传入 {  t, neTypeSelect, arrayState, fnActiveConfigNode }
+ * @returns
+ */
+export default function useArrayImport({
+  t,
+  neTypeSelect,
+  arrayState,
+  fnActiveConfigNode,
+}: any) {
+  /**网元导入模板解析 */
+  const m: Record<string, any> = {
+    AMF: {
+      imeiWhitelist: {
+        filename: 'import_amf_imeiWhitelist_template',
+        fileetx: '.xlsx',
+        item: (row: Record<string, any>) => {
+          return {
+            imeiPrefixValue: row['IMEI Prefix'],
+            index: row['Index'],
+          };
+        },
+      },
+      whitelist: {
+        filename: 'import_amf_whitelist_template',
+        fileetx: '.xlsx',
+        item: (row: Record<string, any>) => {
+          return {
+            imsiValue: row['IMSI Value'],
+            imeiValue: row['IMEI Value/Prefix'],
+            index: row['Index'],
+          };
+        },
+      },
+    },
+    MME: {
+      white_list: {
+        filename: 'import_mme_imeiWhitelist_template',
+        fileetx: '.xlsx',
+        item: (row: Record<string, any>) => {
+          return {
+            imei: row['IMEI'],
+            index: row['Index'],
+          };
+        },
+      },
+    },
+  };
+
+  /**状态属性 */
+  const importState = reactive({
+    open: false,
+    msgArr: [] as string[],
+    loading: false, //开始导入
+    item: null as any,
+    paramName: '',
+    filename: '',
+    fileetx: '',
+  });
+
+  /**对话框表格信息导入弹出窗口 */
+  function modalImportOpen(neType: string, paramName: string) {
+    const tmpM = m[neType][paramName];
+    importState.item = tmpM.item;
+    importState.paramName = paramName;
+    importState.filename = tmpM.filename;
+    importState.fileetx = tmpM.fileetx;
+    importState.open = true;
+  }
+  function modalImportClose() {
+    if (importState.loading) {
+      message.error({
+        content: 'Import is in progress, please wait for it to complete',
+        duration: 3,
+      });
+      return;
+    }
+    importState.open = false;
+    importState.msgArr = [];
+    importState.loading = false;
+    fnActiveConfigNode('#');
+  }
+
+  /**对话框表格信息导入上传 */
+  async function modalImportUpload(file: File) {
+    const hide = message.loading(t('common.loading'), 0);
+    const [neType, neId] = neTypeSelect.value;
+    importState.msgArr = [];
+
+    // 获取最大index
+    let index = 0;
+    if (arrayState.columnsData.length <= 0) {
+      index = 1;
+    } else {
+      const last = arrayState.columnsData[arrayState.columnsData.length - 1];
+      index = last.index.value + 1;
+    }
+
+    const reader = new FileReader();
+    reader.onload = function (e: any) {
+      const arrayBuffer = e.target.result;
+      readSheet(arrayBuffer).then(async rows => {
+        if (rows.length <= 0) {
+          hide();
+          message.error({
+            content: t('views.neData.baseStation.importDataEmpty'),
+            duration: 3,
+          });
+          return;
+        }
+        // 开始导入
+        importState.loading = true;
+        for (const row of rows) {
+          const rowItem = importState.item(row);
+          let result: any = null;
+          // 检查index是否定义
+          const hasIndex = arrayState.columnsData.find(
+            (item: any) => item.index.value === rowItem.index
+          );
+          if (hasIndex) {
+            result = await editNeConfigData({
+              neType: neType,
+              neId: neId,
+              paramName: importState.paramName,
+              paramData: rowItem,
+              loc: `${rowItem.index}`,
+            });
+            let msg = `update ${rowItem.index} fail`;
+            if (result.code === RESULT_CODE_SUCCESS) {
+              msg = `update ${rowItem.index} success`;
+            }
+            importState.msgArr.push(msg);
+          } else {
+            // 未定义则新增
+            result = await addNeConfigData({
+              neType: neType,
+              neId: neId,
+              paramName: importState.paramName,
+              paramData: Object.assign(rowItem, { index }),
+              loc: `${index}`,
+            });
+            let msg = `add ${index} fail`;
+            if (result.code === RESULT_CODE_SUCCESS) {
+              index += 1;
+              msg = `add ${index} success`;
+            }
+            importState.msgArr.push(msg);
+          }
+        }
+
+        hide();
+        importState.loading = false;
+      });
+    };
+    reader.onerror = function (e) {
+      hide();
+      console.error('reader file error:', e);
+    };
+    reader.readAsArrayBuffer(file);
+  }
+
+  /**对话框表格信息导入模板 */
+  function modalImportTemplate() {
+    const hide = message.loading(t('common.loading'), 0);
+
+    const baseUrl = import.meta.env.VITE_HISTORY_BASE_URL;
+    const templateUrl = `${
+      baseUrl.length === 1 && baseUrl.indexOf('/') === 0
+        ? ''
+        : baseUrl.indexOf('/') === -1
+        ? '/' + baseUrl
+        : baseUrl
+    }/neDataImput`;
+    saveAs(
+      `${templateUrl}/${importState.filename}${importState.fileetx}`,
+      `${importState.filename}_${Date.now()}${importState.fileetx}`
+    );
+
+    hide();
+  }
+
+  return {
+    importState,
+    modalImportOpen,
+    modalImportClose,
+    modalImportUpload,
+    modalImportTemplate,
+  };
+}

src/views/ne/neConfig/index.vue

@@ -12,6 +12,8 @@ import useOptions from './hooks/useOptions';
 import useConfigList from './hooks/useConfigList';
 import useConfigArray from './hooks/useConfigArray';
 import useConfigArrayChild from './hooks/useConfigArrayChild';
+import useArrayImport from './hooks/useArrayImport';
+import useArrayBatchDel from './hooks/useArrayBatchDel';
 import { getAllNeConfig, getNeConfigData } from '@/api/ne/neConfig';
 const neListStore = useNeListStore();
 const { t } = useI18n();
@@ -225,10 +227,13 @@ function fnGetNeConfig() {
         } else {
           paramPerms = ['post', 'put', 'delete'];
         }
+        const title = item.paramDisplay;
+        // 处理字符串开头特殊字符
+        item.paramDisplay = title.replace(/[└─]+/, '');
         arr.push({
           ...item,
           children: undefined,
-          title: item.paramDisplay,
+          title: title,
           key: item.paramName,
           paramPerms,
         });
@@ -362,6 +367,21 @@ const {
   arrayEditClose,
 });
 
+const {
+  importState,
+  modalImportOpen,
+  modalImportClose,
+  modalImportUpload,
+  modalImportTemplate,
+} = useArrayImport({ t, neTypeSelect, arrayState, fnActiveConfigNode });
+
+const { batchState, modalBatchOpen, modalBatchClose, modalBatchOk } =
+  useArrayBatchDel({
+    t,
+    neTypeSelect,
+    fnActiveConfigNode,
+  });
+
 onMounted(() => {
   // 获取网元网元列表
   neCascaderOptions.value = neListStore.getNeCascaderOptions.filter(
@@ -428,7 +448,7 @@ onMounted(() => {
         <a-card
           size="small"
           :bordered="false"
-          :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
+          :body-style="{ maxHeight: '680px', 'overflow-y': 'auto' }"
           :loading="treeState.selectLoading"
         >
           <template #title>
@@ -578,7 +598,8 @@ onMounted(() => {
                         {{ JSON.parse(record['filter'])[text] }}
                       </template>
                       <template v-else>{{ `${text}` }}</template>
-                      &nbsp; <!-- 空格占位 -->
+                      &nbsp;
+                      <!-- 空格占位 -->
                       <EditOutlined
                         class="editable-cell__icon"
                         @click="listEdit(record)"
@@ -605,7 +626,7 @@ onMounted(() => {
               :size="arrayState.size"
               :pagination="tablePagination"
               :bordered="true"
-              :scroll="{ x: arrayState.columnsDnd.length * 200, y: 480 }"
+              :scroll="{ x: arrayState.columnsDnd.length * 200, y: '500px' }"
               @resizeColumn="(w:number, col:any) => (col.width = w)"
               :show-expand-column="false"
               v-model:expanded-row-keys="arrayState.arrayChildExpandKeys"
@@ -628,6 +649,38 @@ onMounted(() => {
                     :columns="treeState.selectNode.paramPerms.includes('get') ? [...arrayState.columns.filter((s:any)=>s.key !== 'index')] : arrayState.columns"
                     v-model:columns-dnd="arrayState.columnsDnd"
                   ></TableColumnsDnd>
+                  <!-- 特殊导入删除-->
+                  <template
+                    v-if="
+                      ['AMF', 'MME'].includes(neTypeSelect[0]) &&
+                      ['white_list', 'imeiWhitelist', 'whitelist'].includes(
+                        treeState.selectNode.paramName
+                      )
+                    "
+                  >
+                    <a-button
+                      @click.prevent="
+                        modalImportOpen(
+                          neTypeSelect[0],
+                          treeState.selectNode.paramName
+                        )
+                      "
+                      size="small"
+                    >
+                      <template #icon><ImportOutlined /></template>
+                      {{ t('common.import') }}
+                    </a-button>
+                    <a-button
+                      danger
+                      @click.prevent="
+                        modalBatchOpen(treeState.selectNode.paramName)
+                      "
+                      size="small"
+                    >
+                      <template #icon><DeleteOutlined /></template>
+                      {{ t('views.neData.common.batchDelText') }}
+                    </a-button>
+                  </template>
                 </a-space>
               </template>
 
@@ -905,6 +958,84 @@ onMounted(() => {
         </a-form-item>
       </a-form>
     </ProModal>
+
+    <!-- 上传导入表格数据文件框 -->
+    <UploadModal
+      :title="t('common.import')"
+      @upload="modalImportUpload"
+      @close="modalImportClose"
+      v-model:open="importState.open"
+      :ext="['.xls', '.xlsx']"
+      :size="10"
+    >
+      <template #default>
+        <a-row justify="space-between" align="middle">
+          <a-col :span="12"> </a-col>
+          <a-col :span="6">
+            <a-button
+              type="link"
+              :title="t('views.system.user.downloadObj')"
+              @click.prevent="modalImportTemplate"
+            >
+              {{ t('views.system.user.downloadObj') }}
+            </a-button>
+          </a-col>
+        </a-row>
+        <a-textarea
+          :disabled="true"
+          :hidden="importState.msgArr.length <= 0"
+          :value="importState.msgArr.join('\r\n')"
+          :auto-size="{ minRows: 2, maxRows: 8 }"
+          style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
+        />
+      </template>
+    </UploadModal>
+
+    <!-- 批量删除框 -->
+    <ProModal
+      :drag="true"
+      :destroyOnClose="true"
+      :keyboard="false"
+      :mask-closable="false"
+      :open="batchState.open"
+      :title="t('views.neData.common.batchDelText')"
+      :confirm-loading="batchState.loading"
+      @ok="modalBatchOk"
+      @cancel="modalBatchClose"
+    >
+      <a-form
+        name="batchStateForm"
+        :model="batchState"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
+        <a-row>
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item label="Start Index" name="startIndex" required>
+              <a-input-number
+                v-model:value="batchState.startIndex"
+                style="width: 100%"
+                allow-clear
+                :min="0"
+                :maxlength="5"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item label="Num" name="num" required>
+              <a-input-number
+                v-model:value="batchState.num"
+                style="width: 100%"
+                :min="1"
+                :maxlength="5"
+                placeholder="<=500"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </ProModal>
   </PageContainer>
 </template>