├── .gitignore
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── global.css
    │   └── logo.png
    ├── components
    │   ├── Aside.vue
    │   └── Header.vue
    ├── config
    │   └── axiosConfig.js
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    ├── styles.scss
    ├── template
    │   └── 用户信息导入模板.xlsx
    └── views
    │   ├── error-pages
    │       └── Not404.vue
    │   └── pages
    │       ├── CheckAdmin.vue
    │       ├── CheckAdminHistory.vue
    │       ├── CheckUser.vue
    │       ├── CheckUserHistory.vue
    │       ├── Home.vue
    │       ├── Login.vue
    │       ├── Manage.vue
    │       ├── Right.vue
    │       ├── RightDataShow.vue
    │       ├── Role.vue
    │       ├── RoleDataShow.vue
    │       ├── User.vue
    │       ├── UserDataShow.vue
    │       └── UserInfo.vue
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## attendance_management_vue
 2 | ## 基于SpringBoot的学生考勤系统前端设计
 3 | ### 热词：Vue、Element UI、Echarts
 4 | 
 5 | 
 6 | ### 1、、运行环境：
 7 | Nodejs v16
 8 | 
 9 | ### 2、简介
10 | + 这个项目是前端项目，项目所需文件都在下面。<br>
11 | + 免编译使用方法
12 |   + 安装serve插件：`npm install -g serve`
13 |   + [点此下载](https://github.com/WongSilver/attendance_management_vue/releases/tag/v0.0.1) 打包好的项目  。解压，在**dist父目录** **dist父目录** **dist父目录**中运行命令：`serve -s dist` <br>
14 | + 正常使用方法：
15 |   + 项目安装 `npm install` 报错的话用NodeJS14的长期维护版 `https://nodejs.org/download/release/v14.19.1/`
16 |   + 项目运行 `npm run serve` 报错的话安装 `npm install node-sass`, 详细看下一步
17 |   + **有同学安装过程中可能遇到`node-sass`安装失败, 可以参考链接的解决方案 [点此访问](https://blog.csdn.net/kingslave1/article/details/130526329)**
18 | + 后端项目地址 [点此访问](https://github.com/WongSilver/attendance_management_api)
19 | 
20 | 
21 | ## [后端项目](https://github.com/WongSilver/attendance_management_api)包含了部分演示效果，有问题咨询 QQ:783244553
22 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "attendance_management_vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "axios": "^0.26.1",
11 |     "core-js": "^3.8.3",
12 |     "echarts": "^5.3.2",
13 |     "element-ui": "^2.3.6",
14 |     "sass-resources-loader": "^2.2.4",
15 |     "vue": "^2.6.14",
16 |     "vue-router": "^3.5.1",
17 |     "vuex": "^3.6.2",
18 |     "webpack": "^5.70.0"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "~5.0.0",
22 |     "@vue/cli-plugin-router": "~5.0.0",
23 |     "@vue/cli-plugin-vuex": "~5.0.0",
24 |     "@vue/cli-service": "~5.0.0",
25 |     "node-sass": "^7.0.1",
26 |     "sass-loader": "^12.6.0",
27 |     "vue-cli-plugin-element-ui": "~1.1.4",
28 |     "vue-template-compiler": "^2.6.14"
29 |   },
30 |   "browserslist": [
31 |     "> 1%",
32 |     "last 2 versions",
33 |     "not dead"
34 |   ]
35 | }
36 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WongSilver/attendance_management_vue/24d3f8d185366e62295c9a1fe5c500173ddfe948/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | #app {
 9 |   min-height: 100vh;
10 | }
11 | </style>
12 | 


--------------------------------------------------------------------------------
/src/assets/global.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | html, body {
 8 |     height: 100%;
 9 | }
10 | 
11 | .mr-5 {
12 |     margin-right: 5px;
13 | }
14 | 
15 | .ml-5 {
16 |     margin-left: 5px;
17 | }
18 | 
19 | .m-2 {
20 |     margin: 2px;
21 | }
22 | 
23 | .pd-10 {
24 |     padding: 10px 0;
25 | }
26 | 
27 | 
28 | /*全局设置 header main footer*/
29 | #app {
30 |     position: absolute;
31 |     top: 0;
32 |     left: 0;
33 |     height: 100%;
34 |     width: 100%;
35 |     padding: 0;
36 |     margin: 0;
37 | }
38 | 
39 | .el-container {
40 |     height: 100vh;
41 | }
42 | 
43 | .el-header {
44 |     background-color: #428675;
45 |     text-align: center;
46 |     height: 20%;
47 | }
48 | 
49 | .el-main {
50 |     background-color: #c6e6e8;
51 |     text-align: center;
52 | }
53 | 
54 | .el-footer {
55 |     background-color: #428675;
56 |     color: #333;
57 |     vertical-align: bottom;
58 |     text-align: center;
59 | }


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WongSilver/attendance_management_vue/24d3f8d185366e62295c9a1fe5c500173ddfe948/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Aside.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-menu class="demo" style="height: 100%;overflow-x: hidden; min-height: 100%; "
 3 |            text-color="#c6e6e8"
 4 |            width="200px"
 5 |            background-color="#1ba784"
 6 |            active-text-color="#1a6840"
 7 |            :collapse-transition="false"
 8 |            :collapse="isCollapse"
 9 |            :style="{color:iconColor}"
10 |            router>
11 | 
12 |     <div style="height: 60px; line-height: 60px; text-align: center">
13 |       <img src="../assets/logo.png" alt="LOGO"
14 |            style="width: 20px; position: relative; top: 3px; margin-right: 5px">
15 |       <b style="color: #c6e6e8" v-show="!isCollapse">考勤管理系统</b>
16 |     </div>
17 | 
18 | 
19 |     <!--TODO-->
20 |     <!--想做成二级菜单，有思路，试了几次无果，就使用一级菜单-->
21 |     <div v-for="item in rights" :key="item.id">
22 |       <el-menu-item :index="item.url">
23 |         <i :style="{color:iconColor}" :class="item.icon"></i>
24 |         <span slot="title">{{ item.name }}</span>
25 |       </el-menu-item>
26 |     </div>
27 | 
28 |   </el-menu>
29 | </template>
30 | <script>
31 | export default {
32 |   name: "Aside",
33 |   data() {
34 |     return {
35 |       iconColor: '#c6e6e8',
36 |       rights: JSON.parse(sessionStorage.getItem("userInfo")) === null ? this.getInfo() : JSON.parse(sessionStorage.getItem("userInfo")).rights
37 |     }
38 |   },
39 |   props: {
40 |     isCollapse: Boolean,
41 |   },
42 |   methods: {
43 |     getInfo() {
44 |       if (sessionStorage.getItem("userInfo") === null) {
45 |         this.$axios.get("/user/info").then(res => {
46 |           this.$store.commit("SET_USERINFO", res.data.data);
47 |           location.reload();
48 |         })
49 |       }
50 |     }
51 |   }
52 | }
53 | </script>
54 | <style>
55 | .el-scrollbar {
56 |   height: 100%;
57 | }
58 | 
59 | .el-scrollbar__wrap {
60 |   overflow-x: hidden;
61 | }
62 | 
63 | .el-menu {
64 |   border-right-width: 0 !important;
65 | }
66 | 
67 | .el-submenu__title i {
68 |   color: #c6e6e8 !important;
69 | }
70 | </style>


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="font-size: 12px;display: flex;line-height: 60px;width: 100%;justify-content:space-between">
 3 |     <div style="display: flex;justify-content:flex-start;font-size: 18px;text-align: left;">
 4 |       <span :class="collapseBtnClass" style="cursor: pointer; color: #c6e6e8; line-height: 60px"
 5 |             @click="collapse"></span>
 6 |       <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 60px; padding-left: 20px;">
 7 |         <el-breadcrumb-item :to="{ path: breadcrumb.path }">{{ breadcrumb.name }}</el-breadcrumb-item>
 8 |       </el-breadcrumb>
 9 |     </div>
