feat: 终端目录部分调整，添加udm-voip/volte功能页面

public/neDataImput/pcf_template.txt

@@ -1,2 +1,2 @@
-imsi,msisdn,sess_rules,pcc_rules,hdr_enrich,rfsp,sar,qos_audio,qos_video,online,offline
-460996650000580,86755900103,internet|ims_sig,internet|ims_sig,dnn,1,def_sar,qos_audio,qos_video,0,0
+#imsi,msisdn,sess_rules,pcc_rules,hdr_enrich,rfsp,sar,qos_audio,qos_video,online,offline
+460996650000580,62357000580,internet|ims_sig,internet|ims_sig,dnn,1,def_sar,qos_audio,qos_video,0,0

public/neDataImput/udm_sub_template.txt

@@ -1,2 +1,2 @@
-460996650000580,62357000583,def_ambr,def_nssai,def_arfb,def_sar,0,3,def_snssai,1-000001&content&ims,1,64,24,65,def_eps,1,010200000000,-
-460996650000581,62357000585,def_ambr,def_nssai,def_arfb,def_sar,0,3,def_snssai,1-000001&content&ims,1,64,24,65,def_eps,1,010200000000,-
+460996650000580,62357000580,def_ambr,def_nssai,def_arfb,def_sar,0,3,def_snssai,1-000001&content&ims,1,64,24,65,def_eps,1,010200000000,-
+460996650000581,62357000581,def_ambr,def_nssai,def_arfb,def_sar,0,3,def_snssai,1-000001&content&ims,1,64,24,65,def_eps,1,010200000000,-

public/neDataImput/udm_voip_template.txt

@@ -0,0 +1,3 @@
+#username,password
+62357000580,123456
+62357000581,123456

public/neDataImput/udm_volte_template.txt

@@ -0,0 +1,3 @@
+#imsi,msisdn,vlote,vni
+460996650000580,62357000580,1,ims.mnc000.mcc460.3gppnetwork.org
+460996650000581,62357000581,1,ims.mnc000.mcc460.3gppnetwork.org

src/api/neData/udm_voip.ts

