导航栏修改

src/components/Layout/components/layout/main.vue

@@ -1,19 +1,22 @@
 <template>
   <a-layout style="height: 100vh;">
     <a-layout>
-      <a-layout-sider :width="LayoutStore.setting.laoutStyle == 0 ? 260 : 340">
+      <a-layout-sider v-if="LayoutStore.setting.laoutStyle == 0" :width="260">
         <!-- 侧边栏 -->
-        <blendMenu v-if="LayoutStore.setting.laoutStyle == 0" />
-        <Menu v-if="LayoutStore.setting.laoutStyle == 1"></Menu>
+        <blendMenu />
+      </a-layout-sider>
+      <a-layout-sider v-if="LayoutStore.setting.laoutStyle == 1" :width="route.name == 'home' ? 180 : 360">
+        <Menu></Menu>
       </a-layout-sider>
       <!-- 主体内容 -->
       <a-layout-content class="layout-main"
-        :style="{ width: `calc(100vw - ${LayoutStore.setting.laoutStyle == 0 ? 260+'px' : 340+'px'})` }">
+        :style="{ width: `calc(100vw - ${LayoutStore.setting.laoutStyle == 0 ? 260 + 'px' : 340 + 'px'})` }">
         <!-- 头部 -->
         <a-layout-header class="layout-header">
           <LayoutHeader />
         </a-layout-header>
-        <a-layout>
+        <a-layout class="layout"
+          :style="{ height: `calc(${LayoutStore.setting.HeadNavigationBar ? '100vh - 91px - 1.1rem' : '100vh - 50px - 1.1rem'})` }">
           <a-layout-content class="layout-content">
             <!-- 主题内容 -->
             <main class="layout-content-main">
@@ -30,11 +33,13 @@
 
 <script setup>
 import { ref, onMounted, toRefs } from 'vue';
+import { useRoute } from 'vue-router';
 import LayoutHeader from "@/components/Layout/components/layoutHeader/index.vue";
 import blendMenu from './blendLeft.vue'
 import Menu from './menu.vue'
 import { layoutSetting } from '@/store/modules/layoutSetting'
 const LayoutStore = layoutSetting()
+const route = useRoute()
 </script>
 <style lang="less" scoped>
 ::v-deep .arco-layout-sider-trigger {
@@ -50,11 +55,16 @@ const LayoutStore = layoutSetting()
 }
 
 .layout-content {
+  height: 100%;
+  overflow: scroll;
+}
+
+.layout {
   background-color: #f2f3f5;
 }
 
+
 .layout-content-main {
-  // flex: 1;
   padding: 6px 0;
   margin: 1.1rem;
   background-color: #fff;

src/components/Layout/components/layout/menu.vue

@@ -1,6 +1,6 @@
 <template>
   <a-row class="grid-demo">
-    <a-col :span="12" style="height: 100vh;background-color: #232324;">
+    <a-col :span="menuSecondData && menuSecondData.children && menuSecondData.children.length!==0?12:24" style="height: 100vh;background-color: #232324;">
       <div class="logo-layout" v-if="LayoutStore.setting.SidebarLogo">
         <div class="logo">
           <img src="@/assets/images/logo.png" />
@@ -17,7 +17,7 @@
         </a-menu-item>
       </a-menu>
     </a-col>
-    <a-col :span="12">
+    <a-col :span="12" v-if="menuSecondData && menuSecondData.children && menuSecondData.children.length!==0">
       <a-menu :selectedKeys="routeItemSelectedKeys" id="layout-sider" theme="light" mode="vertical" :collapsed="false"
         :auto-open="true" style="height: 100vh;color: #fff;">
         <template v-for="routeItem in menuSecondData?.children || []">
@@ -25,7 +25,6 @@
             @click="evGoPage(routeItem)">
             <span class="menu-level-font">{{ routeItem.meta.title }}</span>
           </a-menu-item>
-
           <template v-else-if="routeItem.children && routeItem.children.length > 0">
             <sub-menu :key="routeItem.name" :menu-info="routeItem" @go="evGoPage" />
           </template>
@@ -153,7 +152,6 @@ watch(() => routerTagData.getMenuTabSate, val => {
       })
     }
   })
-  console.log(val);
 }, { immediate: true })
 </script>
 <style scoped lang="less">

src/components/Layout/components/layoutHeader/index.vue

@@ -2,7 +2,7 @@
   <div class="header">
     <div class="layout_header">
       <!-- 面包屑 -->
-      <div class="flex_item_bread" >
+      <div class="flex_item_bread">
         <a-breadcrumb v-if="LayoutStore.setting.crumbs">
           <a-breadcrumb-item v-for="(item, index) in itemBreabucm" :key="index">{{ item }}</a-breadcrumb-item>
         </a-breadcrumb>
