docs: 数据收集模块设计

src/enums/storageEnum.ts

@@ -12,5 +12,7 @@ export enum StorageEnum {
   // 工作台布局配置
   GO_CHART_LAYOUT_STORE = 'GO_CHART_LAYOUT',
   // 工作台需要保存的数据
-  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST'
+  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST',
+  // 数据收集
+  GO_DATA_COLLECT = 'GO_DATA_COLLECT'
 }

src/packages/index.d.ts

@@ -114,6 +114,11 @@ export interface PublicConfigType extends requestConfig {
   filter?: string
   setPosition: Function
 }
+export interface dataCollectComponent {
+  componentId: string
+  field: string
+  [key: string]: any
+}
 
 export interface CreateComponentType extends PublicConfigType {
   key: string
@@ -122,6 +127,7 @@ export interface CreateComponentType extends PublicConfigType {
   eventList?: Array<OptionsType>
   methodList?: Array<OptionsType>
   eventConfig?: EventConfig
+  dataCollectComponentList?: Array<dataCollectComponent>
 }
 
 // 获取组件实例类中某个key对应value类型的方法

src/store/modules/dataCollectStore/dataCollectStore.d.ts

@@ -0,0 +1,7 @@
+export enum DataCollectStoreEnums {
+}
+
+export interface DataCollectStoreType {
+  model: Record<string, number | string | Array<string | number>>,
+  mountedComponentSet: Set<string | number>
+}

src/store/modules/dataCollectStore/dataCollectStore.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { DataCollectStoreType, DataCollectStoreEnums } from './dataCollectStore.d'
+
+// 全局设置
+export const useDataCollectStore = defineStore({
+  id: 'useDataCollectStore',
+  state: (): DataCollectStoreType => {
+    return {
+        mountedComponentSet: new Set(),
+        model: {}
+    }
+  },
+  getters: {
+
+  },
+  actions: {
+    clearAll(){
+      this.mountedComponentSet.clear()
+    },
+    recordMountedComponent(id: string){
+      this.mountedComponentSet.add(id)
+    }
+  }
+})

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataForeignKey/index.ts

@@ -0,0 +1,3 @@
+import ChartDataForeignKey from './index.vue'
+
+export { ChartDataForeignKey }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataForeignKey/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <CollapseItem name="关联表单组件" :expanded="true">
+    <template #header>
+      <n-icon size="24" @click="onAdd">
+        <component :is="AddCircleIcon"></component>
+      </n-icon>
+    </template>
+    <n-data-table
+      :columns="columns"
+      :data="data"
+    />
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import {
+  CollapseItem
+} from '@/components/Pages/ChartItemSetting'
+import { icon } from '@/plugins/icon'
+import { FormInst, NSpace as Space, NIcon as Icon } from 'naive-ui'
+import { ref, watch, h, reactive } from 'vue'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+
+const { targetData } = useTargetData();
+const { AddCircleIcon } = icon.ionicons5
+const showModal = ref(false)
+const model = ref({})
+
+let dataCollectComponentList: any
+
+watch(targetData, () => {
+  if(targetData.value.dataCollectComponentList){
+    dataCollectComponentList = targetData.value.dataCollectComponentList
+  }else{
+    dataCollectComponentList = reactive([])
+  }
+})
+
+const columnIconAttr = {
+  size: 18,
+  style: {
+    cursor: 'pointer'
+  }
+}
+
+const onAdd = () => {
+  model.value = {}
+  showModal.value = true
+}
+
+const onEdit = (rowData: Record<string, any>) => {
+  model.value = {
+    ...rowData
+  }
+  showModal.value = true
+}
+
+const columns = [
+  {title: '组件名称', key: 'componentName'},
+  // {title: '组件Id', key: 'componentId'},
+  {title: '绑定字段', field: 'field'},
+  { title: '操作', render(rowData: any){
+    return h(Space, () => (h({
+      render(){
+        return [
+          h(Icon, {
+            ...columnIconAttr,
+            title: '编辑',
+            onClick(){
+              onEdit(rowData)
+            }
+          }, () => h(icon.carbon.EditIcon)),
+          h(Icon, {
+            ...columnIconAttr,
+            title: '删除',
+            onClick(){
+              
+            }
+          }, () => h(icon.ionicons5.RemoveIcon))
+        ]
+      }
+    })))
+  }},
+]
+const data: Array<any> = []
+
+</script>
+
+<style></style>

src/views/chart/ContentConfigurations/components/ChartData/index.vue

@@ -13,7 +13,10 @@
     ></chart-data-static>
 
     <!-- 动态 -->
-    <chart-data-ajax v-else></chart-data-ajax>
+    <template v-else>
+      <chart-data-ajax></chart-data-ajax>
+      <chart-data-foreign-key></chart-data-foreign-key>
+    </template>
   </div>
 </template>
 
@@ -22,6 +25,7 @@ import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '../hooks/useTargetData.hook'
 import { ChartDataStatic } from './components/ChartDataStatic/index'
 import { ChartDataAjax } from './components/ChartDataAjax/index'
+import { ChartDataForeignKey } from './components/ChartDataForeignKey/index'
 import { SelectCreateDataType, SelectCreateDataEnum } from './index.d'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 

src/views/preview/components/PreviewRenderList/PreViewRenderItem.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang='ts' setup>
-import { PropType, toRefs, computed, getCurrentInstance, ComponentInternalInstance } from 'vue'
+import { PropType, ref, toRefs, getCurrentInstance, ComponentInternalInstance, onMounted } from 'vue'
 import { useEventBus } from '@/hooks'
 import { convertEventBusListeners } from '@/hooks/useEventBus.hook'
 import { getSizeStyle } from '../../utils'
@@ -20,6 +20,7 @@ import { CreateComponentType, EventConfig, PackagesCategoryEnum } from '@/packag
 import {  newFunctionHandle } from '@/utils'
 import isObject from 'lodash/isObject'
 import { COMMON_EVENT_ENUM, DATA_COMPONENT_EVENT_ENUM } from '@/enums/eventEnum'
+import { useDataCollectStore } from '@/store/modules/dataCollectStore/dataCollectStore'
 
 const props = defineProps({
   item: {
@@ -42,7 +43,7 @@ const props = defineProps({
 
 
 const { item, themeSetting, themeColor, useEvent } = toRefs(props);
-const componentRef = ref(null)
+const componentRef = ref<any>(null)
 const instance = getCurrentInstance() as ComponentInternalInstance
 const bus = useEventBus()
 /**
@@ -77,12 +78,6 @@ const getEventList = (eventConfig: EventConfig) => {
     }, {} as EventConfig)
   return res;
 }
-// 是否是数据组件
-const isDataComponent = computed(() => {
-  return item.value.chartConfig.package === PackagesCategoryEnum.CHARTS ||
-          item.value.chartConfig.package === PackagesCategoryEnum.TABLES
-})
-
 const listeners: Record<string, any> = {
   on: {
     [COMMON_EVENT_ENUM.FORCE_UPDATE]: () => {
@@ -91,13 +86,25 @@ const listeners: Record<string, any> = {
   }
 }
 
-if(isDataComponent.value){
+// 数据组件
+if( item.value.chartConfig.package === PackagesCategoryEnum.CHARTS ||
+     item.value.chartConfig.package === PackagesCategoryEnum.TABLES){
   // 数据组件监听刷新数据
   listeners.on[DATA_COMPONENT_EVENT_ENUM.LOAD_DATA] = () => {
-    componentRef.value.loadData()
+    componentRef.value?.loadData()
   }
 }
 
+// 表单组件
+if(item.value.chartConfig.package === PackagesCategoryEnum.FORM){
+  const dataCollectStore = useDataCollectStore()
+  // 渲染完成记录状态
+  onMounted(() => {
+    dataCollectStore.recordMountedComponent(item.value.id)
+  })
+
+}
+
 useEventBus(convertEventBusListeners(listeners, item.value.id))
 
 </script>

src/views/preview/index.vue

@@ -28,7 +28,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { PreviewRenderList } from './components/PreviewRenderList'
+import { PreviewRenderList } from './components/PreviewRenderList/index'
 import { getFilterStyle } from '@/utils'
 import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'

数据收集模块设计.drawio

@@ -1,6 +1,6 @@
 <mxfile host="65bd71144e">
     <diagram id="tYnlZV8h0JO72zglXhLP" name="Page-1">
-        <mxGraphModel dx="1055" dy="528" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+        <mxGraphModel dx="1032" dy="528" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
             <root>
                 <mxCell id="0"/>
                 <mxCell id="1" parent="0"/>
@@ -128,7 +128,7 @@
                 <mxCell id="6" value="表单组件n" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
                     <mxGeometry x="447" y="330" width="120" height="20" as="geometry"/>
                 </mxCell>
-                <mxCell id="16" value="Store&lt;br&gt;{&lt;br&gt;&quot;组件Id1&quot;: true,&lt;br&gt;&quot;组件Id2&quot;: true,&lt;br&gt;}" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+                <mxCell id="16" value="Store&lt;br&gt;[&quot;组件Id1&quot;,&quot;组件Id2&quot;]" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
                     <mxGeometry x="330" y="10" width="120" height="80" as="geometry"/>
                 </mxCell>
                 <mxCell id="33" value="" style="edgeStyle=none;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="1" source="30" target="32" edge="1">
@@ -180,7 +180,7 @@
                 </mxCell>
                 <mxCell id="50" value="N" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="48" vertex="1" connectable="0">
                     <mxGeometry x="-0.9351" relative="1" as="geometry">
-                        <mxPoint as="offset"/>
+                        <mxPoint y="9" as="offset"/>
                     </mxGeometry>
                 </mxCell>
                 <mxCell id="34" value="监听Store变化，判断关联组件是否渲染完成" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
@@ -198,7 +198,10 @@
                 <mxCell id="42" value="发送请求" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
                     <mxGeometry x="134" y="800" width="120" height="60" as="geometry"/>
                 </mxCell>
-                <mxCell id="44" value="根据响应渲染数据" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+                <mxCell id="70" value="" style="edgeStyle=none;html=1;" parent="1" source="44" target="69" edge="1">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="44" value="根据配置的过滤函数处理返回结果" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
                     <mxGeometry x="134" y="940" width="120" height="60" as="geometry"/>
                 </mxCell>
                 <mxCell id="51" value="Store&lt;br&gt;{&lt;br&gt;&quot;组件Id1&quot;: value,&lt;br&gt;&quot;组件Id2&quot;:value,&lt;br&gt;}" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
@@ -228,6 +231,9 @@
                         <mxPoint x="320" y="670" as="targetPoint"/>
                     </mxGeometry>
                 </mxCell>
+                <mxCell id="69" value="渲染视图" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+                    <mxGeometry x="134" y="1080" width="120" height="60" as="geometry"/>
+                </mxCell>
             </root>
         </mxGraphModel>
     </diagram>