From c5811b82b8905b7161cfc296a2d8d4097dee80bc Mon Sep 17 00:00:00 2001
From: xiaohong <1315228474@qq.com>
Date: Tue, 30 Jul 2024 11:08:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=99=A8=E5=8F=B3=E4=BE=A7=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=9D=A2=E6=9D=BF=E8=A1=A8=E5=8D=95=E4=B8=8D?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VFormDesign/components/ComponentProps.vue  | 13 +++++++++----
 .../components/FormItemColumnProps.vue         | 16 ++++++++++++----
 .../VFormDesign/components/FormItemProps.vue   | 18 +++++++++++-------
 .../VFormDesign/components/FormProps.vue       |  6 ++++--
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/components/FormDesign/src/components/VFormDesign/components/ComponentProps.vue b/src/components/FormDesign/src/components/VFormDesign/components/ComponentProps.vue
index dda6ded3..7525f7e7 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/ComponentProps.vue
+++ b/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>
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/FormItemColumnProps.vue b/src/components/FormDesign/src/components/VFormDesign/components/FormItemColumnProps.vue
index ccfeb7a5..8da5ec7a 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/FormItemColumnProps.vue
+++ b/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>
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/FormItemProps.vue b/src/components/FormDesign/src/components/VFormDesign/components/FormItemProps.vue
index 9c6e92f8..bcd54970 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/FormItemProps.vue
+++ b/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>
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/FormProps.vue b/src/components/FormDesign/src/components/VFormDesign/components/FormProps.vue
index 97ce2b63..17096de4 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/FormProps.vue
+++ b/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>