From c9ef2687d3460da668d08d58dee6af468ed6693e Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期二, 05 十一月 2024 11:48:34 +0800 Subject: [PATCH] 最新版本541200007 --- admin/src/components/common/CommonHeader.vue | 175 ++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 116 insertions(+), 59 deletions(-) diff --git a/admin/src/components/common/CommonHeader.vue b/admin/src/components/common/CommonHeader.vue index 5afc768..ca89668 100644 --- a/admin/src/components/common/CommonHeader.vue +++ b/admin/src/components/common/CommonHeader.vue @@ -2,13 +2,16 @@ <div class="common-header"> <div class="header"> <div class="logo"> - <div>{{ title }}</div> + <div class="title">{{ title }}</div> <div class="list"> - <div class="item">鏈嶅姟涓績</div> - <div class="item">瀹夐槻涓績</div> - <div class="item">娑堥槻涓績</div> - <div class="item">鑳界涓績</div> - <div class="item">椹鹃┒鑸�</div> + <div class="item active"> + <div>鏈嶅姟涓績</div> + <div class="linellae"></div> + </div> + <div class="item" @click="getHeaderNav('0')">瀹夐槻涓績</div> + <div class="item" @click="getHeaderNav('1')">娑堟帶涓績</div> + <div class="item" @click="getHeaderNav('2')">鑳界涓績</div> + <div class="item" @click="getHeaderNav('3')">椹鹃┒鑸�</div> </div> <!-- <div class="title-en">Diagnosis of Intelligent Manufacturing Integrated Service Platfrom</div> --> </div> @@ -16,64 +19,38 @@ <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" - @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="30" - 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="30" - show-password - ></el-input> - </el-form-item> - </el-form> - </GlobalAlertWindow> + <GlobalAlertWindow title="淇敼瀵嗙爜" :visible.sync="visible.changePwd" + :showClose="!userInfo.needChangePwd || userInfo.needChangePwd == '0'" + :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> + <!-- <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> @@ -81,6 +58,7 @@ import { mapState, mapMutations } from 'vuex' import GlobalAlertWindow from './GlobalAlertWindow' import { logout, updatePwd } from '@/api/system/common' +import { getAppHeaderNav } from '@/api' export default { name: 'CommonHeader', components: { GlobalAlertWindow }, @@ -93,6 +71,7 @@ data() { return { title: process.env.VUE_APP_TITLE, + headerNavData: {}, visible: { // 淇敼瀵嗙爜 changePwd: false @@ -114,7 +93,8 @@ { required: true, message: '璇疯緭鍏ュ師濮嬪瘑鐮�' } ], newPwd: [ - { required: true, message: '璇疯緭鍏ユ柊瀵嗙爜' } + { required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }, + { validator: this.validatePassword, trigger: 'blur' }, ], confirmPwd: [ { required: true, message: '璇峰啀娆¤緭鍏ユ柊瀵嗙爜' } @@ -128,6 +108,15 @@ // title () { // return this.$route.meta.title // } + }, + created() { + + }, + mounted() { + // needChangePwd 0 : 榛樿瀵嗙爜闇�瑕佷慨鏀癸紝1 涓嶉渶瑕� + if (!this.userInfo.needChangePwd || this.userInfo.needChangePwd == '0') { + this.visible.changePwd = true + } }, filters: { // 灞曠ず鍚嶇О @@ -148,6 +137,31 @@ this.visible.changePwd = true this.$nextTick(() => { 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() // 楠岃瘉閫氳繃 + } + } + }, + getHeaderNav(type) { + getAppHeaderNav(type).then(res => { + window.open(res, "_blank") }) }, // 纭畾淇敼瀵嗙爜 @@ -172,10 +186,11 @@ }) .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 @@ -201,9 +216,40 @@ <style scoped lang="scss"> @import "@/assets/style/variables.scss"; + .common-header { background-color: #2080f7; } + +.list { + flex: 1; + display: flex; + align-items: center; + margin-left: 60px; + + .item { + margin-right: 40px; + font-size: 16px; + font-weight: 400; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + height: 40px; + cursor: pointer; + + .linellae { + width: 64px; + height: 2px; + background: #FFFFFF; + } + } + + .active { + font-weight: 500; + } +} + .header { overflow: hidden; // background: #fff; @@ -214,7 +260,7 @@ .logo { /* background: url("../../assets/images/top_ic_chilun@2x.png") no-repeat; */ box-sizing: border-box; - min-width: 280px; + min-width: 360px; height: 56px; padding: 10px 30px; // flex-shrink: 0; @@ -224,6 +270,11 @@ color: #fff; display: flex; align-items: center; + + .title { + width: 240px; + } + // display: inline; .title-en { font-size: 11px; @@ -231,18 +282,22 @@ color: rgb(202, 214, 238); } } + .user { - width: 712px; + width: 212px; box-sizing: border-box; height: 56px; padding-right: 25px; background: url("../../assets/images/top_ic_bolang@2x.png") no-repeat; flex-shrink: 0; text-align: right; + cursor: pointer; + .el-dropdown { top: 2px; color: #fff; } + img { width: 32px; position: relative; @@ -251,9 +306,11 @@ } } } + // 涓嬫媺鑿滃崟妗� .el-dropdown-menu { width: 140px; + .el-dropdown-menu__item:hover { background: #e3edfb; color: $primary-color; -- Gitblit v1.9.3