@ohayojp.com/components
Version:
Common business components of ohayojp.
1,173 lines • 132 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: st.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { __awaiter, __decorate, __metadata } from "tslib";
import { DecimalPipe, DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, Optional, Output, TemplateRef, ViewChild, ViewEncapsulation, } from '@angular/core';
import { Router } from '@angular/router';
import { OHAYO_I18N_TOKEN, CNCurrencyPipe, DatePipe, OhayoLocaleService, DrawerHelper, ModalHelper, YNPipe, } from '@ohayojp.com/theme';
import { OhayoConfigService, deepMergeKey, InputBoolean, InputNumber, toBoolean, } from '@ohayojp.com/util';
import { NzTableComponent } from 'ng-zorro-antd/table';
import { from, of, Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { STColumnSource } from './st-column-source';
import { STDataSource } from './st-data-source';
import { STExport } from './st-export';
import { STRowSource } from './st-row.directive';
import { ST_DEFULAT_CONFIG } from './st.config';
export class STComponent {
/**
* @param {?} i18nSrv
* @param {?} cdr
* @param {?} router
* @param {?} el
* @param {?} exportSrv
* @param {?} modalHelper
* @param {?} drawerHelper
* @param {?} doc
* @param {?} columnSource
* @param {?} dataSource
* @param {?} ohayoI18n
* @param {?} configSrv
*/
constructor(i18nSrv, cdr, router, el, exportSrv, modalHelper, drawerHelper, doc, columnSource, dataSource, ohayoI18n, configSrv) {
this.cdr = cdr;
this.router = router;
this.el = el;
this.exportSrv = exportSrv;
this.modalHelper = modalHelper;
this.drawerHelper = drawerHelper;
this.doc = doc;
this.columnSource = columnSource;
this.dataSource = dataSource;
this.ohayoI18n = ohayoI18n;
this.unsubscribe$ = new Subject();
this.totalTpl = ``;
this.rowClickCount = 0;
this.customWidthConfig = false;
this._widthConfig = [];
this.locale = {};
this._loading = false;
this._data = [];
this._statistical = {};
this._isPagination = true;
this._allChecked = false;
this._allCheckedDisabled = false;
this._indeterminate = false;
this._headers = [];
this._columns = [];
this.columns = [];
this.ps = 10;
this.pi = 1;
this.total = 0;
this.loading = null;
this.loadingDelay = 0;
this.bordered = false;
this.expandRowByClick = false;
this.expandAccordion = false;
this.rowClickTime = 200;
this.responsive = true;
// tslint:disable-next-line:no-output-native
this.error = new EventEmitter();
// tslint:disable-next-line:no-output-native
this.change = new EventEmitter();
this.virtualScroll = false;
this.virtualItemSize = 54;
this.virtualMaxBufferPx = 200;
this.virtualMinBufferPx = 100;
this.virtualForTrackBy = (/**
* @param {?} index
* @return {?}
*/
index => index);
this.setCog((/** @type {?} */ (configSrv.merge('st', ST_DEFULAT_CONFIG))));
this.ohayoI18n.change.pipe(takeUntil(this.unsubscribe$)).subscribe((/**
* @return {?}
*/
() => {
this.locale = this.ohayoI18n.getData('st');
if (this._columns.length > 0) {
this.updateTotalTpl();
this.cd();
}
}));
i18nSrv.change
.pipe(takeUntil(this.unsubscribe$), filter((/**
* @return {?}
*/
() => this._columns.length > 0)))
.subscribe((/**
* @template THIS
* @this {THIS}
* @return {THIS}
*/
() => this.refreshColumns()));
}
/**
* @return {?}
*/
get req() {
return this._req;
}
/**
* @param {?} value
* @return {?}
*/
set req(value) {
this._req = deepMergeKey({}, true, this.cog.req, value);
}
/**
* 返回体配置
* @return {?}
*/
get res() {
return this._res;
}
/**
* @param {?} value
* @return {?}
*/
set res(value) {
/** @type {?} */
const item = (this._res = deepMergeKey({}, true, this.cog.res, value));
/** @type {?} */
const reName = (/** @type {?} */ (item.reName));
if (!Array.isArray(reName.list))
reName.list = (/** @type {?} */ (reName.list)).split('.');
if (!Array.isArray(reName.total))
reName.total = (/** @type {?} */ (reName.total)).split('.');
this._res = item;
}
/**
* @return {?}
*/
get page() {
return this._page;
}
/**
* @param {?} value
* @return {?}
*/
set page(value) {
this._page = Object.assign(Object.assign({}, this.cog.page), value);
this.updateTotalTpl();
}
/**
* @return {?}
*/
get multiSort() {
return this._multiSort;
}
/**
* @param {?} value
* @return {?}
*/
set multiSort(value) {
if ((typeof value === 'boolean' && !toBoolean(value)) || (typeof value === 'object' && Object.keys(value).length === 0)) {
this._multiSort = undefined;
return;
}
this._multiSort = Object.assign({}, (typeof value === 'object' ? value : {}));
}
/**
* @param {?} value
* @return {?}
*/
set widthMode(value) {
this._widthMode = Object.assign(Object.assign({}, this.cog.widthMode), value);
}
/**
* @return {?}
*/
get widthMode() {
return this._widthMode;
}
/**
* @param {?} val
* @return {?}
*/
set widthConfig(val) {
this._widthConfig = val;
this.customWidthConfig = val && val.length > 0;
}
/**
* @param {?} val
* @return {?}
*/
set resizable(val) {
this._resizable = typeof val === 'object' ? val : { disabled: !toBoolean(val) };
}
/**
* Get the number of the current page
* @return {?}
*/
get count() {
return this._data.length;
}
/**
* Get the data of the current page
* @return {?}
*/
get list() {
return this._data;
}
/**
* @private
* @return {?}
*/
get routerState() {
const { pi, ps, total } = this;
return { pi, ps, total };
}
/**
* @private
* @param {?} cog
* @return {?}
*/
setCog(cog) {
/** @type {?} */
const copyMultiSort = Object.assign({}, cog.multiSort);
// Because multiSort.global will affect the result, it should be removed first, and multiSort will be operated again after processing.
delete cog.multiSort;
this.cog = cog;
Object.assign(this, cog);
if (copyMultiSort.global !== false) {
this.multiSort = copyMultiSort;
}
this.columnSource.setCog(cog);
}
/**
* @template THIS
* @this {THIS}
* @return {THIS}
*/
cd() {
(/** @type {?} */ (this)).cdr.detectChanges();
return (/** @type {?} */ (this));
}
/**
* @param {?} total
* @param {?} range
* @return {?}
*/
renderTotal(total, range) {
return this.totalTpl
? this.totalTpl.replace('{{total}}', total).replace('{{range[0]}}', range[0]).replace('{{range[1]}}', range[1])
: '';
}
/**
* @private
* @param {?} type
* @param {?=} data
* @return {?}
*/
changeEmit(type, data) {
/** @type {?} */
const res = {
type,
pi: this.pi,
ps: this.ps,
total: this.total,
};
if (data != null) {
res[type] = data;
}
this.change.emit(res);
}
// #region data
/**
* 获取过滤后所有数据
* - 本地数据：包含排序、过滤后不分页数据
* - 远程数据：不传递 `pi`、`ps` 两个参数
* @return {?}
*/
get filteredData() {
return this.loadData((/** @type {?} */ ({ paginator: false }))).then((/**
* @param {?} res
* @return {?}
*/
res => res.list));
}
/**
* @private
* @return {?}
*/
updateTotalTpl() {
const { total } = this.page;
if (typeof total === 'string' && total.length) {
this.totalTpl = total;
}
else if (toBoolean(total)) {
this.totalTpl = this.locale.total;
}
else {
this.totalTpl = '';
}
}
/**
* @private
* @param {?} val
* @return {?}
*/
setLoading(val) {
if (this.loading == null) {
this._loading = val;
this.cdr.detectChanges();
}
}
/**
* @private
* @param {?=} options
* @return {?}
*/
loadData(options) {
const { pi, ps, data, req, res, page, total, singleSort, multiSort, rowClassName } = this;
return new Promise((/**
* @param {?} resolvePromise
* @param {?} rejectPromise
* @return {?}
*/
(resolvePromise, rejectPromise) => {
if (this.data$) {
this.data$.unsubscribe();
}
this.data$ = this.dataSource
.process(Object.assign({
pi,
ps,
total,
data,
req,
res,
page, columns: this._columns, singleSort,
multiSort,
rowClassName, paginator: true
}, options))
.pipe(takeUntil(this.unsubscribe$))
.subscribe((/**
* @param {?} result
* @return {?}
*/
result => resolvePromise(result)), (/**
* @param {?} error
* @return {?}
*/
error => {
console.warn('st.loadDate', error);
rejectPromise(error);
}));
}));
}
/**
* @private
* @return {?}
*/
loadPageData() {
return __awaiter(this, void 0, void 0, function* () {
this.setLoading(true);
try {
/** @type {?} */
const result = yield this.loadData();
this.setLoading(false);
if (typeof result.pi !== 'undefined') {
this.pi = result.pi;
}
if (typeof result.ps !== 'undefined') {
this.ps = result.ps;
}
if (typeof result.total !== 'undefined') {
this.total = result.total;
}
if (typeof result.pageShow !== 'undefined') {
this._isPagination = result.pageShow;
}
this._data = (/** @type {?} */ (result.list));
this._statistical = (/** @type {?} */ (result.statistical));
this.changeEmit('loaded', result.list);
// Should be re-render in next tike when using virtual scroll
// https://github.com/ohayojp/ohayojp/issues/1836
if (this.cdkVirtualScrollViewport) {
Promise.resolve().then((/**
* @return {?}
*/
() => this.cdkVirtualScrollViewport.checkViewportSize()));
}
return this._refCheck();
}
catch (error) {
this.setLoading(false);
if (!this.unsubscribe$.isStopped) {
this.cdr.detectChanges();
this.error.emit({ type: 'req', error });
}
return this;
}
});
}
/**
* 清空所有数据
* @template THIS
* @this {THIS}
* @param {?=} cleanStatus
* @return {THIS}
*/
clear(cleanStatus = true) {
if (cleanStatus) {
(/** @type {?} */ (this)).clearStatus();
}
(/** @type {?} */ (this))._data = [];
return (/** @type {?} */ (this)).cd();
}
/**
* 清空所有状态
* @template THIS
* @this {THIS}
* @return {THIS}
*/
clearStatus() {
return (/** @type {?} */ (this)).clearCheck().clearRadio().clearFilter().clearSort();
}
/**
* 根据页码重新加载数据
*
* @template THIS
* @this {THIS}
* @param {?=} pi 指定当前页码，默认：`1`
* @param {?=} extraParams 重新指定 `extraParams` 值
* @param {?=} options 选项
* @return {THIS}
*/
load(pi = 1, extraParams, options) {
if (pi !== -1)
(/** @type {?} */ (this)).pi = pi;
if (typeof extraParams !== 'undefined') {
(/** @type {?} */ (this)).req.params = options && options.merge ? Object.assign(Object.assign({}, (/** @type {?} */ (this)).req.params), extraParams) : extraParams;
}
(/** @type {?} */ (this))._change('pi', options);
return (/** @type {?} */ (this));
}
/**
* 重新刷新当前页
* @template THIS
* @this {THIS}
* @param {?=} extraParams 重新指定 `extraParams` 值
* @param {?=} options
* @return {THIS}
*/
reload(extraParams, options) {
return (/** @type {?} */ (this)).load(-1, extraParams, options);
}
/**
* 重置且重新设置 `pi` 为 `1`，包含以下值：
* - `check` 数据
* - `radio` 数据
* - `sort` 数据
* - `fileter` 数据
*
* @template THIS
* @this {THIS}
* @param {?=} extraParams 重新指定 `extraParams` 值
* @param {?=} options
* @return {THIS}
*/
reset(extraParams, options) {
(/** @type {?} */ (this)).clearStatus().load(1, extraParams, options);
return (/** @type {?} */ (this));
}
/**
* @private
* @param {?=} enforce
* @return {?}
*/
_toTop(enforce) {
if (!(enforce == null ? this.page.toTop : enforce))
return;
/** @type {?} */
const el = (/** @type {?} */ (this.el.nativeElement));
if (this.scroll) {
if (this.cdkVirtualScrollViewport) {
this.cdkVirtualScrollViewport.scrollTo({
top: 0,
left: 0,
});
}
else {
(/** @type {?} */ (el.querySelector('.ant-table-body'))).scrollTo(0, 0);
}
return;
}
el.scrollIntoView();
// fix header height
this.doc.documentElement.scrollTop -= (/** @type {?} */ (this.page.toTopOffset));
}
/**
* @param {?} type
* @param {?=} options
* @return {?}
*/
_change(type, options) {
if (type === 'pi' || (type === 'ps' && this.pi <= Math.ceil(this.total / this.ps))) {
this.loadPageData().then((/**
* @return {?}
*/
() => this._toTop(options === null || options === void 0 ? void 0 : options.toTop)));
}
this.changeEmit(type);
}
/**
* @param {?} e
* @param {?} item
* @param {?} col
* @return {?}
*/
_click(e, item, col) {
e.preventDefault();
e.stopPropagation();
/** @type {?} */
const res = (/** @type {?} */ (col.click))(item, this);
if (typeof res === 'string') {
this.router.navigateByUrl(res, { state: this.routerState });
}
return false;
}
/**
* @private
* @param {?} item
* @return {?}
*/
closeOtherExpand(item) {
if (this.expandAccordion === false)
return;
this._data.filter((/**
* @param {?} i
* @return {?}
*/
i => i !== item)).forEach((/**
* @param {?} i
* @return {?}
*/
i => (i.expand = false)));
}
/**
* @param {?} e
* @param {?} item
* @param {?} index
* @return {?}
*/
_rowClick(e, item, index) {
if (((/** @type {?} */ (e.target))).nodeName === 'INPUT')
return;
const { expand, expandRowByClick, rowClickTime } = this;
if (!!expand && item.showExpand !== false && expandRowByClick) {
item.expand = !item.expand;
this.closeOtherExpand(item);
this.changeEmit('expand', item);
return;
}
++this.rowClickCount;
if (this.rowClickCount !== 1)
return;
setTimeout((/**
* @return {?}
*/
() => {
/** @type {?} */
const data = { e, item, index };
if (this.rowClickCount === 1) {
this.changeEmit('click', data);
}
else {
this.changeEmit('dblClick', data);
}
this.rowClickCount = 0;
}), rowClickTime);
}
/**
* @param {?} item
* @param {?} expand
* @return {?}
*/
_expandChange(item, expand) {
if (this.expandRowByClick) {
return;
}
item.expand = expand;
this.closeOtherExpand(item);
this.changeEmit('expand', item);
}
/**
* Remove a row in the table, like this:
*
* ```
* this.st.removeRow(0)
* this.st.removeRow(stDataItem)
* ```
* @template THIS
* @this {THIS}
* @param {?} data
* @return {THIS}
*/
removeRow(data) {
if (typeof data === 'number') {
(/** @type {?} */ (this))._data.splice(data, 1);
}
else {
if (!Array.isArray(data)) {
data = [data];
}
((/** @type {?} */ (data)))
.map((/**
* @param {?} item
* @return {?}
*/
item => (/** @type {?} */ (this))._data.indexOf(item)))
.filter((/**
* @param {?} pos
* @return {?}
*/
pos => pos !== -1))
.forEach((/**
* @param {?} pos
* @return {?}
*/
pos => (/** @type {?} */ (this))._data.splice(pos, 1)));
}
// recalculate no
(/** @type {?} */ (this))._columns
.filter((/**
* @param {?} w
* @return {?}
*/
w => w.type === 'no'))
.forEach((/**
* @param {?} c
* @return {?}
*/
c => (/** @type {?} */ (this))._data.forEach((/**
* @param {?} i
* @param {?} idx
* @return {?}
*/
(i, idx) => (i._values[(/** @type {?} */ (c.__point))] = { _text: (/** @type {?} */ (this)).dataSource.getNoIndex(i, c, idx), org: idx })))));
return (/** @type {?} */ (this)).cd();
}
/**
* Sets the row value for the `index` in the table, like this:
*
* - `optinos.refreshSchema` Whether to refresh of st schemas
* - `optinos.emitReload` Whether to trigger a reload http request when data is url
*
* ```
* this.st.setRow(0, { price: 100 })
* this.st.setRow(0, { price: 100, name: 'asdf' })
* ```
* @template THIS
* @this {THIS}
* @param {?} index
* @param {?} item
* @param {?=} options
* @return {THIS}
*/
setRow(index, item, options) {
options = Object.assign({ refreshSchema: false, emitReload: false }, options);
(/** @type {?} */ (this))._data[index] = deepMergeKey((/** @type {?} */ (this))._data[index], false, item);
(/** @type {?} */ (this)).optimizeData();
if (options.refreshSchema) {
(/** @type {?} */ (this)).resetColumns({ emitReload: options.emitReload });
return (/** @type {?} */ (this));
}
(/** @type {?} */ (this)).cdr.detectChanges();
return (/** @type {?} */ (this));
}
// #endregion
// #region sort
/**
* @param {?} col
* @param {?} idx
* @param {?} value
* @return {?}
*/
sort(col, idx, value) {
if (this.multiSort) {
(/** @type {?} */ (col._sort)).default = value;
(/** @type {?} */ (col._sort)).tick = this.dataSource.nextSortTick;
}
else {
this._columns.forEach((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
(item, index) => ((/** @type {?} */ (item._sort)).default = index === idx ? value : null)));
}
this.cdr.detectChanges();
this.loadPageData();
/** @type {?} */
const res = {
value,
map: this.dataSource.getReqSortMap(this.singleSort, this.multiSort, this._columns),
column: col,
};
this.changeEmit('sort', res);
}
/**
* @template THIS
* @this {THIS}
* @return {THIS}
*/
clearSort() {
(/** @type {?} */ (this))._columns.forEach((/**
* @param {?} item
* @return {?}
*/
item => ((/** @type {?} */ (item._sort)).default = null)));
return (/** @type {?} */ (this));
}
// #endregion
// #region filter
/**
* @private
* @param {?} col
* @return {?}
*/
handleFilter(col) {
// 过滤表示一种数据的变化应重置页码为 `1`
this.pi = 1;
this.columnSource.updateDefault((/** @type {?} */ (col.filter)));
this.loadPageData();
this.changeEmit('filter', col);
}
/**
* @param {?} col
* @return {?}
*/
_filterConfirm(col) {
this.handleFilter(col);
}
/**
* @param {?} col
* @param {?} item
* @param {?} checked
* @return {?}
*/
_filterRadio(col, item, checked) {
(/** @type {?} */ ((/** @type {?} */ (col.filter)).menus)).forEach((/**
* @param {?} i
* @return {?}
*/
i => (i.checked = false)));
item.checked = checked;
}
/**
* @param {?} col
* @return {?}
*/
_filterClear(col) {
this.columnSource.cleanFilter(col);
this.handleFilter(col);
}
/**
* @template THIS
* @this {THIS}
* @return {THIS}
*/
clearFilter() {
(/** @type {?} */ (this))._columns.filter((/**
* @param {?} w
* @return {?}
*/
w => w.filter && w.filter.default === true)).forEach((/**
* @param {?} col
* @return {?}
*/
col => (/** @type {?} */ (this)).columnSource.cleanFilter(col)));
return (/** @type {?} */ (this));
}
/**
* @param {?} $event
* @return {?}
*/
_filterClick($event) {
$event.stopPropagation();
}
// #endregion
// #region checkbox
/**
* 清除所有 `checkbox`
* @template THIS
* @this {THIS}
* @return {THIS}
*/
clearCheck() {
return (/** @type {?} */ (this))._checkAll(false);
}
/**
* @private
* @template THIS
* @this {THIS}
* @return {THIS}
*/
_refCheck() {
/** @type {?} */
const validData = (/** @type {?} */ (this))._data.filter((/**
* @param {?} w
* @return {?}
*/
w => !w.disabled));
/** @type {?} */
const checkedList = validData.filter((/**
* @param {?} w
* @return {?}
*/
w => w.checked === true));
(/** @type {?} */ (this))._allChecked = checkedList.length > 0 && checkedList.length === validData.length;
/** @type {?} */
const allUnChecked = validData.every((/**
* @param {?} value
* @return {?}
*/
value => !value.checked));
(/** @type {?} */ (this))._indeterminate = !(/** @type {?} */ (this))._allChecked && !allUnChecked;
(/** @type {?} */ (this))._allCheckedDisabled = (/** @type {?} */ (this))._data.length === (/** @type {?} */ (this))._data.filter((/**
* @param {?} w
* @return {?}
*/
w => w.disabled)).length;
return (/** @type {?} */ (this)).cd();
}
/**
* @template THIS
* @this {THIS}
* @param {?=} checked
* @return {THIS}
*/
_checkAll(checked) {
checked = typeof checked === 'undefined' ? (/** @type {?} */ (this))._allChecked : checked;
(/** @type {?} */ (this))._data.filter((/**
* @param {?} w
* @return {?}
*/
w => !w.disabled)).forEach((/**
* @param {?} i
* @return {?}
*/
i => (i.checked = checked)));
return (/** @type {?} */ (this))._refCheck()._checkNotify();
}
/**
* @template THIS
* @this {THIS}
* @param {?} i
* @param {?} value
* @return {THIS}
*/
_checkSelection(i, value) {
i.checked = value;
return (/** @type {?} */ (this))._refCheck()._checkNotify();
}
/**
* @template THIS
* @this {THIS}
* @param {?} row
* @return {THIS}
*/
_rowSelection(row) {
row.select((/** @type {?} */ (this))._data);
return (/** @type {?} */ (this))._refCheck()._checkNotify();
}
/**
* @template THIS
* @this {THIS}
* @return {THIS}
*/
_checkNotify() {
/** @type {?} */
const res = (/** @type {?} */ (this))._data.filter((/**
* @param {?} w
* @return {?}
*/
w => !w.disabled && w.checked === true));
(/** @type {?} */ (this)).changeEmit('checkbox', res);
return (/** @type {?} */ (this));
}
// #endregion
// #region radio
/**
* 清除所有 `radio`
* @template THIS
* @this {THIS}
* @return {THIS}
*/
clearRadio() {
(/** @type {?} */ (this))._data.filter((/**
* @param {?} w
* @return {?}
*/
w => w.checked)).forEach((/**
* @param {?} item
* @return {?}
*/
item => (item.checked = false)));
(/** @type {?} */ (this)).changeEmit('radio', null);
return (/** @type {?} */ (this));
}
/**
* @template THIS
* @this {THIS}
* @param {?} checked
* @param {?} item
* @return {THIS}
*/
_refRadio(checked, item) {
// if (item.disabled === true) return;
(/** @type {?} */ (this))._data.filter((/**
* @param {?} w
* @return {?}
*/
w => !w.disabled)).forEach((/**
* @param {?} i
* @return {?}
*/
i => (i.checked = false)));
item.checked = checked;
(/** @type {?} */ (this)).changeEmit('radio', item);
return (/** @type {?} */ (this));
}
// #endregion
// #region buttons
/**
* @param {?} record
* @param {?} btn
* @param {?=} e
* @return {?}
*/
_btnClick(record, btn, e) {
// should be stop propagation when expandRowByClick is true
if (e && this.expandRowByClick === true) {
e.stopPropagation();
}
if (btn.type === 'modal' || btn.type === 'static') {
const { modal } = btn;
/** @type {?} */
const obj = { [(/** @type {?} */ ((/** @type {?} */ (modal)).paramsName))]: record };
((/** @type {?} */ (this.modalHelper[btn.type === 'modal' ? 'create' : 'createStatic'])))((/** @type {?} */ (modal)).component, Object.assign(Object.assign({}, obj), ((/** @type {?} */ (modal)).params && (/** @type {?} */ ((/** @type {?} */ (modal)).params))(record))), deepMergeKey({}, true, this.cog.modal, modal))
.pipe(filter((/**
* @param {?} w
* @return {?}
*/
w => typeof w !== 'undefined')))
.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => this.btnCallback(record, btn, res)));
return;
}
else if (btn.type === 'drawer') {
const { drawer } = btn;
/** @type {?} */
const obj = { [(/** @type {?} */ ((/** @type {?} */ (drawer)).paramsName))]: record };
this.drawerHelper
.create((/** @type {?} */ ((/** @type {?} */ (drawer)).title)), (/** @type {?} */ (drawer)).component, Object.assign(Object.assign({}, obj), ((/** @type {?} */ (drawer)).params && (/** @type {?} */ ((/** @type {?} */ (drawer)).params))(record))), deepMergeKey({}, true, this.cog.drawer, drawer))
.pipe(filter((/**
* @param {?} w
* @return {?}
*/
w => typeof w !== 'undefined')))
.subscribe((/**
* @param {?} res
* @return {?}
*/
res => this.btnCallback(record, btn, res)));
return;
}
else if (btn.type === 'link') {
/** @type {?} */
const clickRes = this.btnCallback(record, btn);
if (typeof clickRes === 'string') {
this.router.navigateByUrl(clickRes, { state: this.routerState });
}
return;
}
this.btnCallback(record, btn);
}
/**
* @private
* @param {?} record
* @param {?} btn
* @param {?=} modal
* @return {?}
*/
btnCallback(record, btn, modal) {
if (!btn.click)
return;
if (typeof btn.click === 'string') {
switch (btn.click) {
case 'load':
this.load();
break;
case 'reload':
this.reload();
break;
}
}
else {
return btn.click(record, modal, this);
}
}
/**
* @param {?} record
* @param {?} btn
* @return {?}
*/
_btnText(record, btn) {
return typeof btn.text === 'function' ? btn.text(record, btn) : btn.text || '';
}
/**
* @param {?} btns
* @param {?} item
* @param {?} col
* @return {?}
*/
_validBtns(btns, item, col) {
return btns.filter((/**
* @param {?} btn
* @return {?}
*/
btn => {
/** @type {?} */
const result = (/** @type {?} */ (btn.iif))(item, btn, col);
/** @type {?} */
const isRenderDisabled = btn.iifBehavior === 'disabled';
btn._result = result;
btn._disabled = !result && isRenderDisabled;
return result || isRenderDisabled;
}));
}
// #endregion
// #region export
/**
* 导出当前页，确保已经注册 `XlsxModule`
* @param {?=} newData 重新指定数据；若为 `true` 表示使用 `filteredData` 数据
* @param {?=} opt 额外参数
* @return {?}
*/
export(newData, opt) {
(newData === true ? from(this.filteredData) : of(newData || this._data)).subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => this.exportSrv.export(Object.assign(Object.assign({}, opt), { data: res, columens: this._columns }))));
}
// #endregion
// #region resizable
/**
* @param {?} __0
* @param {?} column
* @return {?}
*/
colResize({ width }, column) {
column.width = `${width}px`;
this.changeEmit('resize', column);
}
// #endregion
/**
* @return {?}
*/
get cdkVirtualScrollViewport() {
return (/** @type {?} */ (this.orgTable.cdkVirtualScrollViewport));
}
/**
* @param {?=} options
* @return {?}
*/
resetColumns(options) {
options = Object.assign({ emitReload: true, preClearData: false }, options);
if (typeof options.columns !== 'undefined') {
this.columns = options.columns;
}
if (typeof options.pi !== 'undefined') {
this.pi = options.pi;
}
if (typeof options.ps !== 'undefined') {
this.ps = options.ps;
}
if (options.emitReload) {
// Should clean data, Because of changing columns may cause inaccurate data
options.preClearData = true;
}
if (options.preClearData) {
this._data = [];
}
this.refreshColumns();
if (options.emitReload) {
return this.loadPageData();
}
else {
this.cd();
return Promise.resolve(this);
}
}
/**
* @private
* @template THIS
* @this {THIS}
* @return {THIS}
*/
refreshColumns() {
/** @type {?} */
const res = (/** @type {?} */ (this)).columnSource.process((/** @type {?} */ ((/** @type {?} */ (this)).columns)), { widthMode: (/** @type {?} */ (this)).widthMode, resizable: (/** @type {?} */ (this))._resizable });
(/** @type {?} */ (this))._columns = res.columns;
(/** @type {?} */ (this))._headers = res.headers;
if ((/** @type {?} */ (this)).customWidthConfig === false && res.headerWidths != null) {
(/** @type {?} */ (this))._widthConfig = res.headerWidths;
}
return (/** @type {?} */ (this));
}
/**
* @private
* @return {?}
*/
optimizeData() {
this._data = this.dataSource.optimizeData({ columns: this._columns, result: this._data, rowClassName: this.rowClassName });
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.columnSource.restoreAllRender(this._columns);
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.columns) {
this.refreshColumns().optimizeData();
}
/** @type {?} */
const changeData = changes.data;
if (changeData && changeData.currentValue && !(this.req.lazyLoad && changeData.firstChange)) {
this.loadPageData();
}
if (changes.loading) {
this._loading = changes.loading.currentValue;
}
}
/**
* @return {?}
*/
ngOnDestroy() {
const { unsubscribe$ } = this;
unsubscribe$.next();
unsubscribe$.complete();
}
}
STComponent.decorators = [
{
type: Component, args: [{
selector: 'st',
exportAs: 'st',
template: "<ng-template #btnTpl let-i let-btn=\"btn\">\n <ng-container *ngIf=\"!btn.tooltip\">\n <ng-template [ngTemplateOutlet]=\"btnItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, btn: btn }\"></ng-template>\n </ng-container>\n <span *ngIf=\"btn.tooltip\" nz-tooltip [nzTooltipTitle]=\"btn.tooltip\">\n <ng-template [ngTemplateOutlet]=\"btnItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, btn: btn }\"></ng-template>\n </span>\n</ng-template>\n<ng-template #btnItemTpl let-i let-btn=\"btn\">\n <a\n *ngIf=\"btn.pop\"\n nz-popconfirm\n [nzPopconfirmTitle]=\"btn.pop.title\"\n [nzIcon]=\"btn.pop.icon\"\n [nzCondition]=\"btn.pop.condition(i)\"\n [nzCancelText]=\"btn.pop.cancelText\"\n [nzOkText]=\"btn.pop.okText\"\n [nzOkType]=\"btn.pop.okType\"\n (nzOnConfirm)=\"_btnClick(i, btn, $event)\"\n class=\"st__btn-text\"\n [ngClass]=\"btn.className\"\n >\n <ng-template [ngTemplateOutlet]=\"btnTextTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, btn: btn }\"></ng-template>\n </a>\n <a *ngIf=\"!btn.pop\" (click)=\"_btnClick(i, btn, $event)\" class=\"st__btn-text\" [ngClass]=\"btn.className\">\n <ng-template [ngTemplateOutlet]=\"btnTextTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, btn: btn }\"></ng-template>\n </a>\n</ng-template>\n<ng-template #btnTextTpl let-i let-btn=\"btn\">\n <ng-container *ngIf=\"btn.icon\">\n <i\n *ngIf=\"!btn.icon.iconfont\"\n nz-icon\n [nzType]=\"btn.icon.type\"\n [nzTheme]=\"btn.icon.theme\"\n [nzSpin]=\"btn.icon.spin\"\n [nzTwotoneColor]=\"btn.icon.twoToneColor\"\n ></i>\n <i *ngIf=\"btn.icon.iconfont\" nz-icon [nzIconfont]=\"btn.icon.iconfont\"></i>\n </ng-container>\n <span [innerHTML]=\"_btnText(i, btn)\" [ngClass]=\"{ 'pl-xs': btn.icon }\"></span>\n</ng-template>\n<ng-template #titleTpl let-i>\n <span [innerHTML]=\"i._text\"></span>\n <small *ngIf=\"i.optional\" class=\"st__head-optional\" [innerHTML]=\"i.optional\"></small>\n <i *ngIf=\"i.optionalHelp\" class=\"st__head-tip\" nz-tooltip [nzTooltipTitle]=\"i.optionalHelp\" nz-icon nzType=\"question-circle\"></i>\n</ng-template>\n<ng-template #chkAllTpl let-custom>\n <label\n nz-checkbox\n class=\"st__checkall\"\n [nzDisabled]=\"_allCheckedDisabled\"\n [(ngModel)]=\"_allChecked\"\n [nzIndeterminate]=\"_indeterminate\"\n (ngModelChange)=\"_checkAll()\"\n [class.ant-table-selection-select-all-custom]=\"custom\"\n ></label>\n</ng-template>\n<nz-table\n #table\n [nzData]=\"_data\"\n [(nzPageIndex)]=\"pi\"\n (nzPageIndexChange)=\"_change('pi')\"\n [(nzPageSize)]=\"ps\"\n (nzPageSizeChange)=\"_change('ps')\"\n [nzTotal]=\"total\"\n [nzShowPagination]=\"_isPagination\"\n [nzFrontPagination]=\"false\"\n [nzBordered]=\"bordered\"\n [nzSize]=\"size\"\n [nzLoading]=\"_loading\"\n [nzLoadingDelay]=\"loadingDelay\"\n [nzLoadingIndicator]=\"loadingIndicator\"\n [nzTitle]=\"header\"\n [nzFooter]=\"footer\"\n [nzScroll]=\"scroll\"\n [nzVirtualItemSize]=\"virtualItemSize\"\n [nzVirtualMaxBufferPx]=\"virtualMaxBufferPx\"\n [nzVirtualMinBufferPx]=\"virtualMinBufferPx\"\n [nzVirtualForTrackBy]=\"virtualForTrackBy\"\n [nzNoResult]=\"noResult\"\n [nzPageSizeOptions]=\"page.pageSizes\"\n [nzShowQuickJumper]=\"page.showQuickJumper\"\n [nzShowSizeChanger]=\"page.showSize\"\n [nzPaginationPosition]=\"page.position\"\n [nzItemRender]=\"page.itemRender\"\n [nzSimple]=\"page.simple\"\n [nzShowTotal]=\"totalTpl\"\n [nzWidthConfig]=\"_widthConfig\"\n>\n <thead class=\"st__head\">\n <tr *ngFor=\"let row of _headers; let rowFirst = first\">\n <th *ngIf=\"rowFirst && expand\" nzWidth=\"50px\" [rowSpan]=\"_headers.length\"></th>\n <th\n *ngFor=\"let h of row; let index = index; let last = last\"\n [colSpan]=\"h.colSpan\"\n [rowSpan]=\"h.rowSpan\"\n [nzWidth]=\"h.column.width\"\n [nzLeft]=\"!!h.column._left\"\n [nzRight]=\"!!h.column._right\"\n [ngClass]=\"h.column.className\"\n [attr.data-col]=\"h.column.indexKey\"\n [nzShowSort]=\"h.column._sort.enabled\"\n [nzSortOrder]=\"h.column._sort.default\"\n (nzSortOrderChange)=\"sort(h.column, index, $event)\"\n [nzCustomFilter]=\"h.column.filter\"\n nz-resizable\n [nzDisabled]=\"last || h.column.resizable.disabled\"\n [nzMaxWidth]=\"h.column.resizable.maxWidth\"\n [nzMinWidth]=\"h.column.resizable.minWidth\"\n [nzBounds]=\"h.column.resizable.bounds\"\n [nzPreview]=\"h.column.resizable.preview\"\n (nzResizeEnd)=\"colResize($event, h.column)\"\n >\n <nz-resize-handle *ngIf=\"!last && !h.column.resizable.disabled\" nzDirection=\"right\"><i></i></nz-resize-handle>\n <ng-template #renderTitle [ngTemplateOutlet]=\"h.column.__renderTitle\" [ngTemplateOutletContext]=\"{ $implicit: h.column, index: index }\"></ng-template>\n <ng-container *ngIf=\"!h.column.__renderTitle; else renderTitle\">\n <ng-container [ngSwitch]=\"h.column.type\">\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container *ngIf=\"h.column.selections.length === 0\">\n <ng-template [ngTemplateOutlet]=\"chkAllTpl\" [ngTemplateOutletContext]=\"{ $implicit: false }\"> </ng-template>\n </ng-container>\n <div *ngIf=\"h.column.selections.length > 0\" class=\"ant-table-selection\">\n <ng-template [ngTemplateOutlet]=\"chkAllTpl\" [ngTemplateOutletContext]=\"{ $implicit: true }\"> </ng-template>\n <div\n *ngIf=\"h.column.selections.length\"\n nz-dropdown\n nzPlacement=\"bottomLeft\"\n [nzDropdownMenu]=\"selectionMenu\"\n class=\"ant-table-selection-down st__checkall-selection\"\n >\n <i nz-icon nzType=\"down\"></i>\n </div>\n <nz-dropdown-menu #selectionMenu=\"nzDropdownMenu\">\n <ul nz-menu class=\"ant-table-selection-menu\">\n <li nz-menu-item *ngFor=\"let rw of h.column.selections\" (click)=\"_rowSelection(rw)\" [innerHTML]=\"rw.text\"></li>\n </ul>\n </nz-dropdown-menu>\n </div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-template [ngTemplateOutlet]=\"titleTpl\" [ngTemplateOutletContext]=\"{ $implicit: h.column.title }\"></ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n <div\n nz-th-extra\n *ngIf=\"h.column.filter\"\n class=\"ant-table-filter-trigger-container st__filter\"\n [class.ant-table-filter-trigger-container-open]=\"h.column.filter.visible\"\n >\n <span\n class=\"ant-table-filter-trigger\"\n [class.active]=\"h.column.filter.visible || h.column.filter.default\"\n nz-dropdown\n [nzDropdownMenu]=\"filterMenu\"\n nzTrigger=\"click\"\n [nzClickHide]=\"false\"\n [(nzVisible)]=\"h.column.filter.visible\"\n nzOverlayClassName=\"st__filter-wrap\"\n (click)=\"_filterClick($event)\"\n >\n <i nz-icon [nzType]=\"h.column.filter.icon.type\" [nzTheme]=\"h.column.filter.icon.theme\"></i>\n </span>\n <nz-dropdown-menu #filterMenu=\"nzDropdownMenu\">\n <div class=\"ant-table-filter-dropdown\">\n <ng-container [ngSwitch]=\"h.column.filter.type\">\n <div *ngSwitchCase=\"'keyword'\" class=\"st__filter-keyword\">\n <input type=\"text\" nz-input [attr.placeholder]=\"h.column.filter.menus[0].text\" [(ngModel)]=\"h.column.filter.menus[0].value\" />\n </div>\n <ul *ngSwitchDefault nz-menu>\n <ng-container *ngIf=\"h.column.filter.multiple\">\n <li nz-menu-item *ngFor=\"let filter of h.column.filter.menus\">\n <label nz-checkbox [(ngModel)]=\"filter.checked\">{{ filter.text }}</label>\n </li>\n </ng-container>\n <ng-container *ngIf=\"!h.column.filter.multiple\">\n <li nz-menu-item *ngFor=\"let filter of h.column.filter.menus\">\n <label nz-radio [ngModel]=\"filter.checked\" (ngModelChange)=\"_filterRadio(h.column, filter, $event)\">{{ filter.text }}</label>\n </li>\n </ng-container>\n </ul>\n </ng-container>\n <div class=\"ant-table-filter-dropdown-btns\">\n <a class=\"ant-table-filter-dropdown-link confirm\" (click)=\"h.column.filter.visible = false\">\n <span (click)=\"_filterConfirm(h.column)\">{{ h.column.filter.confirmText || locale.filterConfirm }}</span>\n </a>\n <a class=\"ant-table-filter-dropdown-link clear\" (click)=\"h.column.filter.visible = false\">\n <span (click)=\"_filterClear(h.column)\">{{ h.column.filter.clearText || locale.filterReset }}</span>\n </a>\n </div>\n </div>\n </nz-dropdown-menu>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"st__body\">\n <ng-container *ngIf=\"!_loading\">\n <ng-template [ngTemplateOutlet]=\"bodyHeader\" [ngTemplateOutletContext]=\"{ $implicit: _statistical }\"></ng-template>\n </ng-container>\n <ng-template #bodyTpl let-i let-index=\"index\">\n <tr [attr.data-index]=\"index\" (click)=\"_rowClick($event, i, index)\" [ngClass]=\"i._rowClassName\">\n <td\n *ngIf=\"expand\"\n [nzShowExpand]=\"expand && i.showExpand !== false\"\n [nzExpand]=\"i.expand\"\n (nzExpandChange)=\"_expandChange(i, $event)\"\n nzWidth=\"50px\"\n ></td>\n <td *ngFor=\"let c of _columns; let cIdx = index\" [nzLeft]=\"!!c._left\" [nzRight]=\"!!c._right\" [ngClass]=\"c._className\" [attr.colspan]=\"c.colSpan\">\n <span *ngIf=\"responsive\" class=\"ant-table-rep__title\">\n <ng-template [ngTemplateOutlet]=\"titleTpl\" [ngTemplateOutletContext]=\"{ $implicit: c.title }\"></ng-template>\n </span>\n <span>\n <ng-template #render [ngTemplateOutlet]=\"c.__render\" [ngTemplateOutletContext]=\"{ $implicit: i, index: index, column: c }\"></ng-template>\n <ng-container *ngIf=\"!c.__render; else render\">\n <ng-container [ngSwitch]=\"c.type\">\n <label\n *ngSwitchCase=\"'checkbox'\"\n nz-checkbox\n [nzDisabled]=\"i.disabled\"\n [ngModel]=\"i.checked\"\n (ngModelChange)=\"_checkSelection(i, $event)\"\n ></label>\n <label *ngSwitchCase=\"'radio'\" nz-radio [nzDisabled]=\"i.disabled\" [ngModel]=\"i.checked\" (ngModelChange)=\"_refRadio($event, i)\"></label>\n <a *ngSwitchCase=\"'link'\" (click)=\"_click($event, i, c)\" [innerHTML]=\"i._values[cIdx]._text\" [attr.title]=\"i._values[cIdx].text\"></a>\n <ng-container *ngIf=\"i._values[cIdx].text\">\n <nz-tag *ngSwitchCase=\"'tag'\" [nzColor]=\"i._values[cIdx].color\">\n <span [innerHTML]=\"i._values[cIdx]._text\"></span>\n </nz-tag>\n <nz-badge *ngSwitchCase=\"'badge'\" [nzStatus]=\"i._values[cIdx].color\" [nzText]=\"i._values[cIdx].text\"></nz-badge>\n </ng-container>\n <ng-template *ngSwitchCase=\"'widget'\" st-widget-host [record]=\"i\" [column]=\"c\"></ng-template>\n <span *ngSwitchDefault [innerHTML]=\"i._values[cIdx]._text\" [attr.title]=\"c._isTruncate ? i._values[cIdx].text : null\"></span>\n </ng-container>\n <ng-container *ngFor=\"let btn of _validBtns(c.buttons, i, c); let last = last\">\n <a *ngIf=\"btn.children.length > 0\" nz-dropdown [nzDropdownMenu]=\"btnMenu\" nzOverlayClassName=\"st__btn-sub\">\n <span [innerHTML]=\"_btnText(i, btn)\"></span>\n <i nz-icon nzType=\"down\"></i>\n </a>\n <nz-dropdown-menu #btnMenu=\"nzDropdownMenu\">\n <ul nz-menu>\n <ng-container *ngFor=\"let subBtn of _validBtns(btn.children, i, c)\">\n <li *ngIf=\"subBtn.type !== 'divider'\" nz-menu-item [class.st__btn-disabled]=\"subBtn._disabled\">\n <ng-template [ngTemplateOutlet]=\"btnTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, btn: subBtn }\"> </ng-template>\n </li>\n <li *ngIf=\"subBtn.type === 'divider'\" nz-menu-divider></li>\n </ng-container>\n </ul>\n </nz-dropdown-menu>\n <span *ngIf=\"btn.children.length == 0\" [class.st__btn-disabled]=\"btn._disabled\">\n <ng-template [ngTemplateOutlet]=\"btnTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, btn: btn }\"> </ng-template>\n </span>\n <nz-divider *ngIf=\"!last\" nzType=\"vertical\"></nz-divider>\n </ng-container>\n <ng-template\n [ngIf]=\"!c.__renderExpanded\"\n [ngTemplateOutlet]=\"c.__renderExpanded\"\n [ngTemplateOutletContext]=\"{ $implicit: i, index: index, column: c }\"\n ></ng-template>\n </ng-container>\n </span>\n </td>\n </tr>\n <tr [nzExpand]=\"i.expand\">\n <ng-template [ngTemplateOutlet]=\"expand\" [ngTemplateOutletContext]=\"{ $implicit: i, index: index }\"></ng-template>\n