这是一个使用Vue2或Vue3，以及ElementUI或ElementPlus库创建的表单示例，包括人员和车辆信息输入，身份证和驾驶证的上传功能，以及表单验证规则。用户需填写姓名、性别、联系方式等个人信息，并上传身份证正反面和驾驶证图片。表单还包含了预约时间、访问事由等字段，所有输入项都设有相应的验证规则。
直接上代码 :prop 和prop 都可以，vue2和vue3或者是element、elementplus都可以用
table
<template>
<div class="page page-table">
<section class="page-query-form">
<breadcrumb :hasLine="false" />
</section>
<div class="table-content" style="height:calc(100% - 70rem)">
<el-form label-position="top" ref="ruleForm" label-width="80px" :model="formData">
<div class="type-name">
<span>人员信息</span>
</div>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="人员姓名" :prop="'clientStaffVo.name'" :rules="rules.name">
<el-input size="small" v-model="formData.clientStaffVo.name" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="人员性别" :prop="'clientStaffVo.sex'" :rules="rules.sex">
<el-radio-group v-model="formData.clientStaffVo.sex">
<el-radio label="1">男</el-radio>
<el-radio label="0">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="联系电话" prop="clientStaffVo.phone" :rules="rules.phone">
<el-input size="small" v-model="formData.clientStaffVo.phone" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="身份证号" prop="clientStaffVo.cardId" :rules="rules.cardId">
<el-input size="small" v-model="formData.clientStaffVo.cardId" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="工作单位" prop="clientStaffVo.unit" :rules="rules.unit">
<el-input size="small" v-model="formData.clientStaffVo.unit" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="上传身份证" prop="clientStaffVo.cardUpload" :rules="rules.cardUpload">
<div class="file-box">
<IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.cardUpload' fieldName='cardUpload' prefix='cardUpload' text="身份证人像面"></IDCardUploader>
<!-- <IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.cardUploadOpposite' fieldName='cardUploadOpposite' prefix='cardUploadOpposite' text="身份证国徽面"></IDCardUploader> -->
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item :label="'身份证国徽面'" prop="clientStaffVo.cardUploadOpposite" :rules="rules.cardUploadOpposite">
<div class="file-box">
<IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.cardUploadOpposite' fieldName='cardUploadOpposite' prefix='cardUploadOpposite' text="身份证国徽面"></IDCardUploader>
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="上传驾驶证" prop="id">
<div class="file-box">
<IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.drivingUpload' fieldName='drivingUpload' prefix='drivingUpload' text="上传驾驶证"></IDCardUploader>
<!-- <IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.drivingUploadOpposite' fieldName='drivingUploadOpposite' prefix='drivingUploadOpposite' text="上传驾驶证副业"></IDCardUploader> -->
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="上传驾驶证副业" prop="id">
<div class="file-box">
<IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.drivingUploadOpposite' fieldName='drivingUploadOpposite' prefix='drivingUploadOpposite' text="上传驾驶证副业"></IDCardUploader>
</div>
</el-form-item>
</el-col>
</el-row>
<div class="type-name">
<span>来访车辆信息</span>
</div>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="车牌号码">
<el-input size="small" v-model="formData.clientCarVo.licensePlateNum" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="随行人数">
<el-select size="small" v-model="formData.clientCarVo.num" placeholder="请选择">
<el-option v-for="item in dictMapList.numList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div class="type-name">
<span>预约时间</span>
</div>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="预计进企时间" prop="gmtInto" :rules="rules.gmtInto">
<el-date-picker size="small" :picker-options="startPickerOptions" v-model="formData.gmtInto" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="预计离企时间" prop="gmtLeave" :rules="rules.gmtLeave">
<el-date-picker size="small" :picker-options="endPickerOptions" v-model="formData.gmtLeave" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<div class="type-name">
<span>访问事由</span>
</div>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="被访企业 " prop="enterprise" :rules='rules.enterprise'>
<el-select size="small" v-model="formData.enterprise" placeholder="请选择">
<el-option v-for="item in dictMapList.enterpriseList" :key="item.id" :label="item.label" :value="item.id" @click.native="checkedenterprise(item)">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="被访人员" prop="name" :rules="rules.name">
<el-input size="small" v-model="formData.name" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="被访人电话" prop="phone" :rules="rules.phone">
<el-input size="small" v-model="formData.phone" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="被访人部门" prop="departmentId" :rules="rules.departmentId">
<el-input size="small" v-model="formData.departmentId" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="来访事由" prop="reasons" :rules="rules.reasons">
<el-input size="small" v-model="formData.reasons" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="btns">
<el-button type="primary" @click="handleConfirm">提交预约</el-button>
<el-button plain @click="handlerest">重置</el-button>
</div>
</div>
</div>
</template>
<script>
import Amap from '@/components/amap/index.vue';
import breadcrumb from '@/components/breadcrumb/index.vue';
import * as config from '@/common/env.json';
import IDCardUploader from '@/components/id-card-uploader/id-card-uploader.vue';
export default {
components: { breadcrumb, Amap, IDCardUploader },
data() {
return {
rules: {
name: [
{ required: true, message: '请输入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['empty', 'blank'] }
],
sex: [
{ required: true, message: '请选择', trigger: ['blur', 'change'] },
],
phone: [
{ required: true, message: '请输入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['mobile'] }
],
cardId: [
{ required: true, message: '请输入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['id'] }
],
unit: [
{ required: true, message: '请输入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['empty', 'blank'] }
],
gmtInto: [
{ required: true, message: '请选择', trigger: ['blur', 'change'] },
],
gmtLeave: [
{ required: true, message: '请选择', trigger: ['blur', 'change'] },
],
enterprise: [
{ required: true, message: '请选择', trigger: ['blur', 'change'] },
],
name: [
{ required: true, message: '请输入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['empty', 'blank'] }
],
phone: [
{ required: true, message: '请输入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['mobile'] }
],
departmentId: [
{ required: true, message: '请输入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['empty', 'blank'] }
],
reasons: [
{ required: true, message: '请输入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['empty', 'blank'] }
],
cardUpload: [
{ required: true, message: '请上传', trigger: ['blur', 'change'] },
],
cardUploadOpposite: [
{ required: true, message: '请上传', trigger: ['blur', 'change'] },
],
},
dictMapList: {
numList: [
{ label: '1人', value: 1 },
{ label: '2人', value: 2 },
{ label: '3人', value: 3 },
{ label: '4人', value: 4 },
{ label: '5人', value: 5 },
{ label: '6人', value: 6 },
{ label: '8人', value: 8 },
{ label: '9人', value: 9 },
{ label: '10人', value: 10 },
{ label: '15人', value: 15 },
],
enterpriseList: [],
areaList: [],
},
formData: {
clientCarVo: {
carType: null,
rsqasUpload: null,
num: null,
travelUpload: '',
travelUploadOpposite: '',
},
clientStaffVo: {
cardId: null,
cardUpload: '',
cardUploadOpposite: '',
drivingUpload: '',
drivingUploadOpposite: '',
name: null,
phone: null,
sex: null,
unit: null,
},
},
}
},
created() {
this.getTyep().then(() => {
if (this.$route.query.id) {
this.getInfo()
}
})
},
methods: {
startPickerOptions: {
disabledDate(time) {
return time.getTime() < (Date.now() - 3600 * 1000 * 24)
},
selectableRange: '00:00:00 - 23:59:59',
},
checkedenterprise(item) {
this.formData.clientCarVo.socialCode = item.value;
this.formData.clientStaffVo.socialCode = item.value;
},
getInfo() {
this.$api.apiClientStaffSubscribeInfo({ id: this.$route.query.id }).then((res) => {
if (res.success) {
this.formData = res.data;
this.formData.enterprise=Number(this.formData.enterprise)
}
})
},
uploadDone(val, fileName) {
this.formData.clientStaffVo[fileName] = val;
this.$refs.ruleForm.validate();
},
async getTyep() {
await this.$api.apiDictSelectDictMap({ key: 'industrial_area,economic_trade' }).then((res) => {
if (res.success) {
this.dictMapList.areaList = res.data.industrial_area;
this.dictMapList.economicTrade = res.data.economic_trade;
};
})
this.dictMapList.enterpriseList = await this.$api.apiSelectEnterpriseInfoNames({ name: null }).then(res => {
return res.data.map(i => {
return {
id: i.id,
value: i.socialCreditCode,
label: i.enterpriseName,
}
})
});
},
handlerest() {
this.$confirm('', {
dangerouslyUseHTMLString: true,
message: `<h2>操作确认</h2><span>该操作不可逆，是否确认重置填写的数据？</span>`,
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose: false,
type: 'warning',
}).then(() => {
if (this.$route.query.id) {
this.getInfo();
} else {
this.formData = {
clientCarVo: {
carType: null,
rsqasUpload: null,
num: null,
travelUpload: '',
travelUploadOpposite: '',
},
clientStaffVo: {
cardId: null,
cardUpload: '',
cardUploadOpposite: '',
drivingUpload: '',
drivingUploadOpposite: '',
name: null,
phone: null,
sex: null,
unit: null,
},
};
this.$refs.ruleForm.resetFields();
}
})
},
async handleConfirm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
let params = JSON.parse(JSON.stringify(this.formData));
if (this.$route.query.id) {
this.$api.apiClientStaffSubscribeUpdate(params).then((res) => {
if (res.success) {
this.$notify({
title: '操作成功',
message: '数据提交成功',
type: 'success',
duration: 1000,
position: 'top-left',
});
}
})
} else {
this.$api.apiClientStaffSubscribeSave(params).then((res) => {
if (res.success) {
this.$notify({
title: '操作成功',
message: '数据提交成功',
type: 'success',
duration: 1000,
position: 'top-left',
});
this.formData = {
clientCarVo: {
carType: null,
rsqasUpload: null,
num: null,
travelUpload: '',
travelUploadOpposite: '',
},
clientStaffVo: {
cardId: null,
cardUpload: '',
cardUploadOpposite: '',
drivingUpload: '',
drivingUploadOpposite: '',
name: null,
phone: null,
sex: null,
unit: null,
},
};
this.$refs.ruleForm.resetFields();
}
})
}
} else {
console.log('error submit!!');
return false;
}
});
},
}
}
</script>
<style lang="less" scoped>
.table-content{
.scrollbar();
}
.type-name{
span{display: inline-block;border-bottom: 2px solid#409EFF; padding: 5px 0;}
}
.btns{ text-align: center;}
.file-box{ display: flex; justify-content: space-around;}
</style>
form:
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
