canrd-outside / order-erp-front · Commits

Commit a03d3cc60c770eba644c1f3837850a2c1c015029

Authored by M69W
Committed by GitHub
1 parent bbce002b

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>
Inline Side-by-side
Showing 4 changed files with 44 additions and 8 deletions
mock/demo/select-demo.ts
  View file @a03d3cc
1 1 import { MockMethod } from 'vite-plugin-mock';
2 2 import { resultSuccess } from '../_util';
3 3  
  4 +const list: any[] = [];
4 5 const demoList = (() => {
5   - const result: any[] = [];
  6 + const result = {
  7 + list: list,
  8 + };
6 9 for (let index = 0; index < 20; index++) {
7   - result.push({
8   - label: `选项${index}`,
9   - value: `${index}`,
  10 + result.list.push({
  11 + name: `选项${index}`,
  12 + id: `${index}`,
10 13 });
11 14 }
12 15 return result;
... ... @@ -15,8 +18,8 @@ const demoList = (() =&gt; {
15 18 export default [
16 19 {
17 20 url: '/basic-api/select/getDemoOptions',
18   - timeout: 2000,
19   - method: 'get',
  21 + timeout: 1000,
  22 + method: 'post',
20 23 response: ({ query }) => {
21 24 console.log(query);
22 25 return resultSuccess(demoList);
... ...
src/api/demo/model/optionsModel.ts
  View file @a03d3cc
... ... @@ -5,6 +5,10 @@ export interface DemoOptionsItem {
5 5 value: string;
6 6 }
7 7  
  8 +export interface selectParams {
  9 + id: number | string;
  10 +}
  11 +
8 12 /**
9 13 * @description: Request list return value
10 14 */
... ...
src/api/demo/select.ts
  View file @a03d3cc
1 1 import { defHttp } from '/@/utils/http/axios';
2   -import { DemoOptionsItem } from './model/optionsModel';
  2 +import { DemoOptionsItem, selectParams } from './model/optionsModel';
3 3 enum Api {
4 4 OPTIONS_LIST = '/select/getDemoOptions',
5 5 }
... ... @@ -7,4 +7,5 @@ enum Api {
7 7 /**
8 8 * @description: Get sample options value
9 9 */
10   -export const optionsListApi = () => defHttp.get<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST });
  10 +export const optionsListApi = (params?: selectParams) =>
  11 + defHttp.post<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST, params });
... ...
src/views/demo/form/index.vue
  View file @a03d3cc
... ... @@ -272,11 +272,39 @@
272 272 label: '远程下拉',
273 273 required: true,
274 274 componentProps: {
  275 + // more details see /src/components/Form/src/components/ApiSelect.vue
275 276 api: optionsListApi,
  277 + params: {
  278 + id: 1,
  279 + },
  280 + // use [res.data.result.list] (no res.data.result) as options datas
  281 + // result: {
  282 + // list: [
  283 + // {
  284 + // name: "选项0",
  285 + // id: "0"
  286 + // },
  287 + // ]
  288 + // }
  289 + resultField: 'list',
  290 + // use name as label
  291 + labelField: 'name',
  292 + // use id as value
  293 + valueField: 'id',
  294 + // not request untill to select
  295 + immediate: false,
  296 + onChange: (e) => {
  297 + console.log('selected:', e);
  298 + },
  299 + // atfer request callback
  300 + onOptionsChange: (options) => {
  301 + console.log('get options', options.length, options);
  302 + },
276 303 },
277 304 colProps: {
278 305 span: 8,
279 306 },
  307 + // set default value
280 308 defaultValue: '0',
281 309 },
282 310 {
... ...