huarun/traceCodePackages/traceabilityReport/pages/customerScanningRate/index.vue

<template>
  <view class="scan-rate-page">
    <view class="scan-rate-ranges-container">
      <view class="scan-rate-ranges">
        <view class="scan-rate-ranges-content">
          <!-- <view class="scan-rate-range" :class="{ 'scan-rate-active': activeRange === 1 }" @click="activeRange = 1">近7天 </view> -->
          <view class="scan-rate-range" :class="{ 'scan-rate-active': activeRange === 2 }" @click="activeRange = 2">当月 </view>
          <view class="scan-rate-range" :class="{ 'scan-rate-active': activeRange === 3 }" @click="activeRange = 3">上个月 </view>
          <!-- <view class="scan-rate-range" :class="{ 'scan-rate-active': activeRange === 4 }" @click="activeRange = 4">近60天 </view> -->
          <view class="scan-rate-range" :class="{ 'scan-rate-active': activeRange === 5 }" @click="activeRange = 5">当年 </view>
        </view>
      </view>
    </view>

    <view class="scan-rate-content">
      <ScanRateTable
        ref="scanTableVip"
        title="VIP客户扫码率"
        :api="`/bills/getVipScanRate`"
        :params="{
          type: activeRange + '',
          pageSize: 40,
        }"
        scanType="1"
        :products="products"
        :entNames="entNames"
        @dropdown-open="closeDropdown"
        tableType="VIP"
        headerFontSize="28rpx"
        tableHeightAuto="true"
        showAreaSearch="false" />
      <ScanRateTable
        ref="scanTableL2"
        title="二级客户扫码率"
        :api="`/bills/getSecondCustomerScanRate`"
        :params="{
          type: activeRange + '',
          pageSize: 40,
        }"
        scanType="2"
        :products="products"
        :entNames="entNames"
        @dropdown-open="closeDropdown"
        tableType="二级"
        headerFontSize="28rpx"
        tableHeightAuto="true"
        showAreaSearch="false" />
      <ScanRateTable
        ref="scanTableL3"
        title="三级客户扫码率"
        :api="`/bills/getThreeCustomerScanRate`"
        :params="{
          type: activeRange + '',
          pageSize: 40,
        }"
        scanType="3"
        :products="products"
        :entNames="entNames"
        @dropdown-open="closeDropdown"
        tableType="三级"
        headerFontSize="28rpx"
        tableHeightAuto="true"
        showAreaSearch="false" />
      <ScanRateTable
        ref="scanTableVariety"
        title="品种扫码率"
        :columns="varietyColumns"
        tableWidth="1200rpx"
        headerFontSize="24rpx"
        bodyFontColor="#000"
        :api="`/bills/geVarietyScanRate`"
        tableType="variety"
        :params="{
          type: activeRange + '',
        }"
        :showSummary="false"
        :products="products"
        :entNames="entNames"
        :regions="regions"
        dropdownDirection="top"
        @dropdown-open="closeDropdown" />
      <!-- <view class="scan-rate-footer">
        <view class="scan-rate-footer-btn" @click="onExport">导出数据</view>
      </view> -->
    </view>
  </view>
  <BottomScrollTip :text="'下滑查看更多内容'" />
</template>

