materialList.vue 32 KB

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