videoMaterial.vue 150 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401
  1. <style lang="scss">
  2. ::v-deep .usage-details-modal {
  3. width: 750px !important;
  4. }
  5. .is-disabled .el-checkbox__inner {
  6. display: none !important;
  7. }
  8. .downLoad .ant-form-item-control-wrapper {
  9. width: 70%;
  10. }
  11. #material-card .ant-tabs-tab {
  12. border: 1px solid gainsboro !important;
  13. }
  14. #material-card .ant-tabs-top-bar {
  15. position: relative;
  16. z-index: 100;
  17. }
  18. #material-card .ant-badge-count {
  19. top: 0px;
  20. }
  21. .detail .ant-form-item {
  22. margin-bottom: 10px !important;
  23. }
  24. .ant-carousel .slick-slide {
  25. text-align: center;
  26. // height: 160px;
  27. // line-height: 160px;
  28. background: #364d79;
  29. overflow: hidden;
  30. }
  31. .ad_cover_container .ant-card-body {
  32. padding: 0;
  33. }
  34. .ant-carousel .slick-slide h3 {
  35. color: #fff;
  36. }
  37. .ant-carousel .custom-slick-arrow {
  38. width: 25px;
  39. height: 25px;
  40. font-size: 25px;
  41. color: #fff;
  42. background-color: rgba(31, 45, 61, 0.11);
  43. opacity: 0.3;
  44. }
  45. .ant-carousel .custom-slick-arrow:before {
  46. display: none;
  47. }
  48. .ant-carousel .custom-slick-arrow:hover {
  49. opacity: 0.5;
  50. }
  51. .cover_carousel_con .slick-dots {
  52. bottom: 55px;
  53. }
  54. .add-image-material .draggable-list {
  55. display: block !important;
  56. }
  57. li.chouzhen.first:before {
  58. font-size: 12px;
  59. content: '首帧';
  60. position: absolute;
  61. top: 7px;
  62. left: 5px;
  63. width: 36px;
  64. height: 20px;
  65. color: rgb(255, 255, 255);
  66. line-height: 20px;
  67. text-align: center;
  68. background: rgba(0, 0, 0, 0.5);
  69. border-radius: 2px;
  70. }
  71. .table-page-search-wrapper {
  72. .el-cascader .el-input {
  73. cursor: pointer;
  74. height: 100%;
  75. }
  76. .el-cascader .el-input .el-input__inner {
  77. text-overflow: ellipsis;
  78. height: 100%;
  79. position: relative;
  80. top: -4px;
  81. }
  82. .el-cascader .el-input .el-icon-arrow-down {
  83. -webkit-transition: -webkit-transform 0.3s;
  84. transition: -webkit-transform 0.3s;
  85. transition: transform 0.3s;
  86. transition: transform 0.3s, -webkit-transform 0.3s;
  87. transition: transform 0.3s, -webkit-transform 0.3s;
  88. font-size: 14px;
  89. position: relative;
  90. top: -4px;
  91. }
  92. .el-cascader .el-input .el-icon-arrow-down.is-reverse {
  93. -webkit-transform: rotateZ(180deg);
  94. transform: rotateZ(180deg);
  95. position: relative;
  96. top: 2px;
  97. }
  98. .el-cascader .el-input .el-input__inner .el-input__icon.el-icon-arrow-down {
  99. text-overflow: ellipsis;
  100. height: 100%;
  101. position: relative;
  102. top: -4px;
  103. }
  104. .el-cascader .el-input .el-input__suffix .el-input__icon.el-icon-circle-close {
  105. text-overflow: ellipsis;
  106. height: 100%;
  107. position: relative;
  108. top: -4px;
  109. }
  110. }
  111. </style>
  112. <style lang="scss" scoped>
  113. .chouzhen {
  114. border-style: solid;
  115. border-width: 1px;
  116. border-color: #e4e4e4;
  117. width: calc(20% - 10px);
  118. padding: 10px;
  119. margin-right: 10px;
  120. margin-bottom: 10px;
  121. display: flex;
  122. align-items: center;
  123. background: #fff;
  124. position: relative;
  125. z-index: 99;
  126. float: left;
  127. }
  128. .content {
  129. display: flex !important;
  130. flex-direction: column;
  131. justify-content: center;
  132. align-items: center;
  133. .slick-dots {
  134. bottom: 55px;
  135. }
  136. }
  137. .video-content {
  138. width: 50%;
  139. padding: 10px;
  140. box-sizing: border-box;
  141. display: flex;
  142. flex-direction: column;
  143. justify-content: center;
  144. border-right: 1px solid #f2f2f2;
  145. }
  146. .tag-video {
  147. position: absolute;
  148. right: 0px;
  149. top: 8px;
  150. padding: 4px;
  151. border-radius: 2px;
  152. line-height: 16px;
  153. font-size: 12px;
  154. color: #fff;
  155. background-color: rgba(0, 0, 0, 0.3);
  156. }
  157. .home-item {
  158. overflow: hidden;
  159. }
  160. @media only screen and (min-width: 1200px) {
  161. .home-item {
  162. border-style: solid;
  163. border-width: 1px;
  164. border-color: #e4e4e4;
  165. width: calc(50% - 10px);
  166. padding: 10px;
  167. margin-right: 10px;
  168. margin-bottom: 10px;
  169. display: flex;
  170. align-items: center;
  171. background: #fff;
  172. position: relative;
  173. z-index: 99;
  174. }
  175. }
  176. /*>=1024的设备*/
  177. // @media (min-width: 1100px) {
  178. // .checkbox_item_container {
  179. // width:70%
  180. // }
  181. // } /*>=1100的设备*/
  182. @media only screen and (min-width: 1250px) {
  183. .home-item {
  184. border-style: solid;
  185. border-width: 1px;
  186. border-color: #e4e4e4;
  187. width: calc(25% - 10px);
  188. padding: 10px;
  189. margin-right: 10px;
  190. margin-bottom: 10px;
  191. display: flex;
  192. align-items: center;
  193. background: #fff;
  194. position: relative;
  195. z-index: 99;
  196. }
  197. }
  198. /*>=1280的设备*/
  199. // @media (min-width: 1366px) {
  200. // }
  201. // @media (min-width: 1440px) {
  202. // }
  203. // @media (min-width: 1680px) {
  204. // }
  205. // @media (min-width: 1920px) {
  206. // .home-item {
  207. // border-style: solid;
  208. // border-width: 1px;
  209. // border-color: #e4e4e4;
  210. // width: calc(25% - 10px);
  211. // padding: 10px;
  212. // margin-right: 10px;
  213. // margin-bottom: 10px;
  214. // display: flex;
  215. // align-items: center;
  216. // background: #fff;
  217. // position: relative;
  218. // z-index: 99;
  219. // cursor: pointer;
  220. // }
  221. // }
  222. .actor-photo-list {
  223. display: flex;
  224. padding-left: 0;
  225. li {
  226. width: 25%;
  227. margin: 10px;
  228. position: relative;
  229. height: 250px;
  230. border: 1px solid #f2f2f2;
  231. img,
  232. video {
  233. width: 100%;
  234. margin-top: auto;
  235. margin-bottom: auto;
  236. top: 0;
  237. bottom: 0;
  238. position: absolute;
  239. max-height: 250px;
  240. }
  241. }
  242. }
  243. .home-card {
  244. width: 100%;
  245. overflow: hidden;
  246. padding: 10px 0px;
  247. display: flex;
  248. flex-wrap: wrap;
  249. margin-right: -10px;
  250. .home-right {
  251. width: 100%;
  252. }
  253. .bg:after {
  254. content: '';
  255. width: 110%;
  256. height: 110%;
  257. position: absolute;
  258. left: -5%;
  259. top: -5%;
  260. background: inherit;
  261. filter: blur(10px);
  262. z-index: 2;
  263. }
  264. }
  265. .bh {
  266. height: 60px;
  267. line-height: 30px;
  268. overflow: hidden;
  269. text-overflow: ellipsis;
  270. -webkit-line-clamp: 2;
  271. display: -webkit-box;
  272. -webkit-box-orient: vertical;
  273. }
  274. .bhShow {
  275. height: 100px;
  276. line-height: 25px;
  277. text-align: center;
  278. }
  279. .bhShow span {
  280. font-size: 14px;
  281. }
  282. .show-data {
  283. width: 50%;
  284. display: flex;
  285. flex-direction: column;
  286. align-items: flex-start;
  287. }
  288. a {
  289. font-size: 14px;
  290. }
  291. .actor-photo-list {
  292. display: flex;
  293. padding-left: 0;
  294. li {
  295. width: 25%;
  296. margin: 10px;
  297. position: relative;
  298. height: 250px;
  299. border: 1px solid #f2f2f2;
  300. list-style: none;
  301. img,
  302. video {
  303. width: 100%;
  304. margin-top: auto;
  305. margin-bottom: auto;
  306. top: 0;
  307. bottom: 0;
  308. position: absolute;
  309. max-height: 250px;
  310. }
  311. }
  312. }
  313. </style>
  314. <template>
  315. <a-card :bordered="false" class="only-video-material-disable">
  316. <!-- 查询区域 -->
  317. <div class="table-page-search-wrapper">
  318. <a-form layout="inline" :selfUpdate="true">
  319. <a-row :gutter="24">
  320. <a-col :md="8" :sm="8">
  321. <!-- <a-form-item label="项目名称"> -->
  322. <selectTable :projectId.sync="queryParam.productId" ref="selectTable"></selectTable>
  323. </a-col>
  324. <a-col :md="8" :sm="8">
  325. <selectTableProject :projectId.sync="queryParam.projectId" :productId="queryParam.productId" ref="selectTableProject"></selectTableProject>
  326. </a-col>
  327. <a-col :md="8" :sm="8">
  328. <a-form-item label="素材名称">
  329. <a-input placeholder="请输入素材名称" v-model="queryParam.materialName"></a-input>
  330. </a-form-item>
  331. </a-col>
  332. <!-- -->
  333. <a-col :md="8" :sm="8">
  334. <a-form-item label="搜索时间">
  335. <a-range-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width: 100%" />
  336. </a-form-item>
  337. </a-col>
  338. <!-- -->
  339. <a-col :md="8" :sm="8">
  340. <a-form-item label="唯一标识">
  341. <a-input placeholder="请输入素材唯一标识" v-model="queryParam.code"></a-input>
  342. </a-form-item>
  343. </a-col>
  344. <a-col :md="8" :sm="8">
  345. <a-form-item label="视频标签">
  346. <el-cascader
  347. placeholder="请选择视频的标签"
  348. v-model="labelValue"
  349. :options="options"
  350. :props="{ checkStrictly: true, value: 'tagCode', label: 'tagName', expandTrigger: 'hover' }"
  351. clearable
  352. style="width: 100%; height: 32px"
  353. filterable
  354. ></el-cascader>
  355. </a-form-item>
  356. </a-col>
  357. <a-col :md="8" :sm="8">
  358. <a-form-item label="剪辑">
  359. <a-select v-model="queryParam.clipId" allowClear show-search :filter-option="filterOption">
  360. <a-select-option v-for="item in designList" :key="item.userId" :value="item.userId">
  361. {{ item.companyName + '_' + item.userName }}
  362. </a-select-option>
  363. </a-select>
  364. </a-form-item>
  365. </a-col>
  366. <a-col :md="8" :sm="8">
  367. <a-form-item label="拍摄">
  368. <a-select v-model="queryParam.shotId" allowClear show-search :filter-option="filterOption">
  369. <a-select-option v-for="item in designList" :key="item.userId" :value="item.userId">
  370. {{ item.companyName + '_' + item.userName }}
  371. </a-select-option>
  372. </a-select>
  373. </a-form-item>
  374. </a-col>
  375. <a-col :md="8" :sm="8">
  376. <a-form-item label="编导">
  377. <a-select v-model="queryParam.planId" allowClear show-search :filter-option="filterOption">
  378. <a-select-option v-for="item in designList" :key="item.userId" :value="item.userId">
  379. {{ item.companyName + '_' + item.userName }}
  380. </a-select-option>
  381. </a-select>
  382. </a-form-item>
  383. </a-col>
  384. <a-col :md="8" :sm="8">
  385. <a-form-item label="设计负责人">
  386. <a-input placeholder="请输入设计负责人" v-model="queryParam.leaderName"></a-input>
  387. </a-form-item>
  388. </a-col>
  389. <a-col :md="8" :sm="8">
  390. <a-form-item label="是否创新视频">
  391. <a-select v-model="queryParam.materialInnovate" allowClear>
  392. <a-select-option :value="1">
  393. </a-select-option>
  394. <a-select-option :value="2">
  395. </a-select-option>
  396. </a-select>
  397. </a-form-item>
  398. </a-col>
  399. <a-col :md="8" :sm="8" v-if="active == '1'">
  400. <a-form-item label="状态">
  401. <a-select v-model="queryParam.videoStatus">
  402. <a-select-option :value="0">
  403. 不限
  404. </a-select-option>
  405. <a-select-option :value="1">
  406. 未推送
  407. </a-select-option>
  408. <a-select-option :value="2">
  409. 未推送到快手
  410. </a-select-option>
  411. <a-select-option :value="3">
  412. 未推送到头条
  413. </a-select-option>
  414. <a-select-option :value="4">
  415. 推送到快手
  416. </a-select-option>
  417. <a-select-option :value="5">
  418. 推送到头条
  419. </a-select-option>
  420. <a-select-option :value="6">
  421. 已推送到快手&头条
  422. </a-select-option>
  423. </a-select>
  424. </a-form-item>
  425. </a-col>
  426. <a-col :md="8" :sm="8">
  427. <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
  428. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  429. <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
  430. </span>
  431. </a-col>
  432. </a-row>
  433. </a-form>
  434. </div>
  435. <!-- table区域-begin -->
  436. <!-- <div> -->
  437. <!-- 操作按钮区域 -->
  438. <div class="table-operator" style="position: relative; z-index: 100">
  439. <a-button
  440. @click="
  441. visible = true
  442. confirmLoading = false
  443. add = true
  444. "
  445. type="primary"
  446. icon="plus"
  447. >新增</a-button
  448. >
  449. <a-button
  450. @click="batchUploadVisible=true"
  451. type="primary"
  452. icon="plus"
  453. >批量新增</a-button
  454. >
  455. <a-button
  456. @click="onCheckAllChange"
  457. v-if="
  458. queryParam.productId &&
  459. active == '1' &&
  460. (role.roleCode == 'operator' ||
  461. role.roleCode == 'kuaishouOperationManager' ||
  462. role.roleCode == 'admin' ||
  463. role.roleCode == 'operationAssistant' ||
  464. role.roleCode == 'touTiaoOperationManager')
  465. "
  466. >{{ checkAll ? '取消 ( ' + checkArr.length + ' )' : '全选' }}</a-button
  467. >
  468. <a-button
  469. v-if="
  470. queryParam.productId &&
  471. active == '1' &&
  472. (role.roleCode == 'operator' ||
  473. role.roleCode == 'kuaishouOperationManager' ||
  474. role.roleCode == 'admin' ||
  475. role.roleCode == 'operationAssistant' ||
  476. role.roleCode == 'touTiaoOperationManager')
  477. "
  478. :disabled="checkArr.length == 0"
  479. @click="tongbu('1')"
  480. >一键同步头条</a-button
  481. >
  482. <a-button
  483. v-if="
  484. queryParam.productId &&
  485. active == '1' &&
  486. (role.roleCode == 'operator' ||
  487. role.roleCode == 'kuaishouOperationManager' ||
  488. role.roleCode == 'admin' ||
  489. role.roleCode == 'operationAssistant' ||
  490. role.roleCode == 'touTiaoOperationManager')
  491. "
  492. :disabled="checkArr.length == 0"
  493. @click="tongbu('3')"
  494. >一键同步头条内广</a-button
  495. >
  496. <a-button
  497. v-if="
  498. queryParam.productId &&
  499. active == '1' &&
  500. (role.roleCode == 'operator' ||
  501. role.roleCode == 'kuaishouOperationManager' ||
  502. role.roleCode == 'admin' ||
  503. role.roleCode == 'operationAssistant' ||
  504. role.roleCode == 'touTiaoOperationManager')
  505. "
  506. :disabled="checkArr.length == 0"
  507. @click="tongbu('2')"
  508. >一键同步快手</a-button
  509. >
  510. <a-button
  511. v-if="
  512. queryParam.productId &&
  513. active == '1' &&
  514. (role.roleCode == 'operator' ||
  515. role.roleCode == 'kuaishouOperationManager' ||
  516. role.roleCode == 'admin' ||
  517. role.roleCode == 'operationAssistant' ||
  518. role.roleCode == 'touTiaoOperationManager')
  519. "
  520. :disabled="checkArr.length == 0"
  521. @click="tongbu('4')"
  522. >一键同步快手内广</a-button
  523. >
  524. <a-button
  525. v-if="active === '1'"
  526. type="primary"
  527. @click="handleAllChangeFace"
  528. >
  529. 换脸列表
  530. </a-button
  531. >
  532. </div>
  533. <a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
  534. <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
  535. <a-spin :spinning="spinning">
  536. <div v-if="dataSource.length > 0">
  537. <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
  538. <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
  539. <span v-if="items.excellent == 0"></span>
  540. <span
  541. v-else
  542. 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"
  543. >优秀素材</span
  544. >
  545. <div class="home-right">
  546. <a-badge
  547. :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
  548. :numberStyle="{ backgroundColor: '#52c41a' }"
  549. style="width: 100%; display: flex"
  550. @click.stop
  551. >
  552. <span
  553. style="
  554. color: #999;
  555. fontsize: 14px;
  556. padding-bottom: 10px;
  557. display: inline-block;
  558. width: 100%;
  559. white-space: nowrap;
  560. overflow: hidden;
  561. text-overflow: ellipsis;
  562. "
  563. :title="items.projectName"
  564. >{{ (items.mediaId == "1" ? '头条' :items.mediaId == "2"? '快手':items.mediaId == "3"?'内广':'内广') +(items.projectName?'_'+items.projectName:'') }}</span
  565. >
  566. <span
  567. style="
  568. color: #999;
  569. fontsize: 14px;
  570. padding-bottom: 10px;
  571. display: inline-block;
  572. width: 100%;
  573. white-space: nowrap;
  574. overflow: hidden;
  575. text-overflow: ellipsis;
  576. "
  577. :title="items.materialName"
  578. >{{ items.materialName }}</span
  579. >
  580. <a-icon
  581. type="close-circle"
  582. @click="deleteData(items.id)"
  583. v-show="active == '0'||active == '2'"
  584. v-if="items.userId == userInfo().id"
  585. />
  586. </a-badge>
  587. <div style="display: flex; justify-content: center; width: 100%; height: 200px; position: relative">
  588. <!-- <video
  589. :src="items.url"
  590. @canplay="a(items)"
  591. style="height:200px;max-width:100%;position:absolute;z-index:10;"
  592. />-->
  593. <div style="width: 100px; position: absolute; left: 0; z-index: 1000">
  594. <a-tooltip placement="top">
  595. <template slot="title">
  596. <span>{{ items.kuaishouEffiType == 1 ? '快手有效视频' : '已经同步到快手平台' }}</span>
  597. </template>
  598. <img
  599. style="width: 30px; height: 30px"
  600. v-if="items.syncKuaishou == 2"
  601. :style="{ filter: items.kuaishouEffiType == 1 ? 'grayscale(0%)' : 'grayscale(100%)' }"
  602. src="./kuaishou.jpg"
  603. />
  604. </a-tooltip>
  605. <a-tooltip placement="top">
  606. <template slot="title">
  607. <span>{{ items.toutiaoEffiType == 1 ? '抖音有效视频' : '已经同步到抖音平台' }}</span>
  608. </template>
  609. <img
  610. v-if="items.syncBytedance == 2 && items.toutiaoEffiType == 1"
  611. style="width: 30px; height: 30px; margin-left: 5px"
  612. src="./douyin.jpg"
  613. alt
  614. />
  615. <img
  616. v-else-if="items.syncBytedance == 2 && items.toutiaoEffiType == 0"
  617. style="width: 30px; height: 30px; margin-left: 5px"
  618. src="./douyinhui.jpg"
  619. alt
  620. />
  621. </a-tooltip>
  622. </div>
  623. <a-icon
  624. type="fire"
  625. style="font-size: 20px; position: absolute; right: 0; bottom: 10px; z-index: 1000; color: red"
  626. v-if="items.whetherUnaudited"
  627. />
  628. <a-popover
  629. title="视频标签"
  630. @visibleChange="changeTag(items.code)"
  631. :overlayStyle="{ width: '400px' }"
  632. >
  633. <template slot="content" v-if="videoTag.length > 0">
  634. <!-- {{ videoTag.join(',') }} -->
  635. <!-- <br v-if="index%3"/> -->
  636. <a-tag v-for="(item, index) of videoTag" :key="index" style="margin: 5px">{{ item }}</a-tag>
  637. <a-tag>{{ items.materialInnovate == 2? '创新素材' : '非创新素材' }}</a-tag>
  638. </template>
  639. <template slot="content" v-else>
  640. <div style="width: 100%; text-align: center">加载中。。。</div>
  641. </template>
  642. <img
  643. :src="items.coverUrl"
  644. alt
  645. style="height: 200px; max-width: 100%; position: absolute; z-index: 10"
  646. />
  647. </a-popover>
  648. <!-- <img
  649. src="./timg.gif"
  650. v-if="!items.showVideo"
  651. alt=""
  652. style="height:200px;max-width:100%;position:absolute;z-index:11;"
  653. @click.stop
  654. />-->
  655. </div>
  656. <div style="width: 100%; height: 1px; border-bottom: 1px solid #f2f2f2; margin-top: 5px"></div>
  657. <div v-if="active == '2'" class="bh">驳回原因:{{ items.refuseReason }}</div>
  658. <div
  659. v-if="active == '1'"
  660. class="bhShow"
  661. style="display: flex; justify-content: space-between"
  662. @click.stop="showData(items)"
  663. >
  664. <div class="show-data">
  665. <span>抖音</span>
  666. <span>消耗:{{ items.bytedanceCost || 0 }}</span>
  667. <span style="display: inline-block;text-align: left;width: 400px;">审核通过时间:{{ items.confirmTime || '-' }}</span>
  668. <!-- <span>封面点击:{{ items.byteDance.click }}</span> -->
  669. <!-- <span>封面展示:{{ items.byteDance.showNum }}</span> -->
  670. </div>
  671. <!-- <div v-else style="line-height:100px;" class="show-data">
  672. <span>抖音:无</span>
  673. </div> -->
  674. <div class="show-data">
  675. <span>快手</span>
  676. <span>消耗:{{ items.cost || 0 }}</span>
  677. <!-- <span>封面点击:{{ items.kuaiShou.photoClick }}</span> -->
  678. <!-- <span>封面展示:{{ items.kuaiShou.photoShow }}</span> -->
  679. </div>
  680. <!-- <div v-else style="line-height:100px;" class="show-data">
  681. <span>快手:无</span>
  682. </div> -->
  683. </div>
  684. <div
  685. style="width: 100%; height: 1px; border-bottom: 1px solid #f2f2f2; margin-top: 5px"
  686. v-if="active != '0'"
  687. ></div>
  688. <span
  689. style="color: black; fontsize: 16px; padding-top: 10px; display: block; width: 100%"
  690. @click.stop
  691. >
  692. <!-- <a href="javascript:;" style="margin-right:20px" @click="edit(items, '2')" v-show="active == '2'"
  693. v-if="items.userId == userInfo().id">
  694. 修改</a>
  695. <a href="javascript:;" style="margin-right:20px" v-show="active !='3'" @click="personEdit(items, '2')"
  696. v-if="items.userId == userInfo().id||role.roleCode =='designTeamLeader'">
  697. 人员修改</a>-->
  698. <a-popconfirm
  699. @confirm="okEditShow(items, '2')"
  700. v-show="active != '2' && active != '3'"
  701. v-if="
  702. role.roleCode == 'operator' ||
  703. role.roleCode == 'kuaishouOperationManager' ||
  704. role.roleCode == 'admin' ||
  705. role.roleCode == 'operationAssistant' ||
  706. role.roleCode == 'touTiaoOperationManager'
  707. "
  708. >
  709. <div slot="title">
  710. <div>
  711. 驳回原因:
  712. <a-textarea
  713. placeholder="请输入原因"
  714. v-model="refuseReason"
  715. :autosize="{ minRows: 3, maxRows: 10 }"
  716. />
  717. </div>
  718. <div>
  719. 截图:
  720. <uploadFile v-if="refuseFile" :value.sync="refuseFile" :fileCount="15" uploadType="image" />
  721. <!-- <upload-to-ali
  722. v-model="refuseFile"
  723. :customDomain="customDomain"
  724. multiple
  725. preview
  726. :region="region"
  727. :bucket="bucket"
  728. :accept="acceptImage"
  729. :max="10"
  730. :size="1024000"
  731. :accessKeyId="accessKeyId"
  732. :accessKeySecret="accessKeySecret"
  733. :dir="dirImg"
  734. ></upload-to-ali>-->
  735. </div>
  736. </div>
  737. <a href="javascript:;" style="margin-right: 20px">驳回</a>
  738. </a-popconfirm>
  739. <a v-show="active === '1'" style="margin-right: 20px" @click="handleChangeFace(items)">换脸</a>
  740. <a-popconfirm
  741. @confirm="okEditShow(items, '1')"
  742. v-show="active != '1' && active != '3'"
  743. v-if="
  744. role.roleCode == 'operator' ||
  745. role.roleCode == 'kuaishouOperationManager' ||
  746. role.roleCode == 'admin' ||
  747. role.roleCode == 'operationAssistant' ||
  748. role.roleCode == 'touTiaoOperationManager'
  749. "
  750. >
  751. <div slot="title">
  752. <div>
  753. 广告语:
  754. <a-textarea
  755. placeholder="请输入"
  756. v-model="refuseReason"
  757. :autosize="{ minRows: 3, maxRows: 10 }"
  758. />
  759. </div>
  760. </div>
  761. <a
  762. href="javascript:;"
  763. style="margin-right: 20px"
  764. v-show="active != '1'"
  765. v-if="
  766. role.roleCode == 'operator' ||
  767. role.roleCode == 'kuaishouOperationManager' ||
  768. role.roleCode == 'admin' ||
  769. role.roleCode == 'operationAssistant' ||
  770. role.roleCode == 'touTiaoOperationManager'
  771. "
  772. >通过审核</a
  773. >
  774. </a-popconfirm>
  775. <!-- <a v-show="active!='3'" style="margin-right:20px" @click="addImage(items)">添加封面</a>
  776. <a style="margin-right:20px" @click="showImage(items)">推荐封面</a>-->
  777. <a-dropdown style="margin-right: 20px">
  778. <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
  779. 更多操作
  780. <a-icon type="down" />
  781. </a>
  782. <a-menu slot="overlay">
  783. <a-menu-item key="0" v-show="active == '2'" v-if="items.userId == userInfo().id">
  784. <a href="javascript:;" style="margin-right: 20px" @click="edit(items, '2')">修改</a>
  785. </a-menu-item>
  786. <a-menu-item
  787. key="1"
  788. v-show="active != '3'"
  789. v-if="items.userId == userInfo().id || role.roleCode == 'designTeamLeader'"
  790. >
  791. <a href="javascript:;" style="margin-right: 20px" @click="personEdit(items, '2')">人员修改</a>
  792. </a-menu-item>
  793. <a-menu-item key="3" v-show="active != '3'">
  794. <a style="margin-right: 20px" @click="addImage(items)">添加封面</a>
  795. </a-menu-item>
  796. <a-menu-item key="4">
  797. <a style="margin-right: 20px" @click="showImage(items)">推荐封面</a>
  798. </a-menu-item>
  799. <a-menu-item key="5">
  800. <a href="javascript:;" style="margin-right: 20px" @click="editTagList(items)">修改标签</a>
  801. </a-menu-item>
  802. <a-menu-item key="6" v-show="active !== '1'" v-if="items.userId == userInfo().id">
  803. <a href="javascript:;" style="margin-right: 20px" @click="editMaterialName(items)">修改素材名称</a>
  804. </a-menu-item>
  805. <a-menu-item key="7" v-show="active === '0' || active === '1'">
  806. <a href="javascript:;" @click="handleUsageDetails(items)">使用详情</a>
  807. </a-menu-item>
  808. </a-menu>
  809. </a-dropdown>
  810. <a v-show="active === '1'" style="margin-right: 20px" @click="handleRecord(items)">同步记录</a>
  811. <a-checkbox :value="items.id" style="float: right" v-show="active == '1'"></a-checkbox>
  812. <br />
  813. {{ items.createTime }}
  814. </span>
  815. </div>
  816. </div>
  817. </a-checkbox-group>
  818. <a-pagination
  819. size="small"
  820. :showTotal="ipagination.showTotal"
  821. style="float: right"
  822. v-if="dataSource.length > 0"
  823. showQuickJumper
  824. showSizeChanger
  825. :pageSize.sync="ipagination.pageSize"
  826. :total="ipagination.total"
  827. v-model="ipagination.current"
  828. :pageSizeOptions="ipagination.pageSizeOptions"
  829. @change="getDataSource"
  830. @showSizeChange="getDataSourceSize"
  831. />
  832. </div>
  833. <div v-else style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center">
  834. <img
  835. 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"
  836. alt
  837. v-if="!loading"
  838. />
  839. <div v-else></div>
  840. </div>
  841. </a-spin>
  842. </a-tab-pane>
  843. </a-tabs>
  844. <a-modal title="修改素材名称" @cancel="editMaterialVisible=false" v-if="editMaterialVisible" v-model="editMaterialVisible">
  845. <template slot="footer">
  846. <a-button key="back" @click="editMaterialVisible=false">取消</a-button>
  847. <a-button type="primary" @click="handleOkEditMaterialName" :loading="loadingEdit">确定</a-button>
  848. </template>
  849. <a-form :form="editMaterialform">
  850. <a-form-model-item
  851. label="素材名称"
  852. >
  853. <a-input placeholder="请填写素材名称"
  854. v-decorator="[
  855. 'name',
  856. {
  857. rules: [{ required: true, message: '素材名称不能为空' }]
  858. }
  859. ]" />
  860. </a-form-model-item>
  861. </a-form>
  862. </a-modal>
  863. <a-modal title="封面上传" @cancel="closeImage" @afterClose="closeImage" v-model="addImageVisible">
  864. <template slot="footer">
  865. <a-button key="back" @click="closeImage">取消</a-button>
  866. <a-button key="submit" type="primary" @click="handleOkImage" :loading="loadingImage">确定</a-button>
  867. </template>
  868. <a-form-item label class="add-image-material">
  869. <uploadFile
  870. v-if="addImageVisible"
  871. :value.sync="urlListImage.url"
  872. :checkFile="fileWater"
  873. @overUpload="overUploadImage"
  874. @removeUpload="deleteImage"
  875. :fileCount="15"
  876. uploadType="image"
  877. />
  878. <!-- <upload-to-ali
  879. style="width:100%"
  880. v-model="urlListImage.url"
  881. :customDomain="customDomain"
  882. :multiple="true"
  883. preview
  884. :region="region"
  885. :bucket="bucket"
  886. :accept="acceptImage"
  887. :max="10"
  888. :size="1024000"
  889. :accessKeyId="accessKeyId"
  890. :accessKeySecret="accessKeySecret"
  891. :before-upload="fileWater"
  892. :dir="dirImg"
  893. @delete='deleteImage'
  894. @loaded="overUploadImage"
  895. ></upload-to-ali>-->
  896. <span
  897. v-if="material.filter((item) => item == false).length > 0 && urlListImage.url.length > 0"
  898. style="color: red"
  899. >
  900. 上传素材的尺寸不符,请修改(
  901. <span v-for="(item, index) of material" :key="index" v-show="!item">第{{ index + 1 }}张</span>出错)
  902. </span>
  903. <span
  904. v-else-if="urlListImage.url.length > 0 && material.filter((item) => item == false).length == 0"
  905. style="color: green"
  906. >上传成功</span
  907. >
  908. </a-form-item>
  909. </a-modal>
  910. <a-modal title="数据详情" v-model="showDataBool" :footer="null">
  911. <div class="bhShow" style="display: flex; justify-content: space-between; height: 400px">
  912. <div v-if="douyinData" class="show-data">
  913. <span style="color: black; font-size: 18px; text-align: center; width: 100%">抖音</span>
  914. <span>消耗:{{ douyinData.cost }}</span>
  915. <span>封面点击:{{ douyinData.click }}</span>
  916. <span>封面展示:{{ douyinData.showNum }}</span>
  917. <span>激活:{{ douyinData.active }}</span>
  918. <span>转化量:{{ douyinData.convertNum }}</span>
  919. <span>表单提交:{{ douyinData.form }}</span>
  920. <span>下载注册:{{ douyinData.register }}</span>
  921. <span>视频总播放:{{ douyinData.totalPlay }}</span>
  922. <span>视频有效播放:{{ douyinData.validPlay }}</span>
  923. </div>
  924. <div v-if="kuaishouData" class="show-data">
  925. <span style="color: black; font-size: 18px; text-align: center; width: 100%">快手</span>
  926. <span>消耗:{{ kuaishouData.charge }}</span>
  927. <span>封面点击:{{ kuaishouData.photoClick }}</span>
  928. <span>封面展示:{{ kuaishouData.photoShow }}</span>
  929. <span>素材曝光数:{{ kuaishouData.aclick }}</span>
  930. <span>激活数:{{ kuaishouData.activation }}</span>
  931. <span>行为数:{{ kuaishouData.bclick }}</span>
  932. <span>表单提交数:{{ kuaishouData.formCount }}</span>
  933. </div>
  934. </div>
  935. </a-modal>
  936. <a-modal
  937. title="批量上传素材"
  938. v-model="batchUploadVisible"
  939. v-if="batchUploadVisible"
  940. :maskClosable="false"
  941. :width="1200"
  942. >
  943. <template slot="footer">
  944. <a-button type="primary" @click="handleOkBatch" :loading="loadingBatch">确定</a-button>
  945. </template>
  946. <a-form-model
  947. ref="ruleForm"
  948. :model="ruleForm"
  949. :label-col="{ span: 4 }"
  950. :wrapper-col="{ span: 14 }"
  951. >
  952. <a-form-model-item ref="name" label="项目选择" prop="projectId" :rules="{
  953. required: true,
  954. message: '项目不能为空',
  955. trigger: 'blur',
  956. }">
  957. <a-select
  958. v-model="ruleForm.projectId"
  959. @change="getProjectId"
  960. @focus="getParticipateList"
  961. showSearch
  962. optionFilterProp="children"
  963. :filterOption="filterOption"
  964. @search="getParticipateList"
  965. :disabled="!add"
  966. >
  967. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  968. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  969. item.mediaId == '1'
  970. ? '头条'
  971. : item.mediaId == '2'
  972. ? '快手'
  973. : item.mediaId == '3'
  974. ? '头条内广'
  975. : '快手内广'
  976. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  977. </a-select-option>
  978. </a-select>
  979. </a-form-model-item>
  980. <a-form-model-item label="视频上传" prop="videoList" v-if="ruleForm.projectId!=''">
  981. <uploadFile
  982. :checkFile="ruleFormFile"
  983. :value.sync="ruleForm.urlList"
  984. @overUpload="ruleFormOverUpload"
  985. @removeUpload="ruleFormRemoveUpload"
  986. :fileCount="10"
  987. :sizeCheck="true"
  988. uploadType="video"
  989. :multiple="true"
  990. v-if="batchUploadVisible"
  991. />
  992. <!-- <uploadFile
  993. :checkFile="file"
  994. :value.sync="urlList.url"
  995. @overUpload="overUpload"
  996. @removeUpload="removeUpload"
  997. :fileCount="2"
  998. uploadType="video"
  999. :multiple="true"
  1000. /> -->
  1001. </a-form-model-item>
  1002. <a-form-model-item :wrapper-col="{ span: 14 , offset:4}">
  1003. <el-collapse v-model="activeCollapse" accordion v-if="ruleForm.urlList.length>0">
  1004. <el-collapse-item :title="'视频'+(index+1)" :name="index" v-for="(items,index) of ruleForm.urlListData" :key="index">
  1005. <a-form-model-item label="视频" :label-col="{ span: 4 }"
  1006. :wrapper-col="{ span: 14 }">
  1007. <video :src="items.url" style="width:150px"></video>
  1008. </a-form-model-item>
  1009. <!-- <a-form-model-item label="素材名称"
  1010. :key="index"
  1011. :prop="'urlListData.'+index+'.materialName'"
  1012. :label-col="{ span: 4 }"
  1013. :wrapper-col="{ span: 14 }"
  1014. :rules="{
  1015. required: true,
  1016. message: '素材名称必填',
  1017. trigger: 'blur',
  1018. }"
  1019. >
  1020. <a-input placeholder="请输入素材名称" v-model="items.materialName"></a-input>
  1021. </a-form-model-item> -->
  1022. <a-form-model-item label="剪辑"
  1023. :key="index"
  1024. :prop="'urlListData.'+index+'.clipId'"
  1025. :label-col="{ span: 4 }"
  1026. :wrapper-col="{ span: 14 }"
  1027. :rules="{
  1028. required: true,
  1029. message: '剪辑必选',
  1030. trigger: 'blur',
  1031. }">
  1032. <a-select
  1033. v-model="items.clipId"
  1034. showSearch
  1035. optionFilterProp="children"
  1036. :filterOption="filterOption"
  1037. >
  1038. <a-select-option :value="item.userId" v-for="item of ascription.clipId" :key="item.userId">{{
  1039. item.userName
  1040. }}</a-select-option>
  1041. </a-select>
  1042. </a-form-model-item>
  1043. <a-form-model-item label="策划"
  1044. :prop="'urlListData.' + index + '.planId'"
  1045. :label-col="{ span: 4 }"
  1046. :wrapper-col="{ span: 14 }"
  1047. :rules="{
  1048. required: true,
  1049. message: '策划必选',
  1050. trigger: 'blur',
  1051. }">
  1052. <a-select
  1053. v-model="items.planId"
  1054. showSearch
  1055. optionFilterProp="children"
  1056. :filterOption="filterOption"
  1057. >
  1058. <a-select-option :value="item.userId" v-for="item of ascription.planId" :key="item.userId">{{
  1059. item.userName
  1060. }}</a-select-option>
  1061. </a-select>
  1062. </a-form-model-item>
  1063. <a-form-model-item label="拍摄"
  1064. :prop="'urlListData.'+index+'.shotId'"
  1065. :label-col="{ span: 4 }"
  1066. :wrapper-col="{ span: 14 }">
  1067. <a-select
  1068. v-model="items.shotId"
  1069. showSearch
  1070. optionFilterProp="children"
  1071. :filterOption="filterOption"
  1072. >
  1073. <a-select-option :value="item.userId" v-for="item of ascription.shotId" :key="item.userId">{{
  1074. item.userName
  1075. }}</a-select-option>
  1076. </a-select>
  1077. </a-form-model-item>
  1078. <a-form-model-item label="形式标签"
  1079. :prop="'urlListData.'+index+'.modalityTagList'"
  1080. :label-col="{ span: 4 }"
  1081. :wrapper-col="{ span: 14 }"
  1082. :rules="{
  1083. required: true,
  1084. message: '形式标签必选',
  1085. trigger: 'blur',
  1086. }">
  1087. <el-cascader
  1088. placeholder="搜索你想要的形式标签"
  1089. :options="departTreeModality"
  1090. v-model="items.modalityTagList"
  1091. :props="{
  1092. multiple: true,
  1093. value: 'id',
  1094. label: 'tagName',
  1095. emitPath: false,
  1096. checkStrictly: true,
  1097. expandTrigger: 'hover',
  1098. }"
  1099. filterable
  1100. style="width: 100%"
  1101. ></el-cascader>
  1102. </a-form-model-item>
  1103. <a-form-model-item label="场景标签"
  1104. :prop="'urlListData.'+index+'.senceTagList'"
  1105. :label-col="{ span: 4 }"
  1106. :wrapper-col="{ span: 14 }"
  1107. :rules="{
  1108. required: true,
  1109. message: '场景标签必选',
  1110. trigger: 'blur',
  1111. }"
  1112. v-if="!items.modalityTagList.includes(60158)
  1113. && !items.modalityTagList.includes(60159)
  1114. && !items.modalityTagList.includes(101)
  1115. && !items.modalityTagList.includes(104)
  1116. && !items.modalityTagList.includes(112)"
  1117. >
  1118. <el-cascader
  1119. placeholder="搜索你想要的场景标签"
  1120. :options="departTreeSence"
  1121. v-model="items.senceTagList"
  1122. :props="{
  1123. multiple: true,
  1124. value: 'id',
  1125. label: 'tagName',
  1126. emitPath: false,
  1127. checkStrictly: true,
  1128. expandTrigger: 'hover',
  1129. }"
  1130. filterable
  1131. style="width: 100%"
  1132. ></el-cascader>
  1133. </a-form-model-item>
  1134. <a-form-model-item label="基调标签"
  1135. :prop="'urlListData.'+index+'.modTagList'"
  1136. :label-col="{ span: 4 }"
  1137. :wrapper-col="{ span: 14 }"
  1138. :rules="{
  1139. required: true,
  1140. message: '基调标签必选',
  1141. trigger: 'blur',
  1142. }">
  1143. <el-cascader
  1144. placeholder="搜索你想要的基调标签"
  1145. :options="departTreeMod"
  1146. v-model="items.modTagList"
  1147. :props="{
  1148. multiple: true,
  1149. value: 'id',
  1150. label: 'tagName',
  1151. emitPath: false,
  1152. checkStrictly: true,
  1153. expandTrigger: 'hover',
  1154. }"
  1155. filterable
  1156. style="width: 100%"
  1157. ></el-cascader>
  1158. </a-form-model-item>
  1159. <a-form-model-item label="创新素材"
  1160. :prop="'urlListData.'+index+'.materialInnovate'"
  1161. :label-col="{ span: 4 }"
  1162. :wrapper-col="{ span: 14 }"
  1163. :rules="{
  1164. required: true,
  1165. message: '创新素材必选',
  1166. trigger: 'change',
  1167. }">
  1168. <a-switch v-model="items.materialInnovate"/>
  1169. </a-form-model-item>
  1170. <a-form-model-item :wrapper-col="{ span: 14,offset:4 }" v-if="index == 0">
  1171. <a-button type="primary" @click="syncDesign">剩余素材同步设计人员</a-button>
  1172. </a-form-model-item>
  1173. </el-collapse-item>
  1174. </el-collapse>
  1175. </a-form-model-item>
  1176. </a-form-model>
  1177. </a-modal>
  1178. <a-modal
  1179. :title="add ? '添加素材' : '修改素材'"
  1180. v-model="visible"
  1181. @cancel="close"
  1182. @afterClose="close"
  1183. :maskClosable="false"
  1184. :width="800"
  1185. >
  1186. <template slot="footer">
  1187. <a-button key="back" @click="close">取消</a-button>
  1188. <a-button type="primary" :disabled="!confirmLoading" @click="handleOk" :loading="loadingElse">确定</a-button>
  1189. </template>
  1190. <a-form :form="form">
  1191. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="项目选择">
  1192. <!-- <selectTable :projectId.sync="projectId" /> -->
  1193. <!-- <a-select v-decorator="[
  1194. 'projectId', // 给表单赋值或拉取表单时,该input对应的key
  1195. { rules: [{ required: true, message: '请选择项目!' }] }
  1196. ]" @change="getProjectId" showSearch optionFilterProp="children" :filterOption="filterOption"
  1197. :default-active-first-option="false" :show-arrow="false" :not-found-content="null" :disabled="!add"
  1198. @search="getParticipateList">
  1199. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  1200. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  1201. item.mediaId == "1" ? '头条' :item.mediaId == "2"? '快手':item.mediaId == "3"?'头条内广':'快手内广'
  1202. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  1203. </a-select-option>
  1204. </a-select>-->
  1205. <!-- <selectTable :projectId.sync="projectId" @change="getProjectId" :disabled="!add"></selectTable> -->
  1206. <a-select
  1207. v-decorator="[
  1208. 'projectId', // 给表单赋值或拉取表单时,该input对应的key
  1209. { rules: [{ required: true, message: '请选择项目!' }] },
  1210. ]"
  1211. @change="getProjectId"
  1212. @focus="getParticipateList"
  1213. showSearch
  1214. optionFilterProp="children"
  1215. :filterOption="filterOption"
  1216. @search="getParticipateList"
  1217. :disabled="!add"
  1218. >
  1219. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  1220. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  1221. item.mediaId == '1'
  1222. ? '头条'
  1223. : item.mediaId == '2'
  1224. ? '快手'
  1225. : item.mediaId == '3'
  1226. ? '头条内广'
  1227. : '快手内广'
  1228. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  1229. </a-select-option>
  1230. </a-select>
  1231. </a-form-item>
  1232. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传" v-if="getData('projectId')">
  1233. <uploadFile
  1234. :checkFile="file"
  1235. :value.sync="urlList.url"
  1236. @overUpload="overUpload"
  1237. @removeUpload="removeUpload"
  1238. :fileCount="1"
  1239. uploadType="video"
  1240. :multiple="false"
  1241. />
  1242. <!-- <upload-to-ali
  1243. v-model="urlList.url"
  1244. :customDomain="customDomain"
  1245. preview
  1246. :region="region"
  1247. :bucket="bucket"
  1248. :accept="acceptVideo"
  1249. :max="10"
  1250. :size="1024000"
  1251. :accessKeyId="accessKeyId"
  1252. :accessKeySecret="accessKeySecret"
  1253. :before-upload="file"
  1254. :dir="dirVideo"
  1255. @loaded="overUpload"
  1256. >
  1257. </upload-to-ali>-->
  1258. <span v-if="repeat" style="color: red">此素材重复,请重新选择上传</span>
  1259. <span v-if="confirmLoading && urlList.url != ''" style="color: green">上传成功</span>
  1260. </a-form-item>
  1261. <a-form-item
  1262. :label-col="labelCol"
  1263. :wrapper-col="wrapperCol"
  1264. label="封面上传"
  1265. class="add-image-material"
  1266. v-if="getData('projectId') && add && urlList.url != ''"
  1267. >
  1268. <!-- <upload-to-ali
  1269. style="width:160%"
  1270. v-model="urlListImage.url"
  1271. :customDomain="customDomain"
  1272. :multiple="true"
  1273. preview
  1274. :region="region"
  1275. :bucket="bucket"
  1276. :accept="acceptImage"
  1277. :max="10"
  1278. :size="1024000"
  1279. :accessKeyId="accessKeyId"
  1280. :accessKeySecret="accessKeySecret"
  1281. :before-upload="fileWater"
  1282. :dir="dirImg"
  1283. @delete='deleteImage'
  1284. @loaded="overUploadImage"
  1285. ></upload-to-ali>-->
  1286. <uploadFile
  1287. :value.sync="urlListImage.url"
  1288. :checkFile="fileWater"
  1289. @overUpload="overUploadImage"
  1290. @removeUpload="deleteImage"
  1291. :fileCount="15"
  1292. uploadType="image"
  1293. />
  1294. <span
  1295. v-if="material.filter((item) => item == false).length > 0 && urlListImage.url.length > 0"
  1296. style="color: red"
  1297. >
  1298. 上传素材的尺寸不符,请修改(
  1299. <span v-for="(item, index) of material" :key="index" v-show="!item">第{{ index + 1 }}张</span>出错)
  1300. </span>
  1301. <span
  1302. v-else-if="urlListImage.url.length > 0 && material.filter((item) => item == false).length == 0"
  1303. style="color: green"
  1304. >上传成功</span
  1305. >
  1306. </a-form-item>
  1307. <div v-if="add">
  1308. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="策划" v-if="activeKey == 'video'">
  1309. <a-select
  1310. v-decorator="[
  1311. 'planId', // 给表单赋值或拉取表单时,该input对应的key
  1312. { rules: [{ required: true, message: '请选择策划!' }] },
  1313. ]"
  1314. showSearch
  1315. optionFilterProp="children"
  1316. :filterOption="filterOption"
  1317. >
  1318. <a-select-option :value="item.userId" v-for="item of ascription.planId" :key="item.userId">{{
  1319. item.userName
  1320. }}</a-select-option>
  1321. </a-select>
  1322. </a-form-item>
  1323. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="拍摄" v-if="activeKey == 'video'">
  1324. <a-select
  1325. v-decorator="[
  1326. 'shotId', // 给表单赋值或拉取表单时,该input对应的key
  1327. ]"
  1328. showSearch
  1329. optionFilterProp="children"
  1330. :filterOption="filterOption"
  1331. >
  1332. <a-select-option :value="item.userId" v-for="item of ascription.shotId" :key="item.userId">{{
  1333. item.userName
  1334. }}</a-select-option>
  1335. </a-select>
  1336. </a-form-item>
  1337. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑">
  1338. <a-select
  1339. v-decorator="[
  1340. 'clipId', // 给表单赋值或拉取表单时,该input对应的key
  1341. { rules: [{ required: true, message: '请选择剪辑!' }] },
  1342. ]"
  1343. showSearch
  1344. optionFilterProp="children"
  1345. :filterOption="filterOption"
  1346. >
  1347. <a-select-option :value="item.userId" v-for="item of ascription.clipId" :key="item.userId">{{
  1348. item.userName
  1349. }}</a-select-option>
  1350. </a-select>
  1351. </a-form-item>
  1352. </div>
  1353. <a-form-item
  1354. :label-col="labelCol"
  1355. :wrapper-col="{
  1356. xs: { span: 24 },
  1357. sm: { span: 12 },
  1358. }"
  1359. label="形式标签"
  1360. v-if="add && visible"
  1361. >
  1362. <el-cascader
  1363. placeholder="搜索你想要的形式标签"
  1364. :options="departTreeModality"
  1365. v-decorator="[
  1366. 'modalityTagList', // 给表单赋值或拉取表单时,该input对应的key
  1367. { rules: [{ required: true, message: '请选择形式标签!' }],initialValue:[] },
  1368. ]"
  1369. :props="{
  1370. multiple: true,
  1371. value: 'id',
  1372. label: 'tagName',
  1373. emitPath: false,
  1374. checkStrictly: true,
  1375. expandTrigger: 'hover',
  1376. }"
  1377. filterable
  1378. style="width: 100%"
  1379. ></el-cascader>
  1380. </a-form-item>
  1381. <!-- <a-form-item
  1382. :label-col="labelCol"
  1383. :wrapper-col="{
  1384. xs: { span: 24 },
  1385. sm: { span: 12 },
  1386. }"
  1387. label="内容标签"
  1388. v-if="add && visible"
  1389. >
  1390. <el-cascader
  1391. placeholder="搜索你想要的内容标签"
  1392. :options="departTreeContent"
  1393. class="only-video-material-disable-modal"
  1394. v-decorator="[
  1395. 'contentTagList',
  1396. { rules: [{ required: true, message: '请选择内容标签!' }] },
  1397. ]"
  1398. :props="{
  1399. multiple: true,
  1400. value: 'id',
  1401. label: 'tagName',
  1402. emitPath: false,
  1403. checkStrictly: true,
  1404. expandTrigger: 'hover',
  1405. }"
  1406. filterable
  1407. style="width: 100%"
  1408. ></el-cascader>
  1409. </a-form-item> -->
  1410. <a-form-item
  1411. :label-col="labelCol"
  1412. :wrapper-col="{
  1413. xs: { span: 24 },
  1414. sm: { span: 12 },
  1415. }"
  1416. label="场景标签"
  1417. v-if="add && visible && (!getData('modalityTagList')||(!getData('modalityTagList').includes(60158)
  1418. && !getData('modalityTagList').includes(60159)
  1419. && !getData('modalityTagList').includes(101)
  1420. && !getData('modalityTagList').includes(104)
  1421. && !getData('modalityTagList').includes(112)))"
  1422. >
  1423. <el-cascader
  1424. placeholder="搜索你想要的场景标签"
  1425. :options="departTreeSence"
  1426. v-decorator="[
  1427. 'senceTagList', // 给表单赋值或拉取表单时,该input对应的key
  1428. { rules: [{ required: true, message: '请选择场景标签!' }] },
  1429. ]"
  1430. :props="{
  1431. multiple: true,
  1432. value: 'id',
  1433. label: 'tagName',
  1434. emitPath: false,
  1435. checkStrictly: true,
  1436. expandTrigger: 'hover',
  1437. }"
  1438. filterable
  1439. style="width: 100%"
  1440. ></el-cascader>
  1441. </a-form-item>
  1442. <a-form-item
  1443. :label-col="labelCol"
  1444. :wrapper-col="{
  1445. xs: { span: 24 },
  1446. sm: { span: 12 },
  1447. }"
  1448. label="基调标签"
  1449. v-if="add && visible"
  1450. >
  1451. <el-cascader
  1452. placeholder="搜索你想要的基调标签"
  1453. :options="departTreeMod"
  1454. v-decorator="[
  1455. 'modTagList', // 给表单赋值或拉取表单时,该input对应的key
  1456. { rules: [{ required: true, message: '请选择基调标签!' }] },
  1457. ]"
  1458. :props="{
  1459. multiple: true,
  1460. value: 'id',
  1461. label: 'tagName',
  1462. emitPath: false,
  1463. checkStrictly: true,
  1464. expandTrigger: 'hover',
  1465. }"
  1466. filterable
  1467. style="width: 100%"
  1468. ></el-cascader>
  1469. </a-form-item>
  1470. <a-form-item
  1471. :label-col="labelCol"
  1472. :wrapper-col="{
  1473. xs: { span: 24 },
  1474. sm: { span: 12 },
  1475. }"
  1476. label="创新素材"
  1477. v-if="add && visible"
  1478. >
  1479. <a-switch v-decorator="[
  1480. 'materialInnovate', // 给表单赋值或拉取表单时,该input对应的key
  1481. { rules: [{ required: true, message: '' }],initialValue:false },
  1482. ]"/>
  1483. </a-form-item>
  1484. <a-form-item
  1485. :label-col="labelCol"
  1486. :wrapper-col="{
  1487. xs: { span: 24 },
  1488. sm: { span: 18 },
  1489. }"
  1490. label="其他"
  1491. v-if="add"
  1492. >
  1493. <template v-for="(tag, index) in tags">
  1494. <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
  1495. <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">{{
  1496. `${tag.slice(0, 20)}...`
  1497. }}</a-tag>
  1498. </a-tooltip>
  1499. <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">{{ tag }}</a-tag>
  1500. </template>
  1501. <a-input
  1502. v-if="inputVisible"
  1503. ref="input"
  1504. type="text"
  1505. size="small"
  1506. :style="{ width: '78px' }"
  1507. :value="inputValue"
  1508. @change="handleInputChange"
  1509. @blur="handleInputConfirm"
  1510. @keyup.enter="handleInputConfirm"
  1511. />
  1512. <a-tag v-else @click="showInput" style="background: #fff; borderstyle: dashed">
  1513. <a-icon type="plus" />New Tag
  1514. </a-tag>
  1515. </a-form-item>
  1516. <a-form-item
  1517. :label-col="labelCol"
  1518. :wrapper-col="{
  1519. xs: { span: 24 },
  1520. sm: { span: 12 },
  1521. }"
  1522. label="描述"
  1523. v-if="add"
  1524. >
  1525. <a-textarea
  1526. placeholder="请输入描述"
  1527. v-decorator="[
  1528. 'materialDescribe', // 给表单赋值或拉取表单时,该input对应的key
  1529. ]"
  1530. :auto-size="{ minRows: 3, maxRows: 10 }"
  1531. />
  1532. </a-form-item>
  1533. </a-form>
  1534. </a-modal>
  1535. <a-modal title="素材详情" v-model="visibleDetail" width="70%" :footer="null">
  1536. <div style="width: 100%; height: 35px">
  1537. <a-button type="primary" @click="setSuccess" style="float: right">{{
  1538. excellent == 0 ? '标记为优秀素材' : '取消标记'
  1539. }}</a-button>
  1540. </div>
  1541. <div style="display: flex; height: 700px">
  1542. <div
  1543. class="video-content"
  1544. style="
  1545. width: 50%;
  1546. padding: 10px;
  1547. box-sizing: border-box;
  1548. display: flex;
  1549. justify-content: center;
  1550. border-right: 1px solid #f2f2f2;
  1551. "
  1552. >
  1553. <video class="video" :src="showUrl" controls="controls" style="height: 50%" controlslist="nodownload">
  1554. 您的浏览器不支持 video 标签。
  1555. </video>
  1556. <div class="downLoad" style="height: 50%; overflow: auto">
  1557. <a-button @click="onCheckAllImageChange" v-if="model.length > 0">
  1558. {{ checkAllImage ? '取消 ( ' + checkArrImage.length + ' )' : '全选' }}
  1559. </a-button>
  1560. <ul
  1561. class="actor-photo-list"
  1562. :style="{ width: model.length > 4 ? 25 * model.length + '%' : '100%' }"
  1563. v-if="model.length > 0"
  1564. >
  1565. <a-checkbox-group
  1566. v-model="checkArrImage"
  1567. style="width: 100%; display: flex; padding-left: 0"
  1568. @change="onChangeCheckImage"
  1569. >
  1570. <li v-for="(item, index) of model" :key="index">
  1571. <a-checkbox :value="item.id" style="position: absolute; z-index: 100"></a-checkbox>
  1572. <img class="video" :src="item.url" @click="coverPreviewShowModal(item, index)" />
  1573. <span
  1574. class="tag-video"
  1575. :style="{
  1576. backgroundColor:
  1577. item.status == 0 ? 'rgba(0, 0, 0)' : item.status == 1 ? 'rgba(0, 180, 100)' : 'red',
  1578. }"
  1579. >{{ item.status == 0 ? '未审核' : item.status == 1 ? '已批准' : '已驳回' }}</span
  1580. >
  1581. </li>
  1582. </a-checkbox-group>
  1583. </ul>
  1584. <div v-else style="height: 100%; display: flex; justify-content: center; align-items: center">
  1585. <img
  1586. 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"
  1587. alt
  1588. />
  1589. </div>
  1590. </div>
  1591. </div>
  1592. <a-modal title="图片预览" v-model="coverPreviewVisible" :footer="null">
  1593. <a-carousel arrows class="cover_carousel_con">
  1594. <div v-for="(item, index) in modelNew" :key="index" class="content">
  1595. <img :src="item.url" :width="300" />
  1596. <div style="margin-top: 10px">
  1597. <a-button type="primary" @click="editImage(item, '1')">通过审核</a-button>
  1598. <a-divider type="vertical" />
  1599. <a-popconfirm @confirm="editImage(item, '2')">
  1600. <div slot="title">
  1601. <div>
  1602. 驳回原因:
  1603. <a-textarea
  1604. placeholder="请输入原因"
  1605. v-model="refuseReasonImage"
  1606. :autosize="{ minRows: 3, maxRows: 10 }"
  1607. />
  1608. </div>
  1609. </div>
  1610. <a-button type="primary">驳回</a-button>
  1611. <!-- @click="edit(null, '0', '2')" -->
  1612. </a-popconfirm>
  1613. </div>
  1614. </div>
  1615. <a-icon
  1616. type="left-circle"
  1617. slot="prevArrow"
  1618. slot-scope
  1619. style="left: 10px; zindex: 9; font-size: 30px; color: black"
  1620. />
  1621. <a-icon
  1622. type="right-circle"
  1623. slot="nextArrow"
  1624. slot-scope
  1625. style="right: 10px; zindex: 9; font-size: 30px; color: black"
  1626. />
  1627. </a-carousel>
  1628. </a-modal>
  1629. <div style="flex: 3; padding: 10px; box-sizing: border-box">
  1630. <a-form v-if="detail&&allDetailData" class="detail ant-advanced-search-form" layout="inline">
  1631. <div>
  1632. <a-form-item label="视频名称">{{allDetailData.materialName}}</a-form-item>
  1633. </div>
  1634. <div>
  1635. <a-form-item label="唯一编码">{{allDetailData.code}}</a-form-item>
  1636. </div>
  1637. <a-form-item label="视频链接"><a-input v-model="allDetailData.url" type="text" read-only /></a-form-item>
  1638. <div v-if="detail.parameter" style="display: flex">
  1639. <a-form-item label="视频时长" v-if="detail.parameter.second" style="flex: 1"
  1640. >{{ detail.parameter.second }}秒</a-form-item
  1641. >
  1642. <a-form-item label="尺寸" style="flex: 1" v-if="detail.parameter.width"
  1643. >{{ detail.parameter.width }}*{{ detail.parameter.height }}</a-form-item
  1644. >
  1645. <a-form-item label="大小" style="flex: 1" v-if="detail.parameter.size">{{
  1646. detail.parameter.size
  1647. }}</a-form-item>
  1648. </div>
  1649. <div v-if="detail.ascription" style="display: flex">
  1650. <a-form-item label="策划" style="flex: 1">{{ detail.ascription.planName }}</a-form-item>
  1651. <a-form-item label="拍摄" style="flex: 1">{{ detail.ascription.shotName }}</a-form-item>
  1652. <a-form-item label="剪辑" v-if="detail.ascription.clipName" style="flex: 1">{{
  1653. detail.ascription.clipName
  1654. }}</a-form-item>
  1655. </div>
  1656. <div>
  1657. <a-form-item label="标签" v-if="tagInfoList.length > 0">
  1658. <a-tag v-for="(item, index) of tagInfoList" :key="index">{{ item.tagName }}</a-tag>
  1659. </a-form-item>
  1660. </div>
  1661. <div>
  1662. <a-form-item label="其他" v-if="detail.tag">
  1663. <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
  1664. </a-form-item>
  1665. </div>
  1666. <div>
  1667. <a-form-item label="无水印素材下载" v-if="name">
  1668. <a-button type="primary" @click="downloadByBlobShowUrl">下载</a-button>
  1669. </a-form-item>
  1670. </div>
  1671. <div>
  1672. <a-form-item label="水印素材下载" v-if="name">
  1673. <a-button type="primary" @click="downloadByBlob" v-if="showUrlWater">下载</a-button>
  1674. <span v-else>水印素材生成中,请一分钟后刷新</span>
  1675. </a-form-item>
  1676. </div>
  1677. <div>
  1678. <a-form-item label="水印素材链接" v-if="showUrlWater">
  1679. <a-input v-model="showUrlWater" type="text" read-only />
  1680. </a-form-item>
  1681. </div>
  1682. <div style="width: 100%" class="downLoad">
  1683. <a-form-item label="生成水印素材" style="width: 100%">
  1684. <a-select :defaultValue="4" v-model="size" style="width: 80%">
  1685. <a-select-option :value="item.id" :key="item.id" v-for="item of sizeType">
  1686. {{ item.name }}
  1687. </a-select-option>
  1688. </a-select>
  1689. <a-button type="primary" @click="getWater" :loading="waterLoading">生成</a-button>
  1690. </a-form-item>
  1691. </div>
  1692. <div>
  1693. <a-form-item label="审核人" v-if="active == '2' && detail.auditorName">{{
  1694. detail.auditorName
  1695. }}</a-form-item>
  1696. </div>
  1697. <div>
  1698. <a-form-item label="广告语" v-if="active == '1'">{{
  1699. creativeCopywriter ? creativeCopywriter : '无广告语'
  1700. }}</a-form-item>
  1701. </div>
  1702. <div>
  1703. <a-form-item label="驳回原因" v-if="active == '2'">{{
  1704. refuseReason ? refuseReason : '无原因'
  1705. }}</a-form-item>
  1706. </div>
  1707. <div>
  1708. <a-form-item label="截图" v-if="active == '2'">
  1709. <div v-if="refuseFile" style="width: 100%">
  1710. <img
  1711. style="width: 100px; height: auto; margin: 5px"
  1712. @click="showBoHui(item)"
  1713. :src="item"
  1714. v-for="(item, index) in refuseFile"
  1715. :key="index"
  1716. alt
  1717. />
  1718. </div>
  1719. <!-- :checkFile="fileWater"
  1720. @overUpload="overUploadImage"
  1721. @removeUpload="deleteImage"-->
  1722. <!-- <upload-to-ali
  1723. v-if="refuseFile"
  1724. disabled
  1725. v-model="refuseFile"
  1726. :customDomain="customDomain"
  1727. multiple
  1728. preview
  1729. :region="region"
  1730. :bucket="bucket"
  1731. :accept="acceptImage"
  1732. :max="10"
  1733. :size="1024000"
  1734. :accessKeyId="accessKeyId"
  1735. :accessKeySecret="accessKeySecret"
  1736. :dir="dirImg"
  1737. ></upload-to-ali>-->
  1738. <div v-else>无截图</div>
  1739. </a-form-item>
  1740. </div>
  1741. <div>
  1742. <a-form-item
  1743. label="视频审核"
  1744. v-if="
  1745. active != '2' &&
  1746. (role.roleCode == 'operator' ||
  1747. role.roleCode == 'kuaishouOperationManager' ||
  1748. role.roleCode == 'admin' ||
  1749. role.roleCode == 'operationAssistant' ||
  1750. role.roleCode == 'touTiaoOperationManager')
  1751. "
  1752. >
  1753. <a-popconfirm
  1754. @confirm="edit(null, '0', '1')"
  1755. v-show="active != '1'"
  1756. v-if="
  1757. role.roleCode == 'operator' ||
  1758. role.roleCode == 'kuaishouOperationManager' ||
  1759. role.roleCode == 'admin' ||
  1760. role.roleCode == 'operationAssistant' ||
  1761. role.roleCode == 'touTiaoOperationManager'
  1762. "
  1763. >
  1764. <div slot="title">
  1765. <div>
  1766. 广告语:
  1767. <a-textarea placeholder="请输入" v-model="refuseReason" :autosize="{ minRows: 3, maxRows: 10 }" />
  1768. </div>
  1769. </div>
  1770. <a-button type="primary" v-if="active == '0'" style="margin-right: 10px">通过审核</a-button>
  1771. </a-popconfirm>
  1772. <a-popconfirm @confirm="okEdit" v-show="active != '2'">
  1773. <div slot="title">
  1774. <div>
  1775. 驳回原因:
  1776. <a-textarea
  1777. placeholder="请输入原因"
  1778. v-model="refuseReason"
  1779. :autosize="{ minRows: 3, maxRows: 10 }"
  1780. />
  1781. </div>
  1782. <div>
  1783. 截图:
  1784. <uploadFile v-if="refuseFile" :value.sync="refuseFile" :fileCount="15" uploadType="image" />
  1785. <!-- <upload-to-ali
  1786. v-model="refuseFile"
  1787. :customDomain="customDomain"
  1788. multiple
  1789. preview
  1790. :region="region"
  1791. :bucket="bucket"
  1792. :accept="acceptImage"
  1793. :max="10"
  1794. :size="1024000"
  1795. :accessKeyId="accessKeyId"
  1796. :accessKeySecret="accessKeySecret"
  1797. :dir="dirImg"
  1798. ></upload-to-ali>-->
  1799. </div>
  1800. </div>
  1801. <a-button type="primary" v-show="active != '2'">驳回</a-button>
  1802. <!-- @click="edit(null, '0', '2')" -->
  1803. </a-popconfirm>
  1804. </a-form-item>
  1805. </div>
  1806. <div>
  1807. <a-form-item label="封面审核" style="width: 120%">
  1808. <a-button type="primary" :disabled="checkArrImage.length == 0" @click="editImageAll('1')"
  1809. >通过审核</a-button
  1810. >
  1811. <a-popconfirm @confirm="editImageAll('2')" v-show="active != '2'">
  1812. <div slot="title">
  1813. <div>
  1814. 驳回原因:
  1815. <a-textarea
  1816. placeholder="请输入原因"
  1817. v-model="refuseReasonImage"
  1818. :autosize="{ minRows: 3, maxRows: 10 }"
  1819. />
  1820. </div>
  1821. </div>
  1822. <a-button type="primary" :disabled="checkArrImage.length != 1" style="margin-left: 10px"
  1823. >驳回</a-button
  1824. >
  1825. <!-- @click="edit(null, '0', '2')" -->
  1826. </a-popconfirm>
  1827. </a-form-item>
  1828. </div>
  1829. </a-form>
  1830. </div>
  1831. </div>
  1832. </a-modal>
  1833. <a-modal title="查看截图" v-model="bohuiShow" :width="300" :footer="null">
  1834. <img :src="bohui" alt style="width: 100%" />
  1835. </a-modal>
  1836. <a-modal title="人员修改" v-model="personVisible" @afterClose="closePerson">
  1837. <template slot="footer">
  1838. <a-button key="back" @click="closePerson">取消</a-button>
  1839. <a-button key="submit" type="primary" :loading="loadingPerson" @click="handleOkPerson">确定</a-button>
  1840. </template>
  1841. <a-form :form="formPerson">
  1842. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="策划" v-if="activeKey == 'video'">
  1843. <a-select
  1844. v-decorator="[
  1845. 'planId', // 给表单赋值或拉取表单时,该input对应的key
  1846. { rules: [{ required: true, message: '请选择策划!' }] },
  1847. ]"
  1848. showSearch
  1849. optionFilterProp="children"
  1850. :filterOption="filterOption"
  1851. >
  1852. <a-select-option :value="item.userId" v-for="item of ascription.planId" :key="item.userId">{{
  1853. item.userName
  1854. }}</a-select-option>
  1855. </a-select>
  1856. </a-form-item>
  1857. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="拍摄" v-if="activeKey == 'video'">
  1858. <a-select
  1859. v-decorator="[
  1860. 'shotId', // 给表单赋值或拉取表单时,该input对应的key
  1861. ]"
  1862. showSearch
  1863. optionFilterProp="children"
  1864. :filterOption="filterOption"
  1865. >
  1866. <a-select-option :value="item.userId" v-for="item of ascription.shotId" :key="item.userId">{{
  1867. item.userName
  1868. }}</a-select-option>
  1869. </a-select>
  1870. </a-form-item>
  1871. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="剪辑">
  1872. <a-select
  1873. v-decorator="[
  1874. 'clipId', // 给表单赋值或拉取表单时,该input对应的key
  1875. { rules: [{ required: true, message: '请选择剪辑!' }] },
  1876. ]"
  1877. showSearch
  1878. optionFilterProp="children"
  1879. :filterOption="filterOption"
  1880. >
  1881. <a-select-option :value="item.userId" v-for="item of ascription.clipId" :key="item.userId">{{
  1882. item.userName
  1883. }}</a-select-option>
  1884. </a-select>
  1885. </a-form-item>
  1886. </a-form>
  1887. </a-modal>
  1888. <a-modal title="标签修改" v-model="tagInfoListVisible">
  1889. <template slot="footer">
  1890. <a-button
  1891. key="back"
  1892. @click="
  1893. tagInfoListVisible = false
  1894. departValueInfoModality = []
  1895. departValueInfoMod = []
  1896. departValueInfoContent = []
  1897. departValueInfoSence = []
  1898. tagCode = null
  1899. "
  1900. >取消</a-button
  1901. >
  1902. <a-button key="submit" type="primary" :loading="loadingTag" @click="handleOkTag">确定</a-button>
  1903. </template>
  1904. <!-- <a-form-item :label-col="labelCol" :wrapper-col="{
  1905. xs: { span: 24 },
  1906. sm: { span: 12 }
  1907. }" label="标签">
  1908. <el-cascader placeholder="搜索你想要的标签" :options="departTree" v-model="departValueInfo"
  1909. :props="{ multiple: true,value:'id',label:'tagName',emitPath:false}" filterable style="width:100%">
  1910. </el-cascader>
  1911. </a-form-item>-->
  1912. <a-form-item
  1913. :label-col="labelCol"
  1914. :wrapper-col="{
  1915. xs: { span: 24 },
  1916. sm: { span: 12 },
  1917. }"
  1918. label="形式"
  1919. >
  1920. <el-cascader
  1921. placeholder="搜索你想要的形式标签"
  1922. :options="departTreeModality"
  1923. v-model="departValueInfoModality"
  1924. @change="clearChangjing"
  1925. :props="{
  1926. multiple: true,
  1927. value: 'id',
  1928. label: 'tagName',
  1929. emitPath: false,
  1930. checkStrictly: true,
  1931. expandTrigger: 'hover',
  1932. }"
  1933. filterable
  1934. style="width: 100%"
  1935. ></el-cascader>
  1936. </a-form-item>
  1937. <!-- <a-form-item
  1938. :label-col="labelCol"
  1939. :wrapper-col="{
  1940. xs: { span: 24 },
  1941. sm: { span: 12 },
  1942. }"
  1943. label="内容"
  1944. >
  1945. <el-cascader
  1946. placeholder="搜索你想要的内容标签"
  1947. :options="departTreeContent"
  1948. v-model="departValueInfoContent"
  1949. :props="{ multiple: true, value: 'id', label: 'tagName', emitPath: false }"
  1950. filterable
  1951. style="width: 100%"
  1952. ></el-cascader>
  1953. </a-form-item> -->
  1954. <a-form-item
  1955. :label-col="labelCol"
  1956. :wrapper-col="{
  1957. xs: { span: 24 },
  1958. sm: { span: 12 },
  1959. }"
  1960. label="场景"
  1961. v-if="!departValueInfoModality.includes(60158)
  1962. && !departValueInfoModality.includes(60159)
  1963. && !departValueInfoModality.includes(101)
  1964. && !departValueInfoModality.includes(104)
  1965. && !departValueInfoModality.includes(112)"
  1966. >
  1967. <el-cascader
  1968. placeholder="搜索你想要的场景标签"
  1969. :options="departTreeSence"
  1970. v-model="departValueInfoSence"
  1971. :props="{
  1972. multiple: true,
  1973. value: 'id',
  1974. label: 'tagName',
  1975. emitPath: false,
  1976. checkStrictly: true,
  1977. expandTrigger: 'hover',
  1978. }"
  1979. filterable
  1980. style="width: 100%"
  1981. ></el-cascader>
  1982. </a-form-item>
  1983. <a-form-item
  1984. :label-col="labelCol"
  1985. :wrapper-col="{
  1986. xs: { span: 24 },
  1987. sm: { span: 12 },
  1988. }"
  1989. label="基调"
  1990. >
  1991. <el-cascader
  1992. placeholder="搜索你想要的基调标签"
  1993. :options="departTreeMod"
  1994. v-model="departValueInfoMod"
  1995. :props="{
  1996. multiple: true,
  1997. value: 'id',
  1998. label: 'tagName',
  1999. emitPath: false,
  2000. checkStrictly: true,
  2001. expandTrigger: 'hover',
  2002. }"
  2003. filterable
  2004. style="width: 100%"
  2005. ></el-cascader>
  2006. </a-form-item>
  2007. <a-form-item
  2008. :label-col="labelCol"
  2009. :wrapper-col="{
  2010. xs: { span: 24 },
  2011. sm: { span: 12 },
  2012. }"
  2013. label="创新素材"
  2014. >
  2015. <a-switch v-model="materialInnovate"/>
  2016. </a-form-item>
  2017. </a-modal>
  2018. <a-modal title="推荐封面" v-model="chouzhen" width="60%">
  2019. <template slot="footer">
  2020. <a-button key="back" @click="chouzhen = false">关闭</a-button>
  2021. </template>
  2022. <ul v-if="chouzhenList.length > 0" style="height: 600px; overflow: auto">
  2023. <li v-for="(item, index) of chouzhenList" :key="index" class="chouzhen" :class="{ first: index == 0 }">
  2024. <img
  2025. :src="item.url"
  2026. alt
  2027. style="width: 100%"
  2028. @click="
  2029. showImageStr = item.url
  2030. showImageChouzhen = true
  2031. "
  2032. />
  2033. </li>
  2034. </ul>
  2035. <div style="clear: both"></div>
  2036. <a-modal title="图片预览" v-model="showImageChouzhen" :footer="null">
  2037. <img :src="showImageStr" style="width: 100%" />
  2038. </a-modal>
  2039. </a-modal>
  2040. <account-check ref="check" @synchro="implement"></account-check>
  2041. <accountCheckBytedance ref="accountCheckBytedance" @synchro="implement" />
  2042. <permission-modal ref="modalForm" @ok="modalFormOkElse"></permission-modal>
  2043. <!-- 换脸模块 -->
  2044. <change-face
  2045. :status="faceTypeStatus"
  2046. :defaultList="faceChangeList"
  2047. @closeface="handleFaceCloseModal"
  2048. @sureface="handleFaceSureModal"
  2049. >
  2050. </change-face>
  2051. <a-modal
  2052. v-if="faceShowStatus"
  2053. title="换脸操作"
  2054. :visible="faceShowStatus"
  2055. dialog-class="change-face-modal change-list-modal-show"
  2056. @ok="handlePolicyOperationSure"
  2057. @cancel="handlePolicyOperationCancel"
  2058. >
  2059. <a-table
  2060. class="face-right-table"
  2061. ref="table"
  2062. size="middle"
  2063. bordered
  2064. :columns="settlementColumns"
  2065. :dataSource="dataSourceFace"
  2066. :pagination="false"
  2067. :loading="controlLoading"
  2068. >
  2069. <span slot="input_video_url" slot-scope="text, record">
  2070. <div style="width:100px;height:177px;margin-left:25px;">
  2071. <video v-if="record.input_video_url" :src="record.input_video_url" style="width:100px" controls></video>
  2072. <img v-else style="width:100px" src="@/assets/noImg.png">
  2073. </div>
  2074. </span>
  2075. <span slot="output_video_url" slot-scope="text, record">
  2076. <div style="width:100px;height:177px;margin-left:25px;">
  2077. <video v-if="record.output_video_url" :src="record.output_video_url" style="width:100px" controls></video>
  2078. <img v-else style="width:100px" src="@/assets/noImg.png">
  2079. </div>
  2080. </span>
  2081. <span slot="input_image_url" slot-scope="text, record">
  2082. <img v-if="text" :src="text" style="width:100px">
  2083. <img v-else src="@/assets/noImg.png" style="width:100px">
  2084. </span>
  2085. <span slot="actions" slot-scope="text, record">
  2086. <!-- <a :disabled="record.status !== 'finished'" @click="handlePushData(record)">推送</a>
  2087. <a-divider type="vertical"/> -->
  2088. <a @click="handleDownLoadData(record)" :disabled="record.status !== 'finished'">下载</a>
  2089. </span>
  2090. </a-table>
  2091. <a-pagination
  2092. class="pagin-table-class"
  2093. :total="totalAll"
  2094. :show-total="total => `共 ${totalAll} 条`"
  2095. size="small"
  2096. :current="defaultCurrent"
  2097. :defaultPageSize="2"
  2098. @change="onShowSizeChange"
  2099. @showSizeChange="onShowSizeChange"
  2100. />
  2101. </a-modal>
  2102. <a-modal
  2103. v-if="usageDetailsStatus"
  2104. title="使用详情"
  2105. :width="750"
  2106. :visible="usageDetailsStatus"
  2107. dialog-class="usage-details-modal change-face-modal change-list-modal-show"
  2108. :footer="null"
  2109. @cancel="handleProfitModalnCancel"
  2110. >
  2111. <div style="overflow: hidden;">
  2112. <a-tabs v-model="materiaModalType" @change="handleMateriaTabsChange">
  2113. <a-tab-pane key="1" tab="头条">
  2114. <a-table
  2115. class="face-right-table"
  2116. ref="table"
  2117. size="middle"
  2118. bordered
  2119. :columns="materiaColumnsToutiao"
  2120. :dataSource="materiaDataToutiao"
  2121. :pagination="false"
  2122. :loading="toutiaoMateriaLoading"
  2123. >
  2124. <span slot="accountStatus" slot-scope="text">
  2125. <span>{{ text === 0 ? '投放中' : '已暂停' }}</span>
  2126. </span>
  2127. </a-table>
  2128. <a-pagination
  2129. class="pagin-table-class"
  2130. :total="materiaDataTotalToutiao"
  2131. :show-total="total => `共 ${materiaDataTotalToutiao} 条`"
  2132. size="small"
  2133. :current="defaultCurrentToutiao"
  2134. :defaultPageSize="10"
  2135. @change="materiaDataSizeChange"
  2136. @showSizeChange="materiaDataSizeChange"
  2137. />
  2138. </a-tab-pane>
  2139. <a-tab-pane key="2" tab="快手">
  2140. <a-table
  2141. class="face-right-table"
  2142. ref="table"
  2143. size="middle"
  2144. bordered
  2145. :columns="materiaColumnsKuaishou"
  2146. :dataSource="materiaDataKuaishou"
  2147. :pagination="false"
  2148. :loading="kuaishouMateriaLoading"
  2149. >
  2150. <span slot="accountStatus" slot-scope="text">
  2151. <span>{{ text === 0 ? '投放中' : '已暂停' }}</span>
  2152. </span>
  2153. <span slot="refuseCount" slot-scope="text, record">
  2154. <span>{{ record.refuseInfo.refuseCount }}</span>
  2155. </span>
  2156. <span slot="refuseDetail" slot-scope="text, record">
  2157. <a :disabled="!record.refuseInfo.refuseDetail" @click="handleRejectReason(record)">拒绝原因</a>
  2158. </span>
  2159. </a-table>
  2160. <a-pagination
  2161. class="pagin-table-class"
  2162. :total="materiaDataTotalKuaishou"
  2163. :show-total="total => `共 ${materiaDataTotalKuaishou} 条`"
  2164. size="small"
  2165. :current="defaultCurrentKuaishou"
  2166. :defaultPageSize="10"
  2167. @change="materiaDataSizeChangeKuaishou"
  2168. @showSizeChange="materiaDataSizeChangeKuaishou"
  2169. />
  2170. </a-tab-pane>
  2171. </a-tabs>
  2172. </div>
  2173. </a-modal>
  2174. <a-modal
  2175. v-if="recordDetailVisible"
  2176. title="素材同步记录"
  2177. :width="750"
  2178. :visible="recordDetailVisible"
  2179. dialog-class="usage-details-modal change-face-modal change-list-modal-show"
  2180. :footer="null"
  2181. @cancel="handleRecordCancel"
  2182. >
  2183. <div style="overflow: hidden;">
  2184. <a-table
  2185. class="face-right-table"
  2186. ref="table"
  2187. size="middle"
  2188. bordered
  2189. :columns="recordColumns"
  2190. :dataSource="recordData"
  2191. :pagination="recordIpagination"
  2192. :loading="toutiaoMateriaLoading"
  2193. >
  2194. <span slot="createTime" slot-scope="text">
  2195. {{text}}
  2196. </span>
  2197. </a-table>
  2198. </div>
  2199. </a-modal>
  2200. <a-modal
  2201. v-if="rejectReasonStatus"
  2202. title="审核拒绝原因"
  2203. :width="750"
  2204. :visible="rejectReasonStatus"
  2205. :footer="null"
  2206. @cancel="handleRejectReasonCancel"
  2207. >
  2208. <div>
  2209. <p v-for="(item, index) in rejectReasonList" :key="index + 1">{{ index + 1 }}:{{ item }}</p>
  2210. </div>
  2211. </a-modal>
  2212. <a-modal v-model="showDataListVisible" title="信息" :footer="null">
  2213. <div v-if="showDataList">
  2214. <p v-for="(item, index) in showDataList" :key="index">
  2215. 素材:{{item.materialName}},{{item.message}};
  2216. <br/>
  2217. 同步账户:{{item.ids.join()}}
  2218. </p>
  2219. </div>
  2220. </a-modal>
  2221. </a-card>
  2222. </template>
  2223. <script>
  2224. import changeFace from '@/views/modules/Statistics/change-face/change-face';
  2225. import PermissionModal from './modules/DepartModal'
  2226. import { JeecgListMixin } from '@/mixins/videoMaterialMixin'
  2227. import JEllipsis from '@/components/jeecg/JEllipsis'
  2228. import UploadToAli from '@femessage/upload-to-ali'
  2229. import { fileCheck, fileCheckImage, fileEdit, fileEditAll, fileInsertV2 } from '@/api/actor'
  2230. import { deleteAction, getAction, postAction, putAction } from '@/api/manage'
  2231. import qs from 'qs'
  2232. import { mapGetters } from 'vuex'
  2233. import moment from 'moment'
  2234. import selectTable from './comment/selectTable.vue'
  2235. import selectTableProject from '@/views/modules/Statistics/components/selectPagination.vue'
  2236. import BMF from 'browser-md5-file'
  2237. import uploadFile from '@/components/uploadFile.vue'
  2238. import { closeAllVideoFun, stopOtherVideo } from '@/utils/videoControl'
  2239. import accountCheck from './accountCheck'
  2240. import accountCheckBytedance from './accountCheckBytedance'
  2241. let md5Arr = []
  2242. export default {
  2243. name: 'video-material',
  2244. mixins: [JeecgListMixin],
  2245. components: {
  2246. JEllipsis,
  2247. UploadToAli,
  2248. accountCheck,
  2249. selectTable,
  2250. uploadFile,
  2251. PermissionModal,
  2252. accountCheckBytedance,
  2253. selectTableProject,
  2254. changeFace
  2255. },
  2256. data() {
  2257. return {
  2258. rejectReasonStatus: false,
  2259. defaultCurrentKuaishou: 1,
  2260. materiaDataTotalKuaishou: 0,
  2261. kuaishouMateriaLoading: false,
  2262. materiaDataKuaishou: [],
  2263. materiaColumnsKuaishou: [
  2264. {
  2265. title: '账户ID',
  2266. align: 'center',
  2267. dataIndex: 'accountId'
  2268. },
  2269. {
  2270. title: '账户所属人',
  2271. align: 'center',
  2272. dataIndex: 'userName'
  2273. },
  2274. {
  2275. title: '账户状态',
  2276. align: 'center',
  2277. dataIndex: 'accountStatus',
  2278. scopedSlots: {customRender: 'accountStatus'}
  2279. },
  2280. {
  2281. title: '视频ID',
  2282. align: 'center',
  2283. dataIndex: 'photoId'
  2284. },
  2285. {
  2286. title: '关联创意总数(自定义创意)',
  2287. align: 'center',
  2288. dataIndex: 'relationCount'
  2289. },
  2290. {
  2291. title: '审核拒绝创意数',
  2292. align: 'center',
  2293. dataIndex: 'refuseCount',
  2294. scopedSlots: {customRender: 'refuseCount'}
  2295. },
  2296. {
  2297. title: '审核拒绝原因',
  2298. align: 'center',
  2299. dataIndex: 'refuseDetail',
  2300. scopedSlots: {customRender: 'refuseDetail'}
  2301. },
  2302. ],
  2303. toutiaoMateriaLoading: false,
  2304. defaultCurrentToutiao: 1,
  2305. materiaDataTotalToutiao: 0,
  2306. materiaDataToutiao: [],
  2307. materiaColumnsToutiao: [
  2308. {
  2309. title: '账户ID',
  2310. align: 'center',
  2311. dataIndex: 'accountId'
  2312. },
  2313. {
  2314. title: '账户归属人',
  2315. align: 'center',
  2316. dataIndex: 'userName'
  2317. },
  2318. {
  2319. title: '账户状态',
  2320. align: 'center',
  2321. dataIndex: 'accountStatus',
  2322. scopedSlots: {customRender: 'accountStatus'}
  2323. },
  2324. {
  2325. title: '素材ID',
  2326. align: 'center',
  2327. dataIndex: 'materialId'
  2328. },
  2329. {
  2330. title: '素材关联创意数',
  2331. align: 'center',
  2332. dataIndex: 'relationCount'
  2333. }
  2334. ],
  2335. materiaModalType: '2',
  2336. materialUseDetailList: {},
  2337. usageDetailsStatus: false,
  2338. recordDetailVisible:false,
  2339. recordSignature: null,
  2340. recordColumns:[
  2341. {
  2342. title: '项目',
  2343. align: 'center',
  2344. dataIndex: 'projectName'
  2345. },
  2346. {
  2347. title: '账户Id',
  2348. align: 'center',
  2349. dataIndex: 'userId',
  2350. customRender: function (text, records) {
  2351. if(records.mediaId == '1' || records.mediaId == '3') {
  2352. return records.accountId
  2353. }else if(records.mediaId == '2' || records.mediaId == '4') {
  2354. return records.userId
  2355. }else {
  2356. return text
  2357. }
  2358. }
  2359. },
  2360. {
  2361. title: '媒体',
  2362. align: 'center',
  2363. dataIndex: 'mediaId',
  2364. customRender: function (text) {
  2365. if (text == '1' || text == '3') {
  2366. return '头条'
  2367. } else if (text == '2' || text == '4') {
  2368. return '快手'
  2369. } else {
  2370. return text
  2371. }
  2372. }
  2373. },
  2374. {
  2375. title: '同步人',
  2376. align: 'center',
  2377. dataIndex: 'userName'
  2378. },
  2379. {
  2380. title: '同步时间',
  2381. align: 'center',
  2382. dataIndex: 'createTime',
  2383. scopedSlots: { customRender: 'createTime' },
  2384. },
  2385. {
  2386. title: '结果',
  2387. align: 'center',
  2388. dataIndex: 'remarks'
  2389. }
  2390. ],
  2391. recordData:[],
  2392. recordIpagination: {
  2393. current: 1,
  2394. pageSize: 10,
  2395. // pageSizeOptions: ['10', '20', '30'],
  2396. showTotal: (total, range) => {
  2397. return range[0] + "-" + range[1] + " 共" + total + "条"
  2398. },
  2399. showQuickJumper: true,
  2400. // showSizeChanger:true,
  2401. // pageSizeOptions: ['10', '30', '50'],
  2402. total: 0,
  2403. onChange: (current, pageSize) => {
  2404. // 切换分页时的回调,
  2405. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  2406. this.recordIpagination.current = current;
  2407. this.recordIpagination.pageSize= pageSize;
  2408. this.handleGetRecordDetail(this.recordSignature)
  2409. }
  2410. },
  2411. ruleForm:{
  2412. projectId:'',
  2413. urlList:[],
  2414. urlListData:[]
  2415. },
  2416. loadingBatch:false,
  2417. batchUploadVisible:false,
  2418. controlLoading: false,
  2419. defaultCurrent: 1,
  2420. settlementColumns: [
  2421. {
  2422. title: '原视频',
  2423. dataIndex: 'input_video_url',
  2424. align: 'center',
  2425. width: 150,
  2426. scopedSlots: {customRender: 'input_video_url'}
  2427. },
  2428. {
  2429. title: '人脸',
  2430. dataIndex: 'input_image_url',
  2431. align: 'center',
  2432. width: 150,
  2433. scopedSlots: {customRender: 'input_image_url'}
  2434. },
  2435. {
  2436. title: '更换后视频',
  2437. dataIndex: 'output_video_url',
  2438. align: 'center',
  2439. width: 150,
  2440. scopedSlots: {customRender: 'output_video_url'}
  2441. },
  2442. {
  2443. title: '状态',
  2444. align: 'center',
  2445. dataIndex: 'status',
  2446. width: 100
  2447. },
  2448. {
  2449. title: '创建时间',
  2450. align: 'center',
  2451. dataIndex: 'create_time',
  2452. width: 160
  2453. },
  2454. {
  2455. title: '操作',
  2456. align: 'center',
  2457. dataIndex: 'actions',
  2458. width: 130,
  2459. scopedSlots: {customRender: 'actions'}
  2460. }
  2461. ],
  2462. faceShowStatus: false,
  2463. faceTypeStatus: false,
  2464. faceChangeList: {},
  2465. designList: [],
  2466. // 标签的数据
  2467. labelValue: [],
  2468. options: [],
  2469. departTree: [],
  2470. departTreeModality: [],
  2471. departTreeContent: [],
  2472. departTreeSence: [],
  2473. departTreeMod: [],
  2474. departValue: [],
  2475. departValueInfo: [],
  2476. materialInnovate:false,
  2477. departValueInfoModality: [],
  2478. departValueInfoContent: [],
  2479. departValueInfoSence: [],
  2480. departValueInfoMod: [],
  2481. tagInfoList: [],
  2482. tagInfoListVisible: false,
  2483. tagCode: null,
  2484. loadingTag: false,
  2485. showImageChouzhen: false,
  2486. showImageStr: null,
  2487. coverPreviewVisible: false,
  2488. chouzhen: false,
  2489. chouzhenList: [],
  2490. model: [],
  2491. modelNew: [],
  2492. goodsColumns: [
  2493. {
  2494. title: '封面预览',
  2495. // dataIndex: 'coverUrl',
  2496. // key: 'coverUrl',
  2497. dataIndex: 'url',
  2498. align: 'center',
  2499. scopedSlots: {
  2500. customRender: 'url',
  2501. },
  2502. },
  2503. {
  2504. title: '审核',
  2505. align: 'center',
  2506. dataIndex: 'action',
  2507. width: 100,
  2508. scopedSlots: {
  2509. customRender: 'action',
  2510. },
  2511. },
  2512. ],
  2513. editMaterialVisible:false,
  2514. editMaterialId:'',
  2515. loadingEdit:false,
  2516. addImageVisible: false,
  2517. addImageData: null,
  2518. projectId: '',
  2519. inputVisible: false,
  2520. inputValue: '',
  2521. labelCol: {
  2522. xs: {
  2523. span: 24,
  2524. },
  2525. sm: {
  2526. span: 5,
  2527. },
  2528. },
  2529. wrapperCol: {
  2530. xs: {
  2531. span: 24,
  2532. },
  2533. sm: {
  2534. span: 12,
  2535. },
  2536. },
  2537. queryParam: {},
  2538. dataElse: [],
  2539. ascription: {
  2540. clipId: [], //剪辑人id
  2541. shotId: [], //拍摄人id
  2542. planId: [], //策划id
  2543. planeId: [], //平面id
  2544. },
  2545. show: true,
  2546. visible: false,
  2547. visibleDetail: false,
  2548. personVisible: false,
  2549. confirmLoading: false,
  2550. loadingElse: false,
  2551. loadingImage: false,
  2552. loadingPerson: false,
  2553. activeKey: 'video',
  2554. active: '0',
  2555. examinelList: [
  2556. {
  2557. value: '0',
  2558. tab: '未审核',
  2559. },
  2560. {
  2561. value: '1',
  2562. tab: '已批准',
  2563. },
  2564. {
  2565. value: '2',
  2566. tab: '已驳回',
  2567. },
  2568. // {
  2569. // value: '3',
  2570. // tab: '有效视频',
  2571. // },
  2572. ],
  2573. // 表头
  2574. columns: [],
  2575. urlList: {
  2576. url: '',
  2577. md5: '',
  2578. name: '',
  2579. },
  2580. urlListImage: {
  2581. url: [],
  2582. md5: [],
  2583. name: [],
  2584. size: [],
  2585. },
  2586. watermarkUrl: {
  2587. url: '',
  2588. md5: '',
  2589. name: '',
  2590. },
  2591. url: {
  2592. list: '/ctop/materialInfo/listV2',
  2593. },
  2594. detail: false,
  2595. form: this.$form.createForm(this),
  2596. formPerson: this.$form.createForm(this),
  2597. editMaterialform: this.$form.createForm(this),
  2598. tags: [],
  2599. refuseFile: [],
  2600. refuseReason: '',
  2601. refuseReasonImage: '',
  2602. creativeCopywriter: '',
  2603. customDomain: '',
  2604. region: 'oss-cn-beijing',
  2605. bucket: 'ctop-media',
  2606. acceptVideo: 'video/mpeg,video/mp4',
  2607. acceptImage: 'image/jpeg,image/jpg,image/png',
  2608. accessKeyId: 'LTAIbNbqWzSOklQV',
  2609. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  2610. showDataList:null,
  2611. showDataListVisible:false,
  2612. checkArr: [],
  2613. checkAll: false,
  2614. checkArrImage: [],
  2615. checkAllImage: false,
  2616. showUrl: '',
  2617. showUrlWater: '',
  2618. materialName: '',
  2619. materialDescribe: '',
  2620. name: '',
  2621. detail: null,
  2622. add: true,
  2623. id: '',
  2624. role: {
  2625. roleCode: '',
  2626. roleName: '',
  2627. },
  2628. key: '0',
  2629. mediaId: null,
  2630. sizeType: [],
  2631. size: null,
  2632. repeat: false,
  2633. excellent: 0,
  2634. code: '',
  2635. material: [],
  2636. imageArrList: [],
  2637. showDataBool: false,
  2638. kuaishouData: null,
  2639. douyinData: null,
  2640. bohui: '',
  2641. bohuiShow: false,
  2642. waterLoading: false,
  2643. videoTag: [],
  2644. videoVisibleChange: '',
  2645. allDetailData: null,
  2646. dataAllList: [],
  2647. dataSourceFace: [],
  2648. totalAll: 0,
  2649. activeCollapse: 0
  2650. }
  2651. },
  2652. filters: {
  2653. getDate(value) {
  2654. let date = new Date(value)
  2655. let y = date.getFullYear()
  2656. let MM = date.getMonth() + 1
  2657. MM = MM < 10 ? '0' + MM : MM
  2658. let d = date.getDate()
  2659. d = d < 10 ? '0' + d : d
  2660. return y + '-' + MM + '-' + d
  2661. },
  2662. },
  2663. computed: {
  2664. dirImg() {
  2665. let date = new Date()
  2666. let y = date.getFullYear()
  2667. let MM = date.getMonth() + 1
  2668. MM = MM < 10 ? '0' + MM : MM
  2669. let d = date.getDate()
  2670. d = d < 10 ? '0' + d : d
  2671. return 'image/' + y + '-' + MM + '-' + d + '/'
  2672. },
  2673. dirVideo() {
  2674. let date = new Date()
  2675. let y = date.getFullYear()
  2676. let MM = date.getMonth() + 1
  2677. MM = MM < 10 ? '0' + MM : MM
  2678. let d = date.getDate()
  2679. d = d < 10 ? '0' + d : d
  2680. return 'video/' + y + '-' + MM + '-' + d + '/'
  2681. },
  2682. },
  2683. created() {
  2684. this.queryParam.type = 'VIDEO'
  2685. this.queryParam.userId = this.userInfo().id
  2686. this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  2687. this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  2688. // this.queryParam.status = key
  2689. this.ipagination.pageSize = 8
  2690. this.getParticipateList(null)
  2691. // /sys/user/getRoleInfo
  2692. getAction('/sys/user/getRoleInfo', {
  2693. userId: this.userInfo().id,
  2694. }).then((res) => {
  2695. this.role = res
  2696. })
  2697. getAction('/ctop/videoWatermarkTemplate/list').then((res) => {
  2698. if (res.success) {
  2699. this.sizeType = res.result.records
  2700. }
  2701. })
  2702. this.getTagListAll()
  2703. },
  2704. updated() {
  2705. stopOtherVideo()
  2706. },
  2707. mounted() {
  2708. setInterval(function () {
  2709. document.querySelectorAll('.el-cascader-node__label').forEach((el) => {
  2710. el.onclick = function () {
  2711. if (this.previousElementSibling) this.previousElementSibling.click()
  2712. }
  2713. })
  2714. }, 1000)
  2715. this.getDesignList()
  2716. getAction('/ctop/tagInfo/treeList', {
  2717. pageSize: 10000,
  2718. }).then((res) => {
  2719. console.log(res)
  2720. if (res.success) {
  2721. this.options = res.result.records
  2722. } else {
  2723. this.$message.error('数据请求失败!')
  2724. }
  2725. })
  2726. },
  2727. watch: {
  2728. $route: function (n, o) {
  2729. if (n.path == '/modules/material/videoMaterial') {
  2730. this.queryParam.userId = this.userInfo().id
  2731. this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  2732. this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
  2733. this.loadData()
  2734. }
  2735. },
  2736. 'queryParam.productId': function (n, o) {
  2737. if (n != '') {
  2738. this.getList(n)
  2739. this.checkArr = []
  2740. this.$refs.selectTableProject.keyValue = ''
  2741. this.$refs.selectTableProject.getData(n)
  2742. }
  2743. },
  2744. visibleDetail: function (n, o) {
  2745. if (!n) {
  2746. this.refuseFile = []
  2747. this.refuseReason = ''
  2748. closeAllVideoFun()
  2749. }
  2750. },
  2751. labelValue: {
  2752. deep: true,
  2753. handler(n, o) {
  2754. if (n.length >= 1) {
  2755. this.queryParam.tagCode = n[n.length - 1]
  2756. } else {
  2757. this.queryParam.tagCode = ''
  2758. }
  2759. // this.loadData()
  2760. },
  2761. },
  2762. batchUploadVisible:function(n,o){
  2763. if(!n){
  2764. md5Arr = []
  2765. this. ruleForm={
  2766. projectId:'',
  2767. urlList:[],
  2768. urlListData:[]
  2769. }
  2770. }
  2771. }
  2772. },
  2773. methods: {
  2774. handleMateriaTabsChange(e) {
  2775. const defaultData = this.materialUseDetailList;
  2776. this.defaultCurrentToutiao = 1;
  2777. this.materiaDataToutiao = defaultData['byteDance'] ? defaultData['byteDance'].slice(0, 10) : [];
  2778. this.defaultCurrentKuaishou = 1;
  2779. this.materiaDataKuaishou = defaultData['kuaishou'] ? defaultData['kuaishou'].slice(0, 10) : [];
  2780. },
  2781. handleRejectReasonCancel() {
  2782. this.rejectReasonStatus = false;
  2783. },
  2784. handleRejectReason(data) {
  2785. this.rejectReasonList = data.refuseInfo.refuseDetail.split('@#');
  2786. this.rejectReasonStatus = true;
  2787. },
  2788. materiaDataSizeChange(current, pageSize) {
  2789. this.materiaDataToutiao = [];
  2790. this.defaultCurrentToutiao = current;
  2791. const defaultData = this.materialUseDetailList['byteDance'];
  2792. this.materiaDataToutiao = [...defaultData.slice(10 * current - 10, 10 * current)];
  2793. },
  2794. materiaDataSizeChangeKuaishou(current, pageSize) {
  2795. this.materiaDataKuaishou = [];
  2796. this.defaultCurrentKuaishou = current;
  2797. const defaultData = this.materialUseDetailList['kuaishou'];
  2798. this.materiaDataKuaishou = [...defaultData.slice(10 * current - 10, 10 * current)];
  2799. },
  2800. handleProfitModalnCancel() {
  2801. this.materialUseDetailList = {};
  2802. this.materiaDataToutiao = [];
  2803. this.materiaDataTotalToutiao = 0;
  2804. this.defaultCurrentToutiao = 1;
  2805. this.materiaDataKuaishou = [];
  2806. this.materiaDataTotalKuaishou = 0;
  2807. this.defaultCurrentKuaishou = 1;
  2808. this.materiaModalType = '2';
  2809. this.usageDetailsStatus = false;
  2810. },
  2811. handleRecordCancel(){
  2812. this.recordDetailVisible = false;
  2813. },
  2814. handleRecord(data){
  2815. this.recordIpagination.current = 1
  2816. this.handleGetRecordDetail(data.code);
  2817. this.recordSignature = data.code;
  2818. this.recordDetailVisible = true;
  2819. this.toutiaoMateriaLoading = true;
  2820. this.kuaishouMateriaLoading = true;
  2821. },
  2822. handleGetRecordDetail(id) {
  2823. // 测试code '7b676546bfb50f1b992d44bd479a1536'
  2824. var params = {}
  2825. params.signature = id
  2826. params.pageNo = this.recordIpagination.current
  2827. params.pageSize = this.recordIpagination.pageSize
  2828. getAction('/ctop/materialUpload/uploadDetail', params).then(result => {
  2829. if (result.success) {
  2830. // 头条处理数据
  2831. this.recordData = result.result.list || []
  2832. this.recordIpagination.total = result.result.total || 0
  2833. }
  2834. else {
  2835. this.$message.error(result.message);
  2836. }
  2837. }).catch(error => {
  2838. console.log(error, 'eeee');
  2839. }).finally(() => {
  2840. this.toutiaoMateriaLoading = false;
  2841. this.kuaishouMateriaLoading = false;
  2842. });
  2843. },
  2844. handleUsageDetails(data) {
  2845. this.handleGetMaterialUseDetail(data.code);
  2846. this.usageDetailsStatus = true;
  2847. this.toutiaoMateriaLoading = true;
  2848. this.kuaishouMateriaLoading = true;
  2849. },
  2850. handleGetMaterialUseDetail(id) {
  2851. // 测试code '7b676546bfb50f1b992d44bd479a1536'
  2852. getAction('/materialUse/getMaterialUseDetail', {code: id}).then(result => {
  2853. if (result.success) {
  2854. const defaultData = result.result;
  2855. this.materialUseDetailList = defaultData;
  2856. // 头条处理数据
  2857. this.materiaDataToutiao = defaultData['byteDance'] ? defaultData['byteDance'].slice(0, 10) : [];
  2858. this.materiaDataTotalToutiao = defaultData['byteDance'] ? defaultData['byteDance'].length : 0;
  2859. // 快手处理数据
  2860. this.materiaDataKuaishou = defaultData['kuaishou'] ? defaultData['kuaishou'].slice(0, 10) : [];
  2861. this.materiaDataTotalKuaishou = defaultData['kuaishou'] ? defaultData['kuaishou'].length : 0;
  2862. }
  2863. else {
  2864. this.$message.error(result.message);
  2865. }
  2866. }).catch(error => {
  2867. console.log(error, 'eeee');
  2868. }).finally(() => {
  2869. this.toutiaoMateriaLoading = false;
  2870. this.kuaishouMateriaLoading = false;
  2871. });
  2872. },
  2873. ruleFormFile(file){
  2874. var bmf = new BMF()
  2875. var that = this
  2876. return new Promise(function (resolve, reject) {
  2877. bmf.md5(file, (err, md5) => {
  2878. let videoInfo = {name:file.name,md5:md5}
  2879. if(md5Arr.findIndex(item=>item==md5)>-1){
  2880. reject()
  2881. that.$message.error('素材'+file.name+'已经上传')
  2882. return
  2883. }else{
  2884. md5Arr.push(md5)
  2885. }
  2886. // that.ruleForm.urlList = []
  2887. fileCheck({
  2888. code: md5,
  2889. projectId: that.ruleForm.projectId,
  2890. }).then((res) => {
  2891. if (res.code == 0) {
  2892. that.$message.error('素材'+file.name+'已经上传')
  2893. reject()
  2894. } else {
  2895. resolve()
  2896. // reject()
  2897. }
  2898. })
  2899. })
  2900. })
  2901. },
  2902. ruleFormOverUpload(urlAll){
  2903. this.ruleForm.urlListData = urlAll.map(item=>{
  2904. return {
  2905. url:item.url,
  2906. planId:undefined,
  2907. clipId:undefined,
  2908. shotId:undefined,
  2909. modTagList:[],
  2910. modalityTagList:[],
  2911. senceTagList:[],
  2912. materialName:'',
  2913. materialInnovate:false
  2914. }
  2915. })
  2916. },
  2917. ruleFormRemoveUpload(file){
  2918. //media-1301855440.cos.ap-chongqing.myqcloud.com/video/2021-08-16/03-1629102879421.mp4
  2919. let index = this.ruleForm.urlListData.findIndex(item=>item.url==file.url)
  2920. md5Arr = []
  2921. if(index>-1){
  2922. this.ruleForm.urlListData.splice(index,1)
  2923. }
  2924. },
  2925. handleOkBatch(){
  2926. this.$refs.ruleForm.validate(valid => {
  2927. if(valid){
  2928. if(this.ruleForm.urlListData.length == 0){
  2929. this.$message.error('请上传视频素材')
  2930. return
  2931. }
  2932. this.loadingBatch = true
  2933. let params = {}
  2934. params.projectId = this.ruleForm.projectId
  2935. params.videoArray = this.ruleForm.urlListData.map(item=>{
  2936. return {
  2937. ...item,
  2938. ascription:{
  2939. planId:item.planId,
  2940. clipId:item.clipId,
  2941. shotId:item.shotId,
  2942. },
  2943. materialInnovate:item.materialInnovate?2:1
  2944. }
  2945. })
  2946. postAction('/insertV3',params).then(res=>{
  2947. this.loadingBatch = false
  2948. if(res.success){
  2949. md5Arr = []
  2950. this.$message.success('上传成功')
  2951. this.batchUploadVisible = false
  2952. this.loadData(1)
  2953. }else{
  2954. this.$message.error(res.message)
  2955. }
  2956. })
  2957. }else{
  2958. this.$message.error('有必填项未填')
  2959. }
  2960. })
  2961. },
  2962. syncDesign(){
  2963. let clipId = this.ruleForm.urlListData[0].clipId
  2964. let planId = this.ruleForm.urlListData[0].planId
  2965. let shotId = this.ruleForm.urlListData[0].shotId
  2966. this.ruleForm.urlListData = this.ruleForm.urlListData.map(item=>{
  2967. return {
  2968. ...item,
  2969. clipId,
  2970. planId,
  2971. shotId
  2972. }
  2973. })
  2974. },
  2975. editMaterialName(item) {
  2976. this.editMaterialVisible = true
  2977. this.editMaterialId = item.id
  2978. this.$nextTick(()=>{
  2979. this.editMaterialform.setFieldsValue({name:item.materialName})
  2980. })
  2981. },
  2982. handleOkEditMaterialName(){
  2983. this.editMaterialform.validateFieldsAndScroll((err, values) => {
  2984. if (err) {
  2985. // 这里做逻辑处理
  2986. } else {
  2987. this.loadingEdit = true
  2988. let params={}
  2989. params.id = this.editMaterialId
  2990. params.name = values.name
  2991. postAction('/ctop/materialInfo/editName', params).then(res=>{
  2992. this.loadingEdit = false
  2993. if(res.success){
  2994. this.$message.success('修改成功')
  2995. this.editMaterialVisible = false
  2996. this.editMaterialform.resetFields()
  2997. }else{
  2998. this.$message.error(res.message)
  2999. }
  3000. })
  3001. }
  3002. })
  3003. },
  3004. // TODO 推送操作
  3005. handlePushData(list) {
  3006. const paramsData = {
  3007. projectId: this.faceShowList.projectId, // 项目选择
  3008. ascription: {
  3009. planId: 'e9ca23d68d884d4ebb19d07889727dae',
  3010. shotId: 'e9ca23d68d884d4ebb19d07889727dae',
  3011. clipId: 'e9ca23d68d884d4ebb19d07889727dae'
  3012. },
  3013. status: '1',
  3014. code: list.output_video_md5,
  3015. url: list.output_video_url && list.output_video_url.split(':')[1],
  3016. type: 'VIDEO',
  3017. userId: this.userInfo().id,
  3018. modalityTagList: this.departValueInfoModality, // 形式标签
  3019. senceTagList: this.departValueInfoSence, // 场景标签
  3020. modTagList: this.departValueInfoMod // 基调标签
  3021. };
  3022. const that = this;
  3023. this.$confirm({
  3024. title: '提示',
  3025. content: '是否进行推送操作',
  3026. onOk() {
  3027. fileInsertV2(paramsData).then(res => {
  3028. if (res.code === 0) {
  3029. that.handlePolicyOperationCancel();
  3030. that.$emit('sureface');
  3031. that.$message.success('素材已经同步到未审核列表,请进入查看');
  3032. }
  3033. else {
  3034. that.$message.error(res.message);
  3035. }
  3036. });
  3037. }
  3038. });
  3039. },
  3040. // 下载操作
  3041. handleDownLoadData(list) {
  3042. const randomTime = new Date().getTime() + '_check.mp4';
  3043. fetch(list.output_video_url)
  3044. .then(res => res.blob())
  3045. .then(blob => {
  3046. const a = document.createElement('a');
  3047. document.body.appendChild(a);
  3048. a.style.display = 'none';
  3049. // 使用获取到的blob对象创建的url
  3050. const url = window.URL.createObjectURL(blob);
  3051. a.href = url;
  3052. // 指定下载的文件名
  3053. a.download = randomTime;
  3054. a.click()
  3055. document.body.removeChild(a);
  3056. // 移除blob对象的url
  3057. window.URL.revokeObjectURL(url);
  3058. });
  3059. },
  3060. onShowSizeChange(current, pageSize) {
  3061. this.dataSourceFace = [];
  3062. this.defaultCurrent = current;
  3063. const defaultData = [...this.dataAllList];
  3064. this.dataSourceFace = [...defaultData.slice(2 * current - 2, 2 * current)];
  3065. },
  3066. handlePolicyOperationSure() {
  3067. this.defaultCurrent = 1;
  3068. this.faceShowStatus = false;
  3069. },
  3070. handlePolicyOperationCancel() {
  3071. this.defaultCurrent = 1;
  3072. this.faceShowStatus = false;
  3073. },
  3074. handleAllChangeFace() {
  3075. this.faceShowStatus = true;
  3076. this.controlLoading = true;
  3077. this.dataSourceFace = [];
  3078. postAction('http://faceswap.tjyourong.com.cn/jeecg-boot/task/query', {}).then(result => {
  3079. if (result.code === 0) {
  3080. const defaultData = result.data;
  3081. defaultData.forEach(item => {
  3082. item.create_time = item.create_time ? item.create_time.replace('T', ' ') : '-';
  3083. });
  3084. this.dataAllList = defaultData;
  3085. this.dataSourceFace = defaultData.slice(0, 2);
  3086. this.totalAll = defaultData.length ? defaultData.length : 0;
  3087. }
  3088. else {
  3089. this.dataAllList = [];
  3090. this.dataSourceFace = [];
  3091. this.totalAll = 0;
  3092. this.$message.error(result.message);
  3093. }
  3094. }).catch(error => {
  3095. console.log(error, 'eeee');
  3096. }).finally(() => {
  3097. this.controlLoading = false;
  3098. });
  3099. },
  3100. handleChangeFace(data) {
  3101. this.faceTypeStatus = true;
  3102. this.faceChangeList = data;
  3103. },
  3104. handleFaceCloseModal() {
  3105. this.faceTypeStatus = false;
  3106. },
  3107. handleFaceSureModal() {
  3108. this.searchQuery();
  3109. },
  3110. // 获取设计人员
  3111. getDesignList() {
  3112. postAction('/ctop/kuaishou/videoReport/getDesignList').then((res) => {
  3113. if (res.success) {
  3114. this.designList = res.result
  3115. }
  3116. })
  3117. },
  3118. changeTag(visible) {
  3119. if (this.videoVisibleChange != visible) {
  3120. this.videoVisibleChange = visible
  3121. this.videoTag = []
  3122. getAction('/ctop/materialTagInfo/list', { code: visible }).then((res) => {
  3123. this.videoTag = res.result.records.map((item) => {
  3124. return item.tagName
  3125. })
  3126. })
  3127. } else {
  3128. return
  3129. }
  3130. },
  3131. modalFormOkElse() {
  3132. this.getTagListAll()
  3133. },
  3134. clearChangjing(data){
  3135. if(data.includes(60158)
  3136. || data.includes(60159)
  3137. || data.includes(101)
  3138. || data.includes(104)
  3139. || data.includes(112)){
  3140. this.departValueInfoSence = []
  3141. }
  3142. },
  3143. handleOkTag(e) {
  3144. this.loadingTag = true
  3145. if(this.departValueInfoModality.includes(60158)
  3146. || this.departValueInfoModality.includes(60159)
  3147. || this.departValueInfoModality.includes(101)
  3148. || this.departValueInfoModality.includes(104)
  3149. || this.departValueInfoModality.includes(112)){
  3150. this.departValueInfoSence = []
  3151. }
  3152. var data = [
  3153. ...this.departValueInfoModality,
  3154. ...this.departValueInfoMod,
  3155. ...this.departValueInfoContent,
  3156. ...this.departValueInfoSence,
  3157. ]
  3158. var params = {}
  3159. params.id = this.id
  3160. params.materialInnovate = this.materialInnovate?2:1
  3161. fileEdit({
  3162. ...params
  3163. }).then((res) => {
  3164. })
  3165. postAction('/ctop/materialTagInfo/mark', {
  3166. code: this.tagCode,
  3167. tagList: data
  3168. }).then((res) => {
  3169. if (res.success) {
  3170. this.departValueInfoModality = []
  3171. this.departValueInfoMod = []
  3172. this.departValueInfoContent = []
  3173. this.departValueInfoSence = []
  3174. this.materialInnovate = false
  3175. this.loadingTag = false
  3176. this.tagInfoListVisible = false
  3177. this.loadData()
  3178. } else {
  3179. this.loadingTag = false
  3180. this.$message.error(res.message)
  3181. }
  3182. })
  3183. },
  3184. editTagList(item) {
  3185. this.tagInfoListVisible = true
  3186. this.materialInnovate = item.materialInnovate == 1?false:true
  3187. this.getTagListInfo(item.code)
  3188. this.tagCode = item.code
  3189. this.id = item.id
  3190. },
  3191. getTagListAll() {
  3192. this.departTree = []
  3193. this.departTreeModality = [] //形式
  3194. this.departTreeContent = [] // 内容
  3195. this.departTreeSence = [] // 场景
  3196. this.departTreeMod = [] //基调
  3197. this.getQueryTree(1, 'departTreeModality')
  3198. this.getQueryTree(2, 'departTreeMod')
  3199. this.getQueryTree(3, 'departTreeContent')
  3200. this.getQueryTree(4, 'departTreeSence')
  3201. },
  3202. getQueryTree(type, arr) {
  3203. getAction('/ctop/tagInfo/queryTreeList', {
  3204. categoryId: type,
  3205. }).then((res) => {
  3206. if (res.success) {
  3207. if (res.result) {
  3208. this[arr] = this.getTreeData(res.result)
  3209. }
  3210. }
  3211. })
  3212. },
  3213. getTreeData(data) {
  3214. for (var i = 0; i < data.length; i++) {
  3215. if (data[i].children) {
  3216. if (data[i].children.length < 1) {
  3217. // children若为空数组,则将children设为undefined
  3218. data[i].disabled = false
  3219. } else {
  3220. // // children若不为空数组,则继续 递归调用 本方法
  3221. data[i].disabled = true
  3222. this.getTreeData(data[i].children)
  3223. }
  3224. } else {
  3225. data[i].disabled = false
  3226. }
  3227. }
  3228. return data
  3229. },
  3230. showBoHui(item) {
  3231. this.bohui = item
  3232. this.bohuiShow = true
  3233. },
  3234. editImage(item, status) {
  3235. var params = {}
  3236. params.id = item.id
  3237. params.status = status
  3238. params.auditorId = this.userInfo().id
  3239. if (status == '1') {
  3240. } else {
  3241. params.refuseReason = this.refuseReasonImage
  3242. }
  3243. var updateArr = [params]
  3244. putAction('/ctop/MaterialImageInfo/batchEdit', updateArr).then((res) => {
  3245. console.log(res)
  3246. if (res.success) {
  3247. // this.coverPreviewVisible = false
  3248. getAction('/ctop/MaterialImageInfo/list', {
  3249. videoId: this.code,
  3250. }).then((res) => {
  3251. if (res.success) {
  3252. this.model = res.result.map((item, index) => {
  3253. return {
  3254. ...item,
  3255. key: index,
  3256. }
  3257. })
  3258. this.modelNew = this.model.filter((item, index) => {
  3259. return item.status == '0'
  3260. })
  3261. if (this.modelNew.length == 0) {
  3262. this.coverPreviewVisible = false
  3263. }
  3264. }
  3265. })
  3266. this.loadData()
  3267. } else {
  3268. this.$message.error(res.message)
  3269. }
  3270. })
  3271. },
  3272. editImageAll(status) {
  3273. this.checkArrImage
  3274. // var params = {}
  3275. // params.id = item.id
  3276. // params.status = status
  3277. var updateArr = []
  3278. if (status == '1') {
  3279. updateArr = this.checkArrImage.map((item) => {
  3280. return {
  3281. id: item,
  3282. status: status,
  3283. }
  3284. })
  3285. } else {
  3286. updateArr = this.checkArrImage.map((item) => {
  3287. return {
  3288. id: item,
  3289. status: status,
  3290. refuseReason: this.refuseReasonImage,
  3291. }
  3292. })
  3293. }
  3294. putAction('/ctop/MaterialImageInfo/batchEdit', updateArr).then((res) => {
  3295. if (res.success) {
  3296. // this.coverPreviewVisible = false
  3297. getAction('/ctop/MaterialImageInfo/list', {
  3298. videoId: this.code,
  3299. }).then((res) => {
  3300. if (res.success) {
  3301. this.checkArrImage = []
  3302. this.checkAllImage = false
  3303. this.model = res.result.map((item, index) => {
  3304. return {
  3305. ...item,
  3306. key: index,
  3307. }
  3308. })
  3309. }
  3310. })
  3311. this.loadData()
  3312. } else {
  3313. this.$message.error(res.message)
  3314. }
  3315. })
  3316. },
  3317. showData(item) {
  3318. if (item.byteDance || item.kuaiShou) {
  3319. this.showDataBool = true
  3320. this.kuaishouData = item.kuaiShou
  3321. this.douyinData = item.byteDance
  3322. } else {
  3323. this.$message.error('抖音和快手都无数据')
  3324. return
  3325. }
  3326. },
  3327. setSuccess() {
  3328. var params = {}
  3329. params.id = this.code
  3330. params.excellent = this.excellent == 1 ? 0 : 1
  3331. getAction('/ctop/materialInfo/excellent/set', params).then((res) => {
  3332. if (res.success) {
  3333. this.excellent = this.excellent == 1 ? 0 : 1
  3334. this.loadData(this.ipagination.current)
  3335. }
  3336. })
  3337. },
  3338. getData(className) {
  3339. return this.form.getFieldValue(className)
  3340. },
  3341. deleteData(id) {
  3342. deleteAction('/ctop/materialInfo/delete', {
  3343. id: id,
  3344. }).then((res) => {
  3345. if (res.success) {
  3346. this.$message.success('删除成功')
  3347. this.loadData()
  3348. } else {
  3349. this.$message.error(res.message)
  3350. }
  3351. })
  3352. },
  3353. filterOption(input, option) {
  3354. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  3355. },
  3356. moment,
  3357. tongbu(value) {
  3358. this.mediaId = value
  3359. // getAction('/ctop/project/queryById', { id: this.queryParam.projectId }).then((res) => {
  3360. // console.log(res)
  3361. // if (res.success) {
  3362. if (value == '1' || value == '3') {
  3363. this.$refs.check.getData('/ctop/userAllocation/getAccountListByUserIdAndProductId', {
  3364. userId: this.userInfo().id,
  3365. productId: this.queryParam.productId,
  3366. mediaId: value,
  3367. })
  3368. } else if (value == '2' || value == '4') {
  3369. this.$refs.accountCheckBytedance.getParticipateList(this.queryParam.productId)
  3370. // this.$refs.check.getData('/ctop/userAllocation/getAccountListByUserIdAndProductId', {
  3371. // userId: this.userInfo().id,
  3372. // productId: this.queryParam.productId,
  3373. // mediaId: value,
  3374. // })
  3375. }
  3376. // } else {
  3377. // this.$message.error('网络波动,请稍后再试')
  3378. // }
  3379. // })
  3380. },
  3381. implement(data) {
  3382. // {treeData:data,shieldBackwardSwitch:this.shieldBackwardSwitch}
  3383. var params = {}
  3384. params.mediaId = this.mediaId
  3385. params.materialArray = JSON.stringify(this.checkArr)
  3386. params.accountArray = data.treeData ? JSON.stringify(data.treeData) : JSON.stringify(data)
  3387. params.loginId = this.userInfo().id
  3388. params.userName = this.userInfo().realname
  3389. if (this.mediaId == '2') {
  3390. params.shieldBackwardSwitch = data.shieldBackwardSwitch?1:2
  3391. }
  3392. postAction('/ctop/materialUpload/uploadAccount', params).then((res) => {
  3393. if (res.code == 0) {
  3394. this.checkArr = []
  3395. this.checkAll = false
  3396. if(res.data){
  3397. this.showDataList = res.data
  3398. this.showDataListVisible = true
  3399. }else{
  3400. this.$message.success(res.message)
  3401. }
  3402. }
  3403. })
  3404. // /ctop/materialUpload/uploadAccount
  3405. },
  3406. downloadByBlobShowUrl() {
  3407. fetch(this.showUrl)
  3408. .then((res) => res.blob())
  3409. .then((blob) => {
  3410. const a = document.createElement('a')
  3411. document.body.appendChild(a)
  3412. a.style.display = 'none'
  3413. // 使用获取到的blob对象创建的url
  3414. const url = window.URL.createObjectURL(blob)
  3415. a.href = url
  3416. // 指定下载的文件名
  3417. a.download = this.materialName
  3418. a.click()
  3419. document.body.removeChild(a)
  3420. // 移除blob对象的url
  3421. window.URL.revokeObjectURL(url)
  3422. })
  3423. },
  3424. downloadByBlob() {
  3425. fetch(this.showUrlWater)
  3426. .then((res) => res.blob())
  3427. .then((blob) => {
  3428. const a = document.createElement('a')
  3429. document.body.appendChild(a)
  3430. a.style.display = 'none'
  3431. // 使用获取到的blob对象创建的url
  3432. const url = window.URL.createObjectURL(blob)
  3433. a.href = url
  3434. // 指定下载的文件名
  3435. a.download = this.name
  3436. a.click()
  3437. document.body.removeChild(a)
  3438. // 移除blob对象的url
  3439. window.URL.revokeObjectURL(url)
  3440. })
  3441. },
  3442. download(href, name) {
  3443. let eleLink = document.createElement('a')
  3444. eleLink.download = name
  3445. eleLink.href = href
  3446. eleLink.click()
  3447. eleLink.remove()
  3448. },
  3449. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  3450. onCheckAllChange() {
  3451. if (this.checkAll) {
  3452. this.checkArr = []
  3453. } else {
  3454. this.checkArr = this.dataSource.map((item) => {
  3455. return item.id
  3456. })
  3457. }
  3458. this.checkAll = !this.checkAll
  3459. },
  3460. onCheckAllImageChange() {
  3461. if (this.checkAllImage) {
  3462. this.checkArrImage = []
  3463. } else {
  3464. this.checkArrImage = this.model.map((item) => {
  3465. return item.id
  3466. })
  3467. }
  3468. this.checkAllImage = !this.checkAllImage
  3469. },
  3470. searchRe() {
  3471. this.queryParam = {
  3472. type: 'VIDEO',
  3473. userId: this.userInfo().id,
  3474. status: this.active,
  3475. productId: '',
  3476. }
  3477. this.$refs.selectTable.keyValue = ''
  3478. this.$refs.selectTable.getData()
  3479. this.$refs.selectTableProject.keyValue = ''
  3480. this.$refs.selectTableProject.getData()
  3481. this.labelValue = []
  3482. this.loadData(1)
  3483. },
  3484. getList(value) {
  3485. // if (value) {
  3486. // // this.mediaId = this.dataElse.filter(item => {
  3487. // // if (value == item.projectId) {
  3488. // // return item
  3489. // // }
  3490. // // })[0].mediaId
  3491. // getAction('/ctop/product/getUserProductList', {
  3492. // userId: this.userInfo().id,
  3493. // productId: value,
  3494. // }).then((res) => {
  3495. // if (res.code == 0) {
  3496. // this.mediaId = res.result.records[0].mediaId
  3497. // }
  3498. // })
  3499. // }
  3500. this.loadData()
  3501. },
  3502. onChangeCheckImage(checkedList) {
  3503. if (checkedList.length == 0) {
  3504. this.checkAllImage = false
  3505. }
  3506. },
  3507. onChangeCheck(checkedList) {
  3508. if (checkedList.length == 0) {
  3509. this.checkAll = false
  3510. }
  3511. },
  3512. handleClose(removedTag) {
  3513. const tags = this.tags.filter((tag) => tag !== removedTag)
  3514. this.tags = tags
  3515. },
  3516. showInput() {
  3517. this.inputVisible = true
  3518. this.$nextTick(function () {
  3519. this.$refs.input.focus()
  3520. })
  3521. },
  3522. handleInputChange(e) {
  3523. this.inputValue = e.target.value
  3524. },
  3525. handleInputConfirm() {
  3526. const inputValue = this.inputValue
  3527. let tags = this.tags
  3528. if (inputValue && tags.indexOf(inputValue) === -1) {
  3529. tags = [...tags, inputValue]
  3530. }
  3531. Object.assign(this, {
  3532. tags,
  3533. inputVisible: false,
  3534. inputValue: '',
  3535. })
  3536. },
  3537. getWater() {
  3538. this.waterLoading = true
  3539. var params = qs.stringify({
  3540. id: this.id,
  3541. watermarkTemplateId: this.size,
  3542. })
  3543. postAction('/ctop/materialInfo/watermark', params).then((res) => {
  3544. if (res.success) {
  3545. // getAction("/ctop/videoWatermarkTask/list").then(res=>{
  3546. // console.log(res)
  3547. // })
  3548. this.$message.success('水印素材生成中')
  3549. this.visibleDetail = false
  3550. this.refuseFile = []
  3551. this.refuseReason = ''
  3552. closeAllVideoFun()
  3553. this.loadData()
  3554. this.waterLoading = false
  3555. }
  3556. })
  3557. },
  3558. showDetail(item) {
  3559. this.visibleDetail = true
  3560. this.showUrl = item.url
  3561. this.id = item.id
  3562. this.code = item.code
  3563. this.excellent = item.excellent
  3564. this.allDetailData = item
  3565. if (this.active == '2') {
  3566. this.refuseReason = item.refuseReason
  3567. this.refuseFile = item.refuseFile ? JSON.parse(item.refuseFile) : null
  3568. } else if (this.active == '1') {
  3569. this.creativeCopywriter = item.creativeCopywriter
  3570. this.refuseReason = ''
  3571. this.refuseFile = []
  3572. } else {
  3573. this.refuseReason = ''
  3574. this.refuseFile = []
  3575. }
  3576. getAction('/ctop/materialInfo/getDetail', {
  3577. materialId: item.id,
  3578. }).then((res) => {
  3579. this.detail = res
  3580. this.size =
  3581. res.parameter.width == '1080' ? 3 : res.parameter.width == '1920' ? 1 : res.parameter.width == '1280' ? 2 : 4
  3582. })
  3583. getAction('/ctop/materialInfo/queryById', {
  3584. id: item.id,
  3585. }).then((res) => {
  3586. if (res.success) {
  3587. this.showUrlWater = res.result.watermarkUrl
  3588. this.name = res.result.watermarkCode
  3589. this.materialName = res.result.materialName
  3590. } else {
  3591. this.showUrlWater = null
  3592. this.name = null
  3593. }
  3594. })
  3595. getAction('/ctop/MaterialImageInfo/list', {
  3596. videoId: item.code,
  3597. }).then((res) => {
  3598. console.log(res)
  3599. if (res.success) {
  3600. this.model = res.result.map((item, index) => {
  3601. return {
  3602. ...item,
  3603. key: index,
  3604. }
  3605. })
  3606. }
  3607. })
  3608. this.getTagListInfo(item.code)
  3609. },
  3610. getTagListInfo(md5) {
  3611. this.departValueInfoModality = []
  3612. this.departValueInfoMod = []
  3613. this.departValueInfoContent = []
  3614. this.departValueInfoSence = []
  3615. getAction('/ctop/materialTagInfo/detail', {
  3616. code: md5,
  3617. }).then((res) => {
  3618. if (res.success) {
  3619. // ...res.contentTagList,
  3620. this.tagInfoList = [...res.modalityTagList, ...res.senceTagList, ...res.modTagList]
  3621. if (this.tagInfoListVisible) {
  3622. this.departValueInfoModality = res.modalityTagList.map((item) => {
  3623. return item.tagId
  3624. })
  3625. this.departValueInfoMod = res.modTagList.map((item) => {
  3626. return item.tagId
  3627. })
  3628. // this.departValueInfoContent = res.contentTagList.map((item) => {
  3629. // return item.tagId
  3630. // })
  3631. this.departValueInfoSence = res.senceTagList.map((item) => {
  3632. return item.tagId
  3633. })
  3634. }
  3635. }
  3636. })
  3637. },
  3638. coverPreviewShowModal(item, index) {
  3639. console.log(this.model)
  3640. this.modelNew = this.model.filter((items) => {
  3641. return items.status == 0
  3642. })
  3643. if (this.modelNew.length > 0) {
  3644. this.coverPreviewVisible = true
  3645. }
  3646. },
  3647. okEditShow(item, editStatus) {
  3648. if (editStatus == '2') {
  3649. var params = {}
  3650. params.id = item.id
  3651. params.auditorId = this.userInfo().id
  3652. params.refuseReason = this.refuseReason
  3653. var data = this.refuseFile.map((item) => {
  3654. return 'https:' + item
  3655. })
  3656. params.refuseFile = JSON.stringify(data)
  3657. params.status = editStatus
  3658. fileEdit(params).then((res) => {
  3659. this.refuseFile = []
  3660. this.refuseReason = ''
  3661. this.loadData()
  3662. })
  3663. } else if (editStatus == '1') {
  3664. var params = {}
  3665. params.id = item.id
  3666. params.auditorId = this.userInfo().id
  3667. params.creativeCopywriter = this.refuseReason
  3668. params.status = editStatus
  3669. fileEdit(params).then((res) => {
  3670. this.refuseReason = ''
  3671. this.loadData()
  3672. })
  3673. }
  3674. },
  3675. okEdit(e) {
  3676. this.edit(null, this.active, '2')
  3677. },
  3678. handleSearch(value) {},
  3679. personEdit(item, status) {
  3680. this.add = false
  3681. this.personVisible = true
  3682. this.getProjectId(item.projectId)
  3683. getAction('/ctop/materialInfo/getDetail', {
  3684. materialId: item.id,
  3685. }).then((res) => {
  3686. this.code = item.code
  3687. if (res.ascription) {
  3688. this.formPerson.setFieldsValue({
  3689. clipId: res.ascription.clipId,
  3690. planId: res.ascription.planId,
  3691. shotId: res.ascription.shotId,
  3692. })
  3693. }
  3694. })
  3695. },
  3696. edit(item, status, editStatus) {
  3697. if (status == '0' || status == '1') {
  3698. if (editStatus == '2') {
  3699. var params = {}
  3700. params.id = this.id
  3701. params.auditorId = this.userInfo().id
  3702. params.refuseReason = this.refuseReason
  3703. var data = this.refuseFile.map((item) => {
  3704. return 'https:' + item
  3705. })
  3706. params.refuseFile = JSON.stringify(data)
  3707. params.status = editStatus
  3708. fileEdit(params).then((res) => {
  3709. this.refuseFile = []
  3710. this.refuseReason = ''
  3711. this.loadData()
  3712. this.visibleDetail = false
  3713. closeAllVideoFun()
  3714. })
  3715. } else {
  3716. fileEdit({
  3717. id: this.id,
  3718. status: editStatus,
  3719. auditorId: this.userInfo().id,
  3720. creativeCopywriter: this.refuseReason,
  3721. }).then((res) => {
  3722. this.refuseFile = []
  3723. this.refuseReason = ''
  3724. this.loadData()
  3725. this.visibleDetail = false
  3726. closeAllVideoFun()
  3727. })
  3728. }
  3729. } else {
  3730. this.add = false
  3731. this.visible = true
  3732. this.getProjectId(item.projectId)
  3733. getAction('/ctop/materialInfo/getDetail', {
  3734. materialId: item.id,
  3735. }).then((res) => {
  3736. if (this.activeKey == 'image') {
  3737. this.form.setFieldsValue({
  3738. projectId: item.projectId,
  3739. clipId: res.ascription.clipId,
  3740. planeId: res.ascription.planeId,
  3741. materialDescribe: item.materialDescribe,
  3742. })
  3743. } else {
  3744. this.form.setFieldsValue({
  3745. projectId: item.projectId,
  3746. clipId: res.ascription.clipId,
  3747. planId: res.ascription.planId,
  3748. shotId: res.ascription.shotId,
  3749. materialDescribe: item.materialDescribe,
  3750. })
  3751. }
  3752. this.tags = res.tag
  3753. this.urlList.url = item.url
  3754. this.urlList.md5 = item.code
  3755. this.urlList.name = item.materialName
  3756. this.watermarkUrl.url = item.watermarkUrl
  3757. this.watermarkUrl.md5 = item.watermarkCode
  3758. this.watermarkUrl.name = item.watermarkMaterialName
  3759. this.id = item.id
  3760. })
  3761. }
  3762. },
  3763. closePerson() {
  3764. this.personVisible = false
  3765. },
  3766. handleOkPerson() {
  3767. this.loadingPerson = true
  3768. this.formPerson.validateFieldsAndScroll((err, values) => {
  3769. if (err) {
  3770. // 这里做逻辑处理
  3771. } else {
  3772. var params = {
  3773. planId: values.planId,
  3774. shotId: values.shotId,
  3775. clipId: values.clipId,
  3776. materialId: this.code,
  3777. }
  3778. fileEditAll(params).then((res) => {
  3779. console.log(res)
  3780. if (res.success) {
  3781. this.$message.success('修改成功')
  3782. this.loadingPerson = false
  3783. this.closePerson()
  3784. this.loadData()
  3785. } else {
  3786. this.$message.error(res.message)
  3787. }
  3788. })
  3789. }
  3790. })
  3791. },
  3792. handleOkImage() {
  3793. // if(this.urlListImage.url.length>0){
  3794. var params = {}
  3795. params.projectId = this.addImageData.projectId
  3796. params.videoId = this.addImageData.code
  3797. params.imageArr = this.imageArrList
  3798. this.loadingImage = true
  3799. postAction('/insertImage', params).then((res) => {
  3800. console.log(res)
  3801. if (res.code == 0) {
  3802. this.urlListImage = {
  3803. url: [],
  3804. md5: [],
  3805. name: [],
  3806. size: [],
  3807. }
  3808. this.imageArrList = []
  3809. this.addImageVisible = false
  3810. this.loadingImage = false
  3811. this.loadData()
  3812. } else {
  3813. this.loadingImage = false
  3814. }
  3815. })
  3816. // }
  3817. },
  3818. handleOk() {
  3819. this.form.validateFieldsAndScroll((err, values) => {
  3820. if (err) {
  3821. // 这里做逻辑处理
  3822. } else {
  3823. this.loadingElse = true
  3824. var params = {
  3825. ...values,
  3826. }
  3827. var roleCode = {}
  3828. for (const key in this.role) {
  3829. if (key == 'roleCode') {
  3830. this.role[key] = this.role[key] + 'Id'
  3831. roleCode[this.role[key]] = this.userInfo().id
  3832. }
  3833. }
  3834. params.id = this.add ? null : this.id
  3835. params.code = this.urlList.md5
  3836. params.url = this.urlList.url
  3837. params.materialName = this.urlList.name
  3838. params.watermarkCode = this.watermarkUrl.md5
  3839. params.watermarkUrl = this.watermarkUrl.url
  3840. params.watermarkMaterialName = this.watermarkUrl.name
  3841. params.userId = this.userInfo().id
  3842. params.projectId = values.projectId
  3843. params.materialDescribe = values.materialDescribe
  3844. params.type = 'VIDEO'
  3845. // params.tagList = values.tagList
  3846. params.ascription =
  3847. this.activeKey == 'image'
  3848. ? roleCode
  3849. : {
  3850. planId: values.planId,
  3851. shotId: values.shotId,
  3852. clipId: values.clipId,
  3853. }
  3854. params.tag = this.tags
  3855. params.imageArr = this.imageArrList
  3856. params.materialInnovate = values.materialInnovate?2:1
  3857. if (this.add) {
  3858. fileInsertV2(params).then((res) => {
  3859. if (res.success) {
  3860. this.form.resetFields()
  3861. this.urlList = {
  3862. url: '',
  3863. md5: '',
  3864. name: '',
  3865. }
  3866. this.watermarkUrl = {
  3867. url: '',
  3868. md5: '',
  3869. name: '',
  3870. }
  3871. this.urlListImage = {
  3872. url: [],
  3873. md5: [],
  3874. name: [],
  3875. size: [],
  3876. }
  3877. this.imageArrList = []
  3878. this.tags = []
  3879. this.loadData()
  3880. this.visible = false
  3881. this.add = true
  3882. for (const key in this.role) {
  3883. if (key == 'roleCode') {
  3884. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  3885. }
  3886. }
  3887. this.$message.success('素材上传成功')
  3888. this.loadingElse = false
  3889. // this.departValue = []
  3890. } else {
  3891. this.$message.error(res.message)
  3892. this.loadingElse = false
  3893. }
  3894. })
  3895. } else {
  3896. fileEdit({
  3897. ...params,
  3898. status: '0',
  3899. }).then((res) => {
  3900. if (res.success) {
  3901. this.form.resetFields()
  3902. this.urlList = {
  3903. url: '',
  3904. md5: '',
  3905. name: '',
  3906. }
  3907. this.watermarkUrl = {
  3908. url: '',
  3909. md5: '',
  3910. name: '',
  3911. }
  3912. this.tags = []
  3913. this.loadData()
  3914. this.visible = false
  3915. this.add = true
  3916. this.loading = false
  3917. this.loadingElse = false
  3918. for (const key in this.role) {
  3919. if (key == 'roleCode') {
  3920. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  3921. }
  3922. }
  3923. } else {
  3924. this.$message.error(res.message)
  3925. this.loading = false
  3926. this.loadingElse = false
  3927. }
  3928. })
  3929. }
  3930. }
  3931. })
  3932. },
  3933. close() {
  3934. this.visible = false
  3935. this.dataElse = []
  3936. this.form.resetFields()
  3937. this.urlList = {
  3938. url: '',
  3939. md5: '',
  3940. name: '',
  3941. }
  3942. this.tags = []
  3943. this.urlListImage = {
  3944. url: [],
  3945. md5: [],
  3946. name: [],
  3947. size: [],
  3948. }
  3949. this.imageArrList = []
  3950. },
  3951. addImage(item) {
  3952. this.addImageVisible = true
  3953. this.addImageData = item
  3954. },
  3955. showImage(item) {
  3956. this.chouzhen = true
  3957. this.chouzhenList = []
  3958. var params = {
  3959. videoSignature: item.code,
  3960. pageSize: 20,
  3961. pageNo: 1,
  3962. }
  3963. getAction('/cutFrame/material/list', params).then((res) => {
  3964. console.log(res)
  3965. if (res.success) {
  3966. this.chouzhenList.push(...res.result.records)
  3967. }
  3968. })
  3969. },
  3970. closeImage() {
  3971. this.addImageVisible = false
  3972. this.urlListImage = {
  3973. url: [],
  3974. md5: [],
  3975. name: [],
  3976. size: [],
  3977. }
  3978. this.imageArrList = []
  3979. },
  3980. onChange(date, dateString) {},
  3981. callbackTwo(key) {
  3982. this.checkAll = false
  3983. this.checkArr = []
  3984. if (key == '3') {
  3985. this.url.list = '/ctop/materialInfo/effiMaterialInfo'
  3986. this.queryParam = {}
  3987. } else {
  3988. this.url.list = '/ctop/materialInfo/listV2'
  3989. this.queryParam = {
  3990. ...this.queryParam,
  3991. status: key,
  3992. }
  3993. if (this.labelValue.length >= 1) {
  3994. this.queryParam.tagCode = this.labelValue[this.labelValue.length - 1]
  3995. } else {
  3996. this.queryParam.tagCode = ''
  3997. }
  3998. if (this.form.getFieldValue('projectId')) {
  3999. this.form.setFieldsValue({
  4000. projectId: '',
  4001. })
  4002. }
  4003. }
  4004. // if (this.form.getFieldValue('projectId')) {
  4005. // this.form.setFieldsValue({
  4006. // projectId: ''
  4007. // })
  4008. // }
  4009. // this.queryParam.status = key
  4010. this.loadData(1)
  4011. },
  4012. removeUpload() {
  4013. this.form.setFieldsValue({
  4014. // contentTagList: null,
  4015. modalityTagList: null,
  4016. modTagList: null,
  4017. senceTagList: null,
  4018. })
  4019. },
  4020. overUpload(urlAll) {
  4021. console.log(urlAll)
  4022. this.confirmLoading = true
  4023. this.repeat = false
  4024. this.urlList.url = urlAll[0].url
  4025. this.$message.success('上传成功')
  4026. getAction('/ctop/materialTagInfo/detail', {
  4027. code: this.urlList.md5,
  4028. }).then((res) => {
  4029. if (res.success) {
  4030. if (res.modalityTagList.length > 0) {
  4031. this.form.setFieldsValue({
  4032. // contentTagList: res.contentTagList.map((item) => {
  4033. // return item.tagId
  4034. // }),
  4035. modalityTagList: res.modalityTagList.map((item) => {
  4036. return item.tagId
  4037. }),
  4038. modTagList: res.modTagList.map((item) => {
  4039. return item.tagId
  4040. }),
  4041. senceTagList: res.senceTagList.map((item) => {
  4042. return item.tagId
  4043. }),
  4044. })
  4045. }
  4046. // this.tagInfoList = [...res.modalityTagList, ...res.contentTagList, ...res.senceTagList, ...res.modTagList]
  4047. // if (this.tagInfoListVisible) {
  4048. // this.departValueInfoModality = res.modalityTagList.map((item) => {
  4049. // return item.tagId
  4050. // })
  4051. // this.departValueInfoMod = res.modTagList.map((item) => {
  4052. // return item.tagId
  4053. // })
  4054. // this.departValueInfoContent = res.contentTagList.map((item) => {
  4055. // return item.tagId
  4056. // })
  4057. // this.departValueInfoSence = res.senceTagList.map((item) => {
  4058. // return item.tagId
  4059. // })
  4060. // }
  4061. }
  4062. })
  4063. },
  4064. deleteImage(url) {
  4065. console.log(url, this.urlListImage.url)
  4066. var index = this.imageArrList.findIndex((v) => v.url === url)
  4067. this.imageArrList.splice(index, 1)
  4068. console.log(index)
  4069. },
  4070. overUploadImage(urlAll) {
  4071. // var index = this.urlList.url.findIndex(item => item === urlAll[0])
  4072. // var data = { url: urlAll[0], code: this.urlList.md5[index], name: this.urlList.name[index] }
  4073. // this.imageArr.push(data)
  4074. var that = this
  4075. that.material = []
  4076. that.imageArrList = []
  4077. var img
  4078. if (urlAll.length > 0) {
  4079. for (var i = 0; i < urlAll.length; i++) {
  4080. that.imageArrList.push({
  4081. // width: img.width,
  4082. // height: img.height,
  4083. // size: this.urlListImage.size[i],
  4084. code: this.urlListImage.md5[i],
  4085. url: urlAll[i].url,
  4086. materialName: this.urlListImage.name[i],
  4087. })
  4088. img = new Image()
  4089. img.src = urlAll[i].url
  4090. // if (img.complete) {
  4091. // // 打印
  4092. // if (img.width == 720) {
  4093. // if (img.height == 1280) {
  4094. // that.material.push(true)
  4095. // } else {
  4096. // that.material.push(false)
  4097. // }
  4098. // } else if (img.width == 1080) {
  4099. // if (img.height == 1920) {
  4100. // that.material.push(true)
  4101. // } else {
  4102. // that.material.push(false)
  4103. // }
  4104. // } else if (img.width == 1280) {
  4105. // if (img.height == 720) {
  4106. // that.material.push(true)
  4107. // } else {
  4108. // that.material.push(false)
  4109. // }
  4110. // } else if (img.width == 1920) {
  4111. // if (img.height == 1080) {
  4112. // that.material.push(true)
  4113. // } else {
  4114. // that.material.push(false)
  4115. // }
  4116. // } else {
  4117. // that.material.push(false)
  4118. // }
  4119. // } else {
  4120. // img.onload = () => {
  4121. // if (img.width == 720) {
  4122. // if (img.height == 1280) {
  4123. // that.material.push(true)
  4124. // } else {
  4125. // that.material.push(false)
  4126. // }
  4127. // } else if (img.width == 1080) {
  4128. // if (img.height == 1920) {
  4129. // that.material.push(true)
  4130. // } else {
  4131. // that.material.push(false)
  4132. // }
  4133. // } else if (img.width == 1280) {
  4134. // if (img.height == 720) {
  4135. // that.material.push(true)
  4136. // } else {
  4137. // that.material.push(false)
  4138. // }
  4139. // } else if (img.width == 1920) {
  4140. // if (img.height == 1080) {
  4141. // that.material.push(true)
  4142. // } else {
  4143. // that.material.push(false)
  4144. // }
  4145. // } else {
  4146. // that.material.push(false)
  4147. // }
  4148. // }
  4149. // }
  4150. }
  4151. } else {
  4152. }
  4153. },
  4154. file(file) {
  4155. var bmf = new BMF()
  4156. var that = this
  4157. return new Promise(function (resolve, reject) {
  4158. bmf.md5(file, (err, md5) => {
  4159. that.urlList.name = file.name
  4160. that.urlList.md5 = md5
  4161. fileCheck({
  4162. code: md5,
  4163. projectId: that.getData('projectId'),
  4164. }).then((res) => {
  4165. if (res.code == 0) {
  4166. that.$message.error('此素材已经上传')
  4167. that.repeat = true
  4168. reject()
  4169. } else {
  4170. that.repeat = false
  4171. resolve()
  4172. // reject()
  4173. }
  4174. })
  4175. })
  4176. })
  4177. },
  4178. fileWater(file) {
  4179. var bmf = new BMF()
  4180. var that = this
  4181. var codeData = that.urlList.md5 != '' ? that.urlList.md5 : that.addImageData.code
  4182. console.log(codeData)
  4183. this.urlListImage = {
  4184. url: [],
  4185. md5: [],
  4186. name: [],
  4187. size: [],
  4188. }
  4189. return new Promise(function (resolve, reject) {
  4190. bmf.md5(file, (err, md5) => {
  4191. that.urlListImage.name.push(file.name)
  4192. that.urlListImage.md5.push(md5)
  4193. that.urlListImage.size.push(file.size)
  4194. resolve()
  4195. // fileCheckImage({
  4196. // code: md5,
  4197. // projectId: that.getData('projectId'),
  4198. // videoId: codeData,
  4199. // }).then((res) => {
  4200. // if (res.code == 0) {
  4201. // that.$message.error('此素材已经上传')
  4202. // reject()
  4203. // } else {
  4204. // // reject()
  4205. // }
  4206. // })
  4207. })
  4208. })
  4209. },
  4210. getParticipateList(value) {
  4211. getAction('/ctop/projectMember/participateListV2', {
  4212. userId: this.userInfo().id,
  4213. pageSize: 50,
  4214. pageNo: 1,
  4215. projectName: value,
  4216. }).then((res) => {
  4217. if (res.code == 0) {
  4218. this.dataElse = res.result.records
  4219. }
  4220. })
  4221. },
  4222. getProjectId(items) {
  4223. this.form.resetFields(['clipId', 'planId', 'shotId'])
  4224. getAction('/ctop/projectMember/getMemberList', {
  4225. projectId: items,
  4226. }).then((res) => {
  4227. if (res.code == 0) {
  4228. this.ascription.clipId = res.result.filter((item) => {
  4229. if (
  4230. item.roleCode == 'clip' ||
  4231. item.roleCode == 'plan' ||
  4232. item.roleCode == 'designTeamLeader' ||
  4233. item.roleCode == 'shot' ||
  4234. item.roleCode == 'plane' ||
  4235. item.roleCode == 'planeLeader'
  4236. ) {
  4237. return {
  4238. userId: item.userId,
  4239. userName: item.userName,
  4240. }
  4241. }
  4242. })
  4243. this.ascription.shotId = res.result.filter((item) => {
  4244. if (
  4245. item.roleCode == 'clip' ||
  4246. item.roleCode == 'shot' ||
  4247. item.roleCode == 'plan' ||
  4248. item.roleCode == 'designTeamLeader' ||
  4249. item.roleCode == 'plane' ||
  4250. item.roleCode == 'planeLeader'
  4251. ) {
  4252. return {
  4253. userId: item.userId,
  4254. userName: item.userName,
  4255. }
  4256. }
  4257. })
  4258. this.ascription.planId = res.result.filter((item) => {
  4259. if (
  4260. item.roleCode == 'shot' ||
  4261. item.roleCode == 'plan' ||
  4262. item.roleCode == 'designTeamLeader' ||
  4263. item.roleCode == 'clip' ||
  4264. item.roleCode == 'plane' ||
  4265. item.roleCode == 'planeLeader'
  4266. ) {
  4267. return {
  4268. userId: item.userId,
  4269. userName: item.userName,
  4270. }
  4271. }
  4272. })
  4273. this.ascription.planeId = res.result.filter((item) => {
  4274. if (item.roleCode == 'plane') {
  4275. return {
  4276. userId: item.userId,
  4277. userName: item.userName,
  4278. }
  4279. }
  4280. })
  4281. }
  4282. })
  4283. },
  4284. getDataSource(page, pageSize) {
  4285. this.ipagination.current = page
  4286. this.ipagination.pageSize = pageSize
  4287. this.checkArr = []
  4288. this.checkAll = false
  4289. this.loadData()
  4290. },
  4291. getDataSourceSize(page, pageSize) {
  4292. this.ipagination.current = 1
  4293. this.ipagination.pageSize = pageSize
  4294. this.checkArr = []
  4295. this.checkAll = false
  4296. this.loadData()
  4297. },
  4298. },
  4299. }
  4300. </script>
  4301. <style scoped>
  4302. @import '~@assets/less/common.less';
  4303. </style>