perf: 参数配置页面函数重构

src/views/configManage/configParamTreeTable/hooks/useConfigArray.ts

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

src/views/configManage/configParamTreeTable/hooks/useConfigArrayChild.ts

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

src/views/configManage/configParamTreeTable/hooks/useConfigList.ts

@@ -0,0 +1,136 @@
+import { editPtNeConfigData } from '@/api/pt/neConfig';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import message from 'ant-design-vue/lib/message';
+import { reactive, toRaw } from 'vue';
+
+/**
+ * list类型参数处理
+ * @param param 父级传入 {t, treeState, ruleVerification}
+ * @returns
+ */
+export default function useConfigList({
+  t,
+  treeState,
+  ruleVerification,
+}: any) {
+  /**单列表状态类型 */
+  type ListStateType = {
+    /**紧凑型 */
+    size: SizeType;
+    /**单列记录字段 */
+    columns: Record<string, any>[];
+    /**单列记录数据 */
+    data: Record<string, any>[];
+    /**编辑行记录 */
+    editRecord: Record<string, any>;
+  };
+
+  /**单列表状态 */
+  let listState: ListStateType = reactive({
+    size: 'small',
+    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(t('common.loading'), 0);
+    editPtNeConfigData({
+      neType: treeState.neType,
+      paramName: treeState.selectNode.paramName,
+      paramData: {
+        [from['name']]: from['value'],
+      },
+    })
+      .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.find(
+            (item: Record<string, any>) => from['name'] === item['name']
+          );
+          if (item) {
+            Object.assign(item, listState.editRecord);
+          }
+        } else {
+          message.warning({
+            content: t('views.configManage.configParamForm.updateValueErr'),
+            duration: 3,
+          });
+        }
+      })
+      .finally(() => {
+        hide();
+        listState.editRecord = {};
+      });
+  }
+
+  /**表格分页器参数 */
+  let tablePagination = reactive({
+    /**当前页数 */
+    current: 1,
+    /**每页条数 */
+    pageSize: 20,
+    /**默认的每页条数 */
+    defaultPageSize: 20,
+    /**指定每页可以显示多少条 */
+    pageSizeOptions: ['10', '20', '50', '100'],
+    /**只有一页时是否隐藏分页器 */
+    hideOnSinglePage: true,
+    /**是否可以快速跳转至某页 */
+    showQuickJumper: true,
+    /**是否可以改变 pageSize */
+    showSizeChanger: true,
+    /**数据总数 */
+    total: 0,
+    showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+    onChange: (page: number, pageSize: number) => {
+      tablePagination.current = page;
+      tablePagination.pageSize = pageSize;
+    },
+  });
+
+  return { tablePagination, listState, listEdit, listEditClose, listEditOk };
+}

src/views/configManage/configParamTreeTable/hooks/useOptions.ts

@@ -1,13 +1,17 @@
+import { getNeConfigData } from '@/api/ne/neConfig';
 import { ptResetAsDefault, ptSaveAsDefault } from '@/api/pt/neConfig';
 import { stuPtNeConfigApply } from '@/api/pt/neConfigApply';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import useI18n from '@/hooks/useI18n';
 import { regExpIPv4, regExpIPv6, validURL } from '@/utils/regular-utils';
 import message from 'ant-design-vue/lib/message';
+import { ref } from 'vue';
 
