fragmentMatemal.vue 45 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348
  1. <style>
  2. #material-card .ant-tabs-tab {
  3. border: 1px solid gainsboro !important;
  4. }
  5. #material-card .ant-tabs-top-bar {
  6. position: relative;
  7. z-index: 100;
  8. }
  9. #material-card .ant-badge-count {
  10. top: -10px;
  11. }
  12. .detail .ant-form-item {
  13. margin-bottom: 10px !important;
  14. }
  15. </style>
  16. <style lang="scss" scoped>
  17. @media (min-width: 1024px) {
  18. .home-item {
  19. border-style: solid;
  20. border-width: 1px;
  21. border-color: #e4e4e4;
  22. width: calc(50% - 10px);
  23. padding: 10px;
  24. margin-right: 10px;
  25. margin-bottom: 10px;
  26. display: flex;
  27. align-items: center;
  28. background: #fff;
  29. position: relative;
  30. z-index: 99;
  31. }
  32. } /*>=1024的设备*/
  33. // @media (min-width: 1100px) {
  34. // .checkbox_item_container {
  35. // width:70%
  36. // }
  37. // } /*>=1100的设备*/
  38. @media (min-width: 1280px) {
  39. .home-item {
  40. border-style: solid;
  41. border-width: 1px;
  42. border-color: #e4e4e4;
  43. width: calc(25% - 10px);
  44. padding: 10px;
  45. margin-right: 10px;
  46. margin-bottom: 10px;
  47. display: flex;
  48. align-items: center;
  49. background: #fff;
  50. position: relative;
  51. z-index: 99;
  52. }
  53. }
  54. /*>=1280的设备*/
  55. // @media (min-width: 1366px) {
  56. // }
  57. // @media (min-width: 1440px) {
  58. // }
  59. // @media (min-width: 1680px) {
  60. // }
  61. @media (min-width: 1920px) {
  62. .home-item {
  63. border-style: solid;
  64. border-width: 1px;
  65. border-color: #e4e4e4;
  66. width: calc(25% - 10px);
  67. padding: 10px;
  68. margin-right: 10px;
  69. margin-bottom: 10px;
  70. display: flex;
  71. align-items: center;
  72. background: #fff;
  73. position: relative;
  74. z-index: 99;
  75. cursor: pointer;
  76. }
  77. }
  78. .actor-photo-list {
  79. display: flex;
  80. padding-left: 0;
  81. li {
  82. width: 25%;
  83. margin: 10px;
  84. position: relative;
  85. height: 250px;
  86. border: 1px solid #f2f2f2;
  87. img,
  88. video {
  89. width: 100%;
  90. margin-top: auto;
  91. margin-bottom: auto;
  92. top: 0;
  93. bottom: 0;
  94. position: absolute;
  95. max-height: 250px;
  96. }
  97. }
  98. }
  99. .home-card {
  100. width: 100%;
  101. overflow: hidden;
  102. padding: 10px 0px;
  103. display: flex;
  104. flex-wrap: wrap;
  105. margin-right: -10px;
  106. .home-right {
  107. width: 100%;
  108. }
  109. .bg:after {
  110. content: '';
  111. width: 110%;
  112. height: 110%;
  113. position: absolute;
  114. left: -5%;
  115. top: -5%;
  116. background: inherit;
  117. filter: blur(10px);
  118. z-index: 2;
  119. }
  120. }
  121. .bh {
  122. height: 60px;
  123. line-height: 30px;
  124. overflow: hidden;
  125. text-overflow: ellipsis;
  126. -webkit-line-clamp: 2;
  127. display: -webkit-box;
  128. -webkit-box-orient: vertical;
  129. }
  130. a {
  131. font-size: 14px;
  132. }
  133. .actor-photo-list {
  134. display: flex;
  135. padding-left: 0;
  136. li {
  137. width: 25%;
  138. margin: 10px;
  139. position: relative;
  140. height: 250px;
  141. border: 1px solid #f2f2f2;
  142. img,
  143. video {
  144. width: 100%;
  145. margin-top: auto;
  146. margin-bottom: auto;
  147. top: 0;
  148. bottom: 0;
  149. position: absolute;
  150. max-height: 250px;
  151. }
  152. }
  153. }
  154. </style>
  155. <template>
  156. <a-card :bordered="false">
  157. <!-- 查询区域 -->
  158. <div class="table-page-search-wrapper">
  159. <a-form layout="inline">
  160. <a-row :gutter="24">
  161. <a-col :md="6" :sm="8">
  162. <a-form-item label="选择项目">
  163. <a-select placeholder="请输入项目名称" v-model="queryParam.projectId" @change="getList">
  164. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  165. {{ item.projectName }}
  166. </a-select-option>
  167. </a-select>
  168. </a-form-item>
  169. </a-col>
  170. <!-- <a-col :md="6" :sm="8">
  171. <a-form-item label="创建者">
  172. <a-input placeholder="请输入创建者名称" v-model="queryParam.advertiserId"></a-input>
  173. </a-form-item>
  174. </a-col> -->
  175. <!-- <a-col :md="6" :sm="8">
  176. <a-form-item label="剪辑">
  177. <a-input placeholder="请输入剪辑者名称" v-model="queryParam.advertiserId"></a-input>
  178. </a-form-item>
  179. </a-col>
  180. <a-col :md="6" :sm="8">
  181. <a-form-item label="编导">
  182. <a-input placeholder="请输入编导" v-model="queryParam.responsible"></a-input>
  183. </a-form-item>
  184. </a-col>
  185. <a-col :md="6" :sm="8">
  186. <a-form-item label="拍摄">
  187. <a-input placeholder="请输入拍摄" v-model="queryParam.responsible"></a-input>
  188. </a-form-item>
  189. </a-col> -->
  190. <a-col :md="6" :sm="8">
  191. <a-form-item label="时间选择">
  192. <a-date-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width:100%" />
  193. </a-form-item>
  194. </a-col>
  195. <a-col :md="6" :sm="8">
  196. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  197. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  198. <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
  199. </span>
  200. </a-col>
  201. </a-row>
  202. </a-form>
  203. </div>
  204. <!-- table区域-begin -->
  205. <!-- <div> -->
  206. <!-- 操作按钮区域 -->
  207. <div class="table-operator" style="position:relative;z-index:100">
  208. <a-button @click="dirVideoGet" type="primary" icon="plus">新增</a-button>
  209. <a-button @click="onCheckAllChange" v-if="active == 'VIDEO_PART'">{{
  210. checkAll ? '取消 ( ' + checkArr.length + ' )' : '全选'
  211. }}</a-button>
  212. </div>
  213. <a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
  214. <a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
  215. <div v-if="item.value != 'join' && item.value != 'job' && item.value != 'success'">
  216. <div v-if="dataSource.length > 0">
  217. <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
  218. <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
  219. <div class="home-right">
  220. <a-badge
  221. v-if="active == 'VIDEO_PART'"
  222. :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
  223. :numberStyle="{ backgroundColor: '#52c41a' }"
  224. style="width:100%"
  225. >
  226. <span
  227. style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
  228. >
  229. {{ items.materialName }}
  230. </span>
  231. </a-badge>
  232. <span
  233. v-else
  234. style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
  235. >
  236. {{ items.materialName }}
  237. </span>
  238. <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
  239. <video
  240. :src="items.url"
  241. @canplay="a(items)"
  242. style="height:200px;max-width:100%;position:absolute;z-index:10;"
  243. />
  244. <img
  245. src="./timg.gif"
  246. v-if="!items.showVideo"
  247. alt=""
  248. style="height:200px;max-width:100%;position:absolute;z-index:11;"
  249. @click.stop
  250. />
  251. </div>
  252. <!-- <div v-if="active == '2'" class="bh">驳回原因:{{ items.refuseReason }}</div> -->
  253. <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
  254. {{ items.createTime | getDate }}
  255. <a-checkbox :value="items.id" style="float:right"></a-checkbox
  256. ></span>
  257. </div>
  258. </div>
  259. </a-checkbox-group>
  260. <a-pagination
  261. size="small"
  262. :showTotal="ipagination.showTotal"
  263. style="float:right"
  264. v-if="dataSource.length > 0"
  265. showQuickJumper
  266. :pageSize.sync="ipagination.pageSize"
  267. :total="ipagination.total"
  268. v-model="ipagination.current"
  269. @change="getDataSource"
  270. />
  271. </div>
  272. <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
  273. <img
  274. 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"
  275. alt=""
  276. />
  277. </div>
  278. </div>
  279. <div v-else-if="item.value == 'join'">
  280. <div style="margin-bottom:20px">
  281. <a-button @click="addMatemal" type="primary" icon="plus" style="margin-right:15px">新增一行</a-button>
  282. <a-button type="primary" @click="joinMatemal">开始拼接</a-button>
  283. </div>
  284. <a-table :columns="columns" :dataSource="dataList" :pagination="false">
  285. <span slot="action" slot-scope="text, record, index">
  286. <a @click="removeMatemal(index)">删除</a>
  287. </span>
  288. <span slot="VIDEO_HEAD" slot-scope="text, record, index">
  289. <div v-if="text != ''" style="position:relative">
  290. <video class="video" :src="text.url" controls="controls" style="height:160px">
  291. 您的浏览器不支持 video 标签。
  292. </video>
  293. <a-icon
  294. type="close-circle"
  295. style="position:absolute;top:-5px;right:30%;color:red;z-index:10;cursor: pointer;"
  296. @click="deteleVideo('VIDEO_HEAD', record)"
  297. />
  298. </div>
  299. <a-button @click="checkMatemal('VIDEO_HEAD', index, record)" type="primary" icon="plus" v-else
  300. >选择素材</a-button
  301. >
  302. </span>
  303. <span slot="VIDEO_PART" slot-scope="text, record, index">
  304. <div>
  305. <video
  306. class="video"
  307. :src="item.url"
  308. controls="controls"
  309. style="height:160px"
  310. v-for="item of text"
  311. :key="item.id"
  312. draggable="true"
  313. @dragstart="handleDragStart($event, item.code)"
  314. @dragover.prevent="handleDragOver($event, item.code)"
  315. @dragenter="handleDragEnter($event, item.code)"
  316. @dragend="handleDragEnd($event, item.code)"
  317. >
  318. > 您的浏览器不支持 video 标签。
  319. </video>
  320. </div>
  321. <a-button @click="checkMatemal('VIDEO_PART', index, record)" type="primary" icon="plus"
  322. >选择素材</a-button
  323. >
  324. </span>
  325. <span slot="VIDEO_TAIL" slot-scope="text, record, index">
  326. <div v-if="text != ''" style="position:relative">
  327. <video class="video" :src="text.url" controls="controls" style="height:160px">
  328. 您的浏览器不支持 video 标签。
  329. </video>
  330. <a-icon
  331. type="close-circle"
  332. style="position:absolute;top:-5px;right:30%;color:red;z-index:10;cursor: pointer;"
  333. @click="deteleVideo('VIDEO_TAIL', record)"
  334. />
  335. </div>
  336. <a-button @click="checkMatemal('VIDEO_TAIL', index, record)" type="primary" icon="plus" v-else
  337. >选择素材</a-button
  338. >
  339. </span>
  340. </a-table>
  341. </div>
  342. <div v-else-if="item.value == 'job'">
  343. <a-table :columns="columnsJob" :dataSource="dataSource" :pagination="false" :loading="loading" bordered>
  344. <span slot="status" slot-scope="text">
  345. {{ text == 'TranscodeSuccess' ? '已完成' : '提交中' }}
  346. </span>
  347. </a-table>
  348. </div>
  349. <div v-else-if="item.value == 'success'">
  350. <a-button @click="dirVideoGetPublish" type="primary">发布到项目</a-button>
  351. <div v-if="dataSource.length > 0">
  352. <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
  353. <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetailElse(items)">
  354. <div class="home-right">
  355. <span
  356. style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
  357. >
  358. {{ items.jobId }}
  359. </span>
  360. <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
  361. <video
  362. :src="items.videoUrl"
  363. @canplay="a(items)"
  364. style="height:200px;max-width:100%;position:absolute;z-index:10;"
  365. />
  366. <img
  367. src="./timg.gif"
  368. v-if="!items.showVideo"
  369. alt=""
  370. style="height:200px;max-width:100%;position:absolute;z-index:11;"
  371. @click.stop
  372. />
  373. </div>
  374. <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
  375. {{ items.createTime | getDate }}
  376. <a-checkbox :value="items.videoId" style="float:right"></a-checkbox
  377. ></span>
  378. </div>
  379. </div>
  380. </a-checkbox-group>
  381. <a-pagination
  382. size="small"
  383. :showTotal="ipagination.showTotal"
  384. style="float:right"
  385. v-if="dataSource.length > 0"
  386. showQuickJumper
  387. :pageSize.sync="ipagination.pageSize"
  388. :total="ipagination.total"
  389. v-model="ipagination.current"
  390. @change="getDataSource"
  391. />
  392. </div>
  393. <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
  394. <img
  395. 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"
  396. alt=""
  397. />
  398. </div>
  399. </div>
  400. </a-tab-pane>
  401. </a-tabs>
  402. <a-modal title="添加素材" v-model="visible" @ok="handleOk" @cancel="close" :maskClosable="false">
  403. <a-form :form="form">
  404. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="选择项目">
  405. <a-select
  406. v-decorator="[
  407. 'projectId', // 给表单赋值或拉取表单时,该input对应的key
  408. { rules: [{ required: true, message: '请选择项目!' }] }
  409. ]"
  410. @change="getProjectId"
  411. >
  412. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  413. {{ item.projectName }}
  414. </a-select-option>
  415. </a-select>
  416. </a-form-item>
  417. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="片段种类">
  418. <a-select
  419. v-decorator="[
  420. 'type', // 给表单赋值或拉取表单时,该input对应的key
  421. { rules: [{ required: true, message: '请选择片段种类!' }], initialValue: 'VIDEO_HEAD' }
  422. ]"
  423. @change="getDir"
  424. >
  425. <a-select-option value="VIDEO_HEAD">片头</a-select-option>
  426. <a-select-option value="VIDEO_PART">片段</a-select-option>
  427. <a-select-option value="VIDEO_TAIL">片尾</a-select-option>
  428. </a-select>
  429. </a-form-item>
  430. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传">
  431. <upload-to-ali
  432. :customDomain="customDomain"
  433. preview
  434. :region="region"
  435. :bucket="bucket"
  436. :accept="acceptVideo"
  437. :max="10"
  438. :size="1024000"
  439. :accessKeyId="accessKeyId"
  440. :accessKeySecret="accessKeySecret"
  441. :before-upload="file"
  442. :dir="dirVideo"
  443. @loaded="overUpload"
  444. v-decorator="[
  445. 'url', // 给表单赋值或拉取表单时,该input对应的key
  446. { rules: [{ required: true, message: '请上传图片!' }] }
  447. ]"
  448. ></upload-to-ali>
  449. </a-form-item>
  450. <a-form-item
  451. :label-col="labelCol"
  452. :wrapper-col="{
  453. xs: { span: 24 },
  454. sm: { span: 18 }
  455. }"
  456. label="标签"
  457. >
  458. <template v-for="(tag, index) in tags">
  459. <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
  460. <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
  461. {{ `${tag.slice(0, 20)}...` }}
  462. </a-tag>
  463. </a-tooltip>
  464. <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
  465. {{ tag }}
  466. </a-tag>
  467. </template>
  468. <a-input
  469. v-if="inputVisible"
  470. ref="input"
  471. type="text"
  472. size="small"
  473. :style="{ width: '78px' }"
  474. :value="inputValue"
  475. @change="handleInputChange"
  476. @blur="handleInputConfirm"
  477. @keyup.enter="$event.target.blur"
  478. />
  479. <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
  480. <a-icon type="plus" /> New Tag
  481. </a-tag>
  482. </a-form-item>
  483. <a-form-item
  484. :label-col="labelCol"
  485. :wrapper-col="{
  486. xs: { span: 24 },
  487. sm: { span: 18 }
  488. }"
  489. label="描述"
  490. >
  491. <a-textarea
  492. placeholder="请输入描述"
  493. v-decorator="[
  494. 'materialDescribe' // 给表单赋值或拉取表单时,该input对应的key
  495. ]"
  496. :autosize="{ minRows: 3, maxRows: 10 }"
  497. />
  498. </a-form-item>
  499. </a-form>
  500. </a-modal>
  501. <a-modal
  502. title="发布到项目"
  503. v-model="visiblePublish"
  504. @ok="handleOkPublich"
  505. @cancel="closePublish"
  506. :maskClosable="false"
  507. >
  508. <a-form :form="form">
  509. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="选择项目">
  510. <a-select
  511. v-decorator="[
  512. 'projectId', // 给表单赋值或拉取表单时,该input对应的key
  513. { rules: [{ required: true, message: '请选择项目!' }] }
  514. ]"
  515. @change="getProjectId"
  516. >
  517. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  518. {{ item.projectName }}
  519. </a-select-option>
  520. </a-select>
  521. </a-form-item>
  522. </a-form>
  523. </a-modal>
  524. <a-modal title="素材详情" v-model="visibleDetail" width="70%">
  525. <div style="display:flex;height:700px">
  526. <div
  527. style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2"
  528. >
  529. <video class="video" :src="showUrl" controls="controls" style="width:100%">
  530. 您的浏览器不支持 video 标签。
  531. </video>
  532. </div>
  533. <div style="flex:3;padding:10px;box-sizing:border-box;">
  534. <a-form v-if="detail" class="detail">
  535. <div v-if="detail.parameter">
  536. <a-form-item
  537. label="视频时长"
  538. :label-col="{ span: 6 }"
  539. :wrapper-col="{ span: 18 }"
  540. v-if="detail.parameter.second"
  541. >
  542. {{ detail.parameter.second }}秒
  543. </a-form-item>
  544. <a-form-item
  545. label="尺寸"
  546. :label-col="{ span: 6 }"
  547. :wrapper-col="{ span: 18 }"
  548. v-if="detail.parameter.width"
  549. >
  550. {{ detail.parameter.width }}*{{ detail.parameter.height }}
  551. </a-form-item>
  552. <a-form-item
  553. label="大小"
  554. :label-col="{ span: 6 }"
  555. :wrapper-col="{ span: 18 }"
  556. v-if="detail.parameter.size"
  557. >
  558. {{ detail.parameter.size }}
  559. </a-form-item>
  560. </div>
  561. <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.tag">
  562. <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
  563. </a-form-item>
  564. </a-form>
  565. </div>
  566. </div>
  567. </a-modal>
  568. <account-check ref="check" @synchro="implement"></account-check>
  569. <check-matemal ref="matemal" @showVideo="showVideoFun" />
  570. </a-card>
  571. </template>
  572. <script>
  573. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  574. import JEllipsis from '@/components/jeecg/JEllipsis'
  575. import UploadToAli from '@femessage/upload-to-ali'
  576. import { fileCheck, fileInsert, fileEdit } from '@/api/actor'
  577. import { getAction, postAction, postFile } from '@/api/manage'
  578. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  579. import { mapGetters } from 'vuex'
  580. import moment from 'moment'
  581. import BMF from 'browser-md5-file'
  582. import qs from 'qs'
  583. import accountCheck from './accountCheck'
  584. import checkMatemal from './checkMatemal'
  585. export default {
  586. name: 'YardList',
  587. mixins: [JeecgListMixin],
  588. components: {
  589. JEllipsis,
  590. UploadToAli,
  591. accountCheck,
  592. checkMatemal
  593. },
  594. data() {
  595. return {
  596. dragging: null,
  597. dataKey: 0,
  598. columns: [
  599. {
  600. title: '片头',
  601. dataIndex: 'VIDEO_HEAD',
  602. scopedSlots: { customRender: 'VIDEO_HEAD' },
  603. align: 'center'
  604. },
  605. {
  606. title: '内容',
  607. dataIndex: 'VIDEO_PART',
  608. scopedSlots: { customRender: 'VIDEO_PART' },
  609. align: 'center'
  610. },
  611. {
  612. title: '片尾',
  613. dataIndex: 'VIDEO_TAIL',
  614. scopedSlots: { customRender: 'VIDEO_TAIL' },
  615. align: 'center'
  616. },
  617. {
  618. title: '操作',
  619. dataIndex: 'action',
  620. scopedSlots: { customRender: 'action' },
  621. align: 'center'
  622. }
  623. ],
  624. columnsJob: [
  625. {
  626. title: '',
  627. dataIndex: '',
  628. key: 'rowIndex',
  629. width: 50,
  630. align: 'center',
  631. customRender: function(t, r, index) {
  632. return parseInt(index) + 1
  633. }
  634. },
  635. {
  636. title: '任务Id',
  637. dataIndex: 'jobId',
  638. scopedSlots: { customRender: 'jobId' },
  639. align: 'center'
  640. },
  641. {
  642. title: '状态',
  643. dataIndex: 'status',
  644. scopedSlots: { customRender: 'status' },
  645. align: 'center'
  646. }
  647. ],
  648. dataJob: [],
  649. dataList: [{ key: 1, VIDEO_HEAD: '', VIDEO_PART: [], VIDEO_TAIL: '' }],
  650. inputVisible: false,
  651. inputValue: '',
  652. labelCol: {
  653. xs: { span: 24 },
  654. sm: { span: 6 }
  655. },
  656. wrapperCol: {
  657. xs: { span: 24 },
  658. sm: { span: 12 }
  659. },
  660. noImgUrl: require('@/assets/img/noImg.png'),
  661. queryParam: {},
  662. dataElse: [],
  663. ascription: {
  664. clipId: [], //剪辑人id
  665. shotId: [], //拍摄人id
  666. planId: [], //策划id
  667. planeId: [] //平面id
  668. },
  669. show: true,
  670. visible: false,
  671. visibleDetail: false,
  672. visiblePublish: false,
  673. activeKey: 'video',
  674. active: 'VIDEO_HEAD',
  675. examinelList: [
  676. { value: 'VIDEO_HEAD', tab: '片头' },
  677. { value: 'VIDEO_PART', tab: '片段' },
  678. { value: 'VIDEO_TAIL', tab: '片尾' },
  679. { value: 'join', tab: '视频拼接' },
  680. { value: 'job', tab: '任务列表' },
  681. { value: 'success', tab: '成品' }
  682. ],
  683. // 表头
  684. urlList: { url: '', md5: '', name: '' },
  685. url: {
  686. list: '/ctop/materialInfo/list'
  687. },
  688. detail: false,
  689. form: this.$form.createForm(this),
  690. tags: [],
  691. refuseFile: [],
  692. refuseReason: '',
  693. creativeCopywriter: '',
  694. customDomain: '',
  695. region: 'oss-cn-beijing',
  696. bucket: 'ctop-part',
  697. acceptVideo: 'video/mpeg,video/mp4',
  698. acceptImage: 'image/jpeg,image/jpg,image/png',
  699. accessKeyId: 'LTAIbNbqWzSOklQV',
  700. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  701. checkArr: [],
  702. checkAll: false,
  703. showUrl: '',
  704. showUrlWater: '',
  705. materialDescribe: '',
  706. name: '',
  707. detail: null,
  708. add: true,
  709. id: '',
  710. role: { roleCode: '', roleName: '' },
  711. key: '0',
  712. mediaId: null,
  713. dirVideo: '',
  714. defaultDir: 'VIDEO_HEAD',
  715. joinVideo: {
  716. head: '',
  717. content: [],
  718. foot: ''
  719. }
  720. }
  721. },
  722. filters: {
  723. getDate(value) {
  724. let date = new Date(value)
  725. let y = date.getFullYear()
  726. let MM = date.getMonth() + 1
  727. MM = MM < 10 ? '0' + MM : MM
  728. let d = date.getDate()
  729. d = d < 10 ? '0' + d : d
  730. return y + '-' + MM + '-' + d
  731. }
  732. },
  733. updated() {
  734. stopOtherVideo()
  735. },
  736. computed: {
  737. dirImg() {
  738. let date = new Date()
  739. let y = date.getFullYear()
  740. let MM = date.getMonth() + 1
  741. MM = MM < 10 ? '0' + MM : MM
  742. let d = date.getDate()
  743. d = d < 10 ? '0' + d : d
  744. return 'image/' + y + '-' + MM + '-' + d + '/'
  745. }
  746. },
  747. created() {
  748. this.queryParam.type = this.active
  749. this.queryParam.userId = this.userInfo().id
  750. this.ipagination.pageSize = 8
  751. this.getParticipateList()
  752. // /sys/user/getRoleInfo
  753. getAction('/sys/user/getRoleInfo', { userId: this.userInfo().id }).then(res => {
  754. this.role = res
  755. })
  756. },
  757. watch: {
  758. $route: function(n, o) {
  759. if (n.path == '/modules/material/materialList') {
  760. this.queryParam.userId = this.userInfo().id
  761. this.queryParam.type = this.active
  762. this.loadData()
  763. }
  764. }
  765. },
  766. methods: {
  767. startConcat() {
  768. console.log(this.dataList)
  769. },
  770. handleDragStart(e, item) {
  771. this.dragging = item
  772. },
  773. handleDragEnd(e, item) {
  774. this.dragging = null
  775. },
  776. //首先把div变成可以放置的元素,即重写dragenter/dragover
  777. handleDragOver(e) {
  778. e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
  779. },
  780. handleDragEnter(e, item) {
  781. e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
  782. if (item === this.dragging) {
  783. return
  784. }
  785. console.log(this.dataKey)
  786. const newItems = [...this.dataList[this.dataKey].VIDEO_PART]
  787. console.log(newItems)
  788. const src = newItems.indexOf(this.dragging)
  789. const dst = newItems.indexOf(item)
  790. newItems.splice(dst, 0, ...newItems.splice(src, 1))
  791. this.dataList[this.dataKey].VIDEO_PART = newItems
  792. },
  793. checkMatemal(type, number, item) {
  794. this.$refs.matemal.showCheck(type, number, item)
  795. },
  796. addMatemal() {
  797. var num = this.dataList.length + 1
  798. this.dataList.push({ key: num, VIDEO_HEAD: '', VIDEO_PART: [], VIDEO_TAIL: '' })
  799. },
  800. removeMatemal(index) {
  801. this.dataList.splice(index, 1)
  802. },
  803. deteleVideo(type, item) {
  804. item[type] = ''
  805. },
  806. moment,
  807. a(item) {
  808. item.showVideo = true
  809. },
  810. getDir(value) {
  811. this.defaultDir = value
  812. this.setDir()
  813. },
  814. joinMatemal() {
  815. console.log(this.dataList)
  816. var data = this.dataList.filter(item => {
  817. return item.VIDEO_PART.length > 0
  818. })
  819. console.log(data)
  820. if (data.length > 0) {
  821. // {"startPart":"","endPart":"","parts":["",""]}
  822. var params = this.dataList.map(item => {
  823. return {
  824. startPart: item.VIDEO_HEAD.id,
  825. parts: item.VIDEO_PART.map(item => {
  826. return item.id
  827. }),
  828. endPart: item.VIDEO_TAIL.id
  829. }
  830. })
  831. // var paramsString = qs.stringify({ videoMergeList: params })
  832. postAction('/ctop/materialpart/merge', params).then(res => {
  833. console.log(res)
  834. if (res.success) {
  835. that.$message.error(res.message)
  836. this.dataList = []
  837. }
  838. })
  839. } else {
  840. that.$message.error('还未选择素材片段')
  841. }
  842. },
  843. dirVideoGet() {
  844. this.visible = true
  845. console.log(this.defaultDir)
  846. this.setDir()
  847. },
  848. dirVideoGetPublish() {
  849. if (this.checkArr.length > 0) {
  850. this.visiblePublish = true
  851. } else {
  852. this.$message.error('请选择需要发布的视频')
  853. }
  854. },
  855. setDir() {
  856. let date = new Date()
  857. let y = date.getFullYear()
  858. let MM = date.getMonth() + 1
  859. MM = MM < 10 ? '0' + MM : MM
  860. let d = date.getDate()
  861. d = d < 10 ? '0' + d : d
  862. this.dirVideo = 'input/' + this.defaultDir + '/' + y + '-' + MM + '-' + d + '/'
  863. },
  864. tongbu() {
  865. this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
  866. userId: this.userInfo().id,
  867. projectId: this.queryParam.projectId
  868. })
  869. },
  870. implement(data) {
  871. var params = {}
  872. params.mediaId = this.mediaId
  873. params.materialArray = JSON.stringify(this.checkArr)
  874. params.accountArray = JSON.stringify(data)
  875. postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
  876. if (res.code == 0) {
  877. this.checkArr = []
  878. this.checkAll = false
  879. }
  880. })
  881. },
  882. showVideoFun(data, typeName) {
  883. console.log(data)
  884. if (typeName == 'VIDEO_HEAD') {
  885. //片头
  886. this.dataList[data.key].VIDEO_HEAD = data.head
  887. } else if (typeName == 'VIDEO_TAIL') {
  888. this.dataList[data.key].VIDEO_TAIL = data.foot
  889. } else {
  890. this.dataList[data.key].VIDEO_PART = data.content
  891. this.dataKey = data.key
  892. }
  893. },
  894. downloadByBlob() {
  895. fetch(this.showUrlWater)
  896. .then(res => res.blob())
  897. .then(blob => {
  898. const a = document.createElement('a')
  899. document.body.appendChild(a)
  900. a.style.display = 'none'
  901. // 使用获取到的blob对象创建的url
  902. const url = window.URL.createObjectURL(blob)
  903. a.href = url
  904. // 指定下载的文件名
  905. a.download = this.name
  906. a.click()
  907. document.body.removeChild(a)
  908. // 移除blob对象的url
  909. window.URL.revokeObjectURL(url)
  910. })
  911. },
  912. download(href, name) {
  913. let eleLink = document.createElement('a')
  914. eleLink.download = name
  915. eleLink.href = href
  916. eleLink.click()
  917. eleLink.remove()
  918. },
  919. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  920. onCheckAllChange() {
  921. if (this.checkAll) {
  922. this.checkArr = []
  923. } else {
  924. this.checkArr = this.dataSource.map(item => {
  925. return item.id
  926. })
  927. }
  928. this.checkAll = !this.checkAll
  929. this.onChangeCheck(this.checkArr)
  930. },
  931. searchRe() {
  932. this.queryParam = { projectId: '', createTime: '' }
  933. this.loadData()
  934. },
  935. getList(value) {
  936. this.mediaId = this.dataElse.filter(item => {
  937. if (value == item.projectId) {
  938. return item
  939. }
  940. })[0].mediaId
  941. this.loadData()
  942. },
  943. onChangeCheck(checkedList) {
  944. // { value: 'VIDEO_HEAD', tab: '片头' },
  945. // { value: 'VIDEO_PART', tab: '片段' },
  946. // { value: 'VIDEO_TAIL', tab: '片尾' }
  947. if (this.active == 'VIDEO_HEAD') {
  948. //片头
  949. if (this.checkArr.length > 1) {
  950. this.checkArr.shift()
  951. this.joinVideo.head = checkedList[0]
  952. } else if (this.checkArr.length == 1) {
  953. this.joinVideo.head = checkedList[0]
  954. } else if (this.checkArr.length == 0) {
  955. this.joinVideo.head = ''
  956. }
  957. } else if (this.active == 'VIDEO_TAIL') {
  958. //片尾
  959. if (this.checkArr.length > 1) {
  960. this.checkArr.shift()
  961. this.joinVideo.foot = checkedList[0]
  962. } else if (this.checkArr.length == 1) {
  963. this.joinVideo.foot = checkedList[0]
  964. } else if (this.checkArr.length == 0) {
  965. this.joinVideo.foot = ''
  966. }
  967. } else {
  968. //内容
  969. if (checkedList.length == 0) {
  970. this.checkAll = false
  971. }
  972. this.joinVideo.content = checkedList
  973. }
  974. },
  975. handleClose(removedTag) {
  976. const tags = this.tags.filter(tag => tag !== removedTag)
  977. this.tags = tags
  978. },
  979. showInput() {
  980. this.inputVisible = true
  981. this.$nextTick(function() {
  982. this.$refs.input.focus()
  983. })
  984. },
  985. handleInputChange(e) {
  986. this.inputValue = e.target.value
  987. },
  988. handleInputConfirm() {
  989. const inputValue = this.inputValue
  990. let tags = this.tags
  991. if (inputValue && tags.indexOf(inputValue) === -1) {
  992. tags = [...tags, inputValue]
  993. }
  994. Object.assign(this, {
  995. tags,
  996. inputVisible: false,
  997. inputValue: ''
  998. })
  999. },
  1000. showDetail(item) {
  1001. this.visibleDetail = true
  1002. this.showUrl = item.url
  1003. this.showUrlWater = item.watermarkUrl ? item.watermarkUrl : null
  1004. this.name = item.watermarkMaterialName ? item.watermarkMaterialName : null
  1005. this.id = item.id
  1006. if (this.active == '2') {
  1007. this.refuseReason = item.refuseReason
  1008. this.refuseFile = item.refuseFile ? JSON.parse(item.refuseFile) : null
  1009. } else if (this.active == '1') {
  1010. this.creativeCopywriter = item.creativeCopywriter
  1011. this.refuseReason = ''
  1012. this.refuseFile = []
  1013. } else {
  1014. this.refuseReason = ''
  1015. this.refuseFile = []
  1016. }
  1017. getAction('/ctop/materialInfo/getDetail', { materialId: item.id }).then(res => {
  1018. this.detail = res
  1019. })
  1020. },
  1021. showDetailElse(item) {
  1022. this.visibleDetail = true
  1023. this.showUrl = item.videoUrl
  1024. this.id = item.id
  1025. getAction('/ctop/materialInfo/getDetail', { materialId: item.videoId }).then(res => {
  1026. this.detail = res
  1027. })
  1028. },
  1029. okEditShow(item, editStatus) {
  1030. if (editStatus == '2') {
  1031. var params = {}
  1032. params.id = item.id
  1033. params.auditorId = this.userInfo().id
  1034. params.refuseReason = this.refuseReason
  1035. var data = this.refuseFile.map(item => {
  1036. return 'https:' + item
  1037. })
  1038. params.refuseFile = JSON.stringify(data)
  1039. params.status = editStatus
  1040. fileEdit(params).then(res => {
  1041. this.refuseFile = []
  1042. this.refuseReason = ''
  1043. this.loadData()
  1044. })
  1045. } else if (editStatus == '1') {
  1046. var params = {}
  1047. params.id = item.id
  1048. params.auditorId = this.userInfo().id
  1049. params.creativeCopywriter = this.refuseReason
  1050. params.status = editStatus
  1051. fileEdit(params).then(res => {
  1052. this.refuseReason = ''
  1053. this.loadData()
  1054. })
  1055. }
  1056. },
  1057. okEdit(e) {
  1058. this.edit(null, this.active, '2')
  1059. },
  1060. edit(item, status, editStatus) {
  1061. if (status == '0' || status == '1') {
  1062. if (editStatus == '2') {
  1063. var params = {}
  1064. params.id = this.id
  1065. params.auditorId = this.userInfo().id
  1066. params.refuseReason = this.refuseReason
  1067. var data = this.refuseFile.map(item => {
  1068. return 'https:' + item
  1069. })
  1070. params.refuseFile = JSON.stringify(data)
  1071. params.status = editStatus
  1072. fileEdit(params).then(res => {
  1073. this.refuseFile = []
  1074. this.refuseReason = ''
  1075. this.loadData()
  1076. this.visibleDetail = false
  1077. })
  1078. } else {
  1079. fileEdit({ id: this.id, status: editStatus, auditorId: this.userInfo().id }).then(res => {
  1080. this.refuseFile = []
  1081. this.refuseReason = ''
  1082. this.loadData()
  1083. this.visibleDetail = false
  1084. })
  1085. }
  1086. } else {
  1087. this.add = false
  1088. this.visible = true
  1089. this.getProjectId(item.projectId)
  1090. getAction('/ctop/materialInfo/getDetail', { materialId: item.id }).then(res => {
  1091. if (this.activeKey == 'image') {
  1092. this.form.setFieldsValue({
  1093. projectId: item.projectId,
  1094. clipId: res.ascription.clipId,
  1095. planeId: res.ascription.planeId,
  1096. materialDescribe: item.materialDescribe
  1097. })
  1098. } else {
  1099. this.form.setFieldsValue({
  1100. projectId: item.projectId,
  1101. clipId: res.ascription.clipId,
  1102. planId: res.ascription.planId,
  1103. shotId: res.ascription.shotId,
  1104. materialDescribe: item.materialDescribe
  1105. })
  1106. }
  1107. this.tags = res.tag
  1108. this.urlList.url = item.url
  1109. this.urlList.md5 = item.code
  1110. this.urlList.name = item.materialName
  1111. this.watermarkUrl.url = item.watermarkUrl
  1112. this.watermarkUrl.md5 = item.watermarkCode
  1113. this.watermarkUrl.name = item.watermarkMaterialName
  1114. this.id = item.id
  1115. })
  1116. }
  1117. },
  1118. handleOkPublich() {
  1119. console.log(this.checkArr)
  1120. this.form.validateFieldsAndScroll((err, values) => {
  1121. console.log(values)
  1122. if (!err) {
  1123. var params = {}
  1124. params.materialIds = this.checkArr
  1125. params.projectId = values.projectId
  1126. postAction('/ctop/materialInfo/batchEdit', params).then(res => {
  1127. if (res.success) {
  1128. this.visiblePublish = false
  1129. } else {
  1130. that.$message.error(res.message)
  1131. }
  1132. })
  1133. }
  1134. })
  1135. },
  1136. closePublish() {
  1137. this.visiblePublish = false
  1138. },
  1139. handleOk() {
  1140. this.form.validateFieldsAndScroll((err, values) => {
  1141. if (err) {
  1142. // 这里做逻辑处理
  1143. } else {
  1144. var params = {}
  1145. var roleCode = {}
  1146. for (const key in this.role) {
  1147. if (key == 'roleCode') {
  1148. this.role[key] = this.role[key] + 'Id'
  1149. roleCode[this.role[key]] = this.userInfo().id
  1150. }
  1151. }
  1152. params.id = this.add ? null : this.id
  1153. params.code = this.urlList.md5
  1154. params.url = values.url
  1155. params.materialName = this.urlList.name
  1156. params.userId = this.userInfo().id
  1157. params.projectId = values.projectId
  1158. params.materialDescribe = values.materialDescribe
  1159. params.ascription = roleCode
  1160. params.type = values.type
  1161. params.tag = this.tags
  1162. if (this.add) {
  1163. fileInsert(params).then(res => {
  1164. this.form.resetFields()
  1165. this.urlList = { url: '', md5: '', name: '' }
  1166. this.watermarkUrl = { url: '', md5: '', name: '' }
  1167. this.tags = []
  1168. this.loadData()
  1169. this.visible = false
  1170. this.add = true
  1171. for (const key in this.role) {
  1172. if (key == 'roleCode') {
  1173. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  1174. }
  1175. }
  1176. })
  1177. } else {
  1178. fileEdit({ ...params, status: '0' }).then(res => {
  1179. this.form.resetFields()
  1180. this.urlList = { url: '', md5: '', name: '' }
  1181. this.watermarkUrl = { url: '', md5: '', name: '' }
  1182. this.tags = []
  1183. this.loadData()
  1184. this.visible = false
  1185. this.add = true
  1186. for (const key in this.role) {
  1187. if (key == 'roleCode') {
  1188. this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
  1189. }
  1190. }
  1191. })
  1192. }
  1193. }
  1194. })
  1195. },
  1196. close() {
  1197. var that = this
  1198. that.form.resetFields()
  1199. that.urlList = { url: '', md5: '', name: '' }
  1200. that.watermarkUrl = { url: '', md5: '', name: '' }
  1201. that.tags = []
  1202. },
  1203. onChange(date, dateString) {},
  1204. callbackTwo(key) {
  1205. this.checkArr = []
  1206. // if (key == 'VIDEO_HEAD') {
  1207. // this.checkArr[0] = this.joinVideo.head
  1208. // } else if (key == 'VIDEO_TAIL') {
  1209. // this.checkArr[0] = this.joinVideo.foot
  1210. // } else if (key == 'VIDEO_PART') {
  1211. // this.checkArr = this.joinVideo.content
  1212. // } else
  1213. if (key == 'job') {
  1214. this.queryParam.type = ''
  1215. this.queryParam.jobId = ''
  1216. this.queryParam.status = ''
  1217. this.url.list = '/ctop/videoMergeTask/list'
  1218. this.loadData()
  1219. } else if (key == 'success') {
  1220. this.queryParam.type = ''
  1221. this.queryParam.status = 'TranscodeSuccess'
  1222. // this.queryParam.jobId = '8ed27f6a9e7b456db0dde2ac4081e6c9'
  1223. // this.url.list = '/ctop/videoPart/list'
  1224. this.url.list = '/ctop/videoMergeTask/list'
  1225. this.loadData()
  1226. } else {
  1227. this.url.list = '/ctop/materialInfo/list'
  1228. this.queryParam.status = ''
  1229. this.queryParam.type = key
  1230. this.loadData()
  1231. }
  1232. if (this.form.getFieldValue('projectId')) {
  1233. this.form.setFieldsValue({ projectId: '' })
  1234. }
  1235. },
  1236. overUpload(urlAll) {
  1237. console.log(urlAll)
  1238. this.form.setFieldsValue({ url: urlAll })
  1239. },
  1240. file(file) {
  1241. var bmf = new BMF()
  1242. var that = this
  1243. return new Promise(function(resolve, reject) {
  1244. bmf.md5(file[0], (err, md5) => {
  1245. that.urlList.name = file[0].name
  1246. that.urlList.md5 = md5
  1247. fileCheck({ code: md5 }).then(res => {
  1248. if (res.code == 0) {
  1249. that.$message.error('此素材已经上传')
  1250. reject()
  1251. } else {
  1252. resolve()
  1253. // reject()
  1254. }
  1255. })
  1256. })
  1257. })
  1258. },
  1259. fileWater(file) {
  1260. var bmf = new BMF()
  1261. var that = this
  1262. return new Promise(function(resolve, reject) {
  1263. bmf.md5(file[0], (err, md5) => {
  1264. that.watermarkUrl.name = file[0].name
  1265. that.watermarkUrl.md5 = md5
  1266. fileCheck({ code: md5 }).then(res => {
  1267. if (res.code == 0) {
  1268. that.$message.error('此素材已经上传')
  1269. reject()
  1270. } else {
  1271. resolve()
  1272. }
  1273. })
  1274. })
  1275. })
  1276. },
  1277. getParticipateList() {
  1278. getAction('/ctop/projectMember/participateList', { userId: this.userInfo().id }).then(res => {
  1279. if (res.code == 0) {
  1280. this.dataElse = res.result
  1281. }
  1282. })
  1283. },
  1284. getProjectId(items) {
  1285. getAction('/ctop/projectMember/getMemberList', { projectId: items }).then(res => {
  1286. if (res.code == 0) {
  1287. this.ascription.clipId = res.result.filter(item => {
  1288. if (item.roleCode == 'clip') {
  1289. return { userId: item.userId, userName: item.userName }
  1290. }
  1291. })
  1292. this.ascription.shotId = res.result.filter(item => {
  1293. if (item.roleCode == 'shot') {
  1294. return { userId: item.userId, userName: item.userName }
  1295. }
  1296. })
  1297. this.ascription.planId = res.result.filter(item => {
  1298. if (item.roleCode == 'plan') {
  1299. return { userId: item.userId, userName: item.userName }
  1300. }
  1301. })
  1302. this.ascription.planeId = res.result.filter(item => {
  1303. if (item.roleCode == 'plane') {
  1304. return { userId: item.userId, userName: item.userName }
  1305. }
  1306. })
  1307. }
  1308. })
  1309. },
  1310. getDataSource(page, pageSize) {
  1311. this.ipagination.current = page
  1312. this.checkArr = []
  1313. this.checkAll = false
  1314. this.loadData()
  1315. }
  1316. }
  1317. }
  1318. </script>
  1319. <style scoped>
  1320. @import '~@assets/less/common.less';
  1321. </style>