添加菜单显示隐藏

添加表格拖动

src/components/PageLayout/Header.vue

@@ -42,6 +42,7 @@ const handeLoginOut = () => {
       window.sessionStorage.removeItem("_4L_S_MENU_PATH");
       window.sessionStorage.removeItem("_4L_TAG_LIST");
       window.sessionStorage.removeItem("_4L_API_LIST");
+      window.sessionStorage.removeItem("_4L_MENU_COLLAPSE");
       router.push({ path: "/login" });
     }
   });

src/components/PageLayout/Layout.vue

@@ -1,11 +1,11 @@
 <template>
   <lay-layout class="layout-wp">
-    <lay-header class="layout-header">
+    <lay-header :class="{ 'layout-header': true, 'layout-header-min': menuCollapse }">
       <Header :nickname="pageData.name" :avatar-url="pageData.avatarUrl" />
     </lay-header>
     <lay-layout>
-      <lay-side class="layout-side">
-        <Side :list="pageData.menuList" />
+      <lay-side :class="{ 'layout-side': true, 'layout-side-min': menuCollapse }">
+        <Side :list="pageData.menuList" @collapse="handleCollapse" />
       </lay-side>
       <lay-body class="layout-body">
         <Tag />
@@ -42,9 +42,9 @@ interface PageInfo {
   avatarUrl?: string;
   menuList?: Array<MenuList>;
 }
+const pageData = ref<PageInfo>({ avatarUrl: generateAvatar("") });
+const menuCollapse = ref<boolean>(JSON.parse(window.sessionStorage.getItem("_4L_MENU_COLLAPSE") || "false"));
 
-const pageData = ref<PageInfo>({});
-pageData.value.avatarUrl = generateAvatar("");
 const pageInfo = () => {
   get_client_info({}, (data: any) => {
     if (data.code == 200) {
@@ -59,23 +59,11 @@ const pageInfo = () => {
       }
       pageData.value.menuList;
     }
-    let apiList: Array<string> = [];
-    pageData.value.menuList?.map((item: any) => {
-      apiList.push(...getApiList(item));
-    });
-    window.sessionStorage.setItem("_4L_API_LIST", JSON.stringify(apiList));
   });
 };
 
