cleanModal.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <div>
  3. <a-modal title="确认清运" :footer="null" v-model="isShow" @cancel="isShow=false" 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="stationNo">
  6. <a-select
  7. placeholder="请选择清运司机"
  8. allowClear
  9. v-model="queryParam.stationNo"
  10. :showSearch="true"
  11. option-filter-prop="children"
  12. :filter-option="filterOption">
  13. <a-select-option v-for="item in optionData" :key="item.stationNo" :value="item.stationNo">{{ 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 {
  38. stationList
  39. } from '@/api/releaseRecord.js'
  40. export default{
  41. name: 'cleanModal',
  42. props: {
  43. visible: {
  44. type: Boolean,
  45. default: false
  46. },
  47. id: {
  48. type: [Number, String],
  49. default: ''
  50. }
  51. },
  52. data(){
  53. return{
  54. optionData: [],
  55. isShow:this.visible,
  56. // form: this.$form.createForm(this, {
  57. // name: 'ruleForm'
  58. // }),
  59. // 查询参数
  60. queryParam: {
  61. stationNo: undefined,
  62. remarks: ''
  63. },
  64. rules:{stationNo:[{required: true,
  65. message: '请输入司机姓名',
  66. trigger: 'blur'}]}
  67. }
  68. },
  69. methods:{
  70. filterOption (input, option) {
  71. return (
  72. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  73. )
  74. },
  75. getStationList () {
  76. stationList().then(res => {
  77. if (res.status == 200) {
  78. this.optionData = res.data || []
  79. }
  80. })
  81. },
  82. // 保存
  83. handleSubmit(){
  84. this.$refs.ruleForm.validate(valid => {
  85. if (valid) {
  86. const params = JSON.parse(JSON.stringify(this.queryParam))
  87. console.log(params)
  88. // saveUserPower(formData).then(res => {
  89. // console.log(res, 'rrrrrrrrr')
  90. // if (res.status == 200) {
  91. // _this.$message.success(res.message)
  92. // _this.$emit('refresh')
  93. // setTimeout(function () {
  94. // _this.isshow = false
  95. // }, 300)
  96. // }
  97. // })
  98. }
  99. })
  100. },
  101. },
  102. watch: {
  103. visible (newValue, oldValue) {
  104. // this.getStationList()
  105. this.isShow = newValue
  106. },
  107. isShow (newValue, oldValue) {
  108. if (!newValue) {
  109. this.$emit('close')
  110. }else{
  111. // this.getStationList()
  112. }
  113. }
  114. }
  115. }
  116. </script>
  117. <style>
  118. </style>