Java的新项目学成在线笔记-day6（十一）

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为结点的名称，需要修改树结点的标签属性方可正常显示课程计划名称，如下：

[AppleScript] 纯文本查看复制代码
?
1
defaultProps: { children: 'children', label: 'pname' }

3.2.4.3 测试
Java的新项目学成在线笔记-day6（十一）
3.3 添加课程计划 3.3.1 需求分析
用户操作流程：

1、进入课程计划页面，点击“添加课程计划” 2、打开添加课程计划页面，输入课程计划信息

Java的新项目学成在线笔记-day6（十一）
上级结点说明：
不选择上级结点表示当前课程计划为该课程的一级结点。
当添加该课程在课程计划中还没有节点时要自动添加课程的根结点。

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" ></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、数据模型
在数据模型中添加如下变量：

在数据对象中添加：

 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 = {} },

Java的新项目学成在线笔记-day6（十一）

猜你喜欢