子组件代码
<template>
<div>
<!--查询表单-->
<el-form :model="params">
标签：
<el-input v-model="params.tag" style="width:160px"></el-input>
原始名称：
<el-input v-model="params.fileName" style="width:160px"></el-input>
处理状态：
<el-select v-model="params.processStatus" placeholder="请选择处理状态">
<el-option
v-for="item in processStatusList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<br/>
<el-button type="primary" v-on:click="query" size="small">查询</el-button>
<router-link class="mui-tab-item" :to="{path:'/upload'}">
<el-button type="primary" size="small" v-if="ischoose != true">上传文件</el-button>
</router-link>
</el-form>
<!--列表-->
<el-table :data="list" highlight-current-row v-loading="listLoading" style="width: 100%;">
<el-table-column type="index" width="30">
</el-table-column>
<el-table-column prop="fileOriginalName" label="原始文件名称" width="220">
</el-table-column>
<el-table-column prop="fileName" label="文件名称" width="220">
</el-table-column>
<el-table-column prop="fileUrl" label="访问url" width="260">
</el-table-column>
<el-table-column prop="tag" label="标签" width="100">
</el-table-column>
<el-table-column prop="fileSize" label="文件大小" width="120">
</el-table-column>
<el-table-column prop="processStatus" label="处理状态" width="100" :formatter="formatProcessStatus">
</el-table-column>
<el-table-column prop="uploadTime" label="创建时间" width="110" :formatter="formatCreatetime">
</el-table-column>
<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>
<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>
</el-table>
<!--分页-->
<el-col :span="24" class="toolbar">
<el-pagination background layout="prev, pager, next" @current-change="changePage" :page-size="this.params.size"
:total="total" :current-page="this.params.page"
style="float:right;">
</el-pagination>
</el-col>
</div>
</template>
<script>
import * as mediaApi from '../api/media'
import utilApi from '@/common/utils';
import * as courseApi from '../api/course'
export default{
props: ['ischoose'],
data(){
return {
params:{
page:1,//页码
size:10,//每页显示个数
tag:'',//标签
fileName:'',//文件名称
processStatus:''//处理状态
},
listLoading:false,
list:[],
total:0,
processStatusList:[]
}
},
methods:{
formatCreatetime(row, column){
var createTime = new Date(row.uploadTime);
if (createTime) {
return utilApi.formatDate(createTime, 'yyyy-MM-dd hh:mm:ss');
}
},
formatProcessStatus(row,column){
var processStatus = row.processStatus;
if (processStatus) {
if(processStatus == '303001'){
return "处理中";
}else if(processStatus == '303002'){
return "处理成功";
}else if(processStatus == '303003'){
return "处理失败";
}else if(processStatus == '303004'){
return "无需处理";
}
}
},
choose(mediaFile){
if(mediaFile.processStatus !='303002' && mediaFile.processStatus !='303004'){
this.$message.error('该文件未处理，不允许选择');
return ;
}
if(!mediaFile.fileUrl){
this.$message.error('该文件的访问url为空，不允许选择');
return ;
}
/*let teachplanMedia ={}
teachplanMedia.mediaId =mediaFile.fileId;
teachplanMedia.mediaFileOriginalName =mediaFile.fileOriginalName;
teachplanMedia.mediaUrl =mediaFile.fileUrl;
teachplanMedia.courseId =this.courseid;
//课程计划
teachplanMedia.teachplanId=this.teachplanId
courseApi.savemedia(teachplanMedia).then(res=>{
if(res.success){
this.$message.success("选择视频成功")
//查询课程计划
this.findTeachplan()
}else{
this.$message.error(res.message)
}
})*/
//调用父组件的choosemedia方法
this.$emit('choosemedia',mediaFile.fileId,mediaFile.fileOriginalName,mediaFile.fileUrl);
},
changePage(page){
this.params.page = page;
this.query()
},
process (id) {
console.log(id)
mediaApi.media_process(id).then((res)=>{
console.log(res)
if(res.success){
this.$message.success('开始处理，请稍后查看处理结果');
}else{
this.$message.error('操作失败，请刷新页面重试');
}
})
},
query(){
mediaApi.media_list(this.params.page,this.params.size,this.params).then((res)=>{
console.log(res)
this.total = res.queryResult.total
this.list = res.queryResult.list
})
}
},
created(){
//默认第一页
this.params.page = Number.parseInt(this.$route.query.page||1);
},
mounted() {
//默认查询页面
this.query()
//初始化处理状态
this.processStatusList = [
{
id:'',
name:'全部'
},
{
id:'303001',
name:'处理中'
},
{
id:'303002',
name:'处理成功'
},
{
id:'303003',
name:'处理失败'
},
{
id:'303004',
name:'无需处理'
}
]
}
}
</script>
<style>
</style>
父组件代码
<template>
<div>
<el-button type="primary" @click="teachplayFormVisible = true">添加课程计划</el-button>
<el-tree
:data="teachplanList"
:props="defaultProps"
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent">
</el-tree>
<el-dialog title="添加课程计划" :visible.sync="teachplayFormVisible" >
<el-form ref="teachplanForm" :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>
<el-dialog title="选择媒资文件" :visible.sync="mediaFormVisible">
<media-list v-bind:ischoose="true" @choosemedia="choosemedia"></media-list>
</el-dialog>
</div>
</template>
<script>
let id = 1000;
import * as courseApi from '../../api/course';
import utilApi from '../../../../common/utils';
import * as systemApi from '../../../../base/api/system';
import mediaList from '@/module/media/page/media_list.vue';
export default {
components:{
mediaList
},
data() {
return {
mediaFormVisible:false,
teachplayFormVisible:false,//控制添加窗口是否显示
teachplanList : [{
id: 1,
pname: '一级 1',
children: [{
id: 4,
pname: '二级 1-1',
children: [{
id: 9,
pname: '三级 1-1-1'
}, {
id: 10,
pname: '三级 1-1-2'
}]
}]
}],
defaultProps:{
children: 'children',
label: 'pname'
},
teachplanRules: {
pname: [
{required: true, message: '请输入课程计划名称', trigger: 'blur'}
],
status: [
{required: true, message: '请选择状态', trigger: 'blur'}
]
},
teachplanActive:{},
teachplanId:''
}
},
methods: {
//选择视频，打开窗口
choosevideo(data){
//得到当前的课程计划
this.teachplanId = data.id
// alert(this.teachplanId)
this.mediaFormVisible = true;//打开窗口
},
//保存选择的视频
choosemedia(mediaId, fileOriginalName, mediaUrl){
alert(111)
//保存视频到课程计划表中
let teachplanMedia ={}
teachplanMedia.mediaId =mediaId;
teachplanMedia.mediaFileOriginalName =fileOriginalName;
teachplanMedia.mediaUrl =mediaUrl;
teachplanMedia.courseId =this.courseid;
//课程计划
teachplanMedia.teachplanId=this.teachplanId
courseApi.savemedia(teachplanMedia).then(res=>{
if(res.success){
this.$message.success("选择视频成功")
//查询课程计划
this.findTeachplan()
}else{
this.$message.error(res.message)
}
})
},
//提交课程计划
addTeachplan(){
//校验表单
this.$refs.teachplanForm.validate((valid) => {
if (valid) {
//调用api方法
//将课程id设置到teachplanActive
this.teachplanActive.courseid = this.courseid
courseApi.addTeachplan(this.teachplanActive).then(res=>{
if(res.success){
this.$message.success("添加成功")
//刷新树
this.findTeachplan()
}else{
this.$message.error(res.message)
}
})
}
})
},
//重置表单
resetForm(){
this.teachplanActive = {}
},
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
edit(data){
//alert(data.id);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
return (
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.choosevideo(data) }>{data.mediaFileOriginalName} 选择视频</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.edit(data) }>修改</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
</span>
</span>);
},
findTeachplan(){
this.teachplanList = []
//查询课程计划
courseApi.findTeachplanList(this.courseid).then(res=>{
if(res && res.children){
this.teachplanList = res.children;
}
})
}
},
mounted(){
//课程id
this.courseid = this.$route.params.courseid;
//查询课程计划
this.findTeachplan()
}
}
</script>
<style>
</style>
在子组件想用这个方法调用父组件中方法,但无法调用,控制台上也没提示.后来发现,在webstorm中按着Ctrl键追踪不到.鼠标放上去提示Unresolved function or method $emit()
