acro design框架 pc端界面封装

<template>
    <div class="tableview">
        <a-card class="general-card">
            <div ref="topheader">
                <a-form :model="props.searchData" ref="queryFormRef" style="margin-bottom: 10px" :label-col-props="{ span: 8 }" :wrapper-col-props="{ span: 16 }">
                    <a-grid :cols="4" :collapsed="collapsed && props.isFold">
                        <slot name="search"></slot>
                        <a-grid-item class="rightGrid" suffix>
                            <a-space fill style="justify-content: end">
                                <a-button type="primary" @click="onQuery">
                                    <template #icon>
                                        <icon-search />
                                    </template>
                                    查询
                                </a-button>
                                <a-button @click="onReset">
                                    <template #icon>
                                        <icon-refresh />
                                    </template>
                                    重置
                                </a-button>
                                <a-link v-if="props.isFold" @click="onCollapseds">
                                    {{ collapsed ? "展开" : "收起" }}
                                    <icon-down v-if="collapsed" /><icon-up v-if="!collapsed" />
                                </a-link>
                            </a-space>
                        </a-grid-item>
                    </a-grid>
                </a-form>
                <a-divider style="margin-top: 0" />
                <a-row>
                    <a-col :span="14">
                        <slot name="tool"></slot>
                    </a-col>
                    <a-col :span="10" style="text-align: right">
                        <slot name="toolRight"></slot>
                    </a-col>
                </a-row>
            </div>

            <a-table
                row-key="id"
                :loading="loading"
                :pagination="pagination"
                :columns="tableHeader"
                :data="tableData"
                :bordered="{ wrapper: props.wrapper, cell: props.cell }"
                :scroll="sollers"
                :stripe="props.stripe"
                :row-selection="rowSelection"
                @page-change="handleCurrentChange"
                @page-size-change="pageSizeChange"
                :sticky-header="true">
                <template #operate="{ record }">
                    <slot name="tableColumn" :record="record"></slot>
                </template>
            </a-table>
        </a-card>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted, watch, defineExpose, nextTick } from "vue";
import { getTableList } from "";
import { useWindowSize } from "@vueuse/core";

const props = defineProps({
    queryForm: {},
    dataUrl: "",
    searchData: {},
    tableHeader: {
        type: Array,
        default: [],
    },
    tableRightWidth: {
        default: 250,
    },
    //是否首次加载
    isLoad: {
        default: true,
    },
    scroll: {
        default: {
            x: "150%",
        },
    },
    isFold: {
        //是否显示折叠
        default: true,
    },
    stripe: {
        default: false,
    },
    wrapper: {
        default: true,
    },
    cell: {
        default: true,
    },
    rowSelection: {
        default: false,
    },
});
const queryFormRef = ref();
const loading = ref(false);
const collapsed = ref(true);
const topheader = ref();
const windowSize = useWindowSize();

const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 0,
    showTotal: true,
    showPageSize: true,
    showJumper: true,
});
const tableData = ref([]);
const getTabledata = () => {
    loading.value = true;
    let data = {
        pageNum: pagination.value.current,
        pageSize: pagination.value.pageSize,
        ...props.searchData,
    };
    getTableList(props.dataUrl, data, props.headers).then((res) => {
        loading.value = false;
        if (res.state == 200) {
            tableData.value = res.data.dataList;
            pagination.value.total = parseInt(res.data.total);
        }
    });
};

const sollers = ref({});
onMounted(() => {
    if (props.isLoad) {
        getTabledata();
    }
    heightChange();
});
const onCollapseds = () => {
    collapsed.value = !collapsed.value;
    heightChange();
};
/**
 * 动态计算表格内容高度
 */
const heightChange = () => {
    nextTick(() => {
         
        console.log(windowSize.height.value, topheader.value.clientHeight, y);
        sollers.value = {
            x: props.scroll.x,
            y: y,
        };
    });
};
const onQuery = () => {
    queryFormRef.value.validate((error) => {
        if (!error) {
            pagination.value.current = 1;
            emits("onQuery", "");
        }
    });
};
const onReset = () => {
    queryFormRef.value.resetFields();
    pagination.value.current = 1;
    emits("onReset", "");
};
//重置表单
const resetForm = () => {
    queryFormRef.value.resetFields();
    pagination.value.current = 1;
};

const handleCurrentChange = (val) => {
    pagination.value.current = val;
    getTabledata();
};
const pageSizeChange = (val) => {
    pagination.value.pageSize = val;
    getTabledata();
};
const emits = defineEmits(["changePage", "onQuery", "onReset"]);

defineExpose({ getTabledata, resetForm, tableData, pagination });
</script>

<style lang="scss" scoped>
.tableview {
    // margin-top: 20px;
    .rightGrid {
        padding-left: 20px;
    }
}
</style>