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

<template>
  <div class="plan-management">
    <div class="header">
      <h2>方案管理</h2>
      <div class="filters">
        <el-select v-model="statusFilter" placeholder="状态筛选" clearable @change="loadPlans" style="width:160px">
          <el-option label="全部" value="" />
          <el-option label="待审核(generated)" value="generated" />
          <el-option label="已审核(reviewed)" value="reviewed" />
          <el-option label="已激活(active)" value="active" />
          <el-option label="已完成(completed)" value="completed" />
          <el-option label="已驳回(rejected)" value="rejected" />
        </el-select>
        <el-input v-model="familySearch" placeholder="搜索家庭ID" style="width:180px;margin-left:10px" @keyup.enter="loadPlans" />
        <el-button type="primary" @click="loadPlans" style="margin-left:10px">查询</el-button>
      </div>
    </div>

    <el-table :data="plans" border stripe style="width:100%" :max-height="tableHeight">
      <el-table-column prop="id" label="方案ID" width="80" />
      <el-table-column prop="familyId" label="家庭ID" width="80" />
      <el-table-column prop="childId" label="孩子ID" width="80" />
      <el-table-column prop="name" label="方案名称" min-width="180" />
      <el-table-column label="状态" width="100">
        <template slot-scope="{ row }">
          <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="进度" width="120">
        <template slot-scope="{ row }">
          {{ row.completedDays || 0 }} / {{ row.totalDays || '-' }} 天
        </template>
      </el-table-column>
      <el-table-column prop="source" label="来源" width="100" />
      <el-table-column prop="createdAt" label="创建时间" width="160" />
      <el-table-column prop="reviewedAt" label="审核时间" width="160" />
      <el-table-column label="操作" width="180">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="showDetail(row)">详情</el-button>
          <el-button v-if="row.status === 'generated'" size="mini" type="success" @click="handleApprove(row)">批准</el-button>
          <el-button v-if="row.status === 'reviewed'" size="mini" @click="handleActivate(row)">激活</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="方案详情" :visible.sync="detailVisible" width="600px">
      <el-form label-width="100px" v-if="currentPlan">
        <el-form-item label="方案ID">{{ currentPlan.id }}</el-form-item>
        <el-form-item label="家庭ID">{{ currentPlan.familyId }}</el-form-item>
        <el-form-item label="孩子ID">{{ currentPlan.childId }}</el-form-item>
        <el-form-item label="方案名称">{{ currentPlan.name }}</el-form-item>
        <el-form-item label="状态">
          <el-tag :type="statusType(currentPlan.status)">{{ statusLabel(currentPlan.status) }}</el-tag>
        </el-form-item>
        <el-form-item label="周期">{{ currentPlan.totalDays }} 天</el-form-item>
        <el-form-item label="进度">{{ currentPlan.completedDays || 0 }} / {{ currentPlan.totalDays || '-' }} 天</el-form-item>
        <el-form-item label="来源">{{ currentPlan.source }}</el-form-item>
        <el-form-item label="创建时间">{{ currentPlan.createdAt }}</el-form-item>
        <el-form-item label="审核时间">{{ currentPlan.reviewedAt || '-' }}</el-form-item>
        <el-form-item label="激活时间">{{ currentPlan.activatedAt || '-' }}</el-form-item>
        <el-form-item label="备注">
          <pre style="white-space:pre-wrap;background:#f5f5f5;padding:12px;border-radius:6px;">{{ currentPlan.remark }}</pre>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { listFamilyPlans, reviewPlan, activatePlan } from '@/api/assessment'

export default {
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      plans: [],
      statusFilter: '',
      familySearch: '',
      detailVisible: false,
      currentPlan: null
    }
  },
  created() { this.loadPlans() },
  methods: {
    async loadPlans() {
      const res = await listFamilyPlans({
        status: this.statusFilter || null,
        familyId: this.familySearch ? Number(this.familySearch) : null
      })
      if (res.code === 200) this.plans = res.data || []
    },
    statusType(s) {
      const map = { generated: 'warning', reviewed: 'primary', active: 'success', completed: 'info', rejected: 'danger' }
      return map[s] || 'info'
    },
    statusLabel(s) {
      const map = { generated: '待审核', reviewed: '已审核', active: '已激活', completed: '已完成', rejected: '已驳回' }
      return map[s] || s
    },
    showDetail(row) {
      this.currentPlan = row
      this.detailVisible = true
    },
    async handleApprove(row) {
      const res = await reviewPlan({ planId: row.id, approved: true })
      if (res.code === 200) { this.$message.success('已批准'); this.loadPlans() }
    },
    async handleActivate(row) {
      await this.$confirm('激活后将生成任务，确定激活？')
      const res = await activatePlan({ planId: row.id })
      if (res.code === 200) { this.$message.success('已激活'); this.loadPlans() }
    }
  }
}
</script>

<style scoped>
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.filters { display: flex; align-items: center; }
</style>