Merge remote-tracking branch 'origin/main' into multi-tenant

.env.development

@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network OMC"
 VITE_APP_CODE = "OMC"
 
 # 应用版本
-VITE_APP_VERSION = "2.240801"
+VITE_APP_VERSION = "2.240809"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"

.env.production

@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network OMC"
 VITE_APP_CODE = "OMC"
 
 # 应用版本
-VITE_APP_VERSION = "2.240801"
+VITE_APP_VERSION = "2.240809"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"

src/api/ne/neConfig.ts

@@ -0,0 +1,66 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 网元参数配置可用属性值列表指定网元类型全部无分页
+ * @param query 查询参数
+ * @returns object
+ */
+export function getAllNeConfig(neType: string) {
+  return request({
+    url: `/ne/config/list/${neType}`,
+    method: 'get',
+    timeout: 60_000,
+  });
+}
+
+/**
+ * 网元参数配置数据信息
+ * @param params 数据 {neType,neId,paramName}
+ * @returns object
+ */
+export function getNeConfigData(params: Record<string, any>) {
+  return request({
+    url: `/ne/config/data`,
+    params,
+    method: 'get',
+  });
+}
+
+/**
+ * 网元参数配置数据更新
+ * @param data 数据 {neType,neId,paramName:"参数名",paramData:{参数},loc:"层级index仅array"}
+ * @returns object
+ */
+export function editNeConfigData(data: Record<string, any>) {
+  return request({
+    url: `/ne/config/data`,
+    method: 'put',
+    data: data,
+  });
+}
+
+/**
+ * 网元参数配置数据新增（array）
+ * @param data 数据 {neType,neId,paramName:"参数名",paramData:{参数},loc:"层级index"}
+ * @returns object
+ */
+export function addNeConfigData(data: Record<string, any>) {
+  return request({
+    url: `/ne/config/data`,
+    method: 'post',
+    data: data,
+  });
+}
+
+/**
+ * 网元参数配置数据删除（array）
+ * @param params 数据 {neType,neId,paramName:"参数名",loc:"层级index"}
+ * @returns object
+ */
+export function delNeConfigData(params: Record<string, any>) {
+  return request({
+    url: `/ne/config/data`,
+    method: 'delete',
+    params,
+  });
+}

src/api/neData/smsc.ts