10 |     <div style="justify-content:flex-end">
11 |       <el-dropdown style="width: 120px;cursor: pointer;" trigger="click">
12 |         <span>{{this.userName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
13 |         <el-dropdown-menu slot="dropdown">
14 |           <el-dropdown-item><span @click="userInfo">个人信息</span></el-dropdown-item>
15 |           <el-dropdown-item><span @click="logout">退出登录</span></el-dropdown-item>
16 |         </el-dropdown-menu>
17 |       </el-dropdown>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: "Header",
25 |   props: {
26 |     collapseBtnClass: String,
27 |     collapse: null,
28 |   },
29 |   data() {
30 |     return {
31 |       userName: JSON.parse(sessionStorage.getItem("userInfo")) === null ? "未登录" : JSON.parse(sessionStorage.getItem("userInfo")).userName,
32 |     }
33 |   },
34 |   methods: {
35 |     logout() {
36 |       this.$router.push("/login");
37 |       this.$store.commit("REMOVE_INFO");
38 |     },
39 |     userInfo() {
40 |       this.$router.push("/userInfo")
41 |     }
42 |   },
43 |   computed: {
44 |     //TODO 面包屑未实现全部功能
45 |     breadcrumb() {
46 |       return this.$route.meta;
47 |     }
48 |   },
49 | };
50 | </script>
51 | 
52 | <style>
53 | .el-dropdown, .el-breadcrumb__inner {
54 |   color: #c6e6e8 !important;
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/src/config/axiosConfig.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | import ElementUI from "element-ui";
 3 | import router from "../router";
 4 | import store from "../store";
 5 | 
 6 | // 配置基础路由路径
 7 | axios.defaults.baseURL = "http://127.0.0.1:8088/"
 8 | 
 9 | // 前置拦截
10 | axios.interceptors.request.use(config => {
11 |     config.headers['Content-Type'] = 'application/json;charset=utf-8';
12 |     if (localStorage.getItem("token") !== null) {
13 |         config.headers['authorization'] = localStorage.getItem("token");
14 |     } else if ((localStorage.getItem("token") === null)) {
15 |         router.push("/login")
16 |     }
17 | 
18 |     return config
19 | })
20 | 
21 | // 后置拦截
22 | axios.interceptors.response.use(response => {
23 |         let res = response.data;
24 |         let msg = res.msg;
25 | 
26 |         //返回文件
27 |         if (response.config.responseType === 'blob') {
28 |             return res
29 |         }
30 |         //判断状态码是否成功
31 |         if (res.code === 200) {
32 |             return response
33 |         } else if (res.code === 999) {
34 |             msg = "token已失效，请重新登录"
35 |             store.commit("REMOVE_INFO")
36 |             router.push("/login")
37 |         } else if (res.code === 233) {
38 |             msg = "无权限"
39 |         } else if (res.code === 401) {
40 |             msg = "未授权异常，请重新登录"
41 |             router.push("/login")
42 |         }
43 |         ElementUI.Message.error(msg, {duration: 3 * 100})
44 |         return Promise.reject(res.msg)
45 | 
46 |     },
47 | 
48 |     // 处理后端没有定义的错误
49 |     error => {
50 |         let response = error.response;
51 |         let msg;
52 |         if (response.status === 401) {
53 |             store.commit("REMOVE_INFO")
54 |             msg = "未授权异常，请重新登录"
55 |             router.push("/login")
56 |         } else if(response.status === 500){
57 |             store.commit("REMOVE_INFO")
58 |             msg = "未知错误，请重新登录"
59 |             router.push("/login")
60 |         }else {
61 |             msg = "未知错误"
62 |         }
63 |         ElementUI.Message.error(msg, {duration: 3 * 1000})
64 |         return Promise.reject(res.msg)
65 |     }
66 | )


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import store from "./store";
 5 | import ElementUI from "element-ui";
 6 | import axios from "axios";
 7 | import "./styles.scss";
 8 | import "./config/axiosConfig"
 9 | import "./assets/global.css"
10 | 
11 | // 全局使用ele
12 | Vue.use(ElementUI, {size: "small"});
13 | 
14 | Vue.config.productionTip = false;
15 | 
16 | // 添加http请求库
17 | Vue.prototype.$axios = axios;
18 | 
19 | // 设置标题
20 | router.beforeEach((to,from,next) =>{
21 |     if(to.meta.name){
22 |         document.title = to.meta.name
23 |     }
24 |     next();
25 | })
26 | 
27 | new Vue({
28 |     router,
29 |     store,
30 |     render: (h) => h(App),
31 | }).$mount("#app");
32 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from "vue";
  2 | import VueRouter from "vue-router";
  3 | import Manage from "../views/pages/Manage.vue";
  4 | import Home from "../views/pages/Home.vue";
  5 | import Login from "../views/pages/Login.vue";
  6 | import User from "../views/pages/User.vue";
  7 | import UserInfo from "../views/pages/UserInfo.vue";
  8 | import Role from "../views/pages/Role.vue";
  9 | import Right from "../views/pages/Right.vue";
 10 | import CheckUser from "../views/pages/CheckUser.vue";
 11 | import CheckAdmin from "../views/pages/CheckAdmin.vue";
 12 | import CheckUserHistory from "../views/pages/CheckUserHistory.vue";
 13 | import CheckAdminHistory from "../views/pages/CheckAdminHistory.vue";
 14 | import Not404 from "../views/error-pages/Not404.vue";
 15 | 
 16 | Vue.use(VueRouter);
 17 | 
 18 | const routes = [
 19 |     {path: "/login", name: "Login", component: Login,meta: {name: "登录", path: "/login"}},
 20 | 
 21 |     //TODO 先用固定路由，动态路由后期完善
 22 |     {
 23 |         path: "/",
 24 |         name: "Manage",
 25 |         component: Manage,
 26 |         redirect: "/home",
 27 |         children: [
 28 |             {path: "/", name: "home", component: Home, meta: {name: "首页", path: "/home"}},
 29 |             {path: "home", name: "Home", component: Home, meta: {name: "首页", path: "/home"}},
 30 |             {path: "user", name: "User", component: User, meta: {name: "用户列表", path: "/user"}},
 31 |             {path: "role", name: "role", component: Role, meta: {name: "角色列表", path: "/role"}},
 32 |             {path: "right", name: "right", component: Right, meta: {name: "权限列表", path: "/right"}},
 33 |             {path: "userInfo", name: "userInfo", component: UserInfo, meta: {name: "个人信息", path: "/userInfo"}},
 34 |             {path: "checkUser", name: "checkUser", component: CheckUser, meta: {name: "我要请假", path: "/checkUser"}},
 35 |             {path: "checkAdmin", name: "checkAdmin", component: CheckAdmin, meta: {name: "请假名单", path: "/checkAdmin"}},
 36 |             {
 37 |                 path: "checkAdminHistory",
 38 |                 name: "checkAdminHistory",
 39 |                 component: CheckAdminHistory,
 40 |                 meta: {name: "批假记录", path: "/checkAdminHistory"}
 41 |             },
 42 |             {
 43 |                 path: "checkUserHistory",
 44 |                 name: "checkUserHistory",
 45 |                 component: CheckUserHistory,
 46 |                 meta: {name: "请假记录", path: "/checkUserHistory"}
 47 |             },
 48 |             // 其他页面未定义的页面访问404
 49 |             { path: "*", name: 'not404', component: {Not404}, meta: {name: "页面未找到",path: "/404"}}
 50 |         ],
 51 |     }];
 52 | 
 53 | const router = new VueRouter({
 54 |     mode: "history", //去除#号键
 55 |     routes,
 56 | });
 57 | 
 58 | /**
 59 |  * TODO
 60 |  * 动态路由未完成，先用固定路由，后期完善
 61 |  */
 62 | // export const setRouter = () => {
 63 | //     const storeRights = sessionStorage.getItem("userInfo") ? JSON.parse(sessionStorage.getItem("userInfo")).rights : []
 64 | //     if (storeRights) {
 65 | //         // console.log(storeRights)
 66 | //         const manageRouter = {path: "/", name: "Manage", component: Manage, redirect: "/home", children: []}
 67 | //         storeRights.forEach(item => {
 68 | //             let itemRight = {
 69 | //                 path: item.url.replace("/", ""),
 70 | //                 name: item.name,
 71 | //                 component: () => import("../views/pages/" + item.pagePath + ".vue"),
 72 | //                 meta: {name: item.name, path: item.url.replace("/", "")}
 73 | //             }
 74 | //             manageRouter.children.push(itemRight)
 75 | //         })
 76 | //         // console.log(manageRouter)
 77 | //         const names = router.getRoutes().map(v => v.name);
 78 | //         if (!names.includes("Manage")) {
 79 | //             router.addRoute(manageRouter);
 80 | //         }
 81 | //     }
 82 | // }
 83 | 
 84 | // 路由守卫
 85 | // let registerRouteFresh = true
 86 | // router.beforeEach(async (to, from, next) => {
 87 | //     // 如果首次或者刷新界面，next(...to, replace: true)会循环遍历路由，如果to找不到对应的路由那么他会再执行一次beforeEach((to, from, next))直到找到对应的路由，我们的问题在于页面刷新以后异步获取数据，直接执行next()感觉路由添加了但是在next()之后执行的，所以我们没法导航到相应的界面。这里使用变量registerRouteFresh变量做记录，直到找到相应的路由以后，把值设置为false然后走else执行next(),整个流程就走完了，路由也就添加完了。
 88 | //     if (registerRouteFresh) {
 89 | //         setRouter()
 90 | //         next({...to, replace: true})
 91 | //         registerRouteFresh = false
 92 | //     } else {
 93 | //         next()
 94 | //     }
 95 | // })
 96 | 
 97 | // 解决路由重复的问题
 98 | const originalPush = VueRouter.prototype.push
 99 | VueRouter.prototype.push = function push(location) {
100 |     return originalPush.call(this, location).catch(err => err)
101 | }
102 | export default router;
103 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |     token: localStorage.getItem("token"),
 9 |     userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
10 |   },
11 |   getters: {
12 |     // 相当于Java里的get
13 |     getUserInfo: state => {
14 |       return state.userInfo
15 |     },
16 |     getToken:state=>{
17 |       return state.token
18 |     }
19 |   },
20 |   mutations: {
21 |     // 相当于Java里的set
22 |     SET_TOKEN: (state, token) => {
23 |       state.token = token
24 |       localStorage.setItem("token", token)
25 |     },
26 |     SET_USERINFO: (state, userInfo) => {
27 |       state.userInfo = userInfo
28 |       sessionStorage.setItem("userInfo", JSON.stringify(userInfo)) //序列化存入浏览器会话中
29 |     },
30 |     REMOVE_INFO(state) {
31 |       state.token = ''
32 |       state.userInfo = {}
33 |       localStorage.removeItem("token")
34 |       sessionStorage.removeItem("userInfo")
35 |     }
36 |   },
37 |   actions: {},
38 |   modules: {}
39 | })


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* theme color */
2 | $--color-primary: teal;
3 | 
4 | /* icon font path, required */
5 | $--font-path: '~element-ui/lib/theme-chalk/fonts';
6 | 
7 | @import "~element-ui/packages/theme-chalk/src/index";
8 | 


