首页

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

@@ -3,9 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, provide, inject } from 'vue'
+import { provide } from 'vue'
 import { useStore } from '@/store/index'
-import { ElNotification } from 'element-plus'
+import { ElNotification, NotificationParamsTyped } from 'element-plus'
 const { setAsyncRoutesMark } = useStore()
 window.addEventListener('beforeunload', () => beforeunloadFn())
 const beforeunloadFn = (() => {
@@ -13,20 +13,36 @@ const beforeunloadFn = (() => {
 })
 
 provide<GlobalPopup>('globalPopup', {
-  showSuccess: (msg: string, time: number, icon: string) => { notificationTiop }, //!SECTION 成功
-  showError: (msg: string, time: number, icon: string) => { notificationTiop }, //!SECTION 失败
-  showWarning: (msg: string, time: number, icon: string) => { notificationTiop }, //!SECTION 警告
-  showInfo: (msg: string, time: number, icon: string) => { notificationTiop }, //!SECTION 文本
+  showSuccess: (message?: string) => {
+    notificationTiop({
+      message: message || '成功',
+      type: 'success',
+      title:"提示",
+      duration: 2000
+    })
+  }, //!SECTION 成功
+  showError: (message?: string) => notificationTiop({
+    message: message || '失败',
+    type: 'error',
+    title: "提示",
+    duration: 2000
+  }), //!SECTION 失败
+  showWarning: (message: string) => notificationTiop({
+    message,
+    type: 'warning',
+    title: "提示",
+    duration: 2000
+  }), //!SECTION 警告
+  showInfo: (message: string) => notificationTiop({
+    message,
+    type: 'info',
+    title: "提示",
+    duration: 2000
+  }), //!SECTION 文本
 })
 
-const notificationTiop = (msg: string, time: number, icon: string, type: string) => {
-  let obj: any = {}
-  obj.title = '提示'
-  obj.message = msg
-  time ? obj.duration = time : obj.duration = 2000
-  icon ? obj.iconClass = icon : obj.iconClass = ''
-  type ? obj.type = type : obj.type = 'success'
-  ElNotification(obj)
+const notificationTiop = (options: NotificationParamsTyped) => {
+  ElNotification(options)
 }
 
 </script>

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

@@ -1,86 +1,89 @@
 <template>
-    <div class="common-layout layouts">
-        <el-container class="flex flex-col layouts">
-            <!-- 头部 -->
-            <el-header></el-header>
-            <!-- 左侧菜单 -->
-            <el-container class="flex-1 layouts">
-                <el-aside class="home-el-aside" width="220px">
-                    <el-menu default-active="1" class="el-menu-vertical-demo">
-                        <el-menu-item :index="(index + 1) + ''" v-for="(item, index) in 10" :key="index">
-                            <div class="relativeElem">
-                                <el-icon>
-                                    <setting />
-                                </el-icon>
-                                <span>第{{ index + 1 }}个</span>
-                            </div>
-                        </el-menu-item>
-
-                        <el-sub-menu index="11">
-                            <template #title>
-                                <el-icon>
-                                    <location />
-                                </el-icon>
-                                <span>第十一个</span>
-                            </template>
-                            <el-menu-item :index="'11'">
-                                <div class="relativeElem">
-                                    <el-icon><icon-menu /></el-icon>
-                                    <span>第11-1个</span>
-                                </div>
-                            </el-menu-item>
-                        </el-sub-menu>
-                    </el-menu>
-                </el-aside>
-                <!-- 主体 -->
-                <el-main>
-                    <router-view></router-view>
-                </el-main>
-            </el-container>
-        </el-container>
-    </div>
+  <div class="w-full h-full">
+    <el-container>
+      <el-header class="bg-sky-800 leading-10 flex flex-row justify-between">
+        <div class=" flex flex-row justify-start items-center text-white flex-1">
+          <div v-for="routerItem in routerList"
+            :class="`border-b-2 border-transparent hover:border-white p-2 mr-4 multipleyHeader ${activeRouter?.path === routerItem.path ? 'border-white' : ''}`"
+            :key="routerItem.path">
+            <div v-if="!routerItem.children" @click="setCurrentRouter(routerItem)">
+              {{ routerItem.name }}
+            </div>
+            <div v-else class="flex justify-center items-center">
+              <el-dropdown>
+                <div class="text-white w-full h-full headerText">
+                  {{ routerItem.name }}
+                  <el-icon class="el-icon--right">
+                    <arrow-down />
+                  </el-icon>
+                </div>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item v-for="child in routerItem.children"
+                      :key="child.path"
+                      @click="setCurrentRouter(child)">
+                      {{ child.name }}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-row justify-start items-center text-white">
+          <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()">
+          </div>
+          <el-icon :size="26" class="ml-4 cursor-pointer">
+            <Grid />
+          </el-icon>
+        </div>
+      </el-header>
+      <el-main>
+        <router-view />
+      </el-main>
+    </el-container>
+  </div>
 </template>
+
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { RouteRecordRaw, useRouter } from 'vue-router';
+import { useStore } from "@/store"
+import defaultCover from "@/assets/defaultCover.png";
+const { getRoutersList } = useStore()
+const router = useRouter();
+const routerList = ref<RouteRecordRaw[]>([]);
+const activeRouter = ref<RouteRecordRaw>();
+const setCurrentRouter = (item: RouteRecordRaw) => {
+  activeRouter.value = item;
+  if (item.children && item.children.length > 0) {
+    router.push({ path: item.children[0].path });
+    return
+  }
+  router.push({ path: item.path });
+};
+const logout = () => {
+  router.push({ path: '/login' });
+};
+onMounted(() => {
+  routerList.value = getRoutersList;
+  activeRouter.value = routerList.value.find((item) => item.path === router.currentRoute.value.path);
+  console.log("routerList", routerList);
+})
 
 </script>
-<style scoped lang="scss">
-.common-layout {
-    .relativeElem {
-        position: relative;
-        z-index: 2;
-        display: flex;
-        align-items: center;
-    }
-
-    .el-header {
-        background: $darkBlue;
-    }
 
-    .el-menu-vertical-demo {
-        height: 100%;
-        background: $ashen;
-
-        .is-active {
-            position: relative;
-            color: $modena;
-
-            &:before {
-                content: '';
-                position: absolute;
-                right: 0;
-                top: 8px;
-                width: 95%;
-                height: 40px;
-                background: $backColor;
-                border-top-left-radius: 20px;
-                border-bottom-left-radius: 20px;
-            }
-        }
-    }
-
-    .el-main {
-        padding: 0 20px;
-        background: $backColor;
-    }
+<style scoped lang="scss">
+.multipleyHeader {
+  height: 96%;
+  display: flex;
+  align-items: center;
+  .headerText {
+    font-size: 16px;
+  }
 }
 </style>

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

@@ -45,7 +45,7 @@ import { useRouter } from "vue-router";
 import loginLogo from "@/assets/login/login_logo.png";
 import qiyeweixin from "@/assets/login/qiyeweixin.png";
 import { UserFilled, Lock } from '@element-plus/icons-vue'
-import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { type FormInstance, type FormRules } from 'element-plus'
 import { useStore } from '@/store/index'
 import { post } from "@/utils/request";
 import { LOGIN } from "./api";
@@ -74,9 +74,36 @@ const login = (formEl: FormInstance | undefined) => {
     }
     loginLoading.value = true;
     console.log(ruleForm.value);
+    globalPopup?.showSuccess();
+    let newRouter = [
+      {
+        path: '/thread',
+        name: '线索'
+      }, {
+        path: "/tasks",
+        name: "任务"
+      }, {
+        path: "/system",
+        name: "系统",
+        children: [
+          {
+            path: "/role",
+            name: "角色管理"
+          }, {
+            path: "/dictionary",
+            name:"系统字典"
+          }
+        ]
+      }
+    ]
+    setRouters(newRouter)
+    setTimeout(() => {
+      loginLoading.value = false;
+      router.push(newRouter[0].path);
+    }, 1000);
+    return
     post(LOGIN, { ...ruleForm.value }).then(res => {
       console.log(res);
-      globalPopup?.showSuccess('登录成功', 1000, '')
       // if(res.code == 'error') {
       //   ElMessage.error({
       //     message: "登录失败",
@@ -100,17 +127,17 @@ const login = (formEl: FormInstance | undefined) => {
       loginLoading.value = false;
     })
     return
-    let newRouter = [
-      {
-        path: '/thread',
-        name: 'thread'
-      }
-    ]
-    setRouters(newRouter)
-    setTimeout(() => {
-      loginLoading.value = false;
-      router.push(newRouter[0].path);
-    }, 1000);
+    // let newRouter = [
+    //   {
+    //     path: '/thread',
+    //     name: 'thread'
+    //   }
+    // ]
+    // setRouters(newRouter)
+    // setTimeout(() => {
+    //   loginLoading.value = false;
+    //   router.push(newRouter[0].path);
+    // }, 1000);
   })
 
 };

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

@@ -47,13 +47,14 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
+import { inject, reactive, ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { HomeFilled, UserFilled, Lock, Iphone, Tickets } from '@element-plus/icons-vue'
 import { ElNotification, ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { isValueEmpty } from "@/utils/tools";
 import { post } from "@/utils/request";
 import { REGISTER, SENDVCODE } from "./api";
+const globalPopup = inject<GlobalPopup>('globalPopup')
 const router = useRouter();
 const route = useRoute();
 const ruleFormRef = ref<FormInstance>();
@@ -152,35 +153,17 @@ const register = (formEl: FormInstance | undefined) => {
         ...route.query
       }
     }
-    // console.log(params);
     post(REGISTER, params).then(res => {
       if (res.code == "ok") {
-        ElNotification.success({
-          title: "提示",
-          message: "注册成功",
-          type: "success",
-          duration:3000,
-          onClose: () => {
-            registerLoading.value = false;
-            router.back()
-          }
-        })
+        globalPopup?.showSuccess("注册成功")
+        registerLoading.value = false;
+        router.back()
       } else {
-        ElNotification.error({
-          title: "提示",
-          message: res.message || res.msg,
-          type: "success",
-          duration: 3000,
-        })
+        globalPopup?.showError(res.message || res.msg || "注册失败")
         registerLoading.value = false;
       }
     }).catch(err => {
-      ElNotification.error({
-        title: "提示",
-        message: err.message || err.msg,
-        type: "success",
-        duration: 3000,
-      })
+      globalPopup?.showError(err.message || err.msg || "注册失败")
       registerLoading.value = false;
     })
 

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/system/dictionary/index.vue

@@ -0,0 +1,10 @@
+<template>
+<div>
+  系统字典
+</div>
+</template>
+<script lang="ts" setup>
+
+</script>
+<style lang="scss" scoped>
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/system/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped></style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/system/role/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    角色权限
+    <div>左右</div>
+    <div></div>
+  </div>
+</template>
+<script lang="ts" setup>
+
+</script>
+<style lang="scss" scoped>
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/tasks/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    任务
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped></style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/team/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    团队
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -1,4 +1,4 @@
-import { RouteRecordRaw,createRouter, createWebHistory } from "vue-router";
+import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";
 import { useStore } from "@/store/index";
 export const routes: RouteRecordRaw[] = [
   {
@@ -50,7 +50,7 @@ router.beforeEach((to, _from, next) => {
   console.log(routerList, routers);
   const { setAsyncRoutesMark, asyncRoutesMark } = useStore();
   const token = true;
-  const skipPath = ['/login', '/register', '/test', '/testEcharts']
+  const skipPath = ["/login", "/register", "/test", "/testEcharts"];
   if (skipPath.includes(to.path)) {
     next();
   } else {
@@ -58,17 +58,33 @@ router.beforeEach((to, _from, next) => {
       if (asyncRoutesMark) {
         next();
       } else {
-        setAsyncRoutesMark(true)
-        const newRouters: any = routers
-        const addNewRouter = newRouters.find((item: any) => item.name == 'home')
+        setAsyncRoutesMark(true);
+        const newRouters: any = routers;
+        const addNewRouter = newRouters.find(
+          (item: any) => item.path == "/home"
+        );
         routerList.forEach((item: any) => {
-          addNewRouter?.children.push({
-            path: item.path,
-            name: item.name,
-            meta: {},
-            component: () => import(`@/pages/${item.name}/index.vue`),
-          })
-        })
+          let filePath = item.path.split("/")[1];
+          if (item.children && item.children.length > 0) {
+            item.children.forEach((child: any) => {
+              let childFilePath = child.path.split("/")[1];
+              addNewRouter?.children.push({
+                path: child.path,
+                name: child.name,
+                meta: {},
+                component: () =>
+                  import(`@/pages/${filePath}/${childFilePath}/index.vue`),
+              });
+            });
+          } else {
+            addNewRouter?.children.push({
+              path: item.path,
+              name: item.name,
+              meta: {},
+              component: () => import(`@/pages/${filePath}/index.vue`),
+            });
+          }
+        });
         router.addRoute(addNewRouter);
         next({ ...to, replace: true });
       }

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

@@ -1,24 +1,29 @@
 import { defineStore, acceptHMRUpdate } from "pinia";
+import { RouteRecordRaw } from "vue-router";
 export const useStore = defineStore({
-    id: "index",
-    state: () => ({
-        userInfo: {}, // 当前的用户信息
-        routers: [], // 返回的所有路由
-        asyncRoutesMark: false, // 是否添加过路由
-    }),
-    getters: { // 取值
-        
+  id: "index",
+  state: () => ({
+    userInfo: {}, // 当前的用户信息
+    routers: [], // 返回的所有路由
+    asyncRoutesMark: false, // 是否添加过路由
+  }),
+  getters: {
+    // 取值
+    getRoutersList(): RouteRecordRaw[] {
+      return this.routers;
+    } 
+  },
+  actions: {
+    // 方法
+    setRouters(arr: any) {
+      this.routers = arr;
     },
-    actions: { // 方法
-        setRouters(arr: any) {
-            this.routers = arr;
-        },
-        setAsyncRoutesMark(val: boolean) {
-            this.asyncRoutesMark = val
-        }
+    setAsyncRoutesMark(val: boolean) {
+      this.asyncRoutesMark = val;
     },
-    persist: true, // 是否持久化
+  },
+  persist: true, // 是否持久化
 });
 if (import.meta.hot) {
-    import.meta.hot.accept(acceptHMRUpdate(useStore, import.meta.hot))
+  import.meta.hot.accept(acceptHMRUpdate(useStore, import.meta.hot));
 }

fhKeeper/formulahousekeeper/customerBuler-crm/src/styles/global.scss

@@ -11,4 +11,7 @@ $modena: #6F4AFE;
 }
 .text-black {
     color : $fontBlack
+}
+.back-dark {
+    background-color : $darkBlue
 }

fhKeeper/formulahousekeeper/customerBuler-crm/src/type.d.ts

@@ -1,6 +1,6 @@
-type GlobalPopup = {
-  showSuccess: (msg: string, time: number, icon: string) => void;
-  showError: (msg: string, time: number, icon: string) => void;
-  showWarning: (msg: string, time: number, icon: string) => void;
-  showInfo: (msg: string, time: number, icon: string) => void;
-};
+interface GlobalPopup extends Notify {
+  showSuccess: (message?: string) => void;
+  showError: (message?: string) => void;
+  showWarning: (message: string) => void;
+  showInfo: (message: string) => void;
+}