|
@@ -0,0 +1,105 @@
|
|
|
+import type {
|
|
|
+ LoadingConfig,
|
|
|
+ AdaptiveConfig,
|
|
|
+ PaginationProps
|
|
|
+} from "@pureadmin/table";
|
|
|
+import { tableData } from "../data";
|
|
|
+import { ref, onMounted, reactive } from "vue";
|
|
|
+import { clone, delay } from "@pureadmin/utils";
|
|
|
+
|
|
|
+export function useColumns() {
|
|
|
+ const dataList = ref([]);
|
|
|
+ const loading = ref(true);
|
|
|
+ const columns: TableColumnList = [
|
|
|
+ {
|
|
|
+ label: "日期",
|
|
|
+ prop: "date"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "姓名",
|
|
|
+ prop: "name"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "地址",
|
|
|
+ prop: "address"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ /** 分页配置 */
|
|
|
+ const pagination = reactive<PaginationProps>({
|
|
|
+ pageSize: 20,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSizes: [20, 40, 60],
|
|
|
+ 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()
|
|
|
+ });
|
|
|
+
|
|
|
+ /** 撑满内容区自适应高度相关配置 */
|
|
|
+ const adaptiveConfig: AdaptiveConfig = {
|
|
|
+ /** 表格距离页面底部的偏移量,默认值为 `96` */
|
|
|
+ offsetBottom: 110
|
|
|
+ /** 是否固定表头,默认值为 `true`(如果不想固定表头,fixHeader设置为false并且表格要设置table-layout="auto") */
|
|
|
+ // fixHeader: true
|
|
|
+ /** 页面 `resize` 时的防抖时间,默认值为 `60` ms */
|
|
|
+ // timeout: 60
|
|
|
+ /** 表头的 `z-index`,默认值为 `100` */
|
|
|
+ // zIndex: 100
|
|
|
+ };
|
|
|
+
|
|
|
+ function onSizeChange(val) {
|
|
|
+ console.log("onSizeChange", val);
|
|
|
+ }
|
|
|
+
|
|
|
+ function onCurrentChange(val) {
|
|
|
+ loadingConfig.text = `正在加载第${val}页...`;
|
|
|
+ loading.value = true;
|
|
|
+ delay(600).then(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ 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,
|
|
|
+ pagination,
|
|
|
+ loadingConfig,
|
|
|
+ adaptiveConfig,
|
|
|
+ onSizeChange,
|
|
|
+ onCurrentChange
|
|
|
+ };
|
|
|
+}
|