--------------------------------------------------------------------------------
/src/template/用户信息导入模板.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WongSilver/attendance_management_vue/24d3f8d185366e62295c9a1fe5c500173ddfe948/src/template/用户信息导入模板.xlsx


--------------------------------------------------------------------------------
/src/views/error-pages/Not404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-empty style="height:100%;line-height: 100%" description="404 找不到页面"></el-empty>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "not404",
 8 | }
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/src/views/pages/CheckAdmin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="infinite-list" style="overflow:auto">
 3 |     <li v-for="item in checks" class="infinite-list-item" style="margin: 0 auto;display: inline">
 4 |       <el-collapse-transition>
 5 |         <el-card style="width: 45%; margin: 10px auto; min-width: 250px" v-if="show[item.id]">
 6 |           <el-descriptions class="margin-top" title="请假单" :column="1" border>
 7 |             <template slot="extra">
 8 |               <el-button type="success" size="small" @click="agree(item.id)">同意
 9 |               </el-button>
10 |               <el-button type="danger" size="small" @click="refuse((item.id))">拒绝</el-button>
11 |             </template>
12 |             <el-descriptions-item>
13 |               <template slot="label"><i class="el-icon-user"></i> 学生名</template>
14 |               {{ item.userName }}
15 |             </el-descriptions-item>
16 |             <el-descriptions-item>
17 |               <template slot="label"><i class="el-icon-mobile-phone"></i> 请假时间</template>
18 |               {{ item.startDate }}
19 |             </el-descriptions-item>
20 |             <el-descriptions-item>
21 |               <template slot="label"><i class="el-icon-location-outline"></i> 结束时间</template>
22 |               {{ item.endDate }}
23 |             </el-descriptions-item>
24 |             <el-descriptions-item>
25 |               <template slot="label"><i class="el-icon-tickets"></i> 请假原因</template>
26 |               <el-tag size="small">{{ item.type }}</el-tag>
27 |             </el-descriptions-item>
28 |             <el-descriptions-item>
29 |               <template slot="label"><i class="el-icon-office-building"></i> 详细说明</template>
30 |               {{ item.description }}
31 |             </el-descriptions-item>
32 |           </el-descriptions>
33 |         </el-card>
34 |       </el-collapse-transition>
35 |     </li>
36 |   </ul>
37 | </template>
38 | 
39 | <script>
40 | export default {
41 |   name: "CheckAdmin",
42 |   data() {
43 |     return {
44 |       checks: {},
45 |       show: [],
46 |       userId: JSON.parse(sessionStorage.getItem("userInfo")).userGroup,
47 |     }
48 |   },
49 |   created() {
50 |     this.loadData()
51 |   },
52 |   // mounted() {
53 |   //   this.loadData()
54 |   // },
55 |   methods: {
56 |     agree(id) {
57 |       this.$set(this.show, id, false)
58 |       this.$axios.get("/check/read", {params: {id: id, yorn: 1,}}).then(res => {
59 |         // this.loadData()
60 |       })
61 |     },
62 |     refuse(id) {
63 |       this.$set(this.show, id, false)
64 |       this.$axios.get("/check/read", {params: {id: id, yorn: -1,}}).then(res => {
65 |         // this.loadData()
66 |       })
67 |     },
68 |     loadData() {
69 |       this.$axios.get("/check/list/" + this.userId).then(res => {
70 |         this.checks = res.data.data;
71 |         for (let i = 0; i < this.checks.length; i++) {
72 |           this.show[this.checks[i].id] = true;
73 |         }
74 |       })
75 |     }
76 |   },
77 | 
78 | }
79 | </script>
80 | 
81 | <style scoped>
82 | li{
83 |   padding: 0!important;
84 | }
85 | </style>


--------------------------------------------------------------------------------
/src/views/pages/CheckAdminHistory.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="infinite-list" style="overflow:auto">
 3 |     <li v-for="item in checks" class="infinite-list-item" style="width: 100%;margin: 0 auto">
 4 |       <el-card style="width: 45%; margin: 10px auto;min-width: 300px">
 5 |         <el-descriptions class="margin-top" title="请假单" :column="1" border>
 6 |           <template slot="extra">
 7 | <!--            <el-button type="primary" size="small">操作</el-button>-->
 8 |           </template>
 9 |           <el-descriptions-item>
10 |             <template slot="label"><i class="el-icon-user"></i> 学生名</template>
11 |             {{ item.userName }}
12 |           </el-descriptions-item>
13 |           <el-descriptions-item>
14 |             <template slot="label"><i class="el-icon-mobile-phone"></i> 请假时间</template>
15 |             {{ item.startDate }}
16 |           </el-descriptions-item>
17 |           <el-descriptions-item>
18 |             <template slot="label"><i class="el-icon-location-outline"></i> 结束时间</template>
19 |             {{ item.endDate }}
20 |           </el-descriptions-item>
21 |           <el-descriptions-item>
22 |             <template slot="label"><i class="el-icon-tickets"></i> 请假原因</template>
23 |             <el-tag size="small">{{ item.type }}</el-tag>
24 |           </el-descriptions-item>
25 |           <el-descriptions-item>
26 |             <template slot="label"><i class="el-icon-office-building"></i> 详细说明</template>
27 |             {{ item.description }}
28 |           </el-descriptions-item>
29 |           <el-descriptions-item>
30 |             <template slot="label"><i class="el-icon-office-building"></i> 教师意见</template>
31 |             <el-tag :type="typeData[item.yorn]">{{ yORnsData[item.yorn] }}</el-tag>
32 |           </el-descriptions-item>
33 |         </el-descriptions>
34 |       </el-card>
35 |     </li>
36 |   </ul>
37 | </template>
38 | <script>
39 | export default {
40 |   name: "CheckAdminHistory",
41 |   data() {
42 |     return {
43 |       checks: {},
44 |       userId: JSON.parse(sessionStorage.getItem("userInfo")).userGroup,
45 |       yORnsData: {
46 |         '-1': '拒绝',
47 |         '0': '待批阅',
48 |         '1': '同意'
49 |       },
50 |       typeData: {
51 |         '-1': 'danger',
52 |         '0': 'info',
53 |         '1': 'success'
54 |       }
55 |     }
56 |   },
57 |   created() {
58 |     this.$axios.get("/check/groupHistory/" + this.userId).then(res => {
59 |       this.checks = res.data.data;
60 |     })
61 |   },
62 | }
63 | </script>
64 | 
65 | <style scoped>
66 | </style>


--------------------------------------------------------------------------------
/src/views/pages/CheckUser.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-card style="width: 600px;margin: 0 auto">
  3 |     <el-form ref="form" :model="form" label-width="80px">
  4 |       <el-form-item label="请假原因">
  5 |         <el-radio-group v-model="form.type">
  6 |           <el-radio label="事假"></el-radio>
  7 |           <el-radio label="病假"></el-radio>
  8 |         </el-radio-group>
  9 |       </el-form-item>
 10 |       <el-form-item label="开始时间">
 11 |         <el-date-picker
 12 |             v-model="form.startDate"
 13 |             type="datetime"
 14 |             placeholder="选择日期时间"
 15 |             :picker-options="pickerOptions">
 16 |         </el-date-picker>
 17 |       </el-form-item>
 18 |       <el-form-item label="结束时间">
 19 |         <el-date-picker
 20 |             v-model="form.endDate"
 21 |             type="datetime"
 22 |             placeholder="选择日期时间"
 23 |             :picker-options="pickerOptions">
 24 |         </el-date-picker>
 25 |       </el-form-item>
 26 |       <el-form-item label="详细说明">
 27 |         <el-input type="textarea" v-model="form.description"></el-input>
 28 |       </el-form-item>
 29 |       <el-form-item>
 30 |         <el-button type="primary" @click="onSubmit" :loading="visible">立即创建</el-button>
 31 |       </el-form-item>
 32 |     </el-form>
 33 |   </el-card>
 34 | </template>
 35 | 
 36 | <script>
 37 | import ElementUI from "element-ui";
 38 | 
 39 | export default {
 40 |   name: "CheckUser",
 41 |   data() {
 42 |     return {
 43 |       visible: false,
 44 |       form: {
 45 |         type: '',
 46 |         startDate: '',
 47 |         endDate: '',
 48 |         description: '',
 49 |       },
 50 |       pickerOptions: {
 51 |         shortcuts: [{
 52 |           text: '今天',
 53 |           onClick(picker) {
 54 |             picker.$emit('pick', new Date());
 55 |           }
 56 |         }, {
 57 |           text: '明天',
 58 |           onClick(picker) {
 59 |             const date = new Date();
 60 |             date.setTime(date.getTime() + 3600 * 1000 * 24);
 61 |             picker.$emit('pick', date);
 62 |             console.log(date)
 63 |           }
 64 |         }, {
 65 |           text: '三天后',
 66 |           onClick(picker) {
 67 |             const date = new Date();
 68 |             date.setTime(date.getTime() + 3600 * 1000 * 24 * 3);
 69 |             picker.$emit('pick', date);
 70 |           }
 71 |         }]
 72 |       },
 73 |     }
 74 |   },
 75 |   methods: {
 76 |     onSubmit() {
 77 |       this.visible = true;
 78 |       this.form.userId = JSON.parse(sessionStorage.getItem("userInfo")).userId
 79 |       this.form.groupId = JSON.parse(sessionStorage.getItem("userInfo")).userGroup
 80 | 
 81 |       console.log(this.form.startDate)
 82 | 
 83 |       this.$axios.post("/check/create", this.form).then(res => {
 84 |         this.visible = false;
 85 |         if (res.data.code === 200) {
 86 |           ElementUI.Message.success(res.data.data)
 87 |         }
 88 |       }).catch(() => {
 89 |         //超时响应
 90 |         setTimeout(() => {
 91 |           this.visible = false;
 92 |           ElementUI.Message.error("网络请求失败");
 93 |         }, 2000)
 94 |       })
 95 |     },
 96 |   }
 97 | }
 98 | 
 99 | </script>
