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

<template>
  <Water></Water>
  <view class="nav" :style="{ paddingTop: statusBarHeight + 'px' }" @click.stop="closeDropdowns">
    <text class="nav-back" :style="{ top: statusBarHeight + 'px' }" @click="onBack"></text>
    <view class="nav-title">客户扫码率</view>
  </view>
  <view class="page" @click.stop="closeDropdowns">
    <view class="header-card" :style="{ paddingTop: statusBarHeight + 60 + 'px' }">
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">等级：{{ scanType == 1 ? "VIP" : scanType == 2 ? "二级" : "三级" }}客户</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">片区：{{ regionName }}</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">品种：{{ physicName || "全品种" }}</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">规格：{{ spkSpec || "全规格" }}</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">厂家：{{ produceEntName || "全厂家" }}</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">时间区间：{{ dateRange }}</text>
      </view>
      <view class="selector-wrap" @click.stop>
        <input class="selector-input" v-model="customerInput.customerName" placeholder="选择客户" @focus="openDropdown" @input="onInputChange" />
        <view class="selector-arrow" :class="{ open: dropdownOpen }" @click="toggleDropdown"></view>
        <view class="dropdown" v-show="dropdownOpen" @click.stop>
          <scroll-view
            v-if="customers.length && !customerLoading"
            scroll-y
            :style="{ maxHeight: '300rpx' }"
            lower-threshold="20"
            @scrolltolower="getCustomerInfo">
            <view class="dropdown-item" v-for="(c, i) in customers" :key="i" @click="selectCustomer(c)">{{ c.customerName || "--" }}</view>
            <view v-if="customerHasMore" class="customer-loading-wrap">
              <image src="../../../../static/images/loading.png" mode="scaleToFill" class="loading-icon" />
            </view>
          </scroll-view>
          <view v-else-if="customerLoading" class="customer-loading-wrap">
            <image src="../../../../static/images/loading.png" mode="scaleToFill" class="loading-icon" />
          </view>
          <view v-else class="dropdown-item">暂无数据</view>
        </view>
      </view>
    </view>

    <view class="card">
      <ScanRateTable
        ref="scanRateTable"
        :api="`/bills/getScanRateDetail`"
        :columns="columns"
        :tableBodyHeight="tableBodyHeight"
        :pageSize="20"
        title="筛选条件"
        :showHeader="true"
        summaryBold="true"
        tableType="customerDetail"
        :params="queryParams"
        :summaryFontColor="'#2c69ff'"
        :products="products"
        :regions="regions"
        :entNames="entNames"
        :product="physicName"
        :drugEntBaseInfoId="drugEntBaseInfoId"
        :spec="spkSpec"
        :entName="produceEntName"
        :regionCode="regionCode"
        :regionName="regionName"
        @dropdown-open="closeDropdown"
        @filter-change="onTableFilterChange"
        :showAreaSearch="false" />
    </view>
  </view>
</template>

