queryChild.vue 2.0 KB

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