|  |  | 
 |  |  |         <el-dropdown v-if="isLogined" trigger="click"> | 
 |  |  |           <span class="el-dropdown-link"> | 
 |  |  |             <!-- <img v-if="userInfo != null" :src="userInfo.avatar == null ? `${require('@/assets/avatar/man.png')}` : userInfo.avatar" alt="">{{userInfo | displayName}}<i class="el-icon-arrow-down el-icon--right"></i> --> | 
 |  |  |             <img | 
 |  |  |               v-if="userInfo != null" | 
 |  |  |               style="width: 30px !important" | 
 |  |  |               src="@/assets/avatar/man.png" | 
 |  |  |               alt="" | 
 |  |  |             />{{ userInfo | displayName | 
 |  |  |             <img v-if="userInfo != null" style="width: 30px !important" src="@/assets/avatar/man.png" 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 | 
 |  |  |             > | 
 |  |  |             <el-dropdown-item @click.native="changePwd">修改密码</el-dropdown-item> | 
 |  |  |             <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item> | 
 |  |  |           </el-dropdown-menu> | 
 |  |  |         </el-dropdown> | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <!-- 修改密码 --> | 
 |  |  |     <GlobalAlertWindow | 
 |  |  |       title="修改密码" | 
 |  |  |       :visible.sync="visible.changePwd" | 
 |  |  |       :showClose="!userInfo.needChangePwd || userInfo.needChangePwd == '1'" | 
 |  |  |       :showCancel="userInfo.needChangePwd && userInfo.needChangePwd == '0'" | 
 |  |  |       @confirm="confirmChangePwd" | 
 |  |  |       @close="visible.changePwd = false" | 
 |  |  |     > | 
 |  |  |       <el-form | 
 |  |  |         :model="changePwdData.form" | 
 |  |  |         ref="changePwdDataForm" | 
 |  |  |         :rules="changePwdData.rules" | 
 |  |  |       > | 
 |  |  |         <el-form-item label="原始密码" prop="oldPwd" required> | 
 |  |  |           <el-input | 
 |  |  |             v-model="changePwdData.form.oldPwd" | 
 |  |  |             type="password" | 
 |  |  |             placeholder="请输入原始密码" | 
 |  |  |             maxlength="30" | 
 |  |  |             show-password | 
 |  |  |           ></el-input> | 
 |  |  |         </el-form-item> | 
 |  |  |         <el-form-item label="新密码" prop="newPwd" required> | 
 |  |  |           <el-input | 
 |  |  |             v-model="changePwdData.form.newPwd" | 
 |  |  |             type="password" | 
 |  |  |             placeholder="请输入新密码" | 
 |  |  |             maxlength="20" | 
 |  |  |             show-password | 
 |  |  |           ></el-input> | 
 |  |  |         </el-form-item> | 
 |  |  |         <el-form-item label="确认新密码" prop="confirmPwd" required> | 
 |  |  |           <el-input | 
 |  |  |             v-model="changePwdData.form.confirmPwd" | 
 |  |  |             type="password" | 
 |  |  |             placeholder="请再次输入新密码" | 
 |  |  |             maxlength="20" | 
 |  |  |             show-password | 
 |  |  |           ></el-input> | 
 |  |  |         </el-form-item> | 
 |  |  |       </el-form> | 
 |  |  |     </GlobalAlertWindow> | 
 |  |  |       <GlobalAlertWindow title="修改密码" :visible.sync="visible.changePwd" | 
 |  |  |         :showClose="userInfo && (!userInfo.needChangePwd || userInfo.needChangePwd == '0')" | 
 |  |  |         :showCancel="userInfo && (!userInfo.needChangePwd || userInfo.needChangePwd == '0')" @confirm="confirmChangePwd" | 
 |  |  |         @close="visible.changePwd = false"> | 
 |  |  |         <el-form :model="changePwdData.form" ref="changePwdDataForm" :rules="changePwdData.rules"> | 
 |  |  |           <el-form-item label="原始密码" prop="oldPwd" required> | 
 |  |  |             <el-input v-model="changePwdData.form.oldPwd" type="password" placeholder="请输入原始密码" maxlength="30" | 
 |  |  |               show-password></el-input> | 
 |  |  |           </el-form-item> | 
 |  |  |           <el-form-item label="新密码" prop="newPwd" required> | 
 |  |  |             <el-input v-model="changePwdData.form.newPwd" type="password" placeholder="请输入新密码,密码需包含字母、数字及特殊字符中的至少两种" | 
 |  |  |               maxlength="20" show-password></el-input> | 
 |  |  |           </el-form-item> | 
 |  |  |           <!-- <div style="font-size: 12px;color:#999999">密码需包含字母、数字及特殊字符中的至少两种</div> --> | 
 |  |  |           <el-form-item label="确认新密码" prop="confirmPwd" required> | 
 |  |  |             <el-input v-model="changePwdData.form.confirmPwd" type="password" placeholder="请再次输入新密码" maxlength="20" | 
 |  |  |               show-password></el-input> | 
 |  |  |           </el-form-item> | 
 |  |  |         </el-form> | 
 |  |  |       </GlobalAlertWindow> | 
 |  |  |   </div> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | 
 |  |  |             { required: true, message: '请输入原始密码' } | 
 |  |  |           ], | 
 |  |  |           newPwd: [ | 
 |  |  |           { required: true, message: '请输入密码', trigger: 'blur' }, | 
 |  |  |           { validator: this.validatePassword, trigger: 'blur' }, | 
 |  |  |             { required: true, message: '请输入密码', trigger: 'blur' }, | 
 |  |  |             { validator: this.validatePassword, trigger: 'blur' }, | 
 |  |  |           ], | 
 |  |  |           confirmPwd: [ | 
 |  |  |             { required: true, message: '请再次输入新密码' } | 
 |  |  | 
 |  |  |     //   return this.$route.meta.title | 
 |  |  |     // } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  |  | 
 |  |  |   }, | 
 |  |  |   mounted() { | 
 |  |  |     // console.log('userInfo',this.userInfo); | 
 |  |  |     if(!this.userInfo.needChangePwd || this.userInfo.needChangePwd == '0'){ | 
 |  |  |     // needChangePwd 0 : 默认密码需要修改,1 不需要 | 
 |  |  |     if (userInfo &&(!this.userInfo.needChangePwd || this.userInfo.needChangePwd == '0')) { | 
 |  |  |       this.visible.changePwd = true | 
 |  |  |     } | 
 |  |  |      | 
 |  |  |   }, | 
 |  |  |   filters: { | 
 |  |  |     // 展示名称 | 
 |  |  | 
 |  |  |     }, | 
 |  |  |     validatePassword(rule, value, callback) { | 
 |  |  |       if (!value) { | 
 |  |  |         callback(new Error('请输入密码')); | 
 |  |  |         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 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; | 
 |  |  |         const typesCount = [hasLetter, hasNumber, hasSpecial].filter(Boolean).length | 
 |  |  |  | 
 |  |  |         if (!lengthValid) { | 
 |  |  |           callback(new Error('密码长度需为6到20个字符')); | 
 |  |  |           callback(new Error('密码长度需为6到20个字符')) | 
 |  |  |         } else if (typesCount < 2) { | 
 |  |  |           callback(new Error('密码需包含字母、数字及特殊字符中的至少两种')); | 
 |  |  |           callback(new Error('密码需包含字母、数字及特殊字符中的至少两种')) | 
 |  |  |         } else { | 
 |  |  |           callback(); // 验证通过 | 
 |  |  |           callback() // 验证通过 | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     getHeaderNav(type){ | 
 |  |  |     getHeaderNav(type) { | 
 |  |  |       getAppHeaderNav(type).then(res => { | 
 |  |  |         window.open(res, "_blank"); | 
 |  |  |         window.open(res, "_blank") | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     // 确定修改密码 | 
 |  |  | 
 |  |  |         }) | 
 |  |  |           .then(() => { | 
 |  |  |             this.$tip.apiSuccess('修改成功') | 
 |  |  |             this.$store.commit('setUserInfo', {needChangePwd: 1}) | 
 |  |  |             this.visible.changePwd = false | 
 |  |  |           }) | 
 |  |  |           .catch(e => { | 
 |  |  |            //  this.$tip.apiFailed(e) | 
 |  |  |             //  this.$tip.apiFailed(e) | 
 |  |  |           }) | 
 |  |  |           .finally(() => { | 
 |  |  |             this.isWorking.changePwd = false | 
 |  |  | 
 |  |  |  | 
 |  |  | <style scoped lang="scss"> | 
 |  |  | @import "@/assets/style/variables.scss"; | 
 |  |  |  | 
 |  |  | .common-header { | 
 |  |  |   background-color: #2080f7; | 
 |  |  | } | 
 |  |  | .list{ | 
 |  |  |  | 
 |  |  | .list { | 
 |  |  |   flex: 1; | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  |   margin-left: 60px; | 
 |  |  |   .item{ | 
 |  |  |  | 
 |  |  |   .item { | 
 |  |  |     margin-right: 40px; | 
 |  |  |     font-size: 16px; | 
 |  |  |     font-weight: 400; | 
 |  |  | 
 |  |  |     justify-content: flex-start; | 
 |  |  |     height: 40px; | 
 |  |  |     cursor: pointer; | 
 |  |  |     .linellae{ | 
 |  |  |  | 
 |  |  |     .linellae { | 
 |  |  |       width: 64px; | 
 |  |  |       height: 2px; | 
 |  |  |       background: #FFFFFF; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |   .active{ | 
 |  |  |  | 
 |  |  |   .active { | 
 |  |  |     font-weight: 500; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .header { | 
 |  |  |   overflow: hidden; | 
 |  |  |   // background: #fff; | 
 |  |  | 
 |  |  |     color: #fff; | 
 |  |  |     display: flex; | 
 |  |  |     align-items: center; | 
 |  |  |     .title{ | 
 |  |  |       width: 200px; | 
 |  |  |  | 
 |  |  |     .title { | 
 |  |  |       width: 240px; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // display: inline; | 
 |  |  |     .title-en { | 
 |  |  |       font-size: 11px; | 
 |  |  | 
 |  |  |       color: rgb(202, 214, 238); | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .user { | 
 |  |  |     width: 212px; | 
 |  |  |     box-sizing: border-box; | 
 |  |  | 
 |  |  |     flex-shrink: 0; | 
 |  |  |     text-align: right; | 
 |  |  |     cursor: pointer; | 
 |  |  |  | 
 |  |  |     .el-dropdown { | 
 |  |  |       top: 2px; | 
 |  |  |       color: #fff; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     img { | 
 |  |  |       width: 32px; | 
 |  |  |       position: relative; | 
 |  |  | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  |  | 
 |  |  | // 下拉菜单框 | 
 |  |  | .el-dropdown-menu { | 
 |  |  |   width: 140px; | 
 |  |  |  | 
 |  |  |   .el-dropdown-menu__item:hover { | 
 |  |  |     background: #e3edfb; | 
 |  |  |     color: $primary-color; |