feat: 网元参数配置可收起左侧菜单

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/index.vue

@@ -13,11 +13,12 @@ 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 { 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();
 
 /**网元参数 */
 let neCascaderOptions = ref<Record<string, any>[]>([]);
@@ -25,6 +26,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 */
@@ -945,155 +954,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 = {
   /**添加框是否显示 */
@@ -1197,7 +1057,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-if="collapsible"
+      >
         <!-- 网元类型 -->
         <a-card
           size="small"
@@ -1225,7 +1091,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 +1099,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>