shelfList.vue 2.3 KB

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