完成初步的权限控制

src/api/job.js

@@ -47,3 +47,4 @@ export function modifyJobDetail(data) {
       data
   })
 }
+

src/api/priotity.js

@@ -31,3 +31,12 @@ export function deleteUser(data) {
         data
     })
 }
+
+export function verifyJobPriority(params) {
+    return request({
+      url: '/priority/verify',
+      method: 'get',
+      params
+  })
+  }
+

src/api/user.js

@@ -22,3 +22,11 @@ export function logout() {
     method: 'post'
   })
 }
+
+export function changePassword(data) {
+  return request({
+      url: '/user/change-password',
+      method: 'post',
+      data
+  })
+}

src/icons/svg/我的.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1658195300643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2408" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M512 563.2c-127.9744 0-230.4-115.2512-230.4-256s102.4256-256 230.4-256 230.4 115.2512 230.4 256-102.4256 256-230.4 256z m0-51.2c98.2528 0 179.2-91.0592 179.2-204.8s-80.9472-204.8-179.2-204.8-179.2 91.0592-179.2 204.8 80.9472 204.8 179.2 204.8zM128 793.6a179.2 179.2 0 0 1 179.3792-179.2h409.2416C815.6416 614.4 896 694.7328 896 793.6a179.2 179.2 0 0 1-179.3792 179.2H307.3792C208.3584 972.8 128 892.4672 128 793.6z m51.2 0c0 70.5792 57.4464 128 128.1792 128h409.2416A128 128 0 0 0 844.8 793.6c0-70.5792-57.4464-128-128.1792-128H307.3792A128 128 0 0 0 179.2 793.6z" p-id="2409"></path></svg>

src/layout/components/Navbar.vue

@@ -7,23 +7,17 @@
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img src="@/assets/images/default.png" class="user-avatar">
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <router-link to="/">
             <el-dropdown-item>
-              Home
+              首页
             </el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+            <span style="display:block;">退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -43,8 +37,7 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'sidebar',
