From 17f1e367e8d90cdde9e857d68bed77c57476d03d Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期四, 01 七月 2021 16:46:08 +0800
Subject: [PATCH] 用户密码功能更新
---
src/components/PageHeader.vue | 48 ++++++++-
src/pages/user/list.vue | 27 +++++
src/pages/user/js/api.js | 33 ++++++
src/components/PwdChange.vue | 168 +++++++++++++++++++++++++++++++++
4 files changed, 266 insertions(+), 10 deletions(-)
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 9235835..5a7eda6 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -12,27 +12,59 @@
<span class="avatar-icon">
<i class="el-icon-user-solid"></i>
</span>
- <span class="avatar-text">
- {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
- </span>
+ <el-dropdown @command="commandClick">
+ <span class="avatar-text">
+ {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
+ </span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="passwordChange">瀵嗙爜淇敼</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
</div>
-
</div>
+
+ <!-- 瀵嗙爜淇敼 -->
+ <el-dialog title="瀵嗙爜淇敼" width="400px" :visible.sync="pwd.show" :close-on-click-modal="false" top="0"
+ class="dialog-center" :modal-append-to-body="false">
+ <pwd-change v-if="pwd.show" :visible.sync="pwd.show"></pwd-change>
+ </el-dialog>
</div>
</template>
<script>
+ import PwdChange from "@/components/PwdChange";
export default {
+ components: {
+ PwdChange,
+ },
data() {
return {
- username: this.$store.state.user.username
+ username: this.$store.state.user.username,
+ pwd: {
+ show: false,
+ },
}
},
methods: {
- logout () {
+ logout() {
this.$store.dispatch('setLogin');
- this.$router.push({path: '/login'});
- }
+ this.$router.push({
+ path: '/login'
+ });
+ },
+ passwordChange() {
+ this.pwd.show = true;
+ },
+ commandClick(name) {
+ switch (name) {
+ case "passwordChange":
+ this.passwordChange();
+ break;
+ default:
+ this.$layer.msg('璇ュ姛鑳芥殏鏈紑鏀撅紒');
+ break;
+ }
+ },
}
}
</script>
diff --git a/src/components/PwdChange.vue b/src/components/PwdChange.vue
new file mode 100644
index 0000000..fb5e820
--- /dev/null
+++ b/src/components/PwdChange.vue
@@ -0,0 +1,168 @@
+<template>
+ <div class="params-container">
+ <el-form ref="ruleForm" size="mini" label-position="top" :model="params" :rules="rules" class="params-dialog">
+ <el-form-item label="鏃у瘑鐮�" prop="oldPwd">
+ <el-input type="password" v-model="params.oldPwd"></el-input>
+ </el-form-item>
+ <el-form-item label="鏂板瘑鐮�" prop="newPwd">
+ <el-input type="password" v-model="params.newPwd"></el-input>
+ </el-form-item>
+ <el-form-item label="纭瀵嗙爜" prop="enPwd">
+ <el-input type="password" v-model="params.enPwd"></el-input>
+ </el-form-item>
+ <div class="form-footer">
+ <three-btn @click="submitForm">纭畾</three-btn>
+ <three-btn @click="close">鍙栨秷</three-btn>
+ </div>
+ </el-form>
+ </div>
+</template>
+
+<script>
+ import ThreeBtn from './ThreeBtn.vue';
+ import {
+ validatePassword,
+ updatePassword
+ } from '@/pages/user/js/api'
+ export default {
+ components: {
+ ThreeBtn
+ },
+ name: "PwdChange",
+ props: {
+ visible: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ let validatePass = (rule, value, callback) => {
+ let pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{6,30}');
+ if (pwdRegex.test(value)) {
+ callback();
+ } else {
+ callback(new Error('鎮ㄧ殑瀵嗙爜澶嶆潅搴﹀お浣庯紙瀵嗙爜涓繀椤诲寘鍚瓧姣嶃�佹暟瀛椼�佽嚦灏�6浣�)'));
+ }
+ };
+ let validateOldPassword = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error('涓嶈兘涓虹┖'));
+ } else {
+ //璋冪敤灏佽浜嗙殑寮傛鏁堥獙鏂规硶锛�
+ let postData = {
+ id: this.$store.state.user.uid,
+ password: value
+ }
+ validatePassword(postData).then(res => {
+ console.log(res)
+ if (res.data) {
+ callback();
+ } else {
+ callback("鍘熷瀵嗙爜閿欒锛�");
+ }
+ });
+ }
+ };
+ return {
+ params: {
+ oldPwd: "",
+ newPwd: "",
+ enPwd: ""
+ },
+ rules: {
+ oldPwd: [{
+ required: true,
+ validator: validateOldPassword,
+ trigger: 'blur'
+ }],
+ newPwd: [{
+ required: true,
+ message: '涓嶈兘涓虹┖',
+ trigger: 'blur'
+ },
+ {
+ validator: validatePass,
+ trigger: 'blur'
+ }
+ ],
+ enPwd: [{
+ required: true,
+ message: '涓嶈兘涓虹┖',
+ trigger: 'blur'
+ },
+ {
+ validator: validatePass,
+ trigger: 'blur'
+ }
+ ],
+ },
+ }
+ },
+ methods: {
+ // 鎻愪氦琛ㄥ崟
+ submitForm() {
+ this.$refs.ruleForm.validate((valid) => {
+ // 鏍￠獙閫氳繃
+ if (valid) {
+ if (this.params.newPwd === this.params.enPwd) {
+ this.confirmChangeUserPwd(this.params.newPwd);
+ } else {
+ // 鍏抽棴绛夊緟妗�
+ this.$layer.close(loading);
+ this.$layer.msg("鏂板瘑鐮佸拰纭瀵嗙爜涓嶄竴鑷�");
+ }
+ } else {
+ this.$layer.msg('瀛樺湪鏍￠獙鏈�氳繃鐨勬暟鎹紒');
+ return false;
+ }
+ });
+ },
+ // 纭淇敼鐢ㄦ埛瀵嗙爜
+ confirmChangeUserPwd(pwd) {
+ this.$confirm("纭淇敼鐢ㄦ埛瀵嗙爜", '绯荤粺鎻愮ず', {
+ type: 'warning',
+ }).then(() => {
+ this.updateUserPwd(pwd);
+ }).catch(() => {});
+ },
+ updateUserPwd(pwd) {
+ let postData = {
+ id: this.$store.state.user.uid,
+ password: pwd
+ }
+ updatePassword(postData).then(res => {
+ if (res.data) {
+ alert("瀵嗙爜鏇存柊鎴愬姛,璇烽噸鏂扮櫥褰曪紒");
+ this.$router.push("/login");
+ } else {
+ this.$layer.msg("瀵嗙爜鏇存柊澶辫触");
+ }
+ }).catch(error => {
+ console.log(error);
+ // 鍏抽棴绛夊緟妗�
+ this.$layer.close(loading);
+ });
+ },
+ close() {
+ this.$emit("update:visible", false);
+ }
+ }
+ }
+</script>
+
+<style scoped>
+ .params-container {
+ padding: 8px;
+ background-color: #ececec;
+ }
+
+ .form-footer {
+ margin-top: 16px;
+ margin-bottom: 16px;
+ text-align: right;
+ }
+
+ .form-footer .three-btn {
+ margin-left: 12px;
+ }
+</style>
\ No newline at end of file
diff --git a/src/pages/user/js/api.js b/src/pages/user/js/api.js
index 79f2767..b14451c 100644
--- a/src/pages/user/js/api.js
+++ b/src/pages/user/js/api.js
@@ -169,6 +169,17 @@
}
/**
+ * 閲嶇疆瀵嗙爜
+ */
+export const resetPassword = (data) => {
+ return axios({
+ method: "PUT",
+ url: "/user/resetPassword",
+ params: data,
+ });
+}
+
+/**
* 閫氳繃瑙掕壊id鑾峰彇鐢ㄦ埛淇℃伅
*/
export const getUserByRoleId = (data) => {
@@ -224,4 +235,26 @@
params: params,
data: data,
});
+}
+
+/**
+ * 楠岃瘉瀵嗙爜
+ */
+export const validatePassword = (params) => {
+ return axios({
+ method: "GET",
+ url: "/user/validatePassword",
+ params: params,
+ });
+}
+
+/**
+ * 淇敼瀵嗙爜
+ */
+export const updatePassword = (params) => {
+ return axios({
+ method: "PUT",
+ url: "/user/updatePassword",
+ params: params,
+ });
}
\ No newline at end of file
diff --git a/src/pages/user/list.vue b/src/pages/user/list.vue
index 4e90ed9..ff43237 100644
--- a/src/pages/user/list.vue
+++ b/src/pages/user/list.vue
@@ -60,9 +60,10 @@
</el-switch>
</template>
</el-table-column>
- <el-table-column fixed="right" label="鎿嶄綔" width="180" align="center">
+ <el-table-column fixed="right" label="鎿嶄綔" width="280" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="edit(scope.row)">缂栬緫</el-button>
+ <el-button type="success" size="mini" @click="restPassword(scope.row)">閲嶇疆瀵嗙爜</el-button>
<el-button type="danger" size="mini" @click="remove(scope.row)">鍒犻櫎</el-button>
</template>
</el-table-column>
@@ -90,7 +91,8 @@
getJobs,
searchUser,
freezeUser,
- delUser
+ delUser,
+ resetPassword
} from './js/api';
import AddUser from './dialog/addUser.vue';
@@ -214,6 +216,27 @@
this.userInfo = row;
this.addDialog = true;
},
+ restPassword(row) {
+ this.$confirm("纭閲嶇疆鏀圭敤鎴峰瘑鐮佸悧锛�", '绯荤粺鎻愮ず', {
+ type: 'warning',
+ }).then(() => {
+ let postData = {
+ id: row.id
+ }
+ resetPassword(postData).then((res) => {
+ if (res.data.code == 1) {
+ this.$message({
+ message: '閲嶇疆瀵嗙爜鎴愬姛锛�',
+ type: 'success'
+ });
+ this.getList();
+ }
+ }).catch((err) => {
+ console.log(err)
+ });
+ }).catch(() => {});
+
+ },
remove(row) {
this.$confirm("纭鍒犻櫎璇ョ敤鎴峰悧锛�", '绯荤粺鎻愮ず', {
type: 'warning',
--
Gitblit v1.9.1