custList.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <a-select
  3. show-search
  4. label-in-value
  5. :size="size"
  6. :value="dealerName"
  7. placeholder="请输入名称搜索"
  8. style="width: 100%"
  9. :filter-option="false"
  10. :not-found-content="fetching ? undefined : null"
  11. @search="fetchUser"
  12. @change="handleChange"
  13. allowClear
  14. >
  15. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  16. <a-select-option v-for="item in data" :key="item.dealerSn" :value="item.dealerSn">
  17. {{ item.dealerName }}
  18. </a-select-option>
  19. </a-select>
  20. </template>
  21. <script>
  22. import debounce from 'lodash/debounce'
  23. import { dealerQueryList, dealerFindUpdateInfoBySn } from '@/api/dealer'
  24. export default {
  25. props: {
  26. size: {
  27. type: String,
  28. default: 'default'
  29. },
  30. itemSn: {
  31. type: String || Number,
  32. default: undefined
  33. }
  34. },
  35. data () {
  36. this.lastFetchId = 0
  37. this.fetchUser = debounce(this.fetchUser, 800)
  38. return {
  39. data: [],
  40. dealerName: [],
  41. fetching: false
  42. }
  43. },
  44. methods: {
  45. fetchUser (dealerName) {
  46. console.log('fetching user', dealerName)
  47. if (dealerName == '') return
  48. this.lastFetchId += 1
  49. const fetchId = this.lastFetchId
  50. this.data = []
  51. this.fetching = true
  52. const params = { pageNo: 1, pageSize: 20 }
  53. if (this.itemSn) {
  54. params.dealerSn = this.itemSn
  55. } else {
  56. params.nameLike = dealerName
  57. }
  58. dealerQueryList(params).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. 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. dealerFindUpdateInfoBySn({ sn: sn }).then(res => {
  80. this.$emit('dealerDetail', res.data || null)
  81. })
  82. },
  83. setData (value) {
  84. Object.assign(this, {
  85. dealerName: value,
  86. data: [],
  87. fetching: false
  88. })
  89. }
  90. },
  91. mounted () {
  92. if (this.itemSn) {
  93. this.fetchUser(this.itemSn)
  94. this.setData({ key: this.itemSn })
  95. }
  96. }
  97. }
  98. </script>