fix(ApiSelect demo): add demo about ApiSelect's use (#757)

* fix(ApiSelect demo): add demo about ApiSelect's use

* fix(ApiSelect demo): typo

* revert(ApiSelect): remove console

Co-authored-by: M69W <M69W@M69W>

mock/demo/select-demo.ts

@@ -1,12 +1,15 @@
 import { MockMethod } from 'vite-plugin-mock';
 import { resultSuccess } from '../_util';
 
+const list: any[] = [];
 const demoList = (() => {
-  const result: any[] = [];
+  const result = {
+    list: list,
+  };
   for (let index = 0; index < 20; index++) {
-    result.push({
+    result.list.push({
-      label: `选项${index}`,
+      name: `选项${index}`,
-      value: `${index}`,
+      id: `${index}`,
     });
   }
   return result;
@@ -15,8 +18,8 @@ const demoList = (() => {
 export default [
   {
     url: '/basic-api/select/getDemoOptions',
-    timeout: 2000,
+    timeout: 1000,
-    method: 'get',
+    method: 'post',
     response: ({ query }) => {
       console.log(query);
       return resultSuccess(demoList);

src/api/demo/model/optionsModel.ts

@@ -5,6 +5,10 @@ export interface DemoOptionsItem {
   value: string;
 }
 
+export interface selectParams {
+  id: number | string;
+}
+
 /**
  * @description: Request list return value
  */

src/api/demo/select.ts

@@ -1,5 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
-import { DemoOptionsItem } from './model/optionsModel';
+import { DemoOptionsItem, selectParams } from './model/optionsModel';
 enum Api {
   OPTIONS_LIST = '/select/getDemoOptions',
 }
@@ -7,4 +7,5 @@ enum Api {
 /**
  * @description: Get sample options value
  */
-export const optionsListApi = () => defHttp.get<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST });
+export const optionsListApi = (params?: selectParams) =>
+  defHttp.post<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST, params });

src/views/demo/form/index.vue

@@ -272,11 +272,39 @@
       label: '远程下拉',
       required: true,
       componentProps: {
+        // more details see /src/components/Form/src/components/ApiSelect.vue
         api: optionsListApi,
+        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',
+        // use id as value
+        valueField: 'id',
+        // not request untill to select
+        immediate: false,
+        onChange: (e) => {
+          console.log('selected:', e);
+        },
+        // atfer request callback
+        onOptionsChange: (options) => {
+          console.log('get options', options.length, options);
+        },
       },
       colProps: {
         span: 8,
       },
+      // set default value
       defaultValue: '0',
     },
     {