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

<template>
  <div class="dan-execution admin-page">
    <el-card>
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">DAN测评服务执行管理</span>
        <div class="filter-bar">
          <el-select v-model="statusFilter" placeholder="执行状态" clearable @change="handleSearch" style="width: 140px; margin-right: 10px;">
            <el-option label="全部状态" value="" />
            <el-option label="进行中" value="pending" />
            <el-option label="已完成" value="completed" />
            <el-option label="已确认" value="confirmed" />
          </el-select>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
      </div>

      <el-table :data="list" v-loading="loading" border stripe empty-text="暂无执行记录">
        <el-table-column label="ID" prop="id" width="80" />
        <el-table-column label="订单ID" prop="assessmentOrderId" width="100" />
        <el-table-column label="家庭ID" prop="familyId" width="100" />
        <el-table-column label="孩子ID" prop="childId" width="100" />
        <el-table-column label="评估师ID" prop="assessorId" width="100" />
        <el-table-column label="评估师状态" width="130">
          <template slot-scope="{ row }">
            <div class="status-cell">
              <i :class="executionIconClass(row.assessorStatus)" :style="{ color: executionIconColor(row.assessorStatus) }"></i>
              <el-tag :type="executionStatusType(row.assessorStatus)" size="mini">
                {{ executionStatusLabel(row.assessorStatus) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规划师ID" prop="plannerId" width="100" />
        <el-table-column label="规划师状态" width="130">
          <template slot-scope="{ row }">
            <div v-if="row.plannerId" class="status-cell">
              <i :class="executionIconClass(row.plannerStatus)" :style="{ color: executionIconColor(row.plannerStatus) }"></i>
              <el-tag :type="executionStatusType(row.plannerStatus)" size="mini">
                {{ executionStatusLabel(row.plannerStatus) }}
              </el-tag>
            </div>
            <span v-else style="color: #999;">—</span>
          </template>
        </el-table-column>
        <el-table-column label="用户确认" width="110">
          <template slot-scope="{ row }">
            <div class="status-cell">
              <i :class="row.userConfirmed === 1 ? 'el-icon-circle-check' : 'el-icon-time'"
                 :style="{ color: row.userConfirmed === 1 ? '#67c23a' : '#909399' }"></i>
              <el-tag :type="row.userConfirmed === 1 ? 'success' : 'info'" size="mini">
                {{ row.userConfirmed === 1 ? '已确认' : '未确认' }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="160">
          <template slot-scope="{ row }">{{ formatTime(row.createdAt) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" icon="el-icon-view" plain @click="viewDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 50]"
        :page-size="size"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        class="pagination-wrap"
      />
    </el-card>

    <!-- 详情 Dialog -->
    <el-dialog title="执行记录详情" :visible.sync="detailDialogVisible" width="700px">
      <div v-if="currentRecord" v-loading="detailLoading">
        <el-descriptions :column="2" border size="small">
          <el-descriptions-item label="执行ID">{{ currentRecord.id }}</el-descriptions-item>
          <el-descriptions-item label="订单ID">{{ currentRecord.assessmentOrderId }}</el-descriptions-item>
          <el-descriptions-item label="家庭ID">{{ currentRecord.familyId }}</el-descriptions-item>
          <el-descriptions-item label="孩子ID">{{ currentRecord.childId }}</el-descriptions-item>
          <el-descriptions-item label="评估师ID">{{ currentRecord.assessorId }}</el-descriptions-item>
          <el-descriptions-item label="评估师状态">
            <div class="status-cell">
              <i :class="executionIconClass(currentRecord.assessorStatus)" :style="{ color: executionIconColor(currentRecord.assessorStatus) }"></i>
              <el-tag :type="executionStatusType(currentRecord.assessorStatus)" size="mini">
                {{ executionStatusLabel(currentRecord.assessorStatus) }}
              </el-tag>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="评估师完成时间">{{ formatTime(currentRecord.assessorCompletedAt) }}</el-descriptions-item>
          <el-descriptions-item label="评估师备注">{{ currentRecord.assessorNotes || '-' }}</el-descriptions-item>
          <el-descriptions-item label="规划师ID">{{ currentRecord.plannerId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="规划师状态">
            <div v-if="currentRecord.plannerId" class="status-cell">
              <i :class="executionIconClass(currentRecord.plannerStatus)" :style="{ color: executionIconColor(currentRecord.plannerStatus) }"></i>
              <el-tag :type="executionStatusType(currentRecord.plannerStatus)" size="mini">
                {{ executionStatusLabel(currentRecord.plannerStatus) }}
              </el-tag>
            </div>
            <span v-else>无</span>
          </el-descriptions-item>
          <el-descriptions-item label="规划师完成时间">{{ formatTime(currentRecord.plannerCompletedAt) }}</el-descriptions-item>
          <el-descriptions-item label="规划师备注">{{ currentRecord.plannerNotes || '-' }}</el-descriptions-item>
          <el-descriptions-item label="用户确认">
            <div class="status-cell">
              <i :class="currentRecord.userConfirmed === 1 ? 'el-icon-circle-check' : 'el-icon-time'"
                 :style="{ color: currentRecord.userConfirmed === 1 ? '#67c23a' : '#909399' }"></i>
              <el-tag :type="currentRecord.userConfirmed === 1 ? 'success' : 'info'" size="mini">
                {{ currentRecord.userConfirmed === 1 ? '已确认' : '未确认' }}
              </el-tag>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="确认时间">{{ formatTime(currentRecord.userConfirmedAt) }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatTime(currentRecord.createdAt) }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ formatTime(currentRecord.updatedAt) }}</el-descriptions-item>
        </el-descriptions>

        <div v-if="currentRecord.assessorSettlement || currentRecord.plannerSettlement" style="margin-top: 20px;">
          <h4>结算信息</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item v-if="currentRecord.assessorSettlement" label="评估师结算金额">
              ¥{{ (currentRecord.assessorSettlement.commissionAmount / 100).toFixed(2) }}
            </el-descriptions-item>
            <el-descriptions-item v-if="currentRecord.assessorSettlement" label="评估师结算状态">
              <el-tag :type="settlementStatusType(currentRecord.assessorSettlement.status)" size="mini">
                {{ settlementStatusLabel(currentRecord.assessorSettlement.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item v-if="currentRecord.plannerSettlement" label="规划师结算金额">
              ¥{{ (currentRecord.plannerSettlement.commissionAmount / 100).toFixed(2) }}
            </el-descriptions-item>
            <el-descriptions-item v-if="currentRecord.plannerSettlement" label="规划师结算状态">
              <el-tag :type="settlementStatusType(currentRecord.plannerSettlement.status)" size="mini">
                {{ settlementStatusLabel(currentRecord.plannerSettlement.status) }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DanExecution',
  data() {
    return {
      list: [],
      loading: false,
      page: 1,
      size: 10,
      total: 0,
      statusFilter: '',
      detailDialogVisible: false,
      detailLoading: false,
      currentRecord: null
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        // TODO: 调用后端 API 获取执行记录列表
        // const res = await this.$axios.post('/api/admin/dan-execution/list', {
        //   page: this.page,
        //   size: this.size,
        //   status: this.statusFilter
        // })
        // this.list = res.data.data.records
        // this.total = res.data.data.total
        this.list = []
        this.total = 0
      } catch (e) {
        console.error('加载执行记录失败', e)
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    async viewDetail(row) {
      this.detailDialogVisible = true
      this.detailLoading = true
      try {
        const res = await this.$axios.post(`/api/dan-execution/detail/${row.id}`)
        if (res.data.code === 200) {
          this.currentRecord = res.data.data
        } else {
          this.$message.error(res.data.message || '加载失败')
        }
      } catch (e) {
        console.error('加载详情失败', e)
        this.$message.error('加载失败')
      } finally {
        this.detailLoading = false
      }
    },
    handleSearch() {
      this.page = 1
      this.loadData()
    },
    handleSizeChange(val) {
      this.size = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.page = val
      this.loadData()
    },
    formatTime(time) {
      if (!time) return '-'
      return new Date(time).toLocaleString('zh-CN')
    },
    executionStatusType(status) {
      if (status === 'completed') return 'success'
      if (status === 'pending') return 'warning'
      if (status === 'rejected') return 'danger'
      return 'info'
    },
    executionStatusLabel(status) {
      if (status === 'completed') return '已完成'
      if (status === 'pending') return '进行中'
      if (status === 'rejected') return '已拒绝'
      return status || '-'
    },
    executionIconClass(status) {
      if (status === 'completed') return 'el-icon-circle-check'
      if (status === 'pending') return 'el-icon-loading'
      if (status === 'rejected') return 'el-icon-circle-close'
      return 'el-icon-info'
    },
    executionIconColor(status) {
      if (status === 'completed') return '#67c23a'
      if (status === 'pending') return '#e6a23c'
      if (status === 'rejected') return '#f56c6c'
      return '#909399'
    },
    settlementStatusType(status) {
      if (status === 'settled') return 'success'
      if (status === 'pending') return 'warning'
      if (status === 'failed') return 'danger'
      return 'info'
    },
    settlementStatusLabel(status) {
      if (status === 'settled') return '已结算'
      if (status === 'pending') return '待结算'
      if (status === 'failed') return '失败'
      return status || '-'
    }
  }
}
</script>

<style scoped>
.admin-page {
  padding: 20px;
}

.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-page-title {
  font-size: 18px;
  font-weight: bold;
}

.filter-bar {
  display: flex;
  align-items: center;
}

.status-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-cell i {
  font-size: 16px;
}

.pagination-wrap {
  margin-top: 20px;
  text-align: right;
}
</style>