dealerSearchList.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <template>
  2. <a-select
  3. show-search
  4. label-in-value
  5. :size="size"
  6. :value="dealerName"
  7. mode="combobox"
  8. :placeholder="placeholder"
  9. style="width: 100%"
  10. :filter-option="false"
  11. :not-found-content="fetching ? undefined : null"
  12. :dropdownMatchSelectWidth="false"
  13. :defaultActiveFirstOption="false"
  14. @search="fetchUser"
  15. @change="handleChange"
  16. allowClear
  17. :disabled="disabled"
  18. >
  19. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  20. <a-select-option v-for="item in data" :key="item.dealerSn" :value="item.dealerName">
  21. {{ item.dealerName }}
  22. </a-select-option>
  23. </a-select>
  24. </template>
  25. <script>
  26. import debounce from 'lodash/debounce'
  27. import { dealerSubareaScopeList, dealerDetailBySn } from '@/api/dealer'
  28. export default {
  29. props: {
  30. size: {
  31. type: String,
  32. default: 'default'
  33. },
  34. placeholder: {
  35. type: String,
  36. default: '请输入名称搜索'
  37. },
  38. disabled: {
  39. type: Boolean,
  40. default: false
  41. }
  42. },
  43. data () {
  44. this.lastFetchId = 0
  45. this.fetchUser = debounce(this.fetchUser, 800)
  46. return {
  47. data: [],
  48. dealerName: [],
  49. fetching: false
  50. }
  51. },
  52. methods: {
  53. fetchUser (dealerName) {
  54. console.log('fetching user', dealerName)
  55. if (dealerName == '') return
  56. this.lastFetchId += 1
  57. const fetchId = this.lastFetchId
  58. this.data = []
  59. this.fetching = true
  60. dealerSubareaScopeList({ nameLike: dealerName.replace(/\s+/g, ''), pageNo: 1, pageSize: 20 }).then(res => {
  61. if (fetchId !== this.lastFetchId) {
  62. return
  63. }
  64. this.data = res.data && res.data.list ? res.data.list : []
  65. this.fetching = false
  66. })
  67. },
  68. handleChange (value) {
  69. if (value && value.key) {
  70. const obj = this.data.find(item => item.dealerName.replace(/\s+/g, '') == value.key)
  71. value.name = obj ? obj.dealerName : ''
  72. value.row = obj
  73. }
  74. Object.assign(this, {
  75. dealerName: value,
  76. data: [],
  77. fetching: false
  78. })
  79. this.$emit('change', value || { key: undefined })
  80. },
  81. resetForm () {
  82. this.dealerName = []
  83. Object.assign(this, {
  84. dealerName: undefined,
  85. data: [],
  86. fetching: false
  87. })
  88. },
  89. // 查询详细
  90. getDetail (sn) {
  91. dealerDetailBySn({ sn: sn }).then(res => {
  92. const val = { key: sn }
  93. val.label = res.data.dealerName
  94. val.row = res.data
  95. Object.assign(this, {
  96. dealerName: val,
  97. data: [res.data],
  98. fetching: false
  99. })
  100. this.$emit('change', val)
  101. this.$emit('dealerDetail', res.data || null)
  102. })
  103. }
  104. }
  105. }
  106. </script>