cfc/cfc-web/src/views/admin/GrowthTaskManagement.vue

<template>
  <div class="growth-task admin-page">
    <el-card>
      <div slot="header">
        <span>成长任务管理</span>
        <div style="float:right">
          <el-input v-model="keyword" placeholder="搜索..." prefix-icon="el-icon-search" style="width:200px;margin-right:12px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
          <el-select
            v-model="filter.status"
            placeholder="状态筛选"
            size="mini"
            style="margin-right:12px;width:130px"
            clearable
            @change="loadTasks"
          >
            <el-option label="全部状态" value="" />
            <el-option label="开启" value="enabled" />
            <el-option label="关闭" value="disabled" />
          </el-select>
          <el-button type="primary" size="mini" @click="openCreate">创建任务</el-button>
        </div>
      </div>
      <el-table :max-height="tableHeight" :data="tasks" v-loading="loading" border stripe>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="任务名称" min-width="150" show-overflow-tooltip />
        <el-table-column prop="dimensionCode" label="关联维度" width="100">
          <template slot-scope="{ row }">
            <el-tag size="mini" :type="dimensionType(row.dimensionCode)">{{ dimensionLabel(row.dimensionCode) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="任务类型" width="100" />
        <el-table-column label="触发方式" width="80">
          <template slot-scope="{ row }">{{ row.triggerType || '—' }}</template>
        </el-table-column>
        <el-table-column prop="description" label="描述" min-width="180" show-overflow-tooltip />
        <el-table-column label="任务值" width="80">
          <template slot-scope="{ row }">{{ row.taskValue ?? '-' }}</template>
        </el-table-column>
        <el-table-column label="奖励" width="160">
          <template slot-scope="{ row }">
            <div v-if="row.rewardItems && row.rewardItems.length">
              <el-tag size="mini" v-for="(ri, i) in row.rewardItems" :key="i" style="margin:1px">
                {{ ri.type }}:{{ ri.value }}
              </el-tag>
            </div>
            <span v-else style="color:#999">—</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template slot-scope="{ row }">
            <el-switch
              :value="row.status === 'enabled'"
              @change="toggleStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="handleEditTask(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="save" icon="el-icon-success">保存</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="total > 0"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="filter.page"
        :page-sizes="[10, 20, 50]"
        :page-size="filter.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top:16px;text-align:right"
      />
    </el-card>

    <el-dialog
      :title="editId ? '编辑任务' : '创建任务'"
      :visible.sync="dialogVisible"
      width="700px"
      @closed="resetForm"
    >
      <el-form label-width="120px">
        <el-form-item label="任务名称">
          <el-input v-model="form.name" placeholder="请输入任务名称" />
        </el-form-item>

        <el-form-item label="任务类型">
          <el-select v-model="form.type" placeholder="选择任务类型" style="width:100%">
            <el-option label="每日任务" value="daily" />
            <el-option label="每周任务" value="weekly" />
            <el-option label="每月任务" value="monthly" />
            <el-option label="一次性任务" value="one_time" />
          </el-select>
        </el-form-item>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="关联维度">
              <el-select v-model="form.dimensionCode" placeholder="选择维度" style="width:100%">
                <el-option label="身" value="body" />
                <el-option label="心" value="heart" />
                <el-option label="智" value="mind" />
                <el-option label="行" value="action" />
                <el-option label="富" value="wealth" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="触发方式">
              <el-select v-model="form.triggerType" placeholder="选择触发方式" style="width:100%" clearable>
                <el-option label="手动" value="manual" />
                <el-option label="自动" value="auto" />
                <el-option label="条件" value="condition" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="任务描述" />
        </el-form-item>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="任务值">
              <el-input-number v-model="form.taskValue" :min="0" :step="1" style="width:100%" placeholder="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input-number v-model="form.sortOrder" :min="0" :step="1" style="width:100%" placeholder="0" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="五维权重">
          <dimension-weight-picker v-model="form.dimensionWeights" :show-presets="true" />
        </el-form-item>

        <el-form-item label="启用">
          <el-switch v-model="form.statusBool" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleTaskSubmit" :loading="saving">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DimensionWeightPicker from '@/components/DimensionWeightPicker.vue'
import { getGrowthTaskList, createGrowthTask, updateGrowthTask } from '@/api/growthTask'
import { saveDimensionWeights, getDimensionWeights } from '@/api/dimension-weight.js'

const DIMENSION_CONFIG = {
  body: { label: '身', type: 'success' },
  heart: { label: '心', type: 'danger' },
  mind: { label: '智', type: 'warning' },
  action: { label: '行', type: 'primary' },
  wealth: { label: '富', type: 'info' }
}

export default {
  name: 'GrowthTaskManagement',
  components: { DimensionWeightPicker },
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      loading: false,
      saving: false,
      tasks: [],
      total: 0,
      editId: null,
      dialogVisible: false,
      keyword: '',
      filter: {
        status: '',
        page: 1,
        size: 10
      },
      form: {}
    }
  },
  methods: {
    dimensionLabel(code) {
      return (DIMENSION_CONFIG[code] && DIMENSION_CONFIG[code].label) || code || '—'
    },
    dimensionType(code) {
      return (DIMENSION_CONFIG[code] && DIMENSION_CONFIG[code].type) || ''
    },
    getEmptyTaskForm() {
      return {
        name: '',
        type: 'daily',
        dimensionCode: '',
        triggerType: '',
        description: '',
        taskValue: null,
        sortOrder: 0,
        statusBool: true,
        dimensionWeights: []
      }
    },
    resetForm() {
      this.form = this.getEmptyTaskForm()
    },
    async loadTasks() {
      this.loading = true
      try {
        const params = {
          page: this.filter.page,
          size: this.filter.size
        }
        if (this.filter.status) {
          params.status = this.filter.status
        }
        if (this.keyword) {
          params.keyword = this.keyword
        }
        const res = await getTaskList(params)
        this.tasks = (res.data && res.data.records) || []
        this.total = (res.data && res.data.total) || 0
      } catch (e) {
        this.$message && this.$message.error && this.$message.error('加载任务列表失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.filter.page = 1
      this.loadTasks()
    },
    handleSizeChange(size) {
      this.filter.size = size
      this.filter.page = 1
      this.loadTasks()
    },
    handlePageChange(page) {
      this.filter.page = page
      this.loadTasks()
    },
    openCreate() {
      this.editId = null
      this.resetForm()
      this.dialogVisible = true
    },
    handleEditTask(row) {
      this.editId = row.id
      this.form = {
        name: row.name || '',
        type: row.type || 'daily',
        dimensionCode: row.dimensionCode || '',
        triggerType: row.triggerType || '',
        description: row.description || '',
        taskValue: row.taskValue ?? null,
        sortOrder: row.sortOrder ?? 0,
        statusBool: row.status === 'enabled',
        dimensionWeights: []
      }
      this.dialogVisible = true
      if (row.id) {
        this.loadDimensionWeights(row.id)
      }
    },
    async loadDimensionWeights(taskId) {
      try {
        const res = await getDimensionWeights('task', taskId)
        if (res.data) {
          this.form.dimensionWeights = res.data
        }
      } catch (e) {
      }
    },
    async handleTaskSubmit() {
      if (!this.form.name) {
        this.$message.warning('请填写任务名称')
        return
      }
      this.saving = true
      try {
        const payload = {
          name: this.form.name,
          type: this.form.type,
          dimensionCode: this.form.dimensionCode,
          triggerType: this.form.triggerType || null,
          description: this.form.description || '',
          taskValue: this.form.taskValue,
          sortOrder: this.form.sortOrder || 0,
          status: this.form.statusBool ? 'enabled' : 'disabled'
        }
        let taskId = this.editId
        if (this.editId) {
          payload.id = this.editId
          await updateGrowthTask(payload)
          this.$message.success('更新成功')
        } else {
          const res = await createGrowthTask(payload)
          if (res.data && res.data.id) {
            taskId = res.data.id
          }
          this.$message.success('创建成功')
        }
        if (taskId && this.form.dimensionWeights && this.form.dimensionWeights.length) {
          try {
            await saveDimensionWeights('task', taskId, this.form.dimensionWeights)
          } catch (e) {
            console.error('保存维度权重失败', e)
          }
        }
        this.dialogVisible = false
        this.loadTasks()
      } catch (e) {
        this.$message.error('保存失败')
      } finally {
        this.saving = false
      }
    },
    async toggleStatus(row) {
      try {
        const newStatus = row.status === 'enabled' ? 'disabled' : 'enabled'
        await updateGrowthTask(row.id, { status: newStatus })
        this.$message.success('状态已更新')
        this.loadTasks()
      } catch (e) {
        this.$message.error('状态更新失败')
      }
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'save':
          this.handleTaskSubmit(row)
          break
      }
    }
  },
  created() {
    this.loadTasks()
    this.resetForm()
  }
}
</script>

<style scoped>
.growth-task { padding: 20px; }
</style>