加入后台管理模块。

code/web/task_schedule/src/assets/css/public/color.scss

@@ -6,4 +6,6 @@ $color-bg-04: #da3703;
 $color-bg-05: #ba1800;
 
 $color-charts-bg:#ffffff9f;
-$color-honorlist-bg: rgba(255, 255, 255, 0.3);
+$color-honorlist-bg: rgba(255, 255, 255, 0.3);
+
+$banner-background-color: #1d74b2;

code/web/task_schedule/src/layout/Index.vue

@@ -0,0 +1,85 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-23 15:07:31
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/layout/index.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <div class="view-wrapper">
+        <el-container class="layout-container">
+            <el-header class="layout-header">
+                <LayoutHeader />
+            </el-header>
+            <el-container class="layout-container-down">
+                <el-aside class="layout-aside">
+                    <LayoutAside />
+                </el-aside>
+                <el-main class="layout-main">
+                    <LayoutMain />
+                </el-main>
+            </el-container>
+        </el-container>
+    </div>
+</template>
+<script lang="ts">
+// 组件
+import LayoutHeader from "./components/Header.vue";
+import LayoutAside from "./components/Aside.vue";
+import LayoutMain from "./components/Main.vue";
+
+export default {
+    name: "MainFrame",
+    components: {
+        LayoutHeader,
+        LayoutAside,
+        LayoutMain,
+    },
+    setup()
+    {
+        return {};
+    },
+};
+</script>
+<style lang="scss" scoped>
+.layout-container {
+    height: 100vh;
+    width: 100vw;
+    max-height: 100vh;
+    max-width: 100vw;
+
+    .layout-header {
+        height: 50px;
+        width: 100vw;
+        max-height: 50px;
+        max-width: 100vw;
+
+        padding: 0px;
+    }
+
+    .layout-container-down {
+        height: calc(100vh - 50px);
+        max-height: calc(100vh - 50px);
+        width: 100vw;
+        max-width: 100vw;
+
+        .layout-aside {
+            height: calc(100vh - 50px);
+            max-height: calc(100vh - 50px);
+            min-height: calc(100vh - 50px);
+            width: 200px;
+
+            overflow-x: hidden;
+
+            background-color: #2f4156;
+        }
+
+        .layout-main {
+            padding: 0px;
+            height: 100%;
+        }
+    }
+}
+</style>

code/web/task_schedule/src/layout/components/Aside.vue

@@ -0,0 +1,157 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-23 15:40:08
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/layout/components/Aside.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <el-scrollbar class="view-wrapper">
+        <el-menu
+            class="side-bar"
+            router
+            :default-active="currentPath"
+            background-color="#2f4156"
+            text-color="#fff"
+            active-text-color="#ffd04b"
+        >
+            <template v-for="route in routes">
+                <template v-if="!route.hidden">
+                    <template v-if="hasOnlyChild(route.children)">
+                        <!-- 当只有一个子路由时，将这个子路由作为顶级菜单项 -->
+                        <el-menu-item
+                            :key="route.children[0].path"
+                            :index="route.children[0].path"
+                            class="sidebar-submenu"
+                        >
+                            <component
+                                :is="route.children[0] ?? route.children[0].meta.icon"
+                                class="icons"
+                            />
+                            <template #title>
+                                {{ route.children[0].meta && route.children[0].meta.title }}
+                            </template>
+                        </el-menu-item>
+                    </template>
+                    <template v-else>
+                        <!-- 不止一个子路由，可能是咩有子路由，或者有多个子路由 -->
+                        <!-- 如果没有子路由，就不渲染 -->
+                        <el-sub-menu
+                            v-if="route.children && route.children.length"
+                            :key="route.path"
+                            :index="route.path"
+                            class="sidebar-submenu"
+                        >
+                            <template #title>
+                                <component
+                                    :is="route.meta && route.meta.icon"
+                                    class="icons"
+                                />
+                                <span>{{ route.meta && route.meta.title }}</span>
+                            </template>
+                            <template v-for="child in route.children">
+                                <el-menu-item
+                                    v-if="!child.hidden"
+                                    :key="child.path"
+                                    :index="child.path"
+                                    class="sidebar-item"
+                                >
+                                    <component
+                                        :is="child.meta && child.meta.icon"
+                                        class="icons"
+                                    />
+                                    <template #title>
+                                        {{ child.meta && child.meta.title }}
+                                    </template>
+                                </el-menu-item>
+                            </template>
+                        </el-sub-menu>
+                    </template>
+                </template>
+            </template>
+        </el-menu>
+    </el-scrollbar>
+</template>
+<script lang="js">
+// @ts-expect-error 之后再补充类型文件
+import { hasOnlyChild } from "@/router/index.js";
+import { useRoute, useRouter, RouteRecordNormalized } from "vue-router";
+import { computed } from "vue";
+
+export default {
+    name: "LayoutAside",
+    setup()
+    {
+        const router = useRouter();
+        const routes = router.getRoutes();
+
+        const currentPath = computed(() =>
+        {
+            return useRoute().path;
+        });
+
+        return { routes, currentPath, hasOnlyChild, };
+    },
+};
+</script>
+
+<style scoped>
+.view-wrapper {
+    height: 100%;
+    width: 100%;
+}
+
+.el-menu {
+    border-right: none;
+    /* border-left: 5px solid #1d74b2; */
+    overflow: auto;
+
+    -webkit-touch-callout: none;
+    -moz-user-select: none;
+    /*火狐*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10*/
+    -khtml-user-select: none;
+    /*早期浏览器*/
+    user-select: none;
+}
+
+.el-menu-item {
+    font-weight: normal;
+}
+
+.el-sub-menu {
+    font-weight: normal;
+}
+
+.sidebar-submenu {
+    background-color: #2f4156 !important;
+}
+
+.sidebar-item {
+    background-color: #223142 !important;
+}
+
+/* 顺序必须在上面两个之后*/
+.is-active {
+    /* background-color: #ffffff4f !important; */
+    /* font-weight: 1000; */
+    /* font-size: 15px; */
+    color: #ffd04b;
+}
+
+/* .is-opened {
+    border-left: 5px solid #1d74b2;
+} */
+
+.icons {
+    width: 1em;
+    height: 1em;
+    margin-right: 8px;
+}
+
+</style>

