<template>
|
<div class="params-container">
|
<el-form
|
ref="ruleForm"
|
size="small"
|
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"
|
show-password
|
></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="enPwd">
|
<el-input
|
type="password"
|
v-model="params.enPwd"
|
show-password
|
></el-input>
|
</el-form-item>
|
<div class="form-footer">
|
<el-button type="primary" size="small" @click="submitForm">确定</el-button>
|
<el-button size="small" @click="close">取消</el-button>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<script setup name="PwdChange">
|
import { computed, ref, reactive, watchEffect, onMounted } from "vue";
|
import { getToken, removeToken, setToken, getUname, setUname, removeUname, getUrole, setUrole, removeUrole, getSessionId, setSessionId, removeSessionId } from '@/utils/auth';
|
import {
|
// checkUserPwd,
|
// updateUserPwd,
|
// updateUserPwd2,
|
updatePassword,
|
} from "@/api/user.js";
|
import getPasswordRule from "@/utils/getPasswordRule";
|
import useElement from "@/hooks/useElement.js";
|
const { $loading, $message, $confirm } = useElement();
|
import { useUserStore } from '@/store/user';
|
import { storeToRefs } from 'pinia';
|
import { useRoute, useRouter } from 'vue-router';
|
const route = useRoute();
|
const router = useRouter();
|
|
|
import { useTagsViewStore } from "@/store/tagsView.js";
|
|
const tagsViewStore = useTagsViewStore();
|
|
const { visitedViews, cachedViews } = storeToRefs(tagsViewStore);
|
const {
|
addVisitedView,
|
addView,
|
delCachedView,
|
delView,
|
delOthersViews,
|
delAllViews,
|
} = tagsViewStore;
|
|
const userStore = useUserStore();
|
const { uname } = storeToRefs(userStore);
|
const { logout } = userStore;
|
|
const type = 1;
|
const num = 8;
|
let passwordRule = getPasswordRule(type, num);
|
let validatePass = (rule, value, callback) => {
|
let pwdRegex = passwordRule.pattern;
|
let nameReg = new RegExp(uname.value, "g");
|
if (pwdRegex.test(value)) {
|
// 校验密码规则是否正确
|
callback();
|
} else if (nameReg.test(value)) {
|
// 校验密码中是否存在用户名
|
callback(new Error("密码中存在用户名信息"));
|
} else {
|
callback(new Error(passwordRule.msg));
|
}
|
};
|
|
const emit = defineEmits(["success"]);
|
const params = reactive({
|
oldPwd: "",
|
newPwd: "",
|
enPwd: "",
|
});
|
|
const rules = reactive({
|
oldPwd: [{ required: true, message: "不能为空", trigger: "blur" }],
|
newPwd: [
|
{ required: true, message: "不能为空", trigger: "blur" },
|
{ validator: validatePass, trigger: "blur" },
|
],
|
enPwd: [
|
{ required: true, message: "不能为空", trigger: "blur" },
|
{ validator: validatePass, trigger: "blur" },
|
]
|
});
|
|
const ruleForm = ref(null);
|
|
async function submitForm() {
|
let valid = await ruleForm.value.validate(() => {});
|
if (valid) {
|
if (params.newPwd === params.enPwd) {
|
confirmChangeUserPwd(params.newPwd, params.oldPwd);
|
} else {
|
$message.error("新密码和确认密码不一致");
|
}
|
} else {
|
$message.error("存在校验未通过的数据");
|
}
|
}
|
|
function confirmChangeUserPwd(newPwd, oldPwd) {
|
$confirm("修改用户密码", () => {
|
updateUserPwd(newPwd, oldPwd);
|
});
|
}
|
|
async function updateUserPwd(newPwd, oldPwd) {
|
let res = await updatePassword(newPwd, oldPwd);
|
if (res.code && res.data) {
|
$message.success("密码更新成功,请重新登录");
|
removeUname();
|
removeUrole();
|
removeToken();
|
logout();
|
delAllViews();
|
emit("success");
|
router.push("/login");
|
} else {
|
$message.error("密码更新失败:" + res.msg);
|
}
|
|
}
|
|
function close() {
|
emit("success");
|
}
|
|
|
|
// updateUserPwd(uname, newPwd, oldPwd) {
|
// updateUserPwd2(uname, newPwd, oldPwd)
|
// .then((res) => {
|
// let rs = res.data;
|
// if (rs.code === 1) {
|
// alert("密码更新成功,请重新登录！");
|
// sessionStorage.removeItem("username");
|
// sessionStorage.removeItem("userId");
|
// sessionStorage.removeItem("userPower");
|
// this.$store
|
// .dispatch("tagsView/delAllViews")
|
// .then(({ visitedViews }) => {
|
// this.$router.push("/login");
|
// });
|
// this.$emit("success", true);
|
// } else {
|
// this.$layer.msg("密码更新失败:" + rs.msg);
|
// }
|
// })
|
// .catch((error) => {
|
// console.log(error);
|
// });
|
// }
|
</script>
|
|
<style scoped lang="less">
|
.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;
|
}
|
:deep(.el-input__icon.el-icon-view.el-input__clear) {
|
color: #ffffff;
|
}
|
</style>
|
