前端架构搭建

vue2 脚手架上搭建

项目目录

Snipaste_2023-07-20_14-28-30

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "name": "vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.2.2",
    "core-js": "^3.8.3",
    "echarts": "^4.9.0",
    "element-ui": "^2.15.12",
    "less": "^4.1.3",
    "qs": "^6.11.0",
    "vue": "^2.6.14",
    "vue-moment": "^4.1.0",
    "vue-particles": "^1.0.9",
    "vue-router": "^3.6.5",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "less-loader": "^7.3.0",
    "sass": "^1.63.6",
    "sass-loader": "^13.3.2",
    "vue-template-compiler": "^2.6.14"
  }
}

vue.config

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  assetsDir: "static", //打包配置文件
  parallel: false,
  publicPath: "./",
  devServer: {
    port: 9094, //这是vue启动的端口
    proxy: {
      "/api": {
        target: "http://localhost:9999/", //这是这是本地地址
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
});

jsconfig.json

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

babel.config.js

1
2
3
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
};

.gitignore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/*
 * @Author: luckyNwa
 * @Date: 2023-07-04 10:38:45
 */
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

import qs from "qs";
import VueParticles from "vue-particles";

import Global from "./Global";
Vue.use(Global);

Vue.use(VueParticles);
Vue.prototype.$qs = qs;
Vue.use(ElementUI);
Vue.config.productionTip = false;
Vue.prototype.$target = "http://localhost:9999/";
// 全局前置守卫
router.beforeEach(function (to, from, next) {
  if (to.path === "/home" || to.path === "/index" || to.path === "/weekly") {
    const token = sessionStorage.getItem("token");

    if (token !== null) {
      //   console.log('全局前置守卫启动，token有值放行！')
      next();
    } else {
      Vue.prototype.notifyError("请先登录！");
    }
  } else {
    next();
  }
});

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

Global.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
exports.install = function (Vue) {
  // 封装提示成功的弹出框
  Vue.prototype.notifySucceed = function (msg) {
    this.$notify({
      title: "成功",
      message: msg,
      type: "success",
      offset: 100,
    });
  };
  // 封装提示失败的弹出框
  Vue.prototype.notifyError = function (msg) {
    this.$notify.error({
      title: "错误",
      message: msg,
      offset: 100,
    });
  };
};

APP.vue

1
2
3
4
5
6
7
8
9
10
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
@import './assets/css/index.css';
</style>

request.js 工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import axios from "axios";
/**
 * axios的封装
 * 可以对拦截器各种处理
 */
let request = axios.create({
  baseURL: "/api",

  timeout: 5000,
});

request.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    // 比如判断是否有token
    config.headers.token = window.sessionStorage.getItem("token");

    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

//添加响应拦截器,下面改了会报错
axios.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    return response.data;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default request;

store

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  modules: {
    user
  }
})

modules/user.js


export default {
  state: {
    user: '',
    token: ''
  },
  getters: {

    getUser(state) {
      return state.user
    },
    getToken(state) {
      return state.token
    }
  },
  mutations: {

    setUser(state, data) {
      state.user = data
    },
    setToken(state, data) {
      state.token = data
    }
  },
  actions: {

    setUser({ commit }, data) {
      commit('setUser', data)
    },
    setToken({ commit }, data) {
      commit('setToken', data)
    }
  }
}


router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/*
 * @Author: luckyNwa
 * @Date: 2023-07-04 10:38:45
 * @路由配置
 */
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/login",
    component: () => import("../views/login/index.vue"),
  },
  {
    path: "/login", //登录
    name: "login",
    component: () => import("../views/login/index.vue"),
  },

  {
    path: "/home", //首页
    name: "home",
    meta: { title: "首页" },
    redirect: "/index",
    component: () => import("../views/home/index.vue"),
    children: [
      {
        path: "/index", //首页
        name: "index",
        meta: { title: "首页" },
        component: () => import("../views/home/index/index.vue"),
      },
      {
        path: "/weekly", //周报管理
        name: "weekly",
        meta: { title: "周报管理" },
        component: () => import("../views/home/weekly/index.vue"),
        children: [
          {
            path: "/myWeekly",
            name: "myWeekly",
            meta: { title: "我的周报" },
            component: () => import("../views/home/weekly/myWeekly.vue"),
          },
          {
            path: "/allWeekly",
            name: "allWeekly",
            meta: { title: "所有周报" },
            component: () => import("../views/home/weekly/allWeekly.vue"),
          },
          {
            path: "/modifyMy",
            name: "modifyMy",
            meta: { title: "修改" },
            component: () => import("../views/home/weekly/modifyMy.vue"),
          },
          {
            path: "/addMy",
            name: "addMy",
            meta: { title: "添加" },
            component: () => import("../views/home/weekly/addMy.vue"),
          },
        ],
        // component: () => import('../views/home/user/index.vue')
      },
    ],
  },
];

