<template>
|
<view class="payment-edit">
|
<!-- 使用通用页面头部组件 -->
|
<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>
|
|
// 替换 toast 和 notify 方法
|
const showToast = (message) => {
|
uni.showToast({
|
title: message,
|
icon: 'none'
|
})
|
}
|
|
const showNotify = ({ type, message }) => {
|
uni.showToast({
|
title: message,
|
icon: type === 'warning' ? 'none' : 'success'
|
})
|
}
|
|
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, paymentRegistrationEdit} from "@/api/procurementManagement/paymentEntry";
|
import { formatDateToYMD } from '@/utils/ruoyi'
|
|
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
|
paymentRegistrationEdit(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 };
|
currentNoReceiptAmount.value = row.unPaymentAmountTotal || 0;
|
}
|
// 获取当前日期并格式化为 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';
|
</style>
|
