mobile-workflow/components/WFormItem.vue

<template>
	<!-- 	<component :is="type" v-model="_value" :form-props="formProps" :readonly="readonly" :formData="formData"
		:index="index" /> -->
	<!-- APP和H5支持，但小程序不支持vue动态组件，目前只能用死办法了 -->
	<TextInput v-if="type === 'TextInput'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<AmountInput v-else-if="type === 'AmountInput'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<TextareaInput v-else-if="type === 'TextareaInput'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<SelectInput v-else-if="type === 'SelectInput'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<FileUpload @resize="$emit('resize')" v-else-if="type === 'FileUpload'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<ImageUpload @resize="$emit('resize')" v-else-if="type === 'ImageUpload'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<MultipleSelect v-else-if="type === 'MultipleSelect'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<NumberInput v-else-if="type === 'NumberInput'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<TimePicker v-else-if="type === 'TimePicker'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" :index="index" />
	<TimeRangePicker v-else-if="type === 'TimeRangePicker'" v-model="_value" :form-props="formProps"
		:readonly="readonly" :formData="formData" :index="index" />
	<DateTime v-else-if="type === 'DateTime'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<DateTimeRange v-else-if="type === 'DateTimeRange'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<UserPicker v-else-if="type === 'UserPicker'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<DeptPicker v-else-if="type === 'DeptPicker'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<GroupPicker v-else-if="type === 'GroupPicker'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<Score v-else-if="type === 'Score'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<Description v-else-if="type === 'Description'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<TableList @resize="$emit('resize')" v-else-if="type === 'TableList'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<SelectPlus @resize="$emit('resize')" v-else-if="type === 'SelectPlus'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<Location v-else-if="type === 'Location'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<Provinces v-else-if="type === 'Provinces'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<SignPanel v-else-if="type === 'SignPanel'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<ProcessIndex v-else-if="type === 'ProcessIndex'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<CalcFormula v-else-if="type === 'CalcFormula'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" :index="index" />
	<OuterForm v-else-if="type === 'OuterForm'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />
	<WebIframe v-else-if="type === 'WebIframe'" v-model="_value" :form-props="formProps" :readonly="readonly"
		:formData="formData" />

</template>

<script>
	import TextInput from './form/TextInput.vue'
	import AmountInput from './form/AmountInput.vue'
	import TextareaInput from './form/TextareaInput.vue'
	import SelectInput from './form/SelectInput.vue'
	import FileUpload from './form/FileUpload.vue'
	import ImageUpload from './form/ImageUpload.vue'
	import MultipleSelect from './form/MultipleSelect.vue'
	import NumberInput from './form/NumberInput.vue'
	import TimePicker from './form/TimePicker.vue'
	import TimeRangePicker from './form/TimeRangePicker.vue'
	import DateTime from './form/DateTime.vue'
	import DateTimeRange from './form/DateTimeRange.vue'
	import UserPicker from './form/UserPicker.vue'
	import DeptPicker from './form/DeptPicker.vue'
	import GroupPicker from './form/GroupPicker.vue'
	import Score from './form/Score.vue'
	import Description from './form/Description.vue'
	import TableList from './form/TableList.vue'
	import SelectPlus from './form/SelectPlus.vue'
	import Location from './form/Location.vue'
	import Provinces from './form/Provinces.vue'
	import SignPanel from './form/SignPanel.vue'
	import ProcessIndex from './form/ProcessIndex.vue'
	import CalcFormula from './form/CalcFormula.vue'
	import OuterForm from './form/OuterForm.vue'
	import WebIframe from './form/WebIframe.vue'
	import { computed } from 'vue'

	export default {
		name: 'WFormItem',
		components: {
			TextInput,
			AmountInput,
			TextareaInput,
			SelectInput,
			FileUpload,
			ImageUpload,
			MultipleSelect,
			NumberInput,
			TimePicker,
			TimeRangePicker,
			DateTime,
			DateTimeRange,
			UserPicker,
			DeptPicker,
			GroupPicker,
			Score,
			Description,
			TableList,
			SelectPlus,
			Location,
			Provinces,
			SignPanel,
			ProcessIndex,
			CalcFormula,
			OuterForm,
			WebIframe
		},
		props: {
			type: String,
			index: {
				type: Number,
				default: 0
			},
			formData: { //整个表单的值
				type: Object,
				default: () => {
					return {}
				}
			},
			modelValue: Object | Array | String | Number,
			formProps: { //表单json配置，用来渲染表单
				type: Object,
				default: () => {
					return {}
				}
			},
			readonly: Boolean
		},
		computed: {
			_value: {
				get() {
					return this.modelValue
				},
				set(val) {
					this.$emit('update:modelValue', val)
				}
			}
		},
		emits: ['update:modelValue']
	}
</script>

<style>

</style>