|
@@ -3,22 +3,49 @@
|
|
|
<CollapseContainer title="基础示例">
|
|
|
<BasicForm
|
|
|
autoFocusFirstItem
|
|
|
- :labelWidth="100"
|
|
|
+ :labelWidth="200"
|
|
|
:schemas="schemas"
|
|
|
:actionColOptions="{ span: 24 }"
|
|
|
@submit="handleSubmit"
|
|
|
- />
|
|
|
+ @reset="handleReset"
|
|
|
+ >
|
|
|
+ <template #localSearch="{ model, field }">
|
|
|
+ <ApiSelect
|
|
|
+ :api="optionsListApi"
|
|
|
+ showSearch
|
|
|
+ v-model:value="model[field]"
|
|
|
+ optionFilterProp="label"
|
|
|
+ resultField="list"
|
|
|
+ labelField="name"
|
|
|
+ valueField="id"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template #remoteSearch="{ model, field }">
|
|
|
+ <ApiSelect
|
|
|
+ :api="optionsListApi"
|
|
|
+ showSearch
|
|
|
+ v-model:value="model[field]"
|
|
|
+ :filterOption="false"
|
|
|
+ resultField="list"
|
|
|
+ labelField="name"
|
|
|
+ valueField="id"
|
|
|
+ :params="searchParams"
|
|
|
+ @search="onSearch"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </BasicForm>
|
|
|
</CollapseContainer>
|
|
|
</PageWrapper>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
- import { defineComponent, ref } from 'vue';
|
|
|
- import { BasicForm, FormSchema } from '/@/components/Form/index';
|
|
|
- import { CollapseContainer } from '/@/components/Container/index';
|
|
|
+ import { computed, defineComponent, unref, ref } from 'vue';
|
|
|
+ import { BasicForm, FormSchema, ApiSelect } from '/@/components/Form/index';
|
|
|
+ import { CollapseContainer } from '/@/components/Container';
|
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
import { PageWrapper } from '/@/components/Page';
|
|
|
|
|
|
import { optionsListApi } from '/@/api/demo/select';
|
|
|
+ import { useDebounceFn } from '@vueuse/core';
|
|
|
|
|
|
const provincesOptions = [
|
|
|
{
|
|
@@ -265,11 +292,10 @@
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
{
|
|
|
field: 'field30',
|
|
|
component: 'ApiSelect',
|
|
|
- label: '远程下拉',
|
|
|
+ label: '懒加载远程下拉',
|
|
|
required: true,
|
|
|
componentProps: {
|
|
|
// more details see /src/components/Form/src/components/ApiSelect.vue
|
|
@@ -277,15 +303,6 @@
|
|
|
params: {
|
|
|
id: 1,
|
|
|
},
|
|
|
- // use [res.data.result.list] (no res.data.result) as options datas
|
|
|
- // result: {
|
|
|
- // list: [
|
|
|
- // {
|
|
|
- // name: "选项0",
|
|
|
- // id: "0"
|
|
|
- // },
|
|
|
- // ]
|
|
|
- // }
|
|
|
resultField: 'list',
|
|
|
// use name as label
|
|
|
labelField: 'name',
|
|
@@ -304,7 +321,30 @@
|
|
|
colProps: {
|
|
|
span: 8,
|
|
|
},
|
|
|
- // set default value
|
|
|
+ defaultValue: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'field31',
|
|
|
+ component: 'Input',
|
|
|
+ label: '下拉本地搜索',
|
|
|
+ helpMessage: ['ApiSelect组件', '远程数据源本地搜索', '只发起一次请求获取所有选项'],
|
|
|
+ required: true,
|
|
|
+ slot: 'localSearch',
|
|
|
+ colProps: {
|
|
|
+ span: 8,
|
|
|
+ },
|
|
|
+ defaultValue: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'field32',
|
|
|
+ component: 'Input',
|
|
|
+ label: '下拉远程搜索',
|
|
|
+ helpMessage: ['ApiSelect组件', '将关键词发送到接口进行远程搜索'],
|
|
|
+ required: true,
|
|
|
+ slot: 'remoteSearch',
|
|
|
+ colProps: {
|
|
|
+ span: 8,
|
|
|
+ },
|
|
|
defaultValue: '0',
|
|
|
},
|
|
|
{
|
|
@@ -394,12 +434,26 @@
|
|
|
];
|
|
|
|
|
|
export default defineComponent({
|
|
|
- components: { BasicForm, CollapseContainer, PageWrapper },
|
|
|
+ components: { BasicForm, CollapseContainer, PageWrapper, ApiSelect },
|
|
|
setup() {
|
|
|
const check = ref(null);
|
|
|
const { createMessage } = useMessage();
|
|
|
+ const keyword = ref<string>('');
|
|
|
+ const searchParams = computed<Recordable>(() => {
|
|
|
+ return { keyword: unref(keyword) };
|
|
|
+ });
|
|
|
+
|
|
|
+ function onSearch(value: string) {
|
|
|
+ keyword.value = value;
|
|
|
+ }
|
|
|
return {
|
|
|
schemas,
|
|
|
+ optionsListApi,
|
|
|
+ onSearch: useDebounceFn(onSearch, 300),
|
|
|
+ searchParams,
|
|
|
+ handleReset: () => {
|
|
|
+ keyword.value = '';
|
|
|
+ },
|
|
|
handleSubmit: (values: any) => {
|
|
|
createMessage.success('click search,values:' + JSON.stringify(values));
|
|
|
},
|