stdproject/frontend/src/views/system/userlogin/frame.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>