const router = new VueRouter({
  routes,
});

export default router;

api

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
/*
 * @Author: luckyNwa
 * @Date: 2023-07-04 10:38:45
 */
import request from "@/util/request";

/**
 *
 * @param {修改密码} params
 * @returns
 */
export const modifyPwd = (params) => {
  return request({
    url: "/home/modifyPwd",
    method: "put",
    params,
  });
};

/**
 *
 * @param {获取日志表} params
 * @returns
 */
export const getLogList = (params) => {
  return request({
    url: "/home/getLogList",
    method: "get",
    params,
  });
};
/**
 *
 * @param {获取我的周报} params
 * @returns
 */

export const getMyWeekList = (params) => {
  return request({
    url: "/home/getMyWeekList",
    method: "get",
    params,
  });
};
/**
 *
 * @param {获取编辑里的我的周报} params
 * @returns
 */

export const getMyWeek = (params) => {
  return request({
    url: "/home/getMyWeek",
    method: "get",
    params,
  });
};
/**
 *
 * @param {保存数据} datas
 * @returns
 */

export const keepMyWeekly = (datas) => {
  return request({
    url: "/home/keepMyWeekly",
    method: "post",
    data: datas,
  });
};
/**
 *
 * @param {单删除} params
 * @returns
 */

export const delMyWeekOne = (params) => {
  return request({
    url: "/home/delMyWeekOne",
    method: "delete",
    params,
  });
};
/**
 *
 * @param {批量删除} list1
 * @returns
 */

export const delMyWeekMore = (list1) => {
  return request({
    url: "/home/delMyWeekMore",
    method: "delete",
    params: {
      list: list1,
    },
  });
};
/**
 *
 * @param {添加1} params
 * @returns
 */

export const addOneMon = (params) => {
  return request({
    url: "/home/addOneMon",
    method: "get",
    params,
  });
};
/**
 *
 * @param {添加2} datas
 * @returns
 */

export const addOneWeek = (datas) => {
  return request({
    url: "/home/addOneWeek",
    method: "post",
    data: datas,
  });
};
/**
 *
 * @param {下载} params
 * @returns
 */

export const loadOne = (params) => {
  return request({
    url: "/home/export",
    method: "get",
    params,
  });
};

components

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!--
 * @Author: luckyNwa
 * @Date: 2023-07-04 10:38:45
 * @右侧菜单的组件
-->

