import { ref, reactive, watchEffect, unref } from "vue";
|
import useFormData from "./useFormData.js";
|
// import { message } from "@/utils/message";
|
|
import { clone, isEqual } from "lodash";
|
/**
|
* 分页api
|
* @param api 接口
|
* @param initalFilters 初始化筛选条件
|
* @param sorters
|
* @param filterTransformer
|
*/
|
export function usePaginationApi(
|
api,
|
initalFilters,
|
columns,
|
sorters,
|
filterTransformer,
|
cb
|
) {
|
const dataList = ref([]);
|
const { form: filters, resetForm } = useFormData(initalFilters);
|
let lastFilters = clone(initalFilters);
|
const sorter = reactive(sorters || {});
|
const others = ref({});
|
const loading = ref(true);
|
const paginationAlign = ref("right");
|
|
/** 分页配置 */
|
const pagination = reactive({
|
pageSize: 10,
|
currentPage: 1,
|
pageSizes: [10, 15, 20],
|
total: 0,
|
align: "right",
|
background: true
|
});
|
|
/** 加载动画配置 */
|
const loadingConfig = reactive({
|
text: "正在加载第一页...",
|
viewBox: "-10, -10, 50, 50",
|
spinner: `
|
<path class="path" d="
|
M 30 15
|
L 28 17
|
M 25.61 25.61
|
A 15 15, 0, 0, 1, 15 30
|
A 15 15, 0, 1, 1, 27.99 7.5
|
L 15 15
|
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
`
|
// svg: "",
|
// background: rgba()
|
});
|
|
function getFinalParams() {
|
const finalFilters = {};
|
const beforeParams = unref(filters);
|
if (filterTransformer) {
|
Object.keys(beforeParams).forEach(key => {
|
if (filterTransformer[key]) {
|
Object.assign(
|
finalFilters,
|
filterTransformer[key](beforeParams[key], beforeParams)
|
);
|
} else {
|
finalFilters[key] = beforeParams[key];
|
}
|
});
|
}
|
|
return filterTransformer
|
? { ...finalFilters, ...sorter }
|
: { ...beforeParams, ...sorter };
|
}
|
|
async function getTableData() {
|
// 如果这次和上次的filter不同，那么就重置页码
|
if (!isEqual(unref(filters), lastFilters)) {
|
pagination.currentPage = 1;
|
lastFilters = clone(unref(filters));
|
}
|
loading.value = true;
|
api({
|
...getFinalParams(),
|
current: pagination.currentPage,
|
size: pagination.pageSize
|
}).then(({ code, data, ...rest }) => {
|
if (code == 200) {
|
// pagination.currentPage = meta.current_page;
|
// pagination.pageSize = meta.per_page;
|
pagination.total = data.total;
|
others.value = rest;
|
dataList.value = data.records;
|
cb && cb(data);
|
loading.value = false;
|
} else {
|
loading.value = false;
|
// message(data.msg, { type: "error" });
|
}
|
});
|
}
|
|
function onSizeChange(val) {
|
pagination.pageSize = val;
|
pagination.currentPage = 1;
|
getTableData();
|
}
|
|
function onCurrentChange(val) {
|
loadingConfig.text = `正在加载第${val}页...`;
|
loading.value = true;
|
getTableData();
|
}
|
function resetFilters() {
|
resetForm();
|
pagination.currentPage = 1;
|
getTableData();
|
}
|
|
watchEffect(() => {
|
pagination.align = paginationAlign.value;
|
});
|
|
// onMounted(() => {
|
// getTableData();
|
// });
|
|
return {
|
loading,
|
columns,
|
dataList,
|
pagination,
|
loadingConfig,
|
paginationAlign,
|
filters,
|
sorter,
|
others,
|
onSizeChange,
|
onCurrentChange,
|
getTableData,
|
resetFilters
|
};
|
}
|
