@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,406 lines (1,398 loc) • 254 kB
JavaScript
import { Component, ChangeDetectionStrategy, ContentChild, TemplateRef, EventEmitter, Input, Output, ElementRef, ChangeDetectorRef, NgZone, Renderer2, ContentChildren, ViewChild, HostBinding, Directive, ViewContainerRef, ComponentFactoryResolver, KeyValueDiffers, IterableDiffers, Renderer, HostListener, Pipe, NgModule } from '@angular/core';
import { debounceTime, distinctUntilChanged, switchMap, map } from 'rxjs/operators';
import { WindowRef } from '@duoduo-oba/ng-devui/window-ref';
import { of, BehaviorSubject, fromEvent } from 'rxjs';
import { InputNumberComponent, InputNumberModule } from '@duoduo-oba/ng-devui/input-number';
import { SelectComponent, SelectModule } from '@duoduo-oba/ng-devui/select';
import { TreeSelectComponent, TreeSelectModule } from '@duoduo-oba/ng-devui/tree-select';
import { stopPropagationIfExist, formatDate, SafePipeModule } from '@duoduo-oba/ng-devui/utils';
import { I18nService } from '@duoduo-oba/ng-devui/i18n';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { PaginationModule } from '@duoduo-oba/ng-devui/pagination';
import { DCommonModule } from '@duoduo-oba/ng-devui/common';
import { DatepickerModule } from '@duoduo-oba/ng-devui/datepicker';
import { CheckBoxModule } from '@duoduo-oba/ng-devui/checkbox';
import { ButtonModule } from '@duoduo-oba/ng-devui/button';
import { DropDownModule } from '@duoduo-oba/ng-devui/dropdown';
import { TooltipModule } from '@duoduo-oba/ng-devui/tooltip';
import { DragDropModule } from '@duoduo-oba/ng-devui/dragdrop';
/**
* @fileoverview added by tsickle
* Generated from: tmpl/data-table-cell-edit-tmpl.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DataTableCellEditTmplComponent {
}
DataTableCellEditTmplComponent.decorators = [
{ type: Component, args: [{
selector: 'd-cell-edit',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
DataTableCellEditTmplComponent.propDecorators = {
template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
};
if (false) {
/** @type {?} */
DataTableCellEditTmplComponent.prototype.template;
/** @type {?} */
DataTableCellEditTmplComponent.prototype.dataPicker;
}
/**
* @fileoverview added by tsickle
* Generated from: tmpl/data-table-cell-view-tmpl.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DataTableCellViewTmplComponent {
}
DataTableCellViewTmplComponent.decorators = [
{ type: Component, args: [{
selector: 'd-cell',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
DataTableCellViewTmplComponent.propDecorators = {
template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
};
if (false) {
/** @type {?} */
DataTableCellViewTmplComponent.prototype.template;
}
/**
* @fileoverview added by tsickle
* Generated from: tmpl/data-table-head-cell-tmpl.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DataTableHeadCellTmplComponent {
}
DataTableHeadCellTmplComponent.decorators = [
{ type: Component, args: [{
selector: 'd-head-cell',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
DataTableHeadCellTmplComponent.propDecorators = {
template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
};
if (false) {
/** @type {?} */
DataTableHeadCellTmplComponent.prototype.template;
}
/**
* @fileoverview added by tsickle
* Generated from: tmpl/data-table-column-tmpl.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DataTableColumnTmplComponent {
constructor() {
this.fieldType = 'text';
this.order = Number.MAX_VALUE;
this.nestedColumn = false;
this.filterChange = new EventEmitter();
this.filterMultiple = true;
this.orderChange = new EventEmitter();
// 鼠标是否移动到当前表头单元格
this.selected = false;
this.filterIconActiveInner = false;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.filterable) {
if (this.filterList) {
if (!this.searchFn) {
this.searchFn = (/**
* @param {?} item
* @return {?}
*/
(item) => {
return of((this.filterList ? this.filterList : [])
.filter((/**
* @param {?} value
* @return {?}
*/
value => value.name.toLowerCase().includes(item.toLowerCase()))));
});
}
}
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes['order']) {
this.orderChange.emit(changes['order'].currentValue);
}
if (changes['filterList']) {
if (this.filterIconActive !== undefined) {
return;
}
/** @type {?} */
const checkedList = this.filterList.filter((/**
* @param {?} item
* @return {?}
*/
item => item.checked));
if (checkedList.length && (checkedList.length < this.filterList.length)) {
this.filterIconActiveInner = true;
}
else {
this.filterIconActiveInner = false;
}
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.orderChange.unsubscribe();
}
// column.extraOptions?.dateFormat
/**
* @param {?} filterData
* @return {?}
*/
emitFilterData(filterData) {
this.filterChange.emit(filterData);
}
/**
* @param {?} isOpen
* @return {?}
*/
canFilter(isOpen) {
/** @type {?} */
let changeResult = Promise.resolve(true);
if (this.beforeFilter) {
/** @type {?} */
const result = this.beforeFilter(isOpen);
if (typeof result !== 'undefined') {
if (result.then) {
changeResult = result;
}
else if (result.subscribe) {
changeResult = ((/** @type {?} */ (result))).toPromise();
}
else {
changeResult = Promise.resolve(result);
}
}
}
return changeResult;
}
}
DataTableColumnTmplComponent.decorators = [
{ type: Component, args: [{
selector: 'd-column',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
/** @nocollapse */
DataTableColumnTmplComponent.ctorParameters = () => [];
DataTableColumnTmplComponent.propDecorators = {
advancedHeader: [{ type: Input }],
fieldType: [{ type: Input }],
maxWidth: [{ type: Input }],
minWidth: [{ type: Input }],
field: [{ type: Input }],
header: [{ type: Input }],
sortable: [{ type: Input }],
editable: [{ type: Input }],
unresizable: [{ type: Input }],
filterable: [{ type: Input }],
cellClass: [{ type: Input }],
width: [{ type: Input }],
fixedLeft: [{ type: Input }],
fixedRight: [{ type: Input }],
extraOptions: [{ type: Input }],
order: [{ type: Input }],
nestedColumn: [{ type: Input }],
filterList: [{ type: Input }],
filterChange: [{ type: Output }],
filterMultiple: [{ type: Input }],
filterIconActive: [{ type: Input }],
filterBoxWidth: [{ type: Input }],
filterBoxHeight: [{ type: Input }],
beforeFilter: [{ type: Input }],
cellCmp: [{ type: ContentChild, args: [DataTableCellViewTmplComponent, { static: false },] }],
cellEditCmp: [{ type: ContentChild, args: [DataTableCellEditTmplComponent, { static: false },] }],
headCellTmpl: [{ type: ContentChild, args: [DataTableHeadCellTmplComponent, { static: false },] }],
customFilterTemplate: [{ type: Input }],
searchFn: [{ type: Input }]
};
if (false) {
/** @type {?} */
DataTableColumnTmplComponent.prototype.advancedHeader;
/** @type {?} */
DataTableColumnTmplComponent.prototype.fieldType;
/** @type {?} */
DataTableColumnTmplComponent.prototype.maxWidth;
/** @type {?} */
DataTableColumnTmplComponent.prototype.minWidth;
/** @type {?} */
DataTableColumnTmplComponent.prototype.field;
/** @type {?} */
DataTableColumnTmplComponent.prototype.header;
/** @type {?} */
DataTableColumnTmplComponent.prototype.sortable;
/** @type {?} */
DataTableColumnTmplComponent.prototype.editable;
/** @type {?} */
DataTableColumnTmplComponent.prototype.unresizable;
/** @type {?} */
DataTableColumnTmplComponent.prototype.filterable;
/** @type {?} */
DataTableColumnTmplComponent.prototype.cellClass;
/** @type {?} */
DataTableColumnTmplComponent.prototype.width;
/** @type {?} */
DataTableColumnTmplComponent.prototype.fixedLeft;
/** @type {?} */
DataTableColumnTmplComponent.prototype.fixedRight;
/** @type {?} */
DataTableColumnTmplComponent.prototype.extraOptions;
/** @type {?} */
DataTableColumnTmplComponent.prototype.order;
/** @type {?} */
DataTableColumnTmplComponent.prototype.nestedColumn;
/**
* 传入筛选列表
* @type {?}
*/
DataTableColumnTmplComponent.prototype.filterList;
/** @type {?} */
DataTableColumnTmplComponent.prototype.filterChange;
/** @type {?} */
DataTableColumnTmplComponent.prototype.filterMultiple;
/** @type {?} */
DataTableColumnTmplComponent.prototype.filterIconActive;
/** @type {?} */
DataTableColumnTmplComponent.prototype.filterBoxWidth;
/** @type {?} */
DataTableColumnTmplComponent.prototype.filterBoxHeight;
/** @type {?} */
DataTableColumnTmplComponent.prototype.beforeFilter;
/** @type {?} */
DataTableColumnTmplComponent.prototype.cellCmp;
/** @type {?} */
DataTableColumnTmplComponent.prototype.cellEditCmp;
/** @type {?} */
DataTableColumnTmplComponent.prototype.headCellTmpl;
/** @type {?} */
DataTableColumnTmplComponent.prototype.customFilterTemplate;
/** @type {?} */
DataTableColumnTmplComponent.prototype.searchFn;
/** @type {?} */
DataTableColumnTmplComponent.prototype.orderChange;
/** @type {?} */
DataTableColumnTmplComponent.prototype._formatter;
/** @type {?} */
DataTableColumnTmplComponent.prototype.selected;
/** @type {?} */
DataTableColumnTmplComponent.prototype.filterIconActiveInner;
}
/**
* @fileoverview added by tsickle
* Generated from: tmpl/data-table-foot-tmpl.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DataTableFootTmplComponent {
}
DataTableFootTmplComponent.decorators = [
{ type: Component, args: [{
selector: 'd-foot',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
DataTableFootTmplComponent.propDecorators = {
template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
};
if (false) {
/** @type {?} */
DataTableFootTmplComponent.prototype.template;
}
/**
* @fileoverview added by tsickle
* Generated from: tmpl/data-table-head-tmpl.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DataTableHeadTmplComponent {
}
DataTableHeadTmplComponent.decorators = [
{ type: Component, args: [{
selector: 'd-head',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
DataTableHeadTmplComponent.propDecorators = {
template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
};
if (false) {
/** @type {?} */
DataTableHeadTmplComponent.prototype.template;
}
/**
* @fileoverview added by tsickle
* Generated from: tmpl/data-table-pager-tmpl.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DataTablePagerTmplComponent {
}
DataTablePagerTmplComponent.decorators = [
{ type: Component, args: [{
selector: 'd-pager-panel',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
DataTablePagerTmplComponent.propDecorators = {
template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
};
if (false) {
/** @type {?} */
DataTablePagerTmplComponent.prototype.template;
}
/**
* @fileoverview added by tsickle
* Generated from: data-table.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DataTableComponent {
/**
* @param {?} windowRef
* @param {?} elementRef
* @param {?} changeDetectorRef
* @param {?} ngZone
* @param {?} renderer
*/
constructor(windowRef, elementRef, changeDetectorRef, ngZone, renderer) {
this.windowRef = windowRef;
this.elementRef = elementRef;
this.changeDetectorRef = changeDetectorRef;
this.ngZone = ngZone;
this.renderer = renderer;
/**
* 【可选】默认表格使用的表格类型，可选值为'cell'
*/
this.editModel = 'cell';
/**
* 表格类型,striped表现为条纹间隔
*/
this.type = '';
/**
* 表格是否开启鼠标hover行高亮效果
*/
this.hover = true;
/**
* 表格宽度
*/
this.tableWidth = '100%';
/**
* 【可选】多列选择数组，用来指导那几列会被排序
*/
this.multiSort = [];
/**
* 【可选】用来自定义不可拖拽的前几列
*/
this.colDropFreezeTo = 0;
/**
* 【可选】同时绑定单击、双击事件时，用于区分点击的时间间隔,默认300ms，两个事件不同时使用可以指定为0
*/
this.timeout = 300;
/**
* 【可选】是否显示排序未激活图标，默认显示,
*/
this.showSortIcon = true;
/**
* 多列选择Change事件，用来更新多列选择数组
*
*/
this.multiSortChange = new EventEmitter();
/**
* 表格单元格点击事件
*/
this.cellClick = new EventEmitter();
/**
* 表格单元格双击事件
*/
this.cellDBClick = new EventEmitter();
/**
* 表格行点击事件
*/
this.rowClick = new EventEmitter();
/**
* 表格行双击事件
*/
this.rowDBClick = new EventEmitter();
/**
* 行detail toggle事件
*/
this.detialToggle = new EventEmitter();
/**
* 表格单元格开始编辑事件
*/
this.cellEditStart = new EventEmitter();
/**
* 表格单元格结束编辑事件
*/
this.cellEditEnd = new EventEmitter();
/**
* 某行的勾选状态变化事件
*/
this.rowCheckChange = new EventEmitter();
/**
* 当前页码全勾选状态变化事件
*/
this.checkAllChange = new EventEmitter();
/**
* 页码变化事件
*/
this.pageIndexChange = new EventEmitter();
/**
* 延迟懒加载完成事件
*/
this.loadMore = new EventEmitter();
/**
* 列宽变化事件
*/
this.resize = new EventEmitter();
/**
* 当前表格层级，默认为0，在树形表格场景下自增长
*/
this.tableLevel = 0;
/**
* 配置树形表格的父子选中是否互相关联
* upward：选中子关联父
* downward： 选中父关联子
*/
this.checkableRelation = { upward: true, downward: true };
/**
* 子列表关闭事件
*/
this.childrenTableClose = new EventEmitter();
/**
* 全部子列表关闭事件
*/
this.allChildrenTableClose = new EventEmitter();
this._dataSource = [];
this._pageAllChecked = false;
this.selectable = true;
this.allChecked = [];
this.documentClickEvent = new EventEmitter();
this.cellEditorClickEvent = new EventEmitter();
this._hideColumn = [];
this._lazy = false;
this.scrollStream = new EventEmitter();
this.searchQueryChange = new EventEmitter();
this.halfChecked = false;
this.tableStatusEnum = {
open: true,
close: false
};
this.scrollY = 0;
// 判断数据是否存在选中状态
this.hasChecked = (/**
* @param {?} data
* @return {?}
*/
(data) => {
if (data.$checked) {
return true;
}
if (data.children) {
return data.children.some(this.hasChecked);
}
});
// 判断数据是否存在未选中状态
this.hasUnChecked = (/**
* @param {?} data
* @return {?}
*/
(data) => {
if (!data.$checked) {
return true;
}
if (data.children) {
return data.children.some(this.hasUnChecked);
}
});
}
/**
* @param {?} content
* @return {?}
*/
set resizeBar(content) {
setTimeout((/**
* @return {?}
*/
() => {
this.resizeBarRefElement = content;
if (!this.changeDetectorRef['destroyed']) {
this.changeDetectorRef.detectChanges();
}
}));
}
/**
* @param {?} dataSource
* @return {?}
*/
set dataSource(dataSource) {
if (null === dataSource || !dataSource) {
dataSource = [];
}
this._dataSource = dataSource;
/** @type {?} */
const hasChecked = this.dataSource.some(this.hasChecked);
/** @type {?} */
const hasUnChecked = this.dataSource.some(this.hasUnChecked);
this._pageAllChecked = dataSource && dataSource.length > 0 && !hasUnChecked;
this.halfChecked = hasChecked && hasUnChecked;
}
/**
* @return {?}
*/
get dataSource() {
return this._dataSource;
}
/**
* @param {?} hideColume
* @return {?}
*/
set hideColumn(hideColume) {
this._hideColumn = hideColume;
if (this._columns) {
this.updateColumns();
}
}
/**
* @return {?}
*/
get hideColumn() {
return this._hideColumn;
}
/**
* @param {?} pager
* @return {?}
*/
set pager(pager) {
if (pager === undefined || pager === null) {
return;
}
else {
this._pager = {
total: pager.total,
pageIndex: pager.pageIndex || 1,
pageSize: pager.pageSize || 10,
maxItems: pager.maxItems || 8,
selectDirection: pager.selectDirection || 'auto'
};
}
}
/**
* @return {?}
*/
get pager() {
return this._pager;
}
/**
* @param {?} pageAllChecked
* @return {?}
*/
set pageAllChecked(pageAllChecked) {
if (this.dataSource) {
this._dataSource = this.setCheckedStatus(this.dataSource, pageAllChecked);
}
this._pageAllChecked = pageAllChecked;
this.halfChecked = this.dataSource.some(this.hasChecked) && this.dataSource.some(this.hasUnChecked);
}
/**
* @return {?}
*/
get pageAllChecked() {
return this._pageAllChecked;
}
/**
* @param {?} lazy
* @return {?}
*/
set lazy(lazy) {
this._lazy = lazy;
}
/**
* @return {?}
*/
get lazy() {
return this._lazy;
}
/**
* @private
* @return {?}
*/
getColumns() {
/** @type {?} */
const cols = this.columns
.filter((/**
* @param {?} column
* @return {?}
*/
column => {
return !this.hideColumn.some((/**
* @param {?} field
* @return {?}
*/
field => column.field === field));
}));
cols.sort((/**
* @param {?} first
* @param {?} second
* @return {?}
*/
(first, second) => first.order - second.order));
return cols;
}
// life hook start
/**
* @return {?}
*/
ngOnInit() {
if (this.lazy) {
this.pager = null;
}
this.setupScrollEvent();
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
document.addEventListener('click', this.onDocumentClick.bind(this));
window.addEventListener('wheel', this.onWinScroll.bind(this));
}));
}
/**
* @param {?} $event
* @return {?}
*/
onDocumentClick($event) {
this.documentClickEvent.emit($event);
}
/**
* @param {?} $event
* @return {?}
*/
onWinScroll($event) {
this.ngZone.run((/**
* @return {?}
*/
() => {
this.scrollStream.emit($event);
}));
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.updateColumns();
this.columns.forEach((/**
* @param {?} col
* @return {?}
*/
(col) => {
col.orderChange.subscribe((/**
* @param {?} order
* @return {?}
*/
(order) => {
this.updateColumns();
}));
}));
this.columns.changes.subscribe((/**
* @return {?}
*/
() => {
this.updateColumns();
}));
}
/**
* @private
* @return {?}
*/
updateColumns() {
this._columns = this.getColumns();
}
/**
* @private
* @return {?}
*/
getScrollbarWidth() {
if (this.tableBodyEl) {
/** @type {?} */
const inner = this.tableBodyEl.nativeElement.parentNode;
/** @type {?} */
const outer = inner.parentNode;
// Calculating difference between container's full width and the child width
return (outer.offsetWidth - inner.offsetWidth);
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.unSubscription();
}
/**
* @param {?} column
* @return {?}
*/
onHandleSort(column) {
// set column direction
for (let i = 0; i < this.multiSort.length; i++) {
if (this.multiSort[i].field === column.field) {
this.multiSort[i].direction = column.direction;
break;
}
}
if (this.multiSort) {
/** @type {?} */
const multiSortIndex = this.multiSort.findIndex((/**
* @param {?} item
* @return {?}
*/
item => item.field === column.field));
if (multiSortIndex !== -1) {
this.multiSort.splice(multiSortIndex, 1);
}
if (column.direction === '') {
this.multiSortChange.emit(this.multiSort);
return;
}
if (!this.onlyOneColumnSort) {
this.multiSort.push(column);
}
else {
this.multiSort = [column];
}
}
else {
this.multiSort = [column];
}
this.multiSortChange.emit(this.multiSort);
}
/**
* @param {?} $event
* @return {?}
*/
onCellClick($event) {
this.selectedRowItem = $event.rowItem;
this.selectedColumnItem = $event.column;
this.ngZone.run((/**
* @return {?}
*/
() => {
this.cellClick.emit($event);
}));
}
/**
* @param {?} $event
* @return {?}
*/
onCellEditStart($event) {
this.isCellEdit = true;
this.cellEditStart.emit($event);
}
/**
* @param {?} $event
* @return {?}
*/
onCellEditEnd($event) {
this.isCellEdit = false;
this.cellEditEnd.emit($event);
}
/**
* @param {?} $event
* @return {?}
*/
onCellDBClick($event) {
this.ngZone.run((/**
* @return {?}
*/
() => {
this.cellDBClick.emit($event);
}));
}
/**
* @param {?} $event
* @return {?}
*/
onRowClick($event) {
this.selectedRowItem = $event.rowItem;
this.ngZone.run((/**
* @return {?}
*/
() => {
this.rowClick.emit($event);
}));
}
/**
* @param {?} $event
* @return {?}
*/
onRowDBClick($event) {
this.ngZone.run((/**
* @return {?}
*/
() => {
this.rowDBClick.emit($event);
}));
}
/**
* @param {?} $event
* @return {?}
*/
onDetailToggle($event) {
this.detialToggle.emit($event);
}
/**
* @param {?} $event
* @return {?}
*/
onRowCheckChange($event) {
// 处理children的选中
if ($event.rowItem.children && this.checkableRelation.downward) {
this.setCheckedStatus($event.rowItem.children, $event.checked);
}
// 处理parents的选中
if (this.checkableRelation.upward) {
/** @type {?} */
const nestedIndexArray = $event.nestedIndex.split(',');
nestedIndexArray.shift();
/** @type {?} */
const nestedIndexArrayToInt = nestedIndexArray.map((/**
* @param {?} value
* @return {?}
*/
(value) => {
// tslint:disable-next-line:radix
return parseInt(value);
}));
// 通过选中行的父级索引设置父的选中状态
this.setParentCheckStatus(nestedIndexArrayToInt);
}
// 处理整个table header的选中
/** @type {?} */
const hasChecked = this.dataSource.some(this.hasChecked);
if ($event) {
/** @type {?} */
const hasUnChecked = this.dataSource.some(this.hasUnChecked);
this._pageAllChecked = !hasUnChecked;
this.halfChecked = hasChecked && hasUnChecked;
}
else {
this._pageAllChecked = false;
this.halfChecked = hasChecked;
}
this.rowCheckChange.emit($event);
}
/**
* @private
* @param {?} nestedIndex
* @return {?}
*/
setParentCheckStatus(nestedIndex) {
if (nestedIndex.length > 0) {
/** @type {?} */
const topIndex = nestedIndex[0];
/** @type {?} */
const topParent = this.dataSource[topIndex];
/** @type {?} */
const argNestedIndex = [...nestedIndex];
argNestedIndex.shift();
/** @type {?} */
const lastParent = this.findLastParent(topParent, argNestedIndex);
this.setSelfCheckStatus(lastParent);
nestedIndex.pop();
if (nestedIndex.length > 0) {
this.setParentCheckStatus(nestedIndex);
}
}
}
/**
* @private
* @param {?} source
* @param {?} indexArray
* @return {?}
*/
findLastParent(source, indexArray) {
if (source && indexArray.length > 0) {
/** @type {?} */
const topIndex = indexArray[0];
/** @type {?} */
const topParent = source.children[topIndex];
indexArray.shift();
return this.findLastParent(topParent, indexArray);
}
else {
return source;
}
}
/**
* @private
* @param {?} data
* @return {?}
*/
setSelfCheckStatus(data) {
if (data && data.children) {
/** @type {?} */
const hasUnChecked = data.children.some((/**
* @param {?} child
* @return {?}
*/
(child) => {
return !child.$checked;
}));
/** @type {?} */
const hasChecked = data.children.some((/**
* @param {?} child
* @return {?}
*/
(child) => {
return child.$checked || child.$halfChecked;
}));
data.$checked = !hasUnChecked;
data.$halfChecked = hasUnChecked && hasChecked;
}
}
/**
* @private
* @param {?} data
* @param {?} checked
* @return {?}
*/
setCheckedStatus(data, checked) {
return data.map((/**
* @param {?} item
* @return {?}
*/
item => {
if (!item.$disabled) {
item.$checked = checked;
item.$halfChecked = false;
}
if (item.children) {
item.children = this.setCheckedStatus(item.children, checked);
}
return item;
}));
}
/**
* @param {?} $event
* @return {?}
*/
onCheckAllChange($event) {
this.pageAllChecked = $event;
this.checkAllChange.emit($event);
// this.changeDetectorRef.markForCheck();
}
/**
* @param {?} $event
* @return {?}
*/
onSearchQueryChange($event) {
this.searchQueryChange.emit($event);
}
/**
* @param {?} $event
* @return {?}
*/
onPageChange($event) {
this.pageIndexChange.emit({ pageIndex: $event, pageSize: this.pager.pageSize });
}
/**
* @return {?}
*/
getSelectedRowItem() {
return this.selectedRowItem;
}
/**
* @param {?} complete
* @return {?}
*/
loadFinish(complete) {
if (complete) {
return this.unSubscription();
}
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => this.onWinScroll(null)), 300);
}
/**
* @return {?}
*/
onScrollChange() {
/** @type {?} */
const winHeight = this.windowRef.innerHeight;
/** @type {?} */
const clientRect = this.windowRef.getBoundingClientRect(this.elementRef);
if (clientRect && winHeight - clientRect.bottom >= 40) {
this.loadMore.emit(this);
}
}
/**
* @param {?} $event
* @return {?}
*/
beginResizeHandlerEvent($event) {
this.onDocumentClick($event);
}
/**
* @param {?} __0
* @return {?}
*/
onResizingFixedHandler({ column, width, nextElementWidth }) {
this._columns = this._columns.map((/**
* @param {?} _column
* @param {?} index
* @return {?}
*/
(_column, index) => {
if (_column.field === column.field) {
this.ngZone.run((/**
* @return {?}
*/
() => {
if (index + 1 < this._columns.length && this._columns[index + 1].width && _column.width) {
this._columns[index + 1].width = parseInt(nextElementWidth, 10) + 'px';
}
_column.width = width + 'px';
}));
return _column;
}
return _column;
}));
}
/**
* @param {?} __0
* @return {?}
*/
handleDragTable({ from, to }) {
/** @type {?} */
const sortArray = (/**
* @param {?} array
* @param {?} fromE
* @param {?} toE
* @return {?}
*/
(array, fromE, toE) => {
if (fromE < toE) {
/** @type {?} */
const fromEData = array[fromE];
for (let i = 0; i < array.length; i++) {
if (i >= fromE && i < toE) {
this.ngZone.run((/**
* @return {?}
*/
() => {
array[i] = array[i + 1];
}));
}
}
this.ngZone.run((/**
* @return {?}
*/
() => {
array[toE] = fromEData;
}));
}
if (fromE > toE) {
/** @type {?} */
const fromEData = array[fromE];
for (let i = array.length; i > 0; i--) {
if (i <= fromE && i > toE) {
array[i] = array[i - 1];
}
}
array[toE] = fromEData;
}
});
sortArray(this._columns, from, to);
this._columns.forEach((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
(item, index) => {
item.order = index;
}));
}
/**
* @param {?} $event
* @return {?}
*/
onResizeHandler($event) {
const { width, field, isUserDefined, nextElementWidth } = $event;
this._columns = this._columns.map((/**
* @param {?} column
* @param {?} index
* @return {?}
*/
(column, index) => {
if (column.field === field) {
this.ngZone.run((/**
* @return {?}
*/
() => {
if (index + 1 < this._columns.length && this._columns[index + 1].width && column.width) {
this._columns[index + 1].width = parseInt(nextElementWidth, 10) + 'px';
}
column.width = parseInt(width, 10) + 'px';
/** @type {?} */
const columnResizeEventArg = { currentColumn: column, nextColumn: this._columns[index + 1] };
this.resize.emit(columnResizeEventArg);
}));
return column;
}
return column;
}));
this.changeDetectorRef.markForCheck();
}
/**
* @param {?} event
* @return {?}
*/
onBodyScroll(event) {
/** @type {?} */
const target = (/** @type {?} */ (event.target));
if (this.isCellEdit) {
// Y轴滚动距离超过tr高度时取消目前编辑状态
if (this.scrollY === 0) {
this.scrollY = target.scrollTop;
}
/** @type {?} */
const offset = target.scrollTop - this.scrollY;
if (offset > 40 || offset < -40) {
this.cancelEditingStatus();
this.scrollY = 0;
}
}
/** @type {?} */
const scrollLeft = target.scrollLeft;
if (scrollLeft === 0) {
if (target.clientWidth === target.scrollWidth) {
this.setScrollViewClass('none');
}
else {
this.setScrollViewClass('left');
}
}
else if (scrollLeft + target.clientWidth === target.scrollWidth) {
this.setScrollViewClass('right');
}
else {
this.setScrollViewClass('middle');
}
if (this.fixHeader) {
((/** @type {?} */ (this.fixHeaderContainerRefElement.nativeElement))).scrollLeft = scrollLeft;
}
}
/**
* @private
* @param {?} position
* @return {?}
*/
setScrollViewClass(position) {
/** @type {?} */
const element = this.tableViewRefElement.nativeElement;
/** @type {?} */
const className = 'devui-talbe-scorll-' + position;
/** @type {?} */
const elClassList = element.classList;
if (!elClassList.contains(className)) {
for (let index = 0; index < elClassList.length; index++) {
/** @type {?} */
const clName = elClassList[index];
if (clName.startsWith('devui-talbe-scorll-')) {
this.renderer.removeClass(element, clName);
}
}
this.renderer.addClass(element, className);
}
}
/**
* @private
* @return {?}
*/
unSubscription() {
if (this.subscription) {
this.subscription.unsubscribe();
this.subscription = null;
}
if (this.colSubscription) {
this.colSubscription.unsubscribe();
this.colSubscription = null;
}
}
/**
* @private
* @return {?}
*/
setupScrollEvent() {
if (!this.subscription) {
this.subscription = this.registerOnScrollStream(this.scrollStream)
.subscribe((/**
* @param {?} _
* @return {?}
*/
_ => this.onScrollChange()));
}
}
/**
* @private
* @param {?} scrollStream
* @return {?}
*/
registerOnScrollStream(scrollStream) {
return scrollStream
.pipe(debounceTime(300), distinctUntilChanged());
}
/**
* @param {?} rowItem
* @param {?} status
* @return {?}
*/
onToggleChildrenTable(rowItem, status) {
if (status === this.tableStatusEnum.open) {
/** @type {?} */
let loadChildrenResult = Promise.resolve(true);
if (this.loadChildrenTable) {
loadChildrenResult = this.loadChildrenTable(rowItem);
}
loadChildrenResult.then((/**
* @return {?}
*/
() => {
// 异步加载子表格是检查选中状态
if (rowItem.$checked && this.checkableRelation.downward) {
this.setCheckedStatus(rowItem.children, rowItem.$checked);
}
}));
}
else {
this.childrenTableClose.emit(rowItem);
}
}
/**
* @private
* @param {?} data
* @param {?} open
* @return {?}
*/
setChildrenToogleStatus(data, open) {
return data.map((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.children) {
item.$isChildTableOpen = open;
item.children = this.setChildrenToogleStatus(item.children, open);
}
return item;
}));
}
// 切换表头的子表格展开收起
/**
* @param {?} status
* @return {?}
*/
onToggleAllChildrenTable(status) {
if (status === this.tableStatusEnum.open) {
/** @type {?} */
let loadAllChildrenResult = Promise.resolve(true);
if (this.loadAllChildrenTable) {
loadAllChildrenResult = this.loadAllChildrenTable();
}
loadAllChildrenResult.then((/**
* @return {?}
*/
() => {
this.dataSource.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.$checked && item.children) {
this.setCheckedStatus(item.children, true);
}
}));
this.setChildrenToogleStatus(this.dataSource, status);
}));
}
else {
this.setChildrenToogleStatus(this.dataSource, status);
this.allChildrenTableClose.emit();
}
}
/**
* @return {?}
*/
cancelEditingStatus() {
this.documentClickEvent.emit('cancel');
}
/**
* @private
* @param {?} dist
* @param {?} source
* @return {?}
*/
collectCheckedRows(dist, source) {
source.forEach((/**
* @param {?} row
* @return {?}
*/
row => {
if (row.$checked) {
dist.push(row);
}
if (row.children) {
this.collectCheckedRows(dist, row.children);
}
}));
}
/**
* @return {?}
*/
getCheckedRows() {
if (this.checkableRelation.upward) {
// 如果children的选中状态关联parent的选中状态,只需返回最外层的数据
return this.dataSource ? this.dataSource.filter((/**
* @param {?} item
* @return {?}
*/
item => item.$checked || item.$halfChecked)) : [];
}
else {
// 如果children的选中状态不关联parent的选中状态,遍历dataSource,将所有的选中行平级返回
/** @type {?} */
const checkedRows = [];
this.collectCheckedRows(checkedRows, this.dataSource);
return checkedRows;
}
}
}
DataTableComponent.decorators = [
{ type: Component, args: [{
selector: 'd-data-table',
template: "<div class=\"devui-data-table {{ cssClass }}\">\r\n <div class=\"devui-table-view\" #tableView>\r\n <div\r\n *ngIf=\"fixHeader\"\r\n #fixHeaderContainerRef\r\n class=\"table-wrap\"\r\n [style.overflow]=\"'hidden'\"\r\n [style.max-height]=\"maxHeight ? maxHeight : null\"\r\n [style.max-width]=\"maxWidth ? maxWidth : null\"\r\n [style.width]=\"!maxWidth ? tableWidth : null\"\r\n >\r\n <table\r\n #fixHeaderTableRef\r\n class=\"devui-table {{ type ? 'table-' + type : '' }} {{ hover ? 'table-hover' : '' }} {{ fixHeader ? 'table-fix-header' : '' }}\"\r\n [style.table-layout]=\"'fixed'\"\r\n >\r\n <ng-template [ngTemplateOutlet]=\"headerTpl\"></ng-template>\r\n </table>\r\n </div>\r\n\r\n <div\r\n cdkScrollable\r\n *ngIf=\"!virtualScroll || dataSource.length === 0; else scrollViewTpl\"\r\n class=\"devui-scrollbar\"\r\n [ngClass]=\"{ 'scroll-view': scrollable }\"\r\n [style.max-height]=\"maxHeight ? maxHeight : null\"\r\n [style.max-width]=\"maxWidth ? maxWidth : null\"\r\n [style.width]=\"!maxWidth ? tableWidth : null\"\r\n (scroll)=\"onBodyScroll($event)\"\r\n >\r\n <div [ngClass]=\"{ 'table-wrap': !fixHeader }\">\r\n <ng-template [ngTemplateOutlet]=\"tableviewTpl\"></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-view-footer text-right\" *ngIf=\"pager\">\r\n <d-data-table-pager [pager]=\"pager\" [pagerTemplate]=\"pagerTemplate\"></d-data-table-pager>\r\n </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"!dataSource?.length && noResultTemplate != null\">\r\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this }\"></ng-template>\r\n</ng-container>\r\n\r\n<ng-template #scrollViewTpl>\r\n <cdk-virtual-scroll-viewport\r\n [ngStyle]=\"{ height: maxHeight }\"\r\n [itemSize]=\"40\"\r\n class=\"devui-scrollbar table-wrap viewport-wrapper\"\r\n [ngClass]=\"{ 'scroll-view': scrollable }\"\r\n [style.max-height]=\"maxHeight ? maxHeight : null\"\r\n [style.max-width]=\"maxWidth ? maxWidth : null\"\r\n [style.width]=\"!maxWidth ? tableWidth : null\"\r\n (scroll)=\"onBodyScroll($event)\"\r\n >\r\n <table #tableBody class=\"devui-table {{ type ? 'table-' + type : '' }} {{ hover ? 'table-hover' : '' }}\" [style.table-layout]=\"'fixed'\">\r\n <ng-template *ngIf=\"!fixHeader\" [ngTemplateOutlet]=\"headerTpl\"></ng-template>\r\n <tbody\r\n dDataTableBody\r\n [dataSource]=\"dataSource\"\r\n [resizeable]=\"resizeable\"\r\n [columns]=\"_columns\"\r\n [checkable]=\"checkable\"\r\n [allChecked]=\"_pageAllChecked\"\r\n [selectable]=\"selectable\"\r\n [editModel]=\"editModel\"\r\n [editRowItem]=\"editRowItem\"\r\n [showExpandToggle]=\"showExpandToggle\"\r\n [detailTemplateRef]=\"detailTemplateRef\"\r\n [timeout]=\"timeout\"\r\n [type]=\"type\"\r\n [hover]=\"hover\"\r\n [tableLevel]=\"tableLevel\"\r\n [virtualScroll]=\"virtualScroll\"\r\n ></tbody>\r\n <tfoot *ngIf=\"footTemplate\" dDataTableFoot [footTemplate]=\"footTemplate\"></tfoot>\r\n <div #resizeBar class=\"resize-bar\"></div>\r\n </table>\r\n </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<ng-template #headerTpl>\r\n <thead\r\n dDataTableHead\r\n [resizeable]=\"resizeable\"\r\n [resizeBarRefElement]=\"resizeBarRefElement\"\r\n [tableViewRefElement]=\"tableViewRefElement\"\r\n [multiSort]=\"multiSort\"\r\n [columns]=\"_columns\"\r\n [headTemplate]=\"headTemplate\"\r\n [pager]=\"pager\"\r\n [pageAllChecked]=\"_pageAllChecked\"\r\n [checkable]=\"checkable\"\r\n [showExpandToggle]=\"showExpandToggle\"\r\n [showSortIcon]=\"showSortIcon\"\r\n (resizeHandlerEvent)=\"onResizeHandler($event)\"\r\n (headClickSortEvent)=\"onHandleSort($event)\"\r\n [halfChecked]=\"halfChecked\"\r\n [tableBodyEl]=\"tableBodyEl\"\r\n [maxHeight]=\"maxHeight\"\r\n (beginResizeHandlerEvent)=\"beginResizeHandlerEvent($event)\"\r\n (resizingHandlerEvent)=\"onResizingFixedHandler($event)\"\r\n [fixHeader]=\"fixHeader\"\r\n (dragTableEndEvent)=\"handleDragTable($event)\"\r\n [dataSource]=\"dataSource\"\r\n [colDropFreezeTo]=\"colDropFreezeTo\"\r\n [colDraggable]=\"colDraggable\"\r\n ></thead>\r\n <tbody *ngIf=\"headerExpandConfig?.expand\">\r\n <tr>\r\n <td *ngIf=\"checkable\"></td>\r\n <td *ngIf=\"showExpandToggle\"></td>\r\n <td [attr.colspan]=\"columns.length\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"headerExpandConfig?.expandTemplateRef || default\"\r\n [ngTemplateOutletContext]=\"{$implicit: this, columns: columns}\"\r\n >\r\n </ng-template>\r\n <ng-template #default>\r\n <div>{{ headerExpandConfig?.description }}</div>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n</ng-template>\r\n\r\n<ng-template #tableviewTpl>\r\n <table #tableBody class=\"devui-table {{ type ? 'table-' + type : '' }} {{ hover ? 'table-hover' : '' }}\" [style.table-layout]=\"'fixed'\">\r\n <ng-template *ngIf=\"!fixHeader\" [ngTemplateOutlet]=\"headerTpl\"></ng-template>\r\n <tbody\r\n dDataTableBody\r\n [dataSource]=\"dataSource\"\r\n [resizeable]=\"resizeable\"\r\n [columns]=\"_columns\"\r\n [checkable]=\"checkable\"\r\n [allChecked]=\"_pageAllChecked\"\r\n [selectable]=\"selectable\"\r\n [editModel]=\"editModel\"\r\n [editRowItem]=\"editRowItem\"\r\n [showExpandToggle]=\"showExpandToggle\"\r\n [detailTemplateRef]=\"detailTemplateRef\"\r\n [timeout]=\"timeout\"\r\n [type]=\"type\"\r\n [hover]=\"hover\"\r\n [tableLevel]=\"tableLevel\"\r\n [virtualScroll]=\"false\"\r\n ></tbody>\r\n <tfoot *ngIf=\"footTemplate\" dDataTableFoot [footTemplate]=\"footTemplate\"></tfoot>\r\n <div #resizeBar class=\"resize-bar\"></div>\r\n </table>\r\n</ng-template>\r\n\r\n<ng-template #fixColumnHeaderTemplate>\r\n <thead\r\n dDataTableHead\r\n [resizeBarRefElement]=\"resizeBarRefElement\"\r\n [tableViewRefElement]=\"tableViewRefElement\"\r\n [multiSort]=\"multiSort\"\r\n [columns]=\"_columns\"\r\n [headTemplate]=\"headTemplate\"\r\n [pager]=\"pager\"\r\n [pageAllChecked]=\"_pageAllChecked\"\r\n [checkable]=\"checkable\"\r\n [showExpandToggle]=\"showExpandToggle\"\r\n [showSortIcon]=\"showSortIcon\"\r\n (onResizeHandler)=\"onResizeHandler($event)\"\r\n (onHeadClickSort)=\"onHandleSort($event)\"\r\n [halfChecked]=\"halfChecked\"\r\n [tableBodyEl]=\"tableBodyEl\"\r\n [maxHeight]=\"maxHeight\"\r\n (beginResizeHandlerEvent)=\"beginResizeHandlerEvent($event)\"\r\n (resizingHandlerEvent)=\"onResizingFixedHandler($event)\"\r\n [fixHeader]=\"fixHeader\"\r\n (dragTableEndEvent)=\"handleDragTable($event)\"\r\n [dataSource]=\"dataSource\"\r\n ></thead>\r\n</ng-template>\r\n",
// changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'dataTable',
styles: [":host{display:block}.devui-data-table ::ng-deep{border:none}.devui-data-table ::ng-deep .devui-table-v