huarun/traceCodePackages/traceabilityReport/pages/index.vue

<template>
  <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-show="activeTab === 'scan' && hasScanFunction">
      <ScanningRate ref="scanRate" />
    </view>
    <view class="content" :style="{ padding: '0', marginTop: '85rpx' }"
      v-show="activeTab === 'export' && hasReportFunction">
      <ReportExport />
    </view>
    <view class="content" :style="{ padding: '0', marginTop: '85rpx' }"
      v-show="activeTab === 'blacklist' && hasBlacklistFunction">
      <Blacklist />
    </view>
    <view class="content" :style="{ padding: '0', marginTop: '85rpx' }"
      v-show="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 { hasFunction } from '../../utils/utils.js'
export default {
  components: {
    ScanningRate,
    ReportExport,
    Blacklist,
    Ganmaoling,
    Empty,
  },
  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
    }
  },
  methods: {
    closeDropdowns() {
      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(50rpx + env(safe-area-inset-bottom));
}

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

.tabs-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 116rpx;
  background: #f3f6f9;
  z-index: 99;
  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>