提交代码

fhKeeper/formulahousekeeper/customerBuler-crm/src/App.vue

@@ -52,7 +52,7 @@ const notificationTiop = (options: NotificationParamsTyped) => {
 
 </script>
 
-<style>
+<style lang="scss">
 html,
 body,
 #app,
@@ -81,4 +81,10 @@ body,
 .ranimate-leave-active {
   animation: fadeIn 0s;
 }
+
+.drawerVisClass {
+  .el-drawer__body {
+    padding: 0 !important;
+  }
+}
 </style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/404.vue

@@ -1,11 +1,56 @@
 <template>
   <div>
-    404
+    <div class="page-img">
+      <img src="../assets/404.png" />
+    </div>
+    <p class="page-container"><b>Error</b> 非常抱歉你访问的页面不存在！！！</p>
+    <div class="page-button">
+      <el-button type="primary" round @click="back" icon="el-icon-s-promotion">返回首页</el-button>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-
+import { useRouter } from "vue-router";
+import { useStore } from "@/store/index"
+const router = useRouter();
+const { clearStore } = useStore()
+function back() {
+  clearStore();
+  router.replace('/login');
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.page-img {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  padding: 100px 0 0 0;
+
+  img {
+    width: 600px;
+  }
+}
+
+.page-container {
+  font-size: 20px;
+  text-align: center;
+  color: rgb(192, 204, 218);
+
+  b {
+    margin-right: 30px;
+    font-size: 26px;
+  }
+}
+
+.page-button {
+  text-align: center;
+  margin-top: 40px;
+
+  .el-button.is-round {
+    width: 150px;
+    margin-right: 80px;
+  }
+}
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/header/header.vue

@@ -7,7 +7,8 @@
     <div v-for="(routerItem, routerItemIdex) in routerList"
       :class="`border-b-2 border-transparent hover:border-white p-2 mr-4 cursor-pointer multipleyHeader ${activeRouter?.path === routerItem.path ? 'border-white' : ''}`"
       :key="routerItem.path" ref="childDivs" v-show="visibleItems.includes(routerItemIdex)">
-      <div v-if="routerItem.children && routerItem.children.length <= 0 && routerItem?.isMenu" @click="setCurrentRouter(routerItem)" class="text-nowrap">
+      <div v-if="routerItem.children && routerItem.children.length <= 0 && routerItem?.isMenu"
+        @click="setCurrentRouter(routerItem)" class="text-nowrap">
         {{ routerItem.name }}
       </div>
       <div v-if="routerItem.children && routerItem.children.length > 0" class="flex justify-center items-center">
@@ -28,18 +29,54 @@
         </el-dropdown>
       </div>
     </div>
+    <div v-if="moreRoutes.length > 0" class="flex justify-center items-center">
+      <el-dropdown trigger="click">
+        <span class="text-white w-full h-full headerText">
+          <el-icon>
+            <MoreFilled />
+          </el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(child, childIndex) in moreRoutes" :key="child.path"
+              @click="moreSetCurrentRouter(child, childIndex)">
+              {{ child.name }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
   </div>
   <div class="flex flex-row justify-start items-center text-white header-right">
     <el-icon :size="26" class="ml-4 cursor-pointer">
       <Bell />
     </el-icon>
     <div>
-      <img class="w-8 h-8 rounded-full ml-4 cursor-pointer" :src="defaultCover" alt="" @click="logout()">
+      <img class="w- h-8 rounded-full ml-4 cursor-pointer" :src="defaultCover" alt="" @click="drawerVis = true">
     </div>
     <el-icon :size="26" class="ml-4 cursor-pointer">
       <Grid />
     </el-icon>
   </div>
+
+  <!-- 左侧 -->
+  <el-drawer v-model="drawerVis" modal-class="drawerVisClass" :with-header="false">
+    <div class="w-full h-full">
+      <div class="bg-[#075985]">
+        <div class="p-8">
+          <div class="w-[100px] h-[100px] p-2 border-[1px] border-[#999] rounded-full m-auto">
+            <img class="w-full h-full" :src="defaultCover">
+          </div>
+        </div>
+        <div class="text-center text-[20px] leading-none text-white pb-3">{{ userInfo.name }}</div>
+        <div class="text-center leading-none text-slate-50 pb-3">角色：{{ userInfo.roleName }}</div>
+        <div class="text-center leading-none text-slate-50 pb-3">公司：{{ userInfo.companyName }}</div>
+        <div class="w-full drawerVisBtn">
+          <div @click="logout()">退出</div>
+        </div>
+      </div>
+    </div>
+  </el-drawer>
 </template>
   
 <script lang="ts" setup>
@@ -48,7 +85,7 @@ import { RouteRecordRaw, useRouter, useRoute } from 'vue-router';
 import { useStore } from "../../store/index"
 import defaultCover from "../../assets/defaultCover.png";
 import loginLogin from '../../assets/login/login_logo.png'
-const { routers, clearStore } = useStore()
+const { routers, clearStore, userInfo } = useStore()
 const router = useRouter();
 const route = useRoute()
 // const routerList = ref<RouteRecordRaw[]>([]);
@@ -57,25 +94,28 @@ const activeRouter = ref<RouteRecordRaw>();
 
 const visibleItems = ref<number[]>([]);
 const parentDiv = ref<HTMLElement | null>(null);
+const itemLastIndex = ref(0)
+const moreRoutes = ref<any[]>([])
+const drawerVis = ref(false)
 
 const updateVisibleItems = () => {
-  const parentWidth = parentDiv.value?.offsetWidth || 10;
+  const parentWidth = (parentDiv.value?.offsetWidth && parentDiv.value?.offsetWidth - 150) || 10;
   const canvas = document.createElement('canvas');
   const context = canvas.getContext('2d');
 
   let textWidthList: any = [] // 所有文字的宽度
   let totalWidth = 0;
   let temporaryIndex: any = []
-  
-  if(context) {
+
+  if (context) {
     context.font = '16px 微软雅黑';
     textWidthList = routerList.value.map((item: any) => {
       const metrics = context.measureText(item.name);
       return Math.ceil(metrics.width) + 32; // 32是padding和margin的宽度
     })
   }
-  for(let i in textWidthList) {
-    if(totalWidth + textWidthList[i] > parentWidth) {
+  for (let i in textWidthList) {
+    if (totalWidth + textWidthList[i] > parentWidth) {
       break;
     }
     totalWidth += textWidthList[i];
@@ -83,13 +123,41 @@ const updateVisibleItems = () => {
   }
 
   // 替换最后一个元素
-  let lastIndex = textWidthList.length - 1;
-  temporaryIndex.splice(temporaryIndex.length -1, 1, lastIndex)
-
+  const lastIndex = routerList.value.findIndex(obj => obj.name === '系统设置');
+  itemLastIndex.value = lastIndex
+  temporaryIndex.splice(temporaryIndex.length - 1, 1, lastIndex)
   visibleItems.value = temporaryIndex;
-  //console.log(visibleItems.value)
+
+  // 过滤出隐藏的元素
+  let interceptIndex = Object.values(visibleItems.value).findIndex(v => +v == lastIndex)
+  let newVisibleItems = JSON.parse(JSON.stringify(temporaryIndex)).splice(0, interceptIndex + 1)
+  let missingIndex = findMissingNumbers(newVisibleItems)
+  let routerLists = []
+  for (var i in missingIndex) {
+    routerLists.push(routerList.value[missingIndex[i]])
+  }
+  moreRoutes.value = routerLists
+
+  // 判断当前的索引是否在隐藏元素中
+  let currentIndex = moreRoutes.value.findIndex(obj => obj.name === activeRouter.value?.name);
+  if (currentIndex >= 0) {
+    replaceData(activeRouter.value, currentIndex)
+  }
 };
 
+const findMissingNumbers = (arr: any) => {
+  let missingNumbers = [];
+  arr.sort((a: any, b: any) => a - b); // 对数组进行排序
+
+  for (let i = arr[0]; i < arr[arr.length - 1]; i++) {
+    if (!arr.includes(i)) { // 如果数组中不包含当前数字
+      missingNumbers.push(i); // 将缺失的数字添加到结果数组中
+    }
+  }
+
+  return missingNumbers;
+}
+
 const setCurrentRouter = (item: RouteRecordRaw) => {
   activeRouter.value = item;
   if (item.children && item.children.length > 0) {
@@ -98,6 +166,20 @@ const setCurrentRouter = (item: RouteRecordRaw) => {
   }
   router.push({ path: item.path });
 };
+
+const moreSetCurrentRouter = (item: RouteRecordRaw, index: any) => {
+  activeRouter.value = item;
+  router.push({ path: item.path });
+  replaceData(item, index)
+};
+
+const replaceData = (item: any, index: any) => {
+  let itemIndex = routerList.value.findIndex(v => v.name == item.name)
+  let lastItem = routerList.value[visibleItems.value[visibleItems.value.length - 2]]
+  visibleItems.value.splice(visibleItems.value.length - 2, 1, itemIndex),
+    moreRoutes.value.splice(index, 1, lastItem)
+}
+
 const logout = () => {
   clearStore();
   router.push({ path: '/login' });
@@ -112,13 +194,12 @@ onMounted(() => {
   }, 500);
 })
 watchEffect(() => {
-  updateVisibleItems();
-  watch(() => route.path, (newPath, _oldPath) => {  
-      activeRouter.value = routerList.value.find((item) => item.path === newPath);
-    }, { 
-      immediate: false 
-    }
-  );  
+  watch(() => route.path, (newPath, _oldPath) => {
+    activeRouter.value = routerList.value.find((item) => item.path === newPath);
+  }, {
+    immediate: false
+  }
+  );
 });
 </script>
   
@@ -126,6 +207,7 @@ watchEffect(() => {
 .trademark {
   font-size: 20px;
 }
+
 .multipleyHeader {
   height: 96%;
   display: flex;
@@ -136,16 +218,35 @@ watchEffect(() => {
     font-size: 16px;
   }
 }
+
 .parentBox {
   // max-width: 80%;
   // min-width: 300px;
   flex: 1;
   overflow: hidden;
 }
+
 .header-right {
   width: 135px;
 }
+
 .parentDiv {
-  width: 50%;
+  width: 10%;
+}
+
+.drawerVisClass {
+  .drawerVisBtn {
+    margin-top: 10px;
+    border-top: 1px solid #999;
+    div {
+      text-align: center;
+      line-height: 40px;
+      color: #fff;
+      cursor: pointer;
+      &:hover {
+        background: #086597;
+      }
+    }
+  }
 }
 </style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/home.vue

@@ -1,11 +1,10 @@
 <template>
-  <div class="w-full h-full">
+  <div class="w-full h-full" v-loading="isLoading">
     <el-container class="flex flex-row h-full">
       <el-header class="bg-sky-800 leading-10 flex flex-row justify-between">
         <Header></Header>
       </el-header>
       <el-main>
-        <!-- <router-view /> -->
         <router-view v-slot="{ Component }">
           <transition name="router_animate">
             <component :is="Component" />
@@ -18,8 +17,13 @@
 
 <script lang="ts" setup>
 import Header from '@/pages/header/header.vue'
-import { onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
+const isLoading = ref(true);
 
+onMounted(async () => {
+  await nextTick();
+  isLoading.value = false;
+});
 </script>
 
 <style scoped lang="scss">

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/login.vue

@@ -54,8 +54,8 @@ const router = useRouter();
 const globalPopup = inject<GlobalPopup>('globalPopup')
 const ruleFormRef = ref<FormInstance>();
 const ruleForm = ref({
-  username: "",
-  password: "",
+  username: "18122222222",
+  password: "000000",
 });
 const loginLoading = ref(false);
 const rules = reactive<FormRules<typeof ruleForm>>({
@@ -88,7 +88,7 @@ const login = (formEl: FormInstance | undefined) => {
       setTimeout(() => {
         loginLoading.value = false;
         router.push(res.data?.moduleList[0].path);
-      }, 1000)
+      }, 100)
     }).catch(_err => {
       loginLoading.value = false;
     })

fhKeeper/formulahousekeeper/customerBuler-crm/src/router/index.ts

@@ -47,11 +47,9 @@ const router = createRouter({
 router.beforeEach((to, _from, next) => {
   const routerList = useStore().routers;
   const routers = router.getRoutes();
-  //console.log(routerList, routers);
   const { setAsyncRoutesMark, asyncRoutesMark, getToken } = useStore();
   const token = getToken;
   const skipPath = ["/login", "/register", "/test", "/testEcharts"];
-  //console.log(token, '<==== token')
   if (skipPath.includes(to.path)) {
     next();
   } else {
@@ -80,7 +78,6 @@ router.beforeEach((to, _from, next) => {
               });
             });
           } else {
-            console.log(`/src/pages/${filePath}/index.vue`)
             addNewRouter?.children.push({
               path: item.path,
               name: item.name,
@@ -90,6 +87,11 @@ router.beforeEach((to, _from, next) => {
           }
         });
         router.addRoute(addNewRouter);
+        router.addRoute({
+          path: '/:catchAll(.*)',
+          name: 'NotFound',
+          component: () => import("../pages/404.vue"),
+        })
         next({ ...to, replace: true });
       }
     } else {
@@ -97,6 +99,5 @@ router.beforeEach((to, _from, next) => {
       next(`/login`);
     }
   }
-  console.log(routerList);
 });
 export default router;