userName.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <a-select
  3. show-search
  4. label-in-value
  5. :size="size"
  6. :value="userName"
  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. >
  16. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  17. <a-select-option v-for="item in data" :key="item.userSn" :value="item.userSn">
  18. {{ item.userName }}
  19. </a-select-option>
  20. </a-select>
  21. </template>
  22. <script>
  23. import debounce from 'lodash/debounce'
  24. import { queryUserList } from '@/api/bizuser'
  25. export default {
  26. props: {
  27. id: {
  28. type: String,
  29. default: ''
  30. },
  31. size: {
  32. type: String,
  33. default: 'default'
  34. },
  35. itemSn: {
  36. type: String || Number,
  37. default: undefined
  38. },
  39. placeholder: {
  40. type: String,
  41. default: '请输入名称搜索'
  42. },
  43. cooperateFlag: {
  44. type: String,
  45. default: undefined
  46. }
  47. },
  48. data () {
  49. this.lastFetchId = 0
  50. this.fetchUser = debounce(this.fetchUser, 800)
  51. return {
  52. data: [],
  53. userName: [],
  54. fetching: false
  55. }
  56. },
  57. methods: {
  58. fetchUser (userName) {
  59. console.log('fetching user', userName)
  60. if (userName == '') return
  61. this.lastFetchId += 1
  62. const fetchId = this.lastFetchId
  63. this.data = []
  64. this.fetching = true
  65. const params = { pageNo: 1, pageSize: 20 }
  66. if (this.itemSn) {
  67. params.dealerSn = this.itemSn
  68. } else {
  69. params.userName = userName
  70. if (this.cooperateFlag) {
  71. params.cooperateFlag = this.cooperateFlag
  72. }
  73. }
  74. queryUserList(params).then(res => {
  75. if (fetchId !== this.lastFetchId) {
  76. return
  77. }
  78. this.data = res.data && res.data.list ? res.data.list : []
  79. this.fetching = false
  80. })
  81. },
  82. handleChange (value) {
  83. if (value) {
  84. const row = this.data.filter(item => item.userSn == value.key)
  85. Object.assign(this, {
  86. userName: value,
  87. data: [],
  88. fetching: false
  89. })
  90. this.$emit('change', value || { key: undefined }, row[0], this.id)
  91. // this.$emit('input', value.key)
  92. } else {
  93. this.setDufaultVal('')
  94. this.resetForm()
  95. this.$emit('change', value || { key: undefined }, undefined, this.id)
  96. // this.$emit('input', value.key)
  97. }
  98. },
  99. resetForm () {
  100. this.userName = []
  101. },
  102. setData (value) {
  103. Object.assign(this, {
  104. userName: value,
  105. data: [],
  106. fetching: false
  107. })
  108. },
  109. setDufaultVal (itemSn) {
  110. this.fetchUser(itemSn)
  111. this.setData({ key: itemSn })
  112. }
  113. },
  114. mounted () {
  115. if (this.itemSn) {
  116. this.fetchUser(this.itemSn)
  117. this.setData({ key: this.itemSn })
  118. }
  119. }
  120. }
  121. </script>