初步完成用户管理

src/apis/home.js

@@ -13,3 +13,11 @@ export const loginOut = () => {
     url: '/admin/logout'
   })
 }
+// 修改密码
+export const editPass = (data) => {
+  return axios({
+    method: 'post',
+    url: '/sys/user/updatePwd',
+    data
+  })
+}

src/apis/system2.js

@@ -21,3 +21,9 @@ export const getDetailById = (id) => {
     url: `/sys/user/detail/${id}`
   })
 }
+// 点击注销
+export const userRemov = (id) => {
+  return axios({
+    url: `/sys/user/removes/${id}`
+  })
+}

src/views/layout/index.vue

@@ -1,25 +1,31 @@
 <!--  -->
 <template>
   <div class="layout">
-    <div class="top" @mouseleave='isShow=0'>
+    <div class="top" @mouseleave="isShow = 0">
       <div class="left">
         <img src="@/assets/img/logo.png" alt="" />
         <h2>馆藏管理系统</h2>
-        <div class="box"
-          @mouseenter='isShow = index'
-        v-for="(item, index) in tabList" :key="index">
-          <a
-          @click="toHome(index)"
-          :class="{ active: $route.meta.myInd === index }"
+        <div
+          class="box"
+          @mouseenter="isShow = index"
+          v-for="(item, index) in tabList"
+          :key="index"
         >
-          {{ item.name }}
-          <ul v-show="isShow === index"
-               @mouseenter='isShow = index'
-               >
-            <li v-for="(val, ind) in item.son" :key="ind"
-                @click="skip(item,val.id)">{{ val.name }}</li>
-          </ul>
-        </a>
+          <a
+            @click="toHome(index)"
+            :class="{ active: $route.meta.myInd === index }"
+          >
+            {{ item.name }}
+            <ul v-show="isShow === index" @mouseenter="isShow = index">
+              <li
+                v-for="(val, ind) in item.son"
+                :key="ind"
+                @click="skip(item, val.id)"
+              >
+                {{ val.name }}
+              </li>
+            </ul>
+          </a>
         </div>
 
         <!-- <router-link to="/layout/holding0" :class='{active:$route.meta.myInd===1}'>馆藏管理
@@ -35,9 +41,44 @@
         <div class="img">
           <img src="@/assets/img/user1.jpg" alt="" />
         </div>
-        <span>{{userData.realName}}</span>
-        <span class="loginOut" @click="editPass">修改密码</span>
+        <span>{{ userData.realName }}</span>
+        <span class="loginOut" @click="isShowPass=!isShowPass">修改密码</span>
         <span class="loginOut" @click="loginOut">退出登录</span>
+        <!-- 修改密码 -->
+        <div class="editPass" v-show="isShowPass">
+          <el-form
+            :model="form"
+            label-width="100px"
+            :rules="rules"
+            ref="ruleForm"
+          >
+            <el-form-item label="旧密码：" prop="oldPassword">
+              <el-input
+                v-model="form.oldPassword"
+                placeholder="请输入"
+                show-password
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="新密码：" prop="newPassword">
+              <el-input
+                v-model="form.newPassword"
+                placeholder="请输入"
+                show-password
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="确定新密码：" prop="checkPass">
+              <el-input
+                v-model="form.checkPass"
+                placeholder="请输入"
+                show-password
+              ></el-input>
+            </el-form-item>
+          </el-form>
+          <div class="button">
+            <el-button size="small" type="primary" @click="editPass">确 定</el-button>
+            <el-button size="small" @click="isShowPass=!isShowPass">取 消</el-button>
+          </div>
+        </div>
       </div>
     </div>
     <Router-view />
@@ -45,7 +86,7 @@
 </template>
 
 <script>
