zhuxinbo 5 years ago
parent
commit
851f25e005

+ 106 - 21
src/views/modules/material/checkMatemal.vue

@@ -8,6 +8,7 @@
     position: relative;
     height: 250px;
     border: 1px solid #f2f2f2;
+    list-style: none;
     img,
     video {
       width: 100%;
@@ -22,32 +23,50 @@
 }
 </style>
 <template>
-  <a-model title="选择素材" v-model="visibleMatemal" @ok="handleOk" @cancel="close">
-    <div>
-      <ul class="actor-photo-list">
-        <li v-for="(item, index) of photoList" :key="index">
-          <video :src="item.url" />
-        </li>
-      </ul>
-    </div>
-    <div style="text-align:right">
-      <a-pagination showQuickJumper :total="total" @change="pageChange" :pageSize.sync="pageSize" />
-    </div>
-  </a-model>
+  <div>
+    <a-modal title="选择素材" v-model="visibleMatemal" @ok="handleOk" @cancel="close" :width="800">
+      <div>
+        <ul class="actor-photo-list">
+          <a-checkbox-group
+            v-model="checkArr"
+            style="width:100%;  display: flex;padding-left: 0;"
+            @change="onChangeCheck"
+          >
+            <li v-for="(item, index) of dataSource" :key="index">
+              <a-checkbox :value="item.url" style="position:absolute"></a-checkbox
+              ><video class="video" :src="item.url" controls="controls" style="min-height:160px">
+                您的浏览器不支持 video 标签。
+              </video>
+            </li>
+          </a-checkbox-group>
+        </ul>
+      </div>
+      <div style="text-align:right">
+        <a-pagination
+          size="small"
+          :showTotal="ipagination.showTotal"
+          style="float:right"
+          v-if="dataSource.length > 0"
+          showQuickJumper
+          :pageSize.sync="ipagination.pageSize"
+          :total="ipagination.total"
+          v-model="ipagination.current"
+          @change="getDataSource"
+        />
+      </div>
+    </a-modal>
+  </div>
 </template>
 
 <script>
 import { getAction, postAction, postFile } from '@/api/manage'
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { mapGetters } from 'vuex'
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
 export default {
   name: 'check-matemal',
   mixins: [JeecgListMixin],
-  components: {
-    JEllipsis,
-    UploadToAli,
-    accountCheck
-  },
+  components: {},
 
   data() {
     return {
@@ -55,20 +74,86 @@ export default {
         list: '/ctop/materialInfo/list'
       },
       visibleMatemal: false,
-      dataSource: []
+      dataSource: [],
+      columns: [],
+      checkArr: [],
+      active: '',
+      joinVideo: {
+        head: '',
+        content: [],
+        foot: '',
+        key: 1
+      }
     }
   },
   watch: {},
+  updated() {
+    stopOtherVideo()
+  },
   methods: {
-    showCheck(typeName) {
+    showCheck(typeName, keyNumber, item) {
+      console.log(keyNumber)
       this.visibleMatemal = true
       this.queryParam.userId = this.userInfo().id
       this.queryParam.type = typeName
+      this.active = typeName
+      if (typeName == 'VIDEO_PART') {
+        this.joinVideo = {
+          head: '',
+          content: item.VIDEO_PART,
+          foot: '',
+          key: keyNumber
+        }
+      } else {
+        this.joinVideo = {
+          head: '',
+          content: [],
+          foot: '',
+          key: keyNumber
+        }
+      }
+
       this.loadData()
     },
     ...mapGetters(['nickname', 'avatar', 'userInfo']),
-    handleOk() {},
-    close() {}
+    handleOk() {
+      this.visibleMatemal = false
+      this.$emit('showVideo', this.joinVideo, this.active)
+    },
+    close() {},
+    getDataSource(page, pageSize) {
+      this.ipagination.current = page
+      this.loadData()
+    },
+    onChangeCheck(checkedList) {
+      //  { value: 'VIDEO_HEAD', tab: '片头' },
+      // { value: 'VIDEO_PART', tab: '片段' },
+      // { value: 'VIDEO_TAIL', tab: '片尾' }
+      if (this.active == 'VIDEO_HEAD') {
+        //片头
+        if (this.checkArr.length > 1) {
+          this.checkArr.shift()
+          this.joinVideo.head = checkedList[0]
+        } else if (this.checkArr.length == 1) {
+          this.joinVideo.head = checkedList[0]
+        } else if (this.checkArr.length == 0) {
+          this.joinVideo.head = ''
+        }
+      } else if (this.active == 'VIDEO_TAIL') {
+        //片尾
+        if (this.checkArr.length > 1) {
+          this.checkArr.shift()
+          this.joinVideo.foot = checkedList[0]
+        } else if (this.checkArr.length == 1) {
+          this.joinVideo.foot = checkedList[0]
+        } else if (this.checkArr.length == 0) {
+          this.joinVideo.foot = ''
+        }
+      } else {
+        //内容
+        this.joinVideo.content = checkedList
+      }
+    }
   }
 }
 </script>

+ 52 - 15
src/views/modules/material/fragmentMatemal.vue

@@ -290,17 +290,38 @@ a {
         </div>
         <div v-else>
           <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="VIDEO_HEAD" slot-scope="text, record, index">
+              <div v-if="text != ''">
+                <video class="video" :src="text" controls="controls" style="height:160px">
+                  您的浏览器不支持 video 标签。
+                </video>
+              </div>
+              <a-button @click="checkMatemal('VIDEO_HEAD', index, record)" type="primary" icon="plus" v-else
+                >选择素材</a-button
+              >
             </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_PART" slot-scope="text, record, index">
+              <div>
+                <video
+                  class="video"
+                  :src="item"
+                  controls="controls"
+                  style="height:160px"
+                  v-for="item of text"
+                  :key="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">
+            <span slot="VIDEO_TAIL" slot-scope="text, record, index">
               <div v-if="text != ''"></div>
-              <a-button @click="dirVideoGet" type="primary" icon="plus" v-else>选择素材</a-button>
+              <a-button @click="checkMatemal('VIDEO_TAIL', index, record)" type="primary" icon="plus" v-else
+                >选择素材</a-button
+              >
             </span>
           </a-table>
         </div>
@@ -466,8 +487,8 @@ a {
       </div>
     </a-modal>
 
-
     <account-check ref="check" @synchro="implement"></account-check>
+    <check-matemal ref="matemal" @showVideo="showVideoFun" />
   </a-card>
 </template>
 
@@ -477,20 +498,22 @@ 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() {
@@ -499,26 +522,23 @@ export default {
         {
           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'
         }
       ],
-      dataList: [{ VIDEO_HEAD: '', VIDEO_PART: [], VIDEO_TAIL: '' }],
+      dataList: [{ key: 1, VIDEO_HEAD: '', VIDEO_PART: [], VIDEO_TAIL: '' }],
       inputVisible: false,
       inputValue: '',
       labelCol: {
@@ -600,6 +620,9 @@ export default {
       return y + '-' + MM + '-' + d
     }
   },
+  updated() {
+    stopOtherVideo()
+  },
   computed: {
     dirImg() {
       let date = new Date()
@@ -632,6 +655,9 @@ export default {
     }
   },
   methods: {
+    checkMatemal(type, number, item) {
+      this.$refs.matemal.showCheck(type, number, item)
+    },
     moment,
     a(item) {
       item.showVideo = true
@@ -680,6 +706,17 @@ 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
+      }
+    },
     downloadByBlob() {
       fetch(this.showUrlWater)
         .then(res => res.blob())

+ 2 - 2
src/views/modules/material/materialList.vue

@@ -456,12 +456,12 @@ a {
         </div>
         <div style="flex:3;padding:10px;box-sizing:border-box;">
           <a-form v-if="detail" class="detail">
-            <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+            <!-- <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
               {{ detail.parameter.width }}*{{ detail.parameter.height }}
             </a-form-item>
             <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
               {{ detail.parameter.size }}
-            </a-form-item>
+            </a-form-item> -->
             <a-form-item
               label="剪辑"
               :label-col="{ span: 6 }"

+ 19 - 6
src/views/modules/material/videoMaterial.vue

@@ -189,10 +189,23 @@ a {
 
     <div class="table-operator" style="position:relative;z-index:100">
       <a-button @click="visible = true" type="primary" icon="plus">新增</a-button>
-      <a-button @click="onCheckAllChange" v-if="queryParam.projectId && active == '1'">{{
-        checkAll ? '取消  (  ' + checkArr.length + '  )' : '全选'
-      }}</a-button>
-      <a-button v-if="queryParam.projectId && active == '1'" :disabled="checkArr.length == 0" @click="tongbu"
+      <a-button
+        @click="onCheckAllChange"
+        v-if="
+          queryParam.projectId &&
+            active == '1' &&
+            (role.roleCode == 'operator' || role.roleCode == 'kuaishouOperationManager' || role.roleCode == 'admin')
+        "
+        >{{ checkAll ? '取消  (  ' + checkArr.length + '  )' : '全选' }}</a-button
+      >
+      <a-button
+        v-if="
+          queryParam.projectId &&
+            active == '1' &&
+            (role.roleCode == 'operator' || role.roleCode == 'kuaishouOperationManager' || role.roleCode == 'admin')
+        "
+        :disabled="checkArr.length == 0"
+        @click="tongbu"
         >一键同步</a-button
       >
     </div>
@@ -500,7 +513,7 @@ a {
         </div>
         <div style="flex:3;padding:10px;box-sizing:border-box;">
           <a-form v-if="detail" class="detail">
-            <a-form-item
+            <!-- <a-form-item
               label="视频时长"
               :label-col="{ span: 6 }"
               :wrapper-col="{ span: 18 }"
@@ -513,7 +526,7 @@ a {
             </a-form-item>
             <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
               {{ detail.parameter.size }}
-            </a-form-item>
+            </a-form-item> -->
             <a-form-item label="策划" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
               {{ detail.ascription.planName }}
             </a-form-item>

+ 2 - 2
vue.config.js

@@ -65,8 +65,8 @@ module.exports = {
        },*/
       '/jeecg-boot': {
         // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
-        // target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
-        target: 'http://192.168.2.130:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
+        target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
+        // target: 'http://192.168.2.130:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // target: 'http://192.168.2.133:8080', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.2.132:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.2.185:8080', //请求本地 需要jeecg-boot后台项目  祚云