100 | 
101 | <style scoped>
102 | </style>


--------------------------------------------------------------------------------
/src/views/pages/CheckUserHistory.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="infinite-list" style="overflow:auto">
 3 |     <li v-for="item in checks" class="infinite-list-item" style="width: 100%;margin: 0 auto">
 4 |       <el-card style="width: 900px; margin: 10px auto">
 5 |         <el-descriptions class="margin-top" title="请假单" :column="1" border>
 6 |           <template slot="extra">
 7 |           </template>
 8 |           <el-descriptions-item>
 9 |             <template slot="label"><i class="el-icon-mobile-phone"></i> 请假时间</template>
10 |             {{ item.startDate }}
11 |           </el-descriptions-item>
12 |           <el-descriptions-item>
13 |             <template slot="label"><i class="el-icon-location-outline"></i> 结束时间</template>
14 |             {{ item.endDate }}
15 |           </el-descriptions-item>
16 |           <el-descriptions-item>
17 |             <template slot="label"><i class="el-icon-tickets"></i> 请假原因</template>
18 |             <el-tag size="small">{{ item.type }}</el-tag>
19 |           </el-descriptions-item>
20 |           <el-descriptions-item>
21 |             <template slot="label"><i class="el-icon-office-building"></i> 详细说明</template>
22 |             {{ item.description }}
23 |           </el-descriptions-item>
24 |           <el-descriptions-item>
25 |             <template slot="label"><i class="el-icon-office-building"></i> 教师意见</template>
26 |             <el-tag :type="typeData[item.yorn]">{{ yORnsData[item.yorn] }}</el-tag>
27 |           </el-descriptions-item>
28 |         </el-descriptions>
29 |       </el-card>
30 |     </li>
31 |   </ul>
32 | </template>
33 | <script>
34 | export default {
35 |   name: "CheckUserHistory",
36 |   data() {
37 |     return {
38 |       checks: {},
39 |       userId: JSON.parse(sessionStorage.getItem("userInfo")).userId,
40 |       yORnsData: {
41 |         '-1': '拒绝',
42 |         '0': '待批阅',
43 |         '1': '同意'
44 |       },
45 |       typeData: {
46 |         '-1': 'danger',
47 |         '0': 'info',
48 |         '1': 'success'
49 |       }
50 |     }
51 |   },
52 |   created() {
53 |     this.$axios.get("/check/userHistory/" + this.userId).then(res => {
54 |       this.checks = res.data.data;
55 |     })
56 |   },
57 | }
58 | </script>
59 | 
60 | <style scoped>
61 | </style>


--------------------------------------------------------------------------------
/src/views/pages/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-row style="margin-bottom: 60px" :gutter="10">
  4 |       <el-col :span="6">
  5 |         <el-card>
  6 |           <div style="color: #1ba784"><i class="el-icon-user"/> 师生总数</div>
  7 |           <div style="padding: 10px; font-weight: bold">
  8 |             <el-tag>{{ this.userTotal }}</el-tag>
  9 |           </div>
 10 |         </el-card>
 11 |       </el-col>
 12 |       <el-col :span="6">
 13 |         <el-card>
 14 |           <div style="color:#5e665b;"><i class="el-icon-tickets"/> 今日请假人数</div>
 15 |           <div style="padding: 10px; font-weight: bold">
 16 |             <el-tag type="info">{{ this.userNum }}</el-tag>
 17 |           </div>
 18 |         </el-card>
 19 |       </el-col>
 20 |       <el-col :span="6">
 21 |         <el-card>
 22 |           <div style="color:#f26b1f;"><i class="el-icon-link"/> 今日迟到人数</div>
 23 |           <div style="padding: 10px; font-weight: bold">
 24 |             <el-tag type="warning">未统计</el-tag>
 25 |           </div>
 26 |         </el-card>
 27 |       </el-col>
 28 |       <el-col :span="6">
 29 |         <el-card>
 30 |           <div style="color:#c02c38;"><i class="el-icon-ship"/> 今日旷课人数</div>
 31 |           <div style="padding: 10px; font-weight: bold">
 32 |             <el-tag type="danger">未统计</el-tag>
 33 |           </div>
 34 |         </el-card>
 35 |       </el-col>
 36 |     </el-row>
 37 |     <el-row :gutter="10">
 38 |       <el-col :span="12">
 39 |         <el-card id="lineMain" style="width: 100%; height: 400px"></el-card>
 40 |       </el-col>
 41 |       <el-col :span="12">
 42 |         <el-card id="pieMain" style="width: 100%; height: 400px"></el-card>
 43 |       </el-col>
 44 |     </el-row>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | import * as echarts from 'echarts';
 50 | 
 51 | export default {
 52 |   name: "Home",
 53 |   data() {
 54 |     return {
 55 |       userTotal: 0,
 56 |       userNum: 0,
 57 | 
 58 |     }
 59 |   },
 60 |   //页面渲染后触发
 61 |   mounted() {
 62 |     const lineChartDom = document.getElementById('lineMain');
 63 |     const pieChartDom = document.getElementById('pieMain');
 64 |     const lineChart = echarts.init(lineChartDom);
 65 |     const pieChart = echarts.init(pieChartDom);
 66 |     const lineOption = {
 67 |       title: {
 68 |         text: '每日请假人数统计图',
 69 |         left: 'center',
 70 |       },
 71 |       toolbox: {
 72 |         show: true,
 73 |         feature: {
 74 |           dataZoom: {
 75 |             yAxisIndex: 'none'
 76 |           },
 77 |           dataView: { readOnly: false },
 78 |           magicType: { type: ['line', 'bar'] },
 79 |           restore: {},
 80 |           saveAsImage: {}
 81 |         }
 82 |       },
 83 |       tooltip: {
 84 |         trigger: 'axis'
 85 |       },
 86 |       xAxis: {
 87 |         type: 'category',
 88 |         data: []
 89 |       },
 90 |       yAxis: {
 91 |         type: 'value'
 92 |       },
 93 |       series: [
 94 |         {
 95 |           data: [],
 96 |           type: 'line',
 97 |           smooth: true
 98 |         }
 99 |       ]
100 |     }
101 |     const pieOption = {
102 |       title: {
103 |         text: '每日请假人数统计图',
104 |         left: 'center'
105 |       },
106 |       toolbox: {
107 |         show: true,
108 |         feature: {
109 |           dataView: { readOnly: false },
110 |           restore: {},
111 |           saveAsImage: {}
112 |         }
113 |       },
114 |       tooltip: {
115 |         trigger: 'item'
116 |       },
117 |       legend: {
118 |         orient: 'vertical',
119 |         left: 'left'
120 |       },
121 |       series: [
122 |         {
123 |           name: '',
124 |           type: 'pie',
125 |           radius: '50%',
126 |           data: [],
127 |           emphasis: {
128 |             itemStyle: {
129 |               shadowBlur: 10,
130 |               shadowOffsetX: 0,
131 |               shadowColor: 'rgba(0, 0, 0, 0.5)'
132 |             }
133 |           }
134 |         }
135 |       ]
136 |     }
137 |     this.$axios.get("/check/homeList").then(res => {
138 |       let lineData = res.data.data
139 |       let pieData = []
140 |       for (let i = 0; i < lineData.x.length; i++) {
141 |         let obj = {};
142 |         obj.name = lineData.x[i];
143 |         obj.value = lineData.y[i];
144 |         pieData[i] = obj
145 |       }
146 |       lineOption.xAxis.data = lineData.x
147 |       lineOption.series[0].data = lineData.y
148 |       pieOption.series[0].data = pieData
149 |       lineChart.setOption(lineOption);
150 |       pieChart.setOption(pieOption);
151 | 
152 |       // 今日请假人数
153 |       let curDate = new Date();
154 |       let formatDate = "";
155 |       formatDate += curDate.getFullYear() + "-"
156 |       formatDate += ("0" + (curDate.getMonth() + 1 )).slice(-2) + "-"
157 |       formatDate += curDate.getDate()
158 |       for (let i = 0; i < lineData.x.length; i++) {
159 |         if (lineData.x[i] === formatDate) {
160 |           this.userNum = lineData.y[i]
161 |         }
162 |       }
163 |     });
164 | 
165 |     //获取学校总人数
166 |     this.$axios.get("/user/total").then(res => {
167 |       if (res.data.code === 200) {
168 |         this.userTotal = res.data.data;
169 |       }
170 |     });
171 |   },
172 | }
173 | </script>
174 | 
175 | <style scoped>
176 | 
177 | </style>


