dealerSubareaScopeList.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <a-select
  3. show-search
  4. label-in-value
  5. :size="size"
  6. :value="dealerName"
  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.dealerSn" :value="item.dealerSn">
  19. {{ item.dealerName }}
  20. </a-select-option>
  21. </a-select>
  22. </template>
  23. <script>
  24. import debounce from 'lodash/debounce'
  25. import { dealerSubareaScopeList, dealerDetailBySn, queryTireDealerPage } from '@/api/dealer'
  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. dealertype: {
  41. type: String,
  42. default: ''
  43. }
  44. },
  45. data () {
  46. this.lastFetchId = 0
  47. this.fetchUser = debounce(this.fetchUser, 800)
  48. return {
  49. data: [],
  50. dealerName: [],
  51. fetching: false
  52. }
  53. },
  54. methods: {
  55. fetchUser (dealerName) {
  56. console.log('fetching user', dealerName)
  57. if (dealerName == '') return
  58. this.lastFetchId += 1
  59. const fetchId = this.lastFetchId
  60. this.data = []
  61. this.fetching = true
  62. const ajaxName = this.dealertype && this.dealertype.length ? queryTireDealerPage : dealerSubareaScopeList
  63. ajaxName({ nameLike: dealerName.replace(/\s+/g, ''), pageNo: 1, pageSize: 20 }).then(res => {
  64. if (fetchId !== this.lastFetchId) {
  65. return
  66. }
  67. this.data = res.data && res.data.list ? res.data.list : []
  68. this.fetching = false
  69. })
  70. },
  71. handleChange (value) {
  72. if (value && value.key) {
  73. const obj = this.data.find(item => item.dealerSn == value.key)
  74. value.name = obj.dealerName
  75. value.row = obj
  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 = []
  86. },
  87. setData (value) {
  88. Object.assign(this, {
  89. dealerName: value,
  90. data: [],
  91. fetching: false
  92. })
  93. },
  94. setDufaultVal (itemSn) {
  95. this.fetchUser(itemSn)
  96. this.setData({ key: itemSn })
  97. },
  98. // 查询详细
  99. getDetail (sn, flag) {
  100. dealerDetailBySn({ sn: sn }).then(res => {
  101. const val = { key: sn }
  102. val.row = res.data
  103. if (!flag) {
  104. Object.assign(this, {
  105. dealerName: val,
  106. data: [res.data],
  107. fetching: false
  108. })
  109. this.$emit('change', val)
  110. }
  111. this.$emit('dealerDetail', res.data || null)
  112. })
  113. }
  114. }
  115. }
  116. </script>