cfc/cfc-web/src/views/Children.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.nickname"
            placeholder="请输入昵称"
            clearable
            @keyup.enter.native="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item label="家庭ID">
          <el-input
            v-model="searchForm.familyId"
            placeholder="请输入家庭ID"
            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>

        <!-- 孩子列表 -->
        <div class="table-scroll-wrap">

        <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="nickname" label="昵称" width="150"></el-table-column>
        <el-table-column prop="age" label="年龄" width="80"></el-table-column>
        <el-table-column prop="totalPoints" label="当前积分" width="120">
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.totalPoints || 0 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="streakDays" label="连续打卡" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.streakDays || 0 }}天</span>
          </template>
        </el-table-column>
        <el-table-column prop="familyId" label="家庭ID" width="100"></el-table-column>
        <el-table-column prop="penaltyEnabled" label="扣分" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.penaltyEnabled ? 'danger' : 'info'" size="small">
              {{ scope.row.penaltyEnabled ? '开启' : '关闭' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="180" sortable="custom" :sort-orders="['ascending','descending']"  sortable="custom" :sort-orders="['ascending','descending']" >
          <template slot-scope="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" 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="adjustPoints" icon="el-icon-edit">调分</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        </el-table>

    </div>
        <!-- 分页 -->
      <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="dialogVisible" width="400px">
      <el-form :model="pointsForm" :rules="pointsRules" ref="pointsForm" label-width="100px">
        <el-form-item label="当前积分">
          <span>{{ currentChild ? currentChild.totalPoints : 0 }}</span>
        </el-form-item>
        <el-form-item label="调整积分" prop="amount">
          <el-input-number
            v-model="pointsForm.amount"
            :min="-1000"
            :max="1000"
            placeholder="正数为加分，负数为扣分"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="原因" prop="reason">
          <el-input
            type="textarea"
            v-model="pointsForm.reason"
            placeholder="请输入调整原因"
            :rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPoints" :loading="submitting">确定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑孩子对话框 -->
    <el-dialog title="编辑孩子" :visible.sync="editDialogVisible" width="500px">
      <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="editForm.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="editForm.age" :min="0" :max="18"></el-input-number>
        </el-form-item>
        <el-form-item label="扣分开关">
          <el-switch v-model="editForm.penaltyEnabled" :active-value="1" :inactive-value="0"></el-switch>
        </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>
  </div>
</template>

<script>
import { getChildrenList, adjustChildPoints, updateChild } from '@/api/admin'

export default {
  name: 'Children',
  computed: {
    tableHeight() {
      return window.innerHeight - 340
    }
  },
  data() {
    return {
      loading: false,
      submitting: false,
      tableData: [],
      searchForm: {
        nickname: '',
        familyId: ''
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      dialogVisible: false,
      editDialogVisible: false,
      currentChild: null,
      pointsForm: {
        amount: 0,
        reason: ''
      },
      pointsRules: {
        amount: [
          { required: true, message: '请输入调整积分', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入调整原因', trigger: 'blur' }
        ]
      },
      editForm: {
        id: null,
        nickname: '',
        age: 0,
        penaltyEnabled: 1
      },
      editRules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.loadChildren()
  },
  methods: {
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'adjustPoints': this.handleAdjustPoints(row); break;
        case 'edit': this.handleEdit(row); break;
      }
    },
    async loadChildren() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.current,
          size: this.pagination.size,
          ...this.searchForm
        }
        const res = await getChildrenList(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.loadChildren()
    },
    handleReset() {
      this.searchForm = {
        nickname: '',
        familyId: ''
      }
      this.handleSearch()
    },
    handleRefresh() {
      this.loadChildren()
    },
    handleSizeChange(val) {
      this.pagination.size = val
      this.pagination.current = 1
      this.loadChildren()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.loadChildren()
    },
    handleAdjustPoints(row) {
      this.currentChild = row
      this.pointsForm = {
        amount: 0,
        reason: ''
      }
      this.dialogVisible = true
    },
    async submitPoints() {
      this.$refs.pointsForm.validate(async (valid) => {
        if (valid) {
          this.submitting = true
          try {
            await adjustChildPoints(this.currentChild.id, this.pointsForm)
            this.$message.success('积分调整成功')
            this.dialogVisible = false
            this.loadChildren()
          } catch (error) {
            this.$message.error(error.message || '积分调整失败')
          } finally {
            this.submitting = false
          }
        }
      })
    },
    handleEdit(row) {
      this.editForm = {
        id: row.id,
        nickname: row.nickname,
        age: row.age,
        penaltyEnabled: row.penaltyEnabled
      }
      this.editDialogVisible = true
    },
    async submitEdit() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          this.submitting = true
          try {
            await updateChild(this.editForm.id, this.editForm)
            this.$message.success('更新成功')
            this.editDialogVisible = false
            this.loadChildren()
          } catch (error) {
            this.$message.error(error.message || '更新失败')
          } finally {
            this.submitting = false
          }
        }
      })
    },
    formatDate(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      return date.toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
    .table-scroll-wrap { overflow-x: auto; }
</style>