修改布局样式

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

@@ -10,7 +10,7 @@
       </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' : 360 + 'px'})` }">
         <!-- 头部 -->
         <a-layout-header class="layout-header">
           <LayoutHeader />

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

@@ -1,15 +1,15 @@
 <template>
   <a-row class="grid-demo">
-    <a-col :span="menuSecondData && menuSecondData.children && menuSecondData.children.length!==0?12:24" style="height: 100vh;background-color: #232324;">
+    <a-col :span="menuSecondData && menuSecondData && menuSecondData.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" />
         </div>
         <h3>Easy life</h3>
       </div>
-      <a-menu v-model:selectedKeys="menuTabSate" theme="dark" mode="inline" @mouseleave="evMouseleaveMenu">
-        <a-menu-item v-for="routeItem in routesData" :key="routeItem.name"
-          @mouseenter="evMenuGetFn(routeItem, 'mouseenter')" @click="changeRoutesItems(routeItem)">
+      <a-menu v-model:selectedKeys="menuTabSate" theme="dark" mode="inline">
+        <a-menu-item v-for="routeItem in routesData" :key="routeItem.name" @click="changeRoutesItems(routeItem)">
           <template #icon>
             <svg-icon :icon="routeItem.meta.icon"></svg-icon>
           </template>
@@ -17,13 +17,13 @@
         </a-menu-item>
       </a-menu>
     </a-col>
-    <a-col :span="12" v-if="menuSecondData && menuSecondData.children && menuSecondData.children.length!==0">
+    <a-col :span="12" v-if="menuSecondData && menuSecondData && menuSecondData.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 || []">
+        <template v-for="routeItem in menuSecondData">
           <a-menu-item v-if="!routeItem.children || routeItem.children.length === 0" :key="routeItem.name?.toString()"
             @click="evGoPage(routeItem)">
-            <span class="menu-level-font">{{ routeItem.meta.title }}</span>
+            <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" />
@@ -37,7 +37,6 @@
 import { ref, computed, h, reactive, onMounted, watch, nextTick } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useSystemStore } from "@/store/modules/systemStore";
-import LayoutHeader from "@/components/Layout/components/layoutHeader/index.vue";
 import subMenu from "@/components/Layout/components/subMenu/index.vue";
 import { RouterTagData } from '@/store/modules/routerTag.js'
 import { layoutSetting } from '@/store/modules/layoutSetting'
@@ -50,41 +49,16 @@ const systemStore = useSystemStore();
 const route = useRoute();
 const router = useRouter();
 
-const menuSecondLongShow = ref(systemStore.menuSecondLongShow);
 // 主菜单
 const routesData = router.options.routes[0]?.children || [];
 
-const menuTabSate = ref([systemStore.getMenuTabSate || routesData[0].name]);
+const menuTabSate = ref([routerTagData.getDefault]);
 //子菜单
-const menuSecondData = ref(systemStore.getRouteItem);
+const menuSecondData = ref([]);
 // 选中的状态路由列表
-const menuSecondSelectedStatusData = ref(systemStore.getRouteItem);
+
 const routeItemSelectedKeys = ref();
 
