373 lines
12 KiB
Vue
373 lines
12 KiB
Vue
<script lang="ts" setup>
|
|
import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
// import Assocmodule from '@/viewsnew/application/SfcEditor/NavbarEditor/assocPage.vue'
|
|
import PermissionSet from '@/views/system/manage/index.vue'
|
|
import UserInfoSet from '@/views/system/manage/user/userinfo.vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import dataVisualization from '@/data-visualization/index.vue'
|
|
import FormCreate from '@/views/BuiltInPage/FormCreate.vue'
|
|
const router = useRouter()
|
|
const navtitle: any = ref('')
|
|
const navmenulist: any = ref([
|
|
])
|
|
const checkindex = ref(null)
|
|
const currentMoudleId = ref('')
|
|
const currentMoudleType = ref('')
|
|
const currentrow: any = ref({})
|
|
const userList: any = ref({})
|
|
const showcontent = ref('')
|
|
const applicationId = ref('')
|
|
function menuclick(index: any) {
|
|
if (navmenulist.value[index].children.length == 0 || navmenulist.value[index].children == undefined) {
|
|
checkindex.value = index
|
|
currentMoudleId.value = navmenulist.value[index].module_id
|
|
if (navmenulist.value[index].module_id && navmenulist.value[index].module_id !== '') {
|
|
showcontent.value = ''
|
|
currentMoudleId.value = navmenulist.value[index].module_id
|
|
currentrow.value = navmenulist.value[index]
|
|
if (currentrow.value.module_type == '03') {
|
|
currentMoudleType.value = 'dataV'
|
|
showcontent.value = 'dataVisualization'
|
|
} else if (currentrow.value.module_type == '0301') {
|
|
currentMoudleType.value = 'dashboard'
|
|
showcontent.value = 'dataVisualization'
|
|
} else if (currentrow.value.module_type == '05') {
|
|
showcontent.value = 'FormCreate'
|
|
}
|
|
const currentInfo = {
|
|
showcontent: showcontent.value,
|
|
currentrow: currentrow.value
|
|
}
|
|
localStorage.setItem('currentInfo', JSON.stringify(currentInfo))
|
|
}
|
|
}
|
|
}
|
|
function childmenuclick(item: any) {
|
|
showcontent.value = ''
|
|
if (item.module_id && item.module_id !== '') {
|
|
currentrow.value = item
|
|
currentMoudleId.value = item.module_id
|
|
if (currentrow.value.module_type == '03') {
|
|
currentMoudleType.value = 'dataV'
|
|
showcontent.value = 'dataVisualization'
|
|
} else if (currentrow.value.module_type == '0301') {
|
|
currentMoudleType.value = 'dashboard'
|
|
showcontent.value = 'dataVisualization'
|
|
} else if (currentrow.value.module_type == '05') {
|
|
showcontent.value = 'FormCreate'
|
|
}
|
|
const currentInfo = {
|
|
showcontent: showcontent.value,
|
|
currentrow: currentrow.value
|
|
}
|
|
localStorage.setItem('currentInfo', JSON.stringify(currentInfo))
|
|
}
|
|
}
|
|
// 时间相关逻辑移动到独立组件中
|
|
const TimeDisplay = {
|
|
template: `
|
|
<div class="Navbar-menu-time">
|
|
<div class="Navbar-menu-time-text">{{ currentTime }}</div>
|
|
<div class="Navbar-menu-time-text2">{{ currentDate }}</div>
|
|
</div>
|
|
`,
|
|
setup() {
|
|
const currentTime = shallowRef('')
|
|
const currentDate = shallowRef('')
|
|
let timer: any
|
|
|
|
function updateTime() {
|
|
const now = new Date();
|
|
const hours = String(now.getHours()).padStart(2, '0');
|
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
const year = now.getFullYear();
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
const day = String(now.getDate()).padStart(2, '0');
|
|
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
|
const weekday = weekdays[now.getDay()];
|
|
currentTime.value = `${hours}:${minutes}:${seconds}`;
|
|
currentDate.value = `${year}-${month}-${day} ${weekday}`;
|
|
}
|
|
|
|
onMounted(() => {
|
|
updateTime()
|
|
timer = setInterval(updateTime, 1000)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
clearInterval(timer)
|
|
})
|
|
|
|
return { currentTime, currentDate }
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
init()
|
|
})
|
|
onBeforeUnmount(() => {
|
|
|
|
});
|
|
function init(){
|
|
userList.value = JSON.parse(localStorage.getItem('userInfo') || '{}')
|
|
navtitle.value = userList.value.app_name
|
|
applicationId.value = userList.id
|
|
const permissions:any = JSON.parse(localStorage.getItem('permissions')|| '{}')
|
|
navmenulist.value = gettreeData(permissions)
|
|
const currentInfo:any = JSON.parse(localStorage.getItem('currentInfo')|| '{}')
|
|
if (currentInfo?.showcontent) {
|
|
if(currentInfo.showcontent !=='FormCreate' && currentInfo.showcontent !=='dataVisualization'){
|
|
showcontent.value = currentInfo.showcontent
|
|
}else{
|
|
currentrow.value = currentInfo.currentrow
|
|
if (currentrow.value.module_type == '03') {
|
|
currentMoudleType.value = 'dataV'
|
|
showcontent.value = 'dataVisualization'
|
|
} else if (currentrow.value.module_type == '0301') {
|
|
currentMoudleType.value = 'dashboard'
|
|
showcontent.value = 'dataVisualization'
|
|
} else if (currentrow.value.module_type == '05') {
|
|
showcontent.value = 'FormCreate'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function gettreeData(orglist:any) {
|
|
const res:any = {};
|
|
for (const row of orglist) {
|
|
// 处理 parentid 并解构需要字段
|
|
const parentid = row.parentid || "0";
|
|
const { id, name,code, isdisplay, appId, type,module_id,module_type } = row;
|
|
// 统一节点数据对象
|
|
const nodeData = { parentid, id, name,code, isdisplay, appId, type,module_id,module_type }
|
|
// 更新或创建节点
|
|
if (res[id]) {
|
|
Object.assign(res[id], nodeData);
|
|
} else {
|
|
res[id] = { ...nodeData, children: [] };
|
|
}
|
|
// 处理父子关系
|
|
if (res[parentid]) {
|
|
res[parentid].children.push(res[id]);
|
|
} else {
|
|
res[parentid] = { children: [res[id]] };
|
|
}
|
|
}
|
|
return res[0].children;
|
|
}
|
|
function permissionClick() {
|
|
showcontent.value = 'PermissionSet'
|
|
const currentInfo = {
|
|
showcontent: showcontent.value,
|
|
currentrow: currentrow.value
|
|
}
|
|
localStorage.setItem('currentInfo', JSON.stringify(currentInfo))
|
|
}
|
|
function routerlink(){
|
|
router.push({ path: '/UserLogin' })
|
|
}
|
|
function logout() {
|
|
ElMessageBox.confirm(
|
|
'确定退出登录?',
|
|
'提示',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
.then(() => {
|
|
localStorage.removeItem('token')
|
|
localStorage.removeItem('userInfo')
|
|
localStorage.removeItem('permissions')
|
|
localStorage.removeItem('currentInfo')
|
|
routerlink()
|
|
})
|
|
.catch(() => { })
|
|
}
|
|
function userdetails() {
|
|
showcontent.value = 'UserInfoSet'
|
|
const currentInfo = {
|
|
showcontent: showcontent.value,
|
|
currentrow: currentrow.value
|
|
}
|
|
localStorage.setItem('currentInfo', JSON.stringify(currentInfo))
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="system-box">
|
|
<div class="Navbar-box">
|
|
<div class="Navbar-box-titie">
|
|
<div class="Navbar-box-titie-text">
|
|
{{ navtitle }}
|
|
</div>
|
|
</div>
|
|
<div class="Navbar-menu-box">
|
|
<div class="Navbar-menu-content">
|
|
<TimeDisplay />
|
|
<div class="Navbar-menu-item"
|
|
:class="{ 'Navbar-menu-items': checkindex == index && item.children.length == 0 }"
|
|
v-for="(item, index) in navmenulist" :key="index" @click="menuclick(index)">
|
|
<div v-if="!item.children || item.children.length == 0">{{ item.name }}</div>
|
|
<el-popover v-else :show-arrow="false" class="tsmenu" placement="bottom" popper-class="tsmenu-popover">
|
|
<div v-for="(items, indexs) in item.children" :key="indexs" class="Navbar-menu-item-child-item"
|
|
@click="() => childmenuclick(items)">
|
|
{{ items.name }}
|
|
</div>
|
|
<template #reference>
|
|
<div v-if="item.children.length > 0">{{ item.name }}</div>
|
|
</template>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
<div class="Navbar-box-right">
|
|
<div style="margin-right: 10px;cursor: pointer;" @click="permissionClick"><img
|
|
src="@/assets/system/navpermission.png" alt=""></div>
|
|
<div style="margin-right: 10px;cursor: pointer;" @click="userdetails"><img src="@/assets/system/nav1.png"
|
|
alt="">
|
|
</div>
|
|
<div style="margin-right: 15px;min-width: 45px;cursor: pointer;" @click="userdetails">{{ userList.nickname }}
|
|
</div>
|
|
<div style="margin-right: 15px;cursor: pointer;"><img src="@/assets/system/nav3.png" alt=""></div>
|
|
<div @click="logout" style="cursor: pointer;"><img src="@/assets/system/nav4.png" alt=""></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="system-box-content" style="height: calc(100vh - 65px);">
|
|
<dataVisualization v-if="showcontent == 'dataVisualization'" :appId="currentrow.module_id"
|
|
:busiFlag="currentMoudleType" />
|
|
<FormCreate v-if="showcontent == 'FormCreate'" :appId="currentrow.module_id" />
|
|
<PermissionSet v-if="showcontent == 'PermissionSet'" :isshowheader="true" />
|
|
<UserInfoSet v-if="showcontent == 'UserInfoSet'" :userList="userList" :applicationId="applicationId" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.system-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgb(0, 52, 102);
|
|
|
|
.Navbar-box {
|
|
width: 100%;
|
|
height: 65px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
|
|
.Navbar-box-titie {
|
|
width: 400px;
|
|
height: 65px;
|
|
line-height: 65px;
|
|
background: url(/images/navleft.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-left: 20px;
|
|
padding-right: 15px;
|
|
|
|
.Navbar-box-titie-text {
|
|
font-size: 25px;
|
|
font-weight: 700;
|
|
background: linear-gradient(to bottom, #ffffff, #0089ff);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
.Navbar-menu-box {
|
|
width: calc(100% - 400px);
|
|
height: 63px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
justify-content: space-between;
|
|
background: url(/images/navright.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.Navbar-menu-content {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.Navbar-menu-time {
|
|
width: 150px;
|
|
|
|
.Navbar-menu-time-text {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.Navbar-menu-time-text2 {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.Navbar-menu-item {
|
|
font-size: 14px;
|
|
padding: 5px 15px;
|
|
background: url(/images/navmenu.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 15px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.Navbar-menu-items {
|
|
background: url(/images/navmenucheck.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
}
|
|
|
|
.Navbar-box-right {
|
|
width: 210px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.system-box-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.tsmenu-popover.el-popover.el-popper {
|
|
background: linear-gradient(to bottom, rgba(0, 52, 102, 1), rgba(0, 55, 110, 0.5));
|
|
;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 0px;
|
|
padding: 5px 0px;
|
|
z-index: 9001 !important;
|
|
}
|
|
|
|
.tsmenu-popover.ed-popover.ed-popper {
|
|
background: linear-gradient(to bottom, rgba(0, 52, 102, 1), rgba(0, 55, 110, 0.5));
|
|
;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 0px;
|
|
padding: 5px 0px;
|
|
z-index: 9001 !important;
|
|
}
|
|
|
|
.tsmenu-popover .Navbar-menu-item-child-item {
|
|
padding: 5px 15px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
.tsmenu-popover .Navbar-menu-item-child-item:hover {
|
|
color: rgb(0, 255, 254);
|
|
background: rgb(2, 88, 161);
|
|
font-weight: 700;
|
|
}
|
|
</style> |