queryChild.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <a-select
  3. show-search
  4. label-in-value
  5. :value="dealerName"
  6. placeholder="请选择下级"
  7. style="width: 100%"
  8. :filter-option="false"
  9. :not-found-content="fetching ? undefined : null"
  10. @search="fetchUser"
  11. @change="handleChange"
  12. >
  13. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  14. <a-select-option v-for="item in data" :key="item.dealerSn" :value="item.dealerSn">
  15. {{ item.dealerName }}
  16. </a-select-option>
  17. </a-select>
  18. </template>
  19. <script>
  20. import debounce from 'lodash/debounce'
  21. import { dealerRelationList } from '@/api/dealerRelation'
  22. export default {
  23. props: {
  24. dealerLevelList: {
  25. type: Array,
  26. default: function () {
  27. return []
  28. }
  29. }
  30. },
  31. data () {
  32. this.lastFetchId = 0
  33. this.fetchUser = debounce(this.fetchUser, 800)
  34. return {
  35. data: [],
  36. dealerName: [],
  37. fetching: false
  38. }
  39. },
  40. methods: {
  41. fetchUser (dealerName) {
  42. console.log('fetching user', dealerName)
  43. if (dealerName == '') return
  44. this.lastFetchId += 1
  45. const fetchId = this.lastFetchId
  46. this.data = []
  47. this.fetching = true
  48. dealerRelationList({ 'dealerName': dealerName, 'dealerLevelList': this.dealerLevelList, pageNo: 1, pageSize: 1000 }).then(res => {
  49. if (fetchId !== this.lastFetchId) {
  50. return
  51. }
  52. this.data = res.data.list || []
  53. this.fetching = false
  54. })
  55. },
  56. handleChange (value) {
  57. Object.assign(this, {
  58. dealerName: value,
  59. data: [],
  60. fetching: false
  61. })
  62. this.$emit('change', value)
  63. },
  64. resetForm () {
  65. this.dealerName = []
  66. }
  67. }
  68. }
  69. </script>