@@ -0,0 +1,134 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * UDMVOIP用户重载数据
+ * @param neId 网元ID
+ * @returns object
+ */
+export function resetUDMVOIP(neId: string) {
+  return request({
+    url: `/neData/udm/voip/resetData/${neId}`,
+    method: 'PUT',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVOIP用户列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listUDMVOIP(query: Record<string, any>) {
+  return request({
+    url: '/neData/udm/voip/list',
+    method: 'GET',
+    params: query,
+    timeout: 30_000,
+  });
+}
+
+/**
+ * UDMVOIP用户信息
+ * @param neId 网元ID
+ * @param username username
+ * @returns object
+ */
+export function getUDMVOIP(neId: string, username: string) {
+  return request({
+    url: `/neData/udm/voip/${neId}/${username}`,
+    method: 'GET',
+  });
+}
+
+/**
+ * UDMVOIP用户新增
+ * @param data VOIP对象
+ * @returns object
+ */
+export function addUDMVOIP(
+  neId: string,
+  data: { username: string; password: string }
+) {
+  return request({
+    url: `/neData/udm/voip/${neId}`,
+    method: 'POST',
+    data: data,
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVOIP用户批量新增
+ * @param data VOIP对象
+ * @param num 数量
+ * @returns object
+ */
+export function batchAddUDMVOIP(
+  neId: string,
+  data: { username: string; password: string },
+  num: number
+) {
+  return request({
+    url: `/neData/udm/voip/${neId}/${num}`,
+    method: 'POST',
+    data: data,
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVOIP用户删除
+ * @param data VOIP对象
+ * @returns object
+ */
+export function delUDMVOIP(neId: string, username: string) {
+  return request({
+    url: `/neData/udm/voip/${neId}/${username}`,
+    method: 'DELETE',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVOIP用户批量删除
+ * @param neId 网元ID
+ * @param username username
+ * @param num 数量
+ * @returns object
+ */
+export function batchDelUDMVOIP(neId: string, username: string, num: number) {
+  return request({
+    url: `/neData/udm/voip/${neId}/${username}/${num}`,
+    method: 'DELETE',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVOIP用户导出
+ * @param data 数据参数
+ * @returns bolb
+ */
+export function exportUDMVOIP(data: Record<string, any>) {
+  return request({
+    url: '/neData/udm/voip/export',
+    method: 'GET',
+    params: data,
+    responseType: 'blob',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVOIP用户导入
+ * @param data 表单数据对象
+ * @returns object
+ */
+export function importUDMVOIP(data: Record<string, any>) {
+  return request({
+    url: `/neData/udm/voip/import`,
+    method: 'POST',
+    data,
+    timeout: 180_000,
+  });
+}

src/api/neData/udm_volte_ims.ts

@@ -0,0 +1,127 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * UDMVolteIMS用户重载数据
+ * @param neId 网元ID
+ * @returns object
+ */
+export function resetUDMVolteIMS(neId: string) {
+  return request({
+    url: `/neData/udm/volte-ims/resetData/${neId}`,
+    method: 'PUT',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVolteIMS用户列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listUDMVolteIMS(query: Record<string, any>) {
+  return request({
+    url: '/neData/udm/volte-ims/list',
+    method: 'GET',
+    params: query,
+    timeout: 30_000,
+  });
+}
+
+/**
+ * UDMVolteIMS用户信息
+ * @param neId 网元ID
+ * @param imsi IMSI
+ * @returns object
+ */
+export function getUDMVolteIMS(neId: string, imsi: string) {
+  return request({
+    url: `/neData/udm/volte-ims/${neId}/${imsi}`,
+    method: 'GET',
+  });
+}
+
+/**
+ * UDMVolteIMS用户新增
+ * @param data 签约对象
+ * @returns object
+ */
+export function addUDMVolteIMS(data: Record<string, any>) {
+  return request({
+    url: `/neData/udm/volte-ims/${data.neId}`,
+    method: 'POST',
+    data: data,
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVolteIMS用户批量新增
+ * @param data 签约对象
+ * @param num 数量
+ * @returns object
+ */
+export function batchAddUDMVolteIMS(data: Record<string, any>, num: number) {
+  return request({
+    url: `/neData/udm/volte-ims/${data.neId}/${num}`,
+    method: 'POST',
+    data: data,
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVolteIMS用户删除
+ * @param data 签约对象
+ * @returns object
+ */
+export function delUDMVolteIMS(neId: string, imsi: string) {
+  return request({
+    url: `/neData/udm/volte-ims/${neId}/${imsi}`,
+    method: 'DELETE',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVolteIMS用户批量删除
+ * @param neId 网元ID
+ * @param imsi IMSI
+ * @param num 数量
+ * @returns object
+ */
+export function batchDelUDMVolteIMS(neId: string, imsi: string, num: number) {
+  return request({
+    url: `/neData/udm/volte-ims/${neId}/${imsi}/${num}`,
+    method: 'DELETE',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVolteIMS用户导出
+ * @param data 数据参数
+ * @returns bolb
+ */
+export function exportUDMVolteIMS(data: Record<string, any>) {
+  return request({
+    url: '/neData/udm/volte-ims/export',
+    method: 'GET',
+    params: data,
+    responseType: 'blob',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * UDMVolteIMS用户导入
+ * @param data 表单数据对象
+ * @returns object
+ */
+export function importUDMVolteIMS(data: Record<string, any>) {
+  return request({
+    url: `/neData/udm/volte-ims/import`,
+    method: 'POST',
+    data,
+    timeout: 180_000,
+  });
+}

src/i18n/locales/zh-CN.ts

@@ -716,8 +716,43 @@ export default {
     },
     neData: {
       common: {
+        startIMSI: '起始IMSI',
+        imsi: 'IMSI',
+        imsiTip: 'IMSI=MCC+MNC+MSIN',
+        imsiTip1: 'MCC=移动国家号码, 由三位数字组成',
+        imsiTip2: 'MNC=移动网络号，由两位数字组成',
+        imsiTip3: 'MSIN=移动客户识别码，采用等长10位数字构成',
+        imsiPlease: "请正确输入IMSI",
+        msisdn: '移动客户识别码',
+        msisdnPlease: "请正确输入移动客户识别码",
+        loadDataConfirm: '确认要重新加载数据吗？',
+        loadData: '加载数据',
+        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，大约需要{timer}秒，请稍候!!!',
+        batchOper: '批量操作',
+        batchAddText: '批量新增',
+        batchDelText: '批量删除',
+        batchUpdateText: '批量更新',
+        batchNum: '批量个数',
+        checkDel:'勾选删除',
         importTemplate: '导入模板',
       },
+      udmVOIP: {
+        startUsername: '起始用户名',
+        username: '用户名',
+        usernamePlease: "请正确输入用户名",
+        password: "密码",
+        passwordPlease: "请正确输入密码",
+        addTitle: '新增VOIP用户',
+        delTip: '确认要删除VOIP用户为【{num}】的信息吗？',
+        exportTip: "确认根据搜索条件导出xlsx表格文件吗?",
+      },
+      udmVolteIMS: {
+        addTitle: '新增IMS签约用户',
+        vniTip: '示例：ims.mnc000.mcc000.3gppnetwork.org',
+        vniPlease: '请正确输入VNI',
+        delTip: '确认要删除IMS签约为【{num}】的信息吗？',
+        exportTip: "确认根据搜索条件导出xlsx表格文件吗?",
+      },
       baseStation: {
         list: "列表",
         topology: "拓扑图",

src/views/dashboard/overview/index.vue

@@ -385,7 +385,7 @@ onBeforeUnmount(() => {
               class="item toRouter"
               :title="t('views.dashboard.overview.toRouter')"
             >
-              <div @click="fnToRouter('Sub_2010')">
+              <div @click="fnToRouter('UdmSub_2001')">
                 <UserOutlined
                   style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
                 />
@@ -409,7 +409,7 @@ onBeforeUnmount(() => {
             </div>
             <div
               class="item toRouter"
-              @click="fnToRouter('Ims_2080')"
+              @click="fnToRouter('ImsSub_2004')"
               :title="t('views.dashboard.overview.toRouter')"
               style="margin: 0 12px"
               v-perms:has="['dashboard:overview:imsUeNum']"
@@ -424,7 +424,7 @@ onBeforeUnmount(() => {
             </div>
             <div
               class="item toRouter"
-              @click="fnToRouter('Ue_2081')"
+              @click="fnToRouter('SmfSub_2005')"
               :title="t('views.dashboard.overview.toRouter')"
               v-perms:has="['dashboard:overview:smfUeNum']"
             >
@@ -448,7 +448,7 @@ onBeforeUnmount(() => {
           <div class="data">
             <div
               class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
+              @click="fnToRouter('BaseStation_2007', { neType: 'AMF' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">
@@ -462,7 +462,7 @@ onBeforeUnmount(() => {
             </div>
             <div
               class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
+              @click="fnToRouter('BaseStation_2007', { neType: 'AMF' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">
@@ -485,7 +485,7 @@ onBeforeUnmount(() => {
           <div class="data">
             <div
               class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
+              @click="fnToRouter('BaseStation_2007', { neType: 'MME' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">
@@ -499,7 +499,7 @@ onBeforeUnmount(() => {
             </div>
             <div
               class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
+              @click="fnToRouter('BaseStation_2007', { neType: 'MME' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">

src/views/ne/neInfo/components/OAMModal.vue

@@ -192,7 +192,7 @@ watch(
     >
       <a-form-item
         :label="t('views.ne.neInfo.oam.restart')"
-        name="sync"
+        name="restart"
         :label-col="{ span: 6 }"
         :labelWrap="true"
       >

src/views/neData/pcf-sub/index.vue

@@ -545,9 +545,13 @@ function fnExportList(type: string) {
 }
 
 /**查询列表, pageNum初始页数 */
-function fnGetList() {
+function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+    tablePagination.current = pageNum;
+  }
   listRules(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
       // 取消勾选
@@ -705,6 +709,7 @@ onMounted(() => {
                 v-model:value="queryParams.neId"
                 :options="neOtions"
                 :placeholder="t('common.selectPlease')"
+                @change="fnGetList(1)"
               />
             </a-form-item>
           </a-col>
@@ -831,7 +836,7 @@ onMounted(() => {
             />
           </a-tooltip>
           <TableColumnsDnd
-            cache-id="pcfData"
+            cache-id="pcfSubData"
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>

src/views/neData/udm-voip/index.vue

@@ -0,0 +1,943 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
+import {
+  message,
+  Modal,
+  Form,
+  TableColumnsType,
+  notification,
+} from 'ant-design-vue';
+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 {
+  addUDMVOIP,
+  batchAddUDMVOIP,
+  batchDelUDMVOIP,
+  delUDMVOIP,
+  exportUDMVOIP,
+  importUDMVOIP,
+  listUDMVOIP,
+  resetUDMVOIP,
+} from '@/api/neData/udm_voip';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { saveAs } from 'file-saver';
+import { uploadFileToNE } from '@/api/tool/file';
+
+const { t } = useI18n();
+
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元ID */
+  neId: undefined,
+  /**用户名 */
+  username: '',
+  /**排序字段 */
+  sortField: 'username',
+  /**排序方式 */
+  sortOrder: 'asc',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    username: '',
+    sortField: 'username',
+    sortOrder: 'asc',
+  });
+  fnGetList(1);
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns = ref<TableColumnsType>([
+  {
+    title: t('views.neData.udmVOIP.username'),
+    dataIndex: 'username',
+    sorter: true,
+    align: 'left',
+    resizable: true,
+    width: 250,
+    minWidth: 100,
+    maxWidth: 300,
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+  },
+]);
+
+/**表格字段列排序 */
+let tableColumnsDnd = ref<TableColumnsType>([]);
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
+function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+  const { field, order } = sorter;
+  if (order) {
+    queryParams.sortField = field;
+    queryParams.sortOrder = order.replace('end', '');
+  } else {
+    queryParams.sortOrder = 'asc';
+  }
+  fnGetList(1);
+}
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  openByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**是否批量操作 */
+  isBatch: boolean;
+  /**操作类型 */
+  type: 'delete' | 'add';
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**更新加载数据按钮 loading */
+  loadDataLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByEdit: false,
+  title: 'UDMVOIP',
+  from: {
+    num: 1,
+    username: undefined,
+    password: undefined,
+  },
+  isBatch: false,
+  type: 'add',
+  confirmLoading: false,
+  loadDataLoading: false,
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    num: [
+      {
+        required: true,
+        message: t('views.neData.common.batchNum'),
+      },
+    ],
+    username: [
+      { required: true, message: t('views.neData.udmVOIP.usernamePlease') },
+    ],
+    password: [
+      { required: true, message: t('views.neData.udmVOIP.passwordPlease') },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisibleByEdit(row?: Record<string, any>) {
+  modalState.isBatch = false;
+  if (!row) {
+    modalStateFrom.resetFields(); //重置表单
+    modalState.title = t('views.neData.udmVOIP.addTitle');
+    modalState.openByEdit = true;
+    modalState.type = 'add';
+  }
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  const from = JSON.parse(JSON.stringify(modalState.from));
+  from.neId = queryParams.neId || '-';
+  from.username = `${from.username}`;
+
+  // 校验规则
+  let validateArr = ['username', 'password'];
+  if (modalState.isBatch) {
+    validateArr.push('num');
+    if (modalState.type === 'delete') {
+      validateArr = ['num', 'username'];
+    }
+  }
+  modalStateFrom
+    .validate(validateArr)
+    .then(e => {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+
+      // 根据类型选择函数
+      let result: any = null;
+      if (modalState.isBatch) {
+        if (modalState.type === 'add') {
+          result = batchAddUDMVOIP(
+            from.neId,
+            { username: from.username, password: from.password },
+            from.num
+          );
+        }
+        if (modalState.type === 'delete') {
+          result = batchDelUDMVOIP(from.neId, from.username, from.num);
+        }
+      } else {
+        if (modalState.type === 'add') {
+          result = addUDMVOIP(from.neId, {
+            username: from.username,
+            password: from.password,
+          });
+        }
+      }
+
+      result
+        .then((res: any) => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+
+            fnModalCancel();
+            fnGetList();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.type = 'add';
+  modalState.isBatch = false;
+  modalState.openByEdit = false;
+  modalStateFrom.resetFields();
+}
+
+/**
+ * 对话框弹出显示为 批量操作
+ * @param type 类型
+ */
+function fnModalVisibleByBatch(type: 'delete' | 'add') {
+  modalStateFrom.resetFields(); //重置表单
+  modalState.isBatch = true;
+  modalState.type = type;
+  if (type === 'add') {
+    modalState.title = t('views.neData.common.batchAddText');
+    modalState.openByEdit = true;
+  }
+  if (type === 'delete') {
+    modalState.title = t('views.neData.common.batchDelText');
+    modalState.openByEdit = true;
+  }
+}
+
+/**
+ * 记录删除
+ * @param username 网元编号ID
+ */
+function fnRecordDelete(username: string) {
+  const neID = queryParams.neId;
+  if (!neID) return;
+  let msg = username;
+  if (username === '0') {
+    msg = `${tableState.selectedRowKeys[0]}... ${tableState.selectedRowKeys.length}`;
+    username = tableState.selectedRowKeys.join(',');
+  }
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.neData.udmVOIP.delTip', { num: msg }),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      delUDMVOIP(neID, username)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success(t('common.operateOk'), 3);
+            fnGetList();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+        });
+    },
+  });
+}
+
+/**列表导出 */
+function fnExportList(type: string) {
+  const neId = queryParams.neId;
+  if (!neId) return;
+  const hide = message.loading(t('common.loading'), 0);
+  exportUDMVOIP(Object.assign({ type: type }, queryParams))
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('common.operateOk'),
+          duration: 2,
+        });
+        saveAs(res.data, `UDM_VOIP_${neId}_${Date.now()}.${type}`);
+      } else {
+        message.error({
+          content: `${res.msg}`,
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+    });
+}
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+    tablePagination.current = pageNum;
+  }
+  listUDMVOIP(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+      const { total, rows } = res.data;
+      tablePagination.total = total;
+      tableState.data = rows;
+    } else {
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+/**重新加载数据 */
+function fnLoadData() {
+  const neId = queryParams.neId;
+  if (tableState.loading || !neId) return;
+  modalState.loadDataLoading = true;
+  tablePagination.total = 0;
+  tableState.data = [];
+  tableState.loading = true; // 表格loading
+  resetUDMVOIP(neId).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      const num = res.data;
+      const timerS = Math.ceil(+num / 800) + 3;
+      notification.success({
+        message: t('views.neData.common.loadData'),
+        description: t('views.neData.common.loadDataTip', {
+          num,
+          timer: timerS,
+        }),
+        duration: timerS,
+      });
+      // 延迟10s后关闭loading刷新列表
+      setTimeout(() => {
+        modalState.loadDataLoading = false;
+        tableState.loading = false; // 表格loading
+        fnQueryReset();
+      }, timerS * 1000);
+    } else {
+      modalState.loadDataLoading = false;
+      tableState.loading = false; // 表格loading
+      fnQueryReset();
+      message.error({
+        content: t('common.getInfoFail'),
+        duration: 3,
+      });
+    }
+  });
+}
+
+/**对话框表格信息导入对象信息状态类型 */
+type ModalUploadImportStateType = {
+  /**是否显示 */
+  open: boolean;
+  /**标题 */
+  title: string;
+  /**是否上传中 */
+  loading: boolean;
+  /**上传结果信息 */
+  msg: string;
+  /**含失败信息 */
+  hasFail: boolean;
+};
+
+/**对话框表格信息导入对象信息状态 */
+let uploadImportState: ModalUploadImportStateType = reactive({
+  open: false,
+  title: t('components.UploadModal.uploadTitle'),
+  loading: false,
+  msg: '',
+  hasFail: false,
+});
+
+/**对话框表格信息导入弹出窗口 */
+function fnModalUploadImportOpen() {
+  uploadImportState.msg = '';
+  uploadImportState.hasFail = false;
+  uploadImportState.loading = false;
+  uploadImportState.open = true;
+}
+
+/**对话框表格信息导入关闭窗口 */
+function fnModalUploadImportClose() {
+  uploadImportState.open = false;
+  fnGetList();
+}
+
+/**对话框表格信息导入上传 */
+function fnModalUploadImportUpload(file: File) {
+  const neID = queryParams.neId;
+  if (!neID) {
+    return Promise.reject('Unknown network element');
+  }
+  const hide = message.loading(t('common.loading'), 0);
+  uploadImportState.loading = true;
+  uploadFileToNE('UDM', neID, file, 5)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        return importUDMVOIP({
+          neId: neID,
+          uploadPath: res.data,
+        });
+      }
+      return res;
+    })
+    .then(res => {
+      if (!res) return;
+      uploadImportState.msg = res.msg;
+      const regex = /fail num: (\d+)/;
+      const match = res.msg.match(regex);
+      if (match) {
+        const failNum = Number(match[1]);
+        uploadImportState.hasFail = failNum > 0;
+      } else {
+        uploadImportState.hasFail = false;
+      }
+    })
+    .finally(() => {
+      hide();
+      uploadImportState.loading = false;
+    });
+}
+
+/**对话框表格信息导入模板 */
+function fnModalDownloadImportTemplate() {
+  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}/udm_voip_template.txt`,
+    `import_udmvoip_template_${Date.now()}.txt`
+  );
+
+  hide();
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && res.data?.length > 0) {
+        let arr: Record<string, any>[] = [];
+        res.data.forEach((v: any) => {
+          if (v.neType === 'UDM') {
+            arr.push({ value: v.neId, label: v.neName });
+          }
+        });
+        neOtions.value = arr;
+        if (arr.length > 0) {
+          queryParams.neId = arr[0].value;
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="UDM" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+                @change="fnGetList(1)"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.neData.udmVOIP.username')"
+              name="username"
+            >
+              <a-input
+                v-model:value="queryParams.username"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList()">
+                  <template #icon>
+                    <SearchOutlined />
+                  </template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon>
+                    <ClearOutlined />
+                  </template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-space :size="8" align="center">
+          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+            <template #icon>
+              <PlusOutlined />
+            </template>
+            {{ t('common.addText') }}
+          </a-button>
+
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordDelete('0')"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('views.neData.common.checkDel') }}
+          </a-button>
+
+          <a-dropdown trigger="click">
+            <a-button>
+              {{ t('views.neData.common.batchOper') }}
+              <DownOutlined />
+            </a-button>
+            <template #overlay>
+              <a-menu @click="({ key }:any) => fnModalVisibleByBatch(key)">
+                <a-menu-item key="add">
+                  <PlusOutlined />
+                  {{ t('views.neData.common.batchAddText') }}
+                </a-menu-item>
+                <a-menu-item key="delete">
+                  <DeleteOutlined />
+                  {{ t('views.neData.common.batchDelText') }}
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+
+          <a-popconfirm
+            placement="topRight"
+            :title="t('views.neData.common.loadDataConfirm')"
+            :ok-text="t('common.ok')"
+            :cancel-text="t('common.cancel')"
+            :disabled="modalState.loadDataLoading"
+            @confirm="fnLoadData"
+          >
+            <a-button
+              type="dashed"
+              danger
+              :disabled="modalState.loadDataLoading"
+              :loading="modalState.loadDataLoading"
+            >
+              <template #icon><SyncOutlined /></template>
+              {{ t('views.neData.common.loadData') }}
+            </a-button>
+          </a-popconfirm>
+
+          <a-button type="dashed" @click.prevent="fnModalUploadImportOpen">
+            <template #icon><ImportOutlined /></template>
+            {{ t('common.import') }}
+          </a-button>
+          <a-popconfirm
+            placement="topRight"
+            :title="t('views.neData.udmVOIP.exportTip')"
+            ok-text="TXT"
+            ok-type="default"
+            @confirm="fnExportList('txt')"
+          >
+            <a-button type="dashed">
+              <template #icon><ExportOutlined /></template>
+              {{ t('common.export') }}
+            </a-button>
+          </a-popconfirm>
+        </a-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip placement="topRight">
+            <template #title>
+              {{
+                tableState.seached
+                  ? t('common.switch.show')
+                  : t('common.switch.hide')
+              }}
+            </template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.searchBarText')"
+              :un-checked-children="t('common.searchBarText')"
+              size="small"
+            />
+          </a-tooltip>
+          <TableColumnsDnd
+            cache-id="udmVOIPData"
+            :columns="tableColumns"
+            v-model:columns-dnd="tableColumnsDnd"
+          ></TableColumnsDnd>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="username"
+        :columns="tableColumnsDnd"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :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 === 'id'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordDelete(record.username)"
+                >
+                  <template #icon>
+                    <DeleteOutlined />
+                  </template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="520"
+      :destroyOnClose="true"
+      :keyboard="false"
+      :mask-closable="false"
+      :open="modalState.openByEdit"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    >
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
+        <!--批量删除-->
+        <template v-if="modalState.isBatch && modalState.type === 'delete'">
+          <a-form-item
+            :label="t('views.neData.common.batchNum')"
+            name="num"
+            v-bind="modalStateFrom.validateInfos.num"
+          >
+            <a-input-number
+              v-model:value="modalState.from.num"
+              style="width: 100%"
+              :min="1"
+              :max="500"
+              placeholder="<=500"
+            ></a-input-number>
+          </a-form-item>
+          <a-form-item
+            :label="
+              modalState.isBatch
+                ? t('views.neData.udmVOIP.startUsername')
+                : t('views.neData.udmVOIP.username')
+            "
+            name="username"
+            v-bind="modalStateFrom.validateInfos.username"
+          >
+            <a-input-number
+              v-model:value="modalState.from.username"
+              style="width: 100%"
+              :min="4"
+              :maxlangth="16"
+              :placeholder="t('views.neData.udmVOIP.username')"
+            >
+            </a-input-number>
+          </a-form-item>
+        </template>
+
+        <template v-else>
+          <!--批量数-->
+          <a-form-item
+            v-if="modalState.isBatch"
+            :label="t('views.neData.common.batchNum')"
+            name="num"
+            v-bind="modalStateFrom.validateInfos.num"
+          >
+            <a-input-number
+              v-model:value="modalState.from.num"
+              style="width: 100%"
+              :min="1"
+              :max="500"
+              placeholder="<=500"
+            ></a-input-number>
+          </a-form-item>
+
+          <a-form-item
+            :label="
+              modalState.isBatch
+                ? t('views.neData.udmVOIP.startUsername')
+                : t('views.neData.udmVOIP.username')
+            "
+            name="username"
+            v-bind="modalStateFrom.validateInfos.username"
+          >
+            <a-input-number
+              v-model:value="modalState.from.username"
+              style="width: 100%"
+              :min="4"
+              :maxlength="16"
+              :placeholder="t('views.neData.udmVOIP.username')"
+            >
+            </a-input-number>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.neData.udmVOIP.password')"
+            name="password"
+            v-bind="modalStateFrom.validateInfos.password"
+          >
+            <a-input-password
+              v-model:value="modalState.from.password"
+              style="width: 100%"
+              :min="4"
+              :max="64"
+              :placeholder="t('views.neData.udmVOIP.password')"
+            >
+            </a-input-password>
+          </a-form-item>
+        </template>
+      </a-form>
+    </ProModal>
+
+    <!-- 上传导入表格数据文件框 -->
+    <UploadModal
+      :title="uploadImportState.title"
+      :loading="uploadImportState.loading"
+      @upload="fnModalUploadImportUpload"
+      @close="fnModalUploadImportClose"
+      v-model:open="uploadImportState.open"
+      :ext="['.txt']"
+    >
+      <template #default>
+        <a-row justify="space-between" align="middle">
+          <a-col :span="12"> </a-col>
+          <a-col>
+            <a-button
+              type="link"
+              :title="t('views.neData.common.importTemplate')"
+              @click.prevent="fnModalDownloadImportTemplate"
+            >
+              {{ t('views.neData.common.importTemplate') }}
+            </a-button>
+          </a-col>
+        </a-row>
+        <a-textarea
+          :disabled="true"
+          :hidden="!uploadImportState.msg"
+          :value="uploadImportState.msg"
+          :auto-size="{ minRows: 2, maxRows: 8 }"
+          style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
+        />
+      </template>
+    </UploadModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>