@@ -60,6 +60,7 @@ import { updateRouteByMenu } from "@/router/router.update.js"
 import Setting from '../setting/index.vue'
 import Tags from '../layoutTags/index.vue'
 import { layoutSetting } from '@/store/modules/layoutSetting'
+import { RouterTagData } from '@/store/modules/routerTag.js'
 const LayoutStore = layoutSetting()
 const router = useRouter()
 const route = useRoute()
@@ -71,7 +72,7 @@ const userInfor = ref(null)
 const SettingVisible = ref(false)
 const routesData = router.options.routes[0]?.children || [];
 const itemBreabucm = ref([])
-
+const routerTagData = RouterTagData()
 const toggleTheme = (e) => {
   designStore.changeTheme(e)
 }
@@ -95,34 +96,52 @@ const evHandleLogout = () => {
 
 // 获取当前路由菜单
 const AcquireRouterItem = (item) => {
-    itemBreabucm.value = [];
-    function recursiveFindRoute(routes, parentTitles = []) {
-        for (const route of routes) {
-            const currentTitles = [...parentTitles];
-            currentTitles.push(route.meta.title);
-            if (route.path === item) {
-                return currentTitles;
-            }
-            if (route.children && route.children.length > 0) {
-                const result = recursiveFindRoute(route.children, currentTitles);
-                if (result.length > 0) {
-                    return result;
-                }
-            }
+  itemBreabucm.value = [];
+  function recursiveFindRoute(routes, parentTitles = []) {
+    for (const route of routes) {
+      const currentTitles = [...parentTitles];
+      currentTitles.push(route.meta.title);
+      if (route.path === item) {
+        return currentTitles;
+      }
+      if (route.children && route.children.length > 0) {
+        const result = recursiveFindRoute(route.children, currentTitles);
+        if (result.length > 0) {
+          return result;
         }
-        return [];
+      }
     }
+    return [];
+  }
 
-    const result = recursiveFindRoute(routesData);
-    if (result.length > 0) {
-        itemBreabucm.value = result;
-    }
+  const result = recursiveFindRoute(routesData);
+  if (result.length > 0) {
+    itemBreabucm.value = result;
+  }
 };
 
 watch(route, val => {
-    AcquireRouterItem(val.path)
+  AcquireRouterItem(val.path)
 }, { immediate: true })
 
+watch(() => LayoutStore.setting.HeadNavigationBar, val => {
+  if (val && routerTagData.tagData.length == 0) {
+    routesData.forEach(res => {
+      if (res.name == route.name) {
+        routerTagData.tagsPushData(res)
+      } else {
+        if (res.children && res.children.length !== 0) {
+          res.children.forEach(child => {
+            if (child.name == route.name) {
+              routerTagData.tagsPushData(child)
+            }
+          })
+        }
+      }
+    })
+  }
+}, { deep: true,immediate:true })
+
 onMounted(() => {
   userInfor.value = JSON.parse(localStorage.getItem('user_login_information'))
 })

src/components/Search/index.vue

@@ -1,27 +1,34 @@
 <template>
-    <div ref="search">
+    <div class="search">
         <!-- 动态渲染表单项 -->
-        <a-form :model="formState" layout="inline">
-            <a-form-item v-for="(item, index) in SearchForm" :key="index" :label="item.label" :field="item.field">
-                <component :is="'a-' + item.type" v-model="formState[item.field].value" :placeholder="item.placeholder"
-                    allow-clear :style="{ width: item.width ? item.width + 'px' : '' }">
-                    <template v-if="item.type == 'select'">
-                        <a-option v-for="option in item.options" :key="option.value" :value="option.value">
-                            {{ option.label }}
-                        </a-option>
-                    </template>
-                </component>
-            </a-form-item>
-            <a-form-item>
-                <a-button type="primary" @click="handleQuery">查询</a-button>
-                <a-button @click="handleReset" style="margin-left: 10px;">重置</a-button>
-            </a-form-item>
-        </a-form>
+        <div class="Form">
+            <a-form :model="formState" layout="inline">
+                <a-form-item v-for="(item, index) in showIcon ? data : InitialData" :key="index" :label="item.label"
+                    :field="item.field" :wrapper-col-style="{ marginBottom: '20px' }">
+                    <component :is="'a-' + item.type" v-model="formState[item.field]" item.Custom
+                        :placeholder="item.type == 'input' ? '请输入' : '请选择' + item.label" allow-clear
+                        :style="{ width: item.width ? item.width + 'px' : '' }">
+                        <template v-if="item.type == 'select'">
+                            <a-option v-for="option in item.options" :key="option.value" :value="option.value">
+                                {{ option.label }}
+                            </a-option>
+                        </template>
+                    </component>
+                </a-form-item>
+                <a-form-item>
+                    <a-button type="primary" @click="handleQuery">查询</a-button>
+                    <a-button @click="handleReset" style="margin-left: 10px;">重置</a-button>
+                    <div v-if="show" @click="showIcon = !showIcon" class="icon">
+                        {{ showIcon ? '折叠' : '展开' }} <icon-down :rotate="showIcon ? 180 : 0" />
+                    </div>
+                </a-form-item>
+            </a-form>
+        </div>
     </div>
 </template>
 
 <script setup>
-import { ref, defineProps, toRefs, onMounted, watch, watchEffect } from 'vue';
+import { ref, defineProps, toRefs, watch, defineEmits } from 'vue';
 import { Getdictionary } from "@/mixins/index.js";
 
 // 接收 props
@@ -33,24 +40,21 @@ const props = defineProps({
                 type: 'input',
                 label: '字典名称',
                 field: 'source',
-                placeholder: '请输入字典名称',
-                value: '', // 双向绑定的值
+                value: '',
             },
             {
                 type: 'input',
                 label: '资费ID',
                 field: 'trafficId',
-                placeholder: '请输入资费ID',
-                value: '', // 双向绑定的值
+                value: '',
             },
             {
                 type: 'select',
                 label: '卡类型',
                 field: 'simType',
-                placeholder: '选择卡类型',
-                options: [], // 默认空，后面会通过字典加载
-                dict:'CardType',
-                value: '', // 双向绑定的值
+                options: [],
+                dict: 'CardType',
+                value: '',
                 width: '200'
             },
         ],
@@ -59,40 +63,98 @@ const props = defineProps({
 
 const { SearchForm } = toRefs(props);
 
+// 用于存储原始SearchForm数据的副本
+const originalSearchForm = ref([]);
+// 分割完成的数据
+const InitialData = ref([]);
+const show = ref(false);
+const showIcon = ref(false);
 const formState = ref({});
+const data = ref([]);
+
+const emit = defineEmits(['query']);
+
+// 在组件创建时，拷贝原始SearchForm数据
+watch(() => props.SearchForm, () => {
+    originalSearchForm.value = JSON.parse(JSON.stringify(props.SearchForm));
+}, { immediate: true });
+
 SearchForm.value.forEach(item => {
-    formState.value[item.field] = {
-        value: item.value, 
-    };
+    formState.value[item.field] = item.value;
 });
 
 // 字典加载
-const loadedDicts = ref({}); 
+const loadedDicts = ref({});
 const loadDictOptions = async (index, dict) => {
     if (loadedDicts.value[dict]) {
         SearchForm.value[index].options = loadedDicts.value[dict];
         return;
     }
     const dictionary = await Getdictionary(dict);
-    loadedDicts.value[dict] = dictionary || []; 
-    SearchForm.value[index].options = loadedDicts.value[dict]; 
+    loadedDicts.value[dict] = dictionary || [];
+    SearchForm.value[index].options = loadedDicts.value[dict];
 };
 
 watch(
-  () => SearchForm.value, 
-  async () => {
-    for (let index = 0; index < SearchForm.value.length; index++) {
-        const item = SearchForm.value[index];
-        if (item.dict && !loadedDicts.value[item.dict]) {
-            await loadDictOptions(index, item.dict); 
+    () => SearchForm.value,
+    async () => {
+        for (let index = 0; index < SearchForm.value.length; index++) {
+            const item = SearchForm.value[index];
+            if (item.dict && !loadedDicts.value[item.dict]) {
+                await loadDictOptions(index, item.dict);
+            }
         }
-    }
-}, { immediate: true });
+        // 如果当前长度超过5条就需要折叠展开
+        if (SearchForm.value.length >= 6) {
+            show.value = true;
+        }
+        // 初始化切割数组，使用原始SearchForm数据的副本进行操作
+        InitialData.value = originalSearchForm.value.splice(0, 6);
+        data.value = [...InitialData.value, ...originalSearchForm.value];
+    },
+    { immediate: true }
+);
 
 // 查询操作
 const handleQuery = () => {
-    // 将表单数据通过事件传递给父组件
     emit('query', formState.value);
 };
 
-</script>
+const handleReset = () => {
+    const newFormState = {};
+    SearchForm.value.forEach(item => {
+        if (typeof item.value === 'string') {
+            newFormState[item.field] = '';
+        } else if (Array.isArray(item.value)) {
+            newFormState[item.field] = [];
+        } else if (typeof item.value === 'object') {
+            newFormState[item.field] = {};
+        }
+    });
+    formState.value = newFormState;
+    emit('reset', formState.value);
+};
+
+
+</script>
+
+<style lang="less" scoped>
+.search {
+    display: flex;
+    justify-content: space-between;
+}
+
+.Form {
+    width: 95%;
+}
+
+.icon {
+    display: flex;
+    // align-items: center;
+    color: #3491fa;
+    font-size: 15px;
+    cursor: pointer;
+    font-weight: 600;
+    margin-left: 15px;
+}
+</style>