<template>
  <el-aside width="165px !important"
            style="height: 2250px !important">
    <!-- <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>周报管理</span>
        </template>
        <el-menu-item index="1-1">我的周报</el-menu-item>
        <el-menu-item index="1-2">所有周报</el-menu-item>
      </el-submenu>
    </el-menu> -->

    <el-menu default-active="1"
             class="el-menu-vertical-demo"
             router>
      <div v-for="item in lists"
           :key="item.id">
        <template v-if="item.isFlag">
          <el-menu-item :index="item.index">
            <i :class="item.ic"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
        <template v-else>
          <el-submenu :index="item.index">
            <template slot="title">
              <i class="el-icon-s-cooperation"></i>{{ item.name }}
            </template>
            <el-menu-item :index="itema.index"
                          v-for="itema in item.children"
                          :key="itema.id">{{ itema.name }}</el-menu-item>
          </el-submenu>
        </template>
      </div>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  created () {
    // console.log(JSON.parse(window.sessionStorage.getItem('ADMIN')).roleId)
    //如果没有做菜单权限管理，而是直接普通只显示周报页面，管理员显示周报管理，直接本地查赋值会提高效率无需访问数据库
    //如果是有菜单权限管理，则需要一个菜单表，一个权限表以及中间表
    //1的话直接给它主页，2给主页和管理
    if (JSON.parse(window.sessionStorage.getItem('ADMIN')).roleId == 1) {
      this.lists = this.lists1
      this.$router.push('/myWeekly')
    } else {
      this.lists = this.lists2
      // getMenu({ acc: 3 }).then((res) => {
      //   if (res.data.code == 200) {
      //     console.log(res.data.data)
      //     this.lists3.push({
      //       id: 0,
      //       index: '/index',
      //       ic: 'el-icon-s-flag',
      //       name: '首页',
      //       isFlag: 1,
      //       children: ''
      //     })
      //     for (var i = 0; i < res.data.data.length; i++) {
      //       this.lists3.push({
      //         id: res.data.data[i].listId,
      //         index: res.data.data[i].listIndex,
      //         ic: res.data.data[i].listIcon,
      //         name: res.data.data[i].menuName,
      //         isFlag: res.data.data[i].listIsFlag,
      //         children: ''
      //       })
      //     }
      //   }
      // })
      // this.lists = this.lists3
    }
  },
  data () {
    return {
      lists: [],
      lists3: [],
      lists1: [
        {
          id: 1,
          index: '/weekly',
          ic: 'el-icon-data-line',
          name: '周报管理',
          isFlag: false,
          children: [
            {
              index: '/myWeekly',
              name: '我的周报'
            }
            ,
            // {
            //   index: '/allWeekly',
            //   name: '所有周报'
            // }
          ]
        }
      ],

      lists2: [
        {
          id: 0,
          index: '/index',
          ic: 'el-icon-s-home',
          name: '首页',
          isFlag: 1,
          children: ''
        },
        {
          id: 1,
          index: '/weekly',
          ic: 'el-icon-data-line',
          name: '周报管理',
          isFlag: false,
          children: [
            {
              index: '/myWeekly',
              name: '我的周报'
            }
            ,
            // {
            //   index: '/allWeekly',
            //   name: '所有周报'
            // }
          ]
        }
      ]
    }
  }
}
</script>

MyHeader.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!--
 * @Author: luckyNwa
 * @Date: 2023-07-04 10:38:45
 * @头部区域
-->
<template>
  <div class="headContainer">
    <div class="headlog">
      <span style="font-weight: 700; margin-left: 20px"> 工作日志</span>
      <span style="font-size: 17px"
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;欢迎&nbsp;{{ userName }}</span
      >
    </div>
    <div>
      <HeadPortrait></HeadPortrait>
    </div>
  </div>
</template>

<script>
import HeadPortrait from "@/components/HeadPortrait.vue";
export default {
  components: { HeadPortrait },
  name: "MyHeader",
  data() {
    return {
      userName: "",
      roleName: "",
    };
  },
  methods: {},
  created() {
    // 这是挂载完成
    const obj = JSON.parse(window.sessionStorage.getItem("ADMIN"));

    this.userName = obj.userName;
  },
};
</script>

HeadPortrait.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!--
 * @Author: luckyNwa
 * @Date: 2023-07-04 10:38:45
 * @本来是右边头像的组件，改成修改密码和退出的
-->
<template>
  <div>
    <div class="navbar">
      <el-button
        @click="showDialog"
        style="
          border: none;
          background-color: transparent;

          color: white;
        "
        icon="el-icon-lock"
      >
        修改密码
      </el-button>
      <el-button
        @click="logout"
        icon="el-icon-switch-button"
        style="background-color: transparent; border: none; color: white"
      >
        退出系统
      </el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="修改密码" width="30%">
      <!-- 修改密码表单 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="form.oldPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" type="password"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">修改</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { modifyPwd } from "@/api/user";
