feat: 网元配置多网元同时配置HA功能

src/views/ne/neConfig/components/CheckSyncNe/index.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { computed, nextTick, reactive, watch } from 'vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+
+const emit = defineEmits(['province', 'update:province', 'update:checks']);
+const props = defineProps({
+  /**
+   * 可选类型下的网元列表 neSelectOptions
+   */
+  selects: {
+    type: Array<any>,
+    required: true,
+  },
+  /**
+   * 选择区域
+   */
+  province: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 选择勾选的同步网元neId
+   */
+  checks: {
+    type: Array<string>,
+    default: () => [],
+  },
+});
+
+/**表格字段列勾选状态 */
+const state = reactive<{
+  indeterminate: boolean;
+  /**是否全选 */
+  checkAll: boolean;
+  /**勾选列表 */
+  checks: string[];
+}>({
+  indeterminate: false,
+  checkAll: true,
+  checks: props.checks,
+});
+
+watch(
+  () => props.checks,
+  val => {
+    state.checks = val;
+  }
+);
+
+/**列全选操作 */
+function fnCheckAllChange(e: any) {
+  state.indeterminate = false;
+  state.checks = [];
+  const checked = e.target.checked;
+  if (checked) {
+    const group = selectGroup.value;
+    const arr = group[props.province];
+    for (const v of arr) {
+      if (v.disabled) {
+        continue;
+      }
+      state.checks.push(`${v.neId}`);
+    }
+  }
+  emit('update:checks', state.checks);
+}
+
+/**列勾选字段变化 */
+function fnUpdateCheck(_: any) {
+  // 同区域全选
+  const selects: string[] = [];
+  const group = selectGroup.value;
+  const arr = group[props.province];
+  for (const v of arr) {
+    if (v.disabled) {
+      continue;
+    }
+    selects.push(`${v.neId}`);
+  }
+  // 判断是否全选
+  const len = state.checks.length;
+  state.indeterminate = !!len && len < selects.length;
+  state.checkAll = len === selects.length;
+  emit('update:checks', state.checks);
+}
+
+/**
+ * 选择的网元分组
+ */
+const selectGroup = computed(() => {
+  const group: Record<string, any> = {};
+  for (const element of props.selects) {
+    const key = element['province'];
+    if (group[key]) {
+      group[key].push(element);
+    } else {
+      group[key] = [element];
+    }
+  }
+  return group;
+});
+
+/**
+ * 选择的网元分组
+ */
+function fnProvinceCheck(province: string) {
+  emit('update:province', province);
+  nextTick(() => {
+    fnCheckAllChange({ target: { checked: true } });
+  }).finally(() => {
+    emit('province', province);
+  });
+}
+</script>
+
+<template>
+  <a-tooltip placement="topRight">
+    <template #title>
+      {{ t('views.ne.neConfig.checkSync.tip') }}
+    </template>
+    <a-popover trigger="click" placement="bottomRight">
+      <template #title>
+        <div class="title">
+          <a-checkbox
+            v-model:checked="state.checkAll"
+            :indeterminate="state.indeterminate"
+            @change="fnCheckAllChange"
+          >
+            {{ t('views.ne.neConfig.checkSync.title') }}
+          </a-checkbox>
+        </div>
+      </template>
+      <template #content>
+        <a-checkbox-group
+          v-model:value="state.checks"
+          @change="fnUpdateCheck"
+          style="width: 200px; max-height: 450px; overflow-y: auto"
+        >
+          <template v-for="(v, k) in selectGroup" :key="k">
+            <div class="item-title">
+              <span> {{ k }} </span>
+              <a-button size="small" type="dashed" @click="fnProvinceCheck(k)">
+                {{ t('views.ne.neConfig.checkSync.selectProvince') }}
+              </a-button>
+            </div>
+            <div class="item" v-for="i in v">
+              <a-checkbox
+                :value="i.neId"
+                :disabled="i.disabled || k !== province"
+              >
+                {{ i.neName }}
+              </a-checkbox>
+            </div>
+            <a-divider style="margin: 0"> </a-divider>
+          </template>
+        </a-checkbox-group>
+      </template>
+      <a-tag
+        :color="state.checks.length > 0 ? 'processing' : 'warning'"
+        style="cursor: pointer"
+      >
+        <template #icon> <SyncOutlined /> </template>
+        {{ t('views.ne.neConfig.checkSync.sync') }}
+      </a-tag>
+    </a-popover>
+  </a-tooltip>
+</template>
+
+<style lang="less" scoped>
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  margin-left: 4px;
+}
+.item-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 4px;
+}
+.item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 4px;
+}
+</style>

