yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: 处理表单设计器右侧属性配置面板表单不展示问题

pull/43/head
xiaohong 2024-07-30 11:08:01 +08:00
parent 5c89365c44
commit c5811b82b8
4 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/FormDesign/src/components/VFormDesign/components/ComponentProps.vue
View File

@ -14,6 +14,7 @@ import {
import { formItemsForEach, remove } from '../../../utils'
import type { IBaseFormAttrs } from '../config/formItemPropsConfig'
import FormOptions from './FormOptions.vue'
import { componentMap } from '../../../../../Form/src/componentMap.ts'
const { formConfig } = useFormDesignState()
// 让compuated属性自动更新
@ -106,6 +107,10 @@ const inputOptions = computed(() => {
})
})
const Com = computed(() => {
return com => componentMap.get(com) as ReturnType<typeof defineComponent>
})
watch(
() => formConfig.value.currentItem!.componentProps,
() => {
@ -133,7 +138,7 @@ const linkOptions = computed(() => {
<div v-if="formConfig.currentItem" class="properties-body">
<Empty v-if="!formConfig.currentItem.key" class="hint-box" description="未选择组件" />
<Form label-align="left" layout="vertical">
<aForm label-align="left" layout="vertical">
<!-- 循环遍历渲染组件属性 -->
<div v-if="formConfig.currentItem && formConfig.currentItem.componentProps">
@ -144,7 +149,7 @@ const linkOptions = computed(() => {
<template v-for="(child, index) of item.children" :key="index">
<component
v-bind="child.componentProps"
:is="child.component"
:is="Com(child.component)"
v-if="child.component"
v-model:value="formConfig.currentItem.componentProps[item.name][index]"
/>
@ -152,7 +157,7 @@ const linkOptions = computed(() => {
</div>
<!-- 如果不是数组，则正常处理属性值 -->
<component
v-bind="item.componentProps" :is="item.component" v-else-if="item.component"
v-bind="item.componentProps" :is="Com(item.component)" v-else-if="item.component"
v-model:value="formConfig.currentItem.componentProps[item.name]" class="component-prop"
/>
</FormItem>
@ -188,7 +193,7 @@ const linkOptions = computed(() => {
<FormItem v-if="['Grid'].includes(formConfig.currentItem.component)" label="栅格">
<FormOptions />
</FormItem>
</Form>
</aForm>
</div>
</div>
</template>

16
src/components/FormDesign/src/components/VFormDesign/components/FormItemColumnProps.vue
View File

@ -2,11 +2,13 @@
* @Description: 表单项属性
-->
<script lang="ts" setup>
import { Empty, Form, FormItem } from 'ant-design-vue'
import {computed, defineComponent} from 'vue'
import { Empty, Form, FormItem, } from 'ant-design-vue'
import { isArray } from 'lodash-es'
import { baseItemColumnProps } from '../config/formItemPropsConfig'
import { useFormDesignState } from '../../../hooks/useFormDesignState'
import { componentMap } from '../../../../../Form/src/componentMap.ts'
const { formConfig } = useFormDesignState()
function showProps(exclude: string[] | undefined) {
@ -15,22 +17,28 @@ function showProps(exclude: string[] | undefined) {
return isArray(exclude) ? !exclude.includes(formConfig.value.currentItem!.component) : true
}
const Com = computed(() => {
return com => componentMap.get(com) as ReturnType<typeof defineComponent>
})
console.log(baseItemColumnProps);
</script>
<template>
<div class="properties-content">
<div v-if="formConfig.currentItem" class="properties-body">
<Empty v-if="!formConfig.currentItem.key" class="hint-box" description="未选择控件" />
<Form v-else label-align="left" layout="vertical">
<aForm v-else label-align="left" layout="vertical">
<div v-for="item of baseItemColumnProps" :key="item.name">
<FormItem v-if="showProps(item.exclude)" :label="item.label">
<component
v-bind="item.componentProps" :is="item.component" v-if="formConfig.currentItem.colProps && item.component"
v-bind="item.componentProps" :is="Com(item.component)" v-if="formConfig.currentItem.colProps && item.component"
v-model:value="formConfig.currentItem.colProps[item.name]" class="component-props"
/>
</FormItem>
</div>
</Form>
</aForm>
</div>
</div>
</template>

18
src/components/FormDesign/src/components/VFormDesign/components/FormItemProps.vue
View File

@ -2,7 +2,7 @@
* @Description: 表单项属性，控件属性面板
-->
<script lang="ts" setup>
import { computed, watch } from 'vue'
import { computed, watch, defineComponent } from 'vue'
import { Checkbox, Col, Empty, Form, FormItem, Input, Switch } from 'ant-design-vue'
import { isArray } from 'lodash-es'
import {
@ -11,7 +11,7 @@ import {
baseFormItemControlAttrs,
baseFormItemProps,
} from '../../VFormDesign/config/formItemPropsConfig'
import { componentMap } from '../../../../../Form/src/componentMap.ts'
import { useFormDesignState } from '../../../hooks/useFormDesignState'
import RuleProps from './RuleProps.vue'
@ -44,18 +44,22 @@ const controlPropsList = computed(() => {
return showProps(item.exclude)
})
})
const Com = computed(() => {
return com => componentMap.get(com) as ReturnType<typeof defineComponent>
})
</script>
<template>
<div class="properties-content">
<div v-if="formConfig.currentItem?.itemProps" class="properties-body">
<Empty v-if="!formConfig.currentItem.key" class="hint-box" description="未选择控件" />
<Form v-else label-align="left" layout="vertical">
<aForm v-else label-align="left" layout="vertical">
<div v-for="item of baseFormItemProps" :key="item.name">
<FormItem v-if="showProps(item.exclude)" :label="item.label">
<component
v-bind="item.componentProps"
:is="item.component"
:is="Com(item.component)"
v-if="item.component"
v-model:value="formConfig.currentItem[item.name]"
class="component-props"
@ -66,7 +70,7 @@ const controlPropsList = computed(() => {
<FormItem v-if="showProps(item.exclude)" :label="item.label">
<component
v-bind="item.componentProps"
:is="item.component"
:is="Com(item.component)"
v-if="item.component"
v-model:value="formConfig.currentItem.itemProps[item.name]"
class="component-props"
@ -76,7 +80,7 @@ const controlPropsList = computed(() => {
<FormItem v-if="showProps(item.exclude)" :label="item.label">
<component
v-bind="item.componentProps"
:is="item.component"
:is="Com(item.component)"
v-if="item.component"
v-model:value="formConfig.currentItem.itemProps[item.name].span"
class="component-props"
@ -105,7 +109,7 @@ const controlPropsList = computed(() => {
>
<RuleProps />
</FormItem>
</Form>
</aForm>
</div>
</div>
</template>

6
src/components/FormDesign/src/components/VFormDesign/components/FormProps.vue
View File

@ -11,6 +11,8 @@ import {
FormItem,
InputNumber,
Slider,
RadioGroup,
RadioButton
} from 'ant-design-vue'
import { useFormDesignState } from '../../../hooks/useFormDesignState'
@ -38,7 +40,7 @@ const sliderSpan = computed(() => {
<template>
<div class="properties-content">
<Form class="properties-body" label-align="left" layout="vertical">
<aForm class="properties-body" label-align="left" layout="vertical">
<!-- <e-upload v-model="fileList"></e-upload> -->
<FormItem label="表单布局">
@ -129,6 +131,6 @@ const sliderSpan = computed(() => {
</Checkbox>
</Col>
</FormItem>
</Form>
</aForm>
</div>
</template>