custList.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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. :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.customerSn" :value="item.customerSn" :disabled="isValidateEnabled ? item.enabledFlag=='0' : false">
  18. {{ item.customerName }}
  19. <span v-if="isValidateEnabled && item.enabledFlag=='0'">(已禁用)</span>
  20. </a-select-option>
  21. </a-select>
  22. </template>
  23. <script>
  24. import debounce from 'lodash/debounce'
  25. import { custList } from '@/api/customer'
  26. export default {
  27. props: {
  28. isValidateEnabled: {
  29. type: Boolean,
  30. default: false
  31. },
  32. size: {
  33. type: String,
  34. default: 'default'
  35. },
  36. itemSn: {
  37. type: String || Number,
  38. default: undefined
  39. }
  40. },
  41. data () {
  42. this.lastFetchId = 0
  43. this.fetchUser = debounce(this.fetchUser, 800)
  44. return {
  45. data: [],
  46. dealerName: undefined,
  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. const params = { pageNo: 1, pageSize: 20 }
  59. if (this.itemSn) {
  60. params.customerSn = this.itemSn
  61. } else {
  62. params.queryWord = dealerName
  63. }
  64. custList(params).then(res => {
  65. if (fetchId !== this.lastFetchId) {
  66. return
  67. }
  68. this.data = res.data && res.data.list ? res.data.list : []
  69. this.fetching = false
  70. })
  71. },
  72. handleChange (value) {
  73. if (value && value.key) {
  74. const ind = this.data.findIndex(item => item.customerSn == value.key)
  75. value.row = ind != -1 ? this.data[ind] : undefined
  76. }
  77. Object.assign(this, {
  78. dealerName: value,
  79. data: [],
  80. fetching: false
  81. })
  82. this.$emit('change', value || { key: undefined })
  83. },
  84. resetForm () {
  85. this.dealerName = undefined
  86. },
  87. setData (value) {
  88. Object.assign(this, {
  89. dealerName: value,
  90. data: [],
  91. fetching: false
  92. })
  93. }
  94. },
  95. mounted () {
  96. if (this.itemSn) {
  97. this.fetchUser(this.itemSn)
  98. this.setData({ key: this.itemSn })
  99. }
  100. }
  101. }
  102. </script>