orderList.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707
  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. <!-- {{ pane.content }}{{pane.role+'-'+roleCode}} -->
  295. </a-tab-pane>
  296. </a-tabs>
  297. </div>
  298. <!-- 素材列表 -->
  299. <div class="section-item">
  300. <div class="tabBox">
  301. <div class="search-item">
  302. <span>订单名称:</span>
  303. <a-input placeholder="请输入订单名称" allow-clear v-model="orderTitle" style="width:200px" />
  304. </div>
  305. <div class="search-item">
  306. <span>订单编号:</span>
  307. <a-input placeholder="请输入订单编号" allow-clear v-model="id" style="width:200px" />
  308. </div>
  309. <div class="search-item">
  310. <span>发起的人:</span>
  311. <a-input placeholder="请输入订单发起人" allow-clear v-model="createByName" style="width:200px" />
  312. </div>
  313. <div class="opt-item">
  314. <a-button type='primary' @click="search" style="margin-right:20px">查询</a-button>
  315. <a-button type='default' @click="reset">查询</a-button>
  316. </div>
  317. </div>
  318. <div class="section-box">
  319. <a-table
  320. size="middle"
  321. :columns="columns"
  322. :dataSource="data"
  323. :pagination="ipagination"
  324. :loading="loading"
  325. @change="sort"
  326. style="word-break: break-all;"
  327. >
  328. <div slot="orderStatus" slot-scope="text" >
  329. <span class="wancheng" v-if="text==3"> </span>
  330. <span class="bohui" v-else-if="text==2||text==-1"> </span>
  331. <span class="shenhe" v-else> </span>
  332. {{text | handleOrderStatus}}
  333. </div>
  334. <span slot="options" slot-scope="text,record">
  335. <a href="javascript:;" @click="viewDetails(record)">详情</a>
  336. </span>
  337. <span slot="updateTime" slot-scope="text">
  338. {{text||'-'}}
  339. </span>
  340. </a-table>
  341. </div>
  342. </div>
  343. </div>
  344. </div>
  345. </div>
  346. </template>
  347. <script>
  348. import moment from 'moment';
  349. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  350. import qs from 'qs'
  351. let listColumns=[
  352. {
  353. title: '订单名称',
  354. dataIndex: 'orderTitle',
  355. align: 'center',
  356. key: 'orderTitle',
  357. scopedSlots: { customRender: 'orderTitle' }
  358. },
  359. {
  360. title: '订单编号',
  361. dataIndex: 'id',
  362. align: 'center',
  363. key: 'tag',
  364. scopedSlots: { customRender: 'id' }
  365. },
  366. {
  367. title: '订单发起人',
  368. dataIndex: 'createByName',
  369. align: 'center',
  370. key: 'createByName',
  371. scopedSlots: { customRender: 'createByName' }
  372. },
  373. {
  374. title: '订单状态',
  375. dataIndex: 'orderStatus',
  376. align: 'center',
  377. key: 'orderStatus',
  378. scopedSlots: { customRender: 'orderStatus' }
  379. },
  380. {
  381. title: '更新时间',
  382. dataIndex: 'updateTime',
  383. align: 'center',
  384. key: 'updateTime',
  385. scopedSlots: { customRender: 'updateTime' }
  386. },
  387. {
  388. title: '操作',
  389. dataIndex: 'options',
  390. align: 'center',
  391. key: 'options',
  392. width:250,
  393. scopedSlots: { customRender: 'options' }
  394. },
  395. ]
  396. export default {
  397. name:'order-list',
  398. data() {
  399. const operatorPanes = [
  400. { title: '我发起的', content: '', key: 1 , },
  401. { title: '已完成的', content: '', key: 2 ,},
  402. { title: '被驳回的', content: '', key: 3 , },
  403. ];
  404. const designLeaderPanes=[
  405. { title: '全部订单', content: '', key: 4 , },
  406. { title: '待确定的', content: '', key: 1 , },
  407. { title: '已完成的', content: '', key: 3 ,},
  408. ]
  409. return {
  410. orderTitle:'',
  411. createByName:'',
  412. id:'',
  413. loadingElse:false,
  414. videoRejectVisiable:false,
  415. scriptRejectVisiable:false,
  416. operatorPanes,
  417. designLeaderPanes,
  418. userInfo:{},
  419. roleCode:'',
  420. panes:[],
  421. activeKey: '4',
  422. orderInfo:{ },
  423. columns:[...listColumns],
  424. data:[],
  425. loading:false,
  426. ipagination: {
  427. current: 1,
  428. pageSize: 10,
  429. // pageSizeOptions: ['10', '20', '30'],
  430. showTotal: (total, range) => {
  431. return range[0] + "-" + range[1] + " 共" + total + "条"
  432. },
  433. showQuickJumper: true,
  434. showSizeChanger:true,
  435. pageSizeOptions: ['10', '30', '50'],
  436. total: 0,
  437. onChange: (current, pageSize) => {
  438. // 切换分页时的回调,
  439. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  440. this.ipagination.current = current;
  441. this.ipagination.pageSize= pageSize;
  442. }
  443. },
  444. // 订单进度
  445. orderName:'',
  446. orderId:'',
  447. orderStatus:'',
  448. orderParticipants:"",
  449. orderSponsor:'',
  450. visible: false,
  451. placement: 'right',
  452. currentMaterial:{},
  453. sizeType:[],
  454. size: "4",
  455. }
  456. },
  457. methods: {
  458. goPlantForm(){
  459. if(this.$parent.role=='operator'){
  460. this.$parent.currentTabComponent='operatorPlatform'
  461. }else if(this.$parent.role=='designLeader'){
  462. this.$parent.currentTabComponent='designleaderPlatform'
  463. }else if(this.$parent.role=='design'){
  464. this.$parent.currentTabComponent='designPlatform'
  465. }
  466. },
  467. tabChange(key){
  468. console.log(key)
  469. this.tableHttp(key)
  470. },
  471. handleChange(value) {
  472. console.log(`selected ${value}`);
  473. },
  474. filterOption(input, option) {
  475. return (
  476. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  477. );
  478. },
  479. // 查看详情
  480. viewDetails(record){
  481. console.log(record)
  482. // this.$router.push(`/workBench/orderDetail?orderId=${record.id}`)
  483. this.$parent.currentTabComponent='orderDetail';
  484. this.$parent.orderId=record.id
  485. },
  486. // 撤回订单
  487. withdrawOrder(){
  488. },
  489. // 更多操作
  490. handleMenuClick(e) {
  491. console.log('click', e);
  492. },
  493. // 催一下
  494. hurryUp(record){
  495. console.log(record)
  496. },
  497. // 验收
  498. checkAccept(record){
  499. console.log(record)
  500. },
  501. onClose() {
  502. this.visible = false;
  503. },
  504. // 上传素材
  505. uploadMaterial(){
  506. },
  507. sort(pagination, filters, sorter, { currentDataSource }){
  508. this.ipagination.current=pagination.current;
  509. this.ipagination.pageSize=pagination.pageSize;
  510. this.tableHttp(this.activeKey)
  511. },
  512. search(){
  513. this.tableHttp(this.activeKey)
  514. },
  515. reset(){
  516. this.orderTitle='';
  517. this.id='';
  518. this.createByName='';
  519. },
  520. tableHttp(type){
  521. let params=this.handlerParams(type)
  522. this.loading=true;
  523. if(this.id){
  524. params.id=this.id
  525. }
  526. if(this.orderTitle){
  527. params.orderTitle=this.orderTitle
  528. }
  529. if(this.createByName){
  530. params.createByName=this.createByName
  531. }
  532. params={
  533. ...params,
  534. pageNo:this.ipagination.current,
  535. pageSize:this.ipagination.pageSize
  536. }
  537. getAction('/platform/order/listByCreatorOrDesignLeader',params).then(res=>{
  538. console.log(res);
  539. this.loading=false;
  540. if(res.success){
  541. this.data=res.result.list;
  542. this.ipagination.total=res.result.total;
  543. }
  544. })
  545. },
  546. handlerParams(status){
  547. if(this.$parent.role=='operator'){
  548. if(status==1){
  549. return {
  550. createBy:this.userInfo.id
  551. }
  552. }else if(status==2){
  553. return {
  554. orderStatus:3,
  555. createBy:this.userInfo.id
  556. }
  557. }else if(status==3){
  558. return {
  559. orderStatus:2,
  560. createBy:this.userInfo.id
  561. }
  562. }
  563. }else if(this.$parent.role=='designLeader'){
  564. if(status==1){
  565. return {
  566. orderStatus:0,
  567. design:this.userInfo.id
  568. }
  569. }else if(status==2){
  570. return {
  571. orderStatus:1,
  572. design:this.userInfo.id
  573. }
  574. }else if(status==3){
  575. return {
  576. orderStatus:3,
  577. design:this.userInfo.id
  578. }
  579. }else if(status==4){
  580. return {
  581. design:this.userInfo.id
  582. }
  583. }
  584. }
  585. },
  586. handlerParamsRole(role){
  587. if(this.$parent.role=='operator'){
  588. this.panes=this.operatorPanes
  589. }else if(this.$parent.role=='designLeader'){
  590. this.panes=this.designLeaderPanes
  591. }
  592. }
  593. },
  594. mounted(){
  595. let userInfo=localStorage.getItem('pro__Login_Userinfo');
  596. if(userInfo){
  597. this.userInfo=JSON.parse(userInfo).value
  598. }
  599. this.roleCode=localStorage.getItem('roleCode')
  600. console.log(this.$parent.orderStatus)
  601. if(this.$parent.role=='operator'){
  602. this.panes=this.operatorPanes
  603. }else if(this.$parent.role=='designLeader'){
  604. this.panes=this.designLeaderPanes
  605. }
  606. this.activeKey=this.$parent.orderStatus
  607. this.tableHttp(this.$parent.orderStatus)
  608. },
  609. filters:{
  610. handleOrderStatus(val){
  611. let text
  612. switch (val) {
  613. case 0:
  614. text='待接单'
  615. break;
  616. case 1:
  617. text='制作中'
  618. break;
  619. case 2:
  620. text='已驳回'
  621. break;
  622. case 3:
  623. text='已完成'
  624. break;
  625. case -1:
  626. text='已撤回'
  627. break;
  628. default:
  629. text='出错'
  630. break;
  631. }
  632. return text
  633. }
  634. },
  635. activated() {
  636. if(this.$parent.role=='operator'){
  637. this.panes=this.operatorPanes
  638. }else if(this.$parent.role=='designLeader'){
  639. this.panes=this.designLeaderPanes
  640. }
  641. this.activeKey=this.$parent.orderStatus
  642. this.tableHttp(this.$parent.orderStatus)
  643. },
  644. }
  645. </script>