uniapp之 动态form

<template>
	<view>
		<uni-forms ref="form1" :rules="rules1" :value="formData1">
			<uni-forms-item label="标题" name="instTitle" required>
				<uni-easyinput type="text" v-model="formData1.instTitle" placeholder="请输入标题" />
			</uni-forms-item>
			<uni-forms-item label="描述" name="instDesc" required>
				<uni-easyinput type="text" v-model="formData1.instDesc" placeholder="请输入描述" />
			</uni-forms-item>
		</uni-forms>
		<uni-forms ref="form" :rules="rules" :value="formData">
			<view v-for="(item, index) in fromJson" :key="index">
				<uni-forms-item :label="item.name" :name="item.field" :required='item.require'>
					<uni-easyinput type="text" v-model="formData[item.field]" v-if="item.formType == 0" :placeholder="item.placeholder || '请输入'+item.name" />
					<uni-easyinput type="textarea" v-model="formData[item.field]" v-else :placeholder="item.placeholder || '请输入'+item.name" />
				</uni-forms-item>
			</view>
			<button v-if="hidden!=2" type="primary" @click="submit">确定</button>
		</uni-forms>
	</view>

</template>

<script>
	import {
		getNewFormJsonString,
		getNewAnnexJsonString,
		getNewAnnexJsonNull
	} from '@/common/formJson.js'
	import {
		uniForms,
		uniFormsItem,
		uniEasyinput
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniForms,
			uniFormsItem,
			uniEasyinput
		},
		data() {
			return {
				itemData: [],
				hidden: null,
				fromJson: [],
				annexJson: [],
				versionNumber: null,
				columnCode:null,
				id: null,
				formData1: {
					instTitle: '',
					instDesc: ''
				},
				formData: {},
				rules: {},
				rules1: {
					instTitle: {
						rules: [{
							required: true,
							errorMessage: '请输入',
						}, {
							maxLength: 50,
							minLength: 1,
							errorMessage: '请输入少于五十个字符'
						}]
					},
					instDesc: {
						rules: [{
							required: true,
							errorMessage: '请输入',
						}, {
							maxLength: 50,
							minLength: 1,
							errorMessage: '请输入少于五十个字符'
						}]
					}
				}
			}
		},
		onLoad(e) {
			this.columnCode = e.flowCode
			if (e.a) {
				this.hidden = e.a
				this.itemData = JSON.parse(e.item)
				this.fromJson = JSON.parse(this.itemData.formJson)
				this.annexJson = this.itemData.annexJson
				this.id = this.itemData.id
				this.versionNumber = this.itemData.versionNumber
				this.formData1.instDesc = this.itemData.instDesc
				this.formData1.instTitle = this.itemData.instTitle
				this.rulesData(this.fromJson)
			} else {
				this.getData();
			}
		},
		methods: {
			getData() {
				var params = {
					flowCode: this.columnCode
				}
				this.config.getRequest('/flow/inst/getBaseFlow', params).then(res => {
					if (res.data.code == 0) {
						this.fromJson = JSON.parse(res.data.data.fromJson)
						var fromJson = JSON.parse(res.data.data.fromJson)
						this.$nextTick(()=>{
							this.rulesData(fromJson)
						})
						
						this.annexJson = res.data.data.annexJson
						this.versionNumber = res.data.data.versionNumber
					} else {

					}
					
				}).catch(err => {});
			},
			submit() {
				this.$refs.form1.submit().then(res => {
					console.log('表单数据信息：', res);
					
					this.$refs.form.submit().then(resdata => {
						console.log('表单数据信息111：', resdata);
						var that = this	
						if (that.hidden) {
							var obj = getNewFormJsonString(that.fromJson, that.$refs.form.value)
							var params = {
								flowCode: that.columnCode,
								versionNumber: that.versionNumber,
								annexJson: that.annexJson,
								formJson: obj,
								instTitle: that.formData1.instTitle,
								instDesc: that.formData1.instDesc,
								id: that.id
							}
							that.config.postRequest('/flow/inst/update', params).then(res => {
								if (res.data.code == 0) {
										let pages = getCurrentPages(); // 当前页面
										let beforePage = pages[pages.length - 2]; // 前一个页面
										uni.navigateBack({
											success: function() { 
												beforePage.$refs.one[0].pageNo=1
												beforePage.$refs.one[0].getData(); // 执行前一个页面的onLoad方法
												console.log(beforePage)
											}
										});
								} else {
					
								}
							}).catch(err => {});
							
						} else {
							var obj = getNewFormJsonString(that.fromJson, resdata)
							var params = {
								flowCode: that.columnCode,
								versionNumber: that.versionNumber,
								annexJson: that.annexJson,
								formJson: obj,
								instTitle: that.formData1.instTitle,
								instDesc: that.formData1.instDesc
							}
							that.config.postRequest('/flow/inst/save', params).then(res => {
								if (res.data.code == 0) {
									let pages = getCurrentPages(); // 当前页面
									let beforePage = pages[pages.length - 2]; // 前一个页面
									uni.navigateBack({
										success: function() {
											beforePage.$refs.one[0].pageNo=1
											beforePage.$refs.one[0].getData(); // 执行前一个页面的onLoad方法
											console.log(beforePage)
										}
									});
								} else {
					
								}
							}).catch(err => {});
						}
					
						
					}).catch(err => {
						console.log('表单错误信息：', err);
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
					
				})
				
				
			},
			rulesData(fromJson){
				console.log(fromJson)
				let myRules={};
				let myFormData={};
				for (var i in fromJson) {
					var field = fromJson[i].field
					myFormData["" + field + ""] = fromJson[i].val || ''
					var requireStr = fromJson[i].require
					
					
					
					var rulesArr = []
					
					//必填验证 添加规则
					if(requireStr==true || requireStr=='true'){
						var rulesFieldObj = {}
						rulesFieldObj.required = fromJson[i].require
						rulesFieldObj.errorMessage = '请输入'
						rulesArr.push(rulesFieldObj)
						
						//添加其他验证 扩展部分
						
						myRules[field]={rules:[]}
						myRules[field].rules=rulesArr;
						
					}else{
						continue
						//结束本次循环，进入下次循环
					}
					
				}
			
			
				
			this.rules=myRules;
			this.formData=myFormData;
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	/* 将三个内容view的display设置为none(隐藏) */
	.end-title {
		display: flex;
		height: 90upx;
		align-items: center;
		font-size: 34upx;
		background: #FFFFFF;

	}

	.end-title view {
		flex-grow: 1;
		text-align: center;
		padding: 10upx 0;

		/* margin-bottom: 10upx; */
	}

	.end-cont {
		display: none;
	}

	.btna {
		color: #FFFFFF;
		background: #00A0FF;
		line-height: 70upx;
	}

	.dis {
		display: block;
	}

	.uni-swiper-tab {
		border-bottom: 1upx solid #EEEEEE;
		background-color: #FFFFFF;
		display: flex;
		height: 90upx;
		align-content: space-between;
	}

	.swiper-tab-list {
		color: #969696;
		font-weight: bold;
		font-size: 34upx;
		text-align: center;
	}

	.uni-tab-bar .active {
		color: #343434;
	}

	.active .swiper-tab-line {
		border-bottom: 6upx solid #FEDE33;
		/* width: 70upx; */
		margin: auto;
		border-top: 6upx solid #FEDE33;
		border-radius: 20upx;
	}
</style>