cfc/cfc-web/src/views/teacher/GrowthRecords.vue

<template>
  <div class="growth-records admin-page">
    <el-card>
      <div slot="header">
        <span>成长记录</span>
        <el-input v-model="keyword" placeholder="搜索成长记录..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
        <el-select v-model="sourceFilter" placeholder="来源筛选" clearable size="small" style="float: right; width: 140px; margin-left: 10px;" @change="loadRecords">
          <el-option label="全部" value="" />
          <el-option label="手动创建" value="manual" />
          <el-option label="测评录入" value="assessment" />
          <el-option label="报告上传" value="upload" />
          <el-option label="补充材料" value="supplement" />
        </el-select>
      </div>
      <el-table :data="filteredRecords" v-loading="loading" border stripe :max-height="tableHeight">
        <el-table-column prop="id" label="ID" width="70" />
        <el-table-column prop="childName" label="孩子" width="100" />
        <el-table-column prop="sourceType" label="来源" width="100">
          <template slot-scope="scope">
            <el-tag size="mini" :type="sourceTagType(scope.row.sourceType)">{{ sourceLabel(scope.row.sourceType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="recordTitle" label="标题" min-width="140" show-overflow-tooltip />
        <el-table-column prop="reportDate" label="报告日期" width="110" />
        <el-table-column prop="overallScore" label="综合得分" width="90" />
        <el-table-column prop="parentRecordId" label="主记录ID" width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.parentRecordId">{{ scope.row.parentRecordId }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="isLatest" label="最新" width="60">
          <template slot-scope="scope">
            <span v-if="scope.row.isLatest === 1">&#10003;</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="170" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'GrowthRecords',
  data() {
    return {
      loading: false,
      records: [],
      sourceFilter: '',
      keyword: ''
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    },
    filteredRecords() {
      if (!this.keyword) return this.records
      var kw = this.keyword.toLowerCase()
      return this.records.filter(function(r) {
        return (r.recordTitle && r.recordTitle.toLowerCase().indexOf(kw) !== -1) ||
               (r.childName && r.childName.toLowerCase().indexOf(kw) !== -1)
      })
    }
  },
  created() {
    this.loadRecords()
  },
  methods: {
    sourceLabel(type) {
      var map = { manual: '手动创建', assessment: '测评录入', upload: '报告上传', supplement: '补充材料' }
      return map[type] || (type || '-')
    },
    sourceTagType(type) {
      var map = { manual: 'info', assessment: 'success', upload: 'warning', supplement: '' }
      return map[type] || 'info'
    },
    handleSearch() {},
    async loadRecords() {
      this.loading = true
      try {
        var baseURL = process.env.VUE_APP_BASE_API || ''
        var token = localStorage.getItem('token')
        var axios = this.$axios || (await import('axios')).default
        var params = {}
        if (this.sourceFilter) {
          params.sourceType = this.sourceFilter
        }
        var res = await axios.post(baseURL + '/api/growth/record/list', params, {
          headers: { Authorization: 'Bearer ' + token }
        })
        this.records = res.data && res.data.data ? res.data.data : (res.data || [])
      } catch (e) {
        this.$message && this.$message.error && this.$message.error('加载成长记录失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>