From 837a3658852f350adb9095fb3741a686fa9ff780 Mon Sep 17 00:00:00 2001 From: matevip <57164338+matevip@users.noreply.github.com> Date: Tue, 17 Aug 2021 15:07:22 +0800 Subject: [PATCH 01/59] =?UTF-8?q?docs:=20Readme=E5=A2=9E=E5=8A=A0=E5=90=8E?= =?UTF-8?q?=E5=8F=B0=E6=95=B4=E5=90=88=E7=A4=BA=E4=BE=8B=20(#1087)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.zh-CN.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.zh-CN.md b/README.zh-CN.md index 00e490f4..930fba59 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -150,6 +150,7 @@ yarn build ## 后台整合示例 - [lamp-cloud](https://github.com/zuihou/lamp-cloud) - 基于 SpringCloud Alibaba 的微服务中后台快速开发平台 +- [matecloud](https://github.com/matevip/matecloud) - MateCloud微服务脚手架，基于Spring Cloud 2020.0.3、SpringBoot 2.5.3的全开源平台 ## 维护者 From 5138e447e74ef01309457d22f44129c8b1b2f815 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= Date: Tue, 17 Aug 2021 17:09:48 +0800 Subject: [PATCH 02/59] fix: `slots` worked in `basicTable` and `basicModal` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复basicTable和basicModal的插槽传递异常的问题 --- src/components/Modal/src/BasicModal.vue | 2 +- src/components/Table/src/BasicTable.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Modal/src/BasicModal.vue b/src/components/Modal/src/BasicModal.vue index 83bcd1e0..3ecfcb13 100644 --- a/src/components/Modal/src/BasicModal.vue +++ b/src/components/Modal/src/BasicModal.vue @@ -44,7 +44,7 @@ diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue index 329dc98b..64f68db9 100644 --- a/src/components/Table/src/BasicTable.vue +++ b/src/components/Table/src/BasicTable.vue @@ -10,7 +10,7 @@ @advanced-change="redoHeight" > From 47a448b8aea572e54dac97dc4f9fb6c1c005685a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= Date: Tue, 17 Aug 2021 17:50:54 +0800 Subject: [PATCH 03/59] feat(form): add `Divider` for schema component type MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增Divider用于较长表单的区域分割 --- CHANGELOG.zh_CN.md | 8 ++ src/components/Form/src/BasicForm.vue | 8 +- src/components/Form/src/componentMap.ts | 2 + .../Form/src/components/FormItem.vue | 78 +++++++++++-------- .../Form/src/hooks/useFormEvents.ts | 8 +- src/components/Form/src/types/index.ts | 3 +- src/views/demo/form/AdvancedForm.vue | 9 ++- src/views/demo/form/index.vue | 15 ++++ 8 files changed, 92 insertions(+), 39 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 62ae8191..9ce213c3 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -1,3 +1,11 @@ +### ✨ Features + +- **BasicForm** 表单组件新增`Divider`，用于较长表单的区域分割 + +### 🐛 Bug Fixes + +- **其它** 修复部分封装组件在使用插槽时报错的问题 + ## 2.7.1(2021-08-16) - 升级 vue 3.2,如果运行失败，删除 node_modules 后重装即可 diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue index 7e900de6..552fd635 100644 --- a/src/components/Form/src/BasicForm.vue +++ b/src/components/Form/src/BasicForm.vue @@ -29,7 +29,7 @@ #[item]="data" v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']" > - + @@ -132,7 +132,11 @@ } } } - return schemas as FormSchema[]; + if (unref(getProps).showAdvancedButton) { + return schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[]; + } else { + return schemas as FormSchema[]; + } }); const { handleToggleAdvanced } = useAdvanced({ diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts index 5b512418..4bfbdf11 100644 --- a/src/components/Form/src/componentMap.ts +++ b/src/components/Form/src/componentMap.ts @@ -18,6 +18,7 @@ import { TreeSelect, Slider, Rate, + Divider, } from 'ant-design-vue'; import RadioButtonGroup from './components/RadioButtonGroup.vue'; @@ -61,6 +62,7 @@ componentMap.set('IconPicker', IconPicker); componentMap.set('InputCountDown', CountdownInput); componentMap.set('Upload', BasicUpload); +componentMap.set('Divider', Divider); export function add(compName: ComponentType, component: Component) { componentMap.set(compName, component); diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue index 92359542..67832ac4 100644 --- a/src/components/Form/src/components/FormItem.vue +++ b/src/components/Form/src/components/FormItem.vue @@ -5,7 +5,7 @@ import type { ValidationRule } from 'ant-design-vue/lib/form/Form'; import type { TableActionType } from '/@/components/Table'; import { defineComponent, computed, unref, toRefs } from 'vue'; - import { Form, Col } from 'ant-design-vue'; + import { Form, Col, Divider } from 'ant-design-vue'; import { componentMap } from '../componentMap'; import { BasicHelp } from '/@/components/Basic'; import { isBoolean, isFunction, isNull } from '/@/utils/is'; @@ -73,11 +73,17 @@ const getComponentsProps = computed(() => { const { schema, tableAction, formModel, formActionType } = props; - const { componentProps = {} } = schema; - if (!isFunction(componentProps)) { - return componentProps; + let { componentProps = {} } = schema; + if (isFunction(componentProps)) { + componentProps = componentProps({ schema, tableAction, formModel, formActionType }) ?? {}; } - return componentProps({ schema, tableAction, formModel, formActionType }) ?? {}; + if (schema.component === 'Divider') { + componentProps = Object.assign({ type: 'horizontal' }, componentProps, { + orientation: 'left', + plain: true, + }); + } + return componentProps; }); const getDisable = computed(() => { @@ -300,38 +306,46 @@ } function renderItem() { - const { itemProps, slot, render, field, suffix } = props.schema; + const { itemProps, slot, render, field, suffix, component, label } = props.schema; const { labelCol, wrapperCol } = unref(itemLabelWidthProp); const { colon } = props.formProps; - const getContent = () => { - return slot - ? getSlot(slots, slot, unref(getValues)) - : render - ? render(unref(getValues)) - : renderComponent(); - }; + if (component === 'Divider') { + return ( + + {label} + + ); + } else { + const getContent = () => { + return slot + ? getSlot(slots, slot, unref(getValues)) + : render + ? render(unref(getValues)) + : renderComponent(); + }; - const showSuffix = !!suffix; - const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix; + const showSuffix = !!suffix; + const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix; - return ( - -
-
{getContent()}
- {showSuffix && {getSuffix}} -
- - ); + return ( + +
+
{getContent()}
+ {showSuffix && {getSuffix}} +
+ + ); + } } return () => { diff --git a/src/components/Form/src/hooks/useFormEvents.ts b/src/components/Form/src/hooks/useFormEvents.ts index cb09833e..92a08989 100644 --- a/src/components/Form/src/hooks/useFormEvents.ts +++ b/src/components/Form/src/hooks/useFormEvents.ts @@ -149,7 +149,9 @@ export function useFormEvents({ updateData = [...data]; } - const hasField = updateData.every((item) => Reflect.has(item, 'field') && item.field); + const hasField = updateData.every( + (item) => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field) + ); if (!hasField) { error( @@ -169,7 +171,9 @@ export function useFormEvents({ updateData = [...data]; } - const hasField = updateData.every((item) => Reflect.has(item, 'field') && item.field); + const hasField = updateData.every( + (item) => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field) + ); if (!hasField) { error( diff --git a/src/components/Form/src/types/index.ts b/src/components/Form/src/types/index.ts index 1d73d72f..1cd6a02c 100644 --- a/src/components/Form/src/types/index.ts +++ b/src/components/Form/src/types/index.ts @@ -109,4 +109,5 @@ export type ComponentType = | 'IconPicker' | 'Render' | 'Slider' - | 'Rate'; + | 'Rate' + | 'Divider'; diff --git a/src/views/demo/form/AdvancedForm.vue b/src/views/demo/form/AdvancedForm.vue index 03bb1657..48726989 100644 --- a/src/views/demo/form/AdvancedForm.vue +++ b/src/views/demo/form/AdvancedForm.vue @@ -12,7 +12,7 @@ diff --git a/src/views/demo/comp/cropper/index.vue b/src/views/demo/comp/cropper/index.vue index fda0f33c..49a6c6c5 100644 --- a/src/views/demo/comp/cropper/index.vue +++ b/src/views/demo/comp/cropper/index.vue @@ -73,7 +73,7 @@ handleCropend, handleCircleCropend, avatar, - uploadApi, + uploadApi: uploadApi as any, }; }, }); diff --git a/src/views/demo/comp/qrcode/index.vue b/src/views/demo/comp/qrcode/index.vue index 98534f7d..b1926900 100644 --- a/src/views/demo/comp/qrcode/index.vue +++ b/src/views/demo/comp/qrcode/index.vue @@ -98,7 +98,7 @@ qrEl.download('Qrcode'); } - function onQrcodeDone({ ctx }) { + function onQrcodeDone({ ctx }: any) { if (ctx instanceof CanvasRenderingContext2D) { // 额外绘制 ctx.fillStyle = 'black'; diff --git a/src/views/demo/page/account/setting/BaseSetting.vue b/src/views/demo/page/account/setting/BaseSetting.vue index 2968a966..20a6ebea 100644 --- a/src/views/demo/page/account/setting/BaseSetting.vue +++ b/src/views/demo/page/account/setting/BaseSetting.vue @@ -74,7 +74,7 @@ return { avatar, register, - uploadApi, + uploadApi: uploadApi as any, updateAvatar, handleSubmit: () => { createMessage.success('更新成功！'); diff --git a/src/views/demo/page/list/search/index.vue b/src/views/demo/page/list/search/index.vue index 391565c8..cb2258b1 100644 --- a/src/views/demo/page/list/search/index.vue +++ b/src/views/demo/page/list/search/index.vue @@ -19,7 +19,7 @@ {{ item.content }}
- diff --git a/src/api/sys/upload.ts b/src/api/sys/upload.ts index 1f1b4389..c47baf43 100644 --- a/src/api/sys/upload.ts +++ b/src/api/sys/upload.ts @@ -10,13 +10,13 @@ const { uploadUrl = '' } = useGlobSetting(); */ export function uploadApi( params: UploadFileParams, - onUploadProgress: (progressEvent: ProgressEvent) => void + onUploadProgress: (progressEvent: ProgressEvent) => void, ) { return defHttp.uploadFile( { url: uploadUrl, onUploadProgress, }, - params + params, ); } diff --git a/src/api/sys/user.ts b/src/api/sys/user.ts index c0c88d31..da9f7a29 100644 --- a/src/api/sys/user.ts +++ b/src/api/sys/user.ts @@ -21,7 +21,7 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal') }, { errorMessageMode: mode, - } + }, ); } diff --git a/src/components/Application/src/AppDarkModeToggle.vue b/src/components/Application/src/AppDarkModeToggle.vue index 6b07d92d..6df9c499 100644 --- a/src/components/Application/src/AppDarkModeToggle.vue +++ b/src/components/Application/src/AppDarkModeToggle.vue @@ -1,6 +1,6 @@ diff --git a/src/components/Tree/src/props.ts b/src/components/Tree/src/props.ts index 287d2f95..faa5c03f 100644 --- a/src/components/Tree/src/props.ts +++ b/src/components/Tree/src/props.ts @@ -80,10 +80,17 @@ export const basicProps = { >, default: null, }, + // 高亮搜索值，仅高亮具体匹配值（通过title）值为true时使用默认色值，值为#xxx时使用此值替代且高亮开启 + highlight: { + type: [Boolean, String] as PropType, + default: false, + }, // 搜索完成时自动展开结果 expandOnSearch: propTypes.bool.def(false), // 搜索完成自动选中所有结果,当且仅当 checkable===true 时生效 checkOnSearch: propTypes.bool.def(false), + // 搜索完成自动select所有结果 + selectedOnSearch: propTypes.bool.def(false), }; export const treeNodeProps = { From 59a90877287a289f746eec97d12c2d3a1d5476b0 Mon Sep 17 00:00:00 2001 From: frezs Date: Mon, 6 Sep 2021 09:14:12 +0800 Subject: [PATCH 42/59] =?UTF-8?q?feat(table):=20=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=92=8C=E6=94=AF=E6=8C=81=E5=8A=A8=E6=80=81=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E5=92=8C=E6=8F=92=E5=85=A5=E6=95=B0=E6=8D=AE=20(#1152)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Table/src/BasicTable.vue | 4 +++ .../Table/src/hooks/useDataSource.ts | 27 +++++++++++++++++++ src/components/Table/src/hooks/useTable.ts | 6 +++++ src/components/Table/src/types/table.ts | 2 ++ 4 files changed, 39 insertions(+) diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue index b584e73d..1b74089a 100644 --- a/src/components/Table/src/BasicTable.vue +++ b/src/components/Table/src/BasicTable.vue @@ -141,6 +141,8 @@ getRawDataSource, setTableData, updateTableDataRecord, + deleteTableDataRecord, + insertTableDataRecord, findTableDataRecord, fetch, getRowKey, @@ -279,6 +281,8 @@ setPagination, setTableData, updateTableDataRecord, + deleteTableDataRecord, + insertTableDataRecord, findTableDataRecord, redoHeight, setSelectedRowKeys, diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts index 03c6a894..60abceb0 100644 --- a/src/components/Table/src/hooks/useDataSource.ts +++ b/src/components/Table/src/hooks/useDataSource.ts @@ -160,6 +160,31 @@ export function useDataSource( } } + function deleteTableDataRecord(record: Recordable | Recordable[]): Recordable | undefined { + if (!dataSourceRef.value || dataSourceRef.value.length == 0) return; + const records = !Array.isArray(record) ? [record] : record; + const recordIndex = records + .map((item) => dataSourceRef.value.findIndex((s) => s.key === item.key)) // 取序号 + .filter((item) => item !== undefined) + .sort((a, b) => b - a); // 从大到小排序 + for (const index of recordIndex) { + unref(dataSourceRef).splice(index, 1); + unref(propsRef).dataSource?.splice(index, 1); + } + setPagination({ + total: unref(propsRef).dataSource?.length, + }); + return unref(propsRef).dataSource; + } + + function insertTableDataRecord(record: Recordable, index: number): Recordable | undefined { + if (!dataSourceRef.value || dataSourceRef.value.length == 0) return; + index = index ?? dataSourceRef.value?.length; + unref(dataSourceRef).splice(index, 0, record); + unref(propsRef).dataSource?.splice(index, 0, record); + return unref(propsRef).dataSource; + } + function findTableDataRecord(rowKey: string | number) { if (!dataSourceRef.value || dataSourceRef.value.length == 0) return; @@ -314,6 +339,8 @@ export function useDataSource( reload, updateTableData, updateTableDataRecord, + deleteTableDataRecord, + insertTableDataRecord, findTableDataRecord, handleTableChange, }; diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts index 2a3377f7..26139fe6 100644 --- a/src/components/Table/src/hooks/useTable.ts +++ b/src/components/Table/src/hooks/useTable.ts @@ -122,6 +122,12 @@ export function useTable(tableProps?: Props): [ updateTableData: (index: number, key: string, value: any) => { return getTableInstance().updateTableData(index, key, value); }, + deleteTableDataRecord: (record: Recordable | Recordable[]) => { + return getTableInstance().deleteTableDataRecord(record); + }, + insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => { + return getTableInstance().insertTableDataRecord(record, index); + }, updateTableDataRecord: (rowKey: string | number, record: Recordable) => { return getTableInstance().updateTableDataRecord(rowKey, record); }, diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts index 2cf32ec4..7660b0fc 100644 --- a/src/components/Table/src/types/table.ts +++ b/src/components/Table/src/types/table.ts @@ -95,6 +95,8 @@ export interface TableActionType { setPagination: (info: Partial) => void; setTableData: (values: T[]) => void; updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void; + deleteTableDataRecord: (record: Recordable | Recordable[]) => Recordable | void; + insertTableDataRecord: (record: Recordable, index?: number) => Recordable | void; findTableDataRecord: (rowKey: string | number) => Recordable | void; getColumns: (opt?: GetColumnsParams) => BasicColumn[]; setColumns: (columns: BasicColumn[] | string[]) => void; From 044e2e4e866dd5b120daab03c47aba1ca1f9140a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= Date: Mon, 6 Sep 2021 20:12:48 +0800 Subject: [PATCH 43/59] fix(table): `rowClassName` not worked with `striped` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复rowClassName属性无法和striped同时生效的问题 fixed: #1167 --- CHANGELOG.zh_CN.md | 1 + src/components/Table/src/hooks/useTableStyle.ts | 11 +++++++---- src/components/Table/src/types/table.ts | 4 ++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index a297bdb7..54142c3b 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -4,6 +4,7 @@ - **BasicTable** - 单元格编辑新增提交回调，将根据回调函数返回的结果来决定是否将数据提交到表格 - 行编辑添加校验方法，允许只校验而不提交值，以便异步保存数据成功后才提交倒表格 + - 修复`rowClassName`属性无法和`striped`同时使用的问题 ### 🐛 Bug Fixes diff --git a/src/components/Table/src/hooks/useTableStyle.ts b/src/components/Table/src/hooks/useTableStyle.ts index 77783e6f..292187d8 100644 --- a/src/components/Table/src/hooks/useTableStyle.ts +++ b/src/components/Table/src/hooks/useTableStyle.ts @@ -6,11 +6,14 @@ import { isFunction } from '/@/utils/is'; export function useTableStyle(propsRef: ComputedRef, prefixCls: string) { function getRowClassName(record: TableCustomRecord, index: number) { const { striped, rowClassName } = unref(propsRef); - if (!striped) return; - if (rowClassName && isFunction(rowClassName)) { - return rowClassName(record); + const classNames: string[] = []; + if (striped) { + classNames.push((index || 0) % 2 === 1 ? `${prefixCls}-row__striped` : ''); } - return (index || 0) % 2 === 1 ? `${prefixCls}-row__striped` : ''; + if (rowClassName && isFunction(rowClassName)) { + classNames.push(rowClassName(record, index)); + } + return classNames.filter((cls) => !!cls).join(' '); } return { getRowClassName }; diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts index 7660b0fc..f9df66cf 100644 --- a/src/components/Table/src/types/table.ts +++ b/src/components/Table/src/types/table.ts @@ -25,7 +25,7 @@ export interface TableRowSelection extends ITableRowSelection { /** * Callback executed when select/deselect one row - * @type FunctionT + * @type Function */ onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any; @@ -291,7 +291,7 @@ export interface BasicTableProps { * Row's className * @type Function */ - rowClassName?: (record: TableCustomRecord) => string; + rowClassName?: (record: TableCustomRecord, index: number) => string; /** * Row selection config From 83c1683bfdcf4ea33de771895b46e41f276969e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= Date: Mon, 6 Sep 2021 20:36:19 +0800 Subject: [PATCH 44/59] feat(demo): add `JsonPreview` demo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加JsonPreview组件的使用演示 close: #1146 --- src/views/demo/editor/json/index.vue | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/views/demo/editor/json/index.vue b/src/views/demo/editor/json/index.vue index 622da81b..ada1d5b3 100644 --- a/src/views/demo/editor/json/index.vue +++ b/src/views/demo/editor/json/index.vue @@ -14,8 +14,8 @@ + + diff --git a/src/views/demo/editor/markdown/index.vue b/src/views/demo/editor/markdown/index.vue index 56a5f5f0..968bd910 100644 --- a/src/views/demo/editor/markdown/index.vue +++ b/src/views/demo/editor/markdown/index.vue @@ -1,22 +1,30 @@