+      'sidebar'
-      'avatar'
     ])
   },
   methods: {

src/permission.js

@@ -3,14 +3,14 @@ import store from './store'
 import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-import { getToken } from '@/utils/auth' // get token from cookie
+// import { getToken } from '@/utils/auth' // get token from cookie
 import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 const whiteList = ['/login'] // no redirect whitelist
 
-router.beforeEach(async(to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   // start progress bar
   NProgress.start()
 
@@ -18,44 +18,98 @@ router.beforeEach(async(to, from, next) => {
   document.title = getPageTitle(to.meta.title)
 
   // determine whether the user has logged in
-  const hasToken = getToken()
+  if (to.path != '/login' && !store.state.user.id_card) {
+    // 没有登录，跳转到登录页面
+    next({ path: '/login' });
+    NProgress.done();
+  } else {
+    let getPriorityName = function (path) {
+      let pos = path.indexOf('/', 1);
+      pos = pos == -1 ? path.length : pos;
+      return path.substring(1, pos);
+    }
+    let allow = false;
+    if (store.state.user.is_admin) {
+      allow = true;
+    } else {
+      switch (getPriorityName(to.path)) {
+        case 'priority':
+          break;
+        case 'job':
+          // 判断岗位读权限
+          allow = true;
+          break;
+        case 'person':
+          // 判断人员读权限
+          allow = true;
+          break;
+        case 'event':
+          // 判断人员读权限
+          allow = true;
+          break;
+        default:
+          allow = true;
+      }
+    }
 
-  if (hasToken) {
-    if (to.path === '/login') {
-      // if is logged in, redirect to the home page
-      next({ path: '/' })
-      NProgress.done()
-    } else {
-      const hasGetUserInfo = store.getters.name
-      if (hasGetUserInfo) {
-        next()
-      } else {
-        try {
-          // get user info
-          await store.dispatch('user/getInfo')
 
-          next()
+    if (allow) {
-        } catch (error) {
+      next();
-          // remove token and go to login page to re-login
-          await store.dispatch('user/resetToken')
-          Message.error(error || 'Has Error')
-          next(`/login?redirect=${to.path}`)
-          NProgress.done()
-        }
-      }
-    }
     } else {
-    /* has no token*/
+      Message({
+        message: '权限不足',
+        type: 'error',
+        duration: 2000
+      })
+      next(false);
+      NProgress.done();
+    }
+  }
 
-    if (whiteList.indexOf(to.path) !== -1) {
+
-      // in the free login whitelist, go directly
+  // next()
-      next()
+  // NProgress.done()
-    } else {
+
-      // other pages that do not have permission to access are redirected to the login page.
+  // next(`/login?redirect=${to.path}`)
-      next(`/login?redirect=${to.path}`)
+  // NProgress.done()
-      NProgress.done()
+
-    }
+  // const hasToken = getToken()
-  }
+  // if (hasToken) {
+  //   if (to.path === '/login') {
+  //     // if is logged in, redirect to the home page
+  //     next({ path: '/' })
+  //     NProgress.done()
+  //   } else {
+  //     const hasGetUserInfo = store.getters.name
+  //     if (hasGetUserInfo) {
+  //       next()
+  //     } else {
+  //       try {
+  //         // get user info
+  //         await store.dispatch('user/getInfo')
+
+  //         next()
+  //       } catch (error) {
+  //         // remove token and go to login page to re-login
+  //         await store.dispatch('user/resetToken')
+  //         Message.error(error || 'Has Error')
+  //         next(`/login?redirect=${to.path}`)
+  //         NProgress.done()
+  //       }
+  //     }
+  //   }
+  // } else {
+  //   /* has no token*/
+
+  //   if (whiteList.indexOf(to.path) !== -1) {
+  //     // in the free login whitelist, go directly
+  //     next()
+  //   } else {
+  //     // other pages that do not have permission to access are redirected to the login page.
+  //     next(`/login?redirect=${to.path}`)
+  //     NProgress.done()
+  //   }
+  // }
 })
 
 router.afterEach(() => {

src/router/index.js

@@ -158,7 +158,7 @@ export const constantRoutes = [
       name: 'priority',
       component: () => import('@/views/priority/priority'),
       meta: {
-        title: '权限管理',
+        title: '管理员专用',
         icon: '权限'
       }
     }]
@@ -217,6 +217,20 @@ export const constantRoutes = [
     }]
   },
 
+  {
+    path: '/user',
+    component: Layout,
+    children: [{
+      path: 'user',
+      name: 'user',
+      component: () => import('@/views/user/user'),
+      meta: {
+        title: '我的',
+        icon: '我的'
+      }
+    }]
+  },
+
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/store/modules/user.js

@@ -1,12 +1,11 @@
 import { login, logout, getInfo } from '@/api/user'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { setSessionItem, getSessionItem, clearSession } from '@/utils/auth'
 import { resetRouter } from '@/router'
 
 const getDefaultState = () => {
   return {
-    token: getToken(),
+    id_card: '',
-    name: '',
+    is_admin: 0
-    avatar: ''
   }
 }
 
@@ -16,14 +15,11 @@ const mutations = {
   RESET_STATE: (state) => {
     Object.assign(state, getDefaultState())
   },
-  SET_TOKEN: (state, token) => {
+  SET_ID_CARD: (state, id_card) => {
-    state.token = token
+    state.id_card = id_card;
   },
-  SET_NAME: (state, name) => {
+  SET_IS_ADMIN: (state, is_admin) => {
-    state.name = name
+    state.is_admin = is_admin;
-  },
-  SET_AVATAR: (state, avatar) => {
-    state.avatar = avatar
   }
 }
 
@@ -32,10 +28,13 @@ const actions = {
   login({ commit }, userInfo) {
     const { username, password } = userInfo
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
+      login({ id_card: username.trim(), password: password }).then(response => {
         const { data } = response
-        commit('SET_TOKEN', data.token)
+        commit('SET_ID_CARD', data.id_card)
-        setToken(data.token)
+        commit('SET_IS_ADMIN', data.is_admin)
+        // 存储到本地
+        setSessionItem('id_card', data.id_card);
+        setSessionItem('is_admin', data.is_admin);
         resolve()
       }).catch(error => {
         reject(error)
@@ -44,37 +43,43 @@ const actions = {
   },
 
   // get user info
-  getInfo({ commit, state }) {
+  // getInfo({ commit, state }) {
-    return new Promise((resolve, reject) => {
+  //   return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
+  //     getInfo(state.token).then(response => {
-        const { data } = response
+  //       const { data } = response
 
-        if (!data) {
+  //       if (!data) {
-          return reject('Verification failed, please Login again.')
+  //         return reject('Verification failed, please Login again.')
-        }
+  //       }
 
-        const { name, avatar } = data
+  //       const { name, avatar } = data
 
-        commit('SET_NAME', name)
+  //       commit('SET_NAME', name)
-        commit('SET_AVATAR', avatar)
+  //       commit('SET_AVATAR', avatar)
-        resolve(data)
+  //       resolve(data)
-      }).catch(error => {
+  //     }).catch(error => {
-        reject(error)
+  //       reject(error)
-      })
+  //     })
-    })
+  //   })
-  },
+  // },
 
   // user logout
   logout({ commit, state }) {
     return new Promise((resolve, reject) => {
-      logout(state.token).then(() => {
+      // 没有token不必再发请求
-        removeToken() // must remove  token  first
+      clearSession();
-        resetRouter()
+      resetRouter();
-        commit('RESET_STATE')
+      commit('RESET_STATE');
-        resolve()
+      resolve();
-      }).catch(error => {
+
-        reject(error)
+      // logout(state.token).then(() => {
-      })
+      //   removeToken() // must remove  token  first
+      //   resetRouter()
+      //   commit('RESET_STATE')
+      //   resolve()
+      // }).catch(error => {
+      //   reject(error)
+      // })
     })
   },
 

src/utils/auth.js

@@ -1,15 +1,27 @@
-import Cookies from 'js-cookie'
+// import Cookies from 'js-cookie'
 
-const TokenKey = 'vue_admin_template_token'
+// const TokenKey = 'vue_admin_template_token'
 
-export function getToken() {
+// export function getToken() {
-  return Cookies.get(TokenKey)
+//   return Cookies.get(TokenKey)
+// }
+
+// export function setToken(token) {
+//   return Cookies.set(TokenKey, token)
+// }
+
+// export function removeToken() {
+//   return Cookies.remove(TokenKey)
+// }
+
+export function setSessionItem(key, value) {
+  sessionStorage[key] = value;
 }
 
-export function setToken(token) {
+export function getSessionItem(key) {
-  return Cookies.set(TokenKey, token)
+  return sessionStorage[key];
 }
 
-export function removeToken() {
+export function clearSession() {
-  return Cookies.remove(TokenKey)
+  sessionStorage.clear();
 }

src/views/job/show.vue

@@ -113,6 +113,7 @@ import DepDescription from "./components/DepDescription.vue";
 import NoData from "./components/NoData.vue";
 
 import * as jobApi from "@/api/job";
+import { verifyJobPriority } from "@/api/priotity";
 
 import { MessageBox, Message } from "element-ui";
 
@@ -162,14 +163,13 @@ export default {
       curNewNode: null,
       intervalId: null,
       comTitleEdit: null,
+      writePriority: null,
     };
   },
   created() {},
   mounted() {
     // 请求组织架构
-    jobApi
+    jobApi.getFramework().then(
-      .getFramework()
-      .then(
       (res) => {
         let originalMindData = res.data;
         // 添加 id 和 expanded
@@ -525,13 +525,65 @@ export default {
     set_theme(theme_name) {
       this.jm.set_theme(theme_name);
     },
-    clickModify() {
+    verifyWritePriority() {
-      this.$message({
+      if (this.writePriority === null) {
-        message: "修改数据",
+        return new Promise((resolve, reject) => {
-        type: "warning",
+          verifyJobPriority({
+            id_card: this.$store.state.user.id_card,
+            priority_type: "job_write",
+          }).then(
+            (res) => {
+              this.writePriority = res.data.result;
+              resolve();
+            },
+            (err) => {
+              this.writePriority = 0;
+              console.log("err:", err);
+              reject();
+            }
+          );
         });
+      } else {
+        return new Promise((resolve, reject) => {
+          resolve();
+        })
+      }
+    },
+    async clickModify() {
+      await this.verifyWritePriority();
+      if (this.writePriority) {
         this.allowSave = true;
         this.jm.enable_edit();
+      } else {
+        // 没有权限
+        this.$message({
+          message: "没有修改权限",
+          type: "error",
+          duration: 2000,
+        });
+      }
+      // 判断是否有修改权限
+      // verifyJobPriority({
+      //   id_card: this.$store.state.user.id_card,
+      //   priority_type: "job_write",
+      // }).then(
+      //   (res) => {
+      //     if (!res.data.result) {
+      //       // 没有权限
+      //       this.$message({
+      //         message: "没有修改权限",
+      //         type: "warning",
+      //         duration: 2000,
+      //       });
+      //     } else {
+      //       this.allowSave = true;
+      //       this.jm.enable_edit();
+      //     }
+      //   },
+      //   (err) => {
+      //     console.log("err:", err);
+      //   }
+      // );
     },
     cleanTreeData() {
       // 深复制对象
@@ -636,7 +688,20 @@ export default {
       }
       return "合法名称";
     },
-    clickSaveDoc() {
+    async clickSaveDoc() {
+      // 判断权限
+      await this.verifyWritePriority();
+
+      if (!this.writePriority) {
+        // 没有权限
+        this.$message({
+          message: "没有修改权限",
+          type: "error",
+          duration: 2000,
+        });
+        return;
+      }
+
       // 增加节点，判断是否可添加
       if (this.curNewNode) {
         if (this.comName == "DepDescription") {

src/views/login/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+    <el-form
-
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+      auto-complete="on"
+      label-position="left"
+    >
       <div class="title-container">
         <h3 class="title">Login Form</h3>
       </div>
@@ -37,73 +43,84 @@
           @keyup.enter.native="handleLogin"
         />
         <span class="show-pwd" @click="showPwd">
-          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+          <svg-icon
+            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+          />
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+      <el-button
+        :loading="loading"
+        type="primary"
+        style="width: 100%; margin-bottom: 30px"
+        @click.native.prevent="handleLogin"
+        >Login</el-button
+      >
 
       <div class="tips">
-        <span style="margin-right:20px;">username: admin</span>
+        <span style="margin-right: 20px">username: admin</span>
         <span> password: any</span>
       </div>
-
     </el-form>
   </div>
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
+import { validUsername } from "@/utils/validate";
 
 export default {
-  name: 'Login',
+  name: "Login",
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
+        callback(new Error("Please enter the correct user name"));
       } else {
-        callback()
+        callback();
-      }
       }
+    };
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
+        callback(new Error("The password can not be less than 6 digits"));
       } else {
-        callback()
+        callback();
-      }
       }
+    };
     return {
       loginForm: {
-        username: 'admin',
+        username: "admin",
-        password: '111111'
+        password: "admin",
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+        username: [
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+          { required: true, trigger: "blur", validator: validateUsername },
+        ],
+        password: [
+          { required: true, trigger: "blur", validator: validatePassword },
+        ],
       },
       loading: false,
-      passwordType: 'password',
+      passwordType: "password",
-      redirect: undefined
+      redirect: undefined,
-    }
+    };
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
-        this.redirect = route.query && route.query.redirect
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
     },
-      immediate: true
-    }
   },
   methods: {
     showPwd() {
-      if (this.passwordType === 'password') {
+      if (this.passwordType === "password") {
-        this.passwordType = ''
+        this.passwordType = "";
       } else {
-        this.passwordType = 'password'
+        this.passwordType = "password";
       }
       this.$nextTick(() => {
-        this.$refs.password.focus()
+        this.$refs.password.focus();
-      })
+      });
     },
     handleLogin() {
       // this.$refs.loginForm.validate(valid => {
@@ -120,26 +137,28 @@ export default {
       //     return false
       //   }
       // })
-      
+      this.loading = true;
-
+      this.$store
-      this.loading = true
+        .dispatch("user/login", this.loginForm)
-      this.$store.dispatch('user/login', this.loginForm).then(() => {
+        .then(() => {
-        this.$router.push({ path: this.redirect || '/' })
+          this.$router.push({ path: this.redirect || "/" });
-        this.loading = false
+          this.loading = false;
-      }).catch(() => {
-        this.loading = false
         })
-    }
+        .catch((err) => {
-  }
+          console.log(err);
-}
+          this.loading = false;
+        });
+    },
+  },
+};
 </script>
 
 <style lang="scss">
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg:#283443;
+$bg: #283443;
-$light_gray:#fff;
+$light_gray: #fff;
 $cursor: #fff;
 
 @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@@ -182,9 +201,9 @@ $cursor: #fff;
 </style>
 
 <style lang="scss" scoped>
-$bg:#2d3a4b;
+$bg: #2d3a4b;
-$dark_gray:#889aa4;
+$dark_gray: #889aa4;
-$light_gray:#eee;
+$light_gray: #eee;
 
 .login-container {
   min-height: 100%;

src/views/priority/components/add.vue

@@ -1,28 +1,44 @@
 <template>
   <div>
     <div class="button-div">
-      <el-button type="primary" size="small" @click="onSubmit">添加</el-button>
+      <el-button type="primary" size="small" @click="onSubmit"
+        >提交增加</el-button
+      >
     </div>
     <table class="priority-table">
       <tr>
         <th>用户名</th>
-        <!-- <td><input type="text" v-model="priorityData.username" class="input-box"></td> -->
         <td>
+          <input
+            type="text"
+            v-model="priorityData.username"
+            class="input-bar"
+            placeholder="请输入"
+          />
+        </td>
+        <!-- <td>
           <div
             contenteditable="true"
             class="input-box"
             placeholder="请输入"
           ></div>
-        </td>
+        </td> -->
         <th>身份证号</th>
-        <!-- <td colspan="2"><input type="text" v-model="priorityData.id_card" class="input-box"></td> -->
         <td colspan="2">
+          <input
+            type="text"
+            v-model="priorityData.id_card"
+            class="input-bar"
+            placeholder="请输入"
+          />
+        </td>
+        <!-- <td colspan="2">
           <div
             contenteditable="true"
             class="input-box"
             placeholder="请输入"
           ></div>
-        </td>
+        </td> -->
       </tr>
       <tr>
         <th rowspan="2">岗位</th>
@@ -117,13 +133,16 @@ export default {
   },
   methods: {
     onSubmit() {
+      console.log(this.priorityData);
       addUser({ data: this.priorityData }).then(
         (res) => {
+          if (res == 0) {
             this.$message({
               message: "添加成功",
               type: "success",
               duration: 2000,
             });
+          }
         },
         (err) => {
           console.log("err:", err);
@@ -141,6 +160,11 @@ export default {
   text-align: right;
 }
 
+.input-bar {
+  width: 90%;
+  border-width: 0;
+}
+
 .priority-table {
   border-collapse: collapse;
   width: 80%;

src/views/priority/components/modify.vue

@@ -99,8 +99,8 @@ export default {
   created() {
     if (!this.priorityData) {
       this.priorityData = {
-        id_card: "",
+        id_card: "无数据",
-        username: "",
+        username: "无数据",
         job_read: 1,
         job_write: 0,
         person_read: 1,
@@ -108,19 +108,14 @@ export default {
         event_read: 1,
         event_write: 0,
       };
-      Message({
-        message: "暂无数据, 请先在查看页面选择要修改的用户",
-        type: "warning",
-        duration: 2000,
-      });
     }
-    console.log(this.priorityData);
+
-    if (this.priorityData.job_read > 50) {
+    // to delete
-      this.priorityData.job_read = 1;
+    // if (this.priorityData.job_read > 50) {
-    } else {
+    //   this.priorityData.job_read = 1;
-      this.priorityData.job_read = 0;
+    // } else {
-    }
+    //   this.priorityData.job_read = 0;
-    console.log(this.priorityData);
+    // }
   },
   methods: {
     onSubmit() {
@@ -141,6 +136,17 @@ export default {
       );
     },
   },
+  activated() {
+    if (!this.data) {
+      Message({
+        message: "暂无数据, 请先在查看页面选择要修改的用户",
+        type: "warning",
+        duration: 2000,
+      });
+    } else {
+      this.priorityData = this.data;
+    }
+  }
 };
 </script>
 

src/views/priority/components/password.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div class="button-div">
+      <el-button type="primary" size="small" @click="onSubmit"
+        >提交重置</el-button
+      >
+    </div>
+    <table class="priority-table">
+      <tr>
+        <th>普通用户身份证</th>
+        <td>
+          <input
+            type="text"
+            v-model="id_card"
+            class="input-bar"
+            placeholder="请输入"
+          />
+        </td>
+      </tr>
+      <tr>
+        <th>新密码</th>
+        <td>
+          <input
+            type="text"
+            v-model="newPassword"
+            class="input-bar"
+            placeholder="请输入"
+          />
+        </td>
+      </tr>
+      <tr>
+        <th>确认密码</th>
+        <td>
+          <input
+            type="text"
+            v-model="newPassword2"
+            class="input-bar"
+            placeholder="请输入"
+          />
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import { changePassword } from "@/api/user";
+
+export default {
+  data() {
+    return {
+      id_card: "",
+      newPassword: "",
+      newPassword2: "",
+    };
+  },
+  methods: {
+    onSubmit() {
+      if (this.newPassword !== this.newPassword2) {
+        this.$message({
+          message: "两次密码不一致",
+          type: "error",
+          duration: 2000,
+        });
+        return;
+      }
+      changePassword({
+        id_card: this.id_card,
+        password: this.newPassword,
+      }).then(
+        (res) => {
+          if (res.code == 0) {
+            this.$message({
+              message: "重置成功",
+              type: "success",
+              duration: 2000,
+            });
+          }
+        },
+        (err) => {
+          console.log("err:", err);
+        }
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+.button-div {
+  margin: 0px auto;
+  width: 80%;
+  text-align: right;
+}
+
+.input-bar {
+  width: 90%;
+  border-width: 0;
+}
+
+.priority-table {
+  border-collapse: collapse;
+  width: 80%;
+  margin: 10px auto 0px;
+  font-size: 1em;
+}
+
+.priority-table table,
+th,
+td {
+  border: 1px solid #ebebeb;
+}
+
+.priority-table tr {
+  height: 3em;
+}
+
+.priority-table td {
+  text-align: center;
+}
+</style>

src/views/priority/components/select.vue

@@ -1,22 +1,5 @@
 <template>
   <div>
-    <!-- <el-row :gutter="20">
-      <el-col :span="20" :offset="0">
-        <el-input
-          placeholder="输入姓名或身份证号进行搜索"
-          clearable
-          v-model="searchText"
-          @change="searchPriority"
-        ></el-input>
-      </el-col>
-      <el-col :span="4" :offset="0">
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          @click="searchPriority"
-        ></el-button>
-      </el-col>
-    </el-row> -->
     <el-row type="flex" justify="center" class="search-box">
       <el-col :span="18">
         <el-input
@@ -87,7 +70,9 @@ export default {
   },
   components: {},
   mounted() {
+    if (!this.searchData) {
       this.searchPriority();
+    }
   },
   methods: {
     searchPriority() {
@@ -155,7 +140,7 @@ export default {
       this.pageNum = curPageNum;
       this.searchPriority();
     },
-  },
+  }
 };
 </script>
 

src/views/priority/priority.vue

@@ -5,11 +5,14 @@
         <el-tab-pane label="查看权限" name="PriorityFind"></el-tab-pane>
         <el-tab-pane label="修改权限" name="PriorityModify"></el-tab-pane>
         <el-tab-pane label="增加用户" name="PriorityAdd"></el-tab-pane>
+        <el-tab-pane label="重置密码" name="PriorityPassword"></el-tab-pane>
       </el-tabs>
     </el-header>
 
+    <keep-alive>
       <component :is="comName" @changeCom="changeComponent" :data="comData">
       </component>
+    </keep-alive>
   </el-container>
 </template>
 
@@ -17,18 +20,20 @@
 import PriorityFind from "./components/select.vue";
 import PriorityModify from "./components/modify.vue";
 import PriorityAdd from "./components/add.vue";
+import PriorityPassword from "./components/password.vue"
 
 export default {
   data() {
     return {
       comName: "PriorityFind",
-      comData: null,
+      comData: null
     };
   },
   components: {
     PriorityFind,
     PriorityModify,
     PriorityAdd,
+    PriorityPassword
   },
   methods: {
     handleClick(tab, event) {
@@ -47,5 +52,4 @@ export default {
   padding-left: 5%;
   padding-right: 5%;
 }
-
 </style>

src/views/user/user.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="main-body">
+    <p>我的身份证号：{{ id_card }}</p>
+    <el-divider></el-divider>
+    <p>修改密码</p>
+    <div class="button-div">
+      <el-button type="primary" size="small" @click="onSubmit"
+        >提交修改</el-button
+      >
+    </div>
+    <table class="priority-table">
+      <tr>
+        <th>新密码</th>
+        <td>
+          <input
+            type="text"
+            v-model="newPassword"
+            class="input-bar"
+            placeholder="请输入"
+          />
+        </td>
+      </tr>
+      <tr>
+        <th>确认密码</th>
+        <td>
+          <input
+            type="text"
+            v-model="newPassword2"
+            class="input-bar"
+            placeholder="请输入"
+          />
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import { changePassword } from "@/api/user";
+export default {
+  data() {
+    return {
+      id_card: this.$store.state.user.id_card,
+      newPassword: "",
+      newPassword2: "",
+    };
+  },
+  methods: {
+    onSubmit() {
+      if (this.newPassword !== this.newPassword2) {
+        this.$message({
+          message: "两次密码不一致",
+          type: "error",
+          duration: 2000,
+        });
+        return;
+      }
+      changePassword({
+        id_card: this.id_card,
+        password: this.newPassword,
+      }).then(
+        (res) => {
+          if (res.code == 0) {
+            this.$message({
+              message: "重置成功",
+              type: "success",
+              duration: 2000,
+            });
+          }
+        },
+        (err) => {
+          console.log("err:", err);
+        }
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+.main-body {
+  padding-left: 5%;
+  padding-right: 5%;
+}
+
+
+.button-div {
+  margin: 0px auto;
+  width: 80%;
+  text-align: right;
+}
+
+.input-bar {
+  width: 90%;
+  border-width: 0;
+}
+
+.priority-table {
+  border-collapse: collapse;
+  width: 80%;
+  margin: 10px auto 0px;
+  font-size: 1em;
+}
+
+.priority-table table,
+th,
+td {
+  border: 1px solid #ebebeb;
+}
+
+.priority-table tr {
+  height: 3em;
+}
+
+.priority-table td {
+  text-align: center;
+}
+</style>