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

<template>
  <div class="assessment-admin admin-page">
    <el-card class="config-card">
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">💰 积分配置</span>
      </div>
      <el-form :model="pointsConfig" label-width="120px">
        <el-form-item label="完成获得积分">
          <el-input-number v-model="pointsConfig.pointsValue" :min="1" :max="1000" />
          <span class="form-tip">分</span>
        </el-form-item>
        <el-form-item label="1积分等于">
          <el-input-number v-model="pointsConfig.pointsValueYuan" :min="0.01" :max="10" :precision="2" />
          <span class="form-tip">元</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="savePointsConfig">保存配置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="materials-card">
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">📚 测评资料</span>
        <el-input v-model="keyword" placeholder="搜索测评资料..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
        <div class="admin-page-actions">
          <el-button type="primary" size="small" @click="showCreateDialog">添加资料</el-button>
        </div>
      </div>
      <div class="table-scroll-wrap-sm">
      <el-table :max-height="tableHeight" :data="filteredData" border stripe>
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="content" label="内容" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'" size="small">
              {{ scope.row.status === 'active' ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="160" />
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="editMaterial(row)">编辑</el-button>
            <el-dropdown trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
              <el-button size="mini">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="toggle" :icon="row.status === 'active' ? 'el-icon-circle-close' : 'el-icon-circle-check'">
                  {{ row.status === 'active' ? '停用' : '启用' }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </el-card>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <el-form :model="materialForm" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="materialForm.title" placeholder="请输入测评资料标题" />
        </el-form-item>
        <el-form-item label="内容介绍">
          <el-input type="textarea" v-model="materialForm.content" :rows="6" placeholder="请输入测评详细介绍" />
        </el-form-item>
        <el-form-item label="封面图片(可选)">
          <el-input v-model="materialForm.coverImage" placeholder="图片URL地址" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveMaterial">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAssessmentMaterials, createAssessmentMaterial, updateAssessmentMaterial, getAssessmentConfig, updateAssessmentConfig } from '@/api/assessment'

export default {
  name: 'AssessmentAdmin',
  data() {
    return {
      pointsConfig: {
        pointsValue: 100,
        pointsValueYuan: 0.01
      },
      materials: [],
      dialogVisible: false,
      dialogTitle: '添加测评资料',
      materialForm: {
        id: null,
        title: '',
        content: '',
        coverImage: ''
      },
      keyword: ''
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    },
    filteredData() {
      if (!this.keyword) return this.materials
      const kw = this.keyword.toLowerCase()
      return this.materials.filter(item =>
        [item.title, item.content].some(v => (v||'').toLowerCase().includes(kw))
      )
    }
  },
  mounted() {
    this.loadConfig()
    this.loadMaterials()
  },
  methods: {
    handleSearch() {},
    async loadConfig() {
      try {
        const res = await getAssessmentConfig()
        if (res.data) {
          this.pointsConfig = {
            pointsValue: res.data.pointsValue || 100,
            pointsValueYuan: res.data.pointsValueYuan || 0.01
          }
        }
      } catch (e) {
        console.error('加载配置失败', e)
      }
    },
    async loadMaterials() {
      try {
        const res = await getAssessmentMaterials()
        this.materials = res.data || []
      } catch (e) {
        console.error('加载资料失败', e)
      }
    },
    async savePointsConfig() {
      try {
        await updateAssessmentConfig(this.pointsConfig)
        this.$message.success('配置保存成功')
      } catch (e) {
        this.$message.error('保存失败')
      }
    },
    showCreateDialog() {
      this.dialogTitle = '添加测评资料'
      this.materialForm = { id: null, title: '', content: '', coverImage: '' }
      this.dialogVisible = true
    },
    editMaterial(row) {
      this.dialogTitle = '编辑测评资料'
      this.materialForm = { ...row }
      this.dialogVisible = true
    },
    async saveMaterial() {
      if (!this.materialForm.title) {
        this.$message.warning('请输入标题')
        return
      }
      try {
        if (this.materialForm.id) {
          await updateAssessmentMaterial(this.materialForm.id, this.materialForm)
        } else {
          await createAssessmentMaterial(this.materialForm)
        }
        this.dialogVisible = false
        this.loadMaterials()
        this.$message.success('保存成功')
      } catch (e) {
        this.$message.error('保存失败')
      }
    },
    async toggleStatus(row) {
      const newStatus = row.status === 'active' ? 'inactive' : 'active'
      try {
        await updateAssessmentMaterial(row.id, { status: newStatus })
        this.loadMaterials()
        this.$message.success('状态更新成功')
      } catch (e) {
        this.$message.error('更新失败')
      }
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'toggle':
          this.toggleStatus(row)
          break
      }
    }
  }
}
</script>

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

.config-card {
  margin-bottom: 20px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.form-tip {
  margin-left: 10px;
  color: #909399;
}

.materials-card ::v-deep .el-card__body {
  padding: 0;
}
</style>