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 f596de9e3d7c6e168c036ea53d8ca148ce88e04a..d59ad4b061b7fce145f64d4252904c8c58654447 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 @@ -83,8 +83,7 @@ export default defineComponent({ getTreeViewData(); if (entityTreeRef.value && entityTreeRef.value.updateDataSource) { - entityTreeRef.value.updateDataSource(treeViewData.value); - + entityTreeRef.value.updateDataSource(treeViewData.value, { keepScrollPosition: true }); nextTick(() => { setTreeDraggable(); }); @@ -150,6 +149,7 @@ export default defineComponent({ columnOption={{ fitColumns: true, fitMode: 'expand' }} columns={columns.value} selectable={true} + virtualized={true} showTreeNodeIcons={true} treeNodeIconsData={treeNodeIconsData} row-option={rowOptions} diff --git a/packages/renderer/src/component-config-resolver/data-grid-component-config-resolver.ts b/packages/renderer/src/component-config-resolver/data-grid-component-config-resolver.ts index ebfdc2bf68349c1ae518de91073f8af29db0840c..48e1c91b3f0e0a99e77488c1e6a6e7e348ff6bcb 100644 --- a/packages/renderer/src/component-config-resolver/data-grid-component-config-resolver.ts +++ b/packages/renderer/src/component-config-resolver/data-grid-component-config-resolver.ts @@ -75,6 +75,7 @@ export class DataGridComponentConfigResolver extends ComponentConfigResolver { column.visible = this.configResolver.resolve(visible, id); } this.resolveLookupColumn(metadata, column); + this.resolveComboListColumn(metadata, column); if (!editor) { return; } @@ -110,7 +111,7 @@ export class DataGridComponentConfigResolver extends ComponentConfigResolver { } } private resolveLookupColumn(viewSchema: Record, column: Record) { - const { editor, dictPicking, clear, beforeLoadData, beforeSelectData, dictPicked } = column; + const { editor, dictPicking, clear, beforeLoadData, beforeSelectData, dictPicked, load } = column; if (!editor || editor.type !== 'lookup') { return; } @@ -132,6 +133,28 @@ export class DataGridComponentConfigResolver extends ComponentConfigResolver { if (dictPicked) { editor.dictPicked = (payload: any) => (viewModel as any)[dictPicked]({ payload, schema: viewSchema }); } + if (load) { + editor.load = (payload: any) => (viewModel as any)[load]({ payload, schema: viewSchema }); + } + } + + private resolveComboListColumn(viewSchema: Record, column: Record) { + const { load, onChange, onClear, editor } = column; + if (!editor || editor.type !== 'combo-list') { + return; + } + const { id } = viewSchema; + const relatedComponent = this.formMetadataService.getRelatedComponent(id); + const viewModel = this.viewModel.getModule().getViewModel(relatedComponent.id); + if (load) { + editor.load = (payload: any) => (viewModel as any)[load]({ payload, schema: viewSchema }); + } + if (onChange) { + editor.onChange = (payload: any) => (viewModel as any)[onChange]({ payload, schema: viewSchema }); + } + if (onClear) { + editor.onClear = (payload: any) => (viewModel as any)[onClear]({ payload, schema: viewSchema }); + } } /** diff --git a/packages/ui-vue/components/button-edit/src/button-edit.component.tsx b/packages/ui-vue/components/button-edit/src/button-edit.component.tsx index 4b6883d164f810ce9c0cfd9b14cdaeb666d31eb2..b62e369946c33881fe73fc6a119f3191bbd1685f 100644 --- a/packages/ui-vue/components/button-edit/src/button-edit.component.tsx +++ b/packages/ui-vue/components/button-edit/src/button-edit.component.tsx @@ -82,8 +82,8 @@ export default defineComponent({ const containerStyle = computed(() => { return { - paddingLeft: '3px', - backgroundColor: '#fff' + // paddingLeft: '3px', + // backgroundColor: '#fff' }; }); diff --git a/packages/ui-vue/components/button-edit/src/components/text-edit.component.tsx b/packages/ui-vue/components/button-edit/src/components/text-edit.component.tsx index daeda612200bea97d438ff8e60c8bfc24f1dc2b0..6984a464cbfd1d4dec4e8e9da27506c36d383b37 100644 --- a/packages/ui-vue/components/button-edit/src/components/text-edit.component.tsx +++ b/packages/ui-vue/components/button-edit/src/components/text-edit.component.tsx @@ -16,8 +16,8 @@ export default function ( const { uuid } = useGuid(); const inputStyle = computed(() => { return { - 'border-top-right-radius': '6px', - 'border-bottom-right-radius': '6px' + // 'border-top-right-radius': '6px', + // 'border-bottom-right-radius': '6px' }; }); onMounted(() => { diff --git a/packages/ui-vue/components/combo-list/src/combo-list.props.ts b/packages/ui-vue/components/combo-list/src/combo-list.props.ts index ca9b75289c1f6510f1718712aa37fc48ee77436f..5deca9509530cbb993767393f626ee422693b486 100644 --- a/packages/ui-vue/components/combo-list/src/combo-list.props.ts +++ b/packages/ui-vue/components/combo-list/src/combo-list.props.ts @@ -213,6 +213,7 @@ export const comboListProps = { * 打开前 */ beforeOpen: { type: Function as PropType, default: null }, + load: { type: Function as PropType<() => Promise>}, searchOption: { type: [Boolean, Function] as PropType boolean)>, default: false diff --git a/packages/ui-vue/components/combo-list/src/composition/use-data-source.ts b/packages/ui-vue/components/combo-list/src/composition/use-data-source.ts index b54e2837820b877b6623887ff3b0c08dfbd613fe..91189f1fdbdd1275f90558c7334e33fc7f5bdeac 100644 --- a/packages/ui-vue/components/combo-list/src/composition/use-data-source.ts +++ b/packages/ui-vue/components/combo-list/src/composition/use-data-source.ts @@ -59,6 +59,9 @@ export function useDataSource(props: ComboListProps): UseDataSource { function loadRemoteData() { const { url, method = 'GET', headers = {'Content-Type': 'application/json;charset=utf-8;'}, body = null } = props.remote; // const requestInfo = { method, headers, body }; + if(!url) { + return; + } const requestInfo = method.toLowerCase() === 'get' ? { method, headers } : { method, headers, body }; let isFromJson = false; fetch(new Request(url, requestInfo)) diff --git a/packages/ui-vue/components/combo-list/src/property-config/combo-list.property-config.ts b/packages/ui-vue/components/combo-list/src/property-config/combo-list.property-config.ts index 6bf033ea5ef351d0122201420de10d3ceaaf75c2..a94ab190c56b28d504b0e23a6e6a40888e64e4a8 100644 --- a/packages/ui-vue/components/combo-list/src/property-config/combo-list.property-config.ts +++ b/packages/ui-vue/components/combo-list/src/property-config/combo-list.property-config.ts @@ -85,7 +85,7 @@ export class ComboListProperty extends InputBaseProperty { visible: !propertyData.editor.dataSourceType || propertyData.editor.dataSourceType === "static", ...self.getItemCollectionEditor(propertyData, propertyData.editor.valueField, propertyData.editor.textField), // 这个属性,标记当属性变更得时候触发重新更新属性 - refreshPanelAfterChanged: true, + refreshPanelAfterChanged: true }, url: { visible: propertyData.editor.dataSourceType === "dynamic", @@ -205,11 +205,24 @@ export class ComboListProperty extends InputBaseProperty { title: "启用清空", type: "boolean" }, + dataSourceType: { + description: "", + title: "数据源类型", + type: "enum", + editor: { + default: "static", + data: [ + { id: "static", name: "静态" }, + { id: "dynamic", name: "动态" } + ] + }, + refreshPanelAfterChanged: true + }, data: { description: "", title: "数据", type: "array", - visible: true, + visible: !propertyData.editor?.dataSourceType || propertyData.editor?.dataSourceType === "static", ...self.getItemCollectionEditor(propertyData, propertyData.editor?.valueField, propertyData.editor?.textField), // 这个属性,标记当属性变更得时候触发重新更新属性 refreshPanelAfterChanged: true, @@ -256,8 +269,12 @@ export class ComboListProperty extends InputBaseProperty { propertyData.editor.valueField = 'value'; propertyData.editor.textField = 'name'; propertyData.editor.remote = null; + propertyData.editor.load = null; } else if (changeObject.propertyValue === 'dynamic') { propertyData.editor.remote = { method: 'GET' }; + propertyData.editor.valueField = 'value'; + propertyData.editor.textField = 'name'; + propertyData.editor.load = propertyData.load; } break; } @@ -379,6 +396,15 @@ export class ComboListProperty extends InputBaseProperty { if (designVM && self.designViewModelField) { designVM.changeField(self.designViewModelField.id, { valueChanging: propertyData.fieldValueChanging, valueChanged: propertyData.fieldValueChanged }); } + if (propertyData.editor.load !== propertyData.load) { + propertyData.editor.load = propertyData.load; + } + if (propertyData.editor.onChange !== propertyData.onChange) { + propertyData.editor.onChange = propertyData.onChange; + } + if (propertyData.editor.onClear !== propertyData.onClear) { + propertyData.editor.onClear = propertyData.onClear; + } } }; diff --git a/packages/ui-vue/components/components.ts b/packages/ui-vue/components/components.ts index 1971d0eb4ed5480997ba4ec3f74bf428f99a1e89..84953a6740043820e392b02362ca4b8fcf24a584 100644 --- a/packages/ui-vue/components/components.ts +++ b/packages/ui-vue/components/components.ts @@ -36,7 +36,7 @@ export * from './data-view'; export type { DataColumn, VisualData, VisualDataCell, RowOptions } from './data-view'; export { default as FDrawer } from './drawer'; export type { DrawerProps } from './drawer'; -export { FResponseForm, FResponseForm as FDynamicForm, FDynamicFormGroup, FDynamicFormInput } from './dynamic-form'; +export { FResponseForm as FDynamicForm, FDynamicFormGroup, FDynamicFormInput } from './dynamic-form'; export type { EditorConfig } from './dynamic-form'; export { default as FFilterBar } from './filter-bar'; export type { FilterBarProps } from './filter-bar'; @@ -49,7 +49,7 @@ export { default as FListNav } from './list-nav'; export type { ListNavProps } from './list-nav'; export { default as FListView } from './list-view'; export type { ListViewProps } from './list-view'; -export { default as FLayout } from './layout'; +export { default as FLayout, FLayoutPane } from './layout'; export type { LayoutProps } from './layout'; export { default as FLoading, FLoadingService } from './loading'; export type { LoadingProps } from './loading'; @@ -120,5 +120,5 @@ export { default as FDiscussionEditor } from './discussion-editor'; export type { DiscussionEditorProps } from './discussion-editor'; export { default as FDiscussionList } from './discussion-list'; export type { DiscussionListProps } from './discussion-list'; -export { default as Locale, LocaleService, useResourceLoader, LOCALE_SERVICE_INJECTION_TOKEN, type LocaleConfig } from './locale'; +export { default as Locale, LocaleService, useResourceLoader, LOCALE_SERVICE_INJECTION_TOKEN, type LocaleConfig } from './locale'; export * from './common'; 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 05e2924e1957dbb6862810c986d8fbd2fc700420..f9b5a2aad0a61c4c1ef560ec5939406ff75d1ed5 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 @@ -214,6 +214,8 @@ export type RowNumberOptions = ExtractPropTypes; export const rowOptions = { /** 自定义行样式 */ customRowStyle: { type: Function, default: () => { } }, + /** 自定义单元格样式 */ + customCellStyle: { type: Function, default: () => { } }, /** 自定义行状态 */ customRowStatus: { type: Function, default: () => { } }, /** 禁止行选中表达式 */ @@ -387,7 +389,7 @@ export const dataGridProps = { rowNumber: { type: Object as PropType, default: { enable: true, - width: 32, + width: 36, showEllipsis:true, heading: '序号' } 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 9cfe21c0079dee26e80ac7b9dde7b2cabd9c5cf0..1994e8ff4faec76762475630b98d8d6e3e688929 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 @@ -35,7 +35,8 @@ export class DataGriColumnProperty extends BaseControlProperty { this.getAppearanceProperties(propertyData, gridData); // 行为 // const isVisibleEnum = propertyData.formatter?.type === 'enum' && !propertyData.editor; - const isVisibleEnum = propertyData.formatter?.type === 'enum' && (propertyData.editor?.type !== 'combo-list'); + const isVisibleEnum = propertyData.formatter?.type === 'enum' && (propertyData.editor?.type !== 'combo-list') + && this.isDefaultFormatter(propertyData); const extendProperties = { formatterEnumData: { description: "", @@ -123,13 +124,28 @@ export class DataGriColumnProperty extends BaseControlProperty { return false; } private getEventPropConfig(propertyData: any) { - let events: { label: string, name: string }[] = [ - { + let events: { label: string, name: string }[] = []; + if (propertyData.editor?.type === 'combo-list') { + events.push( + { + label: 'onChange', + name: '值变化事件' + }, + { + label: 'onClear', + name: '清空事件' + }, + { + label: 'load', + name: '加载远端数据' + }); + } + if (propertyData.formatterType === 'hyperlink') { + events.push({ label: 'onClickLinkCommand', name: '超链接事件' - } - ]; - + }) + } // 列编辑器事件 if (propertyData?.editor?.type === 'lookup') { events = [...events, ...LookupEvents]; @@ -164,12 +180,21 @@ export class DataGriColumnProperty extends BaseControlProperty { // 同步超链接模板 // 替换自定义模板 propertyData.columnTemplate = ` - {{rowData.${propertyData.field}}} - `; + @click="(ctx)=>viewModel.current.${propertyData.onClickLinkCommand}({id: rowData.id,context: ctx})"> + {{rowData.${propertyData.field}}} + `; // 刷新属性面板 self.getFormDesignerInstance()?.reloadPropertyPanel(); } + if (propertyData.editor.load !== propertyData.load) { + propertyData.editor.load = propertyData.load; + } + if (propertyData.editor.onChange !== propertyData.onChange) { + propertyData.editor.onChange = propertyData.onChange; + } + if (propertyData.editor.onClear !== propertyData.onClear) { + propertyData.editor.onClear = propertyData.onClear; + } } }; } @@ -292,11 +317,27 @@ export class DataGriColumnProperty extends BaseControlProperty { ] } }, + formatterType: { + title: '启用列格式化', + type: 'enum', + $converter: '/converter/change-formatter-type.converter', + description: '启用列格式化', + refreshPanelAfterChanged: true, + editor: { + data: [ + { id: 'default', name: '默认格式化' }, + { id: 'custom', name: '列模板' }, + { id: 'hyperlink', name: '超链接模板' } + ] + }, + }, columnTemplate: { description: '列模板', title: '列模板', type: 'string', - refreshPanelAfterChanged: true, + // $converter: '/converter/change-formatter.converter', + visible: !self.isDefaultFormatter(propertyData), + // refreshPanelAfterChanged: true, editor: { type: "code-editor", language: "html", @@ -346,12 +387,12 @@ export class DataGriColumnProperty extends BaseControlProperty { case 'columnTemplate': { // 提示以列模板为主 if (changeObject.propertyValue) { - self.notifyService.warning({ position: 'top-center', message: '注意:已自定义列模板,【列格式化】【悬浮提示】【数据水平对齐方式】【数据垂直对齐方式】等列属性会失效' }); + // self.notifyService.warning({ position: 'top-center', message: '注意:已自定义列模板,【列格式化】【悬浮提示】【数据水平对齐方式】【数据垂直对齐方式】等列属性会失效' }); } break; }; case 'enableGroup': { - if(changeObject.propertyValue) { + if (changeObject.propertyValue) { gridData.group.groupFields = [prop.field]; } else { // groupFields.splice(groupFields.indexOf(prop.field), 1); @@ -360,7 +401,7 @@ export class DataGriColumnProperty extends BaseControlProperty { } } } - }; + } } private getFieldEditorProperties(propertyData: any, gridData: any) { if (gridData.fieldEditable && propertyData.editor) { @@ -374,10 +415,17 @@ export class DataGriColumnProperty extends BaseControlProperty { } } + private isDefaultFormatter(propertyData: any) { + return propertyData.formatterType === 'default' || + // 初始化该属性不存在,代表启用默认格式化 + !propertyData.formatterType && + !propertyData.columnTemplate; + } + private getTemplateProperties(propertyData: any) { const self = this; const hasOwnProps = Object.prototype.hasOwnProperty; - const formatterType = { + const typeFormatter = { enum: [ { id: 'enum', name: '枚举' }, // { id: 'custom', name: '自定义模板' }, @@ -413,45 +461,26 @@ export class DataGriColumnProperty extends BaseControlProperty { ] }; return { - title: '列格式化', + title: '格式化', description: '', + hide: !self.isDefaultFormatter(propertyData), properties: { type: { description: '', title: '类型', type: 'enum', + // visible: isDefaultFormatter, $converter: '/converter/change-formatter.converter', refreshPanelAfterChanged: true, editor: { - data: formatterType[propertyData.dataType] + data: typeFormatter[propertyData.dataType] } }, - // 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', + visible: propertyData.formatter?.type === 'boolean', refreshPanelAfterChanged: true, description: '布尔为true时文本' }, @@ -459,7 +488,7 @@ export class DataGriColumnProperty extends BaseControlProperty { title: '布尔为false时文本', $converter: '/converter/change-formatter.converter', type: 'string', - visible: !!propertyData.formatter && propertyData.formatter.type === 'boolean', + visible: propertyData.formatter?.type === 'boolean', refreshPanelAfterChanged: true, description: '布尔为false时文本' }, @@ -467,7 +496,7 @@ export class DataGriColumnProperty extends BaseControlProperty { title: '前缀', $converter: '/converter/change-formatter.converter', type: 'string', - visible: !!propertyData.formatter && propertyData.formatter.type === 'number', + visible: propertyData.formatter?.type === 'number', refreshPanelAfterChanged: true, description: '前缀' }, @@ -475,7 +504,7 @@ export class DataGriColumnProperty extends BaseControlProperty { title: '后缀', $converter: '/converter/change-formatter.converter', type: 'string', - visible: !!propertyData.formatter && propertyData.formatter.type === 'number', + visible: propertyData.formatter?.type === 'number', refreshPanelAfterChanged: true, description: '后缀' }, @@ -483,7 +512,7 @@ export class DataGriColumnProperty extends BaseControlProperty { title: '精度', $converter: '/converter/change-formatter.converter', type: 'number', - visible: !!propertyData.formatter && propertyData.formatter.type === 'number', + visible: propertyData.formatter?.type === 'number', refreshPanelAfterChanged: true, description: '精度' }, @@ -491,7 +520,7 @@ export class DataGriColumnProperty extends BaseControlProperty { title: '小数分隔符', $converter: '/converter/change-formatter.converter', type: 'string', - visible: !!propertyData.formatter && propertyData.formatter.type === 'number', + visible: propertyData.formatter?.type === 'number', refreshPanelAfterChanged: true, description: '小数分隔符' }, @@ -499,14 +528,15 @@ export class DataGriColumnProperty extends BaseControlProperty { title: '千分位', $converter: '/converter/change-formatter.converter', type: 'string', - visible: !!propertyData.formatter && propertyData.formatter.type === 'number', + visible: propertyData.formatter?.type === 'number', refreshPanelAfterChanged: true, description: '千分位' }, tempDateFormat: { title: '日期格式', $converter: '/converter/change-formatter.converter', - visible: !!propertyData.formatter && (propertyData.formatter.type === 'date' || propertyData.formatter.type === 'datetime'), + visible: propertyData.formatter?.type === 'date' + || propertyData.formatter?.type === 'datetime', refreshPanelAfterChanged: true, description: '日期格式', type: 'enum', @@ -515,10 +545,7 @@ export class DataGriColumnProperty extends BaseControlProperty { { id: 'yyyy-MM-dd', name: 'yyyy-MM-dd' }, { id: 'yyyy/MM/dd', name: 'yyyy/MM/dd' }, { id: 'dd/MM/yyyy', name: 'dd/MM/yyyy' }, - { id: 'yearMonthDay', name: 'yyyy年MM月dd日' }, - // { id: 'yyyy-MM-ddTHH:mm:ss', name: 'yyyy-MM-dd HH:mm:ss' }, - // { id: 'yyyy/MM/ddTHH:mm:ss', name: 'yyyy/MM/dd HH:mm:ss' }, - // { id: 'yearMonthDayHourMinuteSecond', name: 'yyyy年MM月dd日 HH时mm分ss秒' }, + { id: 'yearMonthDay', name: 'yyyy年MM月dd日' } ] } } @@ -531,9 +558,9 @@ export class DataGriColumnProperty extends BaseControlProperty { case 'type': { // 清空列模板 if (changeObject.propertyValue !== 'none' && prop.columnTemplate) { - prop.columnTemplate = ''; + // prop.columnTemplate = ''; // 提示以列格式化为主 - self.notifyService.warning({ position: 'top-center', message: '注意:已设置列格式化,【列模板】被清空且会失效' }); + // self.notifyService.warning({ position: 'top-center', message: '注意:已设置列格式化,【列模板】被清空且会失效' }); } if (changeObject.propertyValue === 'boolean') { if (!hasOwnProps.call(prop.formatter, 'trueText')) { @@ -571,7 +598,7 @@ export class DataGriColumnProperty extends BaseControlProperty { if (changeObject.propertyValue === 'enum') { if (!hasOwnProps.call(prop.formatter, 'data')) { prop.formatter.data = []; - if(prop.formatterEnumData?.length) { + if (prop.formatterEnumData?.length) { prop.formatterEnumData = []; } } 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 297211ecb9ecbb78cad2c8b5eccd52393d1ebbd6..eecea339e86372807ec0060cd0f905a59fa0eceb 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 @@ -27,7 +27,7 @@ export class DataGridProperty extends BaseControlProperty { // 外观 this.getAppearanceProperties(propertyData); // 操作列 - this.propertyConfig.categories['command'] = useCommandOption().getCommandColumnProperties(propertyData); + this.propertyConfig.categories['command'] = useCommandOption(this).getCommandColumnProperties(propertyData); // 填充列宽,仅支持平分列宽 this.propertyConfig.categories['column'] = useColumnOption().getColumnOptionProperties(propertyData); // 行配置 增加行和单元格自定义样式 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 5da80fbd6c1af8100a8048986ae12f23d63d3e73..392ba3479b3ff966ecb6a52308e0864807826fb2 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 @@ -145,18 +145,23 @@ "default": 120 }, "formatter": { - "description":"列格式化", + "description": "列格式化", "type": "object", "default": { - "type":"none", + "type": "none", "customFormat": "", "trueText": "是", "falseText": "否", "dateFormat": "yyyy-MM-dd" } }, + "formatterType": { + "description": "启用列格式化", + "type": "string", + "default": "" + }, "columnTemplate": { - "description":"列模板", + "description": "列模板", "type": "string", "default": "" }, @@ -182,6 +187,11 @@ "description": "", "type": "boolean", "default": false + }, + "onClickLinkCommand": { + "description": "超链接事件", + "type": "string", + "default": "" } }, "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 ff3f784555d3765957fb23d5ae1c4d9c7299e7fb..5733188ff08b1d4fc2e44a9b40d5c0e85146c9ad 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 @@ -147,6 +147,10 @@ "command": { "type": "object", "properties": { + "enableType": { + "type": "string", + "default": "unable" + }, "enable": { "description": "", "type": "boolean", @@ -485,16 +489,16 @@ "customRowStyle": { "description": "", "type": "string", - "default": "" + "default": "// 示例代码\r\n// dataItem是行数据\r\n(dataItem) => {\r\n if(dataItem.code === '0001') {\r\n return {\r\n class: {\r\n 'text-align': true,\r\n 'text-red': true\r\n },\r\n style: {\r\n 'background-color': '#000',\r\n 'font-size': '1rem'\r\n }\r\n };\r\n }\r\n return {};\r\n}" }, "customCellStyle": { "description": "", "type": "string", - "default": "" + "default": "// 示例代码\r\n// cell.data 单元格数据 cell.column 列数据\r\n(cell) => {\r\n if(cell.data === '0002' && \r\n cell.column.field === 'name') {\r\n return {\r\n class: {\r\n 'text-align': true,\r\n 'text-red': true\r\n },\r\n style: {\r\n 'background-color': '#000',\r\n 'font-size': '1rem'\r\n }\r\n };\r\n }\r\n return {};\r\n}" }, "disable": { "description": "", - "type": "obejct" + "type": "object" }, "height": { "description": "", diff --git a/packages/ui-vue/components/data-view/composition/column/use-fit-column.ts b/packages/ui-vue/components/data-view/composition/column/use-fit-column.ts index 8cd20b09baf66eba3cb88bb3c7c7a3efea94d00c..f5b8bf73964a02dbad36ec90068f45370b4f5e1b 100644 --- a/packages/ui-vue/components/data-view/composition/column/use-fit-column.ts +++ b/packages/ui-vue/components/data-view/composition/column/use-fit-column.ts @@ -38,7 +38,7 @@ export function useFitColumn( const showRowCheckbox = computed(() => !props.hierarchy && (props.selection?.multiSelect || props.selection?.showCheckbox || false)); const sidebarColumnWidth = computed(() => - 0 + (showRowNumer.value ? props.rowNumber?.width || 32 : 0) + (showRowCheckbox.value ? defaultCheckboxWidth : 0) + 0 + (showRowNumer.value ? props.rowNumber?.width || 36 : 0) + (showRowCheckbox.value ? defaultCheckboxWidth : 0) ); // const fitColumns = ref(props.columnOption?.fitColumns || false); diff --git a/packages/ui-vue/components/data-view/composition/use-sidebar.ts b/packages/ui-vue/components/data-view/composition/use-sidebar.ts index d18087cb4be62e66677f29a0f0f8bd2f17d8df84..3692991d31153ab6bd8e00a97f5e2c0842c58b2d 100644 --- a/packages/ui-vue/components/data-view/composition/use-sidebar.ts +++ b/packages/ui-vue/components/data-view/composition/use-sidebar.ts @@ -30,7 +30,7 @@ export function useSidebar(props: DataViewOptions, useSelectionCompostion: UseSe return showNodeIconCheckBox ? false : showCheckBox.value; }); - const rowNumberWidth = ref(showRowNumer.value ? props.rowNumber?.width ?? 32 : 0); + const rowNumberWidth = ref(showRowNumer.value ? props.rowNumber?.width ?? 36 : 0); const checkboxWidth = ref(showSidebarCheckBox.value ? defaultCheckboxWidth : 0); // const sidebarTitle = computed(() => showRowNumer.value ? props.rowNumber?.heading ?? '序号' : '');getLocaleValue('datagrid.lineNumberTitle') 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 index 92e246d0ae563680e9a23b4201e1d0847ac939fb..76aa8d7c16c063c5376e1278c284635741471f11 100644 --- 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 @@ -1,15 +1,30 @@ -export function useCommandOption() { +import { PropertyChangeObject } from "@farris/ui-vue/components/property-panel"; +export function useCommandOption(dataGridPropertyInstance: any) { function getCommandColumnProperties(propertyData: any) { return { title: '操作列', description: '', properties: { - enable: { - title: '启用', - type: 'boolean', + // enable: { + // title: '启用', + // type: 'boolean', + // $converter: '/converter/column-command.converter', + // description: '启用操作列', + // refreshPanelAfterChanged: true + // }, + enableType: { + title: '启用操作列', + type: 'enum', $converter: '/converter/column-command.converter', description: '启用操作列', - refreshPanelAfterChanged: true + refreshPanelAfterChanged: true, + editor: { + data: [ + { id: 'unable', name: '不启用' }, + { id: 'default', name: '启用默认操作列' }, + { id: 'custom', name: '自定义模板' } + ] + } }, // commands: { // description: '', @@ -22,17 +37,28 @@ export function useCommandOption() { // ] // } // }, - // formatter: { - // title: '操作列模板', - // type: 'string', - // visible: false, - // description: '自定义操作列模板', - // refreshPanelAfterChanged: true, - // editor: { - // type: "code-editor", - // language: "html", - // } - // } + formatter: { + title: '操作列模板', + $converter: '/converter/column-command.converter', + type: 'string', + visible: propertyData.command?.enableType === 'custom', + description: '操作列模板', + refreshPanelAfterChanged: true, + editor: { + type: "code-editor", + language: "html", + } + } + }, + setPropertyRelates(changeObject: PropertyChangeObject, data: any) { + switch (changeObject && changeObject.propertyID) { + case 'enableType': { + if (changeObject.propertyValue === 'custom') { + dataGridPropertyInstance.getFormDesignerInstance()?.reloadPropertyPanel(); + } + break; + } + } } }; } diff --git a/packages/ui-vue/components/data-view/designer/property-config/use-row-option.tsx b/packages/ui-vue/components/data-view/designer/property-config/use-row-option.tsx index e345f210f962fa1593ac7ef4f66e3368fc94df32..7c65d332a287c2a82c2362a6fa0e3e64f6f9c6b5 100644 --- a/packages/ui-vue/components/data-view/designer/property-config/use-row-option.tsx +++ b/packages/ui-vue/components/data-view/designer/property-config/use-row-option.tsx @@ -11,33 +11,7 @@ export function useRowOption() { $converter: '/converter/row-option.converter', editor: { type: "code-editor", - language: "javascript", - leftTemplate: () => <> -
示例代码
-
-                                {
-                                    `
-(dataItem) => {
-    if(dataItem.code === '0001') {
-        return {
-          class: {
-            'text-align': true,
-            'text-red': true
-          },
-          style: {
-            'background-color': '#000',
-            'font-size': '1rem'
-          }
-        };
-    }
-    return {};
-}
-    
-注: dataItem  行数据
-                                `
-                                }
-                            
- + language: "javascript" } }, customCellStyle: { @@ -47,34 +21,7 @@ export function useRowOption() { $converter: '/converter/row-option.converter', editor: { type: "code-editor", - language: "javascript", - leftTemplate: () => <> -
示例代码
-
-                                {
-                                    `
-(cell) => {
-    if(cell.data === '0002' && 
-        cell.column.field === 'name') {
-        return {
-          class: {
-            'text-align': true,
-            'text-red': true
-          },
-          style: {
-            'background-color': '#000',
-            'font-size': '1rem'
-          }
-        };
-    }
-    return {};
-}
-注: cell.data   单元格数据
-    cell.column 列数据
-                                `
-                                }
-                            
- + language: "javascript" } } } diff --git a/packages/ui-vue/components/designer-canvas/src/composition/designer-canvas-changed.ts b/packages/ui-vue/components/designer-canvas/src/composition/designer-canvas-changed.ts index 867da936d1b060e718f9ffafd7d62fc6527dd999..d72ba52a6223ccdb84c9232f968c7fe3a4789e11 100644 --- a/packages/ui-vue/components/designer-canvas/src/composition/designer-canvas-changed.ts +++ b/packages/ui-vue/components/designer-canvas/src/composition/designer-canvas-changed.ts @@ -1,4 +1,3 @@ -import { unset } from "lodash"; import { ref } from "vue"; /** 用于响应画布发生变更 */ diff --git a/packages/ui-vue/components/discussion-editor/src/components/colleague-panel.component.tsx b/packages/ui-vue/components/discussion-editor/src/components/colleague-panel.component.tsx index 7d437301bc96a5d1717ae162cbbbd12d3c359b01..5c3e904b8551cb7d12d013f0473d084ae2666c99 100644 --- a/packages/ui-vue/components/discussion-editor/src/components/colleague-panel.component.tsx +++ b/packages/ui-vue/components/discussion-editor/src/components/colleague-panel.component.tsx @@ -2,9 +2,8 @@ import { SetupContext, computed, defineComponent, ref, watch } from "vue"; import FPopover from '@farris/ui-vue/components/popover'; import FInputGroup from '@farris/ui-vue/components/input-group'; import { useDiscussionEditor } from "../composition/use-discussion-editor"; -import { UsePopup } from "../types/composition"; import { DiscussionEditorProps, discussionEditorProps } from "../discussion-editor.props"; -import { cloneDeep } from "lodash"; +import { cloneDeep } from "lodash-es"; export default defineComponent({ diff --git a/packages/ui-vue/components/discussion-editor/src/components/personnel-management.component.tsx b/packages/ui-vue/components/discussion-editor/src/components/personnel-management.component.tsx index 701f3939fba0a67e59927c87e0e3053a63a45c84..70342b2ff56a13b4d938f5dfb1b30176dfb793d0 100644 --- a/packages/ui-vue/components/discussion-editor/src/components/personnel-management.component.tsx +++ b/packages/ui-vue/components/discussion-editor/src/components/personnel-management.component.tsx @@ -4,7 +4,7 @@ import FInputGroup from '@farris/ui-vue/components/input-group'; import { useDiscussionEditor } from "../composition/use-discussion-editor"; import { UsePopup } from "../types/composition"; import { DiscussionEditorProps, discussionEditorProps } from "../discussion-editor.props"; -import { cloneDeep } from "lodash"; +import { cloneDeep } from "lodash-es"; /** * 人员管理弹出窗口 ToDo diff --git a/packages/ui-vue/components/dynamic-resolver/src/converter/change-formatter-type.converter.ts b/packages/ui-vue/components/dynamic-resolver/src/converter/change-formatter-type.converter.ts new file mode 100644 index 0000000000000000000000000000000000000000..97d454a4f7059449f061bc6309e0a6aeea7a3e0a --- /dev/null +++ b/packages/ui-vue/components/dynamic-resolver/src/converter/change-formatter-type.converter.ts @@ -0,0 +1,39 @@ +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' || schema.type === 'tree-grid-column') { + schema[propertyKey] = propertyValue; + if (propertyKey === 'formatterType' && propertyValue === 'hyperlink') { + schema.columnTemplate = ` + +{{rowData.${schema.field}}} +`; + } + if (propertyKey === 'formatterType' && propertyValue === 'default') { + schema.columnTemplate = ''; + } + } + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + if (propertyKey === 'columnTemplate') { + return schema.columnTemplate; + } + if (propertyKey === 'formatterType') { + if (!schema.formatterType) { + // 当该属性不存在的时候,兼容以前的场景 + if (schema.columnTemplate && !schema.onClickLinkCommand) { + return 'custom'; + } + if (schema.columnTemplate && schema.onClickLinkCommand) { + return 'hyperlink'; + } + } + return schema.formatterType || 'default'; + } + 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 index a796743b58b2ea13a62bb3825bd62be737d1c3a2..b64d677f05b51465d82afcc97497792a5e883c5a 100644 --- 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 @@ -12,7 +12,27 @@ export default { [propertyKey]: propertyValue }; } - if (propertyKey === 'enable' && propertyValue) { + // if (propertyKey === 'enable' && propertyValue) { + // if (!schema.command.commands) { + // schema.command.commands = [ + // { + // "text": "编辑", + // "type": "primary", + // "command": "edit" + // }, + // { + // "text": "删除", + // "type": "danger", + // "command": "remove" + // } + // ]; + // } + // } + if (propertyKey === 'enableType' && propertyValue === 'default') { + schema.command.enable = true; + if(schema.command.formatter) { + schema.command.formatter = ''; + } if (!schema.command.commands) { schema.command.commands = [ { @@ -28,11 +48,48 @@ export default { ]; } } + if (propertyKey === 'enableType' && propertyValue === 'custom') { + schema.command.enable = true; + if (!schema.command.formatter) { + schema.command.formatter = `(cell: VisualDataCell, row: VisualData) => + // cell是单元格对象,cell.data是单元格数据,cell.column是当前列对象 + // row是行对象,row.raw是行数据 + // 构造按钮 + const commands = [ + { + text: '上移', + type: 'primary', + onClick(payload: MouseEvent, dataIndex: number, visualDataRow: VisualData) { + } + }, + { + text: '下移', + type: 'primary', + onClick(payload: MouseEvent, dataIndex: number, visualDataRow: VisualData) { + } + } + ]; + // 使用按钮组展示命令,单元格容纳不开的时候可以下拉展示按钮 + + `; + } + } + if (propertyKey === 'enableType' && propertyValue === 'unable') { + schema.command.enable = false; + } }, convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { if (schema.command) { - if (propertyKey === 'enable') { - return schema.command.enable; + if (propertyKey === 'enableType') { + return schema.command.enable ? schema.command.formatter ? 'custom' : 'default' : 'unable'; + } + if(propertyKey === 'formatter') { + return schema.command.formatter; } } return ''; 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 4f3d0b0faf8676d784c03498903b16d69565c30f..7f800f61f828d3cde112aa2c55a6711a877fc113 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 @@ -25,6 +25,7 @@ import changeFormatterEnumConverter from './converter/change-formatter-enum.conv import gridSortConverter from './converter/grid-sort.converter'; import gridFilterConverter from './converter/grid-filter.converter'; import gridRowOption from './converter/row-option.converter'; +import changeFormatterType from './converter/change-formatter-type.converter'; const propertyConfigSchemaMap = {} as Record; const propertyConverterMap = new Map([ @@ -47,7 +48,8 @@ const propertyConverterMap = new Map([ ['/converter/change-formatter-enum.converter', changeFormatterEnumConverter], ['/converter/grid-sort.converter', gridSortConverter], ['/converter/grid-filter.converter', gridFilterConverter], - ['/converter/row-option.converter', gridRowOption] + ['/converter/row-option.converter', gridRowOption], + ['/converter/change-formatter-type.converter', changeFormatterType] ]); 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 b4ebb9a21db3918dd73814d5db772c2d91e25408..97c72ace04d82c5281d5c393fe3c18fbbc5c7e97 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 @@ -25,6 +25,7 @@ import changeFormatterEnumConverter from '../../converter/change-formatter-enum. import gridSortConverter from '../../converter/grid-sort.converter'; import gridFilterConverter from '../../converter/grid-filter.converter'; import gridRowOption from '../../converter/row-option.converter'; +import changeFormatterType from '../../converter/change-formatter-type.converter'; export function usePropertyConfigResolver(propertyConfigSchemaMap: Record, propertyEffectMap: Record, resolveSchemaWithDefaultValue: (schemaValue: Record) => Record) { @@ -49,7 +50,8 @@ export function usePropertyConfigResolver(propertyConfigSchemaMap: Record([ ['string', { type: 'input-group', enableClear: false }], diff --git a/packages/ui-vue/components/entity-binding-selector/entity-binding-selector.component.tsx b/packages/ui-vue/components/entity-binding-selector/entity-binding-selector.component.tsx index af73ab14f18276c30020c98109d3417f84d69d0e..12aeb3c5782d460f3d8170c8ae345fe69d1c1e30 100644 --- a/packages/ui-vue/components/entity-binding-selector/entity-binding-selector.component.tsx +++ b/packages/ui-vue/components/entity-binding-selector/entity-binding-selector.component.tsx @@ -4,7 +4,7 @@ import { entityBindingSelectorProps, EntityBindingSelectorProps } from "./entity import { FTreeGrid } from '../tree-grid'; import { useEntityTree } from "./composition/use-entity-tree"; import { ComponentBindingSourceContext } from "../designer-canvas/src/composition/types"; -import { Step } from '../step'; +import { FStep } from '../step'; import { useFieldTree } from "./composition/use-field-tree"; import { FDynamicFormGroup } from "../dynamic-form"; @@ -192,7 +192,7 @@ export default defineComponent({ return () => { return (
- {steps.value?.length > 1 ? : ''} + {steps.value?.length > 1 ? : ''}
{renderEntityTreeGrid()}
{renderComponentSelector()}
{renderFieldTreeGrid()}
diff --git a/packages/ui-vue/components/property-panel/src/composition/entity/input-base-property.ts b/packages/ui-vue/components/property-panel/src/composition/entity/input-base-property.ts index 77982725a3a92bbfdbeba210606d98d306c7acea..031e7b36019c45e913b7886189a2d2a25ac2268c 100644 --- a/packages/ui-vue/components/property-panel/src/composition/entity/input-base-property.ts +++ b/packages/ui-vue/components/property-panel/src/composition/entity/input-base-property.ts @@ -37,7 +37,7 @@ export class InputBaseProperty extends BaseControlProperty { // 表达式编辑器 this.propertyConfig.categories['expressions'] = this.getExpressionConfig(propertyData, 'Field'); // 事件 暂不支持 - // this.propertyConfig.categories['eventsEditor'] = this.getEventPropertyConfig(propertyData); + this.propertyConfig.categories['eventsEditor'] = this.getEventPropertyConfig(propertyData); return this.propertyConfig; } public getGridFieldEdtiorPropConfig(propertyData: any, componentInstance: DesignerComponentInstance | null) { @@ -539,21 +539,21 @@ export class InputBaseProperty extends BaseControlProperty { if (propertyData.binding && propertyData.binding.type === FormBindingType.Form && propertyData.binding.field) { const valueChangingExist = eventList.find(eventListItem => eventListItem.label === 'fieldValueChanging'); if (!valueChangingExist) { - eventList.push( - { - label: 'fieldValueChanging', - name: '绑定字段值变化前事件' - } - ); + // eventList.push( + // { + // label: 'fieldValueChanging', + // name: '绑定字段值变化前事件' + // } + // ); } const valueChangedExist = eventList.find(eventListItem => eventListItem.label === 'fieldValueChanged'); if (!valueChangedExist) { - eventList.push( - { - label: 'fieldValueChanged', - name: '绑定字段值变化后事件' - } - ); + // eventList.push( + // { + // label: 'fieldValueChanged', + // name: '绑定字段值变化后事件' + // } + // ); } if (this.designViewModelField) { // 因为字段变更属性是存到VM中的,但是这里需要在控件上编辑,所以复制一份数据 diff --git a/packages/ui-vue/components/step/index.ts b/packages/ui-vue/components/step/index.ts index 88752b82c184820d95877e922290bf954d240e92..cf641ffec75b1b535c0988c8e83f8ad7add196f3 100644 --- a/packages/ui-vue/components/step/index.ts +++ b/packages/ui-vue/components/step/index.ts @@ -1,23 +1,22 @@ -import type { App } from 'vue'; -import Step from './src/step.component'; +import type { App, Plugin } from 'vue'; +import FStep from './src/step.component'; import { propsResolver } from './src/step.props'; import FStepDesign from './src/designer/step.design.component'; export * from './src/step.props'; -export { Step }; +export { FStep }; -export default { - install(app: App): void { - app.component(Step.name as string, Step); - }, - register(componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record): void { - componentMap.step = Step; - propsResolverMap.step = propsResolver; - }, - registerDesigner(componentMap: Record, propsResolverMap: Record, configResolverMap: Record): void { - componentMap.step = FStepDesign; - propsResolverMap.step = propsResolver; - } +FStep.install = (app: App): void => { + app.component(FStep.name as string, FStep); }; +FStep.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record): void => { + componentMap.step = FStep; + propsResolverMap.step = propsResolver; +}; +FStep.registerDesigner = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record): void => { + componentMap.step = FStepDesign; + propsResolverMap.step = propsResolver; +}; +export default FStep as typeof FStep & Plugin; 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 115570d0953112b71894ef57908a5d56a1748dae..b27789206b065eaed55f4f5a2f42c4414dac7cd1 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 @@ -26,7 +26,7 @@ export class TreeGridProperty extends BaseControlProperty { // 外观 this.getAppearanceProperties(propertyData); // 操作列 - this.propertyConfig.categories['command'] = useCommandOption().getCommandColumnProperties(propertyData); + this.propertyConfig.categories['command'] = useCommandOption(this).getCommandColumnProperties(propertyData); // 填充列宽,仅支持平分列宽 this.propertyConfig.categories['column'] = useColumnOption().getColumnOptionProperties(propertyData); // 行配置 增加行和单元格自定义样式 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 f1ed0577c0e6e204a613e057496b907f6b1d2627..1ba3483e777f18bde31749cd5845dd40f7b6cdaa 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 @@ -152,6 +152,11 @@ "dateFormat": "yyyy-MM-dd" } }, + "formatterType": { + "description": "启用列格式化", + "type": "string", + "default": "" + }, "columnTemplate": { "description":"列模板", "type": "string", 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 f16e1884d68ec791761db6ec9602d27accf788b3..f2c789f5f896b20253fdad93145ccf22f6922151 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 @@ -466,12 +466,13 @@ "properties": { "customRowStyle": { "description": "自定义行样式", - "type": "string" + "type": "string", + "default": "// 示例代码\r\n// dataItem是行数据\r\n(dataItem) => {\r\n if(dataItem.code === '0001') {\r\n return {\r\n class: {\r\n 'text-align': true,\r\n 'text-red': true\r\n },\r\n style: {\r\n 'background-color': '#000',\r\n 'font-size': '1rem'\r\n }\r\n };\r\n }\r\n return {};\r\n}" }, "customCellStyle": { "description": "自定义单元格样式", "type": "string", - "default": "" + "default": "// 示例代码\r\n// cell.data 单元格数据 cell.column 列数据\r\n(cell) => {\r\n if(cell.data === '0002' && \r\n cell.column.field === 'name') {\r\n return {\r\n class: {\r\n 'text-align': true,\r\n 'text-red': true\r\n },\r\n style: {\r\n 'background-color': '#000',\r\n 'font-size': '1rem'\r\n }\r\n };\r\n }\r\n return {};\r\n}" }, "disable": { "description": "", 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 43879cb3363a411e9a90448b1d7c3ea392cca6bd..a37c116a41ba00697d379df1b9355dd4322e42bf 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 @@ -216,6 +216,7 @@ export type HeaderOptions = ExtractPropTypes; export const rowOptions = { /** 自定义行样式 */ customRowStyle: { type: Function, default: () => { } }, + customCellStyle: { type: Function, default: () => { } }, /** 禁止行选中表达式 */ disable: { type: Function, default: () => { } }, /** 默认行高度为 29px */ @@ -364,8 +365,8 @@ export const treeGridProps = { rowNumber: { type: Object as PropType, default: { enable: true, - width: 32, - heading: LocaleService.getLocaleValue('datagrid.lineNumberTitle') + width: 36, + heading: '序号' } }, /** 行配置 */ diff --git a/packages/ui-vue/components/tree-view/src/tree-view.props.ts b/packages/ui-vue/components/tree-view/src/tree-view.props.ts index f9e575a00ecc6ca625339512ad8f109ef91435ab..38030f891b7ea4f27658302c8b1b1f9af1dc7b53 100644 --- a/packages/ui-vue/components/tree-view/src/tree-view.props.ts +++ b/packages/ui-vue/components/tree-view/src/tree-view.props.ts @@ -79,8 +79,8 @@ export const treeViewProps = { rowNumber: { type: Object as PropType, default: { enable: false, - width: 32, - heading: LocaleService.getLocaleValue('datagrid.lineNumberTitle') + width: 36, + heading: '序号' } }, /** 选择配置 */ diff --git a/packages/ui-vue/demos/data-grid/alignment.vue b/packages/ui-vue/demos/data-grid/alignment.vue index af3a56b1eaa4fc01aef47c66bfcf5545b880e3c9..1a96b959ef5d945ff9997d0ba9890344cdd18d42 100644 --- a/packages/ui-vue/demos/data-grid/alignment.vue +++ b/packages/ui-vue/demos/data-grid/alignment.vue @@ -114,7 +114,7 @@ const pagination = { const rowNumberOption: RowNumberOptions = { enable: true, - width: 32, + width: 36, heading: '序号', showEllipsis: false } diff --git a/packages/ui-vue/demos/data-grid/basic.vue b/packages/ui-vue/demos/data-grid/basic.vue index b1963351515ffbc979634197456a9c6a2149a6b4..53cd0b757dca386340db724515fbf821f9e4968b 100644 --- a/packages/ui-vue/demos/data-grid/basic.vue +++ b/packages/ui-vue/demos/data-grid/basic.vue @@ -89,7 +89,7 @@ const pagination = { const rowNumberOption: RowNumberOptions = { enable: true, - width: 32, + width: 36, heading: '序号', showEllipsis: false } diff --git a/packages/ui-vue/demos/data-grid/row_number.vue b/packages/ui-vue/demos/data-grid/row_number.vue index c337b53a4df5c5b214673f7a88bfb3dadbfaa68e..4250cf18b46d58da6051c853d8e986da9e8bcb55 100644 --- a/packages/ui-vue/demos/data-grid/row_number.vue +++ b/packages/ui-vue/demos/data-grid/row_number.vue @@ -6,7 +6,7 @@ const treeGridComponentInstance = ref(); /** 显示行号 */ const showRowNumber = ref(true) /** 行号宽度 */ -const rowNumberWidth = ref(32) +const rowNumberWidth = ref(36) /** 行号标题 */ const rowNumberTitle = ref('序号') diff --git a/packages/ui-vue/demos/data-grid/update-data.vue b/packages/ui-vue/demos/data-grid/update-data.vue index d967af342d0ea0d48ac7312777f57542651e7bea..b4000a1cbeee6a3924196317e548dc5a8fe02615 100644 --- a/packages/ui-vue/demos/data-grid/update-data.vue +++ b/packages/ui-vue/demos/data-grid/update-data.vue @@ -26,7 +26,7 @@ const pagination = ref({ const rowNumberOption: RowNumberOptions = { enable: true, - width: 32, + width: 36, heading: '序号' };