cfc/cfc-frontend/pages/dan-assessment/comparison.vue

<template>
  <view class="page">
    <view class="filter-bar">
      <view class="filter-item">{{ currentMemberName }} ▾</view>
      <picker :range="reportIds" @change="onReportIdChange">
        <view class="filter-item">{{ currentReportIdLabel }}</view>
      </picker>
      <picker :range="[ 'uploadIdA', 'uploadIdB' ]" @change="onUploadIdChange">
        <view class="filter-item">{{ currentUploadLabel }}</view>
      </picker>
    </view>

    <view v-if="loading" class="loading-wrap">
      <text class="loading-text">加载中...</text>
    </view>

    <view v-if="error" class="error-wrap">
      <text class="error-text">{{ error }}</text>
    </view>

    <view v-if="comparison" class="comparison-wrap">
      <view class="section-title">DAN 报告对比</view>

      <view class="comparison-info">
        <view class="info-item">
          <text class="label">首次上传</text>
          <text class="value">{{ firstUploadLabel }}</text>
        </view>
        <view class="info-item">
          <text class="label">最近上传</text>
          <text class="value">{{ secondUploadLabel }}</text>
        </view>
      </view>

      <view v-if="deltas && deltas.length > 0" class="deltas-list">
        <view v-for="(delta, di) in deltas" :key="di" class="delta-item">
          <view :class="delta.status === 'added' ? 'delta-added' : delta.status === 'removed' ? 'delta-removed' : 'delta-modified'">
            <text class="delta-code">{{ delta.code || '—' }}</text>
            <view class="delta-detail">
              <text v-if="delta.status === 'added'">新增</text>
              <text v-if="delta.status === 'removed'">删除</text>
              <text v-if="delta.status === 'modified'">修改</text>
              <text class="delta-name">{{ delta.name1 || '' }} → {{ delta.name2 || '' }}</text>
              <text v-if="delta.change">({{ delta.change }})</text>
              <text v-if="delta.valueDelta !== null">Δ：{{ delta.valueDelta }}</text>
              <text v-if="delta.categoryChanged">类别变化</text>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="empty-tip">两次上传无变化差异</view>
    </view>
    <view v-else class="empty-tip">暂无对比数据</view>
  </view>
</template>

<script>
import { getFamilyMemberList, getDanReportList, compareDanReports } from '@/utils/api'

export default {
  components: {},
  data() {
    return {
      memberId: null,
      reportIds: [],
      currentReportId: null,
      currentMemberName: '',
      currentReportIdLabel: '选择报告',
      currentUploadLabel: '选择上传',
      uploadIdA: null,
      uploadIdB: null,
      loading: true,
      error: null,
      comparison: null
    }
  },
  computed: {
    memberNames() {
      return this.memberId ? this.members.map(m => m.name || m.nickname || '').filter(Boolean) : []
    }
  },
  onLoad(options) {
    var self = this
    // 从 query 获取 memberId，或默认取当前登录成员
    if (options.memberId) {
      self.memberId = parseInt(options.memberId)
    }
    self.loadMembers()
  },
  methods: {
    loadMembers() {
      var self = this
      getFamilyMemberList({ visibleOnly: true }).then(function(res) {
        var arr = (res.data && res.data.list) || (res.data instanceof Array ? res.data : [])
        self.members = arr
        if (!self.memberId && arr.length > 0) {
          self.memberId = arr[0].id
        }
        self.loadReportIds()
      })
    },
    loadReportIds() {
      var self = this
      if (!self.memberId) {
        self.reportIds = []
        self.currentReportIdLabel = '选择成员后加载'
        return
      }
      getDanReportList({ memberId: self.memberId }).then(function(res) {
        self.reportIds = (res.data || []).map(function(u) { return String(u.id) })
        if (self.reportIds.length > 0) {
          self.currentReportId = self.reportIds[0]
          self.onReportIdChange(self.reportIds[0])
        }
      }).catch(function(e) {
        self.error = '获取报告列表失败'
        console.error(e)
      })
    },
    onReportIdChange(value) {
      this.currentReportId = value
      this.loadComparison()
    },
    onUploadIdChange(value, uploadType) {
      if (uploadType === 'A') {
        this.uploadIdA = value
      } else {
        this.uploadIdB = value
      }
      this.loadComparison()
    },
    loadComparison() {
      var self = this
      if (!self.uploadIdA || !self.uploadIdB) {
        self.comparison = null
        return
      }
      self.loading = true
      compareDanReports({ uploadIdA: self.uploadIdA, uploadIdB: self.uploadIdB }).then(function(res) {
        self.loading = false
        if (res.code !== 200) {
          self.error = res.message || '对比失败'
          return
        }
        self.comparison = res.data
        self.error = null
      }).catch(function(e) {
        self.loading = false
        self.error = '对比异常'
        console.error(e)
      })
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #F5F9FC;
  padding: 24rpx;
  box-sizing: border-box;
}
.filter-bar {
  display: flex;
  flex-direction: row;
  margin-bottom: 24rpx;
}
.filter-item {
  flex: 1;
  background: #FFFFFF;
  border: 1rpx solid #E2E8F0;
  border-radius: 16rpx;
  padding: 16rpx 24rpx;
  margin-right: 16rpx;
  font-size: 26rpx;
  color: #1E293B;
  text-align: center;
}
.filter-item:last-child { margin-right: 0; }

/* 对比区 */
.comparison-wrap { background: #FFFFFF; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 4rpx 16rpx rgba(30,41,59,0.06); }
.section-title { font-size: 30rpx; font-weight: 600; color: #1E293B; margin-bottom: 20rpx; }
.info-item { display: flex; align-items: center; margin-bottom: 16rpx; }
.label { font-size: 24rpx; color: #64748B; margin-right: 12rpx; }
.value { font-size: 24rpx; color: #1E293B; }
.deltas-list { margin-top: 24rpx; }
.delta-item { padding: 12rpx 0; border-bottom: 1rpx solid #E2E8F0; display: flex; align-items: center; }
.delta-code { flex: 1; font-size: 24rpx; color: #64748B; }
.delta-added { color: #32CD32; }
.delta-removed { color: #FF6B6B; }
.delta-modified { color: #FFA500; }
.empty-tip { padding: 60rpx 0; text-align: center; font-size: 26rpx; color: #94A3B8; }
</style>