freight-web/src/PagesStatistics/index.vue

<template>
  <NavBar :count="0" :title="'数据统计'"></NavBar>
  <Box
    v-if="
      isShowModule(list[0].child.concat(list[1].child).concat(list[2].child))
    "
    :isShow="true"
  >
    <view
      v-for="(item, index) in list"
      :key="index"
      v-show="isShowModule(item.child)"
    >
      <view class="title">
        <Title :title="item.title" />
      </view>
      <view class="box-content">
        <view
          v-for="(child, index) in item.child"
          :key="index"
          @click="(child as any).fn(child)"
          v-show="isShowModule([{ title: child.title }])"
          :class="{ box: isShowModule([{ title: child.title }]) }"
        >
          <view v-if="isShowModule([{ title: child.title }])">
            <up-image
              :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pagesStatistics/${child.icon}`"
              mode="aspectFill"
              width="60rpx"
              height="60rpx"
            ></up-image>
          </view>
          <view v-if="isShowModule([{ title: child.title }])">{{
            child.title
          }}</view>
        </view>
      </view>

      <view class="line" v-show="index < list.length - 1"></view>
    </view>
  </Box>

  <!-- 当收货 出货 常用app全部为空 显示暂无权限 -->
  <up-empty
    v-else
    mode="permission"
    icon="http://cdn.uviewui.com/uview/empty/permission.png"
    :text="'暂无相关权限, 请联系管理员'"
  >
  </up-empty>
  <TabBar :select="'统计'"></TabBar>
</template>
<script setup lang="ts">
import Box from "@/components/Box/index.vue";
import Title from "@/components/Title/index.vue";
import TabBar from "@/components/TabBar/index.vue";
import { useMemberStore } from "@/store/index";
import { ProfileApi } from "@/services";
import pinia from '@/store'

const store = useMemberStore(pinia);
const list = reactive([
  {
    title: "收货",
    child: [
      {
        icon: "01.png",
        title: "收货汇总",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/receivePanel", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "02.png",
        title: "供应商排行",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/supplierRanking", // 要跳转到的页面路径
          });
        },
      },
    ],
  },
  {
    title: "出货",
    child: [
      {
        icon: "03.png",
        title: "出货汇总",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/shipmentPanel", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "04.png",
        title: "客户排行",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/customerRanking", // 要跳转到的页面路径
          });
        },
      },
    ],
  },
  {
    title: "账本",
    child: [
      {
        icon: "05.png",
        title: "经营概况",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/businessOverview", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "06.png",
        title: "供应商对账",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/supplierChecking", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "07.png",
        title: "客户对账",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/customerChecking", // 要跳转到的页面路径
          });
        },
      },
    ],
  },
]);

// 收货、出货、常用app是否显示
const isShowModule = (list: any) => {
  let flag = false;
  list.forEach((item: any) => {
    if (store.profile.menusNameList.indexOf(item.title) > -1) {
      flag = true;
      return;
    }
  });
  return flag;
};

onMounted(() => {
  // 重新获取权限
  ProfileApi.getUserInfo().then((res: any) => {
    if (res.code === 200) {
      store.setProfile({ ...res.data, token: store.profile.token });
    }
  });
});
</script>
<style lang="scss" scoped>
.title {
  line-height: 80rpx;
  padding: 0rpx 20rpx;
}
.box-content {
  display: flex;
  margin: 22rpx 0rpx;
  padding: 0rpx 20rpx;
  .box {
    width: 142rpx;
    height: 142rpx;
    background: #f9f9f9;
    border-radius: 26rpx;
    // text-align: center;
    // vertical-align: middle;
    // display: grid;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 26rpx;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    > view {
      display: grid;
      place-content: center;
      width: 100%;
    }
  }
  > .box + .box {
    margin-left: 32rpx;
  }
  ::v-deep .u-transition {
    align-items: center;
  }
}
.line {
  height: 18rpx;
  background: #f8f8f8;
}
</style>