Browse Source

素材拼接

zhuxinbo 5 years ago
parent
commit
f30fd48113

+ 3 - 0
src/views/modules/material/checkMatemal.vue

@@ -92,6 +92,7 @@ export default {
   },
   methods: {
     showCheck(typeName, keyNumber, item) {
+      this.dataSource = []
       console.log(keyNumber)
       this.visibleMatemal = true
       this.queryParam.userId = this.userInfo().id
@@ -118,6 +119,7 @@ export default {
     ...mapGetters(['nickname', 'avatar', 'userInfo']),
     handleOk() {
       this.visibleMatemal = false
+      this.checkArr = []
       this.$emit('showVideo', this.joinVideo, this.active)
     },
     close() {},
@@ -126,6 +128,7 @@ export default {
       this.loadData()
     },
     onChangeCheck(checkedList) {
+      console.log(checkedList)
       //  { value: 'VIDEO_HEAD', tab: '片头' },
       // { value: 'VIDEO_PART', tab: '片段' },
       // { value: 'VIDEO_TAIL', tab: '片尾' }

+ 74 - 3
src/views/modules/material/fragmentMatemal.vue

@@ -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() {