|
【郑州校区】学成在线 第6天 讲义-页面发布 课程管理八
3.2.4 前端页面
3.2.4.1Api方法
定义课程计划查询的api方法：
[AppleScript] 纯文本查看 复制代码 /
*
查询课程计划
*
/
export const findTeachplanList
=
courseid
=
> {
return http
.requestQuickGet(apiUrl+
'
/course/teachplan/list/
'
+courseid)
}
3.2.4.2Api调用
1、在mounted钩子方法 中查询 课程计划
定义查询课程计划的方法，赋值给数据对象teachplanList
[AppleScript] 纯文本查看 复制代码 findTeachplan(){
courseApi.findTeachplanList(this.courseid)
.then((res)
=
> {
this.teachplanList
=
[];//清空树
if(res.children){
this.teachplanList
= res.children;
}
})
2）在mounted钩子中查询课程计划
[AppleScript] 纯文本查看 复制代码 mounted(){
//课程id
this.courseid
=
this.
$route.
params.courseid;
//课程计划
this.findTeachplan();
}
3）修改树结点的标签属性
课程计划信息中pname为结点的名称，需要修改树结点的标签属性方可正常显示课程计划名称，如下：
[AppleScript] 纯文本查看 复制代码 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页面添加添加课程计划的弹出窗口代码：
[AppleScript] 纯文本查看 复制代码 <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、数据模型
在数据模型中添加如下变量：
在数据对象中添加：
[AppleScript] 纯文本查看 复制代码 teachplayFormVisible:false,
teachplanRules: {
pname: [
{required: true, message:
'
请输入课程计划名称
'
, trigger:
'
blur
'
}
],
status: [
{required: true, message:
'
请选择状态
'
, trigger:
'
blur
'
}
]
},
teachplanActive:{},
3、 添加按钮
通过变量teachplayFormVisible控制弹出窗口是否显示。
[AppleScript] 纯文本查看 复制代码 <el
‐
button type
=
"
primary
"
@click=
"
teachplayFormVisible
=
true
"
>添加课程计划</el
‐
button>
4、定义表单提交方法和重置方法
[AppleScript] 纯文本查看 复制代码 //提交课程计划
addTeachplan(){
alert()
},
//重置表单
resetForm(){
this.teachplanActive
=
{}
},
3.3.3 API接口
1）添加课程计划
[AppleScript] 纯文本查看 复制代码 @ApiOperation(
"
添加课程计划
"
)
public ResponseResult addTeachplan(Teachplan teachplan);
| 
收藏
淘帖
踩