<script>
import ScanRateTable from "./wigets/ScanRateTable.vue";
import request from "../../../request/index";
import BottomScrollTip from "../../../wigets/BottomScrollTip.vue";
export default {
  components: {
    ScanRateTable,
    BottomScrollTip,
  },
  data() {
    return {
      activeRange: 3,
      varietyColumns: [
        {
          key: "physicName",
          title: "品种名",
          fixed: true,
          width: "220rpx",
        },
        {
          key: "oneInScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>一级客户</view>
                  <view>入库扫码率</view>
                </view>`,
          width: "165rpx",
          unit: "%",
        },
        {
          key: "oneOutScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>一级客户</view>
                  <view>出库扫码率</view>
                </view>`,
          width: "165rpx",
          unit: "%",
        },
        {
          key: "twoCustomerInScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>二级客户</view>
                  <view>入库扫码率</view>
                </view>`,
          width: "165rpx",
          unit: "%",
        },
        {
          key: "twoCustomerOutScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>二级客户</view>
                  <view>出库扫码率</view>
                </view>`,
          width: "165rpx",
          unit: "%",
        },
        {
          key: "threeCustomerInScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>三级客户</view>
                  <view>入库扫码率</view>
                </view>`,
          width: "165rpx",
          unit: "%",
        },
        {
          key: "threeCustomerOutScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>三级客户</view>
                  <view>出库扫码率</view>
                </view>`,
          width: "165rpx",
          unit: "%",
        },
      ],
      products: [],
      regions: [],
      entNames: [],
    };
  },
  created() {
    Promise.all([this.getEntNameList(), this.getProviceList(), this.getDrugInfoName()]).then(() => {});
  },
  methods: {
    // onExport() {
    //   uni.showToast({ title: "开始导出", icon: "none" });
    // },
    getEntNameList() {
      request(
        "/bills/getEntNameList",
        {
          path: "customerScanningRate/wigets/ScanRateTable.vue",
        },
        "get",
      ).then((res) => {
        if (res.code == 200) {
          const _data = res.data || [];
          this.entNames = [
            { entNameId: null, entName: "全厂家" },
            ..._data.map((item) => {
              return { entNameId: item, entName: String(item) };
            }),
          ];
        }
      });
    },
    getProviceList() {
      request("/common/getProviceOfRegionList", {
        path: "customerScanningRate/wigets/ScanRateTable.vue",
      }).then((res) => {
        if (res.code == 200) {
          const _data = res.data;
          this.regions = [{ regionCode: null, regionName: "全片区" }, ..._data];
        }
      });
    },
    getDrugInfoName() {
      request("/bills/getDrugInfoName", {
        path: "customerScanningRate/wigets/ScanRateTable.vue",
      }).then((res) => {
        if (res.code == 200) {
          const _data = res.data;
          this.products = [
            {
              drugEntBaseInfoId: null,
              physicName: "全品种",
              pkgSpec: [],
            },
            ..._data.map((row) => ({
              drugEntBaseInfoId: row.drugEntBaseInfoId,
              physicName: row.physicName,
              pkgSpec: (row.pkgSpec || []).map((sp) => ({
                pkgSpec: sp,
                pkgSpecName: String(sp),
              })),
            })),
          ];
        }
      });
    },
    closeDropdown() {
      const r = this.$refs || {};
      const keys = ["scanTableVip", "scanTableL2", "scanTableL3", "scanTableVariety"];
      keys.forEach((k) => {
        const c = r[k];
        if (c && typeof c.closeDropdown === "function") c.closeDropdown();
        if (c && typeof c.closeAllTooltip === "function") c.closeAllTooltip();
      });
    },
  },
};
</script>

<style>
.scan-rate-ranges-container {
  position: fixed;
  top: 100rpx;
  left: 0;
  width: 100%;
  height: 140rpx;
  background: #f3f6f9;
  z-index: 90;
}

.scan-rate-ranges {
  padding: 20rpx 30rpx;
}

.scan-rate-ranges-content {
  display: flex;
  background: #fff;
  padding: 20rpx 30rpx;
  border-radius: 16rpx;
  justify-content: space-between;
}

.scan-rate-range {
  padding: 12rpx 24rpx;
  border-radius: 5rpx;
  background: rgb(240, 240, 240);
  font-size: 26rpx;
  width: 20%;
  text-align: center;
}

.scan-rate-range.scan-rate-active {
  background: #2c69ff;
  color: #fff;
}

/* .scan-rate-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12rpx 30rpx calc(env(safe-area-inset-bottom));
  background: #fff;
  z-index: 91;
}
.scan-rate-footer-btn {
  height: 86rpx;
  border-radius: 999rpx;
  background: #2c69ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  box-shadow: 0 8rpx 24rpx rgba(44, 105, 255, 0.35);
} */
</style>