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">
[AppleScript] 纯文本查看 复制代码 <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" ></elinput>
</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 = {} },
| 
收藏
淘帖
踩
