queryChild.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <template>
  2. <a-select
  3. show-search
  4. label-in-value
  5. :value="dealerName"
  6. :placeholder="placeholderInfo"
  7. style="width: 100%"
  8. :filter-option="false"
  9. :not-found-content="fetching ? undefined : null"
  10. @search="fetchUser"
  11. @change="handleChange"
  12. allowClear
  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">
  16. {{ item.dealerName }}
  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. placeholderInfo: {
  32. type: String,
  33. default: '请输入上级名称搜索'
  34. },
  35. isShowSn: {
  36. type: String,
  37. default: null
  38. }
  39. },
  40. data () {
  41. this.lastFetchId = 0
  42. this.fetchUser = debounce(this.fetchUser, 800)
  43. return {
  44. data: [],
  45. dealerName: [],
  46. fetching: false,
  47. itemSn: null
  48. }
  49. },
  50. methods: {
  51. fetchUser (dealerName) {
  52. console.log('fetching user', dealerName)
  53. if (dealerName == '') return
  54. this.lastFetchId += 1
  55. const fetchId = this.lastFetchId
  56. this.data = []
  57. this.fetching = true
  58. const params = { 'dealerLevelList': this.dealerLevelList, pageNo: 1, pageSize: 20 }
  59. if (this.itemSn && !dealerName) {
  60. params.dealerSn = this.itemSn
  61. } else {
  62. params.dealerName = dealerName
  63. }
  64. dealerRelationList(params).then(res => {
  65. if (fetchId !== this.lastFetchId) {
  66. return
  67. }
  68. if (res.data && res.data.list && res.data.list.length > 0) {
  69. if (!this.isShowSn) {
  70. this.data = res.data.list
  71. } else {
  72. const newData = res.data.list.filter(con => con.dealerSn != this.isShowSn)
  73. this.data = newData
  74. }
  75. } else {
  76. this.data = []
  77. }
  78. this.fetching = false
  79. })
  80. },
  81. handleChange (value) {
  82. console.log(value)
  83. Object.assign(this, {
  84. dealerName: value,
  85. data: [],
  86. fetching: false
  87. })
  88. if (!value) {
  89. this.itemSn = null
  90. }
  91. this.$emit('change', value)
  92. },
  93. setVal (value, label) {
  94. if (value) {
  95. this.itemSn = value
  96. this.fetchUser()
  97. this.handleChange({ key: this.itemSn, label: label })
  98. }
  99. },
  100. resetForm () {
  101. this.itemSn = null
  102. this.dealerName = []
  103. }
  104. }
  105. }
  106. </script>