73 lines
2.2 KiB
Vue
73 lines
2.2 KiB
Vue
<template>
|
||
<el-dialog v-model="visible" title="修改密码" width="600px" @close="fnClose">
|
||
<app-form-builder v-model="form" :options="options" label-width="80px" ref="formRef" :span="24" />
|
||
<template #footer>
|
||
<el-button type="primary" @click="fnSubmit">确认修改</el-button>
|
||
<el-button @click="fnClose">关闭</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {debounce} from "throttle-debounce";
|
||
import useForm from "../../../hooks/useForm/index.js";
|
||
import { ref } from "vue";
|
||
import { postRequest } from "../../../axios/index.js";
|
||
import AppFormBuilder from "../../../components/form_builder/index.vue";
|
||
import { STRONG_PASSWORD } from "../../../regular/index.js";
|
||
import { ElDialog, ElButton } from 'element-plus'
|
||
import "element-plus/es/components/dialog/style/css";
|
||
import "element-plus/es/components/button/style/css";
|
||
|
||
const props = defineProps({
|
||
changePasswordUrl: { type: String, required: true },
|
||
})
|
||
const emits = defineEmits(["submit"]);
|
||
const visible = defineModel("visible", { type: Boolean, required: true });
|
||
const form = ref({
|
||
password: "",
|
||
newPassword: "",
|
||
newPasswordConfirm: "",
|
||
});
|
||
const { formRef, validate, reset } = useForm();
|
||
const options = [
|
||
{ key: "password", label: "旧密码", attrs: { type: "password" } },
|
||
{
|
||
key: "newPassword",
|
||
label: "新密码",
|
||
attrs: { type: "password" },
|
||
rules: { pattern: STRONG_PASSWORD, message: "至少8个字符，包含大小写字母、数字和特殊字符", trigger: "blur" }
|
||
},
|
||
{
|
||
key: "newPasswordConfirm",
|
||
label: "确认密码",
|
||
attrs: { type: "password" },
|
||
rules: {
|
||
required: true,
|
||
validator: (_rule, value, callback) => {
|
||
if (value === "") callback(new Error("请再次输入新密码"));
|
||
else if (value !== form.value.newPassword) callback(new Error("两次输入密码不一致!"));
|
||
else callback();
|
||
},
|
||
trigger: "blur"
|
||
}
|
||
},
|
||
]
|
||
const fnClose = () => {
|
||
reset();
|
||
visible.value = false;
|
||
};
|
||
const fnSubmit = debounce(
|
||
1000,
|
||
async () => {
|
||
await validate();
|
||
await postRequest(props.changePasswordUrl, {...form.value});
|
||
fnClose();
|
||
emits("submit");
|
||
},
|
||
{ atBegin: true }
|
||
);
|
||
</script>
|
||
|
||
<style scoped lang="scss"></style>
|