creatorList.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <a-select
  3. show-search
  4. label-in-value
  5. :size="size"
  6. :value="creatorName"
  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.creatorId" :value="item.creatorId">
  19. {{ item.creatorName }}
  20. </a-select-option>
  21. </a-select>
  22. </template>
  23. <script>
  24. import debounce from 'lodash/debounce'
  25. import { queryCreatorList } from '@/api/promotion'
  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. creatorName: [],
  47. fetching: false
  48. }
  49. },
  50. methods: {
  51. fetchUser (likeCreatorName) {
  52. if (likeCreatorName == '') return
  53. this.lastFetchId += 1
  54. const fetchId = this.lastFetchId
  55. this.data = []
  56. this.fetching = true
  57. queryCreatorList({ creatorName: likeCreatorName.replace(/\s+/g, '') }).then(res => {
  58. if (fetchId !== this.lastFetchId) {
  59. return
  60. }
  61. this.data = res.data ? res.data : []
  62. this.fetching = false
  63. })
  64. },
  65. handleChange (value) {
  66. if (value && value.key) {
  67. const obj = this.data.find(item => item.creatorId == value.key)
  68. value.name = obj.creatorName
  69. }
  70. Object.assign(this, {
  71. creatorName: value,
  72. data: [],
  73. fetching: false
  74. })
  75. this.$emit('change', value || { key: undefined })
  76. },
  77. resetForm () {
  78. this.creatorName = []
  79. },
  80. setDefaultVal (val) {
  81. this.creatorName = val
  82. }
  83. }
  84. }
  85. </script>