恢复导航栏布局 & 新增h5充值路由

src/components/Layout/components/index.js

@@ -1,6 +1,6 @@
-import main from './layout/main.vue'
+import menu from './layout/menu.vue'
 
 
 export default {
-  main
+  menu
 }

src/components/Layout/components/layout/blendLeft.vue

@@ -1,282 +0,0 @@
-<template>
-  <a-layout style="min-height: 100vh">
-    <a-layout-sider theme="dark" :width="260" :collapsed-width="48" collapsible :trigger="null"
-      @collapse="evMenuSecondLongShow" v-model:collapsed="menuSecondLongShow" class="menus">
-      <div class="logo-layout" v-if="LayoutStore.setting.SidebarLogo">
-        <div class="logo">
-          <img src="@/assets/images/logo.png" />
-        </div>
-        <h3>Esay life</h3>
-      </div>
-
-      <a-menu v-model:selectedKeys="selectedKeys" @subMenuClick="sublevel" :open-keys="openKeys">
-        <a-sub-menu v-for="routeItem in routesData" :key="routeItem.name">
-          <template #icon>
-            <svg-icon :icon="routeItem.meta.icon"></svg-icon>
-          </template>
-          <template #title>
-            <div @click="evGoPage(routeItem)">{{ routeItem.meta.title }}</div>
-          </template>
-          <!-- 二级路由 -->
-          <template v-if="routeItem?.children && routeItem?.children.length > 0">
-            <a-menu-item v-for="(item) in routeItem?.children" :key="item.name" @click.stop="evGoPage(item)">
-              {{ item.meta.title }}
-              <!-- 三级菜单 -->
-              <template v-if="item.children && item.children.length > 0">
-                <sub-menu :key="routeItem.name" :menu-info="item" @go="evGoPage" />
-              </template>
-            </a-menu-item>
-          </template>
-          <!-- 折叠图标 -->
-          <template #expand-icon-down>
-            <icon-down v-if="routeItem?.children && routeItem?.children.length > 0"></icon-down>
-          </template>
-        </a-sub-menu>
-      </a-menu>
-    </a-layout-sider>
-  </a-layout>
-</template>
-<script setup>
-import { onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useSystemStore } from "@/store/modules/systemStore";
-import subMenu from "@/components/Layout/components/subMenu/index.vue";
-import { RouterTagData } from '@/store/modules/routerTag.js'
-import { layoutSetting } from '@/store/modules/layoutSetting'
-const LayoutStore = layoutSetting()
-const routerTagData = RouterTagData()
-const systemStore = useSystemStore();
-const route = useRoute();
-const router = useRouter();
-const selectedKeys = ref()
-const openKeys = ref([])
-const menuSecondLongShow = ref(systemStore.menuSecondLongShow);
-// 主菜单
-const routesData = router.options.routes[0]?.children || [];
-
-const evMenuSecondLongShow = () => {
-  systemStore.setStateValue({
-    key: "menuSecondLongShow",
-    value: menuSecondLongShow.value ? 1 : 0,
-    localStorage: true,
-  });
-};
-
-// 查找最下级
-const findPath = (data) => {
-  if (data.children && data.children.length > 0) {
-    return findPath(data.children[0]);
-  } else {
-    return data;
-  }
-};
-
-// 跳转路由
-const evGoPage = async (routeItem) => {
-  selectedKeys.value = [routeItem.name]
-  openKeys.value = [routeItem.name]
-  if (!routeItem.children) {
-    await router.push({
-      path: routeItem.path,
-    });
-    if (LayoutStore.setting.HeadNavigationBar) {
-      routerTagData.tagsPushData(routeItem)
-      routerTagData.getDefault(routeItem.name)
-    }
-  }
-
-  systemStore.setStateValue({
-    key: "menuTabSate",
-    value: routeItem.name || "",
-    localStorage: true,
-  });
-
-  systemStore.setStateValue({
-    key: "routeItem",
-    value: JSON.stringify(routeItem),
-    localStorage: true,
-  });
-};
-
-watch(route, val => {
-  if (val) {
-    selectedKeys.value = [val.name]
-    routesData.forEach(res => {
-      if (res.children && res.children.length > 0) {
-        res.children.forEach(item => {
-          if (item.name == val.name) {
-            openKeys.value = [res.name];
-          }
-        })
-      }
-    })
-  }
-}, { immediate: true })
-
-
-</script>
-<style scoped lang="less">
-.menus {
-  background-color: #0b3d7f !important;
-
-  ::v-deep .arco-menu-inner {
-    background-color: #0b3d7f;
-
-    .arco-menu-has-icon {
-      background: #0b3d7f;
-      color: #fff;
-
-      .arco-menu-icon {
-        color: #fff;
-      }
-
-      .arco-menu-icon-suffix {
-        svg {
-          color: #fff;
-        }
-      }
-    }
-
-    .arco-menu-item {
-      background-color: #0b3d7f;
-      color: #fff;
-    }
-
-    .arco-menu-inline-content {
-      .arco-menu-item-inner {
-        padding-left: 10px;
-      }
-
-      .arco-menu-selected {
-        background-color: #FFF;
-        color: #000;
-
-        .arco-icon {
-          color: #fff !important;
-        }
-      }
-
-    }
-  }
-}
-
-
-.ant-layout-content {
-  height: auto;
-  min-height: auto;
-  overflow-y: auto;
-  padding: 0 20px;
-}
-
-
-
-.logo-layout {
-  height: 64px;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .logo {
-    width: 36px;
-    height: 36px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  h3 {
-    color: #fff;
-    margin-left: 10px;
-  }
-
-}
-
-.arco-layout {
-  color: @text_color_1;
-  background: @layout-split-color !important;
-  overflow: hidden;
-}
-
-:deep(.arco-menu-light) {
-  background-color: @bg_color_3;
-
-  .arco-menu-item {
-    background-color: @bg_color_3;
-  }
-}
-
-:deep(.arco-layout-sider-light) {
-  background-color: @bg_color_3;
-}
-
-:deep(.arco-menu-inline-header) {
-  font-weight: 600;
-  color: @text_color_1;
-  background-color: @bg_color_3;
-}
-
-
-:deep(.arco-menu-inline-content) {
-  .arco-menu-selected {
-    color: @text_color_1;
-    background-color: @black_3;
-
-    &:after {
-      content: none;
-    }
-  }
-}
-
-#layout-sider {
-  :deep(.arco-menu-selected) {
-    color: @text_color_1 !important;
-    font-weight: bold;
-    background-color: @black_3;
-
-    .arco-icon {
-      color: @text_color_1 !important;
-    }
-
-    &:hover {
-      background-color: rgba(235, 19, 19, 0.1) !important;
-    }
-  }
-
-  :deep(.arco-menu-inline) {
-    .arco-menu-inline-header {
-      background-color: @bg_color_3;
-      padding-left: 20px;
-      left: 5px;
-
-      svg {
-        color: @text_color_1 !important;
-        font-size: 14px;
-      }
-
-      .arco-menu-icon-suffix {
-        color: @text_color_1 !important;
-        left: 0px !important;
-        right: auto;
-      }
-
-      &:hover {
-        background-color: rgba(255, 255, 255, 0) !important;
-      }
-    }
-
-    .arco-menu-item {
-      padding: 0 5px;
-    }
-  }
-
-  :deep(.arco-menu-item) {
-    padding-left: 24px;
-  }
-}
-</style>

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

