index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647
  1. <template>
  2. <zj-page-container>
  3. <zj-page-fill class="neibuview">
  4. <template v-if="payData.length">
  5. <zj-form-container>
  6. <template v-for="(item, index) in payData">
  7. <zj-form-module
  8. :title="'支付费用' + (index + 1)"
  9. :form-data="payData[index]"
  10. :form-items="
  11. [formItemsL1, formItems(item)][!!~[1, 2, 3].indexOf(workOrderType) ? 0 : workOrderType == 4 ? 1 : 0]
  12. "
  13. >
  14. <div v-if="item.examineStatus === 'FAIL'" style="text-align: right">
  15. <el-button size="mini" type="danger" plain @click="enginMaterialCancelFun(item)">取消申请</el-button>
  16. </div>
  17. </zj-form-module>
  18. </template>
  19. </zj-form-container>
  20. </template>
  21. <el-empty v-else description="暂时没有支付信息"></el-empty>
  22. </zj-page-fill>
  23. </zj-page-container>
  24. </template>
  25. <script>
  26. import { listPageV2 } from '@/api/workOrder/appraise'
  27. import { tableDataParsing } from '@/utils/common.js'
  28. import { changeOrderGetOrderList, enginMaterialDetailWorker, enginMaterialCancel } from '@/api/workOrderPool.js'
  29. export default {
  30. props: {
  31. id: {
  32. type: [String, Number],
  33. default: null
  34. },
  35. workOrderType: {
  36. type: Number,
  37. default: 1 // 1普通工单, 4维保工单
  38. }
  39. },
  40. data() {
  41. return {
  42. payData: []
  43. }
  44. },
  45. watch: {
  46. id: {
  47. handler(newVal, oldVal) {
  48. this.getxiangqing()
  49. },
  50. deep: true,
  51. immediate: true
  52. }
  53. },
  54. computed: {
  55. formItemsL1() {
  56. return [
  57. {
  58. md: 24,
  59. name: 'slot-component',
  60. formItemAttributes: {
  61. label: '维修费用信息'
  62. },
  63. render: (h, { props, onInput }) => {
  64. var { formData } = props
  65. return (
  66. <el-descriptions
  67. border
  68. title=""
  69. column={3}
  70. colon={false}
  71. labelStyle={{ width: '11%' }}
  72. contentStyle={{ width: '22.3%' }}
  73. >
  74. <el-descriptions-item label="网点名称">{formData.websitName}</el-descriptions-item>
  75. <el-descriptions-item label="工单号">{formData.workerOrderId}</el-descriptions-item>
  76. <el-descriptions-item label="工程师名称">{formData.workerName}</el-descriptions-item>
  77. <el-descriptions-item label="工程师联系电话">{formData.workerMobile}</el-descriptions-item>
  78. <el-descriptions-item label="支付方式">
  79. {{ WECHAT: '微信支付', LINE: '线下支付', EXAMINE: '审批' }[formData.payType] || '微信支付'}
  80. </el-descriptions-item>
  81. <el-descriptions-item label="客户名称">{formData.pgOrderBase.userName}</el-descriptions-item>
  82. <el-descriptions-item label="电话号码">{formData.userMobile}</el-descriptions-item>
  83. <el-descriptions-item label="支付状态">
  84. {{ CANCEL: '取消', WAIT: '待支付', PAID: '已支付' }[formData.payStatus]}
  85. </el-descriptions-item>
  86. <el-descriptions-item label="支付总金额">{formData.totalAmount}</el-descriptions-item>
  87. {!!~[1, 2, 3].indexOf(this?.workOrderType) ? (
  88. <el-descriptions-item label="总手续费">{formData.commissionAmount}</el-descriptions-item>
  89. ) : null}
  90. <el-descriptions-item label="支付时间">{formData.payTime}</el-descriptions-item>
  91. <el-descriptions-item label=""></el-descriptions-item>
  92. {this?.workOrderType == 4
  93. ? [
  94. <el-descriptions-item label=""></el-descriptions-item>,
  95. <el-descriptions-item label="审批状态">
  96. {{ WAIT: '待审', OK: '审批', FAIL: '驳回', NO: '取消' }[formData.examineStatus] || ''}
  97. </el-descriptions-item>,
  98. <el-descriptions-item label="审批人">{formData.examineName}</el-descriptions-item>,
  99. <el-descriptions-item label="审批时间">{formData.examineTime}</el-descriptions-item>
  100. ]
  101. : null}
  102. </el-descriptions>
  103. )
  104. }
  105. },
  106. {
  107. md: 24,
  108. name: 'slot-component',
  109. formItemAttributes: {
  110. label: '支付明细'
  111. },
  112. render: (h, { props, onInput }) => {
  113. var { formData } = props
  114. return (
  115. <zj-table
  116. columns={[
  117. {
  118. columnAttributes: {
  119. label: '费用名称',
  120. prop: 'goodsName'
  121. }
  122. },
  123. {
  124. columnAttributes: {
  125. label: '单价',
  126. prop: 'goodsAmount'
  127. }
  128. },
  129. {
  130. columnAttributes: {
  131. label: '数量',
  132. prop: 'num'
  133. }
  134. },
  135. {
  136. columnAttributes: {
  137. label: '费用金额',
  138. prop: 'totalAmount'
  139. }
  140. },
  141. ...(() => {
  142. if (!!~[1, 2, 3].indexOf(this?.workOrderType)) {
  143. return [
  144. {
  145. columnAttributes: {
  146. label: '师傅分账金额',
  147. prop: 'workerAmount'
  148. }
  149. },
  150. {
  151. columnAttributes: {
  152. label: '师傅手续费',
  153. prop: 'workerProceAmount'
  154. }
  155. },
  156. {
  157. columnAttributes: {
  158. label: '网点分账金额',
  159. prop: 'websitAmount'
  160. }
  161. },
  162. {
  163. columnAttributes: {
  164. label: '网点手续费',
  165. prop: 'websitProceAmount'
  166. }
  167. }
  168. ]
  169. }
  170. return []
  171. })()
  172. ]}
  173. table-data={
  174. [formData.workerOrderItems, formData.rpMaterialOrderItems][
  175. !!~[1, 2, 3].indexOf(this?.workOrderType) ? 0 : this?.workOrderType == 4 ? 1 : 0
  176. ]
  177. }
  178. />
  179. )
  180. }
  181. },
  182. {
  183. name: 'el-input',
  184. md: 24,
  185. attributes: { disabled: true, type: 'textarea', placeholder: '' },
  186. formItemAttributes: { label: '备注', prop: 'remark' }
  187. },
  188. {
  189. md: 24,
  190. name: 'slot-component',
  191. formItemAttributes: {
  192. label: '交易记录'
  193. },
  194. render: (h, { props, onInput }) => {
  195. var { formData } = props
  196. return (
  197. <zj-table
  198. columns={[
  199. {
  200. columnAttributes: {
  201. label: 'id',
  202. prop: 'orderId'
  203. }
  204. },
  205. {
  206. columnAttributes: {
  207. label: '交易类型',
  208. prop: 'goodsType'
  209. },
  210. render: (h, { row }) => {
  211. return <div>{{ M: '辅材', P: '配件' }[row.goodsType]}</div>
  212. }
  213. },
  214. {
  215. columnAttributes: {
  216. label: '交易金额',
  217. prop: 'totalAmount'
  218. }
  219. },
  220. {
  221. columnAttributes: {
  222. label: '交易状态',
  223. prop: 'payStatus'
  224. },
  225. render: (h, { row }) => {
  226. return <div>{{ CANCEL: '取消', WAIT: '待支付', PAID: '已支付' }[row.payStatus]}</div>
  227. }
  228. },
  229. {
  230. columnAttributes: {
  231. label: '交易时间',
  232. prop: 'payTime'
  233. }
  234. },
  235. {
  236. columnAttributes: {
  237. label: '创建时间',
  238. prop: 'createTime'
  239. }
  240. }
  241. ]}
  242. table-data={[formData]}
  243. />
  244. )
  245. }
  246. },
  247. {
  248. md: 24,
  249. name: 'slot-component',
  250. formItemAttributes: {
  251. label: '配件信息'
  252. },
  253. render: (h, { props, onInput }) => {
  254. var { formData } = props
  255. return (
  256. <zj-table
  257. columns={[
  258. {
  259. columnAttributes: {
  260. label: '是否质量问题',
  261. prop: 'repairFlag'
  262. },
  263. render: (h, { row }) => {
  264. return <div>{{ INNER: '保内', OUTSIDE: '保外' }[row.repairFlag]}</div>
  265. }
  266. },
  267. {
  268. columnAttributes: {
  269. label: '旧配件编号',
  270. prop: 'oldPartsNumber'
  271. }
  272. },
  273. {
  274. columnAttributes: {
  275. label: '旧配件名称',
  276. prop: 'oldPartsName'
  277. }
  278. },
  279. {
  280. columnAttributes: {
  281. label: '新配件编号',
  282. prop: 'goodsCode'
  283. }
  284. },
  285. {
  286. columnAttributes: {
  287. label: '新配件名称',
  288. prop: 'goodsName'
  289. }
  290. }
  291. ]}
  292. table-data={formData.workerOrderItems || []}
  293. />
  294. )
  295. }
  296. }
  297. ]
  298. }
  299. },
  300. methods: {
  301. formItems(itemData) {
  302. return [
  303. {
  304. md: 24,
  305. name: 'slot-component',
  306. formItemAttributes: {
  307. label: '基本信息'
  308. },
  309. render: (h, { props, onInput }) => {
  310. var { formData } = props
  311. return (
  312. <el-descriptions
  313. border
  314. title=""
  315. column={2}
  316. colon={false}
  317. labelStyle={{ width: '13%' }}
  318. contentStyle={{ width: '37%' }}
  319. >
  320. <el-descriptions-item label="所属商户">{formData.companyWechatName}</el-descriptions-item>
  321. <el-descriptions-item label="申请单号">{formData.orderId}</el-descriptions-item>
  322. <el-descriptions-item label="项目名称">{formData.rpProjectRepairName}</el-descriptions-item>
  323. <el-descriptions-item label="工单单号">{formData.workerOrderId}</el-descriptions-item>
  324. <el-descriptions-item label="负责人">{formData.userName}</el-descriptions-item>
  325. <el-descriptions-item label="联系电话">{formData.userMobile}</el-descriptions-item>
  326. <el-descriptions-item label="项目地址">{formData.pgOrderBase.address}</el-descriptions-item>
  327. <el-descriptions-item label="创单人">{formData.pgOrderBase.createBy}</el-descriptions-item>
  328. <el-descriptions-item label="创单人电话">{formData.pgOrderBase.createMobile}</el-descriptions-item>
  329. <el-descriptions-item label="创单时间">{formData.pgOrderBase.createTime}</el-descriptions-item>
  330. <el-descriptions-item label="工单类型">{formData.orderSmallTypeText}</el-descriptions-item>
  331. <el-descriptions-item label="网点名称">{formData.websitName}</el-descriptions-item>
  332. <el-descriptions-item label="申请人">{formData.workerName}</el-descriptions-item>
  333. <el-descriptions-item label="联系电话">{formData.workerMobile}</el-descriptions-item>
  334. <el-descriptions-item label="申请时间">{formData.createTime}</el-descriptions-item>
  335. <el-descriptions-item label="包含全部费用">
  336. {{ YES: '是', NO: '否' }[formData.isAllFee]}
  337. </el-descriptions-item>
  338. {formData.isAllFee == 'NO' || formData.payType == 'WECHAT' || formData.payType == 'LINE' ? (
  339. <el-descriptions-item label="费用支付方式">
  340. {{ EXAMINE: '审批后结算', SITE: '现场支付' }[formData.feePayMethod]}
  341. </el-descriptions-item>
  342. ) : null}
  343. {(formData.isAllFee == 'NO' || formData.payType == 'WECHAT') && formData.feePayMethod == 'EXAMINE'
  344. ? [
  345. <el-descriptions-item label="费用单状态">
  346. {
  347. { WAIT: '待审', OK: '通过', FAIL: '驳回', PAID: '现场支付', NO: '取消', NO_PAID: '未支付' }[
  348. formData.examineStatus
  349. ]
  350. }
  351. </el-descriptions-item>,
  352. <el-descriptions-item label="审批人">{formData.examineName}</el-descriptions-item>,
  353. <el-descriptions-item label="审批时间">{formData.examineTime}</el-descriptions-item>,
  354. <el-descriptions-item label="取消人">{formData.cancelName}</el-descriptions-item>,
  355. <el-descriptions-item label="取消时间">{formData.cancelTime}</el-descriptions-item>
  356. ]
  357. : null}
  358. {formData.payType == 'LINE' && formData.feePayMethod == 'EXAMINE'
  359. ? [
  360. <el-descriptions-item label="结算状态">
  361. {{ WAIT: '待结算', OVER: '已结算' }[formData.status]}
  362. </el-descriptions-item>,
  363. <el-descriptions-item label="结算人">{formData.settleName}</el-descriptions-item>,
  364. <el-descriptions-item label="结算时间">{formData.settleTime}</el-descriptions-item>
  365. ]
  366. : null}
  367. </el-descriptions>
  368. )
  369. }
  370. },
  371. {
  372. md: 24,
  373. name: 'slot-component',
  374. formItemAttributes: {
  375. label: '费用明细'
  376. },
  377. render: (h, { props, onInput }) => {
  378. var { formData } = props
  379. return (
  380. <zj-table
  381. columns={[
  382. {
  383. columnAttributes: {
  384. label: '费用名称',
  385. prop: 'goodsName'
  386. }
  387. },
  388. {
  389. columnAttributes: {
  390. label: '费用类型',
  391. prop: 'chargeType'
  392. },
  393. render: (h, { row, column, index }) => {
  394. return (
  395. <div style="padding-left:10px">
  396. {{ MCC: '辅材物料', ACC: '配件物料', SERV: '服务收费' }[row.chargeType]}
  397. </div>
  398. )
  399. }
  400. },
  401. {
  402. columnAttributes: {
  403. label: '单价',
  404. prop: 'goodsAmount'
  405. }
  406. },
  407. {
  408. columnAttributes: {
  409. label: '数量',
  410. prop: 'num'
  411. }
  412. },
  413. {
  414. columnAttributes: {
  415. label: '费用金额',
  416. prop: 'totalAmount'
  417. }
  418. }
  419. ]}
  420. table-data={formData.rpMaterialOrderItems}
  421. />
  422. )
  423. }
  424. },
  425. {
  426. md: 8,
  427. isShow: itemData.goodsType == 'M',
  428. name: 'slot-component',
  429. formItemAttributes: {
  430. label: '辅材费用合计'
  431. },
  432. render: (h, { props, onInput }) => {
  433. var { formData } = props
  434. return (
  435. <span>
  436. {[
  437. 0,
  438. 0,
  439. 0,
  440. ...formData.rpMaterialOrderItems
  441. .filter(item => item.chargeType == 'MCC')
  442. .map(item => item.totalAmount)
  443. ]
  444. .reduce(function (prev, curr, idx, arr) {
  445. return prev + curr
  446. })
  447. .toFixed(2)}
  448. </span>
  449. )
  450. }
  451. },
  452. {
  453. md: 8,
  454. isShow: itemData.goodsType == 'P',
  455. name: 'slot-component',
  456. formItemAttributes: {
  457. label: '配件费用合计'
  458. },
  459. render: (h, { props, onInput }) => {
  460. var { formData } = props
  461. return (
  462. <span>
  463. {[
  464. 0,
  465. 0,
  466. 0,
  467. ...formData.rpMaterialOrderItems
  468. .filter(item => item.chargeType == 'ACC')
  469. .map(item => item.totalAmount)
  470. ]
  471. .reduce(function (prev, curr, idx, arr) {
  472. return prev + curr
  473. })
  474. .toFixed(2)}
  475. </span>
  476. )
  477. }
  478. },
  479. {
  480. md: 8,
  481. name: 'slot-component',
  482. formItemAttributes: {
  483. label: '服务收费费用合计'
  484. },
  485. render: (h, { props, onInput }) => {
  486. var { formData } = props
  487. return (
  488. <span>
  489. {[
  490. 0,
  491. 0,
  492. 0,
  493. ...formData.rpMaterialOrderItems
  494. .filter(item => item.chargeType == 'SERV')
  495. .map(item => item.totalAmount)
  496. ]
  497. .reduce(function (prev, curr, idx, arr) {
  498. return prev + curr
  499. })
  500. .toFixed(2)}
  501. </span>
  502. )
  503. }
  504. },
  505. {
  506. md: 8,
  507. name: 'slot-component',
  508. formItemAttributes: {
  509. label: '总金额'
  510. },
  511. render: (h, { props, onInput }) => {
  512. var { formData } = props
  513. return (
  514. <span>
  515. {[0, 0, 0, ...formData.rpMaterialOrderItems.map(item => item.totalAmount)]
  516. .reduce(function (prev, curr, idx, arr) {
  517. return prev + curr
  518. })
  519. .toFixed(2)}
  520. </span>
  521. )
  522. }
  523. },
  524. {
  525. name: 'el-input',
  526. md: 24,
  527. attributes: { disabled: true, type: 'textarea', placeholder: '' },
  528. formItemAttributes: { label: '申请备注', prop: 'remark' }
  529. },
  530. {
  531. md: 24,
  532. isShow: itemData.payType == 'WECHAT',
  533. name: 'slot-component',
  534. formItemAttributes: {
  535. label: '交易记录'
  536. },
  537. render: (h, { props, onInput }) => {
  538. var { formData } = props
  539. return (
  540. <zj-table
  541. columns={[
  542. {
  543. columnAttributes: {
  544. label: 'id',
  545. prop: 'orderId'
  546. }
  547. },
  548. {
  549. columnAttributes: {
  550. label: '交易类型',
  551. prop: 'goodsType'
  552. },
  553. render: (h, { row }) => {
  554. return <div>{{ M: '辅材', P: '配件' }[row.goodsType]}</div>
  555. }
  556. },
  557. {
  558. columnAttributes: {
  559. label: '交易金额',
  560. prop: 'totalAmount'
  561. }
  562. },
  563. {
  564. columnAttributes: {
  565. label: '交易状态',
  566. prop: 'payStatus'
  567. },
  568. render: (h, { row }) => {
  569. return <div>{{ CANCEL: '取消', WAIT: '待支付', PAID: '已支付' }[row.payStatus]}</div>
  570. }
  571. },
  572. {
  573. columnAttributes: {
  574. label: '交易时间',
  575. prop: 'payTime'
  576. }
  577. },
  578. {
  579. columnAttributes: {
  580. label: '创建时间',
  581. prop: 'createTime'
  582. }
  583. }
  584. ]}
  585. table-data={[formData]}
  586. />
  587. )
  588. }
  589. }
  590. ]
  591. },
  592. getxiangqing() {
  593. if (this.id) {
  594. if (!!~[1, 2, 3].indexOf(this?.workOrderType)) {
  595. changeOrderGetOrderList({
  596. id: this.id
  597. }).then(res => {
  598. this.payData = res.data
  599. })
  600. } else if (this?.workOrderType == 4) {
  601. enginMaterialDetailWorker({
  602. workerOrderId: this.id
  603. }).then(res => {
  604. this.payData = res.data
  605. })
  606. }
  607. }
  608. },
  609. enginMaterialCancelFun(item) {
  610. this.$confirm('是否确认取消申请?', '提示', {
  611. confirmButtonText: '确定',
  612. cancelButtonText: '取消',
  613. type: 'warning'
  614. })
  615. .then(() => {
  616. enginMaterialCancel({
  617. id: item.orderId
  618. }).then(res => {
  619. this.getxiangqing()
  620. })
  621. })
  622. .catch(() => {})
  623. }
  624. }
  625. }
  626. </script>
  627. <style lang="scss" scoped>
  628. .neibuview {
  629. box-sizing: border-box;
  630. padding-left: 16px;
  631. ::v-deep & > .zj-page-fill-scroll {
  632. box-sizing: border-box;
  633. padding-right: 16px;
  634. & > div:nth-child(1) {
  635. margin-top: 20px;
  636. }
  637. }
  638. }
  639. </style>