新增课程
需求分析
用户操作流程如下：
1、用户进入“我的课程”页面，点击“新增课程”，进入新增课程页面
2、填写课程信息，选择课程分类、课程等级、学习模式等。
3、信息填写完毕，点击“提交”，课程添加成功或课程添加失败并提示失败原因。
需要解决的是在新增页面上输入的信息：
1、课程分类
多级分类，需要方便用户去选择。
2、课程等级、学习模式等这些选项建议是可以配置的。
课程分类查询
介绍
在新增课程界面需要选择课程所属分类， 分类信息是整个项目非常重要的信息，课程即商品，分类信息设置的好
坏直接影响用户访问量。
分类信息在哪里应用？
1、首页分类导航
2、课程的归属地
添加课程时要选择课程的所属分类。
数据结构
分类表category的结构如下：
分类查询
数据格式
在添加课程时需要选择课程所属的分类，这里需要定义课程分类查询接口。
接口格式要根据前端需要的数据格式来定义，前端展示课程分类使用elemenet-ui的cascader（级联选择器）组
件。
数据格式例子如下：
[
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}]
}
]
数据模型
1）定义category的模型
category模型对数据字段对应，如下：
@Data
@ToString
@Entity
@Table(name="category")
@GenericGenerator(name = "jpa‐assigned", strategy = "assigned")
public class Category implements Serializable {
private static final long serialVersionUID = ‐906357110051689484L;
@Id
@GeneratedValue(generator = "jpa‐assigned")
@Column(length = 32)
private String id;
private String name;
private String label;
private String parentid;
private String isshow;
private Integer orderby;
private String isleaf;
}
1）定义数据返回格式
@Data
@ToString
public class CategoryNode extends Category {
List<CategoryNode> children;
}
Api接口
package com.xuecheng.api.course;
import com.xuecheng.framework.domain.course.ext.CategoryNode;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
/**
* @author Hr|黄锐
* @create 2019/8/16 17:33
*/
@Api(value="课程分类管理接口",description = "课程表查询接口")
public interface CategoryControllerApi {
@ApiOperation("查询课程分类")
public CategoryNode findCategory();
}
dao
根据数据格式的分析，此查询需要返回树型数据格式，为了开发方便我们使用mybatis实现查询 。
1）定义mapper
@Mapper
public interface CategoryMapper {
//查询分类
public CategoryNode selectList();
}
2）定义mapper映射文件
采用表的自连接方式输出树型结果集。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.xuecheng.manage_course.dao.CategoryMapper">
<resultMap id="categoryMap" type="com.xuecheng.framework.domain.course.ext.CategoryNode">
<id property="id" column="one_id"/>
<result property="name" column="one_name"/>
<result property="label" column="one_label"/>
<result property="isshow" column="one_isshow"/>
<result property="isleaf" column="one_isleaf"/>
<result property="orderby" column="one_orderby"/>
<result property="parentid" column="one_parentid"/>
<collection property="children" ofType="com.xuecheng.framework.domain.course.ext.CategoryNode">
<id property="id" column="two_id"/>
<result property="name" column="two_name"/>
<result property="label" column="two_label"/>
<result property="isshow" column="two_isshow"/>
<result property="isleaf" column="two_isleaf"/>
<result property="orderby" column="two_orderby"/>
<result property="parentid" column="two_parentid"/>
<collection property="children" ofType="com.xuecheng.framework.domain.course.ext.CategoryNode">
<id property="id" column="three_id"/>
<result property="name" column="three_name"/>
<result property="label" column="three_label"/>
<result property="isshow" column="three_isshow"/>
<result property="isleaf" column="three_isleaf"/>
<result property="orderby" column="three_orderby"/>
<result property="parentid" column="three_parentid"/>
</collection>
</collection>
</resultMap>
<select id="findCategory" resultMap="categoryMap">
SELECT
a.id one_id,
a.name one_name,
a.label one_label,
a.isshow one_isshow,
a.isleaf one_isleaf,
a.orderby one_orderby,
a.parentid one_parentid,
b.id two_id,
b.name two_name,
b.label two_label,
b.isshow two_isshow,
b.isleaf two_isleaf,
b.orderby two_orderby,
b.parentid two_parentid,
c.id three_id,
c.name three_name,
c.label three_label,
c.isshow three_isshow,
c.isleaf three_isleaf,
c.orderby three_orderby,
c.parentid three_parentid
FROM category a
LEFT JOIN category b
ON a.id=b.parentid
LEFT JOIN category c
ON b.id=c.parentid
WHERE
a.parentid='0'
ORDER BY
a.orderby,
b.orderby,
c.orderby
</select>
</mapper>
Service
@Service
public class CategoryService {
@Autowired
CategoryMapper categoryMapper;
//查询分类
public CategoryNode findList(){
return categoryMapper.selectList();
}
}
Controller
@RestController
@RequestMapping("/category")
public class CategoryController implements CategoryControllerApi {
@Autowired
CategoryService categoryService;
@Override
@GetMapping("/list")
public CategoryNode list() {
return categoryService.findList();
}
}
数据字典
介绍
在新增课程界面需要选择课程等级、课程状态等，这些信息统一采用数据字典管理的方式。
本项目对一些业务的分类配置信息，比如：课程等级、课程状态、用户类型、用户状态等进行统一管理，通过在数
据库创建数据字典表来维护这些分类信息。
数据字典对系统的业务分类进行统一管理，并且也可以解决硬编码问题，比如添加课程时选择课程等级，下拉框中
的课程等级信息如果在页面硬编码将造成不易修改维护的问题，所以从数据字典表中获取，如果要修改名称则在数
据字典修改即可，提高系统的可维护性。
数据模型
在mongodb中创建数据字典表sys_dictionary
一个字典信息如下：
{
"_id" : ObjectId("5a7e8d2dd019f15418fa2b71"),
"d_name" : "课程等级",
"d_type" : "200",
"d_value" : [
{
"sd_name" : "低级",
"sd_id" : "200001",
"sd_status" : "1"
},
{
"sd_name" : "中级",
"sd_id" : "200002",
"sd_status" : "1"
},
{
"sd_name" : "高级",
"sd_id" : "200003",
"sd_status" : "1"
}
]
}
字段说明如下：
d_name：字典名称
d_type：字典分类
d_value：字典数据
sd_name：项目名称
sd_id：项目id
sd_status：项目状态（1：可用，0不可用）
数据模型类：
@Data
@ToString
@Document(collection = "sys_dictionary")
public class SysDictionary {
@Id private String id;
@Field("d_name")
private String dName;
@Field("d_type")
private String dType;
@Field("d_value")
private List<SysDictionaryValue> dValue;
}
SysDictionaryValue类型：
@Data
@ToString
public class SysDictionaryValue {
@Field("sd_id")
private String sdId;
@Field("sd_name")
private String sdName;
@Field("sd_status")
private String sdStatus;
}
字典查询接口
API接口
为了方便其它子系统使用，在cms模块下创建字典查询接口，根据字典的type查询字典信息，接口定义如下：
@Api(value = "数据字典接口",description = "提供数据字典接口的管理、查询功能")
public interface SysDicthinaryControllerApi {
//数据字典
@ApiOperation(value="数据字典查询接口")
public SysDictionary getByType(String type);
}
Dao
在cms模块下创建数据库的dao、service等类。
@Repository
public interface SysDictionaryDao extends MongoRepository<SysDictionary,String> {
//根据字典分类查询字典信息
SysDictionary findBydType(String dType);
}
Service
@Service
public class SysdictionaryService {
@Autowired
SysDictionaryDao sysDictionaryDao;
//根据字典分类type查询字典信息
public SysDictionary findDictionaryByType(String type){
return sysDictionaryDao.findBydType(type);
}
}
Controller
@RestController
@RequestMapping("/sys/dictionary")
public class SysDictionaryController implements SysDictionaryControllerApi {
@Autowired
SysdictionaryService sysdictionaryService;
//根据字典分类id查询字典信息
@Override
@GetMapping("/get/{type}")
public SysDictionary getByType(@PathVariable("type") String type) {
return sysdictionaryService.findDictionaryByType(type);
}
}
新增课程页面完善
本节完成数据字典显示及课程分类显示。
新增课程页面
2）创建course_add.vue页面
在teach前端工程的course模块下创建course_add.vue页面。
<template>
<div>
<el-form :model="courseForm" label-width="80px" :rules="courseRules" ref="courseForm">
<el-form-item label="课程名称" prop="name">
<el-input v-model="courseForm.name" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="适用人群" prop="users">
<el-input type="textarea" v-model="courseForm.users" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="课程分类" prop="categoryActive">
<el-cascader
expand-trigger="hover"
:options="categoryList"
v-model="categoryActive"
:props="props">
</el-cascader>
</el-form-item>
<el-form-item label="课程等级" prop="grade">
<b v-for="grade in gradeList">
<el-radio v-model="courseForm.grade" :label="grade.sdId" >{{grade.sdName}}</el-radio>
</b>
</el-form-item>
<el-form-item label="学习模式" prop="studymodel">
<b v-for="studymodel_v in studymodelList">
<el-radio v-model="courseForm.studymodel" :label="studymodel_v.sdId" >{{studymodel_v.sdName}}</el-radio>
</b>
</el-form-item>
<el-form-item label="课程介绍" prop="description">
<el-input type="textarea" v-model="courseForm.description" ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click.native="save" >提交</el-button>
</div>
</div>
</template>
<script>
import * as courseApi from '../api/course';
import utilApi from '../../../common/utils';
import * as systemApi from '../../../base/api/system';
export default {
data() {
return {
studymodelList:[],
gradeList:[],
props: {
value: 'id',
label:'name',
children:'children'
},
categoryList: [],
categoryActive:[],
courseForm: {
id:'',
name: '',
users: '',
grade:'',
studymodel:'',
mt:'',
st:'',
description: ''
},
courseRules: {
name: [
{required: true, message: '请输入课程名称', trigger: 'blur'}
],
category: [
{required: true, message: '请选择课程分类', trigger: 'blur'}
],
grade: [
{required: true, message: '请选择课程等级', trigger: 'blur'}
],
studymodel: [
{required: true, message: '请选择学习模式', trigger: 'blur'}
]
}
}
},
methods: {
//新增课程提交
save () {
//处理课程分类
// 选择课程分类存储到categoryActive
this.courseForm.mt= this.categoryActive[0]//大分类
this.courseForm.st= this.categoryActive[1]//小分类
courseApi.addCourseBase(this.courseForm).then(res=>{
if(res.success){
this.$message.success("提交成功")
//跳转到我的课程
this.$router.push({ path: '/course/list'})
}else{
this.$message.error(res.message)
}
})
}
},
created(){
},
mounted(){
// 查询课程分类
courseApi.category_findlist().then(res=>{
this.categoryList = res.children;
console.log(this.categoryList)
})
//查询数据字典
//查询课程等级
systemApi.sys_getDictionary("200").then(res=>{
this.gradeList = res.dvalue;
})
//查询学习模式
systemApi.sys_getDictionary("201").then(res=>{
this.studymodelList = res.dvalue;
})
}
}
</script>
<style scoped>
</style>
2）页面路由
import course_add from '@/module/course/page/course_add.vue';
{ path: '/course/add/base', name: '添加课程',component: course_add,hidden: true },
3）课程添加链接
在我的课程页面添加“新增课程”链接
在course_list.vue 中添加：
<router-link class="mui-tab-item" :to="{path:'/course/add/base'}"> <el-button type="text" class="button" >新增课程</el-button> </router-link>
查询数据字典
课程添加页面中课程等级、学习模式需要从数据字典查询字典信息。
1）定义方法
数据字典查询 为公用方法，所以定义在/base/api/system.js中
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
/*数据字典 */
export const sys_getDictionary= dType => {
return http.requestQuickGet(apiUrl+'/sys/dictionary/get/'+dType)
}
2）在页面获取数据字典
在mounted钩子中定义方法如下：
//查询数据字典字典
systemApi.sys_getDictionary('201').then((res) => {
this.studymodelList = res.dvalue;
});
systemApi.sys_getDictionary('200').then((res) => {
this.gradeList = res.dvalue;
});
3）效果
课程分类
课程添加页面中课程分类采用Cascader组件完成。
Cascader级联选择器
1）页面
<el-form-item label="课程分类" prop="categoryActive">
<el-cascader
expand‐trigger="hover"
:options="categoryList"
v-model="categoryActive"
:props="props">
</el-cascader>
</el-form-item>
2）定义方法
在本模块的course.js中定义
/*查询课程分类 */
export const category_findlist= () => {
return http.requestQuickGet(apiUrl+'/category/list')
}
3）在页面获取课程分类
在mounted钩子中定义
//取课程分类
courseApi.category_findlist({}).then((res) => {
this.categoryList = res.children;
});
5) 如何获取选择的分类
用户选择课程分类后，所选分类ID绑定到categoryActive（数组）中，选择了一级、二级分类，分别存储在
categoryActive数组的第一个、第二个元素中。
新增课程API接口
创建课程添加提交接口：
@Api(value = "课程管理",description = "课程管理",tags = {"课程管理"})
public interface CourseControllerApi {
@ApiOperation("添加课程基础信息")
public AddCourseResult addCourseBase(CourseBase courseBase);
}
新增课程服务端
Dao
public interface CourseBaseRepository extends JpaRepository<CourseBase, String> {
}
Service
//添加课程提交
@Transactional public AddCourseResult addCourseBase(CourseBase courseBase) {
//课程状态默认为未发布
courseBase.setStatus("202001");
courseBaseRepository.save(courseBase);
return new AddCourseResult(CommonCode.SUCCESS,courseBase.getId());
}
Controller
@Override
@PostMapping("/coursebase/add")
public AddCourseResult addCourseBase(@RequestBody CourseBase courseBase) {
return courseService.addCourseBase(courseBase);
}
新增课程前端
Api方法定义
在前端定义请求服务端添加课程的api的方法，在course模块中定义方法如下：
/*添加课程基础信息*/
export const addCourseBase = params => {
return http.requestPost(apiUrl+'/course/coursebase/add',params)
}
Api方法调用
在course_add.vue 调用api提交课程信息
methods: {
//新增课程提交
save () {
//处理课程分类
// 选择课程分类存储到categoryActive
this.courseForm.mt= this.categoryActive[0]//大分类
this.courseForm.st= this.categoryActive[1]//小分类
courseApi.addCourseBase(this.courseForm).then(res=>{
if(res.success){
this.$message.success("提交成功")
//跳转到我的课程
this.$router.push({ path: '/course/list'})
}else{
this.$message.error(res.message)
}
})
}
},
测试
注意：将course_base表中的company_id改为非必填，待认证功能开发完成再修改为必填
测试流程：
1、进入我的课程，点击“新增课程”打开新增课程页面
2、输入课程信息，点击提交
课程信息修改
需求分析
课程添加成功进入课程管理页面，通过课程管理页面修改课程的基本信息、编辑课程图片、编辑课程营销信息等。
本小节实现修改课程。
课程管理页面说明
页面结构
课程管理页面的结构如下：
课程管理导航页面
1、定义course_manage.vue为课程管理导航页面。
导航效果使用Element-UI的NavMenu组件实现。
<template>
<div>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
background-color="#eee"
text-color="#000"
active-text-color="#000">
<router-link class="mui-tab-item" :to="{path:'/course/manage/summary/'+this.courseid}">
<el-menu-item index="1">课程首页</el-menu-item>
</router-link>
<router-link class="mui-tab-item" :to="{path:'/course/manage/baseinfo/'+this.courseid}">
<el-menu-item index="2">基本信息</el-menu-item>
</router-link>
<router-link class="mui-tab-item" :to="{path:'/course/manage/picture/'+this.courseid}">
<el-menu-item index="3">课程图片</el-menu-item>
</router-link>
<router-link class="mui-tab-item" :to="{path:'/course/manage/marketinfo/'+this.courseid}">
<el-menu-item index="4">课程营销</el-menu-item>
</router-link>
<router-link class="mui-tab-item" :to="{path:'/course/manage/plan/'+this.courseid}">
<el-menu-item index="5">课程计划</el-menu-item>
</router-link>
<router-link class="mui-tab-item" :to="{path:'/course/manage/teacher/'+this.courseid}">
<el-menu-item index="6">教师信息</el-menu-item>
</router-link>
<router-link class="mui-tab-item" :to="{path:'/course/manage/pub/'+this.courseid}">
<el-menu-item index="7">发布课程</el-menu-item>
</router-link>
</el-menu>
<router-view class="main"></router-view>
</div>
</template>
<script>
import * as courseApi from '../api/course';
import utilApi from '../../../common/utils';
export default {
data() {
return {
activeIndex:'2',
courseid:''
}
},
methods: {
},
mounted(){
//课程id
this.courseid = this.$route.params.courseid
console.log("courseid=" + this.courseid)
//跳转到课程基本信息
this.$router.push({ path: '/course/manage/baseinfo/'+this.courseid})
}
}
</script>
<style scoped>
</style>
2、创建各各信息管理页面
通过管理页面的导航可以进入各各信息管理页面，这里先创建各各信息管理页面，页面内容暂时为空，待开发时再
完善，在本模块的page目录下创建course_manage目录，此目录存放各各信息管理页面，页面明细如下：
课程管理首页：course_summary.vue
基本信息修改页面：course_baseinfo.vue
图片管理页面：course_picture.vue 营销信息页面：course_marketinfo.vue
老师信息页面：course_teacher.vue
课程计划页面：course_plan.vue
课程发布页面：course_pub.vue
3、创建路由
import Home from '@/module/home/page/home.vue';
import course_list from '@/module/course/page/course_list.vue';
import course_add from '@/module/course/page/course_add.vue';
import course_manage from '@/module/course/page/course_manage.vue';
import course_summary from '@/module/course/page/course_manage/course_summary.vue';
import course_picture from '@/module/course/page/course_manage/course_picture.vue';
import course_baseinfo from '@/module/course/page/course_manage/course_baseinfo.vue';
import course_marketinfo from '@/module/course/page/course_manage/course_marketinfo.vue';
import course_teacher from '@/module/course/page/course_manage/course_teacher.vue';
import course_plan from '@/module/course/page/course_manage/course_plan.vue';
import course_pub from '@/module/course/page/course_manage/course_pub.vue';
export default [
{
path: '/course',
component: Home,
name: '课程管理',
hidden: false,
iconCls: 'el-icon-document',
children: [
{ path: '/course/list', name: '我的课程',component: course_list,hidden: false },
{ path: '/course/add/base', name: '新增课程',component: course_add,hidden: true },
{ path: '/course/manager/:courseid', name: '管理课程',component: course_manage,hidden: true ,
children: [
{ path: '/course/manage/plan/:courseid', name: '课程计划',component: course_plan,hidden: false },
{ path: '/course/manage/baseinfo/:courseid', name: '基本信息',component: course_baseinfo,hidden: false },
{ path: '/course/manage/picture/:courseid', name: '课程图片',component: course_picture,hidden: false },
{ path: '/course/manage/marketinfo/:courseid', name: '营销信息',component: course_marketinfo,hidden: false },
{ path: '/course/manage/teacher/:courseid', name: '教师信息',component: course_teacher,hidden: false},
{ path: '/course/manage/pub/:courseid', name: '发布课程',component: course_pub,hidden: false},
{ path: '/course/manage/summary/:courseid', name: '课程首页',component: course_summary,hidden: false }
]}
]
}
]
课程信息修改Api接口
修改课程需要如下接口：
1、根据id查询课程信息
2、修改课程提交
接口定义如下：
1) 根据课程ID查询课程信息
@ApiOperation("获取课程基础信息")
public CourseBase getCourseBaseById(String courseId) throws RuntimeException;
2）修改课程信息
@ApiOperation("更新课程基础信息")
public ResponseResult updateCourseBase(String id,CourseBase courseBase);
服务端
Dao
略
Service
/**
* 查询课程信息
* @param courseId
* @return
*/
public CourseBase getCourseBaseById(String courseId) {
Optional<CourseBase> optional = courseBaseRepository.findById(courseId);
if (optional.isPresent()) {
CourseBase courseBase = optional.get();
return courseBase;
}
return null;
}
/**
* 修改课程信息
* @param courseId
* @param courseBase
* @return
*/
@Transactional
public ResponseResult updateCourseBase(String courseId, CourseBase courseBase) {
//先根据id查询
CourseBase courseBaseById = this.getCourseBaseById(courseId);
//查询不到的话抛异常
if (courseBaseById == null) {
ExceptionCast.cast(CommonCode.INVALID_PARAM);
}
//修改信息
courseBaseById.setName(courseBase.getName());
courseBaseById.setMt(courseBase.getMt());
courseBaseById.setSt(courseBase.getSt());
courseBaseById.setGrade(courseBase.getGrade());
courseBaseById.setStudymodel(courseBase.getStudymodel());
courseBaseById.setUsers(courseBase.getUsers());
courseBaseById.setDescription(courseBase.getDescription());
CourseBase save = courseBaseRepository.save(courseBaseById);
return new ResponseResult(CommonCode.SUCCESS);
}
Controller
/**
* 查询课程基本信息
* @param courseId
* @return
*/
@Override
@GetMapping("/coursebase/get/{courseId}")
public CourseBase getCourseBaseById(@PathVariable("courseId") String courseId) {
return courseService.getCourseBaseById(courseId);
}
/**
* 修改课程基础信息
* @param courseId
* @param courseBase
* @return
*/
@Override
@PutMapping("/coursebase/update/{courseId}")
public ResponseResult updateCourseBase(@PathVariable("courseId") String courseId, @RequestBody CourseBase courseBase) {
return courseService.updateCourseBase(courseId,courseBase);
}
前端
修改页面
在course模块下的course_manage目录下创建course_baseinfo.vue页面，本页面实现课程修改
<template>
<div>
<el-form :model="courseForm" label-width="80px" :rules="courseRules" ref="courseForm">
<el-form-item label="课程名称" prop="name">
<el-input v-model="courseForm.name" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="适用人群" prop="users">
<el-input type="textarea" v-model="courseForm.users" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="课程分类" prop="categoryActive">
<el-cascader
expand-trigger="hover"
:options="categoryList"
v-model="categoryActive"
:props="props">
</el-cascader>
</el-form-item>
<el-form-item label="课程等级" prop="grade">
<b v-for="grade in gradeList">
<el-radio v-model="courseForm.grade" :label="grade.sdId" >{{grade.sdName}}</el-radio>
</b>
</el-form-item>
<el-form-item label="学习模式" prop="studymodel">
<b v-for="studymodel_v in studymodelList">
<el-radio v-model="courseForm.studymodel" :label="studymodel_v.sdId" >{{studymodel_v.sdName}}</el-radio>
</b>
</el-form-item>
<el-form-item label="课程介绍" prop="description">
<el-input type="textarea" v-model="courseForm.description" ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click.native="save" :loading="editLoading">提交</el-button>
</div>
</div>
</template>
<script>
import * as courseApi from '../../api/course';
import utilApi from '../../../../common/utils';
import * as systemApi from '../../../../base/api/system';
export default {
data() {
return {
dotype:'',
courseid:'',
studymodelList:[],
gradeList:[],
editLoading: false,
props: {
value: 'id',
label:'label',
children:'children'
},
categoryList: [],
categoryActive:[],
courseForm: {
id:'',
name: '',
users: '',
grade:'',
studymodel:'',
mt:'',
st:'',
description: ''
},
courseRules: {
name: [
{required: true, message: '请输入课程名称', trigger: 'blur'}
],
category: [
{required: true, message: '请选择课程分类', trigger: 'blur'}
],
grade: [
{required: true, message: '请选择课程等级', trigger: 'blur'}
],
studymodel: [
{required: true, message: '请选择学习模式', trigger: 'blur'}
]
}
}
},
methods: {
save () {
//修改课程
this.$refs.courseForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.editLoading = true;
let mt = this.categoryActive[0];
let st = this.categoryActive[1];
this.courseForm.mt = mt;
this.courseForm.st = st;
let id = this.courseForm.id
courseApi.updateCoursebase(id,this.courseForm).then((res) => {
this.editLoading = false;
if(res.success){
this.$message({
message: '提交成功',
type: 'success'
});
//保存成功自动刷新
courseApi.getCoursebaseById(id);
}else{
if(res.message){
this.$message.error(res.message);
}else{
this.$message.error('提交失败');
}
}
});
});
}
});
}
},
created(){
},
mounted(){
//查询数据字典字典
systemApi.sys_getDictionary('201').then((res) => {
// console.log(res);
this.studymodelList = res.dvalue;
});
systemApi.sys_getDictionary('200').then((res) => {
this.gradeList = res.dvalue;
});
//取课程分类
courseApi.category_findlist({}).then((res) => {
this.categoryList = res.children;
});
//查询课程信息
//课程id
this.courseid = this.$route.params.courseid;
courseApi.getCoursebaseById(this.courseid).then((res) => {
// console.log(res);
this.courseForm = res;
//课程分类显示，需要两级分类
this.categoryActive.push(this.courseForm.mt);
this.categoryActive.push(this.courseForm.st);
});
}
}
</script>
<style scoped>
</style>
API方法
//查询课程信息
export const getCoursebaseById = courseId => {
return http.requestQuickGet(apiUrl+'/course/coursebase/get/'+courseId)
}
//修改课程信息
export const updateCoursebase = (courseId,coursebase) => {
return http.requestPut(apiUrl+'/course/coursebase/update/'+courseId,coursebase)
}
课程信息显示
在mounted钩子方法中查询课程信息及数据字典：
mounted(){
//查询数据字典字典
systemApi.sys_getDictionary('201').then((res) => {
// console.log(res);
this.studymodelList = res.dvalue;
});
systemApi.sys_getDictionary('200').then((res) => {
this.gradeList = res.dvalue;
});
//取课程分类
courseApi.category_findlist({}).then((res) => {
this.categoryList = res.children;
});
//查询课程信息
//课程id
this.courseid = this.$route.params.courseid;
courseApi.getCoursebaseById(this.courseid).then((res) => {
// console.log(res);
this.courseForm = res;
//课程分类显示，需要两级分类
this.categoryActive.push(this.courseForm.mt);
this.categoryActive.push(this.courseForm.st);
});
}
}
课程修改提交
编辑课程提交方法：
save () {
//修改课程
this.$refs.courseForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.editLoading = true;
let mt = this.categoryActive[0];
let st = this.categoryActive[1];
this.courseForm.mt = mt;
this.courseForm.st = st;
let id = this.courseForm.id
courseApi.updateCoursebase(id,this.courseForm).then((res) => {
this.editLoading = false;
if(res.success){
this.$message({
message: '提交成功',
type: 'success'
});
//保存成功自动刷新
courseApi.getCoursebaseById(id);
}else{
if(res.message){
this.$message.error(res.message);
}else{
this.$message.error('提交失败');
}
}
});
});
}
});
}