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

<template>
  <Water></Water>
  <view class="nav" :style="{ paddingTop: statusBarHeight + 'px' }">
    <text
      class="nav-back"
      :style="{ top: statusBarHeight + 'px' }"
      @click="onBack"
    ></text>
    <view class="nav-title">{{ title }}</view>
  </view>
  <view class="page">
    <view
      class="header-card"
      :style="{ paddingTop: statusBarHeight + 60 + 'px' }"
    >
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">所在省份：{{ customerProvinceName || "--" }}</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text"
          >客户等级：{{ customerLevel || "--" }}</text
        >
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">客户性质：{{ customerCategory || "--" }}</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">责任经理：{{ responsibleManager || "--" }}</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text"
          >累计预警次数：{{
            totalWarningAmount || totalWarningAmount == 0 ? totalWarningAmount : "--"
          }}</text
        >
      </view>
    </view>

    <view class="section-title">流转信息</view>

    <view class="card table-card">
      <scroll-view scroll-x="true" class="table-scroll">
        <view class="flow-table">
          <view class="flow-header">
            <view class="th col-time">单据时间</view>
            <view class="th col-type">单据类型</view>
            <view class="th col-product">产品名称</view>
            <view class="th col-batch">批号</view>
            <view class="th col-source">货源地</view>
            <view class="th col-qty">数量</view>
            <!-- <view class="th col-chain">链路</view> -->
          </view>
          <view class="flow-body">
            <view
              class="flow-row"
              v-for="(item, index) in flowList"
              :key="index"
            >
              <view class="td col-time">{{ formatBillTime(item.billTime) }}</view>
              <view class="td col-type">{{ item.billType }}</view>
              <view class="td col-product">{{ item.productName }}</view>
              <view class="td col-batch">{{ item.productBatchNo }}</view>
              <view class="td col-source">{{ item.regionName }}</view>
              <view class="td col-qty">{{ item.fromQty }}</view>
              <!-- <view class="td col-chain chain-text">{{ item.batchTraceLink }}</view> -->
            </view>
            <view v-if="flowList.length === 0" class="empty-row">暂无数据</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import Water from "@/components/water/water.vue";
import request from "../../../../request/index.js";
import { formatDate } from "../../../../utils/utils.js";

export default {
  components: {
    Water,
  },
  data() {
    return {
      title: "",
      customerProvinceName: "",
      customerLevel: "",
      customerCategory: "",
      responsibleManager: "",
      totalWarningAmount: 0,
      statusBarHeight: 20,
      flowList: [],
      loading: false,
    };
  },
  onLoad(options) {
    const info = uni.getSystemInfoSync();
    this.statusBarHeight = info.statusBarHeight || 20;
    const name = options.name ? decodeURIComponent(options.name) : "";
    const updatedTime = options.updatedTime || "";
    this.title = name || "报表详情";

    if (name && updatedTime) {
      this.fetchDetail(name, updatedTime);
    }
  },
  methods: {
    formatDate,
    formatBillTime(time) {
      if (!time) return "--";
      try {
        return formatDate(new Date(time), "YYYY-MM-DD HH:mm");
      } catch (e) {
        return time;
      }
    },
    onBack() {
      try {
        uni.navigateBack();
      } catch (e) {}
    },
    fetchDetail(customerName, updatedTime) {
      this.loading = true;
      uni.showLoading({ title: "加载中..." });
      request(
        `/report/ganmaoling/list/customers/${customerName}/date/${updatedTime}`,
        {
          path: "traceabilityReport/pages/ganmaoling/detail/index.vue",
        },
        "get",
      ).then((res) => {
        uni.hideLoading();
        if (res.code == 200 && res.data) {
          const d = res.data;
          this.customerProvinceName = d.customerProvinceName;
          this.customerLevel = d.customerLevel;
          this.customerCategory = d.customerCategory;
          this.responsibleManager = d.responsibleManager;
          this.totalWarningAmount = d.totalWarningAmount;
          this.flowList = d.reportDTOList || [];
        }
        this.loading = false;
      });
    },
  },
};
</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;
  margin-top: -6rpx;
}

.page {
  height: 100vh;
}

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

.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;
}

.section-title {
  position: relative;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin: 30rpx 30rpx 20rpx;
}

.section-title::after {
  content: "";
  position: absolute;
  left: -20rpx;
  bottom: 8rpx;
  width: 8rpx;
  height: 50%;
  background: #2c69ff;
  border-radius: 10px;
}

.table-card {
  padding: 0;
  overflow: hidden;
}

.table-scroll {
  width: 100%;
}

.flow-table {
  min-width: 1060rpx;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
}

.flow-header {
  display: flex;
  background: #f5f7fa;
  font-size: 26rpx;
  font-weight: bold;
  color: #2c69ff;
}

.flow-body {
  font-size: 26rpx;
  color: #666;
}

.flow-row {
  display: flex;
  border-bottom: 1rpx solid #ccc;
}

.flow-row:nth-child(even) {
  background-color: #f7f7f7;
}

.th,
.td {
  padding: 16rpx 10rpx;
  border-right: 1rpx solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: break-all;
  box-sizing: border-box;
  flex-shrink: 0;
}

.th {
  border-bottom: 1rpx solid #ccc;
}

.col-time {
  width: 220rpx;
}

.col-type {
  width: 160rpx;
}

.col-product {
  width: 200rpx;
}

.col-batch {
  width: 180rpx;
}

.col-source {
  width: 180rpx;
}

.col-qty {
  width: 120rpx;
}

.col-chain {
  width: 240rpx;
}

.chain-text {
  white-space: pre-wrap;
  text-align: left !important;
  font-size: 22rpx;
  line-height: 1.4;
  padding: 10rpx !important;
}

.td-group {
  display: flex;
  flex-direction: column;
  width: 480rpx;
  flex-shrink: 0;
}

.sub-row {
  display: flex;
  flex: 1;
  border-bottom: 1rpx solid #ccc;
}

.sub-row:last-child {
  border-bottom: none;
}
</style>