Browse Source

还原菜单

master
13176889840 4 years ago
parent
commit
81a8d29b54
  1. 215
      epmet-oper-web/src/views/main-navbar.vue
  2. 54
      epmet-oper-web/src/views/main-sidebar.vue
  3. 42
      epmet-oper-web/src/views/main-theme-tools.vue
  4. 158
      epmet-oper-web/src/views/main.vue
  5. 375
      epmet-oper-web/src/views/pages/loginWork.vue

215
epmet-oper-web/src/views/main-navbar.vue

@ -1,64 +1,31 @@
<template> <template>
<div> <div>
<nav <nav v-if="showHeader"
v-if="showHeader" class="aui-navbar"
class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
:class="`aui-navbar--${$store.state.navbarLayoutType}`"
>
<div class="aui-navbar__header"> <div class="aui-navbar__header">
<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })"> <h1 class="aui-navbar__brand"
<a class="aui-navbar__brand-lg" href="javascript:;">{{ @click="$router.push({ name: 'home' })">
userType === 'work' ? customerName : $t('brand.lg') <a class="aui-navbar__brand-lg"
}}</a> href="javascript:;">{{ userType==='work'?customerName :$t('brand.lg') }}</a>
<a class="aui-navbar__brand-mini" href="javascript:;">{{ <a class="aui-navbar__brand-mini"
$t('brand.mini') href="javascript:;">{{ $t('brand.mini') }}</a>
}}</a>
</h1> </h1>
</div> </div>
<div class="aui-navbar__body"> <div class="aui-navbar__body">
<el-menu class="aui-navbar__menu mr-auto" mode="horizontal"> <el-menu class="aui-navbar__menu mr-auto"
<el-menu-item mode="horizontal">
index="1" <el-menu-item index="1"
@click="$store.state.sidebarFold = !$store.state.sidebarFold" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
> <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
<svg aria-hidden="true">
class="
icon-svg
aui-navbar__icon-menu aui-navbar__icon-menu--switch
"
aria-hidden="true"
>
<use xlink:href="#icon-outdent"></use> <use xlink:href="#icon-outdent"></use>
</svg> </svg>
</el-menu-item> </el-menu-item>
<el-menu-item index="2" @click="refresh()">
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
<use xlink:href="#icon-sync"></use>
</svg>
</el-menu-item>
</el-menu>
<el-menu
v-if="userType == 'work'"
:default-active="$store.state.LevelOneMenuActiveName"
:unique-opened="true"
:collapseTransition="false"
mode="horizontal"
class="aui-navbar__menu mr-auto z-div"
>
<el-menu-item
v-for="(menu, idx) in $store.state.sidebarMenuList"
:key="menu.id"
:menu="menu"
:index="menu.id"
@click="gotoRouteHandle(menu.id, idx)"
>
<span>{{ menu.name }}</span>
</el-menu-item>
</el-menu> </el-menu>
<el-menu class="aui-navbar__menu"
<el-menu class="aui-navbar__menu" mode="horizontal"> mode="horizontal">
<!-- <el-menu-item index="1"> <!-- <el-menu-item index="1">
<el-dropdown placement="bottom" <el-dropdown placement="bottom"
:show-timeout="0"> :show-timeout="0">
@ -86,95 +53,85 @@
<use xlink:href="#icon-fullscreen"></use> <use xlink:href="#icon-fullscreen"></use>
</svg> </svg>
</el-menu-item> --> </el-menu-item> -->
<el-menu-item index="2"
@click="refresh()">
<svg class="icon-svg aui-navbar__icon-menu"
aria-hidden="true">
<use xlink:href="#icon-sync"></use>
</svg>
<el-menu-item index="4" class="aui-navbar__avatar"> </el-menu-item>
<el-dropdown placement="bottom" :show-timeout="0"> <el-menu-item index="4"
class="aui-navbar__avatar">
<el-dropdown placement="bottom"
:show-timeout="0">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<img <img v-if="$store.state.user.gender ==='2'"
v-if="$store.state.user.gender === '2'" src="~@/assets/img/staff-default-avatar-girl.png">
src="~@/assets/img/staff-default-avatar-girl.png" <img v-else
/> src="~@/assets/img/staff-default-avatar-boy.png">
<img v-else src="~@/assets/img/staff-default-avatar-boy.png" />
<span>{{ $store.state.user.realName }}</span> <span>{{ $store.state.user.realName }}</span>
<i class="el-icon-arrow-down"></i> <i class="el-icon-arrow-down"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <!-- <el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item> -->
v-if="userType == 'work'" <el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</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-menu>
</el-dropdown> </el-dropdown>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</div> </div>
<!-- 弹窗, 修改密码 --> <!-- 弹窗, 修改密码 -->
<update-password-work <update-password v-if="updatePassowrdVisible"
v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
ref="updatePassowrd"
></update-password-work>
</nav> </nav>
<nav v-else class="aui-navbar main-line"></nav> <nav v-else
class="aui-navbar main-line"></nav>
</div> </div>
</template> </template>
<script> <script>
import { messages } from '@/i18n' import { messages } from '@/i18n'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import screenfull from 'screenfull' import screenfull from 'screenfull'
import UpdatePasswordWork from './main-navbar-update-password-work' import UpdatePassword from './main-navbar-update-password'
import { clearLoginInfo } from '@/utils' import { clearLoginInfo } from '@/utils'
export default { export default {
inject: ['refresh'], inject: ['refresh'],
data() { data () {
return { return {
showHeader: true, showHeader: true,
i18nMessages: messages, i18nMessages: messages,
updatePassowrdVisible: false, updatePassowrdVisible: false,
customerName: localStorage.getItem('customerName') customerName: localStorage.getItem('customerName')
} }
}, },
components: { components: {
UpdatePasswordWork UpdatePassword
}, },
created() { created () {
let platformToken = localStorage.getItem('showHeader') || '' let platformToken = localStorage.getItem('showHeader') || '';
if ( if (typeof platformToken !== 'undefined' && platformToken !== 'undefined' && platformToken !== '') {
typeof platformToken !== 'undefined' &&
platformToken !== 'undefined' &&
platformToken !== ''
) {
this.showHeader = false this.showHeader = false
} }
console.log('=============================', this.userType)
}, },
computed: { computed: {
userType() { userType () {
return localStorage.getItem('userType') return localStorage.getItem('userType')
} },
}, },
methods: { methods: {
// menuId() changeCustomerName (customerName) {
gotoRouteHandle(menuId, idx) {
var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(
(item) => item.meta.menuId === menuId
)[0]
if (route) {
this.$router.push({ name: route.name })
}
this.$store.state.LevelOneMenuActiveName = menuId
this.$store.state.sidebarActiveSubMenuList =
this.$store.state.sidebarMenuList[idx].children || []
},
changeCustomerName(customerName) {
this.customerName = localStorage.getItem('customerName') this.customerName = localStorage.getItem('customerName')
}, },
// //
fullscreenHandle() { fullscreenHandle () {
if (!screenfull.enabled) { if (!screenfull.enabled) {
return this.$message({ return this.$message({
message: this.$t('fullscreen.prompt'), message: this.$t('fullscreen.prompt'),
@ -185,51 +142,42 @@ export default {
screenfull.toggle() screenfull.toggle()
}, },
// //
updatePasswordHandle() { updatePasswordHandle () {
this.updatePassowrdVisible = true this.updatePassowrdVisible = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.updatePassowrd.init() this.$refs.updatePassowrd.init()
}) })
}, },
// 退 // 退
logoutHandle() { logoutHandle () {
this.$confirm( this.$confirm(this.$t('prompt.info', { 'handle': this.$t('logout') }), this.$t('prompt.title'), {
this.$t('prompt.info', { handle: this.$t('logout') }), confirmButtonText: this.$t('confirm'),
this.$t('prompt.title'), cancelButtonText: this.$t('cancel'),
{ type: 'warning'
confirmButtonText: this.$t('confirm'), }).then(() => {
cancelButtonText: this.$t('cancel'), //
type: 'warning' // tabs,
} this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home')
)
.then(() => {
//
// tabs,
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
(item) => item.name === 'home'
)
this.$http
.post('/auth/login/logout')
.then(({ data: res }) => {
if (res.code !== 0) {
// 退
if (res.code !== 10007) {
this.$message.error(res.msg)
}
}
clearLoginInfo() this.$http.post('/auth/login/logout').then(({ data: res }) => {
if (res.code !== 0) {
// 退
if (res.code !== 10007){
this.$message.error(res.msg)
}
}
if (localStorage.getItem('userType') === 'work') { clearLoginInfo()
this.$router.push({ name: 'loginWork' })
} else { if (localStorage.getItem('userType') === 'work') {
this.$router.push({ name: 'login' }) this.$router.push({ name: 'loginWork' })
} } else {
}) this.$router.push({ name: 'login' })
.catch(() => {}) }
})
.catch(() => {}) }).catch(() => { })
}).catch(() => { })
} }
} }
} }
@ -240,3 +188,4 @@ export default {
background: #eeeeee; background: #eeeeee;
} }
</style> </style>

