dai
4 years ago
15 changed files with 1411 additions and 107 deletions
@ -0,0 +1,589 @@ |
|||
@import "~@/element-ui/theme-variables.scss"; |
|||
@import "./variables.scss"; |
|||
|
|||
// $navbar--height: 60px; |
|||
|
|||
/* Reset element-ui |
|||
------------------------------ */ |
|||
.g-bd { |
|||
.el-card + .el-card { |
|||
margin-top: 15px; |
|||
} |
|||
.el-input__prefix .el-input__icon { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.el-date-editor .el-range-separator { |
|||
width: 8%; |
|||
} |
|||
.el-table th { |
|||
color: $--color-text-primary; |
|||
background-color: $--background-color-base; |
|||
} |
|||
.el-pagination { |
|||
margin-top: 15px; |
|||
text-align: right; |
|||
} |
|||
.el-table__expand-icon { |
|||
display: inline-block; |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
|
|||
/* Common |
|||
------------------------------ */ |
|||
// 图标 |
|||
.icon-svg { |
|||
width: 1em; |
|||
height: 1em; |
|||
fill: currentColor; |
|||
vertical-align: middle; |
|||
overflow: hidden; |
|||
} |
|||
// 卡片 |
|||
.aui-card--fill .el-card__header { |
|||
height: $content--card-header-height; |
|||
line-height: $content--card-header-height - 36px; |
|||
} |
|||
.aui-card__title { |
|||
font-size: 16px; |
|||
} |
|||
// 表单 |
|||
.aui-form__label-icon { |
|||
display: inline-block; |
|||
margin: 0 3px; |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
color: $--color-text-secondary; |
|||
} |
|||
// 按钮 |
|||
.aui-button--dashed { |
|||
border-style: dashed; |
|||
&:focus, |
|||
&:hover { |
|||
background-color: transparent; |
|||
} |
|||
&-add { |
|||
> span > *[class*="el-icon-"], |
|||
> span > *[class*="icon"] { |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Layout |
|||
------------------------------ */ |
|||
.g-bd { |
|||
position: relative; |
|||
padding-top: $navbar--height; |
|||
|
|||
/* Sidebar fold |
|||
------------------------------ */ |
|||
&.z-sidebar--fold { |
|||
.navbar { |
|||
&__header, |
|||
&__brand { |
|||
width: $sidebar--width-fold; |
|||
} |
|||
&__brand { |
|||
&-lg { |
|||
display: none; |
|||
} |
|||
&-mini { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
&__icon-menu--switch { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
.aui-sidebar { |
|||
&__inner { |
|||
width: $sidebar--width-fold + 20px; |
|||
} |
|||
&, |
|||
&__menu { |
|||
width: $sidebar--width-fold; |
|||
} |
|||
&__menu > li > .el-submenu__title { |
|||
text-align: center; |
|||
} |
|||
&__menu-icon { |
|||
margin-right: 0; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
.g-cnt { |
|||
&__wrapper { |
|||
margin-left: $sidebar--width-fold; |
|||
} |
|||
&--tabs > .el-tabs > .el-tabs__header { |
|||
left: $sidebar--width-fold; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.z-sidebar--noside { |
|||
.aui-sidebar { |
|||
display: none !important; |
|||
} |
|||
.g-cnt { |
|||
&__wrapper { |
|||
margin-left: 0 !important; |
|||
} |
|||
&--tabs > .el-tabs > .el-tabs__header { |
|||
left: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Navbar |
|||
------------------------------ */ |
|||
.m-navbar { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
z-index: 1030; |
|||
display: flex; |
|||
align-items: stretch; |
|||
height: $navbar--height; |
|||
// background-color: $--color-primary; |
|||
// box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); |
|||
background: linear-gradient(180deg, #00023f, #176dec); |
|||
box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35); |
|||
|
|||
.navbar--colorful { |
|||
.navbar__body { |
|||
background-color: transparent; |
|||
} |
|||
.navbar__menu { |
|||
> .el-menu-item, |
|||
> .el-submenu > .el-submenu__title { |
|||
color: #fff; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
background-color: mix(#000, $--color-primary, 15%); |
|||
} |
|||
} |
|||
> .el-menu-item.is-active, |
|||
> .el-submenu.is-active > .el-submenu__title { |
|||
color: #fff; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
} |
|||
} |
|||
.el-menu-item i, |
|||
.el-submenu__title i, |
|||
.el-menu-item svg, |
|||
.el-submenu__title svg, |
|||
.el-menu-item .el-dropdown { |
|||
color: #fff !important; |
|||
} |
|||
.el-button { |
|||
color: #fff; |
|||
background-color: transparent; |
|||
} |
|||
} |
|||
.navbar__search { |
|||
&-txt { |
|||
.el-input__inner { |
|||
color: #fff; |
|||
border-color: #fff; |
|||
&::-webkit-input-placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.navbar__header { |
|||
position: relative; |
|||
width: $sidebar--width; |
|||
height: $navbar--height; |
|||
transition: width 0.3s; |
|||
} |
|||
.navbar__brand { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 5px; |
|||
margin: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24px; |
|||
text-transform: uppercase; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
transition: width 0.3s; |
|||
font-family: FZZCHJW; |
|||
font-weight: normal; |
|||
color: #ffffff; |
|||
background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: rgba(#fff, 0.7); |
|||
|
|||
&-lg, |
|||
&-mini { |
|||
max-width: 100%; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
&-mini { |
|||
display: none; |
|||
} |
|||
} |
|||
.navbar__body { |
|||
position: relative; |
|||
display: flex; |
|||
flex: 1; |
|||
// background-color: #fff; |
|||
background-color: transparent; |
|||
// overflow: hidden; |
|||
} |
|||
.navbar__menu { |
|||
background-color: transparent; |
|||
border-bottom: 0 !important; |
|||
a:focus, |
|||
a:hover { |
|||
text-decoration: none; |
|||
} |
|||
&.z-div { |
|||
.el-menu-item { |
|||
position: relative; |
|||
|
|||
&.is-active { |
|||
&::before { |
|||
position: absolute; |
|||
content: ""; |
|||
display: block; |
|||
bottom: -6px; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
width: 50px; |
|||
height: 4px; |
|||
border: 0; |
|||
border-radius: 0 0 2px 2px; |
|||
background: #1effff; |
|||
} |
|||
} |
|||
|
|||
&:last-child { |
|||
&::after { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
content: ""; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto 0; |
|||
width: 1px; |
|||
height: 18px; |
|||
background-color: rgba(#ffffff, 0.6); |
|||
} |
|||
} |
|||
} |
|||
.el-menu-item, |
|||
.el-submenu > .el-submenu__title { |
|||
height: $navbar--height; |
|||
padding: 0 15px; |
|||
line-height: $navbar--height; |
|||
border-color: transparent !important; |
|||
color: #fff; |
|||
} |
|||
.el-menu-item.is-active, |
|||
.el-submenu.is-active > .el-submenu__title { |
|||
color: #fff; |
|||
font-weight: bold; |
|||
&:focus, |
|||
&:hover { |
|||
} |
|||
} |
|||
.el-menu-item { |
|||
&:focus, |
|||
&:hover { |
|||
background-color: transparent !important; |
|||
|
|||
.navbar__icon-menu { |
|||
color: #fff; |
|||
} |
|||
.el-dropdown { |
|||
color: #fff; |
|||
.el-icon-arrow-down { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
} |
|||
* { |
|||
vertical-align: initial; |
|||
} |
|||
.navbar__icon-menu { |
|||
vertical-align: middle; |
|||
font-size: 16px; |
|||
} |
|||
.el-dropdown { |
|||
color: #fff; |
|||
.el-icon-arrow-down { |
|||
width: auto; |
|||
font-size: 12px; |
|||
margin: 0 0 0 5px; |
|||
transition: transform 0.3s; |
|||
} |
|||
} |
|||
} |
|||
.el-badge { |
|||
display: inline; |
|||
z-index: 2; |
|||
&__content { |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
} |
|||
.navbar__search { |
|||
> *[class*="el-icon-"], |
|||
> *[class*="icon"] { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
&-txt { |
|||
width: 0; |
|||
transition: width 0.3s, margin-left 0.3s; |
|||
&.is-show { |
|||
width: 210px; |
|||
margin-left: 8px; |
|||
} |
|||
.el-input__inner { |
|||
height: $navbar--height - 20px; |
|||
padding: 0; |
|||
line-height: $navbar--height - 20px; |
|||
border-color: $--color-text-primary; |
|||
border-top: 0; |
|||
border-right: 0; |
|||
border-left: 0; |
|||
border-radius: 0; |
|||
background: transparent; |
|||
} |
|||
} |
|||
} |
|||
.navbar__avatar { |
|||
.el-dropdown-link { |
|||
> img { |
|||
width: 36px; |
|||
height: auto; |
|||
margin-right: 5px; |
|||
border-radius: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Content |
|||
------------------------------ */ |
|||
.g-cnt { |
|||
position: relative; |
|||
padding: $content--padding; |
|||
min-height: calc(100vh - #{$navbar--height}); |
|||
background-color: #000; |
|||
|
|||
&__wrapper { |
|||
position: relative; |
|||
margin-left: $sidebar--width; |
|||
min-height: calc(100vh - #{$navbar--height}); |
|||
background-color: $content--background-color; |
|||
transition: margin-left 0.3s; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(#{$content--fill-height} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px); |
|||
} |
|||
&--tabs { |
|||
padding: $content--tabs-header-height 0 0; |
|||
} |
|||
&--tabs-tools { |
|||
position: fixed; |
|||
top: $navbar--height; |
|||
right: 0; |
|||
z-index: 931; |
|||
min-width: $content--tabs-header-height; |
|||
height: $content--tabs-header-height; |
|||
padding: 0 12px; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
line-height: $content--tabs-header-height; |
|||
background-color: $--background-color-base; |
|||
cursor: pointer; |
|||
} |
|||
&--tabs-icon-nav { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
font-size: 16px; |
|||
} |
|||
> .el-tabs { |
|||
> .el-tabs__header { |
|||
position: fixed; |
|||
top: $navbar--height; |
|||
left: $sidebar--width; |
|||
right: 0; |
|||
z-index: 930; |
|||
padding: 0 55px 0 15px; |
|||
margin: 0; |
|||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); |
|||
background-color: #fff; |
|||
transition: left 0.3s; |
|||
> .el-tabs__nav-wrap { |
|||
margin-bottom: 0; |
|||
&:after { |
|||
display: none; |
|||
} |
|||
> .el-tabs__nav-next, |
|||
> .el-tabs__nav-prev { |
|||
line-height: $content--tabs-header-height; |
|||
} |
|||
> .el-tabs__nav-scroll > .el-tabs__nav { |
|||
& > .el-tabs__active-bar { |
|||
display: none; |
|||
} |
|||
& > .el-tabs__item { |
|||
height: $content--tabs-header-height; |
|||
padding: 0 15px; |
|||
line-height: $content--tabs-header-height; |
|||
border: 0; |
|||
color: $--color-text-regular; |
|||
&:focus, |
|||
&:hover, |
|||
&.is-active { |
|||
color: $--color-text-primary; |
|||
background-color: $--background-color-base; |
|||
&:after { |
|||
display: block; |
|||
} |
|||
> .el-icon-close { |
|||
color: $--color-text-primary; |
|||
} |
|||
} |
|||
&:after { |
|||
display: none; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
content: ""; |
|||
width: 100%; |
|||
height: 2px; |
|||
background-color: $--color-primary; |
|||
} |
|||
+ .el-tabs__item { |
|||
margin-left: 1px; |
|||
} |
|||
> .el-icon-close { |
|||
width: 14px; |
|||
margin-left: 15px; |
|||
color: $--color-text-secondary; |
|||
} |
|||
> i.icon { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
> .el-tabs__content { |
|||
padding: $content--padding; |
|||
.el-loading-mask { |
|||
z-index: 830; |
|||
} |
|||
> .el-tab-pane { |
|||
min-height: calc(#{$content--fill-height-tabs}); |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(#{$content--fill-height-tabs} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|||
} |
|||
&.is-iframe { |
|||
height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2}); |
|||
margin: -$content--padding; |
|||
min-height: auto; |
|||
> .aui-card--fill { |
|||
background-color: transparent; |
|||
} |
|||
> .aui-card--fill > .el-card__header { |
|||
background-color: #fff; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
height: calc(#{$content--fill-height-tabs} - 2px); |
|||
margin: $content--padding; |
|||
min-height: auto; |
|||
border: $--border-base; |
|||
border-color: $--border-color-lighter; |
|||
border-radius: $--border-radius-base; |
|||
background-color: #fff; |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// quill富文本编辑器 |
|||
.ql-toolbar { |
|||
line-height: 20px; |
|||
&.ql-snow { |
|||
border-color: $--border-color-base; |
|||
} |
|||
.ql-formats { |
|||
margin: 0 5px; |
|||
} |
|||
} |
|||
.ql-container { |
|||
height: 150px; |
|||
&.ql-snow { |
|||
border-color: $--border-color-base; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-loading-mask { |
|||
z-index: 5001 !important; |
|||
} |
|||
|
|||
/* Page |
|||
------------------------------ */ |
|||
*[class*="aui-page__"] { |
|||
padding-top: 0; |
|||
.aui-content { |
|||
min-height: auto; |
|||
&__wrapper { |
|||
min-height: 100vh; |
|||
margin-left: 0; |
|||
} |
|||
> .aui-card--fill > .el-card__body { |
|||
min-height: calc(100vh - #{$content--padding * 2} - 2px); |
|||
} |
|||
> .aui-card--fill > .el-card__header + .el-card__body { |
|||
min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px); |
|||
} |
|||
} |
|||
} |
|||
@ -1,49 +1,54 @@ |
|||
import Vue from 'vue' |
|||
import Vuex from 'vuex' |
|||
import cloneDeep from 'lodash/cloneDeep' |
|||
import user from './modules/user' |
|||
import app from './modules/app' |
|||
import tagsView from './modules/tagsView' |
|||
import Vue from "vue"; |
|||
import Vuex from "vuex"; |
|||
import cloneDeep from "lodash/cloneDeep"; |
|||
import user from "./modules/user"; |
|||
import app from "./modules/app"; |
|||
import tagsView from "./modules/tagsView"; |
|||
|
|||
Vue.use(Vuex) |
|||
Vue.use(Vuex); |
|||
|
|||
export default new Vuex.Store({ |
|||
namespaced: true, |
|||
state: { |
|||
// 导航条, 布局风格, defalut(白色) / colorful(鲜艳)
|
|||
navbarLayoutType: 'colorful', |
|||
navbarLayoutType: "colorful", |
|||
// 侧边栏, 布局皮肤, default(白色) / dark(黑色)
|
|||
sidebarLayoutSkin: 'dark', |
|||
sidebarLayoutSkin: "dark", |
|||
// 侧边栏, 折叠状态
|
|||
sidebarFold: false, |
|||
// 侧边栏, 菜单
|
|||
sidebarMenuList: [], |
|||
sidebarMenuActiveName: '', |
|||
LevelOneMenuActiveName: '', |
|||
sidebarMenuActiveName: "", |
|||
LevelOneMenuActiveName: "", |
|||
sidebarActiveSubMenuList: [], |
|||
// 内容, 是否需要刷新
|
|||
contentIsNeedRefresh: false, |
|||
// 内容, 标签页(默认添加首页)
|
|||
contentTabs: [ |
|||
{ |
|||
...window.SITE_CONFIG['contentTabDefault'], |
|||
'name': 'home', |
|||
'title': 'home' |
|||
} |
|||
...window.SITE_CONFIG["contentTabDefault"], |
|||
name: "home", |
|||
title: "home", |
|||
}, |
|||
], |
|||
contentTabsActiveName: 'home' |
|||
contentTabsActiveName: "home", |
|||
|
|||
mainShuju: { |
|||
menuList: [], |
|||
activeName: "", |
|||
}, |
|||
}, |
|||
modules: { |
|||
user, |
|||
app, |
|||
tagsView |
|||
tagsView, |
|||
}, |
|||
mutations: { |
|||
// 重置vuex本地储存状态
|
|||
resetStore (state) { |
|||
resetStore(state) { |
|||
Object.keys(state).forEach((key) => { |
|||
state[key] = cloneDeep(window.SITE_CONFIG['storeState'][key]) |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
state[key] = cloneDeep(window.SITE_CONFIG["storeState"][key]); |
|||
}); |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
@ -0,0 +1,95 @@ |
|||
<template> |
|||
<main :class="['aui-content']"> |
|||
<!-- 其他方式, 展示内容 --> |
|||
<template> |
|||
<keep-alive> |
|||
<router-view /> |
|||
</keep-alive> |
|||
</template> |
|||
</main> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isURL } from '@/utils/validate' |
|||
import Cookie from 'js-cookie' |
|||
export default { |
|||
data () { |
|||
return { |
|||
iframeUrl: '', |
|||
token: '', |
|||
customerId: '' |
|||
} |
|||
}, |
|||
created () { |
|||
// this.$nextTick(() => { |
|||
// this.sendMessage() |
|||
// }) |
|||
this.token = Cookie.get('token') |
|||
this.customerId = localStorage.getItem('customerId') |
|||
}, |
|||
methods: { |
|||
changeCustomerName (customerName) { |
|||
this.$emit('changeCustomerName', customerName) |
|||
}, |
|||
// tabs, 是否通过iframe展示 |
|||
tabIsIframe (url) { |
|||
// this.appendIframe(url) |
|||
this.iframeUrl = url + '?token=' + Cookie.get('token') + '&customerId=' + localStorage.getItem('customerId') |
|||
return isURL(url) |
|||
}, |
|||
// tabs, 选中tab |
|||
tabSelectedHandle (tab) { |
|||
tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)[0] |
|||
if (tab) { |
|||
this.$router.push({ |
|||
'name': tab.name, |
|||
'params': { ...tab.params }, |
|||
'query': { ...tab.query } |
|||
}) |
|||
} |
|||
}, |
|||
// tabs, 删除tab |
|||
tabRemoveHandle (tabName) { |
|||
if (tabName === 'home') { |
|||
return false |
|||
} |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName) |
|||
if (this.$store.state.contentTabs.length <= 0) { |
|||
this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home' |
|||
return false |
|||
} |
|||
// 当前选中tab被删除 |
|||
if (tabName === this.$store.state.contentTabsActiveName) { |
|||
let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1] |
|||
this.$router.push({ |
|||
name: tab.name, |
|||
params: { ...tab.params }, |
|||
query: { ...tab.query } |
|||
}) |
|||
} |
|||
}, |
|||
// tabs, 关闭其它 |
|||
tabsCloseOtherHandle () { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => { |
|||
return item.name === 'home' || item.name === this.$store.state.contentTabsActiveName |
|||
}) |
|||
}, |
|||
// tabs, 关闭全部 |
|||
tabsCloseAllHandle () { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home') |
|||
this.$router.push({ name: 'home' }) |
|||
}, |
|||
sendMessage () { |
|||
// const iframe = this.$refs.iframes.contentWindow |
|||
const iframe = document.getElementsByClassName('iframes')[0].contentWindow |
|||
|
|||
console.log('iframe', iframe) |
|||
// iframe.postMessage({ |
|||
// token: Cookie.get('token'), |
|||
// customerId: localStorage.getItem('customerId') |
|||
// }, '*') |
|||
iframe.postMessage({ name: 'lalalal' }, '*') |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<el-dialog |
|||
:visible.sync="visible" |
|||
:title="$t('updatePassword.title')" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:append-to-body="true" |
|||
> |
|||
<el-form |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
ref="dataForm" |
|||
@keyup.enter.native="dataFormSubmitHandle()" |
|||
label-width="120px" |
|||
> |
|||
<el-form-item :label="$t('updatePassword.username')"> |
|||
<span>{{ $store.state.user.realName }}</span> |
|||
</el-form-item> |
|||
<!-- <el-form-item prop="password" :label="$t('updatePassword.password')"> |
|||
<el-input |
|||
v-model="dataForm.password" |
|||
type="password" |
|||
:placeholder="$t('updatePassword.password')" |
|||
></el-input> |
|||
</el-form-item> --> |
|||
<el-form-item |
|||
prop="newPassword" |
|||
:label="$t('updatePassword.newPassword')" |
|||
> |
|||
<el-input |
|||
v-model="dataForm.newPassword" |
|||
type="password" |
|||
:placeholder="$t('updatePassword.newPassword')" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="confirmPassword" |
|||
:label="$t('updatePassword.confirmPassword')" |
|||
> |
|||
<el-input |
|||
v-model="dataForm.confirmPassword" |
|||
type="password" |
|||
:placeholder="$t('updatePassword.confirmPassword')" |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ |
|||
$t('confirm') |
|||
}}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import { clearLoginInfo } from '@/utils' |
|||
export default { |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
password: '', |
|||
newPassword: '', |
|||
confirmPassword: '' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
var validateConfirmPassword = (rule, value, callback) => { |
|||
if (this.dataForm.newPassword !== value) { |
|||
return callback( |
|||
new Error(this.$t('updatePassword.validate.confirmPassword')) |
|||
) |
|||
} |
|||
callback() |
|||
} |
|||
return { |
|||
// password: [ |
|||
// { |
|||
// required: true, |
|||
// message: this.$t('validate.required'), |
|||
// trigger: 'blur' |
|||
// } |
|||
// ], |
|||
newPassword: [ |
|||
{ |
|||
required: true, |
|||
message: this.$t('validate.required'), |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
confirmPassword: [ |
|||
{ |
|||
required: true, |
|||
message: this.$t('validate.required'), |
|||
trigger: 'blur' |
|||
}, |
|||
{ validator: validateConfirmPassword, trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce( |
|||
function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.$http |
|||
.post('/gov/mine/mine/resetpassword', { |
|||
newPassword: this.dataForm.newPassword, |
|||
confirmNewPassword: this.dataForm.confirmPassword |
|||
}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
clearLoginInfo() |
|||
this.$router.replace({ name: 'loginWork' }) |
|||
} |
|||
}) |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
}, |
|||
1000, |
|||
{ leading: true, trailing: false } |
|||
) |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,246 @@ |
|||
<template> |
|||
<div> |
|||
<nav |
|||
v-if="showHeader" |
|||
class="m-navbar" |
|||
> |
|||
<div class="navbar__header"> |
|||
<h1 class="navbar__brand" @click="$router.push({ name: 'home' })"> |
|||
<a class="navbar__brand-lg" href="javascript:;">{{ |
|||
userType === 'work' ? customerName : $t('brand.lg') |
|||
}}</a> |
|||
<a class="navbar__brand-mini" href="javascript:;">{{ |
|||
$t('brand.mini') |
|||
}}</a> |
|||
</h1> |
|||
</div> |
|||
<div class="navbar__body"> |
|||
<el-menu class="navbar__menu mr-auto" mode="horizontal"> |
|||
<el-menu-item |
|||
index="1" |
|||
@click="$store.state.sidebarFold = !$store.state.sidebarFold" |
|||
> |
|||
<svg |
|||
class=" |
|||
icon-svg |
|||
navbar__icon-menu navbar__icon-menu--switch |
|||
" |
|||
aria-hidden="true" |
|||
> |
|||
<use xlink:href="#icon-outdent"></use> |
|||
</svg> |
|||
</el-menu-item> |
|||
|
|||
<el-menu-item index="2" @click="refresh()"> |
|||
<svg class="icon-svg navbar__icon-menu" aria-hidden="true"> |
|||
<use xlink:href="#icon-sync"></use> |
|||
</svg> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
|
|||
<el-menu |
|||
:default-active="$store.state.mainShuju.activeName" |
|||
:unique-opened="true" |
|||
:collapseTransition="false" |
|||
mode="horizontal" |
|||
class="navbar__menu mr-auto z-div" |
|||
> |
|||
<el-menu-item |
|||
@click="toIndexPage" |
|||
> |
|||
<span>首页</span> |
|||
</el-menu-item> |
|||
|
|||
<el-menu-item |
|||
v-for="(menu, idx) in $store.state.mainShuju.menuList" |
|||
:key="menu.id" |
|||
:menu="menu" |
|||
:index="menu.id" |
|||
@click="gotoRouteHandle(menu.id, idx)" |
|||
> |
|||
<span>{{ menu.name }}</span> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
|
|||
<el-menu class="navbar__menu" mode="horizontal"> |
|||
<!-- <el-menu-item index="1"> |
|||
<el-dropdown placement="bottom" |
|||
:show-timeout="0"> |
|||
<el-button size="mini">{{ $t('_lang') }}</el-button> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item v-for="(val, key) in i18nMessages" |
|||
:key="key" |
|||
@click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</el-menu-item> --> |
|||
<!-- <el-menu-item index="2"> |
|||
<a href="//www.renren.io/" |
|||
target="_blank"> |
|||
<svg class="icon-svg navbar__icon-menu" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#icon-earth"></use> |
|||
</svg> |
|||
</a> |
|||
</el-menu-item> --> |
|||
<el-menu-item index="3" |
|||
@click="fullscreenHandle()"> |
|||
<svg class="icon-svg navbar__icon-menu" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#icon-fullscreen"></use> |
|||
</svg> |
|||
</el-menu-item> |
|||
|
|||
<el-menu-item index="4" class="navbar__avatar"> |
|||
<el-dropdown placement="bottom" :show-timeout="0"> |
|||
<span class="el-dropdown-link"> |
|||
<img |
|||
v-if="$store.state.user.gender === '2'" |
|||
src="~@/assets/img/staff-default-avatar-girl.png" |
|||
/> |
|||
<img v-else src="~@/assets/img/staff-default-avatar-boy.png" /> |
|||
<span>{{ $store.state.user.realName }}</span> |
|||
<i class="el-icon-arrow-down"></i> |
|||
</span> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item |
|||
@click.native="updatePasswordHandle()" |
|||
>{{ $t('updatePassword.title') }}</el-dropdown-item |
|||
> |
|||
<el-dropdown-item @click.native="logoutHandle()">{{ |
|||
$t('logout') |
|||
}}</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
</div> |
|||
<!-- 弹窗, 修改密码 --> |
|||
<update-password-work |
|||
v-if="updatePassowrdVisible" |
|||
ref="updatePassowrd" |
|||
></update-password-work> |
|||
</nav> |
|||
<nav v-else class="navbar main-line"></nav> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { messages } from '@/i18n' |
|||
import { mapGetters } from 'vuex' |
|||
import screenfull from 'screenfull' |
|||
import UpdatePasswordWork from './main-navbar-update-password-work' |
|||
import { clearLoginInfo } from '@/utils' |
|||
export default { |
|||
inject: ['refresh'], |
|||
data() { |
|||
return { |
|||
showHeader: true, |
|||
i18nMessages: messages, |
|||
updatePassowrdVisible: false, |
|||
customerName: localStorage.getItem('customerName') |
|||
} |
|||
}, |
|||
components: { |
|||
UpdatePasswordWork |
|||
}, |
|||
created() { |
|||
let platformToken = localStorage.getItem('showHeader') || '' |
|||
if ( |
|||
typeof platformToken !== 'undefined' && |
|||
platformToken !== 'undefined' && |
|||
platformToken !== '' |
|||
) { |
|||
this.showHeader = false |
|||
} |
|||
console.log('=============================', this.userType) |
|||
this.$store.state.mainShuju.menuList = window.SITE_CONFIG['menuShujuList'] |
|||
}, |
|||
computed: { |
|||
userType() { |
|||
return localStorage.getItem('userType') |
|||
} |
|||
}, |
|||
methods: { |
|||
toIndexPage(){ |
|||
this.$router.replace('/indexWork') |
|||
}, |
|||
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由 |
|||
gotoRouteHandle(menuId, idx) { |
|||
var route = window.SITE_CONFIG['dynamicMenuRoutesShuju'].filter( |
|||
(item) => item.meta.menuId === menuId |
|||
)[0] |
|||
if (route) { |
|||
this.$router.push({ name: route.name }) |
|||
} |
|||
this.$store.state.mainShuju.activeName = menuId |
|||
}, |
|||
changeCustomerName(customerName) { |
|||
this.customerName = localStorage.getItem('customerName') |
|||
}, |
|||
// 全屏 |
|||
fullscreenHandle() { |
|||
if (!screenfull.enabled) { |
|||
return this.$message({ |
|||
message: this.$t('fullscreen.prompt'), |
|||
type: 'warning', |
|||
duration: 500 |
|||
}) |
|||
} |
|||
screenfull.toggle() |
|||
}, |
|||
// 修改密码 |
|||
updatePasswordHandle() { |
|||
this.updatePassowrdVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.updatePassowrd.init() |
|||
}) |
|||
}, |
|||
// 退出 |
|||
logoutHandle() { |
|||
this.$confirm( |
|||
this.$t('prompt.info', { handle: this.$t('logout') }), |
|||
this.$t('prompt.title'), |
|||
{ |
|||
confirmButtonText: this.$t('confirm'), |
|||
cancelButtonText: this.$t('cancel'), |
|||
type: 'warning' |
|||
} |
|||
) |
|||
.then(() => { |
|||
//关闭所有标签页 |
|||
// tabs, 关闭全部 |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === 'home2' |
|||
) |
|||
|
|||
this.$http |
|||
.post('/auth/login/logout') |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
//别处登陆时 退出不提示 直接跳登陆页即可 |
|||
if (res.code !== 10007) { |
|||
this.$message.error(res.msg) |
|||
} |
|||
} |
|||
|
|||
clearLoginInfo() |
|||
|
|||
this.$router.push({ name: 'login' }) |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
.catch(() => {}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main-line { |
|||
height: 50px; |
|||
background: #eeeeee; |
|||
} |
|||
</style> |
|||
<style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style> |
|||
|
|||
@ -0,0 +1,157 @@ |
|||
<template> |
|||
<div |
|||
v-loading.fullscreen.lock="loading" |
|||
:element-loading-text="$t('loading')" |
|||
:class="[ |
|||
'g-bd', |
|||
{ 'z-sidebar--fold': $store.state.sidebarFold }, |
|||
{ |
|||
'z-sidebar--noside':true |
|||
} |
|||
]" |
|||
> |
|||
<template v-if="!loading"> |
|||
<main-navbar ref="ref_navbar" /> |
|||
<div class="g-cnt"> |
|||
<main-content |
|||
v-if="!$store.state.contentIsNeedRefresh" |
|||
@changeCustomerName="changeCustomerName" |
|||
/> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import MainNavbar from './main-navbar' |
|||
import MainContent from './main-content' |
|||
import debounce from 'lodash/debounce' |
|||
import { mapGetters } from 'vuex' |
|||
import nextTick from 'dai-js/tools/nextTick' |
|||
|
|||
export default { |
|||
provide() { |
|||
return { |
|||
// 刷新 |
|||
refresh() { |
|||
this.$store.state.contentIsNeedRefresh = true |
|||
this.$nextTick(() => { |
|||
this.$store.state.contentIsNeedRefresh = false |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
userType: localStorage.getItem('userType') |
|||
} |
|||
}, |
|||
components: { |
|||
MainNavbar, |
|||
MainContent, |
|||
}, |
|||
|
|||
watch: { |
|||
$route: 'routeHandle' |
|||
}, |
|||
async created() { |
|||
this.windowResizeHandle() |
|||
this.routeHandle(this.$route) |
|||
Promise.all([this.getWorkUserInfo()]).then(() => { |
|||
this.loading = false |
|||
}) |
|||
}, |
|||
computed: {}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$refs['ref_navbar'].changeCustomerName(customerName) |
|||
}, |
|||
// 窗口改变大小 |
|||
windowResizeHandle() { |
|||
this.$store.state.sidebarFold = |
|||
document.documentElement['clientWidth'] <= 992 || false |
|||
window.addEventListener( |
|||
'resize', |
|||
debounce(() => { |
|||
this.$store.state.sidebarFold = |
|||
document.documentElement['clientWidth'] <= 992 || false |
|||
}, 150) |
|||
) |
|||
}, |
|||
// 路由, 监听 |
|||
routeHandle(route) { |
|||
if (!route.meta.isTab) { |
|||
return false |
|||
} |
|||
var tab = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === route.name |
|||
)[0] |
|||
if (!tab) { |
|||
tab = { |
|||
...window.SITE_CONFIG['contentTabDefault'], |
|||
...route.meta, |
|||
name: route.name, |
|||
params: { ...route.params }, |
|||
query: { ...route.query } |
|||
} |
|||
this.$store.state.contentTabs = |
|||
this.$store.state.contentTabs.concat(tab) |
|||
} |
|||
|
|||
this.$store.state.mainShuju.activeName = tab.menuId |
|||
this.$store.state.mainShuju.contentTabsActiveName = tab.name |
|||
}, |
|||
// 获取当前管理员信息 |
|||
getUserInfo() { |
|||
const url = '/epmetuser/operuser/queryOperUserDto' |
|||
|
|||
return this.$http |
|||
.get(url) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
|
|||
this.$store.state.user.id = res.data.id |
|||
this.$store.state.user.realName = res.data.realName |
|||
this.$store.state.user.superAdmin = res.data.superAdmin |
|||
this.$store.state.user.gender = data.gender |
|||
localStorage.setItem('customerId', '') |
|||
}) |
|||
.catch(() => {}) |
|||
}, |
|||
// 获取当前管理员信息 |
|||
getWorkUserInfo() { |
|||
const url = '/epmetuser/customerstaff/staffbasicinfo' |
|||
let params = {} |
|||
window.app.ajax.post( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
this.$store.state.user = { ...data } |
|||
// this.$store.state.user.id = data.id |
|||
// this.$store.state.user.realName = data.realName |
|||
// this.$store.state.user.superAdmin = data.superAdmin |
|||
// this.$store.state.user.gender = data.gender |
|||
localStorage.setItem('roleList', data.roleList) |
|||
localStorage.setItem('customerId', data.customerId) |
|||
// this.$store.state.user.roleList = data.roleList |
|||
// this.$store.state.user.customerId = data.customerId |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg) |
|||
} |
|||
) |
|||
// return this.$http.get(url).then(({ data: res }) => { |
|||
// if (res.code !== 0) { |
|||
// return this.$message.error(res.msg) |
|||
// } |
|||
|
|||
// }).catch(() => { }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/main-shuju.scss"></style> |
|||
Loading…
Reference in new issue