Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

src/packages/components/Units/Titles/FeatureMenu/config.ts

@@ -5,7 +5,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
 const option = {
-  buttonList: [
+  list: [
     '现场标绘','任务下发','路线规划'
   ],
   selectButton: '现场标绘',
@@ -19,5 +19,7 @@ export default class Config extends PublicConfigClass implements CreateComponent
     super(); 
     this.attr.w = 348; 
     this.attr.h = 38;
+    this.isChildEvent = true
+    this.events.interactConfigEvents = {}
   }
 }

src/packages/components/Units/Titles/FeatureMenu/config.vue

@@ -4,11 +4,11 @@
       <n-select v-model:value="optionData.selectButton" :options="selectButtonOptions" size="small" />
     </SettingItemBox> 
     <SettingItemBox name="按钮" :alone="true">
-      <div class="button-setting-div" v-for="index in optionData.buttonList.length">
+      <div class="button-setting-div" v-for="index in optionData.list.length">
         <n-input
           class="button-setting-input"
           size="small"
-          v-model:value="optionData.buttonList[index-1]"
+          v-model:value="optionData.list[index-1]"
           :minlength="1"
           type="text"
           placeholder="请输入Id"
@@ -38,7 +38,7 @@ const props = defineProps({
 })
 console.log('config',props)
 const selectButtonOptions = computed(() => {
-  return props.optionData.buttonList.map(item => {
+  return props.optionData.list.map(item => {
     return {
       value: item,
       label: item,
@@ -46,10 +46,10 @@ const selectButtonOptions = computed(() => {
   })
 })
 const insertButton = () => {
-  props.optionData.buttonList.push("")
+  props.optionData.list.push("")
 }
 const deleteButton = (index) => {
-  props.optionData.buttonList.splice(index,1)
+  props.optionData.list.splice(index,1)
 }
 </script>
 <style lang="scss" scoped>

src/packages/components/Units/Titles/FeatureMenu/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="button-list-div">
       <div :class="`button-item ${props.chartConfig.option.selectButton == item? 'button-select': ''}`"
-        v-for="item in buttonList" 
+        v-for="item in list" 
         @click=changeButton(item)
       >
         {{item}}
@@ -12,7 +12,11 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, PropType } from 'vue'
+import { onMounted } from 'vue'
+import { eventHandlerHook } from '@/hooks/eventHandler.hook';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+
+const chartEditStore = useChartEditStore();
 
 const props = defineProps({
   chartConfig: {
@@ -22,9 +26,15 @@ const props = defineProps({
 })
 const changeButton = (type) => {
   props.chartConfig.option.selectButton = type
+  eventHandlerHook(
+    chartEditStore.getComponentList,
+    props.chartConfig.events.interactConfigEvents[type],
+    'click',
+    type,
+  );
 }
 
-const { buttonList, selectButton } = props.chartConfig.option
+const { list, selectButton } = props.chartConfig.option
 </script>
 <style lang="scss" scoped>
 .button-list-div{

src/packages/index.d.ts

@@ -122,6 +122,7 @@ export const BlendModeEnumList = [
 export interface PublicConfigType {
   id: string;
   isGroup: boolean;
+  isChildEvent: boolean;
   attr: {
     x: number;
     y: number;

src/packages/public/publicConfig.ts

@@ -46,6 +46,8 @@ export const requestConfig: RequestConfigType = {
 export class PublicConfigClass implements PublicConfigType {
   public id = getUUID()
   public isGroup = false
+  // isChildEvent为 True的时候 可为组件孩子创建事件,events.interactConfigEvents需为{} []导出json时获取不到孩子事件,
+  public isChildEvent = false
   // 基本信息
   public attr = { ...chartInitConfig, zIndex: -1 }
   // 基本样式

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

@@ -1,7 +1,7 @@
 <template>
   <n-collapse-item title="组件交互事件配置" name="2">
     <template #header-extra>
-      <n-button type="primary" tertiary size="small" @click.stop="addEvent">
+      <n-button v-if="!targetData.isChildEvent" type="primary" tertiary size="small" @click.stop="addEvent">
         <template #icon>
           <n-icon>
             <pencil-icon />
@@ -11,12 +11,27 @@
       </n-button>
     </template>
     <!-- 无数据 -->
-    <div v-if="interactConfigItem.length == 0" class="no-data go-flex-center">
+    <div v-if="interactConfigItem.length == 0 && !targetData.isChildEvent" class="no-data go-flex-center">
       <img :src="noData" alt="暂无数据" />
       <n-text :depth="3">暂无内容</n-text>
     </div>
-
-    <n-card class="n-card-shallow" size="small">
+    <n-card class="n-card-shallow" size="small" v-if="targetData.isChildEvent">
+      <template v-for="item in targetData.option.list" :key="item">
+        <n-divider style="margin: 10px 0" />
+        <div class="go-flex-between">
+          {{ item }}
+          <n-button type="primary" tertiary size="small" @click="addChildEvent(item)">
+            <template #icon>
+              <n-icon>
+                <pencil-icon />
+              </n-icon>
+            </template>
+            编辑
+          </n-button>
+        </div>
+      </template>
+    </n-card>
+    <n-card class="n-card-shallow" size="small" v-else>
       <template v-for="(item, cardIndex) in interactConfigItem" :key="cardIndex">
         <n-divider style="margin: 10px 0" />
         <div class="go-flex-between">
@@ -90,7 +105,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue';
+  import { ref, watch, onMounted } from 'vue';
   import { useTargetData } from '../../../hooks/useTargetData.hook';
   import { icon } from '@/plugins';
   import noData from '@/assets/images/canvas/noData.png';
@@ -102,13 +117,19 @@
   const { targetData, chartEditStore } = useTargetData();
   const { DocumentTextIcon, CloseIcon, PencilIcon } = icon.ionicons5;
   const interactConfigItem: any = ref([]);
-  if (Object.keys(targetData.value.events.interactConfigEvents).length > 0) {
-    interactConfigItem.value = targetData.value.events.interactConfigEvents;
-  }
+  const childEventChange = ref()
   const eventTab = ref();
   const getEventName = (type: string) => {
     return eventTypeOptions.find((item) => item.value === type)?.label;
   };
+  onMounted(() => {
+    if(!targetData.value.isChildEvent){
+      if (Object.keys(targetData.value.events.interactConfigEvents).length > 0) {
+        interactConfigItem.value = targetData.value.events.interactConfigEvents;
+      }
+    }else{
+    }
+  })
   // 修改交互类型时，同步tab值
   const changeTab = (type: string) => {
     const index = eventTab.value.match(/交互(\S*)-/)[1];
@@ -130,7 +151,11 @@
 
   // 新增编辑动作
   const saveEvents = async () => {
-    targetData.value.events.interactConfigEvents = interactConfigItem.value;
+    if(!targetData.value.isChildEvent){
+      targetData.value.events.interactConfigEvents = interactConfigItem.value;
+    }else{
+      targetData.value.events.interactConfigEvents[childEventChange.value] = interactConfigItem.value
+    }
     closeEvents();
   };
 
@@ -166,6 +191,28 @@
       '交互1-' +
       eventTypeOptions.find((item) => item.value === interactConfigItem.value[0].type)?.label;
   };
+  const addChildEvent = (type) => {
+    childEventChange.value = type
+    interactConfigItem.value = targetData.value.events.interactConfigEvents[type] || [];
+    if (interactConfigItem.value?.length == 0) {
+      interactConfigItem.value = [
+        {
+          type: 'click',
+          movementList: [
+            {
+              movement: 'reveal',
+              elementId: '',
+            },
+          ],
+        },
+      ];
+    }
+    changIndex.value = null;
+    eventTab.value =
+      '交互1-' +
+      eventTypeOptions.find((item) => item.value === interactConfigItem.value[0].type)?.label;
+    showModal.value = true;
+  }
   const showEvent = (item: any, index: number) => {
     showModal.value = true;
     changIndex.value = index;