perf: 优化联动交互

src/enums/eventEnum.ts

@@ -13,7 +13,7 @@ export enum BaseEvent {
 // 组件交互回调事件
 export enum InteractEvents {
   INTERACT_ON = 'interactOn',
-  INTERACT_COMPONENTS = 'interactComponents',
+  INTERACT_COMPONENT_ID = 'interactComponentId',
   INTERACT_FN = 'interactFn'
 }
 

src/hooks/useChartInteract.hook.ts

@@ -21,7 +21,8 @@ export const useChartInteract = (
 
   if (fnOnEvent.length === 0) return
   fnOnEvent.forEach(item => {
-    const index = chartEditStore.fetchTargetIndex(item.interactComponents)
+    const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+    if (index === -1) return
     const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
     Object.keys(item.interactFn).forEach(key => {
       if (Params.value[key]) {

src/packages/index.d.ts

@@ -130,7 +130,7 @@ export interface PublicConfigType {
     }
     interactEvents: {
       [InteractEvents.INTERACT_ON]: InteractEventOn.CHANGE | InteractEventOn.CLICK | undefined
-      [InteractEvents.INTERACT_COMPONENTS]: string | undefined
+      [InteractEvents.INTERACT_COMPONENT_ID]: string | undefined
       [InteractEvents.INTERACT_FN]: { [name: string]: string }
     }[]
   }

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue

@@ -25,7 +25,7 @@
     >
       <n-space justify="space-between">
         <n-text>关联组件 - {{ cardIndex + 1 }}</n-text>
-        <n-button type="error" text  size="small" @click="evDeleteEventsFn(cardIndex)">
+        <n-button type="error" text size="small" @click="evDeleteEventsFn(cardIndex)">
           <template #icon>
             <n-icon>
               <close-icon />
@@ -49,36 +49,47 @@
         </n-input-group>
       </setting-item-box>
 
-      <setting-item-box name="绑定组件" :alone="true">
+      <setting-item-box :alone="true">
-        <n-input-group>
+        <template #name>
-          <n-select
+          <n-text>绑定</n-text>
-            class="select-type-options"
+          <n-tooltip trigger="hover">
-            value-field="id"
+            <template #trigger>
-            label-field="key"
+              <n-icon size="21" :depth="3">
-            size="tiny"
+                <help-outline-icon></help-outline-icon>
-            filterable
+              </n-icon>
-            v-model:value="item.interactComponents"
+            </template>
-            :render-label="renderLabel"
+            <n-text>不支持「静态组件」和「分组」</n-text>
-            :options="fnEventsOptions()"
+          </n-tooltip>
-          />
+        </template>
-        </n-input-group>
+        <n-select
+          class="select-type-options"
+          value-field="id"
+          label-field="title"
+          size="tiny"
+          filterable
+          placeholder="仅展示符合条件的组件"
+          v-model:value="item.interactComponentId"
+          :options="fnEventsOptions()"
+        />
       </setting-item-box>
 
-      <n-table v-if="fnDimensionsAndSource(item.interactOn).length" size="small" striped>
+      <setting-item-box v-if="fnDimensionsAndSource(item.interactOn).length" name="查询结果" :alone="true">
-        <thead>
+        <n-table size="small" striped>
-          <tr>
+          <thead>
-            <th v-for="item in ['参数', '说明']" :key="item">{{ item }}</th>
+            <tr>
-          </tr>
+              <th v-for="item in ['参数', '说明']" :key="item">{{ item }}</th>
-        </thead>
+            </tr>
-        <tbody>
+          </thead>
-          <tr v-for="(cItem, index) in fnDimensionsAndSource(item.interactOn)" :key="index">
+          <tbody>
-            <td>{{ cItem.value }}</td>
+            <tr v-for="(cItem, index) in fnDimensionsAndSource(item.interactOn)" :key="index">
-            <td>{{ cItem.label }}</td>
+              <td>{{ cItem.value }}</td>
-          </tr>
+              <td>{{ cItem.label }}</td>
-        </tbody>
+            </tr>
-      </n-table>
+          </tbody>
+        </n-table>
+      </setting-item-box>
 
-      <n-tag class="go-mt-3" :bordered="false" type="primary"> 关联目标组件请求参数 </n-tag>
+      <n-tag :bordered="false" type="primary"> 关联目标组件请求参数 </n-tag>
 
       <setting-item-box
         :name="requestParamsItem"
@@ -86,7 +97,7 @@
         :key="requestParamsItem"
       >
         <setting-item
-          v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.interactComponents, requestParamsItem)"
+          v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.interactComponentId, requestParamsItem)"
           :key="index"
           :name="`${ovlKey}`"
         >
@@ -97,7 +108,7 @@
           ></n-select>
         </setting-item>
         <n-text
-          v-show="JSON.stringify(fnGetRequest(item.interactComponents, requestParamsItem)) === '{}'"
+          v-show="JSON.stringify(fnGetRequest(item.interactComponentId, requestParamsItem)) === '{}'"
           class="go-pt-1"
           depth="3"
         >
@@ -112,8 +123,7 @@
 import { VNodeChild, computed } from 'vue'
 import { SelectOption, SelectGroupOption } from 'naive-ui'
 import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
-import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d'
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { RequestParamsTypeEnum } from '@/enums/httpEnum'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { icon } from '@/plugins'
@@ -121,11 +131,8 @@ import noData from '@/assets/images/canvas/noData.png'
 import { goDialog } from '@/utils'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 
-const { CloseIcon, AddIcon } = icon.ionicons5
+const { CloseIcon, AddIcon, HelpOutlineIcon } = icon.ionicons5
-
-const designStore = useDesignStore()
 const { targetData, chartEditStore } = useTargetData()
-
 const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER]
 
 // 获取组件交互事件列表
@@ -143,12 +150,13 @@ const option = computed(() => {
   return targetData.value.option
 })
 
-// 绑定组件数据request
+// 绑定组件数据 request
 const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
   if (!id) return {}
   return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
 }
 
+// 查询结果
 const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined) => {
   if (!interactOn || !targetData.value.interactActions) return []
   const tableData = targetData.value.interactActions.find(item => {
@@ -158,24 +166,46 @@ const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined) => {
   return tableData?.componentEmitEvents[option.value.dataset.type] || []
 }
 
-const renderLabel = (option: CreateComponentType | CreateComponentGroupType): VNodeChild => {
+// 绑定组件列表
-  return option.chartConfig.title
-}
-
 const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
-  return chartEditStore.componentList.filter(item => {
+  const filterOptionList = chartEditStore.componentList.filter(item => {
-    return item.id !== targetData.value.id
+    // 排除自己
+    const isNotSelf = item.id !== targetData.value.id
+    // 排除静态组件
+    const isNotStatic = item.chartConfig.chartFrame !== ChartFrameEnum.STATIC
+    // 排除分组
+    const isNotGroup = !item.isGroup
+
+    return isNotSelf && isNotStatic && isNotGroup
   })
+
+  const mapOptionList = filterOptionList.map(item => ({
+    id: item.id,
+    title: item.chartConfig.title,
+    disabled: false
+  }))
+
+  targetData.value.events.interactEvents?.forEach(iaItem => {
+    mapOptionList.forEach(optionItem => {
+      if (optionItem.id === iaItem.interactComponentId) {
+        optionItem.disabled = true
+      }
+    })
+  })
+
+  return mapOptionList
 }
 
+// 新增模块
 const evAddEventsFn = () => {
   targetData.value.events.interactEvents.push({
     interactOn: undefined,
-    interactComponents: undefined,
+    interactComponentId: undefined,
     interactFn: {}
   })
 }
 
+// 删除模块
 const evDeleteEventsFn = (index: number) => {
   goDialog({
     message: '是否删除此关联交互模块?',
@@ -184,11 +214,6 @@ const evDeleteEventsFn = (index: number) => {
     }
   })
 }
-
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
 </script>
 
 <style lang="scss" scoped>