-export default function useOptions() {
+/**
-  const { t } = useI18n();
+ * 参数公共函数
-
+ * @param param 父级传入 {t}
+ * @returns
+ */
+export default function useOptions({ t }: any) {
   /**规则校验 */
   function ruleVerification(row: Record<string, any>): (string | boolean)[] {
     let result = [true, ''];
@@ -165,56 +169,28 @@ export default function useOptions() {
     return result;
   }
 
-  /**保存网元下所有配置为示例配置 */
+  /**upfId可选择 */
-  function ptSaveConfig(neType: string) {
+  const SMFByUPFIdOptions = ref<{ value: string; label: string }[]>([]);
-    ptSaveAsDefault(neType, '001').then(res => {
+  /**加载smf配置的upfId */
-      if (res.code === RESULT_CODE_SUCCESS) {
+  function getConfigSMFByUPFIds(neId: string) {
-        message.success({
+    getNeConfigData({
-          content: t('common.operateOk'),
+      neType: 'SMF',
-          duration: 3,
+      neId: neId,
-        });
+      paramName: 'upfConfig',
-      } else {
+    }).then(res => {
-        message.error({
+      SMFByUPFIdOptions.value = [];
-          content: `${res.msg}`,
+      for (const s of res.data) {
-          duration: 3,
+        SMFByUPFIdOptions.value.push({
+          value: s.id,
+          label: s.id,
         });
       }
     });
   }
 
-  /**重置网元下所有配置 */
+  return {
-  function ptResetConfig(neType: string) {
+    ruleVerification,
-    ptResetAsDefault(neType).then(res => {
+    getConfigSMFByUPFIds,
-      if (res.code === RESULT_CODE_SUCCESS) {
+    SMFByUPFIdOptions,
-        message.success({
+  };
-          content: t('common.operateOk'),
-          duration: 3,
-        });
-      } else {
-        message.error({
-          content: `${res.msg}`,
-          duration: 3,
-        });
-      }
-    });
-  }
-
-  /**配置下方应用申请和撤回 */
-  function ptConfigApply(neType: string, status: string) {
-    stuPtNeConfigApply({ neType, status }).then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: t('common.operateOk'),
-          duration: 3,
-        });
-      } else {
-        message.error({
-          content: `${res.msg}`,
-          duration: 3,
-        });
-      }
-    });
-  }
-
-  return { ruleVerification, ptSaveConfig, ptResetConfig, ptConfigApply };
 }

src/views/configManage/configParamTreeTable/hooks/usePtOptions.ts

@@ -0,0 +1,144 @@
+import { getPtClassStudents } from '@/api/pt/neClass';
+import { ptSaveAsDefault, ptResetAsDefault } from '@/api/pt/neConfig';
+import { stuPtNeConfigApply } from '@/api/pt/neConfigApply';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { message } from 'ant-design-vue/lib';
+import { onMounted, reactive } from 'vue';
+
+/**
+ * 实训教学函数
+ * @param param 父级传入 {t}
+ * @returns
+ */
+export default function usePtOptions({t}:any) {
+  /**保存网元下所有配置为示例配置 */
+  function ptConfigSave(neType: string) {
+    ptSaveAsDefault(neType, '001').then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('common.operateOk'),
+          duration: 3,
+        });
+      } else {
+        message.error({
+          content: `${res.msg}`,
+          duration: 3,
+        });
+      }
+    });
+  }
+
+  /**重置网元下所有配置 */
+  function ptConfigReset(neType: string) {
+    ptResetAsDefault(neType).then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('common.operateOk'),
+          duration: 3,
+        });
+      } else {
+        message.error({
+          content: `${res.msg}`,
+          duration: 3,
+        });
+      }
+    });
+  }
+
+  /**配置下方应用申请和撤回 */
+  function ptConfigApply(neType: string, status: string) {
+    stuPtNeConfigApply({ neType, status }).then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('common.operateOk'),
+          duration: 3,
+        });
+      } else {
+        message.error({
+          content: `${res.msg}`,
+          duration: 3,
+        });
+      }
+    });
+  }
+
+  const classState = reactive<{
+    /**学生账号 */
+    student: string | undefined;
+    /**学生可选择列表 */
+    studentOptions: { value: string; label: string }[];
+    studentOptionsDef: { value: string; label: string }[];
+  }>({
+    student: undefined,
+    studentOptions: [],
+    studentOptionsDef: [],
+  });
+
+  /**初始学生列表 */
+  function initStudentList() {
+    getPtClassStudents({
+      pageNum: 1,
+      pageSize: 60,
+    }).then(res => {
+      if (!Array.isArray(res.rows) || res.rows.length <= 0) {
+        return;
+      }
+      classState.studentOptions = [];
+      for (const s of res.rows) {
+        classState.studentOptions.push({
+          value: s.userName,
+          label: s.userName,
+        });
+      }
+      Object.assign(classState.studentOptionsDef, classState.studentOptions);
+    });
+  }
+
+  let timeout: any;
+
+  /**学生选择搜索 */
+  function studentSearch(val: string) {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+    if (!val) {
+      Object.assign(classState.studentOptions, classState.studentOptionsDef);
+      return;
+    }
+    function fake() {
+      getPtClassStudents({
+        userName: val,
+        pageNum: 1,
+        pageSize: 10,
+      }).then(res => {
+        classState.studentOptions = [];
+        for (const s of res.rows) {
+          classState.studentOptions.push({
+            value: s.userName,
+            label: s.userName,
+          });
+        }
+      });
+    }
+    timeout = setTimeout(fake, 500);
+  }
+
+  /**学生选择改变 */
+  function studentChange(e: any) {
+    console.log(e);
+  }
+
+  onMounted(() => {
+    initStudentList();
+  });
+
+  return {
+    ptConfigSave,
+    ptConfigReset,
+    ptConfigApply,
+    classState,
+    studentChange,
+    studentSearch,
+  };
+}

