From b31d0bdae5ab5e7c24eadf08fea270c6bb9f3c7a Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期四, 09 二月 2023 16:58:46 +0800
Subject: [PATCH] 1.自动排程代码正在研究
---
src/layout/components/Navbar.vue | 391 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 310 insertions(+), 81 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 1ec4978..1b24596 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,113 +1,316 @@
<template>
- <div class="navbar">
- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+ <div>
+ <div
+ class="navbar"
+ :class="{'display_btw':$store.state.settings.menuIsHorizontal}"
+ :style="{background: $store.state.settings.headBackgroundColorValue? '#304156':'#fff'}"
+ >
- <breadcrumb class="breadcrumb-container" />
+ <hamburger
+ v-if="!$store.state.settings.menuIsHorizontal"
+ :is-active="sidebar.opened"
+ class="hamburger-container"
+ @toggleClick="toggleSideBar"
+ />
- <div class="right-menu">
- <el-dropdown class="avatar-container" trigger="click">
- <div class="avatar-wrapper">
- <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
- <div style="display: flex;align-items: center;margin-top: -5px">
- <div class="headerImg"><i class="el-icon-user" /></div>
- <div class="headerName">{{ username }}</div>
- </div>
+ <breadcrumb
+ class="breadcrumb-container"
+ :style="{marginLeft:$store.state.settings.menuIsHorizontal?'60px':'40px'}"
+ />
- <!-- <i class="el-icon-caret-bottom" />-->
+ <el-tooltip class="item" effect="dark" content="鍒锋柊椤甸潰" placement="bottom">
+ <div
+ :style="{
+ color:$store.state.settings.headBackgroundColorValue?'#fff':'#000',
+ marginLeft:$store.state.settings.menuIsHorizontal?'10px':'44px',
+ position:'absolute',
+ }"
+ style="padding:0 8px"
+ @click="pageRefreshClick"
+ >
+ <i class="el-icon-refresh-right" style="font-size: 20px;cursor: pointer;line-height:50px" />
</div>
- <el-dropdown-menu slot="dropdown" class="user-dropdown">
- <!-- <router-link to="/">-->
- <!-- <el-dropdown-item>-->
- <!-- Home-->
- <!-- </el-dropdown-item>-->
- <!-- </router-link>-->
- <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">-->
- <!-- <el-dropdown-item>Github</el-dropdown-item>-->
- <!-- </a>-->
- <!-- <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
- <!-- <el-dropdown-item>Docs</el-dropdown-item>-->
- <!-- </a>-->
- <!-- <el-dropdown-item @click.native="logout">-->
- <!-- <span style="display:block;">淇敼瀵嗙爜</span>-->
- <!-- </el-dropdown-item>-->
- <!-- divided-->
- <el-dropdown-item @click.native="logout">
- <span style="display:block;">閫�鍑�</span>
- </el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
+ </el-tooltip>
+
+ <el-menu
+ v-if="$store.state.settings.menuIsHorizontal"
+ router
+ class="menuHorizontal el-menu-demo"
+ mode="horizontal"
+ :default-active="activeMenu"
+ :text-color="$store.state.settings.headBackgroundColorValue?'#fff':'#87909c'"
+ :background-color="$store.state.settings.headBackgroundColorValue?variables.menuBg:'#fff'"
+ :active-text-color="variables.menuActiveText"
+ @select="handleSelect"
+ >
+ <!-- menu-trigger="click"-->
+ <!-- :text-color="variables.menuText"-->
+ <menu-item-ex
+ v-for="route in permission_routes"
+ :key="route.path"
+ :item="route"
+ :base-path="route.path"
+ />
+ </el-menu>
+
+ <div class="right-menu">
+
+ <!-- <template v-if="device!=='mobile'">-->
+ <template>
+ <el-tooltip class="item" effect="dark" content="鑿滃崟鎼滅储" placement="bottom">
+ <search id="header-search" class="right-menu-item" />
+ </el-tooltip>
+ <!-- <error-log class="errLog-container right-menu-item hover-effect" />-->
+ <el-tooltip class="item" effect="dark" content="鍏ㄥ睆" placement="bottom">
+ <screenfull id="screenfull" class="right-menu-item hover-effect" />
+ </el-tooltip>
+ <!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
+ <!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
+ <!-- </el-tooltip>-->
+ </template>
+
+ <el-dropdown class="avatar-container" trigger="hover">
+ <div class="avatar-wrapper">
+ <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+ <div style="display: flex;align-items: center;margin-top: -5px">
+
+ <i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7" />
+ <div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA">{{ username }}</div>
+ </div>
+
+ <!-- <i class="el-icon-caret-bottom" />-->
+ </div>
+ <el-dropdown-menu slot="dropdown" class="user-dropdown" style="text-align: center">
+ <!-- <router-link to="/">-->
+ <!-- <el-dropdown-item>-->
+ <!-- Home-->
+ <!-- </el-dropdown-item>-->
+ <!-- </router-link>-->
+ <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">-->
+ <!-- <el-dropdown-item>Github</el-dropdown-item>-->
+ <!-- </a>-->
+ <!-- <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
+ <!-- <el-dropdown-item>Docs</el-dropdown-item>-->
+ <!-- </a>-->
+ <el-dropdown-item @click.native="editPassword">
+ <span style="display:block;">淇敼瀵嗙爜</span>
+ </el-dropdown-item>
+ <el-dropdown-item divided @click.native="logout">
+ <span style="display:block;font-weight: bolder">閫�鍑�</span>
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
+ <el-dialog
+ v-el-drag-dialog
+ title="淇敼瀵嗙爜"
+ :visible.sync="dialogVisible"
+ width="500px"
+ :close-on-click-modal="false"
+ @close="handleClose"
+ @closed="handleClose"
+ >
+ <el-form ref="dialogForm" :rules="formRules" :model="form" label-width="100px">
+ <!-- <el-form-item label="鐢ㄦ埛缂栫爜锛�">-->
+ <!-- <div>{{ usercode }}</div>-->
+ <!-- </el-form-item>-->
+ <!-- <el-form-item label="鐢ㄦ埛鍚嶇О锛�">-->
+ <!-- <div> {{ username }}</div>-->
+ <!-- </el-form-item>-->
+ <el-form-item label="鍘熷瘑鐮侊細" prop="password">
+ <el-input v-model="form.password" style="width: 220px;" />
+ </el-form-item>
+ <el-form-item label="鏂板瘑鐮侊細" prop="newpassword">
+ <el-input v-model="form.newpassword" style="width: 220px;" />
+ </el-form-item>
+ </el-form>
+ <span slot="footer" class="dialog-footer">
+ <div class="footerButton">
+ <el-button @click="dialogVisibleCancel">杩斿洖</el-button>
+ <el-button type="primary" @click="dialogVisibleConfirm">纭� 瀹�</el-button>
+ </div>
+ </span>
+ </el-dialog>
+
</div>
</div>
+
</template>
<script>
+import elDragDialog from '@/directive/el-drag-dialog'
+
+const SER_HZ = /^[\u4e00-\u9fa5]+$/
import { mapGetters } from 'vuex'
+import MenuItemEx from './Sidebar/MenuItemEx'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
-import { getCookie, removeCookie, removeToken } from '@/utils/auth'
-import { logout } from '@/api/user'
-import { resetRouter } from '@/router'
+import { getCookie } from '@/utils/auth'
+import { UpdateUserPassword } from '@/api/user'
+import Search from '@/components/HeaderSearch'
+import Screenfull from '@/components/Screenfull'
+import variables from '@/styles/variables.scss'
export default {
components: {
+ MenuItemEx,
Breadcrumb,
- Hamburger
+ Hamburger,
+ Search,
+ Screenfull
+ },
+ directives: { elDragDialog },
+ data() {
+ const validatePassword1 = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error('璇疯緭鍏ュ師瀵嗙爜锛�'))
+ } else {
+ if (SER_HZ.test(value)) {
+ return callback(new Error('瀵嗙爜涓嶈兘涓轰腑鏂囷紒'))
+ } else {
+ callback()
+ }
+ }
+ }
+ const validatePassword2 = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error('璇疯緭鍏ユ柊瀵嗙爜锛�'))
+ } else {
+ if (SER_HZ.test(value)) {
+ return callback(new Error('瀵嗙爜涓嶈兘涓轰腑鏂囷紒'))
+ } else {
+ callback()
+ }
+ }
+ }
+ return {
+ usercode: '',
+ username: '',
+ form: {
+ password: '',
+ newpassword: ''
+ },
+ dialogVisible: false,
+ formRules: {
+ password: [
+ { required: true, validator: validatePassword1, trigger: ['blur', 'change'] }
+ ],
+ newpassword: [
+ { required: true, validator: validatePassword2, trigger: ['blur', 'change'] }
+ ]
+ }
+ }
+ },
+ inject: [
+ 'reload'
+ ],
+ created() {
+ this.usercode = getCookie('navTabId')
+ this.username = getCookie('username')
},
computed: {
...mapGetters([
'sidebar',
- 'avatar'
- ])
- },
- created() {
- this.username = getCookie('admin')
- },
- data() {
- return {
- username: ''
+ 'avatar',
+ 'permission_routes'
+ ]),
+ routes() {
+ return this.$router.options.routes
+ },
+ activeMenu() {
+ const route = this.$route
+ const { meta, path } = route
+ // if set path, the sidebar will highlight the path you set
+ if (meta.activeMenu) {
+ return meta.activeMenu
+ }
+ // const p = '/' + path.split('/')[1]
+ // console.log(p)
+ return path
+ },
+ variables() {
+ // console.log(variables, 2333)
+ // 鍏堣緭鍑鸿繖涓獀ariables鍊� 鐒跺悗淇敼鍏跺睘鎬у��
+ variables.menuActiveText = this.$store.state.settings.theme
+ // background: rgb(48, 65, 86);
+ // variables.menuBg = this.$store.state.settings.headBackgroundColorValue && this.$store.state.settings.menuIsHorizontal ? `rgb(48,65,86)` : '#fff'
+ return variables
}
},
methods: {
+ pageRefreshClick() {
+ this.reload()
+ const tabViews = this.$store.state.tagsView.visitedViews.map(item => {
+ return {
+ fullPath: item.fullPath,
+ hash: item.hash,
+ meta: { ...item.meta },
+ name: item.name,
+ params: { ...item.params },
+ path: item.path,
+ query: { ...item.query },
+ title: item.title
+ }
+ })
+ sessionStorage.setItem('tabViews', JSON.stringify(tabViews))
+ },
+ handleSelect(key, keyPath) {
+ // console.log(key, keyPath)
+ },
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
async logout() {
- // await this.$store.dispatch('user/logout')
- const usercode = getCookie('navTabId')
- const username = getCookie('admin')
- const usertype = getCookie('usertype')
- const userid = getCookie('userid')
- const data = {
- usercode,
- username,
- usertype,
- userid
- }
- const res = await logout(data)
- if (res.code === '200') {
- removeToken()
- resetRouter()
- removeCookie('admin')
- removeCookie('navTabId')
- removeCookie('usertype')
- removeCookie('userid')
- this.$message.success('閫�鍑烘垚鍔燂紒')
- this.$router.push(`/login?redirect=${this.$route.fullPath}`)
- // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
- }
- // this.$router.push(`/login`)
+ await this.$store.dispatch('user/logout')
+ this.$message.success('閫�鍑烘垚鍔燂紒')
+ this.$router.push(`/login`)
+ },
+ editPassword() {
+ this.dialogVisible = true
+ },
+ dialogVisibleCancel() {
+ this.dialogVisible = false
+ },
+ dialogVisibleConfirm() {
+ this.$refs.dialogForm.validate(valid => {
+ if (valid) {
+ const data = {
+ usercode: this.usercode,
+ username: this.username,
+ password: this.form.password,
+ newpassword: this.form.newpassword
+ }
+ UpdateUserPassword(data).then(res => {
+ if (res.code === '200') {
+ this.$message.success('淇敼鎴愬姛锛�')
+ this.dialogVisible = false
+ }
+ })
+ }
+ })
+ },
+ handleClose() {
+ this.form.password = ''
+ this.form.newpassword = ''
+ this.$refs.dialogForm.clearValidate()
}
}
}
</script>
-
<style lang="scss" scoped>
+.display_btw {
+ display: flex;
+ justify-content: space-between;
+}
+
.navbar {
height: 50px;
overflow: hidden;
position: relative;
- background: #fff;
- box-shadow: 0 1px 4px rgba(0,21,41,.08);
+ //background: #fff;
+ box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+
+ //background-color: #f8f8fa;
.hamburger-container {
line-height: 46px;
@@ -115,7 +318,7 @@
float: left;
cursor: pointer;
transition: background .3s;
- -webkit-tap-highlight-color:transparent;
+ -webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, .025)
@@ -124,12 +327,38 @@
.breadcrumb-container {
float: left;
+ width: 200px;
+ }
+
+ .menuHorizontal {
+ display: flex !important;
+ justify-content: center !important;
+
+ ::v-deep .svg-icon {
+ margin-right: 8px;
+ //margin-left: 8px !important;
+ }
+
+ ::v-deep .el-submenu__title > span {
+ //margin-right: 8px !important;
+ }
+
+ ::v-deep .submenu-title-noDropdown > span {
+ //margin-right: 8px !important;
+ }
+
+ ::v-deep .el-submenu__icon-arrow {
+ display: none;
+ }
+
}
.right-menu {
float: right;
height: 100%;
line-height: 50px;
+ display: flex;
+ //min-width: 300px;
&:focus {
outline: none;
@@ -160,13 +389,6 @@
margin-top: 5px;
position: relative;
cursor: pointer;
- .headerImg{
- margin: 5px;
- }
-
- .headerName{
- font-weight: bolder;
- }
.user-avatar {
cursor: pointer;
@@ -187,3 +409,10 @@
}
}
</style>
+<style>
+.el-menu--horizontal .el-menu {
+ background-color: transparent !important;
+ margin-top: -2px;
+}
+
+</style>
--
Gitblit v1.9.3