|
|
@@ -33,9 +33,10 @@
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="createdAt" label="创建时间" width="170" :formatter="formatTime" />
|
|
|
- <el-table-column label="操作" width="90" fixed="right">
|
|
|
+ <el-table-column label="操作" width="150" fixed="right">
|
|
|
<template slot-scope="{ row }">
|
|
|
<el-button size="mini" type="primary" @click="openEdit(row)">编辑</el-button>
|
|
|
+ <el-button size="mini" @click="openSections(row)">版块</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -81,11 +82,59 @@
|
|
|
<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 } from '@/api/course'
|
|
|
+import { courseList, createCourse, updateCourse, sectionList, createSection, updateSection, deleteSection } from '@/api/course'
|
|
|
|
|
|
function fenToYuan(fen) {
|
|
|
return ((fen || 0) / 100).toFixed(2)
|
|
|
@@ -113,6 +162,23 @@ export default {
|
|
|
rules: {
|
|
|
level: [{ 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' }]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -200,6 +266,82 @@ export default {
|
|
|
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 () {})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -224,4 +366,17 @@ export default {
|
|
|
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>
|