feat: 优化交互组件

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

@@ -135,8 +135,9 @@ const sendHandle = async () => {
       showMatching.value = true
       return
     }
-    window['$message'].warning('数据异常，请检查参数！')
+    window['$message'].warning('没有拿到返回值，请检查接口！')
   } catch (error) {
+    console.error(error);
     loading.value = false
     window['$message'].warning('数据异常，请检查参数！')
   }

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

@@ -132,8 +132,9 @@ const fetchTargetData = async () => {
       sourceData.value = res
       return
     }
-    window['$message'].warning('数据异常，请检查参数！')
+    window['$message'].warning('没有拿到返回值，请检查接口！')
   } catch (error) {
+    console.error(error);
     window['$message'].warning('数据异常，请检查参数！')
   }
 }

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

@@ -114,10 +114,6 @@ const sendHandle = async () => {
   }
   loading.value = true
   try {
-    // const res = await customizeHttp(
-    //   toRaw(pondData.value?.dataPondRequestConfig),
-    //   toRaw(chartEditStore.getRequestGlobalConfig)
-    // )
     const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
     loading.value = false
     if (res) {
@@ -126,8 +122,9 @@ const sendHandle = async () => {
       showMatching.value = true
       return
     }
-    window['$message'].warning('数据异常，请检查参数！')
+    window['$message'].warning('没有拿到返回值，请检查接口！')
   } catch (error) {
+    console.error(error);
     loading.value = false
     window['$message'].warning('数据异常，请检查参数！')
   }

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEvebtInteraction/index.ts

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

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

@@ -1,168 +0,0 @@
-<template>
-  <n-card v-for="(item, indexs) in targetData.events.eventsFn" :key="indexs" class="n-card-shallow">
-    <RowDeleteIcon class="edit-text" @click="evDeleteEventsFn(indexs)" />
-    <setting-item-box name="触发事件" :alone="true">
-      <n-input-group v-if="option.eventsApi">
-        <n-select class="select-type-options" v-model:value="item.on" :options="option.eventsApi" />
-      </n-input-group>
-    </setting-item-box>
-
-    <n-table striped>
-      <thead>
-        <tr>
-          <th v-for="item in ['参数', '说明']" :key="item">{{ item }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(cItem, index) in fnDimensionsAndSource(item.on)" :key="index">
-          <td>{{ cItem.value }}</td>
-          <td>{{ cItem.label }}</td>
-        </tr>
-      </tbody>
-    </n-table>
-
-    <setting-item-box name="绑定组件" :alone="true">
-      <n-input-group>
-        <n-select
-          class="select-type-options"
-          value-field="id"
-          label-field="key"
-          v-model:value="item.components"
-          :render-label="renderLabel"
-          :options="fnEventsOptions()"
-        />
-      </n-input-group>
-    </setting-item-box>
-
-    <CollapseItem name="请求数据绑定" :expanded="false">
-      <SettingItemBox name="Params">
-        <SettingItem
-          v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.components, 'Params')"
-          :key="ovlKey"
-          :name="`${ovlKey}`"
-        >
-          <n-select size="small" v-model:value="item.fn[ovlKey]" :options="fnDimensionsAndSource(item.on)"></n-select>
-        </SettingItem>
-      </SettingItemBox>
-      <SettingItemBox name="Header">
-        <SettingItem
-          v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.components, 'Header')"
-          :key="ovlKey"
-          :name="`${ovlKey}`"
-        >
-          <n-select size="small" v-model:value="item.fn[ovlKey]" :options="fnDimensionsAndSource(item.on)"></n-select>
-        </SettingItem>
-      </SettingItemBox>
-    </CollapseItem>
-  </n-card>
-  <n-button v-if="option.eventsApi" class="add-events" ghost @click="ev_addEventsFn"> 添加交互 </n-button>
-</template>
-
-<script lang="ts" setup>
-import { ref, VNodeChild, h, computed, watch, toRefs, toRaw, onMounted } from 'vue'
-import { SelectOption, SelectGroupOption } from 'naive-ui'
-import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
-
-import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { useTargetData } from '../../../hooks/useTargetData.hook'
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
-
-import { icon } from '@/plugins'
-const { RowDeleteIcon } = icon.carbon
-
-const designStore = useDesignStore()
-const { targetData, chartEditStore } = useTargetData()
-const { componentList } = toRefs(chartEditStore)
-
-//computed： 获取组件eventsApi
-const option = computed(() => {
-  return chartEditStore.componentList[chartEditStore.fetchTargetIndex()].option
-})
-// 绑定组件数据request
-const fnGetRequest = (id: string | undefined, key: 'Params' | 'Header') => {
-  if (!id) return {}
-  return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
-}
-
-const fnDimensionsAndSource = (on: any) => {
-  if (!on || !option.value.eventsApi) return []
-  const tableData = option.value.eventsApi.find((item: { value: string }) => {
-    return item.value === on
-  })
-
-  return tableData[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 ev_addEventsFn = () => {
-  targetData.value.events.eventsFn.push({
-    on: undefined,
-    components: undefined,
-    fn: {}
-  })
-}
-
-const evDeleteEventsFn = (index: number) => {
-  targetData.value.events.eventsFn.splice(index, 1)
-}
-
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
-</script>
-
-<style lang="scss" scoped>
-.n-card-shallow {
-  margin-top: 1rem;
-  .edit-text {
-    width: 18px;
-    height: 18px;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    &:hover {
-      cursor: pointer;
-      color: v-bind('themeColor');
-    }
-  }
-  &.n-card {
-    // .mill-background-filter();
-    :deep(.n-card__content) {
-      padding: 10px;
-    }
-  }
-  &:hover {
-    border-color: v-bind('themeColor');
-    .edit-text {
-      opacity: 1;
-    }
-  }
-}
-.mill-chart-target-data {
-  :deep(pre) {
-    white-space: pre-wrap;
-    word-wrap: break-word;
-  }
-}
-.add-events {
-  width: 100%;
-  height: 32px;
-  margin-top: 1rem;
-}
-.n-input-group {
-  height: 30px;
-}
-:deep(.n-base-selection .n-base-selection-label) {
-  height: 32px;
-}
-</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <n-collapse-item title="高级事件配置" name="2">
+  <n-collapse-item title="高级事件配置" name="3">
     <template #header-extra>
       <n-button type="primary" tertiary size="small" @click.stop="showModal = true">
         <template #icon>

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

@@ -1,5 +1,5 @@
 <template>
-  <n-collapse-item title="基础事件配置" name="1">
+  <n-collapse-item title="基础事件配置" name="2">
     <template #header-extra>
       <n-button type="primary" tertiary size="small" @click.stop="showModal = true">
         <template #icon>

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

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

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

@@ -0,0 +1,211 @@
+<template>
+  <n-collapse-item title="组件交互" name="1" v-if="interactActions.length">
+    <template #header-extra>
+      <n-button type="primary" tertiary size="small" @click.stop="evAddEventsFn">
+        <template #icon>
+          <n-icon>
+            <add-icon />
+          </n-icon>
+        </template>
+        新增
+      </n-button>
+    </template>
+
+    <!-- 无数据 -->
+    <div v-if="!targetData.events.interactEvents.length" class="no-data go-flex-center">
+      <img :src="noData" alt="暂无数据" />
+      <n-text :depth="3">暂无内容</n-text>
+    </div>
+
+    <n-card
+      v-for="(item, cardIndex) in targetData.events.interactEvents"
+      :key="cardIndex"
+      class="n-card-shallow"
+      size="small"
+    >
+      <n-space justify="space-between">
+        <n-text>关联组件 - {{ cardIndex + 1 }}</n-text>
+        <n-button type="error" secondary size="small" @click="evDeleteEventsFn(cardIndex)">
+          <template #icon>
+            <n-icon>
+              <close-icon />
+            </n-icon>
+          </template>
+        </n-button>
+      </n-space>
+
+      <n-divider style="margin: 10px 0" />
+
+      <n-tag :bordered="false" type="success"> 选择目标组件 </n-tag>
+
+      <setting-item-box name="触发事件" :alone="true">
+        <n-input-group v-if="interactActions">
+          <n-select
+            class="select-type-options"
+            v-model:value="item.interactOn"
+            size="tiny"
+            :options="interactActions"
+          />
+        </n-input-group>
+      </setting-item-box>
+
+      <setting-item-box name="绑定组件" :alone="true">
+        <n-input-group>
+          <n-select
+            class="select-type-options"
+            value-field="id"
+            label-field="key"
+            size="tiny"
+            filterable
+            v-model:value="item.interactComponents"
+            :render-label="renderLabel"
+            :options="fnEventsOptions()"
+          />
+        </n-input-group>
+      </setting-item-box>
+
+      <n-table v-if="fnDimensionsAndSource(item.interactOn).length" size="small" striped>
+        <thead>
+          <tr>
+            <th v-for="item in ['参数', '说明']" :key="item">{{ item }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(cItem, index) in fnDimensionsAndSource(item.interactOn)" :key="index">
+            <td>{{ cItem.value }}</td>
+            <td>{{ cItem.label }}</td>
+          </tr>
+        </tbody>
+      </n-table>
+
+      <n-tag class="go-mt-3" :bordered="false" type="info"> 关联目标组件请求参数 </n-tag>
+
+      <setting-item-box
+        :name="requestParamsItem"
+        v-for="requestParamsItem in requestParamsTypeList"
+        :key="requestParamsItem"
+      >
+        <setting-item
+          v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.interactComponents, requestParamsItem)"
+          :key="index"
+          :name="`${ovlKey}`"
+        >
+          <n-select
+            size="tiny"
+            v-model:value="item.interactFn[ovlKey]"
+            :options="fnDimensionsAndSource(item.interactOn)"
+          ></n-select>
+        </setting-item>
+        <n-text
+          v-show="JSON.stringify(fnGetRequest(item.interactComponents, requestParamsItem)) === '{}'"
+          class="go-pt-1"
+          depth="3"
+        >
+          暂无数据
+        </n-text>
+      </setting-item-box>
+    </n-card>
+  </n-collapse-item>
+</template>
+
+<script lang="ts" setup>
+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 { RequestParamsTypeEnum } from '@/enums/httpEnum'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { icon } from '@/plugins'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import noData from '@/assets/images/canvas/noData.png'
+
+const { CloseIcon, AddIcon } = icon.ionicons5
+
+const designStore = useDesignStore()
+const { targetData, chartEditStore } = useTargetData()
+
+const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER]
+
+// 获取组件交互事件列表
+const interactActions = computed(() => {
+  const interactActions = targetData.value.interactActions
+  if (!interactActions) return []
+  return interactActions.map(value => ({
+    label: value.interactName,
+    value: value.interactType
+  }))
+})
+
+// 获取组件事件
+const option = computed(() => {
+  return targetData.value.option
+})
+
+// 绑定组件数据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 => {
+    return item.interactType === interactOn
+  })
+
+  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 evAddEventsFn = () => {
+  targetData.value.events.interactEvents.push({
+    interactOn: undefined,
+    interactComponents: undefined,
+    interactFn: {}
+  })
+}
+
+const evDeleteEventsFn = (index: number) => {
+  targetData.value.events.interactEvents.splice(index, 1)
+}
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+</script>
+
+<style lang="scss" scoped>
+.mill-chart-target-data {
+  :deep(pre) {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+}
+
+.n-input-group {
+  height: 30px;
+}
+
+.no-data {
+  flex-direction: column;
+  width: 100%;
+  img {
+    width: 120px;
+  }
+}
+
+:deep(.n-base-selection .n-base-selection-label) {
+  height: 32px;
+}
+</style>

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

@@ -5,7 +5,7 @@
       组件 id：
       <n-text>{{ targetData.id }}</n-text>
     </n-text>
-    <ChartEvebtInteraction></ChartEvebtInteraction>
+    <chart-event-interaction></chart-event-interaction>
     <chart-event-base-handle></chart-event-base-handle>
     <chart-event-advanced-handle></chart-event-advanced-handle>
   </n-collapse>
@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ChartEvebtInteraction } from './components/ChartEvebtInteraction'
+import { ChartEventInteraction } from './components/ChartEventInteraction'
 import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle'
 import { ChartEventBaseHandle } from './components/ChartEventBaseHandle'
 import { useTargetData } from '../hooks/useTargetData.hook'

src/views/chart/hooks/useSync.hook.ts

@@ -49,7 +49,7 @@ const componentVersionUpdatePolyfill = (newObject: any, sources: any) => {
             [EventLife.VNODE_MOUNTED]: undefined,
             [EventLife.VNODE_BEFORE_MOUNT]: undefined
           },
-          eventsFn: []
+          interactEvents: []
         }
       }
       return newObject

src/views/preview/utils/storage.ts

@@ -4,6 +4,7 @@ import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const chartEditStore = useChartEditStore()
+
 export interface ChartEditStorageType extends ChartEditStorage {
   id: string
 }
@@ -25,6 +26,7 @@ export const getSessionStorageInfo = () => {
         chartEditStore.editCanvasConfig = editCanvasConfig
         chartEditStore.requestGlobalConfig = requestGlobalConfig
         chartEditStore.componentList = componentList
+        return storageList[i]
       }
     }
   }