From d81db890dfeb533d60f378ddb86f8ac50a31252b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= Date: Thu, 15 Jul 2021 18:05:13 +0800 Subject: [PATCH] feat(api-tree-select): add `api` options to tree-select MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加ApiTreeSelect组件 --- CHANGELOG.zh_CN.md | 1 + mock/demo/tree-demo.ts | 38 +++++++++++++++++++ src/api/demo/tree.ts | 11 ++++++ src/components/Form/src/componentMap.ts | 2 + .../Form/src/components/ApiTreeSelect.vue | 1 + src/components/Form/src/types/index.ts | 1 + src/views/demo/form/index.vue | 15 ++++++++ src/views/demo/table/EditCellTable.vue | 3 ++ src/views/demo/table/EditRowTable.vue | 7 ++++ 9 files changed, 79 insertions(+) create mode 100644 mock/demo/tree-demo.ts create mode 100644 src/api/demo/tree.ts create mode 100644 src/components/Form/src/components/ApiTreeSelect.vue diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 577c7f0e..07532718 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -2,6 +2,7 @@ - **NoticeList** 添加分页、超长自动省略、标题点击事件、标题删除线等功能 - **MixSider** 优化 Mix 菜单布局时 底部折叠按钮 的样式，与其它菜单布局时的风格保持一致 +- **ApiTreeSelect** 扩展`antdv`的`TreeSelect`组件，支持远程数据源，用法类似`ApiSelect` - 可以为不同的用户指定不同的后台首页： - 在`getUserInfo`接口返回的用户信息中增加`homePath`字段(可选)即可为当前用户定制首页路径 diff --git a/mock/demo/tree-demo.ts b/mock/demo/tree-demo.ts new file mode 100644 index 00000000..6fdcb859 --- /dev/null +++ b/mock/demo/tree-demo.ts @@ -0,0 +1,38 @@ +import { MockMethod } from 'vite-plugin-mock'; +import { resultSuccess } from '../_util'; + +const demoTreeList = (keyword) => { + const result = { + list: [] as Recordable[], + }; + for (let index = 0; index < 5; index++) { + const children: Recordable[] = []; + for (let j = 0; j < 3; j++) { + children.push({ + title: `${keyword ?? ''}选项${index}-${j}`, + value: `${index}-${j}`, + key: `${index}-${j}`, + }); + } + result.list.push({ + title: `${keyword ?? ''}选项${index}`, + value: `${index}`, + key: `${index}`, + children, + }); + } + return result; +}; + +export default [ + { + url: '/basic-api/tree/getDemoOptions', + timeout: 1000, + method: 'get', + response: ({ query }) => { + const { keyword } = query; + console.log(keyword); + return resultSuccess(demoTreeList(keyword)); + }, + }, +] as MockMethod[]; diff --git a/src/api/demo/tree.ts b/src/api/demo/tree.ts new file mode 100644 index 00000000..8b8a94f1 --- /dev/null +++ b/src/api/demo/tree.ts @@ -0,0 +1,11 @@ +import { defHttp } from '/@/utils/http/axios'; + +enum Api { + TREE_OPTIONS_LIST = '/tree/getDemoOptions', +} + +/** + * @description: Get sample options value + */ +export const treeOptionsListApi = (params?: Recordable) => + defHttp.get({ url: Api.TREE_OPTIONS_LIST, params }); diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts index 2e3d5b6e..5b512418 100644 --- a/src/components/Form/src/componentMap.ts +++ b/src/components/Form/src/componentMap.ts @@ -22,6 +22,7 @@ import { import RadioButtonGroup from './components/RadioButtonGroup.vue'; import ApiSelect from './components/ApiSelect.vue'; +import ApiTreeSelect from './components/ApiTreeSelect.vue'; import { BasicUpload } from '/@/components/Upload'; import { StrengthMeter } from '/@/components/StrengthMeter'; import { IconPicker } from '/@/components/Icon'; @@ -40,6 +41,7 @@ componentMap.set('AutoComplete', AutoComplete); componentMap.set('Select', Select); componentMap.set('ApiSelect', ApiSelect); componentMap.set('TreeSelect', TreeSelect); +componentMap.set('ApiTreeSelect', ApiTreeSelect); componentMap.set('Switch', Switch); componentMap.set('RadioButtonGroup', RadioButtonGroup); componentMap.set('RadioGroup', Radio.Group); diff --git a/src/components/Form/src/components/ApiTreeSelect.vue b/src/components/Form/src/components/ApiTreeSelect.vue new file mode 100644 index 00000000..beec8f57 --- /dev/null +++ b/src/components/Form/src/components/ApiTreeSelect.vue @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Form/src/types/index.ts b/src/components/Form/src/types/index.ts index 34fde9a2..1d73d72f 100644 --- a/src/components/Form/src/types/index.ts +++ b/src/components/Form/src/types/index.ts @@ -91,6 +91,7 @@ export type ComponentType = | 'Select' | 'ApiSelect' | 'TreeSelect' + | 'ApiTreeSelect' | 'RadioButtonGroup' | 'RadioGroup' | 'Checkbox' diff --git a/src/views/demo/form/index.vue b/src/views/demo/form/index.vue index bbb2f7db..ceab1f95 100644 --- a/src/views/demo/form/index.vue +++ b/src/views/demo/form/index.vue @@ -46,6 +46,7 @@ import { optionsListApi } from '/@/api/demo/select'; import { useDebounceFn } from '@vueuse/core'; + import { treeOptionsListApi } from '/@/api/demo/tree'; const provincesOptions = [ { @@ -347,6 +348,20 @@ }, defaultValue: '0', }, + { + field: 'field33', + component: 'ApiTreeSelect', + label: '远程下拉树', + helpMessage: ['ApiTreeSelect组件', '使用接口提供的数据生成选项'], + required: true, + componentProps: { + api: treeOptionsListApi, + resultField: 'list', + }, + colProps: { + span: 8, + }, + }, { field: 'field20', component: 'InputNumber', diff --git a/src/views/demo/table/EditCellTable.vue b/src/views/demo/table/EditCellTable.vue index 17ab991b..2cd3b1fe 100644 --- a/src/views/demo/table/EditCellTable.vue +++ b/src/views/demo/table/EditCellTable.vue @@ -84,6 +84,9 @@ editComponent: 'ApiSelect', editComponentProps: { api: optionsListApi, + resultField: 'list', + labelField: 'name', + valueField: 'id', }, width: 200, }, diff --git a/src/views/demo/table/EditRowTable.vue b/src/views/demo/table/EditRowTable.vue index 2b764492..371bd981 100644 --- a/src/views/demo/table/EditRowTable.vue +++ b/src/views/demo/table/EditRowTable.vue @@ -80,6 +80,10 @@ label: 'Option2', value: '2', }, + { + label: 'Option3', + value: '3', + }, ], }, width: 200, @@ -91,6 +95,9 @@ editComponent: 'ApiSelect', editComponentProps: { api: optionsListApi, + resultField: 'list', + labelField: 'name', + valueField: 'id', }, width: 200, }, -- GitLab