custList.vue 3.8 KB

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