54
epmet-oper-web/src/views/main-sidebar.vue

@ -1,36 +1,14 @@
<template> <template>
<aside <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
:class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]"
>
<div class="aui-sidebar__inner"> <div class="aui-sidebar__inner">
<el-menu <el-menu :default-active="$store.state.sidebarMenuActiveName"
v-if="userType !== 'work'" :collapse="$store.state.sidebarFold"
:default-active="$store.state.sidebarMenuActiveName" :unique-opened="true"
:collapse="$store.state.sidebarFold" :collapseTransition="false"
:unique-opened="true" class="aui-sidebar__menu">
:collapseTransition="false" <sub-menu v-for="menu in $store.state.sidebarMenuList"
class="aui-sidebar__menu" :key="menu.id"
> :menu="menu" />
<sub-menu
v-for="menu in $store.state.sidebarMenuList"
:key="menu.id"
:menu="menu"
/>
</el-menu>
<el-menu
:default-active="$store.state.sidebarMenuActiveName"
:collapse="$store.state.sidebarFold"
:unique-opened="true"
:collapseTransition="false"
class="aui-sidebar__menu"
v-else
>
<sub-menu
v-for="menu in $store.state.sidebarActiveSubMenuList"
:key="menu.id"
:menu="menu"
/>
</el-menu> </el-menu>
</div> </div>
</aside> </aside>
@ -38,22 +16,16 @@
<script> <script>
import SubMenu from './main-sidebar-sub-menu' import SubMenu from './main-sidebar-sub-menu'
export default { export default {
data() { data () {
return {} return {
}
}, },
components: { components: {
SubMenu SubMenu
}, },
computed: { created () {
userType() {
return localStorage.getItem('userType')
}
},
created() {
this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList'] this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
console.log(this.$store.state.sidebarMenuList)
} }
} }
</script> </script>

