manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/home/index.vue

<template>
  <Page :title="'首页'">
    <template v-slot:headerRight>
      <div @click="showModule = true">新建</div>
    </template>

    <template v-slot:body>
      <van-tabs v-model:active="homepageType" class="w-full h-full flex flex-col">
        <van-tab title="工作台" name="workbench" class="w-full h-full">
          <Workbench />
        </van-tab>
        <van-tab title="数据分析" name="dataAnalysis" class="w-full h-full">
          <DataAnalysis />
        </van-tab>
      </van-tabs>

      <!-- 显示对应的模块 -->
      <van-overlay :show="showModule" class="flex items-center" z-index="100"  @click="showModule = false">
        <div class="w-3/4 h-3/4 m-auto flex flex-wrap items-center" @click.stop>
          <div class="text-white w-1/2 text-center" v-for="(item) in moduleList" :key="item.id" @click.stop="toAddEditor(item)">
            {{ item.name }}
          </div>
        </div>
      </van-overlay>
    </template>

    <template v-slot:footer>
      <Footer />
    </template>
  </Page>
</template>

<script setup>
import { ref } from "vue";
import { useLifecycle } from "@hooks/useCommon.js";
import useInfoStore from "@store/useInfoStore"
import useRouterStore from "@store/useRouterStore.js";
import { routingInfos } from "@utility/generalVariables.js";
import Footer from "@components/page/footer.vue";
import Workbench from "./component/workbench.vue";
import DataAnalysis from "./component/dataAnalysis.vue";


const userInfo = useInfoStore()
const router = useRouterStore()
const homepageType = ref('workbench')
const showModule = ref(false)
const moduleList = ref(userInfo.modularList)

function toAddEditor(rows) {
  const jumpTo = routingInfos[rows.path.replace('/', '')]
  router.navigateTo({
    pathName: 'addEditor',
    success: () => {
      router.emit('addEditorParameter', {
        routerInfo: JSON.stringify(jumpTo)
      })
    }
  })
}

useLifecycle({
  load: () => {
    
  }
});


</script>

<style lang="scss" scoped>
::v-deep .van-tabs__content {
  flex: 1;
  overflow-y: auto;
}
</style>