dealerSubareaScopeList.vue 2.3 KB

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