import {reactive, toRefs} from "vue";
|
|
const sortMap = {
|
'descending': 'desc',
|
'ascending': 'asc',
|
}
|
|
/**
|
* @description table 页面操作方法封装
|
* @param {Function} api 获取表格数据 api 方法 (必传)
|
* @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
|
* */
|
const useTable = (api) => {
|
const state = reactive({
|
loading: false,
|
// 表格数据
|
tableData: [], // 分页数据
|
pageAble: {
|
/**
|
* 当前页数
|
*/
|
pageNo: 1, /**
|
* 每页显示条数
|
*/
|
pageSize: 10, /**
|
* 一共几页
|
*/
|
pageCount: 2, /**
|
* 总数
|
*/
|
recordCount: 0
|
},
|
/**
|
* 多维排序使用
|
*/
|
sortParam: {},
|
});
|
|
/**
|
* @description 获取表格数据
|
* @return void
|
* */
|
const getTableData = async (isReload = true) => {
|
state.loading = true;
|
if (isReload) {
|
state.pageAble.pageNo = 1;
|
}
|
if (!api) return;
|
|
let orderBy = '';
|
if (Object.keys(state.sortParam)) {
|
Object.keys(state.sortParam).forEach(e => {
|
orderBy += ``
|
})
|
}
|
const {data, page} = await api({
|
orderBy:
|
Object.keys(state.sortParam)
|
.filter(key => state.sortParam[key])
|
.reduce((prev, cur, index) => `${prev} ${index === 0 ? '' : ','} ${cur} ${sortMap[state.sortParam[cur]]}`, ''),
|
page: {...state.pageAble}
|
});
|
state.tableData = data instanceof Array ? data : data['entityset'];
|
/**
|
* 解构后台返回的分页数据 (如果有分页更新分页信息)
|
*/
|
updatePageAble(page || data.page);
|
state.loading = false;
|
};
|
|
/**
|
* @description 更新查询参数
|
* @return void
|
* */
|
const updatedTotalParam = () => {
|
state.totalParam = {};
|
// 处理查询参数，可以给查询参数加自定义前缀操作
|
let nowSearchParam = {};
|
// 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
|
for (let key in state.searchParam) {
|
// 某些情况下参数为 false/0 也应该携带参数
|
if (state.searchParam[key] || state.searchParam[key] === false || state.searchParam[key] === 0) {
|
nowSearchParam[key] = state.searchParam[key];
|
}
|
}
|
Object.assign(state.totalParam, nowSearchParam, pageParam.value);
|
};
|
|
/**
|
* @description 更新分页信息
|
* @param {Object} pageable 后台返回的分页数据
|
* @return void
|
* */
|
const updatePageAble = (params) => {
|
Object.assign(state.pageAble, {
|
pageNo: params['pageNo'] || params['pageno'],
|
pageCount: params['pageCount'] || params['pagecount'],
|
pageSize: params['pageSize'] || params['pagesize'],
|
recordCount: params['recordCount'] || params['recordcount'],
|
});
|
};
|
|
/**
|
* @description 每页条数改变
|
* @param {Number} val 当前条数
|
* @return void
|
* */
|
const handleSizeChange = (val) => {
|
state.pageAble.pageSize = val;
|
getTableData();
|
};
|
|
/**
|
* @description 当前页改变
|
* @param {Number} val 当前页
|
* @return void
|
* */
|
const handleCurrentChange = (val) => {
|
state.pageAble.pageNo = val;
|
getTableData(false);
|
};
|
|
/**
|
* @description sort改变
|
* @param {Number} val 当前页
|
* @return void
|
* */
|
const sortChange = (params) => {
|
const hasProp = state.sortParam[params.prop];
|
if (hasProp && params.order == null) {
|
delete state.sortParam[params.prop];
|
} else {
|
state.sortParam[params.prop] = params.order;
|
}
|
state.pageAble.pageNum = 1;
|
getTableData();
|
}
|
|
|
const setHeaderClass = (params) => {
|
if (state.sortParam[params.column.property]) {
|
params.column.order = state.sortParam[params.column.property]
|
}
|
}
|
|
return [
|
{...toRefs(state)}
|
,
|
{
|
getTableData,
|
sortChange,
|
setHeaderClass,
|
handleSizeChange,
|
handleCurrentChange,
|
updatedTotalParam
|
}
|
];
|
};
|
|
|
const useSelection = (rowKey = "id", tableRef, tableData) => {
|
const selectedList = ref([]);
|
|
const selectedListIds = computed(() => {
|
let ids = [];
|
selectedList.value.forEach(item => ids.push(item[rowKey]));
|
return ids;
|
});
|
|
/**
|
* @description 多选操作
|
* @param {Array} rowArr 当前选择的所有数据
|
* @return void
|
*/
|
const selectionChange = (rowArr) => {
|
const list = [...selectedList.value];
|
list.forEach((row, i) => {
|
tableData.value.forEach(item => {
|
if (row && row[rowKey] === item[rowKey]) {
|
list[i] = null;
|
}
|
});
|
});
|
selectedList.value = [...list.filter(Boolean), ...rowArr];
|
};
|
|
watch(tableData, async () => {
|
await nextTick();
|
toggleSelection();
|
});
|
|
const toggleSelection = () => {
|
tableData.value.forEach(item => {
|
let isSelected = false;
|
selectedList.value.forEach((row) => {
|
if (row[rowKey] === item[rowKey]) {
|
tableRef.value?.toggleRowSelection(item, true);
|
isSelected = true;
|
}
|
});
|
if (!isSelected) {
|
tableRef.value?.toggleRowSelection(item, false);
|
}
|
});
|
}
|
|
return [
|
selectionChange,
|
selectedList,
|
selectedListIds,
|
toggleSelection
|
];
|
};
|
|
const useExpand = () => {
|
const expandRowKeys = ref([]);
|
|
const clearExpand = () => {
|
expandRowKeys.value = [];
|
}
|
|
return [expandRowKeys, clearExpand];
|
}
|
|
export default {useSelection, useTable, useExpand};
|
