Files
admin-vben5/apps/web-antd/src/views/property/energyManagement/electricEnergy/elctricityCost/index.vue

78 lines
1.5 KiB
Vue

<script setup lang="ts">
import { Page, type VbenFormProps } from '@vben/common-ui'
import {
useVbenVxeGrid,
type VxeGridProps
} from '#/adapter/vxe-table'
import {
paymentReviewList,
} from '#/api/property/costManagement/paymentReview'
import { columns, querySchema } from './data'
import FloorTree from "../components/floor-tree.vue"
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 30,
componentProps: {
allowClear: true,
},
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
}
const gridOptions: VxeGridProps = {
checkboxConfig: {
highlight: true,
reserve: true,
},
columns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
return await paymentReviewList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
})
},
},
},
rowConfig: {
keyField: 'id',
},
id: 'property-paymentReview-index'
}
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
</script>
<template>
<Page :auto-content-height="true">
<div class="flex h-full gap-[8px]">
<FloorTree></FloorTree>
<BasicTable class="flex-1 overflow-hidden" table-title="用电费用报表" />
</div>
</Page>
</template>
<style scoped lang="scss">
.box {
display: grid;
grid-template-columns: 1fr 3fr;
.right {
width: 100%;
overflow: hidden;
}
}
</style>