用户管理修改

src/assets/styles/home.scss

@@ -249,27 +249,34 @@
   color: $--color-text-regular;
   cursor: pointer;
 }
-.user-name {
+.user-item {
   display: inline-block;
   vertical-align: top;
-  margin-left: 10px;
+
+  > i {
+    font-size: 16px;
+  }
+}
+.user-name {
   min-width: 60px;
   max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 600;
+  > i {
+    margin-right: 5px;
+  }
 }
 .user-logout {
-  display: inline-block;
-  vertical-align: top;
-  margin-left: 10px;
-  font-size: 20px;
+  margin-left: 20px;
   cursor: pointer;
 }
 .user-logout i {
   vertical-align: middle;
   margin-top: -3px;
+  font-size: 18px;
+  font-weight: 600;
 }
 .user-logout:hover {
   color: $--color-danger;

src/constants/enumerate.js

@@ -3,3 +3,10 @@ export const ABLE_TYPE = {
   0: "禁用",
   1: "启用"
 };
+
+export const ROLE_TYPE = {
+  DEV: "开发",
+  TEST: "测试",
+  OPS: "运维",
+  ADMIN: "管理员"
+};

src/modules/admin/components/ModifyUser.vue

@@ -100,7 +100,7 @@ export default {
     }
   },
   data() {
-    const roleIdsValidator = (rule, value, callback) => {
+    const rolesValidator = (rule, value, callback) => {
       if (!value || !value.length) {
         callback(new Error("请选择角色"));
       } else {
@@ -140,7 +140,7 @@ export default {
         role: [
           {
             required: true,
-            validator: roleIdsValidator,
+            validator: rolesValidator,
             trigger: "change"
           }
         ],

src/modules/admin/components/ResetPwd.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-dialog
+    class="reset-pwd"
+    :visible.sync="modalIsShow"
+    title="修改密码"
+    top="10vh"
+    width="448px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    :show-close="false"
+    @open="visibleChange"
+  >
+    <el-form
+      ref="modalFormComp"
+      :model="modalForm"
+      :rules="resetRules"
+      label-position="top"
+    >
+      <el-form-item prop="password" label="新密码：">
+        <el-input
+          type="password"
+          v-model="modalForm.password"
+          placeholder="请输入新密码"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="rePassword" label="再次密码：">
+        <el-input
+          type="password"
+          v-model="modalForm.rePassword"
+          placeholder="请再次输入新密码"
+          clearable
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="primary" :disabled="isSubmit" @click="submit"
+        >确认</el-button
+      >
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { resetPwd } from "../api";
+import { password } from "@/plugins/formRules";
+
+const initModalForm = {
+  password: "",
+  rePassword: ""
+};
+
+export default {
+  name: "reset-pwd",
+  data() {
+    const equalToPswd = (rule, value, callback) => {
+      if (this.modalForm.rePassword !== this.modalForm.password) {
+        callback(new Error("两次输入的密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: { ...initModalForm },
+      resetRules: {
+        password: [...password],
+        rePassword: [
+          ...password,
+          {
+            validator: equalToPswd,
+            trigger: "change"
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    initData() {
+      this.modalForm = { ...initModalForm };
+    },
+    visibleChange() {
+      this.initData();
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      const data = await resetPwd(this.modalForm.password).catch(() => {
+        this.isSubmit = false;
+      });
+
+      if (!data) return;
+
+      this.isSubmit = false;
+      this.$message.success("修改成功！");
+      this.$emit("modified", data);
+      this.modalIsShow = false;
+    }
+  }
+};
+</script>

src/modules/admin/views/UserManage.vue

@@ -101,11 +101,16 @@
 
 <script>
 import ModifyUser from "../components/ModifyUser";
-import { userListPage, userRoleList, resetPwd } from "../api";
+import { userListPage, userRoleList, userInsertOrUpdate } from "../api";
 
 export default {
   name: "user-manage",
   components: { ModifyUser },
+  filters: {
+    rolesFilter(val) {
+      return val.map(code => this.roleType[code]).join("，");
+    }
+  },
   data() {
     return {
       filter: {
@@ -116,6 +121,7 @@ export default {
       size: this.GLOBAL.pageSize,
       total: 0,
       roles: [],
+      roleType: {},
       users: [],
       curUser: {},
       loading: false
@@ -132,6 +138,11 @@ export default {
     async getRoleList() {
       const data = await userRoleList();
       this.roles = data || [];
+      let roleType = {};
+      this.roles.forEach(item => {
+        roleType[item.code] = item.name;
+      });
+      this.roleType = roleType;
     },
     async getList() {
       const datas = {
@@ -156,7 +167,7 @@ export default {
       this.$refs.ModifyUser.open();
     },
     async toResetPwd(row) {
-      await resetPwd(row.id);
+      await userInsertOrUpdate({ id: row.id, password: "123456" });
       this.$message.success("密码重置成功！");
     }
   }

src/plugins/filters.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import { formatDate } from "./utils";
+import { ROLE_TYPE } from "../constants/enumerate";
 
 const DEFAULT_FIELD = "";
 
@@ -12,3 +13,6 @@ Vue.filter("defaultFieldFilter", function(val) {
 Vue.filter("timestampFilter", function(val) {
   return val ? formatDate("YYYY-MM-DD HH:mm:ss", new Date(val)) : DEFAULT_FIELD;
 });
+Vue.filter("rolesFilter", function(val) {
+  return val.map(code => ROLE_TYPE[code]).join("，") || DEFAULT_FIELD;
+});

src/views/Home.vue

@@ -17,7 +17,11 @@
         </el-breadcrumb>
       </div>
       <div class="head-user">
-        <span class="user-logout" @click="logout">
+        <span class="user-item user-name" :title="username" @click="toResetPwd">
+          <i class="el-icon-user-solid"></i>
+          <span>{{ username }}</span>
+        </span>
+        <span class="user-item user-logout" title="退出登录" @click="logout">
           <i class="el-icon-switch-button"></i>
         </span>
       </div>
@@ -68,15 +72,20 @@
         <view-footer></view-footer>
       </div>
     </div>
+
+    <!-- ResetPwd -->
+    <reset-pwd ref="ResetPwd" @modified="logout"></reset-pwd>
   </div>
 </template>
 
 <script>
 import { navs, ROLE_NAV } from "@/constants/navs";
 import { APP_TITLE } from "../constants/app";
+import ResetPwd from "../modules/admin/components/ResetPwd";
 
 export default {
   name: "home",
+  components: { ResetPwd },
   data() {
     const user = this.$ls.get("user", { id: "", name: "", role: [] });
 
@@ -204,6 +213,9 @@ export default {
     logout() {
       this.$ls.clear();
       this.$router.push({ name: "Login" });
+    },
+    toResetPwd() {
+      this.$refs.ResetPwd.open();
     }
   }
 };