117 lines
2.7 KiB
TypeScript
117 lines
2.7 KiB
TypeScript
import { tableData } from "../data";
|
|
import { clone, delay } from "@pureadmin/utils";
|
|
import { ref, onMounted, reactive, watchEffect } from "vue";
|
|
import type { PaginationProps, LoadingConfig, Align } from "@pureadmin/table";
|
|
|
|
export function useColumns() {
|
|
const dataList = ref([]);
|
|
const loading = ref(true);
|
|
const select = ref("no");
|
|
const hideVal = ref("nohide");
|
|
const tableSize = ref("default");
|
|
const paginationSmall = ref(false);
|
|
const paginationAlign = ref("right");
|
|
const columns: TableColumnList = [
|
|
{
|
|
type: "selection",
|
|
align: "left",
|
|
reserveSelection: true,
|
|
hide: () => (select.value === "no" ? true : false)
|
|
},
|
|
{
|
|
label: "日期",
|
|
prop: "date",
|
|
hide: () => (hideVal.value === "hideDate" ? true : false)
|
|
},
|
|
{
|
|
label: "姓名",
|
|
prop: "name",
|
|
hide: () => (hideVal.value === "hideName" ? true : false)
|
|
},
|
|
{
|
|
label: "地址",
|
|
prop: "address",
|
|
hide: () => (hideVal.value === "hideAddress" ? true : false)
|
|
}
|
|
];
|
|
|
|
/** 分页配置 */
|
|
const pagination = reactive<PaginationProps>({
|
|
pageSize: 10,
|
|
currentPage: 1,
|
|
pageSizes: [10, 15, 20],
|
|
total: 0,
|
|
align: "right",
|
|
background: true,
|
|
small: false
|
|
});
|
|
|
|
/** 加载动画配置 */
|
|
const loadingConfig = reactive<LoadingConfig>({
|
|
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 onChange(val) {
|
|
pagination.small = val;
|
|
}
|
|
|
|
function onSizeChange(val) {
|
|
console.log("onSizeChange", val);
|
|
}
|
|
|
|
function onCurrentChange(val) {
|
|
loadingConfig.text = `正在加载第${val}页...`;
|
|
loading.value = true;
|
|
delay(600).then(() => {
|
|
loading.value = false;
|
|
});
|
|
}
|
|
|
|
watchEffect(() => {
|
|
pagination.align = paginationAlign.value as Align;
|
|
});
|
|
|
|
onMounted(() => {
|
|
delay(600).then(() => {
|
|
const newList = [];
|
|
Array.from({ length: 6 }).forEach(() => {
|
|
newList.push(clone(tableData, true));
|
|
});
|
|
newList.flat(Infinity).forEach((item, index) => {
|
|
dataList.value.push({ id: index, ...item });
|
|
});
|
|
pagination.total = dataList.value.length;
|
|
loading.value = false;
|
|
});
|
|
});
|
|
|
|
return {
|
|
loading,
|
|
columns,
|
|
dataList,
|
|
select,
|
|
hideVal,
|
|
tableSize,
|
|
pagination,
|
|
loadingConfig,
|
|
paginationAlign,
|
|
paginationSmall,
|
|
onChange,
|
|
onSizeChange,
|
|
onCurrentChange
|
|
};
|
|
}
|