<template>
|
<view class="account-detail">
|
<!-- 使用通用页面头部组件 -->
|
<PageHeader title="新增付款"
|
@back="onClickLeft" />
|
<!-- 表单内容 -->
|
<u-form @submit="onSubmit"
|
ref="formRef"
|
label-width="110"
|
input-align="right"
|
error-message-align="right">
|
<!-- 基本信息 -->
|
<u-cell-group title="基本信息"
|
class="form-section">
|
<u-form-item label="采购合同号"
|
class="form-item">
|
<u-input v-model="form.purchaseContractNumber"
|
placeholder="自动填充"
|
readonly />
|
</u-form-item>
|
<u-form-item label="销售合同号"
|
class="form-item">
|
<u-input v-model="form.salesContractNo"
|
placeholder="自动填充"
|
readonly />
|
</u-form-item>
|
<u-form-item label="供应商名称"
|
class="form-item">
|
<u-input v-model="form.supplierName"
|
placeholder="自动填充"
|
readonly />
|
</u-form-item>
|
<!-- <u-form-item label="发票号" class="form-item">
|
<u-input
|
v-model="form.invoiceNumber"
|
placeholder="自动填充"
|
readonly
|
/>
|
</u-form-item> -->
|
<!-- <u-form-item label="发票金额(元)" class="form-item">
|
<u-input
|
v-model="form.invoiceAmount"
|
placeholder="自动填充"
|
readonly
|
/>
|
</u-form-item> -->
|
<view class="tip-text">待付款金额：{{ currentNoReceiptAmount }} 元</view>
|
<u-form-item label="本次付款金额"
|
prop="currentPaymentAmount"
|
required
|
class="form-item">
|
<u-input v-model="form.currentPaymentAmount"
|
type="number"
|
placeholder="请输入"
|
@blur="changeNum"
|
clearable />
|
</u-form-item>
|
<u-form-item label="付款形式"
|
prop="paymentMethod"
|
required
|
class="form-item">
|
<u-input v-model="form.paymentMethod"
|
placeholder="请选择"
|
readonly
|
@click="showPaymentTypePicker" />
|
<template #right>
|
<up-icon name="arrow-right"
|
@click="showPaymentTypePicker"></up-icon>
|
</template>
|
</u-form-item>
|
<u-form-item label="付款日期"
|
prop="paymentDate"
|
required
|
class="form-item">
|
<u-input v-model="form.paymentDate"
|
placeholder="请选择"
|
readonly
|
@click="showDatePicker" />
|
<template #right>
|
<up-icon name="arrow-right"
|
@click="showDatePicker"></up-icon>
|
</template>
|
</u-form-item>
|
<u-form-item label="登记人"
|
class="form-item">
|
<u-input v-model="form.registrant"
|
placeholder="自动填充"
|
readonly />
|
</u-form-item>
|
<u-form-item label="登记日期"
|
prop="registrationtDate"
|
required
|
class="form-item">
|
<u-input v-model="form.registrationtDate"
|
placeholder="请选择"
|
readonly />
|
</u-form-item>
|
</u-cell-group>
|
<!-- 提交按钮 -->
|
<FooterButtons :loading="loading"
|
@cancel="onClickLeft"
|
@confirm="onSubmit" />
|
</u-form>
|
<!-- 付款方式选择器 -->
|
<up-action-sheet :show="showPaymentType"
|
title="选择付款方式"
|
:actions="receipt_payment_type"
|
@select="onPaymentTypeConfirm"
|
@close="showPaymentType = false" />
|
<!-- 日期选择器 -->
|
<up-datetime-picker :show="showDate"
|
v-model="form.paymentDate"
|
@confirm="onDateConfirm"
|
@cancel="showDate = false"
|
mode="date" />
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, computed } from "vue";
|
import FooterButtons from "@/components/FooterButtons.vue";
|
import useUserStore from "@/store/modules/user";
|
import { useDict } from "@/utils/dict";
|
import { paymentRegistrationAdd } from "@/api/procurementManagement/paymentEntry";
|
import { formatDateToYMD } from "@/utils/ruoyi";
|
|
// 替换 toast 和 notify 方法
|
const showToast = message => {
|
uni.showToast({
|
title: message,
|
icon: "none",
|
});
|
};
|
|
const showNotify = ({ type, message }) => {
|
uni.showToast({
|
title: message,
|
icon: type === "warning" ? "none" : "success",
|
});
|
};
|
|
const userStore = useUserStore();
|
|
// 表单引用
|
const formRef = ref();
|
|
// 响应式数据
|
const loading = ref(false);
|
const showPaymentType = ref(false);
|
const showDate = ref(false);
|
|
// 表单数据
|
const form = ref({
|
purchaseContractNumber: "",
|
salesContractNo: "",
|
supplierName: "",
|
invoiceNumber: "",
|
invoiceAmount: "",
|
taxRate: "",
|
currentPaymentAmount: "",
|
receiptPaymentType: "",
|
paymentMethod: "",
|
registrant: "",
|
paymentDate: "",
|
registrationtDate: "",
|
ticketRegistrationId: "",
|
});
|
const currentNoReceiptAmount = ref(0);
|
|
// 获取字典数据
|
const { receipt_payment_type: dictReceiptPaymentType } = useDict(
|
"receipt_payment_type"
|
);
|
|
// 转换字典数据格式为选择器需要的格式
|
const receipt_payment_type = computed(() => {
|
return dictReceiptPaymentType.value.map(item => ({
|
name: item.label,
|
value: item.value,
|
}));
|
});
|
|
// 返回上一页
|
const onClickLeft = () => {
|
uni.removeStorageSync("invoiceLedgerEditRow");
|
uni.navigateBack();
|
};
|
|
// 显示付款方式选择器
|
const showPaymentTypePicker = () => {
|
showPaymentType.value = true;
|
};
|
const changeNum = () => {
|
if (form.value.currentPaymentAmount > currentNoReceiptAmount.value) {
|
form.value.currentPaymentAmount = currentNoReceiptAmount.value;
|
showToast("不可大于待付款金额");
|
}
|
};
|
|
// 确认付款方式选择
|
const onPaymentTypeConfirm = item => {
|
form.value.receiptPaymentType = item.value;
|
form.value.paymentMethod = item.name;
|
showPaymentType.value = false;
|
};
|
|
// 显示日期选择器
|
const showDatePicker = () => {
|
showDate.value = true;
|
};
|
|
// 确认日期选择
|
const onDateConfirm = e => {
|
form.value.paymentDate = formatDateToYMD(e.value);
|
showDate.value = false;
|
};
|
|
// 提交表单
|
const onSubmit = () => {
|
// 表单验证
|
if (!form.value.currentPaymentAmount) {
|
showNotify({ type: "warning", message: "请输入付款金额" });
|
return;
|
}
|
if (!form.value.receiptPaymentType) {
|
showNotify({ type: "warning", message: "请选择付款形式" });
|
return;
|
}
|
if (!form.value.paymentDate) {
|
showNotify({ type: "warning", message: "请选择付款日期" });
|
return;
|
}
|
loading.value = true;
|
paymentRegistrationAdd(form.value)
|
.then(() => {
|
showToast("提交成功");
|
onClickLeft();
|
})
|
.catch(error => {
|
loading.value = false;
|
});
|
};
|
|
// 初始化数据
|
const initData = () => {
|
const rowStr = uni.getStorageSync("invoiceLedgerEditRow");
|
const row = JSON.parse(rowStr);
|
form.value = { ...row };
|
form.value.ticketRegistrationId = row.id;
|
form.value.id = null;
|
form.value.id = "";
|
currentNoReceiptAmount.value = row.pendingTicketsTotal
|
? parseFloat(row.pendingTicketsTotal).toFixed(2)
|
: "0";
|
form.value.registrant = userStore.nickName;
|
form.value.registrationtDate = getCurrentDate();
|
form.value.paymentDate = getCurrentDate();
|
};
|
// 获取当前日期并格式化为 YYYY-MM-DD
|
function getCurrentDate() {
|
const today = new Date();
|
const year = today.getFullYear();
|
const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始
|
const day = String(today.getDate()).padStart(2, "0");
|
return `${year}-${month}-${day}`;
|
}
|
onMounted(() => {
|
initData();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/static/scss/form-common.scss";
|
.tip-text {
|
font-size: 16px;
|
color: #383838;
|
margin-top: 10px;
|
margin-bottom: 10px;
|
}
|
</style>
|
