netWorkCleanModal.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <template>
  2. <a-modal
  3. title="清运详情"
  4. :footer="null"
  5. v-model="isShow"
  6. @cancel="isShow=false"
  7. :centered="true"
  8. width="60%">
  9. <s-table
  10. ref="table"
  11. :rowKey="(record) => record.id"
  12. :columns="columns"
  13. :data="loadData"
  14. bordered
  15. :scroll="{ y: 400 }">
  16. </s-table>
  17. </a-modal>
  18. </template>
  19. <script>
  20. import { STable } from '@/components'
  21. import { networkDetail } from '@/api/cleanManage.js'
  22. import moment from 'moment'
  23. export default {
  24. name: 'CleanDetailModal',
  25. components: {
  26. STable
  27. },
  28. props: {
  29. visible: {
  30. type: Boolean,
  31. default: false
  32. },
  33. stationNo: {
  34. type: [Number, String],
  35. default: ''
  36. },
  37. searchDate: {
  38. type: Array,
  39. default: function () {
  40. return []
  41. }
  42. }
  43. },
  44. data () {
  45. return {
  46. isShow: this.visible, // 弹窗的状态
  47. columns: [{ title: '序号', dataIndex: 'no', width: 60, align: 'center' },
  48. { title: '清运时间', dataIndex: 'cleanTime', width: 100, align: 'center' },
  49. { title: '设备编号', dataIndex: 'deviceNo', width: 100, align: 'center' },
  50. { title: '清运重量(kg)', dataIndex: 'cleanWeight', width: 100, align: 'center' },
  51. { title: '清运司机', dataIndex: 'driverName', width: 100, align: 'center' }],
  52. // 加载数据方法 必须为 Promise 对象
  53. loadData: parameter => {
  54. const searchDateModal = this.searchDate
  55. if (this.searchDate && this.searchDate.length) {
  56. searchDateModal.beginDate = moment(this.searchDate[0]).format('YYYY-MM-DD')
  57. searchDateModal.endDate = moment(this.searchDate[1]).format('YYYY-MM-DD')
  58. } else {
  59. searchDateModal.beginDate = null
  60. searchDateModal.endDate = null
  61. }
  62. const searchData = Object.assign(parameter, { stationNo: this.stationNo }, { beginDate: searchDateModal.beginDate }, { endDate: searchDateModal.endDate })
  63. console.log(searchData, '----------详情参数')
  64. return networkDetail(searchData).then(res => {
  65. if (res.status == 200) {
  66. const no = (res.data.pageNo - 1) * res.data.pageSize
  67. for (let i = 0; i < res.data.list.length; i++) {
  68. const _item = res.data.list[i]
  69. _item.no = no + i + 1
  70. if (_item.cleanWeight != null || 0) {
  71. _item.cleanWeight = (_item.cleanWeight / 1000).toFixed(2)
  72. }
  73. }
  74. return res.data
  75. }
  76. })
  77. }
  78. }
  79. },
  80. watch: {
  81. visible (newValue, oldValue) {
  82. this.isShow = newValue
  83. },
  84. isShow (newValue, oldValue) {
  85. if (!newValue) {
  86. this.$emit('close')
  87. }
  88. },
  89. stationNo (newValue, oldValue) {
  90. if (newValue && this.isShow) {
  91. this.$refs.table.refresh(true)
  92. }
  93. }
  94. }
  95. }
  96. </script>
  97. <style lang="less" scoped="scoped">
  98. .detail-item {
  99. text-align: center;
  100. margin: 10px 0;
  101. letter-spacing: 0.5px;
  102. }
  103. </style>