|
|
@@ -0,0 +1,147 @@
|
|
|
+<template>
|
|
|
+ <div class="changePassBox">
|
|
|
+ <el-dialog
|
|
|
+ title="重置密码"
|
|
|
+ :visible.sync="isShowChangePass"
|
|
|
+ width="50%"
|
|
|
+ :before-close="handleClose"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ >
|
|
|
+ <div class="dialogCon">
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ status-icon
|
|
|
+ :rules="rules"
|
|
|
+ ref="formName"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <el-form-item label="登录名称:" prop="userName">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.userName"
|
|
|
+ autocomplete="off"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="旧密码:" prop="oldPass">
|
|
|
+ <el-input
|
|
|
+ type="password"
|
|
|
+ v-model="ruleForm.oldPass"
|
|
|
+ autocomplete="off"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="新密码:" prop="newPass">
|
|
|
+ <el-input
|
|
|
+ type="password"
|
|
|
+ v-model="ruleForm.newPass"
|
|
|
+ autocomplete="off"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="确认密码:" prop="ackNewPass">
|
|
|
+ <el-input
|
|
|
+ type="password"
|
|
|
+ v-model="ruleForm.ackNewPass"
|
|
|
+ autocomplete="off"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="margin-left: 100px">
|
|
|
+ <i class="el-icon-edit"></i>
|
|
|
+ <span>请再次输入您的密码</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="confirm">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "changePass",
|
|
|
+ props: ["isShowChangePass"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ruleForm: {
|
|
|
+ userName: "admin",
|
|
|
+ oldPass: "",
|
|
|
+ newPass: "",
|
|
|
+ ackNewPass: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ oldPass: [{ required: true, message: "请输入原密码" }],
|
|
|
+ newPass: [
|
|
|
+ { required: true, message: "请输入新密码" },
|
|
|
+ {
|
|
|
+ pattern: /^(?=.*[a-zA-Z])(?=.*\d).+$/,
|
|
|
+ message: "必须包含字母、数字",
|
|
|
+ },
|
|
|
+ { validator: this.validatePass, trigger: "blur" },
|
|
|
+ { min: 9, message: "密码不能小于9个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ ackNewPass: [
|
|
|
+ { required: true, message: "请再次输入新密码" },
|
|
|
+ { validator: this.validateNewPass, trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClose() {
|
|
|
+ this.$emit("closeChangePass");
|
|
|
+ this.empty();
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.handleClose();
|
|
|
+ },
|
|
|
+ empty() {
|
|
|
+ this.ruleForm.oldPass = "";
|
|
|
+ this.ruleForm.newPass = "";
|
|
|
+ this.ruleForm.ackNewPass = "";
|
|
|
+ },
|
|
|
+ validatePass(rule, value, callback) {
|
|
|
+ if (this.ruleForm.ackNewPass !== "") {
|
|
|
+ this.$refs.formName.validateField("ackNewPass");
|
|
|
+ }
|
|
|
+ callback();
|
|
|
+ },
|
|
|
+ validateNewPass(rule, value, callback) {
|
|
|
+ if (value !== this.ruleForm.newPass) {
|
|
|
+ callback(new Error("两次输入密码不一致!"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ this.$refs.formName.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert("submit!");
|
|
|
+ this.handleClose();
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+::v-deep .el-dialog__header {
|
|
|
+ padding: 10px 20px 10px;
|
|
|
+ background: #6f63dd !important;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+::v-deep .el-dialog__title {
|
|
|
+ color: #ffffff !important;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+::v-deep .el-dialog__headerbtn {
|
|
|
+ top: 15px;
|
|
|
+}
|
|
|
+</style>
|
fengshaolong
hongmei.xia