|
@@ -2,28 +2,65 @@
|
|
<div class="w-full h-full flex flex-col">
|
|
<div class="w-full h-full flex flex-col">
|
|
<div class="flex-1 overflow-y-auto">
|
|
<div class="flex-1 overflow-y-auto">
|
|
<CustomerForm ref="formFormRef" :formJson="formJson" :formValue="formVal"></CustomerForm>
|
|
<CustomerForm ref="formFormRef" :formJson="formJson" :formValue="formVal"></CustomerForm>
|
|
|
|
+ <template v-for="(item, index) in paymentPlanList">
|
|
|
|
+ <FoldingPanel :title="`回款计划(${index + 1})`" class="mb-4">
|
|
|
|
+ <template #foldingRight>
|
|
|
|
+ <div class="flex items-center">
|
|
|
|
+ <div class="pr-3 themeTextColor" @click="addPaymentCollection(index)">添加</div>
|
|
|
|
+ <div class="text-[red]" @click="deletePaymentCollection(index)">删除</div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template #foldContainer>
|
|
|
|
+ <div>
|
|
|
|
+ <van-cell title="是否已回款">
|
|
|
|
+ <template #default>
|
|
|
|
+ <div class="flex justify-end">
|
|
|
|
+ <van-checkbox v-model="item.isPayed">已回款</van-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </van-cell>
|
|
|
|
+ <van-cell title="回款日期" @click="showDatePicker(index)">
|
|
|
|
+ <template #default>
|
|
|
|
+ <van-field v-model="item.payDate" input-align="right" placeholder="请选择日期" class="resetStyles" readonly />
|
|
|
|
+ </template>
|
|
|
|
+ </van-cell>
|
|
|
|
+ <van-cell title="回款金额">
|
|
|
|
+ <template #default>
|
|
|
|
+ <van-field v-model="item.amount" type="digit" input-align="right" placeholder="请输入金额"
|
|
|
|
+ class="resetStyles" />
|
|
|
|
+ </template>
|
|
|
|
+ </van-cell>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </FoldingPanel>
|
|
|
|
+ </template>
|
|
</div>
|
|
</div>
|
|
<div class="mar-20px ">
|
|
<div class="mar-20px ">
|
|
<van-button type="primary" @click="onSubmit" class="w-full">
|
|
<van-button type="primary" @click="onSubmit" class="w-full">
|
|
{{ Object.keys(formVal).length > 0 ? '确定修改' : '确定添加' }}
|
|
{{ Object.keys(formVal).length > 0 ? '确定修改' : '确定添加' }}
|
|
</van-button>
|
|
</van-button>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+ <!-- 日期选择器 -->
|
|
|
|
+ <van-popup v-model:show="showPicker" destroy-on-close position="bottom" :style="{ height: '50%' }">
|
|
|
|
+ <van-date-picker v-model="pickerValue" @confirm="showPickerConfirm" @cancel="showPicker = false" />
|
|
|
|
+ </van-popup>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import { ref, onActivated } from 'vue';
|
|
|
|
|
|
+import { ref, onActivated, watch } from 'vue';
|
|
import { useLifecycle } from '@hooks/useCommon.js';
|
|
import { useLifecycle } from '@hooks/useCommon.js';
|
|
import CustomerForm from '@components/common/formForm/formView.vue'
|
|
import CustomerForm from '@components/common/formForm/formView.vue'
|
|
import requests from "@common/requests";
|
|
import requests from "@common/requests";
|
|
import useToast from "@hooks/useToast"
|
|
import useToast from "@hooks/useToast"
|
|
-import { CONTRACT_ADDITION_EDITING, CONTRACT_EDITING } from "@hooks/useApi"
|
|
|
|
|
|
+import { CONTRACT_ADDITION_EDITING, CONTRACT_EDITING, OBTAIN_THE_CONTRACT_REMITTANCE_LIST } from "@hooks/useApi"
|
|
import useRouterStore from "@store/useRouterStore.js";
|
|
import useRouterStore from "@store/useRouterStore.js";
|
|
|
|
+import FoldingPanel from '@components/common/foldingPanel.vue';
|
|
|
|
+import dayjs from 'dayjs';
|
|
|
|
|
|
const router = useRouterStore()
|
|
const router = useRouterStore()
|
|
-
|
|
|
|
const { toastText, toastSuccess, toastFail, toastLoading } = useToast()
|
|
const { toastText, toastSuccess, toastFail, toastLoading } = useToast()
|
|
-
|
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
formJson: { required: true },
|
|
formJson: { required: true },
|
|
formValue: { required: true },
|
|
formValue: { required: true },
|
|
@@ -31,14 +68,45 @@ const props = defineProps({
|
|
|
|
|
|
const formFormRef = ref(null)
|
|
const formFormRef = ref(null)
|
|
const formVal = ref({})
|
|
const formVal = ref({})
|
|
|
|
+const paymentPlanList = ref([{}])
|
|
|
|
+const showPicker = ref(false)
|
|
|
|
+const pickerValue = ref([])
|
|
|
|
+const rowIndex = ref(0)
|
|
|
|
+
|
|
|
|
+watch(() => formVal.value, (newValue) => {
|
|
|
|
+ console.log(newValue, '<==== 看看')
|
|
|
|
+ if (!newValue.id) {
|
|
|
|
+ paymentPlanList.value = [{}]
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ getPaymentCollectionList(newValue.id)
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
|
|
function onSubmit() {
|
|
function onSubmit() {
|
|
formFormRef.value.getJsonData().then((res) => {
|
|
formFormRef.value.getJsonData().then((res) => {
|
|
- if(!res.data) {
|
|
|
|
|
|
+ if (!res.data) {
|
|
return
|
|
return
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ for(let i in paymentPlanList.value) {
|
|
|
|
+ const row = paymentPlanList.value[i]
|
|
|
|
+ if(!row.payDate) {
|
|
|
|
+ toastText('回款日期不能为空')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if(!row.amount || row.amount == 0) {
|
|
|
|
+ toastText('回款金额不能为空和0')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if(formVal.value.id) {
|
|
|
|
+ paymentPlanList.value[i].contractId = formVal.value.id
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
toastLoading('保存中', 0)
|
|
toastLoading('保存中', 0)
|
|
- requests.post(props.formValue?.id ? CONTRACT_EDITING : CONTRACT_ADDITION_EDITING, { ...props.formValue, ...res.data }).then(() => {
|
|
|
|
|
|
+ requests.post(props.formValue?.id ? CONTRACT_EDITING : CONTRACT_ADDITION_EDITING, { ...props.formValue, ...res.data, paymentListStr: JSON.stringify(paymentPlanList.value) }).then(() => {
|
|
toastSuccess('保存成功')
|
|
toastSuccess('保存成功')
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
router.navigateBack({
|
|
router.navigateBack({
|
|
@@ -53,20 +121,52 @@ function onSubmit() {
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+function addPaymentCollection(index) {
|
|
|
|
+ paymentPlanList.value.splice(index + 1, 0, { isPayed: false, payDate: dayjs(new Date()).format('YYYY-MM-DD'), amount: null })
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function deletePaymentCollection(index) {
|
|
|
|
+ paymentPlanList.value.splice(index, 1)
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function showDatePicker(index) {
|
|
|
|
+ const { payDate } = paymentPlanList.value[index];
|
|
|
|
+ rowIndex.value = index;
|
|
|
|
+ const currentDate = dayjs(payDate ? new Date(payDate) : new Date()).format('YYYY-MM-DD').split('-');
|
|
|
|
+ pickerValue.value = currentDate;
|
|
|
|
+ showPicker.value = true;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function showPickerConfirm({ selectedValues }) {
|
|
|
|
+ paymentPlanList.value[rowIndex.value].payDate = selectedValues.join("-");
|
|
|
|
+ showPicker.value = false;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function getPaymentCollectionList(id) {
|
|
|
|
+ requests.post(OBTAIN_THE_CONTRACT_REMITTANCE_LIST, { contractId: id }).then((res) => {
|
|
|
|
+ paymentPlanList.value = res.data.length > 0 ? res.data : [{}]
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+
|
|
useLifecycle({
|
|
useLifecycle({
|
|
load: () => {
|
|
load: () => {
|
|
formVal.value = props.formValue
|
|
formVal.value = props.formValue
|
|
|
|
+ paymentPlanList.value = [{}]
|
|
},
|
|
},
|
|
init: () => {
|
|
init: () => {
|
|
formVal.value = props.formValue
|
|
formVal.value = props.formValue
|
|
|
|
+ paymentPlanList.value = [{}]
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
onActivated(() => {
|
|
onActivated(() => {
|
|
-
|
|
|
|
|
|
+
|
|
})
|
|
})
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
<style lang='scss' scoped>
|
|
/* 样式代码 */
|
|
/* 样式代码 */
|
|
|
|
+.resetStyles {
|
|
|
|
+ padding: 0;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|