Files
zhgh_hhu/src/main/resources/views/layouts/platform.html
T
2026-03-12 15:42:06 +08:00

695 lines
29 KiB
HTML

<!DOCTYPE html>
<html lang="${lang,escape}">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta name="description" content="${AppName!}">
<title>${AppName!}</title>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="${base!}/assets/platform/plugins/myframe/css/myframe.css">
<link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="${base!}/assets/platform/fonts/themify-icons.css">
<link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css">
<link rel="stylesheet" href="${base!}/assets/platform/css/common.css">
<link rel="stylesheet" href="${base!}/assets/platform/css/main.css?v=1.0.0">
<link rel="stylesheet" href="${base!}/assets/platform/css/elmain.css">
<link rel="stylesheet" href="${base!}/assets/platform/css/panel.css">
<link rel="stylesheet" href="${base!}/assets/platform/css/common.css?v=1.0.3">
<link rel="stylesheet" href="${base!}/assets/platform/plugins/wangeditor/wangEditor.css">
<link rel="stylesheet" type="text/css" href="${base!}/assets/platform/plugins/viewer/viewer.min.css">
<link rel="stylesheet" href="${base!}/assets/platform/plugins/wp-upload-vue/css/wpupload.css">
<link rel="stylesheet" href="${base!}/assets/platform/plugins/wp-upload-vue/font/iconfont.css">
<link rel="stylesheet" href="${base!}/assets/platform/plugins/video/css/video-js.min.css">
<link rel="stylesheet" href="${base!}/assets/platform/css/vivify.min.css">
<script>
window._AMapSecurityConfig = {
securityJsCode: '4fa1e1aeabba7eb9518129cf57ab17c1'
}
</script>
<!-- import Vue before Element -->
<script src="${base!}/assets/platform/plugins/vue/vue.min.js"></script>
<script src="${base!}/assets/platform/plugins/vuex/vuex.js"></script>
<script src="${base!}/assets/platform/plugins/vuex-persistedstate/vuex-persistedstate.umd.js"></script>
<!-- vue-count-to -->
<script src="${base!}/assets/platform/plugins/vue-count-to/vue-count-to.min.js"></script>
<!-- wpupload -->
<script type="text/javascript" src="${base!}/assets/platform/plugins/wp-upload-vue/js/axios.min.js"></script>
<script type="text/javascript" src="${base!}/assets/platform/plugins/wp-upload-vue/font/iconfont.js"></script>
<script type="text/javascript" src="${base!}/assets/platform/plugins/wp-upload-vue/js/wpupload.js"></script>
<!-- import JavaScript -->
<script src="${base!}/assets/platform/plugins/element-ui/lib/index.js"></script>
<script src="${base!}/assets/platform/plugins/element-ui/lib/i18n/${lang,escape}.js"></script>
<script src="${base!}/assets/platform/plugins/jquery/jquery-1.11.1.min.js"></script>
<script src="${base!}/assets/platform/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!--后面就改这一段吧-->
<script src="${base!}/assets/platform/js/utils.js"></script>
<script src="${base!}/assets/platform/plugins/dd3s/dd3s.js"></script>
<script src="${base!}/assets/platform/js/jsz.js"></script>
<script src="${base!}/assets/platform/plugins/video/js/video.min.js"></script>
<!--g2-->
<script src="/assets/platform/plugins/g2/g2.min.js?v=4.1.9"></script>
<script src="/assets/platform/plugins/g2/data-set.js"></script>
<script src="/assets/platform/plugins/g2/g2plot.js?v=1.0.0"></script>
<!--echars-->
<script src="${base!}/assets/platform/plugins/echarts/echarts.min.js"></script>
<script src="${base!}/assets/platform/plugins/echarts/infographic.js"></script><!--主题-->
<script src="${base!}/assets/platform/plugins/echarts/westeros.js"></script><!--主题-->
<script src="${base!}/assets/platform/plugins/echarts/walden.js"></script><!--主题-->
<script src="${base!}/assets/platform/plugins/echarts/macarons.js"></script><!--主题-->
<script src="${base!}/assets/platform/plugins/echarts/echarts.js"></script>
<script src="${base!}/assets/platform/plugins/echarts/langZH.js"></script>
<!-- <script src="https://cdn.staticfile.org/echarts/5.2.2/echarts.js"></script>-->
<!-- <script src="https://cdn.staticfile.org/echarts/5.2.2/i18n/langZH.js"></script>-->
<script src="${base!}/assets/platform/module/mixins/initTableMixins.js?v=1.0.3"></script>
<script src="${base!}/assets/platform/module/mixins/styleMixin.js"></script>
<script src="${base!}/assets/platform/js/includeModel.js?v=1.0.5"></script>
<script src="${base!}/assets/platform/js/component.js?v=1.0.2"></script>
<script src="${base!}/assets/platform/js/v.js?v=1.0.5"></script>
<script src="${base!}/assets/platform/plugins/wangeditor/wangEditor.js"></script>
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@4.6.15/dist/wangEditor.min.js"></script>-->
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=57f0d098ba1b881ecc436c4cfd23bbbf&plugin=AMap.PolyEditor,AMap.PlaceSearch"></script>
<!--viewer-->
<script src="${base!}/assets/platform/plugins/viewer/viewer.min.js"></script>
<script src="${base!}/assets/platform/plugins/viewer/jquery-viewer.min.js"></script>
<script src="${base!}/assets/platform/plugins/vue-loader/httpVueLoader.js"></script>
<script src="${base!}/assets/platform/js/gh.js"></script>
<script src="${base!}/assets/platform/plugins/vue-qrcode/vue-qrcode.min.js"></script>
<!-- pjax是异步加载html片段的工具,模拟前端路由机制 -->
<script src="${base!}/assets/platform/plugins/pjax/jquery.pjax.js"></script>
<script src="${base!}/assets/platform/plugins/myframe/js/myframe.js"></script>
<!-- Array数组增加findIndex等方法,TreeTable用得到,兼容IE8 -->
<script src="${base!}/assets/platform/plugins/polyfill/polyfill.js"></script>
<!-- 时间日期处理工具类 -->
<script src="${base!}/assets/platform/plugins/moment/moment.min.js"></script>
<!-- 浏览器通知 -->
<script src="${base!}/assets/platform/plugins/push/push.min.js"></script>
<script src="${base!}/assets/platform/plugins/xlsx/xlsx.full.min.js"></script>
<script src="${base!}/assets/platform/js/main.js?v=1.0.1"></script>
<script src="${base!}/assets/platform/js/offscreen.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>-->
<script src="${base!}/assets/platform/plugins/vue-charts/echartTheme.js"></script>
<link rel="stylesheet" href="${base!}/assets/platform/css/skins/palette.3.css" id="skin">
<!--拖拽js-->
<script src="${base!}/assets/platform/js/directive/v-sticky.js"></script>
<script src="${base!}/assets/platform/js/jquery.qrcode.min.js"></script>
<script src="${base!}/assets/platform/js/jr-qrcode.js"></script>
<!-- <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.6/theme-chalk/index.min.css">-->
<!-- <script src="https://cdn.staticfile.org/element-ui/2.15.6/index.min.js"></script>-->
<!--#
var isLeftMenu = false;
if(@shiro.getPrincipalProperty('menuTheme') == "top"){
isLeftMenu = false;
}else if(@shiro.getPrincipalProperty('menuTheme') == "left"){
isLeftMenu = true;
}
#-->
<script type="text/javascript">
var base = "${base!}";
var loginPjax = "${@shiro.getPrincipalProperty('loginPjax')}";
const AppMapCenterPointX = "${config.AppMapCenterPointX!}";
const AppMapCenterPointY = "${config.AppMapCenterPointY!}";
var isLeftMenu = "${isLeftMenu!}";
var isDisPlayCode = "${config.isDisPlayCode!}" === 'true'
ELEMENT.locale(ELEMENT.lang['${lang,escape}']);
// Vue.component('v-chart', VueECharts)
// VueECharts.registerTheme('mine', echartsTheme)
const APP_DOMAIN = "${AppDomain!}"
const FILE_DOMAIN = "${AppFileDomain!}"
Vue.component('vuedraggable', window.vuedraggable)
Vue.component('guava', httpVueLoader('/components/plugins/Guava.vue'))
Vue.component('sign', httpVueLoader('/components/sign/sign.vue?v=2.0.0'))
Vue.component('file-upload', httpVueLoader('/components/plugins/FileUpload.vue'))
Vue.component('text-editor', httpVueLoader('/components/plugins/textEditor.vue'))
Vue.component('border-table', httpVueLoader('/components/plugins/BorderTable.vue'))
Vue.component('image-upload', httpVueLoader('/components/plugins/ImageUpload.vue'))
Vue.component('custom-message', httpVueLoader('/components/plugins/CustomMessage.vue'))
</script>
<script>
const viewImage = function (filepath) {
let image = new Image();
image.src = APP_DOMAIN + FILE_STREAM_PREVIEW_ADDRESS + '?id=' + filepath;
let viewer = new Viewer(image);
viewer.show();
};
window.viewImage = viewImage;
Vue.prototype.$viewImage = viewImage
</script>
<script>
Vue.use(httpVueLoader)
Vue.component(VueQrcode.name, VueQrcode)
</script>
<script>
//防止用户快速重复点击造成数据混乱 提供vue指令和js节流函数两种方式
//控制此元素在一定时间内是否可成为鼠标的点击目标对象
Vue.directive('throttle', {
inserted(el, binding) {
el.addEventListener('click', () => {
if (el.style.pointerEvents !== 'none') {
el.style.pointerEvents = 'none'
window.setTimeout(() => {
el.style.pointerEvents = ''
}, 1200)
}
})
}
})
function getQueryVariable(variable) {
let query = window.location.search.substring(1);
let vars = query.split("&");
for (let i = 0; i < vars.length; i++) {
let pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return '';
}
//函数在一定时间内只会触发一次 FN.ABC
function throttle(func, wait) {
let previous = 0;
return function () {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}
}
</script>
<script>
const hasProposalAdminRole = "${@shiro.hasAnyRoles('sysadmin','jdh10')}" === 'true'
</script>
<script>
window.sessionStorage.setItem('moduleMenus', JSON.stringify(${json(@shiro.userModuleMenus())}))
window.sessionStorage.setItem('menus', JSON.stringify(${json(@shiro.getPrincipalProperty('menus'))}))
window.store = new Vuex.Store({
plugins: [
createPersistedState({
key: "zhgh-vuex",
paths: ["openedMenus", "activeMenuIndex", "activeMenuModuleId"],
storage: window.sessionStorage
})
],
state: {
//当前激活的菜单
activeMenuIndex: null,
//激活的菜单模块
activeMenuModuleId: null,
moduleMenus: JSON.parse(window.sessionStorage.getItem("moduleMenus")),
menus: JSON.parse(window.sessionStorage.getItem("menus"))
},
mutations: {
//设置激活的菜单
setActiveMenuIndex(state, payload) {
state.activeMenuIndex = payload
},
//设置激活的菜单模块
setActiveMenuModuleId(state, payload) {
state.activeMenuModuleId = payload
},
//设置打开的菜单
setOpenedMenus(state, payload) {
state.openedMenus = payload
},
},
actions: {
pjaxRoute({commit, dispatch, state, getters}, href) {
const {pathname, search} = new URL(href, window.location.origin)
const matchMenu = state.menus.find(v => v.href === pathname)
if (!matchMenu) {
commit("setActiveMenuIndex", null)
commit("setOpenedMenus", [])
if (!state.activeModuleId && state.moduleMenus) {
commit("setActiveMenuModuleId", state.moduleMenus[0].id)
}
pjaxReplace(pathname === "/platform/home" ? pathname : pathname)
return
}
//拷贝一份
let cloneMenu = JSON.parse(JSON.stringify(matchMenu))
//找出所有父菜单包括自己
let parentMenus = []
while (cloneMenu && cloneMenu.parentId) {
cloneMenu = state.menus.find((m) => m.id === cloneMenu.parentId)
if (cloneMenu) {
parentMenus.unshift(cloneMenu)
}
}
parentMenus.push(matchMenu)
//获取到该菜单所属的模块
const moduleId = state.moduleMenus.find(v => v.containsMenu.includes(parentMenus[0].id))?.id
//判断下是否跨模块跳转
if (moduleId !== state.activeMenuModuleId) {
commit("setActiveMenuModuleId", moduleId)
}
Vue.nextTick(() => {
//重新设置展开菜单
commit("setOpenedMenus", parentMenus.map((menu) => menu.id))
//设置当前激活菜单
commit("setActiveMenuIndex", matchMenu.id)
//跳转
pjaxReplace(matchMenu.href ? matchMenu.href + (search || "") : "/platform/home")
})
}
}
})
</script>
<style>
#app {
background-color: rgb(240, 242, 245);
height: 100%;
overflow-y: auto;
}
.w-e-toolbar {
z-index: 1 !important;
}
.w-e-text-container {
z-index: 0 !important;
}
.viewer-container {
z-index: 9999999999;
}
.header {
position: relative;
}
.app .header-fixed + .layout {
/*padding-top: 0;*/
}
.el-table-container {
padding-top: 0;
}
.layout {
max-height: calc(100vh - 50px);
}
.sidebar {
width: 250px;
}
.small-menu .brand {
width: 70px !important;
}
input[type="file"] {
display: none
}
.pointer {
cursor: pointer;
}
.space-around {
justify-content: space-around;
}
.space-between {
justify-content: space-between;
}
#app > .transition-row {
min-height: calc(100vh - 50px);
}
#app > .transition-row > .transition-item {
width: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0
}
</style>
</head>
<body>
<div class="gallery-loader" style="background-color:transparent;">
<div class="loader"></div>
</div>
<div id="mainApp" class="app">
<header class="header header-fixed navbar" id="headerNavbar">
<div class="brand">
<a href="javascript:;" data-pjax class="navbar-brand" @click="goHome">
<img src="${base!}/assets/platform/img/logo.png" alt=""
style="width: 60%;height: 80%"
class="o_img <!--#if(!@shiro.getPrincipalProperty('loginSidebar')){#-->o_hide<!--#}#-->">
<span class="heading-font o_img <!--#if(@shiro.getPrincipalProperty('loginSidebar')){#-->o_hide<!--#}#-->">
<img src="${base!}/assets/platform/img/logoa.png">
</span>
</a>
</div>
<ul class="nav navbar-nav">
<li style="padding:0 10px" class="vivify popIn duration-1500">
<el-popover
width="450"
popper-class="appCenterPopover"
placement="top-start"
v-model="menuPopover"
trigger="hover">
<el-card shadow="never" class="appCenterCard">
<template #header>
<el-row type="flex" justify="space-between">
<div>
<el-link :underline="false">应用中心</el-link>
<i class="el-icon-edit" style="cursor: pointer;color: #1867b0"
@click="goSetAppCenter"></i>
</div>
<div>
<el-link @click="goHome" type="primary" :underline="false">工作台</el-link>
<el-link @click="setUserDefaultEntranceModuleId" type="primary" :underline="false">
设置为默认模块
</el-link>
</div>
</el-row>
</template>
<el-row gutter="20">
<el-col v-for="item in entranceModules" :span="8">
<div class="entranceDetail"
:class="item.id==selectEntranceModuleId?'entranceDetail-selected':''"
@click="enterEntranceModules(item)">
<div class="entranceIcon">
<el-image :src="APP_DOMAIN+FILE_STREAM_PREVIEW_ADDRESS+'?id='+item.icon[0].id"
style="height: 50px;width: 50px;border-radius: 50%"></el-image>
</div>
{{item.moduleName}}
</div>
</el-col>
</el-row>
<el-row type="flex" justify="end">
<el-button type="primary" size="mini" @click="menuPopover=!menuPopover">关闭</el-button>
</el-row>
</el-card>
<a href="javascript:" slot="reference" style="color: #FFFFFF;" @click="toggleMenuPopover">
<i class="fa fa-th-large" aria-hidden="true"></i>
{{selectEntranceModule ? selectEntranceModule.moduleName : '应用中心'}}
</a>
</el-popover>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="off-right">
<a href="javascript:;" data-toggle="dropdown">
<span class="hidden-xs ml10">${@shiro.getPrincipalProperty('username')}</span>
</a>
</li>
<li class="off-right">
<a href="${base!}/platform/login/logout">
<i class="ti-power-off"></i>
</a>
</li>
</ul>
</header>
<section class="layout" style="display: flex;">
<!-- sidebar menu -->
<div id="asideMenu" class="sidebar">
<el-menu unique-opened :default-active="activeMenuIndex" :default-openeds="openedMenus" @select="menuSelect"
style="width: 250px;">
<menu-list :menus="leftMenus" :depth="0"></menu-list>
</el-menu>
</div>
<!-- main content -->
<section class="main-content" id="container">
${layoutContent}
</section>
</section>
</div>
<script>
const leftMenuApp = new Vue({
el: '#asideMenu',
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>
<i class="fa fa-tags"></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>
<i :class="item.icon ? item.icon : 'fa fa-link'"></i>
<span style="white-space: normal;
word-break: break-all;
line-height: 1.4;
margin-right: 60px;
display: inline-block;">{{ item.name }}</span>
</a>
</el-menu-item>
</template>
</div>
`,
props: ["menus", "depth"]
}
},
store,
data() {
return {}
},
computed: {
leftMenus() {
if (this.selectEntranceModuleId) {
return this.moduleMenus.find(v => v.id === this.selectEntranceModuleId)?.menus
}
return []
},
moduleMenus() {
return this.$store.state.moduleMenus
},
selectEntranceModuleId() {
return this.$store.state.activeMenuModuleId || null
},
selectEntranceModule() {
if (this.selectEntranceModuleId && this.moduleMenus && this.moduleMenus.length > 0) {
return this.moduleMenus.find(v => v.id === this.selectEntranceModuleId)
}
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)
},
goHome() {
},
assignmentMenu() {
const menuIndexPath = window.sessionStorage.getItem('menuIndexPath')
if (menuIndexPath) {
this.openedMenus = JSON.parse(menuIndexPath)
} else {
this.openedMenus = []
}
const menuIndex = window.sessionStorage.getItem('menuIndex')
if (menuIndex) {
this.activeMenuIndex = menuIndex
} else {
this.activeMenuIndex = ''
}
}
},
created() {
this.assignmentMenu()
}
})
const headerNavBarVueApp = new Vue({
el: '#headerNavbar',
store,
data() {
return {
userDefaultModuleId: null,
menuPopover: false,
appModuleId: ""
}
},
computed: {
entranceModules() {
return this.$store.state.moduleMenus
},
selectEntranceModuleId() {
return this.$store.state.activeMenuModuleId || null
},
selectEntranceModule() {
if (this.selectEntranceModuleId && this.entranceModules) {
return this.entranceModules.find(v => v.id === this.selectEntranceModuleId)
}
return {}
}
},
methods: {
async enterEntranceModules(item) {
this.$store.commit('setActiveMenuModuleId', item.id)
},
goHome() {
$.pjax({
url: '/platform/home',
container: '#container',
fragment: '#container',
timeout: 8000
});
this.$store.commit('setActiveMenuIndex', null)
this.$store.commit("setOpenedMenus", [])
},
goSetAppCenter() {
$.pjax({
url: '/platform/sys/entranceModule',
container: '#container',
fragment: '#container',
timeout: 8000
});
},
async getUserDefaultEntranceModuleId() {
const resp = await $.get('/platform/sys/entranceModule/getUserDefaultEntranceModuleId')
if (resp.code === 0) {
this.userDefaultModuleId = resp.data
}
},
async setUserDefaultEntranceModuleId() {
const {id: moduleId, moduleName} = this.selectEntranceModule
const msg = '您确定要将' + moduleName + '设置为默认模块吗?'
const confirm = await this.$confirm(msg, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
if ('confirm' !== confirm) return
const resp = await $.get('/platform/sys/entranceModule/setUserDefaultEntranceModuleId', {moduleId})
if (resp.code === 0) {
this.$notify.success(resp.msg)
} else {
this.$notify.warning(resp.msg)
}
},
toggleMenuPopover() {
setTimeout(() => {
this.menuPopover = !this.menuPopover
}, 300)
},
async init() {
await this.getUserDefaultEntranceModuleId()
const selectEntranceModuleStr = window.sessionStorage.getItem('selectEntranceModule')
if (selectEntranceModuleStr) {
this.selectEntranceModule = JSON.parse(selectEntranceModuleStr)
this.appModuleId = this.selectEntranceModule.id
}
this.setAttr()
},
findParentNodes(data, targetHref, parents = []) {
for (const node of data) {
if (node && node.href === targetHref) {
return parents.concat(node);
}
if (node && node.children) {
const found = this.findParentNodes(node.children, targetHref, parents.concat(node));
if (found) {
return found;
}
}
}
return null;
},
matchMenu(path = window.location.pathname) {
const parentNodes = this.findParentNodes(JSON.parse(window.sessionStorage.getItem('moduleMenus')).flatMap(v => v.menus), path)
if (parentNodes) {
const menuIndexPath = parentNodes.map(v => v.id)
const menuIndex = menuIndexPath[menuIndexPath.length - 1]
const menuParentIndex = menuIndexPath[0]
const module = JSON.parse(window.sessionStorage.getItem('moduleMenus')).find(v => v.containsMenu.includes(menuParentIndex))
this.enterEntranceModules(module)
this.$store.commit('setActiveMenuIndex', menuIndex)
this.$store.commit("setOpenedMenus", menuIndexPath)
leftMenuApp.assignmentMenu()
} else {
this.enterEntranceModules(JSON.parse(window.sessionStorage.getItem('moduleMenus'))[0])
this.$store.commit('setActiveMenuIndex', null)
this.$store.commit("setOpenedMenus", [])
leftMenuApp.assignmentMenu()
}
}
},
created() {
// this.matchMenu()
this.$store.dispatch('pjaxRoute', window.location)
}
})
</script>
</body>
</html>