orderDetail.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796
  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. .sectionBody{
  101. p{
  102. margin-bottom: 0;
  103. }
  104. .section-item{
  105. background: white;
  106. margin-bottom: 20px;
  107. }
  108. .tabBox{
  109. padding: 15px 20px 0;
  110. }
  111. .sectionHead{
  112. padding: 15px 20px;
  113. // height: 24px;
  114. font-size: 16px;
  115. font-family: PingFangSC-Medium, PingFang SC;
  116. font-weight: 500;
  117. color: rgba(0, 0, 0, 0.85);
  118. line-height: 24px;
  119. border-bottom: 1px solid #E9E9E9;;
  120. .allOrder{
  121. float: right;
  122. }
  123. }
  124. .section-box{
  125. padding: 20px 20px;
  126. .description{
  127. margin-top: 10px;
  128. .time{
  129. height: 32px;
  130. line-height: 32px;
  131. }
  132. }
  133. ul{
  134. display: flex;
  135. flex-wrap: wrap;
  136. // justify-content: space-around;
  137. }
  138. li{
  139. width: 30%;
  140. height: 22px;
  141. font-size: 14px;
  142. font-family: PingFangSC-Regular, PingFang SC;
  143. font-weight: 400;
  144. color: rgba(0, 0, 0, 0.85);
  145. line-height: 22px;
  146. text-align: left;
  147. margin-bottom: 15px;
  148. }
  149. .top{
  150. margin-bottom: 25px;
  151. }
  152. .bottom{
  153. h4{
  154. font-size: 15px;
  155. font-family: PingFangSC-Medium, PingFang SC;
  156. font-weight: 600;
  157. color: rgba(0, 0, 0, 0.85);
  158. margin-bottom: 25px;
  159. }
  160. }
  161. .shenhe{
  162. width: 6px;
  163. height: 6px;
  164. display: inline-block;
  165. background: #52C41A;
  166. border-radius: 50%;
  167. position: relative;
  168. top: -2px;
  169. }
  170. .wancheng{
  171. width: 6px;
  172. height: 6px;
  173. display: inline-block;
  174. background: #1890FF;
  175. border-radius: 50%;
  176. // margin-right: 3px;
  177. position: relative;
  178. top: -2px;
  179. }
  180. .bohui{
  181. width: 6px;
  182. height: 6px;
  183. display: inline-block;
  184. background: #F5222D;
  185. border-radius: 50%;
  186. position: relative;
  187. top: -2px;
  188. }
  189. }
  190. }
  191. }
  192. }
  193. .videoBox{
  194. width: 320px;
  195. height: 180px;
  196. }
  197. .imgBox{
  198. width: 100%;
  199. height: 180px;
  200. }
  201. .marterialInfo{
  202. p{margin-bottom: 0;}
  203. ul,li{
  204. margin: 0;
  205. padding: 0;
  206. }
  207. .info-item{
  208. margin-bottom: 20px;
  209. display: flex;
  210. // justify-content: center;
  211. align-items: center;
  212. span{
  213. display: inline-block;
  214. width: 70px;
  215. text-align: left;
  216. }
  217. .ant-tag{
  218. width: auto;
  219. min-width: 50px;
  220. text-align: center;
  221. }
  222. }
  223. .info{
  224. ul{
  225. display: flex;
  226. justify-content: space-between;
  227. flex-wrap: wrap;
  228. }
  229. li{
  230. width: 33.3%;
  231. margin-bottom: 20px;
  232. }
  233. margin-bottom: 0;
  234. }
  235. .bottom-btn{
  236. width: 100%;
  237. text-align: center;
  238. position: absolute;
  239. bottom: 20px;
  240. left: 0;
  241. }
  242. }
  243. </style>
  244. <style lang="less">
  245. .orderDetail{
  246. .ant-timeline-item-head{
  247. background: rgb(240,242,245);
  248. }
  249. }
  250. </style>
  251. <template>
  252. <div class="orderDetail ">
  253. <div class="topBody">
  254. <p class="breadcrumb">
  255. <a-breadcrumb style="display:block;width:100%">
  256. <a-breadcrumb-item><router-link to="/workBench">工作台</router-link></a-breadcrumb-item>
  257. <a-breadcrumb-item>订单详情</a-breadcrumb-item>
  258. </a-breadcrumb>
  259. </p>
  260. <div class="bottom">
  261. <div class="left" style="display:flex;width:70%">
  262. <div class="orderIcon">
  263. <img src="@/assets/orderIcon.png" alt="">
  264. </div>
  265. <div class='tip'>
  266. <p class="greet">订单标题</p>
  267. <p class="descPosition">
  268. <ul>
  269. <li>
  270. <span>订单发起人:{{}}</span>
  271. <span>关联项目:{{}}</span>
  272. </li>
  273. <li>
  274. <span>创建时间:{{}}</span>
  275. <span>设计负责人:{{}}</span>
  276. </li>
  277. <li>
  278. <span>订单周期:{{}}</span>
  279. </li>
  280. </ul>
  281. </p>
  282. </div>
  283. </div>
  284. <div class="optBody">
  285. <div class="btnBody">
  286. <a-button type='default' style="margin-right:15px" @click="withdrawOrder">撤回订单</a-button>
  287. <a-dropdown>
  288. <a-menu slot="overlay" @click="handleMenuClick">
  289. <a-menu-item key="1">1</a-menu-item>
  290. <a-menu-item key="2">2</a-menu-item>
  291. <a-menu-item key="3">3</a-menu-item>
  292. </a-menu>
  293. <a-button> 更多 <a-icon type="down" /> </a-button>
  294. </a-dropdown>
  295. </div>
  296. <div class="orderInfo">
  297. <div>
  298. <p class="markName">状态</p>
  299. <p class="big">{{ orderInfo.status || '待确定'}}</p>
  300. </div>
  301. <div>
  302. <p class="markName">订单进度</p>
  303. <p class="big">{{orderInfo.progress|| 0 }}%</p>
  304. </div>
  305. </div>
  306. </div>
  307. </div>
  308. </div>
  309. <div class="section">
  310. <div class="sectionBody">
  311. <!-- 订单进度 -->
  312. <div class="section-item">
  313. <div class="sectionHead">订单进度</div>
  314. <div class="section-box">
  315. <a-steps progress-dot :current="currentStep">
  316. <a-step title="创建订单" >
  317. <div class="description" slot="description" v-if="currentStep>=0">
  318. <p class="people">吴永前</p>
  319. <p class="time">2020-10-16 12:20</p>
  320. </div>
  321. </a-step>
  322. <a-step title="设计组长接单" >
  323. <div class="description" slot="description" v-if="currentStep>=1">
  324. <p class="people">王垒</p>
  325. <p class="time" v-if="currentStep==1">
  326. <a-button type='link' @click="hurryUp">催一下</a-button>
  327. </p>
  328. <p class="time" v-else>2020-10-16 12:20</p>
  329. </div>
  330. </a-step>
  331. <a-step title="素材制作" >
  332. <div class="description" slot="description" v-if="currentStep>=2">
  333. <p class="people">王垒</p>
  334. <p class="time" v-if="currentStep==2">
  335. <a-button type='link' @click="hurryUp">催一下</a-button>
  336. </p>
  337. <p class="time" v-else>2020-10-16 12:20</p>
  338. </div>
  339. </a-step>
  340. <a-step title="订单完成" >
  341. <div class="description" slot="description" v-if="currentStep>=3">
  342. <p class="people">吴永前</p>
  343. <p class="time" v-if="currentStep==3">
  344. <a-button type='link' @click="checkAccept">待验收</a-button>
  345. </p>
  346. <p class="time" v-else>2020-10-16 12:20</p>
  347. </div>
  348. </a-step>
  349. </a-steps>
  350. </div>
  351. </div>
  352. <!-- 订单详情 -->
  353. <div class="section-item">
  354. <div class="sectionHead">订单详情</div>
  355. <div class="section-box">
  356. <div class="top">
  357. <ul>
  358. <li>
  359. 订单发起人:<span>吴永前</span>
  360. </li>
  361. <li>
  362. 订单所含素材总数:<span>20</span>
  363. </li>
  364. <li>
  365. 订单状态:<span>设计中</span>
  366. </li>
  367. <li>
  368. 订单所属项目:<span>北京聚划算</span>
  369. </li>
  370. <li>
  371. 要求日更素材:<span>4</span>
  372. </li>
  373. </ul>
  374. </div>
  375. <div class="bottom">
  376. <h4>素材负责人</h4>
  377. <ul>
  378. <li> 设计组长:<span>毕洁泉</span></li>
  379. <li> 摄像:<span>王垒</span></li>
  380. <li> </li>
  381. <li> 编导:<span>毕洁泉</span></li>
  382. <li> 剪辑:<span>毕洁泉</span></li>
  383. <li> </li>
  384. </ul>
  385. </div>
  386. </div>
  387. </div>
  388. <!-- 素材列表 -->
  389. <div class="section-item">
  390. <div class="tabBox">
  391. <a-tabs v-model="tabKey" @change="tabChange">
  392. <a-tab-pane :key='1' tab="素材"></a-tab-pane>
  393. <a-tab-pane :key='2' tab="脚本"></a-tab-pane>
  394. <a-button type='primary' slot="tabBarExtraContent">上传素材</a-button>
  395. </a-tabs>
  396. </div>
  397. <div class="section-box">
  398. <a-table
  399. size="middle"
  400. :columns="columns"
  401. :dataSource="data"
  402. id="outTable"
  403. :pagination="ipagination"
  404. :loading="loading"
  405. @change="sort"
  406. style="word-break: break-all;"
  407. >
  408. <div slot="status" slot-scope="text" >
  409. <!-- <a-spin :spinning="record.spin" size="small" >
  410. <div class="spin-content">
  411. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  412. </div>
  413. </a-spin>
  414. <a-switch size="default" :checked=text @change="switchChange(text,record)"/> -->
  415. <span class="shenhe" v-if="text=='待审核'"> </span>
  416. <span class="wancheng" v-else-if="text=='已完成'"> </span>
  417. <span class="bohui" v-else> </span>
  418. {{text}}
  419. </div>
  420. <span slot="options" slot-scope="text,record">
  421. <a href="javascript:;" @click="viewDetails(record)">详情</a>
  422. <a-divider type="vertical" />
  423. <a href="javascript:;" @click="hurryUp(record)">催一下</a>
  424. <a-divider type="vertical" />
  425. <a href="javascript:;" @click="viewDetails(record)">通过</a>
  426. <a-divider type="vertical" />
  427. <a href="javascript:;" @click="viewDetails(record)">驳回</a>
  428. <a-divider type="vertical" />
  429. <!-- <a-divider type="vertical" />
  430. <a href="javascript:;" @click="recordsRule(record)">计划分析</a>
  431. <a-divider type="vertical" />
  432. <a-popconfirm
  433. title="确定删除该规则吗?"
  434. @confirm="deleteRule(record)"
  435. >
  436. <a href="javascript:;" >删除</a>
  437. </a-popconfirm> -->
  438. </span>
  439. </a-table>
  440. </div>
  441. <a-drawer
  442. title="素材详情"
  443. width="640"
  444. :placement="placement"
  445. :closable="false"
  446. :visible="visible"
  447. @close="onClose"
  448. >
  449. <div class="videoBody">
  450. <div class="videoBox">
  451. <video :src="currentMaterial.src" ></video>
  452. </div>
  453. <div class="imgBox">
  454. <img src="" alt="">
  455. <img src="" alt="">
  456. </div>
  457. </div>
  458. <div class="marterialInfo">
  459. <div class="info-item">
  460. <span>素材状态:</span>
  461. <p>未审核</p>
  462. </div>
  463. <div class="info-item">
  464. <span>生成水印:</span>
  465. <a-select :defaultValue="4" v-model="size" style="width:70%;">
  466. <a-select-option :value="item.id" :key="item.id" v-for="item of sizeType">{{
  467. item.name
  468. }}</a-select-option>
  469. </a-select>
  470. <a-button type="primary" @click="getWater">生成</a-button>
  471. </div>
  472. <div class="info-item">
  473. <span>视频标签:</span>
  474. <a-tag>Tag 1</a-tag>
  475. <a-tag>Tag 1</a-tag>
  476. </div>
  477. <div class="info-item info">
  478. <ul>
  479. <li><span>视频时长:</span> 17秒 </li>
  480. <li><span>视频尺寸:</span> 1080*1920 </li>
  481. <li><span>视频大小:</span> 31.42M </li>
  482. <li><span>策划:</span> 吴永前 </li>
  483. <li><span>拍摄:</span> 吴永前 </li>
  484. <li><span>剪辑:</span> 吴永前 </li>
  485. </ul>
  486. </div>
  487. <div class="info-item">
  488. <span>广告语:</span>
  489. <p>14354534324454354水电费水电费方式手动</p>
  490. </div>
  491. <div class="bottom-btn">
  492. <a-button type='primary' @click="approved" style="margin-right:20px">通过审核</a-button>
  493. <a-button type='default' @click="reject">驳回</a-button>
  494. </div>
  495. </div>
  496. </a-drawer>
  497. </div>
  498. </div>
  499. </div>
  500. </div>
  501. </template>
  502. <script>
  503. import moment from 'moment';
  504. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  505. let materialColumns=[
  506. {
  507. title: '素材名称',
  508. dataIndex: 'name',
  509. align: 'center',
  510. key: 'name',
  511. scopedSlots: { customRender: 'name' }
  512. },
  513. {
  514. title: '素材类型',
  515. dataIndex: 'type',
  516. align: 'center',
  517. key: 'type',
  518. scopedSlots: { customRender: 'type' }
  519. },
  520. {
  521. title: '素材状态',
  522. dataIndex: 'status',
  523. align: 'center',
  524. key: 'status',
  525. scopedSlots: { customRender: 'status' }
  526. },
  527. {
  528. title: '完结时间',
  529. dataIndex: 'time',
  530. align: 'center',
  531. key: 'time',
  532. scopedSlots: { customRender: 'time' }
  533. },
  534. {
  535. title: '备注',
  536. dataIndex: 'remarks',
  537. align: 'center',
  538. key: 'remarks',
  539. scopedSlots: { customRender: 'remarks' }
  540. },
  541. {
  542. title: '操作',
  543. dataIndex: 'options',
  544. align: 'center',
  545. key: 'options',
  546. width:250,
  547. scopedSlots: { customRender: 'options' }
  548. },
  549. ]
  550. let scriptColumns=[
  551. {
  552. title: '素材名称',
  553. dataIndex: 'name',
  554. align: 'center',
  555. key: 'name',
  556. scopedSlots: { customRender: 'name' }
  557. },
  558. {
  559. title: '素材标签',
  560. dataIndex: 'tag',
  561. align: 'center',
  562. key: 'tag',
  563. scopedSlots: { customRender: 'tag' }
  564. },
  565. {
  566. title: '素材状态',
  567. dataIndex: 'status',
  568. align: 'center',
  569. key: 'status',
  570. scopedSlots: { customRender: 'status' }
  571. },
  572. {
  573. title: '完结时间',
  574. dataIndex: 'time',
  575. align: 'center',
  576. key: 'time',
  577. scopedSlots: { customRender: 'time' }
  578. },
  579. {
  580. title: '备注',
  581. dataIndex: 'remarks',
  582. align: 'center',
  583. key: 'remarks',
  584. scopedSlots: { customRender: 'remarks' }
  585. },
  586. {
  587. title: '操作',
  588. dataIndex: 'options',
  589. align: 'center',
  590. key: 'options',
  591. scopedSlots: { customRender: 'options' }
  592. },
  593. ]
  594. let marterialData=[
  595. {
  596. name:'1111',
  597. type:'真人',
  598. status:'待审核',
  599. time:'2020-10-20 19:23:12',
  600. id:0,
  601. remarks:'xx'
  602. },
  603. {
  604. name:'2211',
  605. type:'vlog',
  606. status:'已完成',
  607. time:'2020-10-20 19:23:12',
  608. id:1
  609. },
  610. {
  611. name:'3331',
  612. type:'真人',
  613. status:'已驳回',
  614. time:'2020-10-20 19:23:12',
  615. id:2
  616. },
  617. {
  618. name:'4444',
  619. type:'真人',
  620. status:'待审核',
  621. time:'2020-10-20 19:23:12',
  622. id:3
  623. },
  624. ]
  625. export default {
  626. data() {
  627. return {
  628. tabKey:1,
  629. columns:[...materialColumns],
  630. data:[...marterialData],
  631. loading:false,
  632. ipagination: {
  633. current: 1,
  634. pageSize: 10,
  635. // pageSizeOptions: ['10', '20', '30'],
  636. showTotal: (total, range) => {
  637. return range[0] + "-" + range[1] + " 共" + total + "条"
  638. },
  639. showQuickJumper: true,
  640. showSizeChanger:true,
  641. pageSizeOptions: ['10', '30', '50'],
  642. total: 0,
  643. onChange: (current, pageSize) => {
  644. // 切换分页时的回调,
  645. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  646. this.ipagination.current = current;
  647. this.ipagination.pageSize= pageSize;
  648. }
  649. },
  650. // 订单进度
  651. orderInfo:{
  652. status:undefined,
  653. progress:0,
  654. },
  655. currentStep:1,
  656. visible: false,
  657. placement: 'right',
  658. currentMaterial:{},
  659. sizeType:[],
  660. size: "4",
  661. }
  662. },
  663. methods: {
  664. // 查看详情
  665. viewDetails(record){
  666. console.log(record)
  667. this.visible = true;
  668. },
  669. onClose() {
  670. this.visible = false;
  671. },
  672. // 撤回订单
  673. withdrawOrder(){
  674. },
  675. // 更多操作
  676. handleMenuClick(e) {
  677. console.log('click', e);
  678. },
  679. // 催一下
  680. hurryUp(){
  681. },
  682. // 验收
  683. checkAccept(){
  684. },
  685. // 上传素材
  686. uploadMaterial(){
  687. },
  688. sort(pagination, filters, sorter, { currentDataSource }){
  689. this.ipagination.current=pagination.current;
  690. this.ipagination.pageSize=pagination.pageSize;
  691. this.materialHttp()
  692. },
  693. // 请求素材
  694. materialHttp(){
  695. // this.loading=true;
  696. this.data=[];
  697. },
  698. // tabqiehuan
  699. tabChange(key){
  700. console.log(key);
  701. if(key==1){
  702. this.columns=[...materialColumns]
  703. }else{
  704. this.columns=[...scriptColumns]
  705. }
  706. },
  707. // 素材通过审核
  708. approved(){
  709. },
  710. // 素材驳回
  711. reject(){
  712. },
  713. // 生成水印
  714. getWater() {
  715. var params = qs.stringify({
  716. id: this.id,
  717. watermarkTemplateId: this.size
  718. })
  719. postAction('/ctop/materialInfo/watermark', params).then(res => {
  720. if (res.success) {
  721. // getAction("/ctop/videoWatermarkTask/list").then(res=>{
  722. // console.log(res)
  723. // })
  724. this.$message.success('水印素材生成中,请一分钟后刷新')
  725. this.visibleDetail = false
  726. this.refuseFile = []
  727. this.refuseReason = ''
  728. closeAllVideoFun()
  729. this.loadData()
  730. }
  731. })
  732. },
  733. },
  734. created(){
  735. getAction('/ctop/videoWatermarkTemplate/list').then(res => {
  736. if (res.success) {
  737. this.sizeType = res.result.records
  738. }
  739. })
  740. }
  741. }
  742. </script>