|
@@ -289,12 +289,25 @@ a {
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
+ <div style="margin-bottom:20px">
|
|
|
+ <a-button @click="addMatemal" type="primary" icon="plus" style="margin-right:15px">新增一行</a-button>
|
|
|
+ <a-button type="primary">开始拼接</a-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
<a-table :columns="columns" :dataSource="dataList" :pagination="false">
|
|
|
+ <span slot="action" slot-scope="text, record, index">
|
|
|
+ <a @click="removeMatemal(index)">删除</a>
|
|
|
+ </span>
|
|
|
<span slot="VIDEO_HEAD" slot-scope="text, record, index">
|
|
|
- <div v-if="text != ''">
|
|
|
+ <div v-if="text != ''" style="position:relative">
|
|
|
<video class="video" :src="text" controls="controls" style="height:160px">
|
|
|
您的浏览器不支持 video 标签。
|
|
|
</video>
|
|
|
+ <a-icon
|
|
|
+ type="close-circle"
|
|
|
+ style="position:absolute;top:-5px;right:30%;color:red;z-index:10;cursor: pointer;"
|
|
|
+ @click="deteleVideo('VIDEO_HEAD', record)"
|
|
|
+ />
|
|
|
</div>
|
|
|
<a-button @click="checkMatemal('VIDEO_HEAD', index, record)" type="primary" icon="plus" v-else
|
|
|
>选择素材</a-button
|
|
@@ -309,8 +322,13 @@ a {
|
|
|
style="height:160px"
|
|
|
v-for="item of text"
|
|
|
:key="item"
|
|
|
+ draggable="true"
|
|
|
+ @dragstart="handleDragStart($event, item)"
|
|
|
+ @dragover.prevent="handleDragOver($event, item)"
|
|
|
+ @dragenter="handleDragEnter($event, item)"
|
|
|
+ @dragend="handleDragEnd($event, item)"
|
|
|
>
|
|
|
- 您的浏览器不支持 video 标签。
|
|
|
+ > 您的浏览器不支持 video 标签。
|
|
|
</video>
|
|
|
</div>
|
|
|
<a-button @click="checkMatemal('VIDEO_PART', index, record)" type="primary" icon="plus"
|
|
@@ -318,7 +336,16 @@ a {
|
|
|
>
|
|
|
</span>
|
|
|
<span slot="VIDEO_TAIL" slot-scope="text, record, index">
|
|
|
- <div v-if="text != ''"></div>
|
|
|
+ <div v-if="text != ''" style="position:relative">
|
|
|
+ <video class="video" :src="text" controls="controls" style="height:160px">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ <a-icon
|
|
|
+ type="close-circle"
|
|
|
+ style="position:absolute;top:-5px;right:30%;color:red;z-index:10;cursor: pointer;"
|
|
|
+ @click="deteleVideo('VIDEO_TAIL', record)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
<a-button @click="checkMatemal('VIDEO_TAIL', index, record)" type="primary" icon="plus" v-else
|
|
|
>选择素材</a-button
|
|
|
>
|
|
@@ -518,6 +545,8 @@ export default {
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
+ dragging: null,
|
|
|
+ dataKey: 0,
|
|
|
columns: [
|
|
|
{
|
|
|
title: '片头',
|
|
@@ -536,6 +565,12 @@ export default {
|
|
|
dataIndex: 'VIDEO_TAIL',
|
|
|
scopedSlots: { customRender: 'VIDEO_TAIL' },
|
|
|
align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
+ align: 'center'
|
|
|
}
|
|
|
],
|
|
|
dataList: [{ key: 1, VIDEO_HEAD: '', VIDEO_PART: [], VIDEO_TAIL: '' }],
|
|
@@ -655,9 +690,44 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleDragStart(e, item) {
|
|
|
+ this.dragging = item
|
|
|
+ },
|
|
|
+ handleDragEnd(e, item) {
|
|
|
+ this.dragging = null
|
|
|
+ },
|
|
|
+ //首先把div变成可以放置的元素,即重写dragenter/dragover
|
|
|
+ handleDragOver(e) {
|
|
|
+ e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
|
|
|
+ },
|
|
|
+ handleDragEnter(e, item) {
|
|
|
+ e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
|
|
|
+ if (item === this.dragging) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ console.log(this.dataKey)
|
|
|
+ const newItems = [...this.dataList[this.dataKey].VIDEO_PART]
|
|
|
+ console.log(newItems)
|
|
|
+ const src = newItems.indexOf(this.dragging)
|
|
|
+ const dst = newItems.indexOf(item)
|
|
|
+
|
|
|
+ newItems.splice(dst, 0, ...newItems.splice(src, 1))
|
|
|
+
|
|
|
+ this.dataList[this.dataKey].VIDEO_PART = newItems
|
|
|
+ },
|
|
|
checkMatemal(type, number, item) {
|
|
|
this.$refs.matemal.showCheck(type, number, item)
|
|
|
},
|
|
|
+ addMatemal() {
|
|
|
+ var num = this.dataList.length + 1
|
|
|
+ this.dataList.push({ key: num, VIDEO_HEAD: '', VIDEO_PART: [], VIDEO_TAIL: '' })
|
|
|
+ },
|
|
|
+ removeMatemal(index) {
|
|
|
+ this.dataList.splice(index, 1)
|
|
|
+ },
|
|
|
+ deteleVideo(type, item) {
|
|
|
+ item[type] = ''
|
|
|
+ },
|
|
|
moment,
|
|
|
a(item) {
|
|
|
item.showVideo = true
|
|
@@ -715,6 +785,7 @@ export default {
|
|
|
this.dataList[data.key].VIDEO_TAIL = data.foot
|
|
|
} else {
|
|
|
this.dataList[data.key].VIDEO_PART = data.content
|
|
|
+ this.dataKey = data.key
|
|
|
}
|
|
|
},
|
|
|
downloadByBlob() {
|