Merge pull request #11390 from dataease/pr@dev-v2@feat_events

feat(仪表板): 仪表板图片富文本等组件支持事件设置

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
 )

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>

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" />

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')"

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"