mirror of
https://gitee.com/orangeform/orange-admin.git
synced 2026-01-17 18:46:36 +08:00
commit
This commit is contained in:
Jerry
297
orange-demo-web/src/utils/widget.js
Normal file
297
orange-demo-web/src/utils/widget.js
Normal file
@@ -0,0 +1,297 @@
|
||||
import { Message } from 'element-ui';
|
||||
import { treeDataTranslate } from '@/utils';
|
||||
|
||||
const DEFAULT_PAGE_SIZE = 10;
|
||||
|
||||
export class DropdownWidget {
|
||||
/**
|
||||
* 下拉组件（Select、Cascade、TreeSelect等）
|
||||
* @param {function () : Promise} loadDropdownData 下拉数据获取函数
|
||||
* @param {Boolean} isTree 是否是树数据
|
||||
* @param {String} idKey 键字段字段名
|
||||
* @param {String} parentIdKey 父字段字段名
|
||||
*/
|
||||
constructor (loadDropdownData, isTree = false, idKey = 'id', parentIdKey = 'parentId') {
|
||||
this.loading = false;
|
||||
this.dirty = true;
|
||||
this.dropdownList = [];
|
||||
this.isTree = isTree;
|
||||
this.idKey = idKey;
|
||||
this.parentIdKey = parentIdKey;
|
||||
this.loadDropdownData = loadDropdownData;
|
||||
this.setDropdownList = this.setDropdownList.bind(this);
|
||||
this.onVisibleChange = this.onVisibleChange.bind(this);
|
||||
}
|
||||
/**
|
||||
* 重新获取下拉数据
|
||||
*/
|
||||
reloadDropdownData () {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.loading) {
|
||||
if (typeof this.loadDropdownData === 'function') {
|
||||
this.loading = true;
|
||||
this.loadDropdownData().then(dataList => {
|
||||
this.setDropdownList(dataList);
|
||||
this.loading = false;
|
||||
this.dirty = false;
|
||||
resolve(this.dropdownList);
|
||||
}).catch(e => {
|
||||
this.setDropdownList([]);
|
||||
this.loading = false;
|
||||
reject(this.dropdownList);
|
||||
});
|
||||
} else {
|
||||
reject(new Error('获取下拉数据失败'));
|
||||
}
|
||||
} else {
|
||||
resolve(this.dropdownList);
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 下拉框显示或隐藏时调用
|
||||
* @param {Boolean} isShow 正在显示或者隐藏
|
||||
*/
|
||||
onVisibleChange (isShow) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (isShow && this.dirty && !this.loading) {
|
||||
this.reloadDropdownData().then(res => {
|
||||
resolve(res);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
} else {
|
||||
resolve(this.dropdownList);
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 设置下拉数据
|
||||
* @param {Array} dataList 要显示的下拉数据
|
||||
*/
|
||||
setDropdownList (dataList) {
|
||||
if (Array.isArray(dataList)) {
|
||||
this.dropdownList = this.isTree ? treeDataTranslate(dataList, this.idKey, this.parentIdKey) : dataList;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class TableWidget {
|
||||
/**
|
||||
* 表格组件
|
||||
* @param {function (params: Object) : Promise} loadTableData 表数据获取函数
|
||||
* @param {function () : Boolean} verifyTableParameter 表数据获取检验函数
|
||||
* @param {Boolean} paged 是否支持分页
|
||||
* @param {String} orderFieldName 默认排序字段
|
||||
* @param {Boolean} ascending 默认排序方式（true为正序，false为倒序）
|
||||
* @param {String} dateAggregateBy 默认排序字段的日期统计类型
|
||||
*/
|
||||
constructor (loadTableData, verifyTableParameter, paged, orderFieldName, ascending, dateAggregateBy) {
|
||||
this.oldPage = 0;
|
||||
this.currentPage = 1;
|
||||
this.oldPageSize = DEFAULT_PAGE_SIZE;
|
||||
this.pageSize = DEFAULT_PAGE_SIZE;
|
||||
this.totalCount = 0;
|
||||
this.dataList = [];
|
||||
this.orderInfo = {
|
||||
fieldName: orderFieldName,
|
||||
asc: ascending,
|
||||
dateAggregateBy: dateAggregateBy
|
||||
};
|
||||
this.paged = paged;
|
||||
this.searchVerify = verifyTableParameter || function () { return true; };
|
||||
this.loadTableData = loadTableData || function () { return Promise.resolve(); };
|
||||
this.onCurrentPageChange = this.onCurrentPageChange.bind(this);
|
||||
this.onPageSizeChange = this.onPageSizeChange.bind(this);
|
||||
this.onSortChange = this.onSortChange.bind(this);
|
||||
this.getTableIndex = this.getTableIndex.bind(this);
|
||||
}
|
||||
/**
|
||||
* 表格分页变化
|
||||
* @param {Integer} newCurrentPage 变化后的显示页面
|
||||
*/
|
||||
onCurrentPageChange (newCurrentPage) {
|
||||
this.loadTableDataImpl(newCurrentPage, this.pageSize).then(() => {
|
||||
this.oldPage = this.currentPage = newCurrentPage;
|
||||
}).catch(() => {
|
||||
this.currentPage = this.oldPage;
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 表格分页每页显示数量变化
|
||||
* @param {Integer} newPageSize 变化后的每页显示数量
|
||||
*/
|
||||
onPageSizeChange (newPageSize) {
|
||||
this.loadTableDataImpl(1, newPageSize).then(() => {
|
||||
this.oldPage = this.currentPage = 1;
|
||||
this.oldPageSize = this.pageSize = newPageSize;
|
||||
}).catch(e => {
|
||||
this.currentPage = this.oldPage;
|
||||
this.pageSize = this.oldPageSize;
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 表格排序字段变化
|
||||
* @param {String} prop 排序字段的字段名
|
||||
* @param {String} order 正序还是倒序
|
||||
*/
|
||||
onSortChange ({ prop, order }) {
|
||||
this.orderInfo.fieldName = prop;
|
||||
this.orderInfo.asc = (order === 'ascending');
|
||||
this.refreshTable();
|
||||
}
|
||||
/**
|
||||
* 获取每一行的index信息
|
||||
* @param {Integer} index 表格在本页位置
|
||||
*/
|
||||
getTableIndex (index) {
|
||||
return this.paged ? ((this.currentPage - 1) * this.pageSize + (index + 1)) : (index + 1);
|
||||
}
|
||||
/**
|
||||
* 获取表格数据
|
||||
* @param {Integer} pageNum 当前分页
|
||||
* @param {Integer} pageSize 每页数量
|
||||
* @param {Boolean} reload 是否重新获取数据
|
||||
*/
|
||||
loadTableDataImpl (pageNum, pageSize, reload = false) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (typeof this.loadTableData !== 'function') {
|
||||
reject();
|
||||
} else {
|
||||
// 如果pageSize和pageNum没有变化，并且不强制刷新
|
||||
if (this.paged && !reload && this.oldPage === pageNum && this.oldPageSize === pageSize) {
|
||||
resolve();
|
||||
} else {
|
||||
let params = {};
|
||||
if (this.orderInfo.fieldName != null) params.orderParam = [this.orderInfo];
|
||||
if (this.paged) {
|
||||
params.pageParam = {
|
||||
pageNum,
|
||||
pageSize
|
||||
}
|
||||
}
|
||||
this.loadTableData(params).then(tableData => {
|
||||
this.dataList = tableData.dataList;
|
||||
this.totalCount = tableData.totalCount;
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 刷新表格数据
|
||||
* @param {Boolean} research 是否按照新的查询条件重新查询（调用verify函数）
|
||||
* @param {Integer} pageNum 当前页面
|
||||
*/
|
||||
refreshTable (research = false, pageNum = undefined, showMsg = false) {
|
||||
let reload = false;
|
||||
if (research) {
|
||||
if (typeof this.searchVerify === 'function' && !this.searchVerify()) return;
|
||||
reload = true;
|
||||
}
|
||||
|
||||
if (Number.isInteger(pageNum) && pageNum !== this.currentPage) {
|
||||
this.loadTableDataImpl(pageNum, this.pageSize, reload).then(res => {
|
||||
this.oldPage = this.currentPage = pageNum;
|
||||
if (research && showMsg) Message.success('查询成功');
|
||||
}).catch(e => {
|
||||
this.currentPage = this.oldPage;
|
||||
});
|
||||
} else {
|
||||
this.loadTableDataImpl(this.currentPage, this.pageSize, true).catch(e => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class UploadWidget {
|
||||
/**
|
||||
* 上传组件
|
||||
* @param {Integer} maxCount 最大上传数量
|
||||
*/
|
||||
constructor (maxCount = 1) {
|
||||
this.maxCount = maxCount;
|
||||
this.fileList = [];
|
||||
this.onFileChange = this.onFileChange.bind(this);
|
||||
}
|
||||
/**
|
||||
* 上传文件列表改变
|
||||
* @param {Object} file 改变的文件
|
||||
* @param {Array} fileList 改变后的文件列表
|
||||
*/
|
||||
onFileChange (file, fileList) {
|
||||
if (Array.isArray(fileList) && fileList.length > 0) {
|
||||
if (this.maxCount === 1) {
|
||||
this.fileList = [fileList[fileList.length - 1]];
|
||||
} else {
|
||||
this.fileList = fileList;
|
||||
}
|
||||
} else {
|
||||
this.fileList = [];
|
||||
}
|
||||
return this.fileList;
|
||||
}
|
||||
}
|
||||
|
||||
export class ChartWidget {
|
||||
/**
|
||||
* 图表组件
|
||||
* @param {function (params) : Promise} loadTableData chart数据获取函数
|
||||
* @param {function () : Boolean} verifyTableParameter 数据参数检验函数
|
||||
* @param {Array} columns 数据列
|
||||
*/
|
||||
constructor (loadTableData, verifyTableParameter, columns) {
|
||||
this.columns = columns;
|
||||
this.loading = false;
|
||||
this.dataEmpty = false;
|
||||
this.chartData = undefined;
|
||||
this.chartObject = undefined;
|
||||
this.dimensionMaps = new Map();
|
||||
this.chartSetting = undefined;
|
||||
this.searchVerify = verifyTableParameter || function () { return true; };
|
||||
this.loadTableData = loadTableData || function () { return Promise.resolve(); };
|
||||
}
|
||||
/**
|
||||
* 获取图表数据
|
||||
* @param {Boolean} reload 是否重新获取数据
|
||||
*/
|
||||
loadChartDataImpl (reload = false) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (typeof this.loadTableData !== 'function') {
|
||||
reject();
|
||||
} else {
|
||||
if (!reload) {
|
||||
resolve();
|
||||
} else {
|
||||
this.loading = true;
|
||||
this.loadTableData().then(tableData => {
|
||||
this.chartData = {
|
||||
columns: this.columns,
|
||||
rows: tableData.dataList
|
||||
}
|
||||
this.loading = false;
|
||||
if (this.chartObject) this.chartObject.resize();
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
this.loading = false;
|
||||
reject(e);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 刷新图表数据
|
||||
* @param {Boolean} research 是否按照新的查询条件重新查询（调用verify函数）
|
||||
*/
|
||||
refreshChart (research = false) {
|
||||
if (research) {
|
||||
if (typeof this.searchVerify === 'function' && !this.searchVerify()) return;
|
||||
}
|
||||
|
||||
this.loadChartDataImpl(true).catch(e => {});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user