|  |  |  | 
|---|
|  |  |  | {{title}} | 
|---|
|  |  |  | </h2> | 
|---|
|  |  |  | <div class="user"> | 
|---|
|  |  |  | <el-dropdown trigger="click"> | 
|---|
|  |  |  | <span class="el-dropdown-link"> | 
|---|
|  |  |  | <img v-if="userInfo != null" :src="userInfo.avatar == null ? '@/assets/images/avatar/man.png' : userInfo.avatar" alt="">{{userInfo | displayName}}<i class="el-icon-arrow-down el-icon--right"></i> | 
|---|
|  |  |  | <el-dropdown trigger="click"> | 
|---|
|  |  |  | <span class="el-dropdown-link" style="color: white"> | 
|---|
|  |  |  | <img v-if="userInfo != null" :src="userInfo.avatar == null ? '@/assets/avatar/man.png' : userInfo.avatar" alt="">{{userInfo | displayName}}<i class="el-icon-arrow-down el-icon--right"></i> | 
|---|
|  |  |  | </span> | 
|---|
|  |  |  | <el-dropdown-menu slot="dropdown"> | 
|---|
|  |  |  | <el-dropdown-item @click.native="changePwd">修改密码</el-dropdown-item> | 
|---|
|  |  |  | 
|---|
|  |  |  | { required: true, message: '请输入原始密码' } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | newPwd: [ | 
|---|
|  |  |  | { required: true, message: '请输入新密码' } | 
|---|
|  |  |  | { required: true, message: '请输入密码', trigger: 'blur' }, | 
|---|
|  |  |  | { validator: this.validatePassword, trigger: 'blur' }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | confirmPwd: [ | 
|---|
|  |  |  | { required: true, message: '请再次输入新密码' } | 
|---|
|  |  |  | 
|---|
|  |  |  | this.$refs.changePwdDataForm.resetFields() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | validatePassword(rule, value, callback) { | 
|---|
|  |  |  | if (!value) { | 
|---|
|  |  |  | callback(new Error('请输入密码')) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | const lengthValid = /^.{6,20}$/.test(value) | 
|---|
|  |  |  | const hasLetter = /[a-zA-Z]/.test(value) | 
|---|
|  |  |  | const hasNumber = /[0-9]/.test(value) | 
|---|
|  |  |  | const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(value) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const typesCount = [hasLetter, hasNumber, hasSpecial].filter(Boolean).length | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (!lengthValid) { | 
|---|
|  |  |  | callback(new Error('密码长度需为6到20个字符')) | 
|---|
|  |  |  | } else if (typesCount < 2) { | 
|---|
|  |  |  | callback(new Error('密码需包含字母、数字及特殊字符中的至少两种')) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | callback() // 验证通过 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 确定修改密码 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | 
|---|
|  |  |  | updatePwd({ | 
|---|
|  |  |  | oldPwd: this.changePwdData.form.oldPwd, | 
|---|
|  |  |  | newPwd: this.changePwdData.form.newPwd | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | },true) | 
|---|
|  |  |  | .then(() => { | 
|---|
|  |  |  | this.visible.changePwd = false | 
|---|
|  |  |  | setTimeout(() => { | 
|---|
|  |  |  | 
|---|
|  |  |  | .header { | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | padding: 0 25px; | 
|---|
|  |  |  | background: #fff; | 
|---|
|  |  |  | background: #0c6ce3; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | h2 { | 
|---|
|  |  |  | 
|---|
|  |  |  | line-height: $header-height; | 
|---|
|  |  |  | font-size: 19px; | 
|---|
|  |  |  | font-weight: 600; | 
|---|
|  |  |  | color: #606263; | 
|---|
|  |  |  | color: white; | 
|---|
|  |  |  | display: inline; | 
|---|
|  |  |  | & > i { | 
|---|
|  |  |  | font-size: 20px; | 
|---|
|  |  |  | 
|---|
|  |  |  | .user { | 
|---|
|  |  |  | width: 50%; | 
|---|
|  |  |  | flex-shrink: 0; | 
|---|
|  |  |  | color: white; | 
|---|
|  |  |  | text-align: right; | 
|---|
|  |  |  | .el-dropdown { | 
|---|
|  |  |  | top: 2px; | 
|---|