cfc/zxyj-web/src/views/Tasks.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.title"
            placeholder="请输入任务标题"
            clearable
            @keyup.enter.native="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="全部状态" clearable @change="handleSearch">
            <el-option label="进行中" value="pending"></el-option>
            <el-option label="已完成" value="completed"></el-option>
            <el-option label="已逾期" value="overdue"></el-option>
            <el-option label="已取消" value="cancelled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="孩子ID">
          <el-input
            v-model="searchForm.childId"
            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>

      <!-- 统计卡片 -->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-label">总任务数</div>
            <div class="stat-value">{{ stats.total || 0 }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-label">今日任务</div>
            <div class="stat-value">{{ stats.today || 0 }}</div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 任务列表 -->
      <el-table :data="tableData" border v-loading="loading" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="title" label="任务名称" min-width="200"></el-table-column>
        <el-table-column prop="points" label="积分" width="80">
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.points }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="category" label="分类" width="100"></el-table-column>
        <el-table-column prop="deadline" label="截止时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.deadline) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)" size="small">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="needReview" label="需审核" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.needReview ? 'warning' : 'info'" size="small">
              {{ scope.row.needReview ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="childId" label="孩子ID" width="80"></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>

      <!-- 分页 -->
      <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>
  </div>
</template>

<script>
import { getTasksList, getTaskStats } from '@/api/admin'

export default {
  name: 'Tasks',
  data() {
    return {
      loading: false,
      tableData: [],
      stats: {
        total: 0,
        today: 0
      },
      searchForm: {
        title: '',
        status: '',
        childId: ''
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.loadTasks()
    this.loadStats()
  },
  methods: {
    async loadTasks() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.current,
          size: this.pagination.size,
          ...this.searchForm
        }
        const res = await getTasksList(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
      }
    },
    async loadStats() {
      try {
        const res = await getTaskStats()
        this.stats = res.data || { total: 0, today: 0 }
      } catch (error) {
        console.error('加载统计失败:', error)
      }
    },
    handleSearch() {
      this.pagination.current = 1
      this.loadTasks()
    },
    handleReset() {
      this.searchForm = {
        title: '',
        status: '',
        childId: ''
      }
      this.handleSearch()
    },
    handleRefresh() {
      this.loadTasks()
      this.loadStats()
    },
    handleSizeChange(val) {
      this.pagination.size = val
      this.loadTasks()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.loadTasks()
    },
    getStatusType(status) {
      const types = {
        pending: 'warning',
        completed: 'success',
        overdue: 'danger',
        cancelled: 'info'
      }
      return types[status] || 'info'
    },
    getStatusText(status) {
      const texts = {
        pending: '进行中',
        completed: '已完成',
        overdue: '已逾期',
        cancelled: '已取消'
      }
      return texts[status] || status
    },
    formatDate(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      return date.toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.stat-card {
  text-align: center;
}

.stat-label {
  color: #909399;
  font-size: 14px;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #409EFF;
}
</style>