<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="基本信息">
|
<u-form-item label="销售合同号" border-bottom>
|
<u-input
|
v-model="form.salesContractNo"
|
placeholder="自动填充"
|
readonly
|
/>
|
</u-form-item>
|
<u-form-item label="客户名称" border-bottom>
|
<u-input
|
v-model="form.customerName"
|
placeholder="自动填充"
|
readonly
|
/>
|
</u-form-item>
|
<!-- <u-form-item label="发票号" border-bottom>-->
|
<!-- <u-input-->
|
<!-- v-model="form.invoiceNo"-->
|
<!-- placeholder="自动填充"-->
|
<!-- readonly-->
|
<!-- />-->
|
<!-- </u-form-item>-->
|
<!-- <u-form-item label="发票金额(元)" border-bottom>-->
|
<!-- <u-input-->
|
<!-- v-model="form.invoiceTotal"-->
|
<!-- placeholder="自动填充"-->
|
<!-- readonly-->
|
<!-- />-->
|
<!-- </u-form-item>-->
|
<!-- <u-form-item label="税率" border-bottom>-->
|
<!-- <u-input-->
|
<!-- v-model="form.taxRate"-->
|
<!-- placeholder="自动填充"-->
|
<!-- readonly-->
|
<!-- />-->
|
<!-- </u-form-item>-->
|
<view class="tip-text">待回款金额：{{ currentNoReceiptAmount }} 元</view>
|
<u-form-item label="本次回款金额" prop="receiptPaymentAmount" required border-bottom>
|
<u-input
|
v-model="form.receiptPaymentAmount"
|
type="number"
|
placeholder="请输入"
|
@blur="changeNum"
|
clearable
|
/>
|
</u-form-item>
|
<u-form-item label="回款形式" prop="receiptPaymentTypeName" required border-bottom>
|
<u-input
|
v-model="form.receiptPaymentTypeName"
|
placeholder="请选择"
|
readonly
|
@click="showPaymentTypePicker"
|
/>
|
<template #right>
|
<up-icon
|
name="arrow-right"
|
@click="showPaymentTypePicker"
|
></up-icon>
|
</template>
|
</u-form-item>
|
<u-form-item label="来款日期" prop="receiptPaymentDate" required border-bottom>
|
<u-input
|
v-model="form.receiptPaymentDate"
|
placeholder="请选择"
|
readonly
|
@click="showDatePicker"
|
/>
|
<template #right>
|
<up-icon
|
name="arrow-right"
|
@click="showDatePicker"
|
></up-icon>
|
</template>
|
</u-form-item>
|
<u-form-item label="登记人" border-bottom>
|
<u-input
|
v-model="form.registrant"
|
placeholder="自动填充"
|
readonly
|
/>
|
</u-form-item>
|
</u-cell-group>
|
|
<!-- 提交按钮 -->
|
<FooterButtons
|
cancelText="取消"
|
confirmText="保存"
|
:loading="loading"
|
@cancel="onClickLeft"
|
@confirm="onSubmit"
|
/>
|
</u-form>
|
|
<!-- 回款方式选择器 -->
|
<up-action-sheet
|
:show="showPaymentType"
|
:actions="receipt_payment_type"
|
title="选择回款形式"
|
@select="onPaymentTypeConfirm"
|
@close="showPaymentType = false"
|
/>
|
|
<!-- 日期选择器 -->
|
<up-popup :show="showDate" mode="bottom" @close="showDate = false">
|
<up-datetime-picker
|
:show="true"
|
v-model="currentDate"
|
@confirm="onDateConfirm"
|
@cancel="showDate = false"
|
mode="date"
|
/>
|
</up-popup>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, computed } from 'vue'
|
import FooterButtons from '@/components/FooterButtons.vue'
|
import { receiptPaymentSaveOrUpdate, invoiceInfo } from '@/api/salesManagement/receiptPayment'
|
import useUserStore from '@/store/modules/user'
|
import { useDict } from '@/utils/dict'
|
import { formatDateToYMD } from '@/utils/ruoyi'
|
|
// 显示提示信息
|
const showToast = (message) => {
|
uni.showToast({
|
title: message,
|
icon: 'none'
|
})
|
}
|
|
// 显示加载提示
|
const showLoadingToast = (message) => {
|
uni.showLoading({
|
title: message,
|
mask: true
|
});
|
};
|
|
// 关闭加载提示
|
const closeToast = () => {
|
uni.hideLoading();
|
};
|
|
const userStore = useUserStore()
|
|
// 表单引用
|
const formRef = ref()
|
|
// 响应式数据
|
const loading = ref(false)
|
const showPaymentType = ref(false)
|
const pickerValue = ref([])
|
const showDate = ref(false)
|
const currentDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()])
|
|
// 表单数据
|
const form = ref({
|
salesContractNo: '',
|
customerName: '',
|
invoiceNo: '',
|
invoiceTotal: '',
|
taxRate: '',
|
receiptPaymentAmount: '',
|
receiptPaymentType: '',
|
receiptPaymentTypeName: '',
|
registrant: '',
|
receiptPaymentDate: '',
|
invoiceLedgerId: ''
|
})
|
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.receiptPaymentAmount > currentNoReceiptAmount.value) {
|
form.value.receiptPaymentAmount = currentNoReceiptAmount.value
|
showToast('不可大于待回款金额')
|
}
|
}
|
|
// 确认回款方式选择
|
const onPaymentTypeConfirm = (action) => {
|
form.value.receiptPaymentType = action.value
|
form.value.receiptPaymentTypeName = action.name
|
showPaymentType.value = false
|
}
|
|
// 显示日期选择器
|
const showDatePicker = () => {
|
showDate.value = true
|
}
|
|
// 确认日期选择
|
const onDateConfirm = (e) => {
|
form.value.receiptPaymentDate = formatDateToYMD(e.value)
|
currentDate.value = formatDateToYMD(e.value)
|
showDate.value = false;
|
}
|
|
// 提交表单
|
const onSubmit = () => {
|
// 表单验证
|
if (!form.value.receiptPaymentAmount) {
|
showToast('请输入回款金额')
|
return
|
}
|
|
if (!form.value.receiptPaymentType) {
|
showToast('请选择回款形式')
|
return
|
}
|
loading.value = true
|
let updateData = {
|
id: form.value.id,
|
receiptPaymentType: form.value.receiptPaymentType,
|
receiptPaymentAmount: form.value.receiptPaymentAmount,
|
};
|
receiptPaymentSaveOrUpdate(updateData)
|
.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.receiptPaymentTypeName = formatReceiptType(row.receiptPaymentType);
|
currentNoReceiptAmount.value = row.noReceiptAmount
|
}
|
const formatReceiptType = (type) => {
|
if (type == 0) {
|
return "电汇";
|
} else if (type == 1) {
|
return "承兑";
|
} else {
|
return "未知";
|
}
|
};
|
|
onMounted(() => {
|
initData()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
@import '@/static/scss/form-common.scss';
|
|
.account-detail {
|
min-height: 100vh;
|
background: #f5f5f5;
|
padding-bottom: 5rem;
|
}
|
</style>
|