code/web/task_schedule/src/layout/components/Header.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-23 15:12:07
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/layout/components/Header.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <div class="header-wrapper">
+        <span class="company-name">CPIC</span>
+        <div class="version-wrapper">
+            <span>测试版</span>
+            <span>3.6.7 x64 Build 202208301257</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "LayoutHeader",
+    setup()
+    {
+        return {};
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.header-wrapper {
+    width: 100%;
+    height: 50px;
+    max-height: 50px;
+
+    padding: 0px 15px;
+
+    position: relative;
+
+    display: flex;
+    justify-content: start;
+    align-items: center;
+
+    color: #fff;
+    background-color: $banner-background-color;
+
+    span {
+        text-align:left;
+    }
+
+    > *+* {
+        margin-left: 10px;
+    }
+
+    .version-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: start;
+
+        font: {
+            size: 0.5rem;
+        }
+    }
+
+    .company-name {
+        font-size: 2rem;
+    }
+
+    .buttons_div {
+        margin-left: auto;
+        padding-top: 5px;
+        /* border: 1px solid salmon; */
+    }
+}
+</style>

code/web/task_schedule/src/layout/components/Main.vue

@@ -0,0 +1,47 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-23 15:44:52
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/layout/components/Main.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+ <!--
+ * @Author: Kane
+ * @Date: 2023-01-04 11:40:03
+ * @LastEditors: Kane
+ * @LastEditTime: 2023-03-21 23:19:27
+ * @FilePath: /it-console/src/layout/components/Main.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <el-scrollbar>
+        <div class="view-wrapper">
+            <router-view />
+        </div>
+    </el-scrollbar>
+</template>
+
+<script lang="ts">
+export default {
+    name: "LayoutMain",
+    setup()
+    {
+        return {};
+    },
+};
+</script>
+
+<style scoped>
+.el-scrollbar {
+    height: 100%;
+    background-color: #ecf2f9;
+}
+
+.view-wrapper {
+    padding: 10px;
+}
+</style>

code/web/task_schedule/src/main.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-02-15 09:25:52
  * @LastEditors: Kane
- * @LastEditTime: 2023-03-17 12:07:48
+ * @LastEditTime: 2023-03-23 16:32:01
  * @FilePath: /task_schedule/src/main.js
  * @Description:
  *
@@ -28,7 +28,7 @@ const app = createApp(App);
 // 注册element-plus的图标
 for (const [key, component,] of Object.entries(ElementPlusIconsVue))
 {
-  app.component(key, component);
+    app.component(key, component);
 }
 
 app.use(ElementPlus);

code/web/task_schedule/src/router/index.js

@@ -23,18 +23,64 @@ const routes = [
         hidden: true,
         component: async () => await import( "@/views/Login.vue" ),
     },
-    {
-        path: "/public",
-        name: "Public",
-        hidden: true,
-        component: async () => await import( "@/views/Public.vue" ),
-    },
+    // 桌面霸屏
     {
         path: "/desktop_archievement",
         name: "DesktopArchievement",
         hidden: true,
         component: async () => await import( "@/views/DesktopArchievement.vue" ),
     },
