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

<template>
  <div class="report-template-page admin-page">
    <!-- Tab 1: 模板列表 -->
    <el-card v-show="activeTab === 'list'">
      <div slot="header">
        <span>报告模板管理</span>
        <el-button size="small" type="primary" @click="openEditor(null)">+ 新增模板</el-button>
      </div>
            <div class="adm-table-wrap">
<el-table :data="templates" v-loading="loading" border stripe height="100%">
        <el-table-column prop="id" label="ID" width="60">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('id', $event)">ID{{ sortIcon('id') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="模板名称" min-width="160">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('name', $event)">模板名称{{ sortIcon('name') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reportType" label="报告类型" width="140">
          <template slot-scope="{ row }">{{ typeLabel(row.reportType) }}</template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template slot-scope="{ row }">
            <el-tag :type="row.isActive === 1 ? 'success' : 'info'" size="small">
              {{ row.isActive === 1 ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" width="170">
          <template slot-scope="{ row }">{{ formatTime(row.updatedAt) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" @click="openEditor(row)">编辑</el-button>
            <el-button size="mini" :type="row.isActive === 1 ? 'warning' : 'success'" @click="handleToggle(row)">
              {{ row.isActive === 1 ? '停用' : '启用' }}
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </el-card>

    <!-- Tab 2: 模板编辑器 -->
    <el-card v-show="activeTab === 'editor'">
      <div slot="header">
        <span>{{ isEdit ? '编辑模板' : '新增模板' }}</span>
        <el-button size="small" @click="activeTab = 'list'">返回列表</el-button>
      </div>

      <div class="report-template-form-wrap">
      <el-form ref="form" :model="form" label-width="110px" style="max-width:900px">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="模板名称" required>
              <el-input v-model="form.name" placeholder="如：肠道菌群标准报告" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报告类型" required>
              <el-select v-model="form.reportType" placeholder="选择报告类型" style="width:100%">
                <el-option label="肠道菌群 (gut_flora)" value="gut_flora" />
                <el-option label="DAN测评 (dan)" value="dan" />
                <el-option label="体检报告 (physical_exam)" value="physical_exam" />
                <el-option label="舌诊报告 (tongue)" value="tongue" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 固定块编辑区 -->
        <el-divider content-position="left">固定展示块（按顺序渲染）</el-divider>
        <div class="block-list">
          <div v-for="(block, bIdx) in form.fixedBlocks" :key="bIdx" class="block-item">
            <div class="block-header">
              <span class="block-type-tag">{{ blockTypeLabel(block.type) }}</span>
              <span class="block-title-display">{{ block.title || '(无标题)' }}</span>
              <el-button size="mini" type="text" class="block-move-up" @click="moveBlock(bIdx, -1)" :disabled="bIdx === 0">↑</el-button>
              <el-button size="mini" type="text" class="block-move-dn" @click="moveBlock(bIdx, 1)" :disabled="bIdx === form.fixedBlocks.length - 1">↓</el-button>
              <el-button size="mini" type="text" class="block-del" @click="removeBlock(bIdx)">删除</el-button>
            </div>
            <div class="block-body">
              <!-- score 块配置 -->
              <template v-if="block.type === 'score'">
                <el-form-item label="分数字段">
                  <el-checkbox-group v-model="block.scoreFields">
                    <el-checkbox label="overallScore">综合评分</el-checkbox>
                    <el-checkbox label="gutHealthScore">菌群健康</el-checkbox>
                    <el-checkbox label="chronicDiseaseScore">慢病控制</el-checkbox>
                    <el-checkbox label="nutritionScore">营养均衡</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </template>

              <!-- indicator 块配置 -->
              <template v-if="block.type === 'indicator'">
                <el-form-item label="分组标签">
                  <el-input v-model="block.groupLabel" placeholder="如：血脂指标" style="width:200px" />
                </el-form-item>
                <el-form-item label="指标名称">
                  <el-select v-model="block.indicatorNames" multiple filterable placeholder="搜索指标名称" style="width:100%">
                    <el-option v-for="ind in indicatorList" :key="ind.name" :label="ind.name" :value="ind.name" />
                  </el-select>
                </el-form-item>
              </template>

              <!-- list 块配置 -->
              <template v-if="block.type === 'list'">
                <el-form-item label="列表来源">
                  <el-select v-model="block.listKey" style="width:200px">
                    <el-option label="菌种详情" value="flora" />
                    <el-option label="益生菌种" value="probiotic" />
                    <el-option label="分类学" value="taxonomy" />
                    <el-option label="食物推荐" value="food" />
                  </el-select>
                </el-form-item>
                <el-form-item label="块标题">
                  <el-input v-model="block.title" placeholder="块显示标题" style="width:200px" />
                </el-form-item>
              </template>

              <!-- text 块配置 -->
              <template v-if="block.type === 'text'">
                <el-form-item label="标题">
                  <el-input v-model="block.title" style="width:200px" />
                </el-form-item>
                <el-form-item label="内容">
                  <el-input v-model="block.content" type="textarea" :rows="3" />
                </el-form-item>
              </template>
            </div>
          </div>
        </div>

        <el-button size="small" type="dashed" @click="addBlock" style="margin-top:8px">+ 添加固定块</el-button>

        <!-- 自由显示配置 -->
        <el-divider content-position="left">自由显示配置</el-divider>
        <el-form-item label="启用自由显示">
          <el-switch v-model="form.freeDisplay.enabled" :active-value="true" :inactive-value="false" />
          <span class="hint-text">开启后，未配置在固定块的指标将追加到末尾</span>
        </el-form-item>
        <el-form-item label="追加分组名" v-if="form.freeDisplay.enabled">
          <el-input v-model="form.freeDisplay.groupName" placeholder="如：其他指标" style="width:200px" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
          <el-button @click="handlePreview">预览效果</el-button>
        </el-form-item>
      </el-form>
      </div>
    </el-card>

    <!-- 预览对话框 -->
    <el-dialog title="模板预览" :visible.sync="previewVisible" width="700px">
      <div v-loading="previewLoading">
        <div v-for="(block, bi) in previewBlocks" :key="bi" class="preview-block">
          <div class="preview-block-title">{{ block.title }}</div>
          <!-- score -->
          <div v-if="block.type === 'score'" class="preview-score">
            <div v-for="item in block.items" :key="item.label" class="preview-score-item">
              <span>{{ item.label }}: {{ item.value }}</span>
            </div>
          </div>
          <!-- indicator -->
          <div v-else-if="block.type === 'indicator'" class="preview-indicator">
            <div v-for="(item, ii) in block.items" :key="ii" class="preview-ind-item">
              <span class="ind-name">{{ item.name }}</span>
              <span class="ind-value">{{ item.value }} {{ item.unit }}</span>
              <span class="ind-status" :class="'status-' + item.status">{{ item.status }}</span>
            </div>
          </div>
          <!-- list -->
          <div v-else-if="block.type === 'list'" class="preview-list">
            <table class="preview-table">
              <thead>
                <tr v-for="(col, ci) in block.columns" :key="ci">
                  <th>{{ col.label }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, li) in block.items" :key="li">
                  <td v-for="(col, ci) in block.columns" :key="ci">{{ item[col.key] || '--' }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- text -->
          <div v-else class="preview-text">{{ block.content }}</div>
        </div>
        <div v-if="!previewBlocks.length" class="empty-hint">暂无数据，请先保存模板</div>
      </div>
      <div slot="footer">
        <el-button @click="previewVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getReportTemplates, saveReportTemplate, deleteReportTemplate, toggleReportTemplate, getAvailableIndicators } from '@/api/reportTemplate'
import SortMixin from '@/mixins/SortMixin'

export default {
  name: 'ReportTemplateManage',
    components: {},
  mixins: [SortMixin],
  data() {
    return {
      activeTab: 'list',
      loading: false,
      saving: false,
      templates: [],
      sortableColumns: { id: 'ID', name: '模板名称' },
      indicatorList: [],
      isEdit: false,
      previewVisible: false,
      previewLoading: false,
      previewBlocks: [],
      form: this.emptyForm()
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 280
    }
  },
  mounted() { this.fetchTemplates() },
  methods: {
    loadList() {
      this.fetchTemplates()
    },
    emptyForm() {
      return {
        id: null,
        name: '',
        reportType: 'gut_flora',
        fixedBlocks: [
          { type: 'score', title: '健康评分', scoreFields: ['overallScore', 'gutHealthScore', 'chronicDiseaseScore'] },
          { type: 'indicator', title: '指标', groupLabel: '血脂指标', indicatorNames: [] }
        ],
        freeDisplay: { enabled: true, groupName: '其他指标' }
      }
    },
    fetchTemplates() {
      this.loading = true
      var params = {}
      if (this.sortState.length > 0) params.sort = this.sortState
      getReportTemplates(params).then(res => {
        this.templates = res.data || []
      }).finally(() => { this.loading = false })
    },
    fetchIndicators() {
      getAvailableIndicators({ domain: '' }).then(res => {
        this.indicatorList = res.data || []
      }).catch(() => {})
    },
    typeLabel(rt) {
      const map = { gut_flora: '肠道菌群', dan: 'DAN测评', physical_exam: '体检报告', tongue: '舌诊' }
      return map[rt] || rt
    },
    blockTypeLabel(t) {
      const map = { score: '评分', indicator: '指标', list: '列表', text: '文本' }
      return map[t] || t
    },
    openEditor(row) {
      this.fetchIndicators()
      if (row) {
        this.isEdit = true
        try {
          var cfg = JSON.parse(row.config || '{}')
          this.form = {
            id: row.id,
            name: row.name,
            reportType: row.reportType,
            fixedBlocks: cfg.fixedBlocks || [],
            freeDisplay: cfg.freeDisplay || { enabled: true, groupName: '其他指标' }
          }
        } catch (e) {
          this.form = this.emptyForm()
        }
      } else {
        this.isEdit = false
        this.form = this.emptyForm()
      }
      this.activeTab = 'editor'
    },
    addBlock() {
      this.form.fixedBlocks.push({ type: 'indicator', title: '新块', groupLabel: '', indicatorNames: [] })
    },
    removeBlock(idx) {
      this.form.fixedBlocks.splice(idx, 1)
    },
    moveBlock(idx, dir) {
      var list = this.form.fixedBlocks
      var newIdx = idx + dir
      if (newIdx < 0 || newIdx >= list.length) return
      var tmp = list[idx]
      list[idx] = list[newIdx]
      list[newIdx] = tmp
    },
    handleSave() {
      if (!this.form.name || !this.form.reportType) {
        this.$message.error('请填写名称和报告类型')
        return
      }
      this.saving = true
      var config = {
        fixedBlocks: this.form.fixedBlocks.map(function(b) {
          var block = { type: b.type, title: b.title || '' }
          if (b.type === 'score') block.items = b.scoreFields || []
          else if (b.type === 'indicator') { block.indicatorNames = b.indicatorNames || []; block.groupLabel = b.groupLabel || '' }
          else if (b.type === 'list') { block.listKey = b.listKey || ''; block.title = b.title || '' }
          else if (b.type === 'text') { block.content = b.content || '' }
          return block
        }),
        freeDisplay: this.form.freeDisplay
      }
      var payload = Object.assign({}, this.form, { config: JSON.stringify(config) })
      delete payload.fixedBlocks
      delete payload.freeDisplay
      saveReportTemplate(payload).then(res => {
        this.$message.success('保存成功')
        this.activeTab = 'list'
        this.fetchTemplates()
      }).catch(() => { this.$message.error('保存失败') }).finally(() => { this.saving = false })
    },
    handleDelete(row) {
      this.$confirm('确定删除该模板？', '提示', { type: 'warning' }).then(() => {
        deleteReportTemplate(row.id).then(() => {
          this.$message.success('删除成功')
          this.fetchTemplates()
        }).catch(() => { this.$message.error('删除失败') })
      }).catch(function() {})
    },
    handleToggle(row) {
      toggleReportTemplate({ id: row.id, isActive: row.isActive === 1 ? 0 : 1 }).then(() => {
        this.fetchTemplates()
      }).catch(() => { this.$message.error('操作失败') })
    },
    handlePreview() {
      this.previewLoading = true
      this.previewVisible = true
      // 模拟预览：用默认 gut_flora payload 渲染
      var mockPayload = {
        summary: { overallScore: 85, gutHealthScore: 78, chronicDiseaseScore: 90, nutritionScore: 72 },
        indicators: [
          { indicatorName: '总胆固醇', value: '5.2', unit: 'mmol/L', refRange: '3.1-5.2', status: 'normal', category: '血脂' },
          { indicatorName: '甘油三酯', value: '1.8', unit: 'mmol/L', refRange: '0.56-1.7', status: 'high', category: '血脂' },
          { indicatorName: '血红蛋白', value: '135', unit: 'g/L', refRange: '115-150', status: 'normal', category: '血常规' }
        ],
        gutFlora: [{ bacteriaName: '双歧杆菌', bacteriaValue: '4.2', normalRange: '3-6', populationLevel: 'normal' }],
        diseaseRisks: [{ diseaseName: '心血管疾病', riskValue: '12%', riskLevel: 'low' }]
      }
      setTimeout(() => {
        this.previewBlocks = this.renderPreview(this.form.fixedBlocks, mockPayload)
        this.previewLoading = false
      }, 300)
    },
    renderPreview(blocks, payload) {
      var result = []
      for (var i = 0; i < blocks.length; i++) {
        var b = blocks[i]
        if (b.type === 'score') {
          var items = []
          var s = payload.summary || {}
          var fieldMap = { overallScore: '综合', gutHealthScore: '菌群健康', chronicDiseaseScore: '慢病控制', nutritionScore: '营养均衡' }
          if (b.items) {
            for (var j = 0; j < b.items.length; j++) {
              var f = b.items[j]
              if (s[f] != null) items.push({ label: fieldMap[f] || f, value: s[f] })
            }
          }
          if (items.length > 0) result.push({ type: 'score', title: b.title, items: items })
        } else if (b.type === 'indicator') {
          var filtered = (payload.indicators || []).filter(function(ind) {
            return b.indicatorNames && b.indicatorNames.indexOf(ind.indicatorName) >= 0
          })
          if (filtered.length > 0) result.push({ type: 'indicator', title: b.groupLabel || b.title, items: filtered })
        } else if (b.type === 'list') {
          if (b.listKey === 'flora' && payload.gutFlora && payload.gutFlora.length) {
            result.push({ type: 'list', title: b.title, columns: [{ key: 'bacteriaName', label: '菌种' }, { key: 'bacteriaValue', label: '数值' }, { key: 'normalRange', label: '正常范围' }, { key: 'populationLevel', label: '状态' }], items: payload.gutFlora })
          }
        } else if (b.type === 'text') {
          result.push({ type: 'text', title: b.title, content: b.content })
        }
      }
      // 自由显示
      if (this.form.freeDisplay && this.form.freeDisplay.enabled) {
        var remaining = (payload.indicators || []).filter(function(ind) {
          for (var j = 0; j < blocks.length; j++) {
            if (blocks[j].type === 'indicator' && blocks[j].indicatorNames && blocks[j].indicatorNames.indexOf(ind.indicatorName) >= 0) return false
          }
          return true
        })
        if (remaining.length > 0) {
          result.push({ type: 'indicator', title: this.form.freeDisplay.groupName || '其他指标', items: remaining })
        }
      }
      return result
    },

  }
}
</script>

<style scoped>
.report-template-page { padding: 20px; }
.block-list { border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 12px; }
.block-item { border-bottom: 1px solid #f0f0f0; padding: 12px 16px; }
.block-item:last-child { border-bottom: none; }
.block-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.drag-handle { cursor: move; color: #bbb; font-size: 16px; }
.block-type-tag { background: #f0f9ff; color: #2c7be5; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.block-title-display { color: #333; font-size: 14px; }
.block-del { margin-left: auto; }
.hint-text { margin-left: 12px; color: #999; font-size: 12px; }
.block-list { border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 12px; }
.block-item { border-bottom: 1px solid #f0f0f0; padding: 12px 16px; }
.block-item:last-child { border-bottom: none; }
.block-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.block-type-tag { background: #f0f9ff; color: #2c7be5; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.block-title-display { color: #333; font-size: 14px; }
.block-del { margin-left: auto; }
.block-move-up, .block-move-dn { color: #909399; }
.preview-block { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.preview-block-title { font-weight: bold; font-size: 15px; margin-bottom: 10px; color: #303133; }
.preview-score-item { display: inline-block; background: #f5f7fa; padding: 4px 12px; margin: 4px; border-radius: 4px; }
.preview-ind-item { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.ind-name { flex: 1; font-size: 13px; }
.ind-value { font-size: 13px; color: #666; margin: 0 12px; }
.ind-status { font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.status-normal { background: #e8f5e9; color: #2e7d32; }
.status-high { background: #ffebee; color: #c62828; }
.status-low { background: #fff3e0; color: #e65100; }
.preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.preview-table th, .preview-table td { border: 1px solid #eee; padding: 6px 10px; text-align: left; }
.preview-table th { background: #f5f7fa; font-weight: 600; }
.preview-text { font-size: 14px; color: #555; line-height: 1.7; white-space: pre-wrap; }
.empty-hint { color: #bbb; text-align: center; padding: 40px; }
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
</style>