42
epmet-oper-web/src/views/main-theme-tools.vue

@ -1,34 +1,21 @@
<template> <template>
<div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }"> <div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
<div class="aui-theme-tools__toggle" @click="isOpen = !isOpen"> <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
<svg class="icon-svg" aria-hidden="true"> <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-setting"></use></svg>
<use xlink:href="#icon-setting"></use>
</svg>
</div> </div>
<div class="aui-theme-tools__content"> <div class="aui-theme-tools__content">
<div class="aui-theme-tools__item"> <div class="aui-theme-tools__item">
<h3>Navbar</h3> <h3>Navbar</h3>
<el-checkbox <el-checkbox v-model="$store.state.navbarLayoutType" true-label="colorful">colorful 鲜艳</el-checkbox>
v-model="$store.state.navbarLayoutType"
true-label="colorful"
>colorful 鲜艳</el-checkbox
>
</div> </div>
<div class="aui-theme-tools__item"> <div class="aui-theme-tools__item">
<h3>Sidebar</h3> <h3>Sidebar</h3>
<el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark" <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark">dark 黑色</el-checkbox>
>dark 黑色</el-checkbox
>
</div> </div>
<div class="aui-theme-tools__item"> <div class="aui-theme-tools__item">
<h3>Theme</h3> <h3>Theme</h3>
<el-radio-group v-model="themeColor" @change="themeColorChangeHandle"> <el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
<el-radio <el-radio v-for="item in themeList" :key="item.name" :label="item.name">{{ `${item.name} ${item.desc}` }}</el-radio>
v-for="item in themeList"
:key="item.name"
:label="item.name"
>{{ `${item.name} ${item.desc}` }}</el-radio
>
</el-radio-group> </el-radio-group>
</div> </div>
</div> </div>
@ -37,34 +24,23 @@
<script> <script>
export default { export default {
data() { data () {
return { return {
isOpen: false, isOpen: false,
themeList: require('@/element-ui/config.js'), themeList: require('@/element-ui/config.js'),
themeColor: '' themeColor: 'turquoise'
} }
}, },
created() {
let color = window.localStorage.getItem('themeColor') || 'blue'
this.themeColorChangeHandle(color)
this.themeColor = color
},
methods: { methods: {
themeColorChangeHandle(val) { themeColorChangeHandle (val) {
window.localStorage.setItem('themeColor', val)
var styleList = [ var styleList = [
{ {
id: 'J_elementTheme', id: 'J_elementTheme',
url: `${ url: `${process.env.BASE_URL}element-theme/${val}/index.css?t=${new Date().getTime()}`
process.env.BASE_URL
}element-theme/${val}/index.css?t=${new Date().getTime()}`
}, },
{ {
id: 'J_auiTheme', id: 'J_auiTheme',
url: `${ url: `${process.env.BASE_URL}element-theme/${val}/aui.css?t=${new Date().getTime()}`
process.env.BASE_URL
}element-theme/${val}/aui.css?t=${new Date().getTime()}`
} }
] ]
for (var i = 0; i < styleList.length; i++) { for (var i = 0; i < styleList.length; i++) {

158
epmet-oper-web/src/views/main.vue

@ -1,25 +1,13 @@
<template> <template>
<div <div v-loading.fullscreen.lock="loading"
v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')"
:element-loading-text="$t('loading')" :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
:class="[
'aui-wrapper',
{ 'aui-sidebar--fold': $store.state.sidebarFold },
{
'aui-sidebar--noside':
userType == 'work' &&
$store.state.sidebarActiveSubMenuList.length == 0
}
]"
>
<template v-if="!loading"> <template v-if="!loading">
<main-navbar ref="ref_navbar" /> <main-navbar ref="ref_navbar" />
<main-sidebar /> <main-sidebar />
<div class="aui-content__wrapper"> <div class="aui-content__wrapper">
<main-content <main-content v-if="!$store.state.contentIsNeedRefresh"
v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" />
@changeCustomerName="changeCustomerName"
/>
</div> </div>
<main-theme-tools /> <main-theme-tools />
</template> </template>
@ -33,13 +21,11 @@ import MainContent from './main-content'
import MainThemeTools from './main-theme-tools' import MainThemeTools from './main-theme-tools'
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import nextTick from 'dai-js/tools/nextTick'
export default { export default {
provide() { provide () {
return { return {
// //
refresh() { refresh () {
this.$store.state.contentIsNeedRefresh = true this.$store.state.contentIsNeedRefresh = true
this.$nextTick(() => { this.$nextTick(() => {
this.$store.state.contentIsNeedRefresh = false this.$store.state.contentIsNeedRefresh = false
@ -47,10 +33,9 @@ export default {
} }
} }
}, },
data() { data () {
return { return {
loading: true, loading: true
userType: localStorage.getItem('userType')
} }
}, },
components: { components: {
@ -59,132 +44,107 @@ export default {
MainContent, MainContent,
MainThemeTools MainThemeTools
}, },
watch: { watch: {
$route: 'routeHandle' $route: 'routeHandle'
}, },
async created() { created () {
this.windowResizeHandle() this.windowResizeHandle()
this.routeHandle(this.$route) this.routeHandle(this.$route)
if (localStorage.getItem('userType') === 'work') { if (localStorage.getItem('userType') === 'work') {
Promise.all([this.getWorkUserInfo()]).then(() => { Promise.all([
this.getWorkUserInfo(),
]).then(() => {
this.loading = false this.loading = false
}) })
} else { } else {
Promise.all([this.getUserInfo()]).then(() => { Promise.all([
this.getUserInfo(),
]).then(() => {
this.loading = false this.loading = false
}) })
} }
},
computed: {
}, },
computed: {},
methods: { methods: {
changeCustomerName(customerName) { changeCustomerName (customerName) {
this.$refs['ref_navbar'].changeCustomerName(customerName) this.$refs['ref_navbar'].changeCustomerName(customerName)
}, },
// //
windowResizeHandle() { windowResizeHandle () {
this.$store.state.sidebarFold = this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
document.documentElement['clientWidth'] <= 992 || false window.addEventListener('resize', debounce(() => {
window.addEventListener( this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
'resize', }, 150))
debounce(() => {
this.$store.state.sidebarFold =
document.documentElement['clientWidth'] <= 992 || false
}, 150)
)
}, },
// , // ,
routeHandle(route) { routeHandle (route) {
if (!route.meta.isTab) { if (!route.meta.isTab) {
return false return false
} }
var tab = this.$store.state.contentTabs.filter( var tab = this.$store.state.contentTabs.filter(item => item.name === route.name)[0]
(item) => item.name === route.name
)[0]
if (!tab) { if (!tab) {
tab = { tab = {
...window.SITE_CONFIG['contentTabDefault'], ...window.SITE_CONFIG['contentTabDefault'],
...route.meta, ...route.meta,
name: route.name, 'name': route.name,
params: { ...route.params }, 'params': { ...route.params },
query: { ...route.query } 'query': { ...route.query }
} }
this.$store.state.contentTabs = this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
this.$store.state.contentTabs.concat(tab)
} }
this.$store.state.sidebarMenuActiveName = tab.menuId this.$store.state.sidebarMenuActiveName = tab.menuId
this.$store.state.contentTabsActiveName = tab.name this.$store.state.contentTabsActiveName = tab.name
this.syncLevelOneMenuActive(tab.menuId)
},
async syncLevelOneMenuActive(menuId) {
await nextTick()
console.log(
'*******************************',
menuId,
this.$store.state.sidebarMenuList
)
const fn = (item) => {
if (item.id == menuId) {
return true
} else if (item.children.length > 0) {
return item.children.findIndex(fn) !== -1
} else {
return false
}
}
let idx = this.$store.state.sidebarMenuList.findIndex(fn)
this.$store.state.LevelOneMenuActiveName =
idx !== -1 ? this.$store.state.sidebarMenuList[idx].id : ''
this.$store.state.sidebarActiveSubMenuList =
idx !== -1 ? this.$store.state.sidebarMenuList[idx].children : []
}, },
// //
getUserInfo() { getUserInfo () {
const url = '/epmetuser/operuser/queryOperUserDto' const url = '/epmetuser/operuser/queryOperUserDto'
return this.$http return this.$http.get(url).then(({ data: res }) => {
.get(url) if (res.code !== 0) {
.then(({ data: res }) => { return this.$message.error(res.msg)
if (res.code !== 0) { }
return this.$message.error(res.msg)
}
this.$store.state.user.id = res.data.id this.$store.state.user.id = res.data.id
this.$store.state.user.realName = res.data.realName this.$store.state.user.realName = res.data.realName
this.$store.state.user.superAdmin = res.data.superAdmin this.$store.state.user.superAdmin = res.data.superAdmin
this.$store.state.user.gender = data.gender this.$store.state.user.gender = data.gender
localStorage.setItem('customerId', '') localStorage.setItem('customerId', '')
}) }).catch(() => { })
.catch(() => {})
}, },
// //
getWorkUserInfo() { getWorkUserInfo () {
const url = '/epmetuser/customerstaff/staffbasicinfo' const url = '/epmetuser/customerstaff/staffbasicinfo'
let params = {} let params = {
window.app.ajax.post( }
url, window.app.ajax.post(url, params,
params,
(data, rspMsg) => { (data, rspMsg) => {
this.$store.state.user = { ...data }
// this.$store.state.user.id = data.id this.$store.state.user.id = data.id
// this.$store.state.user.realName = data.realName this.$store.state.user.realName = data.realName
// this.$store.state.user.superAdmin = data.superAdmin this.$store.state.user.superAdmin = data.superAdmin
// this.$store.state.user.gender = data.gender this.$store.state.user.gender = data.gender
localStorage.setItem('roleList', data.roleList) localStorage.setItem('roleList', data.roleList)
localStorage.setItem('customerId', data.customerId) localStorage.setItem('customerId', data.customerId)
// this.$store.state.user.roleList = data.roleList // this.$store.state.user.roleList = data.roleList
// this.$store.state.user.customerId = data.customerId // this.$store.state.user.customerId = data.customerId
}, },
(rspMsg, data) => { (rspMsg, data) => {
this.$message.error(rspMsg) this.$message.error(rspMsg)
} })
)
// return this.$http.get(url).then(({ data: res }) => { // return this.$http.get(url).then(({ data: res }) => {
// if (res.code !== 0) { // if (res.code !== 0) {
// return this.$message.error(res.msg) // return this.$message.error(res.msg)
// } // }
// }).catch(() => { }) // }).catch(() => { })
} }
} }

375
epmet-oper-web/src/views/pages/loginWork.vue

@ -1,93 +1,141 @@
<template> <template>
<div class="g-app"> <div v-if="isShowLogin"
<div class="g-bd" v-if="isShowLogin || true"> class="aui-wrapper aui-page__login">
<div class="m-fm">
<div class="wrap">
<h2 class="title">{{ $t('brand.work') }}</h2>
<div class="fm">
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
status-icon
>
<div class="fm-item">
<div class="ico">
<img src="@/assets/img/login/zhanghao.png" alt="" />
</div>
<div class="input">
<input
type="text"
v-model="dataForm.phone"
placeholder="账号"
/>
</div>
</div>
<div class="fm-item">
<div class="ico">
<img src="@/assets/img/login/mima.png" alt="" />
</div>
<div class="input">
<input
type="password"
v-model="dataForm.password"
:placeholder="$t('login.password')"
/>
</div>
</div>
<div class="fm-captcha">
<div class="fm-item">
<div class="input">
<input
type="text"
v-model="dataForm.captcha"
placeholder="验证码"
/>
</div>
</div>
<div class="captcha">
<img :src="captchaPath" @click="getCaptcha()" />
</div>
</div>
<div class="fm-btn" @click="dataFormSubmitHandle()"> <div class="aui-content__wrapper">
{{ $t('login.title') }} <main class="aui-content">
</div> <div class="login-header">
<div class="hint">请使用小程序端的账号密码登录</div> <h2 class="login-brand">{{ $t('brand.work') }}</h2>
</el-form>
</div>
</div> </div>
</div> <div class="login-body">
<h3 class="login-title">{{ $t('login.title') }}</h3>
<el-form :model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
status-icon>
<!-- <el-form-item>
<el-select v-model="$i18n.locale"
class="w-percent-100">
<el-option v-for="(val, key) in i18nMessages"
:key="key"
:label="val._lang"
:value="key"></el-option>
</el-select>
</el-form-item> -->
<el-form-item prop="phone">
<el-input v-model="dataForm.phone"
placeholder="手机号">
<span slot="prefix"
class="el-input__icon">
<svg class="icon-svg"
aria-hidden="true">
<use xlink:href="#icon-user"></use>
</svg>
</span>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="dataForm.password"
type="password"
:placeholder="$t('login.password')">
<span slot="prefix"
class="el-input__icon">
<svg class="icon-svg"
aria-hidden="true">
<use xlink:href="#icon-lock"></use>
</svg>
</span>
</el-input>
</el-form-item>
<el-form-item prop="captcha">
<el-row :gutter="20">
<el-col :span="14">
<el-input v-model="dataForm.captcha"
:placeholder="$t('login.captcha')">
<span slot="prefix"
class="el-input__icon">
<svg class="icon-svg"
aria-hidden="true">
<use xlink:href="#icon-safetycertificate"></use>
</svg>
</span>
</el-input>
</el-col>
<el-col :span="10"
class="login-captcha">
<img :src="captchaPath"
@click="getCaptcha()">
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="dataFormSubmitHandle()"
class="w-percent-100">{{ $t('login.title') }}</el-button>
</el-form-item>
</el-form>
<div class="div_tip">
<p class="p_tip">
{{ '请使用小程序端的账号密码登录'}}
</p>
<div class="m-footer"> </div>
</div>
<div class="login-footer"> <div class="login-footer">
<p> <p>
<a href="" target="_blank">{{ $t('login.copyright') }}</a> <a href="https://demo.cloud.renren.io/renren-cloud"
target="_blank">{{ $t('login.demo') }}</a>
</p> </p>
<!-- 2020 © renren.io -->
<p><a href="https://www.renren.io/"
target="_blank">{{ $t('login.copyright') }}</a></p>
</div> </div>
</div> </main>
</div> </div>
<c-dialog :showFooter='false'
<c-dialog :title="'选择客户'"
:showFooter="false" :isNest="false"
:title="'选择客户'" :visible="diaVisible"
:isNest="false" :dialogHeight="0.8"
:visible="diaVisible" :width="30"
:dialogHeight="0.8" :top="'120px'"
:width="30" @cancel="diaCancel">
:top="'120px'"
@cancel="diaCancel"
>
<!-- <div class="div_total"> --> <!-- <div class="div_total"> -->
<div v-for="(item, index) in tableData" :key="index" class="div_row"> <div v-for="(item,index) in tableData"
<span @click="selectCustomer(item)" class="span_name">{{ :key=index
item.customerName class="div_row">
}}</span> <span @click="selectCustomer(item)"
class="span_name">{{item.customerName}}</span>
</div> </div>
<!-- </div> -->
<!-- <el-table v-loading="tableLoading"
:data="tableData"
border
style="width: 100%;">
<el-table-column prop="customerName"
label="客户名称"
header-align="left"
align="left"
width="300"></el-table-column>
<el-table-column label="操作"
fixed="right"
header-align="right"
align="right">
<template slot-scope="scope">
<el-button size="small"
@click="selectCustomer(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table> -->
</c-dialog> </c-dialog>
</div> </div>
</template> </template>
<script> <script>
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
import CDialog from '@c/CDialog' import CDialog from '@c/CDialog'
@ -95,11 +143,11 @@ import debounce from 'lodash/debounce'
import { messages } from '@/i18n' import { messages } from '@/i18n'
import { getUUID } from '@/utils' import { getUUID } from '@/utils'
import { Loading } from 'element-ui' // Loading import { Loading } from 'element-ui' // Loading
import JSEncrypt from 'jsencrypt' // import JSEncrypt from 'jsencrypt'//
let loading // let loading //
export default { export default {
data() { data () {
return { return {
pubKey: null, // pubKey: null, //
isShowLogin: true, isShowLogin: true,
@ -125,9 +173,11 @@ export default {
CDialog CDialog
}, },
computed: { computed: {
dataRule() { dataRule () {
return { return {
phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }], phone: [
{ required: true, message: '手机号不能为空', trigger: 'blur' }
],
password: [ password: [
{ required: true, message: '密码不能为空', trigger: 'blur' } { required: true, message: '密码不能为空', trigger: 'blur' }
], ],
@ -137,10 +187,10 @@ export default {
} }
} }
}, },
created() { created () {
// //
if (this.$route.query.platformToken) { if (this.$route.query.platformToken) {
this.isShowLogin = false this.isShowLogin = false;
this.getAutoLogin(this.$route.query.platformToken) this.getAutoLogin(this.$route.query.platformToken)
} else { } else {
this.getCaptcha() this.getCaptcha()
@ -148,31 +198,29 @@ export default {
this.getPubKey() this.getPubKey()
} }
}, },
mounted() { mounted () {
localStorage.removeItem('showHeader') localStorage.removeItem('showHeader');
}, },
methods: { methods: {
// //
getPubKey() { getPubKey () {
this.$http this.$http.post('/auth/govweb/getKey').then(({ data: res }) => {
.post('/auth/govweb/getKey') if (res.code !== 0) {
.then(({ data: res }) => { return this.$message.error(res.msg)
if (res.code !== 0) { }
return this.$message.error(res.msg)
}
this.pubKey = res.data // ; this.pubKey = res.data; // ;
}) }).catch(() => {
.catch(() => {}) })
}, },
// //
getCaptcha() { getCaptcha () {
this.dataForm.uuid = getUUID() this.dataForm.uuid = getUUID()
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/auth/login/captcha?uuid=${this.dataForm.uuid}` this.captchaPath = `${window.SITE_CONFIG['apiURL']}/auth/login/captcha?uuid=${this.dataForm.uuid}`
}, },
// //
dataFormSubmitHandle() { dataFormSubmitHandle () {
this.$refs['dataForm'].validate((valid, messageObj) => { this.$refs['dataForm'].validate((valid, messageObj) => {
if (!valid) { if (!valid) {
app.util.validateRule(messageObj) app.util.validateRule(messageObj)
@ -184,11 +232,10 @@ export default {
phone: this.dataForm.phone phone: this.dataForm.phone
} }
window.app.ajax.post( window.app.ajax.post(
url, url, params,
params,
(data, rspMsg) => { (data, rspMsg) => {
if (data.length === 0) {
// if (data.length === 0) {//
this.$message.error('账号不存在') this.$message.error('账号不存在')
this.endLoading() this.endLoading()
} else if (data.length === 1) { } else if (data.length === 1) {
@ -204,66 +251,65 @@ export default {
(rspMsg, data) => { (rspMsg, data) => {
this.endLoading() this.endLoading()
this.$message.error(rspMsg) this.$message.error(rspMsg)
} })
)
}) })
}, },
// //
getAutoLogin(platformToken) { getAutoLogin (platformToken) {
this.dataForm.thirdToken = platformToken this.dataForm.thirdToken = platformToken;
this.dataForm.platform = 'pyld' this.dataForm.platform = "pyld";
this.$http this.$http.post(`/auth/sso/oper/third/login`, this.dataForm).then(({ data: res }) => {
.post(`/auth/sso/oper/third/login`, this.dataForm) if (res.code !== 0) {
.then(({ data: res }) => { if (res.code == 8302) {
if (res.code !== 0) {
if (res.code == 8302) {
return this.$message.error(res.msg)
}
return this.$message.error(res.msg) return this.$message.error(res.msg)
} }
localStorage.setItem('customerId', res.data.customerId) return this.$message.error(res.msg)
localStorage.setItem('userType', 'work') }
localStorage.setItem('showHeader', '0') localStorage.setItem('customerId', res.data.customerId)
Cookies.set('token', res.data.token) localStorage.setItem('userType', 'work')
this.$router.replace({ name: 'home' }) localStorage.setItem('showHeader', '0')
}) Cookies.set('token', res.data.token)
.catch(() => {}) this.$router.replace({ name: 'home' })
}).catch(() => {
})
// epmet-ext9.elinkservice.cn/platform-admin // epmet-ext9.elinkservice.cn/platform-admin
}, },
// //
selectCustomer(row) { selectCustomer (row) {
localStorage.setItem('customerId', row.customerId) localStorage.setItem('customerId', row.customerId)
localStorage.setItem('customerName', row.customerName) localStorage.setItem('customerName', row.customerName)
this.startLoading() this.startLoading()
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/auth/govweb/login' // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/auth/govweb/login'
const url = '/auth/govweb/login' const url = '/auth/govweb/login'
this.dataForm.customerId = row.customerId this.dataForm.customerId = row.customerId
let param = {} let param = {};
Object.assign(param, this.dataForm) Object.assign(param, this.dataForm);
param.password = this.encryptedData(this.pubKey, this.dataForm.password) param.password = this.encryptedData(this.pubKey, this.dataForm.password);
this.$http this.$http.post(url, param).then(({ data: res }) => {
.post(url, param) if (res.code !== 0) {
.then(({ data: res }) => { this.getCaptcha()
if (res.code !== 0) { return this.$message.error(res.msg)
this.getCaptcha() }
return this.$message.error(res.msg) this.diaVisible = false
}
this.diaVisible = false
localStorage.setItem('userType', 'work') localStorage.setItem('userType', 'work')
Cookies.set('token', res.data.token) Cookies.set('token', res.data.token)
this.$router.replace({ name: 'indexWork' }).catch(() => {}) this.$router.replace({ name: 'home' }).catch(() => { })
}) }).catch(() => {
.catch(() => {}) })
this.endLoading() this.endLoading()
}, },
// //
diaCancel() { diaCancel () {
this.diaVisible = false this.diaVisible = false
}, },
// //
startLoading() { startLoading () {
loading = Loading.service({ loading = Loading.service({
lock: true, // lock: true, //
text: '正在加载……', // text: '正在加载……', //
@ -271,23 +317,64 @@ export default {
}) })
}, },
// //
endLoading() { endLoading () {
// clearTimeout(timer); // clearTimeout(timer);
if (loading) { if (loading) {
loading.close() loading.close()
} }
}, },
// //
encryptedData(key, data) { encryptedData (key, data) {
// JSEncrypt // JSEncrypt
let encryptor = new JSEncrypt() let encryptor = new JSEncrypt();
// //
encryptor.setPublicKey(key) encryptor.setPublicKey(key);
// //
return encryptor.encrypt(data) return encryptor.encrypt(data);
} }
} }
} }
</script> </script>
<style scoped>
.div_tip {
float: left;
}
.p_tip {
color: rgb(255, 80, 80);
}
.div_total {
height: 80%;
width: 100%;
text-align: center;
}
.el-dialog__body {
width: 500px;
padding: 0px 0px 0px 20px;
}
.div_row {
height: 50px;
text-align: center;
line-height: 50px;
<style lang="scss" src="@/assets/scss/pages/loginWork.scss"></style> /* width: 100px; */
/* background-color: rgb(241, 241, 241); */
}
.div_row:hover {
color: rgb(2, 119, 173);
font-weight: bold;
text-decoration: underline;
}
.i_icon {
width: 15px;
height: 15px;
margin-right: 10px;
float: left;
}
.span_name {
font-size: 18px;
cursor: pointer;
/* color: rgb(37, 156, 235); */
}
</style>

Loading…
Cancel
Save