custList.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <a-select
  3. show-search
  4. label-in-value
  5. :size="size"
  6. :value="dealerName"
  7. mode="combobox"
  8. placeholder="请输入客户名称搜索"
  9. style="width: 100%"
  10. :filter-option="false"
  11. :not-found-content="fetching ? undefined : null"
  12. :dropdownMatchSelectWidth="false"
  13. :defaultActiveFirstOption="false"
  14. @search="fetchUser"
  15. @change="handleChange"
  16. allowClear
  17. >
  18. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  19. <a-select-option v-for="item in data" :key="item.customerSn" :value="item.customerName" :disabled="pageType&&pageType==='1'?false:((isValidateEnabled ? item.enabledFlag=='0' : false) || (dealerDisabled ? item.dealerFlag==1:false))">
  20. {{ item.customerName }}
  21. <span v-if="isValidateEnabled && item.enabledFlag=='0'">(已禁用)</span>
  22. </a-select-option>
  23. </a-select>
  24. </template>
  25. <script>
  26. import debounce from 'lodash/debounce'
  27. import { custList, queryCanCustomer } from '@/api/customer'
  28. export default {
  29. props: {
  30. isValidateEnabled: {
  31. type: Boolean,
  32. default: false
  33. },
  34. size: {
  35. type: String,
  36. default: 'default'
  37. },
  38. itemSn: {
  39. type: String || Number,
  40. default: undefined
  41. },
  42. notSn: {
  43. type: String || Number,
  44. default: ''
  45. },
  46. isEnabled: { // 是否只查启用状态
  47. type: Boolean,
  48. default: false
  49. },
  50. mainFlag: {
  51. type: Boolean,
  52. default: true
  53. },
  54. satelliteFlag: {
  55. type: Boolean,
  56. default: false
  57. },
  58. dealerDisabled: {
  59. type: Boolean,
  60. default: false
  61. },
  62. dealerFlag: { // 0不含下级,1 只是下级,all是全部
  63. type: [String, Number],
  64. default: 'all'
  65. },
  66. pageType: {// 页面类型
  67. type: String,
  68. default: '0' // 0客户名称 1被合并的客户名称
  69. }
  70. },
  71. data () {
  72. this.lastFetchId = 0
  73. this.fetchUser = debounce(this.fetchUser, 800)
  74. return {
  75. data: [],
  76. dealerName: undefined,
  77. fetching: false
  78. }
  79. },
  80. methods: {
  81. fetchUser (dealerName) {
  82. if (dealerName == '') return
  83. this.lastFetchId += 1
  84. const fetchId = this.lastFetchId
  85. this.data = []
  86. this.fetching = true
  87. const params = { pageNo: 1, pageSize: 20, mainFlag: this.mainFlag ? 1 : 0, dealerFlag: this.dealerFlag == 'all' ? undefined : this.dealerFlag }
  88. if (this.satelliteFlag) {
  89. params.satelliteFlag = 1
  90. }
  91. if (this.itemSn) {
  92. params.customerSn = this.itemSn
  93. } else {
  94. params.queryWord = dealerName.trim()
  95. }
  96. if (this.isEnabled) {
  97. params.enabledFlag = 1
  98. }
  99. custList(params).then(res => {
  100. if (fetchId !== this.lastFetchId) {
  101. return
  102. }
  103. this.data = res.data && res.data.list ? res.data.list : []
  104. this.data = this.data.filter(item => item.customerSn != this.notSn)
  105. this.fetching = false
  106. })
  107. },
  108. handleChange (value) {
  109. if (value && value.key) {
  110. value.key = value.key.trim()
  111. const ind = this.data.findIndex(item => item.customerName == value.key)
  112. value.row = ind != -1 ? this.data[ind] : undefined
  113. }
  114. Object.assign(this, {
  115. dealerName: value,
  116. data: [],
  117. fetching: false
  118. })
  119. this.$emit('input', value && value.key || undefined)
  120. this.$emit('change', value && value.key || undefined, value && value.row || undefined)
  121. },
  122. resetForm () {
  123. this.dealerName = undefined
  124. this.setData(undefined)
  125. },
  126. setData (value) {
  127. Object.assign(this, {
  128. dealerName: value,
  129. data: [],
  130. fetching: false
  131. })
  132. }
  133. },
  134. mounted () {
  135. if (this.itemSn) {
  136. this.fetchUser(this.itemSn)
  137. this.setData({ key: this.itemSn })
  138. }
  139. }
  140. }
  141. </script>