diff --git a/packages/ui-vue/components/data-grid/src/property-config/data-grid-column.property-config.ts b/packages/ui-vue/components/data-grid/src/property-config/data-grid-column.property-config.ts index a92929d9c1301518671ef05dcdb0e2852f22f5e0..3cfd780fd732021124d2c1e6fdfa04cae83967ad 100644 --- a/packages/ui-vue/components/data-grid/src/property-config/data-grid-column.property-config.ts +++ b/packages/ui-vue/components/data-grid/src/property-config/data-grid-column.property-config.ts @@ -233,11 +233,6 @@ export class DataGriColumnProperty extends BaseControlProperty { title: '启用拖拽', type: 'boolean' }, - // filterable: { - // description: '启用过滤', - // title: '启用过滤', - // type: 'boolean' - // }, width: { description: '列宽', title: '列宽', diff --git a/packages/ui-vue/components/data-grid/src/property-config/data-grid.property-config.ts b/packages/ui-vue/components/data-grid/src/property-config/data-grid.property-config.ts index 9e28065757e9a8f06255685f6f98d2459cb9078b..8149e1a6d289a0814768de07ef06c50b1d76b520 100644 --- a/packages/ui-vue/components/data-grid/src/property-config/data-grid.property-config.ts +++ b/packages/ui-vue/components/data-grid/src/property-config/data-grid.property-config.ts @@ -1,6 +1,19 @@ -import { PropertyChangeObject } from "../../../property-panel/src/composition/entity/property-entity"; -import { BaseControlProperty } from "../../../property-panel/src/composition/entity/base-property"; +import { + useRowOption, + useColumnOption, + useCommandOption, + useGroup, + useSummary, + useDataGridEvent, + useSelection, + useRowNumber, + usePagination, + useAppearance, + useSort, + useFilter +} from "@farris/ui-vue/components/data-view/designer"; import { FormSchemaEntity } from "@farris/ui-vue/components/common"; +import { BaseControlProperty, PropertyChangeObject } from "@farris/ui-vue/components/property-panel"; export class DataGridProperty extends BaseControlProperty { @@ -9,22 +22,23 @@ export class DataGridProperty extends BaseControlProperty { } getPropertyConfig(propertyData: any) { - // 基本信息 this.getBasicPropConfig(propertyData); - // 外观 this.getAppearanceProperties(propertyData); // 操作列 - this.propertyConfig.categories['command'] = this.getCommandColumnProperties(propertyData); + this.propertyConfig.categories['command'] = useCommandOption().getCommandColumnProperties(propertyData); // 填充列宽,仅支持平分列宽 - this.propertyConfig.categories['column'] = this.getColumnOptionProperties(propertyData); + this.propertyConfig.categories['column'] = useColumnOption().getColumnOptionProperties(propertyData); // 行配置 增加行和单元格自定义样式 - this.propertyConfig.categories['rowOption'] = this.getRowOptionProperties(propertyData); + this.propertyConfig.categories['rowOption'] = useRowOption().getRowOptionProperties(propertyData); // 合计行 - this.propertyConfig.categories['summary'] = this.getSummaryProperties(propertyData); + this.propertyConfig.categories['summary'] = useSummary().getSummaryProperties(propertyData); // 分组配置 - this.propertyConfig.categories['group'] = this.getGroupProperties(propertyData); + this.propertyConfig.categories['group'] = useGroup().getGroupProperties(propertyData); + // 排序和过滤 + // this.propertyConfig.categories['sort'] = useSort().getSort(propertyData); + this.propertyConfig.categories['filter'] = useFilter().getFilter(propertyData); // 事件 this.getEventPropConfig(propertyData); @@ -70,160 +84,7 @@ export class DataGridProperty extends BaseControlProperty { }; } - private getRowOptionProperties(propertyData: any) { - return { - title: '行配置', - description: '', - properties: { - customRowStyle: { - title: '行样式', - type: 'string', - description: '自定义行样式', - editor: { - type: "code-editor", - language: "html", - } - }, - customCellStyle: { - title: '单元格样式', - type: 'string', - description: '自定义单元格样式', - editor: { - type: "code-editor", - language: "html", - } - } - } - }; - } - private getColumnOptionProperties(propertyData: any) { - return { - title: '填充列宽', - description: '', - properties: { - fitColumns: { - title: '启用', - type: 'boolean', - description: '启用填充列宽', - $converter: '/converter/column-option.converter', - refreshPanelAfterChanged: true - }, - // fitMode: { - // description: '', - // title: '填充模式', - // type: 'enum', - // visible: !!propertyData.column?.fitColumns, - // $converter: '/converter/column-option.converter', - // editor: { - // data: [ - // { id: 'average', name: '平分' }, - // { id: 'expand', name: '等比' } - // ] - // } - // }, - }, - setPropertyRelates(changeObject: PropertyChangeObject, data: any) { - switch (changeObject && changeObject.propertyID) { - case 'fitColumns': { - data.fit = changeObject.propertyValue; - // 列的拖拽列宽设置为false - if (data.columns) { - if (changeObject.propertyValue) { - data.columns.forEach((column: any) => { - column.resizable = false; - }); - } - } - break; - } - } - } - }; - } - private getCommandColumnProperties(propertyData: any) { - return { - title: '操作列', - description: '', - properties: { - enable: { - title: '启用', - type: 'boolean', - $converter: '/converter/column-command.converter', - description: '启用操作列', - refreshPanelAfterChanged: true - }, - // commands: { - // description: '', - // title: '命令', - // type: 'enum', - // editor: { - // data: [ - // { id: 'edit', name: '编辑' }, - // { id: 'remove', name: '删除' } - // ] - // } - // }, - // formatter: { - // title: '操作列模板', - // type: 'string', - // visible: false, - // description: '自定义操作列模板', - // refreshPanelAfterChanged: true, - // editor: { - // type: "code-editor", - // language: "html", - // } - // } - } - }; - } - - private getGroupProperties(propertyData: any) { - return { - title: '分组', - description: '', - properties: { - enable: { - title: '启用', - type: 'boolean', - description: '启用分组', - $converter: '/converter/group.converter', - refreshPanelAfterChanged: true - }, - showSummary: { - title: '显示分组合计行', - type: 'boolean', - visible: !!propertyData.group?.enable, - $converter: '/converter/group.converter', - description: '显示分组合计行' - } - - // groupFields: { - // title: '启用', - // type: 'boolean', - // description: '启用分组', - // refreshPanelAfterChanged: true - // } - } - }; - } - - private getSummaryProperties(propertyData: any) { - return { - title: '合计行', - description: '', - properties: { - enable: { - title: '启用', - type: 'boolean', - description: '启用合计行', - $converter: '/converter/summary.converter', - refreshPanelAfterChanged: true - } - } - }; - } /** * 将schema实体表组装成树 */ @@ -253,244 +114,24 @@ export class DataGridProperty extends BaseControlProperty { } private getAppearanceProperties(propertyData: any) { const self = this; - this.propertyConfig.categories['appearance'] = { - title: "外观", - properties: { - class: { - title: 'class样式', - type: 'string', - description: '组件的CSS样式' - }, - columns: { - title: "列设置", - description: "列设置", - type: "array", - editor: { - type: "grid-field-editor", - viewModelId: this.viewModelId, - gridData: propertyData, - getLatestGridData: (data) => { return propertyData; } - }, - // 这个属性，标记当属性变更得时候触发重新更新属性 - refreshPanelAfterChanged: true, - - }, - showStripe: { - title: "显示条纹", - type: "boolean", - description: "是否显示条纹" - }, - showBorder: { - title: "显示边框", - type: "boolean", - description: "是否显示边框" - }, - showSetting: { - title: "显示设置按钮", - type: "boolean", - description: "是否显示设置按钮" - }, - emptyTemplate: { - title: "空模板", - type: "string", - description: "空模板", - editor: { - type: "code-editor", - language: "html", - } - } - // useBlankWhenDataIsEmpty: { - // title: '空数据表格显示空白行', - // description: '表格没有数据时是否显示空白行', - // type: 'boolean', - // refreshPanelAfterChanged: true - // }, - // emptyDataHeight: { - // title: '空数据高度', - // type: 'number', - // description: '空数据行高度设置', - // min: 1, - // max: 1000 - // }, - }, - setPropertyRelates(changeObject: PropertyChangeObject, data: any) { - switch (changeObject && changeObject.propertyID) { - case 'useBlankWhenDataIsEmpty': - propertyData.emptyDataHeight = propertyData.useBlankWhenDataIsEmpty ? 36 : 240; - break; - case 'columns': - propertyData.columns = changeObject.propertyValue || []; - break; - } - } - }; - this.propertyConfig.categories['selection'] = { - title: '多选配置', - $converter: '/converter/grid-selection.converter', - parentPropertyID: 'editor', - properties: { - multiSelect: { - title: '启用多选', - type: 'boolean', - refreshPanelAfterChanged: true - }, - showCheckbox: { - visible: propertyData.selection == null ? false : propertyData.selection.multiSelect, - title: '显示复选框', - type: 'boolean', - refreshPanelAfterChanged: true - }, - showSelectAll: { - visible: propertyData.selection == null ? false : propertyData.selection.multiSelect && propertyData.selection.showCheckbox, - title: '显示全选', - type: 'boolean' - }, - keepSelectingOnPaging: { - visible: !!propertyData.selection?.multiSelect, - title: '启用跨页多选', - type: 'boolean' - }, - showSelection: { - title: '显示已选数据数量', - type: 'boolean' - } - }, - setPropertyRelates(changeObject: PropertyChangeObject, data: any) { - switch (changeObject && changeObject.propertyID) { - // 如果启用多选，则默认显示复选框；不启用多选，则默认不显示复选框 - case 'multiSelect': - propertyData.selection.showCheckbox = changeObject.propertyValue; - break; - } - } - }; + this.propertyConfig.categories['appearance'] = useAppearance().getDataGrid(propertyData, this.viewModelId); + this.propertyConfig.categories['selection'] = useSelection().getSelection(propertyData); /** * 默认表格上没有此属性propertyData.rowNumber，根据schema上的属性默认值写默认true或false */ - this.propertyConfig.categories['rowNumber'] = { - title: '行号配置', - $converter: '/converter/row-number.converter', - parentPropertyID: 'rowNumber', - properties: { - enable: { - title: '显示行号', - type: 'boolean', - refreshPanelAfterChanged: true - }, - width: { - visible: propertyData.rowNumber == null ? true : propertyData.rowNumber.enable, - title: '宽度', - type: 'number' - }, - heading: { - visible: propertyData.rowNumber == null ? true : propertyData.rowNumber.enable, - title: '标题', - type: 'string' - } - } - }; - this.propertyConfig.categories['pagination'] = { - title: '分页', - $converter: '/converter/pagination.converter', - parentPropertyID: 'pagination', - properties: { - enable: { - title: '启用分页', - type: 'boolean', - refreshPanelAfterChanged: true, - editor: { - readonly: this.isSubGrid() - } - }, - // mode: { - // visible: propertyData.pagination?.enable || false, - // title: '分页交互模式', - // type: "enum", - // editor: { - // type: "combo-list", - // textField: "value", - // valueField: "key", - // data: [{ "key": "client", "value": "客户端" }, { "key": "server", "value": "服务器端" }] - // } - // }, - showIndex: { - visible: propertyData.pagination?.enable || false, - title: '显示页码', - type: 'boolean' - }, - showLimits: { - visible: propertyData.pagination?.enable || false, - title: '显示分页条数', - type: 'boolean' - } - } - }; + this.propertyConfig.categories['rowNumber'] = useRowNumber().getRowNumber(propertyData); + this.propertyConfig.categories['pagination'] = usePagination().getPagination(propertyData, this.isSubGrid()); } private getEventPropConfig(propertyData: any) { const events = [ - { - "label": "onClickRow", - "name": "行点击事件" - }, - { - "label": "onSelectionChange", - "name": "行切换事件" - }, - { - "label": "onDoubleClickRow", - "name": "行双击事件" - }, + ...useDataGridEvent().initEvent(propertyData), { "label": "onEndEditCell", "name": "单元格结束编辑事件" - }, + } ]; - if (propertyData.pagination?.enable !== false) { - // 如果没有设置，默认是按照true处理的 - events.push({ - "label": "onPageIndexChanged", - "name": "切换页码事件" - }, - { - "label": "onPageSizeChanged", - "name": "分页条数变化事件" - }); - } - if (propertyData.command?.enable) { - // 如果没有设置，默认是按照true处理的 - events.push({ - "label": "onClickEditCommand", - "name": "操作列编辑事件" - }, - { - "label": "onClickDeleteCommand", - "name": "操作列删除事件" - }); - } - if (propertyData.selection?.multiSelect) { - // 启用多选，暴露多选事件 - events.push({ - "label": "onSelectItem", - "name": "选中行事件" - }, - { - "label": "onUnSelectItem", - "name": "取消选中行事件" - },); - } - if (propertyData.selection?.multiSelect && propertyData.selection?.showSelectAll) { - // 启用全选事件，暴露全选和取消全选事件 - events.push({ - "label": "onSelectAll", - "name": "全选事件" - }, - { - "label": "onUnSelectAll", - "name": "取消全选事件" - }); - } const self = this; const initialData = self.eventsEditorUtils['formProperties'](propertyData, self.viewModelId, events); const properties = self.createBaseEventProperty(initialData); diff --git a/packages/ui-vue/components/data-grid/src/schema/data-grid.schema.json b/packages/ui-vue/components/data-grid/src/schema/data-grid.schema.json index 27a9047d9653846902d97334634a059117ce4051..d86e4b647bd585ece56df4715256c6c6833daf9f 100644 --- a/packages/ui-vue/components/data-grid/src/schema/data-grid.schema.json +++ b/packages/ui-vue/components/data-grid/src/schema/data-grid.schema.json @@ -484,7 +484,8 @@ "properties": { "customRowStyle": { "description": "", - "type": "object" + "type": "string", + "default": "" }, "customCellStyle": { "description": "", @@ -698,12 +699,8 @@ }, "mode": { "description": "", - "type": "string", - "default": "client", - "enum": [ - "client", - "server" - ] + "type": "enum", + "default": "client" }, "multiSort": { "description": "", diff --git a/packages/ui-vue/components/data-view/designer.ts b/packages/ui-vue/components/data-view/designer.ts new file mode 100644 index 0000000000000000000000000000000000000000..f2f702aa54dd67f89d1abb9d3de31ffe23daddb0 --- /dev/null +++ b/packages/ui-vue/components/data-view/designer.ts @@ -0,0 +1,16 @@ +export * from './designer/use-designer-fit-column'; +export * from './designer/use-column'; +export * from './designer/use-visual-data'; +export * from './designer/property-config/use-row-option'; +export * from './designer/property-config/use-column-option'; +export * from './designer/property-config/use-command-option'; +export * from './designer/property-config/use-summary'; +export * from './designer/property-config/use-group'; +export * from './designer/property-config/use-event'; +export * from './designer/property-config/use-selection'; +export * from './designer/property-config/use-row-number'; +export * from './designer/property-config/use-pagination'; +export * from './designer/property-config/use-appearance'; +export * from './designer/property-config/use-sort'; +export * from './designer/property-config/use-filter'; + diff --git a/packages/ui-vue/components/data-view/designer/index.ts b/packages/ui-vue/components/data-view/designer/index.ts deleted file mode 100644 index b7ffb38ef79f56edbfe3dc58949773f610986d33..0000000000000000000000000000000000000000 --- a/packages/ui-vue/components/data-view/designer/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './use-designer-fit-column'; -export * from './use-column'; -export * from './use-visual-data'; diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-appearance.ts b/packages/ui-vue/components/data-view/designer/property-config/use-appearance.ts new file mode 100644 index 0000000000000000000000000000000000000000..df26c28b27b1feaecdca91926c64fba01524bad7 --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-appearance.ts @@ -0,0 +1,137 @@ +import { PropertyChangeObject } from "@farris/ui-vue/components/property-panel"; + +export function useAppearance() { + + function getCommon() { + return { + showStripe: { + title: "显示条纹", + type: "boolean", + description: "是否显示条纹" + }, + showBorder: { + title: "显示边框", + type: "boolean", + description: "是否显示边框" + }, + showSetting: { + title: "显示设置按钮", + type: "boolean", + description: "是否显示设置按钮" + }, + emptyTemplate: { + title: "空模板", + type: "string", + description: "空模板", + editor: { + type: "code-editor", + language: "html", + } + } + }; + } + function getDataGrid(propertyData: any, viewModelId: string) { + return { + title: "外观", + properties: { + class: { + title: 'class样式', + type: 'string', + description: '组件的CSS样式' + }, + columns: { + title: "列设置", + description: "列设置", + type: "array", + editor: { + type: "grid-field-editor", + viewModelId, + gridData: propertyData, + getLatestGridData: (data) => { return propertyData; } + }, + // 这个属性，标记当属性变更得时候触发重新更新属性 + refreshPanelAfterChanged: true, + }, + ...getCommon() + // useBlankWhenDataIsEmpty: { + // title: '空数据表格显示空白行', + // description: '表格没有数据时是否显示空白行', + // type: 'boolean', + // refreshPanelAfterChanged: true + // }, + // emptyDataHeight: { + // title: '空数据高度', + // type: 'number', + // description: '空数据行高度设置', + // min: 1, + // max: 1000 + // }, + }, + setPropertyRelates(changeObject: PropertyChangeObject, data: any) { + switch (changeObject && changeObject.propertyID) { + case 'useBlankWhenDataIsEmpty': + propertyData.emptyDataHeight = propertyData.useBlankWhenDataIsEmpty ? 36 : 240; + break; + case 'columns': + propertyData.columns = changeObject.propertyValue || []; + break; + } + } + }; + } + + function getTreeGrid(propertyData: any, viewModelId: string) { + return { + title: '外观', + properties: { + class: { + title: 'class样式', + type: 'string', + description: '组件的CSS样式' + }, + columns: { + title: '列设置', + description: '列设置', + $converter: '/converter/items-count.converter', + editor: { + type: "grid-field-editor", + viewModelId, + gridData: propertyData, + gridType: "tree-grid-column" + }, + // 这个属性，标记当属性变更得时候触发重新更新属性 + refreshPanelAfterChanged: true, + }, + ...getCommon() + // showTreeNodeIcons: { + // title: '显示图标', + // type: "boolean", + // description: '是否显示图标' + // }, + // showSetting: { + // title: '显示设置按钮', + // type: "boolean", + // description: '是否显示设置按钮', + // visible:false + // } + }, + setPropertyRelates(changeObject: PropertyChangeObject, data: any) { + switch (changeObject && changeObject.propertyID) { + case 'useBlankWhenDataIsEmpty': + propertyData.emptyDataHeight = propertyData.useBlankWhenDataIsEmpty ? 36 : 240; + break; + case 'fields': + propertyData.fields = changeObject.propertyValue || []; + break; + + } + } + }; + } + + function getAppearance() { + + } + + return { getDataGrid, getTreeGrid }; +} diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-column-option.ts b/packages/ui-vue/components/data-view/designer/property-config/use-column-option.ts new file mode 100644 index 0000000000000000000000000000000000000000..abe504e516f1e19fcb903b975e0a6e0c3968ee2e --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-column-option.ts @@ -0,0 +1,49 @@ +import { PropertyChangeObject } from "@farris/ui-vue/components/property-panel"; + +export function useColumnOption() { + function getColumnOptionProperties(propertyData: any) { + return { + title: '填充列宽', + description: '', + properties: { + fitColumns: { + title: '启用', + type: 'boolean', + description: '启用填充列宽', + $converter: '/converter/column-option.converter', + refreshPanelAfterChanged: true + }, + // fitMode: { + // description: '', + // title: '填充模式', + // type: 'enum', + // visible: !!propertyData.column?.fitColumns, + // $converter: '/converter/column-option.converter', + // editor: { + // data: [ + // { id: 'average', name: '平分' }, + // { id: 'expand', name: '等比' } + // ] + // } + // }, + }, + setPropertyRelates(changeObject: PropertyChangeObject, data: any) { + switch (changeObject && changeObject.propertyID) { + case 'fitColumns': { + data.fit = changeObject.propertyValue; + // 列的拖拽列宽设置为false + if (data.columns) { + if (changeObject.propertyValue) { + data.columns.forEach((column: any) => { + column.resizable = false; + }); + } + } + break; + } + } + } + }; + } + return { getColumnOptionProperties }; +} diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-command-option.ts b/packages/ui-vue/components/data-view/designer/property-config/use-command-option.ts new file mode 100644 index 0000000000000000000000000000000000000000..92e246d0ae563680e9a23b4201e1d0847ac939fb --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-command-option.ts @@ -0,0 +1,41 @@ +export function useCommandOption() { + function getCommandColumnProperties(propertyData: any) { + return { + title: '操作列', + description: '', + properties: { + enable: { + title: '启用', + type: 'boolean', + $converter: '/converter/column-command.converter', + description: '启用操作列', + refreshPanelAfterChanged: true + }, + // commands: { + // description: '', + // title: '命令', + // type: 'enum', + // editor: { + // data: [ + // { id: 'edit', name: '编辑' }, + // { id: 'remove', name: '删除' } + // ] + // } + // }, + // formatter: { + // title: '操作列模板', + // type: 'string', + // visible: false, + // description: '自定义操作列模板', + // refreshPanelAfterChanged: true, + // editor: { + // type: "code-editor", + // language: "html", + // } + // } + } + }; + } + + return { getCommandColumnProperties }; +} diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-event.ts b/packages/ui-vue/components/data-view/designer/property-config/use-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..4a0f449ab349c0d4c45903d80eb20caee31db5d6 --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-event.ts @@ -0,0 +1,73 @@ +export function useDataGridEvent() { + function initEvent(propertyData: any) { + const events = [ + { + "label": "onClickRow", + "name": "行点击事件" + }, + { + "label": "onSelectionChange", + "name": "行切换事件" + }, + { + "label": "onDoubleClickRow", + "name": "行双击事件" + }, + { + label: 'onFilterChanged', + name: '远端过滤事件' + }, + // { + // label: 'onColumnSorted', + // name: '远端排序事件' + // } + ]; + if (propertyData.pagination?.enable !== false) { + // 如果没有设置，默认是按照true处理的 + events.push({ + "label": "onPageIndexChanged", + "name": "切换页码事件" + }, + { + "label": "onPageSizeChanged", + "name": "分页条数变化事件" + }); + } + if (propertyData.command?.enable) { + // 如果没有设置，默认是按照true处理的 + events.push({ + "label": "onClickEditCommand", + "name": "操作列编辑事件" + }, + { + "label": "onClickDeleteCommand", + "name": "操作列删除事件" + }); + } + if (propertyData.selection?.multiSelect) { + // 启用多选，暴露多选事件 + events.push({ + "label": "onSelectItem", + "name": "选中行事件" + }, + { + "label": "onUnSelectItem", + "name": "取消选中行事件" + },); + } + if (propertyData.selection?.multiSelect && propertyData.selection?.showSelectAll) { + // 启用全选事件，暴露全选和取消全选事件 + events.push({ + "label": "onSelectAll", + "name": "全选事件" + }, + { + "label": "onUnSelectAll", + "name": "取消全选事件" + }); + } + return events; + } + + return { initEvent }; +} diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-filter.ts b/packages/ui-vue/components/data-view/designer/property-config/use-filter.ts new file mode 100644 index 0000000000000000000000000000000000000000..9729891fdc3839200c09a39fd82b440bc385264b --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-filter.ts @@ -0,0 +1,27 @@ +export function useFilter() { + function getFilter(propertyData: any) { + return { + title: '过滤', + description: '', + properties: { + mode: { + title: '类型', + type: 'enum', + description: '过滤类型', + $converter: '/converter/grid-filter.converter', + editor: { + // type: "combo-list", + // textField: "value", + // valueField: "key", + // data: [{ "key": "client", "value": "客户端" }, { "key": "server", "value": "服务器端" }] + data: [ + { id: 'client', name: '客户端' }, + { id: 'server', name: '服务端' } + ] + } + } + } + }; + } + return { getFilter }; +} diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-group.ts b/packages/ui-vue/components/data-view/designer/property-config/use-group.ts new file mode 100644 index 0000000000000000000000000000000000000000..89c50ce08f4a3659417e07dd98a12bcd30f344aa --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-group.ts @@ -0,0 +1,33 @@ +export function useGroup() { + function getGroupProperties(propertyData: any) { + return { + title: '分组', + description: '', + properties: { + enable: { + title: '启用', + type: 'boolean', + description: '启用分组', + $converter: '/converter/group.converter', + refreshPanelAfterChanged: true + }, + showSummary: { + title: '显示分组合计行', + type: 'boolean', + visible: !!propertyData.group?.enable, + $converter: '/converter/group.converter', + description: '显示分组合计行' + } + + // groupFields: { + // title: '启用', + // type: 'boolean', + // description: '启用分组', + // refreshPanelAfterChanged: true + // } + } + }; + } + + return { getGroupProperties }; +} diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-pagination.ts b/packages/ui-vue/components/data-view/designer/property-config/use-pagination.ts new file mode 100644 index 0000000000000000000000000000000000000000..253f5e088811c614cf89f9d3e20639622ebf5542 --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-pagination.ts @@ -0,0 +1,41 @@ +export function usePagination() { + function getPagination(propertyData: any, readonly: boolean) { + return { + title: '分页', + $converter: '/converter/pagination.converter', + parentPropertyID: 'pagination', + properties: { + enable: { + title: '启用分页', + type: 'boolean', + refreshPanelAfterChanged: true, + editor: { + readonly + } + }, + // mode: { + // visible: propertyData.pagination?.enable || false, + // title: '分页交互模式', + // type: "enum", + // editor: { + // type: "combo-list", + // textField: "value", + // valueField: "key", + // data: [{ "key": "client", "value": "客户端" }, { "key": "server", "value": "服务器端" }] + // } + // }, + showIndex: { + visible: propertyData.pagination?.enable || false, + title: '显示页码', + type: 'boolean' + }, + showLimits: { + visible: propertyData.pagination?.enable || false, + title: '显示分页条数', + type: 'boolean' + } + } + }; + } + return { getPagination }; +} diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-row-number.ts b/packages/ui-vue/components/data-view/designer/property-config/use-row-number.ts new file mode 100644 index 0000000000000000000000000000000000000000..7bb15d46c626b23c1869ced99d7fefae9112bdf0 --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-row-number.ts @@ -0,0 +1,27 @@ +export function useRowNumber() { + function getRowNumber(propertyData: any) { + return { + title: '行号配置', + $converter: '/converter/row-number.converter', + parentPropertyID: 'rowNumber', + properties: { + enable: { + title: '显示行号', + type: 'boolean', + refreshPanelAfterChanged: true + }, + width: { + visible: propertyData.rowNumber == null ? true : propertyData.rowNumber.enable, + title: '宽度', + type: 'number' + }, + heading: { + visible: propertyData.rowNumber == null ? true : propertyData.rowNumber.enable, + title: '标题', + type: 'string' + } + } + }; + } + return { getRowNumber }; +} diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-row-option.ts b/packages/ui-vue/components/data-view/designer/property-config/use-row-option.ts new file mode 100644 index 0000000000000000000000000000000000000000..e0d8acc490763fa4d3e5a89ebfcdd3858524b45f --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-row-option.ts @@ -0,0 +1,30 @@ +export function useRowOption() { + function getRowOptionProperties(propertyData: any) { + return { + title: '行配置', + description: '', + properties: { + customRowStyle: { + title: '行样式', + type: 'string', + description: '自定义行样式', + editor: { + type: "code-editor", + language: "html", + } + }, + customCellStyle: { + title: '单元格样式', + type: 'string', + description: '自定义单元格样式', + editor: { + type: "code-editor", + language: "html", + } + } + } + }; + } + + return { getRowOptionProperties }; +} diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-selection.ts b/packages/ui-vue/components/data-view/designer/property-config/use-selection.ts new file mode 100644 index 0000000000000000000000000000000000000000..a0882c8d62f06297e86f817a413d3cba8d1f89cb --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-selection.ts @@ -0,0 +1,47 @@ +import { PropertyChangeObject } from "@farris/ui-vue/components/property-panel"; + +export function useSelection() { + function getSelection(propertyData: any) { + return { + title: '多选配置', + $converter: '/converter/grid-selection.converter', + parentPropertyID: 'editor', + properties: { + multiSelect: { + title: '启用多选', + type: 'boolean', + refreshPanelAfterChanged: true + }, + showCheckbox: { + visible: propertyData.selection == null ? false : propertyData.selection.multiSelect, + title: '显示复选框', + type: 'boolean', + refreshPanelAfterChanged: true + }, + showSelectAll: { + visible: propertyData.selection == null ? false : propertyData.selection.multiSelect && propertyData.selection.showCheckbox, + title: '显示全选', + type: 'boolean' + }, + keepSelectingOnPaging: { + visible: !!propertyData.selection?.multiSelect, + title: '启用跨页多选', + type: 'boolean' + }, + showSelection: { + title: '显示已选数据数量', + type: 'boolean' + } + }, + setPropertyRelates(changeObject: PropertyChangeObject, data: any) { + switch (changeObject && changeObject.propertyID) { + // 如果启用多选，则默认显示复选框；不启用多选，则默认不显示复选框 + case 'multiSelect': + propertyData.selection.showCheckbox = changeObject.propertyValue; + break; + } + } + }; + } + return { getSelection }; +} diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-sort.ts b/packages/ui-vue/components/data-view/designer/property-config/use-sort.ts new file mode 100644 index 0000000000000000000000000000000000000000..a1971d6d3b2310a466d31d77bd1b6c7acc17310c --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-sort.ts @@ -0,0 +1,23 @@ +export function useSort() { + function getSort(propertyData: any) { + return { + title: '排序', + description: '', + properties: { + mode: { + title: '类型', + type: 'enum', + description: '排序类型', + $converter: '/converter/grid-sort.converter', + editor: { + data: [ + { id: 'client', name: '客户端' }, + { id: 'server', name: '服务端' } + ] + } + } + } + }; + } + return { getSort }; +} diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-summary.ts b/packages/ui-vue/components/data-view/designer/property-config/use-summary.ts new file mode 100644 index 0000000000000000000000000000000000000000..1dc7267ba9e01cc3203c4b0e99e071349e62a2d7 --- /dev/null +++ b/packages/ui-vue/components/data-view/designer/property-config/use-summary.ts @@ -0,0 +1,18 @@ +export function useSummary() { + function getSummaryProperties(propertyData: any) { + return { + title: '合计行', + description: '', + properties: { + enable: { + title: '启用', + type: 'boolean', + description: '启用合计行', + $converter: '/converter/summary.converter', + refreshPanelAfterChanged: true + } + } + }; + } + return { getSummaryProperties }; +} diff --git a/packages/ui-vue/components/dynamic-resolver/src/converter/grid-filter.converter.ts b/packages/ui-vue/components/dynamic-resolver/src/converter/grid-filter.converter.ts new file mode 100644 index 0000000000000000000000000000000000000000..316721e065234a1523182c4750a97670db846ff3 --- /dev/null +++ b/packages/ui-vue/components/dynamic-resolver/src/converter/grid-filter.converter.ts @@ -0,0 +1,16 @@ +import { ComponentSchema } from "@farris/ui-vue/components/designer-canvas"; +import { PropertyConverter, SchemaService } from "../types"; +export default { + convertTo: (schema: ComponentSchema, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + if (!schema.filter) { + schema.filter = { + }; + } + schema.filter[propertyKey] = propertyValue; + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + if(propertyKey === 'mode') { + return schema.filter?.mode || 'client'; + } + } +} as PropertyConverter; diff --git a/packages/ui-vue/components/dynamic-resolver/src/converter/grid-sort.converter.ts b/packages/ui-vue/components/dynamic-resolver/src/converter/grid-sort.converter.ts new file mode 100644 index 0000000000000000000000000000000000000000..e1b66b2e5487f4551871e8b06f6212c9314ad97d --- /dev/null +++ b/packages/ui-vue/components/dynamic-resolver/src/converter/grid-sort.converter.ts @@ -0,0 +1,16 @@ +import { ComponentSchema } from "@farris/ui-vue/components/designer-canvas"; +import { PropertyConverter, SchemaService } from "../types"; +export default { + convertTo: (schema: ComponentSchema, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + if (!schema.sort) { + schema.sort = { + }; + } + schema.sort[propertyKey] = propertyValue; + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + if(propertyKey === 'mode') { + return schema.sort?.mode || 'client'; + } + } +} as PropertyConverter; diff --git a/packages/ui-vue/components/dynamic-resolver/src/property-config-resolver.ts b/packages/ui-vue/components/dynamic-resolver/src/property-config-resolver.ts index 382f82154ef4e5237f02e42f7ac0e41815739530..5f50055b18cd8a304abe0a44211ac2644fadbee4 100644 --- a/packages/ui-vue/components/dynamic-resolver/src/property-config-resolver.ts +++ b/packages/ui-vue/components/dynamic-resolver/src/property-config-resolver.ts @@ -22,6 +22,8 @@ import { ElementPropertyConfig, PropertyEntity } from "../../property-panel/src/ import itemsCountConverter from "./converter/items-count.converter"; import formGroupLabelConverter from "./converter/form-group-label.converter"; import changeFormatterEnumConverter from './converter/change-formatter-enum.converter'; +import gridSortConverter from './converter/grid-sort.converter'; +import gridFilterConverter from './converter/grid-filter.converter'; const propertyConfigSchemaMap = {} as Record; const propertyConverterMap = new Map([ @@ -41,7 +43,9 @@ const propertyConverterMap = new Map([ ['/converter/pagination.converter', paginationConverter], ['/converter/row-number.converter', rowNumberConverter], ['/converter/grid-selection.converter', gridSelectionConverter], - ['/converter/change-formatter-enum.converter', changeFormatterEnumConverter] + ['/converter/change-formatter-enum.converter', changeFormatterEnumConverter], + ['/converter/grid-sort.converter', gridSortConverter], + ['/converter/grid-filter.converter', gridFilterConverter] ]); const propertyEffectMap = {} as Record; const propertyEditorMap = new Map([ diff --git a/packages/ui-vue/components/dynamic-resolver/src/resolver/property-config/use-property-config-resolver.ts b/packages/ui-vue/components/dynamic-resolver/src/resolver/property-config/use-property-config-resolver.ts index 4aa1bda425a8e9e6c6eccdb70df6fe55404e0608..845c44aa47a839d2a18c4e5fe385c892041482bd 100644 --- a/packages/ui-vue/components/dynamic-resolver/src/resolver/property-config/use-property-config-resolver.ts +++ b/packages/ui-vue/components/dynamic-resolver/src/resolver/property-config/use-property-config-resolver.ts @@ -22,6 +22,8 @@ import itemsCountConverter from "../../converter/items-count.converter"; import formGroupLabelConverter from "../../converter/form-group-label.converter"; import sizeConverter from "../../converter/size.converter"; import changeFormatterEnumConverter from '../../converter/change-formatter-enum.converter'; +import gridSortConverter from '../../converter/grid-sort.converter'; +import gridFilterConverter from '../../converter/grid-filter.converter'; export function usePropertyConfigResolver(propertyConfigSchemaMap: Record, propertyEffectMap: Record, resolveSchemaWithDefaultValue: (schemaValue: Record) => Record) { @@ -43,7 +45,9 @@ export function usePropertyConfigResolver(propertyConfigSchemaMap: Record([ ['string', { type: 'input-group', enableClear: false }], diff --git a/packages/ui-vue/components/tree-grid/src/property-config/tree-grid.property-config.ts b/packages/ui-vue/components/tree-grid/src/property-config/tree-grid.property-config.ts index 6f18c159a98151ed13ed344933254ab184a99402..362f53ced586fc5bc31ebe50af08e47db5c855c7 100644 --- a/packages/ui-vue/components/tree-grid/src/property-config/tree-grid.property-config.ts +++ b/packages/ui-vue/components/tree-grid/src/property-config/tree-grid.property-config.ts @@ -1,7 +1,17 @@ -import { PropertyChangeObject } from "../../../property-panel/src/composition/entity/property-entity"; -import { BaseControlProperty } from "../../../property-panel/src/composition/entity/base-property"; +import { BaseControlProperty, PropertyChangeObject } from "@farris/ui-vue/components/property-panel"; import { FormSchemaEntity } from "@farris/ui-vue/components/common"; - +import { + useRowOption, + useColumnOption, + useCommandOption, + useGroup, + useSummary, + useDataGridEvent, + useSelection, + useRowNumber, + usePagination, + useAppearance +} from "@farris/ui-vue/components/data-view/designer"; export class TreeGridProperty extends BaseControlProperty { constructor(componentId: string, designerHostService: any) { @@ -15,7 +25,16 @@ export class TreeGridProperty extends BaseControlProperty { // 外观 this.getAppearanceProperties(propertyData); - + // 操作列 + this.propertyConfig.categories['command'] = useCommandOption().getCommandColumnProperties(propertyData); + // 填充列宽,仅支持平分列宽 + this.propertyConfig.categories['column'] = useColumnOption().getColumnOptionProperties(propertyData); + // 行配置 增加行和单元格自定义样式 + this.propertyConfig.categories['rowOption'] = useRowOption().getRowOptionProperties(propertyData); + // 合计行 + this.propertyConfig.categories['summary'] = useSummary().getSummaryProperties(propertyData); + // 分组配置 + // this.propertyConfig.categories['group'] = useGroup().getGroupProperties(propertyData); // 事件 this.getEventPropConfig(propertyData); @@ -62,116 +81,21 @@ export class TreeGridProperty extends BaseControlProperty { } private getAppearanceProperties(propertyData: any) { const self = this; - this.propertyConfig.categories['appearance'] = { - title: '外观', - properties: { - columns: { - title: '列设置', - description: '列设置', - $converter: '/converter/items-count.converter', - editor: { - type: "grid-field-editor", - viewModelId: this.viewModelId, - gridData: propertyData, - gridType: "tree-grid-column" - }, - // 这个属性，标记当属性变更得时候触发重新更新属性 - refreshPanelAfterChanged: true, - }, - fit: { - title: '适配父组件尺寸', - type: "boolean", - description: '是否适配父组件尺寸', - visible: false - }, - showStripe: { - title: '显示条纹', - type: "boolean", - description: '是否显示条纹' - }, - showBorder: { - title: '显示边框', - type: "boolean", - description: '是否显示边框' - }, - // showTreeNodeIcons: { - // title: '显示图标', - // type: "boolean", - // description: '是否显示图标' - // }, - // showSetting: { - // title: '显示设置按钮', - // type: "boolean", - // description: '是否显示设置按钮', - // visible:false - // } - }, - setPropertyRelates(changeObject: PropertyChangeObject, data: any) { - switch (changeObject && changeObject.propertyID) { - case 'useBlankWhenDataIsEmpty': - propertyData.emptyDataHeight = propertyData.useBlankWhenDataIsEmpty ? 36 : 240; - break; - case 'fields': - propertyData.fields = changeObject.propertyValue || []; - break; - - } - } - }; - - this.propertyConfig.categories['pagination'] = { - title: '分页', - $converter: '/converter/pagination.converter', - parentPropertyID: 'pagination', - properties: { - enable: { - title: '启用分页', - type: 'boolean', - refreshPanelAfterChanged: true, - editor: { - readonly: true - } - }, - // mode: { - // visible: propertyData.pagination?.enable || false, - // title: '分页交互模式', - // type: "enum", - // editor: { - // type: "combo-list", - // textField: "name", - // valueField: "value", - // data: [{ "value": "client", "name": "客户端" }, { "value": "server", "name": "服务器端" }] - // } - // }, - showIndex: { - visible: propertyData.pagination?.enable || false, - title: '显示页码', - type: 'boolean' - }, - showLimits: { - visible: propertyData.pagination?.enable || false, - title: '显示每页记录数', - type: 'boolean' - } - } - }; + this.propertyConfig.categories['appearance'] = useAppearance().getDataGrid(propertyData, this.viewModelId); + this.propertyConfig.categories['selection'] = useSelection().getSelection(propertyData); + /** + * 默认表格上没有此属性propertyData.rowNumber，根据schema上的属性默认值写默认true或false + */ + this.propertyConfig.categories['rowNumber'] = useRowNumber().getRowNumber(propertyData); + this.propertyConfig.categories['pagination'] = usePagination().getPagination(propertyData, true); } private getEventPropConfig(propertyData: any) { - const events = [ - { - "label": "onSelectionChange", - "name": "行切换事件" - }, - { - "label": "onClickRow", - "name": "行点击事件" - } - ]; + const events = useDataGridEvent().initEvent(propertyData); const self = this; const initialData = self.eventsEditorUtils['formProperties'](propertyData, self.viewModelId, events); const properties = self.createBaseEventProperty(initialData); - + this.propertyConfig.categories['eventsEditor'] = { title: '事件', hideTitle: true, diff --git a/packages/ui-vue/components/tree-grid/src/schema/schema-mapper.ts b/packages/ui-vue/components/tree-grid/src/schema/schema-mapper.ts index ac59744a97678fc7f114adfb9a03e0761051c00b..864a8e9238a0218154c86c40b2c421fceafd70f0 100644 --- a/packages/ui-vue/components/tree-grid/src/schema/schema-mapper.ts +++ b/packages/ui-vue/components/tree-grid/src/schema/schema-mapper.ts @@ -2,5 +2,6 @@ import { MapperFunction, resolveAppearance } from '../../../dynamic-resolver'; export const schemaMapper = new Map([ ['appearance', resolveAppearance], - ['column', 'columnOption'] + ['column', 'columnOption'], + ['command', 'commandOption'] ]); diff --git a/packages/ui-vue/components/tree-grid/src/schema/tree-grid-column.schema.json b/packages/ui-vue/components/tree-grid/src/schema/tree-grid-column.schema.json index 2b890aae284df83376bfd4a97ce18410a20bd930..4f68d098547ea3d3cd5ee898f128d90f1da17e6a 100644 --- a/packages/ui-vue/components/tree-grid/src/schema/tree-grid-column.schema.json +++ b/packages/ui-vue/components/tree-grid/src/schema/tree-grid-column.schema.json @@ -14,6 +14,11 @@ "type": "string", "default": "tree-grid-column" }, + "binding": { + "description": "", + "type": "object", + "default": {} + }, "allowGrouping": { "description": "", "type": "boolean", @@ -133,7 +138,19 @@ }, "width": { "description": "", - "type": "number" + "type": "number", + "default": 120 + }, + "formatter": { + "description":"列格式化", + "type": "object", + "default": { + "type":"none", + "customFormat": "", + "trueText": "是", + "falseText": "否", + "dateFormat": "yyyy-MM-dd" + } } }, "required": [ diff --git a/packages/ui-vue/components/tree-grid/src/schema/tree-grid.schema.json b/packages/ui-vue/components/tree-grid/src/schema/tree-grid.schema.json index edc170ec27549434f0cd30a294c39b55f47ad0ed..40d355218e31a3b57c0e0f433f2accebea73d1d2 100644 --- a/packages/ui-vue/components/tree-grid/src/schema/tree-grid.schema.json +++ b/packages/ui-vue/components/tree-grid/src/schema/tree-grid.schema.json @@ -462,12 +462,17 @@ } } }, - "row": { + "rowOption": { "type": "object", "properties": { "customRowStyle": { - "description": "", - "type": "object" + "description": "自定义行样式", + "type": "string" + }, + "customCellStyle": { + "description": "自定义单元格样式", + "type": "string", + "default": "" }, "disable": { "description": "", @@ -519,6 +524,26 @@ } } }, + "onClickRow": { + "description": "行点击事件", + "type": "string", + "default": "" + }, + "onSelectionChange": { + "description": "行切换事件", + "type": "string", + "default": "" + }, + "onPageIndexChanged": { + "description": "切换页码事件", + "type": "string", + "default": "" + }, + "onPageSizeChanged": { + "description": "分页条数变化事件", + "type": "string", + "default": "" + }, "selection": { "type": "object", "properties": { @@ -771,11 +796,6 @@ "type": "boolean", "default": false } - }, - "onSelectionChange": { - "description": "行切换事件", - "type": "string", - "default": "" } }, "required": [ @@ -785,6 +805,11 @@ ], "events": { "onSelectionChange": "行切换事件", - "onClickRow": "行点击事件" + "onClickRow": "行点击事件", + "onPageIndexChanged": "切换页码事件", + "onPageSizeChanged": "分页条数变化事件", + "onDoubleClickRow": "行双击事件", + "onClickEditCommand": "操作列编辑事件", + "onClickDeleteCommand": "操作列删除事件" } } \ No newline at end of file diff --git a/packages/ui-vue/components/tree-grid/src/tree-grid.props.ts b/packages/ui-vue/components/tree-grid/src/tree-grid.props.ts index 8954c7d1843869ddf17198e802dc13cdecc05302..787eb5443b7ee3e29704b68608abac64a6c6087a 100644 --- a/packages/ui-vue/components/tree-grid/src/tree-grid.props.ts +++ b/packages/ui-vue/components/tree-grid/src/tree-grid.props.ts @@ -14,14 +14,27 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { ExtractPropTypes, PropType } from 'vue'; +import { ExtractPropTypes, PropType, VNode } from 'vue'; import { LocaleService } from '@farris/ui-vue/components/locale'; -import { EditorConfig } from '../../dynamic-form'; -import { createDataViewUpdateColumnsResolver, createPropsResolver, createTreeGridBindingResolver, createTreeGridSelectionItemResolver } from '../../dynamic-resolver'; +import { EditorConfig } from '@farris/ui-vue/components/dynamic-form'; +import { + createDataViewUpdateColumnsResolver, + createPropsResolver, + createTreeGridBindingResolver, + createTreeGridSelectionItemResolver +} from '@farris/ui-vue/components/dynamic-resolver'; +import { + CommandOptions, + HeaderCell, + HierarchyOptions, + RowNumberOptions, + SelectionOptions, + VisualData, + VisualDataCell +} from '@farris/ui-vue/components/data-view'; +import treeGridSchema from './schema/tree-grid.schema.json'; import { schemaMapper } from './schema/schema-mapper'; import { schemaResolver } from "./schema/schema-resolver"; -import { CommandOptions, HierarchyOptions, RowNumberOptions, SelectionOptions, VisualData } from '../../data-view'; -import treeGridSchema from './schema/tree-grid.schema.json'; export type DataGridAlignment = 'left' | 'center' | 'right'; @@ -96,6 +109,12 @@ export interface DataGridColumn { filter?: string; showSetting?: boolean; showEllipsis?: boolean; + /** 列模板 */ + columnTemplate?: (cell: VisualDataCell, visualDataRow: VisualData) => VNode; + /** inner boolean formatter */ + formatter?: + ((cell: VisualDataCell, visualDataRow: VisualData) => VNode | string) | object; + headerFormatter?: (context: { headerCell: HeaderCell, headerCells: HeaderCell[], columnIndex: number }) => VNode | string; } export interface ColumnGroupItem { @@ -396,7 +415,9 @@ export const treeGridProps = { /** 宽度 */ width: { type: Number, default: -1 }, /** 启用虚拟渲染 */ - virtualized: { type: Boolean, default: false } + virtualized: { type: Boolean, default: false }, + /** 空数据模板 */ + emptyTemplate: { type: Object as PropType VNode | string)> } } as Record; export type TreeGridProps = ExtractPropTypes;