import { LightningElement, api, track } from 'lwc';
|
|
const dateTableConfig_init = {
|
// 如果存在，则用于行选择的复选框列将被隐藏。
|
hideCheckboxColumn: false,
|
// 指定未排序列的默认排序方向。有效选项包括“ asc”和“ desc”。默认值为“ asc”，用于按升序排序。
|
defaultSortDirection: 'asc',
|
// 指定排序方向。使用onsort事件处理程序对数据进行排序。有效选项包括“ asc”和“ desc”。
|
sortDirection: 'asc',
|
// 控制排序顺序的列字段名。使用onsort事件处理程序对数据进行排序
|
sortedBy: undefined,
|
// 是否后台接口排序
|
sortInterfaces: true,
|
// 搜索列
|
searchColumns: [],
|
// 搜索条件
|
listQuery: {
|
page: 1,
|
limit: 10,
|
sort: "",
|
sortOrder: "",
|
search: ""
|
},
|
// 分页
|
page: {
|
currentPage: 1,
|
total: 0,
|
pageSize: 10
|
},
|
|
}
|
|
export default class BasicDatatable extends LightningElement {
|
@api name;
|
@api idkey = "Id";
|
@api miniheight = "min-height: 250px";
|
@api options = {};
|
// 数据集
|
@api tableData = [];
|
@api tableIsLoding = false;
|
|
connectedCallback(){
|
this.initJzDataTable(this.options);
|
}
|
|
@track dataTableConfig = dateTableConfig_init;
|
|
initJzDataTable(init){
|
let searchParams = {};
|
for(let obj of init.searchColumns){
|
if(obj.value) searchParams[obj.name] = obj.value;
|
}
|
this.refreshDataTable(init);
|
}
|
|
@api
|
refreshDataTable(init){
|
init = init || {};
|
// 定义搜索参数变量
|
let listQuery = {};
|
// 获取搜索信息 将搜索信息放入搜索变量中
|
listQuery = {search: init.searchParams ? encodeURI(JSON.stringify(init.searchParams), 'utf-8') : this.dataTableConfig.listQuery.search};
|
// 获取当前分页信息 将分页信息放入搜索条件中
|
let page = init.page || this.dataTableConfig.page;
|
listQuery = {...listQuery, page: page.currentPage, pageLimit: page.pageSize};
|
// 将排序信息放入搜索条件中
|
listQuery = {...listQuery, sortPlus: init.sortedBy || this.dataTableConfig.sortedBy, sortOrder: init.sortDirection || this.dataTableConfig.sortDirection };
|
// 执行搜索获取数据
|
// let data = await fetchDataHelper(listQuery);
|
const getTableDataEvent = new CustomEvent('gettabledata', {
|
detail: {listQuery: listQuery}
|
});
|
this.dispatchEvent(getTableDataEvent);
|
|
// 将数据返回给表格中
|
this.dataTableConfig = {...this.dataTableConfig, ...init, listQuery: listQuery, page: page};
|
}
|
|
// 点击排序
|
onHandleSort(event) {
|
const { fieldName: sortedBy, sortDirection } = event.detail;
|
if(this.dataTableConfig.sortInterfaces){
|
this.refreshDataTable({sortDirection,sortedBy});
|
} else {
|
const cloneData = [...this.tableData];
|
|
cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
|
this.tableData = cloneData;
|
this.dataTableConfig.sortDirection = sortDirection;
|
this.dataTableConfig.sortedBy = sortedBy;
|
}
|
}
|
|
sortBy(field, reverse, primer) {
|
const key = primer
|
? function(x) {
|
return primer(x[field]);
|
}
|
: function(x) {
|
return x[field];
|
};
|
|
return function(a, b) {
|
a = key(a);
|
b = key(b);
|
return reverse * ((a > b) - (b > a));
|
};
|
}
|
|
get dataPlus(){
|
return this.tableData;
|
}
|
|
get isLoading(){
|
return this.tableIsLoding;
|
}
|
|
selecttionPlus(event){
|
const getSearchParamsEvent = new CustomEvent('rowselection', {
|
detail: {rows:event.detail.selectedRows}
|
});
|
this.dispatchEvent(getSearchParamsEvent);
|
}
|
handleSave(event)
|
{
|
const getSearchParamsEvent = new CustomEvent('save', {
|
detail: {rows:event.detail.draftValues}
|
});
|
this.dispatchEvent(getSearchParamsEvent);
|
}
|
|
}
|