@@ -1,79 +0,0 @@
-<template>
-  <a-layout style="height: 100vh;">
-    <a-layout>
-      <a-layout-sider v-if="LayoutStore.setting.laoutStyle == 0" :width="260">
-        <!-- 侧边栏 -->
-        <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' : 360 + 'px'})` }">
-        <!-- 头部 -->
-        <a-layout-header class="layout-header">
-          <LayoutHeader />
-        </a-layout-header>
-        <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">
-              <router-view v-slot="{ Component }" class="layout-content-router">
-                <component :is="Component" key="Layout" />
-              </router-view>
-            </main>
-          </a-layout-content>
-        </a-layout>
-      </a-layout-content>
-    </a-layout>
-  </a-layout>
-</template>
-
-<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 {
-  display: none;
-}
-
-.layout-header {
-  height: auto;
-  background: @bg_color_2;
-  padding-inline: 10px;
-  z-index: 9;
-  background-color: #fff;
-}
-
-.layout-content {
-  height: 100%;
-  overflow: scroll;
-}
-
-.layout {
-  background-color: #f2f3f5;
-}
-
-
-.layout-content-main {
-  padding: 6px 0;
-  margin: 1.1rem;
-  background-color: #fff;
-}
-
-::v-deep .layout-content-router {
-  padding: 0 1rem 1rem 1rem;
-  background-color: @bg_color_4;
-  box-sizing: border-box;
-  width: 100%;
-}
-</style>

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

