You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
3.1 KiB
143 lines
3.1 KiB
import { Observable, Subject } from "rxjs";
|
|
import { produce, immerable, setAutoFreeze } from "immer";
|
|
import { DecSafeAny, TableListColumns, TableOperation } from "../types";
|
|
import { EventEmitter } from "@angular/core";
|
|
|
|
type IfetchData = (...args: DecSafeAny[]) => Observable<DecSafeAny>;
|
|
|
|
type ITableListConfig = {
|
|
manual?: boolean;
|
|
cacheKey?: string;
|
|
cacheTo?: string[];
|
|
rowKey?: string;
|
|
columnKey?: string;
|
|
selectable?: boolean;
|
|
withOutDefaultColumns?: boolean;
|
|
theadSettable?: boolean;
|
|
pageFromZero?: boolean;
|
|
frontPagination?: boolean;
|
|
};
|
|
|
|
type TableListState = {
|
|
selectedKeys: string[];
|
|
};
|
|
|
|
type TableListPager = {
|
|
page: number;
|
|
size: number;
|
|
total: number;
|
|
loading: boolean;
|
|
sort: { [K: string]: "ascend" | "descend" };
|
|
};
|
|
|
|
setAutoFreeze(false);
|
|
|
|
export class TableListOption {
|
|
[immerable] = true;
|
|
|
|
trigger$ = new Subject<DecSafeAny>();
|
|
|
|
getState$ = new EventEmitter<TableListState>();
|
|
|
|
columns: TableListColumns[] = [];
|
|
|
|
operations!: TableOperation[];
|
|
|
|
fetchData: IfetchData;
|
|
|
|
manual?: boolean = false;
|
|
|
|
cacheKey?: string;
|
|
|
|
cacheTo?: string[];
|
|
|
|
rowKey: string;
|
|
|
|
columnKey?: string;
|
|
|
|
selectable: boolean = false;
|
|
|
|
withOutDefaultColumns?: boolean;
|
|
|
|
pageFromZero?: boolean;
|
|
|
|
theadSettable: boolean = false;
|
|
|
|
frontPagination: boolean = true;
|
|
|
|
scroll: { x?: string | null; y?: string | null } = { x: "2000px", y: null };
|
|
|
|
pager: TableListPager = {
|
|
page: 1,
|
|
size: 5,
|
|
loading: false,
|
|
total: 0,
|
|
sort: {},
|
|
};
|
|
|
|
constructor(fetchData: IfetchData, config?: ITableListConfig) {
|
|
this.fetchData = fetchData;
|
|
this.manual = config?.manual;
|
|
this.cacheKey = config?.cacheKey;
|
|
this.cacheTo = config?.cacheTo;
|
|
this.rowKey = config?.rowKey ?? "id";
|
|
this.selectable = config?.selectable ?? false;
|
|
this.withOutDefaultColumns = config?.withOutDefaultColumns;
|
|
this.theadSettable = config?.theadSettable ?? false;
|
|
this.columnKey = config?.columnKey;
|
|
this.pageFromZero = config?.pageFromZero;
|
|
this.frontPagination = config?.frontPagination ?? true;
|
|
}
|
|
|
|
/**
|
|
* 设置表格的列，❗❗不可变数据❗❗
|
|
* @param columns TableListColumns
|
|
* @returns
|
|
*/
|
|
setColumns(columns: TableListColumns[]) {
|
|
return produce(this, (draft) => {
|
|
// if (!this.withOutDefaultColumns) {
|
|
// columns = columns.concat(
|
|
// { key: "createTime", title: "创建时间", sort: true },
|
|
// { key: "updateTime", title: "更新时间", sort: true, visible: false }
|
|
// );
|
|
// draft.pager.sort = { createTime: "descend" };
|
|
// }
|
|
draft.columns = columns;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 设置表格的操作项，❗❗不可变数据❗❗
|
|
* @param columns TableListColumns
|
|
* @returns
|
|
*/
|
|
setOptions(operations: TableOperation[]) {
|
|
return produce(this, (draft) => {
|
|
draft.operations = operations;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 设置表格CacheKey，❗❗不可变数据❗❗
|
|
* @param columns TableListColumns
|
|
* @returns
|
|
*/
|
|
setCacheKey(cacheKey: string) {
|
|
return produce(this, (draft) => {
|
|
draft.cacheKey = cacheKey;
|
|
});
|
|
}
|
|
|
|
run(e?: DecSafeAny) {
|
|
setTimeout(() => {
|
|
// 防止 还没有 subscribe 就 next 了
|
|
this.trigger$.next(e);
|
|
}, 10);
|
|
}
|
|
|
|
reset() {
|
|
this.pager.page = 1;
|
|
this.run();
|
|
}
|
|
}
|
|
|