| | |
| | | <el-form :model="param" ref="paramRef" :rules="rules" > |
| | | <div class="title_tip">访客信息</div> |
| | | <el-form-item label="访客姓名" prop="name"> |
| | | <el-input v-model="param.name" placeholder="请输入访客的姓名"></el-input> |
| | | <el-input |
| | | v-model="param.name" |
| | | placeholder="请输入访客的姓名" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="访客手机号" prop="phone"> |
| | | <el-input v-model="param.phone" placeholder="请输入访客的手机号"></el-input> |
| | | <el-input |
| | | v-model="param.phone" |
| | | placeholder="请输入访客的手机号" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="证件类型" prop="idcardType"> |
| | | <el-select v-model="param.idcardType" placeholder="请选择"> |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="证件号码" prop="idcardNo"> |
| | | <el-input maxlength="18" v-model="param.idcardNo" placeholder="请输入访客的证件号码"></el-input> |
| | | <el-input |
| | | maxlength="18" |
| | | v-model="param.idcardNo" |
| | | placeholder="请输入访客的证件号码" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="来访单位" prop="companyName"> |
| | | <el-input v-model="param.companyName" placeholder="请输入来访的单位全称"></el-input> |
| | | <el-input |
| | | v-model="param.companyName" |
| | | placeholder="请输入来访的单位全称" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="人脸照片" prop="faceImgUrl"> |
| | | <el-form-item label="人脸照片"> |
| | | <div class="upload_wrap"> |
| | | <UploadFaceImg |
| | | :file="{ 'imgurlfull': param.faceImgUrl, 'imgurl': param.faceImg }" |
| | | :file="{ imgurlfull: param.faceImgUrl, imgurl: param.faceImg }" |
| | | :uploadData="uploadData" |
| | | @uploadSuccess="uploadAvatarSuccess" |
| | | @uploadEnd="isUploading = false" |
| | | @uploadBegin="isUploading = true" |
| | | /> |
| | | <div class="content"> |
| | | <div>1、请选择浅色或中性背景,使用均匀光线拍照。</div> |
| | | <div>2、请保持面部正对镜头,勿遮挡面部,保持中立表情。</div> |
| | | <div>3、请避免后期修图,确保人脸轮廓清晰、完整,尽可能减少非脸部内容占比。</div> |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | |
| | | <div class="title_tip" style="marginTop: 60px;">访客预约</div> |
| | | <div class="title_tip" style="margintop: 60px">访客预约</div> |
| | | <el-form-item label="被访人" prop="receptMemberId"> |
| | | <el-select v-model="param.receptMemberId" placeholder="请选择"> |
| | | <el-option v-for="item in memberList" :key="item.id" :label="item.name + ' ' + item.companyName" :value="item.id" /> |
| | | <el-option |
| | | v-for="item in memberList" |
| | | :key="item.id" |
| | | :label="item.name + ' ' + item.companyName" |
| | | :value="item.id" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="入园时间" prop="starttime"> |
| | |
| | | </el-form-item> |
| | | <el-form-item label="来访事由" prop="reason"> |
| | | <el-select v-model="param.reason" placeholder="请选择"> |
| | | <el-option v-for="item in VisitReason" :key="item.id" :label="item.title" :value="item.title" /> |
| | | <el-option |
| | | v-for="item in VisitReason" |
| | | :key="item.id" |
| | | :label="item.title" |
| | | :value="item.title" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="是否施工作业" prop="type"> |
| | | <el-form-item label="是否施工作业"> |
| | | <el-switch |
| | | style="width: 200px" |
| | | v-model="param.type" |
| | | :active-value="1" |
| | | :inactive-value="0"> |
| | | :inactive-value="0" |
| | | > |
| | | </el-switch> |
| | | </el-form-item> |
| | | <el-form-item v-if="param.type == 1" label="施工内容" prop="constructionReason"> |
| | | <el-input v-model="param.constructionReason" placeholder="请输入施工内容"></el-input> |
| | | <el-form-item v-if="param.type == 1" label="施工内容"> |
| | | <el-input |
| | | v-model="param.constructionReason" |
| | | placeholder="请输入施工内容" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="随行车辆" prop="carNos"> |
| | | <el-form-item label="随行车辆"> |
| | | <el-input v-model="param.carNos" placeholder="请输入车牌号"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | starttime: '', |
| | | endtime: '' |
| | | }, |
| | | |
| | | VisitReason: [], |
| | | memberList: [], |
| | | uploadData: { |
| | |
| | | endtime: [{ required: true, message: '请选择日期', trigger: 'change' }], |
| | | reason: [{ required: true, message: '请选择', trigger: 'change' }], |
| | | type: [{ required: true, message: '请选择', trigger: 'change' }], |
| | | receptMemberId: [{ required: true, message: '请选择', trigger: 'change' }], |
| | | idcardType: [{ required: true, message: '请选择', trigger: 'change' }], |
| | | faceImgUrl: [{ required: true, message: '请上传', trigger: 'change' }], |
| | | |
| | |
| | | companyName: [{ required: true, message: '请输入', trigger: 'blur' }], |
| | | phone: [{ required: true, message: '请输入', trigger: 'blur' }], |
| | | carNos: [{ required: true, message: '请输入', trigger: 'blur' }], |
| | | constructionReason: [{ required: true, message: '请输入', trigger: 'blur' }], |
| | | constructionReason: [{ required: true, message: '请输入', trigger: 'blur' }] |
| | | } |
| | | } |
| | | }, |
| | |
| | | }) |
| | | getVisitedMember({}).then(res => { |
| | | this.memberList = res || [] |
| | | console.log('memberList', this.memberList) |
| | | }) |
| | | }, |
| | | uploadAvatarSuccess (file) { |
| | |
| | | font-weight: 600; |
| | | margin-bottom: 10px; |
| | | } |
| | | .upload_wrap{ |
| | | display: flex; |
| | | align-items: center; |
| | | .content{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | font-size: 12px; |
| | | color: #999999; |
| | | margin-left: 12px; |
| | | line-height: 24px; |
| | | } |
| | | } |
| | | </style> |