export default {
  name: "HeadPortrait",

  data() {
    return {
      dialogVisible: false,
      form: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请确认新密码", trigger: "blur" },
          { validator: this.validateConfirmPassword, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    ...mapActions(["setToken"]),
    logout() {
      sessionStorage.removeItem("ADMIN");
      sessionStorage.removeItem("token");

      this.setToken("");
      this.$router.push("/login");
    },
    showDialog() {
      this.dialogVisible = true;
    },
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.form.newPassword) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 处理提交逻辑
          // ...
          this.dialogVisible = false;

          modifyPwd({
            userAcc: JSON.parse(sessionStorage.getItem("ADMIN")).userAcc,
            newPassword: this.form.newPassword,
            oldPassword: this.form.oldPassword,
          }).then((res) => {
            if (res.data.code == 200) {
              this.notifySucceed(res.data.msg);
            } else {
              this.notifyError(res.data.msg);
            }
          });
        } else {
          console.log("表单验证失败");
        }
      });
    },
  },
};
</script>
<style scoped>
.navbar {
  widows: 199px;
  height: 60px;
  margin-top: 20px;
}
img {
  width: 60px;
  border-radius: 10px;
}
a {
  text-decoration: none;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!--
 * @Author: luckyNwa
 * @Date: 2023-07-04 10:38:45
 * @面包屑的组件
-->

<template>
  <div class="breadcrumb">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="item in lists"
                          :key="item.path">{{item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>

export default {
  data () {
    return {
      lists: []
    }
  },
  methods: {

  },
  watch: {
    $route (to, from) {
      this.lists = to.matched;
    }
  },
  mounted () {
    this.lists = this.$route.matched;
  }
}
</script>

<style>
</style>

views

login/index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!--
 * @Author: luckyNwa
 * @Date: 2023-07-04 10:38:45
 * @登录页面
-->
<template>
  <div class="bg">
    <div class="login-container">
      <h1 class="login-title">工作日志系统</h1>
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <div class="yzmdiv">
          <el-form-item prop="yzm">
            <el-input
              placeholder="验证码"
              v-model="loginForm.yzm"
              style="width: 130px; margin-right: 22px"
            ></el-input>
          </el-form-item>
          <div>
            <el-button prop="yzmm" style="width: 100px" @click="refreshYzm">{{
              loginForm.yzmm
            }}</el-button>
          </div>
        </div>
        <el-form-item>
          <el-button type="primary" @click="login" style="width: 100%"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { loginM } from "@/api/login";
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
export default {
  name: "MyLogin",
  computed: {
    ...mapGetters(["getToken"]),
  },
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        code: "",
        yzm: "",
        yzmm: "6666",
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      codeUrl: "",
    };
  },
  methods: {
    ...mapActions(["setToken"]),
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if (
            this.loginForm.yzm.toLowerCase() !==
            this.loginForm.yzmm.toLowerCase()
          ) {
            console.log("验证码有误！");
            this.$msgbox({
              title: "提示",
              roundButton: true,
              message: "验证码有误",
              showClose: false,
              confirmButtonText: "确定",
            });
            return;
          }
          // let client = {
          //   userAcc: this.loginForm.username,
          //   userPwd: this.loginForm.password
          // }

          // loginM(this.$qs.stringify(client)).then((resp) => {
          //   const data = resp.data.data
          //   console.log(resp)
          //   if (data !== null) {
          //     window.sessionStorage.setItem('ADMIN', JSON.stringify(data))
          //     this.notifySucceed(resp.data.msg)
          //     this.$router.push('/home')
          //     // this.setUser(data)

          //     // this.isShowLogin = false
          //     // this.$emit('userName', data.userName)
          //   } else {
          //     this.yzmm = this.$options.methods.showCode()
          //     this.$set(this.loginForm, 'yzmm', this.yzmm)

          //     this.$refs['loginForm'].resetFields()

          //     this.notifyError('账号或密码错误')
          //   }
          // })
          loginM({
            userAcc: this.loginForm.username,
            userPwd: this.loginForm.password,
          }).then((resp) => {
            const data = resp.data.data;
            console.log(resp);
            if (data !== null) {
              window.sessionStorage.setItem("ADMIN", JSON.stringify(data));
              window.sessionStorage.setItem("token", data.token);
              this.setToken(data.token);
              //   console.log('vuex里的token' + this.getToken)
              this.notifySucceed(resp.data.msg);
              this.$router.push("/home");
              // this.setUser(data)

              // this.isShowLogin = false
              // this.$emit('userName', data.userName)
            } else {
              this.yzmm = this.$options.methods.showCode();
              this.$set(this.loginForm, "yzmm", this.yzmm);

              this.$refs["loginForm"].resetFields();

              this.notifyError("账号或密码错误");
            }
          });
        }
      });
    },
    refreshCode() {
      // 在这里刷新验证码
      console.log("刷新验证码");
      this.yzmm = this.$options.methods.showCode();
      this.$set(this.loginForm, "yzmm", this.yzmm);
    },
    showCode() {
      var codeBox = "23456789qwertyupasdfghjkzxcvbnmQWERTYUPASDFGHJKZXCVBNM";

      var code = "";
      for (var i = 1; i <= 4; i++) {
        code += codeBox.charAt(Math.floor(Math.random() * codeBox.length));
      }
      this.yzmm = code;
      return code;
    },
    refreshYzm() {
      this.yzmm = this.$options.methods.showCode();
      this.$set(this.loginForm, "yzmm", this.yzmm);
    },
  },
  mounted() {
    // 初始化时获取验证码
    this.refreshCode();
  },
};
</script>

