fix: 网元信息编辑带主机配置页面

src/views/ne/neInfo/components/EditModal.vue

@@ -93,8 +93,8 @@ let modalState: ModalStateType = reactive({
       {
         hostId: undefined,
         hostType: 'ssh',
-        groupId: '0',
+        groupId: '1',
-        title: '',
+        title: 'SSH_NE_22',
         addr: '',
         port: 22,
         user: 'user',
@@ -107,11 +107,12 @@ let modalState: ModalStateType = reactive({
       {
         hostId: undefined,
         hostType: 'telnet',
-        groupId: '0',
+        groupId: '1',
-        title: '',
+        title: 'Telnet_NE_4100',
         addr: '',
         port: 4100,
         user: 'user',
+        authMode: '0',
         password: 'user',
         remark: '',
       },
@@ -234,10 +235,48 @@ function fnModalCancel() {
   emit('cancel');
 }
 
+/**
+ * 表单修改网元类型
+ */
+function fnNeTypeChange(v: any) {
+  const hostsLen = modalState.from.hosts.length;
+  // 网元默认只含22和4100
+  if (hostsLen === 3 && v !== 'UPF') {
+    modalState.from.hosts.pop();
+  }
+  // UPF标准版本可支持5002
+  if (hostsLen === 2 && v === 'UPF') {
+    modalState.from.hosts.push({
+      hostId: undefined,
+      hostType: 'telnet',
+      groupId: '1',
+      title: 'Telnet_NE_5002',
+      addr: '',
+      port: 5002,
+      user: 'user',
+      authMode: '0',
+      password: 'user',
+      remark: '',
+    });
+  }
+}
+
+/**
+ * 表单修改网元IP
+ */
+function fnNeIPChange(e: any) {
+  const v = e.target.value;
+  if (v.length < 7) return;
+  for (const host of modalState.from.hosts) {
+    host.addr = v;
+  }
+}
+
 /**监听是否显示，初始数据 */
 watch(
   () => props.visible,
   val => {
+    console.log(val);
     if (val) fnModalVisibleByEdit(props.editId);
   }
 );
@@ -289,6 +328,7 @@ onMounted(() => {
             <a-auto-complete
               v-model:value="modalState.from.neType"
               :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+              @change="fnNeTypeChange"
             >
               <a-input
                 allow-clear
@@ -369,8 +409,19 @@ onMounted(() => {
               v-model:value="modalState.from.ip"
               allow-clear
               :maxlength="128"
-              @change=""
+              @change="fnNeIPChange"
-            ></a-input>
+            >
+              <template #prefix>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    <div>
+                      支持IPV4/IPV6,修改改属性会同步变更下方配置的客户端连接地址
+                    </div>
+                  </template>
+                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                </a-tooltip>
+              </template>
+            </a-input>
           </a-form-item>
         </a-col>
         <a-col :lg="12" :md="12" :xs="24">
@@ -412,6 +463,14 @@ onMounted(() => {
           :maxlength="40"
           :placeholder="t('views.configManage.neManage.uidTip')"
         >
+          <template #prefix>
+            <a-tooltip placement="topLeft">
+              <template #title>
+                <div>用于日志、告警等数据资源定位标识符</div>
+              </template>
+              <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+            </a-tooltip>
+          </template>
         </a-input>
       </a-form-item>
 
@@ -425,14 +484,16 @@ onMounted(() => {
               v-model:value="modalState.from.neAddress"
               allow-clear
               :maxlength="64"
-              ><template #prefix>
+            >
+              <template #prefix>
                 <a-tooltip placement="topLeft">
                   <template #title>
                     <div>{{ t('views.configManage.neManage.macTip') }}</div>
                   </template>
                   <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                </a-tooltip> </template
+                </a-tooltip>
-            ></a-input>
+              </template>
+            </a-input>
           </a-form-item>
         </a-col>
         <a-col :lg="12" :md="12" :xs="24">
@@ -476,7 +537,7 @@ onMounted(() => {
 
       <!-- 主机连接配置 -->
       <a-collapse class="collapse" ghost>
-        <a-collapse-panel key="ssh" header="配置SSH">
+        <a-collapse-panel key="host" header="配置主机">
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
@@ -504,51 +565,23 @@ onMounted(() => {
           </a-row>
         </a-collapse-panel>
         <a-collapse-panel
-          :key="`${host.hostType}_${host.title}`"
+          :key="host.title"
-          :header="host.hostType.toUpperCase()"
           v-for="host in modalState.from.hosts"
         >
-          <a-row :gutter="16">
+          <template #header>
-            <a-col :lg="12" :md="12" :xs="24">
+            <div class="collapse-header">
-              <a-form-item
+              <div>{{ `${host.hostType.toUpperCase()} ${host.port}` }}</div>
-                :label="t('views.ne.neHost.hostType')"
+              <a-button
-                name="hostType"
+                size="small"
+                type="primary"
+                shape="round"
+                @click.prevent="fnModalTest"
+                :loading="modalState.confirmLoading"
               >
-                <a-select
+                <template #icon><LinkOutlined /></template>
-                  v-model:value="host.hostType"
+              </a-button>
-                  default-value="ssh"
+            </div>
-                  :options="dict.neHostType"
+          </template>
-                >
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.groupId')" name="groupId">
-                <a-select
-                  v-model:value="modalState.from.groupId"
-                  default-value="0"
-                  :options="dict.neHostGroupId"
-                >
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-
-          <a-form-item
-            :label="t('views.ne.neHost.title')"
-            name="title"
-            v-bind="modalStateFrom.validateInfos.title"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
-          >
-            <a-input
-              v-model:value="modalState.from.title"
-              allow-clear
-              :maxlength="50"
-            >
-            </a-input>
-          </a-form-item>
-
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
@@ -556,18 +589,14 @@ onMounted(() => {
                 name="addr"
                 v-bind="modalStateFrom.validateInfos.addr"
               >
-                <a-input
+                <a-input v-model:value="host.addr" allow-clear :maxlength="50">
-                  v-model:value="modalState.from.addr"
-                  allow-clear
-                  :maxlength="50"
-                >
                 </a-input>
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item :label="t('views.ne.neHost.port')" name="port">
                 <a-input-number
-                  v-model:value="modalState.from.port"
+                  v-model:value="host.port"
                   :min="10"
                   :max="65535"
                   :step="1"
@@ -584,8 +613,7 @@ onMounted(() => {
                 name="user"
                 v-bind="modalStateFrom.validateInfos.user"
               >
-                <a-input v-model:value="modalState.from.user" allow-clear>
+                <a-input v-model:value="host.user" allow-clear> </a-input>
-                </a-input>
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
@@ -594,9 +622,10 @@ onMounted(() => {
                 name="authMode"
               >
                 <a-select
-                  v-model:value="modalState.from.authMode"
+                  v-model:value="host.authMode"
                   default-value="0"
                   :options="dict.neHostAuthMode"
+                  :disabled="host.hostType === 'telnet'"
                 >
                 </a-select>
               </a-form-item>
@@ -604,21 +633,17 @@ onMounted(() => {
           </a-row>
 
           <a-form-item
-            v-if="modalState.from.authMode === '0'"
+            v-if="host.authMode === '0'"
             :label="t('views.ne.neHost.password')"
             name="password"
             :label-col="{ span: 3 }"
             :label-wrap="true"
           >
-            <a-input
+            <a-input-password v-model:value="host.password" :maxlength="128">
-              v-model:value="modalState.from.password"
+            </a-input-password>
-              allow-clear
-              :maxlength="256"
-            >
-            </a-input>
           </a-form-item>
 
-          <template v-if="modalState.from.authMode === '1'">
+          <template v-if="host.authMode === '1'">
             <a-form-item
               :label="t('views.ne.neHost.privateKey')"
               name="privateKey"
@@ -626,7 +651,7 @@ onMounted(() => {
               :label-wrap="true"
             >
               <a-textarea
-                v-model:value="modalState.from.privateKey"
+                v-model:value="host.privateKey"
                 :auto-size="{ minRows: 4, maxRows: 6 }"
                 :maxlength="3000"
                 :show-count="true"
@@ -639,8 +664,11 @@ onMounted(() => {
               :label-col="{ span: 3 }"
               :label-wrap="true"
             >
-              <a-input v-model:value="modalState.from.passPhrase" allow-clear>
+              <a-input-password
-              </a-input>
+                v-model:value="host.passPhrase"
+                :maxlength="128"
+              >
+              </a-input-password>
             </a-form-item>
           </template>
 
@@ -651,8 +679,8 @@ onMounted(() => {
             :label-wrap="true"
           >
             <a-textarea
-              v-model:value="modalState.from.remark"
+              v-model:value="host.remark"
-              :auto-size="{ minRows: 4, maxRows: 6 }"
+              :auto-size="{ minRows: 1, maxRows: 6 }"
               :maxlength="450"
               :show-count="true"
             />
@@ -684,4 +712,10 @@ onMounted(() => {
   padding-left: 0;
   padding-right: 0;
 }
+.collapse-header {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
 </style>

src/views/ne/neInfo/index.vue

@@ -185,7 +185,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
   } else {
     modalState.editId = row.id;
   }
-  modalState.visibleByEdit = true;
+  modalState.visibleByEdit = !modalState.visibleByEdit;
 }
 
 /**