|
@@ -289,18 +289,66 @@ 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="VIDEO_HEAD" slot-scope="text">
|
|
|
- <div v-if="text != ''"></div>
|
|
|
- <a-button @click="dirVideoGet" type="primary" icon="plus" v-else>选择素材</a-button>
|
|
|
+ <span slot="action" slot-scope="text, record, index">
|
|
|
+ <a @click="removeMatemal(index)">删除</a>
|
|
|
</span>
|
|
|
- <span slot="VIDEO_PART" slot-scope="text">
|
|
|
- <div v-if="text.length > 0"></div>
|
|
|
- <a-button @click="dirVideoGet" type="primary" icon="plus" v-else>选择素材</a-button>
|
|
|
+ <span slot="VIDEO_HEAD" slot-scope="text, record, index">
|
|
|
+ <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
|
|
|
+ >
|
|
|
</span>
|
|
|
- <span slot="VIDEO_TAIL" slot-scope="text">
|
|
|
- <div v-if="text != ''"></div>
|
|
|
- <a-button @click="dirVideoGet" type="primary" icon="plus" v-else>选择素材</a-button>
|
|
|
+ <span slot="VIDEO_PART" slot-scope="text, record, index">
|
|
|
+ <div>
|
|
|
+ <video
|
|
|
+ class="video"
|
|
|
+ :src="item"
|
|
|
+ controls="controls"
|
|
|
+ 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>
|
|
|
+ </div>
|
|
|
+ <a-button @click="checkMatemal('VIDEO_PART', index, record)" type="primary" icon="plus"
|
|
|
+ >选择素材</a-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <span slot="VIDEO_TAIL" slot-scope="text, record, index">
|
|
|
+ <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
|
|
|
+ >
|
|
|
</span>
|
|
|
</a-table>
|
|
|
</div>
|
|
@@ -466,8 +514,8 @@ a {
|
|
|
</div>
|
|
|
</a-modal>
|
|
|
|
|
|
-
|
|
|
<account-check ref="check" @synchro="implement"></account-check>
|
|
|
+ <check-matemal ref="matemal" @showVideo="showVideoFun" />
|
|
|
</a-card>
|
|
|
</template>
|
|
|
|
|
@@ -477,48 +525,55 @@ import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
|
import UploadToAli from '@femessage/upload-to-ali'
|
|
|
import { fileCheck, fileInsert, fileEdit } from '@/api/actor'
|
|
|
import { getAction, postAction, postFile } from '@/api/manage'
|
|
|
-
|
|
|
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
import { mapGetters } from 'vuex'
|
|
|
import moment from 'moment'
|
|
|
|
|
|
import BMF from 'browser-md5-file'
|
|
|
|
|
|
import accountCheck from './accountCheck'
|
|
|
+import checkMatemal from './checkMatemal'
|
|
|
export default {
|
|
|
name: 'YardList',
|
|
|
mixins: [JeecgListMixin],
|
|
|
components: {
|
|
|
JEllipsis,
|
|
|
UploadToAli,
|
|
|
- accountCheck
|
|
|
+ accountCheck,
|
|
|
+ checkMatemal
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
+ dragging: null,
|
|
|
+ dataKey: 0,
|
|
|
columns: [
|
|
|
{
|
|
|
title: '片头',
|
|
|
dataIndex: 'VIDEO_HEAD',
|
|
|
- key: 1,
|
|
|
scopedSlots: { customRender: 'VIDEO_HEAD' },
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '内容',
|
|
|
dataIndex: 'VIDEO_PART',
|
|
|
- key: 2,
|
|
|
scopedSlots: { customRender: 'VIDEO_PART' },
|
|
|
align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '片尾',
|
|
|
dataIndex: 'VIDEO_TAIL',
|
|
|
- key: 3,
|
|
|
scopedSlots: { customRender: 'VIDEO_TAIL' },
|
|
|
align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
+ align: 'center'
|
|
|
}
|
|
|
],
|
|
|
- dataList: [{ VIDEO_HEAD: '', VIDEO_PART: [], VIDEO_TAIL: '' }],
|
|
|
+ dataList: [{ key: 1, VIDEO_HEAD: '', VIDEO_PART: [], VIDEO_TAIL: '' }],
|
|
|
inputVisible: false,
|
|
|
inputValue: '',
|
|
|
labelCol: {
|
|
@@ -600,6 +655,9 @@ export default {
|
|
|
return y + '-' + MM + '-' + d
|
|
|
}
|
|
|
},
|
|
|
+ updated() {
|
|
|
+ stopOtherVideo()
|
|
|
+ },
|
|
|
computed: {
|
|
|
dirImg() {
|
|
|
let date = new Date()
|
|
@@ -632,6 +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
|
|
@@ -680,6 +776,18 @@ export default {
|
|
|
})
|
|
|
// /ctop/materialUpload/uploadAccount
|
|
|
},
|
|
|
+ showVideoFun(data, typeName) {
|
|
|
+ console.log(data)
|
|
|
+ if (typeName == 'VIDEO_HEAD') {
|
|
|
+ //片头
|
|
|
+ this.dataList[data.key].VIDEO_HEAD = data.head
|
|
|
+ } else if (typeName == 'VIDEO_TAIL') {
|
|
|
+ this.dataList[data.key].VIDEO_TAIL = data.foot
|
|
|
+ } else {
|
|
|
+ this.dataList[data.key].VIDEO_PART = data.content
|
|
|
+ this.dataKey = data.key
|
|
|
+ }
|
|
|
+ },
|
|
|
downloadByBlob() {
|
|
|
fetch(this.showUrlWater)
|
|
|
.then(res => res.blob())
|