--------------------------------------------------------------------------------
/src/views/pages/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-container style="height: 100vh">
  3 | 
  4 |     <el-main class="wrapper">
  5 |       <div class="from-login"
  6 |            style="line-height: 100%;background-color:#fff; padding: 20px; margin: 10% auto;border-radius: 10px;width: 30%;min-width: 370px; max-width: 40%; box-shadow: 5px 0 30px #88000000">
  7 |         <div style="padding: 30px"><b style="font-size: 26px">学生考勤系统登录</b></div>
  8 |         <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
  9 |                  style="margin: 0 auto;padding: 20px 60px 0 60px;">
 10 |           <el-form-item prop="name">
 11 |             <el-input placeholder="用户名" type="text" v-model="ruleForm.name" autocomplete="off" size="30px"
 12 |                       @keyup.enter.native="submitForm('ruleForm')"></el-input>
 13 |           </el-form-item>
 14 | 
 15 |           <el-form-item prop="password">
 16 |             <el-input placeholder="密码" type="password" v-model="ruleForm.password" autocomplete="off" size="30px"
 17 |                       @keyup.enter.native="submitForm('ruleForm')"></el-input>
 18 |           </el-form-item>
 19 | 
 20 | 
 21 |           <!--          <el-form-item prop="verify">-->
 22 |           <!--            <el-input type="text" oninput="value=value.replace(/[^0-9|A-Z|a-z]{4}$/g,'')" maxlength="4"-->
 23 |           <!--                      placeholder="验证码" v-model="ruleForm.verify" size="30px"></el-input>-->
 24 |           <!--          </el-form-item>-->
 25 | 
 26 |           <el-form-item>
 27 |             <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
 28 |             <el-button type="warning" @click="register()">注册</el-button>
 29 |           </el-form-item>
 30 |         </el-form>
 31 |       </div>
 32 |     </el-main>
 33 |     <el-dialog title="注册" :visible.sync="dialogFormVisible" width="20%" style="margin: 0 auto">
 34 |       <el-form :model="formRegister" label-width="100px" :rules="regRule" status-icon>
 35 |         <el-form-item label="用户名" prop="regName">
 36 |           <el-input v-model="formRegister.name" autocomplete="off"></el-input>
 37 |         </el-form-item>
 38 |         <el-form-item label="密码" prop="regPassword">
 39 |           <el-input v-model="formRegister.password" autocomplete="off"></el-input>
 40 |         </el-form-item>
 41 |       </el-form>
 42 |       <div slot="footer" class="dialog-footer">
 43 |         <el-button @click="dialogFormVisible = false">取 消</el-button>
 44 |         <el-button type="primary" @click="save()">确 定</el-button>
 45 |       </div>
 46 |     </el-dialog>
 47 |   </el-container>
 48 | </template>
 49 | 
 50 | <script>
 51 | 
 52 | import ElementUI from "element-ui";
 53 | 
 54 | export default {
 55 |   name: "Login",
 56 |   data() {
 57 |     // 用户名验证
 58 |     const validateName = (rule, value, callback) => {
 59 |       if (value === "") {
 60 |         callback(new Error("请输入用户名"));
 61 |       }
 62 |       setTimeout(() => {
 63 |         callback();
 64 |       }, 100);
 65 |     };
 66 | 
 67 |     // 密码验证
 68 |     const validatePass = (rule, value, callback) => {
 69 |       if (value === "") {
 70 |         callback(new Error("请输入密码"));
 71 |       }
 72 |       setTimeout(() => {
 73 |         callback();
 74 |       }, 100);
 75 |     };
 76 |     /*
 77 |         const validateVerify = (rule, value, callback) => {
 78 |           if (value === "") {
 79 |             callback(new Error("请输入验证码"));
 80 |           }
 81 |           setTimeout(() => {
 82 |             callback();
 83 |           }, 100);
 84 |         };
 85 |         */
 86 |     return {
 87 |       //登录表单
 88 |       ruleForm: {
 89 |         name: "wang",
 90 |         password: "123456",
 91 |         verify: "1",
 92 |       },
 93 |       // 注册表单
 94 |       formRegister: {
 95 |         name: "",
 96 |         password: "",
 97 |       },
 98 |       //登录验证
 99 |       rules: {
100 |         name: [{validator: validateName, trigger: "blur"}],
101 |         password: [{validator: validatePass, trigger: "blur"}],
102 |         // verify: [{validator: validateVerify, trigger: "blur"}],
103 |       },
104 |       dialogFormVisible: false,
105 |       regRule: {},      //TODO 有时间实现
106 |     };
107 | 
108 |   },
109 | 
110 |   methods: {
111 |     submitForm(formName) {
112 |       this.$refs[formName].validate((valid) => {
113 |         if (valid) {
114 |           const _this = this;
115 |           this.$axios.post("/login", this.ruleForm).then((res) => {
116 |             // 获取headers中的数据
117 |             const jwt = res.headers["authorization"];
118 |             const userInfo = res.data.data;
119 | 
120 |             // 把数据存入store中
121 |             _this.$store.commit("SET_TOKEN", jwt);
122 |             _this.$store.commit("SET_USERINFO", userInfo);
123 |             // 跳转
124 |             _this.$router.push("/home");
125 |           }).catch(error => {
126 |             console.log(error.response)
127 |           });
128 |         } else {
129 |           return false;
130 |         }
131 |       });
132 |     },
133 | 
134 |     //打开注册功能
135 |     register() {
136 |       this.dialogFormVisible = true
137 |     },
138 | 
139 |     //添加用户
140 |     save() {
141 |       console.log(this.formRegister)
142 |       this.$axios.post("/user/add", this.formRegister).then(res => {
143 |         let data = res.data;
144 |         if (data.code === 200) {
145 |           ElementUI.Message.success("注册成功")
146 |           this.dialogFormVisible = false;
147 |           this.formRegister = {};
148 |         }
149 |       })
150 |     },
151 |   },
152 | };
153 | </script>
154 | 
155 | <style>
156 | .el-form-item__content {
157 |   margin-left: 0 !important;
158 | }
159 | 
160 | .wrapper {
161 |   height: 100vh;
162 |   background-image: linear-gradient(to bottom right, #ed556a, #57c3c2);
163 | }
164 | </style>


--------------------------------------------------------------------------------
/src/views/pages/Manage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-container style="height: 100%; min-height: 100vh">
 3 |     <!--侧边栏-->
 4 |     <el-aside :width="sideWidth + 'px'"
 5 |               style="background-color: rgb(48, 65, 86); height: 100%" id="myTransition">
 6 |       <Aside :isCollapse="this.isCollapse"/>
 7 |     </el-aside>
 8 | 
 9 |     <el-container>
10 |       <!--头部-->
11 |       <el-header background-color="#08ffc8">
12 |         <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/>
13 |       </el-header>
14 | 
15 |       <el-main>
16 |         <!--当前路由的子路由会在 router-view 中展示-->
17 |         <router-view/>
18 |       </el-main>
19 |     </el-container>
20 |   </el-container>
21 | </template>
22 | 
23 | <script>
24 | import Aside from "@/components/Aside";
25 | import Header from "@/components/Header";
26 | 
27 | export default {
28 |   name: "Manage",
29 |   data() {
30 |     return {
31 |       collapseBtnClass: 'el-icon-s-fold',
32 |       isCollapse: false,
33 |       sideWidth: 200,
34 |     }
35 |   },
36 |   components: {
37 |     Aside, Header,
38 |   },
39 |   methods: {
40 |     //设置侧边栏按钮
41 |     collapse() {
42 |       this.isCollapse = !this.isCollapse;
43 |       this.sideWidth = this.isCollapse ? 64 : 200;
44 |       this.collapseBtnClass = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
45 |     },
46 | 
47 |   }
48 | };
49 | </script>
50 | <style>
51 | #myTransition {
52 |   transition: width 100ms ease-out;
53 | }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/src/views/pages/Right.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div style="margin: 10px">
  4 |       <el-input style="width: 200px" suffix-icon="el-icon-search" placeholder="请输入名称" v-model="rightName"/>
  5 |       <el-button class="m-2" type="primary" @click="this.loadData">搜索</el-button>
  6 |     </div>
  7 |     <div style="margin: 10px;text-align: left">
  8 |       <el-button type="primary" plain @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
  9 |       <el-popconfirm title="确定删除吗？" @confirm="handleDeleteBatch" class="ml-5">
 10 |         <el-button type="danger" plain slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
 11 |       </el-popconfirm>
 12 |     </div>
 13 |     <el-table :data="tableData" border stripe :header-cell-style="headClass"
 14 |               :cell-style="cellClass" height="650px"
 15 |               @selection-change="handleSelectionChange"
 16 |               row-key="id"
 17 |               children>
 18 |       <el-table-column type="selection" width="55"></el-table-column>
 19 |       <el-table-column prop="id" label="ID" width="140"></el-table-column>
 20 |       <el-table-column prop="name" label="名称" width="120"></el-table-column>
 21 |       <el-table-column prop="url" label="可操作地址"></el-table-column>
 22 |       <el-table-column prop="status" label="状态"></el-table-column>
 23 |       <el-table-column prop="option" label="操作">
 24 |         <template slot-scope="scope">
 25 |           <el-button type="warning" plain @click="handleEdit(scope.$index, scope.row)" class="m-2">编辑 <i
 26 |               class="el-icon-edit"></i></el-button>
 27 |           <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)" class="m-2">
 28 |             <el-button type="danger" plain slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
 29 |           </el-popconfirm>
 30 |         </template>
 31 |       </el-table-column>
 32 |     </el-table>
 33 |     <div style="padding: 10px 0;vertical-align:bottom;">
 34 |       <el-pagination
 35 |           @size-change="handleSizeChange"
 36 |           @current-change="handleCurrentChange"
 37 |           :current-page="currentPage"
 38 |           :page-sizes="[10, 20, 30, 50]"
 39 |           :page-size="pageSize"
 40 |           layout="total, sizes, prev, pager, next, jumper"
 41 |           :total="total">
 42 |       </el-pagination>
 43 |     </div>
 44 |     <el-dialog title="权限信息" :visible.sync="dialogFormVisible" width="30%">
 45 |       <el-form :model="form" label-width="100px" :inline="true" label-position="left">
 46 |         <el-form-item label="权限名">
 47 |           <el-input v-model="form.name" autocomplete="off"></el-input>
 48 |         </el-form-item>
 49 |         <el-form-item label="可访问地址">
 50 |           <el-input v-model="form.url" autocomplete="off"></el-input>
 51 |         </el-form-item>
 52 |         <el-form-item label="权限状态">
 53 |           <el-input v-model="form.status" autocomplete="off"></el-input>
 54 |         </el-form-item>
 55 |       </el-form>
 56 |       <div slot="footer" class="dialog-footer">
 57 |         <el-button @click="dialogFormVisible = false">取 消</el-button>
 58 |         <el-button type="primary" @click="save()">确 定</el-button>
 59 |       </div>
 60 |     </el-dialog>
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script>
 65 | import ElementUI from "element-ui";
 66 | 
 67 | export default {
 68 |   name: "Right",
 69 |   data() {
 70 |     return {
 71 |       tableData: [],
 72 |       total: 0,
 73 |       currentPage: 1,
 74 |       pageSize: 10,
 75 |       rightName: "",
 76 |       form: {},
 77 |       dialogFormVisible: false,
 78 |       isEditPassword: true,
 79 |       rawId: [],
 80 |     }
 81 |   },
 82 |   created() {
 83 |     this.loadData()
 84 |   },
 85 |   methods: {
 86 |     //设置表头
 87 |     headClass() {
 88 |       return 'background:#E6F1FF;color:#368CFF;font-size:13px;text-align: center;'
 89 |     },
 90 |     //设置表样式
 91 |     cellClass() {
 92 |       return 'text-align: center;'
 93 |     },
 94 |     //改变显示条数时调用
 95 |     handleSizeChange(pageSize) {
 96 |       this.pageSize = pageSize
 97 |       this.loadData()
 98 |     },
 99 |     // 改变页码时调用
100 |     handleCurrentChange(currentPage) {
101 |       this.currentPage = currentPage
102 |       this.loadData()
103 |     },
104 |     //添加权限
105 |     save() {
106 |       this.$axios.post("/right/add", this.form).then(res => {
107 |         let data = res.data;
108 |         if (data.code === 200) {
109 |           ElementUI.Message.success("操作成功")
110 |           this.dialogFormVisible = false;
111 |           this.isEditPassword = true
112 |           this.loadData()
113 |         }
114 |       })
115 |     },
116 |     // 添加权限
117 |     handleAdd() {
118 |       this.dialogFormVisible = true
119 |       this.form = {}
120 |       this.isEditPassword = true
121 |     },
122 |     // 删除用户
123 |     handleDelete(index, row) {
124 |       this.$axios.delete("/right/delete/" + row.id).then(res => {
125 |         let data = res.data;
126 |         if (data.code === 200) {
127 |           ElementUI.Message.success("删除成功")
128 |           this.loadData()
129 |         }
130 |       })
131 |     },
132 |     // 批量删除
133 |     handleDeleteBatch() {
134 |       this.$axios.post("/right/delete/batch/", this.rawId).then(res => {
135 |         let data = res.data;
136 |         if (data.code === 200) {
137 |           ElementUI.Message.success("删除成功")
138 |           this.loadData()
139 |         }
140 |       })
141 |     },
142 |     // 编辑用户
143 |     handleEdit(index, row) {
144 |       this.isEditPassword = false
145 |       this.dialogFormVisible = true
146 |       this.form = row
147 |     },
148 |     //多选框事件
149 |     handleSelectionChange(raw) {
150 |       this.rawId = []
151 |       for (let i = 0; i < raw.length; i++) {
152 |         this.rawId.push(raw[i].id);
153 |       }
154 |       console.log(this.rawId)
155 |     },
156 | 
157 |     //加载数据
158 |     loadData() {
159 |       this.$axios.get("/right/list", {
160 |         params: {
161 |           currentPage: this.currentPage,
162 |           pageSize: this.pageSize,
163 |           rightName: this.rightName,
164 |         }
165 |       }).then(res => {
166 |             let data = res.data.data;
167 |             this.tableData = data.records;
168 |             this.total = data.total;
169 |           }
170 |       )
171 |     },
172 |   }
173 | };
174 | </script>
175 | 
176 | <style>
177 | </style>


