From c17fef8a0090b4004c1e02074e078625a7715af5 Mon Sep 17 00:00:00 2001
From: M69W <M69W@M69W>
Date: Sat, 12 Jun 2021 18:54:55 +0800
Subject: [PATCH 1/3] fix(ApiSelect demo): add demo about ApiSelect's use

---
 mock/demo/select-demo.ts                      | 15 ++++++----
 src/api/demo/model/optionsModel.ts            |  4 +++
 src/api/demo/select.ts                        |  5 ++--
 .../Form/src/components/ApiSelect.vue         |  1 +
 src/views/demo/form/index.vue                 | 28 +++++++++++++++++++
 5 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/mock/demo/select-demo.ts b/mock/demo/select-demo.ts
index d962d27b30e..49692292d67 100644
--- a/mock/demo/select-demo.ts
+++ b/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({
-      label: `选项${index}`,
-      value: `${index}`,
+    result.list.push({
+      name: `选项${index}`,
+      id: `${index}`,
     });
   }
   return result;
@@ -15,8 +18,8 @@ const demoList = (() => {
 export default [
   {
     url: '/basic-api/select/getDemoOptions',
-    timeout: 2000,
-    method: 'get',
+    timeout: 1000,
+    method: 'post',
     response: ({ query }) => {
       console.log(query);
       return resultSuccess(demoList);
diff --git a/src/api/demo/model/optionsModel.ts b/src/api/demo/model/optionsModel.ts
index c65dc7c9fe3..c15ef8fd2b4 100644
--- a/src/api/demo/model/optionsModel.ts
+++ b/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
  */
diff --git a/src/api/demo/select.ts b/src/api/demo/select.ts
index cb04bea222c..fd8c796873e 100644
--- a/src/api/demo/select.ts
+++ b/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 });
diff --git a/src/components/Form/src/components/ApiSelect.vue b/src/components/Form/src/components/ApiSelect.vue
index 9fc5160d956..680ce6db1aa 100644
--- a/src/components/Form/src/components/ApiSelect.vue
+++ b/src/components/Form/src/components/ApiSelect.vue
@@ -108,6 +108,7 @@
         try {
           loading.value = true;
           const res = await api(props.params);
+          console.log('fetch', res);
           if (Array.isArray(res)) {
             options.value = res;
             emitChange();
diff --git a/src/views/demo/form/index.vue b/src/views/demo/form/index.vue
index 2f5e91bd052..7591507586d 100644
--- a/src/views/demo/form/index.vue
+++ b/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 value
+        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',
     },
     {

From d23392437c372f35e6f2c8fbc0ecc16239718934 Mon Sep 17 00:00:00 2001
From: M69W <M69W@M69W>
Date: Sat, 12 Jun 2021 19:05:56 +0800
Subject: [PATCH 2/3] fix(ApiSelect demo): typo

---
 src/views/demo/form/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/demo/form/index.vue b/src/views/demo/form/index.vue
index 7591507586d..e981f0f86b7 100644
--- a/src/views/demo/form/index.vue
+++ b/src/views/demo/form/index.vue
@@ -287,7 +287,7 @@
         //   ]
         // }
         resultField: 'list',
-        // use name as value
+        // use name as label
         labelField: 'name',
         // use id as value
         valueField: 'id',

From 28af98aae6ba808e22aab84c57e286549bc66fd6 Mon Sep 17 00:00:00 2001
From: M69W <M69W@M69W>
Date: Sat, 12 Jun 2021 19:08:25 +0800
Subject: [PATCH 3/3] revert(ApiSelect): remove console

---
 src/components/Form/src/components/ApiSelect.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Form/src/components/ApiSelect.vue b/src/components/Form/src/components/ApiSelect.vue
index 680ce6db1aa..9fc5160d956 100644
--- a/src/components/Form/src/components/ApiSelect.vue
+++ b/src/components/Form/src/components/ApiSelect.vue
@@ -108,7 +108,6 @@
         try {
           loading.value = true;
           const res = await api(props.params);
-          console.log('fetch', res);
           if (Array.isArray(res)) {
             options.value = res;
             emitChange();