From a03d3cc60c770eba644c1f3837850a2c1c015029 Mon Sep 17 00:00:00 2001
From: M69W <15809201+M69W@users.noreply.github.com>
Date: Mon, 14 Jun 2021 22:10:41 +0800
Subject: [PATCH] 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           | 15 +++++++++------
 src/api/demo/model/optionsModel.ts |  4 ++++
 src/api/demo/select.ts             |  5 +++--
 src/views/demo/form/index.vue      | 28 ++++++++++++++++++++++++++++
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/mock/demo/select-demo.ts b/mock/demo/select-demo.ts
index d962d27b..49692292 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 c65dc7c9..c15ef8fd 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 cb04bea2..fd8c7968 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/views/demo/form/index.vue b/src/views/demo/form/index.vue
index 2f5e91bd..e981f0f8 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 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',
     },
     {
-- 
GitLab