--------------------------------------------------------------------------------
/src/views/pages/RightDataShow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     RightDataShow
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "RightDataShow"
10 | }
11 | </script>
12 | 
13 | <style scoped>
14 | 
15 | </style>


--------------------------------------------------------------------------------
/src/views/pages/Role.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div style="margin: 10px">
  4 |       <el-input style="width: 200px" suffix-icon="el-icon-search" placeholder="请输入角色名" v-model="roleName"/>
  5 |       <el-button class="m-2" type="primary" @click="this.loadData">搜索</el-button>
  6 |     </div>
  7 |     <div style="margin: 10px;text-align: left">
  8 |       <el-button type="primary" plain @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
  9 |       <!--      <el-upload style="display: inline-block"-->
 10 |       <!--                 class="upload-demo ml-5 mr-5"-->
 11 |       <!--                 action="http://127.0.0.1:8088/role/import"-->
 12 |       <!--                 multiple-->
 13 |       <!--                 accept="xlsx"-->
 14 |       <!--                 :on-success="handleUpSuccess"-->
 15 |       <!--                 :on-error="handleUpError"-->
 16 |       <!--                 :show-file-list="false"-->
 17 |       <!--                 :limit="1">-->
 18 |       <!--        <el-button type="primary" plain>导入 <i class="el-icon-bottom"></i></el-button>-->
 19 |       <!--      </el-upload>-->
 20 |       <!--      <el-button type="primary" plain @click="exportExcel">导出 <i class="el-icon-top"></i></el-button>-->
 21 |       <el-popconfirm title="确定删除吗？" @confirm="handleDeleteBatch" class="ml-5">
 22 |         <el-button type="danger" plain slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
 23 |       </el-popconfirm>
 24 |     </div>
 25 |     <el-table :data="tableData" border stripe :header-cell-style="headClass" :cell-style="cellClass" height="650px"
 26 |               @selection-change="handleSelectionChange">
 27 |       <el-table-column type="selection" width="55"></el-table-column>
 28 |       <el-table-column prop="id" label="ID" width="140"></el-table-column>
 29 |       <el-table-column prop="name" label="角色名" width="120"></el-table-column>
 30 |       <el-table-column prop="type" label="角色类型"></el-table-column>
 31 |       <el-table-column prop="status" label="角色状态"></el-table-column>
 32 |       <el-table-column prop="option" label="操作">
 33 |         <template slot-scope="scope">
 34 |           <el-button type="info" plain slot="reference" @click="handleMenu(scope.row)">权限设置 <i class="el-icon-menu"></i>
 35 |           </el-button>
 36 |           <el-button type="warning" plain @click="handleEdit(scope.$index, scope.row)" class="m-2">编辑 <i
 37 |               class="el-icon-edit"></i></el-button>
 38 |           <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)" class="m-2">
 39 |             <el-button type="danger" plain slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
 40 |           </el-popconfirm>
 41 |         </template>
 42 |       </el-table-column>
 43 |     </el-table>
 44 |     <div style="padding: 10px 0;vertical-align:bottom;">
 45 |       <el-pagination
 46 |           @size-change="handleSizeChange"
 47 |           @current-change="handleCurrentChange"
 48 |           :current-page="currentPage"
 49 |           :page-sizes="[10, 20, 30, 50]"
 50 |           :page-size="pageSize"
 51 |           layout="total, sizes, prev, pager, next, jumper"
 52 |           :total="total">
 53 |       </el-pagination>
 54 |     </div>
 55 | 
 56 |     <!--    添加或编辑 角色弹窗-->
 57 |     <el-dialog title="角色信息" :visible.sync="dialogFormVisible" width="30%">
 58 |       <el-form :model="form" label-width="100px" :inline="true" label-position="left">
 59 |         <el-form-item label="角色名">
 60 |           <el-input v-model="form.name" autocomplete="off"></el-input>
 61 |         </el-form-item>
 62 |         <el-form-item label="角色类型">
 63 |           <el-input v-model="form.type" autocomplete="off"></el-input>
 64 |         </el-form-item>
 65 |         <el-form-item label="角色状态">
 66 |           <el-input v-model="form.status" autocomplete="off"></el-input>
 67 |         </el-form-item>
 68 |       </el-form>
 69 |       <div slot="footer" class="dialog-footer">
 70 |         <el-button @click="dialogFormVisible = false">取 消</el-button>
 71 |         <el-button type="primary" @click="save()">确 定</el-button>
 72 |       </div>
 73 |     </el-dialog>
 74 | 
 75 |     <!--    设置 权限弹窗-->
 76 |     <el-dialog title=权限设置 :visible.sync="dialogMenuVisible" width="30%">
 77 |       <el-tree
 78 |           :props="props"
 79 |           :data="rightData"
 80 |           show-checkbox
 81 |           getCheckedNodes="getCheckedNodes"
 82 |           node-key="id"
 83 |           ref="tree"
 84 |           @check-change="handleCheckChange">
 85 |       </el-tree>
 86 |       <div slot="footer" class="dialog-footer">
 87 |         <el-button @click="dialogMenuVisible = false">取 消</el-button>
 88 |         <el-button type="primary" @click="handleRight()">确 定</el-button>
 89 |       </div>
 90 |     </el-dialog>
 91 |   </div>
 92 | </template>
 93 | 
 94 | <script>
 95 | import ElementUI from "element-ui";
 96 | 
 97 | export default {
 98 |   name: "Role",
 99 |   data() {
100 |     return {
101 |       tableData: [],
102 |       total: 0,
103 |       currentPage: 1,
104 |       pageSize: 10,
105 |       roleName: "",
106 |       roleType: "",
107 |       roleStatus: "",
108 |       dialogFormVisible: false,
109 |       form: {},
110 |       isEditPassword: true,
111 |       rawId: [],
112 |       right: [],
113 |       dialogMenuVisible: false,
114 | 
115 |       //  权限树
116 |       rightData: [],
117 |       props: {
118 |         label: 'name',
119 |       },
120 |       roleId: "",
121 |     }
122 |   },
123 |   created() {
124 |     this.loadData()
125 |   },
126 |   methods: {
127 |     //设置表头
128 |     headClass() {
129 |       return 'background:#E6F1FF;color:#368CFF;font-size:13px;text-align: center;'
130 |     },
131 |     //设置表样式
132 |     cellClass() {
133 |       return 'text-align: center;'
134 |     },
135 |     //改变显示条数时调用
136 |     handleSizeChange(pageSize) {
137 |       this.pageSize = pageSize
138 |       this.loadData()
139 |     },
140 |     // 改变页码时调用
141 |     handleCurrentChange(currentPage) {
142 |       this.currentPage = currentPage
143 |       this.loadData()
144 |     },
145 |     //添加用户
146 |     save() {
147 |       this.$axios.post("/role/add", this.form).then(res => {
148 |         let data = res.data;
149 |         if (data.code === 200) {
150 |           ElementUI.Message.success("操作成功")
151 |           this.dialogFormVisible = false;
152 |           this.isEditPassword = true
153 |           this.loadData()
154 |         }
155 |       })
156 |     },
157 |     // 添加用户
158 |     handleAdd() {
159 |       this.dialogFormVisible = true
160 |       this.form = {}
161 |       this.isEditPassword = true
162 |     },
163 |     // 删除用户
164 |     handleDelete(index, row) {
165 |       this.$axios.delete("/role/delete/" + row.id).then(res => {
166 |         let data = res.data;
167 |         if (data.code === 200) {
168 |           ElementUI.Message.success("删除成功")
169 |           this.loadData()
170 |         }
171 |       })
172 |     },
173 |     // 批量删除
174 |     handleDeleteBatch() {
175 |       this.$axios.post("/role/delete/batch/", this.rawId).then(res => {
176 |         let data = res.data;
177 |         if (data.code === 200) {
178 |           ElementUI.Message.success("删除成功")
179 |           this.loadData()
180 |         }
181 |       })
182 |     },
183 |     // 编辑角色
184 |     handleEdit(index, row) {
185 |       this.isEditPassword = false
186 |       this.dialogFormVisible = true
187 |       this.form = row
188 |     },
189 |     //多选框事件
190 |     handleSelectionChange(raw) {
191 |       this.rawId = []
192 |       for (let i = 0; i < raw.length; i++) {
193 |         this.rawId.push(raw[i].id);
194 |       }
195 |       // console.log(this.rawId)
196 |     },
197 |     //加载数据
198 |     loadData() {
199 |       this.$axios.get("/role/list", {
200 |         params: {
201 |           currentPage: this.currentPage,
202 |           pageSize: this.pageSize,
203 |           roleName: this.roleName,
204 |           roleType: this.roleType,
205 |           roleStatus: this.roleStatus
206 |         }
207 |       }).then(res => {
208 |             let data = res.data.data;
209 |             this.tableData = data.records;
210 |             this.total = data.total;
211 |           }
212 |       )
213 |     },
214 | 
215 |     //  加载权限菜单
216 |     handleMenu(row) {
217 |       this.roleId = row.id;
218 |       this.dialogMenuVisible = true
219 |       // 查询已有权限
220 |       this.$axios.get("/roleRight/checkedRight/" + row.id).then(res => {
221 |         this.$refs.tree.setCheckedKeys(res.data.data)
222 |       })
223 |       this.$axios.get("/right/all").then(res => {
224 |         this.rightData = res.data.data;
225 |       })
226 | 
227 |     },
228 |     // 添加权限事件
229 |     handleRight() {
230 |       let roleRight = {};
231 |       roleRight.roleId = this.roleId;
232 |       roleRight.rightIds = this.$refs.tree.getCheckedKeys();
233 |       this.$axios.post("/roleRight/setRoleRight", roleRight).then(res => {
234 |         if (res.data.code === 200) {
235 |           ElementUI.Message.success(res.data.msg);
236 |           this.dialogMenuVisible = false;
237 |         }
238 |       })
239 |     },
240 |     //权限树变化时触发
241 |     handleCheckChange(data, checked, indeterminate) {
242 |       // console.log(data, checked, indeterminate);
243 |     },
244 |   }
245 | };
246 | </script>
247 | 
248 | <style>
249 | </style>


