| | |
| | | <!-- 手动统计对话框 --> |
| | | <el-dialog title="手动里程统计" :visible.sync="calculateOpen" width="500px" append-to-body> |
| | | <el-form ref="calculateForm" :model="calculateForm" :rules="calculateRules" label-width="100px"> |
| | | <el-form-item label="车辆ID" prop="vehicleId"> |
| | | <el-input v-model="calculateForm.vehicleId" placeholder="请输入车辆ID" type="number" /> |
| | | <el-form-item label="车牌号" prop="vehicleId"> |
| | | <el-select |
| | | v-model="calculateForm.vehicleId" |
| | | placeholder="请输入车牌号搜索" |
| | | filterable |
| | | remote |
| | | :remote-method="searchVehicles" |
| | | :loading="vehicleSearchLoading" |
| | | clearable |
| | | style="width: 100%" |
| | | @change="handleVehicleChange" |
| | | > |
| | | <el-option |
| | | v-for="vehicle in vehicleOptions" |
| | | :key="vehicle.vehicleId" |
| | | :label="vehicle.vehicleNo" |
| | | :value="vehicle.vehicleId" |
| | | > |
| | | <span style="float: left">{{ vehicle.vehicleNo }}</span> |
| | | <span style="float: right; color: #8492a6; font-size: 13px" v-if="vehicle.deptName"> |
| | | {{ vehicle.deptName }} |
| | | </span> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="统计日期" prop="statDate"> |
| | | <el-date-picker |
| | |
| | | <script> |
| | | import { listMileageStats, getMileageStats, delMileageStats, calculateMileageStats, batchCalculateMileageStats, getSegmentsByDateRange } from "@/api/system/mileageStats"; |
| | | import { listDept } from "@/api/system/dept"; |
| | | import { listVehicle } from "@/api/system/vehicle"; |
| | | |
| | | export default { |
| | | name: "MileageStats", |
| | |
| | | calculateLoading: false, |
| | | // 批量统计加载状态 |
| | | batchCalculateLoading: false, |
| | | // 车辆搜索加载状态 |
| | | vehicleSearchLoading: false, |
| | | // 车辆选项列表 |
| | | vehicleOptions: [], |
| | | // 查询参数 |
| | | queryParams: { |
| | | pageNum: 1, |
| | |
| | | // 手动统计表单校验 |
| | | calculateRules: { |
| | | vehicleId: [ |
| | | { required: true, message: "车辆ID不能为空", trigger: "blur" } |
| | | { required: true, message: "请选择车辆", trigger: "change" } |
| | | ], |
| | | statDate: [ |
| | | { required: true, message: "统计日期不能为空", trigger: "change" } |
| | |
| | | /** 手动统计按钮操作 */ |
| | | handleCalculate() { |
| | | this.reset(); |
| | | this.vehicleOptions = []; |
| | | this.calculateOpen = true; |
| | | // 打开对话框时加载一些车辆数据 |
| | | this.searchVehicles(''); |
| | | }, |
| | | /** 搜索车辆 */ |
| | | searchVehicles(query) { |
| | | if (query !== '') { |
| | | this.vehicleSearchLoading = true; |
| | | listVehicle({ |
| | | vehicleNo: query, |
| | | pageNum: 1, |
| | | pageSize: 50 |
| | | }).then(response => { |
| | | this.vehicleOptions = response.rows || []; |
| | | this.vehicleSearchLoading = false; |
| | | }).catch(() => { |
| | | this.vehicleSearchLoading = false; |
| | | }); |
| | | } else { |
| | | // 如果查询为空,加载前50条车辆数据 |
| | | this.vehicleSearchLoading = true; |
| | | listVehicle({ |
| | | pageNum: 1, |
| | | pageSize: 50 |
| | | }).then(response => { |
| | | this.vehicleOptions = response.rows || []; |
| | | this.vehicleSearchLoading = false; |
| | | }).catch(() => { |
| | | this.vehicleSearchLoading = false; |
| | | }); |
| | | } |
| | | }, |
| | | /** 车辆选择变化 */ |
| | | handleVehicleChange(value) { |
| | | // 可以在这里添加额外的处理逻辑 |
| | | console.log('选择的车辆ID:', value); |
| | | }, |
| | | /** 批量统计按钮操作 */ |
| | | handleBatchCalculate() { |