<template>
|
<view class="ledger-detail">
|
<!-- 使用通用页面头部组件 -->
|
<PageHeader :title="operationType === 'edit' ? '编辑设备台账' : '新增设备台账'" @back="goBack" />
|
|
<!-- 表单内容 -->
|
<van-form @submit="sendForm" ref="formRef" label-width="110px" input-align="right" error-message-align="right" scroll-to-error scroll-to-error-position="center">
|
<!-- 基本信息 -->
|
<van-cell-group title="基本信息" inset>
|
<van-field
|
v-model="form.deviceName"
|
label="设备名称"
|
placeholder="请输入设备名称"
|
:rules="formRules.deviceName"
|
required
|
clearable
|
/>
|
<van-field
|
v-model="form.deviceModel"
|
label="规格型号"
|
placeholder="请输入规格型号"
|
:readonly="form.deviceModel != null && operationType === 'edit'"
|
:rules="formRules.deviceModel"
|
required
|
clearable
|
/>
|
<van-field
|
v-model="form.supplierName"
|
label="供应商"
|
required
|
placeholder="请输入供应商"
|
:rules="formRules.supplierName"
|
clearable
|
/>
|
<van-field
|
v-model="form.unit"
|
label="单位"
|
required
|
placeholder="请输入单位"
|
:rules="formRules.unit"
|
clearable
|
/>
|
<van-field
|
v-model="form.taxRate"
|
required
|
label="税率(%)"
|
placeholder="请选择"
|
readonly
|
:rules="formRules.taxRate"
|
@click="showTaxRatePicker"
|
clearable
|
/>
|
<van-field
|
v-model="form.number"
|
label="数量"
|
required
|
type="number"
|
placeholder="请输入数量"
|
:rules="formRules.number"
|
@blur="mathNum"
|
clearable
|
/>
|
<van-field
|
v-model="form.taxIncludingPriceUnit"
|
label="含税单价"
|
required
|
type="number"
|
placeholder="请输入含税单价"
|
:rules="formRules.taxIncludingPriceUnit"
|
@blur="mathNum"
|
clearable
|
/>
|
<van-field
|
v-model="form.taxIncludingPriceTotal"
|
label="含税总价"
|
placeholder="自动生成"
|
readonly
|
/>
|
<van-field
|
v-model="form.unTaxIncludingPriceTotal"
|
label="不含税总价"
|
placeholder="自动生成"
|
readonly
|
/>
|
<van-field
|
v-model="form.createTime"
|
label="录入日期"
|
placeholder="请选择"
|
readonly
|
@click="showDatePicker"
|
required
|
clearable
|
/>
|
</van-cell-group>
|
|
<!-- 提交按钮 -->
|
<view class="footer-btns">
|
<van-button class="cancel-btn" @click="goBack">取消</van-button>
|
<van-button class="save-btn" native-type="submit" form-type="submit" :loading="loading">保存</van-button>
|
</view>
|
</van-form>
|
|
<!-- 税率选择器 -->
|
<van-popup v-model:show="showTaxRate" position="bottom">
|
<van-picker
|
:model-value="taxRatePickerValue"
|
:columns="taxRateOptions"
|
@confirm="onTaxRateConfirm"
|
@cancel="showTaxRate = false"
|
/>
|
</van-popup>
|
|
<!-- 日期选择器 -->
|
<van-popup v-model:show="showDate" position="bottom">
|
<van-date-picker
|
v-model="currentDate"
|
title="选择日期"
|
@confirm="onDateConfirm"
|
@cancel="showDate = false"
|
/>
|
</van-popup>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from 'vue';
|
import { onShow } from '@dcloudio/uni-app';
|
import PageHeader from '@/components/PageHeader.vue';
|
import { getLedgerById, addLedger, editLedger } from '@/api/equipmentManagement/ledger';
|
import dayjs from "dayjs";
|
import {
|
calculateTaxIncludeTotalPrice,
|
calculateTaxExclusiveTotalPrice,
|
} from "@/utils/summarizeTable";
|
import { showToast } from 'vant';
|
|
defineOptions({
|
name: "设备台账表单",
|
});
|
|
// 表单引用
|
const formRef = ref(null);
|
const operationType = ref('');
|
const loading = ref(false);
|
const showTaxRate = ref(false);
|
const taxRatePickerValue = ref([]);
|
const showDate = ref(false);
|
const currentDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]);
|
|
// 表单验证规则
|
const formRules = {
|
deviceName: [{ required: true, trigger: "blur", message: "请输入" }],
|
deviceModel: [{ required: true, trigger: "blur", message: "请输入" }],
|
supplierName: [{ required: true, trigger: "blur", message: "请输入" }],
|
unit: [{ required: true, trigger: "blur", message: "请输入" }],
|
number: [{ required: true, trigger: "blur", message: "请输入" }],
|
taxIncludingPriceUnit: [{ required: true, trigger: "blur", message: "请输入" }],
|
taxRate: [{ required: true, trigger: "change", message: "请输入" }],
|
};
|
|
// 使用 ref 声明表单数据
|
const form = ref({
|
deviceName: undefined, // 设备名称
|
deviceModel: undefined, // 规格型号
|
supplierName: undefined, // 供应商
|
unit: undefined, // 单位
|
number: undefined, // 数量
|
taxIncludingPriceUnit: undefined, // 含税单价
|
taxIncludingPriceTotal: undefined, // 含税总价
|
taxRate: undefined, // 税率
|
unTaxIncludingPriceTotal: undefined, // 不含税总价
|
createTime: dayjs().format("YYYY-MM-DD"), // 录入日期
|
});
|
|
// 税率选项
|
const taxRateOptions = computed(() => {
|
return [
|
{ text: '1', value: 1 },
|
{ text: '6', value: 6 },
|
{ text: '13', value: 13 }
|
]
|
});
|
|
// 加载表单数据
|
const loadForm = async (id) => {
|
if (id) {
|
operationType.value = 'edit';
|
}
|
try {
|
const { code, data } = await getLedgerById(id);
|
if (code == 200) {
|
form.value.deviceName = data.deviceName;
|
form.value.deviceModel = data.deviceModel;
|
form.value.supplierName = data.supplierName;
|
form.value.unit = data.unit;
|
form.value.number = data.number;
|
form.value.taxIncludingPriceUnit = data.taxIncludingPriceUnit;
|
form.value.taxIncludingPriceTotal = data.taxIncludingPriceTotal;
|
form.value.taxRate = data.taxRate;
|
form.value.unTaxIncludingPriceTotal = data.unTaxIncludingPriceTotal;
|
form.value.createTime = data.createTime;
|
}
|
} catch (e) {
|
showToast('获取详情失败');
|
}
|
};
|
|
// 数学计算
|
const mathNum = () => {
|
if (!form.value.taxIncludingPriceUnit) {
|
showToast("请输入单价");
|
return;
|
}
|
if (!form.value.number) {
|
showToast("请输入数量");
|
return;
|
}
|
form.value.taxIncludingPriceTotal = calculateTaxIncludeTotalPrice(
|
form.value.taxIncludingPriceUnit,
|
form.value.number
|
);
|
if (form.value.taxRate) {
|
form.value.unTaxIncludingPriceTotal = calculateTaxExclusiveTotalPrice(
|
form.value.taxIncludingPriceTotal,
|
form.value.taxRate
|
);
|
}
|
};
|
|
// 清除表单校验状态
|
const clearValidate = () => {
|
formRef.value?.clearValidate();
|
};
|
|
// 重置表单数据和校验状态
|
const resetForm = () => {
|
form.value = {
|
deviceName: undefined,
|
deviceModel: undefined,
|
supplierName: undefined,
|
unit: undefined,
|
number: undefined,
|
taxIncludingPriceUnit: undefined,
|
taxIncludingPriceTotal: undefined,
|
taxRate: undefined,
|
unTaxIncludingPriceTotal: undefined,
|
createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
};
|
};
|
|
const resetFormAndValidate = () => {
|
resetForm();
|
clearValidate();
|
};
|
|
// 提交表单
|
const sendForm = async () => {
|
try {
|
// 手动验证表单
|
await formRef.value?.validate();
|
|
loading.value = true;
|
const id = getPageId();
|
|
// 准备提交数据，createTime 加上当前时分秒
|
const submitData = { ...form.value };
|
if (submitData.createTime && !submitData.createTime.includes(':')) {
|
// 如果 createTime 只包含日期，添加当前时分秒
|
submitData.createTime = submitData.createTime + ' ' + dayjs().format('HH:mm:ss');
|
}
|
|
const { code } = id
|
? await editLedger({ id: id, ...submitData })
|
: await addLedger(submitData);
|
|
if (code == 200) {
|
showToast("操作成功");
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1500);
|
} else {
|
loading.value = false;
|
}
|
} catch (e) {
|
loading.value = false;
|
showToast('表单验证失败');
|
}
|
};
|
|
// 返回上一页
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
|
// 获取页面参数
|
const getPageParams = () => {
|
const pages = getCurrentPages();
|
const currentPage = pages[pages.length - 1];
|
const options = currentPage.options;
|
|
if (options.id) {
|
// 编辑模式，获取详情
|
loadForm(options.id);
|
} else {
|
// 新增模式
|
operationType.value = 'add';
|
}
|
};
|
|
// 获取页面ID
|
const getPageId = () => {
|
const pages = getCurrentPages();
|
const currentPage = pages[pages.length - 1];
|
const options = currentPage.options;
|
return options.id;
|
};
|
|
// 显示税率选择器
|
const showTaxRatePicker = () => {
|
showTaxRate.value = true;
|
};
|
|
// 确认税率选择
|
const onTaxRateConfirm = ({ selectedValues, selectedOptions }) => {
|
form.value.taxRate = selectedOptions[0].value;
|
taxRatePickerValue.value = selectedValues;
|
showTaxRate.value = false;
|
mathNum(); // 重新计算
|
};
|
|
// 显示日期选择器
|
const showDatePicker = () => {
|
showDate.value = true;
|
};
|
|
// 确认日期选择
|
const onDateConfirm = ({ selectedValues }) => {
|
// 只保存年月日，不包含时分秒
|
form.value.createTime = selectedValues.join('-');
|
currentDate.value = selectedValues;
|
showDate.value = false;
|
};
|
|
onShow(() => {
|
// 页面显示时获取参数
|
getPageParams();
|
});
|
|
onMounted(() => {
|
// 页面加载时获取参数
|
getPageParams();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.ledger-detail {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding-bottom: 5rem;
|
}
|
|
.footer-btns {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding: 0.75rem 0;
|
box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05);
|
z-index: 1000;
|
}
|
|
.cancel-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #FFFFFF;
|
width: 6.375rem;
|
background: #C7C9CC;
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
|
.save-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #FFFFFF;
|
width: 14rem;
|
background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
|
// 响应式调整
|
@media (max-width: 768px) {
|
.submit-section {
|
padding: 12px;
|
}
|
}
|
|
.tip-text {
|
padding: 4px 16px 0 16px;
|
font-size: 12px;
|
color: #888;
|
}
|
</style>
|
