feat(demo): add search demo for apiSelect

添加ApiSelect的本地搜索和远程搜索例子

feat(demo): add search demo for apiSelect
添加ApiSelect的本地搜索和远程搜索例子
无木
1 parent 17e47e07
Showing 3 changed files with 81 additions and 27 deletions
mock/demo/select-demo.ts
src/api/demo/select.ts
src/views/demo/form/index.vue
 import { MockMethod } from 'vite-plugin-mock';
 import { resultSuccess } from '../_util';
-const list: any[] = [];
-const demoList = (() => {
+const demoList = (keyword) => {
   const result = {
-    list: list,
+    list: [],
   };
   for (let index = 0; index < 20; index++) {
     result.list.push({
-      name: `选项${index}`,
+      name: `${keyword ?? ''}选项${index}`,
       id: `${index}`,
     });
   }
   return result;
-})();
+};
 export default [
   {
     url: '/basic-api/select/getDemoOptions',
     timeout: 1000,
-    method: 'post',
+    method: 'get',
     response: ({ query }) => {
-      console.log(query);
-      return resultSuccess(demoList);
+      const { keyword } = query;
+      console.log(keyword);
+      return resultSuccess(demoList(keyword));
     },
   },
 ] as MockMethod[];
@@ -8,4 +8,4 @@ enum Api {
  * @description: Get sample options value
  */
 export const optionsListApi = (params?: selectParams) =>
-  defHttp.post<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST, params });
+  defHttp.get<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST, params });
@@ -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));
         },