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" :class="item.color">
        <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="`${url}/static/110/count/${child.icon}`"
              mode="aspectFill"
              width="60rpx"
              height="60rpx"
            ></up-image>
          </view>
          <view v-if="isShowModule([{ title: child.title }])">{{
            child.title
          }}</view>
        </view>
      </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 { useMemberStore } from "@/store/index";
import { ProfileApi } from "@/services";
import pinia from "@/store";
import { url } from "@/utils/data";

const store = useMemberStore(pinia);
const list = reactive([
  {
    title: "收货数据",
    color: "green",
    child: [
      {
        icon: "1.png",
        title: "收货汇总",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/receivePanel", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "2.png",
        title: "收货明细",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesApp/receiveDetail", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "3.png",
        title: "收货作废",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesApp/receiveCl", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "4.png",
        title: "供应商排行",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/supplierRanking", // 要跳转到的页面路径
          });
        },
      },
    ],
  },
  {
    title: "出货数据",
    color: "blue",
    child: [
      {
        icon: "5.png",
        title: "出货汇总",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/shipmentPanel", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "6.png",
        title: "出货明细",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesApp/shipmentDetail", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "7.png",
        title: "出货作废",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesApp/shipmentCl", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "8.png",
        title: "客户排行",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/customerRanking", // 要跳转到的页面路径
          });
        },
      },
    ],
  },
  {
    title: "我的账本",
    color: "orange",
    child: [
      {
        icon: "10.png",
        title: "供应商对账",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/supplierChecking", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "11.png",
        title: "客户对账",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/customerChecking", // 要跳转到的页面路径
          });
        },
      },
      
      {
        icon: "12.png",
        title: "付款明细",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesApp/paymentDetail", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "13.png",
        title: "收款明细",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesApp/incomeDetail", // 要跳转到的页面路径
          });
        },
      },
      {
        icon: "14.png",
        title: "经营概况",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/businessOverview", // 要跳转到的页面路径
          });
        },
      },
    ],
  },
]);

// 收货、出货、常用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;
  &::before {
    content: "";
    position: absolute;
    margin-top: 13px;
    margin-left: 0rpx;
    width: 6rpx;
    height: 26rpx;
    background: #22d594;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
    border-radius: 3rpx;
  }
}
.green {
  &::before {
    background: #22d594;
  }
}
.blue {
  &::before {
    background: rgba(34, 114, 213, 1);
  }
}
.orange {
  &::before {
    background: rgba(255, 120, 43, 1);
  }
}
.box-content {
  display: flex;
  padding: 0rpx 20rpx;
  flex-wrap: wrap;
  .box {
    width: 140rpx;
    height: 140rpx;
    border-radius: 26rpx;
    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;
  }
  .box:nth-child(5n) {
    margin-left: 0rpx;
  }
}
</style>