materialList.vue 33 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072
  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. <upload-to-ali
  282. style="width:160%"
  283. v-model="urlList.url"
  284. :customDomain="customDomain"
  285. preview
  286. :region="region"
  287. :bucket="bucket"
  288. :accept="activeKey == 'image' ? acceptImage : acceptVideo"
  289. :max="10"
  290. :size="1024000"
  291. :accessKeyId="accessKeyId"
  292. :accessKeySecret="accessKeySecret"
  293. :before-upload="file"
  294. :dir="activeKey == 'image' ? dirImg : dirVideo"
  295. @loaded="overUpload"
  296. ></upload-to-ali>
  297. <span v-if="material.filter(item => item == false).length > 0 && urlList.url != ''" style="color:red"
  298. >上传素材的尺寸不符,请修改</span
  299. >
  300. <span v-else-if="material.filter(item => item == false).length == 0 && urlList.url != ''" style="color:green"
  301. >上传成功</span
  302. >
  303. </a-form-item>
  304. </a-form>
  305. </a-modal>
  306. <a-modal title="素材详情" v-model="visibleDetail" width="70%">
  307. <div style="width:100%">
  308. <a-button type="primary" @click="setSuccess" style="float:right">
  309. {{ excellent == 0 ? '标记为优秀素材' : '取消标记' }}
  310. </a-button>
  311. </div>
  312. <div style="display:flex;height:700px">
  313. <div
  314. style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2"
  315. >
  316. <img :src="showUrl" alt="" v-if="activeKey == 'image'" style="height:100%" />
  317. </div>
  318. <div style="flex:3;padding:10px;box-sizing:border-box;">
  319. <!-- <video
  320. v-if="detail.videoUrl"
  321. :src="detail.videoUrl"
  322. style="height:200px;max-width:100%;position:absolute;z-index:10;"
  323. /> -->
  324. <a-form v-if="detail" class="detail">
  325. <a-form-item label="绑定视频" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.videoUrl">
  326. <video
  327. class="video"
  328. :src="detail.videoUrl"
  329. controls="controls"
  330. style="width:150px"
  331. controlsList="nodownload"
  332. >
  333. 您的浏览器不支持 video 标签。
  334. </video>
  335. </a-form-item>
  336. <a-form-item label="上传人" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.userName">
  337. {{ detail.userName }}
  338. </a-form-item>
  339. <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.width">
  340. {{ detail.width }}*{{ detail.height }}
  341. </a-form-item>
  342. <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.size">
  343. {{ detail.size }}
  344. </a-form-item>
  345. <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.tag">
  346. <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
  347. </a-form-item>
  348. <a-form-item label="水印素材下载" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="showUrlWater">
  349. <a-button type="primary" @click="downloadByBlob">下载</a-button>
  350. </a-form-item>
  351. <a-form-item label="审核人" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
  352. {{ detail.auditorName }}
  353. </a-form-item>
  354. <a-form-item label="广告语" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '1'">
  355. {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
  356. </a-form-item>
  357. <a-form-item label="驳回原因" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
  358. {{ refuseReason ? refuseReason : '无原因' }}
  359. </a-form-item>
  360. <a-form-item label="截图" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
  361. <upload-to-ali
  362. v-if="refuseFile"
  363. disabled
  364. v-model="refuseFile"
  365. :customDomain="customDomain"
  366. multiple
  367. preview
  368. :region="region"
  369. :bucket="bucket"
  370. :accept="acceptImage"
  371. :max="10"
  372. :size="1024000"
  373. :accessKeyId="accessKeyId"
  374. :accessKeySecret="accessKeySecret"
  375. :dir="dirImg"
  376. ></upload-to-ali>
  377. <div v-else>无截图</div>
  378. </a-form-item>
  379. </a-form>
  380. </div>
  381. </div>
  382. </a-modal>
  383. <account-check ref="check" @synchro="implement"></account-check>
  384. </a-card>
  385. </template>
  386. <script>
  387. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  388. import JEllipsis from '@/components/jeecg/JEllipsis'
  389. import UploadToAli from '@femessage/upload-to-ali'
  390. import { fileCheck, fileInsert, fileEdit } from '@/api/actor'
  391. import { getAction, postAction, postFile, downFile, downFilePost, deleteAction, putAction } from '@/api/manage'
  392. import { mapGetters } from 'vuex'
  393. import moment from 'moment'
  394. import selectTable from '@/views/modules/Statistics/components/selecTable.vue'
  395. import BMF from 'browser-md5-file'
  396. import accountCheck from './accountCheck'
  397. export default {
  398. name: 'YardList',
  399. mixins: [JeecgListMixin],
  400. components: {
  401. JEllipsis,
  402. UploadToAli,
  403. accountCheck,
  404. selectTable
  405. },
  406. data() {
  407. return {
  408. projectId: '',
  409. videoId: '',
  410. inputVisible: false,
  411. inputValue: '',
  412. labelCol: {
  413. xs: {
  414. span: 24
  415. },
  416. sm: {
  417. span: 5
  418. }
  419. },
  420. wrapperCol: {
  421. xs: {
  422. span: 24
  423. },
  424. sm: {
  425. span: 12
  426. }
  427. },
  428. noImgUrl: require('@/assets/img/noImg.png'),
  429. queryParam: {},
  430. dataElse: [],
  431. ascription: {
  432. clipId: [], //剪辑人id
  433. shotId: [], //拍摄人id
  434. planId: [], //策划id
  435. planeId: [] //平面id
  436. },
  437. show: true,
  438. visible: false,
  439. visibleDetail: false,
  440. activeKey: 'image',
  441. active: '0',
  442. examinelList: [
  443. {
  444. value: '0',
  445. tab: '未审核'
  446. },
  447. {
  448. value: '1',
  449. tab: '已批准'
  450. },
  451. {
  452. value: '2',
  453. tab: '已驳回'
  454. }
  455. ],
  456. // 表头
  457. columns: [],
  458. urlList: {
  459. url: '',
  460. md5: '',
  461. name: '',
  462. size: '',
  463. width: '',
  464. height: ''
  465. },
  466. imageArr: [],
  467. watermarkUrl: {
  468. url: '',
  469. md5: '',
  470. name: ''
  471. },
  472. url: {
  473. list: '/ctop/MaterialImageInfo/pageList'
  474. },
  475. detail: false,
  476. form: this.$form.createForm(this),
  477. tags: [],
  478. refuseFile: [],
  479. refuseReason: '',
  480. creativeCopywriter: '',
  481. customDomain: '',
  482. region: 'oss-cn-beijing',
  483. bucket: 'ctop-media',
  484. acceptVideo: 'video/mpeg,video/mp4',
  485. acceptImage: 'image/jpeg,image/jpg,image/png',
  486. accessKeyId: 'LTAIbNbqWzSOklQV',
  487. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  488. checkArr: [],
  489. checkAll: false,
  490. showUrl: '',
  491. showUrlWater: '',
  492. materialDescribe: '',
  493. name: '',
  494. detail: null,
  495. add: true,
  496. id: '',
  497. role: {
  498. roleCode: '',
  499. roleName: ''
  500. },
  501. key: '0',
  502. mediaId: null,
  503. repeat: false,
  504. noList: [],
  505. material: [],
  506. excellent: 0,
  507. code: ''
  508. }
  509. },
  510. filters: {
  511. getDate(value) {
  512. let date = new Date(value)
  513. let y = date.getFullYear()
  514. let MM = date.getMonth() + 1
  515. MM = MM < 10 ? '0' + MM : MM
  516. let d = date.getDate()
  517. d = d < 10 ? '0' + d : d
  518. return y + '-' + MM + '-' + d
  519. }
  520. },
  521. computed: {
  522. dirImg() {
  523. let date = new Date()
  524. let y = date.getFullYear()
  525. let MM = date.getMonth() + 1
  526. MM = MM < 10 ? '0' + MM : MM
  527. let d = date.getDate()
  528. d = d < 10 ? '0' + d : d
  529. return 'image/' + y + '-' + MM + '-' + d + '/'
  530. },
  531. dirVideo() {
  532. let date = new Date()
  533. let y = date.getFullYear()
  534. let MM = date.getMonth() + 1
  535. MM = MM < 10 ? '0' + MM : MM
  536. let d = date.getDate()
  537. d = d < 10 ? '0' + d : d
  538. return 'video/' + y + '-' + MM + '-' + d + '/'
  539. }
  540. },
  541. created() {
  542. this.queryParam.type = 'IMAGE'
  543. this.queryParam.userId = this.userInfo().id
  544. this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  545. this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  546. // this.queryParam.status = key
  547. this.ipagination.pageSize = 8
  548. this.getParticipateList()
  549. // /sys/user/getRoleInfo
  550. getAction('/sys/user/getRoleInfo', {
  551. userId: this.userInfo().id
  552. }).then(res => {
  553. this.role = res
  554. })
  555. },
  556. watch: {
  557. $route: function(n, o) {
  558. if (n.path == '/modules/material/materialList') {
  559. this.queryParam.userId = this.userInfo().id
  560. this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  561. this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  562. this.loadData()
  563. }
  564. },
  565. 'queryParam.projectId': function(n, o) {
  566. if (n != '') {
  567. this.getList(n)
  568. }
  569. }
  570. },
  571. methods: {
  572. setSuccess() {
  573. var params = {}
  574. params.id = this.code
  575. params.excellent = this.excellent == 1 ? 0 : 1
  576. getAction('/ctop/materialInfo/excellent/set', params).then(res => {
  577. if (res.success) {
  578. this.excellent = this.excellent == 1 ? 0 : 1
  579. this.loadData(this.ipagination.current)
  580. }
  581. })
  582. },
  583. deleteData(id) {
  584. deleteAction('/ctop/materialInfo/delete', {
  585. id: id
  586. }).then(res => {
  587. if (res.success) {
  588. this.$message.success('删除成功')
  589. this.loadData()
  590. } else {
  591. this.$message.error(res.message)
  592. }
  593. })
  594. },
  595. moment,
  596. filterOption(input, option) {
  597. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  598. },
  599. a(item) {
  600. item.showVideo = true
  601. },
  602. tongbuImage() {
  603. this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
  604. userId: this.userInfo().id,
  605. projectId: this.queryParam.projectId
  606. })
  607. },
  608. tongbu() {
  609. if (this.checkArr.length > 1) {
  610. downFilePost('/download/zip', {
  611. urls: this.checkArr
  612. }).then(res => {
  613. let blob = new Blob([res], {
  614. type: 'application/zip'
  615. })
  616. let downloadElement = document.createElement('a')
  617. let href = window.URL.createObjectURL(blob) //创建下载的链接
  618. downloadElement.href = href
  619. downloadElement.download = '批量下载' //下载后文件名
  620. document.body.appendChild(downloadElement)
  621. downloadElement.click() //点击下载
  622. document.body.removeChild(downloadElement) //下载完成移除元素
  623. window.URL.revokeObjectURL(href) //释放掉blob对象
  624. })
  625. } else {
  626. let image = new Image()
  627. image.setAttribute('crossOrigin', 'anonymous')
  628. image.src = this.checkArr[0]
  629. image.onload = () => {
  630. let canvas = document.createElement('canvas')
  631. canvas.width = image.width
  632. canvas.height = image.height
  633. let ctx = canvas.getContext('2d')
  634. ctx.drawImage(image, 0, 0, image.width, image.height)
  635. canvas.toBlob(blob => {
  636. let url = URL.createObjectURL(blob)
  637. let eleLink = document.createElement('a')
  638. eleLink.download = '封面下载'
  639. eleLink.href = url
  640. eleLink.click()
  641. eleLink.remove()
  642. // 用完释放URL对象
  643. URL.revokeObjectURL(url)
  644. })
  645. }
  646. }
  647. },
  648. implement(data) {
  649. var params = {}
  650. var dataJson = []
  651. for (let i = 0; i < this.dataSource.length; i++) {
  652. for (let j = 0; j < this.checkArr.length; j++) {
  653. if (this.dataSource[i].url == this.checkArr[j]) {
  654. dataJson.push(this.dataSource[i].id)
  655. }
  656. }
  657. }
  658. params.mediaId = this.mediaId
  659. params.materialArray = JSON.stringify(dataJson)
  660. params.accountArray = JSON.stringify(data)
  661. postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
  662. if (res.code == 0) {
  663. this.checkArr = []
  664. this.checkAll = false
  665. }
  666. })
  667. // /ctop/materialUpload/uploadAccount
  668. },
  669. downloadByBlob() {
  670. if (this.activeKey == 'image') {
  671. let image = new Image()
  672. image.setAttribute('crossOrigin', 'anonymous')
  673. image.src = this.showUrlWater
  674. image.onload = () => {
  675. let canvas = document.createElement('canvas')
  676. canvas.width = image.width
  677. canvas.height = image.height
  678. let ctx = canvas.getContext('2d')
  679. ctx.drawImage(image, 0, 0, image.width, image.height)
  680. canvas.toBlob(blob => {
  681. let url = URL.createObjectURL(blob)
  682. this.download(url, this.name)
  683. // 用完释放URL对象
  684. URL.revokeObjectURL(url)
  685. })
  686. }
  687. } else {
  688. fetch(this.showUrlWater)
  689. .then(res => res.blob())
  690. .then(blob => {
  691. const a = document.createElement('a')
  692. document.body.appendChild(a)
  693. a.style.display = 'none'
  694. // 使用获取到的blob对象创建的url
  695. const url = window.URL.createObjectURL(blob)
  696. a.href = url
  697. // 指定下载的文件名
  698. a.download = this.name
  699. a.click()
  700. document.body.removeChild(a)
  701. // 移除blob对象的url
  702. window.URL.revokeObjectURL(url)
  703. })
  704. }
  705. },
  706. download(href, name) {
  707. let eleLink = document.createElement('a')
  708. eleLink.download = name
  709. eleLink.href = href
  710. eleLink.click()
  711. eleLink.remove()
  712. },
  713. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  714. onCheckAllChange() {
  715. if (this.checkAll) {
  716. this.checkArr = []
  717. } else {
  718. var data = this.dataSource.map(item => {
  719. return item.url
  720. })
  721. this.checkArr.push(...data)
  722. }
  723. this.checkAll = !this.checkAll
  724. },
  725. searchRe() {
  726. this.queryParam = {
  727. type: 'IMAGE',
  728. userId: this.userInfo().id,
  729. status: this.active
  730. }
  731. this.loadData(1)
  732. },
  733. getList(value) {
  734. if (value) {
  735. this.mediaId = this.dataElse.filter(item => {
  736. if (value == item.projectId) {
  737. return item
  738. }
  739. })[0].mediaId
  740. }
  741. this.loadData()
  742. },
  743. onChangeCheck(checkedList) {
  744. if (checkedList.length == 0) {
  745. this.checkAll = false
  746. }
  747. },
  748. handleClose(removedTag) {
  749. const tags = this.tags.filter(tag => tag !== removedTag)
  750. this.tags = tags
  751. },
  752. showInput() {
  753. this.inputVisible = true
  754. this.$nextTick(function() {
  755. this.$refs.input.focus()
  756. })
  757. },
  758. handleInputChange(e) {
  759. this.inputValue = e.target.value
  760. },
  761. handleInputConfirm() {
  762. const inputValue = this.inputValue
  763. let tags = this.tags
  764. if (inputValue && tags.indexOf(inputValue) === -1) {
  765. tags = [...tags, inputValue]
  766. }
  767. Object.assign(this, {
  768. tags,
  769. inputVisible: false,
  770. inputValue: ''
  771. })
  772. },
  773. showDetail(item) {
  774. this.visibleDetail = true
  775. this.showUrl = item.url
  776. this.showUrlWater = item.watermarkUrl ? item.watermarkUrl : null
  777. this.name = item.watermarkMaterialName ? item.watermarkMaterialName : null
  778. this.id = item.id
  779. this.code = item.code
  780. this.excellent = item.excellent
  781. if (this.active == '2') {
  782. this.refuseReason = item.refuseReason
  783. this.refuseFile = item.refuseFile ? JSON.parse(item.refuseFile) : null
  784. } else if (this.active == '1') {
  785. this.creativeCopywriter = item.creativeCopywriter
  786. this.refuseReason = ''
  787. this.refuseFile = []
  788. } else {
  789. this.refuseReason = ''
  790. this.refuseFile = []
  791. }
  792. getAction('/ctop/MaterialImageInfo/getDetail', {
  793. id: item.id
  794. }).then(res => {
  795. this.detail = res.result
  796. })
  797. },
  798. imageEdit(item) {
  799. this.projectId = item.id
  800. this.videoId = item.videoId
  801. this.visible = true
  802. },
  803. handleOk() {
  804. this.form.validateFieldsAndScroll((err, values) => {
  805. if (err) {
  806. // 这里做逻辑处理
  807. } else {
  808. var params = { ...this.urlList }
  809. params.id = this.projectId
  810. params.videoId = this.videoId
  811. params.status = '0'
  812. putAction('/ctop/MaterialImageInfo/edit', params).then(res => {
  813. if (res.success) {
  814. this.form.resetFields()
  815. this.urlList = {
  816. url: '',
  817. md5: '',
  818. name: '',
  819. size: '',
  820. width: '',
  821. height: ''
  822. }
  823. this.tags = []
  824. this.loadData()
  825. this.visible = false
  826. this.$message.success('素材修改成功')
  827. }
  828. })
  829. }
  830. })
  831. },
  832. close() {
  833. this.urlList = { url: '', md5: '', name: '', size: '', width: '', height: '' }
  834. this.visible = false
  835. },
  836. onChange(date, dateString) {},
  837. callbackTwo(key) {
  838. this.checkAll = false
  839. this.checkArr = []
  840. if (this.form.getFieldValue('projectId')) {
  841. this.form.setFieldsValue({
  842. projectId: ''
  843. })
  844. }
  845. this.queryParam.status = key
  846. this.loadData()
  847. },
  848. overUpload(urlAll) {
  849. console.log(urlAll, this.urlList)
  850. var that = this
  851. var img = null
  852. img = new Image()
  853. that.material = []
  854. img.src = this.urlList.url
  855. if (img.complete) {
  856. that.urlList.width = img.width
  857. that.urlList.height = img.height
  858. // 打印
  859. if (img.width == 720) {
  860. if (img.height == 1280) {
  861. that.material.push(true)
  862. } else {
  863. that.material.push(false)
  864. }
  865. } else if (img.width == 1080) {
  866. if (img.height == 1920) {
  867. that.material.push(true)
  868. } else {
  869. that.material.push(false)
  870. }
  871. } else if (img.width == 1280) {
  872. if (img.height == 720) {
  873. that.material.push(true)
  874. } else {
  875. that.material.push(false)
  876. }
  877. } else if (img.width == 1920) {
  878. if (img.height == 1080) {
  879. that.material.push(true)
  880. } else {
  881. that.material.push(false)
  882. }
  883. } else {
  884. that.material.push(false)
  885. }
  886. console.log(this.material)
  887. } else {
  888. // 加载完成执行
  889. img.onload = function() {
  890. that.urlList.width = img.width
  891. that.urlList.height = img.height
  892. if (img.width == 720) {
  893. if (img.height == 1280) {
  894. that.material.push(true)
  895. } else {
  896. that.material.push(false)
  897. }
  898. } else if (img.width == 1080) {
  899. if (img.height == 1920) {
  900. that.material.push(true)
  901. } else {
  902. that.material.push(false)
  903. }
  904. } else if (img.width == 1280) {
  905. if (img.height == 720) {
  906. that.material.push(true)
  907. } else {
  908. that.material.push(false)
  909. }
  910. } else if (img.width == 1920) {
  911. if (img.height == 1080) {
  912. that.material.push(true)
  913. } else {
  914. that.material.push(false)
  915. }
  916. } else {
  917. that.material.push(false)
  918. }
  919. }
  920. }
  921. },
  922. file(file) {
  923. console.log(file)
  924. var bmf = new BMF()
  925. var that = this
  926. return new Promise(function(resolve, reject) {
  927. bmf.md5(file[0], (err, md5) => {
  928. that.urlList.name = file[0].name
  929. that.urlList.md5 = md5
  930. that.urlList.size = file[0].size
  931. fileCheck({
  932. code: md5,
  933. projectId: that.getData('projectId')
  934. }).then(res => {
  935. if (res.code == 0) {
  936. that.$message.error('此素材已经上传')
  937. reject()
  938. } else {
  939. resolve()
  940. // reject()
  941. }
  942. })
  943. })
  944. })
  945. },
  946. getData(className) {
  947. return this.form.getFieldValue(className)
  948. },
  949. fileWater(file) {
  950. var bmf = new BMF()
  951. var that = this
  952. return new Promise(function(resolve, reject) {
  953. bmf.md5(file[0], (err, md5) => {
  954. that.watermarkUrl.name = file[0].name
  955. that.watermarkUrl.md5 = md5
  956. fileCheck({
  957. code: md5
  958. }).then(res => {
  959. if (res.code == 0) {
  960. that.$message.error('此素材已经上传')
  961. reject()
  962. } else {
  963. resolve()
  964. }
  965. })
  966. })
  967. })
  968. },
  969. getParticipateList() {
  970. getAction('/ctop/projectMember/participateList', {
  971. userId: this.userInfo().id
  972. }).then(res => {
  973. if (res.code == 0) {
  974. this.dataElse = res.result
  975. }
  976. })
  977. },
  978. getProjectId(items) {
  979. getAction('/ctop/projectMember/getMemberList', {
  980. projectId: items
  981. }).then(res => {
  982. if (res.code == 0) {
  983. this.ascription.clipId = res.result.filter(item => {
  984. if (item.roleCode == 'clip') {
  985. return {
  986. userId: item.userId,
  987. userName: item.userName
  988. }
  989. }
  990. })
  991. this.ascription.shotId = res.result.filter(item => {
  992. if (item.roleCode == 'shot') {
  993. return {
  994. userId: item.userId,
  995. userName: item.userName
  996. }
  997. }
  998. })
  999. this.ascription.planId = res.result.filter(item => {
  1000. if (item.roleCode == 'plan') {
  1001. return {
  1002. userId: item.userId,
  1003. userName: item.userName
  1004. }
  1005. }
  1006. })
  1007. this.ascription.planeId = res.result.filter(item => {
  1008. if (item.roleCode == 'plane') {
  1009. return {
  1010. userId: item.userId,
  1011. userName: item.userName
  1012. }
  1013. }
  1014. })
  1015. }
  1016. })
  1017. },
  1018. getDataSource(page, pageSize) {
  1019. this.ipagination.current = page
  1020. // this.checkArr = []
  1021. this.checkAll = false
  1022. this.loadData()
  1023. }
  1024. }
  1025. }
  1026. </script>
  1027. <style scoped>
  1028. @import '~@assets/less/common.less';
  1029. </style>