From 5e3624b0f7d95aee0dbf3e8c5797b5205c41bc21 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 19 十一月 2025 11:40:56 +0800
Subject: [PATCH] 1.金鹰黄金-汇总页面可以看到每个设备的每个月的金额，也可以选择看每年的金额
---
src/api/equipmentManagement/repair.js | 16 +++
src/views/equipmentManagement/amountSummary/index.vue | 188 ++++++++++++++++++++++++++++---------
src/views/equipmentManagement/repair/Modal/MaintainModal.vue | 24 +++-
src/api/equipmentManagement/upkeep.js | 16 +++
src/views/equipmentManagement/upkeep/Modal/MaintenanceModal.vue | 12 +-
5 files changed, 195 insertions(+), 61 deletions(-)
diff --git a/src/api/equipmentManagement/repair.js b/src/api/equipmentManagement/repair.js
index 0233ae6..bb44f8e 100644
--- a/src/api/equipmentManagement/repair.js
+++ b/src/api/equipmentManagement/repair.js
@@ -70,3 +70,19 @@
data,
});
};
+// 鏌ヨ璁惧鐨勬姤淇噾棰�-姣忔湀
+export const monthlyAmount = (query) => {
+ return request({
+ url: `/device/repair/monthlyAmount`,
+ method: "get",
+ params: query,
+ });
+};
+// 鏌ヨ璁惧鐨勬姤淇噾棰�-姣忓勾
+export const yearlyAmount = (query) => {
+ return request({
+ url: `/device/repair/yearlyAmount`,
+ method: "get",
+ params: query,
+ });
+};
diff --git a/src/api/equipmentManagement/upkeep.js b/src/api/equipmentManagement/upkeep.js
index c091670..82ce865 100644
--- a/src/api/equipmentManagement/upkeep.js
+++ b/src/api/equipmentManagement/upkeep.js
@@ -70,3 +70,19 @@
method: "delete",
});
};
+// 鏌ヨ璁惧鐨勬姤淇噾棰�-姣忔湀
+export const monthlyAmount = (query) => {
+ return request({
+ url: `/device/maintenance/monthlyAmount`,
+ method: "get",
+ params: query,
+ });
+};
+// 鏌ヨ璁惧鐨勬姤淇噾棰�-姣忓勾
+export const yearlyAmount = (query) => {
+ return request({
+ url: `/device/maintenance/yearlyAmount`,
+ method: "get",
+ params: query,
+ });
+};
diff --git a/src/views/equipmentManagement/amountSummary/index.vue b/src/views/equipmentManagement/amountSummary/index.vue
index 051eb83..9d6a8bc 100644
--- a/src/views/equipmentManagement/amountSummary/index.vue
+++ b/src/views/equipmentManagement/amountSummary/index.vue
@@ -1,78 +1,176 @@
<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>
+ <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="columns"
- :tableData="tableData"
- :page="{ current: 1, size: tableData.length || 10, total: tableData.length }"
- />
- </div>
+ <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>
+ </template>
<script setup>
-import { ref, computed } from "vue";
+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 mode = ref("month");
-const year = ref(new Date().getFullYear().toString());
-const filters = ref({});
+const activeTab = ref("repair");
-const columns = ref([]);
-const tableData = ref([]);
+// 鎶ヤ慨
+const modeRepair = ref("month");
+const yearRepair = ref(new Date().getFullYear().toString());
+const filtersRepair = ref({});
+const columnsRepair = ref([]);
+const tableDataRepair = ref([]);
-const buildColumns = () => {
+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 (mode.value === "month") {
+ if (modeRepair.value === "month") {
const monthCols = Array.from({ length: 12 }, (_, i) => ({
label: `${i + 1}鏈坄,
align: "center",
- prop: `m${i + 1}`,
+ prop: `month${i + 1}`,
}));
- columns.value = [
+ columnsRepair.value = [
...base,
...monthCols,
{ label: "鎬昏", align: "center", prop: "total" },
];
} else {
- columns.value = [
+ columnsRepair.value = [
...base,
- { label: "閲戦", align: "center", prop: "yearAmount" },
+ { 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 refresh = async () => {
- buildColumns();
- tableData.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 reset = () => {
- mode.value = "month";
- year.value = new Date().getFullYear().toString();
- refresh();
+const refreshMaintain = async () => {
+ await buildColumnsMaintain();
};
-buildColumns();
-refresh();
+const resetMaintain = () => {
+ modeMaintain.value = "month";
+ yearMaintain.value = new Date().getFullYear().toString();
+ refreshMaintain();
+};
+
+buildColumnsRepair();
+refreshRepair();
+buildColumnsMaintain();
+refreshMaintain();
</script>
<style scoped>
diff --git a/src/views/equipmentManagement/repair/Modal/MaintainModal.vue b/src/views/equipmentManagement/repair/Modal/MaintainModal.vue
index 06f7cc9..169075b 100644
--- a/src/views/equipmentManagement/repair/Modal/MaintainModal.vue
+++ b/src/views/equipmentManagement/repair/Modal/MaintainModal.vue
@@ -1,5 +1,5 @@
<template>
- <el-dialog v-model="visible" :title="modalOptions.title" direction="ltr">
+ <el-dialog v-model="visible" :title="modalOptions.title" direction="ltr" @close="handleDialogClose">
<el-form :model="form" :rules="rules" label-width="110px" ref="formRef">
<el-form-item label="缁翠慨浜�" prop="maintenanceName">
<el-input v-model="form.maintenanceName" placeholder="璇疯緭鍏ョ淮淇汉" />
@@ -7,8 +7,8 @@
<el-form-item label="缁翠慨缁撴灉" prop="maintenanceResult">
<el-input v-model="form.maintenanceResult" placeholder="璇疯緭鍏ョ淮淇粨鏋�" />
</el-form-item>
- <el-form-item label="鏈缁翠慨閲戦" prop="money">
- <el-input-number v-model="form.money" :min="0" :precision="2" style="width: 100%" />
+ <el-form-item label="鏈缁翠慨閲戦" prop="repairPrice">
+ <el-input-number v-model="form.repairPrice" :min="0" :precision="2" style="width: 100%" />
</el-form-item>
<el-form-item label="缁翠慨鏃ユ湡" prop="maintenanceTime">
<el-date-picker
@@ -26,7 +26,7 @@
<el-button type="primary" @click="sendForm" :loading="loading">
{{ modalOptions.confirmText }}
</el-button>
- <el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
+ <el-button @click="handleDialogClose">{{ modalOptions.cancelText }}</el-button>
</template>
</el-dialog>
</template>
@@ -61,20 +61,20 @@
maintenanceName: undefined, // 缁翠慨鍚嶇О
maintenanceResult: undefined, // 缁翠慨缁撴灉
maintenanceTime: undefined, // 缁翠慨鏃ユ湡
- money: undefined, // 鏈缁翠慨閲戦
+ repairPrice: undefined, // 鏈缁翠慨閲戦
});
const rules = {
maintenanceName: [{ required: true, message: "璇疯緭鍏ョ淮淇汉", trigger: "blur" }],
maintenanceResult: [{ required: true, message: "璇疯緭鍏ョ淮淇粨鏋�", trigger: "blur" }],
- money: [{ required: true, message: "璇疯緭鍏ユ湰娆＄淮淇噾棰�", trigger: "change" }],
+ repairPrice: [{ required: true, message: "璇疯緭鍏ユ湰娆＄淮淇噾棰�", trigger: "change" }],
maintenanceTime: [{ required: true, message: "璇烽�夋嫨缁翠慨鏃ユ湡", trigger: "change" }],
};
const setForm = (data) => {
form.maintenanceName = data.maintenanceName ?? userStore.nickName;
form.maintenanceResult = data.maintenanceResult;
- form.money = data.money;
+ form.repairPrice = data.repairPrice;
form.maintenanceTime =
dayjs(data.maintenanceTime).format("YYYY-MM-DD HH:mm:ss") ??
dayjs().format("YYYY-MM-DD HH:mm:ss");
@@ -83,14 +83,12 @@
const sendForm = async () => {
await formRef.value.validate(async (valid) => {
if (!valid) return;
- loading.value = true;
const { code } = await addMaintain({ id: id.value, ...form });
if (code == 200) {
emits("ok");
resetForm();
closeModal();
}
- loading.value = false;
});
};
@@ -100,6 +98,14 @@
setForm(row);
};
+const handleDialogClose = () => {
+ resetForm();
+ nextTick(() => {
+ formRef.value?.clearValidate?.();
+ });
+ closeModal();
+};
+
defineExpose({
open,
});
diff --git a/src/views/equipmentManagement/upkeep/Modal/MaintenanceModal.vue b/src/views/equipmentManagement/upkeep/Modal/MaintenanceModal.vue
index 727f797..c58e413 100644
--- a/src/views/equipmentManagement/upkeep/Modal/MaintenanceModal.vue
+++ b/src/views/equipmentManagement/upkeep/Modal/MaintenanceModal.vue
@@ -24,8 +24,8 @@
<el-option label="缁翠慨" :value="0"></el-option>
</el-select>
</el-form-item>
- <el-form-item label="鏈缁翠慨閲戦" prop="money">
- <el-input-number v-model="form.money" :min="0" :precision="2" style="width: 100%" />
+ <el-form-item label="鏈淇濆吇閲戦" prop="maintenancePrice">
+ <el-input-number v-model="form.maintenancePrice" :min="0" :precision="2" style="width: 100%" />
</el-form-item>
</el-form>
<template #footer>
@@ -70,7 +70,7 @@
maintenanceActuallyName: undefined, // 瀹為檯淇濆吇浜�
maintenanceActuallyTime: undefined, // 瀹為檯淇濆吇鏃ユ湡
maintenanceResult: undefined, // 淇濆吇缁撴灉
- money: undefined, // 淇濆吇閲戦
+ maintenancePrice: undefined, // 淇濆吇閲戦
});
const rules = {
@@ -83,7 +83,7 @@
maintenanceResult: [
{ required: true, message: "璇烽�夋嫨淇濆吇缁撴灉", trigger: "change" },
],
- money: [
+ maintenancePrice: [
{ required: true, message: "璇疯緭鍏ユ湰娆′繚鍏婚噾棰�", trigger: "change" },
],
};
@@ -91,14 +91,12 @@
const sendForm = async () => {
await formRef.value.validate(async (valid) => {
if (!valid) return;
- loading.value = true;
const { code } = await addMaintenance({ id: id.value, ...form });
if (code == 200) {
emits("ok");
resetForm();
closeModal();
}
- loading.value = false;
});
};
@@ -115,7 +113,7 @@
? dayjs(row.maintenanceActuallyTime).format("YYYY-MM-DD HH:mm:ss")
: undefined;
form.maintenanceResult = row.maintenanceResult;
- form.money = row.money;
+ form.maintenancePrice = row.maintenancePrice;
};
defineExpose({
open,
--
Gitblit v1.9.3