cfc/cfc-web/src/views/Families.vue

<template>
  <div class="page-container">
    <el-card>
      <div slot="header">
        <span>家庭管理</span>
        <el-button
          type="primary"
          size="small"
          style="float: right"
          @click="handleRefresh"
          :loading="loading"
        >
          刷新
        </el-button>
      </div>

      <!-- 搜索 -->
      <el-form :inline="true" :model="searchForm" style="margin-bottom: 20px">
        <el-form-item label="家庭名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入家庭名称"
            clearable
            @keyup.enter.native="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
        </el-form>

        <!-- 家庭列表 -->
        <el-table
          :data="tableData"
          border
          v-loading="loading"
          style="width: 100%"
          :max-height="tableHeight"
        >
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="家庭名称" width="200"></el-table-column>
        <el-table-column prop="inviteCode" label="邀请码" width="150"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" 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="viewMembers" icon="el-icon-user">查看成员</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-pagination
        style="margin-top: 20px; text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.size"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </el-card>

    <!-- 编辑家庭弹窗 -->
    <el-dialog
      title="编辑家庭"
      :visible.sync="editDialogVisible"
      width="500px"
    >
      <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px">
        <el-form-item label="家庭名称" prop="name">
          <el-input v-model="editForm.name" placeholder="请输入家庭名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit" :loading="submitting">确定</el-button>
      </div>
    </el-dialog>

    <!-- 查看成员弹窗 -->
    <el-dialog
      title="家庭成员"
      :visible.sync="membersDialogVisible"
      width="800px"
    >
      <div v-if="membersData.family">
        <el-descriptions :column="2" border style="margin-bottom: 20px">
          <el-descriptions-item label="家庭名称">{{ membersData.family.name }}</el-descriptions-item>
          <el-descriptions-item label="邀请码">{{ membersData.family.inviteCode }}</el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">家长</el-divider>
        <el-table
          :data="membersData.parents"
          border
          style="width: 100%; margin-bottom: 20px"
          :max-height="300"
          v-if="membersData.parents && membersData.parents.length > 0"
        >
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="nickname" label="昵称" width="150"></el-table-column>
          <el-table-column prop="realName" label="真实姓名" width="120"></el-table-column>
          <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
        </el-table>
        <el-empty v-else description="暂无家长" :image-size="60"></el-empty>

        <el-divider content-position="left">孩子</el-divider>
        <el-table
          :data="membersData.children"
          border
          style="width: 100%"
          :max-height="300"
          v-if="membersData.children && membersData.children.length > 0"
        >
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="nickname" label="昵称" width="150"></el-table-column>
          <el-table-column prop="totalPoints" label="总积分" width="100">
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.totalPoints || 0 }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间">
            <template slot-scope="scope">
              {{ formatDate(scope.row.createdAt) }}
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无孩子" :image-size="60"></el-empty>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getFamilyList, getFamilyMembers, updateFamily, deleteFamily } from '@/api/admin'

export default {
  name: 'Families',
  computed: {
    tableHeight() {
      return window.innerHeight - 340
    }
  },
  data() {
    return {
      loading: false,
      submitting: false,
      tableData: [],
      searchForm: {
        name: ''
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      editDialogVisible: false,
      editForm: {
        id: null,
        name: ''
      },
      editRules: {
        name: [
          { required: true, message: '请输入家庭名称', trigger: 'blur' }
        ]
      },
      membersDialogVisible: false,
      membersData: {
        family: null,
        parents: [],
        children: []
      }
    }
  },
  mounted() {
    // 检查是否有从用户管理跳转过来的familyId参数
    const familyId = this.$route.query.familyId
    if (familyId) {
      this.handleViewMembersById(parseInt(familyId))
    }
    this.loadFamilies()
  },
  methods: {
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'viewMembers': this.handleViewMembers(row); break;
        case 'edit': this.handleEdit(row); break;
        case 'delete': this.handleDelete(row); break;
      }
    },
    async loadFamilies() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.current,
          size: this.pagination.size,
          ...this.searchForm
        }
        const res = await getFamilyList(params)
        this.tableData = res.data.records || res.data || []
        this.pagination.total = res.data.total || this.tableData.length
      } catch (error) {
        this.$message.error(error.message || '加载家庭列表失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.pagination.current = 1
      this.loadFamilies()
    },
    handleReset() {
      this.searchForm = {
        name: ''
      }
      this.handleSearch()
    },
    handleRefresh() {
      this.loadFamilies()
    },
    handleSizeChange(val) {
      this.pagination.size = val
      this.pagination.current = 1
      this.loadFamilies()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.loadFamilies()
    },
    handleEdit(row) {
      this.editForm = {
        id: row.id,
        name: row.name
      }
      this.editDialogVisible = true
    },
    async submitEdit() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          this.submitting = true
          try {
            await updateFamily(this.editForm.id, this.editForm)
            this.$message.success('更新成功')
            this.editDialogVisible = false
            this.loadFamilies()
          } catch (error) {
            this.$message.error(error.message || '更新失败')
          } finally {
            this.submitting = false
          }
        }
      })
    },
    handleDelete(row) {
      this.$confirm(`确定要删除家庭 "${row.name}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteFamily(row.id)
          this.$message.success('删除成功')
          this.loadFamilies()
        } catch (error) {
          this.$message.error(error.message || '删除失败')
        }
      }).catch(() => {})
    },
    async handleViewMembers(row) {
      await this.handleViewMembersById(row.id)
    },
    async handleViewMembersById(familyId) {
      this.loading = true
      try {
        const res = await getFamilyMembers(familyId)
        this.membersData = {
          family: res.data.family,
          parents: res.data.parents || [],
          children: res.data.children || []
        }
        this.membersDialogVisible = true
      } catch (error) {
        this.$message.error(error.message || '加载家庭成员失败')
      } finally {
        this.loading = false
      }
    },
    formatDate(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      return date.toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
</style>