first commit
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><a @click.prevent="">首页</a></el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-for="item in breadcrumbMenus" :key="item.id">
|
||||
{{ item.name }}
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "HeaderBreadCrumb",
|
||||
store,
|
||||
computed: {
|
||||
pcModuleMenus() {
|
||||
return this.$store.getters.pcModules
|
||||
},
|
||||
fullMenus() {
|
||||
return this.$store.getters.fullMenus
|
||||
},
|
||||
openedMenus() {
|
||||
return this.$store.state.openedMenus
|
||||
},
|
||||
|
||||
breadcrumbMenus() {
|
||||
if (this.openedMenus && this.openedMenus.length > 0) {
|
||||
const breadcrumbMenus = []
|
||||
this.openedMenus.forEach((menuId) => {
|
||||
const menu = this.fullMenus.find((m) => m.id === menuId)
|
||||
if (menu) {
|
||||
breadcrumbMenus.push({
|
||||
name: menu.name,
|
||||
href: menu.href,
|
||||
id: menu.id,
|
||||
type: menu.type
|
||||
})
|
||||
}
|
||||
})
|
||||
return breadcrumbMenus
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="appCenterPopover">
|
||||
<el-popover width="450" placement="top-start" trigger="hover">
|
||||
<el-card shadow="never" class="appCenterCard">
|
||||
<template #header>
|
||||
<el-row type="flex" justify="space-between">
|
||||
<div>
|
||||
<el-link :underline="false">平台</el-link>
|
||||
</div>
|
||||
</el-row>
|
||||
</template>
|
||||
<el-row :gutter="20" v-if="pcModuleMenus && pcModuleMenus.length > 0">
|
||||
<el-col v-for="item in pcModuleMenus" :key="item.id" :span="8" style="margin-bottom: 5px">
|
||||
<div
|
||||
class="entranceDetail"
|
||||
:class="{ 'entranceDetail-selected': item.id === activeModuleId }"
|
||||
@click="enterEntranceModules(item)"
|
||||
>
|
||||
<div class="entranceIcon">
|
||||
<el-image :src="item.icon" style="height: 50px; width: 50px" fit="cover">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</div>
|
||||
<a href="javascript:">{{ item.name }}</a>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<span href="javascript:" slot="reference" style="font-size: 16px; font-weight: bold">
|
||||
<i class="el-icon-menu"></i>
|
||||
{{ activeModuleName }}
|
||||
<i class="el-icon-sort"></i>
|
||||
<span>切换平台</span>
|
||||
</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "HeaderMenuModule",
|
||||
store,
|
||||
computed: {
|
||||
activeModuleId() {
|
||||
return this.$store.state.activeMenuModuleId
|
||||
},
|
||||
activeModuleName() {
|
||||
if (this.pcModuleMenus) {
|
||||
return this.pcModuleMenus.find((m) => m.id === this.activeModuleId)?.name
|
||||
}
|
||||
return null
|
||||
},
|
||||
pcModuleMenus() {
|
||||
return this.$store.getters.pcModules
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
enterEntranceModules(item) {
|
||||
this.$store.commit("setActiveMenuModuleId", item.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.appCenterPopover {
|
||||
padding: 0 !important;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.el-popover__reference{
|
||||
font-weight: normal!important;
|
||||
}
|
||||
|
||||
.appCenterCard .el-card__header {
|
||||
padding: 8px 10px !important;
|
||||
}
|
||||
|
||||
:deep(.entranceDetail) {
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
color: #606060;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.entranceDetail:hover,
|
||||
.entranceDetail-selected {
|
||||
background-color: #e5edff;
|
||||
color: #3177fd;
|
||||
}
|
||||
|
||||
.appCenterCard .entranceIcon {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 8px auto 6px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.appCenterCard .entranceDetail a {
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="ele-notice-group">
|
||||
<el-popover v-model="msgPopover" placement="bottom" width="300" trigger="click" popper-class="ele-notice-pop" style="width: 300px">
|
||||
<div class="ele-notice-list ele-scrollbar-mini">
|
||||
<div class="ele-notice-item">
|
||||
<div
|
||||
v-if="messages.length > 0"
|
||||
class="ele-cell ele-notice-item-wrapper"
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
@click="readMsg(msg, 'system')"
|
||||
>
|
||||
<i class="el-icon-s-comment ele-notice-item-icon"></i>
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-elip">{{ msg.title }}</div>
|
||||
<div class="ele-text-secondary ele-elip">
|
||||
{{ $moment(msg.sendAt).format("YYYY-MM-DD HH:mm") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-if="messages.length === 0" description="暂无数据"></el-empty>
|
||||
<div class="el-divider el-divider--horizontal"><!----></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell ele-notice-actions">
|
||||
<a @click.prevent="viewMore" class="ele-cell-content">查看更多</a>
|
||||
</div>
|
||||
<el-badge :value="messages.length" slot="reference" :style="{ animation: messages.length > 0 ? 'bell-shake 0.5s infinite' : '' }">
|
||||
<i class="el-icon-bell" style="color: var(--color-white)"></i>
|
||||
</el-badge>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "HeaderMessage",
|
||||
store,
|
||||
data() {
|
||||
return {
|
||||
tabActive: "system",
|
||||
unReadNum: {},
|
||||
msgPopover: false,
|
||||
messages: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totalMsgNum() {
|
||||
// return Object.keys(this.unReadNum).reduce((accumulator, key) => {
|
||||
// return accumulator + this.unReadNum[key]
|
||||
// }, 0)
|
||||
return 0
|
||||
}
|
||||
// messages() {
|
||||
// return this.$store.state.messages
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
removeSystemMsg() {
|
||||
this.$message.warning("暂不支持清空消息")
|
||||
},
|
||||
//获取未读消息
|
||||
getUnReadNum() {
|
||||
this.$axios.post("/platform/sys/msg/user/unread_num").then((resp) => {
|
||||
if (resp.code === 0) {
|
||||
this.unReadNum = resp.data
|
||||
}
|
||||
})
|
||||
},
|
||||
//读取消息
|
||||
readMsg(msg, type) {
|
||||
this.msgPopover = false
|
||||
this.$store.dispatch("pjaxRoute", "/platform/sys/msg/user/all")
|
||||
},
|
||||
viewMore() {
|
||||
this.msgPopover = false
|
||||
this.$store.dispatch("pjaxRoute", "/platform/sys/msg/user/all")
|
||||
}
|
||||
},
|
||||
created() {
|
||||
webSocketPubSub.subscribe("innerMsg", (data) => {
|
||||
console.info("ws:收到系统提醒消息:", data)
|
||||
this.messages = data.list
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-notice-group .el-empty {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.ele-notice-group .el-empty__image {
|
||||
width: 116px !important;
|
||||
}
|
||||
|
||||
@keyframes bell-shake {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<div class="ele-admin-tabs" id="history-menu-tabs">
|
||||
<el-tabs v-model="activeName" tab-position="top" @tab-click="tabClick">
|
||||
<el-tab-pane name="/platform/home">
|
||||
<span slot="label">
|
||||
<i class="el-icon-house" @click.stop="close('/platform/home')"></i>
|
||||
首页
|
||||
</span>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane v-for="item in menuTabs" :label="item.name" :name="item.id" :key="item.id">
|
||||
<span slot="label">
|
||||
{{ item.name }}
|
||||
<i class="el-icon-close" @click.stop="close(item)"></i>
|
||||
</span>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-dropdown class="ele-admin-tabs-drop" size="small" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
<i class="el-icon-arrow-down el-dropdown-selfdefine"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="closeOther" icon="el-icon-remove-outline">关闭其他</el-dropdown-item>
|
||||
<el-dropdown-item command="closeAll" icon="el-icon-circle-close">关闭全部</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "HeaderTabPage",
|
||||
store,
|
||||
data() {
|
||||
return {
|
||||
activeName: "/platform/home"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeMenuIndex() {
|
||||
return this.$store.state.activeMenuIndex
|
||||
},
|
||||
fullMenus() {
|
||||
return this.$store.getters.fullMenus
|
||||
},
|
||||
historyMenuIds() {
|
||||
return this.$store.getters.historyMenuIds
|
||||
},
|
||||
menuTabs() {
|
||||
if (this.historyMenuIds && this.historyMenuIds.length > 0) {
|
||||
return this.fullMenus.filter((menu) => this.historyMenuIds.includes(menu.id))
|
||||
}
|
||||
return []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabClick({ name }) {
|
||||
//首页的因为没有菜单直接跳
|
||||
if (name === "/platform/home") {
|
||||
this.$store.dispatch("pjaxRoute", "/platform/home")
|
||||
return
|
||||
}
|
||||
const menu = this.fullMenus.find((menu) => menu.id === name)
|
||||
this.$store.dispatch("pjaxRoute", menu.href)
|
||||
},
|
||||
close(item) {
|
||||
this.$store.commit("removeHistoryMenuId", item.id)
|
||||
if (this.historyMenuIds.length === 0) {
|
||||
this.$store.dispatch("pjaxRoute", "/platform/home")
|
||||
return
|
||||
}
|
||||
const historyMenuId = this.historyMenuIds[this.historyMenuIds.length - 1]
|
||||
const menu = this.fullMenus.find((menu) => menu.id === historyMenuId)
|
||||
this.$store.dispatch("pjaxRoute", menu.href)
|
||||
},
|
||||
handleCommand(command) {
|
||||
if (command === "closeOther") {
|
||||
const otherMenuIds = this.historyMenuIds.filter((id) => id !== this.activeMenuIndex)
|
||||
this.$store.commit("removeHistoryMenuIds", otherMenuIds)
|
||||
} else if (command === "closeAll") {
|
||||
this.$store.commit("clearHistoryMenuIds")
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeMenuIndex: {
|
||||
handler: function (val) {
|
||||
if (val) {
|
||||
this.activeName = this.activeMenuIndex
|
||||
} else {
|
||||
this.activeName = "/platform/home"
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit("addHistoryMenuId", this.activeMenuIndex)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ele-admin-tabs {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
background: var(--color-white);
|
||||
-webkit-box-shadow: var(--header-light-shadow);
|
||||
box-shadow: var(--header-light-shadow);
|
||||
padding: 0 40px 0 15px;
|
||||
z-index: 99;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ele-admin-tabs > .el-tabs {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__item {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: var(--color-text-secondary);
|
||||
-webkit-transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
padding: 0 15px !important;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__item.is-closable {
|
||||
padding-right: 8px !important;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__item:after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__item:hover {
|
||||
color: var(--color-text-primary);
|
||||
background: var(--header-tool-hover-bg);
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__item.is-active {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-1);
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__item.is-active:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__item .el-icon-close {
|
||||
font-size: 13px;
|
||||
margin-left: 4px;
|
||||
color: var(--color-text-secondary);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__item .el-icon-close:before {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__item .el-icon-close:hover {
|
||||
color: #fff;
|
||||
background: var(--color-danger);
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__item:focus.is-active.is-focus:not(:active) {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__item.sortable-ghost {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__active-bar,
|
||||
.ele-admin-tabs .el-tabs__content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__nav-wrap {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__nav-wrap:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__nav-wrap.is-scrollable {
|
||||
padding: 0 39px 0 40px;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__nav-next,
|
||||
.ele-admin-tabs .el-tabs__nav-prev {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 16px;
|
||||
-webkit-transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .el-tabs__nav-next:hover,
|
||||
.ele-admin-tabs .el-tabs__nav-prev:hover {
|
||||
color: var(--color-text-primary);
|
||||
background: var(--header-tool-hover-bg);
|
||||
}
|
||||
|
||||
.ele-admin-tabs .ele-admin-tabs-drop {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .ele-admin-tabs-drop .el-icon-arrow-down {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 16px;
|
||||
-webkit-transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .ele-admin-tabs-drop .el-icon-arrow-down:hover {
|
||||
color: var(--color-text-primary);
|
||||
background: var(--header-tool-hover-bg);
|
||||
}
|
||||
|
||||
.ele-admin-tabs .ele-admin-tab-context-trigger {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ele-admin-tabs .ele-admin-tab-context-menu {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<div class="ele-admin-header-avatar el-dropdown-selfdefine">
|
||||
<span class="el-avatar el-avatar--circle">
|
||||
<img
|
||||
v-if="!$store.state.user.sex || $store.state.user.sex === '男'"
|
||||
src="/assets/platform/img/home/avatar_boy.png"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
<img v-else alt="" src="/assets/platform/img/home/avatar_girl.png" />
|
||||
</span>
|
||||
<span class="hidden-xs-only" style="color: var(--color-white)">
|
||||
{{ $store.state.user.username }}
|
||||
</span>
|
||||
<i class="el-icon-arrow-down" style="color: var(--color-white)"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
|
||||
<el-dropdown-item command="signature">我的签名</el-dropdown-item>
|
||||
<el-dropdown-item command="logout">退出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dialog :visible.sync="memberInfoDialogVisible" title="我的信息" width="70%" append-to-body>
|
||||
<user-info ref="userInfoRef"></user-info>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="signatureDialogVisible" title="我的电子签名" width="35%" append-to-body>
|
||||
<div class="flx">
|
||||
<div v-if="!showSignature" class="p10" style="width: calc(100% - 125px)">
|
||||
<el-image style="width: 100%; height: 189px; border: 1px dashed #000" :src="userSignatureUrl">
|
||||
<template slot="error">
|
||||
<div style="height: 100%; display: flex; justify-content: center; align-items: center">暂无签名信息</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="flx-center-center" style="flex-direction: column">
|
||||
<qrcode :options="{ width: 126 }" :value="signatureAddress" class="signature-qrcode"></qrcode>
|
||||
<el-button icon="el-icon-refresh" size="small" type="primary" @click="getUserSignature(true)">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-alert title="扫描二维码可重新签名，手机上签名成功后可点击刷新查看。" type="success"></el-alert>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "HeaderUserAvatar",
|
||||
store,
|
||||
components: {
|
||||
"user-info": httpVueLoader("/components/module/userInfo/index.vue")
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
memberInfoDialogVisible: false,
|
||||
showSignature: false,
|
||||
userSignatureUrl: null,
|
||||
signatureDialogVisible: false,
|
||||
signatureAddress: window.location.origin + "/platform/signature/scanPcCode?origin=user",
|
||||
userInfoDialogVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCommand(command) {
|
||||
if (command === "logout") {
|
||||
window.location.href = base + "/platform/login/logout"
|
||||
} else if (command === "userInfo") {
|
||||
this.memberInfoDialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.userInfoRef.onOpen(this.$store.state.user.id)
|
||||
})
|
||||
} else if (command === "signature") {
|
||||
this.signatureDialogVisible = true
|
||||
this.getUserSignature()
|
||||
console.log(this.signatureAddress)
|
||||
}
|
||||
},
|
||||
getUserSignature(isRefresh = false) {
|
||||
this.$axios.post("/platform/signature/get").then((res) => {
|
||||
if (res.code === 0) {
|
||||
if (isRefresh) {
|
||||
this.$message.success("刷新成功")
|
||||
} else {
|
||||
if (!res.data || !res.data.signature) {
|
||||
this.$message.warning("未获取到签名信息")
|
||||
}
|
||||
}
|
||||
this.userSignatureUrl = res.data && res.data.signature
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
webSocketPubSub.subscribe("pc-scan-code-manage-signature", (data) => {
|
||||
console.info("ws:收到pc端我的电子签名扫描二维码返回结果:", data)
|
||||
this.userSignatureUrl = data.url
|
||||
this.$message.success("获取成功")
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="ele-admin-sidebar-menus">
|
||||
<el-scrollbar>
|
||||
<el-menu unique-opened :default-active="activeMenuIndex" :default-openeds="openedMenus" @select="menuSelect" class="ele-menu-dark">
|
||||
<menu-list :menus="leftMenus" :depth="0" :key="$store.state.activeMenuModuleId"></menu-list>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "SideBarLeftMenu",
|
||||
store,
|
||||
components: {
|
||||
"menu-list": {
|
||||
name: "menu-list",
|
||||
template:
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<template v-for="(item, index) in menus">
|
||||
<el-submenu :index="item.id" v-if="item.children && item.children.length > 0">
|
||||
<template #title>
|
||||
<svg-icon :name="item.icon" v-if="item.icon" :size="18"></svg-icon>
|
||||
<i v-else class="el-icon-paperclip"></i>
|
||||
<span>{{ item.name }}</span>
|
||||
</template>
|
||||
<menu-list :menus="item.children" :depth="depth + 1" />
|
||||
</el-submenu>
|
||||
<el-menu-item :index="item.id" v-else>
|
||||
<a :href="item.href" data-pjax>
|
||||
<svg-icon :name="item.icon" v-if="item.icon" :size="18"></svg-icon>
|
||||
<i v-else :class="item.icon ? item.icon : 'el-icon-menu'"></i>
|
||||
<span>{{ item.name }}</span>
|
||||
</a>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</div>
|
||||
`,
|
||||
props: ["menus", "depth"]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
//模块
|
||||
pcModuleMenus() {
|
||||
return this.$store.getters.pcModules
|
||||
},
|
||||
//左侧菜单 根据模块id动态变化
|
||||
leftMenus() {
|
||||
const activeMenuModuleId = this.$store.state.activeMenuModuleId
|
||||
if (activeMenuModuleId) {
|
||||
if (this.pcModuleMenus) {
|
||||
return this.pcModuleMenus.find((module) => module.id === activeMenuModuleId)?.menus
|
||||
}
|
||||
return []
|
||||
}
|
||||
return []
|
||||
},
|
||||
//当前选中菜单
|
||||
activeMenuIndex() {
|
||||
return this.$store.state.activeMenuIndex
|
||||
},
|
||||
//当前打开的菜单 数组 包含所有父菜单
|
||||
openedMenus() {
|
||||
return this.$store.state.openedMenus
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//点击菜单
|
||||
menuSelect(index, indexPath) {
|
||||
this.$store.commit("setActiveMenuIndex", index)
|
||||
this.$store.commit("setOpenedMenus", indexPath)
|
||||
this.$store.commit("addHistoryMenuId", index)
|
||||
},
|
||||
onResize() {
|
||||
if (window.innerWidth < 768) {
|
||||
$("#ele-admin-header.ele-admin-header .ele-admin-header-tool .ele-admin-header-tool-item.collapse-menu")[0].style.display = "flex"
|
||||
document.querySelector("body >div > div.ele-admin-layout").classList.add("ele-admin-collapse")
|
||||
} else {
|
||||
$("#ele-admin-header.ele-admin-header .ele-admin-header-tool .ele-admin-header-tool-item.collapse-menu")[0].style.display = "none"
|
||||
document.querySelector("body >div > div.ele-admin-layout").classList.remove("ele-admin-collapse")
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch("pjaxRoute", window.location)
|
||||
},
|
||||
mounted() {
|
||||
// 监听窗口大小 并且使用节流
|
||||
this.onResize()
|
||||
this.handleResize = MinDash.throttle(this.onResize, 500)
|
||||
$(window).resize(() => {
|
||||
this.handleResize()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
$(window).off("resize", this.handleResize)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.menu-link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user