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

<template>
  <div class="family-list admin-page">
    <el-card>
      <div slot="header" style="display:flex;justify-content:space-between;align-items:center">
        <span>我的家庭</span>
        <el-input v-model="keyword" placeholder="搜索家庭..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
      </div>
    <el-table :data="filteredFamilies" 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)" @dblclick.stop="onSortToggle('id')">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="familyName" label="家庭名称">
        <template slot="header">
          <span class="sort-header" @click.stop="onSortClick('familyName', $event)">家庭名称<span v-if="sortIndex('familyName') !== null" class="sort-index" :class="sortClass('familyName') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('familyName') }}</span>{{ sortIcon('familyName') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="memberCount" label="成员数" width="100">
        <template slot="header">
          <span class="sort-header" @click.stop="onSortClick('memberCount', $event)">成员数<span v-if="sortIndex('memberCount') !== null" class="sort-index" :class="sortClass('memberCount') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('memberCount') }}</span>{{ sortIcon('memberCount') }}</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)" @dblclick.stop="onSortToggle('createdAt')">绑定时间<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-column label="操作" width="200" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="handleEdit(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="view" icon="el-icon-view">查看详情</el-dropdown-item>
              <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    </el-card>
  </div>
</template>

<script>
import SortMixin from '@/mixins/SortMixin'
export default {
  mixins: [SortMixin],
  name: 'FamilyList',
  data() {
    return { loading: false, families: [], keyword: '', sortableColumns: { id: 'ID', createdAt: '绑定时间', familyName: '家庭名称', memberCount: '成员数' } }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 320
    },
    filteredFamilies() {
      if (!this.keyword) return this.families
      const kw = this.keyword.toLowerCase()
      return this.families.filter(f =>
        (f.familyName || '').toLowerCase().includes(kw) ||
        String(f.id).includes(kw)
      )
    }
  },
  created() { this.loadFamilies() },
  methods: {
    handleSearch() {
    },
    loadList() {
      this.loadFamilies()
    },
    async loadFamilies() {
      this.loading = true
      try {
        const token = localStorage.getItem('token')
        const baseURL = process.env.VUE_APP_BASE_API || ''
        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/guide/family/list', params, {
          headers: { Authorization: 'Bearer ' + token }
        })
        this.families = res.data?.data || []
      } catch (e) {
        this.$message?.error?.('加载家庭列表失败')
      } finally {
        this.loading = false
      }
    },
    viewFamily(row) {
      this.$router.push('/my-families/' + row.id)
    },
    handleEdit(row) {
      this.viewFamily(row)
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'view': this.viewFamily(row); break
        case 'edit': this.handleEdit(row); break
        case 'delete': this.$confirm('确认删除该家庭吗？', '提示', { type: 'warning' }).then(() => {}).catch(() => {}); break
      }
    }
  }
}
</script>

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