health-front/pages_order/checkup/checkupReport/reportTableView.vue

<template>
  <view class="card card-detect">
    <view class="flex card-header">
      <view class="title">检测项目</view>
    </view>
    <view class="section">
      <view class="table">
        <view class="table-cell table-th" v-for="item in headers" :key="item.key">
          {{ item.label }}
        </view>
        <template v-for="(row, index) in list">
          <view :class="['table-cell', index % 2 ? 'is-double-row' : '']" v-for="item in headers" :key="getKey(row.id, item.key)" :style="item.style">
            <template v-if="item.key === 'weight'">
              <uv-rate :value="row.weight" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" readonly></uv-rate>
            </template>
            <template v-else-if="item.key === 'done'">
              {{ row.done ? '是' : '否' }}
            </template>
            <template v-else>
              {{ row[item.key] }}
            </template>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>

  export default {
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        headers: [
          { key: 'name', label: '医学检测项目' },
          { key: 'significance', label: '检测意义', style: 'justify-content: flex-start;' },
          { key: 'sampling', label: '采样' },
          { key: 'weight', label: '权重' },
          { key: 'done', label: '是否检测' },
        ],
      }
    },
    methods: {
      getKey(id, key) {
        return `${id}-${key}`
      },
      onDownload(result) {
        console.log('onDownload')

        // todo
        uni.downloadFile({
            url: result, // 请求地址
            success: (response) => {
                if (response.statusCode === 200) {
                    console.log('下载成功');
                    // 继续处理文件保存
                    const fileManager = wx.getFileSystemManager();
                    fileManager.saveFile({
                        tempFilePath: response.tempFilePath,
                        success: (res) => {
                            console.log(res, '下载成功');
                            uni.hideLoading();
                        },
                        fail: (err) => {
                            console.error('保存文件失败', err);
                        }
                    });
                }
            }
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import './style.scss';

  .table {
    width: auto;
    overflow-x: auto;
    display: grid;
    grid-template-columns: 385rpx 385rpx auto auto auto;
    border: 2rpx solid #E6E6E6;
    border-radius: 24rpx;

    &-cell {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 53rpx 8rpx;
      box-sizing: border-box;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 1.5;
      color: #080808;
      background: #FCFBFF;
      border-right: 2rpx solid #E6E6E6;
      border-bottom: 2rpx solid #E6E6E6;

      &:nth-child(5n) {
        border-right: none;
      }

      &:nth-last-child(-n+5) {
        border-bottom: none;
      }
      
      &.is-double-row {
        background: #F7F4FF;
      }
    }

    &-th {
      white-space: nowrap;
      padding: 24rpx 32rpx;
      color: #252545;
      background: #E6E6E6;
    }
  }
</style>