materialList.vue 33 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069
  1. <style>
  2. #material-card .ant-tabs-tab {
  3. border: 1px solid gainsboro !important;
  4. }
  5. #material-card .ant-tabs-top-bar {
  6. position: relative;
  7. z-index: 100;
  8. }
  9. #material-card .ant-badge-count {
  10. top: 0px;
  11. }
  12. .detail .ant-form-item {
  13. margin-bottom: 10px !important;
  14. }
  15. .add-image-material .draggable-list {
  16. display: block !important;
  17. }
  18. </style>
  19. <style lang="scss" scoped>
  20. .home-item {
  21. overflow: hidden;
  22. }
  23. @media (min-width: 1024px) {
  24. .home-item {
  25. border-style: solid;
  26. border-width: 1px;
  27. border-color: #e4e4e4;
  28. width: calc(50% - 10px);
  29. padding: 10px;
  30. margin-right: 10px;
  31. margin-bottom: 10px;
  32. display: flex;
  33. align-items: center;
  34. background: #fff;
  35. position: relative;
  36. z-index: 99;
  37. }
  38. }
  39. /*>=1024的设备*/
  40. // @media (min-width: 1100px) {
  41. // .checkbox_item_container {
  42. // width:70%
  43. // }
  44. // } /*>=1100的设备*/
  45. @media (min-width: 1280px) {
  46. .home-item {
  47. border-style: solid;
  48. border-width: 1px;
  49. border-color: #e4e4e4;
  50. width: calc(25% - 10px);
  51. padding: 10px;
  52. margin-right: 10px;
  53. margin-bottom: 10px;
  54. display: flex;
  55. align-items: center;
  56. background: #fff;
  57. position: relative;
  58. z-index: 99;
  59. }
  60. }
  61. /*>=1280的设备*/
  62. // @media (min-width: 1366px) {
  63. // }
  64. // @media (min-width: 1440px) {
  65. // }
  66. // @media (min-width: 1680px) {
  67. // }
  68. @media (min-width: 1920px) {
  69. .home-item {
  70. border-style: solid;
  71. border-width: 1px;
  72. border-color: #e4e4e4;
  73. width: calc(25% - 10px);
  74. padding: 10px;
  75. margin-right: 10px;
  76. margin-bottom: 10px;
  77. display: flex;
  78. align-items: center;
  79. background: #fff;
  80. position: relative;
  81. z-index: 99;
  82. cursor: pointer;
  83. }
  84. }
  85. .actor-photo-list {
  86. display: flex;
  87. padding-left: 0;
  88. li {
  89. width: 25%;
  90. margin: 10px;
  91. position: relative;
  92. height: 250px;
  93. border: 1px solid #f2f2f2;
  94. img,
  95. video {
  96. width: 100%;
  97. margin-top: auto;
  98. margin-bottom: auto;
  99. top: 0;
  100. bottom: 0;
  101. position: absolute;
  102. max-height: 250px;
  103. }
  104. }
  105. }
  106. .home-card {
  107. width: 100%;
  108. overflow: hidden;
  109. padding: 10px 0px;
  110. display: flex;
  111. flex-wrap: wrap;
  112. margin-right: -10px;
  113. .home-right {
  114. width: 100%;
  115. }
  116. .bg:after {
  117. content: '';
  118. width: 110%;
  119. height: 110%;
  120. position: absolute;
  121. left: -5%;
  122. top: -5%;
  123. background: inherit;
  124. filter: blur(10px);
  125. z-index: 2;
  126. }
  127. }
  128. .bh {
  129. height: 60px;
  130. line-height: 30px;
  131. overflow: hidden;
  132. text-overflow: ellipsis;
  133. -webkit-line-clamp: 2;
  134. display: -webkit-box;
  135. -webkit-box-orient: vertical;
  136. }
  137. a {
  138. font-size: 14px;
  139. }
  140. </style>
  141. <template>
  142. <a-card :bordered="false">
  143. <!-- 查询区域 -->
  144. <div class="table-page-search-wrapper">
  145. <a-form layout="inline">
  146. <a-row :gutter="24">
  147. <a-col :md="8" :sm="8">
  148. <selectTable :projectId.sync="queryParam.projectId"></selectTable>
  149. </a-col>
  150. <a-col :md="8" :sm="8">
  151. <a-form-item label="时间选择">
  152. <a-date-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width:100%" />
  153. <!-- <a-input placeholder="请输入查询时间" v-model="queryParam.createTime"></a-input> -->
  154. </a-form-item>
  155. </a-col>
  156. <a-col :md="8" :sm="8">
  157. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  158. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  159. <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
  160. </span>
  161. </a-col>
  162. </a-row>
  163. </a-form>
  164. </div>
  165. <!-- table区域-begin -->
  166. <!-- <div> -->
  167. <div class="table-operator" style="position:relative;z-index:100">
  168. <!-- <a-button @click="visible = true" type="primary" icon="plus">新增</a-button> -->
  169. <a-button @click="onCheckAllChange" v-if="queryParam.projectId && active == '1'">{{
  170. checkAll ? '取消 ( ' + checkArr.length + ' )' : '全选'
  171. }}</a-button>
  172. <a-button v-if="queryParam.projectId && active == '1'" :disabled="checkArr.length == 0" @click="tongbu"
  173. >一键下载
  174. </a-button>
  175. </div>
  176. <a-tabs @change="callbackTwo" v-model="active" id="material-card" type="card">
  177. <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
  178. <div v-if="dataSource.length > 0">
  179. <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
  180. <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
  181. <span v-if="items.excellent == 0"></span>
  182. <span
  183. v-else
  184. style="position:absolute;top:30px;right:-105px;display:block;width:300px;height:30px;text-align:center;line-height;30px;background:red;transform:rotate(45deg);z-index:1000"
  185. >优秀素材</span
  186. >
  187. <div class="home-right">
  188. <a-badge
  189. :count="checkArr.indexOf(items.url) > -1 ? checkArr.indexOf(items.url) + 1 : 0"
  190. :numberStyle="{ backgroundColor: '#52c41a' }"
  191. style="width:100%;display:flex"
  192. @click.stop
  193. >
  194. <span
  195. style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
  196. >
  197. {{ items.materialName }}
  198. </span>
  199. <a-icon
  200. type="close-circle"
  201. @click="deleteData(items.id)"
  202. v-show="active == '0'"
  203. v-if="items.userId == userInfo().id"
  204. />
  205. </a-badge>
  206. <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
  207. <div
  208. class="home-num bg"
  209. v-if="activeKey == 'image'"
  210. :style="{
  211. backgroundImage: 'url(' + items.url + ')',
  212. backgroundSize: 'cover',
  213. backgroundRepeat: 'no-repeat',
  214. backgroundPosition: 'center center',
  215. overflow: 'hidden',
  216. position: 'relative',
  217. width: '100%',
  218. height: '100%'
  219. }"
  220. ></div>
  221. <img
  222. v-if="activeKey == 'image'"
  223. :src="items.url"
  224. style="height:200px;max-width:100%;position:absolute;z-index:10;"
  225. />
  226. </div>
  227. <div v-if="active == '2'" class="bh">驳回原因:{{ items.refuseReason }}</div>
  228. <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
  229. {{ items.createTime | getDate }}
  230. <a
  231. href="javascript:;"
  232. style="margin-left:20px"
  233. @click="imageEdit(items, '2')"
  234. v-show="active == '2'"
  235. v-if="items.userId == userInfo().id"
  236. >
  237. 修改</a
  238. >
  239. <a-checkbox :value="items.url" v-show="active == '1'" style="float:right"></a-checkbox>
  240. </span>
  241. </div>
  242. </div>
  243. </a-checkbox-group>
  244. <a-pagination
  245. size="small"
  246. :showTotal="ipagination.showTotal"
  247. style="float:right"
  248. v-if="dataSource.length > 0"
  249. showQuickJumper
  250. :pageSize.sync="ipagination.pageSize"
  251. :total="ipagination.total"
  252. v-model="ipagination.current"
  253. @change="getDataSource"
  254. />
  255. </div>
  256. <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
  257. <img
  258. src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
  259. alt="" v-if="!loading"/>
  260. <img
  261. v-else
  262. src="./loading.gif"
  263. />
  264. </div>
  265. </a-tab-pane>
  266. </a-tabs>
  267. <a-modal title="添加素材" v-model="visible" @ok="handleOk" @cancel="close" :maskClosable="false" :width="800">
  268. <template slot="footer">
  269. <a-button key="back" @click="close">取消</a-button>
  270. <a-button
  271. key="submit"
  272. type="primary"
  273. :disabled="material.filter(item => item == false).length > 0 || urlList.url == ''"
  274. @click="handleOk"
  275. >
  276. 确定
  277. </a-button>
  278. </template>
  279. <a-form :form="form">
  280. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="图片素材上传" class="add-image-material">
  281. <uploadFile :value.sync="urlList.url" :multiple='false'
  282. @overUpload="overUpload" :fileCount="1" uploadType="image" />
  283. <!-- <upload-to-ali
  284. style="width:160%"
  285. v-model="urlList.url"
  286. :customDomain="customDomain"
  287. preview
  288. :region="region"
  289. :bucket="bucket"
  290. :accept="activeKey == 'image' ? acceptImage : acceptVideo"
  291. :max="10"
  292. :size="1024000"
  293. :accessKeyId="accessKeyId"
  294. :accessKeySecret="accessKeySecret"
  295. :before-upload="file"
  296. :dir="activeKey == 'image' ? dirImg : dirVideo"
  297. @loaded="overUpload"
  298. ></upload-to-ali> -->
  299. <span v-if="material.filter(item => item == false).length > 0 && urlList.url != ''" style="color:red"
  300. >上传素材的尺寸不符,请修改</span
  301. >
  302. <span v-else-if="material.filter(item => item == false).length == 0 && urlList.url != ''" style="color:green"
  303. >上传成功</span
  304. >
  305. </a-form-item>
  306. </a-form>
  307. </a-modal>
  308. <a-modal title="素材详情" v-model="visibleDetail" width="70%">
  309. <div style="width:100%">
  310. <a-button type="primary" @click="setSuccess" style="float:right">
  311. {{ excellent == 0 ? '标记为优秀素材' : '取消标记' }}
  312. </a-button>
  313. </div>
  314. <div style="display:flex;height:700px">
  315. <div
  316. style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2"
  317. >
  318. <img :src="showUrl" alt="" v-if="activeKey == 'image'" style="height:100%" />
  319. </div>
  320. <div style="flex:3;padding:10px;box-sizing:border-box;">
  321. <!-- <video
  322. v-if="detail.videoUrl"
  323. :src="detail.videoUrl"
  324. style="height:200px;max-width:100%;position:absolute;z-index:10;"
  325. /> -->
  326. <a-form v-if="detail" class="detail">
  327. <a-form-item label="绑定视频" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.videoUrl">
  328. <video
  329. class="video"
  330. :src="detail.videoUrl"
  331. controls="controls"
  332. style="width:150px"
  333. controlsList="nodownload"
  334. >
  335. 您的浏览器不支持 video 标签。
  336. </video>
  337. </a-form-item>
  338. <a-form-item label="上传人" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.userName">
  339. {{ detail.userName }}
  340. </a-form-item>
  341. <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.width">
  342. {{ detail.width }}*{{ detail.height }}
  343. </a-form-item>
  344. <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.size">
  345. {{ detail.size }}
  346. </a-form-item>
  347. <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.tag">
  348. <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
  349. </a-form-item>
  350. <a-form-item label="水印素材下载" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="showUrlWater">
  351. <a-button type="primary" @click="downloadByBlob">下载</a-button>
  352. </a-form-item>
  353. <a-form-item label="审核人" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
  354. {{ detail.auditorName }}
  355. </a-form-item>
  356. <a-form-item label="广告语" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '1'">
  357. {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
  358. </a-form-item>
  359. <a-form-item label="驳回原因" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
  360. {{ refuseReason ? refuseReason : '无原因' }}
  361. </a-form-item>
  362. <a-form-item label="截图" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
  363. <div v-if="refuseFile" style="width:100%">
  364. <img style="width:100px;height:auto;margin:5px" @click="showBoHui(item)" :src="item" v-for="(item,index) in refuseFile" :key="index" alt="">
  365. </div>
  366. <div v-else>无截图</div>
  367. </a-form-item>
  368. </a-form>
  369. </div>
  370. </div>
  371. </a-modal>
  372. <account-check ref="check" @synchro="implement"></account-check>
  373. </a-card>
  374. </template>
  375. <script>
  376. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  377. import JEllipsis from '@/components/jeecg/JEllipsis'
  378. import UploadToAli from '@femessage/upload-to-ali'
  379. import uploadFile from '@/components/uploadFile.vue'
  380. import { fileCheck, fileInsert, fileEdit } from '@/api/actor'
  381. import { getAction, postAction, postFile, downFile, downFilePost, deleteAction, putAction } from '@/api/manage'
  382. import { mapGetters } from 'vuex'
  383. import moment from 'moment'
  384. import selectTable from '@/views/modules/Statistics/components/selecTable.vue'
  385. import BMF from 'browser-md5-file'
  386. import accountCheck from './accountCheck'
  387. export default {
  388. name: 'YardList',
  389. mixins: [JeecgListMixin],
  390. components: {
  391. JEllipsis,
  392. UploadToAli,
  393. accountCheck,
  394. selectTable,
  395. uploadFile
  396. },
  397. data() {
  398. return {
  399. projectId: '',
  400. videoId: '',
  401. inputVisible: false,
  402. inputValue: '',
  403. labelCol: {
  404. xs: {
  405. span: 24
  406. },
  407. sm: {
  408. span: 5
  409. }
  410. },
  411. wrapperCol: {
  412. xs: {
  413. span: 24
  414. },
  415. sm: {
  416. span: 12
  417. }
  418. },
  419. noImgUrl: require('@/assets/img/noImg.png'),
  420. queryParam: {},
  421. dataElse: [],
  422. ascription: {
  423. clipId: [], //剪辑人id
  424. shotId: [], //拍摄人id
  425. planId: [], //策划id
  426. planeId: [] //平面id
  427. },
  428. show: true,
  429. visible: false,
  430. visibleDetail: false,
  431. activeKey: 'image',
  432. active: '0',
  433. examinelList: [
  434. {
  435. value: '0',
  436. tab: '未审核'
  437. },
  438. {
  439. value: '1',
  440. tab: '已批准'
  441. },
  442. {
  443. value: '2',
  444. tab: '已驳回'
  445. }
  446. ],
  447. // 表头
  448. columns: [],
  449. urlList: {
  450. url: '',
  451. md5: '',
  452. name: '',
  453. size: '',
  454. width: '',
  455. height: ''
  456. },
  457. imageArr: [],
  458. watermarkUrl: {
  459. url: '',
  460. md5: '',
  461. name: ''
  462. },
  463. url: {
  464. list: '/ctop/MaterialImageInfo/pageList'
  465. },
  466. detail: false,
  467. form: this.$form.createForm(this),
  468. tags: [],
  469. refuseFile: [],
  470. refuseReason: '',
  471. creativeCopywriter: '',
  472. customDomain: '',
  473. region: 'oss-cn-beijing',
  474. bucket: 'ctop-media',
  475. acceptVideo: 'video/mpeg,video/mp4',
  476. acceptImage: 'image/jpeg,image/jpg,image/png',
  477. accessKeyId: 'LTAIbNbqWzSOklQV',
  478. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  479. checkArr: [],
  480. checkAll: false,
  481. showUrl: '',
  482. showUrlWater: '',
  483. materialDescribe: '',
  484. name: '',
  485. detail: null,
  486. add: true,
  487. id: '',
  488. role: {
  489. roleCode: '',
  490. roleName: ''
  491. },
  492. key: '0',
  493. mediaId: null,
  494. repeat: false,
  495. noList: [],
  496. material: [],
  497. excellent: 0,
  498. code: '',
  499. bohui:"",
  500. bohuiShow:false
  501. }
  502. },
  503. filters: {
  504. getDate(value) {
  505. let date = new Date(value)
  506. let y = date.getFullYear()
  507. let MM = date.getMonth() + 1
  508. MM = MM < 10 ? '0' + MM : MM
  509. let d = date.getDate()
  510. d = d < 10 ? '0' + d : d
  511. return y + '-' + MM + '-' + d
  512. }
  513. },
  514. computed: {
  515. dirImg() {
  516. let date = new Date()
  517. let y = date.getFullYear()
  518. let MM = date.getMonth() + 1
  519. MM = MM < 10 ? '0' + MM : MM
  520. let d = date.getDate()
  521. d = d < 10 ? '0' + d : d
  522. return 'image/' + y + '-' + MM + '-' + d + '/'
  523. },
  524. dirVideo() {
  525. let date = new Date()
  526. let y = date.getFullYear()
  527. let MM = date.getMonth() + 1
  528. MM = MM < 10 ? '0' + MM : MM
  529. let d = date.getDate()
  530. d = d < 10 ? '0' + d : d
  531. return 'video/' + y + '-' + MM + '-' + d + '/'
  532. }
  533. },
  534. created() {
  535. this.queryParam.type = 'IMAGE'
  536. this.queryParam.userId = this.userInfo().id
  537. this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  538. this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  539. // this.queryParam.status = key
  540. this.ipagination.pageSize = 8
  541. this.getParticipateList()
  542. // /sys/user/getRoleInfo
  543. getAction('/sys/user/getRoleInfo', {
  544. userId: this.userInfo().id
  545. }).then(res => {
  546. this.role = res
  547. })
  548. },
  549. watch: {
  550. $route: function(n, o) {
  551. if (n.path == '/modules/material/materialList') {
  552. this.queryParam.userId = this.userInfo().id
  553. this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  554. this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  555. this.loadData()
  556. }
  557. },
  558. 'queryParam.projectId': function(n, o) {
  559. if (n != '') {
  560. this.getList(n)
  561. }
  562. }
  563. },
  564. methods: {
  565. showBoHui(item){
  566. this.bohui = item
  567. this.bohuiShow = true
  568. },
  569. setSuccess() {
  570. var params = {}
  571. params.id = this.code
  572. params.excellent = this.excellent == 1 ? 0 : 1
  573. getAction('/ctop/materialInfo/excellent/set', params).then(res => {
  574. if (res.success) {
  575. this.excellent = this.excellent == 1 ? 0 : 1
  576. this.loadData(this.ipagination.current)
  577. }
  578. })
  579. },
  580. deleteData(id) {
  581. deleteAction('/ctop/materialInfo/delete', {
  582. id: id
  583. }).then(res => {
  584. if (res.success) {
  585. this.$message.success('删除成功')
  586. this.loadData()
  587. } else {
  588. this.$message.error(res.message)
  589. }
  590. })
  591. },
  592. moment,
  593. filterOption(input, option) {
  594. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  595. },
  596. a(item) {
  597. item.showVideo = true
  598. },
  599. tongbuImage() {
  600. this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
  601. userId: this.userInfo().id,
  602. projectId: this.queryParam.projectId
  603. })
  604. },
  605. tongbu() {
  606. if (this.checkArr.length > 1) {
  607. downFilePost('/download/zip', {
  608. urls: this.checkArr
  609. }).then(res => {
  610. let blob = new Blob([res], {
  611. type: 'application/zip'
  612. })
  613. let downloadElement = document.createElement('a')
  614. let href = window.URL.createObjectURL(blob) //创建下载的链接
  615. downloadElement.href = href
  616. downloadElement.download = '批量下载' //下载后文件名
  617. document.body.appendChild(downloadElement)
  618. downloadElement.click() //点击下载
  619. document.body.removeChild(downloadElement) //下载完成移除元素
  620. window.URL.revokeObjectURL(href) //释放掉blob对象
  621. })
  622. } else {
  623. let image = new Image()
  624. image.setAttribute('crossOrigin', 'anonymous')
  625. image.src = this.checkArr[0]
  626. image.onload = () => {
  627. let canvas = document.createElement('canvas')
  628. canvas.width = image.width
  629. canvas.height = image.height
  630. let ctx = canvas.getContext('2d')
  631. ctx.drawImage(image, 0, 0, image.width, image.height)
  632. canvas.toBlob(blob => {
  633. let url = URL.createObjectURL(blob)
  634. let eleLink = document.createElement('a')
  635. eleLink.download = '封面下载'
  636. eleLink.href = url
  637. eleLink.click()
  638. eleLink.remove()
  639. // 用完释放URL对象
  640. URL.revokeObjectURL(url)
  641. })
  642. }
  643. }
  644. },
  645. implement(data) {
  646. var params = {}
  647. var dataJson = []
  648. for (let i = 0; i < this.dataSource.length; i++) {
  649. for (let j = 0; j < this.checkArr.length; j++) {
  650. if (this.dataSource[i].url == this.checkArr[j]) {
  651. dataJson.push(this.dataSource[i].id)
  652. }
  653. }
  654. }
  655. params.mediaId = this.mediaId
  656. params.materialArray = JSON.stringify(dataJson)
  657. params.accountArray = JSON.stringify(data)
  658. postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
  659. if (res.code == 0) {
  660. this.checkArr = []
  661. this.checkAll = false
  662. }
  663. })
  664. // /ctop/materialUpload/uploadAccount
  665. },
  666. downloadByBlob() {
  667. if (this.activeKey == 'image') {
  668. let image = new Image()
  669. image.setAttribute('crossOrigin', 'anonymous')
  670. image.src = this.showUrlWater
  671. image.onload = () => {
  672. let canvas = document.createElement('canvas')
  673. canvas.width = image.width
  674. canvas.height = image.height
  675. let ctx = canvas.getContext('2d')
  676. ctx.drawImage(image, 0, 0, image.width, image.height)
  677. canvas.toBlob(blob => {
  678. let url = URL.createObjectURL(blob)
  679. this.download(url, this.name)
  680. // 用完释放URL对象
  681. URL.revokeObjectURL(url)
  682. })
  683. }
  684. } else {
  685. fetch(this.showUrlWater)
  686. .then(res => res.blob())
  687. .then(blob => {
  688. const a = document.createElement('a')
  689. document.body.appendChild(a)
  690. a.style.display = 'none'
  691. // 使用获取到的blob对象创建的url
  692. const url = window.URL.createObjectURL(blob)
  693. a.href = url
  694. // 指定下载的文件名
  695. a.download = this.name
  696. a.click()
  697. document.body.removeChild(a)
  698. // 移除blob对象的url
  699. window.URL.revokeObjectURL(url)
  700. })
  701. }
  702. },
  703. download(href, name) {
  704. let eleLink = document.createElement('a')
  705. eleLink.download = name
  706. eleLink.href = href
  707. eleLink.click()
  708. eleLink.remove()
  709. },
  710. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  711. onCheckAllChange() {
  712. if (this.checkAll) {
  713. this.checkArr = []
  714. } else {
  715. var data = this.dataSource.map(item => {
  716. return item.url
  717. })
  718. this.checkArr.push(...data)
  719. }
  720. this.checkAll = !this.checkAll
  721. },
  722. searchRe() {
  723. this.queryParam = {
  724. type: 'IMAGE',
  725. userId: this.userInfo().id,
  726. status: this.active
  727. }
  728. this.loadData(1)
  729. },
  730. getList(value) {
  731. if (value) {
  732. this.mediaId = this.dataElse.filter(item => {
  733. if (value == item.projectId) {
  734. return item
  735. }
  736. })[0].mediaId
  737. }
  738. this.loadData()
  739. },
  740. onChangeCheck(checkedList) {
  741. if (checkedList.length == 0) {
  742. this.checkAll = false
  743. }
  744. },
  745. handleClose(removedTag) {
  746. const tags = this.tags.filter(tag => tag !== removedTag)
  747. this.tags = tags
  748. },
  749. showInput() {
  750. this.inputVisible = true
  751. this.$nextTick(function() {
  752. this.$refs.input.focus()
  753. })
  754. },
  755. handleInputChange(e) {
  756. this.inputValue = e.target.value
  757. },
  758. handleInputConfirm() {
  759. const inputValue = this.inputValue
  760. let tags = this.tags
  761. if (inputValue && tags.indexOf(inputValue) === -1) {
  762. tags = [...tags, inputValue]
  763. }
  764. Object.assign(this, {
  765. tags,
  766. inputVisible: false,
  767. inputValue: ''
  768. })
  769. },
  770. showDetail(item) {
  771. this.visibleDetail = true
  772. this.showUrl = item.url
  773. this.showUrlWater = item.watermarkUrl ? item.watermarkUrl : null
  774. this.name = item.watermarkMaterialName ? item.watermarkMaterialName : null
  775. this.id = item.id
  776. this.code = item.code
  777. this.excellent = item.excellent
  778. if (this.active == '2') {
  779. this.refuseReason = item.refuseReason
  780. this.refuseFile = item.refuseFile ? JSON.parse(item.refuseFile) : null
  781. } else if (this.active == '1') {
  782. this.creativeCopywriter = item.creativeCopywriter
  783. this.refuseReason = ''
  784. this.refuseFile = []
  785. } else {
  786. this.refuseReason = ''
  787. this.refuseFile = []
  788. }
  789. getAction('/ctop/MaterialImageInfo/getDetail', {
  790. id: item.id
  791. }).then(res => {
  792. this.detail = res.result
  793. })
  794. },
  795. imageEdit(item) {
  796. this.projectId = item.id
  797. this.videoId = item.videoId
  798. this.visible = true
  799. },
  800. handleOk() {
  801. this.form.validateFieldsAndScroll((err, values) => {
  802. if (err) {
  803. // 这里做逻辑处理
  804. } else {
  805. var params = { ...this.urlList }
  806. params.id = this.projectId
  807. params.videoId = this.videoId
  808. params.status = '0'
  809. putAction('/ctop/MaterialImageInfo/edit', params).then(res => {
  810. if (res.success) {
  811. this.form.resetFields()
  812. this.urlList = {
  813. url: '',
  814. md5: '',
  815. name: '',
  816. size: '',
  817. width: '',
  818. height: ''
  819. }
  820. this.tags = []
  821. this.loadData()
  822. this.visible = false
  823. this.$message.success('素材修改成功')
  824. }
  825. })
  826. }
  827. })
  828. },
  829. close() {
  830. this.urlList = { url: '', md5: '', name: '', size: '', width: '', height: '' }
  831. this.visible = false
  832. },
  833. onChange(date, dateString) {},
  834. callbackTwo(key) {
  835. this.checkAll = false
  836. this.checkArr = []
  837. if (this.form.getFieldValue('projectId')) {
  838. this.form.setFieldsValue({
  839. projectId: ''
  840. })
  841. }
  842. this.queryParam.status = key
  843. this.loadData()
  844. },
  845. overUpload(urlAll) {
  846. console.log(urlAll, this.urlList)
  847. var that = this
  848. var img = null
  849. img = new Image()
  850. that.material = []
  851. img.src = this.urlList.url
  852. if (img.complete) {
  853. that.urlList.width = img.width
  854. that.urlList.height = img.height
  855. // 打印
  856. if (img.width == 720) {
  857. if (img.height == 1280) {
  858. that.material.push(true)
  859. } else {
  860. that.material.push(false)
  861. }
  862. } else if (img.width == 1080) {
  863. if (img.height == 1920) {
  864. that.material.push(true)
  865. } else {
  866. that.material.push(false)
  867. }
  868. } else if (img.width == 1280) {
  869. if (img.height == 720) {
  870. that.material.push(true)
  871. } else {
  872. that.material.push(false)
  873. }
  874. } else if (img.width == 1920) {
  875. if (img.height == 1080) {
  876. that.material.push(true)
  877. } else {
  878. that.material.push(false)
  879. }
  880. } else {
  881. that.material.push(false)
  882. }
  883. console.log(this.material)
  884. } else {
  885. // 加载完成执行
  886. img.onload = function() {
  887. that.urlList.width = img.width
  888. that.urlList.height = img.height
  889. if (img.width == 720) {
  890. if (img.height == 1280) {
  891. that.material.push(true)
  892. } else {
  893. that.material.push(false)
  894. }
  895. } else if (img.width == 1080) {
  896. if (img.height == 1920) {
  897. that.material.push(true)
  898. } else {
  899. that.material.push(false)
  900. }
  901. } else if (img.width == 1280) {
  902. if (img.height == 720) {
  903. that.material.push(true)
  904. } else {
  905. that.material.push(false)
  906. }
  907. } else if (img.width == 1920) {
  908. if (img.height == 1080) {
  909. that.material.push(true)
  910. } else {
  911. that.material.push(false)
  912. }
  913. } else {
  914. that.material.push(false)
  915. }
  916. }
  917. }
  918. },
  919. file(file) {
  920. console.log(file)
  921. var bmf = new BMF()
  922. var that = this
  923. return new Promise(function(resolve, reject) {
  924. bmf.md5(file[0], (err, md5) => {
  925. that.urlList.name = file[0].name
  926. that.urlList.md5 = md5
  927. that.urlList.size = file[0].size
  928. fileCheck({
  929. code: md5,
  930. projectId: that.getData('projectId')
  931. }).then(res => {
  932. if (res.code == 0) {
  933. that.$message.error('此素材已经上传')
  934. reject()
  935. } else {
  936. resolve()
  937. // reject()
  938. }
  939. })
  940. })
  941. })
  942. },
  943. getData(className) {
  944. return this.form.getFieldValue(className)
  945. },
  946. fileWater(file) {
  947. var bmf = new BMF()
  948. var that = this
  949. return new Promise(function(resolve, reject) {
  950. bmf.md5(file[0], (err, md5) => {
  951. that.watermarkUrl.name = file[0].name
  952. that.watermarkUrl.md5 = md5
  953. fileCheck({
  954. code: md5
  955. }).then(res => {
  956. if (res.code == 0) {
  957. that.$message.error('此素材已经上传')
  958. reject()
  959. } else {
  960. resolve()
  961. }
  962. })
  963. })
  964. })
  965. },
  966. getParticipateList() {
  967. getAction('/ctop/projectMember/participateList', {
  968. userId: this.userInfo().id
  969. }).then(res => {
  970. if (res.code == 0) {
  971. this.dataElse = res.result
  972. }
  973. })
  974. },
  975. getProjectId(items) {
  976. getAction('/ctop/projectMember/getMemberList', {
  977. projectId: items
  978. }).then(res => {
  979. if (res.code == 0) {
  980. this.ascription.clipId = res.result.filter(item => {
  981. if (item.roleCode == 'clip') {
  982. return {
  983. userId: item.userId,
  984. userName: item.userName
  985. }
  986. }
  987. })
  988. this.ascription.shotId = res.result.filter(item => {
  989. if (item.roleCode == 'shot') {
  990. return {
  991. userId: item.userId,
  992. userName: item.userName
  993. }
  994. }
  995. })
  996. this.ascription.planId = res.result.filter(item => {
  997. if (item.roleCode == 'plan') {
  998. return {
  999. userId: item.userId,
  1000. userName: item.userName
  1001. }
  1002. }
  1003. })
  1004. this.ascription.planeId = res.result.filter(item => {
  1005. if (item.roleCode == 'plane') {
  1006. return {
  1007. userId: item.userId,
  1008. userName: item.userName
  1009. }
  1010. }
  1011. })
  1012. }
  1013. })
  1014. },
  1015. getDataSource(page, pageSize) {
  1016. this.ipagination.current = page
  1017. // this.checkArr = []
  1018. this.checkAll = false
  1019. this.loadData()
  1020. }
  1021. }
  1022. }
  1023. </script>
  1024. <style scoped>
  1025. @import '~@assets/less/common.less';
  1026. </style>