<template>
|
<div class="app-container">
|
<el-form :inline="true" :model="filters">
|
<el-form-item label="查看模式">
|
<el-radio-group v-model="mode" @change="buildColumns">
|
<el-radio-button :value="'month'">按月</el-radio-button>
|
<el-radio-button :value="'year'">按年</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-if="mode === 'month' || mode === 'year'" label="年份">
|
<el-date-picker v-model="year" type="year" value-format="YYYY" format="YYYY" placeholder="请选择年份" @change="refresh" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="refresh">查询</el-button>
|
<el-button @click="reset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<div class="table_list">
|
<PIMTable
|
rowKey="deviceId"
|
:column="columns"
|
:tableData="tableData"
|
:page="{ current: 1, size: tableData.length || 10, total: tableData.length }"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed } from "vue";
|
|
defineOptions({ name: "金额汇总" });
|
|
const mode = ref("month");
|
const year = ref(new Date().getFullYear().toString());
|
const filters = ref({});
|
|
const columns = ref([]);
|
const tableData = ref([]);
|
|
const buildColumns = () => {
|
const base = [{ label: "设备名称", align: "center", prop: "deviceName", width: 180 }];
|
if (mode.value === "month") {
|
const monthCols = Array.from({ length: 12 }, (_, i) => ({
|
label: `${i + 1}月`,
|
align: "center",
|
prop: `m${i + 1}`,
|
}));
|
columns.value = [
|
...base,
|
...monthCols,
|
{ label: "总计", align: "center", prop: "total" },
|
];
|
} else {
|
columns.value = [
|
...base,
|
{ label: "金额", align: "center", prop: "yearAmount" },
|
];
|
}
|
};
|
|
const refresh = async () => {
|
buildColumns();
|
tableData.value = [];
|
};
|
|
const reset = () => {
|
mode.value = "month";
|
year.value = new Date().getFullYear().toString();
|
refresh();
|
};
|
|
buildColumns();
|
refresh();
|
</script>
|
|
<style scoped>
|
.table_list {
|
margin-top: 10px;
|
}
|
</style>
|
