From e6acb39a2475e211f2c1decc45a95c868239c25f Mon Sep 17 00:00:00 2001 From: liukangdong <898885815@qq.com> Date: 星期五, 18 十月 2024 14:28:32 +0800 Subject: [PATCH] ll --- admin/src/components/common/CommonHeader.vue | 159 +++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 131 insertions(+), 28 deletions(-) diff --git a/admin/src/components/common/CommonHeader.vue b/admin/src/components/common/CommonHeader.vue index 17685f1..8af6eef 100644 --- a/admin/src/components/common/CommonHeader.vue +++ b/admin/src/components/common/CommonHeader.vue @@ -2,17 +2,35 @@ <div class="common-header"> <div class="header"> <div class="logo"> - <div>{{title}}</div> + <div class="title">{{ title }}</div> + <div class="list"> + <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> <div class="user"> <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}}<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 + }}<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> @@ -25,15 +43,37 @@ @confirm="confirmChangePwd" @close="visible.changePwd = false" > - <el-form :model="changePwdData.form" ref="changePwdDataForm" :rules="changePwdData.rules"> + <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-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-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-input + v-model="changePwdData.form.confirmPwd" + type="password" + placeholder="璇峰啀娆¤緭鍏ユ柊瀵嗙爜" + maxlength="30" + show-password + ></el-input> </el-form-item> </el-form> </GlobalAlertWindow> @@ -44,6 +84,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 }, @@ -53,9 +94,10 @@ default: true } }, - data () { + data() { return { title: process.env.VUE_APP_TITLE, + headerNavData: {}, visible: { // 淇敼瀵嗙爜 changePwd: false @@ -77,7 +119,8 @@ { required: true, message: '璇疯緭鍏ュ師濮嬪瘑鐮�' } ], newPwd: [ - { required: true, message: '璇疯緭鍏ユ柊瀵嗙爜' } + { required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }, + { validator: this.validatePassword, trigger: 'blur' }, ], confirmPwd: [ { required: true, message: '璇峰啀娆¤緭鍏ユ柊瀵嗙爜' } @@ -88,13 +131,17 @@ }, computed: { ...mapState(['menuData', 'userInfo']), - title () { - return this.$route.meta.title - } + // title () { + // return this.$route.meta.title + // } + }, + mounted() { + console.log('userInfo',this.userInfo); + }, filters: { // 灞曠ず鍚嶇О - displayName (userInfo) { + displayName(userInfo) { if (userInfo == null) { return '' } @@ -107,14 +154,39 @@ methods: { ...mapMutations(['setUserInfo', 'switchCollapseMenu', 'clearUserInfo']), // 淇敼瀵嗙爜 - changePwd () { + changePwd() { 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"); + }) + }, // 纭畾淇敼瀵嗙爜 - confirmChangePwd () { + confirmChangePwd() { if (this.isWorking.changePwd) { return } @@ -138,7 +210,7 @@ this.visible.changePwd = false }) .catch(e => { - this.$tip.apiFailed(e) + // this.$tip.apiFailed(e) }) .finally(() => { this.isWorking.changePwd = false @@ -146,7 +218,7 @@ }) }, // 閫�鍑虹櫥褰� - logout () { + logout() { logout() .then(() => { this.clearUserInfo() @@ -155,7 +227,7 @@ window.location.reload() }) .catch(e => { - this.$tip.apiFailed(e) + // this.$tip.apiFailed(e) }) } } @@ -165,7 +237,32 @@ <style scoped lang="scss"> @import "@/assets/style/variables.scss"; .common-header { - background-color: #1457C7; + 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; @@ -175,16 +272,21 @@ justify-content: space-between; .logo { - background: url('../../assets/images/top_ic_chilun@2x.png') no-repeat; + /* background: url("../../assets/images/top_ic_chilun@2x.png") no-repeat; */ box-sizing: border-box; - min-width: 280px; - height: 70px; - padding: 17px 30px; + min-width: 360px; + height: 56px; + padding: 10px 30px; // flex-shrink: 0; line-height: 36px; font-size: 22px; font-weight: 600; color: #fff; + display: flex; + align-items: center; + .title{ + width: 200px; + } // display: inline; .title-en { font-size: 11px; @@ -193,15 +295,16 @@ } } .user { - width: 712px; + width: 212px; box-sizing: border-box; - height: 70px; + height: 56px; padding-right: 25px; - background: url('../../assets/images/top_ic_bolang@2x.png') no-repeat; + background: url("../../assets/images/top_ic_bolang@2x.png") no-repeat; flex-shrink: 0; text-align: right; + cursor: pointer; .el-dropdown { - top: 10px; + top: 2px; color: #fff; } img { @@ -216,7 +319,7 @@ .el-dropdown-menu { width: 140px; .el-dropdown-menu__item:hover { - background: #E3EDFB; + background: #e3edfb; color: $primary-color; } } -- Gitblit v1.9.3