Files
mosr-web/src/views/workflow/form/FormDesignRender.vue
2024-03-04 19:13:43 +08:00

136 lines
3.1 KiB
Vue

<template>
<component ref="form" :is="com" :config="config" :mode="mode" :perm="perm" @update="update" v-model:value="_value"
v-bind="config.props"/>
</template>
<script setup>
import TextInput from './components/TextInput.vue'
import TextareaInput from './components/TextareaInput.vue'
import NumberInput from './components/NumberInput.vue'
import AmountInput from './components/AmountInput.vue'
import SelectInput from './components/SelectInput.vue'
import MultipleSelect from './components/MultipleSelect.vue'
import DateTime from './components/DateTime.vue'
import DateTimeRange from './components/DateTimeRange.vue'
import ImageUpload from './components/ImageUpload.vue'
import FileUpload from './components/FileUpload.vue'
import SpanLayout from './components/SpanLayout.vue'
import UserPicker from './components/UserPicker.vue'
import DeptPicker from './components/DeptPicker.vue'
import RatePicker from './components/RatePicker.vue'
import Description from './components/Description.vue'
import TableList from './components/TableList.vue'
import SignPanel from './components/SignPanel.vue'
import {defineProps, defineEmits, computed} from 'vue'
const emit = defineEmits()
const com = ref()
const props = defineProps({
mode: {
type: String,
default: 'DESIGN'
},
perm: {
type: String,
default: 'E'
},
value: {
type: Object,
default: undefined
},
config: {
type: Object,
default: () => {
return {}
}
},
name: {
type: String,
default: ''
},
})
const _value = computed({
get() {
return props.value
},
set(value) {
emit('update:value', value)
}
})
// const _value = ref(props.value)
watch(() => props.value, (value) => {
_value.value = value
})
watch(() => props.config, (value) => {
init(value.name)
})
watch(() => props.perm, (value) => {
props.perm=value
})
const init = (value) => {
switch (value) {
case 'TextInput':
com.value = TextInput;
break;
case 'TextareaInput':
com.value = TextareaInput;
break;
case 'NumberInput':
com.value = NumberInput;
break;
case 'AmountInput':
com.value = AmountInput;
break;
case 'SelectInput':
com.value = SelectInput;
break;
case 'MultipleSelect':
com.value = MultipleSelect;
break;
case 'DateTime':
com.value = DateTime;
break;
case 'DateTimeRange':
com.value = DateTimeRange;
break;
case 'ImageUpload':
com.value = ImageUpload;
break;
case 'FileUpload':
com.value = FileUpload;
break;
case 'SpanLayout':
com.value = SpanLayout;
break;
case 'UserPicker':
com.value = UserPicker;
break;
case 'DeptPicker':
com.value = DeptPicker;
break;
case 'RatePicker':
com.value = RatePicker;
break;
case 'Description':
com.value = Description;
break;
case 'TableList':
com.value = TableList;
break;
case 'SignPanel':
com.value = SignPanel;
break;
}
}
init(props.config.name)
</script>
<style scoped>
</style>