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

@@ -49,22 +49,32 @@
         </n-input-group>
       </setting-item-box>
 
-      <setting-item-box name="绑定组件" :alone="true">
-        <n-input-group>
+      <setting-item-box :alone="true">
+        <template #name>
+          <n-text>绑定</n-text>
+          <n-tooltip trigger="hover">
+            <template #trigger>
+              <n-icon size="21" :depth="3">
+                <help-outline-icon></help-outline-icon>
+              </n-icon>
+            </template>
+            <n-text>不支持「静态组件」和「分组」</n-text>
+          </n-tooltip>
+        </template>
         <n-select
           class="select-type-options"
           value-field="id"
-            label-field="key"
+          label-field="title"
           size="tiny"
           filterable
-            v-model:value="item.interactComponents"
-            :render-label="renderLabel"
+          placeholder="仅展示符合条件的组件"
+          v-model:value="item.interactComponentId"
           :options="fnEventsOptions()"
         />
-        </n-input-group>
       </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">
+        <n-table size="small" striped>
           <thead>
             <tr>
               <th v-for="item in ['参数', '说明']" :key="item">{{ item }}</th>
@@ -77,8 +87,9 @@
             </tr>
           </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 } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType, ChartFrameEnum } 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 designStore = useDesignStore()
+const { CloseIcon, AddIcon, HelpOutlineIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
-
 const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER]
 
 // 获取组件交互事件列表
@@ -149,6 +156,7 @@ const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
   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 => {
-    return item.id !== targetData.value.id
+  const filterOptionList = chartEditStore.componentList.filter(item => {
+    // 排除自己
+    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>