feat: 配置参数直连数据获取优化

src/api/ne/neConfig.ts

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

src/views/configManage/configParamTreeTable/index.vue

@@ -17,6 +17,13 @@ import useOptions from './hooks/useOptions';
 import useSMFOptions from './hooks/useSMFOptions';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
 import { DataNode } from 'ant-design-vue/lib/tree';
+import {
+  addNeConfigData,
+  delNeConfigData,
+  editNeConfigData,
+  getAllNeConfig,
+  getNeConfigData,
+} from '@/api/ne/neConfig';
 const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
 const { ruleVerification } = useOptions();
@@ -43,7 +50,16 @@ type TreeStateType = {
   /**网元配置 tree */
   data: DataNode[];
   /**选择对应Node一级 tree */
-  selectNode: Record<string, any>;
+  selectNode: {
+    title: string;
+    key: string;
+    // 可选属性数据
+    paramName: string;
+    paramDisplay: string;
+    paramType: string;
+    paramPerms: string[];
+    paramData: Record<string, any>[];
+  };
   /**选择 loading */
   selectLoading: boolean;
 };
@@ -52,29 +68,24 @@ let treeState: TreeStateType = reactive({
   loading: true,
   data: [],
   selectNode: {
-    topDisplay: '' as string,
+    paramName: '',
-    topTag: '' as string,
+    paramDisplay: '',
-    method: [] as string[],
+    paramType: '',
-    //
+    paramPerms: [],
-    title: '' as string,
+    paramData: [],
-    key: '' as string,
+    // 树形节点需要有
-    type: 'list' as 'list' | 'array',
+    title: '',
+    key: '',
   },
   selectLoading: true,
 });
 
 /**查询可选命令列表 */
 function fnSelectConfigNode(_: any, info: any) {
-  const { title, key, method } = info.node;
+  const { key } = info.node;
-  treeState.selectNode.topDisplay = title;
+  if (treeState.selectNode.paramName == key) {
-  treeState.selectNode.topTag = key;
+    return;
-  if (method) {
-    treeState.selectNode.method = method.split(',');
-  } else {
-    treeState.selectNode.method = ['post', 'put', 'delete'];
   }
-  treeState.selectNode.title = title;
-  treeState.selectNode.key = key;
   fnActiveConfigNode(key);
 }
 
@@ -83,26 +94,76 @@ function fnActiveConfigNode(key: string | number) {
   listState.data = [];
   arrayState.data = [];
   treeState.selectLoading = true;
-  if (key !== '#') {
+  if (key === '#') {
-    treeState.selectNode.topTag = key as string;
+    key = treeState.selectNode.paramName;
+  } else {
+    treeState.selectNode.paramName = key as string;
   }
 
-  // 获取数据
+  const param = treeState.data.find(item => item.key === key);
-  const neType = neTypeSelect.value[0];
+  if (!param) {
-  const neId = neTypeSelect.value[1];
+    message.warning({
-  const topTag = treeState.selectNode.topTag;
+      content: t('common.noData'),
-  getParamConfigInfoForm(neType, topTag, neId).then(res => {
+      duration: 3,
-    if (res.code === RESULT_CODE_SUCCESS && res.data.type) {
+    });
+    return;
+  }
+  treeState.selectNode = JSON.parse(JSON.stringify(param));
+
+  // 获取网元端的配置数据
+  getNeConfigData({
+    neType: neTypeSelect.value[0],
+    neId: neTypeSelect.value[1],
+    paramName: treeState.selectNode.paramName,
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
       treeState.selectLoading = false;
-      treeState.selectNode.topTag = topTag;
+      const ruleArr = param.paramData;
-      treeState.selectNode.type = res.data.type;
+      const dataArr = res.data;
-      if (res.data.type === 'list') {
+      if (param.paramType === 'list') {
-        listState.data = res.data.data;
+        // 列表项数据
+        const dataList = [];
+        for (const item of dataArr) {
+          for (const key in item) {
+            // 规则为准
+            for (const rule of ruleArr) {
+              if (rule['name'] === key) {
+                const ruleItem = Object.assign(rule, {
+                  optional: 'true',
+                  value: item[key],
+                });
+                dataList.push(ruleItem);
+                break;
+              }
+            }
+          }
+        }
+        listState.data = dataList;
         listEditClose();
       }
-      if (res.data.type === 'array') {
+      if (param.paramType === 'array') {
-        arrayState.data = res.data.data;
+        // 列表项数据
-        arrayState.dataRule = res.data.dataRule;
+        const dataArray = [];
+        for (const item of dataArr) {
+          const index = item['index'];
+          let record: Record<string, any>[] = [];
+          for (const key in item) {
+            // 规则为准
+            for (const rule of ruleArr) {
+              if (rule['name'] === key) {
+                const ruleItem = Object.assign({ optional: 'true' }, rule, {
+                  value: item[key],
+                });
+                record.push(ruleItem);
+                break;
+              }
+            }
+          }
+          dataArray.push({ title: `Index-${index}`, key: index, record });
+        }
+        arrayState.data = dataArray;
+        // 无数据时，用于新增
+        arrayState.dataRule = { title: `Index-0`, key: 0, record: ruleArr };
 
         // 列表数据
         const columnsData: Record<string, any>[] = [];
@@ -114,7 +175,6 @@ function fnActiveConfigNode(key: string | number) {
           columnsData.push(row);
         }
         arrayState.columnsData = columnsData;
-
         // 列表字段
         const columns: Record<string, any>[] = [];
         for (const rule of arrayState.dataRule.record) {
@@ -142,15 +202,17 @@ function fnActiveConfigNode(key: string | number) {
       }
     } else {
       message.warning({
-        content: t('common.noData'),
+        content: `${param.paramDisplay} ${t(
+          'views.configManage.configParamForm.noConfigData'
+        )}`,
         duration: 3,
       });
     }
   });
 }
 
-/**查询配置Tag标签 */
+/**查询配置可选属性值列表 */
-function fnGetParamConfigTopTab() {
+function fnGetNeConfig() {
   const neType = neTypeSelect.value[0];
   if (!neType) {
     message.warning({
@@ -162,31 +224,33 @@ function fnGetParamConfigTopTab() {
 
   treeState.loading = true;
   // 获取数据
-  getParamConfigTopTab(neType).then(res => {
+  getAllNeConfig(neType).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      treeState.data = res.data.map(item => ({
+      const arr = [];
-        children: undefined,
+      for (const item of res.data) {
-        title: item.topDisplay,
+        let paramPerms: string[] = [];
-        key: item.topTag,
+        if (item.paramPerms) {
-        ...item,
+          paramPerms = item.paramPerms.split(',');
-      }));
+        } else {
+          paramPerms = ['post', 'put', 'delete'];
+        }
+        arr.push({
+          ...item,
+          children: undefined,
+          title: item.paramDisplay,
+          key: item.paramName,
+          paramPerms,
+        });
+      }
+      treeState.data = arr;
       treeState.loading = false;
       // 取首个tag
       if (res.data.length > 0) {
-        const itemOne = res.data[0];
+        const item = JSON.parse(JSON.stringify(treeState.data[0]));
-        treeState.selectNode = {
+        treeState.selectNode = item;
-          title: itemOne.topDisplay,
+        treeState.selectLoading = false;
-          key: itemOne.topTag,
+        fnActiveConfigNode(item.key);
-          type: 'list',
-          ...itemOne,
-        };
-        fnActiveConfigNode(itemOne.topTag);
       }
-    } else {
-      message.warning({
-        content: t('views.configManage.configParamForm.noConfigData'),
-        duration: 3,
-      });
     }
   });
 }
@@ -249,18 +313,14 @@ function listEditOk() {
 
   // 发送
   const hide = message.loading(t('common.loading'), 0);
-  let data = {
+  editNeConfigData({
-    [from['name']]: from['value'],
+    neType: neTypeSelect.value[0],
-  };
+    neId: neTypeSelect.value[1],
-  updateParamConfigInfo(
+    paramName: treeState.selectNode.paramName,
-    'list',
+    paramData: {
-    {
+      [from['name']]: from['value'],
-      neType: neTypeSelect.value[0],
-      neId: neTypeSelect.value[1],
-      topTag: treeState.selectNode.topTag,
     },
-    data
+  })
-  )
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS) {
         message.success({
@@ -270,9 +330,9 @@ function listEditOk() {
           duration: 3,
         });
         // 改变表格数据
-        const item = listState.data.filter(
+        const item = listState.data.find(
           (item: Record<string, any>) => from['name'] === item['name']
-        )[0];
+        );
         if (item) {
           Object.assign(item, listState.editRecord);
         }
@@ -360,7 +420,7 @@ function arrayEdit(rowIndex: Record<string, any>) {
 
   modalState.from = row;
   modalState.type = 'arrayEdit';
-  modalState.title = `${treeState.selectNode.topDisplay} ${from.title}`;
+  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;
@@ -377,8 +437,6 @@ function arrayEditClose() {
 
 /**多列表编辑确认 */
 function arrayEditOk(from: Record<string, any>) {
-  const loc = from['index']['value'];
-  const neType = neTypeSelect.value[0];
   // 遍历提取属性和值
   let data: Record<string, any> = {};
   for (const key in from) {
@@ -400,16 +458,13 @@ function arrayEditOk(from: Record<string, any>) {
 
   // 发送
   const hide = message.loading(t('common.loading'), 0);
-  updateParamConfigInfo(
+  editNeConfigData({
-    'array',
+    neType: neTypeSelect.value[0],
-    {
+    neId: neTypeSelect.value[1],
-      neType: neType,
+    paramName: treeState.selectNode.paramName,
-      neId: neTypeSelect.value[1],
+    paramData: data,
-      topTag: treeState.selectNode.topTag,
+    loc: from['index']['value'],
-      loc,
+  })
-    },
-    data
-  )
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS) {
         message.success({
@@ -434,8 +489,8 @@ function arrayEditOk(from: Record<string, any>) {
 
 /**多列表删除单行 */
 function arrayDelete(rowIndex: Record<string, any>) {
-  const index = rowIndex.value;
+  const loc = rowIndex.value;
-  const title = `${treeState.selectNode.topDisplay} Index-${index}`;
+  const title = `${treeState.selectNode.paramDisplay} Index-${loc}`;
 
   Modal.confirm({
     title: t('common.tipTitle'),
@@ -443,11 +498,11 @@ function arrayDelete(rowIndex: Record<string, any>) {
       num: title,
     }),
     onOk() {
-      delParamConfigInfo({
+      delNeConfigData({
         neType: neTypeSelect.value[0],
         neId: neTypeSelect.value[1],
-        topTag: treeState.selectNode.topTag,
+        paramName: treeState.selectNode.paramName,
-        loc: index,
+        loc: loc,
       }).then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
@@ -484,7 +539,7 @@ function arrayAdd() {
 
   modalState.from = row;
   modalState.type = 'arrayAdd';
-  modalState.title = `${treeState.selectNode.topDisplay} ${from.title}`;
+  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;
@@ -492,8 +547,6 @@ function arrayAdd() {
 
 /**多列表新增单行确认 */
 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) {
@@ -515,15 +568,13 @@ function arrayAddOk(from: Record<string, any>) {
 
   // 发送
   const hide = message.loading(t('common.loading'), 0);
-  addParamConfigInfo(
+  addNeConfigData({
-    {
+    neType: neTypeSelect.value[0],
-      neType: neType,
+    neId: neTypeSelect.value[1],
-      neId: neTypeSelect.value[1],
+    paramName: treeState.selectNode.paramName,
-      topTag: treeState.selectNode.topTag,
+    paramData: data,
-      loc: index,
+    loc: from['index']['value'],
-    },
+  })
-    data
-  )
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS) {
         message.success({
@@ -703,9 +754,7 @@ function arrayChildEdit(rowIndex: Record<string, any>) {
 
 /**多列表嵌套行编辑确认 */
 function arrayChildEditOk(from: Record<string, any>) {
-  const index = from['index']['value'];
+  const loc = `${arrayChildState.loc}/${from['index']['value']}`;
-  const loc = `${arrayChildState.loc}/${index}`;
-  const neType = neTypeSelect.value[0];
 
   let data: Record<string, any> = {};
   for (const key in from) {
@@ -727,16 +776,13 @@ function arrayChildEditOk(from: Record<string, any>) {
 
   // 发送
   const hide = message.loading(t('common.loading'), 0);
-  updateParamConfigInfo(
+  editNeConfigData({
-    'array',
+    neType: neTypeSelect.value[0],
-    {
+    neId: neTypeSelect.value[1],
-      neType: neType,
+    paramName: treeState.selectNode.paramName,
-      neId: neTypeSelect.value[1],
+    paramData: data,
-      topTag: treeState.selectNode.topTag,
+    loc,
-      loc,
+  })
-    },
-    data
-  )
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS) {
         message.success({
@@ -771,10 +817,10 @@ function arrayChildDelete(rowIndex: Record<string, any>) {
       num: title,
     }),
     onOk() {
-      delParamConfigInfo({
+      delNeConfigData({
         neType: neTypeSelect.value[0],
         neId: neTypeSelect.value[1],
-        topTag: treeState.selectNode.topTag,
+        paramName: treeState.selectNode.paramName,
         loc,
       }).then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
@@ -819,8 +865,7 @@ function arrayChildAdd() {
 
 /**多列表新增单行确认 */
 function arrayChildAddOk(from: Record<string, any>) {
-  const index = from['index']['value'];
+  const loc = `${arrayChildState.loc}/${from['index']['value']}`;
-  const loc = `${arrayChildState.loc}/${index}`;
   const neType = neTypeSelect.value[0];
 
   let data: Record<string, any> = {};
@@ -843,15 +888,13 @@ function arrayChildAddOk(from: Record<string, any>) {
 
   // 发送
   const hide = message.loading(t('common.loading'), 0);
-  addParamConfigInfo(
+  addNeConfigData({
-    {
+    neType: neType,
-      neType: neType,
+    neId: neTypeSelect.value[1],
-      neId: neTypeSelect.value[1],
+    paramName: treeState.selectNode.paramName,
-      topTag: treeState.selectNode.topTag,
+    paramData: data,
-      loc,
+    loc,
-    },
+  })
-    data
-  )
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS) {
         message.success({
@@ -1055,7 +1098,7 @@ onMounted(() => {
           const info = neCascaderOptions.value[0].children[0];
           neTypeSelect.value = [info.neType, info.neId];
         }
-        fnGetParamConfigTopTab();
+        fnGetNeConfig();
       }
     } else {
       message.warning({
@@ -1069,6 +1112,32 @@ onMounted(() => {
 
 <template>
   <PageContainer>
+    <a-card
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <a-row :gutter="16">
+        <a-col :lg="6" :md="12" :xs="24">
+          <a-form-item label="（管理员/教师）查看学生" name="neType ">
+            <a-auto-complete
+              :options="neInfoStore.getNeSelectOtions"
+              allow-clear
+              :placeholder="t('views.configManage.license.neTypePlease')"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :xs="24">
+          <a-form-item>
+            <a-space :size="8">
+              <a-button>(管理员/教师)保存当前网元为示例配置</a-button>
+              <a-button>(学生/教师)重置当前网元为示例配置</a-button>
+              <a-button>(学生)申请应用当前网元配置</a-button>
+            </a-space>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-card>
+
     <a-row :gutter="16">
       <a-col
         :lg="6"
@@ -1090,13 +1159,13 @@ onMounted(() => {
                 v-model:value="neTypeSelect"
                 :options="neCascaderOptions"
                 :allow-clear="false"
-                @change="fnGetParamConfigTopTab"
+                @change="fnGetNeConfig"
               />
             </a-form-item>
             <a-form-item name="listeningPort">
               <a-tree
                 :tree-data="treeState.data"
-                :selected-keys="[treeState.selectNode.topTag]"
+                :selected-keys="[treeState.selectNode.paramName]"
                 @select="fnSelectConfigNode"
               >
               </a-tree>
@@ -1119,8 +1188,8 @@ onMounted(() => {
               </template>
             </a-button>
 
-            <a-typography-text strong v-if="treeState.selectNode.topDisplay">
+            <a-typography-text strong v-if="treeState.selectNode.paramDisplay">
-              {{ treeState.selectNode.topDisplay }}
+              {{ treeState.selectNode.paramDisplay }}
             </a-typography-text>
             <a-typography-text type="danger" v-else>
               {{ t('views.configManage.configParamForm.treeSelectTip') }}
@@ -1128,6 +1197,14 @@ onMounted(() => {
           </template>
           <template #extra>
             <a-space :size="8" align="center" v-show="!treeState.selectLoading">
+              <a-tooltip>
+                <template #title>历史记录</template>
+                <a-button type="default" @click.prevent="">
+                  <template #icon>
+                    <BlockOutlined />
+                  </template>
+                </a-button>
+              </a-tooltip>
               <a-tooltip>
                 <template #title>{{ t('common.reloadText') }}</template>
                 <a-button
@@ -1144,7 +1221,7 @@ onMounted(() => {
 
           <!-- 单列表格列表 -->
           <a-table
-            v-if="treeState.selectNode.type === 'list'"
+            v-if="treeState.selectNode.paramType === 'list'"
             class="table"
             row-key="name"
             :size="listState.size"
@@ -1251,11 +1328,11 @@ onMounted(() => {
           </a-table>
 
           <!-- array类型 -->
-          <template v-if="treeState.selectNode.type === 'array'">
+          <template v-if="treeState.selectNode.paramType === 'array'">
             <a-table
               class="table"
               row-key="index"
-              :columns="treeState.selectNode.method.includes('get') ? arrayState.columnsDnd.filter((s:any)=>s.key !== 'index') : arrayState.columnsDnd"
+              :columns="treeState.selectNode.paramPerms.includes('get') ? arrayState.columnsDnd.filter((s:any)=>s.key !== 'index') : arrayState.columnsDnd"
               :data-source="arrayState.columnsData"
               :size="arrayState.size"
               :pagination="tablePagination"
@@ -1272,7 +1349,7 @@ onMounted(() => {
                     type="primary"
                     @click.prevent="arrayAdd()"
                     size="small"
-                    v-if="treeState.selectNode.method.includes('post')"
+                    v-if="treeState.selectNode.paramPerms.includes('post')"
                   >
                     <template #icon> <PlusOutlined /> </template>
                     {{ t('common.addText') }}
@@ -1280,7 +1357,7 @@ onMounted(() => {
                   <TableColumnsDnd
                     type="ghost"
                     :cache-id="treeState.selectNode.key"
-                    :columns="treeState.selectNode.method.includes('get') ? [...arrayState.columns.filter((s:any)=>s.key !== 'index')] : arrayState.columns"
+                    :columns="treeState.selectNode.paramPerms.includes('get') ? [...arrayState.columns.filter((s:any)=>s.key !== 'index')] : arrayState.columns"
                     v-model:columns-dnd="arrayState.columnsDnd"
                   ></TableColumnsDnd>
                 </a-space>
@@ -1291,7 +1368,7 @@ onMounted(() => {
                 <template v-if="column?.key === 'index'">
                   <a-space :size="16" align="center">
                     <a-tooltip
-                      v-if="treeState.selectNode.method.includes('put')"
+                      v-if="treeState.selectNode.paramPerms.includes('put')"
                     >
                       <template #title>{{ t('common.editText') }}</template>
                       <a-button type="link" @click.prevent="arrayEdit(text)">
@@ -1299,7 +1376,7 @@ onMounted(() => {
                       </a-button>
                     </a-tooltip>
                     <a-tooltip
-                      v-if="treeState.selectNode.method.includes('delete')"
+                      v-if="treeState.selectNode.paramPerms.includes('delete')"
                     >
                       <template #title>{{ t('common.deleteText') }}</template>
                       <a-button type="link" @click.prevent="arrayDelete(text)">