src/views/configManage/configParamTreeTable/hooks/useSMFOptions.ts

@@ -1,26 +0,0 @@
-import { getNeConfigData } from '@/api/ne/neConfig';
-import { ref } from 'vue';
-
-export default function useSMFOptions() {
-  /**upfId可选择 */
-  const optionsUPFIds = ref<{ value: string; label: string }[]>([]);
-
-  /**初始加载upfId */
-  function initUPFIds() {
-    getNeConfigData({
-      neType: 'SMF',
-      neId: '001',
-      paramName: 'upfConfig',
-    }).then(res => {
-      optionsUPFIds.value = [];
-      for (const s of res.data) {
-        optionsUPFIds.value.push({
-          value: s.id,
-          label: s.id,
-        });
-      }
-    });
-  }
-
-  return { initUPFIds, optionsUPFIds };
-}

src/views/configManage/configParamTreeTable/index.vue

@@ -1,26 +1,25 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw, nextTick, watch } from 'vue';
+import { reactive, ref, onMounted, toRaw, watch } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useOptions from './hooks/useOptions';
-import useSMFOptions from './hooks/useSMFOptions';
+import usePtOptions from './hooks/usePtOptions';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
+import useConfigList from './hooks/useConfigList';
+import useConfigArray from './hooks/useConfigArray';
+import useConfigArrayChild from './hooks/useConfigArrayChild';
 import { DataNode } from 'ant-design-vue/lib/tree';
 import { getAllNeConfig } from '@/api/ne/neConfig';
-import {
+import { getPtNeConfigData } from '@/api/pt/neConfig';
-  addPtNeConfigData,
-  delPtNeConfigData,
-  editPtNeConfigData,
-  getPtNeConfigData,
-} from '@/api/pt/neConfig';
 const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
-const { ruleVerification, ptSaveConfig, ptResetConfig, ptConfigApply } = useOptions();
+const { ruleVerification, getConfigSMFByUPFIds, SMFByUPFIdOptions } =
-const { initUPFIds, optionsUPFIds } = useSMFOptions();
+  useOptions({ t });
+
+
 
 /**网元参数 */
 let neSelectOptions = ref<Record<string, any>[]>([]);
@@ -247,734 +246,6 @@ function fnGetNeConfig() {
   });
 }
 
