ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/navigationFrame/SystemNavComponent.vue

@@ -0,0 +1,810 @@
+<script setup>
+import { computed, inject, nextTick, onBeforeMount, ref, onMounted, watch, reactive } from 'vue'
+import { find as treeFind } from 'tree-lodash'
+import { MoreFilled, CloseBold } from '@element-plus/icons-vue';
+import RenderIndex from '@preview/src/index.vue';
+
+import MyElMenu from './components/MyElMenu.vue';
+import useAppMenus from './hooks/useAppMenus';
+import { useContextmenu } from '@nextui';
+
+
+const props = defineProps({
+  component: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  page: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  propsValues: {
+    type: Object,
+    default: () => ({})
+  }
+})
+props.component.init()
+
+const $bus = inject('$bus')
+const { updateData } = useAppMenus(props.component, props.page)
+let prevCurrentNavPageId = ''
+const currentNavPageId = ref('') // 当前导航页面id
+const currentPageRenderComponetData = ref(null) // 当前页面渲染组件
+const loading = ref(false)
+
+const tabs = ref([])
+
+const exportDataOptions = [
+  {
+    label: '点击的菜单',
+    value: 'menuClick',
+    data: [
+      {
+        label: '菜单id',
+        value: 'id'
+      },
+      {
+        label: '菜单名称',
+        value: 'label'
+      }
+    ]
+  },
+  {
+    label: '选中的菜单',
+    value: 'selectedMenu',
+    data: [
+      {
+        label: '菜单id',
+        value: 'id'
+      },
+      {
+        label: '菜单名称',
+        value: 'label'
+      }
+    ]
+  },
+  {
+    label: '垂直选中的菜单',
+    value: 'verticalSelectedMenu',
+    data: [
+      {
+        label: '菜单id',
+        value: 'id'
+      },
+      {
+        label: '菜单名称',
+        value: 'label'
+      }
+    ]
+  },
+  {
+    label: '顶部选中的菜单',
+    value: 'topSelectedMenu',
+    data: [
+      {
+        label: '菜单id',
+        value: 'id'
+      },
+      {
+        label: '菜单名称',
+        value: 'label'
+      }
+    ]
+  }
+]
+
+const exportDataValues = reactive({
+  menuClick: {
+    id: '',
+    label: ''
+  },
+  selectedMenu: {
+    id: '',
+    label: ''
+  },
+  verticalSelectedMenu: {
+    id: '',
+    label: ''
+  },
+  topSelectedMenu: {
+    id: '',
+    label: ''
+  }
+})
+
+const events = computed(() => {
+  return props.component.componentValue.event
+})
+
+const data = computed(() => {
+  return props.component.componentValue.props
+})
+
+/**
+ * 导航菜单
+ */
+const appNavMenus = computed({
+  /** */
+  get() {
+    return props.component?.data?.navMenus
+  }
+})
+
+
+/**
+ * 导航菜单映射
+ */
+const appNavMenusMap = computed(() => {
+  const resMap = {}
+  /**
+   *
+   * @param {Array} list
+   */
+  const handleFn = (list) => {
+    return list.forEach(item => {
+      resMap[item.id] = item
+      if (item.children?.length) {
+        handleFn(item.children)
+      }
+    })
+  }
+  handleFn(appNavMenus.value || [])
+  return resMap
+
+})
+
+
+onMounted(() => {
+  updateData()
+
+})
+
+
+// #region  ************  导航切换  ************
+
+
+const navMode = computed(() => data.value.Navlayout.mode)
+const topAppNavMenus = computed(() => {
+  const res = appNavMenus.value?.map(item => {
+    return {
+      ...item,
+      children: []
+    }
+  }) || []
+  return res.sort((a, b) => a?.number - b?.number)
+})
+/**
+ * 获取水平导航数据
+ */
+const getHorizontalAppNavMenus = computed(() => {
+  if (navMode.value === 'horizontal') {
+    return appNavMenus.value || []
+  } else if (navMode.value === 'vertical-horizontal') {
+    return topAppNavMenus.value
+  }
+  return []
+})
+
+
+const horizontalActiveIndex = ref(props.propsValues.Navlayout?.defaultTopActive || getHorizontalAppNavMenus.value[0]?.id) // 默认选择第一个
+
+const proxyHorizontalActiveIndex = computed({
+  /** 获取水平激活索引 */
+  get() {
+    return horizontalActiveIndex.value || getHorizontalAppNavMenus.value[0]?.id
+  },
+  /** 设置水平激活索引 */
+  set(val) {
+    horizontalActiveIndex.value = val
+  }
+})
+/**
+ * 获取垂直导航数据
+ */
+const getVerticalAppNavMenus = computed(() => {
+  if (navMode.value === 'vertical') {
+    return appNavMenus.value || []
+  } else if (navMode.value === 'vertical-horizontal') {
+    const res = appNavMenus.value?.find(item => item.id === proxyHorizontalActiveIndex.value)?.children || []
+    return res.sort((a, b) => a?.number - b?.number)
+  }
+  return []
+})
+
+const vInex = ref()
+
+const verticalActiveIndex = computed({
+
+  /**
+   * 获取垂直激活索引
+   */
+  get() {
+
+    return vInex.value || props.propsValues.Navlayout?.defaultLeftActive || getVerticalAppNavMenus.value.find(item=>item._initShow)?.id || proxyHorizontalActiveIndex.value
+  },
+  /**
+   * 设置垂直激活索引
+   */
+  set(val) {
+    vInex.value = val
+  }
+})
+const cacheIdList = computed(() => {
+  return Object.values(appNavMenusMap.value).filter(item => item.cache)
+    .map(item => item.page.id)
+})
+
+
+/**
+ *  当前选择的导航菜单渲染组件
+ */
+const setCurrentPageRenderComponetData = async (pageId) => {
+  const loadingState = data.value.Navlayout?.loading
+  if (loadingState && !cacheIdList.value.includes(pageId) && currentNavPageId.value !== prevCurrentNavPageId) {
+    prevCurrentNavPageId = currentNavPageId.value
+    loading.value = true
+    return
+  }
+  loading.value = false
+}
+
+const refreshKey = ref(false)
+
+/** 选择水平菜单 */
+const horizontalHandleSelect = (id) => {
+
+
+  exportDataValues.menuClick.id = id
+  exportDataValues.menuClick.label = appNavMenusMap.value[id]?.title
+  exportDataValues.selectedMenu.id = id
+  exportDataValues.selectedMenu.label = appNavMenusMap.value[id]?.title
+  exportDataValues.topSelectedMenu.id = id
+  exportDataValues.topSelectedMenu.label = appNavMenusMap.value[id]?.title
+  events.value?.click?.()
+  events.value?.topClick?.()
+
+  currentPageRenderComponetData.value = null
+  proxyHorizontalActiveIndex.value = id
+  let currentTab = appNavMenusMap.value[id];
+  let pageId = appNavMenusMap.value[id]?.page?.id
+  if (getVerticalAppNavMenus.value.length) {
+    currentTab = getVerticalAppNavMenus.value[0];
+    if (getVerticalAppNavMenus.value[0]?.page?.id) {
+      pageId = getVerticalAppNavMenus.value[0]?.page?.id
+      verticalActiveIndex.value = getVerticalAppNavMenus.value[0]?.id
+    }
+  }
+  if (currentTab && !tabs.value.find(item => item.id === currentTab.id)) {
+    tabs.value.push({
+      id: currentTab.id,
+      title: currentTab.title,
+      page: currentTab.page,
+      $type: 'horizontal',
+      ids: [id, currentTab.id]
+    })
+  }
+  if (!pageId) {
+    currentNavPageId.value = ''
+    return
+  }
+  setTimeout(() => {
+    refreshKey.value = Date.now()
+  }, 10);
+  currentNavPageId.value = pageId
+
+  // 获取页面版本信息
+  setCurrentPageRenderComponetData(pageId)
+
+}
+/** 选择垂直菜单 */
+const verticalHandleSelect = (id) => {
+
+
+  exportDataValues.menuClick.id = id
+  exportDataValues.menuClick.label = appNavMenusMap.value[id]?.title
+  exportDataValues.selectedMenu.id = id
+  exportDataValues.selectedMenu.label = appNavMenusMap.value[id]?.title
+  exportDataValues.verticalSelectedMenu.id = id
+  exportDataValues.verticalSelectedMenu.label = appNavMenusMap.value[id]?.title
+  events.value?.click?.()
+  events.value?.leftClick?.()
+
+  currentPageRenderComponetData.value = null
+  verticalActiveIndex.value = id
+  const pageId = appNavMenusMap.value[id]?.page?.id
+  const currentTab = {
+    ...appNavMenusMap.value[id]
+  }
+  if (currentTab && !tabs.value.find(item => item.id === currentTab.id)) {
+    let ids = proxyHorizontalActiveIndex.value ? [proxyHorizontalActiveIndex.value, id] : [id]
+    tabs.value.push({
+      id: currentTab.id,
+      title: currentTab.title,
+      page: currentTab.page,
+      $type: 'vertical',
+      ids: ids
+    })
+  }
+  if (!pageId) {
+    currentNavPageId.value = ''
+    return
+  }
+  setTimeout(() => {
+    refreshKey.value = Date.now()
+  }, 10);
+  currentNavPageId.value = pageId
+
+  // 获取页面版本信息
+  setCurrentPageRenderComponetData(pageId)
+
+}
+
+// #endregion
+
+
+onMounted(() => {
+
+  props.component.data.exportDataOptions = exportDataOptions
+  props.component.data.exportDataValues = exportDataValues
+
+
+  $bus.on('updateAppNavMenus', (data) => {
+    props.component.data.navMenus = data
+  })
+  nextTick(() => {
+    if (navMode.value === 'vertical' || navMode.value === 'vertical-horizontal') {
+      if (verticalActiveIndex.value) {
+        const id = verticalActiveIndex.value
+        const pageId = appNavMenusMap.value[id]?.page?.id
+        if (!pageId) {
+          return
+        }
+        setCurrentPageRenderComponetData(pageId)
+      }
+
+    } else if (navMode.value === 'horizontal') {
+      if (proxyHorizontalActiveIndex.value) {
+        const id = proxyHorizontalActiveIndex.value
+        const pageId = appNavMenusMap.value[id]?.page?.id
+        if (!pageId) {
+          return
+        }
+        setCurrentPageRenderComponetData(pageId)
+      }
+    }
+    setTimeout(() => {
+      refreshKey.value = Date.now()
+    }, 10);
+  })
+})
+
+const handleClick = (item) => {
+
+}
+
+
+const getTitle = computed(() => {
+  return props.page.getDynamicValue(data.value.topNav.title)
+})
+
+
+const stopwatch = watch(() => props.component?.data?.navMenus, (val) => {
+  if (val) {
+    // currentNavPageId.value = props.component?.data?.navMenus?.[0]?.page?.id
+    const verticalAppNavMenus = getVerticalAppNavMenus.value
+    let currentTab = null;
+    if (verticalAppNavMenus.length) {
+      const v = verticalActiveIndex.value
+      if (v) {
+        const item = treeFind(verticalAppNavMenus, (item)=>item.id === v);
+        console.log(v, item)
+        currentTab = {
+          ...item,
+          $type: 'vertical',
+          ids: [proxyHorizontalActiveIndex.value, item.id]
+        }
+        currentNavPageId.value = item.page?.id || verticalAppNavMenus.find(item=>item._initShow)?.page?.id
+        refreshKey.value = Date.now()
+      } else {
+        const item = verticalAppNavMenus.find(item=>item._initShow);
+        currentNavPageId.value = item?.page?.id
+        currentTab = {
+          ...item,
+          $type: 'vertical',
+          ids: [proxyHorizontalActiveIndex.value, item?.id]
+        }
+      }
+
+    } else if (getHorizontalAppNavMenus.value.length) {
+      const h = horizontalActiveIndex.value
+      if (h) {
+        const item = treeFind(getHorizontalAppNavMenus.value, (item)=>item.id === h)
+        currentTab = {
+          ...item,
+          $type: 'horizontal',
+          ids: [h]
+        }
+        currentNavPageId.value = item.page?.id || getHorizontalAppNavMenus.value.find(item=>item._initShow)?.page?.id
+        refreshKey.value = Date.now()
+      } else {
+        const item = getHorizontalAppNavMenus.value.find(item=>item._initShow);
+        currentNavPageId.value = item?.page?.id
+        currentTab = {
+          ...item,
+          $type: 'horizontal',
+          ids: [item?.id]
+        }
+      }
+      // currentNavPageId.value = getHorizontalAppNavMenus.value.find(item=>item._initShow)?.page?.id
+    }
+    if (currentTab) {
+      tabs.value.push({
+        id: currentTab.id,
+        title: currentTab.title,
+        page: currentTab.page,
+        $type: currentTab.$type,
+        ids: currentTab.ids
+      })
+    }
+    prevCurrentNavPageId = currentNavPageId.value
+    setTimeout(() => {
+      stopwatch()
+    }, 10)
+  }
+
+})
+
+
+const loadedCallback = () => {
+  loading.value = false
+}
+
+const isRefresh = computed(() => {
+  return refreshKey.value
+})
+
+const menuShow = (item)=>{
+
+  if (item.show?.expression?.length) {
+    return props.page.utils.getExpressionValue(item.show, {
+      page: props.page
+    })
+  }
+  return item?.show?.value ?? true
+}
+
+const menuCallbacks = {
+  close(id) {
+    let prevIndex = -1, pageId = null;
+    tabs.value.forEach((item, index) => {
+      if (item.id === id) {
+        prevIndex = index - 1;
+        pageId = item?.page?.id;
+        tabs.value.splice(index, 1);
+      }
+    });
+    if (prevIndex > -1 && currentNavPageId.value === pageId) {
+      onTagClick(tabs.value[prevIndex])
+    }
+  },
+  closeOther(id) {
+    const items = tabs.value.filter(item => item.id === id);
+    tabs.value = [...items];
+    onTagClick(items[0])
+  },
+  closeLeft(id) {
+    const index = tabs.value.findIndex(item => item.id === id);
+    tabs.value.splice(0, index);
+    const has = tabs.value.find(item => item?.page?.id === currentNavPageId.value);
+    if (!has) {
+      onTagClick(tabs.value.find(item => item.id === id))
+    }
+  },
+  closeRight(id) {
+    const index = tabs.value.findIndex(item => item.id === id);
+    tabs.value.splice(index + 1, tabs.value.length - index - 1);
+    const has = tabs.value.find(item => item?.page?.id === currentNavPageId.value);
+    if (!has) {
+      onTagClick(tabs.value.find(item => item.id === id))
+    }
+  }
+}
+
+const onContextmenu = (item, index) => {
+  if (tabs.value.length > 1) {
+    let menus = [
+      {label: '关闭', key: 'close'},
+      {label: '关闭其他', key: 'closeOther'}
+    ]
+    if (index > 0) {
+      menus.push({label: '关闭左侧标签', key: 'closeLeft'})
+    }
+    if (index < tabs.value.length - 1) {
+      menus.push({label: '关闭右侧标签', key: 'closeRight'})
+    }
+    const tagMenu = useContextmenu(menus, (btn) => {
+      if (menuCallbacks[btn.key]) {
+        menuCallbacks[btn.key](item.id);
+      }
+    })
+    tagMenu.show()
+  }
+}
+
+const onTagClick = (item) => {
+  currentNavPageId.value = item?.page?.id;
+  setTimeout(() => {
+    refreshKey.value = Date.now()
+  }, 10);
+  if (item?.ids[0]) {
+    proxyHorizontalActiveIndex.value = item?.ids[0];
+  }
+  if (item?.ids[1]) {
+    verticalActiveIndex.value = item?.ids[1];
+  }
+}
+
+</script>
+
+<template>
+  <div class="app-system-nav" :id="component.id">
+    <header :style="{
+      height: data.topNav.height + 'px',
+      'background-color': data.topNav.backgroundColor,
+      lineHeight: data.topNav.height + 'px',
+      '--el-menu-active-color': data.topNav.menuFontActiveColor,
+      '--el-menu-text-color': data.topNav.menuFontColor,
+      '--el-menu-hover-bg-color': data.topNav.menuFontActiveBackgroundColor,
+      '--horizontal-menu-active-bg-color': data.topNav.menuFontActiveBackgroundColor,
+      '--el-menu-hover-text-color': data.topNav.menuFontActiveColor,
+      '--el-bg-color-overlay': data.leftNav.menuFontActiveBackgroundColor,
+    }">
+      <div class="nav-title">
+        <h1 :style="{
+          fontSize: data.topNav.titleFontSize + 'px',
+          color: data.topNav.titleColor,
+        }">{{ getTitle }}</h1>
+      </div>
+      <!-- 头部水平菜单 -->
+      <nav v-if="navMode !== 'vertical'"
+           :style="{
+             height: data.topNav.menuHeight + 'px',
+           }">
+        <el-menu :default-active="proxyHorizontalActiveIndex"
+                 :ellipsis="false"
+                 mode="horizontal"
+                 @select="horizontalHandleSelect">
+          <MyElMenu @onSelect="handleClick"
+                    :currentActionId="proxyHorizontalActiveIndex"
+                    v-if="getHorizontalAppNavMenus.length"
+                    :menuShow="menuShow"
+                    :appNavMenus="getHorizontalAppNavMenus" />
+        </el-menu>
+      </nav>
+    </header>
+    <main :style="{
+      '--aside-width': data.leftNav.width + 'px',
+    }">
+      <!-- 侧边栏垂直菜单 -->
+      <aside v-if="navMode !== 'horizontal' && getVerticalAppNavMenus.length"
+             :style="{
+               backgroundColor: data.leftNav.backgroundColor,
+               '--el-menu-active-color': data.leftNav.menuActiveFontColor,
+               '--el-menu-text-color': data.leftNav.fontColor,
+               '--el-menu-hover-bg-color': data.leftNav.menuActiveBackgroundColor,
+               '--el-menu-hover-text-color': data.leftNav.fontColor,
+               '--menu-active-bg-color': data.leftNav.menuActiveBackgroundColor,
+             }">
+        <nav>
+          <el-menu :default-active="verticalActiveIndex"
+                   :ellipsis="false"
+                   @select="verticalHandleSelect">
+            <MyElMenu @onSelect="handleClick"
+                      :currentActionId="verticalActiveIndex"
+                      v-if="getVerticalAppNavMenus.length"
+                      :menuShow="menuShow"
+                      :appNavMenus="getVerticalAppNavMenus" />
+          </el-menu>
+        </nav>
+      </aside>
+      <!-- 页面容器 -->
+      <section class="page-container"
+               :style="{
+                 backgroundColor: data.Navlayout.backgroundColor,
+               }">
+        <div class="page-tags" v-if="propsValues?.Navlayout?.useTab">
+          <el-tag
+            v-for="(item , index) in tabs"
+            :key="item.id"
+            :closable="tabs.length > 1 ? true : false"
+            :effect="currentNavPageId && currentNavPageId === item?.page?.id ? 'dark' : 'plain'"
+            :type="currentNavPageId && currentNavPageId === item?.page?.id ? 'primary' : 'info'"
+            @contextmenu.stop.prevent="(ev) => onContextmenu(item , index)"
+            @click="onTagClick(item)"
+            @close="menuCallbacks.close(item.id)"
+          >
+            {{ item.title }}
+          </el-tag>
+        </div>
+        <div class="page-section">
+          <template v-if="currentNavPageId">
+            <KeepAlive>
+              <RenderIndex v-if="cacheIdList.includes(currentNavPageId)"
+                           :loaded="loadedCallback"
+                           :cacheLevel="1"
+                           :key="currentNavPageId"
+                           :id="currentNavPageId" />
+            </KeepAlive>
+            <RenderIndex v-if="!cacheIdList.includes(currentNavPageId) && refreshKey"
+                         :loaded="loadedCallback"
+                         :cacheLevel="1"
+                         :key="isRefresh"
+                         :id="currentNavPageId" />
+
+          </template>
+          <template v-else>
+            <!-- <el-alert :closable="false"
+                      v-show="currentNavPageId"
+                      v-if="!loading"
+                      title="未挂载页面 !"
+                      type="warning" /> -->
+          </template>
+
+          <template v-if="data.Navlayout.loadingType === 'skeleton' && loading">
+            <el-skeleton :rows="7" animated />
+          </template>
+          <template v-if="data.Navlayout.loadingType === 'loading' && loading">
+            <div v-loading="loading"
+                 :element-loading-text="data.Navlayout.loadingText"
+                 class="loading"></div>
+          </template>
+        </div>
+
+      </section>
+    </main>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.app-system-nav {
+  width: 100%;
+  height: 100%;
+  display: flex !important;
+  flex-direction: column;
+
+  header {
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    justify-content: space-between;
+
+    :deep(.el-menu--horizontal>.el-menu-item.is-active) {
+      background-color: var(--horizontal-menu-active-bg-color) !important;
+    }
+
+    :deep(.el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover) {
+      background-color: var(--horizontal-menu-active-bg-color) !important;
+    }
+
+    .nav-title {
+      flex: 1;
+      width: 100%;
+      padding: 0 20px;
+
+      h1 {
+        font-size: 16px;
+        font-weight: 600;
+        color: #ccc;
+        margin: 0;
+      }
+    }
+
+    nav {
+      user-select: none;
+      height: 100%;
+      flex: 2;
+
+      .el-menu {
+        height: 100%;
+        background-color: transparent;
+        justify-content: flex-end;
+
+        .el-menu-item {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  main {
+    flex: 1;
+    display: flex;
+    height: calc(100% - 60px);
+
+
+    .page-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .page-tags{
+        padding: 10px;
+        border-bottom: 1px solid #ddd;
+        gap: 10px;
+        display: flex;
+        .el-tag{
+          cursor: pointer;
+        }
+        .page-tag{
+          .page-tag-more{
+            transform: rotateZ(90deg);
+          }
+        }
+      }
+      .page-section{
+        flex: 1;
+        overflow: auto;
+      }
+      .el-alert {
+        position: absolute;
+        z-index: 0;
+        background-color: #fff;
+      }
+
+      .el-skeleton {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        padding: 20px;
+        z-index: 1;
+        background: #ffffff;
+      }
+
+      .loading {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+      }
+    }
+
+    aside {
+      user-select: none;
+      width: 200px;
+      width: var(--aside-width);
+      background-color: #fff;
+      border-right: 1px solid #ccc;
+      flex-shrink: 0;
+      overflow: auto;
+
+      :deep(.el-menu-item.is-active) {
+        background-color: var(--menu-active-bg-color) !important;
+      }
+    }
+
+    section {
+      flex: 1;
+      background-color: #fff;
+      width: calc(100% - var(--aside-width)) !important;
+    }
+  }
+  :deep(.el-menu){
+    background-color: inherit !important;;
+  }
+
+}
+</style>
+
+<style lang="less">
+.el-loading-mask {
+  background-color: transparent !important;
+}
+
+.loading {
+  background-color: transparent !important;
+}
+</style>