--------------------------------------------------------------------------------
/src/views/pages/RoleDataShow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     RoleDataShow
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "RoleDataShow"
10 | }
11 | </script>
12 | 
13 | <style scoped>
14 | 
15 | </style>


--------------------------------------------------------------------------------
/src/views/pages/User.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div style="margin: 10px">
  4 |       <el-input style="width: 200px" suffix-icon="el-icon-search" placeholder="请输入名称" v-model="userName"/>
  5 |       <el-input style="width: 200px" suffix-icon="el-icon-message" placeholder="请输入邮箱" class="m-2"
  6 |                 v-model="userMail"/>
  7 |       <el-input style="width: 200px" suffix-icon="el-icon-user" placeholder="请输入班级" class="m-2"
  8 |                 v-model="userGroup"/>
  9 |       <el-button class="m-2" type="primary" @click="this.loadData">搜索</el-button>
 10 |     </div>
 11 |     <div style="margin: 10px;text-align: left">
 12 |       <el-button type="primary" plain @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
 13 |       <el-upload style="display: inline-block"
 14 |                  class="upload-demo ml-5 mr-5"
 15 |                  action="http://127.0.0.1:8088/user/import"
 16 |                  multiple
 17 |                  accept="xlsx"
 18 |                  :on-success="handleUpSuccess"
 19 |                  :on-error="handleUpError"
 20 |                  :show-file-list="false"
 21 |                  :limit="1">
 22 |         <el-button type="primary" plain>导入 <i class="el-icon-bottom"></i></el-button>
 23 |       </el-upload>
 24 |       <el-button type="primary" plain @click="exportExcel">导出 <i class="el-icon-top"></i></el-button>
 25 |       <el-popconfirm title="确定删除吗？" @confirm="handleDeleteBatch" class="ml-5">
 26 |         <el-button type="danger" plain slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
 27 |       </el-popconfirm>
 28 |     </div>
 29 |     <el-table :data="tableData" border stripe :header-cell-style="headClass"
 30 |               :cell-style="cellClass" height="650px"
 31 |               @selection-change="handleSelectionChange"
 32 |               row-key="id"
 33 |               default-expand-all>
 34 |       <el-table-column type="selection" width="55"></el-table-column>
 35 |       <el-table-column prop="id" label="ID"></el-table-column>
 36 |       <el-table-column prop="name" label="姓名"></el-table-column>
 37 |       <el-table-column prop="telephone" label="手机号"></el-table-column>
 38 |       <el-table-column prop="mail" label="邮箱"></el-table-column>
 39 |       <el-table-column prop="groupId" label="班级"></el-table-column>
 40 |       <el-table-column prop="status" label="是否注销"></el-table-column>
 41 |       <el-table-column prop="lastTime" label="上次登录时间"></el-table-column>
 42 |       <el-table-column prop="createTime" label="创建时间"></el-table-column>
 43 |       <el-table-column prop="option" label="操作" width="300px">
 44 |         <template slot-scope="scope">
 45 |           <el-button type="info" plain slot="reference" @click="handleMenu(scope.row)">角色设置 <i class="el-icon-menu"></i>
 46 |           </el-button>
 47 |           <el-button type="warning" plain @click="handleEdit(scope.$index, scope.row)" class="m-2">编辑 <i
 48 |               class="el-icon-edit"></i></el-button>
 49 |           <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)" class="m-2">
 50 |             <el-button type="danger" plain slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
 51 |           </el-popconfirm>
 52 |         </template>
 53 |       </el-table-column>
 54 |     </el-table>
 55 |     <div style="padding: 10px 0;vertical-align:bottom;">
 56 |       <el-pagination
 57 |           @size-change="handleSizeChange"
 58 |           @current-change="handleCurrentChange"
 59 |           :current-page="currentPage"
 60 |           :page-sizes="[10, 20, 30, 50]"
 61 |           :page-size="pageSize"
 62 |           layout="total, sizes, prev, pager, next, jumper"
 63 |           :total="total">
 64 |       </el-pagination>
 65 |     </div>
 66 |     <!--    添加或编辑 用户信息弹窗-->
 67 |     <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
 68 |       <el-form :model="form" :inline="true" label-position="left">
 69 |         <el-form-item label="用户名">
 70 |           <el-input v-model="form.name" autocomplete="off"></el-input>
 71 |         </el-form-item>
 72 |         <el-form-item label="密码" v-show="isEditPassword">
 73 |           <el-input v-model="form.password" v-show="isEditPassword" autocomplete="off"></el-input>
 74 |         </el-form-item>
 75 |         <el-form-item label="手机号">
 76 |           <el-input v-model="form.telephone" autocomplete="off"></el-input>
 77 |         </el-form-item>
 78 |         <el-form-item label="邮箱">
 79 |           <el-input v-model="form.mail" autocomplete="off"></el-input>
 80 |         </el-form-item>
 81 |         <el-form-item label="班级">
 82 |           <el-select v-model="form.groupId">
 83 |             <el-option label="暂未分配班级" value="0"></el-option>
 84 |             <el-option label="测试1班" value="1"></el-option>
 85 |             <el-option label="测试2班" value="2"></el-option>
 86 |           </el-select>
 87 |         </el-form-item>
 88 |       </el-form>
 89 |       <div slot="footer" class="dialog-footer">
 90 |         <el-button @click="dialogFormVisible = false">取 消</el-button>
 91 |         <el-button type="primary" @click="save()">确 定</el-button>
 92 |       </div>
 93 |     </el-dialog>
 94 | 
 95 |     <!--    设置 角色弹窗-->
 96 |     <el-dialog title=角色设置 :visible.sync="dialogMenuVisible" width="30%">
 97 |       <el-form :model="form" :inline="true">
 98 |         <el-form-item label="角色">
 99 |           <el-select v-model="role.name" @change="getRoleID">