-import { loginOut } from '@/apis/home'
+import { loginOut, editPass } from '@/apis/home'
 export default {
   name: 'Layout',
 
@@ -53,7 +94,21 @@ export default {
   components: {},
   data () {
     // 这里存放数据
+    const validatePass2 = (rule, value, callback) => {
+      if (value !== this.form.newPassword) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
     return {
+      isShowPass: false,
+      // 修改密码
+      form: {
+        oldPassword: '',
+        newPassword: '',
+        checkPass: ''
+      },
       // 用户信息
       userData: {},
       // 控制子菜单显示
@@ -78,19 +133,40 @@ export default {
         {
           name: '征集管理',
           push: '/layout/collect',
-          son: [{ name: '征集品总账', id: 0 }, { name: '征集品提用', id: 1 }, { name: '征集品注销', id: 2 }]
+          son: [
+            { name: '征集品总账', id: 0 },
+            { name: '征集品提用', id: 1 },
+            { name: '征集品注销', id: 2 }
+          ]
         },
         {
           name: '库房管理',
           push: '/layout/statistics',
-          son: [{ name: '库房设置', id: 0 }, { name: '统计报表', id: 1 }]
+          son: [
+            { name: '库房设置', id: 0 },
+            { name: '统计报表', id: 1 }
+          ]
         },
         {
           name: '系统管理',
           push: '/layout/system',
-          son: [{ name: '用户管理', id: 2 }, { name: '系统日志', id: 1 }]
+          son: [
+            { name: '用户管理', id: 2 },
+            { name: '系统日志', id: 1 }
+          ]
         }
-      ]
+      ],
+      rules: {
+        checkPass: [
+          { validator: validatePass2, trigger: 'blur' }
+        ],
+        oldPassword: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ]
+      }
     }
   },
   // 监听属性 类似于data概念
@@ -100,8 +176,20 @@ export default {
   // 方法集合
   methods: {
     // 点击修改密码
-    editPass () {
-      console.log(this.userData)
+
+    async editPass () {
+      try {
+        await this.$refs.ruleForm.validate()
+        await editPass(this.form)
+        this.$message.success('修改成功')
+        // 发请求，清空数据
+        await loginOut()
+        localStorage.removeItem('daliCK')
+        localStorage.removeItem('daliCK_token')
+        this.$router.push('/login')
+      } catch (error) {
+        this.$message.error('旧密码错误')
+      }
     },
     // 退出登录
     loginOut () {
@@ -109,22 +197,24 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(async () => {
-        // 发请求，清空数据
-        await loginOut()
-        localStorage.removeItem('daliCK')
-        localStorage.removeItem('daliCK_token')
-        this.$router.push('/login')
-        this.$message({
-          type: 'success',
-          message: '退出成功!'
+      })
+        .then(async () => {
+          // 发请求，清空数据
+          await loginOut()
+          localStorage.removeItem('daliCK')
+          localStorage.removeItem('daliCK_token')
+          this.$router.push('/login')
+          this.$message({
+            type: 'success',
+            message: '退出成功!'
+          })
         })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消.'
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消.'
+          })
         })
-      })
     },
     skip (item, ind) {
       this.$router.push(item.push + ind).catch(() => {})
@@ -201,12 +291,31 @@ export default {
         }
       }
     }
-    .box:hover a{
+    .box:hover a {
       color: #fff;
     }
   }
   .right {
-    .loginOut{
+    position: relative;
+    .editPass {
+      .button{
+        width: 100%;
+        display: flex;
+        justify-content: center;
+      }
+      /deep/.el-form-item__label{
+        color: #fff;
+      }
+      padding: 20px;
+      z-index: 9999;
+      position: absolute;
+      top: 68px;
+      right: 0px;
+      width: 300px;
+      // background: rgba(0,0,0,.8);
+      background-color: #001529;
+    }
+    .loginOut {
       cursor: pointer;
     }
     display: flex;

src/views/system/system2.vue

@@ -62,7 +62,7 @@
                   <el-button type="text" @click="editUser(row.id)">修改</el-button>
                   <!-- <el-button type="text" v-if="row.isEnabled==='启用'">停用</el-button>
                   <el-button type="text" v-else>启用</el-button> -->
-                  <el-button type="text">注销</el-button>
+                  <el-button type="text" @click="cancel(row.id)">注销</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -87,7 +87,7 @@
 </template>
 
 <script>
-import { getUserList } from '@/apis/system2'
+import { getUserList, userRemov } from '@/apis/system2'
 import System2Add from './system2_add.vue'
 import System2Edit from './system2_Edit.vue'
 import TabList from '@/components/tabLeft4.vue'
@@ -157,6 +157,25 @@ export default {
       this.myData.pageNum = 1
       this.getUserList(this.myData)
     },
+    // 点击注销
+    async cancel (id) {
+      this.$confirm('确定注销吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        const res = await userRemov(id)
+        if (res.code === 0) {
+          this.$message.success('注销成功')
+          this.getUserList(this.myData)
+        } else this.$message.warning(res.msg)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消注销'
+        })
+      })
+    },
     // 点击修改
     editUser (id) {
       this.$refs.mydia.getDetailById(id)