学成在线 第6天 讲义-页面发布 课程管理八

3.2.4 前端页面 
3.2.4.1Api方法 
定义课程计划查询的api方法：

/
*
查询课程计划
*
/
export const findTeachplanList
=
courseid
=
> {
return http
.requestQuickGet(apiUrl+
'
/course/teachplan/list/
'
+courseid)
}

3.2.4.2Api调用 
1、在mounted钩子方法 中查询 课程计划 
定义查询课程计划的方法，赋值给数据对象teachplanList

findTeachplan(){
courseApi.findTeachplanList(this.courseid)
.then((res)
=
> {
this.teachplanList
=
[];//清空树
if(res.children){
this.teachplanList
= res.children;
}
})

2）在mounted钩子中查询课程计划

mounted(){
//课程id
this.courseid
=
this.
$route.
params.courseid;
//课程计划
this.findTeachplan();
}

3）修改树结点的标签属性 
课程计划信息中pname为结点的名称，需要修改树结点的标签属性方可正常显示课程计划名称，如下：

defaultProps: {
children:
'
children
'
,
label:
'
pname
'
}

3.2.4.3 测试
 

3.3 添加课程计划 
3.3.1 需求分析 
用户操作流程：
1、进入课程计划页面，点击“添加课程计划”
2、打开添加课程计划页面，输入课程计划信息 

 
上级结点说明： 
不选择上级结点表示当前课程计划为该课程的一级结点。
当添加该课程在课程计划中还没有节点时要自动添加课程的根结点。 
3、点击提交。 
3.3.1.1 页面原型说明 
添加课程计划采用弹出窗口组件Dialog。 
1、视图部分 
在course_plan.vue页面添加添加课程计划的弹出窗口代码：

<el
‐
dialog title
=
"
添加课程计划
"
:visible.sync
=
"
teachplayFormVisible
"
>
<el
‐
form ref=
"
teachplayForm
"
:model=
"
teachplanActive
"
label
‐
width=
"
140px
"
style
=
"
width:600px;
"
:rules
=
"
teachplanRules
"
>
<el
‐
form
‐
item label=
"
上级结点
"
>
<el
‐
select v
‐
model=
"
teachplanActive.
parentid
"
placeholder=
"
不填表示根结点
"
>
<el
‐
option
v
‐
for=
"
item in teachplanList
"
:key
=
"
item.id
"
:label=
"
item.
pname
"
:value
=
"
item.id
"
>
</el
‐
option>
</el
‐
select>
</el
‐
form
‐
item>
<el
‐
form
‐
item label=
"
章节/课时名称
"
prop
=
"
pname
"
>
<el
‐
input v
‐
model=
"
teachplanActive.
pname
"
auto
‐
complete
=
"
off
"
></el
‐
input>
</el
‐
form
‐
item>
<el
‐
form
‐
item label=
"
课程类型
"
>
<el
‐
radio
‐
group v
‐
model=
"
teachplanActive.
ptype
"
>
<el
‐
radio class
=
"
radio
"
label=
'
1
'
>视频</el
‐
radio>
<el
‐
radio class
=
"
radio
"
label=
'
2
'
>文档</el
‐
radio>
</el
‐
radio
‐
group>
</el
‐
form
‐
item>
<el
‐
form
‐
item label=
"
学习时长（分钟） 请输入数字
"
>
<el
‐
input type
=
"
number
"
v
‐
model=
"
teachplanActive.timelength
"
auto
‐
complete
=
"
off
"
></el
‐
input>
</el
‐
form
‐
item>
<el
‐
form
‐
item label=
"
排序字段
"
>
<el
‐
input v
‐
model=
"
teachplanActive.orderby
"
auto
‐
complete
=
"
off
"
></el
‐
input>
</el
‐
form
‐
item>
<el
‐
form
‐
item label=
"
章节/课时介绍
"
prop
=
"
description
"
>
<el
‐
input type
=
"
textarea
"
v
‐
model=
"
teachplanActive.description
"
></el
‐
input>
</el
‐
form
‐
item>
<el
‐
form
‐
item label=
"
状态
"
prop
=
"
status
"
>
<el
‐
radio
‐
group v
‐
model=
"
teachplanActive.status
"
>
<el
‐
radio class
=
"
radio
"
label=
"
0
"
>未发布</el
‐
radio>
<el
‐
radio class
=
"
radio
"
label=
'
1
'
>已发布</el
‐
radio>
</el
‐
radio
‐
group>
</el
‐
form
‐
item>
<el
‐
form
‐
item >
<el
‐
button type
=
"
primary
"
v
‐
on:click=
"
addTeachplan
"
>提交</el
‐
button>
<el
‐
button type
=
"
primary
"
v
‐
on:click=
"
resetForm
"
>重置</el
‐
button>
</el
‐
form
‐
item>
</el
‐
form>
</el
‐
dialog>

2、数据模型 
在数据模型中添加如下变量：
在数据对象中添加：

teachplayFormVisible:false,
teachplanRules: {
pname: [
{required: true, message:
'
请输入课程计划名称
'
, trigger:
'
blur
'
}
],
status: [
{required: true, message:
'
请选择状态
'
, trigger:
'
blur
'
}
]
},
teachplanActive:{},

3、 添加按钮

通过变量teachplayFormVisible控制弹出窗口是否显示。

<el
‐
button type
=
"
primary
"
@click=
"
teachplayFormVisible
=
true
"
>添加课程计划</el
‐
button>

4、定义表单提交方法和重置方法

//提交课程计划
addTeachplan(){
alert()
},
//重置表单
resetForm(){
this.teachplanActive
=
{}
},

3.3.3 API接口 
1）添加课程计划

@ApiOperation(
"
添加课程计划
"
)
public ResponseResult addTeachplan(Teachplan teachplan);