FIXME

src/components/render/FormRender.vue

@@ -3,83 +3,74 @@ import { RenderProps } from '@/api/types'
 import { type PropType, ref } from 'vue'
 
 // 输入参数
-const elementProps = defineProps({
+defineProps({
   config: Object as PropType<RenderProps>,
   form: Object as PropType<any>,
 })
-
-// 配置元素
-const formItem = ref<RenderProps>(
-  elementProps.config ?? {
-    component: 'div',
-    text: '',
-    html: '',
-    props: {},
-    slots: [],
-    content: [],
-  },
-)
-
-// 配置数据
-const formData = ref<any>(elementProps.form || {})
 </script>
 
 <template>
   <!-- 使用modelvalue -->
   <Component
-    :is="formItem.component"
+    :is="config.component"
-    v-if="!formItem.html && !!formItem.props?.modelvalue"
+    v-if="!config.html && !!config.props?.modelvalue"
-    v-bind="formItem.props"
+    v-bind="config.props"
-    v-model:value="formData[formItem.props?.modelvalue]"
+    v-model:value="form[config.props?.modelvalue]"
   >
-    {{ formItem.text }}
+    {{ config.text }}
     <!-- slots -->
-    <template v-for="(content, name) in formItem.slots || []" :key="name" v-slot:[name]="{ _props }">
+    <template v-for="(slotContents, name) in config.slots || {}" :key="name" v-slot:[name]="{ _props }">
       <slot :name="name" v-bind="_props">
-        <PageRender
+        <template v-for="(slotItem, slotIndex) in slotContents || []" :key="slotIndex">
-          v-for="(slotItem, slotIndex) in content || []"
+          <FormRender
-          :key="slotIndex"
+            v-if="!!slotItem.props?.modelvalue"
-          :config="slotItem"
+            v-model:value="form[slotItem.props?.modelvalue]"
-          @action="emit('action')"
+            :config="slotItem"
-        />
+            :form="form"
+          />
+          <FormRender v-else v-model="form[slotItem.props?.model]" :config="slotItem" :form="form" />
+        </template>
       </slot>
     </template>
     <!-- content -->
-    <template v-for="(innerItem, innerIndex) in formItem.content || []" :key="innerIndex">
+    <template v-for="(innerItem, innerIndex) in config.content || []" :key="innerIndex">
       <FormRender
         v-if="!!innerItem.props?.modelvalue"
-        v-model:value="formData[innerItem.props?.modelvalue]"
+        v-model:value="form[innerItem.props?.modelvalue]"
         :config="innerItem"
-        :form="formData"
+        :form="form"
       />
-      <FormRender v-else v-model="formData[innerItem.props?.model]" :config="innerItem" :form="formData" />
+      <FormRender v-else v-model="form[innerItem.props?.model]" :config="innerItem" :form="form" />
     </template>
   </Component>
   <!-- 使用html -->
-  <Component :is="formItem.component" v-else-if="formItem.html" v-bind="formItem.props" v-html="formItem.html" />
+  <Component :is="config.component" v-else-if="config.html" v-bind="config.props" v-html="config.html" />
   <!-- 使用model -->
-  <Component :is="formItem.component" v-else v-bind="formItem.props" v-model="formData[formItem.props?.model]">
+  <Component :is="config.component" v-else v-bind="config.props" v-model="form[config.props?.model]">
-    {{ formItem.text }}
+    {{ config.text }}
     <!-- slots -->
-    <template v-for="(content, name) in formItem.slots || []" :key="name" v-slot:[name]="{ _props }">
+    <template v-for="(slotContents, name) in config.slots || {}" :key="name" v-slot:[name]="{ _props }">
       <slot :name="name" v-bind="_props">
-        <PageRender
+        <template v-for="(slotItem, slotIndex) in slotContents || []" :key="slotIndex">
-          v-for="(slotItem, slotIndex) in content || []"
+          <FormRender
-          :key="slotIndex"
+            v-if="!!slotItem.props?.modelvalue"
-          :config="slotItem"
+            v-model:value="form[slotItem.props?.modelvalue]"
-          @action="emit('action')"
+            :config="slotItem"
-        />
+            :form="form"
+          />
+          <FormRender v-else v-model="form[slotItem.props?.model]" :config="slotItem" :form="form" />
+        </template>
       </slot>
     </template>
     <!-- content -->
-    <template v-for="(innerItem, innerIndex) in formItem.content || []" :key="innerIndex">
+    <template v-for="(innerItem, innerIndex) in config.content || []" :key="innerIndex">
       <FormRender
         v-if="!!innerItem.props?.modelvalue"
-        v-model:value="formData[innerItem.props?.modelvalue]"
+        v-model:value="form[innerItem.props?.modelvalue]"
         :config="innerItem"
-        :form="formData"
+        :form="form"
       />
-      <FormRender v-else v-model="formData[innerItem.props?.model]" :config="innerItem" :form="formData" />
+      <FormRender v-else v-model="form[innerItem.props?.model]" :config="innerItem" :form="form" />
     </template>
   </Component>
 </template>

src/components/render/PageRender.vue

@@ -9,7 +9,7 @@ import { RenderProps } from '@/api/types'
 const emit = defineEmits(['action'])
 
 // 输入参数
-const elementProps = defineProps({
+const props = defineProps({
   config: Object as PropType<RenderProps>,
 })
 
@@ -41,9 +41,9 @@ async function commonAction(api_path: string, method: string, params = {}) {
 // 组装事件
 let componentEvents = reactive<{ [key: string]: any }>({})
 watchEffect(() => {
-  if (!isNullOrEmptyObject(elementProps.config?.events)) {
+  if (!isNullOrEmptyObject(props.config?.events)) {
-    for (const key in elementProps.config?.events) {
+    for (const key in props.config?.events) {
-      const attr = elementProps.config?.events[key]
+      const attr = props.config?.events[key]
       const func = async () => {
         await commonAction(attr['api'], attr['method'], attr['params'])
       }
@@ -54,14 +54,9 @@ watchEffect(() => {
 </script>
 
 <template>
-  <Component
+  <Component :is="config?.component" v-if="!config?.html" v-bind="config?.props" v-on="componentEvents">
-    :is="elementProps.config?.component"
+    {{ config?.text }}
-    v-if="!elementProps.config?.html"
+    <template v-for="(content, name) in config?.slots || {}" :key="name" v-slot:[name]="{ _props }">
-    v-bind="elementProps.config?.props"
-    v-on="componentEvents"
-  >
-    {{ elementProps.config?.text }}
-    <template v-for="(content, name) in elementProps.config?.slots || []" :key="name" v-slot:[name]="{ _props }">
       <slot :name="name" v-bind="_props">
         <PageRender
           v-for="(slotItem, slotIndex) in content || []"
@@ -72,17 +67,17 @@ watchEffect(() => {
       </slot>
     </template>
     <PageRender
-      v-for="(innerItem, innerIndex) in elementProps.config?.content || []"
+      v-for="(innerItem, innerIndex) in config?.content || []"
       :key="innerIndex"
       :config="innerItem"
       @action="emit('action')"
     />
   </Component>
   <Component
-    :is="elementProps.config?.component"
+    :is="config?.component"
-    v-if="elementProps.config?.html"
+    v-if="config?.html"
-    v-bind="elementProps.config?.props"
+    v-bind="config?.props"
-    v-html="elementProps.config?.html"
+    v-html="config?.html"
     v-on="componentEvents"
   />
   <!-- 进度框 -->