<template>
|
<div class="app-container">
|
<el-tabs v-model="activeTab">
|
<el-tab-pane label="报修" name="repair">
|
<el-form :inline="true" :model="filtersRepair">
|
<el-form-item label="查看模式">
|
<el-radio-group v-model="modeRepair" @change="buildColumnsRepair">
|
<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="modeRepair === 'month' || modeRepair === 'year'" label="年份">
|
<el-date-picker v-model="yearRepair" type="year" value-format="YYYY" format="YYYY" placeholder="请选择年份" @change="refreshRepair" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="refreshRepair">查询</el-button>
|
<el-button @click="resetRepair">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<div class="table_list">
|
<PIMTable
|
rowKey="deviceId"
|
:column="columnsRepair"
|
:tableData="tableDataRepair"
|
:page="{ current: 1, size: tableDataRepair.length || 10, total: tableDataRepair.length }"
|
/>
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane label="保养" name="maintain">
|
<el-form :inline="true" :model="filtersMaintain">
|
<el-form-item label="查看模式">
|
<el-radio-group v-model="modeMaintain" @change="buildColumnsMaintain">
|
<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="modeMaintain === 'month' || modeMaintain === 'year'" label="年份">
|
<el-date-picker v-model="yearMaintain" type="year" value-format="YYYY" format="YYYY" placeholder="请选择年份" @change="refreshMaintain" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="refreshMaintain">查询</el-button>
|
<el-button @click="resetMaintain">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<div class="table_list">
|
<PIMTable
|
rowKey="deviceId"
|
:column="columnsMaintain"
|
:tableData="tableDataMaintain"
|
:page="{ current: 1, size: tableDataMaintain.length || 10, total: tableDataMaintain.length }"
|
/>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from "vue";
|
import { monthlyAmount, yearlyAmount } from "@/api/equipmentManagement/repair";
|
import { monthlyAmount as monthlyAmountMaintain, yearlyAmount as yearlyAmountMaintain } from "@/api/equipmentManagement/upkeep";
|
|
defineOptions({ name: "金额汇总" });
|
|
const activeTab = ref("repair");
|
|
// 报修
|
const modeRepair = ref("month");
|
const yearRepair = ref(new Date().getFullYear().toString());
|
const filtersRepair = ref({});
|
const columnsRepair = ref([]);
|
const tableDataRepair = ref([]);
|
|
const fetchRepairData = async () => {
|
try {
|
const query = { year: yearRepair.value };
|
const res = modeRepair.value === "month" ? await monthlyAmount(query) : await yearlyAmount(query);
|
const list = res?.records || res?.data || res || [];
|
tableDataRepair.value = Array.isArray(list) ? list : [];
|
} catch (e) {
|
tableDataRepair.value = [];
|
}
|
};
|
|
const buildColumnsRepair = async () => {
|
const base = [{ label: "设备名称", align: "center", prop: "deviceName", width: 180 }];
|
if (modeRepair.value === "month") {
|
const monthCols = Array.from({ length: 12 }, (_, i) => ({
|
label: `${i + 1}月`,
|
align: "center",
|
prop: `month${i + 1}`,
|
}));
|
columnsRepair.value = [
|
...base,
|
...monthCols,
|
{ label: "总计", align: "center", prop: "total" },
|
];
|
} else {
|
columnsRepair.value = [
|
...base,
|
{ label: "金额", align: "center", prop: "totalRepairPrice" },
|
];
|
}
|
await fetchRepairData();
|
};
|
|
const refreshRepair = async () => {
|
await buildColumnsRepair();
|
};
|
|
const resetRepair = () => {
|
modeRepair.value = "month";
|
yearRepair.value = new Date().getFullYear().toString();
|
refreshRepair();
|
};
|
|
// 保养
|
const modeMaintain = ref("month");
|
const yearMaintain = ref(new Date().getFullYear().toString());
|
const filtersMaintain = ref({});
|
const columnsMaintain = ref([]);
|
const tableDataMaintain = ref([]);
|
|
const fetchMaintainData = async () => {
|
try {
|
const query = { year: yearMaintain.value };
|
const res = modeMaintain.value === "month" ? await monthlyAmountMaintain(query) : await yearlyAmountMaintain(query);
|
const list = res?.records || res?.data || res || [];
|
tableDataMaintain.value = Array.isArray(list) ? list : [];
|
} catch (e) {
|
tableDataMaintain.value = [];
|
}
|
};
|
|
const buildColumnsMaintain = async () => {
|
const base = [{ label: "设备名称", align: "center", prop: "deviceName", width: 180 }];
|
if (modeMaintain.value === "month") {
|
const monthCols = Array.from({ length: 12 }, (_, i) => ({
|
label: `${i + 1}月`,
|
align: "center",
|
prop: `month${i + 1}`,
|
}));
|
columnsMaintain.value = [
|
...base,
|
...monthCols,
|
{ label: "总计", align: "center", prop: "total" },
|
];
|
} else {
|
columnsMaintain.value = [
|
...base,
|
{ label: "金额", align: "center", prop: "totalRepairPrice" },
|
];
|
}
|
await fetchMaintainData();
|
};
|
|
const refreshMaintain = async () => {
|
await buildColumnsMaintain();
|
};
|
|
const resetMaintain = () => {
|
modeMaintain.value = "month";
|
yearMaintain.value = new Date().getFullYear().toString();
|
refreshMaintain();
|
};
|
|
buildColumnsRepair();
|
refreshRepair();
|
buildColumnsMaintain();
|
refreshMaintain();
|
</script>
|
|
<style scoped>
|
.table_list {
|
margin-top: 10px;
|
}
|
</style>
|
