From a8854b4e71e38f851d8d140485a06c88891bc873 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 14 Nov 2023 17:14:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=82=E6=95=B0=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E7=AB=96=E5=90=91=E5=BD=A2=E5=BC=8F/?=
 =?UTF-8?q?=E5=A4=9A=E8=AF=AD=E8=A8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/configManage/configParam.ts           |   24 +-
 src/i18n/locales/en-US.ts                     |   25 +-
 src/i18n/locales/zh-CN.ts                     |   27 +-
 .../configManage/configParamForm/index.vue    | 1718 ++++++++++
 .../configParamTree copy/index.vue            | 2932 -----------------
 5 files changed, 1774 insertions(+), 2952 deletions(-)
 create mode 100644 src/views/configManage/configParamForm/index.vue
 delete mode 100644 src/views/configManage/configParamTree copy/index.vue

diff --git a/src/api/configManage/configParam.ts b/src/api/configManage/configParam.ts
index d885f021..3a69d7e3 100644
--- a/src/api/configManage/configParam.ts
+++ b/src/api/configManage/configParam.ts
@@ -260,33 +260,27 @@ export async function getParamConfigInfoTable(
 }
 
 /**
- * 查询配置参数标签栏对应信息-树结构处理
+ * 查询配置参数标签栏对应信息-表单结构处理
  * @param neType 网元类型
  * @param topTag
  * @param neId
  * @returns object
  */
