cleanModal.vue 3.8 KB

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