157 lines
6.2 KiB
Vue
157 lines
6.2 KiB
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'" :title="title" 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,
|
||
title: String,
|
||
},
|
||
computed: {
|
||
_value: {
|
||
get() {
|
||
return this.modelValue
|
||
},
|
||
set(val) {
|
||
this.$emit('update:modelValue', val)
|
||
}
|
||
}
|
||
},
|
||
emits: ['update:modelValue']
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style> |