-export async function getParamConfigInfoTree(
+export async function getParamConfigInfoForm(
   neType: string,
   topTag: string,
   neId: string
 ) {
   const { wrRule, dataArr } = await getParamConfigInfo(neType, topTag, neId);
 
-  type TreeNodeType = {
-    title: string;
-    key: string;
-    record: Record<string, any>[];
-  };
-
   // 拼装数据
   const result = {
     code: RESULT_CODE_SUCCESS,
     msg: RESULT_MSG_SUCCESS,
     data: {
       type: 'list' as 'list' | 'array',
-      data: [] as TreeNodeType[],
-      recordRule: {},
+      data: [] as Record<string, any>[],
+      dataRule: {},
     },
   };
 
@@ -298,7 +292,7 @@ export async function getParamConfigInfoTree(
     // 列表项数据
     const dataList = [];
     for (const item of dataArr) {
-      for (const key of Object.keys(item)) {
+      for (const key in item) {
         // 规则为准
         for (const rule of ruleArr) {
           if (rule['name'] === key) {
@@ -322,7 +316,7 @@ export async function getParamConfigInfoTree(
     for (const item of dataArr) {
       const index = item['index'];
       let record: Record<string, any>[] = [];
-      for (const key of Object.keys(item)) {
+      for (const key in item) {
         // 规则为准
         for (const rule of ruleArr) {
           if (rule['name'] === key) {
@@ -339,11 +333,7 @@ export async function getParamConfigInfoTree(
     result.data.data = dataArray;
 
     // 无数据时，用于新增
-    let dataRule: Record<string, any> = {};
-    for (const rule of ruleArr) {
-      dataRule[rule.name] = rule;
-    }
-    result.data.recordRule = dataRule;
+    result.data.dataRule = { title: `Index-0`, key: 0, record : [ruleArr]} ;
   }
   return result;
 }
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 9cdd566a..f9f18916 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -427,7 +427,30 @@ export default {
         editSure:'Are you sure you want to update this attribute value? ',
         arraryEdit:'Are you sure to submit the record whose updated Index is [{value}]? ',
         addSure:'Are you sure to submit the new record of Index: [{value}]? '
-      }
+      },
+      configParamForm: {
+        neType: 'NE Type',
+        neTypePleace: "Please select the network element type",
+        noConfigData: "No data on configuration items",
+        updateValue: "The value of the {num} attribute was 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: "The {display} parameter value does not make sense.",
+        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: "commence",
+      },
     },
     neUser: {
       auth: {
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 584062b3..c966ddb0 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -426,8 +426,31 @@ export default {
         post:'提交',
         editSure:'确认更新该属性值吗？',
         arraryEdit:'确认提交更新 Index 为 【{value}】 的记录吗？',
-        addSure:'确认提交新增 Index :【{value}】 的记录吗？'
-      }
+        addSure:'确认提交新增 Index :【{value}】 的记录吗？',
+      },
+      configParamForm: {
+        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: "展开",
+      },
     },
     neUser: {
       auth: {
diff --git a/src/views/configManage/configParamForm/index.vue b/src/views/configManage/configParamForm/index.vue
new file mode 100644
index 00000000..ffed2960
--- /dev/null
+++ b/src/views/configManage/configParamForm/index.vue
@@ -0,0 +1,1718 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue';
+import { PageContainer } from '@ant-design-vue/pro-layout';
+import { message } from 'ant-design-vue/lib';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import {
+  getParamConfigTopTab,
+  getParamConfigInfoForm,
+  updateParamConfigInfo,
+  delParamConfigInfo,
+  addParamConfigInfo,
+} from '@/api/configManage/configParam';
+import { TabPosition } from 'ant-design-vue/lib/tabs/src/interface';
+import useNeInfoStore from '@/store/modules/neinfo';
+import { toRaw } from 'vue';
+import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+const { t } = useI18n();
+
+/**网元参数 */
+let neCascaderOtions = ref<Record<string, any>[]>([]);
+
+/**网元类型选择 type,id */
+let neTypeSelect = ref<string[]>(['', '']);
+
+/**tab标签栏类型 */
+type TabStateType = {
+  /**标签方向 */
+  tabPosition: TabPosition;
+  /**标签项 */
+  tabNames: Record<string, any>[];
+  /**标签激活项 */
+  tabActiveTopTag: string;
+  /**标签项类型 */
+  tabType: 'list' | 'array';
+  /**加载等待 */
+  loading: boolean;
+};
+
+/**tab标签栏属性 */
+let tabState: TabStateType = reactive({
+  tabPosition: 'left',
+  tabNames: [],
+  tabActiveTopTag: '',
+  tabType: 'list',
+  loading: false,
+});
+
+/**tab标签栏标签点击监听 */
+function fnTabActiveTopTag(key: string | number) {
+  if (tabState.loading) return;
+  listState.data = [];
+  arrayState.data = [];
+  tabState.loading = true;
+  if (key !== '#') {
+    tabState.tabActiveTopTag = key as string;
+  }
+
+  // 获取数据
+  const neType = neTypeSelect.value[0];
+  const neId = neTypeSelect.value[1];
+  const topTag = tabState.tabActiveTopTag;
+  getParamConfigInfoForm(neType, topTag, neId)
+    .then(res => {
+      console.log(res);
+      if (res.code === RESULT_CODE_SUCCESS && res.data.type) {
+        tabState.loading = false;
+        tabState.tabType = res.data.type;
+        if (res.data.type === 'list') {
+          listState.data = res.data.data;
+          listEditClose();
+        }
+        if (res.data.type === 'array') {
+          arrayState.data = res.data.data;
+          arrayState.dataRule = res.data.dataRule;
+          arrayState.collapseActiveKey = [];
+          arrayEditClose();
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 3,
+        });
+      }
+    })
+    .catch(err => {
+      console.log(err);
+    });
+}
+
+/**查询配置Tag标签 */
+function fnGetParamConfigTopTab() {
+  const neType = neTypeSelect.value[0];
+  if (!neType) {
+    message.warning({
+      content: t('views.configManage.configParamForm.neTypePleace'),
+      duration: 3,
+    });
+    return;
+  }
+  // 获取数据
+  getParamConfigTopTab(neType).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      tabState.tabNames = res.data;
+      // 取首个tag
+      if (res.data.length > 0) {
+        const topTag = res.data[0].topTag;
+        fnTabActiveTopTag(topTag);
+      }
+    } else {
+      message.warning({
+        content: t('views.configManage.configParamForm.noConfigData'),
+        duration: 3,
+      });
+    }
+  });
+}
+
+/**单列表状态类型 */
+type ListStateType = {
+  /**紧凑型 */
+  size: SizeType;
+  /**单列记录字段 */
+  columns: Record<string, any>[];
+  /**单列记录数据 */
+  data: Record<string, any>[];
+  /**编辑行记录 */
+  editRecord: Record<string, any>;
+};
+
+/**单列表状态 */
+let listState: ListStateType = reactive({
+  size: 'middle',
+  columns: [
+    {
+      title: 'Key',
+      dataIndex: 'display',
+      align: 'left',
+      width: '30%',
+    },
+    {
+      title: 'Value',
+      dataIndex: 'value',
+      align: 'left',
+      width: '70%',
+    },
+  ],
+  data: [],
+  editRecord: {},
+});
+
+/**单列表编辑 */
+function listEdit(row: Record<string, any>) {
+  listState.editRecord = Object.assign({}, row);
+}
+
+/**单列表编辑关闭 */
+function listEditClose() {
+  listState.editRecord = {};
+}
+
+/**单列表编辑确认 */
+function listEditOk() {
+  const from = toRaw(listState.editRecord);
+  // 检查规则
+  const [ok, msg] = ruleVerification(from);
+  if (!ok) {
+    message.warning({
+      content: `${msg}`,
+      duration: 3,
+    });
+    return;
+  }
+
+  // 发送
+  const hide = message.loading({ content: t('common.loading') });
+  let data = {
+    [from['name']]: from['value'],
+  };
+  updateParamConfigInfo(
+    'list',
+    {
+      neType: neTypeSelect.value[0],
+      neId: neTypeSelect.value[1],
+      topTag: tabState.tabActiveTopTag,
+    },
+    data
+  )
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('views.configManage.configParamForm.updateValue', {
+            num: from['display'],
+          }),
+          duration: 3,
+        });
+        // 改变表格数据
+        const item = listState.data.filter(
+          (item: Record<string, any>) => from['name'] === item['name']
+        )[0];
+        if (item) {
+          Object.assign(item, listState.editRecord);
+        }
+      } else {
+        message.warning({
+          content: t('views.configManage.configParamForm.updateValueErr'),
+          duration: 3,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      listState.editRecord = {};
+    });
+}
+
+/**多列列表状态类型 */
+type ArrayStateType = {
+  /**面板激活项 */
+  collapseActiveKey: string[];
+  /**多列记录数据 */
+  data: Record<string, any>[];
+  /**多列记录规则 */
+  dataRule: Record<string, any>;
+  /**新增行记录Index 编辑-1/新增>=0 */
+  newIndex: number;
+  /**编辑行Key值 */
+  editKey: number | string;
+  /**编辑行记录 */
+  editRecord: Record<string, any>;
+};
+
+/**多列列表状态 */
+let arrayState: ArrayStateType = reactive({
+  collapseActiveKey: [],
+  data: [],
+  dataRule: {},
+  newIndex: -2,
+  editKey: -1,
+  editRecord: {},
+});
+
+/**多列表编辑 */
+function arrayEdit(item: Record<string, any>, index: number) {
+  console.log(item, index);
+  const row: Record<string, any> = {};
+  for (const v of item.record) {
+    row[v.name] = Object.assign({}, v);
+  }
+  arrayState.editRecord = row;
+  arrayState.editKey = item.key;
+  arrayState.newIndex = index;
+
+  // 面板
+  const hasIndex = arrayState.collapseActiveKey.indexOf(`${item.key}`);
+  if (hasIndex === -1) {
+    arrayState.collapseActiveKey.push(`${item.key}`);
+  } else {
+    // tableState.collapseActiveKey.splice(hasIndex, 1);
+  }
+
+  // 关闭嵌套
+  arrayChildExpandClose();
+}
+
+/**多列表编辑关闭 */
+function arrayEditClose() {
+  arrayState.editRecord = {};
+  arrayState.newIndex = -3;
+  arrayState.editKey = -1;
+  arrayChildEditClose();
+}
+
+/**多列表编辑确认 */
+function arrayEditOk() {
+  const from = toRaw(arrayState.editRecord);
+  const loc = from['index']['value'];
+  const neType = neTypeSelect.value[0];
+  // 遍历提取属性和值
+  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({ content: t('common.loading') });
+  updateParamConfigInfo(
+    'array',
+    {
+      neType: neType,
+      neId: neTypeSelect.value[1],
+      topTag: tabState.tabActiveTopTag,
+      loc,
+    },
+    data
+  )
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('views.configManage.configParamForm.updateItem', {
+            num: loc,
+          }),
+          duration: 3,
+        });
+        fnTabActiveTopTag('#');
+      } else {
+        message.warning({
+          content: t('views.configManage.configParamForm.updateItemErr', {
+            num: loc,
+          }),
+          duration: 3,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      arrayEditClose();
+    });
+}
+
+/**多列表删除单行 */
+function arrayDelete(row: Record<string, any>) {
+  const index = row.key;
+  delParamConfigInfo({
+    neType: neTypeSelect.value[0],
+    neId: neTypeSelect.value[1],
+    topTag: tabState.tabActiveTopTag,
+    loc: index,
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      message.success({
+        content: t('views.configManage.configParamForm.delItemOk', {
+          num: index,
+        }),
+        duration: 2,
+      });
+      fnTabActiveTopTag('#');
+    } else {
+      message.error({
+        content: `${res.msg}`,
+        duration: 2,
+      });
+    }
+  });
+}
+
+/**多列表新增单行 */
+function arrayAdd() {
+  const from = arrayAddInit(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 = 'array';
+  modalState.title = from.title;
+  modalState.key = from.key;
+  modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
+  modalState.visibleByAdd = true;
+}
+
+/**多列表新增单行确认 */
+function arrayAddOk(from: Record<string, any>) {
+  const index = from['index']['value'];
+  const neType = neTypeSelect.value[0];
+  // 遍历提取属性和值
+  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({ content: t('common.loading') });
+  addParamConfigInfo(
+    {
+      neType: neType,
+      neId: neTypeSelect.value[1],
+      topTag: tabState.tabActiveTopTag,
+      loc: index,
+    },
+    data
+  )
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('views.configManage.configParamForm.addItemOk', {
+            num: index,
+          }),
+          duration: 3,
+        });
+        fnTabActiveTopTag('#');
+      } else {
+        message.warning({
+          content: t('views.configManage.configParamForm.addItemErr'),
+          duration: 3,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      fnModalCancel();
+      arrayEditClose();
+    });
+}
+
+/**多列嵌套列表状态类型 */
+type ArrayChildStateType = {
+  /**标题 */
+  title: string;
+  /**层级index */
+  loc: string;
+  /**面板激活项 */
+  collapseActiveKey: string[];
+  /**多列嵌套记录数据 */
+  data: Record<string, any>[];
+  /**多列嵌套记录规则 */
+  dataRule: Record<string, any>;
+  /**新增嵌套行记录Index  编辑-1/新增>=0 */
+  newIndex: number;
+  /**编辑嵌套行Key值 */
+  editKey: number | string;
+  /**编辑嵌套行记录 */
+  editRecord: Record<string, any>;
+};
+
+/**表格状态 */
+let arrayChildState: ArrayChildStateType = reactive({
+  title: '',
+  loc: '',
+  collapseActiveKey: [],
+  data: [],
+  dataRule: {},
+  newIndex: -2,
+  editKey: -1,
+  editRecord: {},
+});
+
+/**多列表展开嵌套行 */
+function arrayChildExpand(key: number | string, row: Record<string, any>) {
+  const loc = key;
+  arrayChildState.loc = '';
+  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],
+  };
+
+  arrayChildState.loc = `${loc}/${from['name']}`;
+  arrayChildState.newIndex = -3;
+  // 设置展开列表标题
+  arrayChildState.title = `${from['display']}`;
+  // 关闭默认展开
+  arrayChildState.collapseActiveKey = [];
+}
+
+/**多列表展开嵌套行 */
+function arrayChildExpandClose() {
+  arrayChildState.title = '';
+  arrayChildEditClose();
+}
+
+/**多列表嵌套行编辑 */
+function arrayChildEdit(item: Record<string, any>, index: number) {
+  console.log(item, index);
+  const row: Record<string, any> = {};
+  for (const v of item.record) {
+    row[v.name] = Object.assign({}, v);
+  }
+  arrayChildState.editRecord = row;
+  arrayChildState.editKey = item.key;
+  arrayChildState.newIndex = index;
+
+  // 面板
+  const hasIndex = arrayChildState.collapseActiveKey.indexOf(`${item.key}`);
+  if (hasIndex === -1) {
+    arrayChildState.collapseActiveKey.push(`${item.key}`);
+  } else {
+    // arrayChildState.collapseActiveKey.splice(hasIndex, 1);
+  }
+}
+
+/**多列表嵌套行编辑关闭 */
+function arrayChildEditClose() {
+  arrayChildState.editRecord = {};
+  arrayChildState.editKey = -1;
+  arrayChildState.newIndex = -3;
+}
+
+/**多列表嵌套行编辑确认 */
+function arrayChildEditOk() {
+  const from = toRaw(arrayChildState.editRecord);
+  const index = from['index']['value'];
+  const loc = `${arrayChildState.loc}/${index}`;
+  const neType = neTypeSelect.value[0];
+
+  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({ content: t('common.loading') });
+  updateParamConfigInfo(
+    'array',
+    {
+      neType: neType,
+      neId: neTypeSelect.value[1],
+      topTag: tabState.tabActiveTopTag,
+      loc,
+    },
+    data
+  )
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('views.configManage.configParamForm.updateItem', {
+            num: index,
+          }),
+          duration: 3,
+        });
+        fnTabActiveTopTag('#');
+      } else {
+        message.warning({
+          content: t('views.configManage.configParamForm.updateItemErr'),
+          duration: 3,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      arrayChildExpandClose();
+    });
+}
+
+/**多列表嵌套行删除单行 */
+function arrayChildDelete(row: Record<string, any>) {
+  const index = row.key;
+  const loc = `${arrayChildState.loc}/${index}`;
+  delParamConfigInfo({
+    neType: neTypeSelect.value[0],
+    neId: neTypeSelect.value[1],
+    topTag: tabState.tabActiveTopTag,
+    loc,
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      message.success({
+        content: t('views.configManage.configParamForm.delItemOk', {
+          num: index,
+        }),
+        duration: 2,
+      });
+      arrayChildExpandClose();
+      fnTabActiveTopTag('#');
+    } else {
+      message.error({
+        content: `${res.msg}`,
+        duration: 2,
+      });
+    }
+  });
+}
+
+/**多列表嵌套行新增单行 */
+function arrayChildAdd() {
+  const from = arrayAddInit(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 = 'arrayChild';
+  modalState.title = from.title;
+  modalState.key = from.key;
+  modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
+  modalState.visibleByAdd = true;
+}
+
+/**多列表新增单行确认 */
+function arrayChildAddOk(from: Record<string, any>) {
+  const index = from['index']['value'];
+  const loc = `${arrayChildState.loc}/${index}`;
+  const neType = neTypeSelect.value[0];
+
+  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({ content: t('common.loading') });
+  addParamConfigInfo(
+    {
+      neType: neType,
+      neId: neTypeSelect.value[1],
+      topTag: tabState.tabActiveTopTag,
+      loc,
+    },
+    data
+  )
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('views.configManage.configParamForm.addItemOk', {
+            num: index,
+          }),
+          duration: 3,
+        });
+        fnTabActiveTopTag('#');
+      } else {
+        message.warning({
+          content: t('views.configManage.configParamForm.addItemErr'),
+          duration: 3,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      fnModalCancel();
+      arrayChildExpandClose();
+    });
+}
+
+/**多列表新增行数据初始化 */
+function arrayAddInit(data: any[], dataRule: any) {
+  const len = data.length;
+  let lastItme: Record<string, any> = {};
+  let newIndex = 0;
+  // 无数据时生成临时记录
+  if (len === 0) {
+    lastItme = dataRule;
+  } else {
+    lastItme = data[len - 1];
+  }
+  const from = Object.assign({}, JSON.parse(JSON.stringify(lastItme)));
+  for (const row of from.record) {
+    const value = row.value;
+    if (row.name === 'index') {
+      if (value !== '') {
+        newIndex = parseInt(value) + 1;
+      }
+      if (isNaN(newIndex)) {
+        newIndex = 0;
+      }
+      row.value = newIndex;
+      from.key = newIndex;
+      from.title = `Index-${newIndex}`;
+      continue;
+    }
+    // 子嵌套的不初始
+    if (row.array) {
+      row.value = null;
+      continue;
+    }
+    const type = row.type;
+    const filter = row.filter;
+    switch (type) {
+      case 'int':
+        if (filter && filter.indexOf('~') !== -1) {
+          const filterArr = filter.split('~');
+          const minInt = parseInt(filterArr[0]);
+          row.value = minInt;
+        } else {
+          row.value = 0;
+        }
+        break;
+      case 'enum':
+        if (filter && filter.indexOf('{') === 0) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          row.value = Object.keys(filterJson)[0];
+        } else {
+          row.value = '0';
+        }
+        break;
+      case 'bool':
+        if (filter && filter.indexOf('{') === 0) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          row.value = Object.keys(filterJson)[0];
+        } else {
+          row.value = false;
+        }
+        break;
+      case 'ipv4':
+      case 'ipv6':
+      case 'regex':
+      default:
+        row.value = '';
+        break;
+    }
+  }
+
+  return from;
+}
+
+/**规则校验 */
+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':
+      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.configParam.configParamForm.requireInt', {
+              display,
+              filter,
+            }),
+          ];
+        }
+      }
+      break;
+    case 'ipv4':
+      if (!regExpIPv4.test(value)) {
+        return [
+          false,
+          t('views.configParam.configParamForm.requireIpv4', { display }),
+        ];
+      }
+      break;
+    case 'ipv6':
+      if (!regExpIPv6.test(value)) {
+        return [
+          false,
+          t('views.configParam.configParamForm.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.configParam.configParamForm.requireEnum', { display }),
+          ];
+        }
+      }
+      break;
+    case 'bool':
+      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.configParam.configParamForm.requireBool', { display }),
+          ];
+        }
+      }
+      break;
+    case 'string':
+      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.configParam.configParamForm.requireString', { display }),
+            ];
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      }
+
+      break;
+    case 'regex':
+      if (filter) {
+        try {
+          let regex = new RegExp(filter);
+          if (!regex.test(value)) {
+            return [
+              false,
+              t('views.configParam.configParamForm.requireString', { display }),
+            ];
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      }
+      break;
+
+    default:
+      return [
+        false,
+        t('views.configParam.configParamForm.requireUn', { display }),
+      ];
+  }
+  return result;
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**添加框是否显示 */
+  visibleByAdd: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**项类型 */
+  type: 'array' | 'arrayChild';
+  /**项Key */
+  key: string | number;
+  /**项数据 */
+  data: Record<string, any>[];
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByAdd: false,
+  title: 'Item',
+  from: {},
+  confirmLoading: false,
+  type: 'array',
+  key: '',
+  data: [],
+});
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  const from = toRaw(modalState.from);
+  if (modalState.type === 'array') {
+    arrayAddOk(from);
+  }
+  if (modalState.type === 'arrayChild') {
+    arrayChildAddOk(from);
+  }
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByAdd = false;
+  modalState.from = {};
+  modalState.type = 'array';
+  modalState.key = '';
+  modalState.data = [];
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          // 过滤不可用的网元
+          neCascaderOtions.value = useNeInfoStore().getNeCascaderOtions.filter(
+            (item: any) => {
+              return !['OMC'].includes(item.value);
+            }
+          );
+          // 默认选择AMF
+          const item = neCascaderOtions.value.find(s => s.value === 'UPF');
+          if (item) {
+            const info = item.children[0];
+            neTypeSelect.value = [info.neType, info.neId];
+          }
+          fnGetParamConfigTopTab();
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      :bordered="false"
+      :body-style="{
+        marginBottom: '24px',
+        marginTop: '24px',
+        paddingBottom: 0,
+      }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.configParamForm.neType')"
+              name="neTypeSelect"
+            >
+              <a-cascader
+                v-model:value="neTypeSelect"
+                :options="neCascaderOtions"
+                :allow-clear="false"
+                @change="fnGetParamConfigTopTab"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button
+                  type="primary"
+                  @click.prevent="fnGetParamConfigTopTab"
+                >
+                  <template #icon><ReloadOutlined /></template>
+                  {{ t('common.reloadText') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false">
+      <a-tabs
+        destroy-inactive-tab-pane
+        v-model:activeKey="tabState.tabActiveTopTag"
+        :tab-position="tabState.tabPosition"
+        @change="fnTabActiveTopTag"
+      >
+        <a-tab-pane
+          v-for="tab in tabState.tabNames"
+          :key="tab.topTag"
+          :tab="tab.topDisplay"
+        >
+          <a-spin :spinning="tabState.loading">
+            <!-- 单列表格列表 -->
+            <a-table
+              v-if="tabState.tabType === 'list'"
+              class="table"
+              row-key="name"
+              :size="listState.size"
+              :columns="listState.columns"
+              :data-source="listState.data"
+              :pagination="false"
+              :bordered="true"
+              :scroll="{ x: true }"
+            >
+              <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
+                          v-if="
+                            ['string', 'ipv6', 'ipv4', 'regex'].includes(
+                              record['type']
+                            )
+                          "
+                          v-model:value="listState.editRecord['value']"
+                        ></a-input>
+                        <a-input-number
+                          v-else-if="record['type'] === 'int'"
+                          v-model:value="listState.editRecord['value']"
+                          :min="0"
+                          :max="65535"
+                          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')"
+                        ></a-switch>
+                        <a-select
+                          v-else-if="record['type'] === 'enum'"
+                          v-model:value="listState.editRecord['value']"
+                          :allow-clear="true"
+                          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-space
+                          :size="16"
+                          align="center"
+                          direction="horizontal"
+                        >
+                          <a-tooltip placement="bottomRight">
+                            <template #title> {{ t('common.ok') }} </template>
+                            <a-popconfirm
+                              :title="
+                                t(
+                                  'views.configManage.configParamForm.editOkTip',
+                                  { num: record['display'] }
+                                )
+                              "
+                              placement="topRight"
+                              @confirm="listEditOk()"
+                            >
+                              <a-button
+                                type="text"
+                                class="editable-cell__icon-edit"
+                              >
+                                <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"
+                              @click.prevent="listEditClose()"
+                            >
+                              <template #icon><CloseOutlined /></template>
+                            </a-button>
+                          </a-tooltip>
+                        </a-space>
+                      </div>
+                      <div v-else class="editable-cell__text-wrapper">
+                        <template v-if="record['type'] === 'enum'">
+                          {{ JSON.parse(record['filter'])[text] }}
+                        </template>
+                        <template v-else>{{ `${text}` || '&nbsp;' }}</template>
+                        <EditOutlined
+                          class="editable-cell__icon"
+                          v-if="record.access !== 'read'"
+                          @click="listEdit(record)"
+                        />
+                      </div>
+                    </div>
+                  </a-tooltip>
+                </template>
+              </template>
+            </a-table>
+
+            <!-- array类型 -->
+            <template v-if="tabState.tabType === 'array'">
+              <!-- 多列新增操作 -->
+              <a-button
+                type="primary"
+                @click.prevent="arrayAdd()"
+                v-if="tab.method !== 'get'"
+              >
+                <template #icon><PlusOutlined /></template>
+                {{ t('common.addText') }}
+              </a-button>
+
+              <a-collapse
+                collapsible="header"
+                v-model:activeKey="arrayState.collapseActiveKey"
+              >
+                <a-collapse-panel
+                  :key="data.key"
+                  :header="data.title"
+                  v-for="data in arrayState.data"
+                >
+                  <!-- 多列编辑操作 -->
+                  <template #extra>
+                    <a-space :size="16" v-if="tab.method !== 'get'">
+                      <template
+                        v-if="
+                          arrayState.editKey === data.key &&
+                          arrayState.newIndex === -1
+                        "
+                      >
+                        <a-popconfirm
+                          :title="
+                            t(
+                              'views.configManage.configParamForm.updateItemTip',
+                              { num: data.key }
+                            )
+                          "
+                          placement="right"
+                          @confirm="arrayEditOk()"
+                        >
+                          <a-button type="primary" size="small">
+                            <template #icon><CheckOutlined /></template>
+                            {{ t('common.ok') }}
+                          </a-button>
+                        </a-popconfirm>
+                        <a-button
+                          type="default"
+                          size="small"
+                          @click.prevent="arrayEditClose()"
+                        >
+                          <template #icon><CloseOutlined /></template>
+                          {{ t('common.close') }}
+                        </a-button>
+                      </template>
+
+                      <template
+                        v-if="
+                          arrayState.editKey !== data.key ||
+                          arrayState.newIndex < -1
+                        "
+                      >
+                        <a-button
+                          type="default"
+                          size="small"
+                          @click.prevent="arrayEdit(data, -1)"
+                        >
+                          <template #icon><ProfileOutlined /></template>
+                          {{ t('common.editText') }}
+                        </a-button>
+                        <a-popconfirm
+                          :title="
+                            t('views.configManage.configParamForm.delItemTip', {
+                              num: data.key,
+                            })
+                          "
+                          placement="topRight"
+                          @confirm="arrayDelete(data)"
+                        >
+                          <a-button danger type="default" size="small">
+                            <template #icon><DeleteOutlined /></template>
+                            {{ t('common.deleteText') }}
+                          </a-button>
+                        </a-popconfirm>
+                      </template>
+                    </a-space>
+                  </template>
+
+                  <!-- 多列数据渲染 -->
+                  <a-form
+                    class="form"
+                    layout="horizontal"
+                    autocomplete="off"
+                    :validate-on-rule-change="false"
+                    :validateTrigger="[]"
+                  >
+                    <a-form-item
+                      v-for="item in data.record"
+                      :label="item.display"
+                      :name="item.name"
+                      :required="item.optional === 'false'"
+                    >
+                      <a-tooltip placement="topLeft">
+                        <template #title v-if="item.comment">
+                          {{ item.comment }}
+                        </template>
+                        <div>
+                          <div
+                            v-if="
+                              !Array.isArray(item.array) &&
+                              arrayState.editKey === data.key &&
+                              arrayState.newIndex >= -1 &&
+                              arrayState.editRecord[item.name] !== undefined
+                            "
+                          >
+                            <a-input
+                              v-if="
+                                ['string', 'ipv6', 'ipv4', 'regex'].includes(
+                                  item['type']
+                                )
+                              "
+                              v-model:value="
+                                arrayState.editRecord[item.name]['value']
+                              "
+                              :disabled="item.name === 'index'"
+                            ></a-input>
+                            <a-input-number
+                              v-else-if="item['type'] === 'int'"
+                              v-model:value="
+                                arrayState.editRecord[item.name]['value']
+                              "
+                              :min="0"
+                              :max="65535"
+                              :disabled="item.name === 'index'"
+                              style="width: 100%"
+                            ></a-input-number>
+                            <a-switch
+                              v-else-if="item['type'] === 'bool'"
+                              v-model:checked="
+                                arrayState.editRecord[item.name]['value']
+                              "
+                              :checked-children="t('common.switch.open')"
+                              :un-checked-children="t('common.switch.shut')"
+                            ></a-switch>
+                            <a-select
+                              v-else-if="item['type'] === 'enum'"
+                              v-model:value="
+                                arrayState.editRecord[item.name]['value']
+                              "
+                              :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>
+                          </div>
+
+                          <a-button
+                            type="link"
+                            size="small"
+                            @click.prevent="arrayChildExpand(data.key, item)"
+                            v-else-if="Array.isArray(item.array)"
+                          >
+                            {{
+                              arrayState.newIndex === -1
+                                ? '-'
+                                : t(
+                                    'views.configManage.configParamForm.arrayMore'
+                                  )
+                            }}
+                          </a-button>
+
+                          <div v-else>
+                            {{ `${item.value}` || '&nbsp;' }}
+                          </div>
+                        </div>
+                      </a-tooltip>
+
+                      <!-- 多列嵌套类型 -->
+                      <template
+                        #extra
+                        v-if="
+                          Array.isArray(item.array) &&
+                          item.display === arrayChildState.title
+                        "
+                      >
+                        <!-- 多列嵌套新增操作 -->
+                        <a-space :size="16" v-if="tab.method !== 'get'">
+                          <a-button
+                            type="primary"
+                            @click.prevent="arrayChildAdd()"
+                          >
+                            <template #icon><PlusOutlined /></template>
+                            {{ t('common.addText') }}
+                          </a-button>
+                          <a-button
+                            type="default"
+                            @click.prevent="arrayChildExpandClose()"
+                          >
+                            <template #icon><CloseOutlined /></template>
+                            {{ t('common.close') }}
+                          </a-button>
+                        </a-space>
+
+                        <a-collapse
+                          collapsible="header"
+                          v-model:activeKey="arrayChildState.collapseActiveKey"
+                        >
+                          <a-collapse-panel
+                            :key="cdata.key"
+                            :header="cdata.title"
+                            v-for="cdata in arrayChildState.data"
+                          >
+                            <!-- 多列嵌套编辑操作 -->
+                            <template #extra>
+                              <a-space :size="16" v-if="tab.method !== 'get'">
+                                <template
+                                  v-if="
+                                    arrayChildState.editKey === cdata.key &&
+                                    arrayChildState.newIndex === -1
+                                  "
+                                >
+                                  <a-popconfirm
+                                    :title="
+                                      t(
+                                        'views.configManage.configParamForm.updateItemTip',
+                                        { num: cdata.key }
+                                      )
+                                    "
+                                    placement="right"
+                                    @confirm="arrayChildEditOk()"
+                                  >
+                                    <a-button type="primary" size="small">
+                                      <template #icon
+                                        ><CheckOutlined
+                                      /></template>
+                                      {{ t('common.ok') }}
+                                    </a-button>
+                                  </a-popconfirm>
+                                  <a-button
+                                    type="default"
+                                    size="small"
+                                    @click.prevent="arrayChildEditClose()"
+                                  >
+                                    <template #icon><CloseOutlined /></template>
+                                    {{ t('common.close') }}
+                                  </a-button>
+                                </template>
+
+                                <template
+                                  v-if="
+                                    arrayChildState.editKey !== cdata.key ||
+                                    arrayChildState.newIndex < -1
+                                  "
+                                >
+                                  <a-button
+                                    type="default"
+                                    size="small"
+                                    @click.prevent="arrayChildEdit(cdata, -1)"
+                                  >
+                                    <template #icon
+                                      ><ProfileOutlined
+                                    /></template>
+                                    {{ t('common.editText') }}
+                                  </a-button>
+                                  <a-popconfirm
+                                    :title="
+                                      t(
+                                        'views.configManage.configParamForm.delItemTip',
+                                        { num: cdata.key }
+                                      )
+                                    "
+                                    placement="topRight"
+                                    @confirm="arrayChildDelete(cdata)"
+                                  >
+                                    <a-button
+                                      danger
+                                      type="default"
+                                      size="small"
+                                    >
+                                      <template #icon>
+                                        <DeleteOutlined />
+                                      </template>
+                                      {{ t('common.deleteText') }}
+                                    </a-button>
+                                  </a-popconfirm>
+                                </template>
+                              </a-space>
+                            </template>
+
+                            <!-- 多列嵌套数据渲染 -->
+                            <a-form
+                              class="form"
+                              layout="horizontal"
+                              autocomplete="off"
+                              :validate-on-rule-change="false"
+                              :validateTrigger="[]"
+                            >
+                              <a-form-item
+                                v-for="item in cdata.record"
+                                :label="item.display"
+                                :name="item.name"
+                                :required="item.optional === 'false'"
+                              >
+                                <a-tooltip placement="topLeft">
+                                  <template #title v-if="item.comment">
+                                    {{ item.comment }}
+                                  </template>
+                                  <div>
+                                    <div
+                                      v-if="
+                                        !Array.isArray(item.array) &&
+                                        arrayChildState.newIndex >= -1 &&
+                                        arrayChildState.editKey === cdata.key &&
+                                        arrayChildState.editRecord[
+                                          item.name
+                                        ] !== undefined
+                                      "
+                                    >
+                                      <a-input
+                                        v-if="
+                                          [
+                                            'string',
+                                            'ipv6',
+                                            'ipv4',
+                                            'regex',
+                                          ].includes(item['type'])
+                                        "
+                                        v-model:value="
+                                          arrayChildState.editRecord[item.name][
+                                            'value'
+                                          ]
+                                        "
+                                        :disabled="item.name === 'index'"
+                                      ></a-input>
+                                      <a-input-number
+                                        v-else-if="item['type'] === 'int'"
+                                        v-model:value="
+                                          arrayChildState.editRecord[item.name][
+                                            'value'
+                                          ]
+                                        "
+                                        :min="0"
+                                        :max="65535"
+                                        :disabled="item.name === 'index'"
+                                        style="width: 100%"
+                                      ></a-input-number>
+                                      <a-switch
+                                        v-else-if="item['type'] === 'bool'"
+                                        v-model:checked="
+                                          arrayChildState.editRecord[item.name][
+                                            'value'
+                                          ]
+                                        "
+                                        :checked-children="
+                                          t('common.switch.open')
+                                        "
+                                        :un-checked-children="
+                                          t('common.switch.shut')
+                                        "
+                                      ></a-switch>
+                                      <a-select
+                                        v-else-if="item['type'] === 'enum'"
+                                        v-model:value="
+                                          arrayChildState.editRecord[item.name][
+                                            'value'
+                                          ]
+                                        "
+                                        :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>
+                                    </div>
+
+                                    <a-button
+                                      type="link"
+                                      size="small"
+                                      v-else-if="Array.isArray(item.array)"
+                                    >
+                                      {{
+                                        arrayChildState.newIndex === -1
+                                          ? '-'
+                                          : t(
+                                              'views.configManage.configParamForm.arrayMore'
+                                            )
+                                      }}
+                                    </a-button>
+
+                                    <div v-else>
+                                      {{ `${item.value || '&nbsp;'}` }}
+                                    </div>
+                                  </div>
+                                </a-tooltip>
+                              </a-form-item>
+                            </a-form>
+                          </a-collapse-panel>
+                        </a-collapse>
+                      </template>
+                    </a-form-item>
+                  </a-form>
+                </a-collapse-panel>
+              </a-collapse>
+            </template>
+          </a-spin>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+
+    <!-- 新增框或修改框 -->
+    <a-modal
+      width="800px"
+      :body-style="{ maxHeight: '650px', 'overflow-y': 'scroll' }"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="modalState.visibleByAdd"
+      :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="[]"
+      >
+        <a-form-item
+          v-for="item in modalState.data"
+          :label="item.display"
+          :name="item.name"
+          :required="item.optional === 'false'"
+        >
+          <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
+                "
+              >
+                <a-input
+                  v-if="
+                    ['string', 'ipv6', 'ipv4', 'regex'].includes(item['type'])
+                  "
+                  v-model:value="modalState.from[item.name]['value']"
+                  :disabled="item.name === 'index'"
+                ></a-input>
+                <a-input-number
+                  v-else-if="item['type'] === 'int'"
+                  v-model:value="modalState.from[item.name]['value']"
+                  :min="0"
+                  :max="65535"
+                  :disabled="item.name === 'index'"
+                  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')"
+                ></a-switch>
+                <a-select
+                  v-else-if="item['type'] === 'enum'"
+                  v-model:value="modalState.from[item.name]['value']"
+                  :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>
+              </div>
+              <div v-else>
+                {{ `${item.value || '&nbsp;'}` }}
+              </div>
+            </div>
+          </a-tooltip>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </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>
diff --git a/src/views/configManage/configParamTree copy/index.vue b/src/views/configManage/configParamTree copy/index.vue
deleted file mode 100644
index aeb27d58..00000000
--- a/src/views/configManage/configParamTree copy/index.vue	
+++ /dev/null
@@ -1,2932 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, onMounted } from 'vue';
-import { PageContainer } from '@ant-design-vue/pro-layout';
-import { Modal, message } from 'ant-design-vue/lib';
-import useI18n from '@/hooks/useI18n';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import {
-  getParamConfigTopTab,
-  getParamConfigInfoTable,
-  updateParamConfigInfo,
-  updateNeConfigReload,
-  delParamConfigInfo,
-  addParamConfigInfo,
-  getParamConfigInfoTree,
-} from '@/api/configManage/configParam';
-import { TabPosition } from 'ant-design-vue/lib/tabs/src/interface';
-import useNeInfoStore from '@/store/modules/neinfo';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { toRaw } from 'vue';
-import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
-import { DataNode, EventDataNode } from 'ant-design-vue/lib/tree';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-const { t } = useI18n();
-
-/**网元参数 */
-let neCascaderOtions = ref<Record<string, any>[]>([]);
-
-/**网元类型选择 type,id */
-let neTypeSelect = ref<string[]>(['', '']);
-
-/**tab标签栏类型 */
-type TabStateType = {
-  /**标签方向 */
-  tabPosition: TabPosition;
-  /**标签项 */
-  tabNames: Record<string, any>[];
-  /**标签激活项 */
-  tabActiveTopTag: string;
-};
-
-/**tab标签栏属性 */
-let tabState: TabStateType = reactive({
-  tabPosition: 'top',
-  tabNames: [],
-  tabActiveTopTag: '',
-});
-
-/**tab标签栏标签点击监听 */
-function fnTabActiveTopTag(key: string | number) {
-  tableState.loading = true;
-  if (key !== '#') {
-    tabState.tabActiveTopTag = key as string;
-  }
-
-  // 获取数据
-  const neType = neTypeSelect.value[0];
-  const neId = neTypeSelect.value[1];
-  const topTag = tabState.tabActiveTopTag;
-  getParamConfigInfoTable(neType, topTag, neId)
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && res.data.type) {
-        tableState.type = res.data.type;
-        if (res.data.type === 'list') {
-          tableState.listData = res.data.data;
-          tableState.listColumns = res.data.columns;
-        }
-        if (res.data.type === 'array') {
-          tableState.arrayData = res.data.data;
-          tableState.arrayDataRule = res.data.dataRule;
-          tableState.arrayColumns = res.data.columns;
-          tableState.arrayColumns.push({
-            title: t('common.operate'),
-            key: 'index',
-            align: 'left',
-            fixed: 'right',
-            width: 5,
-          });
-        }
-      } else {
-        message.warning({
-          content: `暂无配置项数据`,
-          duration: 3,
-        });
-      }
-    })
-    .finally(() => {
-      tableState.arrayNewIndex = -1;
-      tableState.editRecord = {};
-      tableState.loading = false;
-    });
-}
-
-/**查询配置Tag标签 */
-function fnGetParamConfigTopTab() {
-  const neType = neTypeSelect.value[0];
-  if (!neType) {
-    message.warning({
-      content: `请选择网元类型`,
-      duration: 3,
-    });
-    return;
-  }
-  // 获取数据
-  getParamConfigTopTab(neType).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      tabState.tabNames = res.data;
-      // 取首个tag
-      if (res.data.length > 0) {
-        const topTag = res.data[0].topTag;
-        fnTabActiveTopTag(topTag);
-      }
-    } else {
-      message.warning({
-        content: `暂无配置项数据`,
-        duration: 3,
-      });
-    }
-  });
-}
-
-/**表格状态类型 */
-type TabeStateType = {
-  /**加载等待 */
-  loading: boolean;
-  /**紧凑型 */
-  size: SizeType;
-  /**表格数据类型 单列还是多列 */
-  type: string;
-  /**单列记录字段 */
-  listColumns: object[];
-  /**单列记录数据 */
-  listData: object[];
-  /**多列记录字段 */
-  arrayColumns: object[];
-  /**多列记录数据 */
-  arrayData: object[];
-  /**多列记录规则 */
-  arrayDataRule: Record<string, any>;
-  /**新增行记录Index */
-  arrayNewIndex: number;
-  /**编辑行记录 */
-  editRecord: Record<string, any>;
-  /**多列嵌套列表标题 */
-  arrayChildTitle: string;
-  /**多列嵌套层级index */
-  arrayChildLoc: string;
-  /**多列嵌套记录字段 */
-  arrayChildColumns: object[];
-  /**多列嵌套记录数据 */
-  arrayChildData: object[];
-  /**多列嵌套记录规则 */
-  arrayChildDataRule: Record<string, any>;
-  /**多列嵌套展开key */
-  arrayChildExpandKeys: any[];
-  /**新增嵌套行记录Index */
-  arrayChildNewIndex: number;
-  /**编辑嵌套行记录 */
-  arrayChildEditRecord: Record<string, any>;
-};
-
-/**表格状态 */
-let tableState: TabeStateType = reactive({
-  loading: false,
-  size: 'middle',
-  type: 'list',
-  listColumns: [],
-  listData: [],
-  arrayColumns: [],
-  arrayData: [],
-  arrayDataRule: {},
-  arrayNewIndex: -1,
-  editRecord: {},
-  arrayChildTitle: '',
-  arrayChildLoc: '',
-  arrayChildColumns: [],
-  arrayChildData: [],
-  arrayChildDataRule: {},
-  arrayChildExpandKeys: [],
-  arrayChildNewIndex: -1,
-  arrayChildEditRecord: {},
-});
-
-/**单列表编辑 */
-function listEdit(row: Record<string, any>) {
-  tableState.editRecord = Object.assign({}, row);
-}
-
-/**单列表编辑关闭 */
-function listEditClose() {
-  tableState.editRecord = {};
-}
-
-/**单列表编辑确认 */
-function listEditOk() {
-  const from = toRaw(tableState.editRecord);
-  // 检查规则
-  const [ok, msg] = ruleVerification(from);
-  if (!ok) {
-    message.warning({
-      content: `${msg}`,
-      duration: 3,
-    });
-    return;
-  }
-
-  // 发送
-  const hide = message.loading({ content: t('common.loading') });
-  let data = {
-    [from['name']]: from['value'],
-  };
-  // UPF参数不统一
-  // if (neTypeSelect.value[0] === 'UPF') {
-  //   data = {
-  //     [parseFirstUpper(from['name'])]: from['value'],
-  //   };
-  // }
-
-  updateParamConfigInfo(
-    'list',
-    {
-      neType: neTypeSelect.value[0],
-      neId: neTypeSelect.value[1],
-      topTag: tabState.tabActiveTopTag,
-    },
-    data
-  )
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: `${from['display']} 属性值修改成功`,
-          duration: 3,
-        });
-        // 改变表格数据
-        const item = tableState.listData.filter(
-          (item: Record<string, any>) => from['name'] === item['name']
-        )[0];
-        if (item) {
-          Object.assign(item, tableState.editRecord);
-        }
-      } else {
-        message.warning({
-          content: `属性值修改失败`,
-          duration: 3,
-        });
-      }
-    })
-    .catch(err => {
-      console.error(err);
-      message.error({
-        content: `非法操作属性值`,
-        duration: 3,
-      });
-    })
-    .finally(() => {
-      hide();
-      tableState.editRecord = {};
-    });
-}
-
-/**多列表编辑 */
-function arrayEdit(row: Record<string, any>) {
-  tableState.editRecord = Object.assign({}, JSON.parse(JSON.stringify(row)));
-  console.log(tableState.editRecord);
-}
-
-/**多列表编辑关闭 */
-function arrayEditClose() {
-  if (tableState.arrayNewIndex !== -1) {
-    tableState.arrayNewIndex = -1;
-    tableState.arrayData.pop();
-  }
-  tableState.editRecord = {};
-}
-
-/**多列表编辑确认 */
-function arrayEditOk() {
-  const from = toRaw(tableState.editRecord);
-  const loc = from['index']['value'];
-  const neType = neTypeSelect.value[0];
-  // 遍历提取属性和值
-  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;
-    }
-    // UPF参数不统一
-    // if (neType === 'UPF') {
-    //   data[parseFirstUpper(key)] = from[key]['value'];
-    // } else {
-    //   data[key] = from[key]['value'];
-    // }
-    data[key] = from[key]['value'];
-  }
-
-  // 发送
-  const hide = message.loading({ content: t('common.loading') });
-  updateParamConfigInfo(
-    'array',
-    {
-      neType: neType,
-      neId: neTypeSelect.value[1],
-      topTag: tabState.tabActiveTopTag,
-      loc,
-    },
-    data
-  )
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: `Index 为 ${from['index']['value']} 记录修改成功`,
-          duration: 3,
-        });
-        // 改变表格数据
-        const item = tableState.arrayData.filter(
-          (item: Record<string, any>) =>
-            from['index']['value'] === item['index']['value']
-        )[0];
-        if (item) {
-          Object.assign(item, from);
-        }
-      } else {
-        message.warning({
-          content: `记录修改失败`,
-          duration: 3,
-        });
-      }
-    })
-    .catch(err => {
-      console.error(err);
-      message.error({
-        content: `非法操作记录参数`,
-        duration: 3,
-      });
-    })
-    .finally(() => {
-      hide();
-      tableState.arrayNewIndex = -1;
-      tableState.editRecord = {};
-    });
-}
-
-/**多列表删除单行 */
-function arrayDelete(row: Record<string, any>) {
-  const from = toRaw(row);
-  const loc = from['index']['value'];
-
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: `确认删除Index为 【${from['index']['value']}】 的数据项?`,
-    onOk() {
-      const hide = message.loading({ content: t('common.loading') });
-      delParamConfigInfo({
-        neType: neTypeSelect.value[0],
-        neId: neTypeSelect.value[1],
-        topTag: tabState.tabActiveTopTag,
-        loc,
-      })
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: `删除成功`,
-              duration: 2,
-            });
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 2,
-            });
-          }
-        })
-        .finally(() => {
-          fnTabActiveTopTag('#');
-          hide();
-        });
-    },
-  });
-}
-
-/**多列表新增单行 */
-function arrayAdd() {
-  const len = tableState.arrayData.length;
-  let lastItme = {};
-  let newIndex = 0;
-  // 无数据时生成临时记录
-  if (len === 0) {
-    lastItme = tableState.arrayDataRule;
-  } else {
-    lastItme = tableState.arrayData[len - 1];
-  }
-  const from = Object.assign({}, JSON.parse(JSON.stringify(lastItme)));
-  for (const key in from) {
-    const row = from[key];
-    if (key === 'index') {
-      if (from[key]['value'] !== '') {
-        newIndex = parseInt(from[key]['value']) + 1;
-      }
-      if (isNaN(newIndex)) {
-        newIndex = 0;
-      }
-      from[key]['value'] = newIndex;
-      tableState.arrayNewIndex = newIndex;
-      continue;
-    }
-    // 子嵌套的不初始
-    if (row.array) {
-      from[key]['value'] = null;
-      continue;
-    }
-    const type = row.type;
-    const filter = row.filter;
-    switch (type) {
-      case 'int':
-        if (filter && filter.indexOf('~') !== -1) {
-          const filterArr = filter.split('~');
-          const minInt = parseInt(filterArr[0]);
-          from[key]['value'] = minInt;
-        } else {
-          from[key]['value'] = 0;
-        }
-        break;
-      case 'enum':
-        if (filter && filter.indexOf('{') === 0) {
-          let filterJson: Record<string, any> = {};
-          try {
-            filterJson = JSON.parse(filter); //string---json
-          } catch (error) {
-            console.error(error);
-          }
-
-          from[key]['value'] = Object.keys(filterJson)[0];
-        } else {
-          from[key]['value'] = '0';
-        }
-        break;
-      case 'bool':
-        if (filter && filter.indexOf('{') === 0) {
-          let filterJson: Record<string, any> = {};
-          try {
-            filterJson = JSON.parse(filter); //string---json
-          } catch (error) {
-            console.error(error);
-          }
-
-          from[key]['value'] = Object.keys(filterJson)[0];
-        } else {
-          from[key]['value'] = false;
-        }
-        break;
-      case 'ipv4':
-      case 'ipv6':
-      case 'regex':
-      default:
-        from[key]['value'] = '';
-    }
-  }
-
-  tableState.editRecord = from;
-  tableState.arrayData.push(from);
-}
-
-/**多列表新增单行确认 */
-function arrayAddOk() {
-  const from = toRaw(tableState.editRecord);
-  const loc = from['index']['value'];
-  const neType = neTypeSelect.value[0];
-  // 遍历提取属性和值
-  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;
-    }
-    // UPF参数不统一
-    // if (neType === 'UPF') {
-    //   data[parseFirstUpper(key)] = from[key]['value'];
-    // } else {
-    //   data[key] = from[key]['value'];
-    // }
-    data[key] = from[key]['value'];
-  }
-
-  // 发送
-  const hide = message.loading({ content: t('common.loading') });
-  addParamConfigInfo(
-    {
-      neType: neType,
-      neId: neTypeSelect.value[1],
-      topTag: tabState.tabActiveTopTag,
-      loc,
-    },
-    data
-  )
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: `Index 为 ${from['index']['value']} 记录新增成功`,
-          duration: 3,
-        });
-      } else {
-        tableState.arrayData.pop();
-        message.warning({
-          content: `新增失败`,
-          duration: 3,
-        });
-      }
-    })
-    .catch(err => {
-      console.error(err);
-      message.error({
-        content: `非法操作记录参数`,
-        duration: 3,
-      });
-    })
-    .finally(() => {
-      hide();
-      tableState.arrayNewIndex = -1;
-      tableState.editRecord = {};
-    });
-}
-
-/**多列表展开嵌套行 */
-function arrayChildExpand(key: Record<string, any>, row: Record<string, any>) {
-  const loc = key['value'];
-  tableState.arrayChildExpandKeys = [];
-  tableState.arrayChildLoc = '';
-  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 = [];
-  for (const item of dataArr) {
-    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({}, rule, { value: item[key] });
-          record[ruleItem.name] = ruleItem;
-          break;
-        }
-      }
-    }
-    dataArray.push(record);
-  }
-  tableState.arrayChildData = dataArray;
-
-  // 无数据时,需要临时数据用于新增
-  if (dataArray.length === 0) {
-    let itemTemp: Record<string, any> = {};
-    for (const rule of ruleArr) {
-      itemTemp[rule.name] = rule;
-    }
-    tableState.arrayChildDataRule = itemTemp;
-  }
-
-  // 列表字段
-  const columns: Record<string, any>[] = [];
-  for (const rule of ruleArr) {
-    columns.push({
-      title: rule.display,
-      dataIndex: rule.name,
-      align: 'left',
-      width: 5,
-    });
-  }
-  tableState.arrayChildColumns = columns;
-  tableState.arrayChildColumns.push({
-    title: t('common.operate'),
-    key: 'index',
-    align: 'left',
-    fixed: 'right',
-    width: 5,
-  });
-
-  // 设置展开key
-  tableState.arrayChildExpandKeys = [key];
-  // UPF参数不统一
-  // if (neTypeSelect.value[0] === 'UPF') {
-  //   tableState.arrayChildLoc = `${loc}/${parseFirstUpper(from['name'])}`;
-  // } else {
-  //   tableState.arrayChildLoc = `${loc}/${from['name']}`;
-  // }
-  tableState.arrayChildLoc = `${loc}/${from['name']}`;
-  tableState.arrayChildNewIndex = -1;
-  // 设置展开列表标题
-  tableState.arrayChildTitle = `${from['display']}`;
-}
-
-/**多列表嵌套行编辑 */
-function arrayChildEdit(row: Record<string, any>) {
-  tableState.arrayChildEditRecord = Object.assign(
-    {},
-    JSON.parse(JSON.stringify(row))
-  );
-}
-
-/**多列表嵌套行编辑关闭 */
-function arrayChildEditClose() {
-  if (tableState.arrayNewIndex !== -1) {
-    tableState.arrayChildNewIndex = -1;
-    tableState.arrayChildData.pop();
-  }
-  tableState.arrayChildEditRecord = {};
-}
-
-/**多列表嵌套行编辑确认 */
-function arrayChildEditOk() {
-  const from = toRaw(tableState.arrayChildEditRecord);
-  const loc = `${tableState.arrayChildLoc}/${from['index']['value']}`;
-  const neType = neTypeSelect.value[0];
-
-  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;
-    }
-    // UPF参数不统一
-    // if (neType === 'UPF') {
-    //   data[parseFirstUpper(key)] = from[key]['value'];
-    // } else {
-    //   data[key] = from[key]['value'];
-    // }
-    data[key] = from[key]['value'];
-  }
-
-  // 发送
-  const hide = message.loading({ content: t('common.loading') });
-  updateParamConfigInfo(
-    'array',
-    {
-      neType: neType,
-      neId: neTypeSelect.value[1],
-      topTag: tabState.tabActiveTopTag,
-      loc,
-    },
-    data
-  )
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: `Index 为 ${from['index']['value']} 记录修改成功`,
-          duration: 3,
-        });
-        fnTabActiveTopTag('#');
-      } else {
-        message.warning({
-          content: `记录修改失败`,
-          duration: 3,
-        });
-      }
-    })
-    .catch(err => {
-      console.error(err);
-      message.error({
-        content: `非法操作记录参数`,
-        duration: 3,
-      });
-    })
-    .finally(() => {
-      hide();
-      tableState.arrayChildNewIndex = -1;
-      tableState.arrayChildEditRecord = {};
-    });
-}
-
-/**多列表嵌套行删除单行 */
-function arrayChildDelete(row: Record<string, any>) {
-  const from = toRaw(row);
-  const loc = `${tableState.arrayChildLoc}/${from['index']['value']}`;
-
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: `确认删除${tableState.arrayChildTitle} Index 为 【${from['index']['value']}】 的数据项?`,
-    onOk() {
-      const hide = message.loading({ content: t('common.loading') });
-      delParamConfigInfo({
-        neType: neTypeSelect.value[0],
-        neId: neTypeSelect.value[1],
-        topTag: tabState.tabActiveTopTag,
-        loc,
-      })
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: `删除成功`,
-              duration: 2,
-            });
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 2,
-            });
-          }
-        })
-        .finally(() => {
-          fnTabActiveTopTag('#');
-          hide();
-        });
-    },
-  });
-}
-
-/**多列表嵌套行新增单行 */
-function arrayChildAdd() {
-  const len = tableState.arrayChildData.length;
-  debugger
-  let lastItme = {};
-  let newIndex = 0;
-  // 无数据时生成临时记录
-  if (len === 0) {
-    lastItme = tableState.arrayChildDataRule;
-  } else {
-    lastItme = tableState.arrayChildData[len - 1];
-  }
-  const from = Object.assign({}, JSON.parse(JSON.stringify(lastItme)));
-  for (const key in from) {
-    const row = from[key];
-    if (key === 'index') {
-      if (from[key]['value'] !== '') {
-        newIndex = parseInt(from[key]['value']) + 1;
-      }
-      if (isNaN(newIndex)) {
-        newIndex = 0;
-      }
-      from[key]['value'] = newIndex;
-      tableState.arrayChildNewIndex = newIndex;
-      continue;
-    }
-    // 子嵌套的不初始
-    if (row.array) {
-      from[key]['value'] = null;
-      continue;
-    }
-    const type = row.type;
-    const filter = row.filter;
-    switch (type) {
-      case 'int':
-        if (filter && filter.indexOf('~') !== -1) {
-          const filterArr = filter.split('~');
-          const minInt = parseInt(filterArr[0]);
-          from[key]['value'] = minInt;
-        } else {
-          from[key]['value'] = 0;
-        }
-        break;
-      case 'enum':
-        if (filter && filter.indexOf('{') === 0) {
-          let filterJson: Record<string, any> = {};
-          try {
-            filterJson = JSON.parse(filter); //string---json
-          } catch (error) {
-            console.error(error);
-          }
-
-          from[key]['value'] = Object.keys(filterJson)[0];
-        } else {
-          from[key]['value'] = '0';
-        }
-        break;
-      case 'bool':
-        if (filter && filter.indexOf('{') === 0) {
-          let filterJson: Record<string, any> = {};
-          try {
-            filterJson = JSON.parse(filter); //string---json
-          } catch (error) {
-            console.error(error);
-          }
-
-          from[key]['value'] = Object.keys(filterJson)[0];
-        } else {
-          from[key]['value'] = false;
-        }
-        break;
-      case 'ipv4':
-      case 'ipv6':
-      case 'regex':
-      default:
-        from[key]['value'] = '';
-    }
-  }
-
-  tableState.arrayChildEditRecord = from;
-  tableState.arrayChildData.push(from);
-}
-
-/**多列表新增单行确认 */
-function arrayChildAddOk() {
-  const from = toRaw(tableState.arrayChildEditRecord);
-  const loc = `${tableState.arrayChildLoc}/${from['index']['value']}`;
-  const neType = neTypeSelect.value[0];
-
-  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;
-    }
-    // UPF参数不统一
-    // if (neType === 'UPF') {
-    //   data[parseFirstUpper(key)] = from[key]['value'];
-    // } else {
-    //   data[key] = from[key]['value'];
-    // }
-    data[key] = from[key]['value'];
-  }
-
-  // 发送
-  const hide = message.loading({ content: t('common.loading') });
-  addParamConfigInfo(
-    {
-      neType: neType,
-      neId: neTypeSelect.value[1],
-      topTag: tabState.tabActiveTopTag,
-      loc,
-    },
-    data
-  )
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: `Index 为 ${from['index']['value']} 记录新增成功`,
-          duration: 3,
-        });
-        fnTabActiveTopTag('#');
-      } else {
-        tableState.arrayChildData.pop();
-        message.warning({
-          content: `新增失败`,
-          duration: 3,
-        });
-      }
-    })
-    .catch(err => {
-      console.error(err);
-      message.error({
-        content: `非法操作记录参数`,
-        duration: 3,
-      });
-    })
-    .finally(() => {
-      hide();
-      tableState.arrayChildNewIndex = -1;
-      tableState.arrayChildEditRecord = {};
-    });
-}
-
-/**规则校验 */
-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':
-      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, `${display} 参数值不在合理范围 ${filter}`];
-        }
-      }
-      break;
-    case 'ipv4':
-      if (!regExpIPv4.test(value)) {
-        return [false, `${display} 不是合法的IPV4地址`];
-      }
-      break;
-    case 'ipv6':
-      if (!regExpIPv6.test(value)) {
-        return [false, `${display} 不是合法的IPV6地址`];
-      }
-      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, `${display} 不是合理的枚举值`];
-        }
-      }
-      break;
-    case 'bool':
-      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, `${display} 不是合理的布尔类型的值`];
-        }
-      }
-      break;
-    case 'string':
-      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, `${display} 参数值不合理`];
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      }
-
-      break;
-    case 'regex':
-      if (filter) {
-        try {
-          let regex = new RegExp(filter);
-          if (!regex.test(value)) {
-            return [false, `${display} 参数值不合理`];
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      }
-      break;
-
-    default:
-      return [false, `${display} 输入值是未知类型`];
-  }
-  return result;
-}
-
-onMounted(() => {
-  // 获取网元网元列表
-  useNeInfoStore()
-    .fnNelist()
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        if (res.data.length > 0) {
-          // 过滤不可用的网元
-          neCascaderOtions.value = useNeInfoStore().getNeCascaderOtions.filter(
-            (item: any) => {
-              return !['OMC'].includes(item.value);
-            }
-          );
-          // 默认选择AMF
-          const item = neCascaderOtions.value.find(s => s.value === 'UPF');
-          if (item) {
-            const info = item.children[0];
-            neTypeSelect.value = [info.neType, info.neId];
-          }
-          fnGetParamConfigTopTab();
-          fnGetParamConfigNode();
-          state.treeLoading = false;
-        }
-      } else {
-        message.warning({
-          content: `暂无网元列表数据`,
-          duration: 2,
-        });
-      }
-    });
-});
-
-//  =================
-
-/**对象信息状态类型 */
-type StateType = {
-  /**网元 loading */
-  treeLoading: boolean;
-  /**网元配置 tree */
-  treeData: DataNode[];
-  /**选择对应Node的Key tree */
-  treeSelectKey: string;
-  /**选择对应Node一级 tree */
-  treeSelectNode: Record<string, any>;
-
-  /**编辑行标题 */
-  title: string;
-  /**编辑行记录 */
-  editRecord: Record<string, any>;
-  /**多列嵌套编辑行标题 */
-  arrayChildTitle: string;
-  /**多列嵌套记录数据 */
-  arrayChildData: Record<string, any>[];
-  /**多列嵌套记录规则 */
-  arrayChildDataRule: Record<string, any>;
-  /**多列嵌套新增行记录Index 查看-2/编辑-1/新增>=0 */
-  arrayChildKey: number;
-  /**多列嵌套新增行记录Index 查看-2/编辑-1/新增>=0 */
-  arrayChildNewIndex: number;
-  /**多列嵌套编辑行记录 */
-  arrayChildEditRecord: Record<string, any>;
-};
-
-/**对象信息状态 */
-let state: StateType = reactive({
-  treeLoading: true,
-  treeData: [],
-  treeSelectKey: '',
-  treeSelectNode: {
-    key: 0,
-    title: '',
-    keyType: '',
-  },
-
-  title: '',
-  editRecord: {},
-  arrayChildTitle: '',
-  arrayChildData: [],
-  arrayChildDataRule: {},
-  arrayChildKey: -1,
-  arrayChildNewIndex: -3,
-  arrayChildEditRecord: {},
-});
-
-/**表格字段列 */
-let listColumns: ColumnsType = [
-  {
-    title: 'Key',
-    dataIndex: 'display',
-    align: 'left',
-    width: '30%',
-  },
-  {
-    title: 'Value',
-    dataIndex: 'value',
-    align: 'left',
-    width: '70%',
-  },
-];
-
-/**查询配置Node节点 */
-function fnGetParamConfigNode() {
-  const neType = neTypeSelect.value[0];
-  if (!neType) {
-    message.warning({
-      content: `请选择网元类型`,
-      duration: 3,
-    });
-    return;
-  }
-  // 获取数据
-  getParamConfigTopTab(neType).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      state.treeData = res.data.map(item => ({
-        children: undefined,
-        title: item.topDisplay,
-        key: item.topTag,
-        // 绑定数据
-        keyType: '',
-        keyRecordList: [],
-        keyRecordRule: {},
-      }));
-    } else {
-      message.warning({
-        content: `暂无配置项数据`,
-        duration: 3,
-      });
-    }
-  });
-}
-
-function fnLoadConfigNodeData(treeNode: EventDataNode): Promise<void> {
-  console.log(treeNode, treeNode.dataRef?.children);
-
-  return new Promise<void>(resolve => {
-    if (treeNode.title.indexOf('Index-') === 0) {
-      resolve();
-      return;
-    }
-    if (treeNode.dataRef?.children) {
-      resolve();
-      return;
-    }
-    // 加载数据
-    const neType = neTypeSelect.value[0];
-    const neId = neTypeSelect.value[1];
-    const topTag = treeNode.key as string;
-    getParamConfigInfoTree(neType, topTag, neId).then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        const { type, data, recordRule } = res.data;
-        if (treeNode.dataRef && type === 'list') {
-          treeNode.dataRef.keyType = type;
-          treeNode.dataRef.keyRecordList = data;
-          treeNode.dataRef.keyRecordRule = recordRule;
-        }
-        if (treeNode.dataRef && type === 'array') {
-          treeNode.dataRef.keyType = type;
-          treeNode.dataRef.keyRecordList = data;
-          treeNode.dataRef.keyRecordRule = recordRule;
-          // 添加子节点
-          if (!treeNode.dataRef.children) {
-            treeNode.dataRef.children = data.map(item => ({
-              title: item.title,
-              key: `${treeNode.key}/${item.key}`,
-            }));
-          }
-        }
-
-        //
-        state.title = treeNode.title;
-        state.treeSelectNode = Object.assign({}, treeNode.dataRef);
-        state.treeData = [...state.treeData];
-        resolve();
-      } else {
-        message.warning({
-          content: `暂无配置数据`,
-          duration: 3,
-        });
-      }
-    });
-  });
-}
-
-/**查询可选命令列表 */
-function fnSelectConfigNode(_: any, info: any) {
-  console.log('fnSelectConfigNode ', info);
-  state.editRecord = {};
-  arrayChildExpandClose();
-  const node = info.node;
-  // array类型的含子节点使用index子项
-  if (node.title.indexOf('Index-') === 0) {
-    const parentNode = Object.assign(
-      {},
-      JSON.parse(JSON.stringify(node.parent.node))
-    );
-    const child = parentNode.keyRecordList.find((item: any) => {
-      return item.title === node.title;
-    });
-    state.treeSelectNode = Object.assign({}, child);
-  } else {
-    state.treeSelectNode = Object.assign({}, node.dataRef);
-  }
-
-  state.treeSelectKey = node.key;
-  state.title = node.title;
-}
-
-/**单列表编辑 */
-function listEdit2(row: Record<string, any>) {
-  state.editRecord = Object.assign({}, row);
-}
-
-/**单列表编辑关闭 */
-function listEditClose2() {
-  state.editRecord = {};
-}
-
-/**单列表编辑确认 */
-function listEditOk2() {
-  const from = toRaw(state.editRecord);
-  // 检查规则
-  const [ok, msg] = ruleVerification(from);
-  if (!ok) {
-    message.warning({
-      content: `${msg}`,
-      duration: 3,
-    });
-    return;
-  }
-
-  let data = {
-    [from['name']]: from['value'],
-  };
-
-  console.log({
-    neType: neTypeSelect.value[0],
-    neId: neTypeSelect.value[1],
-    topTag: tabState.tabActiveTopTag,
-  });
-  console.log(data);
-}
-
-/**多列表编辑 */
-function arrayEdit2(record: Record<string, any>[]) {
-  const row: Record<string, any> = {};
-  for (const item of record) {
-    row[item.name] = Object.assign({}, item);
-  }
-  state.editRecord = row;
-}
-
-/**多列表编辑关闭 */
-function arrayEditClose2() {
-  state.editRecord = {};
-  arrayChildExpandClose();
-}
-
-/**多列表编辑确认 */
-function arrayEditOk2() {
-  const from = toRaw(state.editRecord);
-  const loc = from['index']['value'];
-  const neType = neTypeSelect.value[0];
-  // 遍历提取属性和值
-  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'];
-  }
-
-  console.log({
-    neType: neType,
-    neId: neTypeSelect.value[1],
-    topTag: state.treeSelectNode.key,
-    loc,
-  });
-  console.log(data);
-}
-
-/**多列表展开嵌套行 */
-function arrayChildExpand2(row: Record<string, any>) {
-  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 = [];
-  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({ title: `Index-${index}`, key: index, record });
-  }
-  state.arrayChildData = dataArray;
-
-  // 无数据时,需要临时数据用于新增
-  state.arrayChildDataRule = { title: `Index-0`, key: 0, record: ruleArr };
-
-  // 设置标题
-  state.arrayChildTitle = from['display'];
-}
-
-/**多列表关闭展开嵌套行 */
-function arrayChildExpandClose() {
-  state.arrayChildTitle = '';
-  state.arrayChildDataRule = {};
-  state.arrayChildData = [];
-  state.arrayChildEditRecord = {};
-  state.arrayChildKey = -1;
-  state.arrayChildNewIndex = -3;
-}
-
-/**多列表嵌套行编辑关闭 */
-function arrayChildEditClose2() {
-  if (state.arrayChildNewIndex > -1) {
-    state.arrayChildData.pop();
-  }
-  state.arrayChildKey = -1;
-  state.arrayChildNewIndex = -3;
-  state.arrayChildEditRecord = {};
-}
-
-/**多列表嵌套行编辑 */
-function arrayChildEdit2(item: Record<string, any>, index: number) {
-  const row: Record<string, any> = {};
-  for (const r of item.record) {
-    row[r.name] = Object.assign({}, r);
-  }
-  state.arrayChildEditRecord = row;
-  state.arrayChildKey = item.key;
-  state.arrayChildNewIndex = index;
-}
-
-/**多列表嵌套行编辑确认 */
-function arrayChildEditOk2() {
-  const from = toRaw(state.arrayChildEditRecord);
-  const loc = `loc/${from['index']['value']}`;
-  const neType = neTypeSelect.value[0];
-
-  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'];
-  }
-
-  console.log({
-    neType: neType,
-    neId: neTypeSelect.value[1],
-    topTag: tabState.tabActiveTopTag,
-    loc,
-  });
-  console.log(data);
-
-  message.success({
-    content: ` 成功 Index :${from['index']['value']} `,
-    duration: 3,
-  });
-  //state.arrayChildData.pop();
-  state.arrayChildKey = -1;
-  state.arrayChildNewIndex = -3;
-  state.arrayChildEditRecord = {};
-}
-
-/**多列表嵌套行删除单行 */
-function arrayChildDelete2(key: string) {
-  const loc = `${state.treeSelectNode.key}/${key}`;
-  console.log({
-    neType: neTypeSelect.value[0],
-    neId: neTypeSelect.value[1],
-    topTag: state.treeSelectKey,
-    loc,
-  });
-
-  state.arrayChildData = state.arrayChildData.filter(
-    (item: any) => item.key !== key
-  );
-}
-
-/**多列表嵌套行新增单行 */
-function arrayChildAdd2() {
-  if (state.arrayChildNewIndex > -1) {
-    state.arrayChildData.pop();
-  }
-  const len = state.arrayChildData.length;
-  let lastItme = {};
-  let newIndex = 0;
-  // 无数据时生成临时记录
-  if (len === 0) {
-    lastItme = state.arrayChildDataRule;
-  } else {
-    lastItme = state.arrayChildData[len - 1];
-  }
-  const from = Object.assign({}, JSON.parse(JSON.stringify(lastItme)));
-  for (const row of from.record) {
-    const value = row.value;
-    if (row.name === 'index') {
-      if (value !== '') {
-        newIndex = parseInt(value) + 1;
-      }
-      if (isNaN(newIndex)) {
-        newIndex = 0;
-      }
-      row.value = newIndex;
-      from.key = newIndex;
-      from.title = `Index-${newIndex}`;
-      continue;
-    }
-    // 子嵌套的不初始
-    if (row.array) {
-      row.value = null;
-      continue;
-    }
-    const type = row.type;
-    const filter = row.filter;
-    switch (type) {
-      case 'int':
-        if (filter && filter.indexOf('~') !== -1) {
-          const filterArr = filter.split('~');
-          const minInt = parseInt(filterArr[0]);
-          row.value = minInt;
-        } else {
-          row.value = 0;
-        }
-        break;
-      case 'enum':
-        if (filter && filter.indexOf('{') === 0) {
-          let filterJson: Record<string, any> = {};
-          try {
-            filterJson = JSON.parse(filter); //string---json
-          } catch (error) {
-            console.error(error);
-          }
-
-          row.value = Object.keys(filterJson)[0];
-        } else {
-          row.value = '0';
-        }
-        break;
-      case 'bool':
-        if (filter && filter.indexOf('{') === 0) {
-          let filterJson: Record<string, any> = {};
-          try {
-            filterJson = JSON.parse(filter); //string---json
-          } catch (error) {
-            console.error(error);
-          }
-
-          row.value = Object.keys(filterJson)[0];
-        } else {
-          row.value = false;
-        }
-        break;
-      case 'ipv4':
-      case 'ipv6':
-      case 'regex':
-      default:
-        row.value = '';
-        break;
-    }
-  }
-
-  state.arrayChildData.push(from);
-  arrayChildEdit2(from, newIndex);
-}
-
-/**多列表新增单行确认 */
-function arrayChildAddOk2() {
-  const from = toRaw(state.arrayChildEditRecord);
-  const loc = `${state.treeSelectKey}/${from['index']['value']}`;
-  const neType = neTypeSelect.value[0];
-
-  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'];
-  }
-
-  console.log({
-    neType: neType,
-    neId: neTypeSelect.value[1],
-    topTag: state.treeSelectKey,
-    loc,
-  });
-  console.log(data);
-
-  message.success({
-    content: ` 成功 Index :${from['index']['value']} `,
-    duration: 3,
-  });
-  //state.arrayChildData.pop();
-  state.arrayChildKey = -1;
-  state.arrayChildNewIndex = -3;
-  state.arrayChildEditRecord = {};
-}
-</script>
-
-<template>
-  <PageContainer>
-    <a-row :gutter="16">
-      <a-col :span="6">
-        <!-- 网元类型 -->
-        <a-card :bordered="false" title="网元类型" :loading="state.treeLoading">
-          <!-- 插槽-卡片右侧 -->
-          <template #extra> </template>
-
-          <a-form layout="vertical" autocomplete="off">
-            <a-form-item name="neId ">
-              <a-cascader
-                v-model:value="neTypeSelect"
-                :options="neCascaderOtions"
-                :allow-clear="false"
-                placeholder="请选择网元"
-                @change="fnGetParamConfigNode"
-              />
-            </a-form-item>
-            <a-form-item name="listeningPort">
-              <a-directory-tree
-                :tree-data="state.treeData"
-                :load-data="fnLoadConfigNodeData"
-                @select="fnSelectConfigNode"
-              >
-                <template #title="{ title, key }">
-                  <span>{{ title }}</span>
-                  <span> - {{ key }} </span>
-                </template>
-              </a-directory-tree>
-            </a-form-item>
-          </a-form>
-        </a-card>
-      </a-col>
-      <a-col :span="18">
-        <!-- 配置参数显示内容 -->
-        <a-card :bordered="false" :loading="!state.title">
-          <template #title>
-            <a-typography-text strong v-if="state.title">
-              {{ state.title }}
-            </a-typography-text>
-            <a-typography-text type="danger" v-else>
-              左侧配置中选择要操作项！
-            </a-typography-text>
-          </template>
-          <!-- 插槽-卡片右侧 -->
-          <template #extra>
-            <!-- array类型显示提示内容 -->
-            <a-space
-              :size="8"
-              v-show="state.treeSelectNode.keyType === 'array'"
-            >
-              <a-button type="primary" @click.prevent="arrayEditClose2">
-                <template #icon> <PlusOutlined /> </template>
-                {{ t('common.addText') }}
-              </a-button>
-            </a-space>
-
-            <!-- array类型数据项显示表单项 -->
-            <a-space
-              :size="8"
-              v-show="state.treeSelectNode.title.indexOf('Index-') === 0"
-            >
-              <a-button type="default" @click.prevent="arrayEditClose2">
-                <template #icon> <CloseOutlined /> </template>
-                关闭
-              </a-button>
-              <a-button
-                type="default"
-                @click.prevent="arrayEdit2(state.treeSelectNode.record)"
-              >
-                <template #icon> <FormOutlined /> </template>
-                {{ t('common.editText') }}
-              </a-button>
-              <a-button type="primary" @click.prevent="arrayEditOk2">
-                <template #icon> <CheckOutlined /> </template>
-                保存
-              </a-button>
-            </a-space>
-          </template>
-
-          <!-- list类型显示表格列表 -->
-          <a-table
-            v-show="state.treeSelectNode.keyType === 'list'"
-            class="table"
-            row-key="name"
-            :columns="listColumns"
-            :data-source="state.treeSelectNode.keyRecordList"
-            size="middle"
-            :pagination="false"
-            :bordered="true"
-            :scroll="{ x: true }"
-          >
-            <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="state.editRecord['display'] === record['display']"
-                      class="editable-cell__input-wrapper"
-                    >
-                      <a-input
-                        v-if="
-                          ['string', 'ipv6', 'ipv4', 'regex'].includes(
-                            record['type']
-                          )
-                        "
-                        v-model:value="state.editRecord['value']"
-                        style="width: 100%"
-                      ></a-input>
-                      <a-input-number
-                        v-else-if="record['type'] === 'int'"
-                        v-model:value="state.editRecord['value']"
-                        :min="0"
-                        :max="65535"
-                        style="width: 100%"
-                      ></a-input-number>
-                      <a-switch
-                        v-else-if="record['type'] === 'bool'"
-                        v-model:checked="state.editRecord['value']"
-                        :checked-children="t('common.switch.open')"
-                        :un-checked-children="t('common.switch.shut')"
-                      ></a-switch>
-                      <a-select
-                        v-else-if="record['type'] === 'enum'"
-                        v-model:value="state.editRecord['value']"
-                        :allow-clear="true"
-                        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-space :size="16" align="center" direction="horizontal">
-                        <a-popconfirm
-                          title="确认更新该属性值吗？"
-                          placement="top"
-                          @confirm="listEditOk2()"
-                        >
-                          <a-button
-                            type="text"
-                            class="editable-cell__icon-edit"
-                          >
-                            <template #icon><CheckOutlined /></template>
-                          </a-button>
-                        </a-popconfirm>
-                        <a-button
-                          type="text"
-                          class="editable-cell__icon-edit"
-                          @click.prevent="listEditClose2()"
-                        >
-                          <template #icon><CloseOutlined /></template>
-                        </a-button>
-                      </a-space>
-                    </div>
-                    <div v-else class="editable-cell__text-wrapper">
-                      {{ `${record.value}` || '&nbsp;' }}
-                      <EditOutlined
-                        class="editable-cell__icon"
-                        v-if="record.access !== 'read'"
-                        @click="listEdit2(record)"
-                      />
-                    </div>
-                  </div>
-                </a-tooltip>
-              </template>
-            </template>
-          </a-table>
-
-          <!-- array类型显示提示内容 -->
-          <a-typography v-show="state.treeSelectNode.keyType === 'array'">
-            <a-typography-title>
-              {{ state.treeSelectNode.title }}
-            </a-typography-title>
-            <a-typography-paragraph>
-              可通过右上角
-              <a-typography-text mark>添加</a-typography-text>
-              当前到 {{ state.treeSelectNode.title }} 配置
-              <br />
-              当前存在以下配置项：
-            </a-typography-paragraph>
-            <a-typography-text
-              strong
-              v-for="item in state.treeSelectNode.children"
-            >
-              {{ item.title }} <br />
-            </a-typography-text>
-          </a-typography>
-
-          <!-- array类型数据项显示表单项 -->
-          <a-form
-            class="form"
-            v-show="state.treeSelectNode.title.indexOf('Index-') === 0"
-            layout="horizontal"
-            autocomplete="off"
-            :validate-on-rule-change="false"
-            :validateTrigger="[]"
-          >
-            <a-form-item
-              v-for="item in state.treeSelectNode.record"
-              :label="item.display"
-              :name="item.name"
-              :required="item.optional === 'false'"
-            >
-              <a-tooltip placement="topLeft">
-                <template #title v-if="item.comment">
-                  {{ item.comment }}
-                </template>
-                <div class="editable-cell">
-                  {{ state.editRecord[item.name] }}
-                  <div
-                    v-if="
-                      !Array.isArray(item.array) &&
-                      state.editRecord[item.name] !== undefined
-                    "
-                    class="editable-cell__input-wrapper"
-                  >
-                    <a-input
-                      v-if="
-                        ['string', 'ipv6', 'ipv4', 'regex'].includes(
-                          item['type']
-                        )
-                      "
-                      v-model:value="state.editRecord[item.name]['value']"
-                      style="width: 100%"
-                    ></a-input>
-                    <a-input-number
-                      v-else-if="item['type'] === 'int'"
-                      v-model:value="state.editRecord[item.name]['value']"
-                      :min="0"
-                      :max="65535"
-                      style="width: 100%"
-                    ></a-input-number>
-                    <a-switch
-                      v-else-if="item['type'] === 'bool'"
-                      v-model:checked="state.editRecord[item.name]['value']"
-                      :checked-children="t('common.switch.open')"
-                      :un-checked-children="t('common.switch.shut')"
-                    ></a-switch>
-                    <a-select
-                      v-else-if="item['type'] === 'enum'"
-                      v-model:value="state.editRecord[item.name]['value']"
-                      :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>
-                  </div>
-
-                  <a-button
-                    type="link"
-                    size="small"
-                    @click.prevent="arrayChildExpand2(item)"
-                    v-else-if="Array.isArray(item.array)"
-                  >
-                    详情
-                  </a-button>
-
-                  <div v-else class="editable-cell__text-wrapper">
-                    {{ `${item.value || '&nbsp;'}` }}
-                  </div>
-                </div>
-              </a-tooltip>
-
-              <template
-                #extra
-                v-if="
-                  Array.isArray(item.array) &&
-                  item.display === state.arrayChildTitle
-                "
-              >
-                <!-- array类型多列嵌套数据项显示表单项 -->
-                <a-card
-                  bordered
-                  size="small"
-                  :title="state.arrayChildTitle"
-                  v-show="state.arrayChildTitle"
-                >
-                  <!-- 插槽-卡片右侧 -->
-                  <template #extra>
-                    <a-space :size="8">
-                      <a-button
-                        type="primary"
-                        size="small"
-                        @click.prevent="arrayChildAdd2()"
-                      >
-                        <template #icon><PlusOutlined /></template>
-                        {{ t('common.addText') }}
-                      </a-button>
-                      <a-button
-                        danger
-                        type="primary"
-                        size="small"
-                        @click.prevent="arrayChildExpandClose()"
-                      >
-                        <template #icon> <CloseOutlined /> </template>
-                        {{ t('common.close') }}
-                      </a-button>
-                    </a-space>
-                  </template>
-                  <!-- array类型显示提示内容 -->
-                  <a-row :gutter="16" v-for="item in state.arrayChildData">
-                    <a-col :lg="18" :md="18" :xs="24">
-                      <span>{{ item.title }}</span>
-                    </a-col>
-                    <a-col :lg="6" :md="6" :xs="24">
-                      <a-space :size="16">
-                        <a-tooltip>
-                          <template #title>{{ t('common.viewText') }}</template>
-                          <a-button
-                            type="text"
-                            size="small"
-                            @click.prevent="arrayChildEdit2(item, -2)"
-                          >
-                            <template #icon><ProfileOutlined /></template>
-                          </a-button>
-                        </a-tooltip>
-                        <a-tooltip>
-                          <template #title>{{
-                            t('common.deleteText')
-                          }}</template>
-                          <a-button
-                            danger
-                            type="text"
-                            size="small"
-                            @click.prevent="arrayChildDelete2(item.key)"
-                          >
-                            <template #icon><DeleteOutlined /></template>
-                          </a-button>
-                        </a-tooltip>
-                      </a-space>
-                    </a-col>
-                    <a-col :span="24">
-                      <a-card
-                        bordered
-                        size="small"
-                        :title="item.title"
-                        v-if="state.arrayChildKey === item.key"
-                      >
-                        <!-- 插槽-卡片右侧 -->
-                        <template #extra>
-                          <a-space :size="8">
-                            <a-tooltip v-if="state.arrayChildNewIndex === -2">
-                              <template #title>{{
-                                t('common.editText')
-                              }}</template>
-                              <a-button
-                                type="text"
-                                size="small"
-                                @click.prevent="arrayChildEdit2(item, -1)"
-                              >
-                                <template #icon><FormOutlined /></template>
-                              </a-button>
-                            </a-tooltip>
-
-                            <a-tooltip v-if="state.arrayChildNewIndex > -2">
-                              <template #title>{{ t('common.ok') }}</template>
-                              <a-popconfirm
-                                :title="`确认提交${
-                                  state.arrayChildNewIndex === -1
-                                    ? '更新'
-                                    : '新增'
-                                } Index 为 【 ${
-                                  state.arrayChildKey
-                                } 】 的记录吗？`"
-                                placement="bottomLeft"
-                                @confirm="
-                                  state.arrayChildNewIndex === -1
-                                    ? arrayChildEditOk2()
-                                    : arrayChildAddOk2()
-                                "
-                              >
-                                <a-button type="text" size="small">
-                                  <template #icon><CheckOutlined /></template>
-                                </a-button>
-                              </a-popconfirm>
-                            </a-tooltip>
-
-                            <a-tooltip>
-                              <template #title>{{
-                                t('common.close')
-                              }}</template>
-                              <a-button
-                                type="text"
-                                size="small"
-                                @click.prevent="arrayChildEditClose2()"
-                              >
-                                <template #icon><CloseOutlined /></template>
-                              </a-button>
-                            </a-tooltip>
-                          </a-space>
-                        </template>
-
-                        <a-form
-                          class="form"
-                          layout="horizontal"
-                          autocomplete="off"
-                          :validate-on-rule-change="false"
-                          :validateTrigger="[]"
-                        >
-                          <a-form-item
-                            v-for="item in state.arrayChildEditRecord"
-                            :label="item.display"
-                            :name="item.name"
-                            :required="item.optional === 'false'"
-                          >
-                            <a-tooltip placement="topLeft">
-                              <template #title v-if="item.comment">
-                                {{ item.comment }}
-                              </template>
-                              <div>
-                                <div
-                                  v-if="
-                                    !Array.isArray(item.array) &&
-                                    state.arrayChildNewIndex > -2 &&
-                                    state.arrayChildEditRecord[item.name] !==
-                                      undefined
-                                  "
-                                >
-                                  <a-input
-                                    v-if="
-                                      [
-                                        'string',
-                                        'ipv6',
-                                        'ipv4',
-                                        'regex',
-                                      ].includes(item['type'])
-                                    "
-                                    v-model:value="
-                                      state.arrayChildEditRecord[item.name][
-                                        'value'
-                                      ]
-                                    "
-                                    style="width: 100%"
-                                  ></a-input>
-                                  <a-input-number
-                                    v-else-if="item['type'] === 'int'"
-                                    v-model:value="
-                                      state.arrayChildEditRecord[item.name][
-                                        'value'
-                                      ]
-                                    "
-                                    :min="0"
-                                    :max="65535"
-                                    style="width: 100%"
-                                  ></a-input-number>
-                                  <a-switch
-                                    v-else-if="item['type'] === 'bool'"
-                                    v-model:checked="
-                                      state.arrayChildEditRecord[item.name][
-                                        'value'
-                                      ]
-                                    "
-                                    :checked-children="t('common.switch.open')"
-                                    :un-checked-children="
-                                      t('common.switch.shut')
-                                    "
-                                  ></a-switch>
-                                  <a-select
-                                    v-else-if="item['type'] === 'enum'"
-                                    v-model:value="
-                                      state.arrayChildEditRecord[item.name][
-                                        'value'
-                                      ]
-                                    "
-                                    :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>
-                                </div>
-
-                                <div v-else>
-                                  {{ `${item.value || '&nbsp;'}` }}
-                                </div>
-                              </div>
-                            </a-tooltip>
-                          </a-form-item>
-                        </a-form>
-                      </a-card>
-                    </a-col>
-                  </a-row>
-
-                  <div>{{ state.arrayChildEditRecord }}</div>
-                  <div>{{ state.arrayChildNewIndex }}</div>
-                </a-card>
-              </template>
-            </a-form-item>
-          </a-form>
-
-          <!-- array类型多列嵌套数据项显示表单项 -->
-          <a-card
-            bordered
-            size="small"
-            :title="state.arrayChildTitle"
-            v-show="state.arrayChildTitle"
-          >
-            <!-- 插槽-卡片右侧 -->
-            <template #extra>
-              <a-space :size="8">
-                <a-button
-                  type="primary"
-                  size="small"
-                  @click.prevent="arrayChildAdd2()"
-                >
-                  <template #icon><PlusOutlined /></template>
-                  {{ t('common.addText') }}
-                </a-button>
-                <a-button
-                  danger
-                  type="primary"
-                  size="small"
-                  @click.prevent="arrayChildExpandClose()"
-                >
-                  <template #icon> <CloseOutlined /> </template>
-                  {{ t('common.close') }}
-                </a-button>
-              </a-space>
-            </template>
-            <!-- array类型显示提示内容 -->
-            <a-row :gutter="16" v-for="item in state.arrayChildData">
-              <a-col :lg="18" :md="18" :xs="24">
-                <span>{{ item.title }}</span>
-              </a-col>
-              <a-col :lg="6" :md="6" :xs="24">
-                <a-space :size="16">
-                  <a-tooltip>
-                    <template #title>{{ t('common.viewText') }}</template>
-                    <a-button
-                      type="text"
-                      size="small"
-                      @click.prevent="arrayChildEdit2(item, -2)"
-                    >
-                      <template #icon><ProfileOutlined /></template>
-                    </a-button>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template #title>{{ t('common.deleteText') }}</template>
-                    <a-button
-                      danger
-                      type="text"
-                      size="small"
-                      @click.prevent="arrayChildDelete2(item.key)"
-                    >
-                      <template #icon><DeleteOutlined /></template>
-                    </a-button>
-                  </a-tooltip>
-                </a-space>
-              </a-col>
-              <a-col :span="24">
-                <a-card
-                  bordered
-                  size="small"
-                  :title="item.title"
-                  v-if="state.arrayChildKey === item.key"
-                >
-                  <!-- 插槽-卡片右侧 -->
-                  <template #extra>
-                    <a-space :size="8">
-                      <a-tooltip>
-                        <template #title>{{ t('common.editText') }}</template>
-                        <a-button
-                          type="text"
-                          size="small"
-                          @click.prevent="arrayChildEdit2(item, -1)"
-                        >
-                          <template #icon><FormOutlined /></template>
-                        </a-button>
-                      </a-tooltip>
-
-                      <a-tooltip>
-                        <template #title>{{ t('common.ok') }}</template>
-                        <a-popconfirm
-                          :title="`确认提交${
-                            state.arrayChildNewIndex === -1 ? '更新' : '新增'
-                          } Index 为 【 ${state.arrayChildKey} 】 的记录吗？`"
-                          placement="bottomLeft"
-                          @confirm="
-                            state.arrayChildNewIndex === -1
-                              ? arrayChildEditOk2()
-                              : arrayChildAddOk2()
-                          "
-                        >
-                          <a-button type="text" size="small">
-                            <template #icon><CheckOutlined /></template>
-                          </a-button>
-                        </a-popconfirm>
-                      </a-tooltip>
-
-                      <a-tooltip>
-                        <template #title>{{ t('common.close') }}</template>
-                        <a-button
-                          type="text"
-                          size="small"
-                          @click.prevent="arrayChildEditClose2()"
-                        >
-                          <template #icon><CloseOutlined /></template>
-                        </a-button>
-                      </a-tooltip>
-                    </a-space>
-                  </template>
-
-                  <a-form
-                    class="form"
-                    layout="horizontal"
-                    autocomplete="off"
-                    :validate-on-rule-change="false"
-                    :validateTrigger="[]"
-                  >
-                    <a-form-item
-                      v-for="item in state.arrayChildEditRecord"
-                      :label="item.display"
-                      :name="item.name"
-                      :required="item.optional === 'false'"
-                    >
-                      <a-tooltip placement="topLeft">
-                        <template #title v-if="item.comment">
-                          {{ item.comment }}
-                        </template>
-                        <div>
-                          <div
-                            v-if="
-                              !Array.isArray(item.array) &&
-                              state.arrayChildNewIndex > -2 &&
-                              state.arrayChildEditRecord[item.name] !==
-                                undefined
-                            "
-                          >
-                            <a-input
-                              v-if="
-                                ['string', 'ipv6', 'ipv4', 'regex'].includes(
-                                  item['type']
-                                )
-                              "
-                              v-model:value="
-                                state.arrayChildEditRecord[item.name]['value']
-                              "
-                              style="width: 100%"
-                            ></a-input>
-                            <a-input-number
-                              v-else-if="item['type'] === 'int'"
-                              v-model:value="
-                                state.arrayChildEditRecord[item.name]['value']
-                              "
-                              :min="0"
-                              :max="65535"
-                              style="width: 100%"
-                            ></a-input-number>
-                            <a-switch
-                              v-else-if="item['type'] === 'bool'"
-                              v-model:checked="
-                                state.arrayChildEditRecord[item.name]['value']
-                              "
-                              :checked-children="t('common.switch.open')"
-                              :un-checked-children="t('common.switch.shut')"
-                            ></a-switch>
-                            <a-select
-                              v-else-if="item['type'] === 'enum'"
-                              v-model:value="
-                                state.arrayChildEditRecord[item.name]['value']
-                              "
-                              :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>
-                          </div>
-
-                          <div v-else>
-                            {{ `${item.value || '&nbsp;'}` }}
-                          </div>
-                        </div>
-                      </a-tooltip>
-                    </a-form-item>
-                  </a-form>
-                </a-card>
-              </a-col>
-            </a-row>
-
-            <div>{{ state.arrayChildEditRecord }}</div>
-            <div>{{ state.arrayChildNewIndex }}</div>
-          </a-card>
-        </a-card>
-      </a-col>
-    </a-row>
-
-    <a-card  :bordered="false"
-      :body-style="{
-        marginBottom: '24px',
-        marginTop: '24px',
-        paddingBottom: 0,
-      }">
-      <a-tabs
-        tab-position="left"
-        size="small"
-        v-model:activeKey="tabState.tabActiveTopTag"
-        @change="fnTabActiveTopTag"
-        destroyInactiveTabPane
-      >
-        <template #leftExtra>
-          <a-form
-            layout="inline"
-            autocomplete="off"
-            style="margin-bottom: 20px"
-          >
-            <a-form-item name="neId ">
-              <a-cascader
-                v-model:value="neTypeSelect"
-                :options="neCascaderOtions"
-                :allow-clear="false"
-                placeholder="请选择网元"
-                @change="fnGetParamConfigNode"
-              />
-            </a-form-item>
-            <a-form-item name="listeningPort">
-              <a-tooltip>
-                <template #title>{{ t('common.reloadText') }}</template>
-                <a-button
-                  type="default"
-                  @click.prevent="fnTabActiveTopTag('#')"
-                >
-                  <template #icon>
-                    <ReloadOutlined />
-                  </template>
-                </a-button>
-              </a-tooltip>
-            </a-form-item>
-          </a-form>
-        </template>
-
-        <a-tab-pane
-          v-for="tab in tabState.tabNames"
-          :key="tab.topTag"
-          :tab="tab.topDisplay"
-        >
-          {{ tab.topDisplay }}
-                <!-- list类型显示表格列表 -->
-                <a-table
-            v-show="state.treeSelectNode.keyType === 'list'"
-            class="table"
-            row-key="name"
-            :columns="listColumns"
-            :data-source="state.treeSelectNode.keyRecordList"
-            size="middle"
-            :pagination="false"
-            :bordered="true"
-            :scroll="{ x: true }"
-          >
-            <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="state.editRecord['display'] === record['display']"
-                      class="editable-cell__input-wrapper"
-                    >
-                      <a-input
-                        v-if="
-                          ['string', 'ipv6', 'ipv4', 'regex'].includes(
-                            record['type']
-                          )
-                        "
-                        v-model:value="state.editRecord['value']"
-                        style="width: 100%"
-                      ></a-input>
-                      <a-input-number
-                        v-else-if="record['type'] === 'int'"
-                        v-model:value="state.editRecord['value']"
-                        :min="0"
-                        :max="65535"
-                        style="width: 100%"
-                      ></a-input-number>
-                      <a-switch
-                        v-else-if="record['type'] === 'bool'"
-                        v-model:checked="state.editRecord['value']"
-                        :checked-children="t('common.switch.open')"
-                        :un-checked-children="t('common.switch.shut')"
-                      ></a-switch>
-                      <a-select
-                        v-else-if="record['type'] === 'enum'"
-                        v-model:value="state.editRecord['value']"
-                        :allow-clear="true"
-                        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-space :size="16" align="center" direction="horizontal">
-                        <a-popconfirm
-                          title="确认更新该属性值吗？"
-                          placement="top"
-                          @confirm="listEditOk2()"
-                        >
-                          <a-button
-                            type="text"
-                            class="editable-cell__icon-edit"
-                          >
-                            <template #icon><CheckOutlined /></template>
-                          </a-button>
-                        </a-popconfirm>
-                        <a-button
-                          type="text"
-                          class="editable-cell__icon-edit"
-                          @click.prevent="listEditClose2()"
-                        >
-                          <template #icon><CloseOutlined /></template>
-                        </a-button>
-                      </a-space>
-                    </div>
-                    <div v-else class="editable-cell__text-wrapper">
-                      {{ `${record.value}` || '&nbsp;' }}
-                      <EditOutlined
-                        class="editable-cell__icon"
-                        v-if="record.access !== 'read'"
-                        @click="listEdit2(record)"
-                      />
-                    </div>
-                  </div>
-                </a-tooltip>
-              </template>
-            </template>
-          </a-table>
-          
-        </a-tab-pane>
-      </a-tabs>
-    </a-card>
-
-    <a-card
-      :bordered="false"
-      :body-style="{
-        marginBottom: '24px',
-        marginTop: '24px',
-        paddingBottom: 0,
-      }"
-    >
-      <!-- 表格搜索栏 -->
-      <a-form name="queryParams" layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="网元类型" name="neTypeSelect">
-              <a-cascader
-                v-model:value="neTypeSelect"
-                :options="neCascaderOtions"
-                :allow-clear="false"
-                placeholder="请选择网元"
-                @change="fnGetParamConfigTopTab"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item>
-              <a-space :size="8">
-                <a-button
-                  type="primary"
-                  @click.prevent="fnGetParamConfigTopTab"
-                >
-                  <template #icon><SearchOutlined /></template>
-                  {{ t('common.search') }}
-                </a-button>
-              </a-space>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-card>
-
-    <a-card :bordered="false" :body-style="{ paddingTop: '0px' }">
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title> </template>
-      <a-tabs
-        v-model:activeKey="tabState.tabActiveTopTag"
-        :tab-position="tabState.tabPosition"
-        @change="fnTabActiveTopTag"
-      >
-        <template #rightExtra>
-          <a-space :size="8" align="center">
-            <a-tooltip>
-              <template #title>{{ t('common.reloadText') }}</template>
-              <a-button type="default" @click.prevent="fnTabActiveTopTag('#')">
-                <template #icon>
-                  <ReloadOutlined />
-                </template>
-              </a-button>
-            </a-tooltip>
-          </a-space>
-        </template>
-        <a-tab-pane
-          v-for="tab in tabState.tabNames"
-          :key="tab.topTag"
-          :tab="tab.topDisplay"
-        >
-          <!-- 单列表格列表 -->
-          <a-table
-            v-show="tableState.type === 'list'"
-            class="table"
-            row-key="name"
-            :columns="tableState.listColumns"
-            :loading="tableState.loading"
-            :data-source="tableState.listData"
-            :size="tableState.size"
-            :pagination="false"
-            :bordered="true"
-            :scroll="{ x: true }"
-          >
-            <template #bodyCell="{ column, text, record }">
-              <template v-if="column.dataIndex === 'value'">
-                <a-tooltip>
-                  <template #title v-if="record.comment">
-                    {{ record.comment }}
-                  </template>
-                  <div class="editable-cell">
-                    <div
-                      v-if="
-                        tableState.editRecord['display'] === record['display']
-                      "
-                      class="editable-cell__input-wrapper"
-                    >
-                      <a-space :size="16" align="center" direction="horizontal">
-                        <a-input
-                          v-if="
-                            ['string', 'ipv6', 'ipv4', 'regex'].includes(
-                              record['type']
-                            )
-                          "
-                          v-model:value="tableState.editRecord['value']"
-                          :placeholder="record['filter']"
-                        ></a-input>
-                        <a-input-number
-                          v-else-if="record['type'] === 'int'"
-                          v-model:value="tableState.editRecord['value']"
-                          :min="0"
-                          :max="65535"
-                          :placeholder="record['filter']"
-                        ></a-input-number>
-                        <a-switch
-                          v-else-if="record['type'] === 'bool'"
-                          v-model:checked="tableState.editRecord['value']"
-                          :checked-children="t('common.switch.open')"
-                          :un-checked-children="t('common.switch.shut')"
-                        ></a-switch>
-                        <a-select
-                          v-else-if="record['type'] === 'enum'"
-                          v-model:value="tableState.editRecord['value']"
-                          :placeholder="record['filter']"
-                          :allow-clear="true"
-                        >
-                          <a-select-option
-                            :value="+v"
-                            :key="+v"
-                            v-for="(k, v) in JSON.parse(record['filter'])"
-                          >
-                            {{ k }}
-                          </a-select-option>
-                        </a-select>
-
-                        <a-popconfirm
-                          title="确认更新该属性值吗？"
-                          placement="top"
-                          @confirm="listEditOk()"
-                        >
-                          <CheckOutlined class="editable-cell__icon-edit" />
-                        </a-popconfirm>
-                        <CloseOutlined
-                          class="editable-cell__icon-edit"
-                          @click="listEditClose()"
-                        />
-                      </a-space>
-                    </div>
-                    <div v-else class="editable-cell__text-wrapper">
-                      {{ `${text}` || '&nbsp;' }}
-                      <EditOutlined
-                        class="editable-cell__icon"
-                        v-if="record.access !== 'read'"
-                        @click="listEdit(record)"
-                      />
-                    </div>
-                  </div>
-                </a-tooltip>
-              </template>
-            </template>
-          </a-table>
-          <!-- 多列表格列表 -->
-          <a-table
-            v-show="tableState.type === 'array'"
-            class="table"
-            row-key="index"
-            :columns="tableState.arrayColumns"
-            :loading="tableState.loading"
-            :data-source="tableState.arrayData"
-            :size="tableState.size"
-            :pagination="false"
-            :bordered="true"
-            :scroll="{ x: tableState.arrayColumns.length * 200, y: 450 }"
-            :show-expand-column="false"
-            v-model:expanded-row-keys="tableState.arrayChildExpandKeys"
-          >
-            <template #title>
-              <a-button type="primary" @click.prevent="arrayAdd" size="small">
-                <template #icon> <PlusOutlined /> </template>
-                {{ t('common.addText') }}
-              </a-button>
-            </template>
-            <template #bodyCell="{ column, text, record }">
-              <template v-if="column.key === 'index'">
-                <a-space
-                  :size="16"
-                  align="center"
-                  v-if="
-                    tableState.editRecord[column.key]?.value ===
-                    text[column.key]?.value
-                  "
-                >
-                  <a-tooltip>
-                    <template #title>提交</template>
-                    <a-popconfirm
-                      v-if="
-                        tableState.arrayNewIndex === text[column.key]?.value
-                      "
-                      :title="`确认提交新增 Index 为 【${
-                        text[column.key]?.value
-                      }】 的记录吗？`"
-                      placement="left"
-                      @confirm="arrayAddOk()"
-                    >
-                      <CheckOutlined class="editable-cell__icon-edit" />
-                    </a-popconfirm>
-                    <a-popconfirm
-                      v-else
-                      :title="`确认提交更新 Index 为 【${
-                        text[column.key]?.value
-                      }】 的记录吗？`"
-                      placement="left"
-                      @confirm="arrayEditOk()"
-                    >
-                      <CheckOutlined class="editable-cell__icon-edit" />
-                    </a-popconfirm>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template #title>取消</template>
-                    <CloseOutlined
-                      class="editable-cell__icon-edit"
-                      @click="arrayEditClose()"
-                    />
-                  </a-tooltip>
-                </a-space>
-                <a-space :size="8" align="center" v-else>
-                  <a-tooltip>
-                    <template #title>{{ t('common.editText') }}</template>
-                    <a-button type="link" @click.prevent="arrayEdit(record)">
-                      <template #icon><FormOutlined /></template>
-                    </a-button>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template #title>{{ t('common.deleteText') }}</template>
-                    <a-button type="link" @click.prevent="arrayDelete(record)">
-                      <template #icon><DeleteOutlined /></template>
-                    </a-button>
-                  </a-tooltip>
-                </a-space>
-              </template>
-              <template v-else>
-                <a-tooltip>
-                  <template #title v-if="text.comment">
-                    {{ text.comment }}
-                  </template>
-                  <div class="editable-cell">
-                    {{ tableState.editRecord[text.name] }}
-                    <div
-                      v-if="
-                        column.dataIndex !== 'index' &&
-                        !Array.isArray(text.array) &&
-                        tableState.editRecord['index']?.value ===
-                          record['index']?.value &&
-                        tableState.editRecord[text.name]?.name ===
-                          column.dataIndex
-                      "
-                      class="editable-cell__input-wrapper"
-                    >
-                      <a-space :size="16" align="center" direction="horizontal">
-                        <a-input
-                          v-if="
-                            ['string', 'ipv6', 'ipv4', 'regex'].includes(
-                              text['type']
-                            )
-                          "
-                          v-model:value="
-                            tableState.editRecord[text.name]['value']
-                          "
-                          :placeholder="text['filter']"
-                        ></a-input>
-                        <a-input-number
-                          v-else-if="text['type'] === 'int'"
-                          v-model:value="
-                            tableState.editRecord[text.name]['value']
-                          "
-                          :min="0"
-                          :max="65535"
-                          :placeholder="text['filter']"
-                        ></a-input-number>
-                        <a-switch
-                          v-else-if="text['type'] === 'bool'"
-                          v-model:checked="
-                            tableState.editRecord[text.name]['value']
-                          "
-                          :checked-children="t('common.switch.open')"
-                          :un-checked-children="t('common.switch.shut')"
-                        ></a-switch>
-                        <a-select
-                          v-else-if="text['type'] === 'enum'"
-                          v-model:value="
-                            tableState.editRecord[text.name]['value']
-                          "
-                          :placeholder="text['filter']"
-                          :allow-clear="true"
-                        >
-                          <a-select-option
-                            :value="v"
-                            :key="v"
-                            v-for="(k, v) in JSON.parse(text['filter'])"
-                          >
-                            {{ k }}
-                          </a-select-option>
-                        </a-select>
-                      </a-space>
-                    </div>
-                    <a-button
-                      type="link"
-                      size="small"
-                      @click.prevent="arrayChildExpand(record['index'], text)"
-                      v-else-if="Array.isArray(text.array)"
-                    >
-                      详情
-                    </a-button>
-                    <div v-else class="editable-cell__text-wrapper">
-                      {{ `${text.value}` }}
-                    </div>
-                  </div>
-                </a-tooltip>
-              </template>
-            </template>
-            <template #expandedRowRender>
-              <a-table
-                class="table"
-                row-key="index"
-                :columns="tableState.arrayChildColumns"
-                :data-source="tableState.arrayChildData"
-                :size="tableState.size"
-                :pagination="false"
-                :bordered="true"
-                :scroll="{
-                  x: tableState.arrayChildColumns.length * 200,
-                  y: 450,
-                }"
-              >
-                <template #title>
-                  <a-button
-                    type="primary"
-                    @click.prevent="arrayChildAdd"
-                    size="small"
-                  >
-                    <template #icon> <PlusOutlined /> </template>
-                    {{ t('common.addText') }} {{ tableState.arrayChildTitle }}
-                  </a-button>
-                </template>
-                <template #bodyCell="{ column, text, record }">
-                  <template v-if="column.key === 'index'">
-                    <a-space
-                      :size="16"
-                      align="center"
-                      v-if="
-                        tableState.arrayChildEditRecord[column.key]?.value ===
-                        text[column.key]?.value
-                      "
-                    >
-                      <a-tooltip>
-                        <template #title>提交</template>
-                        <a-popconfirm
-                          v-if="
-                            tableState.arrayChildNewIndex ===
-                            text[column.key]?.value
-                          "
-                          :title="`确认提交新增 Index 为 【${
-                            text[column.key]?.value
-                          }】 的记录吗？`"
-                          placement="left"
-                          @confirm="arrayChildAddOk()"
-                        >
-                          <CheckOutlined class="editable-cell__icon-edit" />
-                        </a-popconfirm>
-                        <a-popconfirm
-                          v-else
-                          :title="`确认提交更新 Index 为 【${
-                            text[column.key]?.value
-                          }】 的记录吗？`"
-                          placement="left"
-                          @confirm="arrayChildEditOk()"
-                        >
-                          <CheckOutlined class="editable-cell__icon-edit" />
-                        </a-popconfirm>
-                      </a-tooltip>
-                      <a-tooltip>
-                        <template #title>取消</template>
-                        <CloseOutlined
-                          class="editable-cell__icon-edit"
-                          @click="arrayChildEditClose()"
-                        />
-                      </a-tooltip>
-                    </a-space>
-                    <a-space :size="8" align="center" v-else>
-                      <a-tooltip>
-                        <template #title>{{ t('common.editText') }}</template>
-                        <a-button
-                          type="link"
-                          @click.prevent="arrayChildEdit(record)"
-                        >
-                          <template #icon><FormOutlined /></template>
-                        </a-button>
-                      </a-tooltip>
-                      <a-tooltip>
-                        <template #title>{{ t('common.deleteText') }}</template>
-                        <a-button
-                          type="link"
-                          @click.prevent="arrayChildDelete(record)"
-                        >
-                          <template #icon><DeleteOutlined /></template>
-                        </a-button>
-                      </a-tooltip>
-                    </a-space>
-                  </template>
-                  <template v-else>
-                    <a-tooltip>
-                      <template #title v-if="text.comment">
-                        {{ text.comment }}
-                      </template>
-                      <div class="editable-cell">
-                        <div
-                          v-if="
-                            column.dataIndex !== 'index' &&
-                            !Array.isArray(text.array) &&
-                            tableState.arrayChildEditRecord['index']?.value ===
-                              record['index']?.value &&
-                            tableState.arrayChildEditRecord[text.name]?.name ===
-                              column.dataIndex
-                          "
-                          class="editable-cell__input-wrapper"
-                        >
-                          <a-space
-                            :size="16"
-                            align="center"
-                            direction="horizontal"
-                          >
-                            <a-input
-                              v-if="
-                                ['string', 'ipv6', 'ipv4', 'regex'].includes(
-                                  text['type']
-                                )
-                              "
-                              v-model:value="
-                                tableState.arrayChildEditRecord[text.name][
-                                  'value'
-                                ]
-                              "
-                              :placeholder="text['filter']"
-                            ></a-input>
-                            <a-input-number
-                              v-else-if="text['type'] === 'int'"
-                              v-model:value="
-                                tableState.arrayChildEditRecord[text.name][
-                                  'value'
-                                ]
-                              "
-                              :min="0"
-                              :max="65535"
-                              :placeholder="text['filter']"
-                            ></a-input-number>
-                            <a-switch
-                              v-else-if="text['type'] === 'bool'"
-                              v-model:checked="
-                                tableState.arrayChildEditRecord[text.name][
-                                  'value'
-                                ]
-                              "
-                              :checked-children="t('common.switch.open')"
-                              :un-checked-children="t('common.switch.shut')"
-                            ></a-switch>
-                            <a-select
-                              v-else-if="text['type'] === 'enum'"
-                              v-model:value="
-                                tableState.arrayChildEditRecord[text.name][
-                                  'value'
-                                ]
-                              "
-                              :placeholder="text['filter']"
-                              :allow-clear="true"
-                            >
-                              <a-select-option
-                                :value="v"
-                                :key="v"
-                                v-for="(k, v) in JSON.parse(text['filter'])"
-                              >
-                                {{ k }}
-                              </a-select-option>
-                            </a-select>
-                          </a-space>
-                        </div>
-                        <a-button
-                          type="link"
-                          size="small"
-                          @click.prevent="
-                            arrayChildExpand(record['index'], text)
-                          "
-                          v-else-if="Array.isArray(text.array)"
-                        >
-                          详情
-                        </a-button>
-                        <div v-else class="editable-cell__text-wrapper">
-                          {{ `${text.value}` }}
-                        </div>
-                      </div>
-                    </a-tooltip>
-                  </template>
-                </template>
-              </a-table>
-            </template>
-          </a-table>
-        </a-tab-pane>
-      </a-tabs>
-    </a-card>
-  </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>