<template>
|
<view class="account-detail">
|
<PageHeader :title="pageTitle"
|
@back="goBack" />
|
<view class="form-container">
|
<up-form ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="110"
|
input-align="right"
|
error-message-align="right">
|
<u-cell-group title="加油信息"
|
class="form-section">
|
<up-form-item label="加油车辆"
|
prop="vehicleId"
|
required>
|
<FormPicker v-model="form.vehicleId"
|
type="select"
|
title="选择加油车辆"
|
:options="vehicleOptions"
|
placeholder="请选择加油车辆" />
|
</up-form-item>
|
<up-form-item label="关联加油卡"
|
prop="fuelCardId"
|
required>
|
<FormPicker v-model="form.fuelCardId"
|
type="select"
|
title="选择加油卡"
|
:options="cardOptions"
|
placeholder="请选择加油卡" />
|
<view v-if="currentBalanceText"
|
class="field-tip">
|
<text>{{ currentBalanceText }}</text>
|
</view>
|
</up-form-item>
|
<up-form-item label="加油日期"
|
prop="fuelDate"
|
required>
|
<FormPicker v-model="form.fuelDate"
|
type="date"
|
placeholder="请选择加油日期" />
|
</up-form-item>
|
<up-form-item label="发票号码"
|
prop="invoiceNo">
|
<up-input v-model="form.invoiceNo"
|
placeholder="请输入发票号码"
|
clearable />
|
</up-form-item>
|
</u-cell-group>
|
|
<u-cell-group title="金额与里程"
|
class="form-section">
|
<up-form-item label="金额(元)"
|
prop="amount"
|
required>
|
<up-input v-model="form.amount"
|
type="number"
|
placeholder="请输入金额"
|
clearable />
|
</up-form-item>
|
<up-form-item label="升数(L)"
|
prop="liters">
|
<up-input v-model="form.liters"
|
type="number"
|
placeholder="请输入升数"
|
clearable />
|
</up-form-item>
|
<up-form-item label="起始里程"
|
prop="startMileage">
|
<up-input v-model="form.startMileage"
|
type="number"
|
placeholder="请输入起始里程(km)"
|
clearable />
|
</up-form-item>
|
<up-form-item label="结束里程"
|
prop="endMileage">
|
<up-input v-model="form.endMileage"
|
type="number"
|
placeholder="请输入结束里程(km)"
|
clearable />
|
</up-form-item>
|
<up-form-item label="备注"
|
prop="remark">
|
<up-textarea v-model="form.remark"
|
placeholder="请输入备注"
|
auto-height />
|
</up-form-item>
|
</u-cell-group>
|
</up-form>
|
</view>
|
|
<FooterButtons :loading="loading"
|
confirmText="保存"
|
@cancel="goBack"
|
@confirm="handleSubmit" />
|
</view>
|
</template>
|
|
<script setup>
|
import { computed, onMounted, ref } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
import FooterButtons from "@/components/FooterButtons.vue";
|
import PageHeader from "@/components/PageHeader.vue";
|
import FormPicker from "@/components/FormPicker.vue";
|
import { loadDetailData } from "@/utils/detailCache";
|
import { formatDateToYMD } from "@/utils/ruoyi";
|
import {
|
addFuelRecord,
|
listAllFuelCard,
|
listFuelRecord,
|
listVehicleInfo,
|
updateFuelRecord,
|
} from "@/api/inventoryManagement/vehicle";
|
|
const formRef = ref();
|
const loading = ref(false);
|
const recordId = ref("");
|
const vehicleOptions = ref([]);
|
const allCards = ref([]);
|
|
const form = ref({
|
id: undefined,
|
vehicleId: "",
|
fuelCardId: "",
|
fuelDate: "",
|
invoiceNo: "",
|
amount: "",
|
liters: "",
|
startMileage: "",
|
endMileage: "",
|
remark: "",
|
});
|
|
const rules = {
|
vehicleId: [{ required: true, message: "请选择加油车辆", trigger: "change" }],
|
fuelCardId: [{ required: true, message: "请选择加油卡", trigger: "change" }],
|
fuelDate: [{ required: true, message: "请选择加油日期", trigger: "change" }],
|
amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
|
};
|
|
const pageTitle = computed(() =>
|
recordId.value ? "编辑加油记录" : "新增加油记录"
|
);
|
|
// 已注销的卡不能用于新增加油记录
|
const cardOptions = computed(() =>
|
allCards.value
|
.filter(item => item.status !== "CANCELLED")
|
.map(item => ({
|
name: `${item.cardNumber || ""} - ${item.issuer || ""}`,
|
value: item.id,
|
}))
|
);
|
|
const currentBalanceText = computed(() => {
|
if (!form.value.fuelCardId) return "";
|
const card = allCards.value.find(
|
item => String(item.id) === String(form.value.fuelCardId)
|
);
|
if (!card) return "";
|
return `当前余额: ${Number(card.currentBalance || 0).toFixed(2)} 元`;
|
});
|
|
const goBack = () => uni.navigateBack();
|
|
const loadOptions = async () => {
|
const [vehicles, cards] = await Promise.all([
|
listVehicleInfo({ current: -1, size: -1 }).catch(() => ({})),
|
listAllFuelCard().catch(() => ({})),
|
]);
|
const vehicleRows =
|
vehicles?.data?.records || vehicles?.records || vehicles?.data || [];
|
vehicleOptions.value = (Array.isArray(vehicleRows) ? vehicleRows : []).map(
|
item => ({ name: item.plateNumber, value: item.id })
|
);
|
const cardRows = cards?.data || [];
|
allCards.value = Array.isArray(cardRows) ? cardRows : [];
|
};
|
|
// 加油记录没有单条详情接口，从列表里按 id 捞
|
const fetchRecord = async id => {
|
const res = await listFuelRecord({ current: -1, size: -1 });
|
const rows = res?.data?.records || res?.records || res?.data || [];
|
const found = (Array.isArray(rows) ? rows : []).find(
|
item => String(item.id) === String(id)
|
);
|
return { data: found };
|
};
|
|
const loadDetail = async () => {
|
if (!recordId.value) return;
|
let data = null;
|
try {
|
data = await loadDetailData({
|
cacheKey: "fuelRecordDetail",
|
id: recordId.value,
|
fetcher: fetchRecord,
|
});
|
} catch (error) {
|
data = null;
|
}
|
if (!data) {
|
uni.showToast({ title: "获取加油记录失败", icon: "none" });
|
return;
|
}
|
form.value = { ...form.value, ...data, id: data.id };
|
};
|
|
const handleSubmit = async () => {
|
const valid = await formRef.value.validate().catch(() => false);
|
if (!valid) return;
|
|
const card = allCards.value.find(
|
item => String(item.id) === String(form.value.fuelCardId)
|
);
|
const balance = Number(card?.currentBalance || 0);
|
const amount = Number(form.value.amount || 0);
|
if (!recordId.value && balance < amount) {
|
uni.showToast({
|
title: `该加油卡余额不足，当前余额 ${balance} 元`,
|
icon: "none",
|
});
|
}
|
|
loading.value = true;
|
const action = recordId.value ? updateFuelRecord : addFuelRecord;
|
action({
|
...form.value,
|
id: recordId.value || undefined,
|
amount: amount,
|
liters: Number(form.value.liters || 0),
|
startMileage: Number(form.value.startMileage || 0),
|
endMileage: Number(form.value.endMileage || 0),
|
})
|
.then(() => {
|
uni.showToast({ title: "保存成功", icon: "success" });
|
setTimeout(() => uni.navigateBack(), 300);
|
})
|
.catch(() => {
|
uni.showToast({ title: "保存失败", icon: "none" });
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
};
|
|
onLoad(options => {
|
if (options?.id) {
|
recordId.value = options.id;
|
form.value.id = options.id;
|
} else {
|
form.value.fuelDate = formatDateToYMD(Date.now());
|
}
|
});
|
|
onMounted(async () => {
|
await loadOptions();
|
if (recordId.value) await loadDetail();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/static/scss/form-common.scss";
|
|
.account-detail {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding-bottom: 100px;
|
}
|
|
.form-container {
|
padding: 12px 12px 0;
|
}
|
|
.form-section {
|
margin-bottom: 12px;
|
border-radius: 12px;
|
overflow: hidden;
|
box-shadow: 0 2px 10px rgba(15, 35, 95, 0.05);
|
}
|
|
.field-tip {
|
padding-top: 4px;
|
font-size: 12px;
|
color: #909399;
|
}
|
|
:deep(.u-cell-group__title) {
|
padding: 14px 18px 10px !important;
|
font-size: 15px !important;
|
font-weight: 600 !important;
|
color: #22324d !important;
|
background: #f8fbff !important;
|
}
|
</style>
|
