|
@@ -0,0 +1,91 @@
|
|
|
+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 paginationAlign = ref("right");
|
|
|
+ const columns: TableColumnList = [
|
|
|
+ {
|
|
|
+ label: "日期",
|
|
|
+ prop: "date"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "姓名",
|
|
|
+ prop: "name"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "地址",
|
|
|
+ prop: "address"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ /** 分页配置 */
|
|
|
+ const pagination = reactive<PaginationProps>({
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSizes: [10, 15, 20],
|
|
|
+ total: 0,
|
|
|
+ align: "right",
|
|
|
+ background: true
|
|
|
+ });
|
|
|
+
|
|
|
+ /** 加载动画配置 */
|
|
|
+ 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 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));
|
|
|
+ });
|
|
|
+ dataList.value = newList.flat(Infinity);
|
|
|
+ pagination.total = dataList.value.length;
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ loading,
|
|
|
+ columns,
|
|
|
+ dataList,
|
|
|
+ pagination,
|
|
|
+ loadingConfig,
|
|
|
+ paginationAlign,
|
|
|
+ onSizeChange,
|
|
|
+ onCurrentChange
|
|
|
+ };
|
|
|
+}
|