LayoutHeader.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <template>
  2. <div class="layout-header">
  3. <div class="logo"></div>
  4. <div class="menu">
  5. <el-menu :default-active="currentPath" ref="menuRef" class="el-menu-demo" mode="horizontal">
  6. <el-menu-item :index="item.path" v-for="item in routeList" :key="item.name"
  7. :class="{ 'external-link-item': isExternalLink(item.path) }" @click="handleMenuClick(item.path)">{{ item.title
  8. }}</el-menu-item>
  9. </el-menu>
  10. </div>
  11. <!-- 机构切换下拉 -->
  12. <div style="align-self: center; margin-right: 16px;">
  13. <el-select v-model="currentOrg" placeholder="请选择机构" style="width: 160px" @change="changeOrg">
  14. <el-option v-for="org in orgList" :key="org.id" :label="org.organ_name" :value="org.id" />
  15. </el-select>
  16. </div>
  17. <!-- 用户下拉 -->
  18. <div style="align-self: center;">
  19. <el-dropdown style="margin-top:10px">
  20. <div style="font-size:medium;font-weight: bold; color:#000">{{ user.full_name }}</div>
  21. <template #dropdown>
  22. <el-dropdown-menu>
  23. <el-dropdown-item>用户资料</el-dropdown-item>
  24. <el-dropdown-item @click="editPassShow = true">修改密码</el-dropdown-item>
  25. <el-dropdown-item @click="handleLogout">登出</el-dropdown-item>
  26. </el-dropdown-menu>
  27. </template>
  28. </el-dropdown>
  29. </div>
  30. </div>
  31. <EditPasswordDialog v-model="editPassShow" />
  32. </template>
  33. <script setup>
  34. import { ref, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
  35. import { useMenuStore } from "@/stores/menu.js"
  36. import { useRoute, useRouter } from "vue-router";
  37. import { getSessionVar, clearSessionVar, saveSessionVar } from '@/utils/session'
  38. import EditPasswordDialog from "@/components/EditPasswordDialog.vue"
  39. import { knowledgeGraphAddr } from "@/utils/config"
  40. const { proxy } = getCurrentInstance()
  41. const route = useRoute()
  42. const router = useRouter()
  43. let timer
  44. const menuRef = ref()
  45. const { routeList, updateRouteList } = useMenuStore()
  46. // console.log(operationPermissions)
  47. const user = ref({
  48. id: "0",
  49. full_name: 'John Doe',
  50. username: 'johndoe',
  51. })
  52. user.value = {
  53. id: getSessionVar('user_id') || "0",
  54. full_name: getSessionVar('full_name') || 'John Doe',
  55. username: getSessionVar('username') || 'johndoe',
  56. }
  57. // 机构相关
  58. const orgList = ref([])
  59. const currentOrg = ref(getSessionVar('org_id') || '') // 当前机构id
  60. // 获取机构列表
  61. const fetchOrgList = async () => {
  62. // 假设接口返回 { records: [{id, name}, ...] }
  63. const { records } = await proxy.$http.get('/open-platform/sys/loadSURO')
  64. orgList.value = records
  65. // 默认选中第一个
  66. const res = await proxy.$http.get('/open-platform/sys/currSURO')
  67. // console.log('当前机构11:', res)
  68. currentOrg.value = res
  69. saveSessionVar('org_id', res)
  70. // console.log('机构列表:', orgList.value)
  71. // console.log('当前机构:', currentOrg.value)
  72. }
  73. // 切换机构
  74. const changeOrg = async (orgId) => {
  75. // 可调用后端切换机构接口
  76. const res = await proxy.$http.post(`/open-platform/sys/changeSURO/${orgId}`)
  77. console.log('切换机构结果:', res)
  78. saveSessionVar('org_id', orgId)
  79. saveSessionVar("knowledageSystem", '');
  80. saveSessionVar('routeList', '')
  81. // 可选:刷新页面或重新拉取权限/菜单等
  82. updateRouteList([]);
  83. let knowledageSystem = '';
  84. let routeList = [{
  85. path: '/kmplatform/home',
  86. name: 'kmplatform-home',
  87. title: "主页",
  88. children: []
  89. }]
  90. res.records[0].menu_permissions.sort((a, b) => {
  91. return a.id - b.id;
  92. });
  93. res.records[0].menu_permissions.forEach((item) => {
  94. if (item.menu_name == "知识更新管理") {
  95. knowledageSystem = 'true';
  96. routeList.push({
  97. path: knowledgeGraphAddr,
  98. name: '',
  99. title: item.name,
  100. children: item.children,
  101. });
  102. } else if (item.menu_route) {
  103. routeList.push({
  104. path: item.menu_route,
  105. name: item.menu_route.split("/")[2],
  106. title: item.name,
  107. children: item.children,
  108. });
  109. }
  110. });
  111. console.log("knowledageSystem", knowledageSystem);
  112. saveSessionVar("knowledageSystem", knowledageSystem);
  113. saveSessionVar('routeList', JSON.stringify(routeList))
  114. updateRouteList(routeList);
  115. // 刷新页面
  116. window.location.href = '/kmplatform/home';
  117. }
  118. let editPassShow = ref(false)
  119. const currentPath = computed(() => {
  120. // console.log('当前路由:', route)
  121. let temp = ""
  122. for (let i = 0; i < routeList.length; i++) {
  123. for (let j = 0; j < route.matched.length; j++) {
  124. if (routeList[i].path === route.matched[j].path) {
  125. temp = route.matched[j].path
  126. break
  127. }
  128. }
  129. if (temp) break;
  130. }
  131. return temp
  132. })
  133. const handleLogout = () => {
  134. router.push({ path: '/login' });
  135. clearSessionVar()
  136. }
  137. const isExternalLink = (path) => {
  138. return /^https?/g.test(path);
  139. };
  140. function handleMenuClick(path) {
  141. if (/^https?/g.test(path)) {
  142. const newWindow = window.open(path, '_blank');
  143. timer = setInterval(() => {
  144. newWindow?.postMessage({ type: 'login', username: getSessionVar("full_name"), userId: getSessionVar("user_id") }, "*")
  145. }, 1000)
  146. menuRef.value.updateActiveIndex(currentPath.value)
  147. } else {
  148. if (route.path.includes(path)) return
  149. router.push({ path: path })
  150. }
  151. }
  152. function handleLogin(event) {
  153. const { type, status } = event.data
  154. if (type === 'login' && status === 'ok') {
  155. clearInterval(timer)
  156. }
  157. }
  158. onMounted(() => {
  159. window.addEventListener('message', handleLogin);
  160. fetchOrgList()
  161. if (route.name === 'kmplatform') {
  162. router.push({ path: routeList[0].path })
  163. }
  164. })
  165. onBeforeUnmount(() => {
  166. window.removeEventListener('message', handleLogin);
  167. clearInterval(timer)
  168. })
  169. </script>
  170. <style lang="less" scoped>
  171. .layout-header {
  172. display: flex;
  173. border-bottom: 1px solid #C4C2C2;
  174. // padding-bottom: 10px;
  175. .logo {
  176. width: 200px;
  177. // height: 60px;
  178. // border: 1px solid skyblue;
  179. flex: 0 0 auto;
  180. margin-right: 50px;
  181. background: url('../assets/images/logo.jpg') no-repeat center;
  182. background-size: 100% 100%;
  183. }
  184. .menu {
  185. flex: 1 1 auto;
  186. // .el-menu--horizontal>.el-menu-item.is-active {
  187. // border: none;
  188. // }
  189. .el-menu--horizontal.el-menu {
  190. border: none;
  191. }
  192. :deep(.el-menu) {
  193. .el-menu-item {
  194. font-size: 20px;
  195. }
  196. }
  197. .external-link-item {
  198. // 覆盖激活效果
  199. &.is-active {
  200. background-color: transparent !important;
  201. color: inherit !important;
  202. }
  203. // 覆盖点击效果
  204. &:focus {
  205. background-color: transparent !important;
  206. color: inherit !important;
  207. }
  208. }
  209. }
  210. }
  211. </style>