fix: 参数配置Tree树状展开

src/views/configManage/configParamTree copy/index.vue

@@ -737,6 +737,7 @@ function arrayChildDelete(row: Record<string, any>) {
 /**多列表嵌套行新增单行 */
 function arrayChildAdd() {
   const len = tableState.arrayChildData.length;
+  debugger
   let lastItme = {};
   let newIndex = 0;
   // 无数据时生成临时记录
@@ -1044,7 +1045,9 @@ type StateType = {
   arrayChildData: Record<string, any>[];
   /**多列嵌套记录规则 */
   arrayChildDataRule: Record<string, any>;
-  /**多列嵌套新增行记录Index */
+  /**多列嵌套新增行记录Index 查看-2/编辑-1/新增>=0 */
+  arrayChildKey: number;
+  /**多列嵌套新增行记录Index 查看-2/编辑-1/新增>=0 */
   arrayChildNewIndex: number;
   /**多列嵌套编辑行记录 */
   arrayChildEditRecord: Record<string, any>;
@@ -1066,7 +1069,8 @@ let state: StateType = reactive({
   arrayChildTitle: '',
   arrayChildData: [],
   arrayChildDataRule: {},
-  arrayChildNewIndex: -1,
+  arrayChildKey: -1,
+  arrayChildNewIndex: -3,
   arrayChildEditRecord: {},
 });
 
@@ -1173,6 +1177,7 @@ function fnLoadConfigNodeData(treeNode: EventDataNode): Promise<void> {
 function fnSelectConfigNode(_: any, info: any) {
   console.log('fnSelectConfigNode ', info);
   state.editRecord = {};
+  arrayChildExpandClose();
   const node = info.node;
   // array类型的含子节点使用index子项
   if (node.title.indexOf('Index-') === 0) {
@@ -1239,6 +1244,7 @@ function arrayEdit2(record: Record<string, any>[]) {
 /**多列表编辑关闭 */
 function arrayEditClose2() {
   state.editRecord = {};
+  arrayChildExpandClose();
 }
 
 /**多列表编辑确认 */
@@ -1306,38 +1312,45 @@ function arrayChildExpand2(row: Record<string, any>) {
   state.arrayChildData = dataArray;
 
   // 无数据时,需要临时数据用于新增
-  if (dataArray.length === 0) {
+  state.arrayChildDataRule = { title: `Index-0`, key: 0, record: ruleArr };
-    let itemTemp: Record<string, any> = {};
-    for (const rule of ruleArr) {
-      itemTemp[rule.name] = rule;
-    }
-    state.arrayChildDataRule = itemTemp;
-  }
 
   // 设置标题
   state.arrayChildTitle = from['display'];
 }
 
-/**多列表嵌套行编辑 */
+/**多列表关闭展开嵌套行 */
-function arrayChildEdit2(records: Record<string, any>[]) {
+function arrayChildExpandClose() {
-  const row: Record<string, any> = {};
+  state.arrayChildTitle = '';
-  for (const item of records) {
+  state.arrayChildDataRule = {};
-    row[item.name] = Object.assign({}, item);
+  state.arrayChildData = [];
-  }
+  state.arrayChildEditRecord = {};
-  state.arrayChildEditRecord = row;
+  state.arrayChildKey = -1;
+  state.arrayChildNewIndex = -3;
 }
 
 /**多列表嵌套行编辑关闭 */
 function arrayChildEditClose2() {
-  if (state.arrayChildNewIndex !== -1) {
+  if (state.arrayChildNewIndex > -1) {
-    state.arrayChildNewIndex = -1;
+    state.arrayChildData.pop();
   }
+  state.arrayChildKey = -1;
+  state.arrayChildNewIndex = -3;
   state.arrayChildEditRecord = {};
 }
 
+/**多列表嵌套行编辑 */
+function arrayChildEdit2(item: Record<string, any>, index: number) {
+  const row: Record<string, any> = {};
+  for (const r of item.record) {
+    row[r.name] = Object.assign({}, r);
+  }
+  state.arrayChildEditRecord = row;
+  state.arrayChildKey = item.key;
+  state.arrayChildNewIndex = index;
+}
+
 /**多列表嵌套行编辑确认 */
 function arrayChildEditOk2() {
-  debugger;
   const from = toRaw(state.arrayChildEditRecord);
   const loc = `loc/${from['index']['value']}`;
   const neType = neTypeSelect.value[0];
@@ -1357,12 +1370,6 @@ function arrayChildEditOk2() {
       });
       return;
     }
-    // UPF参数不统一
-    // if (neType === 'UPF') {
-    //   data[parseFirstUpper(key)] = from[key]['value'];
-    // } else {
-    //   data[key] = from[key]['value'];
-    // }
     data[key] = from[key]['value'];
   }
 
@@ -1373,11 +1380,19 @@ function arrayChildEditOk2() {
     loc,
   });
   console.log(data);
+
+  message.success({
+    content: ` 成功 Index :${from['index']['value']} `,
+    duration: 3,
+  });
+  //state.arrayChildData.pop();
+  state.arrayChildKey = -1;
+  state.arrayChildNewIndex = -3;
+  state.arrayChildEditRecord = {};
 }
 
 /**多列表嵌套行删除单行 */
 function arrayChildDelete2(key: string) {
-  debugger;
   const loc = `${state.treeSelectNode.key}/${key}`;
   console.log({
     neType: neTypeSelect.value[0],
@@ -1385,11 +1400,17 @@ function arrayChildDelete2(key: string) {
     topTag: state.treeSelectKey,
     loc,
   });
+
+  state.arrayChildData = state.arrayChildData.filter(
+    (item: any) => item.key !== key
+  );
 }
 
 /**多列表嵌套行新增单行 */
 function arrayChildAdd2() {
-  debugger;
+  if (state.arrayChildNewIndex > -1) {
+    state.arrayChildData.pop();
+  }
   const len = state.arrayChildData.length;
   let lastItme = {};
   let newIndex = 0;
@@ -1410,7 +1431,8 @@ function arrayChildAdd2() {
         newIndex = 0;
       }
       row.value = newIndex;
-      state.arrayChildNewIndex = newIndex;
+      from.key = newIndex;
+      from.title = `Index-${newIndex}`;
       continue;
     }
     // 子嵌套的不初始
@@ -1467,14 +1489,14 @@ function arrayChildAdd2() {
     }
   }
 
-  state.arrayChildEditRecord = from;
+  state.arrayChildData.push(from);
+  arrayChildEdit2(from, newIndex);
 }
 
 /**多列表新增单行确认 */
 function arrayChildAddOk2() {
-  debugger;
+  const from = toRaw(state.arrayChildEditRecord);
-  const from = toRaw(tableState.arrayChildEditRecord);
+  const loc = `${state.treeSelectKey}/${from['index']['value']}`;
-  const loc = `${tableState.arrayChildLoc}/${from['index']['value']}`;
   const neType = neTypeSelect.value[0];
 
   let data: Record<string, any> = {};
@@ -1498,10 +1520,19 @@ function arrayChildAddOk2() {
   console.log({
     neType: neType,
     neId: neTypeSelect.value[1],
-    topTag: tabState.tabActiveTopTag,
+    topTag: state.treeSelectKey,
     loc,
   });
   console.log(data);
+
+  message.success({
+    content: ` 成功 Index :${from['index']['value']} `,
+    duration: 3,
+  });
+  //state.arrayChildData.pop();
+  state.arrayChildKey = -1;
+  state.arrayChildNewIndex = -3;
+  state.arrayChildEditRecord = {};
 }
 </script>
 
@@ -1543,10 +1574,7 @@ function arrayChildAddOk2() {
         <!-- 配置参数显示内容 -->
         <a-card :bordered="false" :loading="!state.title">
           <template #title>
-            <a-typography-text strong v-if="state.arrayChildTitle">
+            <a-typography-text strong v-if="state.title">
-              {{ state.arrayChildTitle }}
-            </a-typography-text>
-            <a-typography-text strong v-else-if="state.title">
               {{ state.title }}
             </a-typography-text>
             <a-typography-text type="danger" v-else>
@@ -1569,10 +1597,7 @@ function arrayChildAddOk2() {
             <!-- array类型数据项显示表单项 -->
             <a-space
               :size="8"
-              v-show="
+              v-show="state.treeSelectNode.title.indexOf('Index-') === 0"
-                state.treeSelectNode.title.indexOf('Index-') === 0 &&
-                !state.arrayChildTitle
-              "
             >
               <a-button type="default" @click.prevent="arrayEditClose2">
                 <template #icon> <CloseOutlined /> </template>
@@ -1590,14 +1615,6 @@ function arrayChildAddOk2() {
                 保存
               </a-button>
             </a-space>
-
-            <!-- array类型数据项显示表单项 -->
-            <a-space :size="8" v-show="!!state.arrayChildTitle">
-              <a-button type="default" @click.prevent="arrayEditClose2">
-                <template #icon> <CloseOutlined /> </template>
-                返回
-              </a-button>
-            </a-space>
           </template>
 
           <!-- list类型显示表格列表 -->
@@ -1792,75 +1809,296 @@ function arrayChildAddOk2() {
                   </a-button>
 
                   <div v-else class="editable-cell__text-wrapper">
-                    {{ `${item.value || '&nbsp;' }` }}
+                    {{ `${item.value || '&nbsp;'}` }}
                   </div>
                 </div>
               </a-tooltip>
+
+              <template
+                #extra
+                v-if="
+                  Array.isArray(item.array) &&
+                  item.display === state.arrayChildTitle
+                "
+              >
+                <!-- array类型多列嵌套数据项显示表单项 -->
+                <a-card
+                  bordered
+                  size="small"
+                  :title="state.arrayChildTitle"
+                  v-show="state.arrayChildTitle"
+                >
+                  <!-- 插槽-卡片右侧 -->
+                  <template #extra>
+                    <a-space :size="8">
+                      <a-button
+                        type="primary"
+                        size="small"
+                        @click.prevent="arrayChildAdd2()"
+                      >
+                        <template #icon><PlusOutlined /></template>
+                        {{ t('common.addText') }}
+                      </a-button>
+                      <a-button
+                        danger
+                        type="primary"
+                        size="small"
+                        @click.prevent="arrayChildExpandClose()"
+                      >
+                        <template #icon> <CloseOutlined /> </template>
+                        {{ t('common.close') }}
+                      </a-button>
+                    </a-space>
+                  </template>
+                  <!-- array类型显示提示内容 -->
+                  <a-row :gutter="16" v-for="item in state.arrayChildData">
+                    <a-col :lg="18" :md="18" :xs="24">
+                      <span>{{ item.title }}</span>
+                    </a-col>
+                    <a-col :lg="6" :md="6" :xs="24">
+                      <a-space :size="16">
+                        <a-tooltip>
+                          <template #title>{{ t('common.viewText') }}</template>
+                          <a-button
+                            type="text"
+                            size="small"
+                            @click.prevent="arrayChildEdit2(item, -2)"
+                          >
+                            <template #icon><ProfileOutlined /></template>
+                          </a-button>
+                        </a-tooltip>
+                        <a-tooltip>
+                          <template #title>{{
+                            t('common.deleteText')
+                          }}</template>
+                          <a-button
+                            danger
+                            type="text"
+                            size="small"
+                            @click.prevent="arrayChildDelete2(item.key)"
+                          >
+                            <template #icon><DeleteOutlined /></template>
+                          </a-button>
+                        </a-tooltip>
+                      </a-space>
+                    </a-col>
+                    <a-col :span="24">
+                      <a-card
+                        bordered
+                        size="small"
+                        :title="item.title"
+                        v-if="state.arrayChildKey === item.key"
+                      >
+                        <!-- 插槽-卡片右侧 -->
+                        <template #extra>
+                          <a-space :size="8">
+                            <a-tooltip v-if="state.arrayChildNewIndex === -2">
+                              <template #title>{{
+                                t('common.editText')
+                              }}</template>
+                              <a-button
+                                type="text"
+                                size="small"
+                                @click.prevent="arrayChildEdit2(item, -1)"
+                              >
+                                <template #icon><FormOutlined /></template>
+                              </a-button>
+                            </a-tooltip>
+
+                            <a-tooltip v-if="state.arrayChildNewIndex > -2">
+                              <template #title>{{ t('common.ok') }}</template>
+                              <a-popconfirm
+                                :title="`确认提交${
+                                  state.arrayChildNewIndex === -1
+                                    ? '更新'
+                                    : '新增'
+                                } Index 为 【 ${
+                                  state.arrayChildKey
+                                } 】 的记录吗？`"
+                                placement="bottomLeft"
+                                @confirm="
+                                  state.arrayChildNewIndex === -1
+                                    ? arrayChildEditOk2()
+                                    : arrayChildAddOk2()
+                                "
+                              >
+                                <a-button type="text" size="small">
+                                  <template #icon><CheckOutlined /></template>
+                                </a-button>
+                              </a-popconfirm>
+                            </a-tooltip>
+
+                            <a-tooltip>
+                              <template #title>{{
+                                t('common.close')
+                              }}</template>
+                              <a-button
+                                type="text"
+                                size="small"
+                                @click.prevent="arrayChildEditClose2()"
+                              >
+                                <template #icon><CloseOutlined /></template>
+                              </a-button>
+                            </a-tooltip>
+                          </a-space>
+                        </template>
+
+                        <a-form
+                          class="form"
+                          layout="horizontal"
+                          autocomplete="off"
+                          :validate-on-rule-change="false"
+                          :validateTrigger="[]"
+                        >
+                          <a-form-item
+                            v-for="item in state.arrayChildEditRecord"
+                            :label="item.display"
+                            :name="item.name"
+                            :required="item.optional === 'false'"
+                          >
+                            <a-tooltip placement="topLeft">
+                              <template #title v-if="item.comment">
+                                {{ item.comment }}
+                              </template>
+                              <div>
+                                <div
+                                  v-if="
+                                    !Array.isArray(item.array) &&
+                                    state.arrayChildNewIndex > -2 &&
+                                    state.arrayChildEditRecord[item.name] !==
+                                      undefined
+                                  "
+                                >
+                                  <a-input
+                                    v-if="
+                                      [
+                                        'string',
+                                        'ipv6',
+                                        'ipv4',
+                                        'regex',
+                                      ].includes(item['type'])
+                                    "
+                                    v-model:value="
+                                      state.arrayChildEditRecord[item.name][
+                                        'value'
+                                      ]
+                                    "
+                                    style="width: 100%"
+                                  ></a-input>
+                                  <a-input-number
+                                    v-else-if="item['type'] === 'int'"
+                                    v-model:value="
+                                      state.arrayChildEditRecord[item.name][
+                                        'value'
+                                      ]
+                                    "
+                                    :min="0"
+                                    :max="65535"
+                                    style="width: 100%"
+                                  ></a-input-number>
+                                  <a-switch
+                                    v-else-if="item['type'] === 'bool'"
+                                    v-model:checked="
+                                      state.arrayChildEditRecord[item.name][
+                                        'value'
+                                      ]
+                                    "
+                                    :checked-children="t('common.switch.open')"
+                                    :un-checked-children="
+                                      t('common.switch.shut')
+                                    "
+                                  ></a-switch>
+                                  <a-select
+                                    v-else-if="item['type'] === 'enum'"
+                                    v-model:value="
+                                      state.arrayChildEditRecord[item.name][
+                                        'value'
+                                      ]
+                                    "
+                                    :allow-clear="true"
+                                    style="width: 100%"
+                                  >
+                                    <a-select-option
+                                      :value="+v"
+                                      :key="+v"
+                                      v-for="(k, v) in JSON.parse(
+                                        item['filter']
+                                      )"
+                                    >
+                                      {{ k }}
+                                    </a-select-option>
+                                  </a-select>
+                                </div>
+
+                                <div v-else>
+                                  {{ `${item.value || '&nbsp;'}` }}
+                                </div>
+                              </div>
+                            </a-tooltip>
+                          </a-form-item>
+                        </a-form>
+                      </a-card>
+                    </a-col>
+                  </a-row>
+
+                  <div>{{ state.arrayChildEditRecord }}</div>
+                  <div>{{ state.arrayChildNewIndex }}</div>
+                </a-card>
+              </template>
             </a-form-item>
           </a-form>
 
           <!-- array类型多列嵌套数据项显示表单项 -->
-          <template v-if="state.arrayChildTitle">
+          <a-card
+            bordered
+            size="small"
+            :title="state.arrayChildTitle"
+            v-show="state.arrayChildTitle"
+          >
+            <!-- 插槽-卡片右侧 -->
+            <template #extra>
+              <a-space :size="8">
+                <a-button
+                  type="primary"
+                  size="small"
+                  @click.prevent="arrayChildAdd2()"
+                >
+                  <template #icon><PlusOutlined /></template>
+                  {{ t('common.addText') }}
+                </a-button>
+                <a-button
+                  danger
+                  type="primary"
+                  size="small"
+                  @click.prevent="arrayChildExpandClose()"
+                >
+                  <template #icon> <CloseOutlined /> </template>
+                  {{ t('common.close') }}
+                </a-button>
+              </a-space>
+            </template>
             <!-- array类型显示提示内容 -->
-            <a-typography>
+            <a-row :gutter="16" v-for="item in state.arrayChildData">
-              <a-typography-title :level="3">
+              <a-col :lg="18" :md="18" :xs="24">
-                {{ state.arrayChildTitle }}
+                <span>{{ item.title }}</span>
-              </a-typography-title>
+              </a-col>
-              <a-typography-paragraph>
+              <a-col :lg="6" :md="6" :xs="24">
-                可通过右上角操作当前到 {{ state.arrayChildTitle }} 配置
-                <br />
-                当前存在以下配置项：
-              </a-typography-paragraph>
-              <a-typography-text strong v-for="item in state.arrayChildData">
                 <a-space :size="16">
-                  <div>{{ item.title }}</div>
                   <a-tooltip>
-                    <template #title>新增</template>
+                    <template #title>{{ t('common.viewText') }}</template>
                     <a-button
                       type="text"
-                      class="editable-cell__icon-edit"
                       size="small"
-                      @click.prevent="arrayChildAdd2()"
+                      @click.prevent="arrayChildEdit2(item, -2)"
                     >
-                      <template #icon><PlusOutlined /></template>
+                      <template #icon><ProfileOutlined /></template>
                     </a-button>
                   </a-tooltip>
                   <a-tooltip>
-                    <template #title>提交</template>
+                    <template #title>{{ t('common.deleteText') }}</template>
-                    <a-popconfirm
-                      :title="`确认提交更新 Index 为 【 ${tableState.arrayChildNewIndex} 】 的记录吗？确认提交新增 Index 为 的记录吗？`"
-                      placement="left"
-                      @confirm="
-                        tableState.arrayChildNewIndex === -1
-                          ? arrayChildEditOk2()
-                          : arrayChildAddOk2()
-                      "
-                    >
-                      <a-button
-                        type="text"
-                        class="editable-cell__icon-edit"
-                        size="small"
-                      >
-                        <template #icon><CheckOutlined /></template>
-                      </a-button>
-                    </a-popconfirm>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template #title>取消</template>
                     <a-button
-                      type="text"
-                      class="editable-cell__icon-edit"
-                      size="small"
-                      @click.prevent="arrayChildEditClose2()"
-                    >
-                      <template #icon><CloseOutlined /></template>
-                    </a-button>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template #title>删除</template>
-                    <a-button
-                      type="text"
                       danger
+                      type="text"
                       size="small"
                       @click.prevent="arrayChildDelete2(item.key)"
                     >
@@ -1868,98 +2106,299 @@ function arrayChildAddOk2() {
                     </a-button>
                   </a-tooltip>
                 </a-space>
-              </a-typography-text>
+              </a-col>
-            </a-typography>
+              <a-col :span="24">
+                <a-card
+                  bordered
+                  size="small"
+                  :title="item.title"
+                  v-if="state.arrayChildKey === item.key"
+                >
+                  <!-- 插槽-卡片右侧 -->
+                  <template #extra>
+                    <a-space :size="8">
+                      <a-tooltip>
+                        <template #title>{{ t('common.editText') }}</template>
+                        <a-button
+                          type="text"
+                          size="small"
+                          @click.prevent="arrayChildEdit2(item, -1)"
+                        >
+                          <template #icon><FormOutlined /></template>
+                        </a-button>
+                      </a-tooltip>
 
-            {{ state.arrayChildData }}
+                      <a-tooltip>
+                        <template #title>{{ t('common.ok') }}</template>
+                        <a-popconfirm
+                          :title="`确认提交${
+                            state.arrayChildNewIndex === -1 ? '更新' : '新增'
+                          } Index 为 【 ${state.arrayChildKey} 】 的记录吗？`"
+                          placement="bottomLeft"
+                          @confirm="
+                            state.arrayChildNewIndex === -1
+                              ? arrayChildEditOk2()
+                              : arrayChildAddOk2()
+                          "
+                        >
+                          <a-button type="text" size="small">
+                            <template #icon><CheckOutlined /></template>
+                          </a-button>
+                        </a-popconfirm>
+                      </a-tooltip>
 
-            ====
+                      <a-tooltip>
+                        <template #title>{{ t('common.close') }}</template>
+                        <a-button
+                          type="text"
+                          size="small"
+                          @click.prevent="arrayChildEditClose2()"
+                        >
+                          <template #icon><CloseOutlined /></template>
+                        </a-button>
+                      </a-tooltip>
+                    </a-space>
+                  </template>
 
-            {{ state.arrayChildEditRecord }}
+                  <a-form
-            <a-form
+                    class="form"
-              class="form"
+                    layout="horizontal"
-              layout="horizontal"
+                    autocomplete="off"
-              autocomplete="off"
+                    :validate-on-rule-change="false"
-              :validate-on-rule-change="false"
+                    :validateTrigger="[]"
-              :validateTrigger="[]"
+                  >
-            >
+                    <a-form-item
-              <a-form-item
+                      v-for="item in state.arrayChildEditRecord"
-                v-for="item in state.arrayChildData"
+                      :label="item.display"
-                :label="item.display"
+                      :name="item.name"
-                :name="item.name"
+                      :required="item.optional === 'false'"
-                :required="item.optional === 'false'"
+                    >
-              >
+                      <a-tooltip placement="topLeft">
+                        <template #title v-if="item.comment">
+                          {{ item.comment }}
+                        </template>
+                        <div>
+                          <div
+                            v-if="
+                              !Array.isArray(item.array) &&
+                              state.arrayChildNewIndex > -2 &&
+                              state.arrayChildEditRecord[item.name] !==
+                                undefined
+                            "
+                          >
+                            <a-input
+                              v-if="
+                                ['string', 'ipv6', 'ipv4', 'regex'].includes(
+                                  item['type']
+                                )
+                              "
+                              v-model:value="
+                                state.arrayChildEditRecord[item.name]['value']
+                              "
+                              style="width: 100%"
+                            ></a-input>
+                            <a-input-number
+                              v-else-if="item['type'] === 'int'"
+                              v-model:value="
+                                state.arrayChildEditRecord[item.name]['value']
+                              "
+                              :min="0"
+                              :max="65535"
+                              style="width: 100%"
+                            ></a-input-number>
+                            <a-switch
+                              v-else-if="item['type'] === 'bool'"
+                              v-model:checked="
+                                state.arrayChildEditRecord[item.name]['value']
+                              "
+                              :checked-children="t('common.switch.open')"
+                              :un-checked-children="t('common.switch.shut')"
+                            ></a-switch>
+                            <a-select
+                              v-else-if="item['type'] === 'enum'"
+                              v-model:value="
+                                state.arrayChildEditRecord[item.name]['value']
+                              "
+                              :allow-clear="true"
+                              style="width: 100%"
+                            >
+                              <a-select-option
+                                :value="+v"
+                                :key="+v"
+                                v-for="(k, v) in JSON.parse(item['filter'])"
+                              >
+                                {{ k }}
+                              </a-select-option>
+                            </a-select>
+                          </div>
+
+                          <div v-else>
+                            {{ `${item.value || '&nbsp;'}` }}
+                          </div>
+                        </div>
+                      </a-tooltip>
+                    </a-form-item>
+                  </a-form>
+                </a-card>
+              </a-col>
+            </a-row>
+
+            <div>{{ state.arrayChildEditRecord }}</div>
+            <div>{{ state.arrayChildNewIndex }}</div>
+          </a-card>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-card  :bordered="false"
+      :body-style="{
+        marginBottom: '24px',
+        marginTop: '24px',
+        paddingBottom: 0,
+      }">
+      <a-tabs
+        tab-position="left"
+        size="small"
+        v-model:activeKey="tabState.tabActiveTopTag"
+        @change="fnTabActiveTopTag"
+        destroyInactiveTabPane
+      >
+        <template #leftExtra>
+          <a-form
+            layout="inline"
+            autocomplete="off"
+            style="margin-bottom: 20px"
+          >
+            <a-form-item name="neId ">
+              <a-cascader
+                v-model:value="neTypeSelect"
+                :options="neCascaderOtions"
+                :allow-clear="false"
+                placeholder="请选择网元"
+                @change="fnGetParamConfigNode"
+              />
+            </a-form-item>
+            <a-form-item name="listeningPort">
+              <a-tooltip>
+                <template #title>{{ t('common.reloadText') }}</template>
+                <a-button
+                  type="default"
+                  @click.prevent="fnTabActiveTopTag('#')"
+                >
+                  <template #icon>
+                    <ReloadOutlined />
+                  </template>
+                </a-button>
+              </a-tooltip>
+            </a-form-item>
+          </a-form>
+        </template>
+
+        <a-tab-pane
+          v-for="tab in tabState.tabNames"
+          :key="tab.topTag"
+          :tab="tab.topDisplay"
+        >
+          {{ tab.topDisplay }}
+                <!-- list类型显示表格列表 -->
+                <a-table
+            v-show="state.treeSelectNode.keyType === 'list'"
+            class="table"
+            row-key="name"
+            :columns="listColumns"
+            :data-source="state.treeSelectNode.keyRecordList"
+            size="middle"
+            :pagination="false"
+            :bordered="true"
+            :scroll="{ x: true }"
+          >
+            <template #bodyCell="{ column, text, record }">
+              <template v-if="column.dataIndex === 'value'">
                 <a-tooltip placement="topLeft">
-                  <template #title v-if="item.comment">
+                  <template #title v-if="record.comment">
-                    {{ item.comment }}
+                    {{ record.comment }}
                   </template>
                   <div class="editable-cell">
-                    {{ state.editRecord[item.name] }}
                     <div
-                      v-if="
+                      v-if="state.editRecord['display'] === record['display']"
-                        !Array.isArray(item.array) &&
-                        state.editRecord[item.name] !== undefined
-                      "
                       class="editable-cell__input-wrapper"
                     >
                       <a-input
                         v-if="
                           ['string', 'ipv6', 'ipv4', 'regex'].includes(
-                            item['type']
+                            record['type']
                           )
                         "
-                        v-model:value="state.editRecord[item.name]['value']"
+                        v-model:value="state.editRecord['value']"
                         style="width: 100%"
                       ></a-input>
                       <a-input-number
-                        v-else-if="item['type'] === 'int'"
+                        v-else-if="record['type'] === 'int'"
-                        v-model:value="state.editRecord[item.name]['value']"
+                        v-model:value="state.editRecord['value']"
                         :min="0"
                         :max="65535"
                         style="width: 100%"
                       ></a-input-number>
                       <a-switch
-                        v-else-if="item['type'] === 'bool'"
+                        v-else-if="record['type'] === 'bool'"
-                        v-model:checked="state.editRecord[item.name]['value']"
+                        v-model:checked="state.editRecord['value']"
                         :checked-children="t('common.switch.open')"
                         :un-checked-children="t('common.switch.shut')"
                       ></a-switch>
                       <a-select
-                        v-else-if="item['type'] === 'enum'"
+                        v-else-if="record['type'] === 'enum'"
-                        v-model:value="state.editRecord[item.name]['value']"
+                        v-model:value="state.editRecord['value']"
                         :allow-clear="true"
                         style="width: 100%"
                       >
                         <a-select-option
                           :value="+v"
                           :key="+v"
-                          v-for="(k, v) in JSON.parse(item['filter'])"
+                          v-for="(k, v) in JSON.parse(record['filter'])"
                         >
                           {{ k }}
                         </a-select-option>
                       </a-select>
+
+                      <a-space :size="16" align="center" direction="horizontal">
+                        <a-popconfirm
+                          title="确认更新该属性值吗？"
+                          placement="top"
+                          @confirm="listEditOk2()"
+                        >
+                          <a-button
+                            type="text"
+                            class="editable-cell__icon-edit"
+                          >
+                            <template #icon><CheckOutlined /></template>
+                          </a-button>
+                        </a-popconfirm>
+                        <a-button
+                          type="text"
+                          class="editable-cell__icon-edit"
+                          @click.prevent="listEditClose2()"
+                        >
+                          <template #icon><CloseOutlined /></template>
+                        </a-button>
+                      </a-space>
                     </div>
-
-                    <a-button
-                      type="link"
-                      size="small"
-                      @click.prevent="arrayChildExpand2(item)"
-                      v-else-if="Array.isArray(item.array)"
-                    >
-                      详情
-                    </a-button>
-
                     <div v-else class="editable-cell__text-wrapper">
-                      {{ `${item.value}` }}
+                      {{ `${record.value}` || '&nbsp;' }}
+                      <EditOutlined
+                        class="editable-cell__icon"
+                        v-if="record.access !== 'read'"
+                        @click="listEdit2(record)"
+                      />
                     </div>
                   </div>
                 </a-tooltip>
-              </a-form-item>
+              </template>
-            </a-form>
+            </template>
-          </template>
+          </a-table>
-        </a-card>
+          
-      </a-col>
+        </a-tab-pane>
-    </a-row>
+      </a-tabs>
+    </a-card>
 
     <a-card
       :bordered="false"