cleanDetailModal.vue 1.3 KB

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