videoMaterial.vue 56 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673
  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: -10px;
  11. }
  12. .detail .ant-form-item {
  13. margin-bottom: 10px !important;
  14. }
  15. </style>
  16. <style lang="scss" scoped>
  17. .home-item {
  18. overflow: hidden;
  19. }
  20. @media (min-width: 1024px) {
  21. .home-item {
  22. border-style: solid;
  23. border-width: 1px;
  24. border-color: #e4e4e4;
  25. width: calc(50% - 10px);
  26. padding: 10px;
  27. margin-right: 10px;
  28. margin-bottom: 10px;
  29. display: flex;
  30. align-items: center;
  31. background: #fff;
  32. position: relative;
  33. z-index: 99;
  34. }
  35. }
  36. /*>=1024的设备*/
  37. // @media (min-width: 1100px) {
  38. // .checkbox_item_container {
  39. // width:70%
  40. // }
  41. // } /*>=1100的设备*/
  42. @media (min-width: 1280px) {
  43. .home-item {
  44. border-style: solid;
  45. border-width: 1px;
  46. border-color: #e4e4e4;
  47. width: calc(25% - 10px);
  48. padding: 10px;
  49. margin-right: 10px;
  50. margin-bottom: 10px;
  51. display: flex;
  52. align-items: center;
  53. background: #fff;
  54. position: relative;
  55. z-index: 99;
  56. }
  57. }
  58. /*>=1280的设备*/
  59. // @media (min-width: 1366px) {
  60. // }
  61. // @media (min-width: 1440px) {
  62. // }
  63. // @media (min-width: 1680px) {
  64. // }
  65. @media (min-width: 1920px) {
  66. .home-item {
  67. border-style: solid;
  68. border-width: 1px;
  69. border-color: #e4e4e4;
  70. width: calc(25% - 10px);
  71. padding: 10px;
  72. margin-right: 10px;
  73. margin-bottom: 10px;
  74. display: flex;
  75. align-items: center;
  76. background: #fff;
  77. position: relative;
  78. z-index: 99;
  79. cursor: pointer;
  80. }
  81. }
  82. .actor-photo-list {
  83. display: flex;
  84. padding-left: 0;
  85. li {
  86. width: 25%;
  87. margin: 10px;
  88. position: relative;
  89. height: 250px;
  90. border: 1px solid #f2f2f2;
  91. img,
  92. video {
  93. width: 100%;
  94. margin-top: auto;
  95. margin-bottom: auto;
  96. top: 0;
  97. bottom: 0;
  98. position: absolute;
  99. max-height: 250px;
  100. }
  101. }
  102. }
  103. .home-card {
  104. width: 100%;
  105. overflow: hidden;
  106. padding: 10px 0px;
  107. display: flex;
  108. flex-wrap: wrap;
  109. margin-right: -10px;
  110. .home-right {
  111. width: 100%;
  112. }
  113. .bg:after {
  114. content: '';
  115. width: 110%;
  116. height: 110%;
  117. position: absolute;
  118. left: -5%;
  119. top: -5%;
  120. background: inherit;
  121. filter: blur(10px);
  122. z-index: 2;
  123. }
  124. }
  125. .bh {
  126. height: 60px;
  127. line-height: 30px;
  128. overflow: hidden;
  129. text-overflow: ellipsis;
  130. -webkit-line-clamp: 2;
  131. display: -webkit-box;
  132. -webkit-box-orient: vertical;
  133. }
  134. .bhShow {
  135. height: 100px;
  136. line-height: 25px;
  137. text-align: center;
  138. }
  139. .bhShow span {
  140. font-size: 14px;
  141. }
  142. .show-data {
  143. width: 50%;
  144. display: flex;
  145. flex-direction: column;
  146. align-items: flex-start;
  147. }
  148. a {
  149. font-size: 14px;
  150. }
  151. </style>
  152. <template>
  153. <a-card :bordered="false">
  154. <!-- 查询区域 -->
  155. <div class="table-page-search-wrapper">
  156. <a-form layout="inline">
  157. <a-row :gutter="24">
  158. <a-col :md="8" :sm="8">
  159. <!-- <a-form-item label="项目名称"> -->
  160. <selectTable :projectId.sync="queryParam.projectId"></selectTable>
  161. <!-- <a-select
  162. placeholder="请输入项目名称"
  163. showSearch
  164. optionFilterProp="children"
  165. :filterOption="filterOption"
  166. v-model="queryParam.projectId"
  167. @change="getList"
  168. >
  169. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  170. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  171. item.mediaId == '1' ? '头条' : '快手'
  172. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  173. </a-select-option>
  174. </a-select> -->
  175. <!-- </a-form-item> -->
  176. </a-col>
  177. <a-col :md="8" :sm="8">
  178. <a-form-item label="时间选择">
  179. <a-date-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width:100%" />
  180. </a-form-item>
  181. </a-col>
  182. <a-col :md="8" :sm="8">
  183. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  184. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  185. <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
  186. </span>
  187. </a-col>
  188. </a-row>
  189. </a-form>
  190. </div>
  191. <!-- table区域-begin -->
  192. <!-- <div> -->
  193. <!-- 操作按钮区域 -->
  194. <div class="table-operator" style="position:relative;z-index:100">
  195. <a-button
  196. @click="
  197. visible = true
  198. confirmLoading = false
  199. "
  200. type="primary"
  201. icon="plus"
  202. >新增</a-button
  203. >
  204. <a-button
  205. @click="onCheckAllChange"
  206. v-if="
  207. queryParam.projectId &&
  208. active == '1' &&
  209. (role.roleCode == 'operator' ||
  210. role.roleCode == 'kuaishouOperationManager' ||
  211. role.roleCode == 'admin' ||
  212. role.roleCode == 'operationAssistant' ||
  213. role.roleCode == 'touTiaoOperationManager')
  214. "
  215. >{{ checkAll ? '取消 ( ' + checkArr.length + ' )' : '全选' }}</a-button
  216. >
  217. <a-button
  218. v-if="
  219. queryParam.projectId &&
  220. active == '1' &&
  221. (role.roleCode == 'operator' ||
  222. role.roleCode == 'kuaishouOperationManager' ||
  223. role.roleCode == 'admin' ||
  224. role.roleCode == 'operationAssistant' ||
  225. role.roleCode == 'touTiaoOperationManager')
  226. "
  227. :disabled="checkArr.length == 0"
  228. @click="tongbu"
  229. >一键同步</a-button
  230. >
  231. </div>
  232. <a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
  233. <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
  234. <div v-if="dataSource.length > 0">
  235. <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
  236. <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
  237. <span v-if="items.excellent == 0"></span>
  238. <span
  239. v-else
  240. 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"
  241. >优秀素材</span
  242. >
  243. <div class="home-right">
  244. <a-badge
  245. :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
  246. :numberStyle="{ backgroundColor: '#52c41a' }"
  247. style="width:100%;display:flex"
  248. @click.stop
  249. >
  250. <span
  251. style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
  252. >
  253. {{ items.materialName }}
  254. </span>
  255. <a-icon
  256. type="close-circle"
  257. @click="deleteData(items.id)"
  258. v-show="active == '0'"
  259. v-if="items.userId == userInfo().id"
  260. />
  261. </a-badge>
  262. <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative;">
  263. <!-- <video
  264. :src="items.url"
  265. @canplay="a(items)"
  266. style="height:200px;max-width:100%;position:absolute;z-index:10;"
  267. /> -->
  268. <div style="width: 100px;position: absolute;left: 0;z-index:1000">
  269. <a-tooltip placement="top">
  270. <template slot="title">
  271. <span>{{ items.kuaishouEffiType == 1 ? '快手有效视频' : '已经同步到快手平台' }}</span>
  272. </template>
  273. <img
  274. style="width:30px;height:30px;"
  275. v-if="items.kuaishouVideoIsUp == 1"
  276. :style="{ filter: items.kuaishouEffiType == 1 ? 'grayscale(0%)' : 'grayscale(100%)' }"
  277. src="./kuaishou.jpg"
  278. />
  279. </a-tooltip>
  280. <a-tooltip placement="top">
  281. <template slot="title">
  282. <span>{{ items.toutiaoEffiType == 1 ? '抖音有效视频' : '已经同步到抖音平台' }}</span>
  283. </template>
  284. <img
  285. v-if="items.toutiaoVideoIsUp == 1 && items.toutiaoEffiType == 1"
  286. style="width:30px;height:30px;margin-left:5px;"
  287. src="./douyin.jpg"
  288. alt=""
  289. />
  290. <img
  291. v-else-if="items.toutiaoVideoIsUp == 1 && items.toutiaoEffiType == 0"
  292. style="width:30px;height:30px;margin-left:5px;"
  293. src="./douyinhui.jpg"
  294. alt=""
  295. />
  296. </a-tooltip>
  297. </div>
  298. <img
  299. :src="items.url + '?x-oss-process=video/snapshot,t_00000,m_fast'"
  300. alt=""
  301. style="height:200px;max-width:100%;position:absolute;z-index:10;"
  302. />
  303. <!-- <img
  304. src="./timg.gif"
  305. v-if="!items.showVideo"
  306. alt=""
  307. style="height:200px;max-width:100%;position:absolute;z-index:11;"
  308. @click.stop
  309. /> -->
  310. </div>
  311. <div style="width:100%;height:1px;border-bottom:1px solid #f2f2f2;margin-top:5px"></div>
  312. <div v-if="active == '2'" class="bh">驳回原因:{{ items.refuseReason }}</div>
  313. <div
  314. v-if="active == '1'"
  315. class="bhShow"
  316. style="display:flex;justify-content:space-between;"
  317. @click.stop="showData(items)"
  318. >
  319. <div v-if="items.byteDance" class="show-data">
  320. <span>抖音</span>
  321. <span>消耗:{{ items.byteDance.cost }}</span>
  322. <span>封面点击:{{ items.byteDance.click }}</span>
  323. <span>封面展示:{{ items.byteDance.showNum }}</span>
  324. </div>
  325. <div v-else style="line-height:100px;" class="show-data">
  326. <span>抖音:无</span>
  327. </div>
  328. <div v-if="items.kuaiShou" class="show-data">
  329. <span>快手</span>
  330. <span>消耗:{{ items.kuaiShou.charge }}</span>
  331. <span>封面点击:{{ items.kuaiShou.photoClick }}</span>
  332. <span>封面展示:{{ items.kuaiShou.photoShow }}</span>
  333. </div>
  334. <div v-else style="line-height:100px;" class="show-data">
  335. <span>快手:无</span>
  336. </div>
  337. </div>
  338. <div
  339. style="width:100%;height:1px;border-bottom:1px solid #f2f2f2;margin-top:5px"
  340. v-if="active != '0'"
  341. ></div>
  342. <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
  343. {{ items.createTime | getDate }}
  344. <a
  345. href="javascript:;"
  346. style="margin-left:20px"
  347. @click="edit(items, '2')"
  348. v-show="active == '2'"
  349. v-if="items.userId == userInfo().id"
  350. >
  351. 修改</a
  352. >
  353. <!-- <a
  354. href="javascript:;"
  355. style="margin-left:20px"
  356. @click="edit(items, '2')"
  357. v-show="active == '0' || active == '1'"
  358. v-if="
  359. role.roleCode == 'operator' ||
  360. role.roleCode == 'kuaishouOperationManager' ||
  361. role.roleCode == 'admin'
  362. "
  363. >
  364. 驳回</a
  365. > -->
  366. <a-popconfirm
  367. @confirm="okEditShow(items, '2')"
  368. v-show="active != '2'"
  369. v-if="
  370. role.roleCode == 'operator' ||
  371. role.roleCode == 'kuaishouOperationManager' ||
  372. role.roleCode == 'admin' ||
  373. role.roleCode == 'operationAssistant' ||
  374. role.roleCode == 'touTiaoOperationManager'
  375. "
  376. >
  377. <div slot="title">
  378. <div>
  379. 驳回原因:
  380. <a-textarea
  381. placeholder="请输入原因"
  382. v-model="refuseReason"
  383. :autosize="{ minRows: 3, maxRows: 10 }"
  384. />
  385. </div>
  386. <div>
  387. 截图:
  388. <upload-to-ali
  389. v-model="refuseFile"
  390. :customDomain="customDomain"
  391. multiple
  392. preview
  393. :region="region"
  394. :bucket="bucket"
  395. :accept="acceptImage"
  396. :max="10"
  397. :size="1024000"
  398. :accessKeyId="accessKeyId"
  399. :accessKeySecret="accessKeySecret"
  400. :dir="dirImg"
  401. ></upload-to-ali>
  402. </div>
  403. </div>
  404. <a href="javascript:;" style="margin-left:20px">驳回</a>
  405. </a-popconfirm>
  406. <a-popconfirm
  407. @confirm="okEditShow(items, '1')"
  408. v-show="active != '1'"
  409. v-if="
  410. role.roleCode == 'operator' ||
  411. role.roleCode == 'kuaishouOperationManager' ||
  412. role.roleCode == 'admin' ||
  413. role.roleCode == 'operationAssistant' ||
  414. role.roleCode == 'touTiaoOperationManager'
  415. "
  416. >
  417. <div slot="title">
  418. <div>
  419. 广告语:
  420. <a-textarea
  421. placeholder="请输入"
  422. v-model="refuseReason"
  423. :autosize="{ minRows: 3, maxRows: 10 }"
  424. />
  425. </div>
  426. </div>
  427. <a
  428. href="javascript:;"
  429. style="margin-left:20px"
  430. v-show="active != '1'"
  431. v-if="
  432. role.roleCode == 'operator' ||
  433. role.roleCode == 'kuaishouOperationManager' ||
  434. role.roleCode == 'admin' ||
  435. role.roleCode == 'operationAssistant' ||
  436. role.roleCode == 'touTiaoOperationManager'
  437. "
  438. >
  439. 通过审核</a
  440. >
  441. </a-popconfirm>
  442. <a-checkbox :value="items.id" style="float:right" v-show="active == '1'"></a-checkbox>
  443. </span>
  444. </div>
  445. </div>
  446. </a-checkbox-group>
  447. <a-pagination
  448. size="small"
  449. :showTotal="ipagination.showTotal"
  450. style="float:right"
  451. v-if="dataSource.length > 0"
  452. showQuickJumper
  453. :pageSize.sync="ipagination.pageSize"
  454. :total="ipagination.total"
  455. v-model="ipagination.current"
  456. @change="getDataSource"
  457. />
  458. </div>
  459. <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
  460. <a-empty />
  461. </div>
  462. </a-tab-pane>
  463. </a-tabs>
  464. <a-modal title="数据详情" v-model="showDataBool" :footer="null">
  465. <div class="bhShow" style="display:flex;justify-content:space-between;height:400px">
  466. <div v-if="douyinData" class="show-data">
  467. <span style="color:black;font-size:18px;text-align:center;width:100%">抖音</span>
  468. <span>消耗:{{ douyinData.cost }}</span>
  469. <span>封面点击:{{ douyinData.click }}</span>
  470. <span>封面展示:{{ douyinData.showNum }}</span>
  471. <span>激活:{{ douyinData.active }}</span>
  472. <span>转化量:{{ douyinData.convertNum }}</span>
  473. <span>表单提交:{{ douyinData.form }}</span>
  474. <span>下载注册:{{ douyinData.register }}</span>
  475. <span>视频总播放:{{ douyinData.totalPlay }}</span>
  476. <span>视频有效播放:{{ douyinData.validPlay }}</span>
  477. </div>
  478. <div v-if="kuaishouData" class="show-data">
  479. <span style="color:black;font-size:18px;text-align:center;width:100%">快手</span>
  480. <span>消耗:{{ kuaishouData.charge }}</span>
  481. <span>封面点击:{{ kuaishouData.photoClick }}</span>
  482. <span>封面展示:{{ kuaishouData.photoShow }}</span>
  483. <span>素材曝光数:{{ kuaishouData.aclick }}</span>
  484. <span>激活数:{{ kuaishouData.activation }}</span>
  485. <span>行为数:{{ kuaishouData.bclick }}</span>
  486. <span>表单提交数:{{ kuaishouData.formCount }}</span>
  487. </div>
  488. </div>
  489. </a-modal>
  490. <a-modal title="添加素材" v-model="visible" :maskClosable="false" :width="800">
  491. <template slot="footer">
  492. <a-button key="back" @click="close">取消</a-button>
  493. <a-button key="submit" type="primary" :disabled="!confirmLoading" @click="handleOk">
  494. 确定
  495. </a-button>
  496. </template>
  497. <a-form :form="form">
  498. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="项目选择">
  499. <!-- <selectTable :projectId.sync="projectId" /> -->
  500. <a-select
  501. v-decorator="[
  502. 'projectId', // 给表单赋值或拉取表单时,该input对应的key
  503. { rules: [{ required: true, message: '请选择项目!' }] }
  504. ]"
  505. @change="getProjectId"
  506. showSearch
  507. optionFilterProp="children"
  508. :filterOption="filterOption"
  509. >
  510. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  511. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  512. item.mediaId == '1' ? '头条' : '快手'
  513. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  514. </a-select-option>
  515. </a-select>
  516. </a-form-item>
  517. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传" v-if="getData('projectId')">
  518. <upload-to-ali
  519. v-model="urlList.url"
  520. :customDomain="customDomain"
  521. preview
  522. :region="region"
  523. :bucket="bucket"
  524. :accept="acceptVideo"
  525. :max="10"
  526. :size="1024000"
  527. :accessKeyId="accessKeyId"
  528. :accessKeySecret="accessKeySecret"
  529. :before-upload="file"
  530. :dir="dirVideo"
  531. @loaded="overUpload"
  532. >
  533. </upload-to-ali>
  534. <span v-if="repeat" style="color:red">
  535. 此素材重复,请重新选择上传
  536. </span>
  537. <span v-if="confirmLoading && urlList.url != ''" style="color:green">
  538. 上传成功
  539. </span>
  540. </a-form-item>
  541. <div>
  542. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="策划" v-if="activeKey == 'video'">
  543. <a-select
  544. v-decorator="[
  545. 'planId', // 给表单赋值或拉取表单时,该input对应的key
  546. { rules: [{ required: true, message: '请选择策划!' }] }
  547. ]"
  548. >
  549. <a-select-option :value="item.userId" v-for="item of ascription.planId" :key="item.userId">
  550. {{ item.userName }}
  551. </a-select-option>
  552. </a-select>
  553. </a-form-item>
  554. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="拍摄" v-if="activeKey == 'video'">
  555. <a-select
  556. v-decorator="[
  557. 'shotId' // 给表单赋值或拉取表单时,该input对应的key
  558. ]"
  559. >
  560. <a-select-option :value="item.userId" v-for="item of ascription.shotId" :key="item.userId">
  561. {{ item.userName }}
  562. </a-select-option>
  563. </a-select>
  564. </a-form-item>
  565. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑">
  566. <a-select
  567. v-decorator="[
  568. 'clipId', // 给表单赋值或拉取表单时,该input对应的key
  569. { rules: [{ required: true, message: '请选择剪辑!' }] }
  570. ]"
  571. >
  572. <a-select-option :value="item.userId" v-for="item of ascription.clipId" :key="item.userId">
  573. {{ item.userName }}
  574. </a-select-option>
  575. </a-select>
  576. </a-form-item>
  577. </div>
  578. <a-form-item
  579. :label-col="labelCol"
  580. :wrapper-col="{
  581. xs: { span: 24 },
  582. sm: { span: 18 }
  583. }"
  584. label="标签"
  585. >
  586. <template v-for="(tag, index) in tags">
  587. <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
  588. <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
  589. {{ `${tag.slice(0, 20)}...` }}
  590. </a-tag>
  591. </a-tooltip>
  592. <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
  593. {{ tag }}
  594. </a-tag>
  595. </template>
  596. <a-input
  597. v-if="inputVisible"
  598. ref="input"
  599. type="text"
  600. size="small"
  601. :style="{ width: '78px' }"
  602. :value="inputValue"
  603. @change="handleInputChange"
  604. @blur="handleInputConfirm"
  605. @keyup.enter="handleInputConfirm"
  606. />
  607. <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
  608. <a-icon type="plus" /> New Tag
  609. </a-tag>
  610. </a-form-item>
  611. <a-form-item
  612. :label-col="labelCol"
  613. :wrapper-col="{
  614. xs: { span: 24 },
  615. sm: { span: 12 }
  616. }"
  617. label="描述"
  618. >
  619. <a-textarea
  620. placeholder="请输入描述"
  621. v-decorator="[
  622. 'materialDescribe' // 给表单赋值或拉取表单时,该input对应的key
  623. ]"
  624. :autosize="{ minRows: 3, maxRows: 10 }"
  625. />
  626. </a-form-item>
  627. </a-form>
  628. </a-modal>
  629. <a-modal title="素材详情" v-model="visibleDetail" width="70%" :footer="null">
  630. <div style="width:100%">
  631. <a-button type="primary" @click="setSuccess" style="float:right">
  632. {{ excellent == 0 ? '标记为优秀素材' : '取消标记' }}
  633. </a-button>
  634. </div>
  635. <div style="display:flex;height:700px">
  636. <div
  637. style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2"
  638. >
  639. <video class="video" :src="showUrl" controls="controls" style="width:100%" controlsList="nodownload">
  640. 您的浏览器不支持 video 标签。
  641. </video>
  642. </div>
  643. <div style="flex:3;padding:10px;box-sizing:border-box;">
  644. <a-form v-if="detail" class="detail">
  645. <div v-if="detail.parameter">
  646. <a-form-item
  647. label="视频时长"
  648. :label-col="{ span: 6 }"
  649. :wrapper-col="{ span: 18 }"
  650. v-if="detail.parameter.second"
  651. >
  652. {{ detail.parameter.second }}秒
  653. </a-form-item>
  654. <a-form-item
  655. label="尺寸"
  656. :label-col="{ span: 6 }"
  657. :wrapper-col="{ span: 18 }"
  658. v-if="detail.parameter.width"
  659. >
  660. {{ detail.parameter.width }}*{{ detail.parameter.height }}
  661. </a-form-item>
  662. <a-form-item
  663. label="大小"
  664. :label-col="{ span: 6 }"
  665. :wrapper-col="{ span: 18 }"
  666. v-if="detail.parameter.size"
  667. >
  668. {{ detail.parameter.size }}
  669. </a-form-item>
  670. </div>
  671. <div v-if="detail.ascription">
  672. <a-form-item label="策划" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  673. {{ detail.ascription.planName }}
  674. </a-form-item>
  675. <a-form-item label="拍摄" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  676. {{ detail.ascription.shotName }}
  677. </a-form-item>
  678. <a-form-item
  679. label="剪辑"
  680. :label-col="{ span: 6 }"
  681. :wrapper-col="{ span: 18 }"
  682. v-if="detail.ascription.clipName"
  683. >
  684. {{ detail.ascription.clipName }}
  685. </a-form-item>
  686. </div>
  687. <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.tag">
  688. <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
  689. </a-form-item>
  690. <a-form-item label="无水印素材下载" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="name">
  691. <a-button type="primary" @click="downloadByBlobShowUrl">下载</a-button>
  692. </a-form-item>
  693. <a-form-item label="水印素材下载" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="name">
  694. <a-button type="primary" @click="downloadByBlob" v-if="showUrlWater">下载</a-button>
  695. <span v-else>水印素材生成中,请一分钟后刷新</span>
  696. </a-form-item>
  697. <a-form-item label="水印素材链接" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="showUrlWater">
  698. <a-input v-model="showUrlWater" type="text" readonly />
  699. </a-form-item>
  700. <a-form-item label="生成水印素材" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  701. <a-select :defaultValue="4" style="width:50%" v-model="size">
  702. <a-select-option :value="item.id" :key="item.id" v-for="item of sizeType">{{
  703. item.name
  704. }}</a-select-option>
  705. </a-select>
  706. <a-button type="primary" @click="getWater">生成</a-button>
  707. </a-form-item>
  708. <a-form-item
  709. label="审核人"
  710. :label-col="{ span: 6 }"
  711. :wrapper-col="{ span: 18 }"
  712. v-if="active == '2' && detail.auditorName"
  713. >
  714. {{ detail.auditorName }}
  715. </a-form-item>
  716. <a-form-item label="广告语" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '1'">
  717. {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
  718. </a-form-item>
  719. <a-form-item label="驳回原因" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
  720. {{ refuseReason ? refuseReason : '无原因' }}
  721. </a-form-item>
  722. <a-form-item label="截图" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="active == '2'">
  723. <upload-to-ali
  724. v-if="refuseFile"
  725. disabled
  726. v-model="refuseFile"
  727. :customDomain="customDomain"
  728. multiple
  729. preview
  730. :region="region"
  731. :bucket="bucket"
  732. :accept="acceptImage"
  733. :max="10"
  734. :size="1024000"
  735. :accessKeyId="accessKeyId"
  736. :accessKeySecret="accessKeySecret"
  737. :dir="dirImg"
  738. ></upload-to-ali>
  739. <div v-else>无截图</div>
  740. </a-form-item>
  741. <a-form-item
  742. label="审核"
  743. :label-col="{ span: 6 }"
  744. :wrapper-col="{ span: 18 }"
  745. v-if="
  746. active != '2' &&
  747. (role.roleCode == 'operator' ||
  748. role.roleCode == 'kuaishouOperationManager' ||
  749. role.roleCode == 'admin' ||
  750. role.roleCode == 'operationAssistant' ||
  751. role.roleCode == 'touTiaoOperationManager')
  752. "
  753. >
  754. <a-popconfirm
  755. @confirm="edit(null, '0', '1')"
  756. v-show="active != '1'"
  757. v-if="
  758. role.roleCode == 'operator' ||
  759. role.roleCode == 'kuaishouOperationManager' ||
  760. role.roleCode == 'admin' ||
  761. role.roleCode == 'operationAssistant' ||
  762. role.roleCode == 'touTiaoOperationManager'
  763. "
  764. >
  765. <div slot="title">
  766. <div>
  767. 广告语:
  768. <a-textarea placeholder="请输入" v-model="refuseReason" :autosize="{ minRows: 3, maxRows: 10 }" />
  769. </div>
  770. </div>
  771. <a-button type="primary" v-if="active == '0'" style="margin-right:10px">通过审核</a-button>
  772. </a-popconfirm>
  773. <a-popconfirm @confirm="okEdit" v-show="active != '2'">
  774. <div slot="title">
  775. <div>
  776. 驳回原因:
  777. <a-textarea
  778. placeholder="请输入原因"
  779. v-model="refuseReason"
  780. :autosize="{ minRows: 3, maxRows: 10 }"
  781. />
  782. </div>
  783. <div>
  784. 截图:
  785. <upload-to-ali
  786. v-model="refuseFile"
  787. :customDomain="customDomain"
  788. multiple
  789. preview
  790. :region="region"
  791. :bucket="bucket"
  792. :accept="acceptImage"
  793. :max="10"
  794. :size="1024000"
  795. :accessKeyId="accessKeyId"
  796. :accessKeySecret="accessKeySecret"
  797. :dir="dirImg"
  798. ></upload-to-ali>
  799. </div>
  800. </div>
  801. <a-button type="primary" v-show="active != '2'">驳回</a-button>
  802. <!-- @click="edit(null, '0', '2')" -->
  803. </a-popconfirm>
  804. </a-form-item>
  805. </a-form>
  806. </div>
  807. </div>
  808. </a-modal>
  809. <account-check ref="check" @synchro="implement"></account-check>
  810. </a-card>
  811. </template>
  812. <script>
  813. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  814. import JEllipsis from '@/components/jeecg/JEllipsis'
  815. import UploadToAli from '@femessage/upload-to-ali'
  816. import { fileCheck, fileInsert, fileEdit } from '@/api/actor'
  817. import { getAction, postAction, postFile, deleteAction } from '@/api/manage'
  818. import qs from 'qs'
  819. import { mapGetters } from 'vuex'
  820. import moment from 'moment'
  821. import selectTable from '@/views/modules/Statistics/components/selecTable.vue'
  822. import BMF from 'browser-md5-file'
  823. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
  824. import accountCheck from './accountCheck'
  825. export default {
  826. name: 'YardList',
  827. mixins: [JeecgListMixin],
  828. components: {
  829. JEllipsis,
  830. UploadToAli,
  831. accountCheck,
  832. selectTable
  833. },
  834. data() {
  835. return {
  836. projectId: '',
  837. inputVisible: false,
  838. inputValue: '',
  839. labelCol: {
  840. xs: {
  841. span: 24
  842. },
  843. sm: {
  844. span: 5
  845. }
  846. },
  847. wrapperCol: {
  848. xs: {
  849. span: 24
  850. },
  851. sm: {
  852. span: 12
  853. }
  854. },
  855. noImgUrl: require('@/assets/img/noImg.png'),
  856. queryParam: {},
  857. dataElse: [],
  858. ascription: {
  859. clipId: [], //剪辑人id
  860. shotId: [], //拍摄人id
  861. planId: [], //策划id
  862. planeId: [] //平面id
  863. },
  864. show: true,
  865. visible: false,
  866. visibleDetail: false,
  867. confirmLoading: false,
  868. activeKey: 'video',
  869. active: '0',
  870. examinelList: [
  871. {
  872. value: '0',
  873. tab: '未审核'
  874. },
  875. {
  876. value: '1',
  877. tab: '已批准'
  878. },
  879. {
  880. value: '2',
  881. tab: '已驳回'
  882. }
  883. ],
  884. // 表头
  885. columns: [],
  886. urlList: {
  887. url: '',
  888. md5: '',
  889. name: ''
  890. },
  891. watermarkUrl: {
  892. url: '',
  893. md5: '',
  894. name: ''
  895. },
  896. url: {
  897. list: '/ctop/materialInfo/list'
  898. },
  899. detail: false,
  900. form: this.$form.createForm(this),
  901. tags: [],
  902. refuseFile: [],
  903. refuseReason: '',
  904. creativeCopywriter: '',
  905. customDomain: '',
  906. region: 'oss-cn-beijing',
  907. bucket: 'ctop-media',
  908. acceptVideo: 'video/mpeg,video/mp4',
  909. acceptImage: 'image/jpeg,image/jpg,image/png',
  910. accessKeyId: 'LTAIbNbqWzSOklQV',
  911. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  912. checkArr: [],
  913. checkAll: false,
  914. showUrl: '',
  915. showUrlWater: '',
  916. materialName: '',
  917. materialDescribe: '',
  918. name: '',
  919. detail: null,
  920. add: true,
  921. id: '',
  922. role: {
  923. roleCode: '',
  924. roleName: ''
  925. },
  926. key: '0',
  927. mediaId: null,
  928. sizeType: [],
  929. size: 4,
  930. repeat: false,
  931. excellent: 0,
  932. code: '',
  933. showDataBool: false,
  934. kuaishouData: null,
  935. douyinData: null
  936. }
  937. },
  938. filters: {
  939. getDate(value) {
  940. let date = new Date(value)
  941. let y = date.getFullYear()
  942. let MM = date.getMonth() + 1
  943. MM = MM < 10 ? '0' + MM : MM
  944. let d = date.getDate()
  945. d = d < 10 ? '0' + d : d
  946. return y + '-' + MM + '-' + d
  947. }
  948. },
  949. computed: {
  950. dirImg() {
  951. let date = new Date()
  952. let y = date.getFullYear()
  953. let MM = date.getMonth() + 1
  954. MM = MM < 10 ? '0' + MM : MM
  955. let d = date.getDate()
  956. d = d < 10 ? '0' + d : d
  957. return 'image/' + y + '-' + MM + '-' + d + '/'
  958. },
  959. dirVideo() {
  960. let date = new Date()
  961. let y = date.getFullYear()
  962. let MM = date.getMonth() + 1
  963. MM = MM < 10 ? '0' + MM : MM
  964. let d = date.getDate()
  965. d = d < 10 ? '0' + d : d
  966. return 'video/' + y + '-' + MM + '-' + d + '/'
  967. }
  968. },
  969. created() {
  970. this.queryParam.type = 'VIDEO'
  971. this.queryParam.userId = this.userInfo().id
  972. this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  973. this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  974. // this.queryParam.status = key
  975. this.ipagination.pageSize = 8
  976. this.getParticipateList()
  977. // /sys/user/getRoleInfo
  978. getAction('/sys/user/getRoleInfo', {
  979. userId: this.userInfo().id
  980. }).then(res => {
  981. this.role = res
  982. })
  983. getAction('/ctop/videoWatermarkTemplate/list').then(res => {
  984. console.log(res)
  985. if (res.success) {
  986. this.sizeType = res.result.records
  987. }
  988. })
  989. },
  990. updated() {
  991. stopOtherVideo()
  992. },
  993. watch: {
  994. $route: function(n, o) {
  995. if (n.path == '/modules/material/videoMaterial') {
  996. this.queryParam.userId = this.userInfo().id
  997. this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  998. this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  999. this.loadData()
  1000. }
  1001. },
  1002. 'queryParam.projectId': function(n, o) {
  1003. if (n != '') {
  1004. this.getList(n)
  1005. }
  1006. }
  1007. },
  1008. methods: {
  1009. showData(item) {
  1010. if (item.byteDance || item.kuaiShou) {
  1011. this.showDataBool = true
  1012. this.kuaishouData = item.kuaiShou
  1013. this.douyinData = item.byteDance
  1014. } else {
  1015. this.$message.error('抖音和快手都无数据')
  1016. return
  1017. }
  1018. },
  1019. setSuccess() {
  1020. var params = {}
  1021. params.id = this.code
  1022. params.excellent = this.excellent == 1 ? 0 : 1
  1023. getAction('/ctop/materialInfo/excellent/set', params).then(res => {
  1024. if (res.success) {
  1025. this.excellent = this.excellent == 1 ? 0 : 1
  1026. this.loadData(this.ipagination.current)
  1027. }
  1028. })
  1029. },
  1030. getData(className) {
  1031. return this.form.getFieldValue(className)
  1032. },
  1033. deleteData(id) {
  1034. deleteAction('/ctop/materialInfo/delete', {
  1035. id: id
  1036. }).then(res => {
  1037. if (res.success) {
  1038. this.$message.success('删除成功')
  1039. this.loadData()
  1040. } else {
  1041. this.$message.error(res.message)
  1042. }
  1043. })
  1044. },
  1045. filterOption(input, option) {
  1046. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  1047. },
  1048. moment,
  1049. a(item) {
  1050. item.showVideo = true
  1051. },
  1052. tongbu() {
  1053. this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
  1054. userId: this.userInfo().id,
  1055. projectId: this.queryParam.projectId
  1056. })
  1057. },
  1058. implement(data) {
  1059. var params = {}
  1060. params.mediaId = this.mediaId
  1061. params.materialArray = JSON.stringify(this.checkArr)
  1062. params.accountArray = JSON.stringify(data)
  1063. postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
  1064. if (res.code == 0) {
  1065. this.checkArr = []
  1066. this.checkAll = false
  1067. }
  1068. })
  1069. // /ctop/materialUpload/uploadAccount
  1070. },
  1071. downloadByBlobShowUrl() {
  1072. console.log(this.showUrl)
  1073. fetch(this.showUrl)
  1074. .then(res => res.blob())
  1075. .then(blob => {
  1076. const a = document.createElement('a')
  1077. document.body.appendChild(a)
  1078. a.style.display = 'none'
  1079. // 使用获取到的blob对象创建的url
  1080. const url = window.URL.createObjectURL(blob)
  1081. a.href = url
  1082. // 指定下载的文件名
  1083. a.download = this.materialName
  1084. a.click()
  1085. document.body.removeChild(a)
  1086. // 移除blob对象的url
  1087. window.URL.revokeObjectURL(url)
  1088. })
  1089. },
  1090. downloadByBlob() {
  1091. fetch(this.showUrlWater)
  1092. .then(res => res.blob())
  1093. .then(blob => {
  1094. const a = document.createElement('a')
  1095. document.body.appendChild(a)
  1096. a.style.display = 'none'
  1097. // 使用获取到的blob对象创建的url
  1098. const url = window.URL.createObjectURL(blob)
  1099. a.href = url
  1100. // 指定下载的文件名
  1101. a.download = this.name
  1102. a.click()
  1103. document.body.removeChild(a)
  1104. // 移除blob对象的url
  1105. window.URL.revokeObjectURL(url)
  1106. })
  1107. },
  1108. download(href, name) {
  1109. let eleLink = document.createElement('a')
  1110. eleLink.download = name
  1111. eleLink.href = href
  1112. eleLink.click()
  1113. eleLink.remove()
  1114. },
  1115. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  1116. onCheckAllChange() {
  1117. if (this.checkAll) {
  1118. this.checkArr = []
  1119. } else {
  1120. this.checkArr = this.dataSource.map(item => {
  1121. return item.id
  1122. })
  1123. }
  1124. this.checkAll = !this.checkAll
  1125. },
  1126. searchRe() {
  1127. this.queryParam.projectId = ''
  1128. if (this.queryParam.createTime) {
  1129. this.queryParam.createTime = ''
  1130. }
  1131. this.loadData(1)
  1132. },
  1133. getList(value) {
  1134. if (value) {
  1135. this.mediaId = this.dataElse.filter(item => {
  1136. if (value == item.projectId) {
  1137. return item
  1138. }
  1139. })[0].mediaId
  1140. }
  1141. this.loadData()
  1142. },
  1143. onChangeCheck(checkedList) {
  1144. if (checkedList.length == 0) {
  1145. this.checkAll = false
  1146. }
  1147. },
  1148. handleClose(removedTag) {
  1149. const tags = this.tags.filter(tag => tag !== removedTag)
  1150. this.tags = tags
  1151. },
  1152. showInput() {
  1153. this.inputVisible = true
  1154. this.$nextTick(function() {
  1155. this.$refs.input.focus()
  1156. })
  1157. },
  1158. handleInputChange(e) {
  1159. this.inputValue = e.target.value
  1160. },
  1161. handleInputConfirm() {
  1162. const inputValue = this.inputValue
  1163. let tags = this.tags
  1164. if (inputValue && tags.indexOf(inputValue) === -1) {
  1165. tags = [...tags, inputValue]
  1166. }
  1167. Object.assign(this, {
  1168. tags,
  1169. inputVisible: false,
  1170. inputValue: ''
  1171. })
  1172. },
  1173. getWater() {
  1174. var params = qs.stringify({
  1175. id: this.id,
  1176. watermarkTemplateId: this.size
  1177. })
  1178. postAction('/ctop/materialInfo/watermark', params).then(res => {
  1179. if (res.success) {
  1180. // getAction("/ctop/videoWatermarkTask/list").then(res=>{
  1181. // console.log(res)
  1182. // })
  1183. this.$message.success('水印素材生成中')
  1184. this.visibleDetail = false
  1185. closeAllVideoFun()
  1186. this.loadData()
  1187. }
  1188. })
  1189. },
  1190. showDetail(item) {
  1191. this.visibleDetail = true
  1192. this.showUrl = item.url
  1193. this.id = item.id
  1194. this.code = item.code
  1195. this.excellent = item.excellent
  1196. if (this.active == '2') {
  1197. this.refuseReason = item.refuseReason
  1198. this.refuseFile = item.refuseFile ? JSON.parse(item.refuseFile) : null
  1199. } else if (this.active == '1') {
  1200. this.creativeCopywriter = item.creativeCopywriter
  1201. this.refuseReason = ''
  1202. this.refuseFile = []
  1203. } else {
  1204. this.refuseReason = ''
  1205. this.refuseFile = []
  1206. }
  1207. getAction('/ctop/materialInfo/getDetail', {
  1208. materialId: item.id
  1209. }).then(res => {
  1210. this.detail = res
  1211. })
  1212. getAction('/ctop/materialInfo/queryById', {
  1213. id: item.id
  1214. }).then(res => {
  1215. if (res.success) {
  1216. this.showUrlWater = res.result.watermarkUrl
  1217. this.name = res.result.watermarkCode
  1218. this.materialName = res.result.materialName
  1219. } else {
  1220. this.showUrlWater = null
  1221. this.name = null
  1222. }
  1223. })
  1224. },
  1225. okEditShow(item, editStatus) {
  1226. if (editStatus == '2') {
  1227. var params = {}
  1228. params.id = item.id
  1229. params.auditorId = this.userInfo().id
  1230. params.refuseReason = this.refuseReason
  1231. var data = this.refuseFile.map(item => {
  1232. return 'https:' + item
  1233. })
  1234. params.refuseFile = JSON.stringify(data)
  1235. params.status = editStatus
  1236. fileEdit(params).then(res => {
  1237. this.refuseFile = []
  1238. this.refuseReason = ''
  1239. this.loadData()
  1240. })
  1241. } else if (editStatus == '1') {
  1242. var params = {}
  1243. params.id = item.id
  1244. params.auditorId = this.userInfo().id
  1245. params.creativeCopywriter = this.refuseReason
  1246. params.status = editStatus
  1247. fileEdit(params).then(res => {
  1248. this.refuseReason = ''
  1249. this.loadData()
  1250. })
  1251. }
  1252. },
  1253. okEdit(e) {
  1254. this.edit(null, this.active, '2')
  1255. },
  1256. edit(item, status, editStatus) {
  1257. if (status == '0' || status == '1') {
  1258. if (editStatus == '2') {
  1259. var params = {}
  1260. params.id = this.id
  1261. params.auditorId = this.userInfo().id
  1262. params.refuseReason = this.refuseReason
  1263. var data = this.refuseFile.map(item => {
  1264. return 'https:' + item
  1265. })
  1266. params.refuseFile = JSON.stringify(data)
  1267. params.status = editStatus
  1268. fileEdit(params).then(res => {
  1269. this.refuseFile = []
  1270. this.refuseReason = ''
  1271. this.loadData()
  1272. this.visibleDetail = false
  1273. closeAllVideoFun()
  1274. })
  1275. } else {
  1276. fileEdit({
  1277. id: this.id,
  1278. status: editStatus,
  1279. auditorId: this.userInfo().id,
  1280. creativeCopywriter: this.refuseReason
  1281. }).then(res => {
  1282. this.refuseFile = []
  1283. this.refuseReason = ''
  1284. this.loadData()
  1285. this.visibleDetail = false
  1286. closeAllVideoFun()
  1287. })
  1288. }
  1289. } else {
  1290. this.add = false
  1291. this.visible = true
  1292. this.getProjectId(item.projectId)
  1293. getAction('/ctop/materialInfo/getDetail', {
  1294. materialId: item.id
  1295. }).then(res => {
  1296. if (this.activeKey == 'image') {
  1297. this.form.setFieldsValue({
  1298. projectId: item.projectId,
  1299. clipId: res.ascription.clipId,
  1300. planeId: res.ascription.planeId,
  1301. materialDescribe: item.materialDescribe
  1302. })
  1303. } else {
  1304. this.form.setFieldsValue({
  1305. projectId: item.projectId,
  1306. clipId: res.ascription.clipId,
  1307. planId: res.ascription.planId,
  1308. shotId: res.ascription.shotId,
  1309. materialDescribe: item.materialDescribe
  1310. })
  1311. }
  1312. this.tags = res.tag
  1313. this.urlList.url = item.url
  1314. this.urlList.md5 = item.code
  1315. this.urlList.name = item.materialName
  1316. this.watermarkUrl.url = item.watermarkUrl
  1317. this.watermarkUrl.md5 = item.watermarkCode
  1318. this.watermarkUrl.name = item.watermarkMaterialName
  1319. this.id = item.id
  1320. })
  1321. }
  1322. },
  1323. handleOk() {
  1324. this.form.validateFieldsAndScroll((err, values) => {
  1325. if (err) {
  1326. // 这里做逻辑处理
  1327. } else {
  1328. var params = {}
  1329. var roleCode = {}
  1330. for (const key in this.role) {
  1331. if (key == 'roleCode') {
  1332. this.role[key] = this.role[key] + 'Id'
  1333. roleCode[this.role[key]] = this.userInfo().id
  1334. }
  1335. }
  1336. params.id = this.add ? null : this.id
  1337. params.code = this.urlList.md5
  1338. params.url = this.urlList.url
  1339. params.materialName = this.urlList.name
  1340. params.watermarkCode = this.watermarkUrl.md5
  1341. params.watermarkUrl = this.watermarkUrl.url
  1342. params.watermarkMaterialName = this.watermarkUrl.name
  1343. params.userId = this.userInfo().id
  1344. params.projectId = values.projectId
  1345. params.materialDescribe = values.materialDescribe
  1346. params.type = 'VIDEO'
  1347. params.ascription =
  1348. this.activeKey == 'image'
  1349. ? roleCode
  1350. : {
  1351. planId: values.planId,
  1352. shotId: values.shotId,
  1353. clipId: values.clipId
  1354. }
  1355. params.tag = this.tags
  1356. if (this.add) {
  1357. fileInsert(params).then(res => {
  1358. if (res.success) {
  1359. this.form.resetFields()
  1360. this.urlList = {
  1361. url: '',
  1362. md5: '',
  1363. name: ''
  1364. }
  1365. this.watermarkUrl = {
  1366. url: '',
  1367. md5: '',
  1368. name: ''
  1369. }
  1370. this.tags = []
  1371. this.loadData()
  1372. this.visible = false
  1373. this.add = true
  1374. for (const key in this.role) {
  1375. if (key == 'roleCode') {
  1376. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  1377. }
  1378. }
  1379. this.$message.success('素材上传成功')
  1380. } else {
  1381. this.$message.error(res.message)
  1382. }
  1383. })
  1384. } else {
  1385. fileEdit({
  1386. ...params,
  1387. status: '0'
  1388. }).then(res => {
  1389. this.form.resetFields()
  1390. this.urlList = {
  1391. url: '',
  1392. md5: '',
  1393. name: ''
  1394. }
  1395. this.watermarkUrl = {
  1396. url: '',
  1397. md5: '',
  1398. name: ''
  1399. }
  1400. this.tags = []
  1401. this.loadData()
  1402. this.visible = false
  1403. this.add = true
  1404. for (const key in this.role) {
  1405. if (key == 'roleCode') {
  1406. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  1407. }
  1408. }
  1409. })
  1410. }
  1411. }
  1412. })
  1413. },
  1414. close() {
  1415. // this.form.resetFields()
  1416. // this.urlList = { url: '', md5: '', name: '' }
  1417. // this.watermarkUrl = { url: '', md5: '', name: '' }
  1418. // this.tags = []
  1419. },
  1420. onChange(date, dateString) {},
  1421. callbackTwo(key) {
  1422. this.checkAll = false
  1423. this.checkArr = []
  1424. if (this.form.getFieldValue('projectId')) {
  1425. this.form.setFieldsValue({
  1426. projectId: ''
  1427. })
  1428. }
  1429. this.queryParam.status = key
  1430. this.loadData(1)
  1431. },
  1432. overUpload(urlAll) {
  1433. this.confirmLoading = true
  1434. this.repeat = false
  1435. this.$message.success('上传成功')
  1436. // var img = null
  1437. // img = new Image()
  1438. // img.src = urlAll[0]
  1439. // if (img.complete) {
  1440. // // 打印
  1441. // if (img.width == 720) {
  1442. // if (img.height == 1280) {
  1443. // that.material.push(true)
  1444. // } else {
  1445. // that.material.push(false)
  1446. // }
  1447. // } else if (img.width == 1080) {
  1448. // if (img.height == 1920) {
  1449. // that.material.push(true)
  1450. // } else {
  1451. // that.material.push(false)
  1452. // }
  1453. // } else if (img.width == 1280) {
  1454. // if (img.height == 720) {
  1455. // that.material.push(true)
  1456. // } else {
  1457. // that.material.push(false)
  1458. // }
  1459. // } else if (img.width == 1920) {
  1460. // if (img.height == 1080) {
  1461. // that.material.push(true)
  1462. // } else {
  1463. // that.material.push(false)
  1464. // }
  1465. // } else {
  1466. // that.material.push(false)
  1467. // }
  1468. // console.log(this.material)
  1469. // } else {
  1470. // // 加载完成执行
  1471. // img.onload = function() {
  1472. // // 打印
  1473. // // alert('from:onload : width:' + img.width + ',height:' + img.height)
  1474. // if (img.width == 720) {
  1475. // if (img.height == 1280) {
  1476. // that.material.push(true)
  1477. // } else {
  1478. // that.material.push(false)
  1479. // }
  1480. // } else if (img.width == 1080) {
  1481. // if (img.height == 1920) {
  1482. // that.material.push(true)
  1483. // } else {
  1484. // that.material.push(false)
  1485. // }
  1486. // } else if (img.width == 1280) {
  1487. // if (img.height == 720) {
  1488. // that.material.push(true)
  1489. // } else {
  1490. // that.material.push(false)
  1491. // }
  1492. // } else if (img.width == 1920) {
  1493. // if (img.height == 1080) {
  1494. // that.material.push(true)
  1495. // } else {
  1496. // that.material.push(false)
  1497. // }
  1498. // } else {
  1499. // that.material.push(false)
  1500. // }
  1501. // }
  1502. // }
  1503. },
  1504. file(file) {
  1505. var bmf = new BMF()
  1506. var that = this
  1507. return new Promise(function(resolve, reject) {
  1508. bmf.md5(file[0], (err, md5) => {
  1509. that.urlList.name = file[0].name
  1510. that.urlList.md5 = md5
  1511. fileCheck({
  1512. code: md5,
  1513. projectId: that.getData('projectId')
  1514. }).then(res => {
  1515. if (res.code == 0) {
  1516. that.$message.error('此素材已经上传')
  1517. that.repeat = true
  1518. reject()
  1519. } else {
  1520. that.repeat = false
  1521. resolve()
  1522. // reject()
  1523. }
  1524. })
  1525. })
  1526. })
  1527. },
  1528. fileWater(file) {
  1529. var bmf = new BMF()
  1530. var that = this
  1531. return new Promise(function(resolve, reject) {
  1532. bmf.md5(file[0], (err, md5) => {
  1533. that.watermarkUrl.name = file[0].name
  1534. that.watermarkUrl.md5 = md5
  1535. fileCheck({
  1536. code: md5
  1537. }).then(res => {
  1538. if (res.code == 0) {
  1539. that.$message.error('此素材已经上传')
  1540. reject()
  1541. } else {
  1542. resolve()
  1543. }
  1544. })
  1545. })
  1546. })
  1547. },
  1548. getParticipateList() {
  1549. getAction('/ctop/projectMember/participateList', {
  1550. userId: this.userInfo().id
  1551. }).then(res => {
  1552. if (res.code == 0) {
  1553. this.dataElse = res.result
  1554. }
  1555. })
  1556. },
  1557. getProjectId(items) {
  1558. this.form.resetFields(['clipId', 'planId', 'shotId'])
  1559. getAction('/ctop/projectMember/getMemberList', {
  1560. projectId: items
  1561. }).then(res => {
  1562. if (res.code == 0) {
  1563. this.ascription.clipId = res.result.filter(item => {
  1564. if (
  1565. item.roleCode == 'clip' ||
  1566. item.roleCode == 'plan' ||
  1567. item.roleCode == 'designTeamLeader' ||
  1568. item.roleCode == 'shot' ||
  1569. item.roleCode == 'plane'
  1570. ) {
  1571. return {
  1572. userId: item.userId,
  1573. userName: item.userName
  1574. }
  1575. }
  1576. })
  1577. this.ascription.shotId = res.result.filter(item => {
  1578. if (
  1579. item.roleCode == 'clip' ||
  1580. item.roleCode == 'shot' ||
  1581. item.roleCode == 'plan' ||
  1582. item.roleCode == 'designTeamLeader' ||
  1583. item.roleCode == 'plane'
  1584. ) {
  1585. return {
  1586. userId: item.userId,
  1587. userName: item.userName
  1588. }
  1589. }
  1590. })
  1591. this.ascription.planId = res.result.filter(item => {
  1592. if (
  1593. item.roleCode == 'shot' ||
  1594. item.roleCode == 'plan' ||
  1595. item.roleCode == 'designTeamLeader' ||
  1596. item.roleCode == 'clip' ||
  1597. item.roleCode == 'plane'
  1598. ) {
  1599. return {
  1600. userId: item.userId,
  1601. userName: item.userName
  1602. }
  1603. }
  1604. })
  1605. this.ascription.planeId = res.result.filter(item => {
  1606. if (item.roleCode == 'plane') {
  1607. return {
  1608. userId: item.userId,
  1609. userName: item.userName
  1610. }
  1611. }
  1612. })
  1613. }
  1614. })
  1615. },
  1616. getDataSource(page, pageSize) {
  1617. this.ipagination.current = page
  1618. this.checkArr = []
  1619. this.checkAll = false
  1620. this.loadData()
  1621. }
  1622. }
  1623. }
  1624. </script>
  1625. <style scoped>
  1626. @import '~@assets/less/common.less';
  1627. </style>