黑马程序员技术交流社区

标题: 【郑州校区】学成在线-第14天-讲义-媒资管理四 [打印本页]

作者: 我是楠楠 时间: 2019-12-31 16:11
标题: 【郑州校区】学成在线-第14天-讲义-媒资管理四

【郑州校区】学成在线-第14天-讲义-媒资管理四

3 媒资与课程计划关联
3.1需求分析
到目前为止，媒资管理已完成文件上传、视频处理、我的媒资功能等基本功能。其它模块已可以使用媒资管理功能，本节要讲解课程计划在编辑时如何选择媒资文件。
操作的业务流程如下：
1、进入课程计划修改页面
2、选择视频
打开媒资文件查询窗口，找到该课程章节的视频，选择此视频。
点击“选择媒资文件”打开媒资文件列表

3、选择成功后，将在课程管理数据库保存课程计划对应在的课程视频地址。
在课程管理数据库创建表 teachplan_media 存储课程计划与媒资关联信息，如下：

3.2 选择视频
3.2.1 Vue父子组件通信
上一章已实现了我的媒资页面，所以媒资查询窗口页面不需要再开发，将“我的媒资页面”作为一个组件在修改课程计划页面中引用，如下图：

修改课程计划页面为父组件，我的媒资查询页面为子组件。
问题1：
我的媒资页面在选择媒资文件时不允许显示，比如“视频处理”按钮，该如何控制？
这时就需要父组件（修改课程计划页面）向子组件（我的媒资页面）传入一个变量，使用此变量来控制当前是否进入选择媒资文件业务，从而控制哪些元素不显示，如下图：

问题2：
在我的媒资页面选择了媒资文件，如何将选择的媒资文件信息传到父组件？
这时就需要子组件调用父组件的方法来解决此问题，如下图：

3.2.2 父组件（修改课程计划）
本节实现功能：在课程计划页面打开我的媒资页面。
1、引入子组件

[AppleScript] 纯文本查看 复制代码

 import mediaList from '@/module/media/page/media_list.vue';

export default {

components:{

mediaList

},

data() {

....

2、使用子组件
在父组件的视图中使用子组件，同时传入变量ischoose，并指定父组件的方法名为choosemedia
这里使用el-dialog 实现弹出窗口。

[AppleScript] 纯文本查看 复制代码

 <el‐dialog title="选择媒资文件" :visible.sync="mediaFormVisible">

<media‐list v‐bind:ischoose="true" @choosemedia="choosemedia"></media‐list>

</el‐dialog>

3、choosemedia方法
在父组件中定义choosemedia方法，接收子组件调用，参数包括：媒资文件id、媒资文件的原始名称、媒资文件url

[AppleScript] 纯文本查看 复制代码

choosemedia(mediaId,fileOriginalName,mediaUrl){

}

4、打开子组件窗口
1）打开子组件窗口按钮定义

[AppleScript] 纯文本查看 复制代码

添加“选择视频”按钮：

<el‐button style="font‐size: 12px;" type="text" on‐click={ () => this.querymedia(data.id) }>选择

视频</el‐button>

效果如下：

2、打开子组件窗口方法
定义querymedia方法：

[AppleScript] 纯文本查看 复制代码

 methods: {

//打开查询媒资文件窗口，传入课程计划id

querymedia(teachplanId){

this.activeTeachplanId = teachplanId;

this.mediaFormVisible = true;

},

3.2.3 子组件（我的媒资查询）
1、定义ischoose变量，接收父组件传入的ischoose

[AppleScript] 纯文本查看 复制代码

 export default{

props: ['ischoose'],

data(){

2、父组件传的ischoose变量为 true时表示当前是选择媒资文件业务，需要控制页面元素是否显示
1）ischoose=true，选择按钮显示

[AppleScript] 纯文本查看 复制代码

 <el‐table‐column label="选择" width="80" v‐if="ischoose == true">

<template slot‐scope="scope">

<el‐button

size="small" type="primary" plain @click="choose(scope.row)">选择</el‐button>

</template>

</el‐table‐column>

2）ischoose=false，视频处理按钮显示

[AppleScript] 纯文本查看 复制代码

<el‐table‐column label="开始处理" width="100" v‐if="ischoose != true">

<template slot‐scope="scope">

<el‐button

size="small" type="primary" plain @click="process(scope.row.fileId)">开始处理

</el‐button>

</template>

</el‐table‐column>

3、选择媒资文件方法
用户点击“选择”按钮将向父组件传递媒资文件信息

[AppleScript] 纯文本查看 复制代码

 choose(mediaFile){

if(mediaFile.processStatus !='303002' && mediaFile.processStatus !='303004'){

this.$message.error('该文件未处理，不允许选择');

return ;

}

if(!mediaFile.fileUrl){

this.$message.error('该文件的访问url为空，不允许选择');

return ;

}

//调用父组件的choosemedia方法

this.$emit('choosemedia',mediaFile.fileId,mediaFile.fileOriginalName);

}

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2