@@ -0,0 +1,42 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 查询SMSC-CDR会话事件
+ * @param query 查询参数
+ * @returns object
+ */
+export function listSMSCDataCDR(query: Record<string, any>) {
+  return request({
+    url: '/neData/smsc/cdr/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+/**
+ * SMSC-CDR会话删除
+ * @param id 信息ID
+ * @returns object
+ */
+export function delSMSCDataCDR(cdrIds: string | number) {
+  return request({
+    url: `/neData/smsc/cdr/${cdrIds}`,
+    method: 'delete',
+    timeout: 60_000,
+  });
+}
+
+/**
+ * SMSC-CDR会话列表导出
+ * @param data 查询列表条件
+ * @returns object
+ */
+export function exportSMSCDataCDR(data: Record<string, any>) {
+  return request({
+    url: '/neData/smsc/cdr/export',
+    method: 'post',
+    data,
+    responseType: 'blob',
+    timeout: 60_000,
+  });
+}

src/components/TerminalSSHView/index.vue

@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { FitAddon } from '@xterm/addon-fit';
+import { Terminal } from '@xterm/xterm';
+import '@xterm/xterm/css/xterm.css';
+import { RESULT_CODE_ERROR } from '@/constants/result-constants';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+const ws = new WS();
+const emit = defineEmits(['connect', 'close', 'message']);
+const props = defineProps({
+  /**终端ID，必传 */
+  id: {
+    type: String,
+    required: true,
+  },
+  /**网元类型，必传 */
+  neType: {
+    type: String,
+    required: true,
+  },
+  /**网元ID，必传 */
+  neId: {
+    type: String,
+    required: true,
+  },
+  /**窗口单行字符数 */
+  cols: {
+    type: Number,
+    default: 80,
+  },
+  /**窗口行数 */
+  rows: {
+    type: Number,
+    default: 40,
+  },
+});
+
+/**终端输入DOM节点实例对象 */
+const terminalDom = ref<HTMLElement | undefined>(undefined);
+
+/**终端输入实例对象 */
+const terminal = ref<any>(null);
+
+/**终端输入渲染 */
+function handleRanderXterm(container: HTMLElement | undefined) {
+  if (!container) return;
+  const xterm = new Terminal({
+    cols: props.cols,
+    rows: props.rows,
+    lineHeight: 1.2,
+    fontSize: 12,
+    fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
+    theme: {
+      background: '#000000',
+    },
+    cursorBlink: true, // 光标闪烁
+    cursorStyle: 'block',
+    scrollback: 1000, // 设置历史缓冲区大小为 1000 行
+    scrollSensitivity: 15,
+    tabStopWidth: 4,
+    disableStdin: true, // 禁止输入
+  });
+  // 挂载
+  xterm.open(container);
+  // 自适应尺寸
+  const fitAddon = new FitAddon();
+  xterm.loadAddon(fitAddon);
+  // 终端尺寸变化触发
+  xterm.onResize(({ cols, rows }) => {
+    // console.log('尺寸', cols, rows);
+    ws.send({
+      requestId: `resize_${props.id}`,
+      type: 'resize',
+      data: { cols, rows },
+    });
+  });
+
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(entries => {
+    fitAddon.fit();
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+
+  terminal.value = xterm;
+}
+
+/**连接打开后回调 */
+function wsOpen(ev: any) {
+  // console.info('wsOpen', ev);
+  nextTick(() => {
+    handleRanderXterm(terminalDom.value);
+    // 连接事件
+    emit('connect', {
+      timeStamp: ev.timeStamp,
+      cols: terminal.value.cols,
+      rows: terminal.value.rows,
+      neType: props.neType,
+      neId: props.neId,
+      id: props.id,
+    });
+  });
+}
+
+/**连接错误后回调 */
+function wsError(ev: any) {
+  console.error('wsError', ev);
+  if (terminal.value != null) {
+    let message = 'disconnected';
+    terminal.value.write(`\x1b[31m${message}\x1b[m\r\n`);
+  } else if (terminalDom.value) {
+    terminalDom.value.style.background = '#000';
+    terminalDom.value.style.color = '#ff4d4f';
+    terminalDom.value.style.height = '60%';
+    terminalDom.value.innerText = 'disconnected';
+  }
+}
+
+/**连接关闭后回调 */
+function wsClose(code: number) {
+  // console.warn('wsClose', code);
+  if (terminal.value != null) {
+    let message = 'disconnected ' + code;
+    terminal.value.write(`\x1b[31m${message}\x1b[m\r\n`);
+  }
+  // 关闭事件
+  emit('close', {
+    code: code,
+    neType: props.neType,
+    neId: props.neId,
+    id: props.id,
+  });
+}
+
+/**接收消息后回调 */
+function wsMessage(res: Record<string, any>) {
+  emit('message', res);
+  // console.log('wsMessage', res);
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+  if (!requestId) return;
+  if (terminal.value != null) {
+    // 查找的开始输出标记
+    const parts: string[] = data.split('\u001b[?2004l\r');
+    if (parts.length > 0) {
+      let text = parts[parts.length - 1];
+      // 找到最后输出标记
+      const lestIndex = text.lastIndexOf('\u001b[?2004h\u001b]0;');
+      if (lestIndex !== -1) {
+        text = text.substring(0, lestIndex);
+      }
+      if (text === '' || text === '\r\n' || text.startsWith("^C\r\n") ) {
+        return;
+      }
+      // console.log({ parts, text });
+      terminal.value.write(text);
+      return;
+    }
+    // 无标记
+    terminal.value.write(data);
+  }
+}
+
+onMounted(() => {
+  if (props.neType && props.neId) {
+    // 建立链接
+    const options: OptionsType = {
+      url: '/ws/view',
+      params: {
+        neType: props.neType,
+        neId: props.neId,
+        cols: props.cols,
+        rows: props.rows,
+      },
+      onmessage: wsMessage,
+      onerror: wsError,
+      onopen: wsOpen,
+      onclose: wsClose,
+    };
+    ws.connect(options);
+  }
+});
+
+onBeforeUnmount(() => {
+  ws.close();
+});
+
+// 给组件设置属性 ref="xxxTerminal"
+// setup内使用 const xxxTerminal = ref();
+defineExpose({
+  /**清除 */
+  clear: () => {
+    if (terminal.value != null) {
+      terminal.value.clear();
+    }
+  },
+  /**发送命令 */
+  send: (type: string, data: Record<string, any>) => {
+    ws.send({
+      requestId: `ssh_${props.id}`,
+      type,
+      data,
+    });
+  },
+  /**模拟按下 Ctrl+C */
+  ctrlC: () => {
+    ws.send({
+      requestId: `ssh_${props.id}`,
+      type: 'ctrl-c',
+    });
+  },
+});
+</script>
+
+<template>
+  <div ref="terminalDom" :id="id" class="terminal"></div>
+</template>
+
+<style lang="css" scoped>
+.terminal {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/TerminalTelnet/index.vue

@@ -155,6 +155,15 @@ function handleRanderXterm(container: HTMLElement | undefined) {
   // 自适应尺寸
   const fitAddon = new FitAddon();
   xterm.loadAddon(fitAddon);
+  // 终端尺寸变化触发
+  xterm.onResize(({ cols, rows }) => {
+    // console.log('尺寸', cols, rows);
+    ws.send({
+      requestId: `telnet_resize_${props.hostId}`,
+      type: 'telnet_resize',
+      data: { cols, rows },
+    });
+  });
 
   // 创建 ResizeObserver 实例
   var observer = new ResizeObserver(entries => {
@@ -280,7 +289,7 @@ defineExpose({
 
 <template>
   <div class="terminal">
-    <div ref="terminalDom" style="height: 78%" :id="id"></div>
+    <div ref="terminalDom" style="height: calc(100% - 36px)" :id="id"></div>
     <a-auto-complete
       v-model:value="terminalState.text"
       :dropdown-match-select-width="500"

src/i18n/locales/en-US.ts

@@ -569,6 +569,8 @@ export default {
         caller: "Caller",
         called: "Called",
         result: "Result",
+        resultOk: "Success",
+        resultFail: "Fail",
         delTip: "Confirm deletion of the data item numbered [{msg}]?",
         tenantName: "Tenant Name", 
         exportTip: "Do you confirm to export the current query conditions of the CDR data? (Maximum 10,000 items can be exported.)",
@@ -659,6 +661,7 @@ export default {
           kpiEnable: 'Report',
           kpiTimer: 'Reporting Cycle',
           kpiTimerPlease: 'Please enter the reporting period (in seconds)',
+          omcIP: 'OMC IP',
         },
         backConf: {
           export: 'Config Export',
@@ -770,6 +773,31 @@ export default {
         uploadChangeOk: 'Network Element renewed license successfully and is being calibrated in the background!',
         uploadChangeFail: "Some network elements failed to update the license, please check whether the service terminal environment is available!",
       },
+      neConfig: { 
+        treeTitle: "Navigation Configuration",
+        treeSelectTip: "Select configuration item information in the left configuration navigation!",
+        neType: 'NE Type',
+        neTypePleace: "Please select the network element type",
+        noConfigData: "No data on configuration items",
+        updateValue: "[ {num} ] parameter value modified successfully.",
+        updateValueErr: "Attribute value modification failure",
+        updateItem: "Modify Index to {num}.",
+        updateItemErr: "Record modification failure",
+        delItemOk: "Deleting Index as {num} succeeded",
+        addItemOk: "Add Index as {num} Record Succeeded",
+        addItemErr: "Record addition failure",
+        requireUn: "[ {display} ] input value is of unknown type",
+        requireString: "[ {display} ] parameter value is invalid.",
+        requireInt: "[ {display} ] parameter value not in reasonable range {filter}",
+        requireIpv4: "[ {display} ] not a legitimate IPV4 address",
+        requireIpv6: "[ {display} ] not a legitimate IPV6 address.",
+        requireEnum: "[ {display} ] is not a reasonable enumeration value.",
+        requireBool: "[ {display} ] is not a reasonable boolean value.",
+        editOkTip: "Confirm updating the value of this [ {num} ] attribute?",
+        updateItemTip: "Confirm updating the data item with Index [{num}]?",
+        delItemTip: "Confirm deleting the data item with Index [{num}]?",
+        arrayMore: "Expand",
+      },
       neConfigBackup: {
         name: "Name",
         downTip: 'Confirmed to download the backup file [{txt}]?',
@@ -1239,6 +1267,11 @@ export default {
         downTip: "Confirm the download file name is [{fileName}] File?",
         downTipErr: "Failed to get file",
         dirCd: "Enter Dir",
+        viewAs: 'View Action',
+        reload: "Reload",
+        follow: 'Monitoring Content',
+        tailChar: 'End Characters',
+        tailLines: 'End Lines',
       },
     },
     monitor: {

src/i18n/locales/zh-CN.ts

@@ -569,6 +569,8 @@ export default {
         caller: "主叫",
         called: "被叫",
         result: "结果",
+        resultOk: "成功",
+        resultFail: "失败",
         delTip: "确认删除编号为【{msg}】的数据项?",
         tenantName: "租户名称", 
         exportTip: "确认导出当前查询条件的话单数据吗？（导出最大支持一万条）",
@@ -659,6 +661,7 @@ export default {
           kpiEnable: '上报',
           kpiTimer: '上报周期',
           kpiTimerPlease: '请输入上报周期（单位秒）',
+          omcIP: 'OMC IP',
         },
         backConf: {
           export: '配置导出',
@@ -770,6 +773,31 @@ export default {
         uploadChangeOk: '网元更新许可证成功，正在后台校验！',
         uploadChangeFail: "部分网元更新许可证失败，请检查服务终端环境是否可用！",
       },
+      neConfig: {
+        treeTitle: "配置导航",
+        treeSelectTip: "左侧配置导航中选择配置项信息！",
+        neType: "网元类型",
+        neTypePleace: "请选择网元类型",
+        noConfigData: "暂无配置项数据",
+        updateValue: "【 {num} 】 属性值修改成功",
+        updateValueErr: "属性值修改失败",
+        updateItem: "修改 Index 为 {num} 记录成功",
+        updateItemErr: "记录修改失败",
+        delItemOk: "删除 Index 为 {num} 记录成功",
+        addItemOk: "新增 Index 为 {num} 记录成功",
+        addItemErr: "记录新增失败",
+        requireUn: "【 {display} 】输入值是未知类型",
+        requireString: "【 {display} 】参数值不合理",
+        requireInt: "【 {display} 】参数值不在合理范围 {filter}",
+        requireIpv4: "【 {display} 】不是合法的IPV4地址",
+        requireIpv6: "【 {display} 】不是合法的IPV6地址",
+        requireEnum: "【 {display} 】不是合理的枚举值",
+        requireBool: "【 {display} 】不是合理的布尔类型的值",
+        editOkTip: "确认更新该【 {num} 】属性值吗？",
+        updateItemTip: "确认更新Index为 【{num}】 的数据项？",
+        delItemTip: "确认删除Index为 【{num}】 的数据项？",
+        arrayMore: "展开",
+      },
       neConfigBackup: {
         name: "名称",
         downTip: '确认要下载备份文件【{txt}】吗？',
@@ -1239,6 +1267,11 @@ export default {
         downTip: "确认下载文件名为 【{fileName}】 文件?",
         downTipErr: "文件获取失败",
         dirCd: "进入目录",
+        viewAs: '查看操作',
+        reload: "重载",
+        follow: '监视内容变化',
+        tailChar: '末尾字数',
+        tailLines: '末尾行数',
       },
     },
     monitor: {

src/router/index.ts

@@ -170,6 +170,10 @@ router.beforeEach(async (to, from, next) => {
   if (appStore.bootloader && to.path !== '/quick-start') {
     next({ name: 'QuickStart' });
   }
+  // 不重复引导
+  if (!appStore.bootloader && to.path === '/quick-start') {
+    next({ name: 'Index' });
+  }
 
   const token = getToken();
 

src/views/dashboard/imsCDR/index.vue

@@ -12,6 +12,7 @@ import {
   RESULT_CODE_SUCCESS,
 } from '@/constants/result-constants';
 import useDictStore from '@/store/modules/dict';
+import useNeInfoStore from '@/store/modules/neinfo';
 import {
   delIMSDataCDR,
   exportIMSDataCDR,
@@ -39,6 +40,9 @@ let dict: {
   cdrCallType: [],
 });
 
+/**网元可选 */
+let neOtions = ref<Record<string, any>[]>([]);
+
 /**开始结束时间 */
 let queryRangePicker = ref<[string, string]>(['', '']);
 
@@ -141,17 +145,6 @@ let tableColumns: ColumnsType = [
     align: 'left',
     width: 100,
   },
-  {
-    title: t('views.dashboard.cdr.called'),
-    dataIndex: 'cdrJSON',
-    key: 'calledParty',
-    align: 'left',
-    width: 120,
-    customRender(opt) {
-      const cdrJSON = opt.value;
-      return cdrJSON.calledParty;
-    },
-  },
   {
     title: t('views.dashboard.cdr.caller'),
     dataIndex: 'cdrJSON',
@@ -163,6 +156,17 @@ let tableColumns: ColumnsType = [
       return cdrJSON.callerParty;
     },
   },
+  {
+    title: t('views.dashboard.cdr.called'),
+    dataIndex: 'cdrJSON',
+    key: 'calledParty',
+    align: 'left',
+    width: 120,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.calledParty;
+    },
+  },
   {
     title: t('views.dashboard.cdr.duration'),
     dataIndex: 'cdrJSON',
@@ -392,6 +396,7 @@ const realTimeData = ref<boolean>(false);
 function fnRealTime() {
   realTimeData.value = !realTimeData.value;
   if (realTimeData.value) {
+    tableState.seached = false;
     // 建立链接
     const options: OptionsType = {
       url: '/ws',
@@ -400,7 +405,7 @@ function fnRealTime() {
          *
          * IMS_CDR会话事件(GroupID:1005)
          */
-        subGroupID: '1005',
+        subGroupID: `1005_${queryParams.neId}`,
       },
       onmessage: wsMessage,
       onerror: wsError,
@@ -408,6 +413,8 @@ function fnRealTime() {
     ws.connect(options);
   } else {
     ws.close();
+    tableState.seached = true;
+    fnGetList(1);
   }
 }
 
@@ -430,7 +437,7 @@ function wsMessage(res: Record<string, any>) {
     return;
   }
   // cdrEvent CDR会话事件
-  if (data.groupId === '1005') {
+  if (data.groupId === `1005_${queryParams.neId}`) {
     const cdrEvent = data.data;
     queue.add(async () => {
       modalState.maxId += 1;
@@ -455,14 +462,39 @@ function wsMessage(res: Record<string, any>) {
 
 onMounted(() => {
   // 初始字典数据
-  Promise.allSettled([getDict('cdr_sip_code'), getDict('cdr_call_type')])
+  Promise.allSettled([getDict('cdr_sip_code'), getDict('cdr_call_type')]).then(
-    .then(resArr => {
+    resArr => {
       if (resArr[0].status === 'fulfilled') {
         dict.cdrSipCode = resArr[0].value;
       }
       if (resArr[1].status === 'fulfilled') {
         dict.cdrCallType = resArr[1].value;
       }
+    }
+  );
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          let arr: Record<string, any>[] = [];
+          res.data.forEach(i => {
+            if (i.neType === 'IMS') {
+              arr.push({ value: i.neId, label: i.neName });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            queryParams.neId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
     })
     .finally(() => {
       // 获取列表数据
@@ -502,10 +534,57 @@ onBeforeUnmount(() => {
       <!-- 表格搜索栏 -->
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="IMS" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.called')"
+              name="calledParty"
+            >
+              <a-input
+                v-model:value="queryParams.calledParty"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.caller')"
+              name="callerParty "
+            >
+              <a-input
+                v-model:value="queryParams.callerParty"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="4" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <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-col :lg="8" :md="12" :xs="24">
             <a-form-item
               :label="t('views.dashboard.cdr.recordType')"
-              name="recordType "
+              name="recordType"
             >
               <a-select
                 v-model:value="recordTypes"
@@ -641,6 +720,7 @@ onBeforeUnmount(() => {
               :checked-children="t('common.switch.show')"
               :un-checked-children="t('common.switch.hide')"
               size="small"
+              :disabled="realTimeData"
             />
           </a-tooltip>
           <a-tooltip>
@@ -714,7 +794,7 @@ onBeforeUnmount(() => {
               />
             </span>
             <span v-else>
-              {{ t('views.dashboard.overview.userActivity.resultOK') }}
+              {{ t('views.dashboard.cdr.resultOk') }}
             </span>
           </template>
           <template v-if="column.key === 'id'">
@@ -785,7 +865,7 @@ onBeforeUnmount(() => {
                 />
               </span>
               <span v-else>
-                {{ t('views.dashboard.overview.userActivity.resultOK') }}
+                {{ t('views.dashboard.cdr.resultOk') }}
               </span>
             </div>
           </div>

src/views/dashboard/mmeUE/index.vue

@@ -11,6 +11,7 @@ import {
   RESULT_CODE_SUCCESS,
 } from '@/constants/result-constants';
 import useDictStore from '@/store/modules/dict';
+import useNeInfoStore from '@/store/modules/neinfo';
 import { listMMEDataUE, delMMEDataUE, exportMMEDataUE } from '@/api/neData/mme';
 import { parseDateToStr } from '@/utils/date-utils';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
@@ -23,6 +24,9 @@ const { getDict } = useDictStore();
 const ws = new WS();
 const queue = new PQueue({ concurrency: 1, autoStart: true });
 
+/**网元可选 */
+let neOtions = ref<Record<string, any>[]>([]);
+
 /**字典数据 */
 let dict: {
   /**UE 事件认证代码类型 */
@@ -349,6 +353,7 @@ const realTimeData = ref<boolean>(false);
 function fnRealTime() {
   realTimeData.value = !realTimeData.value;
   if (realTimeData.value) {
+    tableState.seached = false;
     // 建立链接
     const options: OptionsType = {
       url: '/ws',
@@ -357,7 +362,7 @@ function fnRealTime() {
          *
          * MME_UE会话事件(GroupID:1011)
          */
-        subGroupID: '1011',
+        subGroupID: `1011_${queryParams.neId}`,
       },
       onmessage: wsMessage,
       onerror: wsError,
@@ -365,6 +370,8 @@ function fnRealTime() {
     ws.connect(options);
   } else {
     ws.close();
+    tableState.seached = true;
+    fnGetList(1);
   }
 }
 
@@ -387,7 +394,7 @@ function wsMessage(res: Record<string, any>) {
     return;
   }
   // ueEvent MME_UE会话事件
-  if (data.groupId === '1011') {
+  if (data.groupId === `1011_${queryParams.neId}`) {
     const ueEvent = data.data;
     queue.add(async () => {
       modalState.maxId += 1;
@@ -417,16 +424,40 @@ onMounted(() => {
     getDict('ue_auth_code'),
     getDict('ue_event_type'),
     getDict('ue_event_cm_state'),
-  ])
+  ]).then(resArr => {
-    .then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
-      if (resArr[0].status === 'fulfilled') {
+      dict.ueAauthCode = resArr[0].value;
-        dict.ueAauthCode = resArr[0].value;
+    }
-      }
+    if (resArr[1].status === 'fulfilled') {
-      if (resArr[1].status === 'fulfilled') {
+      dict.ueEventType = resArr[1].value;
-        dict.ueEventType = resArr[1].value;
+    }
-      }
+    if (resArr[2].status === 'fulfilled') {
-      if (resArr[2].status === 'fulfilled') {
+      dict.ueEventCmState = resArr[2].value;
-        dict.ueEventCmState = resArr[2].value;
+    }
+  });
+
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          let arr: Record<string, any>[] = [];
+          res.data.forEach(i => {
+            if (i.neType === 'MME') {
+              arr.push({ value: i.neId, label: i.neName });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            queryParams.neId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
       }
     })
     .finally(() => {
@@ -467,6 +498,15 @@ onBeforeUnmount(() => {
       <!-- 表格搜索栏 -->
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="MME" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+              />
+            </a-form-item>
+          </a-col>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.dashboard.ue.eventType')"
@@ -588,6 +628,7 @@ onBeforeUnmount(() => {
               :checked-children="t('common.switch.show')"
               :un-checked-children="t('common.switch.hide')"
               size="small"
+              :disabled="realTimeData"
             />
           </a-tooltip>
           <a-tooltip>

src/views/dashboard/overview/hooks/useTopology.ts

@@ -22,7 +22,7 @@ export const notNeNodes = [
 /**图状态 */
 export const graphState = reactive<Record<string, any>>({
   /**当前图组名 */
-  group: '5GC System Architecture5',
+  group: '5GC System Architecture',
   /**图数据 */
   data: {
     combos: [],

src/views/dashboard/overview/hooks/useWS.ts

@@ -55,37 +55,37 @@ export default function useWS() {
     // 普通信息
     switch (requestId) {
       // AMF_UE会话事件
-      case '1010':
+      case 'amf_1010_001':
         if (Array.isArray(data.rows)) {
           eventListParse('amf_ue', data);
         }
         break;
       // MME_UE会话事件
-      case '1011':
+      case 'mme_1011_001':
         if (Array.isArray(data.rows)) {
           eventListParse('mme_ue', data);
         }
         break;
       // IMS_CDR会话事件
-      case '1005':
+      case 'ims_1005_001':
         if (Array.isArray(data.rows)) {
           eventListParse('ims_cdr', data);
         }
         break;
       //UPF-总流量数
-      case '1030_0':
+      case 'upf_001_0':
         const v0 = upfTFParse(data);
         upfTotalFlow.value[0].up = v0.up;
         upfTotalFlow.value[0].down = v0.down;
         upfTotalFlow.value[0].requestFlag = false;
         break;
-      case '1030_7':
+      case 'upf_001_7':
         const v7 = upfTFParse(data);
         upfTotalFlow.value[1].up = v7.up;
         upfTotalFlow.value[1].down = v7.down;
         upfTotalFlow.value[1].requestFlag = false;
         break;
-      case '1030_30':
+      case 'upf_001_30':
         const v30 = upfTFParse(data);
         upfTotalFlow.value[2].up = v30.up;
         upfTotalFlow.value[2].down = v30.down;
@@ -104,19 +104,19 @@ export default function useWS() {
         }
         break;
       // AMF_UE会话事件
-      case '1010':
+      case '1010_001':
         if (data.data) {
           queue.add(() => eventItemParseAndPush('amf_ue', data.data));
         }
         break;
       // MME_UE会话事件
-      case '1011':
+      case '1011_001':
         if (data.data) {
           queue.add(() => eventItemParseAndPush('mme_ue', data.data));
         }
         break;
       // IMS_CDR会话事件
-      case '1005':
+      case '1005_001':
         if (data.data) {
           queue.add(() => eventItemParseAndPush('ims_cdr', data.data));
         }
@@ -140,7 +140,7 @@ export default function useWS() {
     }
     upfTotalFlow.value[index].requestFlag = true;
     ws.send({
-      requestId: `1030_${day}`,
+      requestId: `upf_001_${day}`,
       type: 'upf_tf',
       data: {
         neType: 'UPF',
@@ -154,7 +154,7 @@ export default function useWS() {
   function userActivitySend() {
     // AMF_UE会话事件
     ws.send({
-      requestId: '1010',
+      requestId: 'amf_1010_001',
       type: 'amf_ue',
       data: {
         neType: 'AMF',
@@ -167,7 +167,7 @@ export default function useWS() {
     });
     // MME_UE会话事件
     ws.send({
-      requestId: '1011',
+      requestId: 'mme_1011_001',
       type: 'mme_ue',
       data: {
         neType: 'MME',
@@ -180,7 +180,7 @@ export default function useWS() {
     });
     // IMS_CDR会话事件
     ws.send({
-      requestId: '1005',
+      requestId: 'ims_1005_001',
       type: 'ims_cdr',
       data: {
         neType: 'IMS',
@@ -211,11 +211,11 @@ export default function useWS() {
         /**订阅通道组
          *
          * 指标UPF (GroupID:12_neId)
-         * AMF_UE会话事件(GroupID:1010)
+         * AMF_UE会话事件(GroupID:1010_neId)
-         * MME_UE会话事件(GroupID:1011)
+         * MME_UE会话事件(GroupID:1011_neId)
-         * IMS_CDR会话事件(GroupID:1005)
+         * IMS_CDR会话事件(GroupID:1005_neId)
          */
-        subGroupID: '12_' + rmUid + ',1010,1011,1005',
+        subGroupID: '12_' + rmUid + ',1010_001,1011_001,1005_001',
       },
       onmessage: wsMessage,
       onerror: wsError,

src/views/dashboard/smfCDR/index.vue

@@ -5,6 +5,7 @@ import { Modal, message } 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 useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import {
   RESULT_CODE_ERROR,
@@ -25,6 +26,9 @@ const { t } = useI18n();
 const ws = new WS();
 const queue = new PQueue({ concurrency: 1, autoStart: true });
 
+/**网元可选 */
+let neOtions = ref<Record<string, any>[]>([]);
+
 /**开始结束时间 */
 let queryRangePicker = ref<[string, string]>(['', '']);
 
@@ -405,6 +409,7 @@ const realTimeData = ref<boolean>(false);
 function fnRealTime() {
   realTimeData.value = !realTimeData.value;
   if (realTimeData.value) {
+    tableState.seached = false;
     // 建立链接
     const options: OptionsType = {
       url: '/ws',
@@ -413,7 +418,7 @@ function fnRealTime() {
          *
          * CDR会话事件-SMF (GroupID:1006)
          */
-        subGroupID: '1006',
+        subGroupID: `1006_${queryParams.neId}`,
       },
       onmessage: wsMessage,
       onerror: wsError,
@@ -421,6 +426,8 @@ function fnRealTime() {
     ws.connect(options);
   } else {
     ws.close();
+    tableState.seached = true;
+    fnGetList(1);
   }
 }
 
@@ -443,7 +450,7 @@ function wsMessage(res: Record<string, any>) {
     return;
   }
   // cdrEvent CDR会话事件
-  if (data.groupId === '1006') {
+  if (data.groupId === `1006_${queryParams.neId}`) {
     const cdrEvent = data.data;
     queue.add(async () => {
       modalState.maxId += 1;
@@ -464,25 +471,49 @@ function wsMessage(res: Record<string, any>) {
   }
 }
 
-
 onMounted(() => {
-  // 获取列表数据
+  // 获取网元网元列表
-  fnGetList();
+  useNeInfoStore()
-  
+    .fnNelist()
-  //查询租户
+    .then(res => {
-  listTenant({ parentId: 0 }).then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
-      queryParams.tenantNameArr = []; //上面置为空数组时会报错 故在此
+          let arr: Record<string, any>[] = [];
-      res.data.forEach((item: any) => {
+          res.data.forEach(i => {
-        if (item.parentId === '0') {
+            if (i.neType === 'SMF') {
-          queryParams.tenantNameArr.push({
+              arr.push({ value: i.neId, label: i.neName });
-            value: item.tenantName,
+            }
-            label: item.tenantName,
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            queryParams.neId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+      //查询租户
+      listTenant({ parentId: 0 }).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+          queryParams.tenantNameArr = []; //上面置为空数组时会报错 故在此
+          res.data.forEach((item: any) => {
+            if (item.parentId === '0') {
+              queryParams.tenantNameArr.push({
+                value: item.tenantName,
+                label: item.tenantName,
+              });
+            }
           });
         }
       });
-    }
+    });
-  });
 });
 
 onBeforeUnmount(() => {
@@ -502,10 +533,19 @@ onBeforeUnmount(() => {
       <!-- 表格搜索栏 -->
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="SMF" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+              />
+            </a-form-item>
+          </a-col>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.dashboard.cdr.smfSubscriptionIDData')"
-              name="calledParty "
+              name="subscriberID"
             >
               <a-input
                 v-model:value="queryParams.subscriberID"
@@ -613,6 +653,7 @@ onBeforeUnmount(() => {
               :checked-children="t('common.switch.show')"
               :un-checked-children="t('common.switch.hide')"
               size="small"
+              :disabled="realTimeData"
             />
           </a-tooltip>
           <a-tooltip>

src/views/dashboard/smscCDR/index.vue

@@ -0,0 +1,733 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { message, Modal } 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 useI18n from '@/hooks/useI18n';
+import {
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
+import useNeInfoStore from '@/store/modules/neinfo';
+import {
+  delSMSCDataCDR,
+  exportSMSCDataCDR,
+  listSMSCDataCDR,
+} from '@/api/neData/smsc';
+import { parseDateToStr, parseDuration } from '@/utils/date-utils';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+import saveAs from 'file-saver';
+import PQueue from 'p-queue';
+const { t } = useI18n();
+const ws = new WS();
+const queue = new PQueue({ concurrency: 1, autoStart: true });
+
+/**网元可选 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**开始结束时间 */
+let queryRangePicker = ref<[string, string]>(['', '']);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: 'SMSC',
+  neId: '001',
+  recordType: '',
+  callerParty: '',
+  calledParty: '',
+  sortField: 'timestamp',
+  sortOrder: 'desc',
+  /**开始时间 */
+  startTime: '',
+  /**结束时间 */
+  endTime: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  recordTypes.value = [];
+  queryParams = Object.assign(queryParams, {
+    recordType: '',
+    callerParty: '',
+    calledParty: '',
+    startTime: '',
+    endTime: '',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  queryRangePicker.value = ['', ''];
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**记录类型 */
+const recordTypes = ref<string[]>([]);
+
+/**查询记录类型变更 */
+function fnQueryRecordTypeChange(value: any) {
+  if (Array.isArray(value)) {
+    queryParams.recordType = value.join(',');
+  }
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.dashboard.cdr.recordType'),
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.recordType;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.type'),
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.serviceType;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.caller'),
+    dataIndex: 'cdrJSON',
+    key: 'callerParty',
+    align: 'left',
+    width: 120,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.callerParty;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.called'),
+    dataIndex: 'cdrJSON',
+    key: 'calledParty',
+    align: 'left',
+    width: 120,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.calledParty;
+    },
+  },
+
+  {
+    title: t('views.dashboard.cdr.result'),
+    dataIndex: 'cdrJSON',
+    key: 'cause',
+    align: 'left',
+    width: 120,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return +cdrJSON.result
+        ? t('views.dashboard.cdr.resultOk')
+        : t('views.dashboard.cdr.resultFail');
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.time'),
+    dataIndex: 'cdrJSON',
+    align: 'center',
+    width: 150,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return parseDateToStr(+cdrJSON.updateTime * 1000);
+    },
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+  },
+];
+
+/**表格分页器参数 */
+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();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**最大ID值 */
+  maxId: number;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  confirmLoading: false,
+  maxId: 0,
+});
+
+/**
+ * 记录删除
+ * @param id  编号
+ */
+function fnRecordDelete(id: string) {
+  if (!id || modalState.confirmLoading) return;
+  let msg = id;
+  if (id === '0') {
+    msg = `${id}...  ${tableState.selectedRowKeys.length}`;
+    id = tableState.selectedRowKeys.join(',');
+  }
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.dashboard.cdr.delTip', { msg }),
+    onOk() {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delSMSCDataCDR(id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            fnGetList(1);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    },
+  });
+}
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  if (!queryRangePicker.value) {
+    queryRangePicker.value = ['', ''];
+  }
+  queryParams.startTime = queryRangePicker.value[0];
+  queryParams.endTime = queryRangePicker.value[1];
+  listSMSCDataCDR(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;
+      // 遍历处理cdr字符串数据
+      tableState.data = res.rows.map(item => {
+        let cdrJSON = item.cdrJSON;
+        if (!cdrJSON) {
+          Reflect.set(item, 'cdrJSON', {});
+        }
+
+        try {
+          cdrJSON = JSON.parse(cdrJSON);
+          Reflect.set(item, 'cdrJSON', cdrJSON);
+        } catch (error) {
+          console.error(error);
+          Reflect.set(item, 'cdrJSON', {});
+        }
+
+        return item;
+      });
+
+      // 取最大值ID用作实时累加
+      if (res.total > 0) {
+        modalState.maxId = Number(res.rows[0].id);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+/**列表导出 */
+function fnExportList() {
+  if (modalState.confirmLoading) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.dashboard.cdr.exportTip'),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      const querys = toRaw(queryParams);
+      querys.pageSize = 10000;
+      exportSMSCDataCDR(querys)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            saveAs(res.data, `smsc_cdr_event_export_${Date.now()}.xlsx`);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    },
+  });
+}
+
+/**实时数据开关 */
+const realTimeData = ref<boolean>(false);
+
+/**
+ * 实时数据
+ */
+function fnRealTime() {
+  realTimeData.value = !realTimeData.value;
+  if (realTimeData.value) {
+    tableState.seached = false;
+    // 建立链接
+    const options: OptionsType = {
+      url: '/ws',
+      params: {
+        /**订阅通道组
+         *
+         * SMSC_CDR会话事件(GroupID:1007_neId)
+         */
+        subGroupID: `1007_${queryParams.neId}`,
+      },
+      onmessage: wsMessage,
+      onerror: wsError,
+    };
+    ws.connect(options);
+  } else {
+    ws.close();
+    tableState.seached = true;
+    fnGetList(1);
+  }
+}
+
+/**接收数据后回调 */
+function wsError(ev: any) {
+  // 接收数据后回调
+  console.error(ev);
+}
+
+/**接收数据后回调 */
+function wsMessage(res: Record<string, any>) {
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+
+  // 订阅组信息
+  if (!data?.groupId) {
+    return;
+  }
+  // cdrEvent CDR会话事件
+  if (data.groupId === `1007_${queryParams.neId}`) {
+    const cdrEvent = data.data;
+    queue.add(async () => {
+      modalState.maxId += 1;
+      tableState.data.unshift({
+        id: modalState.maxId,
+        neType: cdrEvent.neType,
+        neName: cdrEvent.neName,
+        rmUID: cdrEvent.rmUID,
+        timestamp: cdrEvent.timestamp,
+        cdrJSON: cdrEvent.CDR,
+      });
+      tablePagination.total += 1;
+      if (tableState.data.length > 100) {
+        tableState.data.pop();
+      }
+      await new Promise(resolve => setTimeout(resolve, 800));
+    });
+  }
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          let arr: Record<string, any>[] = [];
+          res.data.forEach(i => {
+            if (i.neType === 'SMSC') {
+              arr.push({ value: i.neId, label: i.neName });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            queryParams.neId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+
+onBeforeUnmount(() => {
+  if (ws.state() !== -1) {
+    ws.close();
+  }
+});
+</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="SMSC" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.called')"
+              name="calledParty"
+            >
+              <a-input
+                v-model:value="queryParams.calledParty"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.caller')"
+              name="callerParty "
+            >
+              <a-input
+                v-model:value="queryParams.callerParty"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="4" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <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-col :lg="8" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.recordType')"
+              name="recordType"
+            >
+              <a-select
+                v-model:value="recordTypes"
+                mode="multiple"
+                :options="['MOSM', 'MTSM'].map(v => ({ value: v }))"
+                :placeholder="t('common.selectPlease')"
+                @change="fnQueryRecordTypeChange"
+              ></a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.time')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                allow-clear
+                bordered
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
+                style="width: 100%"
+              ></a-range-picker>
+            </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-popconfirm
+            placement="bottomLeft"
+            :title="
+              !realTimeData
+                ? t('views.dashboard.cdr.realTimeDataStart')
+                : t('views.dashboard.cdr.realTimeDataStop')
+            "
+            ok-text="Yes"
+            cancel-text="No"
+            @confirm="fnRealTime()"
+          >
+            <a-button type="primary" :danger="realTimeData">
+              <template #icon><FundOutlined /> </template>
+              {{
+                !realTimeData
+                  ? t('views.dashboard.cdr.realTimeDataStart')
+                  : t('views.dashboard.cdr.realTimeDataStop')
+              }}
+            </a-button>
+          </a-popconfirm>
+
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordDelete('0')"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+
+          <a-button type="dashed" @click.prevent="fnExportList()">
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </a-button>
+        </a-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+              :disabled="realTimeData"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown trigger="click" placement="bottomRight">
+              <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="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 480px)' }"
+        :row-selection="{
+          type: 'checkbox',
+          columnWidth: '48px',
+          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.id)"
+                >
+                  <template #icon>
+                    <DeleteOutlined />
+                  </template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+        <template #expandedRowRender="{ record }">
+          <div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
+            <a-divider orientation="left">
+              {{ t('views.dashboard.cdr.cdrInfo') }}
+            </a-divider>
+            <div>
+              <span>{{ t('views.ne.common.neName') }}: </span>
+              <span>{{ record.neName }}</span>
+            </div>
+            <div>
+              <span>{{ t('views.ne.common.rmUid') }}: </span>
+              <span>{{ record.rmUID }}</span>
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.cdr.time') }}: </span>
+              <span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
+            </div>
+            <a-divider orientation="left">
+              {{ t('views.dashboard.cdr.rowInfo') }}
+            </a-divider>
+            <div>
+              <span>{{ t('views.dashboard.cdr.type') }}: </span>
+              <span>{{ record.cdrJSON.serviceType }}</span>
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.cdr.caller') }}: </span>
+              <span>{{ record.cdrJSON.callerParty }}</span>
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.cdr.called') }}: </span>
+              <span>{{ record.cdrJSON.calledParty }}</span>
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.cdr.result') }}: </span>
+              <span>
+                {{
+                  +record.cdrJSON.result
+                    ? t('views.dashboard.cdr.resultOk')
+                    : t('views.dashboard.cdr.resultFail')
+                }}
+              </span>
+            </div>
+          </div>
+        </template>
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>

src/views/faultManage/active-alarm/index.vue

@@ -142,30 +142,6 @@ let alarmTableState: TabeStateType = reactive({
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
-  {
-    title: t('views.faultManage.activeAlarm.alarmId'),
-    dataIndex: 'alarmId',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.neId'),
-    dataIndex: 'neId',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.neName'),
-    dataIndex: 'neName',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.neType'),
-    dataIndex: 'neType',
-    align: 'center',
-    width: 5,
-  },
   {
     title: t('views.faultManage.activeAlarm.origLevel'),
     align: 'center',
@@ -173,18 +149,18 @@ let tableColumns: ColumnsType = [
     dataIndex: 'origSeverity',
     width: 5,
   },
-  {
-    title: t('views.faultManage.activeAlarm.alarmCode'),
-    dataIndex: 'alarmCode',
-    align: 'center',
-    width: 5,
-  },
   {
     title: t('views.faultManage.activeAlarm.alarmTitle'),
     dataIndex: 'alarmTitle',
     align: 'left',
     width: 5,
   },
+  {
+    title: t('views.faultManage.activeAlarm.neType'),
+    dataIndex: 'neType',
+    align: 'center',
+    width: 5,
+  },
   {
     title: t('views.faultManage.activeAlarm.eventTime'),
     dataIndex: 'eventTime',
@@ -192,6 +168,12 @@ let tableColumns: ColumnsType = [
     sorter: (a: any, b: any) => 1,
     width: 5,
   },
+  {
+    title: t('views.faultManage.activeAlarm.alarmCode'),
+    dataIndex: 'alarmCode',
+    align: 'center',
+    width: 5,
+  },
   {
     title: t('views.faultManage.activeAlarm.alarmType'),
     dataIndex: 'alarmType',
@@ -199,12 +181,31 @@ let tableColumns: ColumnsType = [
     align: 'left',
     width: 5,
   },
+  {
+    title: t('views.faultManage.activeAlarm.neName'),
+    dataIndex: 'neName',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.neId'),
+    dataIndex: 'neId',
+    align: 'center',
+    width: 5,
+  },
   {
     title: t('views.faultManage.activeAlarm.pvFlag'),
     dataIndex: 'pvFlag',
     align: 'center',
     width: 5,
   },
+  {
+    title: t('views.faultManage.activeAlarm.alarmId'),
+    dataIndex: 'alarmId',
+    align: 'center',
+    width: 5,
+  },
+
   {
     title: t('views.faultManage.activeAlarm.ackState'),
     dataIndex: 'ackState',

src/views/logManage/neFile/components/ViewDrawer.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { reactive, onMounted, watch, ref, nextTick } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
+import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  /**文件地址 */
+  filePath: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  /**网元类型 */
+  neType: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  /**网元ID */
+  neId: {
+    type: String,
+    default: '',
+    required: true,
+  },
+});
+
+/**对话框对象信息状态类型 */
+type StateType = {
+  /**框是否显示 */
+  visible: boolean;
+  /**标题 */
+  title: string;
+  /**查看命令 */
+  form: Record<string, any>;
+};
+
+/**对话框对象信息状态 */
+let state: StateType = reactive({
+  visible: false,
+  title: '文件查看',
+  form: {
+    follow: true,
+    showType: 'lines', // lines/char
+    lines: 10,
+    char: 0,
+  },
+});
+
+function onClose() {
+  state.visible = false;
+  emit('cancel');
+  emit('update:visible', false);
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) {
+      if (props.neType && props.neId) {
+        const filePath = props.filePath;
+        const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
+        state.title = fileName;
+        state.visible = true;
+      }
+    }
+  }
+);
+
+/**终端实例 */
+const viewTerminal = ref();
+
+/**终端初始连接 */
+function fnInit() {
+  setTimeout(fnReload, 1_500);
+}
+
+/**重载查看方式 */
+function fnReload() {
+  if (!viewTerminal.value) return;
+  viewTerminal.value.ctrlC();
+
+  if (state.form.showType !== 'lines') {
+    state.form.lines = 10;
+  } else {
+    state.form.char = 0;
+  }
+  viewTerminal.value.clear();
+  viewTerminal.value.send('tail', {
+    filePath: props.filePath,
+    lines: state.form.lines,
+    char: state.form.char,
+    follow: state.form.follow,
+  });
+}
+</script>
+
+<template>
+  <ProModal
+    :drag="true"
+    :fullscreen="true"
+    :borderDraw="true"
+    :min-width="800"
+    :min-height="500"
+    :center-y="true"
+    :destroyOnClose="true"
+    :keyboard="false"
+    :mask-closable="false"
+    :visible="state.visible"
+    :title="state.title"
+    :body-style="{ padding: '12px', overflow: 'hidden' }"
+    :footer="null"
+    @cancel="onClose"
+  >
+    <TerminalSSHView
+      ref="viewTerminal"
+      :id="`V${Date.now()}`"
+      style="height: calc(100% - 36px)"
+      :ne-type="neType"
+      :ne-id="neId"
+      @connect="fnInit()"
+    ></TerminalSSHView>
+    <!-- 命令控制属性 -->
+    <a-form name="form" layout="horizontal">
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item :label="t('views.logManage.neFile.viewAs')">
+            <a-input-group compact>
+              <a-select v-model:value="state.form.showType" style="width: 50%">
+                <a-select-option value="lines">
+                  {{ t('views.logManage.neFile.tailLines') }}
+                </a-select-option>
+                <a-select-option value="char">
+                  {{ t('views.logManage.neFile.tailChar') }}
+                </a-select-option>
+              </a-select>
+              <a-input-number
+                style="width: 25%"
+                v-model:value="state.form[state.form.showType]"
+                :min="0"
+                :max="1000"
+                :placeholder="t('common.inputPlease')"
+              ></a-input-number>
+              <a-button type="primary" style="width: 25%" @click="fnReload()">
+                {{ t('views.logManage.neFile.reload') }}
+              </a-button>
+            </a-input-group>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.logManage.neFile.follow')"
+            name="follow"
+          >
+            <a-switch v-model:checked="state.form.follow" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </ProModal>
+</template>
+
+<style lang="less" scoped>
+.ant-form :deep(.ant-form-item) {
+  margin-bottom: 0;
+}
+</style>

src/views/logManage/neFile/index.vue

@@ -3,12 +3,13 @@ import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
 import { ColumnsType } from 'ant-design-vue/lib/table';
+import { Modal, message } from 'ant-design-vue/lib';
 import { parseDateToStr } from '@/utils/date-utils';
 import { getNeFile, listNeFiles } from '@/api/tool/neFile';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
-import { Modal, message } from 'ant-design-vue/lib';
+import ViewDrawer from './components/ViewDrawer.vue';
 import saveAs from 'file-saver';
 import { useRoute } from 'vue-router';
 const neInfoStore = useNeInfoStore();
@@ -19,11 +20,7 @@ const route = useRoute();
 const routeParams = route.query as Record<string, any>;
 
 /**网元参数 */
-let neType = ref<string[]>([]);
+let neTypeSelect = ref<string[]>([]);
-/**下载触发等待 */
-let loading = ref(false);
-/**访问路径 */
-let nePathArr = ref<string[]>([]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -134,14 +131,17 @@ let tablePagination = reactive({
   },
 });
 
+/**下载触发等待 */
+let downLoading = ref<boolean>(false);
+
 /**信息文件下载 */
 function fnDownloadFile(row: Record<string, any>) {
-  if (loading.value) return;
+  if (downLoading.value) return;
   Modal.confirm({
     title: t('common.tipTitle'),
     content: t('views.logManage.neFile.downTip', { fileName: row.fileName }),
     onOk() {
-      loading.value = true;
+      downLoading.value = true;
       const hide = message.loading(t('common.loading'), 0);
       getNeFile({
         neType: queryParams.neType,
@@ -167,12 +167,15 @@ function fnDownloadFile(row: Record<string, any>) {
         })
         .finally(() => {
           hide();
-          loading.value = false;
+          downLoading.value = false;
         });
     },
   });
 }
 
+/**访问路径 */
+let nePathArr = ref<string[]>([]);
+
 /**进入目录 */
 function fnDirCD(dir: string, index?: number) {
   if (index === undefined) {
@@ -235,15 +238,42 @@ function fnGetList(pageNum?: number) {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
+    } else {
+      message.error(res.msg, 3);
+      tablePagination.total = 0;
+      tableState.data = [];
     }
     tableState.loading = false;
   });
 }
 
+/**抽屉状态 */
+const viewDrawerState = reactive({
+  visible: false,
+  /**文件路径 /var/log/amf.log */
+  filePath: '',
+  /**网元类型 */
+  neType: '',
+  /**网元ID */
+  neId: '',
+});
+
+/**打开抽屉查看 */
+function fnDrawerOpen(row: Record<string, any>) {
+  viewDrawerState.filePath = [...nePathArr.value, row.fileName].join('/');
+  viewDrawerState.neType = neTypeSelect.value[0];
+  viewDrawerState.neId = neTypeSelect.value[1];
+  viewDrawerState.visible = !viewDrawerState.visible;
+}
+
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
@@ -254,8 +284,8 @@ onMounted(() => {
           duration: 2,
         });
       } else if (routeParams.neType) {
-        neType.value = [routeParams.neType, routeParams.neId]
+        neTypeSelect.value = [routeParams.neType, routeParams.neId];
-        fnNeChange(neType.value, undefined);
+        fnNeChange(neTypeSelect.value, undefined);
       }
     }
   });
@@ -276,12 +306,12 @@ onMounted(() => {
                 style="margin-bottom: 0"
               >
                 <a-cascader
-                  v-model:value="neType"
+                  v-model:value="neTypeSelect"
                   :options="neInfoStore.getNeCascaderOptions"
                   @change="fnNeChange"
                   :allow-clear="false"
                   :placeholder="t('views.logManage.neFile.neTypePlease')"
-                  :disabled="loading || tableState.loading"
+                  :disabled="downLoading || tableState.loading"
                 />
               </a-form-item>
             </a-col>
@@ -332,8 +362,15 @@ onMounted(() => {
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'fileName'">
             <a-space :size="8" align="center">
+              <a-tooltip v-if="record.fileType === 'file'">
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button type="link" @click.prevent="fnDrawerOpen(record)">
+                  <template #icon><ProfileOutlined /></template>
+                </a-button>
+              </a-tooltip>
               <a-button
                 type="link"
+                :loading="downLoading"
                 @click.prevent="fnDownloadFile(record)"
                 v-if="record.fileType === 'file'"
               >
@@ -342,6 +379,7 @@ onMounted(() => {
               </a-button>
               <a-button
                 type="link"
+                :loading="downLoading"
                 @click.prevent="fnDirCD(record.fileName)"
                 v-if="record.fileType === 'dir'"
               >
@@ -353,6 +391,14 @@ onMounted(() => {
         </template>
       </a-table>
     </a-card>
+
+    <!-- 文件内容查看抽屉 -->
+    <ViewDrawer
+      v-model:visible="viewDrawerState.visible"
+      :file-path="viewDrawerState.filePath"
+      :ne-type="viewDrawerState.neType"
+      :ne-id="viewDrawerState.neId"
+    ></ViewDrawer>
   </PageContainer>
 </template>
 

src/views/monitor/topologyArchitecture/index.vue

@@ -34,7 +34,7 @@ const graphG6Dom = ref<HTMLElement | undefined>(undefined);
 /**图状态 */
 const graphState = reactive<Record<string, any>>({
   /**当前图组名 */
-  group: '5GC System Architecture5',
+  group: '5GC System Architecture',
   /**图数据 */
   data: {
     combos: [],

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

@@ -0,0 +1,347 @@
+import {
+  addNeConfigData,
+  delNeConfigData,
+  editNeConfigData,
+} from '@/api/ne/neConfig';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { Modal } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import message from 'ant-design-vue/lib/message';
+import { reactive, watch } from 'vue';
+
+/**
+ * 参数配置array类型
+ * @param param 父级传入 { t, treeState, neTypeSelect, fnActiveConfigNode, ruleVerification, modalState, fnModalCancel}
+ * @returns
+ */
+export default function useConfigArray({
+  t,
+  treeState,
+  neTypeSelect,
+  fnActiveConfigNode,
+  ruleVerification,
+  modalState,
+  fnModalCancel,
+}: any) {
+  /**多列列表状态类型 */
+  type ArrayStateType = {
+    /**紧凑型 */
+    size: SizeType;
+    /**多列嵌套记录字段 */
+    columns: Record<string, any>[];
+    /**表格字段列排序 */
+    columnsDnd: Record<string, any>[];
+    /**多列记录数据 */
+    columnsData: Record<string, any>[];
+    /**多列嵌套展开key */
+    arrayChildExpandKeys: any[];
+
+    /**多列记录数据 */
+    data: Record<string, any>[];
+    /**多列记录规则 */
+    dataRule: Record<string, any>;
+  };
+
+  /**多列列表状态 */
+  let arrayState: ArrayStateType = reactive({
+    size: 'small',
+    columns: [],
+    columnsDnd: [],
+    columnsData: [],
+    arrayChildExpandKeys: [],
+    data: [],
+    dataRule: {},
+  });
+
+  /**多列表编辑 */
+  function arrayEdit(rowIndex: Record<string, any>) {
+    const item = arrayState.data.find((s: any) => s.key === rowIndex.value);
+    if (!item) return;
+    const from = arrayInitEdit(item, arrayState.dataRule);
+    // 处理信息
+    const row: Record<string, any> = {};
+    for (const v of from.record) {
+      if (Array.isArray(v.array)) {
+        continue;
+      }
+      row[v.name] = Object.assign({}, v);
+    }
+
+    modalState.from = row;
+    modalState.type = 'arrayEdit';
+    modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
+    modalState.key = from.key;
+    modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
+    modalState.visible = true;
+
+    // 关闭嵌套
+    arrayState.arrayChildExpandKeys = [];
+  }
+
+  /**多列表编辑关闭 */
+  function arrayEditClose() {
+    arrayState.arrayChildExpandKeys = [];
+    fnModalCancel();
+  }
+
+  /**多列表编辑确认 */
+  function arrayEditOk(from: Record<string, any>) {
+    const loc = `${from['index']['value']}`;
+    // 遍历提取属性和值
+    let data: Record<string, any> = {};
+    for (const key in from) {
+      // 子嵌套的不插入
+      if (from[key]['array']) {
+        continue;
+      }
+      // 检查规则
+      const [ok, msg] = ruleVerification(from[key]);
+      if (!ok) {
+        message.warning({
+          content: `${msg}`,
+          duration: 3,
+        });
+        return;
+      }
+      data[key] = from[key]['value'];
+    }
+
+    // 发送
+    const hide = message.loading(t('common.loading'), 0);
+    editNeConfigData({
+      neType: neTypeSelect.value[0],
+      neId: neTypeSelect.value[1],
+      paramName: treeState.selectNode.paramName,
+      paramData: data,
+      loc: loc,
+    })
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('views.ne.neConfig.updateItem', {
+              num: modalState.title,
+            }),
+            duration: 3,
+          });
+          fnActiveConfigNode('#');
+        } else {
+          message.warning({
+            content: t('views.ne.neConfig.updateItemErr'),
+            duration: 3,
+          });
+        }
+      })
+      .finally(() => {
+        hide();
+        arrayEditClose();
+      });
+  }
+
+  /**多列表删除单行 */
+  function arrayDelete(rowIndex: Record<string, any>) {
+    const loc = `${rowIndex.value}`;
+    const title = `${treeState.selectNode.paramDisplay} Index-${loc}`;
+
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.ne.neConfig.delItemTip', {
+        num: title,
+      }),
+      onOk() {
+        delNeConfigData({
+          neType: neTypeSelect.value[0],
+          neId: neTypeSelect.value[1],
+          paramName: treeState.selectNode.paramName,
+          loc: loc,
+        }).then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('views.ne.neConfig.delItemOk', {
+                num: title,
+              }),
+              duration: 2,
+            });
+            arrayEditClose();
+            fnActiveConfigNode('#');
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        });
+      },
+    });
+  }
+
+  /**多列表新增单行 */
+  function arrayAdd() {
+    const from = arrayInitAdd(arrayState.data, arrayState.dataRule);
+
+    // 处理信息
+    const row: Record<string, any> = {};
+    for (const v of from.record) {
+      if (Array.isArray(v.array)) {
+        continue;
+      }
+      row[v.name] = Object.assign({}, v);
+    }
+
+    modalState.from = row;
+    modalState.type = 'arrayAdd';
+    modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
+    modalState.key = from.key;
+    modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
+    modalState.visible = true;
+  }
+
+  /**多列表新增单行确认 */
+  function arrayAddOk(from: Record<string, any>) {
+    // 遍历提取属性和值
+    let data: Record<string, any> = {};
+    for (const key in from) {
+      // 子嵌套的不插入
+      if (from[key]['array']) {
+        continue;
+      }
+      // 检查规则
+      const [ok, msg] = ruleVerification(from[key]);
+      if (!ok) {
+        message.warning({
+          content: `${msg}`,
+          duration: 3,
+        });
+        return;
+      }
+      data[key] = from[key]['value'];
+    }
+
+    // 发送
+    const hide = message.loading(t('common.loading'), 0);
+    addNeConfigData({
+      neType: neTypeSelect.value[0],
+      neId: neTypeSelect.value[1],
+      paramName: treeState.selectNode.paramName,
+      paramData: data,
+      loc: `${from['index']['value']}`,
+    })
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('views.ne.neConfig.addItemOk', {
+              num: modalState.title,
+            }),
+            duration: 3,
+          });
+          fnActiveConfigNode('#');
+        } else {
+          message.warning({
+            content: t('views.ne.neConfig.addItemErr'),
+            duration: 3,
+          });
+        }
+      })
+      .finally(() => {
+        hide();
+        arrayEditClose();
+      });
+  }
+
+  /**多列表编辑行数据初始化 */
+  function arrayInitEdit(data: Record<string, any>, dataRule: any) {
+    const dataFrom = data.record;
+    const ruleFrom = Object.assign({}, JSON.parse(JSON.stringify(dataRule)));
+    for (const row of ruleFrom.record) {
+      // 子嵌套的不初始
+      if (row.array) {
+        row.value = [];
+        continue;
+      }
+      // 查找项的值
+      const item = dataFrom.find((s: any) => s.name === row.name);
+      if (!item) {
+        continue;
+      }
+      // 可选的
+      row.optional = 'true';
+      // 根据规则类型转值
+      if (['enum', 'int'].includes(row.type)) {
+        row.value = Number(item.value);
+      } else if ('bool' === row.type) {
+        row.value = Boolean(item.value);
+      } else {
+        row.value = item.value;
+      }
+    }
+    ruleFrom.key = data.key;
+    ruleFrom.title = data.title;
+    return ruleFrom;
+  }
+
+  /**多列表新增行数据初始化 */
+  function arrayInitAdd(data: any[], dataRule: any) {
+    // 有数据时取得最后的index
+    let dataLastIndex = 0;
+    if (data.length !== 0) {
+      const lastFrom = Object.assign(
+        {},
+        JSON.parse(JSON.stringify(data.at(-1)))
+      );
+      if (lastFrom.record.length > 0) {
+        dataLastIndex = parseInt(lastFrom.key);
+        dataLastIndex += 1;
+      }
+    }
+
+    const ruleFrom = Object.assign({}, JSON.parse(JSON.stringify(dataRule)));
+    for (const row of ruleFrom.record) {
+      // 子嵌套的不初始
+      if (row.array) {
+        row.value = [];
+        continue;
+      }
+      // 可选的
+      row.optional = 'true';
+      // index值
+      if (row.name === 'index') {
+        let newIndex =
+          dataLastIndex !== 0 ? dataLastIndex : parseInt(row.value);
+        if (isNaN(newIndex)) {
+          newIndex = 0;
+        }
+        row.value = newIndex;
+        ruleFrom.key = newIndex;
+        ruleFrom.title = `Index-${newIndex}`;
+        continue;
+      }
+      // 根据规则类型转值
+      if (['enum', 'int'].includes(row.type)) {
+        row.value = Number(row.value);
+      }
+      if ('bool' === row.type) {
+        row.value = Boolean(row.value);
+      }
+    }
+    return ruleFrom;
+  }
+
+  // 监听表格字段列排序变化关闭展开
+  watch(
+    () => arrayState.columnsDnd,
+    () => {
+      arrayEditClose();
+    }
+  );
+
+  return {
+    arrayState,
+    arrayEdit,
+    arrayEditClose,
+    arrayEditOk,
+    arrayDelete,
+    arrayAdd,
+    arrayAddOk,
+    arrayInitEdit,
+    arrayInitAdd,
+  };
+}

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

@@ -0,0 +1,353 @@
+import {
+  addNeConfigData,
+  editNeConfigData,
+  delNeConfigData,
+} from '@/api/ne/neConfig';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { Modal } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import message from 'ant-design-vue/lib/message';
+import { nextTick, reactive } from 'vue';
+
+/**
+ * 参数配置array类型的嵌套array
+ * @param param 父级传入 { t, treeState, neTypeSelect, fnActiveConfigNode, ruleVerification, modalState, arrayState, arrayInitEdit, arrayInitAdd, arrayEditClose}
+ * @returns
+ */
+export default function useConfigArrayChild({
+  t,
+  treeState,
+  neTypeSelect,
+  fnActiveConfigNode,
+  ruleVerification,
+  modalState,
+  arrayState,
+  arrayInitEdit,
+  arrayInitAdd,
+  arrayEditClose,
+}: any) {
+  /**多列嵌套列表状态类型 */
+  type ArrayChildStateType = {
+    /**标题 */
+    title: string;
+    /**层级index */
+    loc: string;
+    /**紧凑型 */
+    size: SizeType;
+    /**多列嵌套记录字段 */
+    columns: Record<string, any>[];
+    /**表格字段列排序 */
+    columnsDnd: Record<string, any>[];
+    /**多列记录数据 */
+    columnsData: Record<string, any>[];
+
+    /**多列嵌套记录数据 */
+    data: Record<string, any>[];
+    /**多列嵌套记录规则 */
+    dataRule: Record<string, any>;
+  };
+
+  /**多列嵌套表格状态 */
+  let arrayChildState: ArrayChildStateType = reactive({
+    title: '',
+    loc: '',
+    size: 'small',
+    columns: [],
+    columnsDnd: [],
+    columnsData: [],
+    data: [],
+    dataRule: {},
+  });
+
+  /**多列表展开嵌套行 */
+  function arrayChildExpand(
+    indexRow: Record<string, any>,
+    row: Record<string, any>
+  ) {
+    const loc = indexRow.value;
+    if (arrayChildState.loc === `${loc}/${row.name}`) {
+      arrayChildState.loc = '';
+      arrayState.arrayChildExpandKeys = [];
+      return;
+    }
+    arrayChildState.loc = '';
+    arrayState.arrayChildExpandKeys = [];
+    const from = Object.assign({}, JSON.parse(JSON.stringify(row)));
+    // 无数据时
+    if (!Array.isArray(from.value)) {
+      from.value = [];
+    }
+    const dataArr = Object.freeze(from.value);
+    const ruleArr = Object.freeze(from.array);
+
+    // 列表项数据
+    const dataArray: Record<string, any>[] = [];
+    for (const item of dataArr) {
+      const index = item['index'];
+      let record: Record<string, any>[] = [];
+      for (const key of Object.keys(item)) {
+        // 规则为准
+        for (const rule of ruleArr) {
+          if (rule['name'] === key) {
+            const ruleItem = Object.assign({ optional: 'true' }, rule, {
+              value: item[key],
+            });
+            record.push(ruleItem);
+            break;
+          }
+        }
+      }
+      // dataArray.push(record);
+      dataArray.push({ title: `Index-${index}`, key: index, record });
+    }
+    arrayChildState.data = dataArray;
+
+    // 无数据时，用于新增
+    arrayChildState.dataRule = {
+      title: `Index-0`,
+      key: 0,
+      record: ruleArr,
+    };
+
+    // 列表数据
+    const columnsData: Record<string, any>[] = [];
+    for (const v of arrayChildState.data) {
+      const row: Record<string, any> = {};
+      for (const item of v.record) {
+        row[item.name] = item;
+      }
+      columnsData.push(row);
+    }
+    arrayChildState.columnsData = columnsData;
+
+    // 列表字段
+    const columns: Record<string, any>[] = [];
+    for (const rule of arrayChildState.dataRule.record) {
+      columns.push({
+        title: rule.display,
+        dataIndex: rule.name,
+        align: 'left',
+        resizable: true,
+        width: 50,
+        minWidth: 50,
+        maxWidth: 250,
+      });
+    }
+    columns.push({
+      title: t('common.operate'),
+      dataIndex: 'index',
+      key: 'index',
+      align: 'center',
+      fixed: 'right',
+      width: 100,
+    });
+    arrayChildState.columns = columns;
+
+    nextTick(() => {
+      // 设置展开key
+      arrayState.arrayChildExpandKeys = [indexRow];
+      // 层级标识
+      arrayChildState.loc = `${loc}/${from['name']}`;
+      // 设置展开列表标题
+      arrayChildState.title = `${from['display']}`;
+    });
+  }
+
+  /**多列表嵌套行编辑 */
+  function arrayChildEdit(rowIndex: Record<string, any>) {
+    const item = arrayChildState.data.find(
+      (s: any) => s.key === rowIndex.value
+    );
+    if (!item) return;
+    const from = arrayInitEdit(item, arrayChildState.dataRule);
+    // 处理信息
+    const row: Record<string, any> = {};
+    for (const v of from.record) {
+      if (Array.isArray(v.array)) {
+        continue;
+      }
+      row[v.name] = Object.assign({}, v);
+    }
+
+    modalState.from = row;
+    modalState.type = 'arrayChildEdit';
+    modalState.title = `${arrayChildState.title} ${from.title}`;
+    modalState.key = from.key;
+    modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
+    modalState.visible = true;
+  }
+
+  /**多列表嵌套行编辑确认 */
+  function arrayChildEditOk(from: Record<string, any>) {
+    const loc = `${arrayChildState.loc}/${from['index']['value']}`;
+
+    let data: Record<string, any> = {};
+    for (const key in from) {
+      // 子嵌套的不插入
+      if (from[key]['array']) {
+        continue;
+      }
+      // 检查规则
+      const [ok, msg] = ruleVerification(from[key]);
+      if (!ok) {
+        message.warning({
+          content: `${msg}`,
+          duration: 3,
+        });
+        return;
+      }
+      data[key] = from[key]['value'];
+    }
+
+    // 发送
+    const hide = message.loading(t('common.loading'), 0);
+    editNeConfigData({
+      neType: neTypeSelect.value[0],
+      neId: neTypeSelect.value[1],
+      paramName: treeState.selectNode.paramName,
+      paramData: data,
+      loc,
+    })
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('views.ne.neConfig.updateItem', {
+              num: modalState.title,
+            }),
+            duration: 3,
+          });
+          fnActiveConfigNode('#');
+        } else {
+          message.warning({
+            content: t('views.ne.neConfig.updateItemErr'),
+            duration: 3,
+          });
+        }
+      })
+      .finally(() => {
+        hide();
+        arrayEditClose();
+      });
+  }
+
+  /**多列表嵌套行删除单行 */
+  function arrayChildDelete(rowIndex: Record<string, any>) {
+    const index = rowIndex.value;
+    const loc = `${arrayChildState.loc}/${index}`;
+    const title = `${arrayChildState.title} Index-${index}`;
+
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.ne.neConfig.delItemTip', {
+        num: title,
+      }),
+      onOk() {
+        delNeConfigData({
+          neType: neTypeSelect.value[0],
+          neId: neTypeSelect.value[1],
+          paramName: treeState.selectNode.paramName,
+          loc,
+        }).then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('views.ne.neConfig.delItemOk', {
+                num: title,
+              }),
+              duration: 2,
+            });
+            arrayEditClose();
+            fnActiveConfigNode('#');
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        });
+      },
+    });
+  }
+
+  /**多列表嵌套行新增单行 */
+  function arrayChildAdd() {
+    const from = arrayInitAdd(arrayChildState.data, arrayChildState.dataRule);
+    // 处理信息
+    const row: Record<string, any> = {};
+    for (const v of from.record) {
+      if (Array.isArray(v.array)) {
+        continue;
+      }
+      row[v.name] = Object.assign({}, v);
+    }
+
+    modalState.from = row;
+    modalState.type = 'arrayChildAdd';
+    modalState.title = `${arrayChildState.title} ${from.title}`;
+    modalState.key = from.key;
+    modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
+    modalState.visible = true;
+  }
+
+  /**多列表新增单行确认 */
+  function arrayChildAddOk(from: Record<string, any>) {
+    const loc = `${arrayChildState.loc}/${from['index']['value']}`;
+
+    let data: Record<string, any> = {};
+    for (const key in from) {
+      // 子嵌套的不插入
+      if (from[key]['array']) {
+        continue;
+      }
+      // 检查规则
+      const [ok, msg] = ruleVerification(from[key]);
+      if (!ok) {
+        message.warning({
+          content: `${msg}`,
+          duration: 3,
+        });
+        return;
+      }
+      data[key] = from[key]['value'];
+    }
+
+    // 发送
+    const hide = message.loading(t('common.loading'), 0);
+    addNeConfigData({
+      neType: neTypeSelect.value[0],
+      neId: neTypeSelect.value[1],
+      paramName: treeState.selectNode.paramName,
+      paramData: data,
+      loc,
+    })
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('views.ne.neConfig.addItemOk', {
+              num: modalState.title,
+            }),
+            duration: 3,
+          });
+          fnActiveConfigNode('#');
+        } else {
+          message.warning({
+            content: t('views.ne.neConfig.addItemErr'),
+            duration: 3,
+          });
+        }
+      })
+      .finally(() => {
+        hide();
+        arrayEditClose();
+      });
+  }
+
+  return {
+    arrayChildState,
+    arrayChildExpand,
+    arrayChildEdit,
+    arrayChildEditOk,
+    arrayChildDelete,
+    arrayChildAdd,
+    arrayChildAddOk,
+  };
+}

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

@@ -0,0 +1,145 @@
+import { editNeConfigData } from '@/api/ne/neConfig';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import message from 'ant-design-vue/lib/message';
+import { reactive, toRaw } from 'vue';
+
+/**
+ * list类型参数处理
+ * @param param 父级传入 {t, treeState, neTypeSelect, ruleVerification}
+ * @returns
+ */
+export default function useConfigList({
+  t,
+  treeState,
+  neTypeSelect,
+  ruleVerification,
+}: any) {
+  /**单列表状态类型 */
+  type ListStateType = {
+    /**紧凑型 */
+    size: SizeType;
+    /**单列记录字段 */
+    columns: Record<string, any>[];
+    /**单列记录数据 */
+    data: Record<string, any>[];
+    /**编辑行记录 */
+    editRecord: Record<string, any>;
+    /**确认提交等待 */
+    confirmLoading: boolean;
+  };
+
+  /**单列表状态 */
+  let listState: ListStateType = reactive({
+    size: 'small',
+    columns: [
+      {
+        title: 'Key',
+        dataIndex: 'display',
+        align: 'left',
+        width: '30%',
+      },
+      {
+        title: 'Value',
+        dataIndex: 'value',
+        align: 'left',
+        width: '70%',
+      },
+    ],
+    data: [],
+    confirmLoading: false,
+    editRecord: {},
+  });
+
+  /**单列表编辑 */
+  function listEdit(row: Record<string, any>) {
+    listState.editRecord = Object.assign({}, row);
+  }
+
+  /**单列表编辑关闭 */
+  function listEditClose() {
+    listState.confirmLoading = false;
+    listState.editRecord = {};
+  }
+
+  /**单列表编辑确认 */
+  function listEditOk() {
+    if (listState.confirmLoading) return;
+    const from = toRaw(listState.editRecord);
+    // 检查规则
+    const [ok, msg] = ruleVerification(from);
+    if (!ok) {
+      message.warning({
+        content: `${msg}`,
+        duration: 3,
+      });
+      return;
+    }
+
+    // 发送
+    listState.confirmLoading = true;
+    const hide = message.loading(t('common.loading'), 0);
+    editNeConfigData({
+      neType: neTypeSelect.value[0],
+      neId: neTypeSelect.value[1],
+      paramName: treeState.selectNode.paramName,
+      paramData: {
+        [from['name']]: from['value'],
+      },
+    })
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('views.ne.neConfig.updateValue', {
+              num: from['display'],
+            }),
+            duration: 3,
+          });
+          // 改变表格数据
+          const item = listState.data.find(
+            (item: Record<string, any>) => from['name'] === item['name']
+          );
+          if (item) {
+            Object.assign(item, listState.editRecord);
+          }
+        } else {
+          message.warning({
+            content: t('views.ne.neConfig.updateValueErr'),
+            duration: 3,
+          });
+        }
+      })
+      .finally(() => {
+        hide();
+        listState.confirmLoading = false;
+        listState.editRecord = {};
+      });
+  }
+
+  /**表格分页器参数 */
+  let tablePagination = reactive({
+    /**当前页数 */
+    current: 1,
+    /**每页条数 */
+    pageSize: 10,
+    /**默认的每页条数 */
+    defaultPageSize: 10,
+    /**指定每页可以显示多少条 */
+    pageSizeOptions: ['10', '20', '50', '100'],
+    /**只有一页时是否隐藏分页器 */
+    hideOnSinglePage: true,
+    /**是否可以快速跳转至某页 */
+    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;
+    },
+  });
+
+  return { tablePagination, listState, listEdit, listEditClose, listEditOk };
+}

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

@@ -0,0 +1,192 @@
+import { getNeConfigData } from '@/api/ne/neConfig';
+import { regExpIPv4, regExpIPv6, validURL } from '@/utils/regular-utils';
+import { ref } from 'vue';
+
+/**
+ * 参数公共函数
+ * @param param 父级传入 {t}
+ * @returns
+ */
+export default function useOptions({ t }: any) {
+  /**规则校验 */
+  function ruleVerification(row: Record<string, any>): (string | boolean)[] {
+    let result = [true, ''];
+    const type = row.type;
+    const value = row.value;
+    const filter = row.filter;
+    const display = row.display;
+
+    // 子嵌套的不检查
+    if (row.array) {
+      return result;
+    }
+
+    // 可选的同时没有值不检查
+    if (row.optional === 'true' && !value) {
+      return result;
+    }
+    switch (type) {
+      case 'int':
+        // filter: "0~128"
+
+        if (filter && filter.indexOf('~') !== -1) {
+          const filterArr = filter.split('~');
+          const minInt = parseInt(filterArr[0]);
+          const maxInt = parseInt(filterArr[1]);
+          const valueInt = parseInt(value);
+          if (valueInt < minInt || valueInt > maxInt) {
+            return [
+              false,
+              t('views.ne.neConfig.requireInt', {
+                display,
+                filter,
+              }),
+            ];
+          }
+        }
+        break;
+      case 'ipv4':
+        if (!regExpIPv4.test(value)) {
+          return [
+            false,
+            t('views.ne.neConfig.requireIpv4', { display }),
+          ];
+        }
+        break;
+      case 'ipv6':
+        if (!regExpIPv6.test(value)) {
+          return [
+            false,
+            t('views.ne.neConfig.requireIpv6', { display }),
+          ];
+        }
+        break;
+      case 'enum':
+        if (filter && filter.indexOf('{') === 1) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          if (!Object.keys(filterJson).includes(`${value}`)) {
+            return [
+              false,
+              t('views.ne.neConfig.requireEnum', { display }),
+            ];
+          }
+        }
+        break;
+      case 'bool':
+        // filter: '{"0":"false", "1":"true"}'
+
+        if (filter && filter.indexOf('{') === 1) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          if (!Object.values(filterJson).includes(`${value}`)) {
+            return [
+              false,
+              t('views.ne.neConfig.requireBool', { display }),
+            ];
+          }
+        }
+        break;
+      case 'string':
+        // filter: "0~128"
+
+        // 字符串长度判断
+        if (filter && filter.indexOf('~') !== -1) {
+          try {
+            const filterArr = filter.split('~');
+            let rule = new RegExp(
+              '^\\S{' + filterArr[0] + ',' + filterArr[1] + '}$'
+            );
+            if (!rule.test(value)) {
+              return [
+                false,
+                t('views.ne.neConfig.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        // 字符串http判断
+        if (value.startsWith('http')) {
+          try {
+            if (!validURL(value)) {
+              return [
+                false,
+                t('views.ne.neConfig.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+
+        break;
+      case 'regex':
+        // filter: "^[0-9]{3}$"
+
+        if (filter) {
+          try {
+            let regex = new RegExp(filter);
+            if (!regex.test(value)) {
+              return [
+                false,
+                t('views.ne.neConfig.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        break;
+
+      default:
+        return [
+          false,
+          t('views.ne.neConfig.requireUn', { display }),
+        ];
+    }
+    return result;
+  }
+
+  /**upfId可选择 */
+  const smfByUPFIdOptions = ref<{ value: string; label: string }[]>([]);
+  /**加载smf配置的upfId */
+  function smfByUPFIdLoadData(neId: string) {
+    getNeConfigData({
+      neType: 'SMF',
+      neId: neId,
+      paramName: 'upfConfig',
+    }).then(res => {
+      smfByUPFIdOptions.value = [];
+      for (const s of res.data) {
+        smfByUPFIdOptions.value.push({
+          value: s.id,
+          label: s.id,
+        });
+      }
+    });
+  }
+
+  return {
+    ruleVerification,
+    smfByUPFIdLoadData,
+    smfByUPFIdOptions,
+  };
+}

src/views/ne/neConfig/index.vue

@@ -0,0 +1,942 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw, watch } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { message } from 'ant-design-vue/lib';
+import { DataNode } from 'ant-design-vue/lib/tree';
+import useI18n from '@/hooks/useI18n';
+import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useOptions from './hooks/useOptions';
+import useConfigList from './hooks/useConfigList';
+import useConfigArray from './hooks/useConfigArray';
+import useConfigArrayChild from './hooks/useConfigArrayChild';
+import { getAllNeConfig, getNeConfigData } from '@/api/ne/neConfig';
+const neInfoStore = useNeInfoStore();
+const { t } = useI18n();
+const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
+  t,
+});
+
+/**网元参数 */
+let neCascaderOptions = ref<Record<string, any>[]>([]);
+
+/**网元类型选择 type,id */
+let neTypeSelect = ref<string[]>(['', '']);
+
+/**左侧导航是否可收起 */
+let collapsible = ref<boolean>(true);
+
+/**改变收起状态 */
+function changeCollapsible() {
+  collapsible.value = !collapsible.value;
+}
+
+/**对象信息状态类型 */
+type TreeStateType = {
+  /**网元 loading */
+  loading: boolean;
+  /**网元配置 tree */
+  data: DataNode[];
+  /**选择对应Node一级 tree */
+  selectNode: {
+    title: string;
+    key: string;
+    // 可选属性数据
+    paramName: string;
+    paramDisplay: string;
+    paramType: string;
+    paramPerms: string[];
+    paramData: Record<string, any>[];
+  };
+  /**选择 loading */
+  selectLoading: boolean;
+};
+
+let treeState: TreeStateType = reactive({
+  loading: true,
+  data: [],
+  selectNode: {
+    paramName: '',
+    paramDisplay: '',
+    paramType: '',
+    paramPerms: [],
+    paramData: [],
+    // 树形节点需要有
+    title: '',
+    key: '',
+  },
+  selectLoading: true,
+});
+
+/**查询可选命令列表 */
+function fnSelectConfigNode(_: any, info: any) {
+  const { key } = info.node;
+  if (treeState.selectNode.paramName == key) {
+    return;
+  }
+  fnActiveConfigNode(key);
+}
+
+/**列表项点击监听 */
+function fnActiveConfigNode(key: string | number) {
+  listState.data = [];
+  arrayState.data = [];
+  treeState.selectLoading = true;
+  if (key === '#') {
+    key = treeState.selectNode.paramName;
+  } else {
+    treeState.selectNode.paramName = key as string;
+  }
+
+  const param = treeState.data.find(item => item.key === key);
+  if (!param) {
+    message.warning({
+      content: t('common.noData'),
+      duration: 3,
+    });
+    return;
+  }
+  treeState.selectNode = JSON.parse(JSON.stringify(param));
+
+  // 获取网元端的配置数据
+  getNeConfigData({
+    neType: neTypeSelect.value[0],
+    neId: neTypeSelect.value[1],
+    paramName: key,
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      const ruleArr = param.paramData;
+      const dataArr = res.data;
+      if (param.paramType === 'list') {
+        // 列表项数据
+        const dataList = [];
+        for (const item of dataArr) {
+          for (const key in item) {
+            // 规则为准
+            for (const rule of ruleArr) {
+              if (rule['name'] === key) {
+                const ruleItem = Object.assign(rule, {
+                  optional: 'true',
+                  value: item[key],
+                });
+                dataList.push(ruleItem);
+                break;
+              }
+            }
+          }
+        }
+        listState.data = dataList;
+        tablePagination.current = 1;
+        listEditClose();
+      }
+      if (param.paramType === 'array') {
+        // 列表项数据
+        const dataArray = [];
+        for (const item of dataArr) {
+          const index = item['index'];
+          let record: Record<string, any>[] = [];
+          for (const key in item) {
+            // 规则为准
+            for (const rule of ruleArr) {
+              if (rule['name'] === key) {
+                const ruleItem = Object.assign({ optional: 'true' }, rule, {
+                  value: item[key],
+                });
+                record.push(ruleItem);
+                break;
+              }
+            }
+          }
+          dataArray.push({ title: `Index-${index}`, key: index, record });
+        }
+        arrayState.data = dataArray;
+        // 无数据时，用于新增
+        arrayState.dataRule = { title: `Index-0`, key: 0, record: ruleArr };
+
+        // 列表数据
+        const columnsData: Record<string, any>[] = [];
+        for (const v of arrayState.data) {
+          const row: Record<string, any> = {};
+          for (const item of v.record) {
+            row[item.name] = item;
+          }
+          columnsData.push(row);
+        }
+        arrayState.columnsData = columnsData;
+        // 列表字段
+        const columns: Record<string, any>[] = [];
+        for (const rule of arrayState.dataRule.record) {
+          columns.push({
+            title: rule.display,
+            dataIndex: rule.name,
+            align: 'left',
+            resizable: true,
+            width: 150,
+            minWidth: 100,
+            maxWidth: 350,
+          });
+        }
+        columns.push({
+          title: t('common.operate'),
+          dataIndex: 'index',
+          key: 'index',
+          align: 'center',
+          fixed: 'right',
+          width: 100,
+        });
+        arrayState.columns = columns;
+        tablePagination.current = 1;
+        arrayEditClose();
+      }
+      setTimeout(() => {
+        treeState.selectLoading = false;
+      }, 300);
+    } else {
+      message.warning({
+        content: `${param.paramDisplay} ${t(
+          'views.configManage.configParamForm.noConfigData'
+        )}`,
+        duration: 3,
+      });
+    }
+  });
+}
+
+/**查询配置可选属性值列表 */
+function fnGetNeConfig() {
+  const neType = neTypeSelect.value[0];
+  if (!neType) {
+    message.warning({
+      content: t('views.configManage.configParamForm.neTypePleace'),
+      duration: 3,
+    });
+    return;
+  }
+
+  treeState.loading = true;
+  // 获取数据
+  getAllNeConfig(neType).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      const arr = [];
+      for (const item of res.data) {
+        let paramPerms: string[] = [];
+        if (item.paramPerms) {
+          paramPerms = item.paramPerms.split(',');
+        } else {
+          paramPerms = ['post', 'put', 'delete'];
+        }
+        arr.push({
+          ...item,
+          children: undefined,
+          title: item.paramDisplay,
+          key: item.paramName,
+          paramPerms,
+        });
+      }
+      treeState.data = arr;
+      treeState.loading = false;
+      // 取首个tag
+      if (res.data.length > 0) {
+        const item = JSON.parse(JSON.stringify(treeState.data[0]));
+        treeState.selectNode = item;
+        treeState.selectLoading = false;
+        fnActiveConfigNode(item.key);
+      }
+    }
+  });
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**添加框是否显示 */
+  visible: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**项类型 */
+  type: 'arrayAdd' | 'arrayEdit' | 'arrayChildAdd' | 'arrayChildEdit';
+  /**项Key */
+  key: string | number;
+  /**项数据 */
+  data: Record<string, any>[];
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visible: false,
+  title: 'Item',
+  from: {},
+  confirmLoading: false,
+  type: 'arrayAdd',
+  key: '',
+  data: [],
+});
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  const from = toRaw(modalState.from);
+  if (modalState.type === 'arrayAdd') {
+    arrayAddOk(from);
+  }
+  if (modalState.type === 'arrayEdit') {
+    arrayEditOk(from);
+  }
+  if (modalState.type === 'arrayChildAdd') {
+    arrayChildAddOk(from);
+  }
+  if (modalState.type === 'arrayChildEdit') {
+    arrayChildEditOk(from);
+  }
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visible = false;
+  modalState.from = {};
+  modalState.type = 'arrayAdd';
+  modalState.key = '';
+  modalState.data = [];
+}
+
+// 监听新增编辑弹窗
+watch(
+  () => modalState.visible,
+  val => {
+    // SMF需要选择配置的UPF id
+    if (val && neTypeSelect.value[0] === 'SMF') {
+      smfByUPFIdLoadData(neTypeSelect.value[1]);
+    }
+  }
+);
+
+const { tablePagination, listState, listEdit, listEditClose, listEditOk } =
+  useConfigList({ t, treeState, neTypeSelect, ruleVerification });
+
+const {
+  arrayState,
+  arrayEdit,
+  arrayEditClose,
+  arrayEditOk,
+  arrayDelete,
+  arrayAdd,
+  arrayAddOk,
+  arrayInitEdit,
+  arrayInitAdd,
+} = useConfigArray({
+  t,
+  treeState,
+  neTypeSelect,
+  fnActiveConfigNode,
+  ruleVerification,
+  modalState,
+  fnModalCancel,
+});
+
+const {
+  arrayChildState,
+  arrayChildExpand,
+  arrayChildEdit,
+  arrayChildEditOk,
+  arrayChildDelete,
+  arrayChildAdd,
+  arrayChildAddOk,
+} = useConfigArrayChild({
+  t,
+  treeState,
+  neTypeSelect,
+  fnActiveConfigNode,
+  ruleVerification,
+  modalState,
+  arrayState,
+  arrayInitEdit,
+  arrayInitAdd,
+  arrayEditClose,
+});
+
+onMounted(() => {
+  // 获取网元网元列表
+  neInfoStore.fnNelist().then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      if (res.data.length > 0) {
+        // 过滤不可用的网元
+        neCascaderOptions.value = neInfoStore.getNeSelectOtions.filter(
+          (item: any) => {
+            return !['OMC', 'LMF', 'NEF'].includes(item.value);
+          }
+        );
+        if (neCascaderOptions.value.length === 0) {
+          message.warning({
+            content: t('common.noData'),
+            duration: 2,
+          });
+          return;
+        }
+        // 默认选择AMF
+        const item = neCascaderOptions.value.find(s => s.value === 'AMF');
+        if (item && item.children) {
+          const info = item.children[0];
+          neTypeSelect.value = [info.neType, info.neId];
+        } else {
+          const info = neCascaderOptions.value[0].children[0];
+          neTypeSelect.value = [info.neType, info.neId];
+        }
+        fnGetNeConfig();
+      }
+    } else {
+      message.warning({
+        content: t('common.noData'),
+        duration: 2,
+      });
+    }
+  });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-row :gutter="16">
+      <a-col
+        :lg="6"
+        :md="6"
+        :xs="24"
+        style="margin-bottom: 24px"
+        v-show="collapsible"
+      >
+        <!-- 网元类型 -->
+        <a-card size="small" :bordered="false" :loading="treeState.loading">
+          <template #title>
+            {{ t('views.configManage.configParamForm.treeTitle') }}
+          </template>
+          <a-form layout="vertical" autocomplete="off">
+            <a-form-item name="neId ">
+              <a-cascader
+                v-model:value="neTypeSelect"
+                :options="neCascaderOptions"
+                :allow-clear="false"
+                @change="fnGetNeConfig"
+              />
+            </a-form-item>
+            <a-form-item name="listeningPort">
+              <a-tree
+                :tree-data="treeState.data"
+                :selected-keys="[treeState.selectNode.paramName]"
+                @select="fnSelectConfigNode"
+              >
+              </a-tree>
+            </a-form-item>
+          </a-form>
+        </a-card>
+      </a-col>
+      <a-col :lg="collapsible ? 18 : 24" :md="collapsible ? 18 : 24" :xs="24">
+        <a-card
+          size="small"
+          :bordered="false"
+          :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
+          :loading="treeState.selectLoading"
+        >
+          <template #title>
+            <a-button
+              type="text"
+              size="small"
+              @click.prevent="changeCollapsible()"
+            >
+              <template #icon>
+                <MenuFoldOutlined v-show="collapsible" />
+                <MenuUnfoldOutlined v-show="!collapsible" />
+              </template>
+            </a-button>
+
+            <a-typography-text strong v-if="treeState.selectNode.paramDisplay">
+              {{ treeState.selectNode.paramDisplay }}
+            </a-typography-text>
+            <a-typography-text type="danger" v-else>
+              {{ t('views.configManage.configParamForm.treeSelectTip') }}
+            </a-typography-text>
+          </template>
+          <template #extra>
+            <a-space :size="8" align="center" v-show="!treeState.selectLoading">
+              <a-tooltip>
+                <template #title>{{ t('common.reloadText') }}</template>
+                <a-button
+                  type="default"
+                  size="small"
+                  @click.prevent="fnActiveConfigNode('#')"
+                >
+                  <template #icon>
+                    <ReloadOutlined />
+                  </template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+
+          <!-- 单列表格列表 -->
+          <a-table
+            v-if="treeState.selectNode.paramType === 'list'"
+            class="table"
+            row-key="name"
+            :size="listState.size"
+            :columns="listState.columns"
+            :data-source="listState.data"
+            :pagination="tablePagination"
+            :bordered="true"
+            :scroll="{ x: true, y: '500px' }"
+          >
+            <template #bodyCell="{ column, text, record }">
+              <template v-if="column.dataIndex === 'value'">
+                <a-tooltip placement="topLeft">
+                  <template #title v-if="record.comment">
+                    {{ record.comment }}
+                  </template>
+                  <div class="editable-cell">
+                    <div
+                      v-if="
+                        listState.editRecord['display'] === record['display']
+                      "
+                      class="editable-cell__input-wrapper"
+                    >
+                      <a-input-number
+                        v-if="record['type'] === 'int'"
+                        v-model:value="listState.editRecord['value']"
+                        :disabled="listState.confirmLoading"
+                        style="width: 100%"
+                      ></a-input-number>
+                      <a-switch
+                        v-else-if="record['type'] === 'bool'"
+                        v-model:checked="listState.editRecord['value']"
+                        :checked-children="t('common.switch.open')"
+                        :un-checked-children="t('common.switch.shut')"
+                        :disabled="listState.confirmLoading"
+                      ></a-switch>
+                      <a-select
+                        v-else-if="record['type'] === 'enum'"
+                        v-model:value="listState.editRecord['value']"
+                        :allow-clear="true"
+                        :disabled="listState.confirmLoading"
+                        style="width: 100%"
+                      >
+                        <a-select-option
+                          :value="+v"
+                          :key="+v"
+                          v-for="(k, v) in JSON.parse(record['filter'])"
+                        >
+                          {{ k }}
+                        </a-select-option>
+                      </a-select>
+                      <a-input
+                        v-else
+                        v-model:value="listState.editRecord['value']"
+                        :disabled="listState.confirmLoading"
+                      ></a-input>
+                      <a-space
+                        :size="8"
+                        align="center"
+                        direction="horizontal"
+                        style="margin-left: 18px"
+                      >
+                        <a-tooltip placement="bottomRight">
+                          <template #title> {{ t('common.ok') }} </template>
+                          <a-popconfirm
+                            :title="
+                              t(
+                                'views.configManage.configParamForm.editOkTip',
+                                { num: record['display'] }
+                              )
+                            "
+                            placement="topRight"
+                            :disabled="listState.confirmLoading"
+                            @confirm="listEditOk()"
+                          >
+                            <a-button
+                              type="text"
+                              class="editable-cell__icon-edit"
+                              :disabled="listState.confirmLoading"
+                            >
+                              <template #icon>
+                                <CheckOutlined />
+                              </template>
+                            </a-button>
+                          </a-popconfirm>
+                        </a-tooltip>
+                        <a-tooltip placement="bottomRight">
+                          <template #title> {{ t('common.cancel') }} </template>
+                          <a-button
+                            type="text"
+                            class="editable-cell__icon-edit"
+                            :disabled="listState.confirmLoading"
+                            @click.prevent="listEditClose()"
+                          >
+                            <template #icon>
+                              <CloseOutlined />
+                            </template>
+                          </a-button>
+                        </a-tooltip>
+                      </a-space>
+                    </div>
+                    <div
+                      v-else
+                      class="editable-cell__text-wrapper"
+                      @dblclick="listEdit(record)"
+                    >
+                      <template v-if="record['type'] === 'enum'">
+                        {{ JSON.parse(record['filter'])[text] }}
+                      </template>
+                      <template v-else>{{ `${text}` || '&nbsp;' }}</template>
+                      <EditOutlined
+                        class="editable-cell__icon"
+                        @click="listEdit(record)"
+                        style="margin-left: 18px"
+                        v-if="
+                          !['read-only', 'read', 'ro'].includes(
+                            record.access
+                          ) && !listState.confirmLoading
+                        "
+                      />
+                    </div>
+                  </div>
+                </a-tooltip>
+              </template>
+            </template>
+          </a-table>
+
+          <!-- array类型 -->
+          <template v-if="treeState.selectNode.paramType === 'array'">
+            <a-table
+              class="table"
+              row-key="index"
+              :columns="treeState.selectNode.paramPerms.includes('get') ? arrayState.columnsDnd.filter((s:any)=>s.key !== 'index') : arrayState.columnsDnd"
+              :data-source="arrayState.columnsData"
+              :size="arrayState.size"
+              :pagination="tablePagination"
+              :bordered="true"
+              :scroll="{ x: arrayState.columnsDnd.length * 200, y: 480 }"
+              @resizeColumn="(w:number, col:any) => (col.width = w)"
+              :show-expand-column="false"
+              v-model:expanded-row-keys="arrayState.arrayChildExpandKeys"
+            >
+              <!-- 多列新增操作 -->
+              <template #title>
+                <a-space :size="16" align="center">
+                  <a-button
+                    type="primary"
+                    @click.prevent="arrayAdd()"
+                    size="small"
+                    v-if="treeState.selectNode.paramPerms.includes('post')"
+                  >
+                    <template #icon> <PlusOutlined /> </template>
+                    {{ t('common.addText') }}
+                  </a-button>
+                  <TableColumnsDnd
+                    type="ghost"
+                    :cache-id="treeState.selectNode.key"
+                    :columns="treeState.selectNode.paramPerms.includes('get') ? [...arrayState.columns.filter((s:any)=>s.key !== 'index')] : arrayState.columns"
+                    v-model:columns-dnd="arrayState.columnsDnd"
+                  ></TableColumnsDnd>
+                </a-space>
+              </template>
+
+              <!-- 多列数据渲染 -->
+              <template #bodyCell="{ column, text, record }">
+                <template v-if="column?.key === 'index'">
+                  <a-space :size="16" align="center">
+                    <a-tooltip
+                      v-if="treeState.selectNode.paramPerms.includes('put')"
+                    >
+                      <template #title>{{ t('common.editText') }}</template>
+                      <a-button type="link" @click.prevent="arrayEdit(text)">
+                        <template #icon><FormOutlined /></template>
+                      </a-button>
+                    </a-tooltip>
+                    <a-tooltip
+                      v-if="treeState.selectNode.paramPerms.includes('delete')"
+                    >
+                      <template #title>{{ t('common.deleteText') }}</template>
+                      <a-button type="link" @click.prevent="arrayDelete(text)">
+                        <template #icon><DeleteOutlined /></template>
+                      </a-button>
+                    </a-tooltip>
+                  </a-space>
+                </template>
+                <template v-else-if="text">
+                  <a-tooltip placement="topLeft">
+                    <template #title v-if="text.comment">
+                      {{ text.comment }}
+                    </template>
+                    <div class="editable-cell">
+                      <template v-if="text.array">
+                        <a-button
+                          type="default"
+                          size="small"
+                          @click.prevent="
+                            arrayChildExpand(record['index'], text)
+                          "
+                        >
+                          <template #icon><BarsOutlined /></template>
+                          {{
+                            t('views.configManage.configParamForm.arrayMore')
+                          }}
+                        </a-button>
+                        <!--特殊字段拓展显示-->
+                        <span
+                          v-if="
+                            text.name === 'dnnList' && Array.isArray(text.value)
+                          "
+                        >
+                          ({{
+                            text.value.length > 4
+                              ? `${text.value
+                                  .slice(0, 3)
+                                  .map((s: any) => s.dnn)
+                                  .join()}...${text.value.length}`
+                              : text.value.map((s: any) => s.dnn).join()
+                          }})
+                        </span>
+                      </template>
+
+                      <div v-else class="editable-cell__text-wrapper">
+                        <template v-if="text['type'] === 'enum'">
+                          {{ JSON.parse(text['filter'])[text.value] }}
+                        </template>
+                        <template v-else>
+                          {{ `${text.value}` || '&nbsp;' }}
+                        </template>
+                      </div>
+                    </div>
+                  </a-tooltip>
+                </template>
+              </template>
+
+              <!-- 多列嵌套类型 -->
+              <template #expandedRowRender>
+                <a-table
+                  class="table"
+                  row-key="index"
+                  :columns="arrayChildState.columnsDnd"
+                  :data-source="arrayChildState.columnsData"
+                  :size="arrayChildState.size"
+                  :pagination="tablePagination"
+                  :bordered="true"
+                  :scroll="{
+                    x: arrayChildState.columnsDnd.length * 200,
+                    y: 200,
+                  }"
+                  @resizeColumn="(w:number, col:any) => (col.width = w)"
+                >
+                  <template #title>
+                    <a-space :size="16" align="center">
+                      <a-button
+                        type="primary"
+                        @click.prevent="arrayChildAdd"
+                        size="small"
+                      >
+                        <template #icon> <PlusOutlined /> </template>
+                        {{ t('common.addText') }} {{ arrayChildState.title }}
+                      </a-button>
+                      <TableColumnsDnd
+                        type="ghost"
+                        :cache-id="`${treeState.selectNode.key}:${arrayChildState.loc}`"
+                        :columns="[...arrayChildState.columns]"
+                        v-model:columns-dnd="arrayChildState.columnsDnd"
+                        v-if="arrayChildState.loc"
+                      ></TableColumnsDnd>
+                    </a-space>
+                  </template>
+                  <template #bodyCell="{ column, text, record }">
+                    <template v-if="column?.key === 'index'">
+                      <a-space :size="8" align="center">
+                        <a-tooltip>
+                          <template #title>{{ t('common.editText') }}</template>
+                          <a-button
+                            type="link"
+                            @click.prevent="arrayChildEdit(text)"
+                          >
+                            <template #icon><FormOutlined /></template>
+                          </a-button>
+                        </a-tooltip>
+                        <a-tooltip>
+                          <template #title>
+                            {{ t('common.deleteText') }}
+                          </template>
+                          <a-button
+                            type="link"
+                            @click.prevent="arrayChildDelete(text)"
+                          >
+                            <template #icon><DeleteOutlined /></template>
+                          </a-button>
+                        </a-tooltip>
+                      </a-space>
+                    </template>
+                    <template v-else-if="text">
+                      <a-tooltip placement="topLeft">
+                        <template #title v-if="text.comment">
+                          {{ text.comment }}
+                        </template>
+                        <div class="editable-cell">
+                          <template v-if="text.array">
+                            <a-button type="default" size="small">
+                              <template #icon><BarsOutlined /></template>
+                              {{
+                                t(
+                                  'views.configManage.configParamForm.arrayMore'
+                                )
+                              }}
+                            </a-button>
+                          </template>
+
+                          <div v-else>
+                            <template v-if="text['type'] === 'enum'">
+                              {{ JSON.parse(text['filter'])[text.value] }}
+                            </template>
+                            <template v-else>
+                              {{ `${text.value}` || '&nbsp;' }}
+                            </template>
+                          </div>
+                        </div>
+                      </a-tooltip>
+                    </template>
+                  </template>
+                </a-table>
+              </template>
+            </a-table>
+          </template>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
+      :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="modalState.visible"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    >
+      <a-form
+        class="form"
+        layout="horizontal"
+        autocomplete="off"
+        :validate-on-rule-change="false"
+        :validateTrigger="[]"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
+        <a-form-item
+          v-for="item in modalState.data"
+          :label="item.display"
+          :name="item.name"
+          :required="item.optional === 'false'"
+          style="margin-bottom: 4px"
+        >
+          <a-tooltip placement="topLeft">
+            <template #title v-if="item.comment">
+              {{ item.comment }}
+            </template>
+
+            <div>
+              <div
+                v-if="
+                  !Array.isArray(item.array) &&
+                  modalState.from[item.name] !== undefined
+                "
+              >
+                <!-- 特殊SMF-upfid选择 -->
+                <a-select
+                  v-if="
+                    neTypeSelect[0] === 'SMF' &&
+                    modalState.from[item.name]['name'] === 'upfId'
+                  "
+                  v-model:value="modalState.from[item.name]['value']"
+                  :options="smfByUPFIdOptions"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
+                  :allow-clear="true"
+                  style="width: 100%"
+                >
+                </a-select>
+                <!-- 常规 -->
+                <a-input-number
+                  v-else-if="item['type'] === 'int'"
+                  v-model:value="modalState.from[item.name]['value']"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
+                  style="width: 100%"
+                ></a-input-number>
+                <a-switch
+                  v-else-if="item['type'] === 'bool'"
+                  v-model:checked="modalState.from[item.name]['value']"
+                  :checked-children="t('common.switch.open')"
+                  :un-checked-children="t('common.switch.shut')"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
+                ></a-switch>
+                <a-select
+                  v-else-if="item['type'] === 'enum'"
+                  v-model:value="modalState.from[item.name]['value']"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
+                  :allow-clear="true"
+                  style="width: 100%"
+                >
+                  <a-select-option
+                    :value="+v"
+                    :key="+v"
+                    v-for="(k, v) in JSON.parse(item['filter'])"
+                  >
+                    {{ k }}
+                  </a-select-option>
+                </a-select>
+                <a-input
+                  v-else
+                  v-model:value="modalState.from[item.name]['value']"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
+                ></a-input>
+              </div>
+              <div v-else>
+                {{ `${item.value || '&nbsp;'}` }}
+              </div>
+            </div>
+          </a-tooltip>
+        </a-form-item>
+      </a-form>
+    </ProModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.editable-cell {
+  &__icon {
+    display: none;
+    cursor: pointer;
+  }
+  &__icon:hover {
+    color: var(--ant-primary-color);
+  }
+  &__icon-edit:hover {
+    color: var(--ant-primary-color);
+  }
+  &__text-wrapper {
+    font-size: 16px;
+    color: #333;
+  }
+  &__text-wrapper:hover &__icon {
+    display: inline-block;
+  }
+  &__input-wrapper {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+  }
+}
+</style>

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

@@ -42,6 +42,7 @@ let modalState: ModalStateType = reactive({
   title: 'OAM Configuration',
   sync: true,
   from: {
+    omcIP: '',
     oamEnable: true,
     oamPort: 33030,
     snmpEnable: true,
@@ -77,6 +78,7 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
       if (res.code === RESULT_CODE_SUCCESS) {
         const data = res.data;
         Object.assign(modalState.from, {
+          omcIP: data.oamConfig[data.oamConfig.ipType],
           oamEnable: data.oamConfig.enable,
           oamPort: data.oamConfig.port,
           snmpEnable: data.snmpConfig.enable,
@@ -224,6 +226,17 @@ watch(
               </a-form-item>
             </a-col>
           </a-row>
+          <a-form-item
+            :label="t('views.ne.neInfo.oam.omcIP')"
+            name="omcIP"
+            :label-col="{ span: 6 }"
+            :labelWrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.omcIP"
+              :maxlength="128"
+            ></a-input>
+          </a-form-item>
         </a-collapse-panel>
         <a-collapse-panel header="SNMP">
           <a-row :gutter="16">

src/views/ne/neInfo/index.vue

@@ -625,7 +625,10 @@ onMounted(() => {
                         <DeleteOutlined />
                         {{ t('common.deleteText') }}
                       </a-menu-item>
-                      <a-menu-item key="oam">
+                      <a-menu-item
+                        key="oam"
+                        v-if="!['OMC'].includes(record.neType)"
+                      >
                         <FileTextOutlined />
                         {{ t('views.ne.common.oam') }}
                       </a-menu-item>

src/views/system/quick-start/components/NeInfoConfig.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Modal, message } from 'ant-design-vue/lib';
-import { onMounted, reactive, ref, toRaw } from 'vue';
+import { nextTick, onMounted, reactive, ref, toRaw } from 'vue';
 import {
   addNeInfo,
   delNeInfo,
@@ -15,6 +15,7 @@ import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import { fnToStepName } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
+
 const { getDict } = useDictStore();
 const { t } = useI18n();
 
@@ -97,13 +98,6 @@ let tableState: any = reactive({
 
 /**表格字段列 */
 let tableColumns: any = [
-  {
-    title: t('common.operate'),
-    dataIndex: 'operation',
-    key: 'operation',
-    align: 'left',
-    width: 100,
-  },
   {
     title: t('views.ne.common.neType'),
     dataIndex: 'neType',
@@ -132,6 +126,13 @@ let tableColumns: any = [
     align: 'left',
     width: 100,
   },
+  {
+    title: t('common.operate'),
+    dataIndex: 'operation',
+    key: 'operation',
+    align: 'left',
+    width: 90,
+  },
 ];
 
 /**
@@ -394,31 +395,70 @@ function fnStepPrev() {
   });
 }
 
-/**下一步操作 先全部集体发过去请求新增 */
+/**下一步操作 */
 function fnStepNext(stepName: 'NeInfoConfigPara5G') {
   if (stepName === 'NeInfoConfigPara5G') {
     Modal.confirm({
       title: t('common.tipTitle'),
       content: t('views.system.quickStart.stepNeInfoStepNext'),
-      okButtonProps: {
-        loading: tabState.confirmLoading,
-      },
       onOk() {
-        tabState.confirmLoading = true;
+        fnToStepName('NeInfoConfigPara5G');
-        // 使用 Promise.allSettled 等待所有 Promise 完成
-        Promise.allSettled(
-          tabState.panes.map((item: any) =>
-            item.id ? updateNeInfo(item) : addNeInfo(item)
-          )
-        ).finally(() => {
-          tabState.confirmLoading = false;
-          fnToStepName('NeInfoConfigPara5G');
-        });
       },
     });
   }
 }
 
+const editableData: any = reactive({});
+const inputField = ref<HTMLInputElement | null>(null); // 定义输入框的 ref
+
+//可编辑行
+function edit(key: string) {
+  // 查找相关的项
+  const itemToEdit = tabState.panes.find((item: any) => key === item.key);
+  editableData[key] = { ...itemToEdit };
+
+  //聚焦input框
+  nextTick(() => {
+    if (inputField.value) {
+      inputField.value.focus();
+    }
+  });
+}
+
+//脱离input框时即保存
+function save(key: string) {
+  const from = toRaw(tabState.panes.filter((item: any) => key === item.key)[0]);
+  if (editableData[key].ip !== from.ip) {
+    const fromData = Object.assign(from, editableData[key]);
+
+    //同步hosts下addr
+    for (const host of fromData.hosts) {
+      host.addr = fromData.ip;
+    }
+
+    updateNeInfo(fromData)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('common.operateOk'),
+            duration: 3,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            duration: 3,
+          });
+        }
+      })
+      .finally(() => {
+        fnModalCancel();
+      });
+  }
+  //退出编辑框
+  delete editableData[key];
+}
+
 /**获取列表 */
 function fnGetList() {
   listAllNeInfo({
@@ -426,13 +466,15 @@ function fnGetList() {
   }).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
       tabState.panes = [];
-      for (const item of res.data) {
+      res.data.forEach((item: any, index: any) => {
-        if (item.neType === 'OMC' || !Array.isArray(item.hosts)) continue;
+        if (item.neType === 'OMC' || !Array.isArray(item.hosts)) return;
+        item.key = index + 1;
         tabState.panes.push(item);
-      }
+      });
     }
   });
 }
+
 //
 onMounted(() => {
   // 初始字典数据
@@ -471,7 +513,7 @@ onMounted(() => {
       :scroll="{ y: 'calc(100vh - 480px)' }"
       @resizeColumn="(w:number, col:any) => (col.width = w)"
     >
-      <template #bodyCell="{ column, record }">
+      <template #bodyCell="{ column, text, record }">
         <template v-if="column.key === 'operation'">
           <a-space :size="8" align="center">
             <a-tooltip>
@@ -495,284 +537,44 @@ onMounted(() => {
             </a-tooltip>
           </a-space>
         </template>
+        <template v-if="column.dataIndex === 'ip'">
+          <div class="editable-cell">
+            <div
+              v-if="editableData[record.key]"
+              class="editable-cell-input-wrapper"
+            >
+              <a-input
+                ref="inputField"
+                v-model:value="editableData[record.key].ip"
+                @blur="save(record.key)"
+              />
+            </div>
+            <div
+              v-else
+              class="editable-cell-text-wrapper"
+              @dblclick="edit(record.key)"
+            >
+              {{ text || ' ' }}
+              <edit-outlined
+                class="editable-cell-icon"
+                @click="edit(record.key)"
+              />
+            </div>
+          </div>
+        </template>
       </template>
     </a-table>
-    <!-- 新增框或修改框 -->
-    <ProModal
-      :drag="true"
-      :width="800"
-      :destroyOnClose="true"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="modalState.visibleByEdit"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form
-        name="modalStateFrom"
-        layout="horizontal"
-        :label-col="{ span: 6 }"
-        :labelWrap="true"
-        :model="modalState.from"
-        autocomplete="off"
-      >
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.ne.common.neType')"
-              name="neType"
-              :rules="{
-                required: true,
-                message: t('views.ne.common.neTypePlease'),
-              }"
-            >
-              <a-auto-complete
-                v-model:value="modalState.from.neType"
-                :options="
-                  NE_TYPE_LIST.filter(s => s !== 'OMC').map(v => ({
-                    value: v,
-                  }))
-                "
-                @change="(v:any) => fnNeTypeChange(v, modalState.from)"
-              >
-                <a-input
-                  allow-clear
-                  :placeholder="t('views.ne.common.neTypePlease')"
-                  :maxlength="32"
-                >
-                  <template #prefix>
-                    <a-tooltip placement="topLeft">
-                      <template #title>
-                        {{ t('views.ne.common.neTypeTip') }}
-                      </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                    </a-tooltip>
-                  </template>
-                </a-input>
-              </a-auto-complete>
-            </a-form-item>
-          </a-col>
-
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.ne.common.neId')"
-              name="neId"
-              :rules="{
-                required: true,
-                message: t('views.ne.common.neIdPlease'),
-              }"
-            >
-              <a-input
-                v-model:value="modalState.from.neId"
-                allow-clear
-                :placeholder="t('views.ne.common.neIdPlease')"
-                :maxlength="24"
-              >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      {{ t('views.ne.common.neIdTip') }}
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip>
-                </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.ne.common.ipAddr')"
-              name="ip"
-              :rules="[
-                {
-                  required: true,
-                },
-                {
-                  validator: modalStateFromEqualIPV4AndIPV6,
-                },
-              ]"
-            >
-              <a-input
-                v-model:value="modalState.from.ip"
-                allow-clear
-                :placeholder="t('views.ne.common.ipAddrPlease')"
-                :maxlength="128"
-                @change="(e:any) => fnNeIPChange(e, modalState.from)"
-              >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      <div>
-                        {{ t('views.ne.common.ipAddrTip') }}
-                      </div>
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip>
-                </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24"> </a-col>
-        </a-row>
-
-        <template v-if="modalState.from.hosts.length > 0">
-          <a-divider orientation="left">
-            {{ t('views.ne.neInfo.hostConfig') }}
-          </a-divider>
-
-          <!-- 主机连接配置 -->
-          <a-row :gutter="16">
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.addr')">
-                <a-input
-                  v-model:value="modalState.from.hosts[0].addr"
-                  allow-clear
-                  :maxlength="128"
-                  :placeholder="t('common.inputPlease')"
-                >
-                </a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.port')" name="port">
-                <a-input-number
-                  v-model:value="modalState.from.hosts[0].port"
-                  :min="10"
-                  :max="65535"
-                  :step="1"
-                  :maxlength="5"
-                  :placeholder="t('common.inputPlease')"
-                  style="width: 100%"
-                ></a-input-number>
-              </a-form-item>
-            </a-col>
-          </a-row>
-
-          <a-row :gutter="16">
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.user')">
-                <a-input
-                  v-model:value="modalState.from.hosts[0].user"
-                  allow-clear
-                  :maxlength="32"
-                  :placeholder="t('common.inputPlease')"
-                >
-                </a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.authMode')">
-                <a-select
-                  v-model:value="modalState.from.hosts[0].authMode"
-                  default-value="0"
-                  :options="dict.neHostAuthMode"
-                >
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-
-          <a-form-item
-            v-if="modalState.from.hosts[0].authMode === '0'"
-            :label="t('views.ne.neHost.password')"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
-          >
-            <a-input-password
-              v-model:value="modalState.from.hosts[0].password"
-              :maxlength="128"
-              :placeholder="t('common.inputPlease')"
-            >
-            </a-input-password>
-          </a-form-item>
-
-          <template v-if="modalState.from.hosts[0].authMode === '1'">
-            <a-form-item
-              :label="t('views.ne.neHost.privateKey')"
-              :label-col="{ span: 3 }"
-              :label-wrap="true"
-            >
-              <a-textarea
-                v-model:value="modalState.from.hosts[0].privateKey"
-                :auto-size="{ minRows: 4, maxRows: 6 }"
-                :maxlength="3000"
-                :show-count="true"
-                :placeholder="t('views.ne.neHost.privateKeyPlease')"
-              />
-            </a-form-item>
-
-            <a-form-item
-              :label="t('views.ne.neHost.passPhrase')"
-              :label-col="{ span: 3 }"
-              :label-wrap="true"
-            >
-              <a-input-password
-                v-model:value="modalState.from.hosts[0].passPhrase"
-                :maxlength="128"
-                :placeholder="t('common.inputPlease')"
-              >
-              </a-input-password>
-            </a-form-item>
-          </template>
-
-          <a-form-item
-            :label="t('views.ne.neHost.test')"
-            name="test"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
-          >
-            <a-button
-              type="dashed"
-              shape="round"
-              @click="fnHostTest(modalState.from.hosts[0])"
-              :disabled="tabState.confirmLoading"
-            >
-              <template #icon><LinkOutlined /></template>
-            </a-button>
-
-            <a-button
-              type="link"
-              @click="fnHostAuthorized(modalState.from.hosts[0])"
-              :disabled="tabState.confirmLoading"
-              v-if="
-                modalState.from.hosts[0].hostType === 'ssh' &&
-                modalState.from.hosts[0].authMode !== '2'
-              "
-            >
-              {{ t('views.ne.neHost.authRSA') }}
-            </a-button>
-          </a-form-item>
-        </template>
-
-        <!-- <a-form-item :wrapper-col="{ offset: 10, span: 4 }">
-          <a-button
-            type="primary"
-            ghost
-            html-type="submit"
-            :disabled="tabState.confirmLoading"
-          >
-            {{ t('views.system.quickStart.save') }}
-          </a-button>
-        </a-form-item> -->
-      </a-form>
-    </ProModal>
 
     <div class="ne-oper">
       <a-space direction="horizontal" :size="18">
-        <!-- 添加网元 -->
-        <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
-          <template #icon><PlusOutlined /></template>
-          {{ t('common.addText') }}
-        </a-button>
-
         <a-button @click="fnStepPrev()" :disabled="tabState.confirmLoading">
           {{ t('views.system.quickStart.exit') }}
         </a-button>
+        <!-- 添加网元 -->
+        <a-button type="primary" ghost @click.prevent="fnModalVisibleByEdit()">
+          <template #icon><PlusOutlined /></template>
+          {{ t('common.addText') }}
+        </a-button>
 
         <a-button
           type="primary"
@@ -784,6 +586,270 @@ onMounted(() => {
       </a-space>
     </div>
   </div>
+  <!-- 新增框或修改框 -->
+  <ProModal
+    :drag="true"
+    :width="800"
+    :destroyOnClose="true"
+    :keyboard="false"
+    :mask-closable="false"
+    :visible="modalState.visibleByEdit"
+    :title="modalState.title"
+    :confirm-loading="modalState.confirmLoading"
+    @ok="fnModalOk"
+    @cancel="fnModalCancel"
+  >
+    <a-form
+      name="modalStateFrom"
+      layout="horizontal"
+      :label-col="{ span: 6 }"
+      :labelWrap="true"
+      :model="modalState.from"
+      autocomplete="off"
+    >
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.ne.common.neType')"
+            name="neType"
+            :rules="{
+              required: true,
+              message: t('views.ne.common.neTypePlease'),
+            }"
+          >
+            <a-auto-complete
+              v-model:value="modalState.from.neType"
+              :options="
+                NE_TYPE_LIST.filter(s => s !== 'OMC').map(v => ({
+                  value: v,
+                }))
+              "
+              @change="(v:any) => fnNeTypeChange(v, modalState.from)"
+            >
+              <a-input
+                allow-clear
+                :placeholder="t('views.ne.common.neTypePlease')"
+                :maxlength="32"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.ne.common.neTypeTip') }}
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-auto-complete>
+          </a-form-item>
+        </a-col>
+
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.ne.common.neId')"
+            name="neId"
+            :rules="{
+              required: true,
+              message: t('views.ne.common.neIdPlease'),
+            }"
+          >
+            <a-input
+              v-model:value="modalState.from.neId"
+              allow-clear
+              :placeholder="t('views.ne.common.neIdPlease')"
+              :maxlength="24"
+            >
+              <template #prefix>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    {{ t('views.ne.common.neIdTip') }}
+                  </template>
+                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                </a-tooltip>
+              </template>
+            </a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.ne.common.ipAddr')"
+            name="ip"
+            :rules="[
+              {
+                required: true,
+              },
+              {
+                validator: modalStateFromEqualIPV4AndIPV6,
+              },
+            ]"
+          >
+            <a-input
+              v-model:value="modalState.from.ip"
+              allow-clear
+              :placeholder="t('views.ne.common.ipAddrPlease')"
+              :maxlength="128"
+              @change="(e:any) => fnNeIPChange(e, modalState.from)"
+            >
+              <template #prefix>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    <div>
+                      {{ t('views.ne.common.ipAddrTip') }}
+                    </div>
+                  </template>
+                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                </a-tooltip>
+              </template>
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24"> </a-col>
+      </a-row>
+
+      <template v-if="modalState.from.hosts.length > 0">
+        <a-divider orientation="left">
+          {{ t('views.ne.neInfo.hostConfig') }}
+        </a-divider>
+
+        <!-- 主机连接配置 -->
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.ne.neHost.addr')">
+              <a-input
+                v-model:value="modalState.from.hosts[0].addr"
+                allow-clear
+                :maxlength="128"
+                :placeholder="t('common.inputPlease')"
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.ne.neHost.port')" name="port">
+              <a-input-number
+                v-model:value="modalState.from.hosts[0].port"
+                :min="10"
+                :max="65535"
+                :step="1"
+                :maxlength="5"
+                :placeholder="t('common.inputPlease')"
+                style="width: 100%"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.ne.neHost.user')">
+              <a-input
+                v-model:value="modalState.from.hosts[0].user"
+                allow-clear
+                :maxlength="32"
+                :placeholder="t('common.inputPlease')"
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.ne.neHost.authMode')">
+              <a-select
+                v-model:value="modalState.from.hosts[0].authMode"
+                default-value="0"
+                :options="dict.neHostAuthMode"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          v-if="modalState.from.hosts[0].authMode === '0'"
+          :label="t('views.ne.neHost.password')"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
+          <a-input-password
+            v-model:value="modalState.from.hosts[0].password"
+            :maxlength="128"
+            :placeholder="t('common.inputPlease')"
+          >
+          </a-input-password>
+        </a-form-item>
+
+        <template v-if="modalState.from.hosts[0].authMode === '1'">
+          <a-form-item
+            :label="t('views.ne.neHost.privateKey')"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-textarea
+              v-model:value="modalState.from.hosts[0].privateKey"
+              :auto-size="{ minRows: 4, maxRows: 6 }"
+              :maxlength="3000"
+              :show-count="true"
+              :placeholder="t('views.ne.neHost.privateKeyPlease')"
+            />
+          </a-form-item>
+
+          <a-form-item
+            :label="t('views.ne.neHost.passPhrase')"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-input-password
+              v-model:value="modalState.from.hosts[0].passPhrase"
+              :maxlength="128"
+              :placeholder="t('common.inputPlease')"
+            >
+            </a-input-password>
+          </a-form-item>
+        </template>
+
+        <a-form-item
+          :label="t('views.ne.neHost.test')"
+          name="test"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
+          <a-button
+            type="dashed"
+            shape="round"
+            @click="fnHostTest(modalState.from.hosts[0])"
+            :disabled="tabState.confirmLoading"
+          >
+            <template #icon><LinkOutlined /></template>
+          </a-button>
+
+          <a-button
+            type="link"
+            @click="fnHostAuthorized(modalState.from.hosts[0])"
+            :disabled="tabState.confirmLoading"
+            v-if="
+              modalState.from.hosts[0].hostType === 'ssh' &&
+              modalState.from.hosts[0].authMode !== '2'
+            "
+          >
+            {{ t('views.ne.neHost.authRSA') }}
+          </a-button>
+        </a-form-item>
+      </template>
+
+      <!-- <a-form-item :wrapper-col="{ offset: 10, span: 4 }">
+              <a-button
+                type="primary"
+                ghost
+                html-type="submit"
+                :disabled="tabState.confirmLoading"
+              >
+                {{ t('views.system.quickStart.save') }}
+              </a-button>
+            </a-form-item> -->
+    </a-form>
+  </ProModal>
 </template>
 
 <style lang="less" scoped>
@@ -807,4 +873,45 @@ onMounted(() => {
     text-align: end;
   }
 }
+
+.editable-cell {
+  position: relative;
+  .editable-cell-input-wrapper,
+  .editable-cell-text-wrapper {
+    padding-right: 24px;
+  }
+
+  .editable-cell-text-wrapper {
+    padding: 5px 24px 5px 5px;
+  }
+
+  .editable-cell-icon,
+  .editable-cell-icon-check {
+    position: absolute;
+    right: 0;
+    width: 20px;
+    cursor: pointer;
+  }
+
+  .editable-cell-icon {
+    margin-top: 4px;
+    display: none;
+  }
+
+  .editable-cell-icon-check {
+    line-height: 28px;
+  }
+
+  .editable-cell-icon:hover,
+  .editable-cell-icon-check:hover {
+    color: #108ee9;
+  }
+
+  .editable-add-btn {
+    margin-bottom: 8px;
+  }
+}
+.editable-cell:hover .editable-cell-icon {
+  display: inline-block;
+}
 </style>

src/views/tool/terminal/index.vue

@@ -226,10 +226,11 @@ function fnTabClose(id: string) {
 
 <template>
   <PageContainer>
-    <a-card :bordered="false" :body-style="{ padding: '12px' }">
+    <a-card :bordered="false" size="small" :body-style="{ padding: '12px' }">
       <a-tabs
         class="terminal-tabs"
         hide-add
+        size="small"
         tab-position="top"
         type="editable-card"
         :tab-bar-gutter="8"
@@ -343,7 +344,12 @@ function fnTabClose(id: string) {
               <template #title>
                 {{ t('views.tool.terminal.new') }}
               </template>
-              <a-button type="default" shape="circle" @click="fnTabMenu('new')">
+              <a-button
+                type="default"
+                shape="circle"
+                size="small"
+                @click="fnTabMenu('new')"
+              >
                 <template #icon><PlusOutlined /></template>
               </a-button>
             </a-tooltip>
@@ -354,7 +360,7 @@ function fnTabClose(id: string) {
                   {{ t('views.tool.terminal.more') }}
                 </template>
                 <a-dropdown trigger="click" placement="bottomRight">
-                  <a-button type="ghost" shape="circle">
+                  <a-button type="ghost" shape="circle" size="small">
                     <template #icon><EllipsisOutlined /></template>
                   </a-button>
                   <template #overlay>
@@ -385,8 +391,7 @@ function fnTabClose(id: string) {
 
 <style lang="less" scoped>
 .pane-box {
-  padding: 16px;
+  height: calc(100vh - 200px);
-  height: calc(100vh - 320px);
   overflow-x: hidden;
 }
 </style>