feat：插件详情支持动态API调用

src/components/render/PageRender.vue

@@ -1,6 +1,11 @@
 <script lang="ts" setup>
+import { isNullOrEmptyObject } from '@/@core/utils'
+import api from '@/api'
 import { type PropType, ref } from 'vue'
 
+// 定议外部事件
+const emit = defineEmits(['action'])
+
 // 组件接口
 interface RenderProps {
   component: string
@@ -9,6 +14,7 @@ interface RenderProps {
   content?: any
   slots?: any
   props?: any
+  events?: any
 }
 
 // 输入参数
@@ -16,43 +22,64 @@ const elementProps = defineProps({
   config: Object as PropType<RenderProps>,
 })
 
-// 配置元素
-const formItem = ref<RenderProps>(elementProps.config ?? {
-  component: 'div',
-  text: '',
-  html: '',
-  props: {},
-  content: [],
-  slots: {},
-})
+// 元素API事件响应
+async function commonAction(api_path: string, method: string, params = {}) {
+  if (!api_path || !method) return
+  if (method.toUpperCase() === 'GET') {
+    await api.get(api_path, {
+      params: params,
+    })
+  } else {
+    await api.post(api_path, params)
+  }
+  emit('action')
+}
+
+// 组装事件
+let componentEvents: { [key: string]: any } = {}
+if (!isNullOrEmptyObject(elementProps.config?.events)) {
+  for (const key in elementProps.config?.events) {
+    const attr = elementProps.config?.events[key]
+    const func = async () => {
+      await commonAction(attr['api'], attr['method'], attr['params'])
+    }
+    componentEvents[key] = func
+  }
+} else {
+  componentEvents = {}
+}
 </script>
 
 <template>
   <Component
-    :is="formItem.component"
-    v-if="!formItem.html"
-    v-bind="formItem.props"
+    :is="elementProps.config?.component"
+    v-if="!elementProps.config?.html"
+    v-bind="elementProps.config?.props"
+    v-on="componentEvents"
   >
-    {{ formItem.text }}
-    <template v-for="(content, name) in (formItem.slots || [])" :key="name" v-slot:[name]="{_props}">
+    {{ 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 || [])"
+          v-for="(slotItem, slotIndex) in content || []"
           :key="slotIndex"
           :config="slotItem"
+          @action="emit('action')"
         />
       </slot>
     </template>
     <PageRender
-      v-for="(innerItem, innerIndex) in (formItem.content || [])"
+      v-for="(innerItem, innerIndex) in elementProps.config?.content || []"
       :key="innerIndex"
       :config="innerItem"
+      @action="emit('action')"
     />
   </Component>
   <Component
-    :is="formItem.component"
-    v-if="formItem.html"
-    v-bind="formItem.props"
-    v-html="formItem.html"
+    :is="elementProps.config?.component"
+    v-if="elementProps.config?.html"
+    v-bind="elementProps.config?.props"
+    v-html="elementProps.config?.html"
+    v-on="componentEvents"
   />
 </template>