From d504eeaa9dd7e674024b152582d9926da1ce0edc Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 7 Aug 2024 10:04:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E6=9D=BF=E5=9B=BE=E7=89=87=E5=AF=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E7=AD=89=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/ComponentWrapper.vue   |  5 +++--
 .../src/custom-component/common/CommonAttr.vue       |  7 +++----
 .../src/custom-component/common/CommonEvent.vue      | 12 ++++--------
 .../components/editor/editor-style/ChartStyle.vue    | 12 ++++++++++++
 .../src/views/chart/components/editor/index.vue      |  1 +
 5 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index 2d544cc456..377c3f9db1 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -209,9 +209,10 @@ const onPointClick = param => {
 
 const eventEnable = computed(
   () =>
-    ['Picture', 'CanvasIcon', 'CircleShape', 'SvgTriangle', 'RectShape', 'ScrollText'].includes(
+    (['Picture', 'CanvasIcon', 'CircleShape', 'SvgTriangle', 'RectShape', 'ScrollText'].includes(
       config.value.component
-    ) &&
+    ) ||
+      config.value.innerType === 'rich-text') &&
     config.value.events &&
     config.value.events.checked
 )
diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index 35bdaf2941..fe24ecf702 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -96,10 +96,9 @@ const colorPickerWidth = computed(() => {
 // 暂时关闭
 const eventsShow = computed(() => {
   return (
-    !dashboardActive.value &&
     ['Picture', 'CanvasIcon', 'CircleShape', 'SvgTriangle', 'RectShape', 'ScrollText'].includes(
       element.value.component
-    )
+    ) || element.value.innerType === 'rich-text'
   )
 })
 
@@ -169,10 +168,10 @@ const stopEvent = e => {
         v-if="element && element.events && eventsShow"
         :effect="themes"
         title="事件"
-        name="style"
+        name="events"
         class="common-style-area"
       >
-        <common-event :themes="themes" :element="element"></common-event>
+        <common-event :themes="themes" :events-info="element.events"></common-event>
       </el-collapse-item>
     </el-collapse>
   </div>
diff --git a/core/core-frontend/src/custom-component/common/CommonEvent.vue b/core/core-frontend/src/custom-component/common/CommonEvent.vue
index 697c4d58b7..d2485739cc 100644
--- a/core/core-frontend/src/custom-component/common/CommonEvent.vue
+++ b/core/core-frontend/src/custom-component/common/CommonEvent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import { ElFormItem, ElIcon } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import Icon from '../../components/icon-custom/src/Icon.vue'
@@ -9,20 +9,16 @@ const snapshotStore = snapshotStoreWithOut()
 const props = withDefaults(
   defineProps<{
     themes?: EditorTheme
-    element: any
+    eventsInfo: any
   }>(),
   {
     themes: 'dark'
   }
 )
-const { themes, element } = toRefs(props)
+const { themes, eventsInfo } = toRefs(props)
 
 const curSupportEvents = ['jump', 'showHidden', 'refreshDataV']
 
-const eventsInfo = computed(() => {
-  return element.value.events
-})
-
 const onEventChange = () => {
   snapshotStore.recordSnapshotCache('renderChart')
 }
@@ -45,7 +41,7 @@ const onJumpValueChange = () => {
         >
         <el-tooltip class="item" :effect="themes" placement="top">
           <template #content>
-            <div>事件绑定需要退出编辑模式才开生效</div>
+            <div>事件绑定需退出编辑模式后生效,富文本开启绑定事件则内部点击事件失效</div>
           </template>
           <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
             <Icon name="icon_info_outlined" />
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
index dfe016730d..b5a0fba572 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@@ -26,6 +26,7 @@ import IndicatorNameSelector from '@/views/chart/components/editor/editor-style/
 import QuadrantSelector from '@/views/chart/components/editor/editor-style/components/QuadrantSelector.vue'
 import FlowMapLineSelector from '@/views/chart/components/editor/editor-style/components/FlowMapLineSelector.vue'
 import FlowMapPointSelector from '@/views/chart/components/editor/editor-style/components/FlowMapPointSelector.vue'
+import CommonEvent from '@/custom-component/common/CommonEvent.vue'
 
 const dvMainStore = dvMainStoreWithOut()
 const { dvInfo, batchOptStatus } = storeToRefs(dvMainStore)
@@ -42,6 +43,10 @@ const props = defineProps({
     type: Object,
     required: false
   },
+  eventInfo: {
+    type: Object,
+    required: false
+  },
   chart: {
     type: Object as PropType<ChartObj>,
     required: true
@@ -118,6 +123,10 @@ const positionComponentShow = computed(() => {
   return !batchOptStatus.value && dvInfo.value.type !== 'dashboard'
 })
 
+const eventsShow = computed(() => {
+  return !batchOptStatus.value && chart.value.type.includes('rich-text') && props.eventInfo
+})
+
 const showProperties = (property: EditorProperty) => properties.value?.includes(property)
 
 const onMiscChange = (val, prop) => {
@@ -305,6 +314,9 @@ watch(
               component-position="component"
             />
           </el-collapse-item>
+          <el-collapse-item :effect="themes" name="events" title="事件" v-if="eventsShow">
+            <common-event :themes="themes" :events-info="eventInfo"></common-event>
+          </el-collapse-item>
           <el-collapse-item
             :effect="themes"
             v-if="showProperties('indicator-value-selector')"
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 98236c1b65..fa03d426c7 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -2756,6 +2756,7 @@ const deleteChartFieldItem = id => {
                         :property-inner-all="chartViewInstance.propertyInner"
                         :selector-spec="chartViewInstance.selectorSpec"
                         :common-background-pop="curComponent?.commonBackground"
+                        :event-info="curComponent?.events"
                         :chart="view"
                         :themes="themes"
                         :dimension-data="state.dimension"