videoMaterial.vue 74 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239
  1. <style lang="scss">
  2. .downLoad .ant-form-item-control-wrapper {
  3. width: 70%;
  4. }
  5. #material-card .ant-tabs-tab {
  6. border: 1px solid gainsboro !important;
  7. }
  8. #material-card .ant-tabs-top-bar {
  9. position: relative;
  10. z-index: 100;
  11. }
  12. #material-card .ant-badge-count {
  13. top: 0px;
  14. }
  15. .detail .ant-form-item {
  16. margin-bottom: 10px !important;
  17. }
  18. .ant-carousel >>> .slick-slide {
  19. text-align: center;
  20. // height: 160px;
  21. // line-height: 160px;
  22. background: #364d79;
  23. overflow: hidden;
  24. }
  25. .ad_cover_container .ant-card-body {
  26. padding: 0;
  27. }
  28. .ant-carousel >>> .slick-slide h3 {
  29. color: #fff;
  30. }
  31. .ant-carousel >>> .custom-slick-arrow {
  32. width: 25px;
  33. height: 25px;
  34. font-size: 25px;
  35. color: #fff;
  36. background-color: rgba(31, 45, 61, 0.11);
  37. opacity: 0.3;
  38. }
  39. .ant-carousel >>> .custom-slick-arrow:before {
  40. display: none;
  41. }
  42. .ant-carousel >>> .custom-slick-arrow:hover {
  43. opacity: 0.5;
  44. }
  45. .cover_carousel_con .slick-dots {
  46. bottom: 55px;
  47. }
  48. .add-image-material .draggable-list {
  49. display: block !important;
  50. }
  51. </style>
  52. <style lang="scss" scoped>
  53. .content {
  54. display: flex !important;
  55. flex-direction: column;
  56. justify-content: center;
  57. align-items: center;
  58. .slick-dots {
  59. bottom: 55px;
  60. }
  61. }
  62. .video-content {
  63. width: 50%;
  64. padding: 10px;
  65. box-sizing: border-box;
  66. display: flex;
  67. flex-direction: column;
  68. justify-content: center;
  69. border-right: 1px solid #f2f2f2;
  70. }
  71. .tag-video {
  72. position: absolute;
  73. right: 0px;
  74. top: 8px;
  75. padding: 4px;
  76. border-radius: 2px;
  77. line-height: 16px;
  78. font-size: 12px;
  79. color: #fff;
  80. background-color: rgba(0, 0, 0, 0.3);
  81. }
  82. .home-item {
  83. overflow: hidden;
  84. }
  85. @media (min-width: 1024px) {
  86. .home-item {
  87. border-style: solid;
  88. border-width: 1px;
  89. border-color: #e4e4e4;
  90. width: calc(50% - 10px);
  91. padding: 10px;
  92. margin-right: 10px;
  93. margin-bottom: 10px;
  94. display: flex;
  95. align-items: center;
  96. background: #fff;
  97. position: relative;
  98. z-index: 99;
  99. }
  100. }
  101. /*>=1024的设备*/
  102. // @media (min-width: 1100px) {
  103. // .checkbox_item_container {
  104. // width:70%
  105. // }
  106. // } /*>=1100的设备*/
  107. @media (min-width: 1600px) {
  108. .home-item {
  109. border-style: solid;
  110. border-width: 1px;
  111. border-color: #e4e4e4;
  112. width: calc(25% - 10px);
  113. padding: 10px;
  114. margin-right: 10px;
  115. margin-bottom: 10px;
  116. display: flex;
  117. align-items: center;
  118. background: #fff;
  119. position: relative;
  120. z-index: 99;
  121. }
  122. }
  123. /*>=1280的设备*/
  124. // @media (min-width: 1366px) {
  125. // }
  126. // @media (min-width: 1440px) {
  127. // }
  128. // @media (min-width: 1680px) {
  129. // }
  130. @media (min-width: 1920px) {
  131. .home-item {
  132. border-style: solid;
  133. border-width: 1px;
  134. border-color: #e4e4e4;
  135. width: calc(25% - 10px);
  136. padding: 10px;
  137. margin-right: 10px;
  138. margin-bottom: 10px;
  139. display: flex;
  140. align-items: center;
  141. background: #fff;
  142. position: relative;
  143. z-index: 99;
  144. cursor: pointer;
  145. }
  146. }
  147. .actor-photo-list {
  148. display: flex;
  149. padding-left: 0;
  150. li {
  151. width: 25%;
  152. margin: 10px;
  153. position: relative;
  154. height: 250px;
  155. border: 1px solid #f2f2f2;
  156. img,
  157. video {
  158. width: 100%;
  159. margin-top: auto;
  160. margin-bottom: auto;
  161. top: 0;
  162. bottom: 0;
  163. position: absolute;
  164. max-height: 250px;
  165. }
  166. }
  167. }
  168. .home-card {
  169. width: 100%;
  170. overflow: hidden;
  171. padding: 10px 0px;
  172. display: flex;
  173. flex-wrap: wrap;
  174. margin-right: -10px;
  175. .home-right {
  176. width: 100%;
  177. }
  178. .bg:after {
  179. content: '';
  180. width: 110%;
  181. height: 110%;
  182. position: absolute;
  183. left: -5%;
  184. top: -5%;
  185. background: inherit;
  186. filter: blur(10px);
  187. z-index: 2;
  188. }
  189. }
  190. .bh {
  191. height: 60px;
  192. line-height: 30px;
  193. overflow: hidden;
  194. text-overflow: ellipsis;
  195. -webkit-line-clamp: 2;
  196. display: -webkit-box;
  197. -webkit-box-orient: vertical;
  198. }
  199. .bhShow {
  200. height: 100px;
  201. line-height: 25px;
  202. text-align: center;
  203. }
  204. .bhShow span {
  205. font-size: 14px;
  206. }
  207. .show-data {
  208. width: 50%;
  209. display: flex;
  210. flex-direction: column;
  211. align-items: flex-start;
  212. }
  213. a {
  214. font-size: 14px;
  215. }
  216. .actor-photo-list {
  217. display: flex;
  218. padding-left: 0;
  219. li {
  220. width: 25%;
  221. margin: 10px;
  222. position: relative;
  223. height: 250px;
  224. border: 1px solid #f2f2f2;
  225. list-style: none;
  226. img,
  227. video {
  228. width: 100%;
  229. margin-top: auto;
  230. margin-bottom: auto;
  231. top: 0;
  232. bottom: 0;
  233. position: absolute;
  234. max-height: 250px;
  235. }
  236. }
  237. }
  238. </style>
  239. <template>
  240. <a-card :bordered="false">
  241. <!-- 查询区域 -->
  242. <div class="table-page-search-wrapper">
  243. <a-form layout="inline">
  244. <a-row :gutter="24">
  245. <a-col :md="8" :sm="8">
  246. <!-- <a-form-item label="项目名称"> -->
  247. <selectTable :projectId.sync="queryParam.projectId"></selectTable>
  248. </a-col>
  249. <a-col :md="8" :sm="8">
  250. <a-form-item label="时间选择">
  251. <a-date-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width:100%" />
  252. <!-- <a-input placeholder="请输入查询时间" v-model="queryParam.createTime"></a-input> -->
  253. </a-form-item>
  254. </a-col>
  255. <a-col :md="8" :sm="8">
  256. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  257. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  258. <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
  259. </span>
  260. </a-col>
  261. </a-row>
  262. </a-form>
  263. </div>
  264. <!-- table区域-begin -->
  265. <!-- <div> -->
  266. <!-- 操作按钮区域 -->
  267. <div class="table-operator" style="position:relative;z-index:100">
  268. <a-button
  269. @click="
  270. visible = true
  271. confirmLoading = false
  272. add = true
  273. "
  274. type="primary"
  275. icon="plus"
  276. >新增</a-button
  277. >
  278. <a-button
  279. @click="onCheckAllChange"
  280. v-if="
  281. queryParam.projectId &&
  282. active == '1' &&
  283. (role.roleCode == 'operator' ||
  284. role.roleCode == 'kuaishouOperationManager' ||
  285. role.roleCode == 'admin' ||
  286. role.roleCode == 'operationAssistant' ||
  287. role.roleCode == 'touTiaoOperationManager')
  288. "
  289. >{{ checkAll ? '取消 ( ' + checkArr.length + ' )' : '全选' }}</a-button
  290. >
  291. <a-button
  292. v-if="
  293. queryParam.projectId &&
  294. active == '1' &&
  295. (role.roleCode == 'operator' ||
  296. role.roleCode == 'kuaishouOperationManager' ||
  297. role.roleCode == 'admin' ||
  298. role.roleCode == 'operationAssistant' ||
  299. role.roleCode == 'touTiaoOperationManager')
  300. "
  301. :disabled="checkArr.length == 0"
  302. @click="tongbu"
  303. >一键同步</a-button
  304. >
  305. </div>
  306. <a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
  307. <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
  308. <div v-if="dataSource.length > 0">
  309. <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
  310. <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
  311. <span v-if="items.excellent == 0"></span>
  312. <span
  313. v-else
  314. 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"
  315. >优秀素材</span
  316. >
  317. <div class="home-right">
  318. <a-badge
  319. :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
  320. :numberStyle="{ backgroundColor: '#52c41a' }"
  321. style="width:100%;display:flex"
  322. @click.stop
  323. >
  324. <span
  325. style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
  326. >
  327. {{ items.materialName }}
  328. </span>
  329. <a-icon
  330. type="close-circle"
  331. @click="deleteData(items.id)"
  332. v-show="active == '0'"
  333. v-if="items.userId == userInfo().id"
  334. />
  335. </a-badge>
  336. <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative;">
  337. <!-- <video
  338. :src="items.url"
  339. @canplay="a(items)"
  340. style="height:200px;max-width:100%;position:absolute;z-index:10;"
  341. /> -->
  342. <div style="width: 100px;position: absolute;left: 0;z-index:1000">
  343. <a-tooltip placement="top">
  344. <template slot="title">
  345. <span>{{ items.kuaishouEffiType == 1 ? '快手有效视频' : '已经同步到快手平台' }}</span>
  346. </template>
  347. <img
  348. style="width:30px;height:30px;"
  349. v-if="items.kuaishouVideoIsUp == 1"
  350. :style="{ filter: items.kuaishouEffiType == 1 ? 'grayscale(0%)' : 'grayscale(100%)' }"
  351. src="./kuaishou.jpg"
  352. />
  353. </a-tooltip>
  354. <a-tooltip placement="top">
  355. <template slot="title">
  356. <span>{{ items.toutiaoEffiType == 1 ? '抖音有效视频' : '已经同步到抖音平台' }}</span>
  357. </template>
  358. <img
  359. v-if="items.toutiaoVideoIsUp == 1 && items.toutiaoEffiType == 1"
  360. style="width:30px;height:30px;margin-left:5px;"
  361. src="./douyin.jpg"
  362. alt=""
  363. />
  364. <img
  365. v-else-if="items.toutiaoVideoIsUp == 1 && items.toutiaoEffiType == 0"
  366. style="width:30px;height:30px;margin-left:5px;"
  367. src="./douyinhui.jpg"
  368. alt=""
  369. />
  370. </a-tooltip>
  371. </div>
  372. <a-icon
  373. type="fire"
  374. style="font-size:20px;position: absolute;right: 0;bottom:10px;z-index:1000;color:red"
  375. v-if="items.whetherUnaudited"
  376. />
  377. <img
  378. :src="items.url + '?x-oss-process=video/snapshot,t_00000,m_fast'"
  379. alt=""
  380. style="height:200px;max-width:100%;position:absolute;z-index:10;"
  381. />
  382. <!-- <img
  383. src="./timg.gif"
  384. v-if="!items.showVideo"
  385. alt=""
  386. style="height:200px;max-width:100%;position:absolute;z-index:11;"
  387. @click.stop
  388. /> -->
  389. </div>
  390. <div style="width:100%;height:1px;border-bottom:1px solid #f2f2f2;margin-top:5px"></div>
  391. <div v-if="active == '2'" class="bh">驳回原因:{{ items.refuseReason }}</div>
  392. <div
  393. v-if="active == '1'"
  394. class="bhShow"
  395. style="display:flex;justify-content:space-between;"
  396. @click.stop="showData(items)"
  397. >
  398. <div v-if="items.byteDance" class="show-data">
  399. <span>抖音</span>
  400. <span>消耗:{{ items.byteDance.cost }}</span>
  401. <span>封面点击:{{ items.byteDance.click }}</span>
  402. <span>封面展示:{{ items.byteDance.showNum }}</span>
  403. </div>
  404. <div v-else style="line-height:100px;" class="show-data">
  405. <span>抖音:无</span>
  406. </div>
  407. <div v-if="items.kuaiShou" class="show-data">
  408. <span>快手</span>
  409. <span>消耗:{{ items.kuaiShou.charge }}</span>
  410. <span>封面点击:{{ items.kuaiShou.photoClick }}</span>
  411. <span>封面展示:{{ items.kuaiShou.photoShow }}</span>
  412. </div>
  413. <div v-else style="line-height:100px;" class="show-data">
  414. <span>快手:无</span>
  415. </div>
  416. </div>
  417. <div
  418. style="width:100%;height:1px;border-bottom:1px solid #f2f2f2;margin-top:5px"
  419. v-if="active != '0'"
  420. ></div>
  421. <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
  422. {{ items.createTime | getDate }}
  423. <a
  424. href="javascript:;"
  425. style="margin-left:20px"
  426. @click="edit(items, '2')"
  427. v-show="active == '2'"
  428. v-if="items.userId == userInfo().id"
  429. >
  430. 修改</a
  431. >
  432. <a
  433. href="javascript:;"
  434. style="margin-left:20px"
  435. @click="personEdit(items, '2')"
  436. v-if="items.userId == userInfo().id"
  437. >
  438. 人员修改</a
  439. >
  440. <a-popconfirm
  441. @confirm="okEditShow(items, '2')"
  442. v-show="active != '2'"
  443. v-if="
  444. role.roleCode == 'operator' ||
  445. role.roleCode == 'kuaishouOperationManager' ||
  446. role.roleCode == 'admin' ||
  447. role.roleCode == 'operationAssistant' ||
  448. role.roleCode == 'touTiaoOperationManager'
  449. "
  450. >
  451. <div slot="title">
  452. <div>
  453. 驳回原因:
  454. <a-textarea
  455. placeholder="请输入原因"
  456. v-model="refuseReason"
  457. :autosize="{ minRows: 3, maxRows: 10 }"
  458. />
  459. </div>
  460. <div>
  461. 截图:
  462. <upload-to-ali
  463. v-model="refuseFile"
  464. :customDomain="customDomain"
  465. multiple
  466. preview
  467. :region="region"
  468. :bucket="bucket"
  469. :accept="acceptImage"
  470. :max="10"
  471. :size="1024000"
  472. :accessKeyId="accessKeyId"
  473. :accessKeySecret="accessKeySecret"
  474. :dir="dirImg"
  475. ></upload-to-ali>
  476. </div>
  477. </div>
  478. <a href="javascript:;" style="margin-left:20px">驳回</a>
  479. </a-popconfirm>
  480. <a-popconfirm
  481. @confirm="okEditShow(items, '1')"
  482. v-show="active != '1'"
  483. v-if="
  484. role.roleCode == 'operator' ||
  485. role.roleCode == 'kuaishouOperationManager' ||
  486. role.roleCode == 'admin' ||
  487. role.roleCode == 'operationAssistant' ||
  488. role.roleCode == 'touTiaoOperationManager'
  489. "
  490. >
  491. <div slot="title">
  492. <div>
  493. 广告语:
  494. <a-textarea
  495. placeholder="请输入"
  496. v-model="refuseReason"
  497. :autosize="{ minRows: 3, maxRows: 10 }"
  498. />
  499. </div>
  500. </div>
  501. <a
  502. href="javascript:;"
  503. style="margin-left:20px"
  504. v-show="active != '1'"
  505. v-if="
  506. role.roleCode == 'operator' ||
  507. role.roleCode == 'kuaishouOperationManager' ||
  508. role.roleCode == 'admin' ||
  509. role.roleCode == 'operationAssistant' ||
  510. role.roleCode == 'touTiaoOperationManager'
  511. "
  512. >
  513. 通过审核</a
  514. >
  515. </a-popconfirm>
  516. <a
  517. v-if="role.roleCode == 'plane' || role.roleCode == 'admin'"
  518. style="margin-left:20px"
  519. @click="addImage(items)"
  520. >添加封面</a
  521. >
  522. <a-checkbox :value="items.id" style="float:right" v-show="active == '1'"></a-checkbox>
  523. </span>
  524. </div>
  525. </div>
  526. </a-checkbox-group>
  527. <a-pagination
  528. size="small"
  529. :showTotal="ipagination.showTotal"
  530. style="float:right"
  531. v-if="dataSource.length > 0"
  532. showQuickJumper
  533. :pageSize.sync="ipagination.pageSize"
  534. :total="ipagination.total"
  535. v-model="ipagination.current"
  536. @change="getDataSource"
  537. />
  538. </div>
  539. <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
  540. <img
  541. 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"
  542. alt="" />
  543. </div>
  544. </a-tab-pane>
  545. </a-tabs>
  546. <a-modal title="封面上传" @cancel="closeImage" @afterClose="closeImage" v-model="addImageVisible">
  547. <template slot="footer">
  548. <a-button key="back" @click="closeImage">取消</a-button>
  549. <a-button key="submit" type="primary" @click="handleOkImage">
  550. 确定
  551. </a-button>
  552. </template>
  553. <a-form-item label="" class="add-image-material">
  554. <upload-to-ali
  555. style="width:100%"
  556. v-model="urlListImage.url"
  557. :customDomain="customDomain"
  558. :multiple="true"
  559. preview
  560. :region="region"
  561. :bucket="bucket"
  562. :accept="acceptImage"
  563. :max="10"
  564. :size="1024000"
  565. :accessKeyId="accessKeyId"
  566. :accessKeySecret="accessKeySecret"
  567. :before-upload="fileWater"
  568. :dir="dirImg"
  569. @loaded="overUploadImage"
  570. ></upload-to-ali>
  571. <span v-if="material.filter(item => item == false).length > 0 && urlListImage.url.length > 0" style="color:red"
  572. >上传素材的尺寸不符,请修改(<span v-for="(item, index) of material" :key="index" v-show="!item"
  573. >第{{ index + 1 }}张</span
  574. >出错)</span
  575. >
  576. <span
  577. v-else-if="urlListImage.url.length > 0 && material.filter(item => item == false).length == 0"
  578. style="color:green"
  579. >上传成功</span
  580. >
  581. </a-form-item>
  582. </a-modal>
  583. <a-modal title="数据详情" v-model="showDataBool" :footer="null">
  584. <div class="bhShow" style="display:flex;justify-content:space-between;height:400px">
  585. <div v-if="douyinData" class="show-data">
  586. <span style="color:black;font-size:18px;text-align:center;width:100%">抖音</span>
  587. <span>消耗:{{ douyinData.cost }}</span>
  588. <span>封面点击:{{ douyinData.click }}</span>
  589. <span>封面展示:{{ douyinData.showNum }}</span>
  590. <span>激活:{{ douyinData.active }}</span>
  591. <span>转化量:{{ douyinData.convertNum }}</span>
  592. <span>表单提交:{{ douyinData.form }}</span>
  593. <span>下载注册:{{ douyinData.register }}</span>
  594. <span>视频总播放:{{ douyinData.totalPlay }}</span>
  595. <span>视频有效播放:{{ douyinData.validPlay }}</span>
  596. </div>
  597. <div v-if="kuaishouData" class="show-data">
  598. <span style="color:black;font-size:18px;text-align:center;width:100%">快手</span>
  599. <span>消耗:{{ kuaishouData.charge }}</span>
  600. <span>封面点击:{{ kuaishouData.photoClick }}</span>
  601. <span>封面展示:{{ kuaishouData.photoShow }}</span>
  602. <span>素材曝光数:{{ kuaishouData.aclick }}</span>
  603. <span>激活数:{{ kuaishouData.activation }}</span>
  604. <span>行为数:{{ kuaishouData.bclick }}</span>
  605. <span>表单提交数:{{ kuaishouData.formCount }}</span>
  606. </div>
  607. </div>
  608. </a-modal>
  609. <a-modal :title="add?'添加素材':'修改素材'" v-model="visible" @cancel="close" @afterClose="close" :maskClosable="false" :width="800">
  610. <template slot="footer">
  611. <a-button key="back" @click="close">取消</a-button>
  612. <a-button key="submit" type="primary" :disabled="!confirmLoading" @click="handleOk">
  613. 确定
  614. </a-button>
  615. </template>
  616. <a-form :form="form">
  617. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="项目选择">
  618. <!-- <selectTable :projectId.sync="projectId" /> -->
  619. <a-select
  620. v-decorator="[
  621. 'projectId', // 给表单赋值或拉取表单时,该input对应的key
  622. { rules: [{ required: true, message: '请选择项目!' }] }
  623. ]"
  624. @change="getProjectId"
  625. showSearch
  626. optionFilterProp="children"
  627. :filterOption="filterOption"
  628. :disabled="!add"
  629. >
  630. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  631. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  632. item.mediaId == '1' ? '头条' : '快手'
  633. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  634. </a-select-option>
  635. </a-select>
  636. </a-form-item>
  637. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传" v-if="getData('projectId')">
  638. <upload-to-ali
  639. v-model="urlList.url"
  640. :customDomain="customDomain"
  641. preview
  642. :region="region"
  643. :bucket="bucket"
  644. :accept="acceptVideo"
  645. :max="10"
  646. :size="1024000"
  647. :accessKeyId="accessKeyId"
  648. :accessKeySecret="accessKeySecret"
  649. :before-upload="file"
  650. :dir="dirVideo"
  651. @loaded="overUpload"
  652. >
  653. </upload-to-ali>
  654. <span v-if="repeat" style="color:red">
  655. 此素材重复,请重新选择上传
  656. </span>
  657. <span v-if="confirmLoading && urlList.url != ''" style="color:green">
  658. 上传成功
  659. </span>
  660. </a-form-item>
  661. <a-form-item
  662. :label-col="labelCol"
  663. :wrapper-col="wrapperCol"
  664. label="封面上传"
  665. class="add-image-material"
  666. v-if="getData('projectId')&&add"
  667. >
  668. <upload-to-ali
  669. style="width:160%"
  670. v-model="urlListImage.url"
  671. :customDomain="customDomain"
  672. :multiple="true"
  673. preview
  674. :region="region"
  675. :bucket="bucket"
  676. :accept="acceptImage"
  677. :max="10"
  678. :size="1024000"
  679. :accessKeyId="accessKeyId"
  680. :accessKeySecret="accessKeySecret"
  681. :before-upload="fileWater"
  682. :dir="dirImg"
  683. @loaded="overUploadImage"
  684. ></upload-to-ali>
  685. <span
  686. v-if="material.filter(item => item == false).length > 0 && urlListImage.url.length > 0"
  687. style="color:red"
  688. >上传素材的尺寸不符,请修改(<span v-for="(item, index) of material" :key="index" v-show="!item"
  689. >第{{ index + 1 }}张</span
  690. >出错)</span
  691. >
  692. <span
  693. v-else-if="urlListImage.url.length > 0 && material.filter(item => item == false).length == 0"
  694. style="color:green"
  695. >上传成功</span
  696. >
  697. </a-form-item>
  698. <div v-if="add">
  699. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="策划" v-if="activeKey == 'video'">
  700. <a-select
  701. v-decorator="[
  702. 'planId', // 给表单赋值或拉取表单时,该input对应的key
  703. { rules: [{ required: true, message: '请选择策划!' }] }
  704. ]"
  705. showSearch
  706. optionFilterProp="children"
  707. :filterOption="filterOption"
  708. >
  709. <a-select-option :value="item.userId" v-for="item of ascription.planId" :key="item.userId">
  710. {{ item.userName }}
  711. </a-select-option>
  712. </a-select>
  713. </a-form-item>
  714. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="拍摄" v-if="activeKey == 'video'">
  715. <a-select
  716. v-decorator="[
  717. 'shotId' // 给表单赋值或拉取表单时,该input对应的key
  718. ]"
  719. showSearch
  720. optionFilterProp="children"
  721. :filterOption="filterOption"
  722. >
  723. <a-select-option :value="item.userId" v-for="item of ascription.shotId" :key="item.userId">
  724. {{ item.userName }}
  725. </a-select-option>
  726. </a-select>
  727. </a-form-item>
  728. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑">
  729. <a-select
  730. v-decorator="[
  731. 'clipId', // 给表单赋值或拉取表单时,该input对应的key
  732. { rules: [{ required: true, message: '请选择剪辑!' }] }
  733. ]"
  734. showSearch
  735. optionFilterProp="children"
  736. :filterOption="filterOption"
  737. >
  738. <a-select-option :value="item.userId" v-for="item of ascription.clipId" :key="item.userId">
  739. {{ item.userName }}
  740. </a-select-option>
  741. </a-select>
  742. </a-form-item>
  743. </div>
  744. <a-form-item
  745. :label-col="labelCol"
  746. :wrapper-col="{
  747. xs: { span: 24 },
  748. sm: { span: 18 }
  749. }"
  750. label="标签"
  751. v-if="add"
  752. >
  753. <template v-for="(tag, index) in tags">
  754. <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
  755. <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
  756. {{ `${tag.slice(0, 20)}...` }}
  757. </a-tag>
  758. </a-tooltip>
  759. <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
  760. {{ tag }}
  761. </a-tag>
  762. </template>
  763. <a-input
  764. v-if="inputVisible"
  765. ref="input"
  766. type="text"
  767. size="small"
  768. :style="{ width: '78px' }"
  769. :value="inputValue"
  770. @change="handleInputChange"
  771. @blur="handleInputConfirm"
  772. @keyup.enter="handleInputConfirm"
  773. />
  774. <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
  775. <a-icon type="plus" /> New Tag
  776. </a-tag>
  777. </a-form-item>
  778. <a-form-item
  779. :label-col="labelCol"
  780. :wrapper-col="{
  781. xs: { span: 24 },
  782. sm: { span: 12 }
  783. }"
  784. label="描述"
  785. v-if="add"
  786. >
  787. <a-textarea
  788. placeholder="请输入描述"
  789. v-decorator="[
  790. 'materialDescribe' // 给表单赋值或拉取表单时,该input对应的key
  791. ]"
  792. :autosize="{ minRows: 3, maxRows: 10 }"
  793. />
  794. </a-form-item>
  795. </a-form>
  796. </a-modal>
  797. <a-modal title="素材详情" v-model="visibleDetail" width="70%" :footer="null">
  798. <div style="width:100%;height:35px">
  799. <a-button type="primary" @click="setSuccess" style="float:right">
  800. {{ excellent == 0 ? '标记为优秀素材' : '取消标记' }}
  801. </a-button>
  802. </div>
  803. <div style="display:flex;height:700px">
  804. <div
  805. class="video-content"
  806. style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2"
  807. >
  808. <video class="video" :src="showUrl" controls="controls" style="height:50%" controlsList="nodownload">
  809. 您的浏览器不支持 video 标签。
  810. </video>
  811. <div class="downLoad" style="height:50%;overflow:auto">
  812. <a-button @click="onCheckAllImageChange" v-if="model.length > 0">{{
  813. checkAllImage ? '取消 ( ' + checkArrImage.length + ' )' : '全选'
  814. }}</a-button>
  815. <ul class="actor-photo-list" :style="{ width: model.length>4?25 * model.length + '%':'100%' }" v-if="model.length > 0">
  816. <a-checkbox-group
  817. v-model="checkArrImage"
  818. style="width:100%; display: flex;padding-left: 0;"
  819. @change="onChangeCheckImage"
  820. >
  821. <li v-for="(item, index) of model" :key="index">
  822. <a-checkbox :value="item.id" style="position:absolute;z-index: 100"></a-checkbox
  823. ><img class="video" :src="item.url" @click="coverPreviewShowModal(item, index)" />
  824. <span
  825. class="tag-video"
  826. :style="{
  827. backgroundColor:
  828. item.status == 0 ? 'rgba(0, 0, 0)' : item.status == 1 ? 'rgba(0, 180, 100)' : 'red'
  829. }"
  830. >{{ item.status == 0 ? '未审核' : item.status == 1 ? '已批准' : '已驳回' }}</span
  831. >
  832. </li>
  833. </a-checkbox-group>
  834. </ul>
  835. <div v-else style="height:100%;display:flex;justify-content: center;align-items: center;">
  836. <a-empty />
  837. </div>
  838. </div>
  839. </div>
  840. <a-modal title="图片预览" v-model="coverPreviewVisible" :footer="null">
  841. <a-carousel arrows class="cover_carousel_con">
  842. <div v-for="(item, index) in modelNew" :key="index" class="content">
  843. <img :src="item.url" :width="300" />
  844. <div style="margin-top:10px">
  845. <a-button type="primary" @click="editImage(item, '1')">
  846. 通过审核
  847. </a-button>
  848. <a-divider type="vertical" />
  849. <a-popconfirm @confirm="editImage(item, '2')">
  850. <div slot="title">
  851. <div>
  852. 驳回原因:
  853. <a-textarea
  854. placeholder="请输入原因"
  855. v-model="refuseReasonImage"
  856. :autosize="{ minRows: 3, maxRows: 10 }"
  857. />
  858. </div>
  859. </div>
  860. <a-button type="primary">驳回</a-button>
  861. <!-- @click="edit(null, '0', '2')" -->
  862. </a-popconfirm>
  863. </div>
  864. </div>
  865. <a-icon
  866. type="left-circle"
  867. slot="prevArrow"
  868. slot-scope
  869. style="left: 10px;zIndex: 9;font-size:30px;color:black"
  870. />
  871. <a-icon
  872. type="right-circle"
  873. slot="nextArrow"
  874. slot-scope
  875. style="right: 10px;zIndex: 9;font-size:30px;color:black"
  876. />
  877. </a-carousel>
  878. </a-modal>
  879. <div style="flex:3;padding:10px;box-sizing:border-box;">
  880. <a-form v-if="detail" class="detail ant-advanced-search-form" layout="inline">
  881. <div v-if="detail.parameter" style="display:flex;">
  882. <a-form-item label="视频时长" v-if="detail.parameter.second" style="flex:1">
  883. {{ detail.parameter.second }}秒
  884. </a-form-item>
  885. <a-form-item label="尺寸" style="flex:1" v-if="detail.parameter.width">
  886. {{ detail.parameter.width }}*{{ detail.parameter.height }}
  887. </a-form-item>
  888. <a-form-item label="大小" style="flex:1" v-if="detail.parameter.size">
  889. {{ detail.parameter.size }}
  890. </a-form-item>
  891. </div>
  892. <div v-if="detail.ascription" style="display:flex;">
  893. <a-form-item label="策划" style="flex:1">
  894. {{ detail.ascription.planName }}
  895. </a-form-item>
  896. <a-form-item label="拍摄" style="flex:1">
  897. {{ detail.ascription.shotName }}
  898. </a-form-item>
  899. <a-form-item label="剪辑" v-if="detail.ascription.clipName" style="flex:1">
  900. {{ detail.ascription.clipName }}
  901. </a-form-item>
  902. </div>
  903. <div>
  904. <a-form-item label="标签" v-if="detail.tag">
  905. <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
  906. </a-form-item>
  907. </div>
  908. <div>
  909. <a-form-item label="无水印素材下载" v-if="name">
  910. <a-button type="primary" @click="downloadByBlobShowUrl">下载</a-button>
  911. </a-form-item>
  912. </div>
  913. <div>
  914. <a-form-item label="水印素材下载" v-if="name">
  915. <a-button type="primary" @click="downloadByBlob" v-if="showUrlWater">下载</a-button>
  916. <span v-else>水印素材生成中,请一分钟后刷新</span>
  917. </a-form-item>
  918. </div>
  919. <div>
  920. <a-form-item label="水印素材链接" v-if="showUrlWater">
  921. <a-input v-model="showUrlWater" type="text" readonly />
  922. </a-form-item>
  923. </div>
  924. <div style="width:100%" class="downLoad">
  925. <a-form-item label="生成水印素材" style="width:100%">
  926. <a-select :defaultValue="4" v-model="size" style="width:80%">
  927. <a-select-option :value="item.id" :key="item.id" v-for="item of sizeType">{{
  928. item.name
  929. }}</a-select-option>
  930. </a-select>
  931. <a-button type="primary" @click="getWater">生成</a-button>
  932. </a-form-item>
  933. </div>
  934. <div>
  935. <a-form-item label="审核人" v-if="active == '2' && detail.auditorName">
  936. {{ detail.auditorName }}
  937. </a-form-item>
  938. </div>
  939. <div>
  940. <a-form-item label="广告语" v-if="active == '1'">
  941. {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
  942. </a-form-item>
  943. </div>
  944. <div>
  945. <a-form-item label="驳回原因" v-if="active == '2'">
  946. {{ refuseReason ? refuseReason : '无原因' }}
  947. </a-form-item>
  948. </div>
  949. <div>
  950. <a-form-item label="截图" v-if="active == '2'">
  951. <upload-to-ali
  952. v-if="refuseFile"
  953. disabled
  954. v-model="refuseFile"
  955. :customDomain="customDomain"
  956. multiple
  957. preview
  958. :region="region"
  959. :bucket="bucket"
  960. :accept="acceptImage"
  961. :max="10"
  962. :size="1024000"
  963. :accessKeyId="accessKeyId"
  964. :accessKeySecret="accessKeySecret"
  965. :dir="dirImg"
  966. ></upload-to-ali>
  967. <div v-else>无截图</div>
  968. </a-form-item>
  969. </div>
  970. <div>
  971. <a-form-item
  972. label="视频审核"
  973. v-if="
  974. active != '2' &&
  975. (role.roleCode == 'operator' ||
  976. role.roleCode == 'kuaishouOperationManager' ||
  977. role.roleCode == 'admin' ||
  978. role.roleCode == 'operationAssistant' ||
  979. role.roleCode == 'touTiaoOperationManager')
  980. "
  981. >
  982. <a-popconfirm
  983. @confirm="edit(null, '0', '1')"
  984. v-show="active != '1'"
  985. v-if="
  986. role.roleCode == 'operator' ||
  987. role.roleCode == 'kuaishouOperationManager' ||
  988. role.roleCode == 'admin' ||
  989. role.roleCode == 'operationAssistant' ||
  990. role.roleCode == 'touTiaoOperationManager'
  991. "
  992. >
  993. <div slot="title">
  994. <div>
  995. 广告语:
  996. <a-textarea placeholder="请输入" v-model="refuseReason" :autosize="{ minRows: 3, maxRows: 10 }" />
  997. </div>
  998. </div>
  999. <a-button type="primary" v-if="active == '0'" style="margin-right:10px">通过审核</a-button>
  1000. </a-popconfirm>
  1001. <a-popconfirm @confirm="okEdit" v-show="active != '2'">
  1002. <div slot="title">
  1003. <div>
  1004. 驳回原因:
  1005. <a-textarea
  1006. placeholder="请输入原因"
  1007. v-model="refuseReason"
  1008. :autosize="{ minRows: 3, maxRows: 10 }"
  1009. />
  1010. </div>
  1011. <div>
  1012. 截图:
  1013. <upload-to-ali
  1014. v-model="refuseFile"
  1015. :customDomain="customDomain"
  1016. multiple
  1017. preview
  1018. :region="region"
  1019. :bucket="bucket"
  1020. :accept="acceptImage"
  1021. :max="10"
  1022. :size="1024000"
  1023. :accessKeyId="accessKeyId"
  1024. :accessKeySecret="accessKeySecret"
  1025. :dir="dirImg"
  1026. ></upload-to-ali>
  1027. </div>
  1028. </div>
  1029. <a-button type="primary" v-show="active != '2'">驳回</a-button>
  1030. <!-- @click="edit(null, '0', '2')" -->
  1031. </a-popconfirm>
  1032. </a-form-item>
  1033. </div>
  1034. <div>
  1035. <a-form-item label="封面审核" style="width:120%">
  1036. <a-button type="primary" :disabled="checkArrImage.length == 0" @click="editImageAll('1')"
  1037. >通过审核</a-button
  1038. >
  1039. <a-popconfirm @confirm="editImageAll('2')" v-show="active != '2'">
  1040. <div slot="title">
  1041. <div>
  1042. 驳回原因:
  1043. <a-textarea
  1044. placeholder="请输入原因"
  1045. v-model="refuseReasonImage"
  1046. :autosize="{ minRows: 3, maxRows: 10 }"
  1047. />
  1048. </div>
  1049. </div>
  1050. <a-button type="primary" :disabled="checkArrImage.length != 1" style="margin-left:10px"
  1051. >驳回</a-button
  1052. >
  1053. <!-- @click="edit(null, '0', '2')" -->
  1054. </a-popconfirm>
  1055. </a-form-item>
  1056. </div>
  1057. </a-form>
  1058. </div>
  1059. </div>
  1060. </a-modal>
  1061. <a-modal title="人员修改" v-model="personVisible" @afterClose="closePerson">
  1062. <template slot="footer">
  1063. <a-button key="back" @click="closePerson">取消</a-button>
  1064. <a-button key="submit" type="primary" @click="handleOkPerson">
  1065. 确定
  1066. </a-button>
  1067. </template>
  1068. <a-form :form="formPerson">
  1069. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="策划" v-if="activeKey == 'video'">
  1070. <a-select
  1071. v-decorator="[
  1072. 'planId', // 给表单赋值或拉取表单时,该input对应的key
  1073. { rules: [{ required: true, message: '请选择策划!' }] }
  1074. ]"
  1075. showSearch
  1076. optionFilterProp="children"
  1077. :filterOption="filterOption"
  1078. >
  1079. <a-select-option :value="item.userId" v-for="item of ascription.planId" :key="item.userId">
  1080. {{ item.userName }}
  1081. </a-select-option>
  1082. </a-select>
  1083. </a-form-item>
  1084. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="拍摄" v-if="activeKey == 'video'">
  1085. <a-select
  1086. v-decorator="[
  1087. 'shotId' // 给表单赋值或拉取表单时,该input对应的key
  1088. ]"
  1089. showSearch
  1090. optionFilterProp="children"
  1091. :filterOption="filterOption"
  1092. >
  1093. <a-select-option :value="item.userId" v-for="item of ascription.shotId" :key="item.userId">
  1094. {{ item.userName }}
  1095. </a-select-option>
  1096. </a-select>
  1097. </a-form-item>
  1098. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑">
  1099. <a-select
  1100. v-decorator="[
  1101. 'clipId', // 给表单赋值或拉取表单时,该input对应的key
  1102. { rules: [{ required: true, message: '请选择剪辑!' }] }
  1103. ]"
  1104. showSearch
  1105. optionFilterProp="children"
  1106. :filterOption="filterOption"
  1107. >
  1108. <a-select-option :value="item.userId" v-for="item of ascription.clipId" :key="item.userId">
  1109. {{ item.userName }}
  1110. </a-select-option>
  1111. </a-select>
  1112. </a-form-item>
  1113. </a-form>
  1114. </a-modal>
  1115. <account-check ref="check" @synchro="implement"></account-check>
  1116. </a-card>
  1117. </template>
  1118. <script>
  1119. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  1120. import JEllipsis from '@/components/jeecg/JEllipsis'
  1121. import UploadToAli from '@femessage/upload-to-ali'
  1122. import { fileCheck, fileInsertV2, fileEdit, fileCheckImage,fileEditAll } from '@/api/actor'
  1123. import { getAction, postAction, postFile, deleteAction, putAction } from '@/api/manage'
  1124. import qs from 'qs'
  1125. import { mapGetters } from 'vuex'
  1126. import moment from 'moment'
  1127. import selectTable from '@/views/modules/Statistics/components/selecTable.vue'
  1128. import BMF from 'browser-md5-file'
  1129. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
  1130. import accountCheck from './accountCheck'
  1131. export default {
  1132. name: 'YardList',
  1133. mixins: [JeecgListMixin],
  1134. components: {
  1135. JEllipsis,
  1136. UploadToAli,
  1137. accountCheck,
  1138. selectTable
  1139. },
  1140. data() {
  1141. return {
  1142. coverPreviewVisible: false,
  1143. model: [],
  1144. modelNew: [],
  1145. goodsColumns: [
  1146. {
  1147. title: '封面预览',
  1148. // dataIndex: 'coverUrl',
  1149. // key: 'coverUrl',
  1150. dataIndex: 'url',
  1151. align: 'center',
  1152. scopedSlots: { customRender: 'url' }
  1153. },
  1154. {
  1155. title: '审核',
  1156. align: 'center',
  1157. dataIndex: 'action',
  1158. width: 100,
  1159. scopedSlots: { customRender: 'action' }
  1160. }
  1161. ],
  1162. addImageVisible: false,
  1163. addImageData: null,
  1164. projectId: '',
  1165. inputVisible: false,
  1166. inputValue: '',
  1167. labelCol: {
  1168. xs: {
  1169. span: 24
  1170. },
  1171. sm: {
  1172. span: 5
  1173. }
  1174. },
  1175. wrapperCol: {
  1176. xs: {
  1177. span: 24
  1178. },
  1179. sm: {
  1180. span: 12
  1181. }
  1182. },
  1183. queryParam: {},
  1184. dataElse: [],
  1185. ascription: {
  1186. clipId: [], //剪辑人id
  1187. shotId: [], //拍摄人id
  1188. planId: [], //策划id
  1189. planeId: [] //平面id
  1190. },
  1191. show: true,
  1192. visible: false,
  1193. visibleDetail: false,
  1194. personVisible:false,
  1195. confirmLoading: false,
  1196. activeKey: 'video',
  1197. active: '0',
  1198. examinelList: [
  1199. {
  1200. value: '0',
  1201. tab: '未审核'
  1202. },
  1203. {
  1204. value: '1',
  1205. tab: '已批准'
  1206. },
  1207. {
  1208. value: '2',
  1209. tab: '已驳回'
  1210. },
  1211. // {
  1212. // value: '3',
  1213. // tab: '有效视频'
  1214. // }
  1215. ],
  1216. // 表头
  1217. columns: [],
  1218. urlList: {
  1219. url: '',
  1220. md5: '',
  1221. name: ''
  1222. },
  1223. urlListImage: {
  1224. url: [],
  1225. md5: [],
  1226. name: [],
  1227. size: []
  1228. },
  1229. watermarkUrl: {
  1230. url: '',
  1231. md5: '',
  1232. name: ''
  1233. },
  1234. url: {
  1235. list: '/ctop/materialInfo/list'
  1236. },
  1237. detail: false,
  1238. form: this.$form.createForm(this),
  1239. formPerson:this.$form.createForm(this),
  1240. tags: [],
  1241. refuseFile: [],
  1242. refuseReason: '',
  1243. refuseReasonImage: '',
  1244. creativeCopywriter: '',
  1245. customDomain: '',
  1246. region: 'oss-cn-beijing',
  1247. bucket: 'ctop-media',
  1248. acceptVideo: 'video/mpeg,video/mp4',
  1249. acceptImage: 'image/jpeg,image/jpg,image/png',
  1250. accessKeyId: 'LTAIbNbqWzSOklQV',
  1251. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  1252. checkArr: [],
  1253. checkAll: false,
  1254. checkArrImage: [],
  1255. checkAllImage: false,
  1256. showUrl: '',
  1257. showUrlWater: '',
  1258. materialName: '',
  1259. materialDescribe: '',
  1260. name: '',
  1261. detail: null,
  1262. add: true,
  1263. id: '',
  1264. role: {
  1265. roleCode: '',
  1266. roleName: ''
  1267. },
  1268. key: '0',
  1269. mediaId: null,
  1270. sizeType: [],
  1271. size: null,
  1272. repeat: false,
  1273. excellent: 0,
  1274. code: '',
  1275. material: [],
  1276. imageArrList: [],
  1277. showDataBool: false,
  1278. kuaishouData: null,
  1279. douyinData: null
  1280. }
  1281. },
  1282. filters: {
  1283. getDate(value) {
  1284. let date = new Date(value)
  1285. let y = date.getFullYear()
  1286. let MM = date.getMonth() + 1
  1287. MM = MM < 10 ? '0' + MM : MM
  1288. let d = date.getDate()
  1289. d = d < 10 ? '0' + d : d
  1290. return y + '-' + MM + '-' + d
  1291. }
  1292. },
  1293. computed: {
  1294. dirImg() {
  1295. let date = new Date()
  1296. let y = date.getFullYear()
  1297. let MM = date.getMonth() + 1
  1298. MM = MM < 10 ? '0' + MM : MM
  1299. let d = date.getDate()
  1300. d = d < 10 ? '0' + d : d
  1301. return 'image/' + y + '-' + MM + '-' + d + '/'
  1302. },
  1303. dirVideo() {
  1304. let date = new Date()
  1305. let y = date.getFullYear()
  1306. let MM = date.getMonth() + 1
  1307. MM = MM < 10 ? '0' + MM : MM
  1308. let d = date.getDate()
  1309. d = d < 10 ? '0' + d : d
  1310. return 'video/' + y + '-' + MM + '-' + d + '/'
  1311. }
  1312. },
  1313. created() {
  1314. this.queryParam.type = 'VIDEO'
  1315. this.queryParam.userId = this.userInfo().id
  1316. this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  1317. this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  1318. // this.queryParam.status = key
  1319. this.ipagination.pageSize = 8
  1320. this.getParticipateList()
  1321. // /sys/user/getRoleInfo
  1322. getAction('/sys/user/getRoleInfo', {
  1323. userId: this.userInfo().id
  1324. }).then(res => {
  1325. this.role = res
  1326. })
  1327. getAction('/ctop/videoWatermarkTemplate/list').then(res => {
  1328. if (res.success) {
  1329. this.sizeType = res.result.records
  1330. }
  1331. })
  1332. },
  1333. updated() {
  1334. stopOtherVideo()
  1335. },
  1336. watch: {
  1337. $route: function(n, o) {
  1338. if (n.path == '/modules/material/videoMaterial') {
  1339. this.queryParam.userId = this.userInfo().id
  1340. this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  1341. this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  1342. this.loadData()
  1343. }
  1344. },
  1345. 'queryParam.projectId': function(n, o) {
  1346. if (n != '') {
  1347. this.getList(n)
  1348. }
  1349. }
  1350. },
  1351. methods: {
  1352. editImage(item, status) {
  1353. var params = {}
  1354. params.id = item.id
  1355. params.status = status
  1356. params.auditorId = this.userInfo().id
  1357. if (status == '1') {
  1358. } else {
  1359. params.refuseReason = this.refuseReasonImage
  1360. }
  1361. var updateArr = [params]
  1362. putAction('/ctop/MaterialImageInfo/batchEdit', updateArr).then(res => {
  1363. console.log(res)
  1364. if (res.success) {
  1365. // this.coverPreviewVisible = false
  1366. getAction('/ctop/MaterialImageInfo/list', {
  1367. videoId: this.id
  1368. }).then(res => {
  1369. if (res.success) {
  1370. this.model = res.result.map((item, index) => {
  1371. return {
  1372. ...item,
  1373. key: index
  1374. }
  1375. })
  1376. this.modelNew = this.model.filter((item, index) => {
  1377. return item.status == '0'
  1378. })
  1379. if (this.modelNew.length == 0) {
  1380. this.coverPreviewVisible = false
  1381. }
  1382. }
  1383. })
  1384. this.loadData()
  1385. } else {
  1386. this.$message.error(res.message)
  1387. }
  1388. })
  1389. },
  1390. editImageAll(status) {
  1391. this.checkArrImage
  1392. // var params = {}
  1393. // params.id = item.id
  1394. // params.status = status
  1395. var updateArr = []
  1396. if (status == '1') {
  1397. updateArr = this.checkArrImage.map(item => {
  1398. return { id: item, status: status }
  1399. })
  1400. } else {
  1401. updateArr = this.checkArrImage.map(item => {
  1402. return { id: item, status: status, refuseReason: this.refuseReasonImage }
  1403. })
  1404. }
  1405. putAction('/ctop/MaterialImageInfo/batchEdit', updateArr).then(res => {
  1406. if (res.success) {
  1407. // this.coverPreviewVisible = false
  1408. getAction('/ctop/MaterialImageInfo/list', {
  1409. videoId: this.id
  1410. }).then(res => {
  1411. if (res.success) {
  1412. this.checkArrImage = []
  1413. this.checkAllImage = false
  1414. this.model = res.result.map((item, index) => {
  1415. return {
  1416. ...item,
  1417. key: index
  1418. }
  1419. })
  1420. }
  1421. })
  1422. this.loadData()
  1423. } else {
  1424. this.$message.error(res.message)
  1425. }
  1426. })
  1427. },
  1428. showData(item) {
  1429. if (item.byteDance || item.kuaiShou) {
  1430. this.showDataBool = true
  1431. this.kuaishouData = item.kuaiShou
  1432. this.douyinData = item.byteDance
  1433. } else {
  1434. this.$message.error('抖音和快手都无数据')
  1435. return
  1436. }
  1437. },
  1438. setSuccess() {
  1439. var params = {}
  1440. params.id = this.code
  1441. params.excellent = this.excellent == 1 ? 0 : 1
  1442. getAction('/ctop/materialInfo/excellent/set', params).then(res => {
  1443. if (res.success) {
  1444. this.excellent = this.excellent == 1 ? 0 : 1
  1445. this.loadData(this.ipagination.current)
  1446. }
  1447. })
  1448. },
  1449. getData(className) {
  1450. return this.form.getFieldValue(className)
  1451. },
  1452. deleteData(id) {
  1453. deleteAction('/ctop/materialInfo/delete', {
  1454. id: id
  1455. }).then(res => {
  1456. if (res.success) {
  1457. this.$message.success('删除成功')
  1458. this.loadData()
  1459. } else {
  1460. this.$message.error(res.message)
  1461. }
  1462. })
  1463. },
  1464. filterOption(input, option) {
  1465. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  1466. },
  1467. moment,
  1468. a(item) {
  1469. item.showVideo = true
  1470. },
  1471. tongbu() {
  1472. this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
  1473. userId: this.userInfo().id,
  1474. projectId: this.queryParam.projectId
  1475. })
  1476. },
  1477. implement(data) {
  1478. var params = {}
  1479. params.mediaId = this.mediaId
  1480. params.materialArray = JSON.stringify(this.checkArr)
  1481. params.accountArray = JSON.stringify(data)
  1482. postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
  1483. if (res.code == 0) {
  1484. this.checkArr = []
  1485. this.checkAll = false
  1486. }
  1487. })
  1488. // /ctop/materialUpload/uploadAccount
  1489. },
  1490. downloadByBlobShowUrl() {
  1491. fetch(this.showUrl)
  1492. .then(res => res.blob())
  1493. .then(blob => {
  1494. const a = document.createElement('a')
  1495. document.body.appendChild(a)
  1496. a.style.display = 'none'
  1497. // 使用获取到的blob对象创建的url
  1498. const url = window.URL.createObjectURL(blob)
  1499. a.href = url
  1500. // 指定下载的文件名
  1501. a.download = this.materialName
  1502. a.click()
  1503. document.body.removeChild(a)
  1504. // 移除blob对象的url
  1505. window.URL.revokeObjectURL(url)
  1506. })
  1507. },
  1508. downloadByBlob() {
  1509. fetch(this.showUrlWater)
  1510. .then(res => res.blob())
  1511. .then(blob => {
  1512. const a = document.createElement('a')
  1513. document.body.appendChild(a)
  1514. a.style.display = 'none'
  1515. // 使用获取到的blob对象创建的url
  1516. const url = window.URL.createObjectURL(blob)
  1517. a.href = url
  1518. // 指定下载的文件名
  1519. a.download = this.name
  1520. a.click()
  1521. document.body.removeChild(a)
  1522. // 移除blob对象的url
  1523. window.URL.revokeObjectURL(url)
  1524. })
  1525. },
  1526. download(href, name) {
  1527. let eleLink = document.createElement('a')
  1528. eleLink.download = name
  1529. eleLink.href = href
  1530. eleLink.click()
  1531. eleLink.remove()
  1532. },
  1533. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  1534. onCheckAllChange() {
  1535. if (this.checkAll) {
  1536. this.checkArr = []
  1537. } else {
  1538. this.checkArr = this.dataSource.map(item => {
  1539. return item.id
  1540. })
  1541. }
  1542. this.checkAll = !this.checkAll
  1543. },
  1544. onCheckAllImageChange() {
  1545. if (this.checkAllImage) {
  1546. this.checkArrImage = []
  1547. } else {
  1548. this.checkArrImage = this.model.map(item => {
  1549. return item.id
  1550. })
  1551. }
  1552. this.checkAllImage = !this.checkAllImage
  1553. },
  1554. searchRe() {
  1555. this.queryParam = {
  1556. type: 'VIDEO',
  1557. userId: this.userInfo().id,
  1558. status: this.active
  1559. }
  1560. this.loadData(1)
  1561. },
  1562. getList(value) {
  1563. if (value) {
  1564. this.mediaId = this.dataElse.filter(item => {
  1565. if (value == item.projectId) {
  1566. return item
  1567. }
  1568. })[0].mediaId
  1569. }
  1570. this.loadData()
  1571. },
  1572. onChangeCheckImage(checkedList) {
  1573. if (checkedList.length == 0) {
  1574. this.checkAllImage = false
  1575. }
  1576. },
  1577. onChangeCheck(checkedList) {
  1578. if (checkedList.length == 0) {
  1579. this.checkAll = false
  1580. }
  1581. },
  1582. handleClose(removedTag) {
  1583. const tags = this.tags.filter(tag => tag !== removedTag)
  1584. this.tags = tags
  1585. },
  1586. showInput() {
  1587. this.inputVisible = true
  1588. this.$nextTick(function() {
  1589. this.$refs.input.focus()
  1590. })
  1591. },
  1592. handleInputChange(e) {
  1593. this.inputValue = e.target.value
  1594. },
  1595. handleInputConfirm() {
  1596. const inputValue = this.inputValue
  1597. let tags = this.tags
  1598. if (inputValue && tags.indexOf(inputValue) === -1) {
  1599. tags = [...tags, inputValue]
  1600. }
  1601. Object.assign(this, {
  1602. tags,
  1603. inputVisible: false,
  1604. inputValue: ''
  1605. })
  1606. },
  1607. getWater() {
  1608. var params = qs.stringify({
  1609. id: this.id,
  1610. watermarkTemplateId: this.size
  1611. })
  1612. postAction('/ctop/materialInfo/watermark', params).then(res => {
  1613. if (res.success) {
  1614. // getAction("/ctop/videoWatermarkTask/list").then(res=>{
  1615. // console.log(res)
  1616. // })
  1617. this.$message.success('水印素材生成中')
  1618. this.visibleDetail = false
  1619. closeAllVideoFun()
  1620. this.loadData()
  1621. }
  1622. })
  1623. },
  1624. showDetail(item) {
  1625. this.visibleDetail = true
  1626. this.showUrl = item.url
  1627. this.id = item.id
  1628. this.code = item.code
  1629. this.excellent = item.excellent
  1630. if (this.active == '2') {
  1631. this.refuseReason = item.refuseReason
  1632. this.refuseFile = item.refuseFile ? JSON.parse(item.refuseFile) : null
  1633. } else if (this.active == '1') {
  1634. this.creativeCopywriter = item.creativeCopywriter
  1635. this.refuseReason = ''
  1636. this.refuseFile = []
  1637. } else {
  1638. this.refuseReason = ''
  1639. this.refuseFile = []
  1640. }
  1641. getAction('/ctop/materialInfo/getDetail', {
  1642. materialId: item.id
  1643. }).then(res => {
  1644. this.detail = res
  1645. this.size =
  1646. res.parameter.width == '1080' ? 3 : res.parameter.width == '1920' ? 1 : res.parameter.width == '1280' ? 2 : 4
  1647. })
  1648. getAction('/ctop/materialInfo/queryById', {
  1649. id: item.id
  1650. }).then(res => {
  1651. if (res.success) {
  1652. this.showUrlWater = res.result.watermarkUrl
  1653. this.name = res.result.watermarkCode
  1654. this.materialName = res.result.materialName
  1655. } else {
  1656. this.showUrlWater = null
  1657. this.name = null
  1658. }
  1659. })
  1660. getAction('/ctop/MaterialImageInfo/list', {
  1661. videoId: item.id
  1662. }).then(res => {
  1663. console.log(res)
  1664. if (res.success) {
  1665. this.model = res.result.map((item, index) => {
  1666. return {
  1667. ...item,
  1668. key: index
  1669. }
  1670. })
  1671. }
  1672. })
  1673. },
  1674. coverPreviewShowModal(item, index) {
  1675. console.log(this.model)
  1676. this.modelNew = this.model.filter(items => {
  1677. return items.status == 0
  1678. })
  1679. if (this.modelNew.length > 0) {
  1680. this.coverPreviewVisible = true
  1681. }
  1682. },
  1683. okEditShow(item, editStatus) {
  1684. if (editStatus == '2') {
  1685. var params = {}
  1686. params.id = item.id
  1687. params.auditorId = this.userInfo().id
  1688. params.refuseReason = this.refuseReason
  1689. var data = this.refuseFile.map(item => {
  1690. return 'https:' + item
  1691. })
  1692. params.refuseFile = JSON.stringify(data)
  1693. params.status = editStatus
  1694. fileEdit(params).then(res => {
  1695. this.refuseFile = []
  1696. this.refuseReason = ''
  1697. this.loadData()
  1698. })
  1699. } else if (editStatus == '1') {
  1700. var params = {}
  1701. params.id = item.id
  1702. params.auditorId = this.userInfo().id
  1703. params.creativeCopywriter = this.refuseReason
  1704. params.status = editStatus
  1705. fileEdit(params).then(res => {
  1706. this.refuseReason = ''
  1707. this.loadData()
  1708. })
  1709. }
  1710. },
  1711. okEdit(e) {
  1712. this.edit(null, this.active, '2')
  1713. },
  1714. personEdit(item,status){
  1715. this.add = false
  1716. this.personVisible = true
  1717. this.getProjectId(item.projectId)
  1718. getAction('/ctop/materialInfo/getDetail', {
  1719. materialId: item.id
  1720. }).then(res => {
  1721. this.formPerson.setFieldsValue({
  1722. clipId: res.ascription.clipId,
  1723. planId: res.ascription.planId,
  1724. shotId: res.ascription.shotId,
  1725. })
  1726. this.id = item.id
  1727. })
  1728. },
  1729. edit(item, status, editStatus) {
  1730. if (status == '0' || status == '1') {
  1731. if (editStatus == '2') {
  1732. var params = {}
  1733. params.id = this.id
  1734. params.auditorId = this.userInfo().id
  1735. params.refuseReason = this.refuseReason
  1736. var data = this.refuseFile.map(item => {
  1737. return 'https:' + item
  1738. })
  1739. params.refuseFile = JSON.stringify(data)
  1740. params.status = editStatus
  1741. fileEdit(params).then(res => {
  1742. this.refuseFile = []
  1743. this.refuseReason = ''
  1744. this.loadData()
  1745. this.visibleDetail = false
  1746. closeAllVideoFun()
  1747. })
  1748. } else {
  1749. fileEdit({
  1750. id: this.id,
  1751. status: editStatus,
  1752. auditorId: this.userInfo().id,
  1753. creativeCopywriter: this.refuseReason
  1754. }).then(res => {
  1755. this.refuseFile = []
  1756. this.refuseReason = ''
  1757. this.loadData()
  1758. this.visibleDetail = false
  1759. closeAllVideoFun()
  1760. })
  1761. }
  1762. } else {
  1763. this.add = false
  1764. this.visible = true
  1765. this.getProjectId(item.projectId)
  1766. getAction('/ctop/materialInfo/getDetail', {
  1767. materialId: item.id
  1768. }).then(res => {
  1769. if (this.activeKey == 'image') {
  1770. this.form.setFieldsValue({
  1771. projectId: item.projectId,
  1772. clipId: res.ascription.clipId,
  1773. planeId: res.ascription.planeId,
  1774. materialDescribe: item.materialDescribe
  1775. })
  1776. } else {
  1777. this.form.setFieldsValue({
  1778. projectId: item.projectId,
  1779. clipId: res.ascription.clipId,
  1780. planId: res.ascription.planId,
  1781. shotId: res.ascription.shotId,
  1782. materialDescribe: item.materialDescribe
  1783. })
  1784. }
  1785. this.tags = res.tag
  1786. this.urlList.url = item.url
  1787. this.urlList.md5 = item.code
  1788. this.urlList.name = item.materialName
  1789. this.watermarkUrl.url = item.watermarkUrl
  1790. this.watermarkUrl.md5 = item.watermarkCode
  1791. this.watermarkUrl.name = item.watermarkMaterialName
  1792. this.id = item.id
  1793. })
  1794. }
  1795. },
  1796. closePerson(){
  1797. this.personVisible = false
  1798. },
  1799. handleOkPerson(){
  1800. this.formPerson.validateFieldsAndScroll((err, values) => {
  1801. if (err) {
  1802. // 这里做逻辑处理
  1803. } else {
  1804. var params = {
  1805. planId: values.planId,
  1806. shotId: values.shotId,
  1807. clipId: values.clipId,
  1808. materialId:this.id
  1809. }
  1810. fileEditAll(params).then(res=>{
  1811. console.log(res)
  1812. if(res.success){
  1813. this.$message.success('修改成功')
  1814. this.closePerson()
  1815. this.loadData()
  1816. }else{
  1817. this.$message.error(res.message)
  1818. }
  1819. })
  1820. }
  1821. })
  1822. },
  1823. handleOkImage() {
  1824. var params = {}
  1825. params.projectId = this.addImageData.projectId
  1826. params.videoId = this.addImageData.id
  1827. params.imageArr = this.imageArrList
  1828. postAction('/insertImage', params).then(res => {
  1829. console.log(res)
  1830. if (res.code == 0) {
  1831. this.urlListImage = {
  1832. url: [],
  1833. md5: [],
  1834. name: [],
  1835. size: []
  1836. }
  1837. this.imageArrList = []
  1838. this.addImageVisible = false
  1839. this.loadData()
  1840. }
  1841. })
  1842. },
  1843. handleOk() {
  1844. this.form.validateFieldsAndScroll((err, values) => {
  1845. if (err) {
  1846. // 这里做逻辑处理
  1847. } else {
  1848. var params = {}
  1849. var roleCode = {}
  1850. for (const key in this.role) {
  1851. if (key == 'roleCode') {
  1852. this.role[key] = this.role[key] + 'Id'
  1853. roleCode[this.role[key]] = this.userInfo().id
  1854. }
  1855. }
  1856. params.id = this.add ? null : this.id
  1857. params.code = this.urlList.md5
  1858. params.url = this.urlList.url
  1859. params.materialName = this.urlList.name
  1860. params.watermarkCode = this.watermarkUrl.md5
  1861. params.watermarkUrl = this.watermarkUrl.url
  1862. params.watermarkMaterialName = this.watermarkUrl.name
  1863. params.userId = this.userInfo().id
  1864. params.projectId = values.projectId
  1865. params.materialDescribe = values.materialDescribe
  1866. params.type = 'VIDEO'
  1867. params.ascription =
  1868. this.activeKey == 'image'
  1869. ? roleCode
  1870. : {
  1871. planId: values.planId,
  1872. shotId: values.shotId,
  1873. clipId: values.clipId
  1874. }
  1875. params.tag = this.tags
  1876. params.imageArr = this.imageArrList
  1877. if (this.add) {
  1878. fileInsertV2(params).then(res => {
  1879. if (res.success) {
  1880. this.form.resetFields()
  1881. this.urlList = {
  1882. url: '',
  1883. md5: '',
  1884. name: ''
  1885. }
  1886. this.watermarkUrl = {
  1887. url: '',
  1888. md5: '',
  1889. name: ''
  1890. }
  1891. this.urlListImage = {
  1892. url: [],
  1893. md5: [],
  1894. name: [],
  1895. size: []
  1896. }
  1897. this.imageArrList = []
  1898. this.tags = []
  1899. this.loadData()
  1900. this.visible = false
  1901. this.add = true
  1902. for (const key in this.role) {
  1903. if (key == 'roleCode') {
  1904. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  1905. }
  1906. }
  1907. this.$message.success('素材上传成功')
  1908. } else {
  1909. this.$message.error(res.message)
  1910. }
  1911. })
  1912. } else {
  1913. fileEdit({
  1914. ...params,
  1915. status: '0'
  1916. }).then(res => {
  1917. this.form.resetFields()
  1918. this.urlList = {
  1919. url: '',
  1920. md5: '',
  1921. name: ''
  1922. }
  1923. this.watermarkUrl = {
  1924. url: '',
  1925. md5: '',
  1926. name: ''
  1927. }
  1928. this.tags = []
  1929. this.loadData()
  1930. this.visible = false
  1931. this.add = true
  1932. for (const key in this.role) {
  1933. if (key == 'roleCode') {
  1934. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  1935. }
  1936. }
  1937. })
  1938. }
  1939. }
  1940. })
  1941. },
  1942. close() {
  1943. this.visible = false
  1944. this.form.resetFields()
  1945. this.urlList = { url: '', md5: '', name: '' }
  1946. this.tags = []
  1947. this.urlListImage = {
  1948. url: [],
  1949. md5: [],
  1950. name: [],
  1951. size: []
  1952. }
  1953. this.imageArrList = []
  1954. },
  1955. addImage(item) {
  1956. this.addImageVisible = true
  1957. this.addImageData = item
  1958. },
  1959. closeImage() {
  1960. this.addImageVisible = false
  1961. this.urlListImage = {
  1962. url: [],
  1963. md5: [],
  1964. name: [],
  1965. size: []
  1966. }
  1967. this.imageArrList = []
  1968. },
  1969. onChange(date, dateString) {},
  1970. callbackTwo(key) {
  1971. this.checkAll = false
  1972. this.checkArr = []
  1973. if(key == '3'){
  1974. this.url.list = "/ctop/materialInfo/effiMaterialInfo"
  1975. this.queryParam = {
  1976. }
  1977. }else{
  1978. this.url.list = "/ctop/materialInfo/list"
  1979. this.queryParam = {
  1980. type: 'VIDEO',
  1981. userId: this.userInfo().id,
  1982. status: key
  1983. }
  1984. if (this.form.getFieldValue('projectId')) {
  1985. this.form.setFieldsValue({
  1986. projectId: ''
  1987. })
  1988. }
  1989. }
  1990. // this.queryParam.status = key
  1991. this.loadData(1)
  1992. },
  1993. overUpload(urlAll) {
  1994. this.confirmLoading = true
  1995. this.repeat = false
  1996. this.$message.success('上传成功')
  1997. },
  1998. overUploadImage(urlAll) {
  1999. // var index = this.urlList.url.findIndex(item => item === urlAll[0])
  2000. // var data = { url: urlAll[0], code: this.urlList.md5[index], name: this.urlList.name[index] }
  2001. // this.imageArr.push(data)
  2002. var that = this
  2003. that.material = []
  2004. that.imageArrList = []
  2005. var img
  2006. img = new Image()
  2007. for (var i = 0; i < this.urlListImage.url.length; i++) {
  2008. img.src = this.urlListImage.url[i]
  2009. if (img.complete) {
  2010. // 打印
  2011. if (img.width == 720) {
  2012. if (img.height == 1280) {
  2013. that.material.push(true)
  2014. } else {
  2015. that.material.push(false)
  2016. }
  2017. } else if (img.width == 1080) {
  2018. if (img.height == 1920) {
  2019. that.material.push(true)
  2020. } else {
  2021. that.material.push(false)
  2022. }
  2023. } else if (img.width == 1280) {
  2024. if (img.height == 720) {
  2025. that.material.push(true)
  2026. } else {
  2027. that.material.push(false)
  2028. }
  2029. } else if (img.width == 1920) {
  2030. if (img.height == 1080) {
  2031. that.material.push(true)
  2032. } else {
  2033. that.material.push(false)
  2034. }
  2035. } else {
  2036. that.material.push(false)
  2037. }
  2038. that.imageArrList.push({
  2039. width: img.width,
  2040. height: img.height,
  2041. size: this.urlListImage.size[i],
  2042. code: this.urlListImage.md5[i],
  2043. url: this.urlListImage.url[i],
  2044. materialName: this.urlListImage.name[i]
  2045. })
  2046. } else {
  2047. img.onload = () => {
  2048. that.imageArrList.push({
  2049. width: img.width,
  2050. height: img.height,
  2051. size: that.urlListImage.size[that.urlListImage.url.length - 1],
  2052. code: that.urlListImage.md5[that.urlListImage.url.length - 1],
  2053. url: that.urlListImage.url[that.urlListImage.url.length - 1],
  2054. materialName: that.urlListImage.name[that.urlListImage.url.length - 1]
  2055. })
  2056. }
  2057. }
  2058. }
  2059. },
  2060. file(file) {
  2061. var bmf = new BMF()
  2062. var that = this
  2063. return new Promise(function(resolve, reject) {
  2064. bmf.md5(file[0], (err, md5) => {
  2065. that.urlList.name = file[0].name
  2066. that.urlList.md5 = md5
  2067. fileCheck({
  2068. code: md5,
  2069. projectId: that.getData('projectId')
  2070. }).then(res => {
  2071. if (res.code == 0) {
  2072. that.$message.error('此素材已经上传')
  2073. that.repeat = true
  2074. reject()
  2075. } else {
  2076. that.repeat = false
  2077. resolve()
  2078. // reject()
  2079. }
  2080. })
  2081. })
  2082. })
  2083. },
  2084. fileWater(file) {
  2085. var bmf = new BMF()
  2086. var that = this
  2087. return new Promise(function(resolve, reject) {
  2088. for (let i = 0; i < file.length; i++) {
  2089. bmf.md5(file[i], (err, md5) => {
  2090. fileCheckImage({
  2091. code: md5,
  2092. projectId: that.getData('projectId')
  2093. }).then(res => {
  2094. if (res.code == 0) {
  2095. that.$message.error('此素材已经上传')
  2096. reject()
  2097. } else {
  2098. that.urlListImage.name.push(file[i].name)
  2099. that.urlListImage.md5.push(md5)
  2100. that.urlListImage.size.push(file[i].size)
  2101. resolve()
  2102. // reject()
  2103. }
  2104. })
  2105. })
  2106. }
  2107. })
  2108. },
  2109. getParticipateList() {
  2110. getAction('/ctop/projectMember/participateList', {
  2111. userId: this.userInfo().id
  2112. }).then(res => {
  2113. if (res.code == 0) {
  2114. this.dataElse = res.result
  2115. }
  2116. })
  2117. },
  2118. getProjectId(items) {
  2119. this.form.resetFields(['clipId', 'planId', 'shotId'])
  2120. getAction('/ctop/projectMember/getMemberList', {
  2121. projectId: items
  2122. }).then(res => {
  2123. if (res.code == 0) {
  2124. this.ascription.clipId = res.result.filter(item => {
  2125. if (
  2126. item.roleCode == 'clip' ||
  2127. item.roleCode == 'plan' ||
  2128. item.roleCode == 'designTeamLeader' ||
  2129. item.roleCode == 'shot' ||
  2130. item.roleCode == 'plane'
  2131. ) {
  2132. return {
  2133. userId: item.userId,
  2134. userName: item.userName
  2135. }
  2136. }
  2137. })
  2138. this.ascription.shotId = res.result.filter(item => {
  2139. if (
  2140. item.roleCode == 'clip' ||
  2141. item.roleCode == 'shot' ||
  2142. item.roleCode == 'plan' ||
  2143. item.roleCode == 'designTeamLeader' ||
  2144. item.roleCode == 'plane'
  2145. ) {
  2146. return {
  2147. userId: item.userId,
  2148. userName: item.userName
  2149. }
  2150. }
  2151. })
  2152. this.ascription.planId = res.result.filter(item => {
  2153. if (
  2154. item.roleCode == 'shot' ||
  2155. item.roleCode == 'plan' ||
  2156. item.roleCode == 'designTeamLeader' ||
  2157. item.roleCode == 'clip' ||
  2158. item.roleCode == 'plane'
  2159. ) {
  2160. return {
  2161. userId: item.userId,
  2162. userName: item.userName
  2163. }
  2164. }
  2165. })
  2166. this.ascription.planeId = res.result.filter(item => {
  2167. if (item.roleCode == 'plane') {
  2168. return {
  2169. userId: item.userId,
  2170. userName: item.userName
  2171. }
  2172. }
  2173. })
  2174. }
  2175. })
  2176. },
  2177. getDataSource(page, pageSize) {
  2178. this.ipagination.current = page
  2179. this.checkArr = []
  2180. this.checkAll = false
  2181. this.loadData()
  2182. }
  2183. }
  2184. }
  2185. </script>
  2186. <style scoped>
  2187. @import '~@assets/less/common.less';
  2188. </style>