jy_total_process_master_cloud_vue/src/views/layout/UpdatePassword2.vue

<template>
		<v-dialog
		title="修改密码"
		:close-on-click-modal="true"
		append-to-body
		v-model="dialogVisible"
		width="70%"
		height="600px"
	>
			<el-form :model="dataForm" ref="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmit()"
					 label-width="80px" @submit.native.prevent>
				<div style="margin-bottom: 20px;" v-if="showTip">
					<el-alert
						title="当前账号的密码仍为初始密码，风险较大，请及时修改"
						type="warning"
						:closable="false"
						center
						show-icon>
					</el-alert>
				</div>
				<el-form-item label="账号">
					<span>{{ userName }}</span>
				</el-form-item>
				<el-form-item label="原密码" prop="password">
					<el-input type="password" size="small" v-model="dataForm.password" ></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="newPassword">
					<el-input type="password" size="small" v-model="dataForm.newPassword" ></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="confirmPassword">
					<el-input type="password" size="small" v-model="dataForm.confirmPassword" ></el-input>
				</el-form-item>
			</el-form>
				<span slot="footer" class="dialog-footer" style="float: right">
					<el-button size="large" @click="dialogVisible = false" icon="el-icon-circle-close">关闭</el-button>
					<el-button size="large" type="primary" @click="dataFormSubmit()" icon="el-icon-circle-check">确定</el-button>
				</span>
	</v-dialog>
</template>

<script>
	import {clearLoginInfo} from '@/utils'
	import userService from '@/api/sys/UserService'
	export default {
		name:'child',
		props:{
			innerVisible:{
				type: Boolean,
				default: false
			}
		},

		data() {
			let validateConfirmPassword = (rule, value, callback) => {
				if (this.dataForm.newPassword !== value) {
					callback(new Error('确认密码与新密码不一致'))
				} else {
					callback()
				}
			}
			return {
				dialogVisible: this.innerVisible,
				showTip: true,
				dataForm: {
					password: '',
					newPassword: '',
					confirmPassword: ''
				},
				dataRule: {
					password: [
						{required: true, message: '原密码不能为空', trigger: 'blur'}
					],
					newPassword: [
						{required: true, message: '新密码不能为空', trigger: 'blur'}
					],
					confirmPassword: [
						{required: true, message: '确认密码不能为空', trigger: 'blur'},
						{validator: validateConfirmPassword, trigger: 'blur'}
					]
				}
			};
		},
		computed: {
			userName: {
				get () {
					return this.$store.state.user.name
				}
			},
			mainTabs: {
				get () {
					return this.$store.state.common.mainTabs
				},
				set (val) {
					this.$store.commit('common/updateMainTabs', val)
				}
			}
		},
		methods: {
			// 初始化
			init (showTip) {
				this.showTip = showTip
				this.dialogVisible = true
				this.$nextTick(() => {
				  	this.$refs.dataForm.resetFields()
				})
			},
			// 表单提交
			dataFormSubmit () {
				this.$refs.dataForm.validate((valid) => {
					if (valid) {
						userService.savePwd({
							'oldPassword': this.dataForm.password,
							'newPassword': this.dataForm.newPassword
						}).then((data) => {
							this.$message({
								message: '修改成功, 请重新登录!',
								type: 'success',
								duration: 1500
							})
							this.dialogVisible = false
							this.$nextTick(() => {
								this.mainTabs = []
								clearLoginInfo()
								this.$router.push({path: "/login"})
							})
						})
					}
				})
			}
		},
		created(){

		}
	};
</script>
<style></style>