finance/pages/index.vue

<template>
  <div class="fixed bg-gray-100">
    <van-tabs
      v-model:active="active"
      shrink
      line-width="60px"
      color="#59B4FF"
      title-active-color="#59B4FF"
    >
      <van-tab title="财务管理">
        <div class="h-screen w-full pb-60 overflow-y-scroll">
            <!-- 财务管理页面 -->
            <div class="bg-white p-4 mt-5 text-gray-500 flex-col">
              <div>
                <span class="font-semibold" id="finance-manage">财务管理</span>
                <span class="ml-2">对项目预算、奖金进行配置</span>
              </div>
              <Search class="mr-5"/>
              <FinanceManage class="mr-5"/>
            </div>
            <!-- 财务审批页面 -->
            <div class="bg-white p-4 mt-5 text-gray-500 flex-col">
              <div>
                <span class="font-semibold" id="finance-audit">财务审批</span>
                <span class="ml-2">对员工提交的申请进行审批</span>
              </div>
              <Search class="mr-5"/>
              <div class="overflow-x-hidden mr-5 table-box">
                <FinanceExamine />
              </div>

            </div>
            <!-- 财务统计页面 -->
            <div class="bg-white p-4 mt-5 text-gray-500 flex-col">
              <div>
                <span class="font-semibold" id="finance-statistical">财务统计</span>
                <span class="ml-2">财务明细统计查看</span>
              </div>
              <!-- 任务支出统计 -->
              <div class="h-64 overflow-hidden">
                <div class="mt-5 flex justify-between">
                  <div>
                    <span
                      class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"
                    ></span>
                    <span>任务支出统计</span>
                  </div>
                  <div class="mr-5">
                    <van-button
                      :type="taskState ? 'primary' : 'default'"
                      size="mini"
                      @click="taskState = true"
                      >图表</van-button
                    >
                    <van-button
                      :type="!taskState ? 'primary' : 'default'"
                      size="mini"
                      @click="taskState = false"
                      >表格</van-button
                    >
                  </div>
                </div>
                <!-- 任务支出统计的图表展示 -->
                <div v-show="taskState">
                  <!-- <van-empty description="暂无图表数据信息" /> -->
                  <RingEcharts class="w-full h-full" id="taskEcharts" />
                </div>
                <!-- 任务支出统计的表格展示 -->
                <div v-show="!taskState">
                  <Expenditure class="w-full h-full" id="taskTable" />
                </div>
              </div>
              <!-- 名目支出统计 -->
              <div class="h-64 overflow-hidden">
                <div class="mt-5 flex justify-between">
                  <div>
                    <span
                      class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"
                    ></span>
                    <span>名目支出统计</span>
                  </div>
                  <div class="mr-5">
                    <van-button
                      :type="nameState ? 'primary' : 'default'"
                      size="mini"
                      @click="nameState = true"
                      >图表</van-button
                    >
                    <van-button
                      :type="!nameState ? 'primary' : 'default'"
                      size="mini"
                      @click="nameState = false"
                      >表格</van-button
                    >
                  </div>
                </div>
                <!-- 名目支出统计的图表展示 -->
                <div v-show="nameState">
                  <!-- <van-empty description="暂无图表数据信息" /> -->
                  <RingEcharts class="w-full h-full" id="nameEcharts" />
                </div>
                <!-- 名目支出统计的表格展示 -->
                <div v-show="!nameState">
                  <Expenditure class="w-full h-full" id="nameTable" />
                </div>
              </div>
              <!-- 成员财务图 -->
              <div class="h-64 overflow-hidden">
                <div class="mt-5">
                  <span
                    class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"
                  ></span>
                  <span>成员财务图</span>
                </div>
                <RingEcharts class="w-full h-full" id="memberEcharts" />
              </div>
              <!-- 时间财务图 -->
              <div class="h-96 overflow-hidden">
                <div>
                  <span
                    class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"
                  ></span>
                  <span>时间财务图</span>
                </div>
                <BarEcharts class="w-full h-full" />
              </div>
            </div>


      </div>
      </van-tab>
      <van-tab title="角色管理"> <div class="h-screen overflow-y-scroll w-screen mt-4">角色管理</div></van-tab>
      <van-tab title="任务管理"><div class="h-screen overflow-y-scroll w-screen mt-4">任务管理</div></van-tab>
      <van-tab title="成员管理"><div class="h-screen overflow-y-scroll w-screen mt-4">成员管理</div></van-tab>
    </van-tabs>

    <div class="menu">
      <a href="#finance-manage">财务管理</a>
      <a href="#finance-audit">财务审批</a>
      <a href="#finance-statistical">财务统计</a>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'default',
};
</script>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

const active = ref(0);
const taskState = ref(true);
const nameState = ref(true);

onMounted(async () => {
  scrollToElementByHash();
});

// 根据hash值跳转到指定位置
async function scrollToElementByHash() {
  await nextTick();
  const hash = window.location.hash;
  if (!hash) return;
  const scrollDom = document.querySelector(hash);
  document.body.scrollTop = scrollDom.offsetTop;
  document.documentElement.scrollTop = scrollDom.offsetTop;
  window.pageYOffset = scrollDom.offsetTop;
}
</script>

<style lang="less">
.van-nav-bar__content {
  background-color: #eee;
}
.van-icon-arrow-left:before {
  color: #000;
}
</style>
<style scoped lang="less">
.menu {
  position: fixed;
  right: 0;
  bottom: 15px;
  z-index: 99;
}
.menu a {
  display: block;
  width: 72px;
  color: #fff;
  background: rgba(25, 137, 250, 0.6);
  padding: 8px 20px;
  border-radius: 30px 0 0 30px;
  margin-bottom: 15px;
}
.button {
  padding: 0px;
  margin: 0px;
}
.van-button--mini {
  padding: 0.5rem 1rem;
}
.van-button--mini + .van-button--mini {
  margin-left: 0px;
}
.table-box{
  width: 95%;
}
</style>