cleanDetailModal.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <a-modal title="清运详情" :footer="null" v-model="isShow" @cancel="cancel" centered>
  3. <a-spin :spinning="loading">
  4. <div class="detail-item" v-for="item in itemData" :key="item.index"><span>{{ item.rubbishTypeDictValue }}:</span>{{ (item.cleanWeight/1000).toFixed(3)/1 }} kg</div>
  5. <a-empty v-if="itemData.length == 0" style="text-align: center;" />
  6. </a-spin>
  7. </a-modal>
  8. </template>
  9. <script>
  10. import { getCleanDetails } from '@/api/cleanManage.js'
  11. export default {
  12. name: 'CleanDetailModal',
  13. props: {
  14. visible: {
  15. type: Boolean,
  16. default: false
  17. },
  18. deviceNo: {
  19. type: [Number, String],
  20. default: ''
  21. },
  22. cleanTime: {
  23. type: [Number, String],
  24. default: ''
  25. }
  26. },
  27. data () {
  28. return {
  29. isShow: this.visible,
  30. itemData: [],
  31. loading: false
  32. }
  33. },
  34. methods: {
  35. cancel (e) {
  36. this.$emit('close')
  37. },
  38. getDetailInfo () {
  39. this.loading = true
  40. getCleanDetails({ deviceNo: this.deviceNo, cleanDate: this.cleanTime }).then(res => {
  41. if (res.status == 200) {
  42. this.itemData = res.data || []
  43. console.log(this.itemData)
  44. }
  45. this.loading = false
  46. })
  47. }
  48. },
  49. watch: {
  50. visible (newValue, oldValue) {
  51. this.isShow = newValue
  52. },
  53. isShow (newValue, oldValue) {
  54. if (!newValue) {
  55. this.$emit('close')
  56. } else {
  57. this.getDetailInfo()
  58. }
  59. }
  60. }
  61. }
  62. </script>
  63. <style lang="less" scoped="scoped">
  64. .detail-item{
  65. margin:10px 0;
  66. letter-spacing: 0.5px;
  67. span{
  68. display: inline-block;
  69. text-align: right;
  70. width: 50%;
  71. font-weight:normal
  72. }
  73. }
  74. </style>