143 lines
4.0 KiB
Vue
143 lines
4.0 KiB
Vue
<script lang="ts" setup>
|
||
import { OperatorEnum } from "@/types";
|
||
import { PageData, PageParams } from "@/types/Basics";
|
||
import Utils from "@/utils";
|
||
import { Message } from "view-ui-plus";
|
||
|
||
/* 表格插件参数类型 */
|
||
interface TablePageProps {
|
||
dataApi: (params: PageParams) => Promise<PageData>;
|
||
columns: object[];
|
||
tableHeight: number | undefined;
|
||
pageParams: PageParams | undefined;
|
||
dataFilter?: ((resp: object) => object[]) | undefined;
|
||
autoLoad?: boolean | undefined;
|
||
}
|
||
import { ref, onBeforeMount, onMounted } from "vue";
|
||
const props = withDefaults(defineProps<TablePageProps>(), {
|
||
autoLoad: true,
|
||
});
|
||
const list = ref<any[]>([]),
|
||
selectList = ref<number[]>([]),
|
||
total = ref(0),
|
||
tableH = ref(0),
|
||
tableLoading = ref(true);
|
||
const params = ref<PageParams>({ page: 1, count: 10 });
|
||
onBeforeMount(async () => {
|
||
if (props.tableHeight) tableH.value = props.tableHeight;
|
||
else tableH.value = Utils.useTableHeight();
|
||
if (!!props.pageParams) params.value = props.pageParams;
|
||
// 页长记忆（bsch 规范 §3：customPageCount localStorage）
|
||
params.value.count = parseInt(localStorage.getItem("customPageCount") || String(params.value.count));
|
||
if (props.autoLoad) await getData();
|
||
});
|
||
|
||
onMounted(() => {
|
||
// window.onresize = _.debounce(() => {
|
||
// tableH.value = Utils.useTableHeight();
|
||
// }, 1000);
|
||
});
|
||
|
||
const getData = async () => {
|
||
tableLoading.value = true;
|
||
try {
|
||
const tempParams: any = _.cloneDeep(params.value);
|
||
tempParams.size = tempParams.count;
|
||
delete tempParams.count;
|
||
|
||
tempParams.page -= 1;
|
||
|
||
var data = await props.dataApi(tempParams);
|
||
total.value = data.count;
|
||
|
||
if (typeof props.dataFilter != "undefined") list.value = props.dataFilter(data);
|
||
else list.value = data.list;
|
||
} catch (error) {
|
||
console.log(error);
|
||
Message.error(error);
|
||
} finally {
|
||
tableLoading.value = false;
|
||
}
|
||
};
|
||
|
||
function selectChange(selection: any) {
|
||
selectList.value = selection;
|
||
}
|
||
async function pageUpdate(page: number) {
|
||
params.value.page = page;
|
||
await getData();
|
||
}
|
||
async function pageSizeUpdate(size: number) {
|
||
params.value.page = 1;
|
||
params.value.count = size;
|
||
localStorage.setItem("customPageCount", String(size));
|
||
await getData();
|
||
}
|
||
|
||
/** 刷新数据-更新删除用 */
|
||
// "add" | "del" | "edit" | "sel"
|
||
async function refreshData() {
|
||
params.value.page = 1;
|
||
await getData();
|
||
}
|
||
|
||
/** 重置数据 */
|
||
// "add" | "del" | "edit" | "sel"
|
||
async function reloadData(type: OperatorEnum = OperatorEnum.sel) {
|
||
let { page, count } = params.value;
|
||
if (type == OperatorEnum.add) {
|
||
console.log(page, count, total.value);
|
||
|
||
if (page * count == total.value) page += 1;
|
||
} else if (type == OperatorEnum.del) {
|
||
if ((page - 1) * count + 1 == total.value) page -= 1;
|
||
if (page < 1) page = 1;
|
||
} else if (type == OperatorEnum.edit) {
|
||
//page=page
|
||
} else if (type == OperatorEnum.sel) page = 1;
|
||
params.value.page = page;
|
||
await getData();
|
||
}
|
||
|
||
defineExpose({
|
||
list,
|
||
refreshData,
|
||
reloadData,
|
||
});
|
||
</script>
|
||
<template>
|
||
<Table
|
||
:columns="columns"
|
||
:data="list"
|
||
@on-selection-change="selectChange"
|
||
class="link-table table-bottom-box"
|
||
:height="tableH"
|
||
:loading="tableLoading"
|
||
no-data-text="暂无数据"
|
||
>
|
||
<template #loading>
|
||
<div class="table-spin-load">加载中</div>
|
||
</template>
|
||
</Table>
|
||
<div class="page-panel">
|
||
<div class="fl ml-15 align-middle">
|
||
<slot :checkList="selectList"></slot>
|
||
</div>
|
||
|
||
<Page
|
||
class="page-box fr"
|
||
:total="total"
|
||
:model-value="params.page"
|
||
:page-size="params.count"
|
||
:page-size-opts="[10, 20, 30, 40]"
|
||
@on-page-size-change="pageSizeUpdate"
|
||
@on-change="pageUpdate"
|
||
placement="top"
|
||
show-total
|
||
show-sizer
|
||
></Page>
|
||
</div>
|
||
</template>
|
||
|
||
<style></style>
|