diff --git a/packages/ui-vue/components/data-grid/src/components/data/data-area.component.tsx b/packages/ui-vue/components/data-grid/src/components/data/data-area.component.tsx
index 0aa910aacc9633cc60b879cbce0b67423e55f9c6..abefefebc53ebab7adfd191db812f241b88a630e 100644
--- a/packages/ui-vue/components/data-grid/src/components/data/data-area.component.tsx
+++ b/packages/ui-vue/components/data-grid/src/components/data/data-area.component.tsx
@@ -236,8 +236,11 @@ export default function (
;
}
- function renderDefault(cell: VisualDataCell) {
- const cellText = !isNull(cell.data) && !isUndefined(cell.data) ? cell.data.toString() : cell.data;
+ function renderDefault(cell: VisualDataCell, row: VisualData) {
+ let cellText = !isNull(cell.data) && !isUndefined(cell.data) ? cell.data.toString() : cell.data;
+ if (cell.convertTo) {
+ cellText = cell.convertTo(cell, row);
+ }
return cell.showTips ? {cellText}
:
{cellText}
;
// return cell.showTips ?
@@ -258,7 +261,7 @@ export default function (
{cell.getEditor(cell)}
:
- cell.formatter ? renderFormatter(cell, row) : renderDefault(cell);
+ cell.formatter ? renderFormatter(cell, row) : renderDefault(cell, row);
}
function renderDataRow(
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 deda7da70505040c194cf234ed10b5c489402bac..c929623abc216188fd406e6446e58104be22fcc9 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
@@ -16,12 +16,12 @@
*/
import { ExtractPropTypes, PropType, VNode } from 'vue';
import { EditorConfig } from '@farris/ui-vue/components/dynamic-form';
-import {
- CommandOptions,
- DataColumn,
- HeaderCell,
- VisualData,
- VisualDataCell
+import {
+ CommandOptions,
+ DataColumn,
+ HeaderCell,
+ VisualData,
+ VisualDataCell
} from '@farris/ui-vue/components/data-view';
import { DataGridColumnCommand, SortType } from './designer/data-grid-column.props';
@@ -75,7 +75,8 @@ export interface DataGridColumn {
/** 允许分组，默认为 true */
allowGrouping?: boolean;
/** 是否多语字段 */
- isMultilingualField?: boolean;
+ // isMultilingualField?: boolean;
+ multiLanguage?: boolean;
/** 操作列命令 */
commands?: DataGridColumnCommand[];
/** True to allow the column can be filtered. */
@@ -89,6 +90,8 @@ export interface DataGridColumn {
formatter?:
((cell: VisualDataCell, visualDataRow: VisualData) => VNode | string) | object;
headerFormatter?: (context: { headerCell: HeaderCell, headerCells: HeaderCell[], columnIndex: number }) => VNode | string;
+ // 一些特殊编辑器的自定义转换函数，优先级低于formatter和columnTemplate，高于原始值
+ convertTo?: (cell: VisualDataCell, visualDataRow: VisualData) => string;
}
export interface ColumnGroupItem {
diff --git a/packages/ui-vue/components/data-grid/src/designer/data-grid-column.props.ts b/packages/ui-vue/components/data-grid/src/designer/data-grid-column.props.ts
index 7ac26ee91c1beceefa7bf84d52c31b3b30f46f31..d4139de395ee0bdf598fc20f8f40a58c89404cb5 100644
--- a/packages/ui-vue/components/data-grid/src/designer/data-grid-column.props.ts
+++ b/packages/ui-vue/components/data-grid/src/designer/data-grid-column.props.ts
@@ -95,7 +95,7 @@ export const dataGridColumnProps = {
origianlColSpan: { type: Number },
index: { type: Number },
/** 是否多语字段 */
- isMultilingualField: { type: Boolean, default: false },
+ multiLanguage: { type: Boolean, default: false },
/** 操作列命令 */
commands: { type: Array, default: [] },
filter: { type: String, default: '' },
diff --git a/packages/ui-vue/components/data-grid/src/locales/ui/en.json b/packages/ui-vue/components/data-grid/src/locales/ui/en.json
index f4983462cb85da11b8c936c2a0cbc8fbd153ac14..1b97cc7c53cace3e53e5cb35fb09dd158b41c773 100644
--- a/packages/ui-vue/components/data-grid/src/locales/ui/en.json
+++ b/packages/ui-vue/components/data-grid/src/locales/ui/en.json
@@ -5,7 +5,7 @@
"pagination": {
"previousLabel": "Prev Page",
"nextLabel": "Next Page",
- "message": "Total {1} items",
+ "message": "Total {1} Items",
"pagelist": {
"firstText": "Display",
"lastText": "items"
@@ -15,7 +15,7 @@
"title": "Conditions",
"reset": "Reset",
"clear": "Clear",
- "clearAll": "Clear all conditions",
+ "clearAll": "Clear All Conditions",
"setting": "Settings",
"nofilter": "[ Empty ]",
"checkAll": "Check All",
@@ -108,11 +108,11 @@
"clear": "Empty"
},
"summary": {
- "title": "current page summary"
+ "title": "Current Page Summary"
},
- "loadingMessage": "loading",
+ "loadingMessage": "Loading",
"commandColumn": {
- "title": "operate"
+ "title": "Operation"
}
}
}
\ No newline at end of file
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 2fd1322dfff24a1ad60b668596602c5978da6507..430ec0a408071a6fb003f90345c00a441b2d9ab2 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
@@ -17,6 +17,7 @@ import { NumberSpinnerProperty } from '../../../number-spinner/src/property-conf
import { RadioGroupProperty } from '../../../radio-group/src/property-config/radio-group.property-config';
import { SwitchProperty } from '../../../switch/src/property-config/switch.property-config';
import { TimePickerProperty } from '../../../time-picker/src/property-config/time-picker.property-config';
+import { LanuageTextBoxPropertyConfig } from '../../../language-textbox/src/property-config/language-textbox.property-config';
import { SchemaDOMMapping } from '../../../property-panel/src/composition/entity/schema-dom-mapping';
import { DataGridDesignProps } from '../designer/data-grid-design.props';
@@ -572,6 +573,9 @@ export class DataGriColumnProperty extends BaseControlProperty {
case 'time-picker':
editorTypeConfig = new TimePickerProperty(this.componentId, this.designerHostService);
break;
+ case 'language-textbox':
+ editorTypeConfig = new LanuageTextBoxPropertyConfig(this.componentId, this.designerHostService);
+ break;
default:
editorTypeConfig = new InputGroupProperty(this.componentId, this.designerHostService);
}
@@ -739,6 +743,10 @@ export class DataGriColumnProperty extends BaseControlProperty {
if (this.designViewModelField && this.designViewModelField.$type === FormSchemaEntityField$Type.SimpleField) {
editorTypeList = SchemaDOMMapping.getEditorTypesByMDataType(this.designViewModelField.type.name, propertyData.type);
}
+ if (!propertyData.multiLanguage) {
+ // 不启用多语，不提供多语文本编辑器的选项
+ editorTypeList = editorTypeList.filter((editorType: { key: string, value: string }) => editorType.key !== 'language-textbox');
+ }
return { canChangeControlType, editorTypeList };
}
/**
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 eaa981de50f2062253749e4f230247cc28e6b4a7..96c0f93e0f31f6b7381cee6ed335871d16b88840 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
@@ -168,6 +168,10 @@
"formatterEnumData": {
"description": "",
"type": "array"
+ },
+ "multiLanguage": {
+ "description": "是否启用多语",
+ "type": "boolean"
}
},
"required": [
diff --git a/packages/ui-vue/components/data-view/composition/types.ts b/packages/ui-vue/components/data-view/composition/types.ts
index 0e8004a52f1360fee3ea66d06bc85f7effbaa079..da5d4688cec509a3da7b49777194568163fbb71e 100644
--- a/packages/ui-vue/components/data-view/composition/types.ts
+++ b/packages/ui-vue/components/data-view/composition/types.ts
@@ -56,7 +56,7 @@ export interface DataColumn {
/** 列索引 */
index?: number;
/** 是否多语字段 */
- isMultilingualField?: boolean;
+ multiLanguage?: boolean;
/** 横向坐标 */
left?: number;
/** 列合并原始值 */
@@ -101,6 +101,7 @@ export interface DataColumn {
draggable?: boolean;
headerFormatter?: (context: { headerCell: HeaderCell, headerCells: HeaderCell[], columnIndex: number }) => VNode | string;
columnTemplate?: (cell: VisualDataCell, visualDataRow: VisualData) => VNode;
+ convertTo?: (cell: VisualDataCell, visualDataRow: VisualData) => string;
}
export interface DataFilter {
@@ -190,6 +191,7 @@ export interface VisualDataCell {
cancel: () => void;
/** 单元格更新数据源 */
updateData: (newDataItem: any) => void;
+ convertTo?: (cell: VisualDataCell, visualDataRow: VisualData) => string;
}
export interface VisualData extends CollpasableItem {
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 5c75c75c0e6c9cb40fbe6aa1385f622de806f5ad..0da413d164ac0d330dbf0aab8a68543f0dd66fab 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
@@ -1,4 +1,5 @@
import { ref, SetupContext, VNode, Comment } from "vue";
+import { useI18n } from 'vue-i18n';
import {
CellMode, DataColumn, DataViewOptions, UseCellEditor,
UseVisualDataBound, UseVisualDataCell, VisualData,
@@ -8,13 +9,13 @@ import {
import getCommandColumn from '../../components/editors/commands.component';
import getFormatColumn from '../../components/column-format/column-format.component';
import { resolveField, setFieldValue, useCommonUtils } from "@farris/ui-vue/components/common";
-import { isUndefined } from "lodash";
export function useVisualDataCell(
props: DataViewOptions,
useCellEditorComposition: UseCellEditor,
useVisualDataBoundComposition: UseVisualDataBound
): UseVisualDataCell {
+ const { locale } = useI18n();
const { isUndefined } = useCommonUtils();
const mergingCell = ref(props.mergeCell);
const rowOption = ref(props.rowOption);
@@ -61,6 +62,7 @@ export function useVisualDataCell(
targetCell.data = resolveField(dataItem, column.field);
targetCell.editingData = resolveField(dataItem, column.field);
};
+ targetCell.convertTo = column.multiLanguage ? (cell: VisualDataCell, row: VisualData) => resolveField(dataItem, column.field)?.[locale.value || 'zh-CHS'] : column.convertTo;
return targetCell;
}
@@ -68,8 +70,8 @@ export function useVisualDataCell(
if (column.dataType === 'commands') {
targetCell.formatter = (cell: VisualDataCell, visualDataRow: VisualData) => {
// 此处应该渲染操作列组件而不是编辑组件
- if(column.formatter) {
- return column.formatter(targetCell,visualDataRow);
+ if (column.formatter) {
+ return column.formatter(targetCell, visualDataRow);
}
return renderCommandColumn(targetCell, visualDataRow);
};
@@ -117,7 +119,7 @@ export function useVisualDataCell(
targetCell.showEllipsis = column.showEllipsis;
}
// targetCell.showTips = column.showTips;
- targetCell.showTips = isUndefined(column.showTips)? true: column.showTips;
+ targetCell.showTips = isUndefined(column.showTips) ? true : column.showTips;
targetCell.column = column;
targetCell.align = column.align || 'left';
targetCell.valign = column.valign || 'middle';
@@ -139,7 +141,7 @@ export function useVisualDataCell(
// 所有单元格编辑状态默认取决于editable,
// 如果进一步控制单元格的编辑状态，应该配置编辑器前事件beforeBeginEdit
// 对于editor的readonly,不应该是单元格的职责
- const cellMode = !props.editable? CellMode.readonly : CellMode.editable;
+ const cellMode = !props.editable ? CellMode.readonly : CellMode.editable;
const targetCell: VisualDataCell = createCellByField(column.field, cellMode, index, dataItem, parent);
updateCellByColumn(targetCell, column, preVisualData, dataItem);
return targetCell;
diff --git a/packages/ui-vue/components/event-parameter/src/locales/ui/en.json b/packages/ui-vue/components/event-parameter/src/locales/ui/en.json
index be707479fdb4ecce33d8576afd3cc1ea17f0c0a2..83882c619d57d3ba65d2a8eba935bdd02ec0313c 100644
--- a/packages/ui-vue/components/event-parameter/src/locales/ui/en.json
+++ b/packages/ui-vue/components/event-parameter/src/locales/ui/en.json
@@ -1,6 +1,6 @@
{
"eventParameter": {
- "title": "parameter editor",
+ "title": "Parameter Editor",
"ok": "confirm",
"cancel": "cancel",
"workFlowClass": {
diff --git a/packages/ui-vue/components/pagination/src/locales/ui/en.json b/packages/ui-vue/components/pagination/src/locales/ui/en.json
index 0e8aa7eb3b5fadfe80d6323cc77e69d0ca890c73..00c1e158d28bd79d7d49deb1bc77fd5a7db9fbdc 100644
--- a/packages/ui-vue/components/pagination/src/locales/ui/en.json
+++ b/packages/ui-vue/components/pagination/src/locales/ui/en.json
@@ -1,20 +1,20 @@
{
"pagination": {
- "message": "Total {1} items ",
+ "message": "Total {1} Items ",
"totalInfo": {
- "firstText": "total",
- "lastText": "items"
+ "firstText": "Total",
+ "lastText": "Items"
},
"pageList": {
- "firstText": "display",
- "lastText": "items"
+ "firstText": "Display",
+ "lastText": "Items"
},
- "previous": "previous",
- "next": "next",
+ "previous": "Previous",
+ "next": "Next",
"goto": {
- "prefix": "go to",
+ "prefix": "Go to",
"suffix": ""
},
- "show": "show"
+ "show": "Display"
}
}
\ No newline at end of file
diff --git a/packages/ui-vue/components/property-panel/src/composition/entity/schema-dom-mapping.ts b/packages/ui-vue/components/property-panel/src/composition/entity/schema-dom-mapping.ts
index 1cacf76d8f5e073181ce40de4328e557fe16c7ed..fe50f9f07345ae8886e8f19113ff2f17c8359a0b 100644
--- a/packages/ui-vue/components/property-panel/src/composition/entity/schema-dom-mapping.ts
+++ b/packages/ui-vue/components/property-panel/src/composition/entity/schema-dom-mapping.ts
@@ -19,6 +19,7 @@ export class SchemaDOMMapping {
{ key: DgControl['combo-list'].type, value: DgControl['combo-list'].name },
{ key: DgControl['textarea'].type, value: DgControl['textarea'].name },
{ key: DgControl['time-picker'].type, value: DgControl['time-picker'].name },
+ { key: DgControl['language-textbox'].type, value: DgControl['language-textbox'].name },
],
Text: [
{ key: DgControl['textarea'].type, value: DgControl['textarea'].name },
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 18db3be6436631cbde37e33e92100a77139e6546..8954c7d1843869ddf17198e802dc13cdecc05302 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
@@ -88,7 +88,7 @@ export interface DataGridColumn {
/** 允许分组，默认为 true */
allowGrouping?: boolean;
/** 是否多语字段 */
- isMultilingualField?: boolean;
+ multiLanguage?: boolean;
/** 操作列命令 */
commands?: DataGridColumnCommand[];
/** True to allow the column can be filtered. */
diff --git a/packages/ui-vue/demos/data-grid/cell_edit.vue b/packages/ui-vue/demos/data-grid/cell_edit.vue
index 64daa44ea17b9c668b2935a9a8a18feea4ed6c57..516498fb7671a5e5b5af88df3ee504b8fd25501e 100644
--- a/packages/ui-vue/demos/data-grid/cell_edit.vue
+++ b/packages/ui-vue/demos/data-grid/cell_edit.vue
@@ -6,13 +6,14 @@ import { DataColumn, VisualData, VisualDataCell } from '../../components/data-vi
import { F_LOOKUP_HTTP_SERVICE_TOKEN, LookupHttpService, LookupRequestParams } from '../../components/lookup'
import { LookupHttpRequest } from '../lookup/lookup-http-request'
import { F_NOTIFY_SERVICE_TOKEN, FNotifyService } from '../../components/notify'
+import { useI18n } from 'vue-i18n'
const currentApp = getCurrentInstance()?.appContext.app
const lookupHttp = new LookupHttpRequest()
currentApp?.provide(F_LOOKUP_HTTP_SERVICE_TOKEN, lookupHttp)
const gridComponentInstance = ref()
-
+const { locale } = useI18n();
const editOption = {
editMode: 'cell'
}
@@ -77,49 +78,42 @@ const columns: DataColumn[] = [
}
},
{
- field: 'numericField1',
- title: '数字字段一',
- dataType: 'number',
- valign: 'middle',
- editor: {
- type: 'number-spinner'
- },
- formatter: {
- type: 'number',
- precision: 2,
- thousand: ',',
- prefix: '￥',
- suffix: '',
- decimal: '.'
- }
- },
- {
- field: 'customField1',
- title: '自定义字段一',
+ field: 'alias',
+ title: '别名（多语列）',
dataType: 'string',
valign: 'middle',
+ isMultilingualField:true,
editor: {
- type: 'button-edit'
- }
+ type: 'language-textbox',
+ languages: [
+ {
+ code: 'en',
+ name: 'English'
+ },
+ {
+ code: 'zh-CHS',
+ name: '中文'
+ },
+ {
+ code: 'zh-CHT',
+ name: '繁体'
+ }
+ ]
+ },
+ convertTo: (cell: VisualDataCell, row: VisualData) => cell.data?.['en'] || cell.data
}
-];
+]
-const notifyService = inject(F_NOTIFY_SERVICE_TOKEN);
+const notifyService = inject(F_NOTIFY_SERVICE_TOKEN)
-const beforeEndEdit = (context:
- {
- cell: VisualDataCell,
- row: VisualData,
- newValue: any,
- oldValue: any
- }) => {
- const { cell, row, newValue, oldValue } = context;
+const beforeEndEdit = (context: { cell: VisualDataCell; row: VisualData; newValue: any; oldValue: any }) => {
+ const { cell, row, newValue, oldValue } = context
if (cell.field === 'name' && cell.data === 'Sagi') {
- notifyService?.info({message: '请先结束编辑单元格'});
- return false;
+ notifyService?.info({ message: '请先结束编辑单元格' })
+ return false
}
- return true;
-};
+ return true
+}
function createNewDataItem() {
return {
@@ -147,22 +141,29 @@ function createNewDataItem() {
}
const onEndEditCell = (e: any) => {
- console.log(e);
-};
+ console.log(e)
+}
function updateData() {
- gridComponentInstance.value.updateDataSource(data.slice(1));
+ gridComponentInstance.value.updateDataSource(data.slice(1))
}
-
更新数据
-
+