-/**单列表状态类型 */
-type ListStateType = {
-  /**紧凑型 */
-  size: SizeType;
-  /**单列记录字段 */
-  columns: Record<string, any>[];
-  /**单列记录数据 */
-  data: Record<string, any>[];
-  /**编辑行记录 */
-  editRecord: Record<string, any>;
-};
-
-/**单列表状态 */
-let listState: ListStateType = reactive({
-  size: 'small',
-  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(t('common.loading'), 0);
-  editPtNeConfigData({
-    neType: treeState.neType,
-    paramName: treeState.selectNode.paramName,
-    paramData: {
-      [from['name']]: from['value'],
-    },
-  })
-    .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.find(
-          (item: Record<string, any>) => from['name'] === item['name']
-        );
-        if (item) {
-          Object.assign(item, listState.editRecord);
-        }
-      } else {
-        message.warning({
-          content: t('views.configManage.configParamForm.updateValueErr'),
-          duration: 3,
-        });
-      }
-    })
-    .finally(() => {
-      hide();
-      listState.editRecord = {};
-    });
-}
-
-/**表格分页器参数 */
-let tablePagination = reactive({
-  /**当前页数 */
-  current: 1,
-  /**每页条数 */
-  pageSize: 20,
-  /**默认的每页条数 */
-  defaultPageSize: 20,
-  /**指定每页可以显示多少条 */
-  pageSizeOptions: ['10', '20', '50', '100'],
-  /**只有一页时是否隐藏分页器 */
-  hideOnSinglePage: true,
-  /**是否可以快速跳转至某页 */
-  showQuickJumper: true,
-  /**是否可以改变 pageSize */
-  showSizeChanger: true,
-  /**数据总数 */
-  total: 0,
-  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
-  onChange: (page: number, pageSize: number) => {
-    tablePagination.current = page;
-    tablePagination.pageSize = pageSize;
-  },
-});
-
-/**多列列表状态类型 */
-type ArrayStateType = {
-  /**紧凑型 */
-  size: SizeType;
-  /**多列嵌套记录字段 */
-  columns: Record<string, any>[];
-  /**表格字段列排序 */
-  columnsDnd: Record<string, any>[];
-  /**多列记录数据 */
-  columnsData: Record<string, any>[];
-  /**多列嵌套展开key */
-  arrayChildExpandKeys: any[];
-
-  /**多列记录数据 */
-  data: Record<string, any>[];
-  /**多列记录规则 */
-  dataRule: Record<string, any>;
-};
-
-/**多列列表状态 */
-let arrayState: ArrayStateType = reactive({
-  size: 'small',
-  columns: [],
-  columnsDnd: [],
-  columnsData: [],
-  arrayChildExpandKeys: [],
-  data: [],
-  dataRule: {},
-});
-
-/**多列表编辑 */
-function arrayEdit(rowIndex: Record<string, any>) {
-  const item = arrayState.data.find((s: any) => s.key === rowIndex.value);
-  if (!item) return;
-  const from = arrayEditInit(item, arrayState.dataRule);
-  // 处理信息
-  const row: Record<string, any> = {};
-  for (const v of from.record) {
-    if (Array.isArray(v.array)) {
-      continue;
-    }
-    row[v.name] = Object.assign({}, v);
-  }
-
-  modalState.from = row;
-  modalState.type = 'arrayEdit';
-  modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
-  modalState.key = from.key;
-  modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
-  modalState.visible = true;
-
-  // 关闭嵌套
-  arrayChildExpandClose();
-}
-
-/**多列表编辑关闭 */
-function arrayEditClose() {
-  arrayChildExpandClose();
-  fnModalCancel();
-}
-
-/**多列表编辑确认 */
-function arrayEditOk(from: Record<string, any>) {
-  // 遍历提取属性和值
-  let data: Record<string, any> = {};
-  for (const key in from) {
-    // 子嵌套的不插入
-    if (from[key]['array']) {
-      continue;
-    }
-    // 检查规则
-    const [ok, msg] = ruleVerification(from[key]);
-    if (!ok) {
-      message.warning({
-        content: `${msg}`,
-        duration: 3,
-      });
-      return;
-    }
-    data[key] = from[key]['value'];
-  }
-
-  // 发送
-  const hide = message.loading(t('common.loading'), 0);
-  editPtNeConfigData({
-    neType: treeState.neType,
-    paramName: treeState.selectNode.paramName,
-    paramData: data,
-    loc: `${from['index']['value']}`,
-  })
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: t('views.configManage.configParamForm.updateItem', {
-            num: modalState.title,
-          }),
-          duration: 3,
-        });
-        fnActiveConfigNode('#');
-      } else {
-        message.warning({
-          content: t('views.configManage.configParamForm.updateItemErr'),
-          duration: 3,
-        });
-      }
-    })
-    .finally(() => {
-      hide();
-      arrayEditClose();
-    });
-}
-
-/**多列表删除单行 */
-function arrayDelete(rowIndex: Record<string, any>) {
-  const loc = `${rowIndex.value}`;
-  const title = `${treeState.selectNode.paramDisplay} Index-${loc}`;
-
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.configManage.configParamForm.delItemTip', {
-      num: title,
-    }),
-    onOk() {
-      delPtNeConfigData({
-        neType: treeState.neType,
-        paramName: treeState.selectNode.paramName,
-        loc: loc,
-      }).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('views.configManage.configParamForm.delItemOk', {
-              num: title,
-            }),
-            duration: 2,
-          });
-          arrayEditClose();
-          fnActiveConfigNode('#');
-        } 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 = 'arrayAdd';
-  modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
-  modalState.key = from.key;
-  modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
-  modalState.visible = true;
-}
-
-/**多列表新增单行确认 */
-function arrayAddOk(from: Record<string, any>) {
-  // 遍历提取属性和值
-  let data: Record<string, any> = {};
-  for (const key in from) {
-    // 子嵌套的不插入
-    if (from[key]['array']) {
-      continue;
-    }
-    // 检查规则
-    const [ok, msg] = ruleVerification(from[key]);
-    if (!ok) {
-      message.warning({
-        content: `${msg}`,
-        duration: 3,
-      });
-      return;
-    }
-    data[key] = from[key]['value'];
-  }
-
-  // 发送
-  const hide = message.loading(t('common.loading'), 0);
-  addPtNeConfigData({
-    neType: treeState.neType,
-    paramName: treeState.selectNode.paramName,
-    paramData: data,
-    loc: `${from['index']['value']}`,
-  })
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: t('views.configManage.configParamForm.addItemOk', {
-            num: modalState.title,
-          }),
-          duration: 3,
-        });
-        fnActiveConfigNode('#');
-      } else {
-        message.warning({
-          content: t('views.configManage.configParamForm.addItemErr'),
-          duration: 3,
-        });
-      }
-    })
-    .finally(() => {
-      hide();
-      arrayEditClose();
-    });
-}
-
-/**多列嵌套列表状态类型 */
-type ArrayChildStateType = {
-  /**标题 */
-  title: string;
-  /**层级index */
-  loc: string;
-  /**紧凑型 */
-  size: SizeType;
-  /**多列嵌套记录字段 */
-  columns: Record<string, any>[];
-  /**表格字段列排序 */
-  columnsDnd: Record<string, any>[];
-  /**多列记录数据 */
-  columnsData: Record<string, any>[];
-
-  /**多列嵌套记录数据 */
-  data: Record<string, any>[];
-  /**多列嵌套记录规则 */
-  dataRule: Record<string, any>;
-};
-
-/**表格状态 */
-let arrayChildState: ArrayChildStateType = reactive({
-  title: '',
-  loc: '',
-  size: 'small',
-  columns: [],
-  columnsDnd: [],
-  columnsData: [],
-  data: [],
-  dataRule: {},
-});
-
-/**多列表展开嵌套行 */
-function arrayChildExpand(
-  indexRow: Record<string, any>,
-  row: Record<string, any>
-) {
-  const loc = indexRow.value;
-  if (arrayChildState.loc === `${loc}/${row.name}`) {
-    arrayChildState.loc = '';
-    arrayState.arrayChildExpandKeys = [];
-    return;
-  }
-  arrayChildState.loc = '';
-  arrayState.arrayChildExpandKeys = [];
-  const from = Object.assign({}, JSON.parse(JSON.stringify(row)));
-  // 无数据时
-  if (!Array.isArray(from.value)) {
-    from.value = [];
-  }
-  const dataArr = Object.freeze(from.value);
-  const ruleArr = Object.freeze(from.array);
-
-  // 列表项数据
-  const dataArray: Record<string, any>[] = [];
-  for (const item of dataArr) {
-    const index = item['index'];
-    let record: Record<string, any>[] = [];
-    for (const key of Object.keys(item)) {
-      // 规则为准
-      for (const rule of ruleArr) {
-        if (rule['name'] === key) {
-          const ruleItem = Object.assign({ optional: 'true' }, rule, {
-            value: item[key],
-          });
-          record.push(ruleItem);
-          break;
-        }
-      }
-    }
-    // dataArray.push(record);
-    dataArray.push({ title: `Index-${index}`, key: index, record });
-  }
-  arrayChildState.data = dataArray;
-
-  // 无数据时，用于新增
-  arrayChildState.dataRule = {
-    title: `Index-0`,
-    key: 0,
-    record: ruleArr,
-  };
-
-  // 列表数据
-  const columnsData: Record<string, any>[] = [];
-  for (const v of arrayChildState.data) {
-    const row: Record<string, any> = {};
-    for (const item of v.record) {
-      row[item.name] = item;
-    }
-    columnsData.push(row);
-  }
-  arrayChildState.columnsData = columnsData;
-
-  // 列表字段
-  const columns: Record<string, any>[] = [];
-  for (const rule of arrayChildState.dataRule.record) {
-    columns.push({
-      title: rule.display,
-      dataIndex: rule.name,
-      align: 'left',
-      resizable: true,
-      width: 50,
-      minWidth: 50,
-      maxWidth: 250,
-    });
-  }
-  columns.push({
-    title: t('common.operate'),
-    dataIndex: 'index',
-    key: 'index',
-    align: 'center',
-    fixed: 'right',
-    width: 100,
-  });
-  arrayChildState.columns = columns;
-
-  nextTick(() => {
-    // 设置展开key
-    arrayState.arrayChildExpandKeys = [indexRow];
-    // 层级标识
-    arrayChildState.loc = `${loc}/${from['name']}`;
-    // 设置展开列表标题
-    arrayChildState.title = `${from['display']}`;
-  });
-}
-
-/**多列表展开嵌套行 */
-function arrayChildExpandClose() {
-  arrayChildState.loc = '';
-  arrayState.arrayChildExpandKeys = [];
-}
-
-/**多列表嵌套行编辑 */
-function arrayChildEdit(rowIndex: Record<string, any>) {
-  const item = arrayChildState.data.find((s: any) => s.key === rowIndex.value);
-  if (!item) return;
-  const from = arrayEditInit(item, arrayChildState.dataRule);
-  // 处理信息
-  const row: Record<string, any> = {};
-  for (const v of from.record) {
-    if (Array.isArray(v.array)) {
-      continue;
-    }
-    row[v.name] = Object.assign({}, v);
-  }
-
-  modalState.from = row;
-  modalState.type = 'arrayChildEdit';
-  modalState.title = `${arrayChildState.title} ${from.title}`;
-  modalState.key = from.key;
-  modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
-  modalState.visible = true;
-}
-
-/**多列表嵌套行编辑确认 */
-function arrayChildEditOk(from: Record<string, any>) {
-  const loc = `${arrayChildState.loc}/${from['index']['value']}`;
-
-  let data: Record<string, any> = {};
-  for (const key in from) {
-    // 子嵌套的不插入
-    if (from[key]['array']) {
-      continue;
-    }
-    // 检查规则
-    const [ok, msg] = ruleVerification(from[key]);
-    if (!ok) {
-      message.warning({
-        content: `${msg}`,
-        duration: 3,
-      });
-      return;
-    }
-    data[key] = from[key]['value'];
-  }
-
-  // 发送
-  const hide = message.loading(t('common.loading'), 0);
-  editPtNeConfigData({
-    neType: treeState.neType,
-    paramName: treeState.selectNode.paramName,
-    paramData: data,
-    loc,
-  })
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: t('views.configManage.configParamForm.updateItem', {
-            num: modalState.title,
-          }),
-          duration: 3,
-        });
-        fnActiveConfigNode('#');
-      } else {
-        message.warning({
-          content: t('views.configManage.configParamForm.updateItemErr'),
-          duration: 3,
-        });
-      }
-    })
-    .finally(() => {
-      hide();
-      arrayEditClose();
-    });
-}
-
-/**多列表嵌套行删除单行 */
-function arrayChildDelete(rowIndex: Record<string, any>) {
-  const index = rowIndex.value;
-  const loc = `${arrayChildState.loc}/${index}`;
-  const title = `${arrayChildState.title} Index-${index}`;
-
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.configManage.configParamForm.delItemTip', {
-      num: title,
-    }),
-    onOk() {
-      delPtNeConfigData({
-        neType: treeState.neType,
-        paramName: treeState.selectNode.paramName,
-        loc,
-      }).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('views.configManage.configParamForm.delItemOk', {
-              num: title,
-            }),
-            duration: 2,
-          });
-          arrayEditClose();
-          fnActiveConfigNode('#');
-        } 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 = 'arrayChildAdd';
-  modalState.title = `${arrayChildState.title} ${from.title}`;
-  modalState.key = from.key;
-  modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
-  modalState.visible = true;
-}
-
-/**多列表新增单行确认 */
-function arrayChildAddOk(from: Record<string, any>) {
-  const loc = `${arrayChildState.loc}/${from['index']['value']}`;
-
-  let data: Record<string, any> = {};
-  for (const key in from) {
-    // 子嵌套的不插入
-    if (from[key]['array']) {
-      continue;
-    }
-    // 检查规则
-    const [ok, msg] = ruleVerification(from[key]);
-    if (!ok) {
-      message.warning({
-        content: `${msg}`,
-        duration: 3,
-      });
-      return;
-    }
-    data[key] = from[key]['value'];
-  }
-
-  // 发送
-  const hide = message.loading(t('common.loading'), 0);
-  addPtNeConfigData({
-    neType: treeState.neType,
-    paramName: treeState.selectNode.paramName,
-    paramData: data,
-    loc,
-  })
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success({
-          content: t('views.configManage.configParamForm.addItemOk', {
-            num: modalState.title,
-          }),
-          duration: 3,
-        });
-        fnActiveConfigNode('#');
-      } else {
-        message.warning({
-          content: t('views.configManage.configParamForm.addItemErr'),
-          duration: 3,
-        });
-      }
-    })
-    .finally(() => {
-      hide();
-      arrayEditClose();
-    });
-}
-
-/**多列表编辑行数据初始化 */
-function arrayEditInit(data: Record<string, any>, dataRule: any) {
-  const dataFrom = data.record;
-  const ruleFrom = Object.assign({}, JSON.parse(JSON.stringify(dataRule)));
-  for (const row of ruleFrom.record) {
-    // 子嵌套的不初始
-    if (row.array) {
-      row.value = [];
-      continue;
-    }
-    // 查找项的值
-    const item = dataFrom.find((s: any) => s.name === row.name);
-    if (!item) {
-      continue;
-    }
-    // 可选的
-    row.optional = 'true';
-    // 根据规则类型转值
-    if (['enum', 'int'].includes(row.type)) {
-      row.value = Number(item.value);
-    } else if ('bool' === row.type) {
-      row.value = Boolean(item.value);
-    } else {
-      row.value = item.value;
-    }
-  }
-  ruleFrom.key = data.key;
-  ruleFrom.title = data.title;
-  return ruleFrom;
-}
-
-/**多列表新增行数据初始化 */
-function arrayAddInit(data: any[], dataRule: any) {
-  // 有数据时取得最后的index
-  let dataLastIndex = 0;
-  if (data.length !== 0) {
-    const lastFrom = Object.assign({}, JSON.parse(JSON.stringify(data.at(-1))));
-    if (lastFrom.record.length > 0) {
-      dataLastIndex = parseInt(lastFrom.key);
-      dataLastIndex += 1;
-    }
-  }
-
-  const ruleFrom = Object.assign({}, JSON.parse(JSON.stringify(dataRule)));
-  for (const row of ruleFrom.record) {
-    // 子嵌套的不初始
-    if (row.array) {
-      row.value = [];
-      continue;
-    }
-    // 可选的
-    row.optional = 'true';
-    // index值
-    if (row.name === 'index') {
-      let newIndex = dataLastIndex !== 0 ? dataLastIndex : parseInt(row.value);
-      if (isNaN(newIndex)) {
-        newIndex = 0;
-      }
-      row.value = newIndex;
-      ruleFrom.key = newIndex;
-      ruleFrom.title = `Index-${newIndex}`;
-      continue;
-    }
-    // 根据规则类型转值
-    if (['enum', 'int'].includes(row.type)) {
-      row.value = Number(row.value);
-    }
-    if ('bool' === row.type) {
-      row.value = Boolean(row.value);
-    }
-  }
-  return ruleFrom;
-}
-
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**添加框是否显示 */
@@ -1036,25 +307,67 @@ function fnModalCancel() {
   modalState.data = [];
 }
 