src/views/ne/neConfig/hooks/useConfigArray.ts

@@ -10,13 +10,14 @@ import { reactive, watch } from 'vue';
 
 /**
  * 参数配置array类型
- * @param param 父级传入 { t, treeState, neTypeSelect, fnActiveConfigNode, ruleVerification, modalState, fnModalCancel}
+ * @param param 父级传入 { t, treeState, neTypeSelect, neIdSelect, fnActiveConfigNode, ruleVerification, modalState, fnModalCancel}
  * @returns
  */
 export default function useConfigArray({
   t,
   treeState,
   neTypeSelect,
+  neIdSelect,
   fnActiveConfigNode,
   ruleVerification,
   modalState,
@@ -130,8 +131,10 @@ export default function useConfigArray({
       data[key] = from[key]['value'];
     }
 
-    // 发送
+    // 请求
-    const hide = message.loading(t('common.loading'), 0);
+    const reqArr = [];
+    if (neTypeSelect.value[1] !== 'SYNC') {
+      reqArr.push(
         editNeConfigData({
           neType: neTypeSelect.value[0],
           neId: neTypeSelect.value[1],
@@ -139,20 +142,50 @@ export default function useConfigArray({
           paramData: data,
           loc: loc,
         })
-      .then(res => {
+      );
-        if (res.code === RESULT_CODE_SUCCESS) {
+    } else {
+      for (const neId of neIdSelect.value) {
+        reqArr.push(
+          editNeConfigData({
+            neType: neTypeSelect.value[0],
+            neId: neId,
+            paramName: treeState.selectNode.paramName,
+            paramData: data,
+            loc: loc,
+          })
+        );
+      }
+    }
+    // 无请求提示
+    if (reqArr.length === 0) {
+      message.warning({
+        content: t('views.ne.neConfig.neIdSyncPleace'),
+        duration: 3,
+      });
+      arrayEditClose();
+      return;
+    }
+
+    const hide = message.loading(t('common.loading'), 0);
+    Promise.allSettled(reqArr)
+      .then(resArr => {
+        const rejected = resArr.find(res => res.status === 'rejected');
+        if (rejected) {
+          message.warning({
+            content: t('views.ne.neConfig.updateItemErr'),
+            duration: 3,
+          });
+        } else {
           message.success({
             content: t('views.ne.neConfig.updateItem', {
               num: modalState.title,
             }),
             duration: 3,
           });
+        }
+        const fulfilled = resArr.find(res => res.status === 'fulfilled');
+        if (fulfilled) {
           fnActiveConfigNode('#');
-        } else {
-          message.warning({
-            content: t('views.ne.neConfig.updateItemErr'),
-            duration: 3,
-          });
         }
       })
       .finally(() => {
@@ -172,27 +205,64 @@ export default function useConfigArray({
         num: title,
       }),
       onOk() {
+        // 请求
+        const reqArr = [];
+        if (neTypeSelect.value[1] !== 'SYNC') {
+          reqArr.push(
             delNeConfigData({
               neType: neTypeSelect.value[0],
               neId: neTypeSelect.value[1],
               paramName: treeState.selectNode.paramName,
               loc: loc,
-        }).then(res => {
+            })
-          if (res.code === RESULT_CODE_SUCCESS) {
+          );
+        } else {
+          for (const neId of neIdSelect.value) {
+            reqArr.push(
+              delNeConfigData({
+                neType: neTypeSelect.value[0],
+                neId: neId,
+                paramName: treeState.selectNode.paramName,
+                loc: loc,
+              })
+            );
+          }
+        }
+        // 无请求提示
+        if (reqArr.length === 0) {
+          message.warning({
+            content: t('views.ne.neConfig.neIdSyncPleace'),
+            duration: 3,
+          });
+          arrayEditClose();
+          return;
+        }
+
+        const hide = message.loading(t('common.loading'), 0);
+        Promise.allSettled(reqArr)
+          .then(resArr => {
+            const rejected = resArr.find(res => res.status === 'rejected');
+            if (rejected) {
+              message.error({
+                content: `${rejected.reason}`,
+                duration: 2,
+              });
+            } else {
               message.success({
                 content: t('views.ne.neConfig.delItemOk', {
                   num: title,
                 }),
                 duration: 2,
               });
-            arrayEditClose();
-            fnActiveConfigNode('#');
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 2,
-            });
             }
+            const fulfilled = resArr.find(res => res.status === 'fulfilled');
+            if (fulfilled) {
+              fnActiveConfigNode('#');
+            }
+          })
+          .finally(() => {
+            hide();
+            arrayEditClose();
           });
       },
     });
@@ -264,8 +334,10 @@ export default function useConfigArray({
       data[key] = from[key]['value'];
     }
 
-    // 发送
+    // 请求
-    const hide = message.loading(t('common.loading'), 0);
+    const reqArr = [];
+    if (neTypeSelect.value[1] !== 'SYNC') {
+      reqArr.push(
         addNeConfigData({
           neType: neTypeSelect.value[0],
           neId: neTypeSelect.value[1],
@@ -273,20 +345,50 @@ export default function useConfigArray({
           paramData: data,
           loc: `${from['index']['value']}`,
         })
-      .then(res => {
+      );
-        if (res.code === RESULT_CODE_SUCCESS) {
+    } else {
+      for (const neId of neIdSelect.value) {
+        reqArr.push(
+          addNeConfigData({
+            neType: neTypeSelect.value[0],
+            neId: neId,
+            paramName: treeState.selectNode.paramName,
+            paramData: data,
+            loc: `${from['index']['value']}`,
+          })
+        );
+      }
+    }
+    // 无请求提示
+    if (reqArr.length === 0) {
+      message.warning({
+        content: t('views.ne.neConfig.neIdSyncPleace'),
+        duration: 3,
+      });
+      arrayEditClose();
+      return;
+    }
+
+    const hide = message.loading(t('common.loading'), 0);
+    Promise.allSettled(reqArr)
+      .then(resArr => {
+        const rejected = resArr.find(res => res.status === 'rejected');
+        if (rejected) {
+          message.warning({
+            content: t('views.ne.neConfig.addItemErr'),
+            duration: 3,
+          });
+        } else {
           message.success({
             content: t('views.ne.neConfig.addItemOk', {
               num: modalState.title,
             }),
             duration: 3,
           });
+        }
+        const fulfilled = resArr.find(res => res.status === 'fulfilled');
+        if (fulfilled) {
           fnActiveConfigNode('#');
-        } else {
-          message.warning({
-            content: t('views.ne.neConfig.addItemErr'),
-            duration: 3,
-          });
         }
       })
       .finally(() => {

src/views/ne/neConfig/hooks/useConfigArrayChild.ts

@@ -10,13 +10,14 @@ import { nextTick, reactive } from 'vue';
 
 /**
  * 参数配置array类型的嵌套array
- * @param param 父级传入 { t, treeState, neTypeSelect, fnActiveConfigNode, ruleVerification, modalState, arrayState, arrayInitEdit, arrayInitAdd, arrayEditClose}
+ * @param param 父级传入 { t, treeState, neTypeSelect, neIdSelect, fnActiveConfigNode, ruleVerification, modalState, arrayState, arrayInitEdit, arrayInitAdd, arrayEditClose}
  * @returns
  */
 export default function useConfigArrayChild({
   t,
   treeState,
   neTypeSelect,
+  neIdSelect,
   fnActiveConfigNode,
   ruleVerification,
   modalState,
@@ -198,8 +199,10 @@ export default function useConfigArrayChild({
       data[key] = from[key]['value'];
     }
 
-    // 发送
+    // 请求
-    const hide = message.loading(t('common.loading'), 0);
+    const reqArr = [];
+    if (neTypeSelect.value[1] !== 'SYNC') {
+      reqArr.push(
         editNeConfigData({
           neType: neTypeSelect.value[0],
           neId: neTypeSelect.value[1],
@@ -207,20 +210,50 @@ export default function useConfigArrayChild({
           paramData: data,
           loc,
         })
-      .then(res => {
+      );
-        if (res.code === RESULT_CODE_SUCCESS) {
+    } else {
+      for (const neId of neIdSelect.value) {
+        reqArr.push(
+          editNeConfigData({
+            neType: neTypeSelect.value[0],
+            neId: neId,
+            paramName: treeState.selectNode.paramName,
+            paramData: data,
+            loc,
+          })
+        );
+      }
+    }
+    // 无请求提示
+    if (reqArr.length === 0) {
+      message.warning({
+        content: t('views.ne.neConfig.neIdSyncPleace'),
+        duration: 3,
+      });
+      arrayEditClose();
+      return;
+    }
+
+    const hide = message.loading(t('common.loading'), 0);
+    Promise.allSettled(reqArr)
+      .then(resArr => {
+        const rejected = resArr.find(res => res.status === 'rejected');
+        if (rejected) {
+          message.warning({
+            content: t('views.ne.neConfig.updateItemErr'),
+            duration: 3,
+          });
+        } else {
           message.success({
             content: t('views.ne.neConfig.updateItem', {
               num: modalState.title,
             }),
             duration: 3,
           });
+        }
+        const fulfilled = resArr.find(res => res.status === 'fulfilled');
+        if (fulfilled) {
           fnActiveConfigNode('#');
-        } else {
-          message.warning({
-            content: t('views.ne.neConfig.updateItemErr'),
-            duration: 3,
-          });
         }
       })
       .finally(() => {
@@ -241,27 +274,64 @@ export default function useConfigArrayChild({
         num: title,
       }),
       onOk() {
+        // 请求
+        const reqArr = [];
+        if (neTypeSelect.value[1] !== 'SYNC') {
+          reqArr.push(
             delNeConfigData({
               neType: neTypeSelect.value[0],
               neId: neTypeSelect.value[1],
               paramName: treeState.selectNode.paramName,
               loc,
-        }).then(res => {
+            })
-          if (res.code === RESULT_CODE_SUCCESS) {
+          );
+        } else {
+          for (const neId of neIdSelect.value) {
+            reqArr.push(
+              delNeConfigData({
+                neType: neTypeSelect.value[0],
+                neId: neId,
+                paramName: treeState.selectNode.paramName,
+                loc,
+              })
+            );
+          }
+        }
+        // 无请求提示
+        if (reqArr.length === 0) {
+          message.warning({
+            content: t('views.ne.neConfig.neIdSyncPleace'),
+            duration: 3,
+          });
+          arrayEditClose();
+          return;
+        }
+
+        const hide = message.loading(t('common.loading'), 0);
+        Promise.allSettled(reqArr)
+          .then(resArr => {
+            const rejected = resArr.find(res => res.status === 'rejected');
+            if (rejected) {
+              message.error({
+                content: `${rejected.reason}`,
+                duration: 2,
+              });
+            } else {
               message.success({
                 content: t('views.ne.neConfig.delItemOk', {
                   num: title,
                 }),
                 duration: 2,
               });
-            arrayEditClose();
-            fnActiveConfigNode('#');
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 2,
-            });
             }
+            const fulfilled = resArr.find(res => res.status === 'fulfilled');
+            if (fulfilled) {
+              fnActiveConfigNode('#');
+            }
+          })
+          .finally(() => {
+            hide();
+            arrayEditClose();
           });
       },
     });
@@ -309,8 +379,10 @@ export default function useConfigArrayChild({
       data[key] = from[key]['value'];
     }
 
-    // 发送
+    // 请求
-    const hide = message.loading(t('common.loading'), 0);
+    const reqArr = [];
+    if (neTypeSelect.value[1] !== 'SYNC') {
+      reqArr.push(
         addNeConfigData({
           neType: neTypeSelect.value[0],
           neId: neTypeSelect.value[1],
@@ -318,20 +390,50 @@ export default function useConfigArrayChild({
           paramData: data,
           loc,
         })
-      .then(res => {
+      );
-        if (res.code === RESULT_CODE_SUCCESS) {
+    } else {
+      for (const neId of neIdSelect.value) {
+        reqArr.push(
+          addNeConfigData({
+            neType: neTypeSelect.value[0],
+            neId: neId,
+            paramName: treeState.selectNode.paramName,
+            paramData: data,
+            loc,
+          })
+        );
+      }
+    }
+    // 无请求提示
+    if (reqArr.length === 0) {
+      message.warning({
+        content: t('views.ne.neConfig.neIdSyncPleace'),
+        duration: 3,
+      });
+      arrayEditClose();
+      return;
+    }
+
+    const hide = message.loading(t('common.loading'), 0);
+    Promise.allSettled(reqArr)
+      .then(resArr => {
+        const rejected = resArr.find(res => res.status === 'rejected');
+        if (rejected) {
+          message.warning({
+            content: t('views.ne.neConfig.addItemErr'),
+            duration: 3,
+          });
+        } else {
           message.success({
             content: t('views.ne.neConfig.addItemOk', {
               num: modalState.title,
             }),
             duration: 3,
           });
+        }
+        const fulfilled = resArr.find(res => res.status === 'fulfilled');
+        if (fulfilled) {
           fnActiveConfigNode('#');
-        } else {
-          message.warning({
-            content: t('views.ne.neConfig.addItemErr'),
-            duration: 3,
-          });
         }
       })
       .finally(() => {

src/views/ne/neConfig/hooks/useConfigList.ts

@@ -6,13 +6,14 @@ import { reactive, toRaw } from 'vue';
 
 /**
  * list类型参数处理
- * @param param 父级传入 {t, treeState, neTypeSelect, ruleVerification}
+ * @param param 父级传入 {t, treeState, neTypeSelect, neIdSelect, ruleVerification}
  * @returns
  */
 export default function useConfigList({
   t,
   treeState,
   neTypeSelect,
+  neIdSelect,
   ruleVerification,
 }: any) {
   /**单列表状态类型 */
@@ -83,9 +84,10 @@ export default function useConfigList({
       return;
     }
 
-    // 发送
+    // 请求
-    listState.confirmLoading = true;
+    const reqArr = [];
-    const hide = message.loading(t('common.loading'), 0);
+    if (neTypeSelect.value[1] !== 'SYNC') {
+      reqArr.push(
         editNeConfigData({
           neType: neTypeSelect.value[0],
           neId: neTypeSelect.value[1],
@@ -94,14 +96,52 @@ export default function useConfigList({
             [from['name']]: from['value'],
           },
         })
-      .then(res => {
+      );
-        if (res.code === RESULT_CODE_SUCCESS) {
+    } else {
+      for (const neId of neIdSelect.value) {
+        reqArr.push(
+          editNeConfigData({
+            neType: neTypeSelect.value[0],
+            neId: neId,
+            paramName: treeState.selectNode.paramName,
+            paramData: {
+              [from['name']]: from['value'],
+            },
+          })
+        );
+      }
+    }
+    // 无请求提示
+    if (reqArr.length === 0) {
+      message.warning({
+        content: t('views.ne.neConfig.neIdSyncPleace'),
+        duration: 3,
+      });
+      listState.confirmLoading = false;
+      listState.editRecord = {};
+      return;
+    }
+
+    listState.confirmLoading = true;
+    const hide = message.loading(t('common.loading'), 0);
+    Promise.allSettled(reqArr)
+      .then(resArr => {
+        const rejected = resArr.find(res => res.status === 'rejected');
+        if (rejected) {
+          message.warning({
+            content: t('views.ne.neConfig.updateValueErr'),
+            duration: 3,
+          });
+        } else {
           message.success({
             content: t('views.ne.neConfig.updateValue', {
               num: from['display'],
             }),
             duration: 3,
           });
+        }
+        const fulfilled = resArr.find(res => res.status === 'fulfilled');
+        if (fulfilled) {
           // 改变表格数据
           const item = listState.data.find(
             (item: Record<string, any>) => from['name'] === item['name']
@@ -109,11 +149,6 @@ export default function useConfigList({
           if (item) {
             Object.assign(item, listState.editRecord);
           }
-        } else {
-          message.warning({
-            content: t('views.ne.neConfig.updateValueErr'),
-            duration: 3,
-          });
         }
       })
       .finally(() => {

src/views/ne/neConfig/index.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw, watch } from 'vue';
+import {
+  reactive,
+  ref,
+  onMounted,
+  toRaw,
+  watch,
+  nextTick,
+  computed,
+} from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { ProModal } from 'antdv-pro-modal';
 import { message } from 'ant-design-vue/es';
 import { DataNode } from 'ant-design-vue/es/tree';
 import useI18n from '@/hooks/useI18n';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
+import CheckSyncNe from './components/CheckSyncNe/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useOptions from './hooks/useOptions';
@@ -19,11 +28,79 @@ const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
   t,
 });
 
-/**网元类型_多neId */
+/**网元类型 type,[](type,id) */
 let neCascaderOptions = ref<Record<string, any>[]>([]);
-
+/**网元类型 [](type,id) */
+let neSelectOptions = ref<Record<string, any>[]>([]);
 /**网元类型选择 type,id */
 let neTypeSelect = ref<string[]>(['', '']);
+/**网元类型选择 id */
+let neIdSelect = ref<string[]>([]);
+let neTypeSelectStatus = ref(true);
+let neTypeSelectProvince = ref('-');
+/**网元类型neType选择 */
+async function fnSelectNeType(_: any, info: any) {
+  if (!info) return;
+  await fnGetNeConfig(info.value);
+  if (treeState.data.length === 0) {
+    message.warning({
+      content: `${t('views.ne.neConfig.noConfigData')}`,
+      duration: 3,
+    });
+    treeState.selectLoading = true; 
+    neIdSelect.value = [];
+    return;
+  }
+
+  neTypeSelect.value[0] = info.value;
+  neTypeSelect.value[1] = 'SYNC';
+  treeState.selectLoading = true;
+  neTypeSelectStatus.value = true;
+  neIdSelect.value = [];
+  // 检查下级网元是否可用
+  if (Array.isArray(info.children) && info.children.length > 0) {
+    neSelectOptions.value = info.children.concat();
+    for (let index = 0; index < neSelectOptions.value.length; index++) {
+      const v = neSelectOptions.value[index];
+      const res = await getNeConfigData({
+        neType: v.neType,
+        neId: v.neId,
+        paramName: `${treeState.data[0].key}`,
+      });
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        neSelectOptions.value[index].disabled = !res.data.length;
+        // 初始区域
+        if (neIdSelect.value.length === 0) {
+          neTypeSelectProvince.value = v.province;
+        }
+        // 同区域内添加
+        if (neTypeSelectProvince.value === v.province) {
+          neIdSelect.value.push(v.neId);
+        }
+      } else {
+        neSelectOptions.value[index].disabled = true;
+      }
+    }
+  }
+  fnActiveConfigNode(treeState.data[0].key);
+  neTypeSelectStatus.value = false;
+}
+/**网元类型neId选择 */
+function fnSelectNeId(_: any, info: any) {
+  if (!info) {
+    neTypeSelect.value[1] = 'SYNC';
+  } else {
+    neTypeSelect.value[1] = info.neId;
+  }
+  fnActiveConfigNode(treeState.data[0].key);
+}
+/**网元服务地区选择 */
+function fnSelectProvince(province: string) {
+  // neTypeSelectProvince.value = province;
+  nextTick(() => {
+    fnActiveConfigNode(treeState.data[0].key);
+  });
+}
 
 /**左侧导航是否可收起 */
 let collapsible = ref<boolean>(true);
@@ -49,6 +126,7 @@ type TreeStateType = {
     paramType: string;
     paramPerms: string[];
     paramData: Record<string, any>[];
+    visible: string;
   };
   /**选择 loading */
   selectLoading: boolean;
@@ -63,6 +141,7 @@ let treeState: TreeStateType = reactive({
     paramType: '',
     paramPerms: [],
     paramData: [],
+    visible: 'public',
     // 树形节点需要有
     title: '',
     key: '',
@@ -100,22 +179,134 @@ function fnActiveConfigNode(key: string | number) {
   }
   treeState.selectNode = JSON.parse(JSON.stringify(param));
 
+  let neId = neTypeSelect.value[1];
+  // 无neId时取首个可连接的
+  if (neId === 'SYNC') {
+    const oneNeId = neIdSelect.value[0];
+    if (oneNeId) {
+      neId = oneNeId;
+    } else {
+      return;
+    }
+  }
+
   // 获取网元端的配置数据
-  getNeConfigData({
+  fnGetNeConfigData(neTypeSelect.value[0], neId, key);
-    neType: neTypeSelect.value[0],
+}
-    neId: neTypeSelect.value[1],
+
-    paramName: key,
+/**
-  }).then(res => {
+ * 查询配置可选属性值列表
+ * neTypeSelect.value[0]
+ */
+async function fnGetNeConfig(neType: string) {
+  if (!neType) {
+    message.warning({
+      content: t('views.ne.neConfig.neTypePleace'),
+      duration: 3,
+    });
+    return;
+  }
+
+  treeState.loading = true;
+  // 获取数据
+  const res = await getAllNeConfig(neType);
   if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      const ruleArr = param.paramData;
+    const arr = [];
+    for (const v of res.data) {
+      const item = JSON.parse(JSON.stringify(v));
+      // 规则项
+      let paramData: Record<string, string>[] = [];
+      for (let index = 0; index < item.paramData.length; index++) {
+        const element = item.paramData[index];
+        if (!element['visible']) {
+          element['visible'] = 'public';
+        }
+        paramData.push(element);
+      }
+      // 权限控制
+      let paramPerms: string[] = [];
+      if (item.paramPerms) {
+        paramPerms = item.paramPerms.split(',');
+      } else {
+        paramPerms = ['post', 'put', 'delete'];
+      }
+      arr.push({
+        children: undefined,
+        title: item.paramDisplay,
+        key: item.paramName,
+        paramName: item.paramName,
+        paramDisplay: item.paramDisplay,
+        paramType: item.paramType,
+        paramPerms: paramPerms,
+        paramData: paramData,
+        visible: item.visible,
+      });
+    }
+    treeState.data = arr;
+    treeState.loading = false;
+  } else {
+    treeState.data = [];
+    neTypeSelectStatus.value = false;
+  }
+}
+
+/**过滤可见项 */
+const treeStateData = computed(() => {
+  // 公共
+  if (neTypeSelect.value[1] === 'SYNC') {
+    return treeState.data.filter(item => item.visible === 'public');
+  }
+  // 具体网元
+  const arr: DataNode[] = [];
+  for (const item of treeState.data) {
+    if (item.visible === 'self') {
+      arr.push(item);
+    } else if (item.paramType === 'list') {
+      for (let index = 0; index < item.paramData.length; index++) {
+        const element = item.paramData[index];
+        if (element['visible'] === 'self') {
+          arr.push(item);
+          break;
+        }
+      }
+    }
+  }
+  return arr;
+});
+
+/**
+ * 查询配置属性值数据
+ * paramName = treeState.data[0].key
+ */
+function fnGetNeConfigData(
+  neType: string,
+  neId: string,
+  paramName: string | number
+) {
+  const param = treeState.selectNode;
+  // 获取网元端的配置数据
+  getNeConfigData({ neType, neId, paramName }).then(res => {
+    // 数据处理
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      const ruleArr: Record<string, any>[] = JSON.parse(
+        JSON.stringify(param.paramData)
+      );
       const dataArr = res.data;
       if (param.paramType === 'list') {
+        // 过滤可见规则项
+        let ruleArrFilter: Record<string, any>[] = [];
+        if (neTypeSelect.value[1] === 'SYNC') {
+          ruleArrFilter = ruleArr.filter(item => item['visible'] === 'public');
+        } else {
+          ruleArrFilter = ruleArr.filter(item => item['visible'] === 'self');
+        }
         // 列表项数据
         const dataList = [];
         for (const item of dataArr) {
           for (const key in item) {
             // 规则为准
-            for (const rule of ruleArr) {
+            for (const rule of ruleArrFilter) {
+              // 取到对应规则key设置值
               if (rule['name'] === key) {
                 const ruleItem = Object.assign(rule, {
                   optional: 'true',
@@ -190,64 +381,19 @@ function fnActiveConfigNode(key: string | number) {
         tablePagination.current = 1;
         arrayEditClose();
       }
+      // 有数据关闭loading
       setTimeout(() => {
         treeState.selectLoading = false;
       }, 300);
     } else {
       message.warning({
-        content: `${param.paramDisplay} ${t(
+        content: `${param.paramDisplay} ${t('views.ne.neConfig.noConfigData')}`,
-          'views.configManage.configParamForm.noConfigData'
-        )}`,
         duration: 3,
       });
     }
   });
 }
 
-/**查询配置可选属性值列表 */
-function fnGetNeConfig() {
-  const neType = neTypeSelect.value[0];
-  if (!neType) {
-    message.warning({
-      content: t('views.configManage.configParamForm.neTypePleace'),
-      duration: 3,
-    });
-    return;
-  }
-
-  treeState.loading = true;
-  // 获取数据
-  getAllNeConfig(neType).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      const arr = [];
-      for (const item of res.data) {
-        let paramPerms: string[] = [];
-        if (item.paramPerms) {
-          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 item = JSON.parse(JSON.stringify(treeState.data[0]));
-        treeState.selectNode = item;
-        treeState.selectLoading = false;
-        fnActiveConfigNode(item.key);
-      }
-    }
-  });
-}
-
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**添加框是否显示 */
@@ -321,7 +467,7 @@ watch(
 );
 
 const { tablePagination, listState, listEdit, listEditClose, listEditOk } =
-  useConfigList({ t, treeState, neTypeSelect, ruleVerification });
+  useConfigList({ t, treeState, neTypeSelect, neIdSelect, ruleVerification });
 
 const {
   arrayState,
@@ -337,6 +483,7 @@ const {
   t,
   treeState,
   neTypeSelect,
+  neIdSelect,
   fnActiveConfigNode,
   ruleVerification,
   modalState,
@@ -355,6 +502,7 @@ const {
   t,
   treeState,
   neTypeSelect,
+  neIdSelect,
   fnActiveConfigNode,
   ruleVerification,
   modalState,
@@ -385,13 +533,16 @@ onMounted(() => {
         // 默认选择AMF
         const item = neCascaderOptions.value.find(s => s.value === 'AMF');
         if (item && item.children) {
-          const info = item.children[0];
+          neSelectOptions.value = item.children.concat();
-          neTypeSelect.value = [info.neType, info.neId];
+          fnSelectNeType(null, item);
+          // const info = item.children[0];
+          // neTypeSelect.value = [info.neType, info.neId];
         } else {
-          const info = neCascaderOptions.value[0].children[0];
+          neSelectOptions.value = neCascaderOptions.value[0].children.concat();
-          neTypeSelect.value = [info.neType, info.neId];
+          fnSelectNeType(null, neCascaderOptions.value[0]);
+          // const info = neCascaderOptions.value[0].children[0];
+          // neTypeSelect.value = [info.neType, info.neId];
         }
-        fnGetNeConfig();
       }
     } else {
       message.warning({
@@ -416,20 +567,35 @@ onMounted(() => {
         <!-- 网元类型 -->
         <a-card size="small" :bordered="false" :loading="treeState.loading">
           <template #title>
-            {{ t('views.configManage.configParamForm.treeTitle') }}
+            {{ t('views.ne.neConfig.treeTitle') }}
           </template>
           <a-form layout="vertical" autocomplete="off">
-            <a-form-item name="neId ">
+            <a-form-item name="neTypeSelect ">
-              <a-cascader
+              <a-input-group compact>
-                v-model:value="neTypeSelect"
+                <a-select
+                  :disabled="neTypeSelectStatus"
+                  :value="neTypeSelect[0]"
                   :options="neCascaderOptions"
                   :allow-clear="false"
-                @change="fnGetNeConfig"
+                  @change="fnSelectNeType"
-              />
+                  style="width: 40%"
+                >
+                </a-select>
+                <a-select
+                  :disabled="treeState.selectLoading"
+                  :value="neTypeSelect[1]"
+                  :options="neSelectOptions"
+                  :allow-clear="true"
+                  @change="fnSelectNeId"
+                  style="width: 60%"
+                >
+                </a-select>
+              </a-input-group>
             </a-form-item>
-            <a-form-item name="listeningPort">
+            <a-form-item name="treeStateData">
               <a-tree
-                :tree-data="treeState.data"
+                :disabled="neTypeSelectStatus"
+                :tree-data="treeStateData"
                 :selected-keys="[treeState.selectNode.paramName]"
                 @select="fnSelectConfigNode"
               >
@@ -461,12 +627,19 @@ onMounted(() => {
               {{ treeState.selectNode.paramDisplay }}
             </a-typography-text>
             <a-typography-text type="danger" v-else>
-              {{ t('views.configManage.configParamForm.treeSelectTip') }}
+              {{ t('views.ne.neConfig.treeSelectTip') }}
             </a-typography-text>
           </template>
           <template #extra>
             <a-space :size="8" align="center" v-show="!treeState.selectLoading">
-              <a-tooltip>
+              <CheckSyncNe
+                v-if="neTypeSelect[1] === 'SYNC'"
+                :selects="neSelectOptions"
+                v-model:checks="neIdSelect"
+                v-model:province="neTypeSelectProvince"
+                @province="fnSelectProvince"
+              ></CheckSyncNe>
+              <a-tooltip placement="topRight">
                 <template #title>{{ t('common.reloadText') }}</template>
                 <a-button
                   type="default"
@@ -549,10 +722,9 @@ onMounted(() => {
                           <template #title> {{ t('common.ok') }} </template>
                           <a-popconfirm
                             :title="
-                              t(
+                              t('views.ne.neConfig.editOkTip', {
-                                'views.configManage.configParamForm.editOkTip',
+                                num: record['display'],
-                                { num: record['display'] }
+                              })
-                              )
                             "
                             placement="topRight"
                             :disabled="listState.confirmLoading"
@@ -610,7 +782,7 @@ onMounted(() => {
           </a-table>
 
           <!-- array类型 -->
-          <template v-if="treeState.selectNode.paramType === 'array'">
+          <template v-else-if="treeState.selectNode.paramType === 'array'">
             <a-table
               class="table"
               row-key="index"
@@ -689,9 +861,7 @@ onMounted(() => {
                           "
                         >
                           <template #icon><BarsOutlined /></template>
-                          {{
+                          {{ t('views.ne.neConfig.arrayMore') }}
-                            t('views.configManage.configParamForm.arrayMore')
-                          }}
                         </a-button>
                         <!--特殊字段拓展显示-->
                         <span
@@ -792,11 +962,7 @@ onMounted(() => {
                           <template v-if="text.array">
                             <a-button type="default" size="small">
                               <template #icon><BarsOutlined /></template>
-                              {{
+                              {{ t('views.ne.neConfig.arrayMore') }}
-                                t(
-                                  'views.configManage.configParamForm.arrayMore'
-                                )
-                              }}
                             </a-button>
                           </template>
 
@@ -816,6 +982,10 @@ onMounted(() => {
               </template>
             </a-table>
           </template>
+
+          <template v-else>
+            <a-alert type="warning" show-icon message="No Data" />
+          </template>
         </a-card>
       </a-col>
     </a-row>