by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(property): 重构能源管理相关页面布局

Browse Source
This commit is contained in:
zcxlsm
2025-08-25 15:46:05 +08:00
parent a43cb1b390
commit 84ff3d21b4
31 changed files with 904 additions and 1027 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
apps/web-antd/src/views/property/energyManagement/electricEnergy/elctricityCost/data.ts Normal file
View File

@@ -0,0 +1,305 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import {getDictOptions} from "#/utils/dict";
import dayjs from 'dayjs';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Select',
componentProps: {
options: getDictOptions('pro_qoq_type'),
},
fieldName: 'date',
label: '日期',
defaultValue: '0',
},
{
component: 'DatePicker',
componentProps: (formData) => {
const type: 0 | 1 | 2 | 3 = formData.date ?? 0;
const today = dayjs();
const propsMap = {
0: {
picker: 'date',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
showTime: false,
defaultValue: today.format('YYYY-MM-DD'),
},
1: {
picker: 'week',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
showTime: false,
defaultValue: today.startOf('week').format('YYYY-MM-DD'),
},
2: {
picker: 'month',
format: 'YYYY-MM',
valueFormat: 'YYYY-MM',
showTime: false,
defaultValue: today.format('YYYY-MM'),
},
3: {
picker: 'year',
format: 'YYYY',
valueFormat: 'YYYY',
showTime: false,
defaultValue: today.format('YYYY'),
},
};
return propsMap[type];
},
fieldName: 'chioceDate',
dependencies: {
triggerFields: ['date'],
},
},
];
export const columns: VxeGridProps['columns'] = [
{
title: '名称',
fixed: 'left',
width: 'auto',
field: 'roomNumber',
},
{
title: '00',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
]
},
{
title: '01',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '02',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '03',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '04',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '05',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '06',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '07',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '08',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '09',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '10',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '11',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '12',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
{
title: '合计',
width: 'auto',
field: 'roomNumber',
children: [
{
title: '用能(kw.h)',
width: 'auto',
field: 'roomNumber',
},
{
title: '费用(元)',
width: 'auto',
field: 'roomNumber',
}
],
},
];

77
apps/web-antd/src/views/property/energyManagement/electricEnergy/elctricityCost/index.vue Normal file
View File

@@ -0,0 +1,77 @@
<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>