huarun/traceCodePackages/traceabilityReport/pages/index.vue

<template>
  <Water></Water>
  <view v-if="hasFunction" class="page" @click.stop="closeDropdowns">
    <view class="tabs-container">
      <view class="tabs">
        <view
          v-if="hasScanFunction"
          class="tab"
          :class="{ active: activeTab === 'scan' }"
          @click="activeTab = 'scan'"
        >
          扫码率</view
        >
        <view
          v-if="hasReportFunction"
          class="tab"
          :class="{ active: activeTab === 'export' }"
          @click="activeTab = 'export'"
          >报表导出</view
        >
        <view
          v-if="hasBlacklistFunction"
          class="tab"
          :class="{ active: activeTab === 'blacklist' }"
          @click="activeTab = 'blacklist'"
          >黑名单汇总</view
        >
        <view
          v-if="hasGanmaolingFunction"
          class="tab"
          :class="{ active: activeTab === 'ganmaoling' }"
          @click="activeTab = 'ganmaoling'"
          >感冒灵大批量</view
        >
      </view>
    </view>
    <view class="content" v-if="activeTab === 'scan' && hasScanFunction">
      <ScanningRate ref="scanRate" />
    </view>
    <view
      class="content"
      :style="{ padding: '0', marginTop: '85rpx' }"
      v-if="activeTab === 'export' && hasReportFunction"
    >
      <ReportExport />
    </view>
    <view
      class="content"
      :style="{ padding: '0', marginTop: '85rpx' }"
      v-if="activeTab === 'blacklist' && hasBlacklistFunction"
    >
      <Blacklist />
    </view>
    <view
      class="content"
      :style="{ padding: '0', marginTop: '85rpx' }"
      v-if="activeTab === 'ganmaoling' && hasGanmaolingFunction"
    >
      <Ganmaoling />
    </view>
  </view>
  <view v-else-if="!functionLoading" class="page">
    <Empty text="您无权限访问" />
  </view>
</template>

<script>
import LoadingImg from "../../static/images/loading.png";
import ReportExport from "./reportExport/index.vue";
import ScanningRate from "./customerScanningRate/index.vue";
import Blacklist from "./blacklist/index.vue";
import Ganmaoling from "./ganmaoling/index.vue";
import Empty from "../../wigets/empty.vue";
import Water from "@/components/water/water.vue";
import { hasFunction } from "../../utils/utils.js";
export default {
  components: {
    ScanningRate,
    ReportExport,
    Blacklist,
    Ganmaoling,
    Empty,
    Water,
  },
  data() {
    return {
      hasScanFunction: false,
      hasReportFunction: false,
      hasBlacklistFunction: false,
      hasGanmaolingFunction: false,
      // hasScanFunction: true,
      // hasReportFunction: true,
      // hasBlacklistFunction: true,
      // hasGanmaolingFunction: true,
      loading: true,
      LoadingImg,
      activeTab: "scan",
      activeRange: 1,
      filterModalOpen: false,
      filterForm: { report: "", product: "" },
      filterDropdown: { report: false, product: false },
      filterDateRange: [],
      functionLoading: true,
      // functionLoading: false,
    };
  },
  created() {
    this.getFunc();
  },
  computed: {
    hasFunction() {
      return (
        this.hasScanFunction ||
        this.hasReportFunction ||
        this.hasBlacklistFunction ||
        this.hasGanmaolingFunction
      );
    },
  },
  methods: {
    closeDropdowns() {
      if (!this.$refs.scanRate) return;
      this.$refs.scanRate.closeDropdown();
    },
    async getFunc() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      await hasFunction([
        "scan-rate-list",
        "trace-code-task",
        "blacklist-customers-list",
        "large-medicines-list",
      ])
        .then((res) => {
          this.hasScanFunction = res[0];
          this.hasReportFunction = res[1];
          this.hasBlacklistFunction = res[2];
          this.hasGanmaolingFunction = res[3];
        })
        .catch((err) => {
          this.hasScanFunction = false;
          this.hasReportFunction = false;
          this.hasBlacklistFunction = false;
          this.hasGanmaolingFunction = false;
          // uni.hideLoading()
        });
      if (this.hasScanFunction) {
        this.active = "scan";
      } else if (this.hasReportFunction) {
        this.activeTab = "export";
      } else if (this.hasBlacklistFunction) {
        this.activeTab = "blacklist";
      } else if (this.hasGanmaolingFunction) {
        this.activeTab = "ganmaoling";
      }
      this.functionLoading = false;
      uni.hideLoading();
    },
  },
};
</script>

<style>
.page {
  box-sizing: border-box;
  height: calc(100vh - env(safe-area-inset-bottom));
  overflow-y: auto;
  box-sizing: border-box;
  background: #f3f6f9;
  padding-bottom: calc(env(safe-area-inset-bottom));
}

.content {
  padding: 30rpx;
  margin-top: 180rpx;
}

.tabs-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 116rpx;
  background: #f3f6f9;
  z-index: 90;
  margin-top: -8rpx;
}

.tabs {
  box-sizing: border-box;
  width: calc(100% - 16rpx);
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 12rpx;
  margin: 8rpx;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 18rpx 0;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.tab.active {
  background: #2c69ff;
  color: #fff;
}
</style>