From 52af1dd0d494e66c0af20f886dcc2b983cbb096f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= Date: Mon, 19 Jul 2021 16:25:56 +0800 Subject: [PATCH] feat(basic-table): add `ApiTreeSelect` edit component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 为表格添加ApiTreeSelect编辑组件，修复一些其它的已知问题 --- CHANGELOG.zh_CN.md | 3 +++ src/components/Form/index.ts | 1 + src/components/Table/src/componentMap.ts | 3 ++- .../src/components/editable/CellComponent.ts | 2 +- .../src/components/editable/EditableCell.vue | 19 ++++++++++++-- .../Table/src/types/componentType.ts | 1 + src/views/demo/table/EditCellTable.vue | 25 ++++++++++--------- src/views/demo/table/EditRowTable.vue | 23 +++++++++-------- 8 files changed, 50 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index eb5f6dad..29bca093 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -3,6 +3,7 @@ - **NoticeList** 添加分页、超长自动省略、标题点击事件、标题删除线等功能 - **MixSider** 优化 Mix 菜单布局时 底部折叠按钮 的样式，与其它菜单布局时的风格保持一致 - **ApiTreeSelect** 扩展`antdv`的`TreeSelect`组件，支持远程数据源，用法类似`ApiSelect` +- **BasicTable** 新增`ApiTreeSelect`编辑组件 - 可以为不同的用户指定不同的后台首页： - 在`getUserInfo`接口返回的用户信息中增加`homePath`字段(可选)即可为当前用户定制首页路径 @@ -14,6 +15,8 @@ - 新增`headerTop`插槽 - 修复操作列的按钮在 disabled 状态下的颜色显示 - 修复可编辑单元格的值不能直接通过修改`dataSource`来更新显示的问题 + - 修复使用`ApiSelect`编辑组件时的数据回显问题 + - 修复在部分场景下编辑组件可能会报`onXXX`类型错误的问题 - **TableAction** - 仅在 `action.tooltip`存在的情况下 才创建 Tooltip 组件 - 修复组件内的圆形按钮内容没有居中的问题 diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts index 8775cf8e..f9cce5e4 100644 --- a/src/components/Form/index.ts +++ b/src/components/Form/index.ts @@ -8,5 +8,6 @@ export { useForm } from './src/hooks/useForm'; export { default as ApiSelect } from './src/components/ApiSelect.vue'; export { default as RadioButtonGroup } from './src/components/RadioButtonGroup.vue'; +export { default as ApiTreeSelect } from './src/components/ApiTreeSelect.vue'; export { BasicForm }; diff --git a/src/components/Table/src/componentMap.ts b/src/components/Table/src/componentMap.ts index 0f9d8efe..265b7c7f 100644 --- a/src/components/Table/src/componentMap.ts +++ b/src/components/Table/src/componentMap.ts @@ -9,7 +9,7 @@ import { TimePicker, } from 'ant-design-vue'; import type { ComponentType } from './types/componentType'; -import { ApiSelect } from '/@/components/Form'; +import { ApiSelect, ApiTreeSelect } from '/@/components/Form'; const componentMap = new Map(); @@ -17,6 +17,7 @@ componentMap.set('Input', Input); componentMap.set('InputNumber', InputNumber); componentMap.set('Select', Select); componentMap.set('ApiSelect', ApiSelect); +componentMap.set('ApiTreeSelect', ApiTreeSelect); componentMap.set('Switch', Switch); componentMap.set('Checkbox', Checkbox); componentMap.set('DatePicker', DatePicker); diff --git a/src/components/Table/src/components/editable/CellComponent.ts b/src/components/Table/src/components/editable/CellComponent.ts index 897954f0..d2a25986 100644 --- a/src/components/Table/src/components/editable/CellComponent.ts +++ b/src/components/Table/src/components/editable/CellComponent.ts @@ -19,7 +19,7 @@ export const CellComponent: FunctionalComponent = ( const Comp = componentMap.get(component) as typeof defineComponent; const DefaultComp = h(Comp, attrs); - if (!rule) { + if (!rule || !popoverVisible) { return DefaultComp; } return h( diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue index cfc5a583..0477de83 100644 --- a/src/components/Table/src/components/editable/EditableCell.vue +++ b/src/components/Table/src/components/editable/EditableCell.vue @@ -45,6 +45,7 @@ import { isString, isBoolean, isFunction, isNumber, isArray } from '/@/utils/is'; import { createPlaceholderMessage } from './helper'; import { set, omit } from 'lodash-es'; + import { treeToList } from '/@/utils/helper/treeHelper'; export default defineComponent({ name: 'EditableCell', @@ -276,9 +277,23 @@ } } - // only ApiSelect + // only ApiSelect or TreeSelect function handleOptionsChange(options: LabelValueOptions) { - optionsRef.value = options; + const { replaceFields } = props.column?.editComponentProps ?? {}; + const component = unref(getComponent); + if (component === 'ApiTreeSelect') { + const { title = 'title', value = 'value', children = 'children' } = replaceFields || {}; + let listOptions: Recordable[] = treeToList(options, { children }); + listOptions = listOptions.map((item) => { + return { + label: item[title], + value: item[value], + }; + }); + optionsRef.value = listOptions as LabelValueOptions; + } else { + optionsRef.value = options; + } } function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) { diff --git a/src/components/Table/src/types/componentType.ts b/src/components/Table/src/types/componentType.ts index b7edbfe1..48d5a7aa 100644 --- a/src/components/Table/src/types/componentType.ts +++ b/src/components/Table/src/types/componentType.ts @@ -3,6 +3,7 @@ export type ComponentType = | 'InputNumber' | 'Select' | 'ApiSelect' + | 'ApiTreeSelect' | 'Checkbox' | 'Switch' | 'DatePicker' diff --git a/src/views/demo/table/EditCellTable.vue b/src/views/demo/table/EditCellTable.vue index 0be5bf8c..8131f416 100644 --- a/src/views/demo/table/EditCellTable.vue +++ b/src/views/demo/table/EditCellTable.vue @@ -8,12 +8,12 @@