<style></style>

home/index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!--
 * @Author: luckyNwa
 * @Date: 2023-07-04 10:38:45
-->
<template>
  <div id="module">
    <el-header class="headerL" style="padding-bottom: 20px">
      <MyHeader></MyHeader
    ></el-header>
    <el-container>
      <NavMenu />
      <el-container>
        <el-header>
          <Breadcrumb />
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue";
import NavMenu from "@/components/NavMenu.vue";
import Breadcrumb from "@/components/BreadCrumb.vue";

export default {
  data() {
    return {};
  },
  methods: {},
  components: {
    NavMenu,
    Breadcrumb,
    MyHeader,
  },
};
</script>

<style></style>

home/index/index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!--
 * @Author: luckyNwa
 * @Date: 2023-07-04 10:38:45
 * @ 这是首页
-->
<template>
  <div style="display: flex; justify-content: space-between">
    <div class="left">
      <div>
        <div style="display: flex; justify-content: space-between">
          <div
            class="oneD"
            style="
              box-shadow: 1px 1px 6px;
              width: 360px;
              height: 250px;
              margin-right: 20px;
              margin-bottom: 20px;
            "
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-top: 40px;
                padding-left: 30px;
                padding-right: 50px;
              "
            >
              <span style="font-size: 20px; font-weight: 700">{{
                formattedDate
              }}</span>
              <span
                style="
                  margin-top: 2px;
                  color: #5da6f8;
                  font-weight: 700;
                  font-size: 14px;
                "
                >1月18日&nbsp;|&nbsp;星期一</span
              >
              <div></div>
            </div>
            <div style="display: flex; justify-content: space-between">
              <div style="margin-left: 40px; margin-top: 40px">
                <img
                  :src="codeImg"
                  style="border-radius: 7px; width: 80px; height: 80px"
                />
                <p style="margin-left: 25px; margin-top: 10px">四仔</p>
              </div>
              <div style="margin-top: 30px; margin-right: 130px">
                <p style="padding-top: 10px; padding-bottom: 4px">公司：</p>
                <p style="padding-bottom: 4px">年假:</p>
                <p style="padding-bottom: 4px">出差:</p>
                <p style="padding-bottom: 4px">外出:</p>
              </div>
            </div>
          </div>
          <div
            class="twoD"
            style="
              box-shadow: 1px 1px 6px;
              width: 400px;
              margin-right: 30px;
              height: 250px;
            "
          >
            <p
              style="
                font-weight: 800;
                margin-top: 10px;
                padding-bottom: 10px;
                border-bottom: 2px solid #f3f3f4;
              "
            >
              <span style="margin-left: 12px">常用功能</span>
            </p>
            <div
              style="
                display: flex;
                justify-content: left;
                padding-top: 20px;
                padding-left: 20px;
              "
            >
              <div @click="goToWeek">
                <img
                  :src="weekImg"
                  style="border-radius: 7px; width: 40px; height: 40px"
                />
                <div>
                  <button
                    style="
                      margin-left: 6px;
                      background-color: white;
                      border: none;
                    "
                  >
                    周报
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="threeD"
          style="height: 340px; width: 780px; box-shadow: 1px 1px 6px"
        >
          <p
            style="
              font-weight: 700;
              padding-top: 15px;
              padding-bottom: 10px;
              border-bottom: 2px solid #f3f3f4;
            "
          >
            <span style="margin-left: 12px">人员登录记录</span>
          </p>
          <div style="padding: 15px 10px">
            <el-table
              :data="
                tableData.slice(
                  (currentPage - 1) * pageSize,
                  currentPage * pageSize
                )
              "
              style="
                width: 100%;
                border: 2px solid #ebeef5;
                border-color: #868686;
              "
              :header-cell-style="tableHeaderCellStyle"
              border
              :cell-style="tableCellStyle"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                prop="createBy"
                label="登录名称"
                width="120"
                sortable
              >
              </el-table-column>
              <el-table-column prop="requestIp" label="登录地址" width="100">
              </el-table-column>
              <el-table-column prop="logSys" label="操作系统" width="120">
              </el-table-column>
              <el-table-column prop="logBrowser" label="浏览器" width="100">
              </el-table-column>
              <el-table-column prop="logTip" label="提示消息" width="120">
              </el-table-column>
              <el-table-column
                prop="createDate"
                label="访问时间"
                width="141"
                sortable
              >
              </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 15px">
              <el-pagination
                align="center"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[1, 3]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div style="width: 400px; box-shadow: 1px 1px 6px; margin-bottom: 20px">
        <el-calendar v-model="value"> </el-calendar>
      </div>
      <div style="box-shadow: 1px 1px 6px; height: 70px">
        <p
          style="
            font-weight: 700;
            padding-top: 10px;
            padding-left: 10px;
            padding-bottom: 9px;
            border-bottom: 2px solid #f3f3f4;
          "
        >
          公司公告
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getLogList } from "@/api/user";
export default {
  data() {
    return {
      value: new Date(),
      timeS: new Date(),
      codeImg: require("@/assets/img/sizai.png"),
      weekImg: require("@/assets/img/week.png"),
      tableData: [],
      currentPage: 1,
      pageSize: 3,
      total: "",
    };
  },
  created() {
    this.logList();
  },
  mounted() {
    var _this = this;
    this.timer = setInterval(function () {
      _this.timeS = new Date();
    }, 1000);
  },
  computed: {
    formattedDate: function () {
      var date = this.timeS;
      var hours = date.getHours().toString().padStart(2, "0");
      var minutes = date.getMinutes().toString().padStart(2, "0");
      var seconds = date.getSeconds().toString().padStart(2, "0");

      return hours + ":" + minutes + ":" + seconds;
    },
  },

  methods: {
    goToWeek() {
      this.$router.push("/myWeekly");
    },
    logList() {
      getLogList({
        userId: JSON.parse(sessionStorage.getItem("ADMIN")).userId,
        page: 1,
        limit: 1000,
      }).then((resp) => {
        this.$data.tableData = resp.data.data;
      });
    },
    // 每页条数改变时触发，选中一页显示多少行
    handleSizeChange(val) {
      console.log(`每页${val}条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleClick(row) {
      console.log(row);
      this.$data.drawe = true;
      this.$data.userObj = row;
    },
    handleCurrentChange(val) {
      console.log(`当前页:${val}`);
      this.currentPage = val;
    },
    tableHeaderCellStyle() {
      return "border-color: #868686; color: #606266;";
    },
    tableCellStyle() {
      return "border-color: #868686;";
    },
  },
};
</script>
<style>
.cell {
  text-align: center;
}

.el-calendar-table .el-calendar-day {
  height: 25px;
}
.el-calendar__title {
  color: #888888;
  font-weight: 700;
}

.el-icon-tickets {
  size: 30px;
}
</style>