From 2d3530a7c11557a40807ad7c0b9e302ce6ce3a9f Mon Sep 17 00:00:00 2001
From: hsy <1029150275@qq.com>
Date: 星期五, 28 八月 2026 10:16:32 +0800
Subject: [PATCH] feat: 综合业务模块页面重构与交互完善
---
src/views/inventoryManagement/vehicleManagement/index.vue | 889 +++++++++++++++++++++++++++-------------------------------
1 files changed, 414 insertions(+), 475 deletions(-)
diff --git a/src/views/inventoryManagement/vehicleManagement/index.vue b/src/views/inventoryManagement/vehicleManagement/index.vue
index 1e383c6..1d0203a 100644
--- a/src/views/inventoryManagement/vehicleManagement/index.vue
+++ b/src/views/inventoryManagement/vehicleManagement/index.vue
@@ -1,268 +1,130 @@
<template>
<div class="app-container">
+
<!-- 鏌ヨ鏉′欢 -->
- <div class="search_form">
- <div>
- <span class="search_title">杞︾墝鍙风爜锛�</span>
- <el-input
- v-model="searchForm.plateNumber"
- style="width: 180px"
- placeholder="璇疯緭鍏ヨ溅鐗屽彿鐮�"
- clearable
- @keyup.enter.native="handleQuery"
- />
-
- <span class="search_title ml10">杞﹁締绫诲瀷锛�</span>
- <el-select
- v-model="searchForm.vehicleType"
- style="width: 160px"
- placeholder="璇烽�夋嫨杞﹁締绫诲瀷"
- clearable
- >
- <el-option
- v-for="item in vehicleTypeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
-
- <span class="search_title ml10">鎵�灞為儴闂細</span>
- <el-select
- v-model="searchForm.department"
- style="width: 160px"
- placeholder="璇烽�夋嫨鎵�灞為儴闂�"
- clearable
- >
- <el-option
- v-for="item in departmentOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
-
- <span class="search_title ml10">鐘舵�侊細</span>
- <el-select
- v-model="searchForm.status"
- style="width: 140px"
- placeholder="璇烽�夋嫨鐘舵��"
- clearable
- >
- <el-option
- v-for="item in statusOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
-
- <span class="search_title ml10">褰掓。鐘舵�侊細</span>
- <el-select
- v-model="searchForm.archived"
- style="width: 140px"
- placeholder="璇烽�夋嫨褰掓。鐘舵��"
- clearable
- >
- <el-option label="鏈綊妗�" value="false" />
- <el-option label="宸插綊妗�" value="true" />
- </el-select>
-
- <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
- 鎼滅储
- </el-button>
- <el-button @click="resetSearch">閲嶇疆</el-button>
+ <div class="search_form" >
+ <div style="flex: 1; padding-right: 20px;">
+ <el-row :gutter="16">
+ <el-col :span="6" style="display: flex; align-items: center;">
+ <span class="search_title" style="white-space: nowrap;">杞︾墝鍙风爜锛�</span>
+ <el-input v-model="queryParams.plateNumber" placeholder="璇疯緭鍏ヨ溅鐗屽彿鐮�" clearable style="flex: 1;" @keyup.enter.native="handleQuery" />
+ </el-col>
+ <el-col :span="6" style="display: flex; align-items: center;">
+ <span class="search_title" style="white-space: nowrap;">鎵�灞為儴闂細</span>
+ <el-tree-select v-model="queryParams.deptId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="璇烽�夋嫨閮ㄩ棬" check-strictly clearable filterable style="flex: 1;" />
+ </el-col>
+ <el-col :span="6" style="display: flex; align-items: center;">
+ <span class="search_title" style="white-space: nowrap;">鐘舵�侊細</span>
+ <el-select v-model="queryParams.vehicleStatus" placeholder="璇烽�夋嫨鐘舵��" clearable style="flex: 1;">
+ <el-option label="鍦ㄧ敤" value="NORMAL" />
+ <el-option label="闂茬疆" value="IDLE" />
+ <el-option label="缁翠慨" value="REPAIR" />
+ </el-select>
+ </el-col>
+ <el-col :span="6" style="display: flex; align-items: center;">
+ <el-button type="primary" @click="handleQuery">鎼滅储</el-button>
+ <el-button @click="resetQuery">閲嶇疆</el-button>
+ </el-col>
+ </el-row>
</div>
<div>
- <el-button type="primary" icon="Plus" @click="openAdd">鏂板杞﹁締</el-button>
+ <el-button type="primary" icon="Plus" @click="handleAdd">鏂板杞﹁締</el-button>
</div>
</div>
-
<!-- 琛ㄦ牸 -->
<div class="table_list">
<el-table
+ v-loading="loading"
:data="tableData"
border
style="width: 100%"
- height="calc(100vh - 18.5em)"
+ height="calc(100vh - 22em)"
:header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
>
<el-table-column type="index" label="搴忓彿" width="60" align="center" />
- <el-table-column
- prop="vehicleCode"
- label="杞﹁締缂栧彿"
- width="140"
- show-overflow-tooltip
- />
- <el-table-column
- prop="plateNumber"
- label="杞︾墝鍙风爜"
- width="120"
- show-overflow-tooltip
- />
- <el-table-column
- prop="vehicleType"
- label="杞﹁締绫诲瀷"
- width="120"
- show-overflow-tooltip
- />
- <el-table-column
- prop="department"
- label="鎵�灞為儴闂�"
- width="140"
- show-overflow-tooltip
- />
- <el-table-column
- prop="purchaseDate"
- label="璐疆鏃ユ湡"
- width="120"
- show-overflow-tooltip
- />
- <el-table-column
- prop="licenseNumber"
- label="琛岄┒璇佺紪鍙�"
- width="160"
- show-overflow-tooltip
- />
- <el-table-column
- prop="licenseIssueDate"
- label="鍙戣瘉鏃ユ湡"
- width="120"
- show-overflow-tooltip
- />
- <el-table-column
- prop="licenseExpireDate"
- label="鍒版湡鏃ユ湡"
- width="120"
- show-overflow-tooltip
- />
- <el-table-column label="鐘舵��" width="100" align="center">
+ <el-table-column prop="plateNumber" label="杞︾墝鍙风爜" min-width="120" show-overflow-tooltip />
+ <el-table-column prop="deptName" label="鎵�灞為儴闂�" min-width="150" show-overflow-tooltip />
+ <el-table-column prop="userName" label="璐ｄ换浜�" min-width="120" />
+ <el-table-column prop="propertyOwnership" label="浜ф潈鎵�鏈�" min-width="120" show-overflow-tooltip />
+ <el-table-column label="骞存鍒版湡鏃ユ湡" min-width="140">
<template #default="scope">
- <el-tag :type="statusTagType(scope.row.status)">
- {{ scope.row.status }}
+ <span>{{ scope.row.inspectionExpireDate }}</span>
+ <el-tag v-if="isExpired(scope.row.inspectionExpireDate)" type="danger" size="small" style="margin-left:5px;">宸茶秴鏈�</el-tag>
+ <el-tag v-else-if="isExpiringSoon(scope.row.inspectionExpireDate)" type="warning" size="small" style="margin-left:5px;">鍗冲皢鍒版湡</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="淇濋櫓鍒版湡鏃ユ湡" min-width="140">
+ <template #default="scope">
+ <span>{{ scope.row.insuranceExpireDate }}</span>
+ <el-tag v-if="isExpired(scope.row.insuranceExpireDate)" type="danger" size="small" style="margin-left:5px;">宸茶秴鏈�</el-tag>
+ <el-tag v-else-if="isExpiringSoon(scope.row.insuranceExpireDate)" type="warning" size="small" style="margin-left:5px;">鍗冲皢鍒版湡</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="鐘舵��" min-width="100" align="center">
+ <template #default="scope">
+ <el-tag :type="statusTagType(scope.row.vehicleStatus)">
+ {{ statusLabel(scope.row.vehicleStatus) }}
</el-tag>
</template>
</el-table-column>
- <el-table-column label="褰掓。鐘舵��" width="100" align="center">
- <template #default="scope">
- <el-tag :type="scope.row.archived ? 'info' : 'success'">
- {{ scope.row.archived ? '宸插綊妗�' : '鏈綊妗�' }}
- </el-tag>
- </template>
- </el-table-column>
+ <el-table-column prop="remark" label="澶囨敞" min-width="150" show-overflow-tooltip />
<el-table-column label="鎿嶄綔" fixed="right" width="220" align="center">
<template #default="scope">
- <el-button
- type="primary"
- link
- size="small"
- @click="openEdit(scope.row)"
- >
- 缂栬緫
- </el-button>
- <el-button
- type="warning"
- link
- size="small"
- :disabled="scope.row.archived"
- @click="archiveRow(scope.row)"
- >
- 褰掓。
- </el-button>
- <el-button
- type="danger"
- link
- size="small"
- @click="removeRow(scope.row)"
- >
- 鍒犻櫎
- </el-button>
+ <el-button type="success" link size="small" @click="handleCost(scope.row)">璐圭敤绠＄悊</el-button>
+ <el-button type="primary" link size="small" @click="handleUpdate(scope.row)">缂栬緫</el-button>
+ <el-button type="danger" link size="small" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
</template>
</el-table-column>
</el-table>
- </div>
- <!-- 鏂板/缂栬緫寮圭獥 -->
- <el-dialog
- v-model="dialogVisible"
- :title="dialogTitle"
- width="600px"
- destroy-on-close
- >
- <el-form
- ref="formRef"
- :model="form"
- :rules="rules"
- label-width="100px"
- label-position="right"
- >
+ <!-- 鍒嗛〉 -->
+ <pagination
+ v-show="total > 0"
+ :total="total"
+ v-model:page="queryParams.current"
+ v-model:limit="queryParams.size"
+ @pagination="getList"
+ />
+ </div>
+<!-- 鏂板/缂栬緫杞﹁締寮圭獥 -->
+ <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+ <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
<el-row :gutter="20">
<el-col :span="12">
- <el-form-item label="杞﹁締缂栧彿锛�" prop="vehicleCode">
- <el-input v-model="form.vehicleCode" placeholder="璇疯緭鍏ヨ溅杈嗙紪鍙�" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="杞︾墝鍙风爜锛�" prop="plateNumber">
+ <el-form-item label="杞︾墝鍙风爜" prop="plateNumber">
<el-input v-model="form.plateNumber" placeholder="璇疯緭鍏ヨ溅鐗屽彿鐮�" />
</el-form-item>
</el-col>
- </el-row>
- <el-row :gutter="20">
<el-col :span="12">
- <el-form-item label="杞﹁締绫诲瀷锛�" prop="vehicleType">
- <el-select
- v-model="form.vehicleType"
- placeholder="璇烽�夋嫨杞﹁締绫诲瀷"
- clearable
- >
- <el-option
- v-for="item in vehicleTypeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鎵�灞為儴闂細" prop="department">
- <el-select
- v-model="form.department"
- placeholder="璇烽�夋嫨鎵�灞為儴闂�"
- clearable
- >
- <el-option
- v-for="item in departmentOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
+ <el-form-item label="浜ф潈鎵�鏈�" prop="propertyOwnership">
+ <el-input v-model="form.propertyOwnership" placeholder="濡�:鑷湁,绉熻祦绛�" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
- <el-form-item label="璐疆鏃ユ湡锛�" prop="purchaseDate">
- <el-date-picker
- v-model="form.purchaseDate"
- type="date"
- value-format="YYYY-MM-DD"
- format="YYYY-MM-DD"
- placeholder="璇烽�夋嫨璐疆鏃ユ湡"
+ <el-form-item label="鎵�灞為儴闂�" prop="deptId">
+ <el-tree-select
+ v-model="form.deptId"
+ :data="deptOptions"
+ :props="{ value: 'id', label: 'label', children: 'children' }"
+ value-key="id"
+ placeholder="璇烽�夋嫨閮ㄩ棬"
+ check-strictly
+ clearable
+ filterable
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="鐘舵�侊細" prop="status">
- <el-select v-model="form.status" placeholder="璇烽�夋嫨鐘舵��">
+ <el-form-item label="璐ｄ换浜�" prop="userId">
+ <el-select v-model="form.userId" placeholder="璇烽�夋嫨璐ｄ换浜�" style="width: 100%" filterable>
<el-option
- v-for="item in statusOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ v-for="item in userList"
+ :key="item.userId"
+ :label="item.userId + ' - ' + (item.nickName || item.userName)"
+ :value="item.userId"
/>
</el-select>
</el-form-item>
@@ -270,312 +132,389 @@
</el-row>
<el-row :gutter="20">
<el-col :span="12">
- <el-form-item label="琛岄┒璇佺紪鍙凤細" prop="licenseNumber">
- <el-input
- v-model="form.licenseNumber"
- placeholder="璇疯緭鍏ヨ椹惰瘉缂栧彿"
- />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鍙戣瘉鏃ユ湡锛�" prop="licenseIssueDate">
- <el-date-picker
- v-model="form.licenseIssueDate"
- type="date"
- value-format="YYYY-MM-DD"
- format="YYYY-MM-DD"
- placeholder="璇烽�夋嫨鍙戣瘉鏃ユ湡"
- style="width: 100%"
- />
+ <el-form-item label="鐘舵��" prop="vehicleStatus">
+ <el-select v-model="form.vehicleStatus" placeholder="璇烽�夋嫨鐘舵��" style="width: 100%">
+ <el-option label="鍦ㄧ敤" value="NORMAL" />
+ <el-option label="闂茬疆" value="IDLE" />
+ <el-option label="缁翠慨" value="REPAIR" />
+ </el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
- <el-form-item label="鍒版湡鏃ユ湡锛�" prop="licenseExpireDate">
+ <el-form-item label="骞存鍒版湡" prop="inspectionExpireDate">
<el-date-picker
- v-model="form.licenseExpireDate"
+ v-model="form.inspectionExpireDate"
type="date"
value-format="YYYY-MM-DD"
- format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨鍒版湡鏃ユ湡"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="淇濋櫓鍒版湡" prop="insuranceExpireDate">
+ <el-date-picker
+ v-model="form.insuranceExpireDate"
+ type="date"
+ value-format="YYYY-MM-DD"
placeholder="璇烽�夋嫨鍒版湡鏃ユ湡"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
+ <el-form-item label="澶囨敞" prop="remark">
+ <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" />
+ </el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
- <el-button @click="handleCancel">鍙� 娑�</el-button>
- <el-button type="primary" @click="handleSubmit">淇� 瀛�</el-button>
+ <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
+ <el-button @click="cancel">鍙� 娑�</el-button>
</div>
+ </template>
+ </el-dialog>
+
+ <!-- 璐圭敤绠＄悊鎶藉眽 -->
+ <el-drawer v-model="costDrawer" :title="'璐圭敤绠＄悊 - ' + currentVehiclePlate" size="50%">
+ <div style="padding: 20px;">
+ <div style="margin-bottom: 20px;">
+ <el-button type="primary" @click="handleAddCost">鏂板璁板綍</el-button>
+ </div>
+ <el-table v-loading="costLoading" :data="costList" border>
+ <el-table-column label="璐圭敤绫诲瀷" prop="costType">
+ <template #default="scope">
+ {{ costTypeLabel(scope.row.costType) }}
+ </template>
+ </el-table-column>
+ <el-table-column label="閲戦(鍏�)" prop="amount" align="right" />
+ <el-table-column label="鍙戠敓鏃ユ湡" prop="costDate" />
+ <el-table-column label="澶囨敞" prop="remark" show-overflow-tooltip />
+ <el-table-column label="鎿嶄綔" width="100" align="center">
+ <template #default="scope">
+ <el-button type="danger" link size="small" @click="handleDeleteCost(scope.row)">
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <pagination
+ v-show="costTotal > 0"
+ :total="costTotal"
+ v-model:page="costQuery.current"
+ v-model:limit="costQuery.size"
+ @pagination="getCostList"
+ />
+ </div>
+ </el-drawer>
+
+ <!-- 鏂板璐圭敤寮圭獥 -->
+ <el-dialog title="鏂板璐圭敤" v-model="costOpen" width="400px" append-to-body>
+ <el-form ref="costFormRef" :model="costForm" :rules="costRules" label-width="100px">
+ <el-form-item label="璐圭敤绫诲瀷" prop="costType">
+ <el-select v-model="costForm.costType" placeholder="璇烽�夋嫨" style="width:100%">
+ <el-option label="淇濆吇" value="MAINTENANCE" />
+ <el-option label="骞存" value="INSPECTION" />
+ <el-option label="淇濋櫓" value="INSURANCE" />
+ <el-option label="缁翠慨" value="REPAIR" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="閲戦(鍏�)" prop="amount">
+ <el-input-number v-model="costForm.amount" :precision="2" :min="0" style="width:100%" />
+ </el-form-item>
+ <el-form-item label="鍙戠敓鏃ユ湡" prop="costDate">
+ <el-date-picker v-model="costForm.costDate" type="date" value-format="YYYY-MM-DD" style="width:100%" />
+ </el-form-item>
+ <el-form-item label="澶囨敞" prop="remark">
+ <el-input v-model="costForm.remark" type="textarea" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button type="primary" @click="submitCostForm">纭� 瀹�</el-button>
+ <el-button @click="costOpen = false">鍙� 娑�</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
-import { ref, reactive } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { listVehicleInfo, getWarningList, addVehicleInfo, updateVehicleInfo, delVehicleInfo } from '@/api/inventoryManagement/vehicle';
+import request from '@/utils/request';
-// 妯℃嫙杞﹁締鍩虹鏁版嵁
-const allVehicles = ref([
- {
- id: 1,
- vehicleCode: "CL-202401",
- plateNumber: "绮12345",
- vehicleType: "鍘㈠紡璐ц溅",
- department: "鐗╂祦涓�閮�",
- purchaseDate: "2022-03-15",
- licenseNumber: "4401-2022-0001",
- licenseIssueDate: "2022-03-10",
- licenseExpireDate: "2026-03-10",
- status: "鍦ㄧ敤",
- archived: false,
- },
- {
- id: 2,
- vehicleCode: "CL-202402",
- plateNumber: "绮67890",
- vehicleType: "鍐疯棌杞�",
- department: "鐗╂祦浜岄儴",
- purchaseDate: "2021-08-01",
- licenseNumber: "4401-2021-0123",
- licenseIssueDate: "2021-07-28",
- licenseExpireDate: "2025-07-28",
- status: "缁翠慨",
- archived: false,
- },
- {
- id: 3,
- vehicleCode: "CL-202403",
- plateNumber: "绮11223",
- vehicleType: "鐗靛紩杞�",
- department: "椤圭洰杩愯緭閮�",
- purchaseDate: "2020-05-20",
- licenseNumber: "4401-2020-0456",
- licenseIssueDate: "2020-05-18",
- licenseExpireDate: "2024-05-18",
- status: "闂茬疆",
- archived: false,
- },
- {
- id: 4,
- vehicleCode: "CL-202404",
- plateNumber: "绮33445",
- vehicleType: "鍘㈠紡璐ц溅",
- department: "璧勪骇绠＄悊閮�",
- purchaseDate: "2019-11-11",
- licenseNumber: "4401-2019-0789",
- licenseIssueDate: "2019-11-08",
- licenseExpireDate: "2023-11-08",
- status: "鍦ㄧ敤",
- archived: true,
- },
-]);
+const loading = ref(true);
+const tableData = ref([]);
+const total = ref(0);
+const open = ref(false);
+const title = ref("");
+const formRef = ref(null);
-// 涓嬫媺鏋氫妇
-const vehicleTypeOptions = [
- { label: "鍘㈠紡璐ц溅", value: "鍘㈠紡璐ц溅" },
- { label: "鍐疯棌杞�", value: "鍐疯棌杞�" },
- { label: "鐗靛紩杞�", value: "鐗靛紩杞�" },
- { label: "鍏朵粬", value: "鍏朵粬" },
-];
+const deptOptions = ref([]);
+const userList = ref([]);
-const departmentOptions = [
- { label: "鐗╂祦涓�閮�", value: "鐗╂祦涓�閮�" },
- { label: "鐗╂祦浜岄儴", value: "鐗╂祦浜岄儴" },
- { label: "椤圭洰杩愯緭閮�", value: "椤圭洰杩愯緭閮�" },
- { label: "璧勪骇绠＄悊閮�", value: "璧勪骇绠＄悊閮�" },
-];
-
-const statusOptions = [
- { label: "鍦ㄧ敤", value: "鍦ㄧ敤" },
- { label: "闂茬疆", value: "闂茬疆" },
- { label: "缁翠慨", value: "缁翠慨" },
-];
-
-// 鏌ヨ琛ㄥ崟
-const searchForm = reactive({
- plateNumber: "",
- vehicleType: "",
- department: "",
- status: "",
- archived: "",
+const queryParams = reactive({
+ current: 1,
+ size: 10,
+ plateNumber: undefined,
+ deptId: undefined,
+ vehicleStatus: undefined
});
-// 琛ㄦ牸鏁版嵁
-const tableData = ref([...allVehicles.value]);
-
-// 寮圭獥 & 琛ㄥ崟
-const dialogVisible = ref(false);
-const dialogTitle = ref("鏂板杞﹁締");
-const isEdit = ref(false);
-const formRef = ref(null);
const form = reactive({
- id: null,
- vehicleCode: "",
- plateNumber: "",
- vehicleType: "",
- department: "",
- purchaseDate: "",
- licenseNumber: "",
- licenseIssueDate: "",
- licenseExpireDate: "",
- status: "鍦ㄧ敤",
- archived: false,
+ id: undefined,
+ plateNumber: undefined,
+ propertyOwnership: undefined,
+ deptId: undefined,
+ userId: undefined,
+ vehicleStatus: 'NORMAL',
+ inspectionExpireDate: undefined,
+ insuranceExpireDate: undefined,
+ remark: undefined
});
const rules = {
- vehicleCode: [{ required: true, message: "璇疯緭鍏ヨ溅杈嗙紪鍙�", trigger: "blur" }],
- plateNumber: [{ required: true, message: "璇疯緭鍏ヨ溅鐗屽彿鐮�", trigger: "blur" }],
- vehicleType: [{ required: true, message: "璇烽�夋嫨杞﹁締绫诲瀷", trigger: "change" }],
- department: [{ required: true, message: "璇烽�夋嫨鎵�灞為儴闂�", trigger: "change" }],
- purchaseDate: [{ required: true, message: "璇烽�夋嫨璐疆鏃ユ湡", trigger: "change" }],
- status: [{ required: true, message: "璇烽�夋嫨鐘舵��", trigger: "change" }],
- licenseNumber: [{ required: true, message: "璇疯緭鍏ヨ椹惰瘉缂栧彿", trigger: "blur" }],
- licenseIssueDate: [{ required: true, message: "璇烽�夋嫨鍙戣瘉鏃ユ湡", trigger: "change" }],
+ plateNumber: [{ required: true, message: "杞︾墝鍙风爜涓嶈兘涓虹┖", trigger: "blur" }],
+ deptId: [{ required: true, message: "鎵�灞為儴闂ㄤ笉鑳戒负绌�", trigger: "change" }],
+ vehicleStatus: [{ required: true, message: "鐘舵�佷笉鑳戒负绌�", trigger: "change" }]
};
-// 鏌ヨ
-const handleQuery = () => {
- tableData.value = allVehicles.value.filter((item) => {
- if (
- searchForm.plateNumber &&
- !item.plateNumber.includes(searchForm.plateNumber.trim())
- ) {
- return false;
- }
- if (searchForm.vehicleType && item.vehicleType !== searchForm.vehicleType) {
- return false;
- }
- if (searchForm.department && item.department !== searchForm.department) {
- return false;
- }
- if (searchForm.status && item.status !== searchForm.status) {
- return false;
- }
- if (searchForm.archived !== "") {
- const targetArchived = searchForm.archived === "true";
- if (item.archived !== targetArchived) return false;
- }
- return true;
+// 瀛楀吀鑾峰彇
+function getDicts() {
+ request({url: '/system/user/deptTree', method: 'get'}).then(res => {
+ deptOptions.value = res.data || [];
});
-};
+ request({url: '/system/user/list', method: 'get'}).then(res => {
+ userList.value = res.rows || res.data || [];
+ });
+}
-const resetSearch = () => {
- searchForm.plateNumber = "";
- searchForm.vehicleType = "";
- searchForm.department = "";
- searchForm.status = "";
- searchForm.archived = "";
+
+const statTotal = ref(0);
+const statNormal = ref(0);
+const statIdle = ref(0);
+const statRepair = ref(0);
+
+function getStats() {
+ listVehicleInfo({ current: 1, size: 10000 }).then(res => {
+ const arr = res.data.records || [];
+ statTotal.value = arr.length;
+ statNormal.value = arr.filter(i => i.vehicleStatus === 'NORMAL').length;
+ statIdle.value = arr.filter(i => i.vehicleStatus === 'IDLE').length;
+ statRepair.value = arr.filter(i => i.vehicleStatus === 'REPAIR').length;
+ });
+}
+
+function getList() {
+ loading.value = true;
+ listVehicleInfo(queryParams).then(response => {
+ tableData.value = response.data.records;
+ total.value = response.data.total;
+ loading.value = false;
+ }).catch(() => {
+ loading.value = false;
+ });
+}
+
+function handleWarningList() {
+ loading.value = true;
+ getWarningList().then(response => {
+ tableData.value = response.data;
+ total.value = response.data.length;
+ loading.value = false;
+ ElMessage.info("宸插睍绀�30澶╁唴鍒版湡鐨勯璀﹁溅杈�");
+ }).catch(() => {
+ loading.value = false;
+ });
+}
+
+function handleQuery() {
+ queryParams.current = 1;
+ getList();
+ getStats();
+}
+
+function resetQuery() {
+ queryParams.plateNumber = undefined;
+ queryParams.deptId = undefined;
+ queryParams.vehicleStatus = undefined;
handleQuery();
-};
+}
-// 鏂板
-const openAdd = () => {
- dialogTitle.value = "鏂板杞﹁締";
- isEdit.value = false;
+function reset() {
Object.assign(form, {
- id: null,
- vehicleCode: "",
- plateNumber: "",
- vehicleType: "",
- department: "",
- purchaseDate: "",
- licenseInfo: "",
- status: "鍦ㄧ敤",
- archived: false,
+ id: undefined,
+ plateNumber: undefined,
+ propertyOwnership: undefined,
+ deptId: undefined,
+ userId: undefined,
+ vehicleStatus: 'NORMAL',
+ inspectionExpireDate: undefined,
+ insuranceExpireDate: undefined,
+ remark: undefined
});
- dialogVisible.value = true;
-};
+ if (formRef.value) formRef.value.resetFields();
+}
-// 缂栬緫
-const openEdit = (row) => {
- dialogTitle.value = "缂栬緫杞﹁締";
- isEdit.value = true;
+function handleAdd() {
+ reset();
+ open.value = true;
+ title.value = "鏂板杞﹁締";
+}
+
+function handleUpdate(row) {
+ reset();
Object.assign(form, row);
- dialogVisible.value = true;
-};
+ open.value = true;
+ title.value = "淇敼杞﹁締";
+}
-// 淇濆瓨
-const handleSubmit = () => {
- if (!formRef.value) return;
- formRef.value.validate((valid) => {
- if (!valid) return;
- if (isEdit.value) {
- const index = allVehicles.value.findIndex((v) => v.id === form.id);
- if (index !== -1) {
- allVehicles.value[index] = { ...form };
+function submitForm() {
+ formRef.value.validate(valid => {
+ if (valid) {
+ if (form.id != null) {
+ updateVehicleInfo(form).then(response => {
+ ElMessage.success("淇敼鎴愬姛");
+ open.value = false;
+ getList();
+ getStats();
+ });
+ } else {
+ addVehicleInfo(form).then(response => {
+ ElMessage.success("鏂板鎴愬姛");
+ open.value = false;
+ getList();
+ getStats();
+ });
}
- ElMessage.success("杞﹁締淇℃伅宸叉洿鏂�");
- } else {
- const newId = allVehicles.value.length
- ? Math.max(...allVehicles.value.map((v) => v.id)) + 1
- : 1;
- allVehicles.value.push({ ...form, id: newId });
- ElMessage.success("杞﹁締淇℃伅宸叉柊澧�");
}
- dialogVisible.value = false;
- handleQuery();
});
-};
+}
-const handleCancel = () => {
- dialogVisible.value = false;
-};
-
-// 褰掓。
-const archiveRow = (row) => {
- if (row.archived) return;
- ElMessageBox.confirm(
- "鏄惁纭灏嗚杞﹁締褰掓。锛熷綊妗ｅ悗浠呬繚鐣欐煡璇紝涓嶅啀鍙備笌杩愯緭浠诲姟鍒嗛厤銆�",
- "褰掓。鎻愮ず",
- {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- }
- )
- .then(() => {
- row.archived = true;
- if (row.status === "鍦ㄧ敤") {
- row.status = "闂茬疆";
- }
- ElMessage.success("杞﹁締宸插綊妗�");
- handleQuery();
- })
- .catch(() => {});
-};
-
-// 鍒犻櫎
-const removeRow = (row) => {
- ElMessageBox.confirm("鏄惁纭鍒犻櫎璇ヨ溅杈嗗熀纭�淇℃伅锛�", "鍒犻櫎鎻愮ず", {
- confirmButtonText: "纭",
+function handleDelete(row) {
+ ElMessageBox.confirm('鏄惁纭鍒犻櫎璇ヨ溅杈嗘暟鎹紵', "璀﹀憡", {
+ confirmButtonText: "纭畾",
cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- allVehicles.value = allVehicles.value.filter((v) => v.id !== row.id);
- handleQuery();
- ElMessage.success("鍒犻櫎鎴愬姛");
- })
- .catch(() => {});
-};
+ type: "warning"
+ }).then(function() {
+ return delVehicleInfo(row.id);
+ }).then(() => {
+ getList();
+ getStats();
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ });
+}
-// 鐘舵�佹牱寮�
+function cancel() {
+ open.value = false;
+ reset();
+}
+
+
+function isExpired(dateStr) {
+ if (!dateStr) return false;
+ const targetDate = new Date(dateStr).getTime();
+ const now = new Date().getTime();
+ return targetDate < now;
+}
+
+function isExpiringSoon(dateStr) {
+ if (!dateStr) return false;
+ const targetDate = new Date(dateStr).getTime();
+ const now = new Date().getTime();
+ const diffDays = (targetDate - now) / (1000 * 3600 * 24);
+ return diffDays >= 0 && diffDays <= 30;
+}
const statusTagType = (status) => {
- if (status === "鍦ㄧ敤") return "success";
- if (status === "闂茬疆") return "info";
- if (status === "缁翠慨") return "warning";
+ if (status === "NORMAL") return "success";
+ if (status === "IDLE") return "info";
+ if (status === "REPAIR") return "warning";
return "default";
};
-</script>
-<style scoped lang="scss">
-.dialog-footer {
- text-align: right;
+const statusLabel = (status) => {
+ if (status === "NORMAL") return "鍦ㄧ敤";
+ if (status === "IDLE") return "闂茬疆";
+ if (status === "REPAIR") return "缁翠慨";
+ return status;
+};
+
+// 璐圭敤绠＄悊閫昏緫
+const costDrawer = ref(false);
+const currentVehicleId = ref(null);
+const currentVehiclePlate = ref("");
+const costLoading = ref(false);
+const costList = ref([]);
+const costTotal = ref(0);
+const costQuery = reactive({ current: 1, size: 10, vehicleId: null });
+
+function costTypeLabel(type) {
+ const map = { MAINTENANCE: '淇濆吇', INSPECTION: '骞存', INSURANCE: '淇濋櫓', REPAIR: '缁翠慨' };
+ return map[type] || type;
}
-</style>
+function handleCost(row) {
+ currentVehicleId.value = row.id;
+ currentVehiclePlate.value = row.plateNumber;
+ costQuery.vehicleId = row.id;
+ costDrawer.value = true;
+ getCostList();
+}
+
+function getCostList() {
+ costLoading.value = true;
+ request({ url: '/vehicle/cost/listPage', method: 'get', params: costQuery }).then(res => {
+ costList.value = res.data.records;
+ costTotal.value = res.data.total;
+ costLoading.value = false;
+ });
+}
+
+const costOpen = ref(false);
+const costFormRef = ref(null);
+const costForm = reactive({ vehicleId: null, costType: undefined, amount: undefined, costDate: undefined, remark: undefined });
+const costRules = {
+ costType: [{ required: true, message: "璐圭敤绫诲瀷涓嶈兘涓虹┖", trigger: "change" }],
+ amount: [{ required: true, message: "閲戦涓嶈兘涓虹┖", trigger: "blur" }],
+ costDate: [{ required: true, message: "鏃ユ湡涓嶈兘涓虹┖", trigger: "change" }]
+};
+
+function handleAddCost() {
+ costForm.vehicleId = currentVehicleId.value;
+ costForm.costType = undefined;
+ costForm.amount = undefined;
+ costForm.costDate = undefined;
+ costForm.remark = undefined;
+ if(costFormRef.value) costFormRef.value.resetFields();
+ costOpen.value = true;
+}
+
+function submitCostForm() {
+ costFormRef.value.validate(valid => {
+ if (valid) {
+ request({ url: '/vehicle/cost', method: 'post', data: costForm }).then(res => {
+ ElMessage.success("娣诲姞鎴愬姛");
+ costOpen.value = false;
+ getCostList();
+ });
+ }
+ });
+}
+
+function handleDeleteCost(row) {
+ ElMessageBox.confirm('纭畾鍒犻櫎璇ヨ垂鐢ㄨ褰曪紵', '鎻愮ず', { type: 'warning' }).then(() => {
+ request({ url: '/vehicle/cost/' + row.id, method: 'delete' }).then(() => {
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ getCostList();
+ });
+ });
+}
+
+onMounted(() => {
+ getDicts();
+ getList();
+ getStats();
+});
+</script>
\ No newline at end of file
--
Gitblit v1.9.3