子组件
```bash
<template>
<a-config-provider :locale="locale">
<a-form ref="formRef" :model="formModel" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
<!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
<a-form-item v-show="false" name="lesseePayId" label="主键ID">
<a-input v-model:value="formModel.lesseePayId" />
</a-form-item>
<a-row justify="start">
<a-col :md="24">
<a-form-item
label="租户"
name="lesseeId"
:rules="[{ required: true, message: '请选择租户！' }]"
:label-col="{ span: 3 }"
:wrapper-col="{ span: 21 }"
>
<a-select v-model:value="formModel.lesseeId" placeholder="请选择" allowClear>
<a-select-option v-for="item in lesseeData" :value="item.lesseeId" :key="item.lesseeId">
{{ item.lesseeName }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第一季度金额(￥)" name="firstQuarterMoney">
<a-input-number v-model:value="formModel.firstQuarterMoney" :min="0" />
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第一季度收租人" name="firstQuarterCollector">
<a-input v-model:value="formModel.firstQuarterCollector" />
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第一季度交租日期" name="firstQuarterDate">
<a-date-picker v-model:value="formModel.firstQuarterDate" :min="0" />
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第二季度金额(￥)" name="secondQuarterMoney">
<a-input-number v-model:value="formModel.secondQuarterMoney" :min="0" />
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第二季度收租人" name="secondQuarterCollector">
<a-input v-model:value="formModel.secondQuarterCollector" />
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第二季度交租日期" name="secondQuarterDate">
<a-date-picker v-model:value="formModel.secondQuarterDate" />
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第三季度金额(￥)" name="thirdQuarterMoney">
<a-input-number v-model:value="formModel.thirdQuarterMoney" :min="0" />
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第三季度收租人" name="thirdQuarterCollector">
<a-input v-model:value="formModel.thirdQuarterCollector" />
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第三季度交租日期" name="thirdQuarterDate">
<a-date-picker v-model:value="formModel.thirdQuarterDate" />
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第四季度金额(￥)" name="fourthQuarterMoney">
<a-input-number v-model:value="formModel.fourthQuarterMoney" :min="0" />
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第四季度收租人" name="fourthQuarterCollector">
<a-input v-model:value="formModel.fourthQuarterCollector" />
</a-form-item>
</a-col>
<a-col :md="8">
<a-form-item label="第四季度交租日期" name="fourthQuarterDate">
<a-date-picker v-model:value="formModel.fourthQuarterDate" />
</a-form-item>
</a-col>
<a-col :md="24">
<a-form-item label="备注" name="remark" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
<a-textarea v-model:value="formModel.remark" :auto-size="{ minRows: 2, maxRows: 5 }" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-config-provider>
</template>
<script setup>
import { ref, reactive, watch, nextTick, defineExpose } from 'vue'
import dayjs from 'dayjs'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import 'dayjs/locale/zh-cn'
const locale = zhCN
dayjs.locale('en')
const props = defineProps({
model: {
type: Object,
default: () => null
},
lesseeData: {
type: Array,
required: true
}
// incomeType:{
// type: String,
// required: true
// }
})
console.log(props)
// 表单ref
const formRef = ref()
// 提交后loading
const resetForm = () => {
formRef.value.resetFields()
}
// 表单数据
const formModel = reactive({
lesseePayId: '',
lesseeId: '',
firstQuarterMoney: '',
secondQuarterMoney: '',
thirdQuarterMoney: '',
fourthQuarterMoney: '',
firstQuarterCollector: '',
secondQuarterCollector: '',
thirdQuarterCollector: '',
fourthQuarterCollector: '',
firstQuarterDate: '',
secondQuarterDate: '',
thirdQuarterDate: '',
fourthQuarterDate: '',
incomeType: '',
remark: ''
})
const getSonData = () => {
return formModel
}
watch(
() => props.model,
model => {
if (!model) {
// 新增
nextTick(() => {
formRef.value.resetFields()
})
return
}
// 编辑
nextTick(() => {
for (const key in formModel) {
formModel[key] = model[key]
if (formModel.firstQuarterDate) {
formModel.firstQuarterDate = dayjs(formModel.firstQuarterDate, 'YYYY-MM-DD')
}
if (formModel.secondQuarterDate) {
formModel.secondQuarterDate = dayjs(formModel.secondQuarterDate, 'YYYY-MM-DD')
}
if (formModel.thirdQuarterDate) {
formModel.thirdQuarterDate = dayjs(formModel.thirdQuarterDate, 'YYYY-MM-DD')
}
if (formModel.fourthQuarterDate) {
formModel.fourthQuarterDate = dayjs(formModel.fourthQuarterDate, 'YYYY-MM-DD')
}
}
})
}
)
defineExpose({
resetForm,
getSonData
})
</script>
<style lang="less" scoped></style>
父组件
<template>
<a-config-provider :locale="locale">
<a-modal
:title="title"
:width="1200"
:visible="props.visible"
:confirmLoading="loading"
:maskClosable="false"
@ok="handleOk"
@cancel="handleCancelModel"
>
<a-spin :spinning="loading">
<a-tabs type="card" v-model:activeKey="incomeType">
<a-tab-pane key="1" tab="物业收入">
<son-form ref="sonFormData1" :lesseeData="lesseeData" :model="model1"></son-form>
</a-tab-pane>
<a-tab-pane key="2" tab="房租(服务收入)">
<son-form ref="sonFormData2" :lesseeData="lesseeData" :model="model2"></son-form>
</a-tab-pane>
<a-tab-pane key="3" tab="物业费(服务收入)">
<son-form ref="sonFormData3" :lesseeData="lesseeData" :model="model3"></son-form>
</a-tab-pane>
<a-tab-pane key="4" tab="广告费(服务收入)">
<son-form ref="sonFormData4" :lesseeData="lesseeData" :model="model4"></son-form>
</a-tab-pane>
<a-tab-pane key="5" tab="摊位费(服务收入)">
<son-form ref="sonFormData5" :lesseeData="lesseeData" :model="model5"></son-form>
</a-tab-pane>
<a-tab-pane key="6" tab="其他费用(服务收入)">
<son-form ref="sonFormData6" :lesseeData="lesseeData" :model="model6"></son-form>
</a-tab-pane>
</a-tabs>
</a-spin>
</a-modal>
</a-config-provider>
</template>
<script setup>
import { computed, ref, reactive } from 'vue'
// import { updateLesseePay, batchInsertLesseePay } from '@/api/lessee'
import { batchInsertLesseePay } from '@/api/lessee'
import { message } from 'ant-design-vue'
import SonForm from './SonForm.vue'
import dayjs from 'dayjs'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import 'dayjs/locale/zh-cn'
const locale = zhCN
dayjs.locale('en')
const incomeType = ref('1')
const props = defineProps({
visible: {
type: Boolean,
required: true
},
model: {
type: Object,
default: () => null
},
lesseeData: {
type: Array,
required: true
}
})
const emit = defineEmits(['update:visible', 'updateSuccess', 'insertSuccess'])
const model1 = reactive({})
const model2 = reactive({})
const model3 = reactive({})
const model4 = reactive({})
const model5 = reactive({})
const model6 = reactive({})
// const model2 = reactive({
// lesseePayId: '',
// lesseeId: '',
// firstQuarterMoney: '',
// secondQuarterMoney: '',
// thirdQuarterMoney: '',
// fourthQuarterMoney: '',
// firstQuarterCollector: '',
// secondQuarterCollector: '',
// thirdQuarterCollector: '',
// fourthQuarterCollector: '',
// firstQuarterDate: '',
// secondQuarterDate: '',
// thirdQuarterDate: '',
// fourthQuarterDate: '',
// incomeType: '',
// remark: ''
// })
// 表单ref
// 提交后loading
const loading = ref(false)
// 标题
const title = computed(() => {
return (props.model ? (props.model.menuId ? '编辑' : '编辑') : '添加') + '收租'
})
// 表单数据
// const formModel = reactive({
// lesseePayId: '',
// lesseeId: '',
// firstQuarterMoney: '',
// secondQuarterMoney: '',
// thirdQuarterMoney: '',
// fourthQuarterMoney: '',
// firstQuarterCollector: '',
// secondQuarterCollector: '',
// thirdQuarterCollector: '',
// fourthQuarterCollector: '',
// firstQuarterDate: '',
// secondQuarterDate: '',
// thirdQuarterDate: '',
// fourthQuarterDate: '',
// incomeType: '',
// remark: ''
// })
// 重置表单
// const resetForm = () => {
// formRef.value.resetFields()
// }
const sonFormData1 = ref(null)
const sonFormData2 = ref(null)
const sonFormData3 = ref(null)
const sonFormData4 = ref(null)
const sonFormData5 = ref(null)
const sonFormData6 = ref(null)
// 关闭模态框
const handleCancelModel = () => {
reset()
emit('update:visible', false)
}
// 提交表单
const handleOk = () => {
debugger
console.log('222222', sonFormData1.value)
console.log(
'1111111111',
sonFormData1.value.getSonData(),
sonFormData2.value.getSonData(),
sonFormData3.value.getSonData(),
sonFormData4.value.getSonData(),
sonFormData5.value.getSonData(),
sonFormData6.value.getSonData()
)
const paramsArray = []
const type1 = translateDate(sonFormData1.value.getSonData())
const type2 = translateDate(sonFormData2.value.getSonData())
const type3 = translateDate(sonFormData3.value.getSonData())
const type4 = translateDate(sonFormData4.value.getSonData())
const type5 = translateDate(sonFormData5.value.getSonData())
const type6 = translateDate(sonFormData6.value.getSonData())
if (type1) {
paramsArray.push(type1)
}
if (type2) {
paramsArray.push(type2)
}
if (type3) {
paramsArray.push(type3)
}
if (type4) {
paramsArray.push(type4)
}
if (type5) {
paramsArray.push(type5)
}
if (type6) {
paramsArray.push(type6)
}
// if (values.firstQuarterDate) {
// values.firstQuarterDate = values.firstQuarterDate.format('YYYY-MM-DD')
// }
// if (values.secondQuarterDate) {
// values.secondQuarterDate = values.secondQuarterDate.format('YYYY-MM-DD')
// }
// if (values.thirdQuarterDate) {
// values.thirdQuarterDate = values.thirdQuarterDate.format('YYYY-MM-DD')
// }
// if (values.fourthQuarterDate) {
// values.fourthQuarterDate = values.fourthQuarterDate.format('YYYY-MM-DD')
// }
// 编辑
// if (paramsArray.lesseePayId) {
// update(paramsArray)
// }
// 新增
// else {
insert(paramsArray)
// }
}
// 转换时间格式
const translateDate = values => {
debugger
if (values.firstQuarterDate) {
values.firstQuarterDate = values.firstQuarterDate.format('YYYY-MM-DD')
}
if (values.secondQuarterDate) {
values.secondQuarterDate = values.secondQuarterDate.format('YYYY-MM-DD')
}
if (values.thirdQuarterDate) {
values.thirdQuarterDate = values.thirdQuarterDate.format('YYYY-MM-DD')
}
if (values.fourthQuarterDate) {
values.fourthQuarterDate = values.fourthQuarterDate.format('YYYY-MM-DD')
}
return values
}
// 重置表单
const reset = () => {
debugger
sonFormData1.value.resetForm()
sonFormData2.value.resetForm()
sonFormData3.value.resetForm()
sonFormData4.value.resetForm()
sonFormData5.value.resetForm()
sonFormData6.value.resetForm()
}
// 编辑
// const update = values => {
// updateLesseePay(values)
// .then(res => {
// if (res.code !== 200) {
// message.error(res.message)
// return
// }
// message.success(res.message)
// reset()
// emit('updateSuccess')
// })
// .catch(err => {
// console.error(err)
// })
// .finally(() => {
// loading.value = false
// })
// }
// 新增
const insert = values => {
console.log('dsddddd', values)
batchInsertLesseePay(values)
.then(res => {
if (res.code !== 200) {
message.error(res.message)
return
}
message.success(res.message)
reset()
emit('insertSuccess')
})
.catch(err => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
// watch(
// () => props.model,
// model => {
// if (!model) {
// // 新增
// nextTick(() => {
// formRef.value.resetFields()
// })
// return
// }
// // 编辑
// nextTick(() => {
// for (const key in formModel) {
// formModel[key] = model[key]
// if (formModel.firstQuarterDate) {
// formModel.firstQuarterDate = dayjs(formModel.firstQuarterDate, 'YYYY-MM-DD')
// }
// if (formModel.secondQuarterDate) {
// formModel.secondQuarterDate = dayjs(formModel.secondQuarterDate, 'YYYY-MM-DD')
// }
// if (formModel.thirdQuarterDate) {
// formModel.thirdQuarterDate = dayjs(formModel.thirdQuarterDate, 'YYYY-MM-DD')
// }
// if (formModel.fourthQuarterDate) {
// formModel.fourthQuarterDate = dayjs(formModel.fourthQuarterDate, 'YYYY-MM-DD')
// }
// }
// })
// }
// )
</script>
<style lang="less" scoped></style>
父组件 sonFormData1.value.getSonData(),
sonFormData2.value.getSonData(),
sonFormData3.value.getSonData(),
sonFormData4.value.getSonData(),
sonFormData5.value.getSonData(),
sonFormData6.value.getSonData()调用报错
