|
@@ -1,73 +1,48 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
-
|
|
|
- <div class="search-term">
|
|
|
- <el-form :inline="true" class="demo-form-inline">
|
|
|
- <el-form-item>
|
|
|
- <DropSearch type="media" @select="selectMedia" placeholder="点击选择视频" ></DropSearch>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="text">目前只支持从库中选视频新建课程</el-button>
|
|
|
- </el-form-item>
|
|
|
+ <div class="button-box clearflex fr p20">
|
|
|
+ <el-button @click="$router.go(-1)" type="primary">
|
|
|
+ 返回列表
|
|
|
+ </el-button>
|
|
|
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <el-table :data="tableData" border stripe>
|
|
|
+ <el-button @click="dialogFormVisible = true" type="primary"
|
|
|
+ >新增章节</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table :data="tableData.slice(page*size-size, page*size)" border stripe>
|
|
|
<el-table-column label="序号" width="70" prop="mediaId">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column label="课程名字" prop="name" min-width="160">
|
|
|
+ <el-table-column label="视频名字" prop="name" min-width="200">
|
|
|
<template slot-scope="{row}">
|
|
|
- <el-input v-if="row.edit" v-model="row.name" type="text" clearable></el-input>
|
|
|
+ <el-input v-if="row.edit" v-model="row.name"></el-input>
|
|
|
<span v-else>{{row.name}}</span>
|
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="视频信息" prop="duration" width="160">
|
|
|
- <template slot-scope="{row, $index}">
|
|
|
- <DropSearch v-if="row.edit" type="media" @select="updateMedia" :id="$index" placeholder="点击选择视频" ></DropSearch>
|
|
|
- <span v-else>{{ parseInt(row.duration/60) }}分钟</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="视频学时" prop="xs" width="100" >
|
|
|
- <template slot-scope="{row}">
|
|
|
- <el-input v-if="row.edit" v-model="row.xs" type="number" clearable></el-input>
|
|
|
- <span v-else>{{row.xs/10}}学时</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="提速百分比" prop="playRate">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <el-input
|
|
|
- v-if="row.edit"
|
|
|
- v-model="row.playRate"
|
|
|
- type="number" :max="1000" :min="0"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- <span v-else>{{ row.playRate }}%</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
- <el-table-column label="视频分类" prop="chapter" width="100">
|
|
|
- <template slot-scope="{row}">
|
|
|
- <el-select v-if="row.edit" v-model="row.chapter" placeholder="请选择">
|
|
|
- <el-option :value="1" label="通用"></el-option>
|
|
|
- <el-option :value="2" label="专业"></el-option>
|
|
|
- <el-option :value="3" label="其他"></el-option>
|
|
|
- </el-select>
|
|
|
- <span v-else>{{chapters[row.chapter]}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="加入时间" prop="xs" width="160">
|
|
|
- <template slot-scope="{row}">
|
|
|
- <span>{{row.publishAt}}</span>
|
|
|
- </template>
|
|
|
</el-table-column>
|
|
|
|
|
|
+ <el-table-column label="视频章节" prop="chapter" min-width="140">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-input v-if="row.edit" v-model="row.chapter"></el-input>
|
|
|
+ <span v-else>{{row.chapter}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+
|
|
|
+ <el-table-column label="视频地址" prop="url" >
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-input v-if="row.edit" v-model="row.url"></el-input>
|
|
|
+ <span v-else>{{row.url}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+
|
|
|
+ <el-table-column label="章节排序" prop="orderId" >
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-input v-if="row.edit" v-model="row.orderId"></el-input>
|
|
|
+ <span v-else>{{row.orderId}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
<el-table-column
|
|
|
align="center"
|
|
@@ -101,7 +76,7 @@
|
|
|
|
|
|
<el-button
|
|
|
v-if="!row.edit"
|
|
|
- type="primary"
|
|
|
+ type="warning"
|
|
|
size="small"
|
|
|
icon="el-icon-edit"
|
|
|
@click="dropMedia(row, $index)"
|
|
@@ -110,12 +85,13 @@
|
|
|
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+
|
|
|
<el-pagination
|
|
|
:current-page="page"
|
|
|
:page-size="size"
|
|
|
:page-sizes="[10, 30, 50, 100]"
|
|
|
:style="{float:'right',padding:'20px'}"
|
|
|
- :total="total"
|
|
|
+ :total="tableData.length"
|
|
|
@current-change="handleCurrentChange"
|
|
|
@size-change="handleSizeChange"
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@@ -123,34 +99,22 @@
|
|
|
|
|
|
<el-dialog title="新增课程" center :visible.sync="dialogFormVisible" >
|
|
|
<el-form :model="form" :rules="rules" label-width="120px" ref="elForm">
|
|
|
- <el-form-item label="课程标题" prop="name" >
|
|
|
+ <el-form-item label="视频名字" prop="name" >
|
|
|
<el-input v-model="form.name" type="text" class="user-form-item" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="视频分类" prop="name">
|
|
|
- <el-radio-group v-model="form.chapter">
|
|
|
- <el-radio :label="0">其他</el-radio>
|
|
|
- <el-radio :label="1">通用</el-radio>
|
|
|
- <el-radio :label="2">专业</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="课程学时" prop="name">
|
|
|
- <el-input v-model="form.xs" type="number" class="user-form-item" clearable></el-input>
|
|
|
+ <el-form-item label="视频章节" prop="chapter" >
|
|
|
+ <el-input v-model="form.chapter" type="text" class="user-form-item" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="视频时长(秒)" prop="name">
|
|
|
- <el-input v-model="form.duration" type="number" class="user-form-item" clearable></el-input>
|
|
|
+ <el-form-item label="视屏地址" prop="name">
|
|
|
+ <el-input v-model="form.url" type="text" class="user-form-item" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="提速百分比" prop="name">
|
|
|
- <el-input v-model="form.playRate" type="number" :max="1000" :min="0" class="user-form-item" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
-
|
|
|
- <el-form-item label="视频地址" prop="name">
|
|
|
- <span>{{form.url}}</span>
|
|
|
+ <el-form-item label="章节排序" prop="orderId">
|
|
|
+ <el-input v-model="form.orderId" type="number" class="user-form-item" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
|
|
|
</el-form>
|
|
|
<div class="dialog-footer" slot="footer">
|
|
@@ -165,8 +129,7 @@
|
|
|
|
|
|
<script>
|
|
|
import DropSearch from '@/components/select/DropSearch.vue';
|
|
|
-import infoList from "@/mixins/infoList";
|
|
|
-import { getCourseMediaList, deleteCourseMedia, addCourseMedia} from "@/api/course.js";
|
|
|
+import { deleteCourseMedia, addCourseMedia, getCourseMediaList} from "@/api/course.js";
|
|
|
import PreviewImg from "@/components/customPic/previewImg.vue";
|
|
|
export default {
|
|
|
name: "Api",
|
|
@@ -176,25 +139,25 @@ export default {
|
|
|
listApi: getCourseMediaList,
|
|
|
dialogFormVisible: false,
|
|
|
info:{},
|
|
|
+ searchInfo:{courseName:''},
|
|
|
+ tableData:[],
|
|
|
+ page:1,
|
|
|
+ size:10,
|
|
|
form:{
|
|
|
- xs:0,
|
|
|
- chapter:1,
|
|
|
+ name:'',
|
|
|
+ chapter:'',
|
|
|
+ orderId:'',
|
|
|
+ url:'',
|
|
|
courseId:+this.$route.query.id,
|
|
|
},
|
|
|
- chapters:{
|
|
|
- 1:'通用',
|
|
|
- 2:'专业',
|
|
|
- 0:'其他'
|
|
|
- },
|
|
|
rules:{
|
|
|
name: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
|
|
- groupName: [ { required: true, message: "请输入考题组", trigger: "blur" }],
|
|
|
- startTime: [ { required: true, message: "请输入开始时间", trigger: "blur" }],
|
|
|
- duration: [ { required: true, message: "请输入时长", trigger: "blur" }],
|
|
|
+ chapter: [ { required: true, message: "请输入章节", trigger: "blur" }],
|
|
|
+ url: [ { required: true, message: "请输入地址", trigger: "blur" }],
|
|
|
+ orderId: [ { required: true, message: "请输入章节排序", trigger: "blur" }],
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- mixins: [infoList],
|
|
|
components:{PreviewImg,DropSearch},
|
|
|
filters:{
|
|
|
toFiexd(val){
|
|
@@ -202,31 +165,25 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- onSubmit() {
|
|
|
- this.page = 1;
|
|
|
- this.size = 10;
|
|
|
- this.getTableData();
|
|
|
+ getTableData(){
|
|
|
+ let courseId = this.courseId;
|
|
|
+ getCourseMediaList({courseId}).then( res=>{
|
|
|
+ if( res.code == 200){
|
|
|
+ this.tableData = res.data.map( v=>{
|
|
|
+ v.edit= false
|
|
|
+ return v
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- selectMedia(row){
|
|
|
- if( !row.id ) return
|
|
|
- this.form = Object.assign( this.form, row);
|
|
|
- this.form.xs = parseInt(row.duration /360)
|
|
|
- this.form.name = row.name.split(".")[0];
|
|
|
- this.form.url = `https://media.ndjsxh.cn:8443/mp4/study/${row.id}.mp4`
|
|
|
- this.dialogFormVisible= true
|
|
|
+ handleCurrentChange(page){
|
|
|
+ this.page = page
|
|
|
},
|
|
|
- updateMedia( item, index ){
|
|
|
- let row = this.tableData[index];
|
|
|
- row.url = `https://media.ndjsxh.cn:8443/mp4/study/${item.id}.mp4`
|
|
|
- row.name = item.name.split(".")[0];
|
|
|
- row.duration = item.duration
|
|
|
+ handleSizeChange(size){
|
|
|
+ this.size = size;
|
|
|
},
|
|
|
addCoursemedia( ){
|
|
|
let param = Object.assign( {}, this.form)
|
|
|
- param.chapter = +param.chapter
|
|
|
- param.xs = parseInt( 10*param.xs)
|
|
|
- param.duration = +param.duration;
|
|
|
- param.playRate = +param.playRate;
|
|
|
addCourseMedia( param ).then(res=>{
|
|
|
if( res.code == 200){
|
|
|
this.tableData.push( res.data )
|
|
@@ -237,14 +194,12 @@ export default {
|
|
|
},
|
|
|
doAddCoursemedia( row ){
|
|
|
let param = Object.assign( {}, row )
|
|
|
- param.chapter = +param.chapter
|
|
|
- param.xs = parseInt( 10*param.xs )
|
|
|
- param.duration = +param.duration;
|
|
|
- param.playRate = +param.playRate;
|
|
|
+ delete param["temp"]
|
|
|
addCourseMedia( param ).then(res=>{
|
|
|
if( res.code == 200){
|
|
|
row= Object.assign( row, param )
|
|
|
row.edit = false
|
|
|
+ delete row["temp"]
|
|
|
this.$message.successMsg("编辑成功")
|
|
|
}
|
|
|
})
|
|
@@ -257,7 +212,6 @@ export default {
|
|
|
initEdit(row, index) {
|
|
|
let form = Object.assign({}, row);
|
|
|
row.edit = true;
|
|
|
- row.xs = row.xs/10
|
|
|
row.temp = form;
|
|
|
},
|
|
|
dropMedia(row, index){
|
|
@@ -272,8 +226,8 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
beforeMount() {
|
|
|
- let id = + this.$route.query.id;
|
|
|
- this.searchInfo.courseId = id
|
|
|
+ let id = +this.$route.query.id;
|
|
|
+ this.courseId = id
|
|
|
this.getTableData();
|
|
|
}
|
|
|
};
|