element+vue 之动态form

在这里插入图片描述

1.页面部分

   <div v-for="(item,index) in formList" :key="index"><el-col :span="6" v-if="item.inputType==0"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请输入', trigger: 'change' }"><el-input v-model.trim="detailForm[item.conditionCode]" :placeholder="item.placeHolder"clearable></el-input></el-form-item></el-col><el-col :span="6" v-else-if="item.inputType==1"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message: item.placeHolder?item.placeHolder:'请输入', trigger: 'change' }"><el-input v-model.number="detailForm[item.conditionCode]":placeholder="item.placeHolder" clearable></el-input></el-form-item></el-col><el-col :span="24" v-else-if="item.inputType==2"><el-form-item :label="item.conditionName" :prop="item.conditionCode" :rows="3":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请输入', trigger: 'change' }"><el-input clearable style="width: 100%" v-model.trim="detailForm[item.conditionCode]"autocomplete="off" placeholder="请输入" type="textarea" maxlength="100"></el-input></el-form-item></el-col><el-col :span="24" v-else-if="item.inputType==3"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }"><!-- <el-input v-model="detailForm[item.conditionCode]" v-show="false" /> --><el-upload list-type="picture-card" action="#" :headers="headers" multiple:before-upload="beforeUpload" :http-request="f_upload" :on-remove="handleRemoveUrl":on-preview="handlePictureCardPreview" :file-list="fileImgurl"accept=".jpg,.jpeg,.png,.bmp"><i slot="default" class="el-icon-plus"></i><div class="el-upload__tip" slot="tip">仅支持JPG、JPEG、PNG、BMP格式文件</div></el-upload><el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item></el-col><el-col :span="24" v-else-if="item.inputType==4 && item.singleton==0"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }"><el-checkbox-group v-model="detailForm[item.conditionCode]"><el-col :span="24" v-if="item.optionList"><el-checkbox v-for="(it,ind) in item.optionList" :label="it.name":key="ind"></el-checkbox></el-col></el-checkbox-group></el-form-item></el-col><el-col :span="6" v-else-if="item.inputType==4 && item.singleton==1"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }"><el-radio-group v-model="detailForm[item.conditionCode]"><el-col :span="24" v-if="item.optionList"><el-radio v-for="(it,ind)  in item.optionList" :label="it.name":key="ind">{{it.name}}</el-radio></el-col></el-radio-group></el-form-item></el-col><el-col :span="6" v-else-if="item.inputType==5"><el-form-item :label="item.conditionName" :prop="item.conditionCode":rules="{required: item.required==0?false:true, message:item.placeHolder?item.placeHolder:'请选择', trigger: 'change' }"><el-select v-model="detailForm[item.conditionCode]" placeholder="请选择"style="width: 100%" v-if="item.optionList":multiple="item.inputType==5 && item.singleton==0"><el-option v-for="(it,ind) in item.optionList" :key="ind" :label="it.name":value="it.name"></el-option></el-select></el-form-item></el-col></div>

2.数据格式

