From bfc0afdb143fbcf5d9844d591f0564c5a5fa2d4a Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 16 Nov 2023 11:40:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=82=E6=95=B0=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=9B=9B=E4=B8=AA=E7=89=88=E6=9C=AC=E6=8E=92=E7=89=88-=5F-||?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/configManage/configParam/index.vue  |  21 +-
 .../configManage/configParamForm/index.vue    |   2 -
 .../configManage/configParamTree/index.vue    |  39 +-
 .../configParamTreeTable/index.vue            | 747 ++++++------------
 4 files changed, 284 insertions(+), 525 deletions(-)

diff --git a/src/views/configManage/configParam/index.vue b/src/views/configManage/configParam/index.vue
index 2f3c15a3..a07094bd 100644
--- a/src/views/configManage/configParam/index.vue
+++ b/src/views/configManage/configParam/index.vue
@@ -1424,14 +1424,19 @@ onMounted(() => {
                         </a-select-option>
                       </a-select>
                     </div>
-                    <a-button
-                      type="link"
-                      size="small"
-                      @click.prevent="arrayChildExpand(record['index'], text)"
-                      v-else-if="Array.isArray(text.array)"
-                    >
-                      {{ t('common.viewText') }}
-                    </a-button>
+                    <template v-else-if="text.array">
+                      <a-button
+                        type="link"
+                        size="small"
+                        @click.prevent="arrayChildExpand(record['index'], text)"
+                      >
+                        {{ t('views.configManage.configParamForm.arrayMore') }}
+                      </a-button>
+                      <!--特殊字段拓展显示-->
+                      <span v-if="text.name === 'dnnList'">
+                        ({{ text.value.map((s: any) => s.dnn).join() }})
+                      </span>
+                    </template>
                     <div v-else class="editable-cell__text-wrapper">
                       {{ `${text.value}` || '&nbsp;' }}
                     </div>
diff --git a/src/views/configManage/configParamForm/index.vue b/src/views/configManage/configParamForm/index.vue
index 60931955..6a8be1d4 100644
--- a/src/views/configManage/configParamForm/index.vue
+++ b/src/views/configManage/configParamForm/index.vue
@@ -239,7 +239,6 @@ let arrayState: ArrayStateType = reactive({
 
 /**多列表编辑 */
 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);
@@ -521,7 +520,6 @@ function arrayChildExpandClose() {
 
 /**多列表嵌套行编辑 */
 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);
diff --git a/src/views/configManage/configParamTree/index.vue b/src/views/configManage/configParamTree/index.vue
index 78af7cd6..0d03c25c 100644
--- a/src/views/configManage/configParamTree/index.vue
+++ b/src/views/configManage/configParamTree/index.vue
@@ -267,7 +267,6 @@ let arrayState: ArrayStateType = reactive({
 
 /**多列表编辑 */
 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);
@@ -395,7 +394,6 @@ function arrayAdd() {
     row[v.name] = Object.assign({}, v);
   }
 
-  console.log(Array.isArray(from.record), from.record);
   modalState.from = row;
   modalState.type = 'array';
   modalState.title = from.title;
@@ -550,7 +548,6 @@ function arrayChildExpandClose() {
 
 /**多列表嵌套行编辑 */
 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);
@@ -1386,20 +1383,25 @@ onMounted(() => {
                           </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>
+                        <template v-if="item.array">
+                          <a-button
+                            type="link"
+                            size="small"
+                            @click.prevent="arrayChildExpand(data.key, item)"
+                          >
+                            {{
+                              arrayState.newIndex === -1
+                                ? '-'
+                                : t(
+                                    'views.configManage.configParamForm.arrayMore'
+                                  )
+                            }}
+                          </a-button>
+                          <!--特殊字段拓展显示-->
+                          <span v-if="item.name === 'dnnList'">
+                            ({{ item.value.map((s: any) => s.dnn).join() }})
+                          </span>
+                        </template>
 
                         <div v-else>
                           {{ `${item.value}` || '&nbsp;' }}
@@ -1614,7 +1616,7 @@ onMounted(() => {
                                   <a-button
                                     type="link"
                                     size="small"
-                                    v-else-if="Array.isArray(item.array)"
+                                    v-else-if="item.array"
                                   >
                                     {{
                                       arrayChildState.newIndex === -1
@@ -1668,6 +1670,7 @@ onMounted(() => {
           :label="item.display"
           :name="item.name"
           :required="item.optional === 'false'"
+          style="margin-bottom: 2px"
         >
           <a-tooltip placement="topLeft">
             <template #title v-if="item.comment">
diff --git a/src/views/configManage/configParamTreeTable/index.vue b/src/views/configManage/configParamTreeTable/index.vue
index 2bfe0f44..0147b50f 100644
--- a/src/views/configManage/configParamTreeTable/index.vue
+++ b/src/views/configManage/configParamTreeTable/index.vue
@@ -87,6 +87,18 @@ function fnActiveConfigNode(key: string | number) {
       if (res.data.type === 'array') {
         arrayState.data = res.data.data;
         arrayState.dataRule = res.data.dataRule;
+
+        // 列表数据
+        const columnsData: Record<string, any>[] = [];
+        for (const v of arrayState.data) {
+          const row: Record<string, any> = {};
+          for (const item of v.record) {
+            row[item.name] = item;
+          }
+          columnsData.push(row);
+        }
+        arrayState.columnsData = columnsData;
+
         // 列表字段
         const columns: Record<string, any>[] = [];
         for (const rule of arrayState.dataRule.record) {
@@ -97,14 +109,16 @@ function fnActiveConfigNode(key: string | number) {
             width: 5,
           });
         }
+        columns.push({
+          title: t('common.operate'),
+          dataIndex: 'index',
+          key: 'index',
+          align: 'left',
+          fixed: 'right',
+          width: 5,
+        });
         arrayState.columns = columns;
-        arrayState.columns.push({
-            title: t('common.operate'),
-            key: 'index',
-            align: 'left',
-            fixed: 'right',
-            width: 5,
-          });
+
         arrayState.collapseActiveKey = [];
         arrayEditClose();
       }
@@ -265,6 +279,8 @@ type ArrayStateType = {
   size: SizeType;
   /**多列嵌套记录字段 */
   columns: Record<string, any>[];
+  /**多列记录数据 */
+  columnsData: Record<string, any>[];
   /**多列嵌套展开key */
   arrayChildExpandKeys: any[];
 
@@ -285,6 +301,7 @@ let arrayState: ArrayStateType = reactive({
   collapseActiveKey: [],
   size: 'middle',
   columns: [],
+  columnsData: [],
   arrayChildExpandKeys: [],
   data: [],
   dataRule: {},
@@ -294,23 +311,21 @@ let arrayState: ArrayStateType = reactive({
 });
 
 /**多列表编辑 */
-function arrayEdit(item: Record<string, any>, index: number) {
-  console.log(item, index);
+function arrayEdit(rowIndex: Record<string, any>) {
+  const item = arrayState.data.find((s: any) => s.key === rowIndex.value);
+  if (!item) return;
+
   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);
-  }
+  modalState.from = row;
+  modalState.type = 'arrayEdit';
+  modalState.title = `${treeState.selectNode.topDisplay} ${item.title}`;
+  modalState.key = item.key;
+  modalState.data = item.record.filter((v: any) => !Array.isArray(v.array));
+  modalState.visible = true;
 
   // 关闭嵌套
   arrayChildExpandClose();
@@ -318,15 +333,12 @@ function arrayEdit(item: Record<string, any>, index: number) {
 
 /**多列表编辑关闭 */
 function arrayEditClose() {
-  arrayState.editRecord = {};
-  arrayState.newIndex = -3;
-  arrayState.editKey = -1;
-  arrayChildEditClose();
+  arrayChildExpandClose();
+  fnModalCancel();
 }
 
 /**多列表编辑确认 */
-function arrayEditOk() {
-  const from = toRaw(arrayState.editRecord);
+function arrayEditOk(from: Record<string, any>) {
   const loc = from['index']['value'];
   const neType = neTypeSelect.value[0];
   // 遍历提取属性和值
@@ -364,16 +376,14 @@ function arrayEditOk() {
       if (res.code === RESULT_CODE_SUCCESS) {
         message.success({
           content: t('views.configManage.configParamForm.updateItem', {
-            num: loc,
+            num: modalState.title,
           }),
           duration: 3,
         });
         fnActiveConfigNode('#');
       } else {
         message.warning({
-          content: t('views.configManage.configParamForm.updateItemErr', {
-            num: loc,
-          }),
+          content: t('views.configManage.configParamForm.updateItemErr'),
           duration: 3,
         });
       }
@@ -385,8 +395,8 @@ function arrayEditOk() {
 }
 
 /**多列表删除单行 */
-function arrayDelete(row: Record<string, any>) {
-  const index = row.key;
+function arrayDelete(rowIndex: Record<string, any>) {
+  const index = rowIndex.value;
   delParamConfigInfo({
     neType: neTypeSelect.value[0],
     neId: neTypeSelect.value[1],
@@ -396,10 +406,11 @@ function arrayDelete(row: Record<string, any>) {
     if (res.code === RESULT_CODE_SUCCESS) {
       message.success({
         content: t('views.configManage.configParamForm.delItemOk', {
-          num: index,
+          num: `${treeState.selectNode.topDisplay} Index-${index}`,
         }),
         duration: 2,
       });
+      arrayEditClose();
       fnActiveConfigNode('#');
     } else {
       message.error({
@@ -423,13 +434,12 @@ function arrayAdd() {
     row[v.name] = Object.assign({}, v);
   }
 
-  console.log(Array.isArray(from.record), from.record);
   modalState.from = row;
-  modalState.type = 'array';
-  modalState.title = from.title;
+  modalState.type = 'arrayAdd';
+  modalState.title = `${treeState.selectNode.topDisplay} ${from.title}`;
   modalState.key = from.key;
   modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
-  modalState.visibleByAdd = true;
+  modalState.visible = true;
 }
 
 /**多列表新增单行确认 */
@@ -470,7 +480,7 @@ function arrayAddOk(from: Record<string, any>) {
       if (res.code === RESULT_CODE_SUCCESS) {
         message.success({
           content: t('views.configManage.configParamForm.addItemOk', {
-            num: index,
+            num: modalState.title,
           }),
           duration: 3,
         });
@@ -484,7 +494,6 @@ function arrayAddOk(from: Record<string, any>) {
     })
     .finally(() => {
       hide();
-      fnModalCancel();
       arrayEditClose();
     });
 }
@@ -497,12 +506,12 @@ type ArrayChildStateType = {
   loc: string;
   /**面板激活项 */
   collapseActiveKey: string[];
-    /**紧凑型 */
-    size: SizeType;
+  /**紧凑型 */
+  size: SizeType;
   /**多列嵌套记录字段 */
   columns: Record<string, any>[];
-  /**多列嵌套展开key */
-  arrayChildExpandKeys: any[];
+  /**多列记录数据 */
+  columnsData: Record<string, any>[];
 
   /**多列嵌套记录数据 */
   data: Record<string, any>[];
@@ -523,7 +532,7 @@ let arrayChildState: ArrayChildStateType = reactive({
   collapseActiveKey: [],
   size: 'middle',
   columns: [],
-  arrayChildExpandKeys: [],
+  columnsData: [],
   data: [],
   dataRule: {},
   newIndex: -2,
@@ -532,9 +541,18 @@ let arrayChildState: ArrayChildStateType = reactive({
 });
 
 /**多列表展开嵌套行 */
-function arrayChildExpand(key: number | string, row: Record<string, any>) {
-  const loc = key;
+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)) {
@@ -572,6 +590,40 @@ function arrayChildExpand(key: number | string, row: Record<string, any>) {
     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',
+      width: 5,
+    });
+  }
+  columns.push({
+    title: t('common.operate'),
+    dataIndex: 'index',
+    key: 'index',
+    align: 'left',
+    fixed: 'right',
+    width: 5,
+  });
+  arrayChildState.columns = columns;
+
+  // 设置展开key
+  arrayState.arrayChildExpandKeys = [indexRow];
+
   arrayChildState.loc = `${loc}/${from['name']}`;
   arrayChildState.newIndex = -3;
   // 设置展开列表标题
@@ -582,40 +634,30 @@ function arrayChildExpand(key: number | string, row: Record<string, any>) {
 
 /**多列表展开嵌套行 */
 function arrayChildExpandClose() {
-  arrayChildState.title = '';
-  arrayChildEditClose();
+  arrayChildState.loc = '';
+  arrayState.arrayChildExpandKeys = [];
 }
 
 /**多列表嵌套行编辑 */
-function arrayChildEdit(item: Record<string, any>, index: number) {
-  console.log(item, index);
+function arrayChildEdit(rowIndex: Record<string, any>) {
+  const item = arrayChildState.data.find((s: any) => s.key === rowIndex.value);
+  if (!item) return;
+
   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;
+  modalState.from = row;
+  modalState.type = 'arrayChildEdit';
+  modalState.title = `${arrayChildState.title} ${item.title}`;
+  modalState.key = item.key;
+  modalState.data = item.record.filter((v: any) => !Array.isArray(v.array));
+  modalState.visible = true;
 }
 
 /**多列表嵌套行编辑确认 */
-function arrayChildEditOk() {
-  const from = toRaw(arrayChildState.editRecord);
+function arrayChildEditOk(from: Record<string, any>) {
   const index = from['index']['value'];
   const loc = `${arrayChildState.loc}/${index}`;
   const neType = neTypeSelect.value[0];
@@ -654,7 +696,7 @@ function arrayChildEditOk() {
       if (res.code === RESULT_CODE_SUCCESS) {
         message.success({
           content: t('views.configManage.configParamForm.updateItem', {
-            num: index,
+            num: modalState.title,
           }),
           duration: 3,
         });
@@ -668,13 +710,13 @@ function arrayChildEditOk() {
     })
     .finally(() => {
       hide();
-      arrayChildExpandClose();
+      arrayEditClose();
     });
 }
 
 /**多列表嵌套行删除单行 */
-function arrayChildDelete(row: Record<string, any>) {
-  const index = row.key;
+function arrayChildDelete(rowIndex: Record<string, any>) {
+  const index = rowIndex.value;
   const loc = `${arrayChildState.loc}/${index}`;
   delParamConfigInfo({
     neType: neTypeSelect.value[0],
@@ -685,11 +727,11 @@ function arrayChildDelete(row: Record<string, any>) {
     if (res.code === RESULT_CODE_SUCCESS) {
       message.success({
         content: t('views.configManage.configParamForm.delItemOk', {
-          num: index,
+          num: `${arrayChildState.title} Index-${index}`,
         }),
         duration: 2,
       });
-      arrayChildExpandClose();
+      arrayEditClose();
       fnActiveConfigNode('#');
     } else {
       message.error({
@@ -713,11 +755,11 @@ function arrayChildAdd() {
   }
 
   modalState.from = row;
-  modalState.type = 'arrayChild';
-  modalState.title = from.title;
+  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.visibleByAdd = true;
+  modalState.visible = true;
 }
 
 /**多列表新增单行确认 */
@@ -759,7 +801,7 @@ function arrayChildAddOk(from: Record<string, any>) {
       if (res.code === RESULT_CODE_SUCCESS) {
         message.success({
           content: t('views.configManage.configParamForm.addItemOk', {
-            num: index,
+            num: modalState.title,
           }),
           duration: 3,
         });
@@ -773,8 +815,7 @@ function arrayChildAddOk(from: Record<string, any>) {
     })
     .finally(() => {
       hide();
-      fnModalCancel();
-      arrayChildExpandClose();
+      arrayEditClose();
     });
 }
 
@@ -998,7 +1039,7 @@ function ruleVerification(row: Record<string, any>): (string | boolean)[] {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**添加框是否显示 */
-  visibleByAdd: boolean;
+  visible: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -1006,7 +1047,7 @@ type ModalStateType = {
   /**确定按钮 loading */
   confirmLoading: boolean;
   /**项类型 */
-  type: 'array' | 'arrayChild';
+  type: 'arrayAdd' | 'arrayEdit' | 'arrayChildAdd' | 'arrayChildEdit';
   /**项Key */
   key: string | number;
   /**项数据 */
@@ -1015,11 +1056,11 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByAdd: false,
+  visible: false,
   title: 'Item',
   from: {},
   confirmLoading: false,
-  type: 'array',
+  type: 'arrayAdd',
   key: '',
   data: [],
 });
@@ -1030,12 +1071,18 @@ let modalState: ModalStateType = reactive({
  */
 function fnModalOk() {
   const from = toRaw(modalState.from);
-  if (modalState.type === 'array') {
+  if (modalState.type === 'arrayAdd') {
     arrayAddOk(from);
   }
-  if (modalState.type === 'arrayChild') {
+  if (modalState.type === 'arrayEdit') {
+    arrayEditOk(from);
+  }
+  if (modalState.type === 'arrayChildAdd') {
     arrayChildAddOk(from);
   }
+  if (modalState.type === 'arrayChildEdit') {
+    arrayChildEditOk(from);
+  }
 }
 
 /**
@@ -1043,9 +1090,9 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByAdd = false;
+  modalState.visible = false;
   modalState.from = {};
-  modalState.type = 'array';
+  modalState.type = 'arrayAdd';
   modalState.key = '';
   modalState.data = [];
 }
@@ -1260,21 +1307,11 @@ onMounted(() => {
 
           <!-- array类型 -->
           <template v-if="treeState.selectNode.type === 'array'">
-            <!-- 多列新增操作 -->
-            <a-button
-              type="primary"
-              @click.prevent="arrayAdd()"
-              v-if="treeState.selectNode.method !== 'get'"
-            >
-              <template #icon><PlusOutlined /></template>
-              {{ t('common.addText') }}
-            </a-button>
-
             <a-table
               class="table"
               row-key="index"
-              :columns="arrayState.columns"
-              :data-source="arrayState.data"
+              :columns="treeState.selectNode.method === 'get' ? arrayState.columns.filter((s:any)=>s.key !== 'index') :arrayState.columns"
+              :data-source="arrayState.columnsData"
               :size="arrayState.size"
               :pagination="false"
               :bordered="true"
@@ -1282,425 +1319,140 @@ onMounted(() => {
               :show-expand-column="false"
               v-model:expanded-row-keys="arrayState.arrayChildExpandKeys"
             >
+              <!-- 多列新增操作 -->
               <template #title v-if="treeState.selectNode.method !== 'get'">
-                <a-button type="primary" @click.prevent="arrayAdd" size="small">
+                <a-button
+                  type="primary"
+                  @click.prevent="arrayAdd()"
+                  size="small"
+                >
                   <template #icon> <PlusOutlined /> </template>
                   {{ t('common.addText') }}
                 </a-button>
               </template>
-              <template #bodyCell="{ column, record }">
-                {{ column }} == {{ record.title }}
-            
-              </template> 
-            </a-table>
 
-            <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="treeState.selectNode.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') }}
+              <!-- 多列数据渲染 -->
+              <template #bodyCell="{ column, text, record }">
+                <template v-if="column.key === 'index'">
+                  <a-space :size="16" align="center">
+                    <a-tooltip>
+                      <template #title>{{ t('common.editText') }}</template>
+                      <a-button type="link" @click.prevent="arrayEdit(text)">
+                        <template #icon><FormOutlined /></template>
                       </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-tooltip>
+                    <a-tooltip>
+                      <template #title>{{ t('common.deleteText') }}</template>
+                      <a-button type="link" @click.prevent="arrayDelete(text)">
+                        <template #icon><DeleteOutlined /></template>
                       </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-tooltip>
                   </a-space>
                 </template>
-
-                <!-- 多列数据渲染 -->
-                <a-form
-                  class="form"
-                  layout="horizontal"
-                  autocomplete="off"
-                  :validate-on-rule-change="false"
-                  :validateTrigger="[]"
-                  :no-style="true"
-                >
-                  <a-form-item
-                    v-for="item in data.record"
-                    :label="item.display"
-                    :name="item.name"
-                    :required="item.optional === 'false'"
-                    style="margin-bottom: 2px"
-                  >
-                    <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>
-
+                <template v-else>
+                  <a-tooltip placement="topLeft">
+                    <template #title v-if="text.comment">
+                      {{ text.comment }}
+                    </template>
+                    <div class="editable-cell">
+                      <template v-if="text.array">
                         <a-button
                           type="link"
                           size="small"
-                          @click.prevent="arrayChildExpand(data.key, item)"
-                          v-else-if="Array.isArray(item.array)"
+                          @click.prevent="
+                            arrayChildExpand(record['index'], text)
+                          "
                         >
                           {{
-                            arrayState.newIndex === -1
-                              ? '-'
-                              : t(
-                                  'views.configManage.configParamForm.arrayMore'
-                                )
+                            t('views.configManage.configParamForm.arrayMore')
                           }}
                         </a-button>
+                        <!--特殊字段拓展显示-->
+                        <span v-if="text.name === 'dnnList'">
+                          ({{ text.value.map((s: any) => s.dnn).join() }})
+                        </span>
+                      </template>
 
-                        <div v-else>
-                          {{ `${item.value}` || '&nbsp;' }}
-                        </div>
+                      <div v-else class="editable-cell__text-wrapper">
+                        {{ `${text.value}` || '&nbsp;' }}
                       </div>
-                    </a-tooltip>
+                    </div>
+                  </a-tooltip>
+                </template>
+              </template>
 
-                    <!-- 多列嵌套类型 -->
-                    <template
-                      #extra
-                      v-if="
-                        Array.isArray(item.array) &&
-                        item.display === arrayChildState.title
-                      "
+              <!-- 多列嵌套类型 -->
+              <template #expandedRowRender>
+                <a-table
+                  class="table"
+                  row-key="index"
+                  :columns="arrayChildState.columns"
+                  :data-source="arrayChildState.columnsData"
+                  :size="arrayChildState.size"
+                  :pagination="false"
+                  :bordered="true"
+                  :scroll="{
+                    x: arrayChildState.columns.length * 200,
+                    y: 450,
+                  }"
+                >
+                  <template #title>
+                    <a-button
+                      type="primary"
+                      @click.prevent="arrayChildAdd"
+                      size="small"
                     >
-                      <!-- 多列嵌套新增操作 -->
-                      <a-space
-                        :size="16"
-                        v-if="treeState.selectNode.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="treeState.selectNode.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="[]"
-                            :no-style="true"
+                      <template #icon> <PlusOutlined /> </template>
+                      {{ t('common.addText') }} {{ arrayChildState.title }}
+                    </a-button>
+                  </template>
+                  <template #bodyCell="{ column, text, record }">
+                    <template v-if="column.key === 'index'">
+                      <a-space :size="8" align="center">
+                        <a-tooltip>
+                          <template #title>{{ t('common.editText') }}</template>
+                          <a-button
+                            type="link"
+                            @click.prevent="arrayChildEdit(text)"
                           >
-                            <a-form-item
-                              v-for="item in cdata.record"
-                              :label="item.display"
-                              :name="item.name"
-                              :required="item.optional === 'false'"
-                              style="margin-bottom: 2px"
-                            >
-                              <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 #icon><FormOutlined /></template>
+                          </a-button>
+                        </a-tooltip>
+                        <a-tooltip>
+                          <template #title>{{
+                            t('common.deleteText')
+                          }}</template>
+                          <a-button
+                            type="link"
+                            @click.prevent="arrayChildDelete(text)"
+                          >
+                            <template #icon><DeleteOutlined /></template>
+                          </a-button>
+                        </a-tooltip>
+                      </a-space>
                     </template>
-                  </a-form-item>
-                </a-form>
-              </a-collapse-panel>
-            </a-collapse>
+                    <template v-else>
+                      <a-tooltip placement="topLeft">
+                        <template #title v-if="text.comment">
+                          {{ text.comment }}
+                        </template>
+                        <div class="editable-cell">
+                          <a-button type="link" size="small" v-if="text.array">
+                            {{
+                              t('views.configManage.configParamForm.arrayMore')
+                            }}
+                          </a-button>
+
+                          <div v-else>
+                            {{ `${text.value || '&nbsp;'}` }}
+                          </div>
+                        </div>
+                      </a-tooltip>
+                    </template>
+                  </template>
+                </a-table>
+              </template>
+            </a-table>
           </template>
         </a-card>
       </a-col>
@@ -1712,7 +1464,7 @@ onMounted(() => {
       :body-style="{ maxHeight: '650px', 'overflow-y': 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByAdd"
+      :visible="modalState.visible"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -1730,6 +1482,7 @@ onMounted(() => {
           :label="item.display"
           :name="item.name"
           :required="item.optional === 'false'"
+          style="margin-bottom: 2px"
         >
           <a-tooltip placement="topLeft">
             <template #title v-if="item.comment">