materialList.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836
  1. <style lang="scss" scoped>
  2. .orderDetail{
  3. ul,li{
  4. margin: 0;
  5. padding: 0;
  6. }
  7. width: 100%;
  8. .topBody{
  9. width: 100%;
  10. background: #FFFFFF;
  11. margin-bottom: 12px;
  12. padding: 20px;
  13. box-sizing: border-box;
  14. .breadcrumb{
  15. height: 22px;
  16. font-size: 12px;
  17. font-family: PingFangSC-Regular, PingFang SC;
  18. font-weight: 400;
  19. color: #000000;
  20. line-height: 22px;
  21. }
  22. .bottom{
  23. display: flex;
  24. position: relative;
  25. justify-content: space-between;
  26. // padding: 20px;
  27. .orderIcon{
  28. width: 28px;
  29. height: 28px;
  30. margin-right: 15px;
  31. img{
  32. width: 100%;
  33. }
  34. }
  35. .tip{
  36. .greet{
  37. width: 300px;
  38. height: 28px;
  39. font-size: 20px;
  40. font-family: PingFangSC-Medium, PingFang SC;
  41. font-weight: 500;
  42. color: rgba(0, 0, 0, 0.85);
  43. line-height: 28px;
  44. margin-bottom: 5px;
  45. }
  46. .descPosition{
  47. font-size: 14px;
  48. font-family: PingFangSC-Regular, PingFang SC;
  49. font-weight: 400;
  50. color: rgba(0, 0, 0, 0.45);
  51. overflow: hidden;
  52. margin-bottom: 0;
  53. li{
  54. height: 22px;
  55. line-height: 22px;
  56. margin-top:3px ;
  57. }
  58. span{
  59. width: 250px;
  60. display: inline-block;
  61. }
  62. }
  63. }
  64. .optBody{
  65. width: 200px;
  66. flex-shrink:0;
  67. // justify-content: flex-end;
  68. text-align: right;
  69. .btnBody{
  70. margin-bottom: 10px;
  71. }
  72. .orderInfo{
  73. display: flex;
  74. justify-content: space-between;
  75. text-align: right;
  76. p{
  77. margin-bottom: 0;
  78. }
  79. .markName{
  80. height: 22px;
  81. font-size: 14px;
  82. font-family: PingFangSC-Regular, PingFang SC;
  83. font-weight: 400;
  84. color: rgba(0, 0, 0, 0.45);
  85. line-height: 22px;
  86. }
  87. .big{
  88. height: 28px;
  89. font-size: 20px;
  90. font-family: PingFangSC-Regular, PingFang SC;
  91. font-weight: 400;
  92. color: rgba(0, 0, 0, 0.85);
  93. line-height: 28px;
  94. }
  95. }
  96. }
  97. }
  98. }
  99. .section{
  100. background: white;
  101. padding:20px ;
  102. .breadcrumb{
  103. height: 22px;
  104. font-size: 12px;
  105. font-family: PingFangSC-Regular, PingFang SC;
  106. font-weight: 400;
  107. color: #000000;
  108. line-height: 22px;
  109. }
  110. .sectionBody{
  111. p{
  112. margin-bottom: 0;
  113. }
  114. .section-item{
  115. background: white;
  116. margin-bottom: 20px;
  117. }
  118. .tabBox{
  119. padding: 15px 20px 0;
  120. display: flex;
  121. flex-wrap: wrap;
  122. position: relative;
  123. .search-item{
  124. margin-bottom: 12px;
  125. width: 30%;
  126. }
  127. .opt-item{
  128. position: absolute;
  129. right: 20px;
  130. top: 16px;
  131. }
  132. }
  133. .sectionHead{
  134. padding: 15px 20px;
  135. // height: 24px;
  136. font-size: 16px;
  137. font-family: PingFangSC-Medium, PingFang SC;
  138. font-weight: 500;
  139. color: rgba(0, 0, 0, 0.85);
  140. line-height: 24px;
  141. border-bottom: 1px solid #E9E9E9;;
  142. .allOrder{
  143. float: right;
  144. }
  145. }
  146. .section-box{
  147. margin-top: 30px;
  148. padding: 20px 20px;
  149. border: 1px solid #E9E9E9;
  150. .description{
  151. margin-top: 10px;
  152. .time{
  153. height: 32px;
  154. line-height: 32px;
  155. }
  156. }
  157. ul{
  158. display: flex;
  159. flex-wrap: wrap;
  160. // justify-content: space-around;
  161. }
  162. li{
  163. width: 30%;
  164. height: 22px;
  165. font-size: 14px;
  166. font-family: PingFangSC-Regular, PingFang SC;
  167. font-weight: 400;
  168. color: rgba(0, 0, 0, 0.85);
  169. line-height: 22px;
  170. text-align: left;
  171. margin-bottom: 15px;
  172. }
  173. .top{
  174. margin-bottom: 25px;
  175. }
  176. .bottom{
  177. h4{
  178. font-size: 15px;
  179. font-family: PingFangSC-Medium, PingFang SC;
  180. font-weight: 600;
  181. color: rgba(0, 0, 0, 0.85);
  182. margin-bottom: 25px;
  183. }
  184. }
  185. .shenhe{
  186. width: 6px;
  187. height: 6px;
  188. display: inline-block;
  189. background: #52C41A;
  190. border-radius: 50%;
  191. position: relative;
  192. top: -2px;
  193. }
  194. .wancheng{
  195. width: 6px;
  196. height: 6px;
  197. display: inline-block;
  198. background: #1890FF;
  199. border-radius: 50%;
  200. // margin-right: 3px;
  201. position: relative;
  202. top: -2px;
  203. }
  204. .bohui{
  205. width: 6px;
  206. height: 6px;
  207. display: inline-block;
  208. background: #F5222D;
  209. border-radius: 50%;
  210. position: relative;
  211. top: -2px;
  212. }
  213. }
  214. }
  215. }
  216. }
  217. .videoBox{
  218. width: 320px;
  219. height: 180px;
  220. }
  221. .imgBox{
  222. width: 100%;
  223. height: 180px;
  224. }
  225. .marterialInfo{
  226. p{margin-bottom: 0;}
  227. ul,li{
  228. margin: 0;
  229. padding: 0;
  230. }
  231. .info-item{
  232. margin-bottom: 20px;
  233. display: flex;
  234. // justify-content: center;
  235. align-items: center;
  236. span{
  237. display: inline-block;
  238. width: 70px;
  239. text-align: left;
  240. }
  241. .ant-tag{
  242. width: auto;
  243. min-width: 50px;
  244. text-align: center;
  245. }
  246. }
  247. .info{
  248. ul{
  249. display: flex;
  250. justify-content: space-between;
  251. flex-wrap: wrap;
  252. }
  253. li{
  254. width: 33.3%;
  255. margin-bottom: 20px;
  256. }
  257. margin-bottom: 0;
  258. }
  259. .bottom-btn{
  260. width: 100%;
  261. text-align: center;
  262. position: absolute;
  263. bottom: 20px;
  264. left: 0;
  265. }
  266. }
  267. </style>
  268. <style lang="less">
  269. .orderDetail{
  270. .ant-timeline-item-head{
  271. background: rgb(240,242,245);
  272. }
  273. .muen{
  274. cursor: pointer;
  275. }
  276. .muen:hover{
  277. color: #1890ff;
  278. }
  279. }
  280. </style>
  281. <template>
  282. <div class="orderDetail ">
  283. <div class="section">
  284. <p class="breadcrumb">
  285. <a-breadcrumb style="display:block;width:100%">
  286. <a-breadcrumb-item ><span class="muen" @click="goPlantForm()">工作台</span></a-breadcrumb-item>
  287. <a-breadcrumb-item>物料列表</a-breadcrumb-item>
  288. </a-breadcrumb>
  289. </p>
  290. <div class="sectionBody">
  291. <!-- <div class="tabBody">
  292. <a-tabs v-model="activeKey" @change='tabChange'>
  293. <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" >
  294. </a-tab-pane>
  295. </a-tabs>
  296. </div> -->
  297. <!-- 素材列表 -->
  298. <div class="section-item">
  299. <div class="tabBox">
  300. <div class="search-item">
  301. <span>名称:</span>
  302. <a-input placeholder="请输入订单名称" allow-clear v-model="materialName" style="width:300px" />
  303. </div>
  304. <div class="search-item">
  305. <span>编号:</span>
  306. <a-input placeholder="请输入订单编号" allow-clear v-model="materialId" style="width:300px" />
  307. </div>
  308. <div class="search-item">
  309. <span>所属订单:</span>
  310. <a-input placeholder="所属订单" allow-clear v-model="orderSponsor" style="width:300px" />
  311. </div>
  312. <div class="opt-item">
  313. <a-button type='primary' @click="search" style="margin-right:20px">查询</a-button>
  314. <a-button type='default' @click="reset">查询</a-button>
  315. </div>
  316. </div>
  317. <div class="section-box">
  318. <a-table
  319. size="middle"
  320. :columns="columns"
  321. :dataSource="data"
  322. id="outTable"
  323. :pagination="ipagination"
  324. :loading="loading"
  325. @change="sort"
  326. style="word-break: break-all;"
  327. >
  328. <div slot="materialStatus" slot-scope="text" >
  329. <span class="wancheng" v-if="text==7"> </span>
  330. <span class="bohui" v-else-if="text==6||text==4"> </span>
  331. <span class="shenhe" v-else> </span>
  332. {{text | handleMaterialStatus}}
  333. </div>
  334. <div slot="scriptStatus" slot-scope="text,record">
  335. <div v-if="text==0||text==2">脚本未上传</div>
  336. <div v-if="text==1">
  337. <a href="javascript:;" @click="scriptViewDetails(record)">预览</a>
  338. <a-divider type="vertical" />
  339. <a href="javascript:;" @click="scriptApproved(record)">通过</a>
  340. <a-divider type="vertical" />
  341. <a href="javascript:;" @click="scriptReject(record)">驳回</a>
  342. </div>
  343. <div v-if="text==3">
  344. <a href="javascript:;" @click="scriptViewDetails(record)">预览</a>
  345. </div>
  346. </div>
  347. <div slot="videoStatus" slot-scope="text,record">
  348. <div v-if="text==0||text==2">视频未上传</div>
  349. <div v-if="text==1">
  350. <a href="javascript:;" @click="viewDetails(record)">预览</a>
  351. <a-divider type="vertical" />
  352. <a href="javascript:;" @click="approved(record)">通过</a>
  353. <a-divider type="vertical" />
  354. <a href="javascript:;" @click="reject(record)">驳回</a>
  355. </div>
  356. <div v-if="text==3">
  357. <a href="javascript:;" @click="viewDetails(record)">预览</a>
  358. </div>
  359. </div>
  360. </a-table>
  361. </div>
  362. <a-drawer
  363. title="视频详情"
  364. width="640"
  365. :placement="placement"
  366. :closable="false"
  367. :visible="visible"
  368. @close="onClose"
  369. >
  370. <div class="videoBody">
  371. <div class="videoBox">
  372. <video :src="currentMaterial.src" ></video>
  373. </div>
  374. <div class="imgBox">
  375. <img src="" alt="">
  376. <img src="" alt="">
  377. </div>
  378. </div>
  379. <div class="marterialInfo">
  380. <div class="info-item">
  381. <span>素材状态:</span>
  382. <p>未审核</p>
  383. </div>
  384. <div class="info-item">
  385. <span>生成水印:</span>
  386. <a-select :defaultValue="4" v-model="size" style="width:70%;">
  387. <a-select-option :value="item.id" :key="item.id" v-for="item of sizeType">{{
  388. item.name
  389. }}</a-select-option>
  390. </a-select>
  391. </div>
  392. <div class="info-item">
  393. <span>视频标签:</span>
  394. <a-tag>Tag 1</a-tag>
  395. <a-tag>Tag 1</a-tag>
  396. </div>
  397. <div class="info-item info">
  398. <ul>
  399. <li><span>视频时长:</span> 17秒 </li>
  400. <li><span>视频尺寸:</span> 1080*1920 </li>
  401. <li><span>视频大小:</span> 31.42M </li>
  402. <li><span>策划:</span> 吴永前 </li>
  403. <li><span>拍摄:</span> 吴永前 </li>
  404. <li><span>剪辑:</span> 吴永前 </li>
  405. </ul>
  406. </div>
  407. <div class="info-item">
  408. <span>广告语:</span>
  409. <p>14354534324454354水电费水电费方式手动</p>
  410. </div>
  411. <div class="bottom-btn">
  412. <a-button type='primary' @click="approved" style="margin-right:20px">通过审核</a-button>
  413. <a-button type='default' @click="reject">驳回</a-button>
  414. </div>
  415. </div>
  416. </a-drawer>
  417. <a-drawer
  418. title="脚本详情"
  419. width="640"
  420. :placement="placement"
  421. :closable="false"
  422. :visible="scriptVisible"
  423. @close="scriptClose"
  424. >
  425. <div class="videoBody">
  426. <div class="videoBox">
  427. <video :src="currentMaterial.src" ></video>
  428. </div>
  429. <div class="imgBox">
  430. <img src="" alt="">
  431. <img src="" alt="">
  432. </div>
  433. </div>
  434. <div class="marterialInfo">
  435. <div class="info-item">
  436. <span>素材状态:</span>
  437. <p>未审核</p>
  438. </div>
  439. <div class="info-item">
  440. <span>生成水印:</span>
  441. <a-select :defaultValue="4" v-model="size" style="width:70%;">
  442. <a-select-option :value="item.id" :key="item.id" v-for="item of sizeType">{{
  443. item.name
  444. }}</a-select-option>
  445. </a-select>
  446. </div>
  447. <div class="info-item">
  448. <span>视频标签:</span>
  449. <a-tag>Tag 1</a-tag>
  450. <a-tag>Tag 1</a-tag>
  451. </div>
  452. <div class="info-item info">
  453. <ul>
  454. <li><span>视频时长:</span> 17秒 </li>
  455. <li><span>视频尺寸:</span> 1080*1920 </li>
  456. <li><span>视频大小:</span> 31.42M </li>
  457. <li><span>策划:</span> 吴永前 </li>
  458. <li><span>拍摄:</span> 吴永前 </li>
  459. <li><span>剪辑:</span> 吴永前 </li>
  460. </ul>
  461. </div>
  462. <div class="info-item">
  463. <span>广告语:</span>
  464. <p>14354534324454354水电费水电费方式手动</p>
  465. </div>
  466. <div class="bottom-btn">
  467. <a-button type='primary' @click="approved" style="margin-right:20px">通过审核</a-button>
  468. <a-button type='default' @click="reject">驳回</a-button>
  469. </div>
  470. </div>
  471. </a-drawer>
  472. </div>
  473. </div>
  474. </div>
  475. </div>
  476. </template>
  477. <script>
  478. import moment from 'moment';
  479. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  480. import qs from 'qs'
  481. let columns=[
  482. {
  483. title: '物料名称',
  484. dataIndex: 'orderTitle',
  485. align: 'center',
  486. key: 'orderTitle',
  487. scopedSlots: { customRender: 'orderTitle' }
  488. },
  489. {
  490. title: '物料编号',
  491. dataIndex: 'id',
  492. align: 'center',
  493. key: 'tag',
  494. scopedSlots: { customRender: 'id' }
  495. },
  496. {
  497. title: '物料状态',
  498. dataIndex: 'materialStatus',
  499. align: 'center',
  500. key: 'materialStatus',
  501. scopedSlots: { customRender: 'materialStatus' }
  502. },
  503. {
  504. title: '脚本',
  505. dataIndex: 'scriptStatus',
  506. align: 'center',
  507. key: 'scriptStatus',
  508. scopedSlots: { customRender: 'scriptStatus' }
  509. },
  510. {
  511. title: '视频',
  512. dataIndex: 'videoStatus',
  513. align: 'center',
  514. key: 'videoStatus',
  515. width:250,
  516. scopedSlots: { customRender: 'videoStatus' }
  517. },
  518. {
  519. title: '所属订单',
  520. dataIndex: 'materialFinishTime',
  521. align: 'center',
  522. key: 'materialFinishTime',
  523. scopedSlots: { customRender: 'materialFinishTime' }
  524. },
  525. ]
  526. export default {
  527. name:'material-list',
  528. data() {
  529. const panes = [
  530. { title: '脚本列表', content: '', key: 1 , },
  531. { title: '视频列表', content: '', key: 2 , },
  532. ];
  533. return {
  534. userInfo:{},
  535. roleCode:'',
  536. panes,
  537. activeKey: 1,
  538. orderInfo:{ },
  539. columns,
  540. data:[],
  541. loading:false,
  542. ipagination: {
  543. current: 1,
  544. pageSize: 10,
  545. // pageSizeOptions: ['10', '20', '30'],
  546. showTotal: (total, range) => {
  547. return range[0] + "-" + range[1] + " 共" + total + "条"
  548. },
  549. showQuickJumper: true,
  550. showSizeChanger:true,
  551. pageSizeOptions: ['10', '30', '50'],
  552. total: 0,
  553. onChange: (current, pageSize) => {
  554. // 切换分页时的回调,
  555. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  556. this.ipagination.current = current;
  557. this.ipagination.pageSize= pageSize;
  558. }
  559. },
  560. // 订单进度
  561. materialName:'',
  562. materialId:'',
  563. orderStatus:'',
  564. orderParticipants:"",
  565. orderSponsor:'',
  566. visible: false,
  567. scriptVisible:false,
  568. placement: 'right',
  569. currentMaterial:{},
  570. sizeType:[],
  571. size: "4",
  572. }
  573. },
  574. methods: {
  575. goPlantForm(){
  576. if(this.$parent.role=='operator'){
  577. this.$parent.currentTabComponent='operatorPlatform'
  578. }else if(this.$parent.role=='designLeader'){
  579. this.$parent.currentTabComponent='designleaderPlatform'
  580. }else if(this.$parent.role=='design'){
  581. this.$parent.currentTabComponent='operatorPlatform'
  582. }
  583. },
  584. tabChange(key){
  585. console.log(key)
  586. this.tableHttp(key)
  587. },
  588. handleChange(value) {
  589. console.log(`selected ${value}`);
  590. },
  591. filterOption(input, option) {
  592. return (
  593. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  594. );
  595. },
  596. // 查看详情
  597. viewDetails(record){
  598. console.log(record)
  599. this.visible=true;
  600. },
  601. // 查看详情
  602. scriptViewDetails(record){
  603. console.log(record)
  604. this.scriptVisible=true;
  605. // this.$router.push(`/workBench/orderDetail?orderId=${record.id}`)
  606. },
  607. // 撤回订单
  608. withdrawOrder(){
  609. },
  610. // 更多操作
  611. handleMenuClick(e) {
  612. console.log('click', e);
  613. },
  614. // 验收
  615. checkAccept(record){
  616. console.log(record)
  617. },
  618. onClose() {
  619. this.visible = false;
  620. },
  621. scriptClose() {
  622. this.scriptVisible = false;
  623. },
  624. // 上传素材
  625. uploadMaterial(){
  626. },
  627. sort(pagination, filters, sorter, { currentDataSource }){
  628. this.ipagination.current=pagination.current;
  629. this.ipagination.pageSize=pagination.pageSize;
  630. this.materialHttp()
  631. },
  632. // 请求素材
  633. materialHttp(){
  634. // this.loading=true;
  635. this.data=[];
  636. },
  637. // 视频通过审核
  638. approved(){
  639. },
  640. // 视频驳回
  641. reject(){
  642. },
  643. search(){
  644. },
  645. reset(){
  646. this.materialName='';
  647. this.materialId='';
  648. this.orderStatus='';
  649. this.orderParticipants="";
  650. this.orderSponsor='';
  651. },
  652. tableHttp(type){
  653. let params=this.handlerParams(type)
  654. params={
  655. ...params,
  656. pageNo:this.ipagination.current,
  657. pageSize:this.ipagination.pageSize
  658. }
  659. console.log(params)
  660. getAction('/platform/designer/listByOperatorUserId',params).then(res=>{
  661. console.log(res);
  662. if(res.success){
  663. this.data=res.result.records;
  664. this.ipagination.total=res.result.total;
  665. }
  666. })
  667. },
  668. handlerParams(status){
  669. if(this.$parent.role=='operator'){
  670. if(status==1){
  671. return {
  672. materialStatus:0,
  673. createBy:this.userInfo.id
  674. }
  675. }
  676. }else if(this.$parent.role=='designLeader'){
  677. if(status==1){
  678. return {
  679. materialStatus:0,
  680. design:this.userInfo.id
  681. }
  682. }else if(status==2){
  683. return {
  684. materialStatus:1,
  685. design:this.userInfo.id
  686. }
  687. }
  688. }else if(this.$parent.role=='design'){
  689. if(status==1){
  690. return {
  691. materialStatus:0,
  692. design:this.userInfo.id
  693. }
  694. }else if(status==2){
  695. return {
  696. materialStatus:1,
  697. design:this.userInfo.id
  698. }
  699. }else if(status==3){
  700. return {
  701. materialStatus:3,
  702. design:this.userInfo.id
  703. }
  704. }else if(status==4){
  705. return {
  706. design:this.userInfo.id
  707. }
  708. }
  709. }
  710. },
  711. },
  712. mounted(){
  713. let userInfo=localStorage.getItem('pro__Login_Userinfo');
  714. if(userInfo){
  715. this.userInfo=JSON.parse(userInfo).value
  716. }
  717. this.roleCode=localStorage.getItem('roleCode')
  718. console.log(this.$parent.materialStatus)
  719. },
  720. activated() {
  721. this.activeKey=this.$parent.materialStatus
  722. this.tableHttp(this.$parent.materialStatus)
  723. },
  724. filters:{
  725. handleMaterialStatus(val){
  726. let text
  727. switch (val) {
  728. case 0:
  729. text='待指派'
  730. break;
  731. case 1:
  732. text='脚本已上传'
  733. break;
  734. case 2:
  735. text='脚本待审核'
  736. break;
  737. case 3:
  738. text='视频待上传'
  739. break;
  740. case 4:
  741. text='脚本被驳回'
  742. break;
  743. case 5:
  744. text='视频待审核'
  745. break;
  746. case 6:
  747. text='视频被驳回'
  748. break;
  749. case 7:
  750. text='物料已完成'
  751. break;
  752. case -1:
  753. text='已作废'
  754. break;
  755. default:
  756. text='出错'
  757. break;
  758. }
  759. return text
  760. }
  761. },
  762. }
  763. </script>