<script>
import ScanRateTable from "../wigets/ScanRateTable.vue";
import Water from "@/components/water/water.vue";
import request from "../../../../request/index.js";
export default {
  components: {
    ScanRateTable,
    Water,
  },
  data() {
    return {
      customerLevel: "",
      rangeType: "",
      regionCode: "",
      drugEntBaseInfoId: "",
      scanType: "",
      statusBarHeight: 20,
      regionName: "",
      physicName: "",
      spkSpec: "",
      produceEntName: "",
      customerPage: 1,
      customerPageSize: 20,
      customerTotal: null,
      customerHasMore: true,
      customerLoading: false,
      customers: [],
      customerInput: { customerName: "" },
      customerDebounceTimer: null,
      selectedCustomer: "",
      dropdownOpen: false,
      totalCount: 30,
      isLoading: false,
      list: [],
      windowHeight: 0,
      columns: [
        {
          key: "custemerName",
          title: "客户名称",
          underline: false,
          fixed: false,
          width: "",
        },
        {
          key: "inScanRate",
          title: "入库扫码率",
          fixed: false,
          width: "",
          unit: "%",
        },
        {
          key: "outScanRate",
          title: "出库扫码率",
          fixed: false,
          width: "",
          unit: "%",
        },

        // {
        //   key: "selfExaminationRate",
        //   title: "自验证率",
        //   fixed: false,
        //   width: "",
        //   unit: "%",
        // },
      ],
      products: [],
      regions: [],
      entNames: [],
    };
  },
  created() {
    Promise.all([this.getEntNameList(), this.getProviceList(), this.getDrugInfoName()]).then(() => {});
  },
  onLoad(options) {
    const info = uni.getSystemInfoSync();
    this.statusBarHeight = info.statusBarHeight || 20;
    this.windowHeight = info.windowHeight;
    // this.list = this.genRows(Math.min(10, this.totalCount));

    this.rangeType = options.type || 1;
    this.regionCode = options.regionCode || "";
    this.drugEntBaseInfoId = this.safeDecode(options.drugEntBaseInfoId || "");
    this.scanType = options.scanType || "1";
    this.physicName = this.safeDecode(options.physicName || "");
    this.regionName = this.safeDecode(options.regionName || "");
    this.spkSpec = this.safeDecode(options.spkSpec || "");
    this.produceEntName = this.safeDecode(options.produceEntName || "");
    this.customerLevel = this.scanType == 1 ? "VIP" : this.scanType == 2 ? "二级" : "三级";
    this.getCustomerInfo();
  },
  onShareAppMessage() {
    return {
      title: "客户扫码率详情",
      path: this.buildSharePath(),
    };
  },
  onShareTimeline() {
    return {
      title: "客户扫码率详情",
      query: this.buildShareQuery(),
    };
  },
  watch: {
    "customerInput.customerName": {
      handler(newVal, oldVal) {
        if (!newVal || newVal !== oldVal) {
          if (this.customerDebounceTimer) clearTimeout(this.customerDebounceTimer);
          this.customerDebounceTimer = setTimeout(() => {
            this.customerPage = 1;
            this.customers = [];
            this.customerHasMore = true;
            this.getCustomerInfo();
          }, 500);
        }
      },
      deep: true,
    },
  },
  computed: {
    dateRange() {
      const t = Number(this.rangeType) || 1;
      const now = new Date();
      const pad = (n) => (n < 10 ? "0" + n : "" + n);
      const fmt = (d) => `${d.getFullYear()}.${pad(d.getMonth() + 1)}.${pad(d.getDate())}`;
      let start;
      let end;
      if (t === 2) {
        const y = now.getFullYear();
        const m = now.getMonth();
        start = new Date(y, m, 1);
        end = new Date(y, m + 1, 0);
      } else if (t === 3) {
        const y = now.getFullYear();
        const m = now.getMonth();
        start = new Date(y, m - 1, 1);
        end = new Date(y, m, 0);
      } else if (t === 4) {
        end = now;
        start = new Date(now.getTime() - 59 * 24 * 60 * 60 * 1000);
      } else {
        end = now;
        start = new Date(now.getTime() - 6 * 24 * 60 * 60 * 1000);
      }
      return `${fmt(start)}-${fmt(end)}`;
    },
    queryParams() {
      return {
        type: this.rangeType,
        regionCode: this.regionCode,
        drugEntBaseInfoId: this.drugEntBaseInfoId,
        customerName: this.customerInput?.customerName,
        scanType: this.scanType,
        levelType: this.customerLevel,
        physicName: this.physicName == "全品种" ? "" : this.physicName,
        spkSpec: this.spkSpec == "全规格" ? "" : this.spkSpec,
        produceEntName: this.produceEntName == "全厂家" ? "" : this.produceEntName,
      };
    },
    tableBodyHeight() {
      // const rowHeight = 76; // rpx
      // if (this.totalCount >= 9) return `${rowHeight * 8.5}rpx`;
      // return "auto";
      const info = uni.getSystemInfoSync();
      const pixelRatio = 750 / info.windowWidth;
      const windowHeightRpx = this.windowHeight * pixelRatio;
      // Header card approx height: (statusBar + 60)px + content(approx 356rpx)
      const topPx = this.statusBarHeight + 60;
      const topRpx = topPx * pixelRatio + 356 + 24 + 24; // + margins
      const headerHeight = 80; // Table header
      return windowHeightRpx - topRpx - headerHeight - 20; // -20 safety
    },
  },
  methods: {
    closeDropdowns() {
      const r = this.$refs.scanRateTable;
      if (!r) return;
      if (typeof r.closeDropdown === "function") r.closeDropdown();
      if (typeof r.closeAllTooltip === "function") r.closeAllTooltip();
    },
    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),
                selected: this.produceEntName == 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.map((item) => ({
              regionCode: item.regionCode,
              regionName: item.regionName,
              selected: this.regionCode == item.regionCode,
            })),
          ];
        }
      });
    },
    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,
              selected: this.physicName == row.physicName,
              pkgSpec: (row.pkgSpec || []).map((sp) => ({
                pkgSpec: sp,
                pkgSpecName: String(sp),
                selected: this.spkSpec == sp,
              })),
            })),
          ];
        }
      });
    },
    safeDecode(value) {
      const raw = value == null ? "" : String(value);
      if (!raw) return "";
      try {
        return decodeURIComponent(raw);
      } catch (e) {
        return raw;
      }
    },
    buildSharePath() {
      return `/traceCodePackages/traceabilityReport/pages/customerScanningRate/detail/index?${this.buildShareQuery()}`;
    },
    buildShareQuery() {
      const type = this.rangeType;
      const regionCode = this.regionCode || "";
      const drugEntBaseInfoId = encodeURIComponent(this.drugEntBaseInfoId || "");
      const physicName = encodeURIComponent(this.physicName || "");
      const regionName = encodeURIComponent(this.regionName || "");
      const spkSpec = encodeURIComponent(this.spkSpec || "");
      const produceEntName = encodeURIComponent(this.produceEntName || "");
      const customerLevel = this.customerLevel || "";
      const scanType = this.scanType || "";
      return `type=${type}&regionCode=${regionCode}&drugEntBaseInfoId=${drugEntBaseInfoId}&physicName=${physicName}&regionName=${regionName}&spkSpec=${spkSpec}&produceEntName=${produceEntName}&scanType=${scanType}&customerLevel=${customerLevel}`;
    },
    getCustomerInfo() {
      if (!this.customerHasMore || this.customerLoading) return;
      this.customerLoading = true;
      request("/customer/info/getCustomerInfo", {
        customerName: this.customerInput?.customerName,
        name: this.physicName == "全品种" ? "" : this.physicName,
        drugEntBaseInfoId: this.drugEntBaseInfoId,
        spkSpec: this.spkSpec == "全规格" ? "" : this.spkSpec,
        produceEntName: this.produceEntName == "全厂家" ? "" : this.produceEntName,
        pageNum: this.customerPage,
        pageSize: this.customerPageSize,
        customerLevel: this.customerLevel,
        provinceCode: this.regionCode,
        path: "/traceabilityReport/pages/customerScanningRate/detail/index.vue",
      }).then((res) => {
        if (res.code == 200) {
          const _data = res.data || {};
          this.customerTotal = _data.total;
          if (this.customerTotal <= this.customers.length) {
            this.customerHasMore = false;
            return;
          } else {
            const list = Array.isArray(_data.list) ? _data.list : [];
            this.customers = [...this.customers, ...list];

            if (this.customerTotal <= this.customers.length) {
              this.customerHasMore = false;
            } else {
              this.customerPage++;
              this.customerHasMore = true;
            }
            // }
          }
        }
        setTimeout(() => {
          this.customerLoading = false;
        }, 200);
      });
    },
    openDropdown() {
      this.dropdownOpen = true;
    },
    toggleDropdown() {
      this.dropdownOpen = !this.dropdownOpen;
    },
    onInputChange(e) {
      const v = e?.detail?.value ?? this.customerInput;
      this.customerInput.customerName = v;
    },
    selectCustomer(c) {
      this.selectedCustomer = c;
      this.customerInput = c;
      this.dropdownOpen = false;
    },
    onTableFilterChange(filters) {
      this.regionCode = filters.regionCode || "";
      this.regionName = filters.regionName || "";
      this.drugEntBaseInfoId = filters.drugEntBaseInfoId || "";
      this.physicName = filters.physicName || "";
      this.spkSpec = filters.spkSpec || "";
      this.produceEntName = filters.produceEntName || "";
      this.customerPage = 1;
      this.customers = [];
      this.customerHasMore = true;
      this.getCustomerInfo();
    },
    closeDropdown() {
      this.dropdownOpen = false;
    },
    onBack() {
      try {
        uni.navigateBack();
      } catch (e) {}
    },
    onTableScrollToLower() {
      if (this.isLoading) return;
      if (this.list.length >= this.totalCount) return;
      this.isLoading = true;
      const remain = this.totalCount - this.list.length;
      const toAdd = Math.min(10, remain);
      setTimeout(() => {
        const more = this.genRows(toAdd);
        this.list = this.list.concat(more);
        this.isLoading = false;
      }, 800);
    },
    genRows(n) {
      const res = [];
      const regions = ["山东医药", "江苏医药", "浙江医药", "广东医药", "湖南医药", "湖北医药"];
      const base = this.list.length;
      for (let i = 0; i < n; i++) {
        const name = regions[(base + i) % regions.length];
        res.push({ region: name, outRate: "0%", inRate: "0%" });
      }
      return res;
    },
  },
};
</script>