在这里插入图片描述

 "decisionConditionList": [{"conditionCode": "carHygiene",//表单键"conditionName": "车辆卫生",//表单名称"inputType": 5,//表单类型"conditionValueList": ["是"],//表单值"required": 1,//是否必填"singleton": 0,"placeHolder": "请选择","optionList": [{"name": "是","defaultType": 0},{"name": "否","defaultType": null}]},{"conditionCode": "productSpotCheck","conditionName": "是否抽检","inputType": 4,"conditionValueList": ["否"],"required": 1,"singleton": 1,"placeHolder": "请选择","optionList": [{"name": "是","defaultType": 0},{"name": "否","defaultType": 1}]},{"conditionCode": "carPlateNum","conditionName": "车辆号","inputType": 0,"conditionValueList": ["1"],"required": 1,"singleton": null,"placeHolder": "请输入","optionList": null},{"conditionCode": "carPlate","conditionName": "车辆数量","inputType": 1,"conditionValueList": ["1"],"required": 0,"singleton": null,"placeHolder": "请输入","optionList": null},{"conditionCode": "problemDesc","conditionName": "问题类型","inputType": 4,"conditionValueList": ["问题一"],"required": 1,"singleton": 0,"placeHolder": "请选择","optionList": [{"name": "问题一","defaultType": 0},{"name": "问题二","defaultType": 0},{"name": "问题三","defaultType": 0},{"name": "问题四","defaultType": 0}]},{"conditionCode": "imgUrl","conditionName": "图片","inputType": 3,"conditionValueList": ["https://warehouse-permanent.obs.cn-east-3.myhuaweicloud.com/74cc681c-fe39-429c-886e-8e086378c2ef.png","https://warehouse-permanent.obs.cn-east-3.myhuaweicloud.com/5b312d59-8c40-431b-ad99-ac908bbb7707.png"],"required": 1,"singleton": null,"placeHolder": "请选择","optionList": null},{"conditionCode": "remarkTwo","conditionName": "备注","inputType": 2,"conditionValueList": ["1"],"required": 0,"singleton": null,"placeHolder": "1","optionList": null}],

3.数据处理因为后端给的数据都是数组表单有些需要数组有些需要字符串

 this.formList = res.data.data.decisionConditionList;if (this.formList) {this.formList.forEach(a => {if (a.inputType == 4 && a.singleton == 0 || a.inputType == 5 && a.singleton == 0) {this.$set(this.detailForm, a.conditionCode, a.conditionValueList ? a.conditionValueList : [])} else if (a.inputType == 3) {var fileImgurl = []if (a.conditionValueList) {a.conditionValueList.forEach((item, index) => {fileImgurl.push(Object.assign({}, { url: item }))})this.fileImgurl=fileImgurl}this.$set(this.detailForm, a.conditionCode, a.conditionValueList ? a.conditionValueList : [])}else {this.$set(this.detailForm, a.conditionCode, a.conditionValueList ? a.conditionValueList.toString() : '')}})}

4.关于图片部分的js

  // 上传之前beforeUpload(file) {if (!this.checkFileType(file)) {return false}this.$forceUpdate()},// 效验文件类型checkFileType(file) {let allowTypesSet = new Set(["jpg", "jpeg", "png", "bmp", "pdf"])let fileType = file.name.replace(/.+\./, "")if (!allowTypesSet.has(fileType)) {this.$message({type: "warning",message: "不支持该文件类型"})return false}return true},//预览图片handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},//删除图片handleRemoveUrl(file, fileList) {if (fileList.length) {this.fileImgurl.filter((item, index) => {if (item.url == file.url) {this.fileImgurl.splice(index, 1);}});let results = this.fileImgurl.map(n => n.url);this.formList.forEach(index => {if (index.inputType == 3) {this.$set(this.detailForm, index.conditionCode, results)}})} else {this.formList.forEach(index => {if (index.inputType == 3) {this.$set(this.detailForm, index.conditionCode, [])}})this.fileImgurl = []}},// 导入f_upload(data) {const formData = new FormData()formData.append("file", data.file)this.handlefileUpload(formData)},//上传方法handlefileUpload(formData) {fileUpload(formData).then((res) => {const { code, msg } = res.dataif (code == 200) {this.formList.forEach(a => {if (a.inputType == 3) {var arr = a.conditionValueList ? a.conditionValueList : [];arr.push(res.data.data)this.$set(this.detailForm, a.conditionCode, arr)}})this.fileImgurl.push({ url: res.data.data })} else {const title = "操作失败"const type = "error"this.$notification(title, type, msg)}}).catch(() => { })},

4.提交

//提交这里还是要按照上面的格式提交

 this.formList.forEach((item, index) => {this.detailForm.decisionConditionList.push(Object.assign({},item, { conditionValueList: item.inputType == 4 && item.singleton == 0 || item.inputType == 5 && item.singleton == 0 || item.inputType == 3 ? this.detailForm[item.conditionCode] : [this.detailForm[item.conditionCode]] }))})