<template><view class="container"><view class="example"><uni-forms ref="mainFormRef" :modelValue="mainForm" :rules="mainFormRules" label-width="80px" ><uni-forms-item label="开始时间" required name="reserveStartTime"><uni-datetime-picker type="datetime" return-type="datetime" :start="start" v-model="mainForm.reserveStartTime" /></uni-forms-item><uni-forms-item label="结束时间" required name="reserveEndTime"><uni-datetime-picker type="datetime" return-type="datetime" :start="start" v-model="mainForm.reserveEndTime"/></uni-forms-item><uni-forms-item label="访问单位" required name="intervieweeId">
<!-- <uni-data-select v-model="mainForm.visitUnit" :localdata="positionList" />--><uni-data-picker placeholder="请选择访问单位" popup-title="请选择访问单位和联系人" :localdata="dataTree" v-model="mainForm.intervieweeId" /></uni-forms-item><uni-forms-item label="访问事由" required name="remark"><uni-easyinput type="textarea" v-model="mainForm.remark" placeholder="请输入访问事由" /></uni-forms-item></uni-forms></view><view class="visitorForm" v-for="(visitor, index) in visitors" :key="index"><uni-section title="来访人员" type="line" ><view class="example"><uni-forms ref="visitorFormRef" :modelValue="visitor" :rules="visitorRules" label-width="80px"><uni-forms-item label="姓名" required name="personName"><uni-easyinput v-model="visitor.personName" placeholder="请输入姓名" /></uni-forms-item><uni-forms-item label="手机号码" required name="phone"><uni-easyinput v-model="visitor.phone" placeholder="请输入手机号码" /></uni-forms-item><uni-forms-item label="证件号码" required name="cardNumber"><uni-easyinput v-model="visitor.cardNumber" placeholder="请输入证件号码" /></uni-forms-item><uni-forms-item label="车牌号码" name="carNumber"><uni-easyinput v-model="visitor.carNumber" placeholder="请输入车牌号码" /></uni-forms-item></uni-forms></view></uni-section></view><view style="background-color: #fff; margin: 20rpx 0;"><view class="addInvitor" @click="addInvitor"><u-icon name="plus-circle-fill" color="#2979ff" size="25" /><view style="margin-left: 15rpx;">添加来访人</view></view></view><view class="btn"><u-button type="primary" @click="submit('baseForm')" text="提交"></u-button></view></view>
</template><script>
import {addVisitor, getCompanyList} from "../../api";export default {components: {},data() {return {start: new Date(),visitors: [{}],dataTree: [], // 访问单位列表// 基础表单数据mainForm: {},// 校验规则mainFormRules: {reserveStartTime: {rules: [{required: true, errorMessage: '请选择开始时间'}]},reserveEndTime: {rules: [{required: true, errorMessage: '请选择结束时间'}]},remark: {rules: [{required: true, errorMessage: '请输入访问事由'}]},intervieweeId: {rules: [{required: true, errorMessage: '请选择访问单位'}]}},visitorRules: { // 添加来访人员表单的校验规则personName: {rules: [{required: true, errorMessage: '请输入姓名'}]},phone: {rules: [{required: true,errorMessage: '请输入手机号码！'}, {pattern: '^[1]([3-9])[0-9]{9}$',errorMessage: '手机号码不合法！'}]},cardNumber: {rules: [{required: true,errorMessage: '请输入证件号码',},{pattern: '^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',errorMessage: '证件号码不合法！'}]}}}},methods: {// 访问单位列表getPosionData() {getCompanyList().then(res => {this.dataTree = res.data.map(item => ({value: item.id,text: item.label,children: item.children ? item.children.map(gItem => ({text: gItem.label,value: gItem.id,children: gItem.children ? gItem.children.map(sItem => ({text: sItem.label,value: sItem.id,children: sItem.children ? sItem.children.map(pItem => ({text: pItem.label,value: pItem.id,})) : []})) : []})) : []}));})},
// 添加来访人addInvitor() {this.visitors.push({});},// 提交表单async submit() {const mainFormValid = await this.$refs.mainFormRef.validate();if (!mainFormValid) {return ;}try {const validationPromises = this.visitors.map((visitor, index) => {return this.$refs.visitorFormRef[index].validate().then(formValid => {return formValid;}).catch(err => {console.log(`表单错误信息 ${index}：`, err);return false;});});const validationResults = await Promise.all(validationPromises);const allVisitorsValid = validationResults.every(valid => valid);if (allVisitorsValid) {const params = {...this.mainForm,personList: this.visitors}addVisitor(params).then(res => {uni.showToast({title: '新增访客成功',icon: 'success'})setTimeout(() => {uni.navigateBack({delta: 1})}, 1500)})}} catch (error) {console.error('表单验证过程中出现错误：', error);}}},onShow() {this.getPosionData ()}
}
</script><style lang="scss" scoped>
.container {padding: 14rpx 22rpx;.example {padding: 15rpx 22rpx;background-color: #fff;margin-bottom: 20rpx;}.addInvitor {display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 20rpx 0;}.btn {//position: fixed;//left: 50%;//bottom: 10rpx;//transform: translateX(-50%);}
}</style>实现效果：
