excellentMaterial.vue 34 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. <div class="table-page-search-wrapper">
  144. <a-form layout="inline">
  145. <a-row :gutter="24">
  146. <a-col :md="8" :sm="8">
  147. <!-- <a-form-item label="项目名称"> -->
  148. <selectTable :projectId.sync="queryParam.projectId"></selectTable>
  149. </a-col>
  150. <a-col :md="8" :sm="8">
  151. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  152. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  153. <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
  154. </span>
  155. </a-col>
  156. </a-row>
  157. </a-form>
  158. </div>
  159. <a-tabs @change="callbackTwo" v-model="active" id="material-card" type="card">
  160. <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
  161. <div v-if="dataSource.length > 0">
  162. <a-button @click="onCheckAllChange">{{ checkAll ? '取消 ( ' + checkArr.length + ' )' : '全选' }}</a-button>
  163. <!-- 同步项目选择:
  164. <a-select showSearch v-model="projectId" placeholder="选择项目" style="width: 500px" optionFilterProp="children"
  165. :filterOption="filterOption" allowClear>
  166. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  167. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  168. item.mediaId == '1' ? '头条' : '快手'
  169. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  170. </a-select-option>
  171. </a-select> -->
  172. <a-button :disabled="checkArr.length == 0" v-if="queryParam.projectId " @click="tongbu">一键同步</a-button>
  173. <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
  174. <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
  175. <span v-if="items.excellent == 0"></span>
  176. <span v-else
  177. 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">优秀素材</span>
  178. <div class="home-right">
  179. <a-badge :count="checkArr.indexOf(items.url) > -1 ? checkArr.indexOf(items.url) + 1 : 0"
  180. :numberStyle="{ backgroundColor: '#52c41a' }" style="width:100%;display:flex" @click.stop>
  181. <span
  182. style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;">
  183. {{ items.materialName }}
  184. </span>
  185. <a-icon type="close-circle" @click="deleteData(items.id)" v-show="active == '0'"
  186. v-if="items.userId == userInfo().id" />
  187. </a-badge>
  188. <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
  189. <div class="home-num bg" v-if="activeKey == 'image'" :style="{
  190. backgroundImage: 'url(' + items.url + ')',
  191. backgroundSize: 'cover',
  192. backgroundRepeat: 'no-repeat',
  193. backgroundPosition: 'center center',
  194. overflow: 'hidden',
  195. position: 'relative',
  196. width: '100%',
  197. height: '100%'
  198. }"></div>
  199. <img v-if="active == 'IMAGE'" :src="items.url"
  200. style="height:200px;max-width:100%;position:absolute;z-index:10;" />
  201. <img v-else :src="items.url + '?x-oss-process=video/snapshot,t_00000,m_fast'" alt=""
  202. style="height:200px;max-width:100%;position:absolute;z-index:10;" />
  203. </div>
  204. <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
  205. {{ items.createTime | getDate }}
  206. <a-checkbox :value="items.url" style="float:right"></a-checkbox>
  207. </span>
  208. </div>
  209. </div>
  210. </a-checkbox-group>
  211. <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
  212. showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total"
  213. v-model="ipagination.current" @change="getDataSource" />
  214. </div>
  215. <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
  216. <img
  217. 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"
  218. alt="" />
  219. </div>
  220. </a-tab-pane>
  221. </a-tabs>
  222. <a-modal title="素材详情" v-model="visibleDetail" width="70%">
  223. <div style="width:100%">
  224. <a-button type="primary" @click="setSuccess" style="float:right">
  225. {{ excellent == 0 ? '标记为优秀素材' : '取消标记' }}
  226. </a-button>
  227. </div>
  228. <div style="display:flex;height:700px">
  229. <div
  230. style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2">
  231. <img :src="showUrl" alt="" v-if="active == 'IMAGE'" style="height:100%" />
  232. <video class="video" :src="showUrl" controls="controls" style="width:100%" v-else>
  233. 您的浏览器不支持 video 标签。
  234. </video>
  235. </div>
  236. <div style="flex:3;padding:10px;box-sizing:border-box;">
  237. <a-form v-if="detail" class="detail">
  238. <div v-if="detail.parameter">
  239. <a-form-item label="视频时长" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
  240. v-if="detail.parameter.second">
  241. {{ detail.parameter.second }}秒
  242. </a-form-item>
  243. <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
  244. v-if="detail.parameter.width">
  245. {{ detail.parameter.width }}*{{ detail.parameter.height }}
  246. </a-form-item>
  247. <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.parameter.size">
  248. {{ detail.parameter.size }}
  249. </a-form-item>
  250. </div>
  251. <div v-if="detail.ascription">
  252. <a-form-item label="策划" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  253. {{ detail.ascription.planName }}
  254. </a-form-item>
  255. <a-form-item label="拍摄" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  256. {{ detail.ascription.shotName }}
  257. </a-form-item>
  258. <a-form-item label="剪辑" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
  259. v-if="detail.ascription.clipName">
  260. {{ detail.ascription.clipName }}
  261. </a-form-item>
  262. <a-form-item label="平面" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
  263. v-if="detail.ascription.planeName">
  264. {{ detail.ascription.planeName }}
  265. </a-form-item>
  266. </div>
  267. <div v-if="detail.parameter">
  268. <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
  269. v-if="detail.parameter.width">
  270. {{ detail.parameter.width }}*{{ detail.parameter.height }}
  271. </a-form-item>
  272. <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.parameter.size">
  273. {{ detail.parameter.size }}
  274. </a-form-item>
  275. </div>
  276. <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.tag">
  277. <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
  278. </a-form-item>
  279. <a-form-item label="广告语" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '1'">
  280. {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
  281. </a-form-item>
  282. </a-form>
  283. </div>
  284. </div>
  285. </a-modal>
  286. <account-check ref="check" @synchro="implement"></account-check>
  287. </a-card>
  288. </template>
  289. <script>
  290. import {
  291. JeecgListMixin
  292. } from '@/mixins/JeecgListMixin'
  293. import JEllipsis from '@/components/jeecg/JEllipsis'
  294. import UploadToAli from '@femessage/upload-to-ali'
  295. import {
  296. fileCheck,
  297. fileInsert,
  298. fileEdit
  299. } from '@/api/actor'
  300. import {
  301. getAction,
  302. postAction,
  303. postFile,
  304. downFile,
  305. downFilePost,
  306. deleteAction
  307. } from '@/api/manage'
  308. import {
  309. mapGetters
  310. } from 'vuex'
  311. import moment from 'moment'
  312. import selectTable from '@/views/modules/Statistics/components/selecTable.vue'
  313. import BMF from 'browser-md5-file'
  314. import accountCheck from './accountCheck'
  315. export default {
  316. name: 'YardList',
  317. mixins: [JeecgListMixin],
  318. components: {
  319. JEllipsis,
  320. UploadToAli,
  321. accountCheck,
  322. selectTable
  323. },
  324. data() {
  325. return {
  326. inputVisible: false,
  327. projectId: undefined,
  328. inputValue: '',
  329. labelCol: {
  330. xs: {
  331. span: 24
  332. },
  333. sm: {
  334. span: 5
  335. }
  336. },
  337. wrapperCol: {
  338. xs: {
  339. span: 24
  340. },
  341. sm: {
  342. span: 12
  343. }
  344. },
  345. noImgUrl: require('@/assets/img/noImg.png'),
  346. queryParam: {},
  347. dataElse: [],
  348. ascription: {
  349. clipId: [], //剪辑人id
  350. shotId: [], //拍摄人id
  351. planId: [], //策划id
  352. planeId: [] //平面id
  353. },
  354. show: true,
  355. visible: false,
  356. visibleDetail: false,
  357. activeKey: 'image',
  358. active: 'IMAGE',
  359. examinelList: [{
  360. value: 'IMAGE',
  361. tab: '优秀图片'
  362. },
  363. {
  364. value: 'VIDEO',
  365. tab: '优秀视频'
  366. }
  367. ],
  368. // 表头
  369. columns: [],
  370. urlList: {
  371. url: [],
  372. md5: [],
  373. name: []
  374. },
  375. imageArr: [],
  376. watermarkUrl: {
  377. url: '',
  378. md5: '',
  379. name: ''
  380. },
  381. url: {
  382. list: '/ctop/materialInfo/excellent/list'
  383. },
  384. detail: false,
  385. form: this.$form.createForm(this),
  386. tags: [],
  387. refuseFile: [],
  388. refuseReason: '',
  389. creativeCopywriter: '',
  390. customDomain: '',
  391. region: 'oss-cn-beijing',
  392. bucket: 'ctop-media',
  393. acceptVideo: 'video/mpeg,video/mp4',
  394. acceptImage: 'image/jpeg,image/jpg,image/png',
  395. accessKeyId: 'LTAIbNbqWzSOklQV',
  396. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  397. checkArr: [],
  398. checkAll: false,
  399. showUrl: '',
  400. showUrlWater: '',
  401. materialDescribe: '',
  402. name: '',
  403. detail: null,
  404. add: true,
  405. id: '',
  406. role: {
  407. roleCode: '',
  408. roleName: ''
  409. },
  410. key: '0',
  411. mediaId: null,
  412. repeat: false,
  413. noList: [],
  414. material: [],
  415. excellent: 0,
  416. code: ''
  417. }
  418. },
  419. filters: {
  420. getDate(value) {
  421. let date = new Date(value)
  422. let y = date.getFullYear()
  423. let MM = date.getMonth() + 1
  424. MM = MM < 10 ? '0' + MM : MM
  425. let d = date.getDate()
  426. d = d < 10 ? '0' + d : d
  427. return y + '-' + MM + '-' + d
  428. }
  429. },
  430. computed: {
  431. dirImg() {
  432. let date = new Date()
  433. let y = date.getFullYear()
  434. let MM = date.getMonth() + 1
  435. MM = MM < 10 ? '0' + MM : MM
  436. let d = date.getDate()
  437. d = d < 10 ? '0' + d : d
  438. return 'image/' + y + '-' + MM + '-' + d + '/'
  439. },
  440. dirVideo() {
  441. let date = new Date()
  442. let y = date.getFullYear()
  443. let MM = date.getMonth() + 1
  444. MM = MM < 10 ? '0' + MM : MM
  445. let d = date.getDate()
  446. d = d < 10 ? '0' + d : d
  447. return 'video/' + y + '-' + MM + '-' + d + '/'
  448. }
  449. },
  450. created() {
  451. this.queryParam.type = 'IMAGE'
  452. // this.queryParam.userId = this.userInfo().id
  453. // this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  454. // this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  455. // this.queryParam.status = key
  456. this.ipagination.pageSize = 8
  457. this.getParticipateList()
  458. // // /sys/user/getRoleInfo
  459. // getAction('/sys/user/getRoleInfo', {
  460. // userId: this.userInfo().id
  461. // }).then(res => {
  462. // this.role = res
  463. // })
  464. },
  465. watch: {
  466. 'queryParam.projectId': function (n, o) {
  467. if (n != '') {
  468. this.getList(n)
  469. }
  470. }
  471. },
  472. methods: {
  473. setSuccess() {
  474. var params = {}
  475. params.id = this.code
  476. params.excellent = this.excellent == 1 ? 0 : 1
  477. getAction('/ctop/materialInfo/excellent/set', params).then(res => {
  478. if (res.success) {
  479. this.excellent = this.excellent == 1 ? 0 : 1
  480. this.loadData(this.ipagination.current)
  481. }
  482. })
  483. },
  484. deleteData(id) {
  485. deleteAction('/ctop/materialInfo/delete', {
  486. id: id
  487. }).then(res => {
  488. if (res.success) {
  489. this.$message.success('删除成功')
  490. this.loadData()
  491. } else {
  492. this.$message.error(res.message)
  493. }
  494. })
  495. },
  496. moment,
  497. filterOption(input, option) {
  498. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  499. },
  500. a(item) {
  501. item.showVideo = true
  502. },
  503. tongbu() {
  504. this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
  505. userId: this.userInfo().id,
  506. projectId: this.queryParam.projectId
  507. })
  508. },
  509. implement(data) {
  510. var params = {}
  511. var dataJson = []
  512. for (let i = 0; i < this.dataSource.length; i++) {
  513. for (let j = 0; j < this.checkArr.length; j++) {
  514. if (this.dataSource[i].url == this.checkArr[j]) {
  515. dataJson.push(this.dataSource[i].id)
  516. }
  517. }
  518. }
  519. params.mediaId = this.mediaId
  520. params.materialArray = JSON.stringify(dataJson)
  521. params.accountArray = JSON.stringify(data)
  522. postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
  523. if (res.code == 0) {
  524. this.checkArr = []
  525. this.checkAll = false
  526. }
  527. })
  528. // /ctop/materialUpload/uploadAccount
  529. },
  530. downloadByBlob() {
  531. if (this.activeKey == 'image') {
  532. let image = new Image()
  533. image.setAttribute('crossOrigin', 'anonymous')
  534. image.src = this.showUrlWater
  535. image.onload = () => {
  536. let canvas = document.createElement('canvas')
  537. canvas.width = image.width
  538. canvas.height = image.height
  539. let ctx = canvas.getContext('2d')
  540. ctx.drawImage(image, 0, 0, image.width, image.height)
  541. canvas.toBlob(blob => {
  542. let url = URL.createObjectURL(blob)
  543. this.download(url, this.name)
  544. // 用完释放URL对象
  545. URL.revokeObjectURL(url)
  546. })
  547. }
  548. } else {
  549. fetch(this.showUrlWater)
  550. .then(res => res.blob())
  551. .then(blob => {
  552. const a = document.createElement('a')
  553. document.body.appendChild(a)
  554. a.style.display = 'none'
  555. // 使用获取到的blob对象创建的url
  556. const url = window.URL.createObjectURL(blob)
  557. a.href = url
  558. // 指定下载的文件名
  559. a.download = this.name
  560. a.click()
  561. document.body.removeChild(a)
  562. // 移除blob对象的url
  563. window.URL.revokeObjectURL(url)
  564. })
  565. }
  566. },
  567. download(href, name) {
  568. let eleLink = document.createElement('a')
  569. eleLink.download = name
  570. eleLink.href = href
  571. eleLink.click()
  572. eleLink.remove()
  573. },
  574. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  575. onCheckAllChange() {
  576. if (this.checkAll) {
  577. this.checkArr = []
  578. } else {
  579. var data = this.dataSource.map(item => {
  580. return item.url
  581. })
  582. this.checkArr.push(...data)
  583. }
  584. this.checkAll = !this.checkAll
  585. },
  586. searchRe() {
  587. this.queryParam.projectId = ''
  588. if (this.queryParam.createTime) {
  589. this.queryParam.createTime = ''
  590. }
  591. this.loadData()
  592. },
  593. getList(value) {
  594. if (value) {
  595. this.mediaId = this.dataElse.filter(item => {
  596. if (value == item.projectId) {
  597. return item
  598. }
  599. })[0].mediaId
  600. }
  601. console.log(this.mediaId)
  602. },
  603. onChangeCheck(checkedList) {
  604. if (checkedList.length == 0) {
  605. this.checkAll = false
  606. }
  607. },
  608. handleClose(removedTag) {
  609. const tags = this.tags.filter(tag => tag !== removedTag)
  610. this.tags = tags
  611. },
  612. showInput() {
  613. this.inputVisible = true
  614. this.$nextTick(function () {
  615. this.$refs.input.focus()
  616. })
  617. },
  618. handleInputChange(e) {
  619. this.inputValue = e.target.value
  620. },
  621. handleInputConfirm() {
  622. const inputValue = this.inputValue
  623. let tags = this.tags
  624. if (inputValue && tags.indexOf(inputValue) === -1) {
  625. tags = [...tags, inputValue]
  626. }
  627. Object.assign(this, {
  628. tags,
  629. inputVisible: false,
  630. inputValue: ''
  631. })
  632. },
  633. showDetail(item) {
  634. this.visibleDetail = true
  635. this.showUrl = item.url
  636. this.showUrlWater = item.watermarkUrl ? item.watermarkUrl : null
  637. this.name = item.watermarkMaterialName ? item.watermarkMaterialName : null
  638. this.id = item.id
  639. this.code = item.code
  640. this.excellent = item.excellent
  641. getAction('/ctop/materialInfo/getDetail', {
  642. materialId: item.id
  643. }).then(res => {
  644. this.detail = res
  645. })
  646. },
  647. okEditShow(item, editStatus) {
  648. if (editStatus == '2') {
  649. var params = {}
  650. params.id = item.id
  651. params.auditorId = this.userInfo().id
  652. params.refuseReason = this.refuseReason
  653. var data = this.refuseFile.map(item => {
  654. return 'https:' + item
  655. })
  656. params.refuseFile = JSON.stringify(data)
  657. params.status = editStatus
  658. fileEdit(params).then(res => {
  659. this.refuseFile = []
  660. this.refuseReason = ''
  661. this.loadData()
  662. })
  663. } else if (editStatus == '1') {
  664. var params = {}
  665. params.id = item.id
  666. params.auditorId = this.userInfo().id
  667. params.creativeCopywriter = this.refuseReason
  668. params.status = editStatus
  669. fileEdit(params).then(res => {
  670. this.refuseReason = ''
  671. this.loadData()
  672. })
  673. }
  674. },
  675. okEdit(e) {
  676. this.edit(null, this.active, '2')
  677. },
  678. edit(item, status, editStatus) {
  679. if (status == '0' || status == '1') {
  680. if (editStatus == '2') {
  681. var params = {}
  682. params.id = this.id
  683. params.auditorId = this.userInfo().id
  684. params.refuseReason = this.refuseReason
  685. var data = this.refuseFile.map(item => {
  686. return 'https:' + item
  687. })
  688. params.refuseFile = JSON.stringify(data)
  689. params.status = editStatus
  690. fileEdit(params).then(res => {
  691. this.refuseFile = []
  692. this.refuseReason = ''
  693. this.loadData()
  694. this.visibleDetail = false
  695. })
  696. } else {
  697. fileEdit({
  698. id: this.id,
  699. status: editStatus,
  700. auditorId: this.userInfo().id
  701. }).then(res => {
  702. this.refuseFile = []
  703. this.refuseReason = ''
  704. this.loadData()
  705. this.visibleDetail = false
  706. })
  707. }
  708. } else {
  709. this.add = false
  710. this.visible = true
  711. this.getProjectId(item.projectId)
  712. getAction('/ctop/materialInfo/getDetail', {
  713. materialId: item.id
  714. }).then(res => {
  715. if (this.activeKey == 'image') {
  716. this.form.setFieldsValue({
  717. projectId: item.projectId,
  718. clipId: res.ascription.clipId,
  719. planeId: res.ascription.planeId,
  720. materialDescribe: item.materialDescribe
  721. })
  722. } else {
  723. this.form.setFieldsValue({
  724. projectId: item.projectId,
  725. clipId: res.ascription.clipId,
  726. planId: res.ascription.planId,
  727. shotId: res.ascription.shotId,
  728. materialDescribe: item.materialDescribe
  729. })
  730. }
  731. this.tags = res.tag
  732. this.urlList.url = item.url
  733. this.urlList.md5 = item.code
  734. this.urlList.name = item.materialName
  735. this.watermarkUrl.url = item.watermarkUrl
  736. this.watermarkUrl.md5 = item.watermarkCode
  737. this.watermarkUrl.name = item.watermarkMaterialName
  738. this.id = item.id
  739. })
  740. }
  741. },
  742. handleOk() {
  743. this.form.validateFieldsAndScroll((err, values) => {
  744. if (err) {
  745. // 这里做逻辑处理
  746. } else {
  747. var params = {}
  748. var roleCode = {}
  749. for (const key in this.role) {
  750. if (key == 'roleCode') {
  751. this.role[key] = this.role[key] + 'Id'
  752. roleCode[this.role[key]] = this.userInfo().id
  753. }
  754. }
  755. params.id = this.add ? null : this.id
  756. // params.code = this.urlList.md5
  757. params.url = this.add ? null : this.urlList.url[0]
  758. // params.materialName = this.urlList.name
  759. params.imageArr = this.add ? this.urlList.url : null
  760. // params.watermarkCode = this.watermarkUrl.md5
  761. // params.watermarkUrl = this.watermarkUrl.url
  762. // params.watermarkMaterialName = this.watermarkUrl.name
  763. params.userId = this.userInfo().id
  764. params.projectId = values.projectId
  765. params.materialDescribe = values.materialDescribe
  766. params.type = 'IMAGE'
  767. params.ascription =
  768. this.activeKey == 'image' ?
  769. roleCode : {
  770. planId: values.planId,
  771. shotId: values.shotId,
  772. clipId: values.clipId
  773. }
  774. params.tag = this.tags
  775. if (this.add) {
  776. fileInsert(params).then(res => {
  777. this.form.resetFields()
  778. this.urlList = {
  779. url: '',
  780. md5: '',
  781. name: ''
  782. }
  783. this.watermarkUrl = {
  784. url: '',
  785. md5: '',
  786. name: ''
  787. }
  788. this.tags = []
  789. this.loadData()
  790. this.visible = false
  791. this.add = true
  792. for (const key in this.role) {
  793. if (key == 'roleCode') {
  794. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  795. }
  796. }
  797. this.$message.success('素材上传成功')
  798. })
  799. } else {
  800. fileEdit({
  801. ...params,
  802. status: '0'
  803. }).then(res => {
  804. this.form.resetFields()
  805. this.urlList = {
  806. url: [],
  807. md5: '',
  808. name: ''
  809. }
  810. this.watermarkUrl = {
  811. url: '',
  812. md5: '',
  813. name: ''
  814. }
  815. this.tags = []
  816. this.loadData()
  817. this.visible = false
  818. this.add = true
  819. for (const key in this.role) {
  820. if (key == 'roleCode') {
  821. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  822. }
  823. }
  824. this.$message.success('素材修改成功')
  825. })
  826. }
  827. }
  828. })
  829. },
  830. close() {
  831. // this.form.resetFields()
  832. // this.urlList = { url: '', md5: '', name: '' }
  833. // this.watermarkUrl = { url: '', md5: '', name: '' }
  834. // this.tags = []
  835. },
  836. onChange(date, dateString) {},
  837. callbackTwo(key) {
  838. this.checkAll = false
  839. this.checkArr = []
  840. this.queryParam.type = key
  841. this.loadData()
  842. },
  843. overUpload(urlAll) {
  844. console.log(urlAll, this.urlList)
  845. // var index = this.urlList.url.findIndex(item => item === urlAll[0])
  846. // var data = { url: urlAll[0], code: this.urlList.md5[index], name: this.urlList.name[index] }
  847. // this.imageArr.push(data)
  848. // console.log(this.imageArr)
  849. var that = this
  850. var img = null
  851. img = new Image()
  852. that.material = []
  853. for (let i = 0; i < this.urlList.url.length; i++) {
  854. img.src = this.urlList.url[i]
  855. if (img.complete) {
  856. // 打印
  857. if (img.width == 720) {
  858. if (img.height == 1280) {
  859. that.material.push(true)
  860. } else {
  861. that.material.push(false)
  862. }
  863. } else if (img.width == 1080) {
  864. if (img.height == 1920) {
  865. that.material.push(true)
  866. } else {
  867. that.material.push(false)
  868. }
  869. } else if (img.width == 1280) {
  870. if (img.height == 720) {
  871. that.material.push(true)
  872. } else {
  873. that.material.push(false)
  874. }
  875. } else if (img.width == 1920) {
  876. if (img.height == 1080) {
  877. that.material.push(true)
  878. } else {
  879. that.material.push(false)
  880. }
  881. } else {
  882. that.material.push(false)
  883. }
  884. console.log(this.material)
  885. } else {
  886. // 加载完成执行
  887. img.onload = function () {
  888. // 打印
  889. // alert('from:onload : width:' + img.width + ',height:' + img.height)
  890. if (img.width == 720) {
  891. if (img.height == 1280) {
  892. that.material.push(true)
  893. } else {
  894. that.material.push(false)
  895. }
  896. } else if (img.width == 1080) {
  897. if (img.height == 1920) {
  898. that.material.push(true)
  899. } else {
  900. that.material.push(false)
  901. }
  902. } else if (img.width == 1280) {
  903. if (img.height == 720) {
  904. that.material.push(true)
  905. } else {
  906. that.material.push(false)
  907. }
  908. } else if (img.width == 1920) {
  909. if (img.height == 1080) {
  910. that.material.push(true)
  911. } else {
  912. that.material.push(false)
  913. }
  914. } else {
  915. that.material.push(false)
  916. }
  917. }
  918. }
  919. }
  920. },
  921. file(file) {
  922. console.log(file)
  923. var bmf = new BMF()
  924. var that = this
  925. return new Promise(function (resolve, reject) {
  926. for (let i = 0; i < file.length; i++) {
  927. bmf.md5(file[i], (err, md5) => {
  928. // that.urlList.name.push(file[0].name)
  929. // that.urlList.md5.push(md5)
  930. fileCheck({
  931. code: md5,
  932. projectId: that.getData('projectId')
  933. }).then(res => {
  934. if (res.code == 0) {
  935. that.$message.error('此素材已经上传')
  936. reject()
  937. } else {
  938. resolve()
  939. // reject()
  940. }
  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>