108 lines
3.2 KiB
Vue
108 lines
3.2 KiB
Vue
<template>
|
|
<a-card size="small">
|
|
<template #title>
|
|
<a-tabs v-model:active-key="activeKey" centered size="small">
|
|
<a-tab-pane v-if="currentItem.uuid" key="item" tab="组件配置" />
|
|
<a-tab-pane key="form" tab="表单配置" />
|
|
</a-tabs>
|
|
</template>
|
|
<div :style="{ minHeight: 'calc(100vh - 190px)', maxHeight: 'calc(100vh - 190px)', overflowY: 'auto' }">
|
|
<div v-if="activeKey === 'form'">
|
|
<form-config-panel :form-config="formConfig" @update:form-config="onUpdateFormConfig"></form-config-panel>
|
|
</div>
|
|
<div v-else>
|
|
<a-tabs v-model:active-key="currentSection" size="small" animated>
|
|
<a-tab-pane v-if="currentItem.formItem?.group === 'form'" key="config" tab="组件配置">
|
|
<form-item-config-panel
|
|
:form-item="currentItem.formItem"
|
|
:form-config="formConfig"
|
|
@update:form-item-config="onUpdateFormItemConfig"
|
|
></form-item-config-panel>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="attribute" tab="组件属性">
|
|
<property-config :form-item="currentItem.formItem" @update:form-item="onUpdateFormItem"></property-config>
|
|
</a-tab-pane>
|
|
<a-tab-pane v-if="currentItem.formItem?.group === 'form'" key="rule" tab="验证规则">
|
|
<validate-rule-config
|
|
:rules="currentItem.formItem.rules"
|
|
@update:rules="onUpdateRules"
|
|
></validate-rule-config>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { FormConfig, FormItem, FormItemConfig } from '@/components/form-render/form-render-types'
|
|
import { FormDesignerItem } from '../form-designer-types'
|
|
import XEUtils from 'xe-utils'
|
|
import { Rule } from 'ant-design-vue/es/form'
|
|
|
|
const props = defineProps({
|
|
currentItem: {
|
|
type: Object as PropType<FormDesignerItem>,
|
|
required: false,
|
|
default: () => {
|
|
return {}
|
|
},
|
|
},
|
|
formConfig: {
|
|
type: Object as PropType<FormConfig>,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const { currentItem, formConfig } = toRefs(props)
|
|
const emit = defineEmits<{
|
|
'update:form-item': [formItem: FormDesignerItem]
|
|
'update:form-config': [formConfig: FormConfig]
|
|
}>()
|
|
|
|
const activeKey = ref('form')
|
|
const currentSection = ref('config')
|
|
watch(
|
|
currentItem,
|
|
(newVal) => {
|
|
activeKey.value = newVal.uuid ? 'item' : 'form'
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
|
|
const itemType = computed(() => {
|
|
return currentItem.value.formItem.group
|
|
})
|
|
|
|
watch(
|
|
itemType,
|
|
(v) => {
|
|
currentSection.value = v === 'form' ? 'config' : 'attribute'
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
|
|
const onUpdateFormConfig = (newFormConfig: FormConfig) => {
|
|
emit('update:form-config', newFormConfig)
|
|
}
|
|
const onUpdateFormItemConfig = (_formItemConfig: FormItemConfig) => {
|
|
emit(
|
|
'update:form-item',
|
|
XEUtils.assign(currentItem.value, {
|
|
formItem: XEUtils.assign(currentItem.value.formItem, { config: _formItemConfig }),
|
|
}),
|
|
)
|
|
}
|
|
const onUpdateFormItem = (formItem: FormItem) => {
|
|
emit('update:form-item', XEUtils.assign(currentItem.value, { formItem }))
|
|
}
|
|
|
|
const onUpdateRules = (_rules: Rule[]) => {
|
|
emit(
|
|
'update:form-item',
|
|
XEUtils.assign(currentItem.value, {
|
|
formItem: XEUtils.assign(currentItem.value.formItem, { rules: _rules }),
|
|
}),
|
|
)
|
|
}
|
|
</script>
|