cfc/cfc-web/src/views/nutritionist/HealthCheckins.vue

<template>
  <div class="health-checkins page-container">
    <el-card>
      <div slot="header"><span>健康打卡</span></div>
      <el-table :data="checkins" v-loading="loading" border stripe :max-height="tableHeight">
        <el-table-column prop="id" label="ID" width="80">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('id', $event)">ID<span v-if="sortIndex('id') !== null" class="sort-index" :class="sortClass('id') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('id') }}</span>{{ sortIcon('id') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="childName" label="孩子" width="120">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('childName', $event)">孩子<span v-if="sortIndex('childName') !== null" class="sort-index" :class="sortClass('childName') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('childName') }}</span>{{ sortIcon('childName') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="checkinType" label="打卡类型" width="120">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('checkinType', $event)">打卡类型<span v-if="sortIndex('checkinType') !== null" class="sort-index" :class="sortClass('checkinType') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('checkinType') }}</span>{{ sortIcon('checkinType') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="note" label="备注">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('note', $event)">备注<span v-if="sortIndex('note') !== null" class="sort-index" :class="sortClass('note') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('note') }}</span>{{ sortIcon('note') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="打卡时间" width="180">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('createdAt', $event)">打卡时间<span v-if="sortIndex('createdAt') !== null" class="sort-index" :class="sortClass('createdAt') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('createdAt') }}</span>{{ sortIcon('createdAt') }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import SortMixin from '@/mixins/SortMixin'
export default {
  mixins: [SortMixin],
  name: 'HealthCheckins',
  computed: {
    tableHeight() {
      return window.innerHeight - 280
    }
  },
  data() { return { loading: false, checkins: [], sortableColumns: { id: 'ID', createdAt: '打卡时间', childName: '孩子', checkinType: '打卡类型', note: '备注' } } },
  created() { this.loadCheckins() },
  methods: {
    loadList() { this.loadCheckins() },
    async loadCheckins() {
      this.loading = true
      try {
        const baseURL = process.env.VUE_APP_BASE_API || ''
        const token = localStorage.getItem('token')
        const axios = this.$axios || (await import('axios')).default
        const params = {}
        if (this.sortState.length > 0) params.sort = this.sortState
        const res = await axios.post(baseURL + '/api/health/checkin/list', params, {
          headers: { Authorization: 'Bearer ' + token }
        })
        this.checkins = res.data?.data || []
      } catch (e) {
        this.$message?.error?.('加载健康打卡失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
</style>