diff --git a/packages/designer/src/components/components/entity-tree-view/components/entity-tree-view.component.tsx b/packages/designer/src/components/components/entity-tree-view/components/entity-tree-view.component.tsx index 352696726dfcc9f1177f3831c399f9bb529fc2da..9d03173554fdffa5a4d2d09c3b6cf7dd1ab05c2e 100644 --- a/packages/designer/src/components/components/entity-tree-view/components/entity-tree-view.component.tsx +++ b/packages/designer/src/components/components/entity-tree-view/components/entity-tree-view.component.tsx @@ -14,17 +14,14 @@ * limitations under the License. */ import { defineComponent, inject, ref, SetupContext, watch, nextTick, onMounted, Ref } from 'vue'; -import { FButton } from '@farris/ui-vue/components'; -import { FTreeView } from '@farris/ui-vue/components'; +import { cloneDeep } from 'lodash-es'; +import { FButton, FTreeView, FLoadingService, RowOptions, VisualData } from '@farris/ui-vue/components'; import { UseEntityTreeData } from '../composition/use-entity-tree-data'; import { entityTreeProps, EntityTreeProps } from './entity-tree-view.props'; import { useUpdateEntitySchema } from '../composition/use-update-entity-schema'; import { UseControlCreator, UseDesignViewModel, UseSchemaService } from '../../../../components/types'; -import { cloneDeep } from 'lodash-es'; import '../composition/entity-tree-view.css'; import './entity-tree-view.scss'; -import { RowOptions, VisualData } from '@farris/ui-vue/components'; -import { FLoadingService } from '@farris/ui-vue/components'; import { DesignerMode, UseDesignerContext } from '../../../../components/types/designer-context'; import { useOpenNewEntity } from '../composition/use-new-entity'; import { useOpenNewField } from '../composition/use-new-field-modal'; @@ -157,8 +154,7 @@ export default defineComponent({ return () => { return
- + { + cell.formatter!(cell, row) + } +
; + } return
{ cell.formatter!(cell, row) diff --git a/packages/ui-vue/components/data-grid/src/data-grid.component.tsx b/packages/ui-vue/components/data-grid/src/data-grid.component.tsx index dda0fa5977ced8eba2cf4c51b5ccdf40c6c1fc02..7ee03d20df0bf6f3ef6c1a463e2049c6f4653429 100644 --- a/packages/ui-vue/components/data-grid/src/data-grid.component.tsx +++ b/packages/ui-vue/components/data-grid/src/data-grid.component.tsx @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { DataGridProps, dataGridProps, PaginatonOptions } from './data-grid.props'; -import { computed, defineComponent, onUnmounted, onMounted, ref, nextTick, watch, SetupContext, inject, provide } from 'vue'; +import { computed, defineComponent, onUnmounted, onMounted, ref, nextTick, watch, SetupContext } from 'vue'; import { useResizeObserver } from '@vueuse/core'; +import { DataGridProps, dataGridProps, PaginatonOptions } from './data-grid.props'; import getDataArea from './components/data/data-area.component'; import { DataColumn, DataViewOptions, VisualData, getColumnHeader, getDisableMask, getFilterPanel, getGroupPanel, getHorizontalScrollbar, @@ -454,10 +454,6 @@ export default defineComponent({ useVirtualScrollComposition.scrollToRowByIndex(index); } - function scrollToRowById() { - - } - const dataGridComponentInstance = { activeRowById, addNewDataItem, addNewDataItemAtLast, removeDataItem, removeDataItemById, editDataItem, diff --git a/packages/ui-vue/components/data-grid/src/data-grid.css b/packages/ui-vue/components/data-grid/src/data-grid.css index f2a03c1c18604b09e9ca5a22690446ab65cb8866..8ba1e817b769f6c0f80b5a909866af44efb97f94 100644 --- a/packages/ui-vue/components/data-grid/src/data-grid.css +++ b/packages/ui-vue/components/data-grid/src/data-grid.css @@ -20,7 +20,6 @@ align-items: center; pointer-events: none; height: 100%; - /* top: 35px; */ width: 100%; } diff --git a/packages/ui-vue/components/data-grid/src/data-grid.props.ts b/packages/ui-vue/components/data-grid/src/data-grid.props.ts index 17222c12595611b2553f0ff3cc12d0519c48d988..b3e59195b3a0d479865659a1698d56fe8c2a978b 100644 --- a/packages/ui-vue/components/data-grid/src/data-grid.props.ts +++ b/packages/ui-vue/components/data-grid/src/data-grid.props.ts @@ -87,8 +87,6 @@ export interface DataGridColumn { formatter?: ((cell: VisualDataCell, visualDataRow: VisualData) => VNode | string) | object; headerFormatter?: (context: { headerCell: HeaderCell, headerCells: HeaderCell[], columnIndex: number }) => VNode | string; - /** 格式化函数 */ - // format?: (cell: VisualDataCell, visualDataRow: VisualData) => VNode | string; } export interface ColumnGroupItem { 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 2a058a2e7ae0dd2be4bf1c10c188e6e338c6459b..2d752e56aa3ea029770441065e0112736857747d 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 @@ -1,4 +1,5 @@ +import { FormSchemaEntityField$Type } from '@farris/ui-vue/components/common'; import { BaseControlProperty } from '../../../property-panel/src/composition/entity/base-property'; import { DgControl } from '../../../designer-canvas/src/composition/dg-control'; import { InputGroupProperty } from '../../../input-group/src/property-config/input-group.property-config'; @@ -15,7 +16,6 @@ import { RadioGroupProperty } from '../../../radio-group/src/property-config/rad import { SwitchProperty } from '../../../switch/src/property-config/switch.property-config'; import { TimePickerProperty } from '../../../time-picker/src/property-config/time-picker.property-config'; import { SchemaDOMMapping } from '../../../property-panel/src/composition/entity/schema-dom-mapping'; -import { FormSchemaEntityField$Type } from '@farris/ui-vue/components/common'; export class DataGriColumnProperty extends BaseControlProperty { constructor(componentId: string, designerHostService: any) { @@ -30,11 +30,61 @@ export class DataGriColumnProperty extends BaseControlProperty { this.propertyConfig.categories['behavior'] = this.getBehaviorConfig(propertyData, 'gridFieldEditor'); // 编辑器 this.getFieldEditorProperties(propertyData, gridData); - // this.propertyConfig.categories['template'] = this.getTemplateProperties(propertyData); + // 列模板或者列格式化 + this.propertyConfig.categories['formatter'] = this.getTemplateProperties(propertyData); + // 列事件 + this.getEventPropConfig(propertyData); return this.propertyConfig; } + + private getEventPropConfig(propertyData: any) { + const events = [ + { + "label": "onClickLinkCommand", + "name": "超链接事件" + } + ]; + const self = this; + const initialData = self.eventsEditorUtils['formProperties'](propertyData, self.viewModelId, events); + const properties = {}; + properties[self.viewModelId] = { + type: 'events-editor', + editor: { + initialData + } + }; + this.propertyConfig.categories['eventsEditor'] = { + title: '事件', + hideTitle: true, + properties, + // 这个属性，标记当属性变更得时候触发重新更新属性 + refreshPanelAfterChanged: true, + tabId: 'commands', + tabName: '交互', + setPropertyRelates(changeObject: any, data: any) { + const parameters = changeObject.propertyValue; + delete propertyData[self.viewModelId]; + if (parameters) { + parameters.setPropertyRelates = this.setPropertyRelates; // 添加自定义方法后，调用此回调方法，用于处理联动属性 + self.eventsEditorUtils.saveRelatedParameters(propertyData, self.viewModelId, parameters['events'], parameters); + } + // 联动修改排序开关 + propertyData.remoteSort = propertyData.columnSorted ? true : false; + // 同步超链接模板 + if(data.formatter && typeof data.formatter === 'object') { + data.formatter.type = 'custom'; + // 替换自定义模板 + data.formatter.customFormat = `this.viewModel.${data.onClickLinkCommand}(ctx)}> + {{rowData.${data.field}}} + `; + // 刷新属性面板 + } + } + }; + } getBasicPropConfig(propertyData: any) { const self = this; this.propertyConfig.categories['basic'] = { @@ -95,6 +145,21 @@ export class DataGriColumnProperty extends BaseControlProperty { title: '拖拽改变列宽', type: 'boolean' }, + filterable: { + description: '启用过滤', + title: '启用过滤', + type: 'boolean' + }, + width: { + description: '列宽', + title: '列宽', + type: 'number' + }, + showTips: { + description: '启用鼠标悬浮提示', + title: '鼠标悬浮提示', + type: 'boolean' + }, halign: { description: '标题对齐方式', title: '标题对齐方式', @@ -131,6 +196,17 @@ export class DataGriColumnProperty extends BaseControlProperty { ] } } + }, + setPropertyRelates(changeObject, prop, paramters: any) { + if (!changeObject) { + return; + } + switch (changeObject && changeObject.propertyID) { + case 'width': { + prop.actualWidth = changeObject.propertyValue; + break; + } + } } }; } @@ -142,19 +218,123 @@ export class DataGriColumnProperty extends BaseControlProperty { private getTemplateProperties(propertyData: any) { return { - title: '模板', + title: '列模板', description: '', properties: { - formatter: { + type: { + description: '', + title: '类型', + type: 'enum', + $converter: '/converter/change-formatter.converter', + refreshPanelAfterChanged: true, + editor: { + data: [ + { id: 'enum', name: '枚举' }, + { id: 'boolean', name: '布尔' }, + { id: 'number', name: '数字' }, + { id: 'date', name: '日期' }, + { id: 'custom', name: '自定义模板' }, + { id: 'none', name: '无' } + ] + } + }, + // data: { + // description: '', + // title: '选项', + // type: 'enum', + // $converter: '/converter/change-formatter.converter', + // visible: propertyData.formatter.type === 'enum', + // // parentPropertyID: 'formatter', + // // refreshPanelAfterChanged: true, + // }, + customFormat: { title: '自定义模板', type: 'string', + visible: !!propertyData.formatter && propertyData.formatter.type === 'custom', + $converter: '/converter/change-formatter.converter', description: '自定义模板', refreshPanelAfterChanged: true, editor: { type: "code-editor", language: "html", - }, + } + }, + trueText: { + title: '布尔为true时文本', + $converter: '/converter/change-formatter.converter', + type: 'string', + visible: !!propertyData.formatter && propertyData.formatter.type === 'boolean', + refreshPanelAfterChanged: true, + description: '布尔为true时文本' + }, + falseText: { + title: '布尔为false时文本', + $converter: '/converter/change-formatter.converter', + type: 'string', + visible: !!propertyData.formatter && propertyData.formatter.type === 'boolean', + refreshPanelAfterChanged: true, + description: '布尔为false时文本' + }, + prefix: { + title: '前缀', + $converter: '/converter/change-formatter.converter', + type: 'string', + visible: !!propertyData.formatter && propertyData.formatter.type === 'number', + refreshPanelAfterChanged: true, + description: '前缀' + }, + suffix: { + title: '后缀', + $converter: '/converter/change-formatter.converter', + type: 'string', + visible: !!propertyData.formatter && propertyData.formatter.type === 'number', + refreshPanelAfterChanged: true, + description: '后缀' + }, + precision: { + title: '精度', + $converter: '/converter/change-formatter.converter', + type: 'number', + visible: !!propertyData.formatter && propertyData.formatter.type === 'number', + refreshPanelAfterChanged: true, + description: '精度' + }, + decimal: { + title: '小数分隔符', + $converter: '/converter/change-formatter.converter', + type: 'string', + visible: !!propertyData.formatter && propertyData.formatter.type === 'number', + refreshPanelAfterChanged: true, + description: '小数分隔符' }, + thousand: { + title: '千分位', + $converter: '/converter/change-formatter.converter', + type: 'string', + visible: !!propertyData.formatter && propertyData.formatter.type === 'number', + refreshPanelAfterChanged: true, + description: '千分位' + }, + dateFormat: { + title: '日期格式', + $converter: '/converter/change-formatter.converter', + type: 'string', + visible: !!propertyData.formatter && propertyData.formatter.type === 'date', + refreshPanelAfterChanged: true, + description: '日期格式' + } + }, + setPropertyRelates(changeObject, prop, paramters: any) { + if (!changeObject) { + return; + } + switch (changeObject && changeObject.propertyID) { + case 'type': { + // 刷新实体树 + changeObject.needRefreshEntityTree = true; + break; + } + } } }; } 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 949fc26a93cef9c9af33beb087293c3976365c48..86256e7155abfb84972e52af4e5e555eee6b9461 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 @@ -15,6 +15,8 @@ export class DataGridProperty extends BaseControlProperty { // 外观 this.getAppearanceProperties(propertyData); + // 操作列 + this.propertyConfig.categories['command'] = this.getCommandColumnProperties(propertyData); // 事件 this.getEventPropConfig(propertyData); @@ -61,6 +63,43 @@ export class DataGridProperty extends BaseControlProperty { }; } + 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: !!propertyData.command && propertyData.command.enable, + description: '自定义操作列模板', + refreshPanelAfterChanged: true, + editor: { + type: "code-editor", + language: "html", + } + } + } + }; + } /** * 将schema实体表组装成树 */ @@ -122,11 +161,11 @@ export class DataGridProperty extends BaseControlProperty { // type: "boolean", // description: "是否显示边框" // }, - // showSetting:{ - // title: "显示设置按钮", - // type: "boolean", - // description: "是否显示设置按钮" - // } + showSetting: { + title: "显示设置按钮", + type: "boolean", + description: "是否显示设置按钮" + } // useBlankWhenDataIsEmpty: { // title: '空数据表格显示空白行', // description: '表格没有数据时是否显示空白行', @@ -246,6 +285,7 @@ export class DataGridProperty extends BaseControlProperty { }; } + private getEventPropConfig(propertyData: any) { const events = [ { @@ -255,6 +295,10 @@ export class DataGridProperty extends BaseControlProperty { { "label": "onSelectionChange", "name": "行切换事件" + }, + { + "label": "onDoubleClickRow", + "name": "行双击事件" } ]; if (propertyData.pagination?.enable !== false) { @@ -268,6 +312,17 @@ export class DataGridProperty extends BaseControlProperty { "name": "分页条数变化事件" }); } + if (propertyData.command?.enable) { + // 如果没有设置，默认是按照true处理的 + events.push({ + "label": "onClickEditCommand", + "name": "操作列编辑事件" + }, + { + "label": "onClickDeleteCommand", + "name": "操作列删除事件" + }); + } const self = this; const initialData = self.eventsEditorUtils['formProperties'](propertyData, self.viewModelId, events); const properties = {}; @@ -297,6 +352,12 @@ export class DataGridProperty extends BaseControlProperty { } // 联动修改排序开关 propertyData.remoteSort = propertyData.columnSorted ? true : false; + // 同步操作列命令 + if(data.command) { + data.command.onClickEditCommand = data.onClickEditCommand; + data.command.onClickDeleteCommand = data.onClickDeleteCommand; + } + } }; } diff --git a/packages/ui-vue/components/data-grid/src/schema/data-grid-column.schema.json b/packages/ui-vue/components/data-grid/src/schema/data-grid-column.schema.json index ec078ae4b3da1ac1a85839c71cbbe6447176cb8c..267e6dbf14f3a7f50980266864bd3ac23b6b9bb1 100644 --- a/packages/ui-vue/components/data-grid/src/schema/data-grid-column.schema.json +++ b/packages/ui-vue/components/data-grid/src/schema/data-grid-column.schema.json @@ -44,7 +44,7 @@ "filterable": { "description": "", "type": "boolean", - "default": true + "default": false }, "fixed": { "description": "", @@ -143,6 +143,17 @@ "description": "", "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/data-grid/src/schema/data-grid.schema.json b/packages/ui-vue/components/data-grid/src/schema/data-grid.schema.json index 464446227699a2dc6790a7ec6b3a7993ec05485e..17ed07b5bd1b8d2a693e80623f05414086322527 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 @@ -154,7 +154,23 @@ }, "commands": { "type": "array", - "default": [] + "default": [ + { + "text": "编辑", + "type": "primary", + "command": "edit" + }, + { + "text": "删除", + "type": "danger", + "command": "remove" + } + ] + }, + "formatter": { + "description": "自定义操作列模板", + "type": "string", + "default": "" }, "commandColumnWidth": { "description": "", diff --git a/packages/ui-vue/components/data-grid/src/schema/schema-mapper.ts b/packages/ui-vue/components/data-grid/src/schema/schema-mapper.ts index cd9697fa1b699607adb3b48c48815c3a8071185d..92bdcd4547bd4612d1e4df44b7698429503046a8 100644 --- a/packages/ui-vue/components/data-grid/src/schema/schema-mapper.ts +++ b/packages/ui-vue/components/data-grid/src/schema/schema-mapper.ts @@ -4,7 +4,7 @@ import { resolveGridColumns } from './column-resolver'; export const schemaMapper = new Map([ ['appearance', resolveAppearance], ['column', 'columnOption'], - // ['fields', resolveGridColumns] + ['command', 'commandOption'] ]); export const columnSchemaMapper = new Map([]); diff --git a/packages/ui-vue/components/data-view/components/column-format/column-format.component.tsx b/packages/ui-vue/components/data-view/components/column-format/column-format.component.tsx index 50e05071588f976aa0b1e5d4bd55c31522a4bda6..ed330a1a039e53a5b1ca4aab93cbb458ec2675f5 100644 --- a/packages/ui-vue/components/data-view/components/column-format/column-format.component.tsx +++ b/packages/ui-vue/components/data-view/components/column-format/column-format.component.tsx @@ -3,7 +3,8 @@ import { DataColumn, DateTimeFormatOptions, InnerFormatter, - VisualData + VisualData, + VisualDataCell } from '../../composition/types'; import getEnumColumn from './enum.component'; import getBooleanColumn from './boolean.component'; @@ -32,11 +33,12 @@ export default function () { } function renderFormatColumn( - column: DataColumn, + cell: VisualDataCell, visualDataRow: VisualData, formatter: InnerFormatter ) { - const value = resolveField(visualDataRow.raw, column.field); + const { column } = cell; + const value = resolveField(visualDataRow.raw, column!.field); const options = (formatter.options || formatter) as InnerFormatter; // no formatter if (formatter.type === 'none') { @@ -56,7 +58,7 @@ export default function () { } else if (formatter.type === 'date') { return renderDateColumn(value, options); } else if (formatter.type === 'datetime') { - return renderDateTimeColumn(value, formatter as DateTimeFormatOptions); + return renderDateTimeColumn(value, formatter as unknown as DateTimeFormatOptions); } else if (formatter.type === 'image') { return renderImageColumn(value, options); } diff --git a/packages/ui-vue/components/data-view/components/editors/commands.component.tsx b/packages/ui-vue/components/data-view/components/editors/commands.component.tsx index 24eecfa8bf39aaa7de2ef43d471144a6ebc3c705..7233a7d15df78da4e3f6d92284bb56a740159cc4 100644 --- a/packages/ui-vue/components/data-view/components/editors/commands.component.tsx +++ b/packages/ui-vue/components/data-view/components/editors/commands.component.tsx @@ -13,11 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { DataColumn, DataColumnCommand, VisualData, VisualDataStatus } from '../../composition/types'; +import { DataColumn, DataColumnCommand, DataViewOptions, VisualData, VisualDataCell, VisualDataStatus } from '../../composition/types'; import FButton from '@farris/ui-vue/components/button'; -export default function () { +export default function (props: DataViewOptions) { - function shouldShowCurrentCommandButton(command: DataColumnCommand,visualDataRow: VisualData) { + function shouldShowCurrentCommandButton(command: DataColumnCommand, visualDataRow: VisualData) { switch (command.command) { case 'edit': case 'remove': @@ -30,28 +30,35 @@ export default function () { } } - function excuteCommand(command: DataColumnCommand, payload: MouseEvent, visualDataRow: VisualData) { + function excuteCommand(command: DataColumnCommand, payload: MouseEvent, visualDataRow: VisualData, cell: VisualDataCell) { command.onClick(payload, visualDataRow.dataIndex, visualDataRow); switch (command.command) { case 'edit': visualDataRow.status === VisualDataStatus.editing; + // 编辑回调事件 + props.commandOption?.onClickEditCommand?.(cell, visualDataRow); break; case 'accept': case 'cancel': visualDataRow.status === VisualDataStatus.initial; break; + case 'remove': + // 删除回调事件 + props.commandOption?.onClickDeleteCommand?.(cell, visualDataRow); + break; } } - function renderCommandColumn(column: DataColumn, visualDataRow: VisualData) { - return column.commands && column.commands.map((command: DataColumnCommand) => { - return shouldShowCurrentCommandButton(command,visualDataRow) && excuteCommand(command, payload, visualDataRow)} - style={{'margin-bottom':'3px'}} - > {command.text} ; - }); + function renderCommandColumn(cell: VisualDataCell, visualDataRow: VisualData) { + const { column } = cell; + return column!.commands && column!.commands.map((command: DataColumnCommand) => { + return shouldShowCurrentCommandButton(command, visualDataRow) && excuteCommand(command, payload, visualDataRow, cell)} + style={{ 'margin-bottom': '3px' }} + > {command.text} ; + }); } return { renderCommandColumn }; diff --git a/packages/ui-vue/components/data-view/composition/column/use-command-column.ts b/packages/ui-vue/components/data-view/composition/column/use-command-column.ts index d61a8b5aec1bcace38a1187545400737c6a6c3c5..a9bf458f8dc8196bb902e23d9c7b69da98ac1909 100644 --- a/packages/ui-vue/components/data-view/composition/column/use-command-column.ts +++ b/packages/ui-vue/components/data-view/composition/column/use-command-column.ts @@ -14,7 +14,7 @@ * limitations under the License. */ import { Ref, ref } from 'vue'; -import { DataColumn, DataViewOptions, UseCommandColumn } from '../types'; +import { DataColumn, DataViewOptions, UseCommandColumn, VisualData, VisualDataCell } from '../types'; export function useCommandColumn(props: DataViewOptions): UseCommandColumn { const defaultColumnWidth = 120; @@ -33,7 +33,9 @@ export function useCommandColumn(props: DataViewOptions): UseCommandColumn { dataType: 'commands', commands: commands.value, halign: props.commandOption?.halign || 'left', - visible: true + visible: true, + formatter: props.commandOption.formatter? (cell: VisualDataCell, row: VisualData) => + props.commandOption.formatter(cell, row): null } as DataColumn; columns.value.push(commandColumn as DataColumn); } diff --git a/packages/ui-vue/components/data-view/composition/types.ts b/packages/ui-vue/components/data-view/composition/types.ts index 4146403039c0cd2dae8ce6bed3c4cd8a64a6b7a3..5cf97199467695613d56cfdfd442a477a1dc4800 100644 --- a/packages/ui-vue/components/data-view/composition/types.ts +++ b/packages/ui-vue/components/data-view/composition/types.ts @@ -99,7 +99,7 @@ export interface DataColumn { format?: (cell: VisualDataCell, visualDataRow: VisualData) => VNode | string; binding?: any; draggable?: boolean; - headerFormatter?: (context: { headerCell: HeaderCell, headerCells: HeaderCell[], columnIndex: number }) => VNode| string; + headerFormatter?: (context: { headerCell: HeaderCell, headerCells: HeaderCell[], columnIndex: number }) => VNode | string; } export interface DataFilter { @@ -396,6 +396,12 @@ export interface CommandOptions { commands: ColumnCommand[]; /** 标题水平位置 */ halign: 'left' | 'center' | 'right'; + /** 自定义操作列模板,如果设置了列模板，commands属性失效 */ + formatter: (cell: VisualDataCell, visualDataRow: VisualData) => VNode | string; + /** 编辑回调事件 */ + onClickEditCommand: (cell: VisualDataCell, visualDataRow: VisualData) => void; + /** 删除回调事件 */ + onClickDeleteCommand: (cell: VisualDataCell, visualDataRow: VisualData) => void; } export interface ColumnCommand { @@ -660,7 +666,7 @@ export interface UseEdit { onClickCell: (payload: MouseEvent, cell: VisualDataCell, row: VisualData, column: DataColumn) => any; - onClickOutOfCell:(payload: MouseEvent | KeyboardEvent) => void; + onClickOutOfCell: (payload: MouseEvent | KeyboardEvent) => void; onClickCellByKeyboard: (payload: MouseEvent, cell: VisualDataCell, row: VisualData, column: DataColumn) => any; onMousedownCell: (payload: MouseEvent) => any; @@ -1244,7 +1250,8 @@ export type LookupFormatOptions = NumberFormatOptions | BooleanFormatOptions | EnumFormatOptions | ImageFormatOptions; - +type ColumnTemplateType = 'date' | 'datetime' | 'number' | 'enum' + | 'image' | 'boolean' | 'boolean2' | 'timeago' | 'none' | 'custom'; export interface InnerFormatter { data?: any; customFormat?: any; @@ -1260,8 +1267,7 @@ export interface InnerFormatter { height?: number; valueField?: string; textField?: string; - type?: 'date' | 'datetime' | 'number' | 'enum' - | 'image' | 'boolean' | 'boolean2' | 'timeago' | 'none' | 'custom'; + type?: ColumnTemplateType; options?: LookupFormatOptions; } diff --git a/packages/ui-vue/components/data-view/composition/visualization/use-visual-data-cell.ts b/packages/ui-vue/components/data-view/composition/visualization/use-visual-data-cell.ts index 5eaf99b1c2bff558cd2b77f276fbc95056f416b9..5c75c75c0e6c9cb40fbe6aa1385f622de806f5ad 100644 --- a/packages/ui-vue/components/data-view/composition/visualization/use-visual-data-cell.ts +++ b/packages/ui-vue/components/data-view/composition/visualization/use-visual-data-cell.ts @@ -7,7 +7,7 @@ import { import getCommandColumn from '../../components/editors/commands.component'; import getFormatColumn from '../../components/column-format/column-format.component'; -import { resolveField, setFieldValue } from "@farris/ui-vue/components/common"; +import { resolveField, setFieldValue, useCommonUtils } from "@farris/ui-vue/components/common"; import { isUndefined } from "lodash"; export function useVisualDataCell( @@ -15,11 +15,12 @@ export function useVisualDataCell( useCellEditorComposition: UseCellEditor, useVisualDataBoundComposition: UseVisualDataBound ): UseVisualDataCell { + const { isUndefined } = useCommonUtils(); const mergingCell = ref(props.mergeCell); const rowOption = ref(props.rowOption); const autoRowHeight = rowOption.value?.wrapContent || false; const { updateVisualInfomation } = useVisualDataBoundComposition; - const { renderCommandColumn } = getCommandColumn(); + const { renderCommandColumn } = getCommandColumn(props); const { renderFormatColumn } = getFormatColumn(); function createCellByField(targetField: string, mode: CellMode, index: number, dataItem: any, parent: VisualData, colSpan = 1) { const targetCell: VisualDataCell = { @@ -67,14 +68,17 @@ export function useVisualDataCell( if (column.dataType === 'commands') { targetCell.formatter = (cell: VisualDataCell, visualDataRow: VisualData) => { // 此处应该渲染操作列组件而不是编辑组件 - return renderCommandColumn(column, visualDataRow); + if(column.formatter) { + return column.formatter(targetCell,visualDataRow); + } + return renderCommandColumn(targetCell, visualDataRow); }; } else { if (column.formatter) { targetCell.formatter = (cell: VisualDataCell, visualDataRow: VisualData) => { return typeof column.formatter === 'function' ? column.formatter(cell, visualDataRow) : - renderFormatColumn(column, visualDataRow, column.formatter); + renderFormatColumn(targetCell, visualDataRow, column.formatter); }; } } @@ -112,7 +116,8 @@ export function useVisualDataCell( if (column.showEllipsis !== undefined) { targetCell.showEllipsis = column.showEllipsis; } - targetCell.showTips = column.showTips; + // targetCell.showTips = column.showTips; + targetCell.showTips = isUndefined(column.showTips)? true: column.showTips; targetCell.column = column; targetCell.align = column.align || 'left'; targetCell.valign = column.valign || 'middle'; diff --git a/packages/ui-vue/components/dynamic-resolver/src/converter/change-formatter.converter.ts b/packages/ui-vue/components/dynamic-resolver/src/converter/change-formatter.converter.ts new file mode 100644 index 0000000000000000000000000000000000000000..c80a7099350e89c3c28e468f818106a8677f8e05 --- /dev/null +++ b/packages/ui-vue/components/dynamic-resolver/src/converter/change-formatter.converter.ts @@ -0,0 +1,55 @@ +import { ComponentSchema } from "../../../designer-canvas/src/types"; +import { PropertyConverter, SchemaService } from "../types"; + +export default { + convertTo: (schema: ComponentSchema, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + // eslint-disable-next-line no-self-assign + if (schema.type === 'data-grid-column') { + if (schema.formatter) { + schema.formatter[propertyKey] = propertyValue; + } else { + schema.formatter = { + [propertyKey]: propertyValue + }; + } + } + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + if (schema.formatter) { + if (propertyKey === 'trueText') { + return schema.formatter.trueText; + } + if (propertyKey === 'falseText') { + return schema.formatter.falseText; + } + if (propertyKey === 'prefix') { + return schema.formatter.prefix; + } + if (propertyKey === 'suffix') { + return schema.formatter.suffix; + } + if (propertyKey === 'precision') { + return schema.formatter.precision; + } + if (propertyKey === 'decimal') { + return schema.formatter.decimal; + } + if (propertyKey === 'thousand') { + return schema.formatter.thousand; + } + if (propertyKey === 'dateFormat') { + return schema.formatter.dateFormat; + } + if (propertyKey === 'customFormat') { + return schema.formatter.customFormat; + } + } + if (schema.formatter.type) { + return schemaService.getRealEditorType(schema.formatter.type); + } + if (schema.formatter.data) { + return schemaService.getRealEditorType(schema.formatter.data); + } + return ''; + } +} as PropertyConverter; diff --git a/packages/ui-vue/components/dynamic-resolver/src/converter/column-command.converter.ts b/packages/ui-vue/components/dynamic-resolver/src/converter/column-command.converter.ts new file mode 100644 index 0000000000000000000000000000000000000000..a796743b58b2ea13a62bb3825bd62be737d1c3a2 --- /dev/null +++ b/packages/ui-vue/components/dynamic-resolver/src/converter/column-command.converter.ts @@ -0,0 +1,40 @@ +import { ComponentSchema } from "../../../designer-canvas/src/types"; +import { PropertyConverter, SchemaService } from "../types"; + +export default { + convertTo: (schema: ComponentSchema, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + // eslint-disable-next-line no-self-assign + + if (schema.command) { + schema.command[propertyKey] = propertyValue; + } else { + schema.command = { + [propertyKey]: propertyValue + }; + } + if (propertyKey === 'enable' && propertyValue) { + if (!schema.command.commands) { + schema.command.commands = [ + { + "text": "编辑", + "type": "primary", + "command": "edit" + }, + { + "text": "删除", + "type": "danger", + "command": "remove" + } + ]; + } + } + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + if (schema.command) { + if (propertyKey === 'enable') { + return schema.command.enable; + } + } + return ''; + } +} 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 e7ef2d847c6310e253c57924b5cf8d1dc89fbbc0..e5d78e45076f885f397a6c614065fc78dbd869cb 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 @@ -9,6 +9,8 @@ import buttonsConverter from "./converter/buttons.converter"; import propertyEditorConverter from "./converter/property-editor.converter"; import typeConverter from "./converter/type.converter"; import changeEditorConverter from "./converter/change-editor.converter"; +import changeFormatterConverter from './converter/change-formatter.converter'; +import columnCommandConverter from './converter/column-command.converter'; import fieldSelectorConverter from "./converter/field-selector.converter"; import paginationConverter from "./converter/pagination.converter"; import rowNumberConverter from "./converter/row-number.converter"; @@ -25,6 +27,8 @@ const propertyConverterMap = new Map([ ['/converter/items-count.converter', itemsCountConverter], ['/converter/type.converter', typeConverter], ['/converter/change-editor.converter', changeEditorConverter], + ['/converter/change-formatter.converter', changeFormatterConverter], + ['/converter/column-command.converter', columnCommandConverter], ['/converter/form-group-label.converter', formGroupLabelConverter], ['/converter/field-selector.converter', fieldSelectorConverter], ['/converter/pagination.converter', paginationConverter], 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 a66dee7e6988f81e82b62163d8738135d102fd70..915794757ff4b0970e700996f8469b440c94b24e 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 @@ -8,6 +8,8 @@ import buttonsConverter from "../../converter/buttons.converter"; import propertyEditorConverter from "../../converter/property-editor.converter"; import typeConverter from "../../converter/type.converter"; import changeEditorConverter from "../../converter/change-editor.converter"; +import changeFormatterConverter from '../../converter/change-formatter.converter'; +import columnCommandConverter from '../../converter/column-command.converter'; import fieldSelectorConverter from "../../converter/field-selector.converter"; import paginationConverter from "../../converter/pagination.converter"; import rowNumberConverter from "../../converter/row-number.converter"; @@ -26,6 +28,8 @@ export function usePropertyConfigResolver(propertyConfigSchemaMap: Record -import { Ref, ref } from 'vue'; -import { CommandOptions, DataColumn, VisualData } from '../../components/data-view'; +import { Ref, ref, h } from 'vue'; +import { CommandOptions, DataColumn, VisualData, VisualDataCell } from '../../components/data-view'; const gridComponentInstance = ref(); @@ -262,7 +262,14 @@ const commandOption = { gridComponentInstance.value.cancelDataItem(visualDataRow); } } - ] + ], + onClickEditCommand: (cell: VisualDataCell, row: VisualData) => { + // console.log('正在编辑操作列'); + }, + onClickDeleteCommand: (cell: VisualDataCell, row: VisualData) => { + // console.log('正在删除操作列'); + }, + // formatter: () => h('button',{innerHTML:'自定义按钮'}) } as CommandOptions;