Commit 41e6d94b3b64dc0d40b7ec57ecfaa4d966f202ae
1 parent
17e47e07
feat(demo): add search demo for apiSelect
添加ApiSelect的本地搜索和远程搜索例子
Showing
3 changed files
with
81 additions
and
27 deletions
mock/demo/select-demo.ts
1 | 1 | import { MockMethod } from 'vite-plugin-mock'; |
2 | 2 | import { resultSuccess } from '../_util'; |
3 | 3 | |
4 | -const list: any[] = []; | |
5 | -const demoList = (() => { | |
4 | +const demoList = (keyword) => { | |
6 | 5 | const result = { |
7 | - list: list, | |
6 | + list: [], | |
8 | 7 | }; |
9 | 8 | for (let index = 0; index < 20; index++) { |
10 | 9 | result.list.push({ |
11 | - name: `选项${index}`, | |
10 | + name: `${keyword ?? ''}选项${index}`, | |
12 | 11 | id: `${index}`, |
13 | 12 | }); |
14 | 13 | } |
15 | 14 | return result; |
16 | -})(); | |
15 | +}; | |
17 | 16 | |
18 | 17 | export default [ |
19 | 18 | { |
20 | 19 | url: '/basic-api/select/getDemoOptions', |
21 | 20 | timeout: 1000, |
22 | - method: 'post', | |
21 | + method: 'get', | |
23 | 22 | response: ({ query }) => { |
24 | - console.log(query); | |
25 | - return resultSuccess(demoList); | |
23 | + const { keyword } = query; | |
24 | + console.log(keyword); | |
25 | + return resultSuccess(demoList(keyword)); | |
26 | 26 | }, |
27 | 27 | }, |
28 | 28 | ] as MockMethod[]; |
... | ... |
src/api/demo/select.ts
... | ... | @@ -8,4 +8,4 @@ enum Api { |
8 | 8 | * @description: Get sample options value |
9 | 9 | */ |
10 | 10 | export const optionsListApi = (params?: selectParams) => |
11 | - defHttp.post<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST, params }); | |
11 | + defHttp.get<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST, params }); | |
... | ... |
src/views/demo/form/index.vue
... | ... | @@ -3,22 +3,49 @@ |
3 | 3 | <CollapseContainer title="基础示例"> |
4 | 4 | <BasicForm |
5 | 5 | autoFocusFirstItem |
6 | - :labelWidth="100" | |
6 | + :labelWidth="200" | |
7 | 7 | :schemas="schemas" |
8 | 8 | :actionColOptions="{ span: 24 }" |
9 | 9 | @submit="handleSubmit" |
10 | - /> | |
10 | + @reset="handleReset" | |
11 | + > | |
12 | + <template #localSearch="{ model, field }"> | |
13 | + <ApiSelect | |
14 | + :api="optionsListApi" | |
15 | + showSearch | |
16 | + v-model:value="model[field]" | |
17 | + optionFilterProp="label" | |
18 | + resultField="list" | |
19 | + labelField="name" | |
20 | + valueField="id" | |
21 | + /> | |
22 | + </template> | |
23 | + <template #remoteSearch="{ model, field }"> | |
24 | + <ApiSelect | |
25 | + :api="optionsListApi" | |
26 | + showSearch | |
27 | + v-model:value="model[field]" | |
28 | + :filterOption="false" | |
29 | + resultField="list" | |
30 | + labelField="name" | |
31 | + valueField="id" | |
32 | + :params="searchParams" | |
33 | + @search="onSearch" | |
34 | + /> | |
35 | + </template> | |
36 | + </BasicForm> | |
11 | 37 | </CollapseContainer> |
12 | 38 | </PageWrapper> |
13 | 39 | </template> |
14 | 40 | <script lang="ts"> |
15 | - import { defineComponent, ref } from 'vue'; | |
16 | - import { BasicForm, FormSchema } from '/@/components/Form/index'; | |
17 | - import { CollapseContainer } from '/@/components/Container/index'; | |
41 | + import { computed, defineComponent, unref, ref } from 'vue'; | |
42 | + import { BasicForm, FormSchema, ApiSelect } from '/@/components/Form/index'; | |
43 | + import { CollapseContainer } from '/@/components/Container'; | |
18 | 44 | import { useMessage } from '/@/hooks/web/useMessage'; |
19 | 45 | import { PageWrapper } from '/@/components/Page'; |
20 | 46 | |
21 | 47 | import { optionsListApi } from '/@/api/demo/select'; |
48 | + import { useDebounceFn } from '@vueuse/core'; | |
22 | 49 | |
23 | 50 | const provincesOptions = [ |
24 | 51 | { |
... | ... | @@ -265,11 +292,10 @@ |
265 | 292 | ], |
266 | 293 | }, |
267 | 294 | }, |
268 | - | |
269 | 295 | { |
270 | 296 | field: 'field30', |
271 | 297 | component: 'ApiSelect', |
272 | - label: '远程下拉', | |
298 | + label: '懒加载远程下拉', | |
273 | 299 | required: true, |
274 | 300 | componentProps: { |
275 | 301 | // more details see /src/components/Form/src/components/ApiSelect.vue |
... | ... | @@ -277,15 +303,6 @@ |
277 | 303 | params: { |
278 | 304 | id: 1, |
279 | 305 | }, |
280 | - // use [res.data.result.list] (no res.data.result) as options datas | |
281 | - // result: { | |
282 | - // list: [ | |
283 | - // { | |
284 | - // name: "选项0", | |
285 | - // id: "0" | |
286 | - // }, | |
287 | - // ] | |
288 | - // } | |
289 | 306 | resultField: 'list', |
290 | 307 | // use name as label |
291 | 308 | labelField: 'name', |
... | ... | @@ -304,7 +321,30 @@ |
304 | 321 | colProps: { |
305 | 322 | span: 8, |
306 | 323 | }, |
307 | - // set default value | |
324 | + defaultValue: '0', | |
325 | + }, | |
326 | + { | |
327 | + field: 'field31', | |
328 | + component: 'Input', | |
329 | + label: '下拉本地搜索', | |
330 | + helpMessage: ['ApiSelect组件', '远程数据源本地搜索', '只发起一次请求获取所有选项'], | |
331 | + required: true, | |
332 | + slot: 'localSearch', | |
333 | + colProps: { | |
334 | + span: 8, | |
335 | + }, | |
336 | + defaultValue: '0', | |
337 | + }, | |
338 | + { | |
339 | + field: 'field32', | |
340 | + component: 'Input', | |
341 | + label: '下拉远程搜索', | |
342 | + helpMessage: ['ApiSelect组件', '将关键词发送到接口进行远程搜索'], | |
343 | + required: true, | |
344 | + slot: 'remoteSearch', | |
345 | + colProps: { | |
346 | + span: 8, | |
347 | + }, | |
308 | 348 | defaultValue: '0', |
309 | 349 | }, |
310 | 350 | { |
... | ... | @@ -394,12 +434,26 @@ |
394 | 434 | ]; |
395 | 435 | |
396 | 436 | export default defineComponent({ |
397 | - components: { BasicForm, CollapseContainer, PageWrapper }, | |
437 | + components: { BasicForm, CollapseContainer, PageWrapper, ApiSelect }, | |
398 | 438 | setup() { |
399 | 439 | const check = ref(null); |
400 | 440 | const { createMessage } = useMessage(); |
441 | + const keyword = ref<string>(''); | |
442 | + const searchParams = computed<Recordable>(() => { | |
443 | + return { keyword: unref(keyword) }; | |
444 | + }); | |
445 | + | |
446 | + function onSearch(value: string) { | |
447 | + keyword.value = value; | |
448 | + } | |
401 | 449 | return { |
402 | 450 | schemas, |
451 | + optionsListApi, | |
452 | + onSearch: useDebounceFn(onSearch, 300), | |
453 | + searchParams, | |
454 | + handleReset: () => { | |
455 | + keyword.value = ''; | |
456 | + }, | |
403 | 457 | handleSubmit: (values: any) => { |
404 | 458 | createMessage.success('click search,values:' + JSON.stringify(values)); |
405 | 459 | }, |
... | ... |