cfc/cfc-web/src/views/admin/HealthReportEdit.vue

<template>
  <div class="health-report-edit">
    <div class="page-header">
      <el-page-header @back="goBack" :content="'编辑报告 #' + reportId"></el-page-header>
    </div>

    <el-card v-loading="loading" class="edit-card" v-if="!loading">
      <div slot="header" class="card-header">
        <span class="card-title">基本信息</span>
        <el-tag size="small" :type="typeTag">{{ typeLabel }}</el-tag>
      </div>

      <el-form label-width="120px" class="summary-form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="被检测人">
              <el-input v-model="payload.summary.personName" placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报告编号">
              <el-input v-model="payload.summary.reportNumber" placeholder="报告编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报告日期">
              <el-date-picker v-model="payload.summary.reportDate" type="date" value-format="yyyy-MM-dd" placeholder="报告日期" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="综合评分">
              <el-input-number v-model="payload.summary.overallScore" :min="0" :max="100" style="width:100%"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="菌群健康分">
              <el-input-number v-model="payload.summary.gutHealthScore" :min="0" :max="100" style="width:100%"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="慢性病分">
              <el-input-number v-model="payload.summary.chronicDiseaseScore" :min="0" :max="100" style="width:100%"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="营养均衡分">
              <el-input-number v-model="payload.summary.nutritionScore" :min="0" :max="100" style="width:100%"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="肠道年龄">
              <el-input v-model="payload.summary.gutAge" placeholder="肠道年龄"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="肠型">
              <el-input v-model="payload.summary.gutType" placeholder="肠型"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card v-loading="loading" class="edit-card" v-if="!loading && payload.indicators && payload.indicators.length">
      <div slot="header" class="card-header">
        <span class="card-title">健康指标 ({{ payload.indicators.length }})</span>
        <div>
          <el-button size="mini" @click="addIndicator">添加指标</el-button>
        </div>
      </div>
            <div class="adm-table-wrap">
<el-table :data="payload.indicators" border size="small" height="100%">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column label="分类" width="140">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.category" placeholder="分类"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="指标名称" width="160">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.indicatorName" placeholder="指标名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="数值" width="120">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.indicatorValue" placeholder="数值"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单位" width="80">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.unit" placeholder="单位"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="参考范围" width="140">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.refRange" placeholder="参考范围"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="{ row }">
            <el-select size="mini" v-model="row.status" style="width:100%">
              <el-option label="正常" value="normal"></el-option>
              <el-option label="偏高" value="high"></el-option>
              <el-option label="偏低" value="low"></el-option>
              <el-option label="异常" value="abnormal"></el-option>
              <el-option label="需注意" value="warning"></el-option>
              <el-option label="缺乏" value="deficient"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="症状" min-width="160">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.symptoms" placeholder="症状"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="70" fixed="right">
          <template slot-scope="{ $index }">
            <el-button size="mini" type="text" @click="removeIndicator($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </el-card>

    <el-card v-loading="loading" class="edit-card" v-if="!loading && payload.gutFlora && payload.gutFlora.length">
      <div slot="header" class="card-header">
        <span class="card-title">肠道菌群 ({{ payload.gutFlora.length }})</span>
        <div>
          <el-button size="mini" @click="addGutFlora">添加菌群</el-button>
        </div>
      </div>
            <div class="adm-table-wrap">
<el-table :data="payload.gutFlora" border size="small" height="100%">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column label="菌种名称" min-width="160">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.bacteriaName" placeholder="菌种名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="数值" width="120">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.bacteriaValue" placeholder="数值"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="正常范围" width="140">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.normalRange" placeholder="正常范围"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="水平" width="100">
          <template slot-scope="{ row }">
            <el-select size="mini" v-model="row.populationLevel" style="width:100%">
              <el-option label="正常" value="normal"></el-option>
              <el-option label="偏高" value="high"></el-option>
              <el-option label="偏低" value="low"></el-option>
              <el-option label="缺乏" value="deficient"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="检出率" width="100">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.detectionRate" placeholder="检出率"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="70" fixed="right">
          <template slot-scope="{ $index }">
            <el-button size="mini" type="text" @click="removeGutFlora($index)">删除</el-button>
          </template>
        </el-table-column>
    </el-card>

    <el-card v-loading="loading" class="edit-card" v-if="!loading && payload.diseaseRisks && payload.diseaseRisks.length">
      <div slot="header" class="card-header">
        <span class="card-title">疾病风险评估 ({{ payload.diseaseRisks.length }})</span>
        <div>
          <el-button size="mini" @click="addDiseaseRisk">添加风险</el-button>
        </div>
      </div>
            <div class="adm-table-wrap">