@@ -1,64 +1,111 @@
 <template>
-  <a-row class="grid-demo">
-    <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">
+  <a-layout style="min-height: 100vh">
+    <a-layout-sider theme="dark" :width="160" :collapsed-width="48" collapsible :trigger="null"
+      @collapse="evMenuSecondLongShow" v-model:collapsed="menuSecondLongShow">
+      <div class="logo-layout">
         <div class="logo">
-          <img src="@/assets/images/logo.png" />
+          <img src="@/assets/images/logo.png" style="height: 26px; width: 26px;" />
+          <h3 v-if="!menuSecondLongShow" style="margin-left: 10px;"> Easy life</h3>
         </div>
-        <h3>Easy life</h3>
       </div>
-      <a-menu v-model:selectedKeys="menuTabSate" theme="dark" mode="inline">
-        <a-menu-item v-for="routeItem in routesData" :key="routeItem.name" @click="changeRoutesItems(routeItem)">
+
+      <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)">
           <template #icon>
             <svg-icon :icon="routeItem.meta.icon"></svg-icon>
           </template>
           <span>{{ routeItem.meta.title }}</span>
         </a-menu-item>
       </a-menu>
-    </a-col>
-    <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">
-          <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>
-          </a-menu-item>
-          <template v-else-if="routeItem.children && routeItem.children.length > 0">
-            <sub-menu :key="routeItem.name" :menu-info="routeItem" @go="evGoPage" />
-          </template>
-        </template>
-      </a-menu>
-    </a-col>
-  </a-row>
+    </a-layout-sider>
+
+    <a-layout>
+      <a-layout-header class="layout-header">
+        <LayoutHeader />
+      </a-layout-header>
+      <a-layout>
+        <a-layout-sider id="layout-sider" :collapsed="false" :width="menuSecondData &&
+          menuSecondData.children &&
+          menuSecondData.children.length > 0
+          ? 160
+          : 0
+          " @mouseleave="evMouseLeavesSubMenu">
+          <a-menu :selectedKeys="routeItemSelectedKeys" id="layout-sider" theme="light" mode="vertical"
+            :collapsed="false" :auto-open="true">
+            <template v-for="routeItem in menuSecondData?.children || []">
+              <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>
+              </a-menu-item>
+
+              <template v-else-if="routeItem.children && routeItem.children.length > 0">
+                <sub-menu :key="routeItem.name" :menu-info="routeItem" @go="evGoPage" />
+              </template>
+            </template>
+          </a-menu>
+        </a-layout-sider>
+
+        <main class="layout-content-main">
+          <router-view v-slot="{ Component }" class="layout-content-router">
+            <component :is="Component" key="Layout" />
+          </router-view>
+        </main>
+      </a-layout>
+    </a-layout>
+  </a-layout>
 </template>
 <script setup>
 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'
-const LayoutStore = layoutSetting()
+import {RouterTagData} from '@/store/modules/routerTag.js'
+
 // 标签页仓库
-const routerTagData = RouterTagData()
+const settingStore = RouterTagData()
 
 const systemStore = useSystemStore();
 
 const route = useRoute();
 const router = useRouter();
 