<style scoped>
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #2c69ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 36rpx;
  color: #fff;
  font-weight: 700;
}

.nav-back {
  position: absolute;
  left: 40rpx;
  top: 12rpx;
  width: 20rpx;
  height: 20rpx;
  color: #fff;
  border-left: 3rpx solid #fff;
  border-bottom: 3rpx solid #fff;
  transform: rotate(45deg) translateY(56rpx);
  margin-left: 40rpx;
}

.page {
  height: 100vh;
}

.card {
  margin: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  font-size: 32rpx;
}

/* .table-header {
  display: flex;
  background: #eaf2ff;
  font-weight: bold;
  color: #2c69ff;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}
.table-body {
  margin-top: 8rpx;
}
.row {
  display: flex;
  align-items: center;
}
.row:last-child {
  border-bottom: none;
}
.cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76rpx;
} */
.loading-row {
  justify-content: center;
}

.loading-wrapper {
  width: 100%;
  height: 76rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-icon {
  width: 40rpx;
  height: 40rpx;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* .total-row {
  font-weight: bold;
  color: #2c69ff;
} */
.header-card {
  background: #2c69ff;
  border-bottom-left-radius: 32rpx;
  border-bottom-right-radius: 32rpx;
  padding: 36rpx;
  color: #fff;
}

.meta {
  display: flex;
  align-items: center;
  margin: 14rpx 0;
}

.dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: #fff;
  margin-right: 20rpx;
}

.meta-text {
  font-size: 32rpx;
}

.selector-wrap {
  position: relative;
  margin-top: 16rpx;
}

.selector-input {
  width: 100%;
  height: 64rpx;
  border-radius: 32rpx;
  background: #fff;
  color: #333;
  padding: 0 72rpx 0 30rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.selector-arrow {
  position: absolute;
  right: 24rpx;
  bottom: 25rpx;
  width: 16rpx;
  height: 16rpx;
  border: 5rpx solid #2c69ff;
  border-top: none;
  border-left: none;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.selector-arrow.open {
  bottom: 18rpx;
  transform: rotate(225deg);
}

.dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 70rpx;
  background: #fff;
  border: 1rpx solid #eef0f4;
  border-radius: 12rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  z-index: 10;
  max-height: none;
}

.dropdown-item {
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  color: #333;
}

.dropdown-item + .dropdown-item {
  border-top: 1rpx solid #f0f2f5;
}

.customer-loading-wrap {
  width: 100%;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>