Merge remote-tracking branch 'origin/main' into lichang

src/views/configManage/configParamTreeTable/hooks/useOptions.ts

@@ -0,0 +1,157 @@
+import useI18n from '@/hooks/useI18n';
+import { regExpIPv4, regExpIPv6, validURL } from '@/utils/regular-utils';
+
+export default function useOptions() {
+  const { t } = useI18n();
+
+  /**规则校验 */
+  function ruleVerification(row: Record<string, any>): (string | boolean)[] {
+    let result = [true, ''];
+    const type = row.type;
+    const value = row.value;
+    const filter = row.filter;
+    const display = row.display;
+
+    // 子嵌套的不检查
+    if (row.array) {
+      return result;
+    }
+
+    // 可选的同时没有值不检查
+    if (row.optional === 'true' && !value) {
+      return result;
+    }
+    switch (type) {
+      case 'int':
+        if (filter && filter.indexOf('~') !== -1) {
+          const filterArr = filter.split('~');
+          const minInt = parseInt(filterArr[0]);
+          const maxInt = parseInt(filterArr[1]);
+          const valueInt = parseInt(value);
+          if (valueInt < minInt || valueInt > maxInt) {
+            return [
+              false,
+              t('views.configManage.configParamForm.requireInt', {
+                display,
+                filter,
+              }),
+            ];
+          }
+        }
+        break;
+      case 'ipv4':
+        if (!regExpIPv4.test(value)) {
+          return [
+            false,
+            t('views.configManage.configParamForm.requireIpv4', { display }),
+          ];
+        }
+        break;
+      case 'ipv6':
+        if (!regExpIPv6.test(value)) {
+          return [
+            false,
+            t('views.configManage.configParamForm.requireIpv6', { display }),
+          ];
+        }
+        break;
+      case 'enum':
+        if (filter && filter.indexOf('{') === 1) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          if (!Object.keys(filterJson).includes(`${value}`)) {
+            return [
+              false,
+              t('views.configManage.configParamForm.requireEnum', { display }),
+            ];
+          }
+        }
+        break;
+      case 'bool':
+        if (filter && filter.indexOf('{') === 1) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          if (!Object.values(filterJson).includes(`${value}`)) {
+            return [
+              false,
+              t('views.configManage.configParamForm.requireBool', { display }),
+            ];
+          }
+        }
+        break;
+      case 'string':
+        // 字符串长度判断
+        if (filter && filter.indexOf('~') !== -1) {
+          try {
+            const filterArr = filter.split('~');
+            let rule = new RegExp(
+              '^\\S{' + filterArr[0] + ',' + filterArr[1] + '}$'
+            );
+            if (!rule.test(value)) {
+              return [
+                false,
+                t('views.configManage.configParamForm.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        // 字符串http判断
+        if (value.startsWith('http')) {
+          try {
+            if (!validURL(value)) {
+              return [
+                false,
+                t('views.configManage.configParamForm.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+
+        break;
+      case 'regex':
+        if (filter) {
+          try {
+            let regex = new RegExp(filter);
+            if (!regex.test(value)) {
+              return [
+                false,
+                t('views.configManage.configParamForm.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        break;
+
+      default:
+        return [
+          false,
+          t('views.configManage.configParamForm.requireUn', { display }),
+        ];
+    }
+    return result;
+  }
+
+  return { ruleVerification };
+}

src/views/configManage/configParamTreeTable/hooks/useSMFOptions.ts

@@ -0,0 +1,22 @@
+import { getParamConfigInfo } from '@/api/configManage/configParam';
+import { ref } from 'vue';
+
+export default function useSMFOptions() {
+  /**upfId可选择 */
+  const optionsUPFIds = ref<{ value: string; label: string }[]>([]);
+
+  /**初始加载upfId */
+  function initUPFIds() {
+    getParamConfigInfo('smf', 'upfConfig', '001').then(res => {
+      optionsUPFIds.value = [];
+      for (const s of res.data) {
+        optionsUPFIds.value.push({
+          value: s.id,
+          label: s.id,
+        });
+      }
+    });
+  }
+
+  return { initUPFIds, optionsUPFIds };
+}

src/views/configManage/configParamTreeTable/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, watch, toRaw, nextTick } from 'vue';
+import { reactive, ref, onMounted, watchEffect, toRaw, nextTick } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { Modal, message } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
@@ -13,11 +13,14 @@ import {
   addParamConfigInfo,
 } from '@/api/configManage/configParam';
 import useNeInfoStore from '@/store/modules/neinfo';
-import { regExpIPv4, regExpIPv6, validURL } from '@/utils/regular-utils';
+import useOptions from './hooks/useOptions';
+import useSMFOptions from './hooks/useSMFOptions';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
 import { DataNode } from 'ant-design-vue/lib/tree';
 const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
+const { ruleVerification } = useOptions();
+const { initUPFIds, optionsUPFIds } = useSMFOptions();
 
 /**网元参数 */
 let neCascaderOptions = ref<Record<string, any>[]>([]);
@@ -25,6 +28,14 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
 /**网元类型选择 type,id */
 let neTypeSelect = ref<string[]>(['', '']);
 
+/**左侧导航是否可收起 */
+let collapsible = ref<boolean>(true);
+
+/**改变收起状态 */
+function changeCollapsible() {
+  collapsible.value = !collapsible.value;
+}
+
 /**对象信息状态类型 */
 type TreeStateType = {
   /**网元 loading */
@@ -333,14 +344,6 @@ let arrayState: ArrayStateType = reactive({
   dataRule: {},
 });
 
-/**监听表格字段列排序变化关闭展开 */
-watch(
-  () => arrayState.columnsDnd,
-  () => {
-    arrayEditClose();
-  }
-);
-
 /**多列表编辑 */
 function arrayEdit(rowIndex: Record<string, any>) {
   const item = arrayState.data.find((s: any) => s.key === rowIndex.value);
@@ -945,155 +948,6 @@ function arrayAddInit(data: any[], dataRule: any) {
   return ruleFrom;
 }
 
-/**规则校验 */
-function ruleVerification(row: Record<string, any>): (string | boolean)[] {
-  let result = [true, ''];
-  const type = row.type;
-  const value = row.value;
-  const filter = row.filter;
-  const display = row.display;
-
-  // 子嵌套的不检查
-  if (row.array) {
-    return result;
-  }
-
-  // 可选的同时没有值不检查
-  if (row.optional === 'true' && !value) {
-    return result;
-  }
-  switch (type) {
-    case 'int':
-      if (filter && filter.indexOf('~') !== -1) {
-        const filterArr = filter.split('~');
-        const minInt = parseInt(filterArr[0]);
-        const maxInt = parseInt(filterArr[1]);
-        const valueInt = parseInt(value);
-        if (valueInt < minInt || valueInt > maxInt) {
-          return [
-            false,
-            t('views.configManage.configParamForm.requireInt', {
-              display,
-              filter,
-            }),
-          ];
-        }
-      }
-      break;
-    case 'ipv4':
-      if (!regExpIPv4.test(value)) {
-        return [
-          false,
-          t('views.configManage.configParamForm.requireIpv4', { display }),
-        ];
-      }
-      break;
-    case 'ipv6':
-      if (!regExpIPv6.test(value)) {
-        return [
-          false,
-          t('views.configManage.configParamForm.requireIpv6', { display }),
-        ];
-      }
-      break;
-    case 'enum':
-      if (filter && filter.indexOf('{') === 1) {
-        let filterJson: Record<string, any> = {};
-        try {
-          filterJson = JSON.parse(filter); //string---json
-        } catch (error) {
-          console.error(error);
-        }
-
-        if (!Object.keys(filterJson).includes(`${value}`)) {
-          return [
-            false,
-            t('views.configManage.configParamForm.requireEnum', { display }),
-          ];
-        }
-      }
-      break;
-    case 'bool':
-      if (filter && filter.indexOf('{') === 1) {
-        let filterJson: Record<string, any> = {};
-        try {
-          filterJson = JSON.parse(filter); //string---json
-        } catch (error) {
-          console.error(error);
-        }
-
-        if (!Object.values(filterJson).includes(`${value}`)) {
-          return [
-            false,
-            t('views.configManage.configParamForm.requireBool', { display }),
-          ];
-        }
-      }
-      break;
-    case 'string':
-      // 字符串长度判断
-      if (filter && filter.indexOf('~') !== -1) {
-        try {
-          const filterArr = filter.split('~');
-          let rule = new RegExp(
-            '^\\S{' + filterArr[0] + ',' + filterArr[1] + '}$'
-          );
-          if (!rule.test(value)) {
-            return [
-              false,
-              t('views.configManage.configParamForm.requireString', {
-                display,
-              }),
-            ];
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      }
-      // 字符串http判断
-      if (value.startsWith('http')) {
-        try {
-          if (!validURL(value)) {
-            return [
-              false,
-              t('views.configManage.configParamForm.requireString', {
-                display,
-              }),
-            ];
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      }
-
-      break;
-    case 'regex':
-      if (filter) {
-        try {
-          let regex = new RegExp(filter);
-          if (!regex.test(value)) {
-            return [
-              false,
-              t('views.configManage.configParamForm.requireString', {
-                display,
-              }),
-            ];
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      }
-      break;
-
-    default:
-      return [
-        false,
-        t('views.configManage.configParamForm.requireUn', { display }),
-      ];
-  }
-  return result;
-}
-
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**添加框是否显示 */
@@ -1155,6 +1009,18 @@ function fnModalCancel() {
   modalState.data = [];
 }
 
+watchEffect(() => {
+  // 监听表格字段列排序变化关闭展开
+  if (arrayState.columnsDnd) {
+    arrayEditClose();
+  }
+
+  // SMF需要选择配置的UPF id
+  if (modalState.visible && neTypeSelect.value[0] === 'SMF') {
+    initUPFIds();
+  }
+});
+
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
@@ -1197,7 +1063,13 @@ onMounted(() => {
 <template>
   <PageContainer>
     <a-row :gutter="16">
-      <a-col :lg="6" :md="6" :xs="24" style="margin-bottom: 24px">
+      <a-col
+        :lg="6"
+        :md="6"
+        :xs="24"
+        style="margin-bottom: 24px"
+        v-show="collapsible"
+      >
         <!-- 网元类型 -->
         <a-card
           size="small"
@@ -1225,7 +1097,7 @@ onMounted(() => {
           </a-form>
         </a-card>
       </a-col>
-      <a-col :lg="18" :md="18" :xs="24">
+      <a-col :lg="collapsible ? 18 : 24" :md="collapsible ? 18 : 24" :xs="24">
         <a-card
           size="small"
           :bordered="false"
@@ -1233,6 +1105,13 @@ onMounted(() => {
           :loading="treeState.selectLoading"
         >
           <template #title>
+            <a-button type="text" @click.prevent="changeCollapsible()">
+              <template #icon>
+                <MenuFoldOutlined v-show="collapsible" />
+                <MenuUnfoldOutlined v-show="!collapsible" />
+              </template>
+            </a-button>
+
             <a-typography-text strong v-if="treeState.selectNode.topDisplay">
               {{ treeState.selectNode.topDisplay }}
             </a-typography-text>
@@ -1608,8 +1487,22 @@ onMounted(() => {
                   modalState.from[item.name] !== undefined
                 "
               >
+                <!-- 特殊SMF-upfid选择 -->
+                <a-select
+                  v-if="
+                    neTypeSelect[0] === 'SMF' &&
+                    modalState.from[item.name]['name'] === 'upfId'
+                  "
+                  v-model:value="modalState.from[item.name]['value']"
+                  :options="optionsUPFIds"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
+                  :allow-clear="true"
+                  style="width: 100%"
+                >
+                </a-select>
+                <!-- 常规 -->
                 <a-input-number
-                  v-if="item['type'] === 'int'"
+                  v-else-if="item['type'] === 'int'"
                   v-model:value="modalState.from[item.name]['value']"
                   :disabled="['read-only', 'read', 'ro'].includes(item.access)"
                   style="width: 100%"