user-components.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <div>
  3. <el-select
  4. v-model="value"
  5. ref="select"
  6. placeholder="请输入姓名"
  7. clearable
  8. filterable
  9. remote
  10. multiple
  11. :disabled="disabled"
  12. :remote-method="remoteMethod"
  13. @change="onChange">
  14. <el-option
  15. v-for="item in options"
  16. :key="item.value"
  17. :label="item.label"
  18. :value="item.value">
  19. </el-option>
  20. <el-option v-if="noMore" label="加载更多" disabled style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
  21. </el-select>
  22. </div>
  23. </template>
  24. <script>
  25. export default {
  26. name: 'user-component',
  27. props: {
  28. userIds: {
  29. type: Array,
  30. default: () => []
  31. },
  32. disabled: {
  33. type: Boolean,
  34. default: false
  35. }
  36. },
  37. data () {
  38. return {
  39. value: [],
  40. current: 1,
  41. size: 10,
  42. name: '',
  43. options: [],
  44. loading: false,
  45. noMore: false
  46. }
  47. },
  48. watch: {
  49. userIds (value) {
  50. this.value = value
  51. }
  52. },
  53. mounted () {
  54. this.init()
  55. },
  56. methods: {
  57. async init () {
  58. this.getList()
  59. },
  60. remoteMethod (query) {
  61. this.options = []
  62. this.current = 1
  63. this.name = query
  64. this.getList()
  65. },
  66. getList () {
  67. this.$http({
  68. url: this.$http.adornUrl(`/user-service/user/list`),
  69. method: 'get',
  70. params: this.$http.adornParams({
  71. 'current': this.current,
  72. 'size': this.size,
  73. 'name': this.name
  74. })
  75. }).then(({data}) => {
  76. if (data && data.code === '200') {
  77. if (this.current > data.data.pages) {
  78. return
  79. }
  80. if (data.data.records.length < 10) {
  81. this.noMore = false
  82. } else {
  83. this.noMore = true
  84. }
  85. data.data.records.forEach(item => {
  86. this.options.push({
  87. label: item.name + ' (' + item.orgName + ')',
  88. value: item.userId
  89. })
  90. })
  91. } else {
  92. this.options = []
  93. }
  94. })
  95. },
  96. handleClick () {
  97. this.loadMore()
  98. },
  99. loadMore () {
  100. this.current ++
  101. this.getList()
  102. },
  103. onChange (item) {
  104. this.$emit('change', item)
  105. }
  106. }
  107. }
  108. </script>
  109. <style scoped>
  110. .el-select{
  111. width: 100%;
  112. }
  113. </style>