+const menuSecondLongShow = ref(systemStore.menuSecondLongShow);
 // 主菜单
 const routesData = router.options.routes[0]?.children || [];
 
-const menuTabSate = ref([routerTagData.getDefault]);
+const menuTabSate = ref([systemStore.getMenuTabSate || routesData[0].name]);
 //子菜单
-const menuSecondData = ref([]);
+const menuSecondData = ref(systemStore.getRouteItem);
 // 选中的状态路由列表
-
+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) => {
@@ -71,29 +118,30 @@ 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);
 };
 
 // 跳转路由
 const evGoPage = async (routeItem) => {
+  // settingStore.tagsPushData(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 || "",
+    value: menuTabSate.value[0] || "",
+    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,
   });
 };
@@ -101,35 +149,39 @@ const evGoPage = async (routeItem) => {
 watch(
   route,
   (val) => {
-    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 = []
-        }
-      }
-    })
+    if (val.name) {
+      routeItemSelectedKeys.value = [val.name];
+    }
   },
   { immediate: true }
 );
-
-
 </script>
 <style scoped lang="less">
-.grid-demo {
-  height: 100vh;
-  background-color: #fff;
+.layout-header {
+  height: 48px;
+  background: @bg_color_2;
+  padding-inline: 10px;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  z-index: 9;
 }
 
+.ant-layout-content {
+  height: auto;
+  min-height: auto;
+  overflow-y: auto;
+  padding: 0 20px;
+}
 
+.layout-content-main {
+  flex: 1;
+  padding: 0 1.2rem 1.6rem 1.2rem;
+  margin: 1.1rem 0 0rem 0;
+  overflow-y: auto;
+  overflow: overlay;
+  height: 95%;
+  display: flex;
+  flex-wrap: wrap;
+}
 
 .logo-layout {
   height: 64px;
@@ -139,25 +191,59 @@ watch(
   justify-content: center;
 
   .logo {
-    width: 36px;
-    height: px;
+    width: 100%;
+    height: 32px;
     display: flex;
     justify-content: center;
     align-items: center;
 
-    img {
-      width: 100%;
-      height: 100%;
+    h3 {
+      white-space: nowrap;
     }
   }
+}
+
+.arco-layout {
+  color: @text_color_1;
+  background: @layout-split-color !important;
+  overflow: hidden;
+}
 
-  h3 {
-    color: #fff;
-    margin-left: 10px;
+:deep(.arco-menu-light) {
+  background-color: @bg_color_3;
+
+  .arco-menu-item {
+    background-color: @bg_color_3;
   }
 }
 
+:deep(.arco-layout-sider-light) {
+  background-color: @bg_color_3;
+}
+
+:deep(.arco-menu-inline-header) {
+  font-weight: 600;
+  color: @text_color_1;
+  background-color: @bg_color_3;
+}
+
+:deep(.layout-content-router) {
+  padding: 0 1rem 1rem 1rem;
+  background-color: @bg_color_4;
+  box-sizing: border-box;
+  width: 100%;
+}
 
+:deep(.arco-menu-inline-content) {
+  .arco-menu-selected {
+    color: @text_color_1;
+    background-color: @black_3;
+
+    &:after {
+      content: none;
+    }
+  }
+}
 
 #layout-sider {
   :deep(.arco-menu-selected) {
@@ -205,4 +291,4 @@ watch(
     padding-left: 24px;
   }
 }
-</style>
+</style>

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

@@ -3,7 +3,7 @@
     <div class="layout_header">
       <!-- 面包屑 -->
       <div class="flex_item_bread">
-        <a-breadcrumb v-if="LayoutStore.setting.crumbs">
+        <a-breadcrumb >
           <a-breadcrumb-item v-for="(item, index) in itemBreabucm" :key="index">{{ item }}</a-breadcrumb-item>
         </a-breadcrumb>
       </div>
@@ -34,18 +34,8 @@
             </a-doption>
           </template>
         </a-dropdown>
-
-
-
-        <a-tooltip content="设置中心">
-          <icon-settings size="22" style="margin-left: 10px;" @click="SettingVisible = true" />
-        </a-tooltip>
-
-        <Setting v-model:visible="SettingVisible" />
       </div>
     </div>
-
-    <Tags v-if="LayoutStore.setting.HeadNavigationBar"></Tags>
   </div>
 </template>
 
@@ -60,8 +50,6 @@ import { useI18n } from 'vue-i18n'
 import { langList } from '@/i18n'
 import { fn_logout } from '@/utils'
 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()
@@ -127,23 +115,23 @@ watch(route, val => {
   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.tagData.push(res)
-      } else {
-        if (res.children && res.children.length !== 0) {
-          res.children.forEach(child => {
-            if (child.name == route.name) {
-              routerTagData.tagData.push(child)
-            }
-          })
-        }
-      }
-    })
-  }
-}, { immediate: true })
+// watch(() => LayoutStore.setting.HeadNavigationBar, val => {
+//   if (val && routerTagData.tagData.length == 0) {
+//     routesData.forEach(res => {
+//       if (res.name == route.name) {
+//         routerTagData.tagData.push(res)
+//       } else {
+//         if (res.children && res.children.length !== 0) {
+//           res.children.forEach(child => {
+//             if (child.name == route.name) {
+//               routerTagData.tagData.push(child)
+//             }
+//           })
+//         }
+//       }
+//     })
+//   }
+// }, { immediate: true })
 
 onMounted(() => {
   userInfor.value = JSON.parse(localStorage.getItem('user_login_information'))

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

@@ -1,129 +0,0 @@
-<template>
-    <div class="flex-left-tag" v-if="LayoutStore.setting.HeadNavigationBar">
-        <div class="tabs">
-            <a-tabs type="card" :editable="true" v-model:active-key="activeKey" auto-switch hide-content
-                @tab-click="handelClickTags" @delete="handelDelete">
-                <a-tab-pane v-for="(tag, index) in tags" :key="tag.name" :title="tag.meta.title">
-                </a-tab-pane>
-            </a-tabs>
-        </div>
-        <div class="aryuso">
-            <a-tooltip background-color="#FFF">
-                <icon-apps size="18" style="color: #0256ff;" />
-                <template #content>
-                    <a-list :bordered="false" :split="false" size="small">
-                        <a-list-item class="list_hover">
-                            <a-space @click="handelItemSetting(0)">
-                                <icon-refresh />
-                                刷新
-                            </a-space>
-                        </a-list-item>
-                        <a-list-item class="list_hover">
-                            <a-space @click="handelItemSetting(1)">
-                                <icon-close />
-                                关闭
-                            </a-space>
-                        </a-list-item>
-                        <a-list-item class="list_hover">
-                            <a-space @click="handelItemSetting(2)">
-                                <icon-delete />
-                                全部关闭
-                            </a-space>
-                        </a-list-item>
-                    </a-list>
-                </template>
-            </a-tooltip>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, toRefs, watch } from 'vue';
-import { RouterTagData } from '@/store/modules/routerTag.js'
-import { useRouter, useRoute } from 'vue-router'
-
-import { layoutSetting } from '@/store/modules/layoutSetting'
-const LayoutStore = layoutSetting()
-
-const router = useRouter()
-const route = useRoute()
-// 标签页仓库
-const routerTagData = RouterTagData()
-
-const tags = ref(localStorage.getItem('RouterTagData'))
-const activeKey = ref()
-
-watch(
-    () => routerTagData.tagData,
-    (val) => {
-        // 更新 tags
-        tags.value = val;
-    },
-    { immediate: true, deep: true }
-);
-
-watch(
-    () => route,
-    (val) => {
-        activeKey.value = val.name
-    }, { immediate: true, deep: true })
-
-
-
-const handelClickTags = (val) => {
-    router.push(val)
-    activeKey.value = val
-    localStorage.setItem('menuTabSate', val)
-    routerTagData.getDefault(val)
-}
-
-const handelItemSetting = (val) => {
-    switch (val) {
-        case 0:
-            router.go(0)
-            break;
-        case 1:
-            routerTagData.handleRemove(routerTagData.getMenuTabSate)
-            router.push({
-                path: '/' + routerTagData.getMenuTabSate
-            })
-            break;
-        case 2:
-            routerTagData.tagData = routerTagData.tagData.filter(res => res.name == route.name)
-            break;
-    }
-}
-
-const handelDelete = (item) => {
-    routerTagData.handleRemove(item)
-    router.push({
-        path: '/' + routerTagData.getMenuTabSate
-    })
-}
-
-</script>
-<style lang="less" scoped>
-.flex-left-tag {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-top: 8px;
-    border-top: 1px solid #f0f2f5;
-
-    ::v-deep .arco-tabs-tab-active {
-        color: #0256FF;
-        background-color: #e5eeff;
-    }
-}
-
-.list_hover {
-    cursor: pointer;
-    padding: 3px 6px !important;
-    width: 100px;
-}
-
-.list_hover:hover {
-    background-color: #e5eeff;
-    color: #0256FF;
-}
-</style>

src/store/modules/systemStore.js

@@ -4,7 +4,7 @@ import { setLocalStorage, getLocalStorage } from "@/utils";
 
 const INITIALIZE = {
   local_loading: false,
-  layout: "main",
+  layout: "menu",
   menus: "",
   routeItem: "",
   menuTabSate: "",

src/views/financialManagement/appPuy/index.vue

@@ -0,0 +1,114 @@
+<!-- 客户充值界面 -->
+<template>
+    <div class="customer-top-up">
+        <!-- 搜索条件区 -->
+        <div class="search-section">
+            <Search @query="getTopUpRecordListFc" @reset="reset" :SearchForm="ClientSearchForm"></Search>
+        </div>
+        <!-- 数据表格 -->
+        <a-table row-key="id" :columns="UserAdiroColumns" :data="tableData" :pagination="pagination"
+            @page-change="onPageChange" @page-size-change="onPageSizeChange" :filter-icon-align-left="true">
+            <template #name="{ record }">
+                <div class="boldTxt">{{ record.name }}</div>
+            </template>
+            <template #status="{ record }">
+                <div>{{ handleStatusTxt(record.status) }}</div>
+            </template>
+            <template #image="{ record }">
+                <a-image width="60" height="60" :src="record.certificateImg" :preview-props="{
+                    actionsLayout: ['rotateRight', 'zoomIn', 'zoomOut'],
+                }" style="cursor: pointer;">
+                </a-image>
+            </template>
+        </a-table>
+    </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { getAdiroePuyList } from "@/api/path/finance.js";
+import { columns, handleStatusTxt, statusOptions, UserAdiroColumns, AdminSearchForm, ClientSearchForm } from '../config'
+const userType = ref(JSON.parse(localStorage.getItem('user_login_information')))
+import Search from '@/components/Search/index.vue'
+import { Getdictionary } from '@/mixins/index'
+
+onMounted(() => {
+    getTopUpRecordListFc();
+});
+
+
+const formRef = ref();
+const searchForm = ref();
+
+const tableData = ref([]);
+const pagination = ref({
+    showTotal: true,
+    showJumper: true,
+    showPageSize: true,
+    total: 0,
+    current: 1,
+    pageSize: 10,
+});
+
+const onPageChange = (page) => {
+    pagination.value.current = page;
+    getTopUpRecordListFc();
+};
+const onPageSizeChange = (pageSize) => {
+    pagination.value.pageSize = pageSize;
+    getTopUpRecordListFc();
+};
+
+
+const getTopUpRecordListFc = async (item) => {
+    if (item) {
+        searchForm.value = item
+    }
+    let res;
+    const param = {
+        current: pagination.value.current,
+        size: pagination.value.pageSize,
+        ...searchForm.value,
+    };
+    let puyType = await Getdictionary('puyType')
+    res = await getAdiroePuyList(param)
+    tableData.value = (res.data?.records || []).map(res => {
+        res.payStatus = puyType.filter(item => item.code == res.puyType)[0]?.label
+        return res
+    })
+    pagination.value.total = res.data.total;
+};
+
+
+const reset = (item) => {
+    searchForm.value = item
+    pagination.value.current = 1
+    getTopUpRecordListFc()
+}
+</script>
+<style scoped lang="less">
+.customer-top-up {
+    padding: 20px !important;
+
+    .search-section {
+        margin-bottom: 20px;
+    }
+
+    .audit-btn {
+        margin-bottom: 10px;
+    }
+}
+
+.text-box {
+    width: 100%;
+    margin-left: 10px;
+
+    .text {
+        font-family: PingFang SC;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 19px;
+        color: rgba(153, 153, 153, 1);
+        text-align: left;
+    }
+}
+</style>

src/views/financialManagement/customerTopsUp/index.vue

@@ -3,9 +3,9 @@
   <div class="customer-top-up">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search @query="getTopUpRecordListFc" @reset="reset" :SearchForm="userType.userType == 1 ? AdminSearchForm : ClientSearchForm"></Search>
+      <Search @query="getTopUpRecordListFc" @reset="reset" :SearchForm="AdminSearchForm"></Search>
     </div>
-    <div class="audit-btn" v-if="userType.userType == 1">
+    <div class="audit-btn">
       <a-button @click="openTopsUp" type="text">
         <template #icon>
           <icon-plus-circle />
@@ -14,9 +14,8 @@
       </a-button>
     </div>
     <!-- 数据表格 -->
-    <a-table row-key="id" :columns="userType.userType == 1 ? columns : UserAdiroColumns" :data="tableData"
-      :pagination="pagination" @page-change="onPageChange" @page-size-change="onPageSizeChange"
-      :filter-icon-align-left="true">
+    <a-table row-key="id" :columns="columns" :data="tableData" :pagination="pagination" @page-change="onPageChange"
+      @page-size-change="onPageSizeChange" :filter-icon-align-left="true">
       <template #name="{ record }">
         <div class="boldTxt">{{ record.name }}</div>
       </template>
@@ -101,9 +100,6 @@ onMounted(() => {
 
 const formRef = ref();
 const searchForm = ref();
-
-
-
 const tableData = ref([]);
 const pagination = ref({
   showTotal: true,
@@ -167,7 +163,7 @@ const submitAdd = () => {
 };
 
 const getTopUpRecordListFc = async (item) => {
-  if(item){
+  if (item) {
     searchForm.value = item
   }
   let res;
@@ -176,17 +172,8 @@ const getTopUpRecordListFc = async (item) => {
     size: pagination.value.pageSize,
     ...searchForm.value,
   };
-  if (userType.value.userType == 1) {
-    res = await getTopUpRecordList(param)
-    tableData.value = res.data?.records || [];
-  } else {
-    let puyType = await Getdictionary('puyType')
-    res = await getAdiroePuyList(param)
-    tableData.value = (res.data?.records || []).map(res=>{
-      res.payStatus = puyType.filter(item=>item.code == res.puyType)[0]?.label
-      return res
-    })
-  }
+  res = await getTopUpRecordList(param)
+  tableData.value = res.data?.records || [];
   pagination.value.total = res.data.total;
 };
 
@@ -216,8 +203,8 @@ const getCustomerListFc = async (value) => {
   customerLoading.value = false;
 };
 
-const reset = (item)=>{
-  searchForm.value = item 
+const reset = (item) => {
+  searchForm.value = item
   pagination.value.current = 1
   getTopUpRecordListFc()
 }

vite.config.js

@@ -61,9 +61,9 @@ export default defineConfig({
         hmr: true,
         proxy: {
             "/api": {
-                target: "http://sim.nanodreamtech.com",
+                // target: "http://sim.nanodreamtech.com",
                 // target: "http://127.0.0.1:3001",
-                // target: "http://sim.ainets.net",
+                target: "http://sim.ainets.net",
                 changeOrigin: true,
                 ws: true,
                 secure: true,