productJqList.vue 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <!-- 箭冠产品 -->
  3. <a-select
  4. show-search
  5. label-in-value
  6. :value="productCode"
  7. placeholder="请输入名称搜索"
  8. style="width: 100%"
  9. :filter-option="false"
  10. :dropdownMatchSelectWidth="false"
  11. :not-found-content="fetching ? undefined : null"
  12. @blur="blurSelect"
  13. @search="fetchUser"
  14. @change="handleChange"
  15. allowClear>
  16. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  17. <a-select-option v-for="item in data" :key="item.productSn" :value="item.productSn">{{ item.code }}</a-select-option>
  18. </a-select>
  19. </template>
  20. <script>
  21. import debounce from 'lodash/debounce'
  22. import { shelfDealerProductList } from '@/api/shelf'
  23. export default {
  24. props: {
  25. itemSn: {
  26. type: String || Number,
  27. default: undefined
  28. },
  29. params: {
  30. type: Object,
  31. default: ()=> {
  32. return null
  33. }
  34. }
  35. },
  36. data () {
  37. this.lastFetchId = 0
  38. this.fetchUser = debounce(this.fetchUser, 800)
  39. return {
  40. data: [],
  41. productCode: undefined,
  42. fetching: false
  43. }
  44. },
  45. methods: {
  46. fetchUser (productCode) {
  47. console.log('fetching user', productCode)
  48. if (productCode == '') return
  49. this.lastFetchId += 1
  50. const fetchId = this.lastFetchId
  51. this.data = []
  52. this.fetching = true
  53. let params = { code: productCode, pageNo: 1, pageSize: 20 }
  54. if(this.params){
  55. params = Object.assign(params, this.params)
  56. }
  57. shelfDealerProductList(params).then(res => {
  58. if (fetchId !== this.lastFetchId) {
  59. return
  60. }
  61. this.data = res.data && res.data.list ? res.data.list : []
  62. this.fetching = false
  63. })
  64. },
  65. handleChange (value) {
  66. if (value && value.key) {
  67. const ind = this.data.findIndex(item => item.productSn == value.key)
  68. value.row = ind != -1 ? this.data[ind] : undefined
  69. }
  70. Object.assign(this, {
  71. productCode: value,
  72. data: [],
  73. fetching: false
  74. })
  75. this.$emit('change', value || { key: undefined, label: '' })
  76. },
  77. resetForm () {
  78. this.productCode = undefined
  79. },
  80. setData (value) {
  81. Object.assign(this, {
  82. productCode: value,
  83. data: [],
  84. fetching: false
  85. })
  86. },
  87. blurSelect () {
  88. this.data = []
  89. }
  90. },
  91. mounted () {
  92. if (this.itemSn) {
  93. this.fetchUser(this.itemSn)
  94. this.setData({ key: this.itemSn })
  95. }
  96. }
  97. }
  98. </script>