-const evMenuSecondLongShow = () => {
-  systemStore.setStateValue({
-    key: "menuSecondLongShow",
-    value: menuSecondLongShow.value ? 1 : 0,
-    localStorage: true,
-  });
-};
-const evMouseleaveMenu = (e) => {
-  if (
-    e.relatedTarget?.offsetParent?.id &&
-    e.relatedTarget?.offsetParent?.id == "layout-sider"
-  )
-    return;
-  menuSecondData.value = menuSecondSelectedStatusData.value;
-};
-// 子菜单
-const evMouseLeavesSubMenu = () => {
-  menuSecondData.value = menuSecondSelectedStatusData.value;
-};
-// 鼠标滑动上去更新菜单栏 目前先屏蔽
-const evMenuGetFn = (routeItem, type) => {
-  // menuSecondData.value = routeItem;
-  // console.log(routeItem);
-};
 
 // 查找最下级
 const findPath = (data) => {
@@ -97,6 +71,13 @@ const findPath = (data) => {
 
 // 主路由 状态
 const changeRoutesItems = (e) => {
+  // 储存当前路由
+  systemStore.setStateValue({
+    key: "routeItem",
+    value: JSON.stringify(e),
+    localStorage: true,
+  });
+  menuSecondData.value = e.children
   const item = findPath(e);
   evGoPage(item);
 };
@@ -106,53 +87,41 @@ const evGoPage = async (routeItem) => {
   await router.push({
     name: routeItem.name,
   });
-
   if (LayoutStore.setting.HeadNavigationBar) {
     routerTagData.tagsPushData(routeItem)
     routerTagData.getDefault(routeItem.name)
   }
-  menuTabSate.value = [route.matched[1].name];
   systemStore.setStateValue({
     key: "menuTabSate",
     value: routeItem.name || "",
     localStorage: true,
   });
-
-  menuSecondSelectedStatusData.value = routesData.find(
-    (item) => item.name == menuTabSate.value
-  );
-  menuSecondData.value = menuSecondSelectedStatusData.value;
-  systemStore.setStateValue({
-    key: "routeItem",
-    value: JSON.stringify(menuSecondData.value),
-    localStorage: true,
-  });
 };
 
 watch(
   route,
   (val) => {
-    if (val.name) {
-      routeItemSelectedKeys.value = [val.name];
-    }
+    routesData.forEach(res => {
+      if (res.children && res.children.length > 0) {
+        res.children.forEach(item => {
+          if (item.name == val.name) {
+            menuTabSate.value = [res.name]
+            routeItemSelectedKeys.value = [item.name]
+            menuSecondData.value = res.children
+          }
+        })
+      } else {
+        if (res.name == val.name) {
+          menuTabSate.value = [res.name]
+          menuSecondData.value = []
+        }
+      }
+    })
   },
   { immediate: true }
 );
 
-watch(() => routerTagData.getMenuTabSate, val => {
-  routesData.forEach(res => {
-    if (res.children && res.children.length > 0) {
-      res.children.forEach(item => {
-        if (item.name == val) {
-          menuTabSate.value = [res.name]
-          routeItemSelectedKeys.value = [item.name]
-          const items = findPath(res);
-          evGoPage(items);
-        }
-      })
-    }
-  })
-}, { immediate: true })
+
 </script>
 <style scoped lang="less">
 .grid-demo {

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

@@ -128,19 +128,19 @@ watch(() => LayoutStore.setting.HeadNavigationBar, val => {
   if (val && routerTagData.tagData.length == 0) {
     routesData.forEach(res => {
       if (res.name == route.name) {
-        routerTagData.tagsPushData(res)
+        routerTagData.tagData.push(res)
       } else {
         if (res.children && res.children.length !== 0) {
           res.children.forEach(child => {
             if (child.name == route.name) {
-              routerTagData.tagsPushData(child)
+              routerTagData.tagData.push(child)
             }
           })
         }
       }
     })
   }
-}, { deep: true,immediate:true })
+}, { immediate:true })
 
 onMounted(() => {
   userInfor.value = JSON.parse(localStorage.getItem('user_login_information'))

src/components/Layout/components/layoutTags/index.vue

@@ -50,7 +50,7 @@ const route = useRoute()
 // 标签页仓库
 const routerTagData = RouterTagData()
 
-const tags = ref([])
+const tags = ref(localStorage.getItem('RouterTagData'))
 const activeKey = ref()
 
 watch(
@@ -59,14 +59,14 @@ watch(
         // 更新 tags
         tags.value = val;
     },
-    { deep: true }
+    { immediate: true,deep: true }
 );
 
 watch(
-    () => routerTagData.getMenuTabSate,
+    () => route,
     (val) => {
-        activeKey.value = val
-    }, { immediate: true })
+        activeKey.value = val.name
+    }, { immediate: true ,deep: true })
 
 
 
@@ -106,10 +106,6 @@ const handelDelete = (item) => {
     })
 }
 
-onMounted(() => {
-    const tagList = localStorage.getItem('RouterTagData') || []
-    routerTagData.tagsPushFilter(tagList)
-});
 </script>
 <style lang="less" scoped>
 .flex-left-tag {

src/store/modules/layoutSetting.js

@@ -37,6 +37,7 @@ export const layoutSetting = defineStore({
     // 头部导航栏
     handelHeadNavigationBar(e){
         this.setting.HeadNavigationBar = e;
+        localStorage.removeItem('RouterTagData')
     },
     // 切换布局样式
     handelLayoutStyle(e){

src/views/OperationRecord/TariffRecord/index.vue

@@ -15,23 +15,7 @@
     </div>
     <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
       @page-change="evChangePage">
-      <!-- <template #id="{ record }">
-        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)"
-          v-if="role.getRole == 1">{{
-            $t('form.alter')
-          }}</a>
-        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="meal(record)">{{
-          $t('tariffManagement.SetMeal') }}</a>
-        <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')" :cancel-text="$t('form.Cancel')"
-          @ok="handleDel(record.id)">
-          <a class="a-link" href="javascript:;" style="margin-right: 1rem" v-if="role.getRole == 1">{{
-            $t('form.Delete')
-          }}</a>
-        </a-popconfirm>
-      </template> -->
     </a-table>
-
-
   </div>
 </template>
 
@@ -91,7 +75,6 @@ const intData = async (item) => {
     const bagSize = item.pricing + '/' + item.mrcAmount + '/' + item.networkAccessFee
     const billingMethodName = methodList.value.find(val => val.value == item.billingMethod)?.label
     let pricingName;
-
     if (item.billingMethod == 1) {
       pricingName = item.trafficBillingAmount + pricingCurrty
     } else if (item.billingMethod == 2) {
@@ -109,6 +92,7 @@ const intData = async (item) => {
       Number: index + 1
     }
   })
+  console.log(dataSource.value);
   pagination.value.total = data.total
 }