dealerSubareaScopeList.vue 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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. :disabled="disabled"
  16. >
  17. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  18. <a-select-option v-for="item in data" :key="item.dealerSn" :value="item.dealerSn">
  19. {{ item.dealerName }}
  20. </a-select-option>
  21. </a-select>
  22. </template>
  23. <script>
  24. import debounce from 'lodash/debounce'
  25. import { dealerSubareaScopeList, dealerDetailBySn } from '@/api/dealer'
  26. export default {
  27. props: {
  28. size: {
  29. type: String,
  30. default: 'default'
  31. },
  32. placeholder: {
  33. type: String,
  34. default: '请输入名称搜索'
  35. },
  36. disabled: {
  37. type: Boolean,
  38. default: false
  39. }
  40. },
  41. data () {
  42. this.lastFetchId = 0
  43. this.fetchUser = debounce(this.fetchUser, 800)
  44. return {
  45. data: [],
  46. dealerName: [],
  47. fetching: false
  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. dealerSubareaScopeList({ nameLike: dealerName.replace(/\s+/g, ''), pageNo: 1, pageSize: 20 }).then(res => {
  59. if (fetchId !== this.lastFetchId) {
  60. return
  61. }
  62. this.data = res.data && res.data.list ? res.data.list : []
  63. this.fetching = false
  64. })
  65. },
  66. handleChange (value) {
  67. if (value && value.key) {
  68. const obj = this.data.find(item => item.dealerSn == value.key)
  69. value.name = obj.dealerName
  70. value.row = obj
  71. }
  72. Object.assign(this, {
  73. dealerName: value,
  74. data: [],
  75. fetching: false
  76. })
  77. this.$emit('change', value || { key: undefined })
  78. },
  79. resetForm () {
  80. this.dealerName = []
  81. },
  82. // 查询详细
  83. getDetail (sn) {
  84. dealerDetailBySn({ sn: sn }).then(res => {
  85. const val = { key: sn }
  86. val.row = res.data
  87. Object.assign(this, {
  88. dealerName: val,
  89. data: [res.data],
  90. fetching: false
  91. })
  92. this.$emit('change', val)
  93. this.$emit('dealerDetail', res.data || null)
  94. })
  95. }
  96. }
  97. }
  98. </script>