caremate/train-web/src/views/Courses.vue

<template>
  <div class="page-container">
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">课程管理</h2>
      <el-select v-model="filter.track" placeholder="筛选赛道" style="width:150px; margin-left: 20px" clearable @change="fetchList">
        <el-option label="财富" value="wealth" />
        <el-option label="健康" value="health" />
        <el-option label="成长" value="growth" />
      </el-select>
      </div>
      <el-button type="primary" icon="el-icon-plus" @click="openCreate">新建课程</el-button>
    </div>

    <el-table :data="list" v-loading="loading" border stripe style="width:100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="level" label="等级" width="80" />
      <el-table-column label="赛道" width="80">
        <template slot-scope="{ row }">
          <span v-if="row.track === 'wealth'">财富</span>
          <span v-else-if="row.track === 'health'">健康</span>
          <span v-else-if="row.track === 'growth'">成长</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="课程名称" min-width="180" />
      <el-table-column prop="description" label="简介" min-width="220" show-overflow-tooltip />
      <el-table-column label="报名价" width="100">
        <template slot-scope="{ row }">
          <span v-if="row.price > 0">¥{{ fenToYuan(row.price) }}</span>
          <span v-else>免费</span>
        </template>
      </el-table-column>
      <el-table-column label="会员价" width="100">
        <template slot-scope="{ row }">
          <span v-if="row.memberPrice > 0">¥{{ fenToYuan(row.memberPrice) }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" width="200">
        <template slot-scope="{ row }">
          <span>{{ fmt(row.startTime) }} ~ {{ fmt(row.endTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="90">
        <template slot-scope="{ row }">
          <el-tag :type="statusType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="170" :formatter="formatTime" />
       <el-table-column label="操作" width="180" fixed="right">
         <template slot-scope="{ row }">
           <el-button size="mini" type="primary" @click="openEdit(row)">编辑</el-button>
           <el-button size="mini" @click="openModules(row)">模块</el-button>
           <el-button size="mini" @click="openSections(row)">版块</el-button>
         </template>
       </el-table-column>
    </el-table>

    <!-- 新建/编辑课程弹窗 -->
    <el-dialog :title="form.id ? '编辑课程' : '新建课程'" :visible.sync="showDialog" width="560px" @close="resetForm">
      <el-form :model="form" :rules="rules" ref="form" label-width="90px">
         <el-form-item label="等级" prop="level">
           <el-select v-model="form.level" placeholder="选择课程等级" style="width:100%">
             <el-option v-for="lv in ['L0','L1','L2','L3','L4']" :key="lv" :label="lv" :value="lv" />
           </el-select>
         </el-form-item>
        <el-form-item label="赛道" prop="track" v-if="form.level !== 'L0'">
          <el-select v-model="form.track" placeholder="选择赛道（空=通用主线）" clearable style="width:100%">
            <el-option label="财富" value="wealth" />
            <el-option label="健康" value="health" />
            <el-option label="成长" value="growth" />
          </el-select>
        </el-form-item>
         <el-form-item label="课程名称" prop="name">
          <el-input v-model="form.name" placeholder="如：家立方-AI管家成长营" />
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="form.description" type="textarea" :rows="2" placeholder="课程简介（选填）" />
        </el-form-item>
        <el-form-item label="报名价">
          <el-input-number v-model="form.price" :min="0" :max="100000000" :step="100" />
          <span class="tips">单位：分（100 = ¥1.00，仅显示用）</span>
        </el-form-item>
        <el-form-item label="会员价">
          <el-input-number v-model="form.memberPrice" :min="0" :max="100000000" :step="100" />
          <span class="tips">单位：分，为空则等同报名价</span>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="form.startTime" type="datetime" placeholder="选填，用于状态自动切换" style="width:100%" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="form.endTime" type="datetime" placeholder="选填，用于状态自动切换" style="width:100%" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" style="width:100%">
            <el-option label="草稿（学员端不可见）" value="draft" />
            <el-option label="启用（按时间自动切换）" value="active" />
            <el-option label="已结束" value="finished" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
      </div>
    </el-dialog>

    <!-- 课程版块管理弹窗 -->
    <el-dialog :title="'课程版块 - ' + (sectionCourse && sectionCourse.name ? sectionCourse.name : '')" :visible.sync="showSectionDialog" width="640px" @close="resetSectionForm">
      <div class="section-toolbar">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="openSectionCreate">新增版块</el-button>
        <span class="tips">版块用于组织课程学习路径（如：课前准备/课中学习/课后跟进）</span>
      </div>
      <el-table :data="sectionRows" v-loading="sectionLoading" border stripe style="width:100%">
        <el-table-column prop="sort" label="排序" width="70" />
        <el-table-column prop="title" label="版块标题" min-width="140" />
        <el-table-column prop="description" label="说明" min-width="200" show-overflow-tooltip />
        <el-table-column label="启用" width="70">
          <template slot-scope="{ row }">
            <el-tag :type="row.enabled === 1 ? 'success' : 'info'" size="small">{{ row.enabled === 1 ? '启用' : '禁用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="openSectionEdit(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="removeSection(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="!sectionLoading && sectionRows.length === 0" class="empty-tip">暂未配置版块</div>

      <!-- 版块新建/编辑 -->
      <el-dialog width="480px" :title="sectionForm.id ? '编辑版块' : '新增版块'" :visible.sync="showSectionForm" append-to-body>
        <el-form :model="sectionForm" :rules="sectionRules" ref="sectionForm" label-width="80px">
          <el-form-item label="版块标题" prop="title">
            <el-input v-model="sectionForm.title" placeholder="如：课前准备" />
          </el-form-item>
          <el-form-item label="说明">
            <el-input v-model="sectionForm.description" type="textarea" :rows="2" placeholder="版块说明（选填）" />
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="sectionForm.sort" :min="0" :max="9999" />
            <span class="tips">数字越小越靠前</span>
          </el-form-item>
          <el-form-item label="启用">
            <el-switch v-model="sectionForm.enabled" :active-value="1" :inactive-value="0" />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="showSectionForm = false">取消</el-button>
          <el-button type="primary" @click="handleSectionSubmit" :loading="sectionSubmitting">确定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { courseList, createCourse, updateCourse, sectionList, createSection, updateSection, deleteSection } from '@/api/course'

function fenToYuan(fen) {
  return ((fen || 0) / 100).toFixed(2)
}

export default {
  name: 'Courses',
  data: function () {
     return {
       list: [],
       loading: false,
       filter: {
         track: ''
       },
       showDialog: false,
       submitting: false,
       form: {
         id: null,
         level: 'L0',
         track: '',
         name: '',
         description: '',
         price: 0,
         memberPrice: 0,
         startTime: null,
         endTime: null,
         status: 'draft'
       },
       rules: {
         level: [{ required: true, message: '请选择课程等级', trigger: 'change' }],
         track: [{ required: true, message: '请选择赛道', trigger: 'change' }],
         name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }]
       },
      // 课程版块维护
      showSectionDialog: false,
      sectionCourse: null,
      sectionRows: [],
      sectionLoading: false,
      showSectionForm: false,
      sectionSubmitting: false,
      sectionForm: {
        id: null,
        title: '',
        description: '',
        sort: 0,
        enabled: 1
      },
      sectionRules: {
        title: [{ required: true, message: '请输入版块标题', trigger: 'blur' }]
      }
    }
  },
  mounted: function () {
    this.fetchList()
  },
  methods: {
    fenToYuan: fenToYuan,
    fmt: function (v) {
      return v ? String(v).slice(0, 16) : '-'
    },
    formatTime: function (row, col, val) {
      return val || '-'
    },
    statusType: function (s) {
      var map = { draft: 'info', active: 'success', finished: '' }
      return map[s] || 'info'
    },
    statusLabel: function (s) {
      var map = { draft: '草稿', active: '启用', finished: '已结束' }
      return map[s] || s || '-'
    },
     fetchList: function () {
       var self = this
       self.loading = true
       var params = {
         track: self.filter.track
       }
       courseList(params).then(function (res) {
         self.list = res.data || []
       }).catch(function () {
         self.$message.error('获取课程列表失败')
       }).finally(function () {
         self.loading = false
       })
     },
    openCreate: function () {
      this.resetForm()
      this.showDialog = true
    },
     openEdit: function (row) {
       this.form = {
         id: row.id,
         level: row.level,
         track: row.track || '',
         name: row.name,
         description: row.description,
         price: row.price || 0,
         memberPrice: row.memberPrice || 0,
         startTime: row.startTime || null,
         endTime: row.endTime || null,
         status: row.status || 'draft'
       }
       this.showDialog = true
     },
     openModules: function (row) {
       this.$router.push({ path: '/modules', query: { courseId: row.id } })
     },
     resetForm: function () {
       this.form = { id: null, level: 'L0', track: '', name: '', description: '', price: 0, memberPrice: 0, startTime: null, endTime: null, status: 'draft' }
     },
    handleSubmit: function () {
      var self = this
      if (self.submitting) return
      self.$refs.form.validate(function (valid) {
        if (!valid) return
        self.submitting = true
         var payload = {
           level: self.form.level,
           track: self.form.track,
           name: self.form.name,
           description: self.form.description,
           price: self.form.price,
           memberPrice: self.form.memberPrice,
           startTime: self.form.startTime,
           endTime: self.form.endTime,
           status: self.form.status
         }
        var p
        if (self.form.id) {
          payload.id = self.form.id
          p = updateCourse(payload)
        } else {
          p = createCourse(payload)
        }
        p.then(function () {
          self.$message.success('保存成功')
          self.showDialog = false
          self.fetchList()
        }).catch(function (err) {
          self.$message.error((err && err.message) || '保存失败')
        }).finally(function () {
          self.submitting = false
        })
      })
    },
    // ==================== 课程版块维护 ====================
    openSections: function (row) {
      var self = this
      self.sectionCourse = row
      self.showSectionDialog = true
      self.fetchSections()
    },
    fetchSections: function () {
      var self = this
      if (!self.sectionCourse) return
      self.sectionLoading = true
      sectionList(self.sectionCourse.id).then(function (res) {
        self.sectionRows = res.data || []
      }).catch(function () {
        self.$message.error('获取版块列表失败')
      }).finally(function () {
        self.sectionLoading = false
      })
    },
    openSectionCreate: function () {
      this.resetSectionForm()
      this.showSectionForm = true
    },
    openSectionEdit: function (row) {
      this.sectionForm = {
        id: row.id,
        title: row.title,
        description: row.description || '',
        sort: row.sort || 0,
        enabled: row.enabled === 1 ? 1 : 0
      }
      this.showSectionForm = true
    },
    resetSectionForm: function () {
      this.sectionForm = { id: null, title: '', description: '', sort: 0, enabled: 1 }
    },
    handleSectionSubmit: function () {
      var self = this
      if (self.sectionSubmitting) return
      self.$refs.sectionForm.validate(function (valid) {
        if (!valid) return
        self.sectionSubmitting = true
        var payload = {
          title: self.sectionForm.title,
          description: self.sectionForm.description,
          sort: self.sectionForm.sort,
          enabled: self.sectionForm.enabled
        }
        var p
        if (self.sectionForm.id) {
          payload.id = self.sectionForm.id
          p = updateSection(payload)
        } else {
          payload.courseId = self.sectionCourse.id
          p = createSection(payload)
        }
        p.then(function () {
          self.$message.success('保存成功')
          self.showSectionForm = false
          self.fetchSections()
        }).catch(function (err) {
          self.$message.error((err && err.message) || '保存失败')
        }).finally(function () {
          self.sectionSubmitting = false
        })
      })
    },
    removeSection: function (row) {
      var self = this
      self.$confirm('确认删除版块「' + row.title + '」？', '提示', { type: 'warning' }).then(function () {
        return deleteSection(row.id)
      }).then(function () {
        self.$message.success('删除成功')
        self.fetchSections()
      }).catch(function () {})
    }
  }
}
</script>

<style scoped>
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
 }
 .header-left {
   display: flex;
   align-items: center;
 }

.page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.tips {
  margin-left: 8px;
  font-size: 12px;
  color: #94A3B8;
}

.section-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.empty-tip {
  padding: 20px 0;
  text-align: center;
  font-size: 13px;
  color: #94A3B8;
}
</style>