selectCust.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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. @blur="blurSelect"
  13. @search="fetchUser"
  14. @change="handleChange"
  15. allowClear
  16. >
  17. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  18. <a-select-option v-for="item in data" :key="item.customerSn" :value="item.customerSn" :disabled="isValidateEnabled ? item.enabledFlag=='0' : false">
  19. {{ item.customerName }}
  20. <span v-if="isValidateEnabled && item.enabledFlag=='0'">(已禁用)</span>
  21. </a-select-option>
  22. </a-select>
  23. </template>
  24. <script>
  25. import debounce from 'lodash/debounce'
  26. import { custList } from '@/api/customer'
  27. export default {
  28. props: {
  29. isValidateEnabled: {
  30. type: Boolean,
  31. default: false
  32. },
  33. size: {
  34. type: String,
  35. default: 'default'
  36. },
  37. itemSn: {
  38. type: String || Number,
  39. default: undefined
  40. },
  41. isEnabled: { // 是否只查启用状态
  42. type: Boolean,
  43. default: false
  44. }
  45. },
  46. data () {
  47. this.lastFetchId = 0
  48. this.fetchUser = debounce(this.fetchUser, 800)
  49. return {
  50. data: [],
  51. dealerName: undefined,
  52. fetching: false
  53. }
  54. },
  55. methods: {
  56. fetchUser (dealerName) {
  57. console.log('fetching user', dealerName)
  58. if (dealerName == '') return
  59. this.lastFetchId += 1
  60. const fetchId = this.lastFetchId
  61. this.data = []
  62. this.fetching = true
  63. const params = { pageNo: 1, pageSize: 20 }
  64. if (this.itemSn) {
  65. params.customerSn = this.itemSn
  66. } else {
  67. params.queryWord = dealerName
  68. }
  69. if (this.isEnabled) {
  70. params.enabledFlag = 1
  71. }
  72. custList(params).then(res => {
  73. if (fetchId !== this.lastFetchId) {
  74. return
  75. }
  76. this.data = res.data && res.data.list ? res.data.list : []
  77. this.fetching = false
  78. })
  79. },
  80. handleChange (value) {
  81. if (value && value.key) {
  82. const ind = this.data.findIndex(item => item.customerSn == value.key)
  83. value.row = ind != -1 ? this.data[ind] : undefined
  84. }
  85. Object.assign(this, {
  86. dealerName: value,
  87. data: [],
  88. fetching: false
  89. })
  90. this.$emit('change', value || { key: undefined })
  91. },
  92. resetForm () {
  93. this.dealerName = undefined
  94. },
  95. setData (value) {
  96. Object.assign(this, {
  97. dealerName: value,
  98. data: [],
  99. fetching: false
  100. })
  101. },
  102. blurSelect () {
  103. this.data = []
  104. }
  105. },
  106. mounted () {
  107. if (this.itemSn) {
  108. this.fetchUser(this.itemSn)
  109. this.setData({ key: this.itemSn })
  110. }
  111. }
  112. }
  113. </script>