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) {
let cls = show ? 'ivu-poptip page-column show-poptip' : 'ivu-poptip page-column hide-poptip';
this.$refs.pageColumn.$el.setAttribute('class', cls);
}
/**
* 计算表格行样式
*
* @memberof AppGridBase
*/
calcGridRowStyle(row, rowIndex) {
if (this.ctrlTriggerLogicMap.get('calcrowstyle')) {
return this.ctrlTriggerLogicMap.get('calcrowstyle').executeUILogic({ arg: { row, rowIndex } });
}
}
/**
* 计算表格单元格样式
*
* @memberof AppGridBase
*/
calcGridCellStyle(row, column, rowIndex, columnIndex) {
if (this.ctrlTriggerLogicMap.get('calccellstyle')) {
return this.ctrlTriggerLogicMap.get('calccellstyle').executeUILogic({ arg: { row, column, rowIndex, columnIndex } });
}
}
/**
* 计算表格头行样式
*
* @memberof AppGridBase
*/
calcGridHeaderRowStyle(row, rowIndex) {
if (this.ctrlTriggerLogicMap.get('calcheaderrowstyle')) {
return this.ctrlTriggerLogicMap.get('calcheaderrowstyle').executeUILogic({ arg: { row, rowIndex } });
}
}
/**
* 计算表格头单元格样式
*
* @memberof AppGridBase
*/
calcGridHeaderCellStyle(row, column, rowIndex, columnIndex) {
if (this.ctrlTriggerLogicMap.get('calcheadercellstyle')) {
return this.ctrlTriggerLogicMap.get('calcheadercellstyle').executeUILogic({ arg: { row, column, rowIndex, columnIndex } });
}
}
/**
* 计算表格头单元格样式表
*
* @memberof AppGridBase
*/
calcGridHeaderCellClassName(row, column, rowIndex, columnIndex) {
var _a, _b;
const columnInstance = this.controlInstance.findPSDEGridColumn(column.property);
if (columnInstance && ((_b = (_a = columnInstance.getHeaderPSSysCss) === null || _a === void 0 ? void 0 : _a.call(columnInstance)) === null || _b === void 0 ? void 0 : _b.cssName)) {
return columnInstance.getHeaderPSSysCss().cssName;
}
}
/**
* 计算表格参数
*
* @memberof AppGridBase
*/
computeGridParams() {
var _a, _b, _c, _d, _e, _f;
let options = {
data: this.items,
border: true,
'high-light-current-row': (_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.singleSelect,
'show-header': !this.controlInstance.hideHeader && !Object.is(this.controlInstance.gridStyle, 'USER'),
'row-class-name': ({ row, rowIndex }) => this.getRowClassName({ row, rowIndex }),
'row-style': ({ row, rowIndex }) => this.calcGridRowStyle(row, rowIndex),
'cell-style': ({ row, column, rowIndex, columnIndex }) => this.calcGridCellStyle(row, column, rowIndex, columnIndex),
'header-row-style': ({ row, rowIndex }) => this.calcGridHeaderRowStyle(row, rowIndex),
'header-cell-style': ({ row, column, rowIndex, columnIndex }) => this.calcGridHeaderCellStyle(row, column, rowIndex, columnIndex),
'header-cell-class-name': ({ row, column, rowIndex, columnIndex }) => this.calcGridHeaderCellClassName(row, column, rowIndex, columnIndex),
'cell-class-name': ({ row, column, rowIndex, columnIndex }) => this.getCellClassName({ row, column, rowIndex, columnIndex }),
'max-height': ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > 0 && !Object.is(this.controlInstance.gridStyle, 'USER') && this.controlInstance.enablePagingBar ? 'calc(100% - 50px)' : '100%',
stripe: ((_e = (_d = (_c = this.controlInstance) === null || _c === void 0 ? void 0 : _c.getParentPSModelObject) === null || _d === void 0 ? void 0 : _d.call(_c)) === null || _e === void 0 ? void 0 : _e.viewStyle) == 'STYLE2' ? true : false,
};
const aggMode = (_f = this.controlInstance) === null || _f === void 0 ? void 0 : _f.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) => this.getSummaries(param),
});
}
// 支持分组
if (this.isEnableGroup) {
Object.assign(options, {
'span-method': ({ row, column, rowIndex, columnIndex }) => 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() {
var _a;
let events = {
'row-click': (row, column, event) => throttle(this.rowClick, [row, column, event], this),
'row-dblclick': (row, column, event) => throttle(this.rowDBLClick, [row, column, event], this),
select: (selection, row) => throttle(this.select, [selection, row], this),
'select-all': (selection) => throttle(this.selectAll, [selection], this),
};
// 支持排序
if (!((_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.noSort)) {
if (this.Environment && this.Environment.isPreviewMode) {
return;
}
Object.assign(events, {
'sort-change': ({ column, prop, order }) => this.onSortChange({ column, prop, order }),
});
}
return events;
}
/**
* 绘制表格内容
*
* @param {*} h CreateElement对象
* @memberof AppGridBase
*/
renderGridContent(h) {
this.renderEmptyColumn = !this.allColumns.find((column) => {
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) => {
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) {
if (!allColumnsInstance || allColumnsInstance.length === 0) {
return;
}
return allColumnsInstance.map((item) => {
//隐藏表格项
if (item.hideDefault || item.hiddenDataItem || !this.getColumnState(item.name)) {
return null;
}
const plugin = item.getPSSysPFPlugin();
if (plugin) {
const pluginInstance = 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);
}
else if (item.columnType == 'DEFGRIDCOLUMN') {
// 数据列
return this.renderGridColumn(item);
}
else if (item.columnType == 'GROUPGRIDCOLUMN') {
//分组列
return this.renderGroupGridColumn(item);
}
}
});
}
/**
* 绘制操作列
*
* @param {any} column 表格列实例
* @memberof AppGridBase
*/
renderUAColumn(column) {
if (this.viewStyle == 'DEFAULT' && column.columnStyle == 'EXPAND') {
return this.renderDefaultUAColumn(column);
}
else {
return this.renderStyle2UAColumn(column);
}
}
/**
* 绘制DEFAULT的操作列
*
* @param {any} column 表格列实例
* @memberof AppGridBase
*/
renderDefaultUAColumn(column) {
var _a;
const { name, caption, align, width, widthUnit } = column;
//参数
let renderParams = {
'column-key': name,
label: this.$tl((_a = column.getCapPSLanguageRes()) === null || _a === void 0 ? void 0 : _a.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) => {
let offset = require('@popperjs/core/lib/modifiers/offset').default;
return ( {
let _offset = Object.assign({ options: { offset: [0, -48] } }, offset);
this.$apppopover.openPopover2(e, () => this.renderActionButtons(column, scope), 'left', true, true, undefined, 48, 'view-default ua-column-popover', [_offset]);
}}>
);
},
header: () => {
var _a;
return (
{sysImage ? : null}
{this.$tl((_a = column.getCapPSLanguageRes()) === null || _a === void 0 ? void 0 : _a.lanResTag, caption)}
);
},
},
});
}
/**
* 绘制操作列按钮组
*
* @param {any} _column 表格列实例
* @param {row, column, $index} scope 插槽返回数据
* @memberof AppGridBase
*/
renderActionButtons(_column, scope) {
var _a;
const UIActionGroupDetails = ((_a = _column.getPSDEUIActionGroup()) === null || _a === void 0 ? void 0 : _a.getPSUIActionGroupDetails()) || [];
const { row, column, $index } = scope;
if (UIActionGroupDetails.length > 0) {
return (
{UIActionGroupDetails.map((uiactionDetail, index) => {
var _a;
const uiaction = uiactionDetail.getPSUIAction();
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 === null || actionModel === void 0 ? void 0 : 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((_a = uiaction.getCapPSLanguageRes()) === null || _a === void 0 ? void 0 : _a.lanResTag, uiaction.caption)} : ''}
);
}
})}
);
}
}
/**
* 绘制STYLE2的操作列
*
* @param {any} column 表格列实例
* @memberof AppGridBase
*/
renderStyle2UAColumn(column) {
var _a;
const { name, caption, align, width, widthUnit } = column;
//参数
let renderParams = {
'column-key': name,
'class-name': 'style2-ua-column',
label: this.$tl((_a = column.getCapPSLanguageRes()) === null || _a === void 0 ? void 0 : _a.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) => {
return this.renderActionModel(column, scope);
},
header: () => {
var _a;
return (
{sysImage ? : null}
{this.$tl((_a = column.getCapPSLanguageRes()) === null || _a === void 0 ? void 0 : _a.lanResTag, caption)}
);
},
},
});
}
/**
* 绘制操作列内容
*
* @param {any} _column 表格列实例
* @param {row, column, $index} scope 插槽返回数据
* @memberof AppGridBase
*/
renderActionModel(_column, scope) {
var _a;
const UIActionGroupDetails = ((_a = _column.getPSDEUIActionGroup()) === null || _a === void 0 ? void 0 : _a.getPSUIActionGroupDetails()) || [];
const { row, column, $index } = scope;
if (UIActionGroupDetails.length > 0) {
return (
{UIActionGroupDetails.map((uiactionDetail, index) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const uiaction = uiactionDetail.getPSUIAction();
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 === null || actionModel === void 0 ? void 0 : 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 && ((_b = uiaction.getPSSysImage()) === null || _b === void 0 ? void 0 : _b.cssClass) ? () : uiaction && ((_d = uiaction.getPSSysImage()) === null || _d === void 0 ? void 0 : _d.imagePath) ? (
) : ()) : ('')}
);
}
else {
return (
{
throttle(this.handleActionClick, [row, $event, _column, uiactionDetail], this);
}}>
{uiactionDetail.showIcon ? : ''}
{uiactionDetail.showCaption ? this.$tl((_h = uiaction.getCapPSLanguageRes()) === null || _h === void 0 ? void 0 : _h.lanResTag, uiaction.caption) : ''}
);
}
}
})}
{this.allColumns.map((col) => {
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) => {
return col.columnType != 'UAGRIDCOLUMN' ? (
{col.label}
) : null;
})}
);
}
}
/**
* 行编辑绘制
*
* @param {any} item 表格列实例
* @param {row，column, $index} scope 插槽返回数据
* @memberof AppGridBase
*/
renderOpenEditItem(item, scope) {
const editItem = ModelTool.getGridItemByCodeName(item.codeName, this.controlInstance);
let editor = editItem === null || editItem === void 0 ? void 0 : editItem.getPSEditor();
if (!editor) {
return null;
}
const valueFormat = item.valueFormat;
const { row, column, $index } = scope;
return ( 0 ? this.gridItemsModel[$index][column.property].error : ''}>
{
this.onGridItemValueChange(row, value, $index);
}}/>
);
}
/**
* 绘制数据表格列
*
* @memberof AppGridBase
*/
renderColumn(item, scope) {
return ( this.columnUIAction(scope.row, $event, item)}>);
}
/**
* 绘制
*
* @param {*} h CreateElement对象
* @memberof AppGridBase
*/
render(h) {
var _a, _b, _c, _d;
if (!this.controlIsLoaded || !this.controlInstance) {
return null;
}
const { controlClassNames } = this.renderOptions;
return (
{this.isControlLoaded ? this.renderGridContent(h) : {this.renderLoadDataTip()}
}
{((_b = this.controlInstance) === null || _b === void 0 ? void 0 : _b.enablePagingBar) && !Object.is((_c = this.controlInstance) === null || _c === void 0 ? void 0 : _c.gridStyle, 'USER') ? this.renderPagingBar(h) : ''}
{((_d = this.items) === null || _d === void 0 ? void 0 : _d.length) > 0 ? this.renderColumnFilter() : null}
);
}
}