mobile-workflow/components/FormRender.vue

<template>
	<view class="wflow-form">
		<uni-forms ref="wflowForm" class="wflow-form" :rules="rules" :modelValue="_value" label-position="top"
			label-width="200">
			<uni-forms-item :class="`w-form-item ${item.perm === 'R' ? 'w-form-item-r':''}`" v-for="item in formFields"
				v-show="showItem(item, _value[item.id])" :name="item.id" :key="item.id" :required="item.props.required">
				<template v-slot:label>
					<view class="w-form-title">
						<text style="color: #CE5266;" v-if="item.props.required && item.perm === 'E'">* </text>
						<text style="font-size: 32rpx;">{{item.title}}</text>
					</view>
				</template>
				<w-form-item :type="item.name" v-model="_value[item.id]" :form-props="item.props"
					:readonly="item.perm !== 'E'" :formData="_value" />
			</uni-forms-item>
		</uni-forms>
	</view>

</template>

<script>
	import { showItem } from '@/utils/tool.js'
	import WFormItem from './WFormItem.vue'

	//import FormComponents from '@/components/form/ComponentsExport.js'

	export default {
		name: 'FormRender',
		options: { styleIsolation: 'shared' },
		components: { WFormItem },
		props: {
			modelValue: { //表单双向绑定的值
				type: Object,
				default: () => {
					return {}
				}
			},
			config: { //表单联动相关配置
				type: Object,
				default: () => {
					return {}
				}
			},
			jsonConf: { //表单json配置，用来渲染表单
				type: Array,
				default: () => {
					return []
				}
			}
		},
		computed: {
			_value: {
				get() {
					return this.modelValue
				},
				set(val) {
					emit('update:modelValue', val)
				}
			},
			rules() {
				const formRule = {}
				this.formFields.forEach(v => {
					if (v.props.required) {
						formRule[v.id] = {
							rules: [{
								required: true,
								errorMessage: '请填写' + v.title
							}]
						}
					}
				})
				return formRule
			},
			formFields() {
				const fields = []
				this.jsonConf.forEach(field => this.loadInnerField(field, fields))
				console.log(JSON.stringify(fields),666)
				return fields
			}
		},
		data() {
			return {
				
			}
		},
		onReady() {
			this.$refs['wflowForm'].setRules(this.rules)
		},
		methods: {
			showItem,
			loadInnerField(field, items) {
				if (field.name === 'SpanLayout') {
					field.props.items.forEach(f => this.loadInnerField(f, items))
				} else {
					items.push(field)
				}
			},
			validate(call) {
				this.$refs['wflowForm'].validate().then(res => {
					call(true)
					console.log('表单数据信息：', res);
				}).catch(err => {
					// call(false)
					console.log('表单错误信息：', err);
				})
			}
		},
		emits: ['update:modelValue']
	}
</script>

<style lang="less" scoped>
	.w-form-item {
		padding: 0 16rpx 32rpx 16rpx;
		background-color: white;
		margin-bottom: 16rpx;
		font-size: 32rpx !important;

		.uni-forms-item__error {
			padding-top: 0 !important;
		}

		.uni-easyinput__content-input {
			height: 30px;
		}

		.w-form-title {
			display: flex;
			align-items: center;
			padding: 13rpx 0;
		}
	}
</style>