-// 监听表格字段列排序变化关闭展开
-watch(
-  () => arrayState.columnsDnd,
-  () => {
-    arrayEditClose();
-  }
-);
-
 // 监听新增编辑弹窗
 watch(
   () => modalState.visible,
   val => {
     // SMF需要选择配置的UPF id
     if (val && treeState.neType === 'SMF') {
-      initUPFIds();
+      getConfigSMFByUPFIds('001');
     }
   }
 );
 
+const {
+  ptConfigSave,
+  ptConfigReset,
+  ptConfigApply,
+  classState,
+  studentChange,
+  studentSearch,
+} = usePtOptions({ t,treeState });
+
+const { tablePagination, listState, listEdit, listEditClose, listEditOk } =
+  useConfigList({ t, treeState, ruleVerification });
+
+const {
+  arrayState,
+  arrayEdit,
+  arrayEditClose,
+  arrayEditOk,
+  arrayDelete,
+  arrayAdd,
+  arrayAddOk,
+  arrayInitEdit,
+  arrayInitAdd,
+} = useConfigArray({
+  t,
+  treeState,
+  fnActiveConfigNode,
+  ruleVerification,
+  modalState,
+  fnModalCancel,
+});
+
+const {
+  arrayChildState,
+  arrayChildExpand,
+  arrayChildEdit,
+  arrayChildEditOk,
+  arrayChildDelete,
+  arrayChildAdd,
+  arrayChildAddOk,
+} = useConfigArrayChild({
+  t,
+  treeState,
+  fnActiveConfigNode,
+  ruleVerification,
+  modalState,
+  arrayInitEdit,
+  arrayInitAdd,
+  arrayEditClose,
+});
+
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
@@ -1063,7 +376,7 @@ onMounted(() => {
         // 过滤不可用的网元
         neSelectOptions.value = neInfoStore.getNeSelectOtions.filter(
           (item: any) => {
-            return !['OMC','LMF','NEF'].includes(item.value);
+            return !['OMC', 'LMF', 'NEF'].includes(item.value);
           }
         );
         if (neSelectOptions.value.length === 0) {
@@ -1103,20 +416,28 @@ onMounted(() => {
       <a-row :gutter="16">
         <a-col :lg="6" :md="12" :xs="24">
           <a-form-item label="（教师）查看学生" name="neType ">
-            <a-auto-complete
+            <a-select
-              :options="neInfoStore.getNeSelectOtions"
+              v-model:value="classState.student"
-              allow-clear
+              show-search
-              :placeholder="t('views.configManage.license.neTypePlease')"
+              :placeholder="t('common.selectPlease')"
-            />
+              :default-active-first-option="false"
+              :show-arrow="false"
+              :allow-clear="true"
+              :filter-option="false"
+              :not-found-content="null"
+              :options="classState.studentOptions"
+              @search="studentSearch"
+              @change="studentChange"
+            ></a-select>
           </a-form-item>
         </a-col>
         <a-col :lg="6" :md="12" :xs="24">
           <a-form-item>
             <a-space :size="8">
-              <a-button @click="ptSaveConfig(treeState.neType)">
+              <a-button @click="ptConfigSave(treeState.neType)">
                 (管理员)载入网元配置为示例配置
               </a-button>
-              <a-button @click="ptResetConfig(treeState.neType)">
+              <a-button @click="ptConfigReset(treeState.neType)">
                 (学生)重置为班级示例/(教师)重置为系统示例
               </a-button>
               <a-button @click="ptConfigApply(treeState.neType, '0')">
@@ -1570,7 +891,7 @@ onMounted(() => {
                     modalState.from[item.name]['name'] === 'upfId'
                   "
                   v-model:value="modalState.from[item.name]['value']"
-                  :options="optionsUPFIds"
+                  :options="SMFByUPFIdOptions"
                   :disabled="['read-only', 'read', 'ro'].includes(item.access)"
                   :allow-clear="true"
                   style="width: 100%"