custList.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <a-select
  3. show-search
  4. label-in-value
  5. :value="dealerName"
  6. placeholder="请输入名称搜索"
  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.customerSn" :value="item.customerSn" :disabled="isValidateEnabled ? item.enabledFlag=='0' : false">
  16. {{ item.customerName }}
  17. <span v-if="isValidateEnabled && item.enabledFlag=='0'">(已禁用)</span>
  18. </a-select-option>
  19. </a-select>
  20. </template>
  21. <script>
  22. import debounce from 'lodash/debounce'
  23. import { custList } from '@/api/customer'
  24. export default {
  25. props: {
  26. isValidateEnabled: {
  27. type: Boolean,
  28. default: false
  29. }
  30. },
  31. data () {
  32. this.lastFetchId = 0
  33. this.fetchUser = debounce(this.fetchUser, 800)
  34. return {
  35. data: [],
  36. dealerName: undefined,
  37. fetching: false
  38. }
  39. },
  40. methods: {
  41. fetchUser (dealerName) {
  42. console.log('fetching user', dealerName)
  43. if (dealerName == '') return
  44. this.lastFetchId += 1
  45. const fetchId = this.lastFetchId
  46. this.data = []
  47. this.fetching = true
  48. custList({ 'customerName': dealerName, pageNo: 1, pageSize: 20 }).then(res => {
  49. if (fetchId !== this.lastFetchId) {
  50. return
  51. }
  52. this.data = res.data && res.data.list ? res.data.list : []
  53. this.fetching = false
  54. })
  55. },
  56. handleChange (value) {
  57. if (value && value.key) {
  58. const ind = this.data.findIndex(item => item.customerSn == value.key)
  59. value.row = ind != -1 ? this.data[ind] : undefined
  60. }
  61. Object.assign(this, {
  62. dealerName: value,
  63. data: [],
  64. fetching: false
  65. })
  66. this.$emit('change', value || { key: undefined })
  67. },
  68. resetForm () {
  69. this.dealerName = undefined
  70. },
  71. setData (value) {
  72. Object.assign(this, {
  73. dealerName: value,
  74. data: [],
  75. fetching: false
  76. })
  77. }
  78. }
  79. }
  80. </script>