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

2024-05-10 14:43:57 +08:00
parent 873a76f48f
commit 207acb3f3d
4 changed files with 152 additions and 17 deletions
--- a/src/views/ne/neInfo/components/EditModal.vue
+++ b/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>
--- a/src/views/ne/neQuickSetup/components/NeInfoConfig.vue
+++ b/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>
--- a/src/views/ne/neQuickSetup/components/Start.vue
+++ b/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>
--- a/src/views/system/quick-start/components/NeInfoConfig.vue
+++ b/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>