orgMultipleList.vue 2.0 KB

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