inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <a-select
3     :mode="model"
4     showSearch
5     :value="selectValue"
6     :filter-option="false"
7     :placeholder="placeholder"
8     :not-found-content="fetching ? undefined : null"
9     @search="fetchUser"
10     @change="handleChange"
11   >
12     <a-spin v-if="fetching" slot="notFoundContent" size="small" />
13     <a-select-option v-for="d in data" :key="d.value">
14       {{ d.text }}
15     </a-select-option>
16   </a-select>
17 </template>
18 <script>
19 import debounce from 'lodash/debounce'
20 import { getUserPage } from '@/api/modular/system/userManage'
21
22 export default {
23   name: 'UserSelect',
24   props: {
25     placeholder: {
26       type: String
27     },
28     value: {
29       type: String
30     },
31     multiple: {
32       type: Boolean,
33       default: false
34     }
35   },
36   data() {
37     const multiple = this.multiple
38     this.fetchUser = debounce(this.fetchUser, 800)
39     return {
40       data: [],
41       fetching: false,
42       selectValue: multiple ? [] : undefined,
43       model: multiple ? 'multiple' : 'default'
44     }
45   },
46   methods: {
47     fetchUser(key) {
48       console.log('fetching user', key)
49       this.data = []
50       this.fetching = true
51
52       const params = {
53         pageNo: 1,
54         pageSize: 10,
55         searchValue: key
56       }
57       this.userFetching = true
58
59       getUserPage(params).then((res) => {
60         this.data = res.data.rows.map(user => ({
61           text: `${user.name} ${user.account}`,
62           value: user.id
63         }))
64       }).finally(() => {
65         this.fetching = false
66       })
67     },
68     handleChange(value) {
69       Object.assign(this, {
70         selectValue: value,
71         fetching: false
72       })
73       this.$emit('change', value)
74     }
75   }
76 }
77 </script>