+    // 工作台
+    {
+        path:"/console",
+        name:"Console",
+        meta: {
+            title: "总览",
+            icon: "house",
+        },
+        component: ()=> import("../layout/Index.vue"),
+        children:[
+            {
+                path:"/desktop",
+                name:"Desktop",
+                meta: {
+                    title:"工作台",
+                    icon: "house",
+                },
+                component: ()=> import("../views/Desktop.vue"),
+            },
+        ],
+    },
+    //数据管理
+    {
+        path:"/data",
+        name:"Data",
+        meta:{
+            title:"数据管理",
+            icon: "document",
+        },
+        component: ()=> import("../layout/Index.vue"),
+        children:[
+            {
+                path:"/staff_data",
+                name:"StaffDataManagement",
+                meta: {
+                    title:"坐席管理",
+                    icon: "user",
+                },
+                component: ()=> import("../views/StaffManagement.vue"),
+            },
+            {
+                path:"/archievement_data",
+                name:"ArchievementDataManagement",
+                meta: {
+                    title:"数据管理",
+                    icon: "document",
+                },
+                component: ()=> import("../views/DataManagement.vue"),
+            },
+        ],
+    },
 ];
 
 const router = createRouter(
@@ -50,4 +96,25 @@ const router = createRouter(
 
 // });
 
-export { router };
+// 工具函数
+function hasOnlyChild( children )
+{
+    if ( !children )
+    {
+        return false;
+    }
+
+    const routes = children.filter((item)=>
+    {
+        return !item.hidden;
+    });
+
+    if ( routes.length === 1)
+    {
+        return true;
+    }
+
+    return false;
+}
+
+export { router, hasOnlyChild };

code/web/task_schedule/src/style.css

@@ -1,8 +1,8 @@
-html {
+/* html {
     background-image: url("@/assets/img/bg/bg_01.jpg");
     background-attachment: fixed;
     background-size: contain;
-}
+} */
 
 body {
     width: 100vw;

code/web/task_schedule/src/utils/api/localStorage.ts

@@ -10,6 +10,7 @@
 import { StaffInfo } from "@/data/cpicxim/StaffInfo.js";
 
 const STUFF_ITEM = "stuff_info";
+const USER_TYPE_ITEM = "user_type";
 
 function loadStaffInfo(): StaffInfo
 {
@@ -48,4 +49,22 @@ function cleanStaffInfo(): void
     window.localStorage.removeItem( STUFF_ITEM );
 }
 
-export { loadStaffInfo, saveStaffInfo, cleanStaffInfo };
+function saveUserType( userType: string ): void
+{
+    window.localStorage.setItem( USER_TYPE_ITEM, userType );
+}
+
+function getUserType(): string
+{
+    const userType = window.localStorage.getItem( USER_TYPE_ITEM ) ?? "";
+
+    return userType;
+}
+
+export {
+    loadStaffInfo,
+    saveStaffInfo,
+    cleanStaffInfo,
+    saveUserType,
+    getUserType
+};

code/web/task_schedule/src/views/DataManagement.vue

@@ -0,0 +1,26 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-23 16:05:08
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/views/DataManagemant.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <div>
+        数据管理
+    </div>
+</template>
+<script lang="ts">
+export default {
+    name: "DataManagement",
+    setup()
+    {
+        return {};
+    },
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

code/web/task_schedule/src/views/Desktop.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-23 16:05:08
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/views/Desktop.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <div>工作台</div>
+</template>
+<script lang="ts">
+export default {
+    name: "DeskTop",
+    setup()
+    {
+        return {};
+    },
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

code/web/task_schedule/src/views/Login.vue

@@ -67,7 +67,7 @@
 <script lang="ts">
 import { reactive, onBeforeMount } from "vue";
 import { useRouter } from "vue-router";
-import { loadStaffInfo, saveStaffInfo } from "@/utils/api/localStorage";
+import { loadStaffInfo, saveStaffInfo, getUserType, saveUserType } from "@/utils/api/localStorage";
 import { login } from "@/utils/account";
 import { ElMessage } from "element-plus";
 import { StaffInfo } from "@/data/cpicxim/StaffInfo";
@@ -98,57 +98,69 @@ export default {
 
         const onLogin = () =>
         {
-            const info = {
-                p13account: ui.account,
-                password: ui.password,
-            };
+            // 保存用户类型
+            saveUserType(ui.currentMenu);
 
-            login(info)
-                .then((response) =>
-                {
-                    // debugger;
-                    const data = response.data ?? { success: false, };
+            // 判断是坐席还是内勤
+            if (ui.currentMenu === "cpicxim_staff")
+            {
+                // 是内勤员工
+                const info = {
+                    p13account: ui.account,
+                    password: ui.password,
+                };
 
-                    if (data.success === true)
+                login(info)
+                    .then((response) =>
                     {
+                        const data = response.data ?? { success: false, };
+
+                        if (data.success === true)
+                        {
                         // 提示登录成功，并保存到localStorage，然后路由跳转
-                        ElMessage({
-                            message: data.message,
-                            type: "success",
-                            center: true,
-                        });
+                            ElMessage({
+                                message: data.message,
+                                type: "success",
+                                center: true,
+                            });
 
-                        const staffInfo = new StaffInfo(
-                            data.staff_info.p13uid ?? "",
-                            data.staff_info.code ?? "",
-                            data.staff_info.name ?? "",
-                            data.staff_info.department_code ?? "",
-                            data.staff_info.department_name ?? "",
-                            data.staff_info.section_office_code ?? "",
-                            data.staff_info.p13section_office_nameuid ?? ""
-                        );
+                            const staffInfo = new StaffInfo(
+                                data.staff_info.p13uid ?? "",
+                                data.staff_info.code ?? "",
+                                data.staff_info.name ?? "",
+                                data.staff_info.department_code ?? "",
+                                data.staff_info.department_name ?? "",
+                                data.staff_info.section_office_code ?? "",
+                                data.staff_info.p13section_office_nameuid ?? ""
+                            );
 
-                        saveStaffInfo(staffInfo);
+                            saveStaffInfo(staffInfo);
 
-                        // 跳转路由
-                        router.push("/desktop_archievement");
-                    }
-                    else
+                            // 跳转路由
+                            router.push("/desktop");
+                        }
+                        else
+                        {
+                            ElMessage({
+                                message: data.message,
+                                type: "error",
+                                center: true,
+                            });
+                        }
+
+                        console.log(data);
+                    })
+                    .catch((error) =>
                     {
-                        ElMessage({
-                            message: data.message,
-                            type: "error",
-                            center: true,
-                        });
-                    }
+                        debugger;
+                        console.log(`登录失败，返回信息：${error}`);
+                    });
+            }
+            else if (ui.currentMenu === "tele_saler")
+            {
+                // 坐席
 
-                    console.log(data);
-                })
-                .catch((error) =>
-                {
-                    debugger;
-                    console.log(`登录失败，返回信息：${error}`);
-                });
+            }
         };
 
         onBeforeMount(() =>
@@ -165,7 +177,7 @@ export default {
                 });
 
                 // 跳转路由
-                router.push("/desktop_archievement");
+                // router.push("/desktop_archievement");
             }
         });
 

code/web/task_schedule/src/views/StaffManagement.vue

@@ -0,0 +1,26 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-23 16:05:08
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/views/DataManagemant.vue
+ * @Description:
+ *
+ * Copyright (c) ${2022} by Kane, All Rights Reserved.
+-->
+<template>
+    <div>
+        人员管理
+    </div>
+</template>
+<script lang="ts">
+export default {
+    name: "StaffManagement",
+    setup()
+    {
+        return {};
+    },
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

code/web/task_schedule/vite.config.js

@@ -15,33 +15,33 @@ import path from "path";
 // https://vitejs.dev/config/
 export default defineConfig((command, mode) =>
 {
-  const env = loadEnv(mode, process.cwd(), "");
+    const env = loadEnv(mode, process.cwd(), "");
 
-  return {
-    plugins: [vue(),],
-    base: "./",
-    resolve: {
-      //配置别名
-      alias: [
-        {
-          find: /^~/,
-          replacement: "",
+    return {
+        plugins: [vue(),],
+        base: "./",
+        resolve: {
+            //配置别名
+            alias: [
+                {
+                    find: /^~/,
+                    replacement: "",
+                },
+                {
+                    find: "@",
+                    replacement: path.resolve(__dirname, "src"),
+                },
+            ],
         },
-        {
-          find: "@",
-          replacement: path.resolve(__dirname, "src"),
+        define: {
+            __APP_ENV__: env.APP_ENV,
         },
-      ],
-    },
-    define: {
-      __APP_ENV__: env.APP_ENV,
-    },
-    css: {
-      preprocessorOptions: {
-        scss: {
-          additionalData: "@import \"./src/assets/css/public/color.scss\";",
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    additionalData: "@import \"./src/assets/css/public/color.scss\";",
+                },
+            },
         },
-      },
-    },
-  };
+    };
 });