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

<template>
  <div class="page-container">
    <el-card>
      <div slot="header">
        <span>任务模板管理</span>
        <el-button style="float: right" type="primary" size="small" icon="el-icon-plus" @click="handleCreate">
          创建任务模板
        </el-button>
      </div>

      <!-- 搜索 -->
      <el-form :inline="true" :model="searchForm" style="margin-bottom: 20px">
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="全部" clearable @change="loadData">
            <el-option label="草稿" value="draft"></el-option>
            <el-option label="待审核" value="pending"></el-option>
            <el-option label="已通过" value="approved"></el-option>
            <el-option label="已拒绝" value="rejected"></el-option>
            <el-option label="已下架" value="offline"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 任务模板列表 -->
      <el-table :max-height="tableHeight" :data="tableData" border v-loading="loading">
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="name" label="任务模板名称" min-width="150"></el-table-column>
        <el-table-column prop="cycleDays" label="周期" width="80">
          <template slot-scope="{ row }">{{ row.cycleDays }}天</template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="80">
          <template slot-scope="{ row }">{{ formatPriceWithSymbol(row.price) }}</template>
        </el-table-column>
        <el-table-column prop="category" label="分类" width="80"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="shareCode" label="分享码" width="100">
          <template slot-scope="{ row }">
            <span v-if="row.shareCode" class="code-text">{{ row.shareCode }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="160">
          <template slot-scope="{ row }">{{ formatDate(row.createdAt) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="280" 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="view" icon="el-icon-view">查看</el-dropdown-item>
                <el-dropdown-item command="items" icon="el-icon-s-operation">任务项</el-dropdown-item>
                <el-dropdown-item v-if="row.status === 'draft'" command="submit" icon="el-icon-upload">提交审核</el-dropdown-item>
                <el-dropdown-item v-if="row.status === 'approved'" command="publish" icon="el-icon-share">{{ row.isPublic ? '下架' : '发布' }}</el-dropdown-item>
                <el-dropdown-item command="share" icon="el-icon-share">分享</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" @closed="handleDialogClosed">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="任务模板名称" prop="name">
          <el-input v-model="form.name" placeholder="如：21天养成学习习惯"></el-input>
        </el-form-item>
        <el-form-item label="周期天数" prop="cycleDays">
          <el-input-number v-model="form.cycleDays" :min="1" :max="365"></el-input-number>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.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-select>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number v-model="form.price" :min="0" :precision="2"></el-input-number>
          <span> 元</span>
        </el-form-item>
        <el-form-item label="是否公开">
          <el-switch v-model="form.isPublic"></el-switch>
          <span style="margin-left: 10px; color: #999">公开后将显示在任务模板市场</span>
        </el-form-item>
        <el-form-item label="封面图">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
          >
            <img v-if="form.coverImage" :src="form.coverImage" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="详细介绍">
          <el-input type="textarea" v-model="form.description" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave" :loading="saving">保存</el-button>
      </div>
    </el-dialog>

    <!-- 任务项管理弹窗 -->
    <el-dialog title="任务项管理" :visible.sync="itemsDialogVisible" width="800px">
      <div style="margin-bottom: 20px">
        <el-button type="primary" size="small" @click="handleAddItem">添加任务项</el-button>
      </div>
      <el-table :data="items" border :max-height="300">
        <el-table-column prop="taskName" label="任务名称" min-width="120"></el-table-column>
        <el-table-column prop="points" label="积分" width="60"></el-table-column>
        <el-table-column prop="frequency" label="频率" width="80"></el-table-column>
        <el-table-column prop="duration" label="时长(分)" width="80"></el-table-column>
        <el-table-column prop="isRequired" label="必选" width="60">
          <template slot-scope="{ row }">
            <el-tag :type="row.isRequired ? 'danger' : 'info'" size="small">{{ row.isRequired ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="{ row, $index }">
            <el-button size="mini" type="primary" @click="handleEditItem(row)">编辑</el-button>
            <el-button size="mini" @click="handleDeleteItem(row, $index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="itemsDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 任务项编辑弹窗 -->
    <el-dialog :title="itemDialogTitle" :visible.sync="itemFormVisible" width="500px">
      <el-form :model="itemForm" label-width="100px">
        <el-form-item label="任务名称">
          <el-input v-model="itemForm.taskName"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="itemForm.description"></el-input>
        </el-form-item>
        <el-form-item label="积分">
          <el-input-number v-model="itemForm.points" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="频率">
          <el-select v-model="itemForm.frequency">
            <el-option label="每天" value="daily"></el-option>
            <el-option label="每周" value="weekly"></el-option>
            <el-option label="自定义" value="custom"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预计时长">
          <el-input-number v-model="itemForm.duration" :min="0"></el-input-number>
          <span> 分钟</span>
        </el-form-item>
        <el-form-item label="必选">
          <el-switch v-model="itemForm.isRequired"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="itemFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveItem">保存</el-button>
      </div>
    </el-dialog>

    <!-- 分享弹窗 -->
    <el-dialog title="分享任务模板" :visible.sync="shareDialogVisible" width="400px">
      <div v-if="currentRow" style="text-align: center">
        <p style="margin-bottom: 20px">分享码: <strong>{{ currentRow.shareCode }}</strong></p>
        <p style="color: #999; font-size: 12px">家长可通过分享码或链接查看您的任务模板</p>
        <el-button type="primary" @click="copyShareCode">复制分享码</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMyPackages, getGuidePackage, getGuidePackageItems, createPackage, updatePackage, submitPackageForReview, publishPackage, addPackageItem, updatePackageItem, deletePackageItem } from '@/api/guidePackage'

export default {
  name: 'GuidePackages',
  computed: {
    tableHeight() {
      return window.innerHeight - 340
    }
  },
  data() {
    return {
      loading: false,
      saving: false,
      tableData: [],
      searchForm: { status: '' },
      dialogVisible: false,
        dialogTitle: '创建任务模板',
      form: {
        id: null,
        name: '',
        cycleDays: 21,
        category: '',
        price: 0,
        isPublic: false,
        coverImage: '',
        description: ''
      },
      rules: {
          name: [{ required: true, message: '请输入任务模板名称', trigger: 'blur' }],
        cycleDays: [{ required: true, message: '请输入周期天数', trigger: 'blur' }]
      },
      itemsDialogVisible: false,
      items: [],
      currentRow: null,
      itemFormVisible: false,
      itemDialogTitle: '添加任务项',
      itemForm: {
        id: null,
        taskName: '',
        description: '',
        points: 10,
        frequency: 'daily',
        duration: 30,
        isRequired: false
      },
      shareDialogVisible: false
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'view': this.handleView(row); break;
        case 'edit': this.handleEdit(row); break;
        case 'items': this.handleItems(row); break;
        case 'submit': this.handleSubmit(row); break;
        case 'publish': this.handlePublish(row); break;
        case 'share': this.handleShare(row); break;
      }
    },
    async loadData() {
      this.loading = true
      try {
        const res = await getMyPackages()
        let data = res.data || []
        if (this.searchForm.status) {
          data = data.filter(p => p.status === this.searchForm.status)
        }
        this.tableData = data
      } catch (e) {
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    handleReset() {
      this.searchForm = { status: '' }
      this.loadData()
    },
    getStatusType(status) {
      const map = { draft: 'info', pending: 'warning', approved: 'success', rejected: 'danger', offline: 'info' }
      return map[status] || 'info'
    },
    getStatusText(status) {
      const map = { draft: '草稿', pending: '待审核', approved: '已发布', rejected: '已拒绝', offline: '已下架' }
      return map[status] || status
    },
    formatDate(date) {
      if (!date) return '-'
      return new Date(date).toLocaleString()
    },
    handleCreate() {
      this.form = {
        id: null,
        name: '',
        cycleDays: 21,
        category: '',
        price: 0,
        isPublic: false,
        coverImage: '',
        description: ''
      }
        this.dialogTitle = '创建任务模板'
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.form = { ...row, isPublic: row.isPublic === 1 }
        this.dialogTitle = '编辑任务模板'
      this.dialogVisible = true
    },
    handleView(row) {
      this.handleEdit(row)
    },
    handleDialogClosed() {
      this.$refs.form && this.$refs.form.resetFields()
    },
    async handleSave() {
      this.$refs.form.validate(async valid => {
        if (!valid) return
        this.saving = true
        try {
          const data = { ...this.form, isPublic: this.form.isPublic ? 1 : 0 }
          if (this.form.id) {
            await updatePackage(this.form.id, data)
            this.$message.success('更新成功')
          } else {
            await createPackage(data)
            this.$message.success('创建成功')
          }
          this.dialogVisible = false
          this.loadData()
        } catch (e) {
          this.$message.error('操作失败')
        } finally {
          this.saving = false
        }
      })
    },
    handleUploadSuccess(res) {
      this.form.coverImage = res.data
    },
    async handleSubmit(row) {
      try {
        await this.$confirm('确认提交审核？', '提示', { type: 'info' })
        await submitPackageForReview(row.id)
        this.$message.success('提交成功')
        this.loadData()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('操作失败')
      }
    },
    async handlePublish(row) {
      try {
        const action = row.isPublic ? '下架' : '发布'
        await this.$confirm(`确认${action}？`, '提示', { type: 'warning' })
        await publishPackage(row.id, !row.isPublic)
        this.$message.success(action + '成功')
        this.loadData()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('操作失败')
      }
    },
    async handleItems(row) {
      this.currentRow = row
      try {
        const res = await getPackageItems(row.id)
        this.items = res.data || []
        this.itemsDialogVisible = true
      } catch (e) {
        this.$message.error('加载失败')
      }
    },
    handleAddItem() {
      this.itemForm = {
        id: null,
        taskName: '',
        description: '',
        points: 10,
        frequency: 'daily',
        duration: 30,
        isRequired: false
      }
      this.itemDialogTitle = '添加任务项'
      this.itemFormVisible = true
    },
    handleEditItem(row) {
      this.itemForm = { ...row }
      this.itemDialogTitle = '编辑任务项'
      this.itemFormVisible = true
    },
    async handleSaveItem() {
      if (!this.itemForm.taskName) {
        this.$message.warning('请输入任务名称')
        return
      }
      try {
        const data = { ...this.itemForm, isRequired: this.itemForm.isRequired ? 1 : 0, packageId: this.currentRow.id }
        if (this.itemForm.id) {
          await updatePackageItem(this.itemForm.id, data)
        } else {
          await addPackageItem(this.currentRow.id, data)
        }
        this.$message.success('保存成功')
        this.itemFormVisible = false
        this.handleItems(this.currentRow)
      } catch (e) {
        this.$message.error('保存失败')
      }
    },
    async handleDeleteItem(row, index) {
      try {
        await this.$confirm('确认删除？', '提示', { type: 'warning' })
        await deletePackageItem(row.id)
        this.items.splice(index, 1)
        this.$message.success('删除成功')
      } catch (e) {
        if (e !== 'cancel') this.$message.error('删除失败')
      }
    },
    handleShare(row) {
      this.currentRow = row
      this.shareDialogVisible = true
    },
    copyShareCode() {
      this.$copyText(this.currentRow.shareCode).then(() => {
        this.$message.success('已复制')
      })
    }
  }
}
</script>

<style scoped>

.code-text { font-family: monospace; color: #409EFF; }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>