cleanModal.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <div>
  3. <a-modal title="确认清运" :footer="null" v-model="isShow" @cancel="cancel" centered>
  4. <a-form-model ref="ruleForm" :model="queryParam" :label-col="{span:5}" :wrapper-col="{span:17}">
  5. <a-form-model-item label="清运司机">
  6. {{ driverName }}
  7. </a-form-model-item>
  8. <a-form-model-item label="备注">
  9. <a-textarea
  10. :maxLength="500"
  11. id="cleanModal-remarks"
  12. v-model="queryParam.remarks"
  13. style="min-height: 60px;"
  14. placeholder="请输入备注(最多500个字符)"
  15. autoSize />
  16. </a-form-model-item>
  17. <a-form-model-item :wrapper-col="{ span: 24, offset: 8 }">
  18. <a-button type="primary" @click="handleSubmit" id="cleanModal-handleSubmit":style="{ marginRight: '15px' }">
  19. 保存
  20. </a-button>
  21. <a-button :style="{ marginLeft: '15px' }" id="cleanModal-cancel" @click="cancel" >
  22. 取消
  23. </a-button>
  24. </a-form-model-item>
  25. </a-form-model>
  26. </a-modal>
  27. </div>
  28. </template>
  29. <script>
  30. import { findDriverName, cleanByDevice } from '@/api/cleanManage.js'
  31. export default {
  32. name: 'CleanModal',
  33. props: {
  34. openModal: {
  35. type: Boolean,
  36. default: false
  37. },
  38. cleanStationDeviceNo: {
  39. type: [Number, String],
  40. default: ''
  41. },
  42. dirverUserId: {
  43. type: [Number, String],
  44. default: ''
  45. }
  46. },
  47. data () {
  48. return {
  49. optionData: [], // 司机列表数据
  50. isShow: this.openModal,
  51. queryParam: {
  52. remark: ''
  53. },
  54. driverName: ''
  55. }
  56. },
  57. methods: {
  58. filterOption (input, option) {
  59. return (
  60. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  61. )
  62. },
  63. // 司机数据
  64. getDriverName () {
  65. findDriverName({ id: this.dirverUserId }).then(res => {
  66. if (res.status == 200) {
  67. console.log(res)
  68. this.driverName = res.data.name
  69. } else {
  70. this.driverName = ''
  71. }
  72. })
  73. },
  74. // 保存
  75. handleSubmit () {
  76. this.$refs.ruleForm.validate(valid => {
  77. const _this = this
  78. if (valid) {
  79. const params = {
  80. cleanStationDeviceNo: this.cleanStationDeviceNo,
  81. remarks: this.queryParam.remarks
  82. }
  83. cleanByDevice(params).then(res => {
  84. if (res.status == 200) {
  85. _this.$message.success(res.message)
  86. _this.$emit('refresh')
  87. setTimeout(function () {
  88. _this.cancel()
  89. }, 300)
  90. }
  91. })
  92. }
  93. })
  94. },
  95. // 取消
  96. cancel (e) {
  97. this.clear()
  98. this.$emit('close')
  99. },
  100. // 重置input框
  101. clear () {
  102. this.$refs.ruleForm.resetFields()
  103. this.queryParam = {
  104. dirverUserId: undefined,
  105. remarks: ''
  106. }
  107. }
  108. },
  109. watch: {
  110. openModal (newValue, oldValue) {
  111. this.isShow = newValue
  112. },
  113. isShow (val) {
  114. if (!val) {
  115. this.$emit('close')
  116. } else {
  117. this.$nextTick(() => {
  118. this.$refs.ruleForm.resetFields()
  119. })
  120. }
  121. },
  122. // cleanStationDeviceNo (newValue, oldValue) {
  123. // console.log(this.isShow, newValue)
  124. // if (this.isShow && newValue) {
  125. // // this.getDriverName(this.dirverUserId)
  126. // }
  127. // },
  128. dirverUserId (newValue, oldValue) {
  129. console.log(this.isShow, newValue)
  130. if (this.isShow && newValue) {
  131. this.getDriverName()
  132. }
  133. }
  134. }
  135. }
  136. </script>
  137. <style>
  138. </style>