cfc/cfc-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="pending_review"></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="家庭">
          <el-input
            v-model="searchForm.familyName"
            placeholder="点击选择家庭"
            readonly
            @click.native="showFamilySelector"
          >
            <el-button
              slot="append"
              icon="el-icon-close"
              v-if="searchForm.familyId"
              @click.stop="clearFamily"
              style="padding: 8px"
            ></el-button>
            <i slot="suffix" class="el-input__icon el-icon-arrow-down" @click.stop="showFamilySelector"></i>
          </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-dialog title="选择家庭" :visible.sync="familyDialogVisible" width="600px">
        <el-table :data="familyList" border v-loading="familyLoading" @row-click="selectFamily" style="cursor: pointer" :max-height="300">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="name" label="家庭名称" min-width="150"></el-table-column>
          <el-table-column prop="inviteCode" label="邀请码" width="120"></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: 15px; text-align: right"
          @current-change="loadFamilies"
          :current-page="familyPagination.current"
          :page-size="familyPagination.size"
          :total="familyPagination.total"
          layout="total, prev, pager, next"
        ></el-pagination>
      </el-dialog>

      <!-- 统计卡片 -->
      <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%" :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="title" label="任务名称" min-width="200">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('title', $event)">任务名称<span v-if="sortIndex('title') !== null" class="sort-index" :class="sortClass('title') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('title') }}</span>{{ sortIcon('title') }}</span>
          </template>
        </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>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('points', $event)">积分<span v-if="sortIndex('points') !== null" class="sort-index" :class="sortClass('points') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('points') }}</span>{{ sortIcon('points') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="category" label="分类" width="100">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('category', $event)">分类<span v-if="sortIndex('category') !== null" class="sort-index" :class="sortClass('category') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('category') }}</span>{{ sortIcon('category') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deadline" label="截止时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.deadline) }}
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('deadline', $event)">截止时间<span v-if="sortIndex('deadline') !== null" class="sort-index" :class="sortClass('deadline') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('deadline') }}</span>{{ sortIcon('deadline') }}</span>
          </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>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('status', $event)">状态<span v-if="sortIndex('status') !== null" class="sort-index" :class="sortClass('status') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('status') }}</span>{{ sortIcon('status') }}</span>
          </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>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('needReview', $event)">需审核<span v-if="sortIndex('needReview') !== null" class="sort-index" :class="sortClass('needReview') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('needReview') }}</span>{{ sortIcon('needReview') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="executorName" label="用户" width="100">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('executorName', $event)">用户<span v-if="sortIndex('executorName') !== null" class="sort-index" :class="sortClass('executorName') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('executorName') }}</span>{{ sortIcon('executorName') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
          <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-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <template v-if="scope.row.status === 'pending_review' && scope.row.needReview">
              <el-button size="mini" type="success" @click="handleReview(scope.row, true)">通过</el-button>
              <el-button size="mini" type="danger" @click="handleReview(scope.row, false)">拒绝</el-button>
            </template>
            <span v-else>-</span>
          </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="reviewDialogVisible" width="400px">
      <el-form>
        <el-form-item label="任务标题">{{ currentTask.title }}</el-form-item>
        <el-form-item label="提交时间">{{ formatDate(currentTask.completedAt) }}</el-form-item>
        <el-form-item label="审核意见">
          <el-input type="textarea" v-model="reviewComment" rows="3" placeholder="请输入审核意见（选填）"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="reviewDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmReview(false)">拒绝</el-button>
        <el-button type="primary" @click="confirmReview(true)">通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTasksList, getTaskStats, getFamilyList, reviewAdminTask } from '@/api/admin'
import SortMixin from '@/mixins/SortMixin'

export default {
  mixins: [SortMixin],
  name: 'Tasks',
  computed: {
    tableHeight() {
      return window.innerHeight - 340
    }
  },
  data() {
    return {
      loading: false,
      sortState: [],
      tableData: [],
      sortableColumns: { title: '任务名称', id: 'ID', points: '积分', category: '分类', deadline: '截止时间', status: '状态', needReview: '需审核', executorName: '用户', createdAt: '创建时间' },
      stats: {
        total: 0,
        today: 0
      },
      searchForm: {
        title: '',
        status: '',
        familyName: '',
        familyId: ''
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      // 家庭选择对话框
      familyDialogVisible: false,
      familyLoading: false,
      familyList: [],
      familyPagination: {
        current: 1,
        size: 10,
        total: 0
      },
      reviewDialogVisible: false,
      reviewAction: true,
      reviewComment: '',
      currentTask: {}
    }
  },
  mounted() {
    this.loadTasks()
    this.loadStats()
  },
  methods: {
    async loadTasks() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.current,
          size: this.pagination.size,
          status: this.searchForm.status,
          familyId: this.searchForm.familyId || undefined
        }
        this.applySortToParams(params)
        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)
      }
    },
    // 显示家庭选择对话框
    async showFamilySelector() {
      this.familyDialogVisible = true
      this.loadFamilies()
    },
    async loadFamilies(page = 1) {
      this.familyLoading = true
      try {
        const res = await getFamilyList({
          page: page,
          size: this.familyPagination.size
        })
        this.familyList = res.data.records || res.data || []
        this.familyPagination.total = res.data.total || this.familyList.length
        this.familyPagination.current = page
      } catch (error) {
        this.$message.error(error.message || '加载家庭列表失败')
      } finally {
        this.familyLoading = false
      }
    },
    selectFamily(row) {
      this.searchForm.familyId = row.id
      this.searchForm.familyName = row.name
      this.familyDialogVisible = false
      this.handleSearch()
    },
    clearFamily() {
      this.searchForm.familyId = ''
      this.searchForm.familyName = ''
      this.handleSearch()
    },
    handleSearch() {
      this.pagination.current = 1
      this.loadTasks()
    },
    handleReset() {
      this.searchForm = {
        title: '',
        status: '',
        familyName: '',
        familyId: ''
      }
      this.handleSearch()
    },
    handleRefresh() {
      this.loadTasks()
      this.loadStats()
    },
    handleSizeChange(val) {
      this.pagination.size = val
      this.pagination.current = 1
      this.loadTasks()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.loadTasks()
    },
    getStatusType(status) {
      const types = {
        pending: 'warning',
        pending_review: 'warning',
        completed: 'success',
        overdue: 'danger',
        cancelled: 'info'
      }
      return types[status] || 'info'
    },
    getStatusText(status) {
      const texts = {
        pending: '进行中',
        pending_review: '待审核',
        completed: '已完成',
        overdue: '已逾期',
        cancelled: '已取消'
      }
      return texts[status] || status
    },
    handleReview(task, approved) {
      this.currentTask = task || {}
      this.reviewAction = approved
      this.reviewComment = ''
      this.reviewDialogVisible = true
    },
    async confirmReview(approved) {
      if (!this.currentTask || !this.currentTask.id) {
        return
      }
      try {
        await reviewAdminTask(this.currentTask.id, {
          approved: approved != null ? approved : this.reviewAction,
          comment: this.reviewComment
        })
        this.$message.success(approved ? '已通过，积分已发放' : '已拒绝')
        this.reviewDialogVisible = false
        this.loadTasks()
      } catch (e) {
        this.$message.error('操作失败')
      }
    },
    formatDate(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      return date.toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.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;
}

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