100 |             <el-option v-for="item in role" v-bind:key="item.id" :value="item.id" :label="item.name"></el-option>
101 |           </el-select>
102 |         </el-form-item>
103 |       </el-form>
104 |       <div slot="footer" class="dialog-footer">
105 |         <el-button @click="dialogMenuVisible = false">取 消</el-button>
106 |         <el-button type="primary" @click="handleRole()">确 定</el-button>
107 |       </div>
108 |     </el-dialog>
109 |   </div>
110 | </template>
111 | 
112 | <script>
113 | import ElementUI from "element-ui";
114 | 
115 | export default {
116 |   name: "User",
117 |   data() {
118 |     return {
119 |       tableData: [],
120 |       total: 0,
121 |       currentPage: 1,
122 |       pageSize: 10,
123 |       userName: "",
124 |       userMail: "",
125 |       userGroup: "",
126 |       form: {},
127 |       dialogFormVisible: false,
128 |       dialogMenuVisible: false,
129 |       isEditPassword: true,
130 |       rawId: [],
131 |       role: [],
132 |       userId: "",
133 |       roleId: "",
134 |     }
135 |   },
136 |   created() {
137 |     this.loadData()
138 |   },
139 |   methods: {
140 |     //设置表头
141 |     headClass() {
142 |       return 'background:#E6F1FF;color:#368CFF;font-size:13px;text-align: center;'
143 |     },
144 |     //设置表样式
145 |     cellClass() {
146 |       return 'text-align: center;'
147 |     },
148 |     //改变显示条数时调用
149 |     handleSizeChange(pageSize) {
150 |       this.pageSize = pageSize
151 |       this.loadData()
152 |     },
153 |     // 改变页码时调用
154 |     handleCurrentChange(currentPage) {
155 |       this.currentPage = currentPage
156 |       this.loadData()
157 |     },
158 |     //添加用户
159 |     save() {
160 |       console.log(this.form)
161 |       this.$axios.post("/user/add", this.form).then(res => {
162 |         let data = res.data;
163 |         if (data.code === 200) {
164 |           ElementUI.Message.success("操作成功")
165 |           this.dialogFormVisible = false;
166 |           this.isEditPassword = true
167 |           this.loadData()
168 |         }
169 |       })
170 |     },
171 |     // 添加用户
172 |     handleAdd() {
173 |       this.dialogFormVisible = true
174 |       this.form = {}
175 |       this.isEditPassword = true
176 |     },
177 |     // 删除用户
178 |     handleDelete(index, row) {
179 |       this.$axios.delete("/user/delete/" + row.id).then(res => {
180 |         let data = res.data;
181 |         if (data.code === 200) {
182 |           ElementUI.Message.success("删除成功")
183 |           this.loadData()
184 |         }
185 |       })
186 |     },
187 |     // 批量删除
188 |     handleDeleteBatch() {
189 |       this.$axios.post("/user/delete/batch/", this.rawId).then(res => {
190 |         let data = res.data;
191 |         if (data.code === 200) {
192 |           ElementUI.Message.success("删除成功")
193 |           this.loadData()
194 |         }
195 |       })
196 |     },
197 |     // 编辑用户
198 |     handleEdit(index, row) {
199 |       this.isEditPassword = false
200 |       this.dialogFormVisible = true
201 |       this.form = row
202 |     },
203 |     //多选框事件
204 |     handleSelectionChange(raw) {
205 |       this.rawId = []
206 |       for (let i = 0; i < raw.length; i++) {
207 |         this.rawId.push(raw[i].id);
208 |       }
209 |       console.log(this.rawId)
210 |     },
211 |     //导出数据
212 |     exportExcel() {
213 |       window.open("http://127.0.0.1:8088/user/export")
214 |     },
215 |     //加载数据
216 |     loadData() {
217 |       this.$axios.get("/user/list", {
218 |         params: {
219 |           currentPage: this.currentPage,
220 |           pageSize: this.pageSize,
221 |           userName: this.userName,
222 |           userMail: this.userMail,
223 |           userGroup: this.userGroup
224 |         }
225 |       }).then(res => {
226 |             let data = res.data.data;
227 |             this.tableData = data.records;
228 |             this.total = data.total;
229 |           }
230 |       )
231 |     },
232 |     handleUpSuccess() {
233 |       ElementUI.Message.success("导入成功")
234 |       this.loadData()
235 |     },
236 |     handleUpError() {
237 |       ElementUI.Message.success("导入失败")
238 |       this.loadData()
239 |     },
240 |     //加载角色菜单
241 |     handleMenu(row) {
242 |       this.dialogMenuVisible = true
243 |       this.userId = row.id
244 |       this.$axios.get("/role/all").then(res => {
245 |         this.role = res.data.data;
246 |       })
247 |     },
248 |     //把用户和角色绑定
249 |     handleRole() {
250 |       let role = {}
251 |       role.userId = this.userId
252 |       role.roleId = this.roleId
253 |       this.$axios.post("/userRole/setRole", role).then(res => {
254 |         if (res.data.code === 200) {
255 |           ElementUI.Message.success(res.data.msg);
256 |           this.dialogMenuVisible = false;
257 |         }
258 |       })
259 |     },
260 |     //获取角色ID
261 |     getRoleID(id) {
262 |       this.roleId = id
263 |     }
264 |   }
265 | };
266 | </script>
267 | 
268 | <style>
269 | </style>


--------------------------------------------------------------------------------
/src/views/pages/UserDataShow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     UserDataShow
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "UserDataShow"
10 | }
11 | </script>
12 | 
13 | <style scoped>
14 | 
15 | </style>


--------------------------------------------------------------------------------
/src/views/pages/UserInfo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-card style="width: 400px;margin: 0 auto">
 3 |     <el-form :model="form" label-width="100px">
 4 |       <el-form-item label="用户名">
 5 |         <el-input v-model="form.userName" autocomplete="off"></el-input>
 6 |       </el-form-item>
 7 |       <el-form-item label="手机号">
 8 |         <el-input v-model="form.userTelephone" autocomplete="off"></el-input>
 9 |       </el-form-item>
10 |       <el-form-item label="邮箱">
11 |         <el-input v-model="form.userMail" autocomplete="off"></el-input>
12 |       </el-form-item>
13 |       <el-form-item label="班级">
14 |         <el-input v-model="form.userGroup" autocomplete="off"></el-input>
15 |       </el-form-item>
16 |     </el-form>
17 |   </el-card>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: "UserInfo",
23 |   data() {
24 |     return {
25 |       form: {},
26 |     }
27 |   },
28 |   created() {
29 |     // console.log(sessionStorage.getItem("userInfo"))
30 |     this.form = JSON.parse(sessionStorage.getItem("userInfo"));
31 |   }
32 | }
33 | </script>
34 | 
35 | <style scoped>
36 | 
37 | </style>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


--------------------------------------------------------------------------------