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

<template>
  <div class="page-container">
    <el-card>
      <PageHeader slot="header" title="任务模板管理">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="handleCreate">新建模板</el-button>
        <el-button size="small" @click="handleRefresh" :loading="loading">刷新</el-button>
      </PageHeader>

      <!-- 搜索和筛选 -->
      <el-form :inline="true" :model="searchForm" class="mb-20">
        <el-form-item label="分类">
          <el-select v-model="searchForm.category" placeholder="全部分类" clearable @change="handleSearch">
            <el-option label="学习" value="学习"></el-option>
            <el-option label="家务" value="家务"></el-option>
            <el-option label="运动" value="运动"></el-option>
            <el-option label="阅读" value="阅读"></el-option>
            <el-option label="生活习惯" value="生活习惯"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select v-model="searchForm.difficulty" placeholder="全部难度" clearable @change="handleSearch">
            <el-option label="简单" value="easy"></el-option>
            <el-option label="中等" value="medium"></el-option>
            <el-option label="困难" value="hard"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.isActive" placeholder="全部状态" clearable @change="handleSearch">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </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="adm-table-wrap">
<el-table
        :data="tableData"
        border
        v-loading="loading"
        class="full-width"
        height="100%"
      >
        <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="category" label="分类" width="100">
          <template slot-scope="scope">
            <StatusTag :type="getCategoryType(scope.row.category)" :text="scope.row.category" size="small" />
          </template>
          <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="points" label="积分" width="80">
          <template slot-scope="scope">
            <StatusTag type="success" :text="String(scope.row.points || 0)" />
          </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="difficulty" label="难度" width="100">
          <template slot-scope="scope">
            <StatusTag :type="getDifficultyType(scope.row.difficulty)" :text="getDifficultyText(scope.row.difficulty)" size="small" />
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('difficulty', $event)">难度<span v-if="sortIndex('difficulty') !== null" class="sort-index" :class="sortClass('difficulty') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('difficulty') }}</span>{{ sortIcon('difficulty') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="recommendedAge" label="推荐年龄" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.recommendedAge">{{ scope.row.recommendedAge }}岁+</span>
            <span v-else>-</span>
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('recommendedAge', $event)">推荐年龄<span v-if="sortIndex('recommendedAge') !== null" class="sort-index" :class="sortClass('recommendedAge') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('recommendedAge') }}</span>{{ sortIcon('recommendedAge') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="duration" label="时长" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.duration">{{ scope.row.duration }}分钟</span>
            <span v-else>-</span>
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('duration', $event)">时长<span v-if="sortIndex('duration') !== null" class="sort-index" :class="sortClass('duration') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('duration') }}</span>{{ sortIcon('duration') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskType" label="性质" width="80">
          <template slot-scope="scope">
            <StatusTag v-if="scope.row.taskType === 'recurring'" type="warning" size="small" text="循环" />
            <StatusTag v-else type="info" size="small" text="一次性" />
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('taskType', $event)">性质<span v-if="sortIndex('taskType') !== null" class="sort-index" :class="sortClass('taskType') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('taskType') }}</span>{{ sortIcon('taskType') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="needReview" label="需审核" width="80">
          <template slot-scope="scope">
            <StatusTag v-if="scope.row.needReview === 1" type="warning" size="small" text="是" />
            <StatusTag v-else type="info" size="small" text="否" />
          </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="isActive" label="状态" width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isActive"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('isActive', $event)">状态<span v-if="sortIndex('isActive') !== null" class="sort-index" :class="sortClass('isActive') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('isActive') }}</span>{{ sortIcon('isActive') }}</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">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              class="text-error"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>

      <!-- 分页 -->
      <el-pagination
        class="pagination-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="dialogTitle"
      :visible.sync="editDialogVisible"
      width="600px"
      @close="handleDialogClose"
    >
      <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="120px">
        <el-form-item label="模板名称" prop="title">
          <el-input v-model="editForm.title" placeholder="请输入模板名称"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            type="textarea"
            v-model="editForm.description"
            placeholder="请输入任务描述"
            :rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="category">
          <el-select v-model="editForm.category" placeholder="请选择分类">
            <el-option label="学习" value="学习"></el-option>
            <el-option label="家务" value="家务"></el-option>
            <el-option label="运动" value="运动"></el-option>
            <el-option label="阅读" value="阅读"></el-option>
            <el-option label="生活习惯" value="生活习惯"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="积分" prop="points">
          <el-input-number v-model="editForm.points" :min="1" :max="1000" placeholder="完成奖励积分"></el-input-number>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="editForm.difficulty" placeholder="请选择难度">
            <el-option label="简单" value="easy"></el-option>
            <el-option label="中等" value="medium"></el-option>
            <el-option label="困难" value="hard"></el-option>
          </el-select>
        </el-form-item>
    <el-form-item label="推荐年龄" prop="recommendedAge">
      <el-input-number v-model="editForm.recommendedAge" :min="0" :max="18" placeholder="推荐年龄"></el-input-number>
      <span class="suffix-hint">岁及以上</span>
    </el-form-item>
    <el-form-item label="预计时长" prop="duration">
      <el-input-number v-model="editForm.duration" :min="1" :max="480" placeholder="预计时长"></el-input-number>
      <span class="suffix-hint">分钟</span>
    </el-form-item>
    <el-form-item label="完成方式" prop="completeTypes">
      <el-checkbox-group v-model="editForm.completeTypes">
        <el-checkbox label="checkin">打卡</el-checkbox>
        <el-checkbox label="text">文本</el-checkbox>
        <el-checkbox label="voice">语音</el-checkbox>
        <el-checkbox label="image">图片</el-checkbox>
        <el-checkbox label="video">视频</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="任务性质" prop="taskType">
      <el-radio-group v-model="editForm.taskType">
        <el-radio label="onetime">一次性任务</el-radio>
        <el-radio label="recurring">循环任务</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="频率" prop="frequency" v-if="editForm.taskType === 'recurring'">
      <el-select v-model="editForm.frequency" placeholder="请选择频率">
        <el-option label="每天" value="daily"></el-option>
        <el-option label="每周" value="weekly"></el-option>
        <el-option label="每月" value="monthly"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="周期次数" prop="maxFrequency" v-if="editForm.taskType === 'recurring'">
      <el-input-number v-model="editForm.maxFrequency" :min="1" :max="100" placeholder="周期内最多完成次数"></el-input-number>
      <span class="suffix-hint-sm">
        超过此次数不计积分
      </span>
    </el-form-item>
    <el-form-item label="需要审核" prop="needReview">
      <el-switch v-model="editForm.needReview" :active-value="1" :inactive-value="0"></el-switch>
    </el-form-item>
    <el-form-item label="审核方式" prop="reviewType" v-if="editForm.needReview === 1">
      <el-select v-model="editForm.reviewType" placeholder="请选择审核方式">
        <el-option label="创建人审核" value="creator"></el-option>
        <el-option label="家长审核" value="parent"></el-option>
        <el-option label="成长规划师审核" value="teacher"></el-option>
        <el-option label="AI自动审核" value="ai"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="按分类审核" prop="reviewByCategory" v-if="editForm.needReview === 1 && editForm.reviewType === 'parent'">
      <el-switch v-model="editForm.reviewByCategory" :active-value="1" :inactive-value="0"></el-switch>
      <span class="suffix-hint-sm">
        开启后，将按照分类自动分配审核人
      </span>
    </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 SortMixin from '@/mixins/SortMixin'
import ListStateMixin from '@/mixins/ListStateMixin'
import { getTaskTemplateList, createTaskTemplate, updateTaskTemplate, deleteTaskTemplate } from '@/api/admin'

export default {
  name: 'TaskTemplates',
  mixins: [SortMixin, ListStateMixin],
  computed: {
    tableHeight() {
      return window.innerHeight - 340
    }
  },
  data() {
    return {
      loading: false,
      submitting: false,
      tableData: [],
      sortableColumns: { id: 'ID', title: '模板名称', category: '分类', points: '积分', difficulty: '难度', recommendedAge: '推荐年龄', duration: '时长', taskType: '性质', needReview: '需审核', isActive: '状态', createdAt: '创建时间' },
      searchForm: {
        category: '',
        difficulty: '',
        isActive: null
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      editDialogVisible: false,
      isCreate: false,
      editForm: {
        id: null,
        title: '',
        description: '',
        category: '',
        points: 10,
        difficulty: 'medium',
        recommendedAge: null,
        duration: null,
        completeTypes: ['checkin'],
        taskType: 'onetime',
        frequency: null,
        maxFrequency: null,
        needReview: 1,
        reviewType: 'creator',
        reviewByCategory: 0,
        isActive: 1
      },
      editRules: {
        title: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        points: [
          { required: true, message: '请输入积分', trigger: 'blur' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.isCreate ? '新建任务模板' : '编辑任务模板'
    }
  },
  mounted() {
    this.loadTemplates()
  },
  methods: {
    loadList() {
      this.loadTemplates()
    },
    async loadTemplates() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.current,
          size: this.pagination.size,
          ...this.searchForm
        }
        if (this.sortState.length > 0) params.sort = this.sortState
        const res = await getTaskTemplateList(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.loadTemplates()
    },
    handleReset() {
      this.searchForm = {
        category: '',
        difficulty: '',
        isActive: null
      }
      this.handleSearch()
    },
    handleRefresh() {
      this.loadTemplates()
    },
    handleSizeChange(val) {
      this.pagination.size = val
      this.pagination.current = 1
      this.loadTemplates()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.loadTemplates()
    },
    handleCreate() {
      this.isCreate = true
      this.editForm = {
        id: null,
        title: '',
        description: '',
        category: '',
        points: 10,
        difficulty: 'medium',
        recommendedAge: null,
        duration: null,
        completeTypes: ['checkin'],
        taskType: 'onetime',
        frequency: null,
        maxFrequency: null,
        needReview: 1,
        reviewType: 'creator',
        reviewByCategory: 0,
        isActive: 1
      }
      this.editDialogVisible = true
    },
    handleEdit(row) {
      this.isCreate = false
      // 解析 completeTypes（如果是字符串则转为数组）
      let completeTypes = row.completeTypes
      if (typeof completeTypes === 'string') {
        try {
          completeTypes = JSON.parse(completeTypes)
        } catch (e) {
          completeTypes = ['checkin']
        }
      }
      this.editForm = {
        id: row.id,
        title: row.title,
        description: row.description || '',
        category: row.category,
        points: row.points,
        difficulty: row.difficulty,
        recommendedAge: row.recommendedAge,
        duration: row.duration,
        completeTypes: completeTypes || ['checkin'],
        taskType: row.taskType || 'onetime',
        frequency: row.frequency,
        maxFrequency: row.maxFrequency,
        needReview: row.needReview,
        reviewType: row.reviewType || 'creator',
        reviewByCategory: row.reviewByCategory || 0,
        isActive: row.isActive
      }
      this.editDialogVisible = true
    },
    handleDialogClose() {
      this.$refs.editForm.resetFields()
    },
    async submitEdit() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          this.submitting = true
          try {
            // 准备提交数据，确保 completeTypes 为 JSON 字符串
            const submitData = {
              ...this.editForm,
              completeTypes: JSON.stringify(this.editForm.completeTypes)
            }
            if (this.isCreate) {
              await createTaskTemplate(submitData)
              this.$message.success('创建成功')
            } else {
              await updateTaskTemplate(this.editForm.id, submitData)
              this.$message.success('更新成功')
            }
            this.editDialogVisible = false
            this.loadTemplates()
          } catch (error) {
            this.$message.error(error.message || (this.isCreate ? '创建失败' : '更新失败'))
          } finally {
            this.submitting = false
          }
        }
      })
    },
    async handleStatusChange(row) {
      try {
        await updateTaskTemplate(row.id, { isActive: row.isActive })
        this.$message.success(row.isActive === 1 ? '已启用' : '已禁用')
      } catch (error) {
        this.$message.error(error.message || '状态更新失败')
        // 恢复原状态
        row.isActive = row.isActive === 1 ? 0 : 1
      }
    },
    handleDelete(row) {
      this.$confirm(`确定要删除模板 "${row.title}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteTaskTemplate(row.id)
          this.$message.success('删除成功')
          this.loadTemplates()
        } catch (error) {
          this.$message.error(error.message || '删除失败')
        }
      }).catch(() => {})
    },
    getCategoryType(category) {
      const types = {
        '学习': 'primary',
        '家务': 'success',
        '运动': 'warning',
        '阅读': 'info',
        '生活习惯': 'danger'
      }
      return types[category] || 'primary'
    },
    getDifficultyType(difficulty) {
      const types = {
        easy: 'success',
        medium: 'warning',
        hard: 'danger'
      }
      return types[difficulty] || 'info'
    },
    getDifficultyText(difficulty) {
      const texts = {
        easy: '简单',
        medium: '中等',
        hard: '困难'
      }
      return texts[difficulty] || difficulty
    },

  }
}
</script>

<style scoped>
.admin-page { padding: 24px; }
/* == C 批内联清理工具类 == */
.mb-20 { margin-bottom: 24px; }
.full-width { width: 100%; }
.text-error { color: var(--adm-error); }
.pagination-right { margin-top: 24px; text-align: right; }
.suffix-hint { margin-left: 10px; color: var(--adm-text-45); }
.suffix-hint-sm { margin-left: 10px; color: var(--adm-text-45); font-size: 12px; }
</style>