| | |
| | | </span> |
| | | |
| | | <el-dropdown-menu slot="dropdown"> |
| | | <el-dropdown-item command="password" divided>修改密码</el-dropdown-item> |
| | | <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | |
| | | <el-dialog |
| | | title="修改密码" |
| | | :visible.sync="dialogVisible" |
| | | width="25%" |
| | | :modal="false" |
| | | :close-on-click-modal="false" |
| | | destroy-on-close |
| | | > |
| | | <el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
| | | <el-form-item label="原密码" prop="oldPassword"> |
| | | <el-input |
| | | v-model.trim="form.oldPassword" |
| | | autocomplete="off" |
| | | show-password |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="新密码" prop="newPassword"> |
| | | <el-input |
| | | v-model.trim="form.newPassword" |
| | | autocomplete="off" |
| | | show-password |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="确认密码" prop="confirmPassword"> |
| | | <el-input |
| | | v-model.trim="form.confirmPassword" |
| | | autocomplete="off" |
| | | show-password |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="dialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="resetPassword">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </el-dropdown> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapGetters } from 'vuex' |
| | | import { recordRoute } from '@/config' |
| | | import { mapGetters } from "vuex"; |
| | | import { recordRoute } from "@/config"; |
| | | import { updatePassword } from "@/api/user"; |
| | | |
| | | export default { |
| | | name: 'VabAvatar', |
| | | name: "VabAvatar", |
| | | data() { |
| | | var validatePass = (rule, value, callback) => { |
| | | if (value === "") { |
| | | callback(new Error("请再次输入密码")); |
| | | } else if (value.length < 6) { |
| | | callback(new Error("请输入6位以上密码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | |
| | | var validatePass2 = (rule, value, callback) => { |
| | | if (value === "") { |
| | | callback(new Error("请再次输入密码")); |
| | | } else if (value !== this.form.newPassword) { |
| | | callback(new Error("两次输入密码不一致!")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | return { |
| | | form: {}, |
| | | rules: { |
| | | oldPassword: [ |
| | | { |
| | | required: true, |
| | | trigger: "blur", |
| | | message: "原密码不能为空", |
| | | }, |
| | | ], |
| | | newPassword: [ |
| | | { |
| | | validator: validatePass, |
| | | required: true, |
| | | trigger: "blur", |
| | | }, |
| | | ], |
| | | confirmPassword: [ |
| | | { |
| | | validator: validatePass2, |
| | | required: true, |
| | | trigger: "blur", |
| | | }, |
| | | ], |
| | | }, |
| | | dialogVisible: false, |
| | | }; |
| | | }, |
| | | computed: { |
| | | ...mapGetters({ |
| | | avatar: 'user/avatar', |
| | | username: 'user/username', |
| | | avatar: "user/avatar", |
| | | username: "user/username", |
| | | userId: "user/userId", |
| | | }), |
| | | }, |
| | | methods: { |
| | | handleCommand(command) { |
| | | switch (command) { |
| | | case 'logout': |
| | | this.logout() |
| | | break |
| | | case "logout": |
| | | this.logout(); |
| | | break; |
| | | case "password": |
| | | this.dialogVisible = true; |
| | | this.form = {}; |
| | | break; |
| | | } |
| | | }, |
| | | personalCenter() { |
| | | this.$router.push('/personalCenter/personalCenter') |
| | | }, |
| | | logout() { |
| | | this.$baseConfirm( |
| | | '您确定要退出' + this.$baseTitle + '吗?', |
| | | "您确定要退出" + this.$baseTitle + "吗?", |
| | | null, |
| | | async () => { |
| | | await this.$store.dispatch('user/logout') |
| | | await this.$store.dispatch("user/logout"); |
| | | if (recordRoute) { |
| | | const fullPath = this.$route.fullPath |
| | | this.$router.push(`/login?redirect=${fullPath}`) |
| | | const fullPath = this.$route.fullPath; |
| | | this.$router.push(`/login?redirect=${fullPath}`); |
| | | } else { |
| | | this.$router.push('/login') |
| | | this.$router.push("/login"); |
| | | } |
| | | } |
| | | ) |
| | | ); |
| | | }, |
| | | resetPassword() { |
| | | this.$refs["form"].validate(async (valid) => { |
| | | if (valid) { |
| | | let rsp = await updatePassword(this.userId, { |
| | | oldPassword: this.form.oldPassword, |
| | | newPassword: this.form.newPassword, |
| | | }); |
| | | if (rsp && rsp.success) { |
| | | this.$baseMessage(rsp.msg, "success"); |
| | | this.$refs["form"].resetFields(); |
| | | this.dialogVisible = false; |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | handleClose() { |
| | | console.log("close"); |
| | | this.$refs["form"].resetFields(); |
| | | }, |
| | | }, |
| | | } |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .avatar-dropdown { |