<el-table :data="payload.diseaseRisks" border size="small" height="100%">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column label="疾病名称" min-width="200">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.diseaseName" placeholder="疾病名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="风险值" width="140">
          <template slot-scope="{ row }">
            <el-input size="mini" v-model="row.riskValue" placeholder="风险值"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="风险等级" width="120">
          <template slot-scope="{ row }">
            <el-select size="mini" v-model="row.riskLevel" style="width:100%">
              <el-option label="低风险" value="low"></el-option>
              <el-option label="中风险" value="medium"></el-option>
              <el-option label="高风险" value="high"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="70" fixed="right">
          <template slot-scope="{ $index }">
            <el-button size="mini" type="text" @click="removeDiseaseRisk($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </el-card>

    <div class="action-bar" v-if="!loading">
      <el-button @click="goBack">取消</el-button>
      <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
    </div>
  
  </el-table>
  </div>

</div></template>

<script>
import { getHealthReportDetail, editHealthReport } from '@/api/admin'

export default {
  name: 'HealthReportEdit',
  props: {
    id: { type: [String, Number], required: true }
  },
  data() {
    return {
      reportId: this.id,
      reportType: '',
      loading: false,
      saving: false,
      subjectId: null,
      payload: {
        summary: {},
        indicators: [],
        gutFlora: [],
        diseaseRisks: []
      }
    }
  },
  computed: {
    typeLabel() {
      var map = { gut_flora: '菌群检测', physical_exam: '体检报告', dan: 'DAN测评', insurance: '保单', fortune: '家庭周报' }
      return map[this.reportType] || this.reportType || '健康报告'
    },
    typeTag() {
      var map = { gut_flora: 'success', physical_exam: 'primary', dan: 'warning', insurance: 'info', fortune: 'danger' }
      return map[this.reportType] || 'info'
    }
  },
  created() {
    this.loadDetail()
  },
  methods: {
    loadDetail() {
      var self = this
      this.loading = true
      getHealthReportDetail(this.reportId).then(function(res) {
        self.loading = false
        if (res.code !== 200 || !res.data) {
          self.$message.error((res.message || '加载报告详情失败'))
          return
        }
        var detail = res.data
        var report = detail.report || {}
        self.reportType = report.reportType || ''
        self.subjectId = report.subjectId || null
        self.applyDetail(detail)
      }).catch(function() {
        self.loading = false
        self.$message.error('加载报告详情异常')
      })
    },
    applyDetail(detail) {
      var payload = detail.payload
      if (payload && payload.summary) {
        // 后端已有 payload 快照，直接使用
        this.payload = this.normalizePayload(payload)
        // ParsedReportPayload.Flora 无 status 字段，从 DB 行合并回菌群状态
        var dbFlora = detail.gutFlora || []
        var pFlora = this.payload.gutFlora
        for (var i = 0; i < pFlora.length; i++) {
          if (pFlora[i].status === undefined || pFlora[i].status === null) {
            if (dbFlora[i] && dbFlora[i].status) {
              pFlora[i].status = dbFlora[i].status
            }
          }
        }
      } else {
        // 无 payload 快照，从 report + 列表组装
        var report = detail.report || {}
        this.payload = this.buildPayloadFromDetail(report, detail.indicators, detail.gutFlora, detail.diseaseRisks)
      }
    },
    normalizePayload(payload) {
      var summary = payload.summary || {}
      return {
        summary: {
          overallScore: this.pick(summary, 'overallScore'),
          gutHealthScore: this.pick(summary, 'gutHealthScore'),
          chronicDiseaseScore: this.pick(summary, 'chronicDiseaseScore'),
          nutritionScore: this.pick(summary, 'nutritionScore'),
          gutBalanceScore: this.pick(summary, 'gutBalanceScore', 'balanceScore'),
          gutDiversityScore: this.pick(summary, 'gutDiversityScore', 'diversityScore'),
          beneficialBacteriaScore: this.pick(summary, 'beneficialBacteriaScore', 'beneficialScore'),
          harmfulBacteriaScore: this.pick(summary, 'harmfulBacteriaScore', 'harmfulScore'),
          coreSpeciesScore: this.pick(summary, 'coreSpeciesScore', 'coreGenusScore'),
          shannonIndex: summary.shannonIndex || '',
          gutAge: summary.gutAge || '',
          gutType: summary.gutType || '',
          reportNumber: summary.reportNumber || '',
          reportDate: summary.reportDate || '',
          personName: summary.personName || ''
        },
        indicators: this.toArray(payload.indicators),
        gutFlora: this.toArray(payload.gutFlora),
        diseaseRisks: this.toArray(payload.diseaseRisks)
      }
    },
    buildPayloadFromDetail(report, indicators, gutFlora, diseaseRisks) {
      return {
        summary: {
          overallScore: this.pick(report, 'overallScore'),
          gutHealthScore: this.pick(report, 'gutHealthScore'),
          chronicDiseaseScore: this.pick(report, 'chronicDiseaseScore'),
          nutritionScore: this.pick(report, 'nutritionScore'),
          gutBalanceScore: this.pick(report, 'gutBalanceScore'),
          gutDiversityScore: this.pick(report, 'gutDiversityScore'),
          beneficialBacteriaScore: this.pick(report, 'beneficialBacteriaScore'),
          harmfulBacteriaScore: this.pick(report, 'harmfulBacteriaScore'),
          coreSpeciesScore: this.pick(report, 'coreSpeciesScore'),
          shannonIndex: report.shannonIndex || '',
          gutAge: report.gutAge || '',
          gutType: report.gutType || '',
          reportNumber: report.reportNumber || '',
          reportDate: this.formatDate(report.reportDate),
          personName: report.personName || ''
        },
        indicators: this.toArray(indicators),
        gutFlora: this.toArray(gutFlora),
        diseaseRisks: this.toArray(diseaseRisks)
      }
    },
    pick(obj, key1, key2) {
      if (obj == null) return null
      var v = obj[key1]
      if (v === undefined || v === null) {
        if (key2) v = obj[key2]
      }
      return v === undefined || v === null ? null : v
    },
    formatDate(d) {
      if (!d) return ''
      if (typeof d === 'string') {
        if (d.length >= 10) return d.substring(0, 10)
        return d
      }
      if (d instanceof Date) {
        var y = d.getFullYear()
        var m = ('0' + (d.getMonth() + 1)).slice(-2)
        var day = ('0' + d.getDate()).slice(-2)
        return y + '-' + m + '-' + day
      }
      // Jackson 默认将 java.util.Date 序列化为 epoch 毫秒数
      if (typeof d === 'number') {
        var dt = new Date(d)
        var yy = dt.getFullYear()
        var mm = ('0' + (dt.getMonth() + 1)).slice(-2)
        var dd = ('0' + dt.getDate()).slice(-2)
        return yy + '-' + mm + '-' + dd
      }
      return ''
    },
    toArray(list) {
      if (!list || !Array.isArray(list)) return []
      return list.map(function(item) {
        if (item && typeof item === 'object') return item
        return {}
      })
    },
    addIndicator() {
      this.payload.indicators.push({ category: '', indicatorName: '', indicatorValue: '', unit: '', refRange: '', status: 'normal', symptoms: '' })
    },
    removeIndicator(index) {
      this.payload.indicators.splice(index, 1)
    },
    addGutFlora() {
      this.payload.gutFlora.push({ bacteriaName: '', bacteriaValue: '', normalRange: '', populationLevel: 'normal', detectionRate: '', level: '' })
    },
    removeGutFlora(index) {
      this.payload.gutFlora.splice(index, 1)
    },
    addDiseaseRisk() {
      this.payload.diseaseRisks.push({ diseaseName: '', riskValue: '', riskLevel: 'low' })
    },
    removeDiseaseRisk(index) {
      this.payload.diseaseRisks.splice(index, 1)
    },
    handleSave() {
      var self = this
      var submit = {
        reportId: this.reportId,
        subjectId: this.subjectId || 0,
        payload: this.payload
      }
      this.saving = true
      editHealthReport(submit).then(function(res) {
        self.saving = false
        if (res.code === 200) {
          self.$message.success('保存成功')
          self.goBack()
        } else {
          self.$message.error(res.message || '保存失败')
        }
      }).catch(function(e) {
        self.saving = false
        self.$message.error('保存失败: ' + (e.message || ''))
      })
    },
    goBack() {
      this.$router.push({ name: 'HealthReports' })
    }
  }
}
</script>

<style scoped>
.health-report-edit { padding: 16px; }
.page-header { margin-bottom: 16px; }
.edit-card { margin-bottom: 16px; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 16px; font-weight: bold; }
.summary-form { margin-top: 8px; }
.action-bar { text-align: right; margin-top: 8px; }
</style>