-const getApiList = (menu: any) => {
-  let result: Array<string> = [];
-  if (menu.type == "3") result.push(menu.api);
-  if (menu.childMenu && menu.childMenu.length > 0) {
-    menu.childMenu.map((item: any) => {
-      result = result.concat(getApiList(item));
-    });
-  }
-  return result;
+const handleCollapse = (value: boolean) => {
+  menuCollapse.value = value;
 };
 
 pageInfo();
@@ -87,10 +75,28 @@ pageInfo();
   :deep(.layout-header) {
     height: 64px;
   }
+
   :deep(.layout-side) {
+    overflow: initial;
     flex: 0 0 256px !important;
     width: 256px !important;
   }
+  :deep(.layout-header-min) {
+    .header-wp {
+      .header-left-wp {
+        flex: 0 0 64px !important;
+        width: 64px !important;
+        .title,
+        .sub-title {
+          display: none;
+        }
+      }
+    }
+  }
+  :deep(.layout-side-min) {
+    flex: 0 0 64px !important;
+    width: 64px !important;
+  }
   .layout-body {
     background-color: rgb(244, 246, 247);
     .layout-main {

src/components/PageLayout/Side.vue

@@ -1,16 +1,23 @@
 <template>
   <div class="side-wp">
-    <lay-menu class="menu-wp" v-model:selected-key="selectedKey" theme="light" v-model:openKeys="openKeys" :tree="true">
+    <div class="menu_switch_wp" @click="handeCwitchCollapse()">
+      <lay-icon size="12px" :type="collapse ? 'layui-icon-right' : 'layui-icon-left'" />
+    </div>
+    <lay-menu class="menu-wp" :selected-key="selectedKey" theme="light" v-model:openKeys="openKeys" :collapse="collapse" :tree="true">
       <template v-for="item in list">
         <lay-menu-item :id="item.path" v-if="item.childMenu.length == 0" @click="jumpPage(item)">
-          <template #title>
+          <template #icon>
             <lay-icon :type="item.icon" />
+          </template>
+          <template #title>
             {{ item.name }}
           </template>
         </lay-menu-item>
         <lay-sub-menu :id="item.path" v-else>
-          <template #title>
+          <template #icon>
             <lay-icon :type="item.icon" />
+          </template>
+          <template #title>
             {{ item.name }}
           </template>
           <lay-menu-item :id="items.path" v-for="items in item.childMenu" @click="jumpPage(items)">
@@ -23,9 +30,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, defineProps, watchEffect } from "vue";
+import { ref, defineProps, defineExpose, watchEffect, defineEmits } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
+const emit = defineEmits(["collapse"]);
+
 const router = useRouter();
 const route = useRoute();
 
@@ -41,6 +50,7 @@ interface MenuList {
 
 const openKeys = ref<Array<string>>([]);
 const selectedKey = ref();
+const collapse = ref<boolean>(JSON.parse(window.sessionStorage.getItem("_4L_MENU_COLLAPSE") || "false"));
 
 defineProps({
   list: Array<MenuList>,
@@ -51,8 +61,10 @@ watchEffect(() => {
   openKeys.value = [`/${route.fullPath.split("/")[1]}`];
 });
 
-const jumpPage = (menu: any) => {
-  router.push({ path: menu.path, query: menu.query });
+const handeCwitchCollapse = () => {
+  collapse.value = !collapse.value;
+  window.sessionStorage.setItem("_4L_MENU_COLLAPSE", JSON.stringify(collapse.value));
+  emit("collapse", collapse.value);
 };
 
 const setSelectedKey = () => {
@@ -68,15 +80,40 @@ const setSelectedKey = () => {
     jumpPage(defaultMenu);
   }
 };
+
+const jumpPage = (menu: any) => {
+  router.push({ path: menu.path, query: menu.query });
+};
+
 setSelectedKey();
+
+defineExpose({ collapse });
 </script>
 <style lang="scss" scoped>
 .side-wp {
+  position: relative;
   box-sizing: border-box;
-  overflow: hidden;
   height: 100%;
   width: 100%;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
+  .menu_switch_wp {
+    position: absolute;
+    right: -12px;
+    top: 40px;
+    width: 24px;
+    height: 24px;
+    font-size: 0;
+    line-height: 24px;
+    background: #ffffff;
+    color: rgba(51, 51, 51, 0.25);
+    text-align: center;
+    border-radius: 50%;
+    z-index: 2;
+    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(25, 15, 15, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
+    &:hover {
+      color: rgba(51, 51, 51, 1);
+    }
+  }
   .menu-wp {
     box-sizing: border-box;
     padding: 0;

src/utils/request.ts

@@ -14,6 +14,7 @@ const checkStatus = (response: any) => {
         window.sessionStorage.removeItem("_4L_S_MENU_PATH");
         window.sessionStorage.removeItem("_4L_TAG_LIST");
         window.sessionStorage.removeItem("_4L_API_LIST");
+        window.sessionStorage.removeItem("_4L_MENU_COLLAPSE");
         router.push({ path: "/login" });
       }
       layer.msg(`${response.data.msg}`, { time: 1000, icon: 2 });

src/views/login/index.vue

@@ -69,11 +69,28 @@ const getClientInfo = () => {
     if (data.code == 200) {
       const defaultMenu = data.data.tree.childMenu[0];
       let path = defaultMenu.childMenu.length > 0 ? defaultMenu.childMenu[0].path : defaultMenu.path;
+
+      let apiList: Array<string> = [];
+      data.data.tree.childMenu?.map((item: any) => {
+        apiList.push(...getApiList(item));
+      });
+      window.sessionStorage.setItem("_4L_API_LIST", JSON.stringify(apiList));
       router.push({ path });
     }
   });
 };
 
+const getApiList = (menu: any) => {
+  let result: Array<string> = [];
+  if (menu.type == "3") result.push(menu.api);
+  if (menu.childMenu && menu.childMenu.length > 0) {
+    menu.childMenu.map((item: any) => {
+      result = result.concat(getApiList(item));
+    });
+  }
+  return result;
+};
+
 const handleLogin = () => {
   layFormRef.value.validate((isValidate: boolean) => {
     if (isValidate) {

src/views/system/organization/index.vue

@@ -19,7 +19,7 @@
         </lay-form>
       </div>
       <div>
-        <lay-table :page="tablePage" :columns="columns" :data-source="dataSource" :loading="pageConfig.loading" @change="handleCurrentChange">
+        <lay-table :page="tablePage" :columns="columns" resize :data-source="dataSource" :loading="pageConfig.loading" @change="handleCurrentChange">
           <template v-slot:status="{ row }">
             {{ row.status ? "启用" : "禁用" }}
           </template>

src/views/system/user/index.vue

@@ -19,7 +19,7 @@
         </lay-form>
       </div>
       <div>
-        <lay-table :page="tablePage" :columns="columns" :data-source="dataSource" :loading="pageConfig.loading" @change="handleCurrentChange">
+        <lay-table :page="tablePage" :columns="columns" resize :data-source="dataSource" :loading="pageConfig.loading" @change="handleCurrentChange">
           <template v-slot:groupNames="{ row }">
             {{ row.groupNames.join("，") }}
           </template>

src/views/system/webpage/components/Operator.vue

@@ -5,7 +5,7 @@
         <lay-button class="custom-button-primary" v-if="apiList?.includes('/menu/save')" @click="handleUpdate()">添加</lay-button>
       </div>
       <div class="table-wp">
-        <lay-table :page="tablePage" :columns="columns" :data-source="dataSource" :loading="modelConfig.loading" @change="handleCurrentChange">
+        <lay-table :page="tablePage" :columns="columns" resize :data-source="dataSource" :loading="modelConfig.loading" @change="handleCurrentChange">
           <template v-slot:menuType="{ row }">
             {{ row.menuType == 1 ? "目录" : row.menuType == 2 ? "页面" : "操作" }}
           </template>

src/views/system/webpage/index.vue

@@ -4,11 +4,11 @@
       <span class="card-title">页面管理</span>
     </template>
     <template v-slot:extra>
-      <lay-button class="card-button" v-if="apiList?.includes('/menu/save')" @click="handleUpdate(1)">添加页面</lay-button>
+      <lay-button class="card-button" v-if="apiList?.includes('/menu/save')" @click="handleUpdate(1)">添加目录/页面</lay-button>
     </template>
     <template v-slot:body>
       <div>
-        <lay-table :page="tablePage" :columns="columns" id="menuId" :data-source="dataSource" :loading="pageConfig.loading" children-column-name="child" @change="handleCurrentChange">
+        <lay-table :page="tablePage" :columns="columns" resize id="menuId" :data-source="dataSource" :loading="pageConfig.loading" children-column-name="child" @change="handleCurrentChange">
           <template v-slot:menuType="{ row }">
             {{ row.menuType == 1 ? "目录" : row.menuType == 2 ? "页面" : "操作" }}
           </template>