151 lines
3.7 KiB
Vue
151 lines
3.7 KiB
Vue
<template>
|
|
<el-dialog title="修改密码" width="500px" :model-value="modelValue" @close="closed">
|
|
<el-form :model="params" class="editPassword-page">
|
|
<el-form-item label="老密码">
|
|
<el-input placeholder="请输入老密码" v-model="params.oldPassword"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="新密码">
|
|
<el-input placeholder="请输入新密码" show-password v-model="params.password"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="密码强度：">
|
|
<div class="input_span">
|
|
<span id="one" />
|
|
<span id="two" />
|
|
<span id="three" />
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="closed">取消</el-button>
|
|
<el-button type="primary" @click="updatePwd">保存</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useStore } from "vuex";
|
|
import { ElMessage } from "element-plus";
|
|
import { editPassword } from "@/api/sys";
|
|
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
|
|
import {
|
|
saveRoleMenuInfo,
|
|
getRoleMenuIds,
|
|
getMenuTree,
|
|
getPasswordLevel
|
|
} from "@/api/user-manage";
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
});
|
|
const store = useStore();
|
|
const params = ref({});
|
|
|
|
const emits = defineEmits(["update:modelValue", "updateRole"]);
|
|
const closed = () => {
|
|
emits("update:modelValue", false);
|
|
};
|
|
|
|
const onComfirm = () => {
|
|
saveRoleMenuInfo(params).then((res) => {
|
|
ElMessage.success("操作成功");
|
|
});
|
|
closed();
|
|
};
|
|
const updatePwd = () => {
|
|
if (Number(sysLevel.value) > Number(currentLevel.value)) {
|
|
ElMessage.error("当前密码等级不够,请增加复杂度");
|
|
return false;
|
|
}
|
|
if (params.value.password.length > 20) {
|
|
ElMessage.error("密码长度不能超过20位!");
|
|
return false;
|
|
}
|
|
editPassword({
|
|
...params.value
|
|
}).then((res) => {
|
|
ElMessage.success("修改成功");
|
|
closed();
|
|
store.dispatch("user/logout");
|
|
});
|
|
};
|
|
let currentLevel = ref(0);
|
|
const checkStrong = (sValue) => {
|
|
let level = 0;
|
|
// 正则表达式验证符合要求的
|
|
if (sValue.length >= 6) {
|
|
level++;
|
|
}
|
|
if (/\d/.test(sValue) && /[a-z]/.test(sValue) && /[A-Z]/.test(sValue)) {
|
|
level++;
|
|
} // 数字 字母小写,大写
|
|
// if (/[a-z]/.test(sValue)) { modes++; } // 小写
|
|
// if (/[A-Z]/.test(sValue)) { modes++; } // 大写
|
|
if (/\W/.test(sValue)) {
|
|
level++;
|
|
} // 特殊字符
|
|
currentLevel.value = level;
|
|
return level;
|
|
};
|
|
|
|
const sysLevel = ref(0);
|
|
const getPwdLevel = () => {
|
|
getPasswordLevel().then((res) => {
|
|
sysLevel.value = res;
|
|
});
|
|
};
|
|
getPwdLevel();
|
|
|
|
watch(
|
|
() => params.value.password,
|
|
(newname, oldname) => {
|
|
const msgText = checkStrong(newname);
|
|
if (msgText > 1 || msgText === 1) {
|
|
document.getElementById("one").style.background = "#00D1B2";
|
|
} else {
|
|
document.getElementById("one").style.background = "#eee";
|
|
}
|
|
if (msgText > 2 || msgText === 2) {
|
|
document.getElementById("two").style.background = "orange";
|
|
} else {
|
|
document.getElementById("two").style.background = "#eee";
|
|
}
|
|
if (msgText === 3) {
|
|
document.getElementById("three").style.background = "red";
|
|
} else {
|
|
document.getElementById("three").style.background = "#eee";
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.editPassword-page {
|
|
.table-header-wrap {
|
|
width: 380px;
|
|
}
|
|
|
|
.input_span {
|
|
span {
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 10px;
|
|
border: 1px solid #ccc;
|
|
|
|
&:first-child {
|
|
border-right: 0;
|
|
border-radius: 5px 0 0 5px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-left: 0;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|