|
@@ -1,6 +1,6 @@
|
|
|
import { css } from "@linaria/core";
|
|
|
import { List } from "@queenjs/ui";
|
|
|
-import { Empty, Pagination } from "ant-design-vue";
|
|
|
+import { Empty, Pagination, Spin } from "ant-design-vue";
|
|
|
import { defineUI } from "queenjs";
|
|
|
import { any, number, string } from "vue-types";
|
|
|
|
|
@@ -14,24 +14,35 @@ export default defineUI({
|
|
|
setup(props) {
|
|
|
return () => {
|
|
|
const { control, columns, gap } = props;
|
|
|
+ const loading = control.state.loading;
|
|
|
|
|
|
return (
|
|
|
<div class={styles}>
|
|
|
- <List data={control.state.list} columns={columns} gap={gap}>
|
|
|
- {{
|
|
|
- item: (record: any) => props.item?.(record),
|
|
|
- empty: () => <Empty class="py-50px" description="暂无数据" />,
|
|
|
- }}
|
|
|
- </List>
|
|
|
- <div class="text-center my-30px">
|
|
|
- <Pagination
|
|
|
- size="default"
|
|
|
- hideOnSinglePage
|
|
|
- pageSize={control.state.size}
|
|
|
- total={control.state.total}
|
|
|
- onChange={(p) => control.loadPage(p)}
|
|
|
- />
|
|
|
- </div>
|
|
|
+ {loading && (
|
|
|
+ <div class="h-200px flex items-center justify-center">
|
|
|
+ <Spin spinning tip="加载中"></Spin>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {!loading && (
|
|
|
+ <>
|
|
|
+ <List gap={gap} columns={columns} data={control.state.list}>
|
|
|
+ {{
|
|
|
+ item: (record: any) => props.item?.(record),
|
|
|
+ empty: () => <Empty class="py-50px" description="暂无数据" />,
|
|
|
+ }}
|
|
|
+ </List>
|
|
|
+ <div class="text-center my-50px">
|
|
|
+ <Pagination
|
|
|
+ size="default"
|
|
|
+ hideOnSinglePage
|
|
|
+ pageSize={control.state.size}
|
|
|
+ total={control.state.total}
|
|
|
+ current={control.state.page}
|
|
|
+ onChange={(p) => control.loadPage(p)}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
</div>
|
|
|
);
|
|
|
};
|