fix: 网元信息IP地址输入校验

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

@@ -4,8 +4,9 @@ import { message, Form, Modal } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
-import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
+import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
 import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
 import useDictStore from '@/store/modules/dict';
 const { getDict } = useDictStore();
@@ -114,7 +115,7 @@ let modalState: ModalStateType = reactive({
     ip: '',
     port: 33030,
     pvFlag: 'PNF',
-    rmUid: '4400HX1AMF001',
+    rmUid: '4400HXAMF001',
     neAddress: '',
     dn: '',
     vendorName: '',
@@ -177,7 +178,7 @@ const modalStateFrom = Form.useForm(
     ip: [
       {
         required: true,
-        message: '请输入网元IP地址',
+        validator: modalStateFromEqualIPV4AndIPV6,
       },
     ],
     neName: [
@@ -189,6 +190,28 @@ const modalStateFrom = Form.useForm(
   })
 );
 
+/**表单验证IP地址是否有效 */
+function modalStateFromEqualIPV4AndIPV6(
+  rule: Record<string, any>,
+  value: string,
+  callback: (error?: string) => void
+) {
+  if (!value) {
+    return Promise.reject('请输入网元IP地址');
+  }
+
+  if (value.indexOf('.') === -1 && value.indexOf(':') === -1) {
+    return Promise.reject('请输入有效的IP地址');
+  }
+  if (value.indexOf('.') !== -1 && !regExpIPv4.test(value)) {
+    return Promise.reject('不是有效IPv4地址');
+  }
+  if (value.indexOf(':') !== -1 && !regExpIPv6.test(value)) {
+    return Promise.reject('不是有效IPv6地址');
+  }
+  return Promise.resolve();
+}
+
 /**
  * 对话框弹出显示为 新增或者修改
  * @param editId 网元id, 不传为新增
@@ -471,6 +494,7 @@ onMounted(() => {
               style="width: 100%"
               :min="1"
               :max="65535"
+              :maxlength="5"
               placeholder="<=65535"
             >
               <template #prefix>
@@ -577,11 +601,10 @@ onMounted(() => {
         </a-col>
       </a-row>
 
+      <!-- 主机连接配置 -->
       <a-divider orientation="left">
         {{ t('views.ne.neInfo.hostConfig') }}
       </a-divider>
-
-      <!-- 主机连接配置 -->
       <a-collapse class="collapse" ghost>
         <a-collapse-panel
           v-for="host in modalState.from.hosts"
@@ -607,6 +630,7 @@ onMounted(() => {
                   :min="10"
                   :max="65535"
                   :step="1"
+                  :maxlength="5"
                   style="width: 100%"
                 ></a-input-number>
               </a-form-item>
@@ -619,7 +643,7 @@ onMounted(() => {
                 <a-input
                   v-model:value="host.user"
                   allow-clear
-                  :maxlength="50"
+                  :maxlength="32"
                   :placeholder="t('common.inputPlease')"
                 >
                 </a-input>
@@ -721,6 +745,36 @@ onMounted(() => {
           </a-form-item>
         </a-collapse-panel>
       </a-collapse>
+
+      <!-- OAM配置 -->
+      <a-divider orientation="left"> OAM Config </a-divider>
+      <a-collapse class="collapse" ghost>
+        <a-collapse-panel header="KPI Config">
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item :label="t('views.ne.neHost.addr')">
+                <a-input
+                  allow-clear
+                  :maxlength="128"
+                  :placeholder="t('common.inputPlease')"
+                >
+                </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
+                  :min="10"
+                  :max="65535"
+                  :step="1"
+                  :maxlength="5"
+                  style="width: 100%"
+                ></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-collapse-panel>
+      </a-collapse>
     </a-form>
   </DraggableModal>
 </template>

src/views/ne/neQuickSetup/components/NeInfoConfig.vue

@@ -5,6 +5,7 @@ import { addNeInfo, getNeInfoByTypeAndID, updateNeInfo } from '@/api/ne/neInfo';
 import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import { fnRestStepState, fnToStepName, stepState } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
@@ -50,7 +51,7 @@ let modalState: ModalStateType = reactive({
     ip: '',
     port: 33030,
     pvFlag: 'PNF',
-    rmUid: '0000XX1AMF001',
+    rmUid: '4400HXAMF001',
     neAddress: '',
     dn: '-',
     vendorName: '-',
@@ -107,7 +108,7 @@ const modalStateFrom = Form.useForm(
     ip: [
       {
         required: true,
-        message: '请输入网元IP地址',
+        validator: modalStateFromEqualIPV4AndIPV6,
       },
     ],
     port: [
@@ -119,6 +120,28 @@ const modalStateFrom = Form.useForm(
   })
 );
 
+/**表单验证IP地址是否有效 */
+function modalStateFromEqualIPV4AndIPV6(
+  rule: Record<string, any>,
+  value: string,
+  callback: (error?: string) => void
+) {
+  if (!value) {
+    return Promise.reject('请输入网元IP地址');
+  }
+
+  if(value.indexOf('.') === -1 && value.indexOf(':') === -1) {
+    return Promise.reject('请输入有效的IP地址');
+  } 
+  if (value.indexOf('.') !== -1 && !regExpIPv4.test(value)) {
+    return Promise.reject('不是有效IPv4地址');
+  }
+  if (value.indexOf(':') !== -1 && !regExpIPv6.test(value)) {
+    return Promise.reject('不是有效IPv6地址');
+  }
+  return Promise.resolve();
+}
+
 /**
  * 测试主机连接
  */
@@ -375,7 +398,9 @@ onMounted(() => {
           >
             <a-auto-complete
               v-model:value="modalState.from.neType"
-              :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+              :options="
+                NE_TYPE_LIST.filter(s => s !== 'OMC').map(v => ({ value: v }))
+              "
               @change="fnNeTypeChange"
             >
               <a-input
@@ -459,6 +484,7 @@ onMounted(() => {
               style="width: 100%"
               :min="1"
               :max="65535"
+              :maxlength="5"
               placeholder="<=65535"
             >
               <template #prefix>
@@ -493,6 +519,7 @@ onMounted(() => {
                   allow-clear
                   :maxlength="128"
                   :placeholder="t('common.inputPlease')"
+                  :disabled="true"
                 >
                 </a-input>
               </a-form-item>
@@ -504,6 +531,7 @@ onMounted(() => {
                   :min="10"
                   :max="65535"
                   :step="1"
+                  :maxlength="5"
                   style="width: 100%"
                 ></a-input-number>
               </a-form-item>

src/views/ne/neQuickSetup/components/Start.vue

@@ -3,6 +3,7 @@ import { reactive, onMounted, toRaw } from 'vue';
 import { message, Form, Modal } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import { neHostAuthorizedRSA, neHostCheckInfo } from '@/api/ne/neHost';
 import useDictStore from '@/store/modules/dict';
 import { fnToStepName, stepState } from '../hooks/useStep';
@@ -68,7 +69,7 @@ const checkStateFrom = Form.useForm(
         required: true,
         min: 1,
         max: 128,
-        message: t('views.ne.neHost.addrPlease'),
+        validator: modalStateFromEqualIPV4AndIPV6,
       },
     ],
     port: [
@@ -104,6 +105,28 @@ const checkStateFrom = Form.useForm(
   })
 );
 
+/**表单验证IP地址是否有效 */
+function modalStateFromEqualIPV4AndIPV6(
+  rule: Record<string, any>,
+  value: string,
+  callback: (error?: string) => void
+) {
+  if (!value) {
+    return Promise.reject('请输入网元IP地址');
+  }
+
+  if(value.indexOf('.') === -1 && value.indexOf(':') === -1) {
+    return Promise.reject('请输入有效的IP地址');
+  } 
+  if (value.indexOf('.') !== -1 && !regExpIPv4.test(value)) {
+    return Promise.reject('不是有效IPv4地址');
+  }
+  if (value.indexOf(':') !== -1 && !regExpIPv6.test(value)) {
+    return Promise.reject('不是有效IPv6地址');
+  }
+  return Promise.resolve();
+}
+
 /**测试连接检查信息 */
 function fnCheckInfo() {
   if (state.confirmLoading) return;
@@ -317,6 +340,7 @@ onMounted(() => {
                 :min="10"
                 :max="65535"
                 :step="1"
+                :maxlength="5"
                 style="width: 100%"
               ></a-input-number>
             </a-form-item>
@@ -333,7 +357,7 @@ onMounted(() => {
               <a-input
                 v-model:value="state.from.user"
                 allow-clear
-                :maxlength="50"
+                :maxlength="32"
                 :placeholder="t('common.inputPlease')"
               >
               </a-input>

src/views/system/quick-start/components/NeInfoConfig.vue

@@ -10,6 +10,7 @@ import {
 import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import { fnToStepName } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
@@ -83,7 +84,7 @@ function fnTabCreate() {
       ip: '',
       port: 33030,
       pvFlag: 'PNF',
-      rmUid: `0000XXNew${neId}`,
+      rmUid: `4400HXNew${neId}`,
       neAddress: '',
       dn: '-',
       vendorName: '-',
@@ -214,12 +215,33 @@ function fnNeIPChange(e: any, data: any) {
   }
 }
 
+/**表单验证IP地址是否有效 */
+function modalStateFromEqualIPV4AndIPV6(
+  rule: Record<string, any>,
+  value: string,
+  callback: (error?: string) => void
+) {
+  if (!value) {
+    return Promise.reject('请输入网元IP地址');
+  }
+
+  if (value.indexOf('.') === -1 && value.indexOf(':') === -1) {
+    return Promise.reject('请输入有效的IP地址');
+  }
+  if (value.indexOf('.') !== -1 && !regExpIPv4.test(value)) {
+    return Promise.reject('不是有效IPv4地址');
+  }
+  if (value.indexOf(':') !== -1 && !regExpIPv6.test(value)) {
+    return Promise.reject('不是有效IPv6地址');
+  }
+  return Promise.resolve();
+}
+
 /**保存信息 */
 function fnSaveFinish(pane: any) {
-  console.log('Success:', pane);
   tabState.confirmLoading = true;
   const from = toRaw(pane);
-  from.rmUid = `0000XX${from.neType}${from.neId}`; // 4400HX1AMF001
+  from.rmUid = `4400HX${from.neType}${from.neId}`; // 4400HX1AMF001
   from.neName = `${from.neType}_${from.neId}`; // AMF_001
   const result = from.id ? updateNeInfo(from) : addNeInfo(from);
   const hide = message.loading(t('common.loading'), 0);
@@ -300,6 +322,7 @@ function fnGetList() {
     console.log(res);
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
       for (const item of res.data) {
+        if (item.neType === 'OMC') continue;
         tabState.panes.push({
           key: `${item.neType}@${item.neId}`,
           data: item,
@@ -396,7 +419,11 @@ onMounted(() => {
               >
                 <a-auto-complete
                   v-model:value="pane.data.neType"
-                  :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+                  :options="
+                    NE_TYPE_LIST.filter(s => s !== 'OMC').map(v => ({
+                      value: v,
+                    }))
+                  "
                   @change="v => fnNeTypeChange(v, pane.data)"
                 >
                   <a-input
@@ -453,7 +480,7 @@ onMounted(() => {
                 name="ip"
                 :rules="{
                   required: true,
-                  message: '请输入网元IP地址',
+                  validator: modalStateFromEqualIPV4AndIPV6,
                 }"
               >
                 <a-input
@@ -490,6 +517,7 @@ onMounted(() => {
                   style="width: 100%"
                   :min="1"
                   :max="65535"
+                  :maxlength="5"
                   placeholder="<=65535"
                 >
                   <template #prefix>
@@ -537,6 +565,7 @@ onMounted(() => {
                       :min="10"
                       :max="65535"
                       :step="1"
+                      :maxlength="5"
                       style="width: 100%"
                     ></a-input-number>
                   </a-form-item>
@@ -549,7 +578,7 @@ onMounted(() => {
                     <a-input
                       v-model:value="host.user"
                       allow-clear
-                      :maxlength="50"
+                      :maxlength="32"
                       :placeholder="t('common.inputPlease')"
                     >
                     </a-input>