Merge pull request #7 from summer001-pd/master

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

src/components/FormDesign/src/components/VFormDesign/components/ComponentProps.vue

@@ -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>

src/components/FormDesign/src/components/VFormDesign/components/FormItemColumnProps.vue

@@ -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>

src/components/FormDesign/src/components/VFormDesign/components/FormItemProps.vue

@@ -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>

src/components/FormDesign/src/components/VFormDesign/components/FormProps.vue

@@ -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>