import {
IPSDEGridColumn,
IPSDEGridEditItem,
IPSDEGridUAColumn,
IPSDEUIAction,
IPSEditor,
IPSSysPFPlugin,
IPSUIActionGroupDetail,
IPSAppDEGridView,
IPSDEGridGroupColumn,
IPSDEGridFieldColumn,
} from '@ibizstudio/runtime';
import { throttle, ModelTool, Util } from '@ibizstudio/runtime';
import { GridControlBase } from '../../../widgets';
/**
* 表格部件基类
*
* @export
* @class AppGridBase
* @extends {GridControlBase}
*/
export class AppGridBase extends GridControlBase {
/**
* 操作列动画
*
* @param {show: boolean}
* @memberof AppGridBase
*/
showPoptip(show: boolean) {
let cls: string = show ? 'ivu-poptip page-column show-poptip' : 'ivu-poptip page-column hide-poptip';
(this.$refs.pageColumn as any).$el.setAttribute('class', cls);
}
/**
* 计算表格行样式
*
* @memberof AppGridBase
*/
calcGridRowStyle(row: any, rowIndex: number) {
if (this.ctrlTriggerLogicMap.get('calcrowstyle')) {
return this.ctrlTriggerLogicMap.get('calcrowstyle').executeUILogic({ arg: { row, rowIndex } });
}
}
/**
* 计算表格单元格样式
*
* @memberof AppGridBase
*/
calcGridCellStyle(row: any, column: any, rowIndex: number, columnIndex: number) {
if (this.ctrlTriggerLogicMap.get('calccellstyle')) {
return this.ctrlTriggerLogicMap.get('calccellstyle').executeUILogic({ arg: { row, column, rowIndex, columnIndex } });
}
}
/**
* 计算表格头行样式
*
* @memberof AppGridBase
*/
calcGridHeaderRowStyle(row: any, rowIndex: number) {
if (this.ctrlTriggerLogicMap.get('calcheaderrowstyle')) {
return this.ctrlTriggerLogicMap.get('calcheaderrowstyle').executeUILogic({ arg: { row, rowIndex } });
}
}
/**
* 计算表格头单元格样式
*
* @memberof AppGridBase
*/
calcGridHeaderCellStyle(row: any, column: any, rowIndex: number, columnIndex: number) {
if (this.ctrlTriggerLogicMap.get('calcheadercellstyle')) {
return this.ctrlTriggerLogicMap.get('calcheadercellstyle').executeUILogic({ arg: { row, column, rowIndex, columnIndex } });
}
}
/**
* 计算表格头单元格样式表
*
* @memberof AppGridBase
*/
calcGridHeaderCellClassName(row: any, column: any, rowIndex: number, columnIndex: number) {
const columnInstance: any = this.controlInstance.findPSDEGridColumn(column.property);
if (columnInstance && columnInstance.getHeaderPSSysCss?.()?.cssName) {
return columnInstance.getHeaderPSSysCss().cssName;
}
}
/**
* 计算表格参数
*
* @memberof AppGridBase
*/
computeGridParams() {
let options: any = {
data: this.items,
border: true,
'high-light-current-row': this.controlInstance?.singleSelect,
'show-header': !this.controlInstance.hideHeader && !Object.is(this.controlInstance.gridStyle, 'USER'),
'row-class-name': ({ row, rowIndex }: any) => this.getRowClassName({ row, rowIndex }),
'row-style': ({ row, rowIndex }: any) => this.calcGridRowStyle(row, rowIndex),
'cell-style': ({ row, column, rowIndex, columnIndex }: any) => this.calcGridCellStyle(row, column, rowIndex, columnIndex),
'header-row-style': ({ row, rowIndex }: any) => this.calcGridHeaderRowStyle(row, rowIndex),
'header-cell-style': ({ row, column, rowIndex, columnIndex }: any) => this.calcGridHeaderCellStyle(row, column, rowIndex, columnIndex),
'header-cell-class-name': ({ row, column, rowIndex, columnIndex }: any) => this.calcGridHeaderCellClassName(row, column, rowIndex, columnIndex),
'cell-class-name': ({ row, column, rowIndex, columnIndex }: any) => this.getCellClassName({ row, column, rowIndex, columnIndex }),
'max-height': this.items?.length > 0 && !Object.is(this.controlInstance.gridStyle, 'USER') && this.controlInstance.enablePagingBar ? 'calc(100% - 50px)' : '100%',
stripe: (this.controlInstance?.getParentPSModelObject?.() as IPSAppDEGridView)?.viewStyle == 'STYLE2' ? true : false,
};
const aggMode = this.controlInstance?.aggMode;
// 支持排序
if (!this.isNoSort) {
Object.assign(options, {
'default-sort': {
prop: this.minorSortPSDEF,
order: Object.is(this.minorSortDir, 'ASC') ? 'ascending' : Object.is(this.minorSortDir, 'DESC') ? 'descending' : '',
},
});
}
// 支持表格聚合
if (aggMode && aggMode != 'NONE' && !this.controlInstance.getAggPSLayoutPanel()) {
Object.assign(options, {
'show-summary': this.items.length > 0 ? true : false,
'summary-method': (param: any) => this.getSummaries(param),
});
}
// 支持分组
if (this.isEnableGroup) {
Object.assign(options, {
'span-method': ({ row, column, rowIndex, columnIndex }: any) => this.arraySpanMethod({ row, column, rowIndex, columnIndex }),
'tree-props': {
children: 'children',
hasChildren: 'children && children.length>0 ? true : false',
},
'row-key': 'groupById',
});
}
return options;
}
/**
* 计算表格事件
*
* @memberof AppGridBase
*/
computeGridEvents() {
let events: any = {
'row-click': (row: any, column: any, event: any) => throttle(this.rowClick, [row, column, event], this),
'row-dblclick': (row: any, column: any, event: any) => throttle(this.rowDBLClick, [row, column, event], this),
select: (selection: any, row: any) => throttle(this.select, [selection, row], this),
'select-all': (selection: any) => throttle(this.selectAll, [selection], this),
};
// 支持排序
if (!this.controlInstance?.noSort) {
if (this.Environment && this.Environment.isPreviewMode) {
return;
}
Object.assign(events, {
'sort-change': ({ column, prop, order }: any) => this.onSortChange({ column, prop, order }),
});
}
return events;
}
/**
* 绘制表格内容
*
* @param {*} h CreateElement对象
* @memberof AppGridBase
*/
renderGridContent(h: any) {
this.renderEmptyColumn = !this.allColumns.find((column: any) => {
return column.columnType != 'GROUPGRIDCOLUMN' && column.show && Object.is(column.unit, 'STAR');
});
return this.$createElement(
'el-table',
{
props: this.computeGridParams(),
on: this.computeGridEvents(),
ref: `${this.realCtrlRefName}`,
class: this.gridRowActiveMode == 1 ? 'grid-rowactive-click' : null,
scopedSlots: {
// 无数据插槽
empty: (scope: any) => {
return this.renderEmptyDataTip();
},
},
},
[
!this.isSingleSelect ? : null,
this.isEnableGroup ? (
{
return {scope.row.group};
},
}}
>
) : null,
this.renderGridColumns(this.allColumnsInstance),
this.renderEmptyColumn ? : null,
this.renderSummaryPanel(),
],
);
}
/**
* 渲染聚合面板
*
* @memberof AppGridBase
*/
renderSummaryPanel() {
const panel = this.controlInstance.getAggPSLayoutPanel();
if (!panel) {
return;
}
let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(panel, this.remoteData);
return this.$createElement(targetCtrlName, { slot: 'append', props: targetCtrlParam, on: targetCtrlEvent, ref: panel.name });
}
/**
* 绘制表格列
*
* @param {*} h CreateElement对象
* @memberof AppGridBase
*/
renderGridColumns(allColumnsInstance: IPSDEGridColumn[]) {
if (!allColumnsInstance || allColumnsInstance.length === 0) {
return;
}
return allColumnsInstance.map((item: IPSDEGridColumn) => {
//隐藏表格项
if (item.hideDefault || item.hiddenDataItem || !this.getColumnState(item.name)) {
return null;
}
const plugin: IPSSysPFPlugin = item.getPSSysPFPlugin() as IPSSysPFPlugin;
if (plugin) {
const pluginInstance: any = this.PluginFactory.getPluginInstance('CONTROLITEM', plugin.pluginCode);
if (pluginInstance) {
return pluginInstance.renderCtrlItem(this.$createElement, item, this, null);
}
} else {
if (item.columnType == 'UAGRIDCOLUMN') {
return this.renderUAColumn(item as IPSDEGridUAColumn);
} else if (item.columnType == 'DEFGRIDCOLUMN') {
// 数据列
return this.renderGridColumn(item);
} else if (item.columnType == 'GROUPGRIDCOLUMN') {
//分组列
return this.renderGroupGridColumn(item as IPSDEGridGroupColumn);
}
}
});
}
/**
* 绘制操作列
*
* @param {any} column 表格列实例
* @memberof AppGridBase
*/
renderUAColumn(column: IPSDEGridUAColumn) {
if (this.viewStyle == 'DEFAULT' && column.columnStyle == 'EXPAND') {
return this.renderDefaultUAColumn(column);
} else {
return this.renderStyle2UAColumn(column);
}
}
/**
* 绘制DEFAULT的操作列
*
* @param {any} column 表格列实例
* @memberof AppGridBase
*/
renderDefaultUAColumn(column: IPSDEGridUAColumn) {
const { name, caption, align, width, widthUnit } = column;
//参数
let renderParams: any = {
'column-key': name,
label: this.$tl(column.getCapPSLanguageRes()?.lanResTag, caption),
align: 'center',
'class-name': 'default-ua-column',
};
const sysImage = column.getPSSysImage();
renderParams['width'] = 42;
renderParams['fixed'] = 'right';
//绘制
return this.$createElement('el-table-column', {
props: renderParams,
scopedSlots: {
default: (scope: any) => {
let offset = require('@popperjs/core/lib/modifiers/offset').default;
return (
{
let _offset = Object.assign({ options: { offset: [0, -48] } }, offset);
(this.$apppopover as any).openPopover2(e, () => this.renderActionButtons(column, scope), 'left', true, true, undefined, 48, 'view-default ua-column-popover', [_offset]);
}}
>
);
},
header: () => {
return (
{sysImage ? : null}
{this.$tl(column.getCapPSLanguageRes()?.lanResTag, caption)}
);
},
},
});
}
/**
* 绘制操作列按钮组
*
* @param {any} _column 表格列实例
* @param {row, column, $index} scope 插槽返回数据
* @memberof AppGridBase
*/
renderActionButtons(_column: IPSDEGridUAColumn, scope: any) {
const UIActionGroupDetails: Array = _column.getPSDEUIActionGroup()?.getPSUIActionGroupDetails() || [];
const { row, column, $index } = scope;
if (UIActionGroupDetails.length > 0) {
return (
{UIActionGroupDetails.map((uiactionDetail: IPSUIActionGroupDetail, index: number) => {
const uiaction: IPSDEUIAction = uiactionDetail.getPSUIAction() as IPSDEUIAction;
const actionModel = row[uiaction.uIActionTag];
let columnClass = {};
if (uiactionDetail.actionLevel) {
Object.assign(columnClass, { [`srfactionlevel${uiactionDetail.actionLevel}`]: true });
}
if (index === 0) {
Object.assign(columnClass, { 'grid-first-uiaction': true });
} else {
Object.assign(columnClass, { 'grid-uiaction-divider': true });
}
if (actionModel?.disabled) {
Object.assign(columnClass, { 'app-grid-column-disabled': true });
} else {
Object.assign(columnClass, { 'app-grid-column-normal': true });
}
if (Util.isEmpty(actionModel) || actionModel.visabled) {
return (
{
throttle(this.handleActionButtonClick, [row, $event, _column, uiactionDetail], this);
}}
>
{uiactionDetail.showIcon ? : null}
{uiactionDetail.showCaption ? {this.$tl(uiaction.getCapPSLanguageRes()?.lanResTag, uiaction.caption)} : ''}
);
}
})}
);
}
}
/**
* 绘制STYLE2的操作列
*
* @param {any} column 表格列实例
* @memberof AppGridBase
*/
renderStyle2UAColumn(column: IPSDEGridUAColumn) {
const { name, caption, align, width, widthUnit } = column;
//参数
let renderParams: any = {
'column-key': name,
'class-name': 'style2-ua-column',
label: this.$tl(column.getCapPSLanguageRes()?.lanResTag, caption),
align: align ? align.toLowerCase() : 'center',
};
const sysImage = column.getPSSysImage();
if (widthUnit && widthUnit != 'STAR') {
renderParams['width'] = width;
} else {
renderParams['min-width'] = width;
}
//视图样式2操作列需要悬浮 加fixed: right
renderParams['fixed'] = 'right';
//绘制
return this.$createElement('el-table-column', {
props: renderParams,
scopedSlots: {
default: (scope: any) => {
return this.renderActionModel(column, scope);
},
header: () => {
return (
{sysImage ? : null}
{this.$tl(column.getCapPSLanguageRes()?.lanResTag, caption)}
);
},
},
});
}
/**
* 绘制操作列内容
*
* @param {any} _column 表格列实例
* @param {row, column, $index} scope 插槽返回数据
* @memberof AppGridBase
*/
renderActionModel(_column: IPSDEGridUAColumn, scope: any) {
const UIActionGroupDetails: Array = _column.getPSDEUIActionGroup()?.getPSUIActionGroupDetails() || [];
const { row, column, $index } = scope;
if (UIActionGroupDetails.length > 0) {
return (
{UIActionGroupDetails.map((uiactionDetail: IPSUIActionGroupDetail, index: number) => {
const uiaction: IPSDEUIAction = uiactionDetail.getPSUIAction() as IPSDEUIAction;
const actionModel = row[uiaction.uIActionTag];
let columnClass = {};
if (index === 0) {
Object.assign(columnClass, { 'grid-first-uiaction': true });
} else {
Object.assign(columnClass, { 'grid-uiaction-divider': true });
}
if (actionModel?.disabled) {
Object.assign(columnClass, { 'app-grid-column-disabled': true });
} else {
Object.assign(columnClass, { 'app-grid-column-normal': true });
}
if (Util.isEmpty(actionModel) || actionModel.visabled) {
if (!uiactionDetail.showCaption) {
return (
{
throttle(this.handleActionClick, [row, $event, _column, uiactionDetail], this);
}}
>
{uiactionDetail.showIcon ? (
uiaction && uiaction.getPSSysImage()?.cssClass ? (
) : uiaction && uiaction.getPSSysImage()?.imagePath ? (
?.imagePath})
) : (
)
) : (
''
)}
);
} else {
return (
{
throttle(this.handleActionClick, [row, $event, _column, uiactionDetail], this);
}}
>
{uiactionDetail.showIcon ? : ''}
{uiactionDetail.showCaption ? this.$tl(uiaction.getCapPSLanguageRes()?.lanResTag, uiaction.caption) : ''}
);
}
}
})}
{this.allColumns.map((col: any) => {
return col.columnType != 'UAGRIDCOLUMN' ? (
{col.label}
) : null;
})}
{
Util.changeIndex(this.allColumns, moved.oldIndex, moved.newIndex);
Util.changeIndex(this.allColumnsInstance, moved.oldIndex, moved.newIndex);
}}
>
{this.allColumns.map((col: any) => {
return col.columnType != 'UAGRIDCOLUMN' ? (
{col.label}
) : null;
})}
);
}
}
/**
* 行编辑绘制
*
* @param {any} item 表格列实例
* @param {row，column, $index} scope 插槽返回数据
* @memberof AppGridBase
*/
renderOpenEditItem(item: IPSDEGridColumn, scope: any) {
const editItem: IPSDEGridEditItem = ModelTool.getGridItemByCodeName(item.codeName, this.controlInstance) as IPSDEGridEditItem;
let editor: IPSEditor | null = editItem?.getPSEditor();
if (!editor) {
return null;
}
const valueFormat = (item as IPSDEGridFieldColumn).valueFormat;
const { row, column, $index } = scope;
return (
0 ? this.gridItemsModel[$index][column.property].error : ''}>
{
this.onGridItemValueChange(row, value, $index);
}}
/>
);
}
/**
* 绘制数据表格列
*
* @memberof AppGridBase
*/
renderColumn(item: IPSDEGridColumn, scope: any) {
return (
this.columnUIAction(scope.row, $event, item)}
>
);
}
/**
* 绘制
*
* @param {*} h CreateElement对象
* @memberof AppGridBase
*/
render(h: any) {
if (!this.controlIsLoaded || !this.controlInstance) {
return null;
}
const { controlClassNames } = this.renderOptions;
return (
{this.isControlLoaded ? this.renderGridContent(h) : {this.renderLoadDataTip()}
}
{this.controlInstance?.enablePagingBar && !Object.is(this.controlInstance?.gridStyle, 'USER') ? this.renderPagingBar(h) : ''}
{this.items?.length > 0 ? this.renderColumnFilter() : null}
);
}
}