axwen-test31 2.0.0

package/src/views/market/market-event-create/market-event-detail/event-main.vue

@@ -0,0 +1,984 @@
+<template>
+    <div class="event-main">
+        <event-canvas ref="canvas" :data="data" :readonly="readonly" :mode="mode" :cstonly="cstonly"
+            :isAIMode="isAIMode" :showEdgeLabel="showEdgeLabel" :diabledKey="isAIMode ? 'event' : ''"
+            :detailFold="folding" :isShowComponentSide="isShowComponentSide" @nodeClick="handleNodeClick"
+            @canvasClick="handleCanvasClick" @numClick="handleNumClick" @nodeDelete="handleNodeDelete"
+            @menuFold="handleMenuFold" />
+        <event-template ref="eventTemplate" version="2" :key="libId" v-if="!readonly" @use="handleUse"></event-template>
+        <!-- 详情表单组件 -->
+        <node-side-detail :isText="smallHotDeplayReadonly" ref="detail" @aiChange="handleAIChange" @on-fold="handleDetailFold"
+            v-bind="{ pageName, type, isTemplate, cstonly, isLoop, isAIMode, actSubShow, isPauseUpdate, folding }" />
+
+        <!-- 客户名单表单组件 -->
+        <node-side-customer :isText="smallHotDeplayReadonly || cantEditCustomerNodeWhenTemplateMode" ref="cst"
+            v-bind="{ nodeName, id, cstLoading, isAIMode, isLoop, cstId, tempId }" @changeLabel="handleLabelChange"
+            @change="handleChange" />
+        <node-side-activityCst :isText="smallHotDeplayReadonly || cantEditCustomerNodeWhenTemplateMode" ref="activityCst"
+            v-bind="{ nodeName, isAIMode }" @changeLabel="handleLabelChange"
+            @change="handleChange" />
+        <node-side-flowCst :isText="smallHotDeplayReadonly || cantEditCustomerNodeWhenTemplateMode" ref="flowCst"
+            v-bind="{ nodeName, isAIMode }" @changeLabel="handleLabelChange"
+            @change="handleChange" />
+        <node-side-composeCst :isText="smallHotDeplayReadonly || cantEditCustomerNodeWhenTemplateMode" ref="composeCst"
+            v-bind="{ nodeName, isAIMode }" @changeLabel="handleLabelChange"
+            @change="handleChange" />
+
+        <!-- 重组类组件表单 -->
+        <!-- 客户汇聚表单组件 -->
+        <node-side-merge :isText="readonly || cstonly" ref="merge" v-bind="{ nodeName }"
+            @changeLabel="handleLabelChange" @change="handleChange" @eventTypeChange="handleEventTypeChange" />
+        <!-- 按事件响应分流表单组件 -->
+        <node-side-split-evt :isText="readonly || cstonly" ref="evtRespFlow" v-bind="{ nodeName, isPauseUpdate }"
+            @changeLabel="handleLabelChange" @change="handleChange" @link="handleLink" />
+        <!-- 按事件响应分流分支表单 -->
+        <node-side-split-evt-branch :isText="readonly || cstonly" :cstId="cstId" :nodeId="nodeId"
+            v-bind="{ isAIMode, nodeName, isPauseUpdate}" ref="evtRespFlowBranch" @changeLabel="handleLabelChange"
+            @change="handleChange" />
+        <!-- 按事件分流分支响应表单 -->
+        <node-side-split-evt-branch-resp :isText="readonly || cstonly" :cstId="cstId" :nodeId="nodeId"
+            v-bind="{ isAIMode }" ref="evtRespFlowBranchResp" @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 按事件分流分支未响应表单 -->
+        <node-side-split-evt-branch-no-resp :isText="readonly || cstonly" :cstId="cstId" :nodeId="nodeId"
+            v-bind="{ isAIMode }" ref="evtRespFlowBranchNoResp" @changeLabel="handleLabelChange"
+            @change="handleChange" />
+        <!-- 按渠道响应分流表单组件 -->
+        <node-side-split-channel :isText="readonly || cstonly" ref="chnlRespFlow" v-bind="{ nodeName, isPauseUpdate }"
+            @changeLabel="handleLabelChange" @change="handleChange" @link="handleLink" />
+        <!-- 按渠道分流分支表单 -->
+        <node-side-split-channel-branch :isText="readonly || cstonly" :cstId="cstId" :nodeId="nodeId" 
+            v-bind="{ isAIMode,nodeName,isPauseUpdate }" ref="chnlRespFlowBranch" @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 按客群分流表单组件 -->
+        <node-side-split-cst :isText="readonly || cstonly" ref="custFlow" @changeLabel="handleLabelChange" v-bind="{ nodeName, isPauseUpdate }"
+            @change="handleChange" @link="handleLink" />
+        <!-- 按客群分流分支表单 -->
+        <node-side-split-cst-branch :isText="readonly || cstonly" :cstId="cstId" :nodeId="nodeId" v-bind="{ isAIMode,nodeName }"
+            ref="custFlowBranch" @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 按标签分流表单组件 -->
+        <node-side-split-label :isText="readonly || cstonly" ref="labelFlow" v-bind="{ nodeName, isPauseUpdate }"
+            @changeLabel="handleLabelChange" @change="handleChange" @link="handleLink" />
+        <!-- 按标签分流分支表单 -->
+        <node-side-split-label-branch :isText="readonly || cstonly" :cstId="cstId" :nodeId="nodeId"
+            v-bind="{ isAIMode }" ref="labelFlowBranch" @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 随机分流表单组件 -->
+        <node-side-split-rdm :isText="readonly || cstonly" ref="randomFlow" v-bind="{ nodeName, isPauseUpdate }"
+            @changeLabel="handleLabelChange" @change="handleChange" @link="handleLink" />
+        <!-- 随机分流分支表单 -->
+        <node-side-split-rdm-branch :isText="readonly || cstonly" :cstId="cstId" :nodeId="nodeId" v-bind="{ isAIMode }"
+            ref="randomFlowBranch" @changeLabel="handleLabelChange" @change="handleChange" />
+
+        <!-- 资源类表单组件 -->
+        <!-- 内容表单组件 -->
+        <node-side-content :isText="smallHotDeplayReadonly || cstonly" ref="content" v-bind="{ nodeName, isPauseUpdate }"
+            @changeLabel="handleLabelChange" @change="handleChange" @eventTypeChange="handleEventTypeChange" @checkEdge="handleCheckEdge" />
+        <!-- 产品 -->
+        <node-side-prod :isText="isPauseUpdate ? false : readonly || cstonly" ref="prod" v-bind="{ nodeName }"
+            @changeLabel="handleLabelChange" @change="handleChange" @eventTypeChange="handleEventTypeChange" />
+        <!-- 活动 -->
+        <node-side-act :isText="readonly || cstonly" ref="act" v-bind="{ nodeName, isPauseUpdate }"
+            @changeLabel="handleLabelChange" @change="handleChange" @eventTypeChange="handleEventTypeChange" />
+        <!-- 权益 -->
+        <node-side-equity :isText="readonly || cstonly" ref="equity" v-bind="{ nodeName, isPauseUpdate }"
+            @changeLabel="handleLabelChange" @change="handleChange" @eventTypeChange="handleEventTypeChange" />
+
+        <!-- 时机类组件表单 -->
+        <!-- 延时时机 ———— 等待一定时间 -->
+        <node-side-opportunity-delay :isText="readonly || cstonly" ref="waitFixTime" v-bind="{ nodeName }"
+            @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 定时时机 ———— 等待到某个时间 -->
+        <node-side-opportunity-timer :isText="readonly || cstonly" ref="waitToTime" v-bind="{ nodeName,isPauseUpdate }"
+            @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 触发时机 ———— 等待某个事件发生-->
+        <node-side-opportunity-trigger :isText="readonly || cstonly" ref="waitEvent" v-bind="{ nodeName, isPauseUpdate }"
+            @changeLabel="handleLabelChange" @change="handleChange" />
+
+        <!-- 渠道类组件 -->
+        <!-- 掌银 -->
+        <node-side-channel-handbnk :isText="readonly || cstonly" ref="ebankApp" v-bind="{ nodeName }"
+            @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 短信 -->
+        <node-side-channel-sms :isText="readonly || cstonly" ref="sms" v-bind="{ nodeName, isPauseUpdate, allCondTags }"
+            @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 手机银行 -->
+        <node-side-channel-phonebnk :isText="readonly || cstonly" ref="appPush" v-bind="{ nodeName, isPauseUpdate, allCondTags }"
+            @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 智能外呼 -->
+        <node-side-channel-call :isText="readonly || cstonly" ref="intligCall"
+            v-bind="{ nodeName, allCondTags, isPauseUpdate }" @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 电销平台 -->
+        <node-side-channel-elecpin :isText="isPauseUpdate ? false : readonly || cstonly" ref="teleSalesPlat"
+            v-bind="{ nodeName }" @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 企微 -->
+        <node-side-channel-wechat :isText="readonly || cstonly" ref="weChat" v-bind="{ nodeName }"
+            @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 客户经理 -->
+        <node-side-channel-client :isText="readonly || cstonly" ref="manager" v-bind="{ nodeName }"
+        @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 渠道自定义组件 -->
+        <node-side-channel-dynamic :isText="smallHotDeplayReadonly || cstonly" ref="channel" v-bind="{ nodeName, isPauseUpdate, allCondTags }"
+            @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 提示卡片 -->
+        <node-card-tips ref="cardTips" @nodeClick="handleNodeClick" @handleCanvasClick="handleCanvasClick"></node-card-tips>
+    </div>
+</template>
+
+<script>
+
+import EventTemplate from '@/views/market/components/event-template'
+import EventCanvas from './event-canvas'
+import NodeSideDetail from '@market-event-edit-pro/side/node-side-detail'
+
+// 客户群体
+import NodeSideCustomer from '@market-event-edit-pro/side/customer/node-side-customer'
+import NodeSideActivityCst from '@/views/market/market-event-edit-pro/side/customer/node-side-activityCst'
+import NodeSideFlowCst from '@/views/market/market-event-edit-pro/side/customer/node-side-flowCst'
+import NodeSideComposeCst from '@/views/market/market-event-edit-pro/side/customer/node-side-composeCst'
+// 汇聚
+import NodeSideMerge from '@market-event-edit-pro/side/merge/node-side-merge'
+
+// 分流类组件
+import NodeSideSplitChannel from '@market-event-edit-pro/side/split/node-side-split-channel'
+import NodeSideSplitChannelBranch from '@market-event-edit-pro/side/split/node-side-split-channel-branch'
+import NodeSideSplitCst from '@market-event-edit-pro/side/split/node-side-split-cst'
+import NodeSideSplitCstBranch from '@market-event-edit-pro/side/split/node-side-split-cst-branch'
+import NodeSideSplitEvt from '@market-event-edit-pro/side/split/node-side-split-evt-new'
+import NodeSideSplitEvtBranch from '@market-event-edit-pro/side/split/node-side-split-evt-branch-new'
+import NodeSideSplitEvtBranchNoResp from '@market-event-edit-pro/side/split/node-side-split-evt-branch-no-resp'
+import NodeSideSplitEvtBranchResp from '@market-event-edit-pro/side/split/node-side-split-evt-branch-resp'
+import NodeSideSplitLabel from '@market-event-edit-pro/side/split/node-side-split-label'
+import NodeSideSplitLabelBranch from '@market-event-edit-pro/side/split/node-side-split-label-branch'
+import NodeSideSplitRdm from '@market-event-edit-pro/side/split/node-side-split-rdm'
+import NodeSideSplitRdmBranch from '@market-event-edit-pro/side/split/node-side-split-rdm-branch'
+
+// 时机类组件
+import NodeSideOpportunityDelay from '@market-event-edit-pro/side/opportunity/node-side-opportunity-delay'
+import NodeSideOpportunityTimer from '@market-event-edit-pro/side/opportunity/node-side-opportunity-timer'
+import NodeSideOpportunityTrigger from '@market-event-edit-pro/side/opportunity/node-side-opportunity-trigger'
+
+// 渠道类组件
+import NodeSideChannelCall from '@market-event-edit-pro/side/channels/node-side-channel-call'
+import NodeSideChannelElecpin from '@market-event-edit-pro/side/channels/node-side-channel-elecpin'
+import NodeSideChannelHandbnk from '@market-event-edit-pro/side/channels/node-side-channel-handbnk'
+import NodeSideChannelPhonebnk from '@market-event-edit-pro/side/channels/node-side-channel-phonebnk'
+import NodeSideChannelSms from '@market-event-edit-pro/side/channels/node-side-channel-sms'
+import NodeSideChannelWechat from '@market-event-edit-pro/side/channels/node-side-channel-wechat'
+import NodeSideChannelClient from '@market-event-edit-pro/side/channels/node-side-channel-client'
+import NodeSideChannelDynamic from '@market-event-edit-pro/side/channels/node-side-channel-dynamic'
+
+
+// 资源类组件
+// import NodeSideAct from '@market-event-edit-pro/side/resource/node-side-act'
+/**
+ * Date: 2024-6.20
+ * Feature: 6月份权益组件需求开发
+ * Desc: 上面有一个之前系统中的活动组件,所以基于它复制了一份出来进行需求修改并开发.
+ */
+import NodeSideAct from '@market-event-edit-pro/side/act/node-side-act'
+import NodeSideContent from '@market-event-edit-pro/side/resource/node-side-content'
+// import NodeSideEquity from '@market-event-edit-pro/side/resource/node-side-equity'
+/**
+ * Date: 2024-05-30
+ * Feature: 6月份权益组件需求开发
+ * Desc: 上面有一个之前系统中的权益组件,所以基于它复制了一份出来进行需求修改并开发.
+ */
+import NodeSideEquity from '@market-event-edit-pro/side/equity/node-side-equity'
+import NodeSideProd from '@market-event-edit-pro/side/resource/node-side-prod'
+
+// 提示卡片组件
+import NodeCardTips from '@market-event-edit-pro/side/node-card-tips'
+
+import { getCopyMarketCircleDetail, getCopyMarketDetail, getMarketCircleDetail, getMarketDetail } from '@/api/market'
+import { getMarketTemplate } from '@/api/template/template-active'
+import { AI_EVENT } from '@/utils/variable'
+import { mapActions, mapMutations, mapState, mapGetters } from 'vuex'
+import { translatePageData, translatePageDataForScene } from '@market-event-edit-pro/util'
+import { translatePageDataForTemplate } from '../../market-event-edit-pro/util'
+import bus from '@/bus'
+import { getProductTag } from '@/api/market'
+import { detailProdInfo } from '@/api/product'
+import { getGroupDetail } from '@/api/customer/customer-group'
+
+export default {
+    components: {
+        EventCanvas,
+        EventTemplate,
+        NodeSideDetail,
+        NodeSideCustomer,
+        NodeSideActivityCst,
+        NodeSideFlowCst,
+        NodeSideComposeCst,
+        NodeSideMerge,
+        NodeSideSplitEvt,
+        NodeSideSplitEvtBranch,
+        NodeSideSplitEvtBranchResp,
+        NodeSideSplitEvtBranchNoResp,
+        NodeSideSplitChannel,
+        NodeSideSplitChannelBranch,
+        NodeSideSplitCst,
+        NodeSideSplitCstBranch,
+        NodeSideSplitLabel,
+        NodeSideSplitLabelBranch,
+        NodeSideSplitRdm,
+        NodeSideSplitRdmBranch,
+        NodeSideContent,
+        NodeSideProd,
+        NodeSideAct,
+        NodeSideEquity,
+        NodeSideOpportunityTimer,
+        NodeSideOpportunityTrigger,
+        NodeSideOpportunityDelay,
+        NodeSideChannelHandbnk,
+        NodeSideChannelSms,
+        NodeSideChannelPhonebnk,
+        NodeSideChannelCall,
+        NodeSideChannelElecpin,
+        NodeSideChannelWechat,
+        NodeSideChannelClient,
+        NodeSideChannelDynamic,
+        NodeCardTips
+    },
+    inject: ['getLibId','isSupportHotDeploy'],
+    provide() {
+        return {
+            getDetailForm: this.getDetailForm,
+            showChannelTarget: this.config.SHOW_CHANNEL_TARGET === '1',
+            actId: this.id,
+            getGraph: this.getGraph,
+            getCanvasList: this.getCanvasList
+        }
+    },
+    props: {
+        cstLoading: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        cstonly: {
+            type: Boolean,
+            default: false
+        },
+        mode: {
+            type: String,
+            default: ''
+        },
+        addType: {
+            type: String,
+            default: ''
+        },
+        id: {
+            type: String,
+            default: ''
+        },
+        type: {
+            type: String,
+            default: 'event'
+        },
+        zoom: {
+            type: Boolean,
+            default: true
+        },
+        showEdgeLabel: {
+            type: Boolean,
+            default: false
+        },
+        isLoop: {
+            type: Boolean,
+            default: false
+        },
+        pageName: {
+            type: String,
+            default: ''
+        },
+        currentCanvas: {
+            type: Object
+        },
+        isPauseUpdate: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            dialog: false,
+            createTime: '',
+            currKey: 'detail',
+            cstId: null,
+            tempId: '',
+            actSubShow: false,
+            nodeId: null,
+            CstExplorShowVoList: [],
+            form: {
+                name: '',
+                type: 'temp'
+            },
+            isAIMode: false,
+            getDetailForm: () => this.$refs.detail.getData(),
+            getCanvasList: () => this.getData(), // 渠道预览使用
+            rawData: {
+                nodes: [
+                    {
+                        id: 'start',
+                        x: 200,
+                        y: 200,
+                        label: '开始',
+                        type: 'point'
+                    },
+                    {
+                        id: 'end',
+                        x: 800,
+                        y: 200,
+                        label: '结束',
+                        type: 'point'
+                    }
+                ],
+                edges: []
+            },
+            data: {
+                nodes: [
+                    {
+                        id: 'start',
+                        x: 200,
+                        y: 200,
+                        label: '开始',
+                        type: 'point'
+                    },
+                    {
+                        id: 'end',
+                        x: 800,
+                        y: 200,
+                        label: '结束',
+                        type: 'point'
+                    }
+                ],
+                edges: []
+            },
+            nodeName: '',
+            // 活动详情折叠（操作源头：DefaultToolBar.js）
+            folding: true,
+            isShowComponentSide: false,
+            allCondTags: []
+        }
+    },
+    created() {
+        if(this.config.SHOW_FIELDS_PREVIEW) {
+            this.loadAllCondTags()
+        }
+    },
+    computed: {
+        ...mapGetters({
+            importActData: 'market/importActData'
+        }),
+        ...mapState(['customerTagMap','config']),
+        // 总分行模式下不允许编辑客户节点
+        cantEditCustomerNodeWhenTemplateMode() {
+            return this.type !== 'event'
+        },
+        isTemplate() {
+            let { type } = this
+            return type === 'template-root' || type === 'template-branch' || type === 'template-person'
+        },
+        libId() {
+            return this.getLibId() || ''
+        },
+        smallHotDeplayReadonly() {
+            return this.$route.query.mode === 'pause_update' ? false : this.readonly
+        }
+    },
+    mounted() {
+        window.addEventListener('keydown', event => {
+            if (event.keyCode === 9) {
+                event.preventDefault()
+            }
+        })
+    },
+    destroyed() {
+        window.removeEventListener('keydown', event => {
+            event.preventDefault()
+        })
+    },
+    methods: {
+        ...mapMutations(['UPDATE_CHANNEL_RELATIONS']),
+        ...mapActions(['getCusomterTagByIds']),
+        async loadAllCondTags () {
+            const needTag = ['产品管理人名称','产品编号','产品名称','业务类别','产品风险等级','编辑状态','产品起始日期','产品结束日期','资产配置类别']
+            let resData = await getProductTag()
+            this.allCondTags = resData.data?.filter(item =>needTag.includes(item.value)) || []
+        },
+        // 由父组件调用的初始化
+       async init() {
+            let { mode, id, type, isLoop } = this
+            this.cstId = id
+            let params = sessionStorage.getItem('market-event-create')
+            if (params) {
+                params = JSON.parse(params)
+            }
+            if(this.addType ==='import' && this.importActData){
+                this.setData(this.importActData).then((res)=>{
+                    const { detail, ...data } = res
+                    this.data = data
+                    this.$refs.detail.setForm(detail)
+                })
+                return;
+            }
+            switch (mode) {
+                case 'add':
+                    if (params && params.actType === AI_EVENT) {
+                        this.isAIMode = true
+                    }
+                    if (params && params.actType === '01') {
+                        this.actSubShow = true
+                    } else {
+                        this.actSubShow = false
+                    }
+                    
+                    setTimeout(() => {
+                        if (this.currentCanvas) {
+                            this.$refs.canvas.setData(this.currentCanvas).then(() => {
+                                bus.$emit('init-canvas-success')
+                            }).then(() => {
+                                // 校验画布表单
+                                this.$refs.cardTips.init()
+                            })
+                        }
+                    }, 1500);
+                    this.$refs.detail.setForm(params)
+                    break
+                case 'update':
+                case 'view':
+                case 'calc_update':
+                case 'test_update':
+                case 'pause_update':
+                    // 试运行中是不可编辑的，但是可以发布与修改（回退到草稿）
+                    // 迁移导入的客户从真实表到临时表
+                    this.getCusomterTagByIds([]).then(() => {
+                        if (type === 'event') { // 营销活动详情
+                            let api = isLoop ? getMarketCircleDetail : getMarketDetail
+                            api(id).then(data => {
+                                this.setData(data.data).then(() => {
+                                    // 获取最新修改过的基本信息数据进行覆盖
+                                    this.$refs.detail?.setForm(params)
+                                    this.createTime = data.data.createTime
+                                })
+                            })
+                        } else { // 模板详情
+                            getMarketTemplate({ id }).then(data => {
+                                this.setData(data.data).then(()=>{
+                                    this.$refs.detail.setForm(params)
+                                })
+                            })
+                        }
+                    })
+                    break
+                case 'copy':
+                    if (isLoop) {
+                        getCopyMarketCircleDetail(id).then(data => {
+                            this.setData(data.data).then(() => {
+                                this.$refs.detail.setForm(params)
+                            })
+                        })
+                    } else {
+                        getCopyMarketDetail(id).then(data => {
+                            this.setData(data.data).then(() => {
+                                this.$refs.detail.setForm(params)
+                            })
+                        })
+                    }
+                    break
+                default:
+                    break
+            }
+        },
+        show(key, node = {}) {
+            let { currKey } = this
+            // 如果不存在设定的几个 side，直接现实详情 side
+            if (!['cst', 'activityCst', 'flowCst', 'composeCst', 'merge', 'evtRespFlow', 'chnlRespFlow', 'custFlow', 'labelFlow', 'randomFlow', 'evtRespFlowBranch', 'evtRespFlowBranchResp', 'evtRespFlowBranchNoResp', 'chnlRespFlowBranch', 'randomFlowBranch', 'custFlowBranch', 'labelFlowBranch', 'intligCall', 'ebankApp', 'sms', 'appPush', 'weChat', 'teleSalesPlat', 'manager', 'waitFixTime', 'waitToTime', 'waitEvent', 'content', 'prod', 'act', 'equity','channel'].includes(key)) {
+                key = 'detail'
+            }
+            this.$refs[currKey].hide()
+            this.$refs[key].show(node, this.CstExplorShowVoList)
+            if (key !== 'detail') {
+                this.isShowComponentSide = true
+            } else {
+                this.isShowComponentSide = false
+            }
+            this.currKey = key
+        },
+        // 监听保存 form，检测连线变化
+        handleChange(form, nodeId) {
+            this.$refs.canvas.setNodeForm(nodeId, form)
+        },
+        handleDetailFold(fold) {
+            this.folding = fold
+        },
+        // 事件事件类型改变事件
+        handleEventTypeChange(node, form) {
+            this.$refs.canvas.checkNodeEdge(node, form)
+        },
+        // 内容组件选择模板
+        handleCheckEdge (node, form) {
+            this.$refs.canvas.checkNodeEdge(node, form)
+        },
+        // 监听保存 label
+        handleLabelChange(label, nodeId) {
+            this.$refs.canvas.setNodeLabel(nodeId, label)
+        },
+        // 切换打开侧边
+        handleNodeClick(node) {
+            this.nodeId = node._cfg.id
+            let model = node.getModel()
+            this.nodeName = model.label
+            let menuKey = model.uniqueKey || model.channelGroup || model.menuKey
+            if(model.menuKey==='channel') menuKey='channel'
+            this.show(menuKey, node)
+            // 关闭对应id的tipcard
+            this.$refs.cardTips.close(node._cfg)
+        },
+        // 监听画布点击，打开详情侧边
+        handleCanvasClick() {
+            this.nodeName = ''
+            this.show('detail')
+        },
+        handleNumClick(e, target) {
+            this.$emit('numClick', e, target)
+        },
+        // 保存当前节点信息
+        saveCurrNode() {
+            this.$refs[this.currKey].save()
+        },
+        // 根据 key 获取默认 form 的值
+        getDefaultFormValue(key) {
+            if (
+                ![
+                    'cst',
+                    'activityCst',
+                    'flowCst',
+                    'composeCst',
+                    'merge',
+                    'evtRespFlow',
+                    'chnlRespFlow',
+                    'custFlow',
+                    'labelFlow',
+                    'randomFlow',
+                    'evtRespFlowBranch',
+                    'chnlRespFlowBranch',
+                    'custFlowBranch',
+                    'labelFlowBranch',
+                    'ebankApp',
+                    'manager',
+                    'sms',
+                    'appPush',
+                    'intligCall',
+                    'weChat',
+                    'teleSalesPlat',
+                    'waitFixTime',
+                    'waitToTime',
+                    'waitEvent',
+                    'content',
+                    'equity',
+                    'channel',
+                    'act',
+                    'prod'
+                ].includes(key)
+            ) {
+                return {};
+            }
+            let form = this.$refs[key].$refs.form.initForm()
+            if (key === 'cst') {
+                form.viewList = null
+            }
+            let menu = this.$refs['canvas'].getMenuByKey(key)
+            form.name = form.name || menu.label
+            return form
+        },
+        checkValidateChannelComp(fromData,getData){
+           return this.$refs['canvas'].checkValidateChannelComp(fromData,getData)
+        },
+        getMenuByKey(key){
+           return this.$refs['canvas'].getMenuByKey(key)
+        },
+        validateSideForm(type, node, checkType = '') {
+            let validate
+            switch (type) {
+                case 'detail':
+                    this.show('detail')
+                    // 校验详情表单时 强制展示右侧活动详情
+                    this.showDetail()
+                    validate = this.$refs.detail.validate()
+                    break
+                case 'cst':
+                    this.$refs[this.currKey].hide()
+                    this.currKey = type
+                    validate = this.$refs[type].validate(node, checkType)
+                    break
+                case 'activityCst':
+                case 'flowCst':
+                case 'composeCst':
+                case 'merge':
+                case 'evtRespFlow':
+                case 'chnlRespFlow':
+                case 'custFlow':
+                case 'labelFlow':
+                case 'randomFlow':
+                case 'evtRespFlowBranch':
+                case 'evtRespFlowBranchResp':
+                case 'evtRespFlowBranchNoResp':
+                case 'chnlRespFlowBranch':
+                case 'randomFlowBranch':
+                case 'custFlowBranch':
+                case 'labelFlowBranch':
+                case 'intligCall':
+                case 'channel':
+                case 'ebankApp':
+                case 'sms':
+                case 'appPush':
+                case 'teleSalesPlat':
+                case 'manager':
+                case 'waitFixTime':
+                case 'waitToTime':
+                case 'waitEvent':
+                case 'content':
+                case 'prod':
+                case 'act':
+                case 'equity':
+                    this.$refs[this.currKey].hide()
+                    this.currKey = type
+                    validate = this.$refs[type].validate(node, this.getGraph())
+                    break
+                default:
+                    break
+            }
+            validate && validate.then(res => {
+                if(!res) {
+                    this.nodeName = node?.label || ''
+                }  
+            })
+            return validate
+        },
+        handleUse(data, cstonly, id, isSence, isCover = true) {
+            this.setData(data, !isSence, true, isSence, isCover)
+            this.tempId = id
+            this.$emit('cstonly-change', cstonly)
+            this.$nextTick(()=>{
+                this.$refs.cardTips.init()
+            })
+        },
+        // 获取数据
+        getData() {
+            this.$refs.detail.$refs.actTarget.getForm()
+            return {
+                detail: {
+                    ...this.$refs.detail.getData(),
+                    createTime: this.createTime,
+                    tableData: this.tableData
+                },
+                canvas: this.$refs.canvas.getNodeList(),
+                $canvasEl: this.$refs.canvas.$refs.container,
+                graph: this.$refs.canvas.graph
+            }
+        },
+        getGraph () {
+            return this.$refs.canvas.graph
+        },
+        // 写入数据
+        // resetTaget 重置活动目标
+        setData(data, isTemplateUse, resetTaget, isSence = '', isCover = true) {
+            let newData
+            if (data.actDefCanvasVo) {
+                let baseDetail = JSON.parse(JSON.stringify(data))
+                const { actDefCanvasVo, areas, ...others} = baseDetail
+                newData = {
+                    ...actDefCanvasVo,
+                    actBaseInfoVo: {
+                        ...actDefCanvasVo.actBaseInfoVo,
+                        ...others,
+                        queryMode: this.mode
+                    }
+                }
+            } else {
+                newData = data
+            }
+            let translateData = null
+            let cavans = {}
+            let detail = {}
+            let nodes = {}
+            let edges = {}
+            let p
+            if (isTemplateUse === true) {
+                translateData = translatePageDataForTemplate(newData, this.customerTagMap)
+                // 如果是模板使用，转换数据完成后将所有名单组件form做重置
+                this.resetCstForm(translateData)
+            } else if (isTemplateUse === false) {
+                translateData = translatePageDataForScene(newData, this.customerTagMap)
+                if(translateData?.detail?.areas) translateData.detail.areas = []
+            } else if(!this.currentCanvas) {
+                translateData = translatePageData(newData, this.customerTagMap)
+            }
+            if (translateData) {
+                let {actCstExploreShowVoList } = translateData
+                this.CstExplorShowVoList = actCstExploreShowVoList
+                detail = translateData.detail
+                nodes = translateData.nodes
+                edges = translateData.edges
+                cavans = { edges, nodes }
+            }  else {
+                cavans = this.currentCanvas
+                nodes = this.currentCanvas.nodes
+                edges = this.currentCanvas.edges
+            }
+            // 复制、应用模板时，校验节点中的时效性信息是否已过期
+            if (isTemplateUse || this.mode === 'copy') {
+                p = this.checkNodesExpired(nodes).then(() => {
+                    return { nodes, edges, cavans: { edges, nodes } }
+                })
+            } else {
+                p = Promise.resolve({ cavans, nodes, edges })
+            }
+            if(this.addType==='import' && this.importActData){
+                return Promise.resolve({ cavans, nodes, edges, detail })
+            }
+            return p.then(({ nodes, edges, cavans }) => {
+                let channelFlows = nodes.filter(e => e.menuKey === 'chnlRespFlow' && edges.find(v => v.target === e.id))
+                if (channelFlows.length > 0) {
+                    // 渠道分流和渠道组件关联关系存储到store
+                    let channelRelations = []
+                    channelFlows.forEach(e => {
+                        let sourceId = edges.find(v => v.target === e.id).source
+                        let sourceType = nodes.find(v => v.id === sourceId).menuKey
+                        channelRelations.push({
+                            sourceId,
+                            sourceType,
+                            targetId: e.id,
+                            targetType: e.menuKey,
+                            branchIds: [],
+                            channelChanged: false
+                        })
+                    })
+                    this.UPDATE_CHANNEL_RELATIONS(channelRelations)
+                }
+                this.$emit('cstonly-change', this.mode === 'view' ? false : detail.cstonly)
+                if (detail.actType === AI_EVENT) {
+                    this.isAIMode = true
+                } else {
+                    this.isAIMode = false
+                }
+                for (const node of cavans.nodes) {
+                    if (node.menuKey === 'evtRespFlowBranch') {
+                        node.form.hiddenDelete = true
+                    }
+                }
+                this.data = cavans
+
+                if (!isCover) {
+                    this.$refs.canvas?.useSetData(cavans)
+                } else {
+                    this.$refs.canvas?.setData(cavans)
+                    this.$refs.detail?.setForm({...detail, templateId: isSence})
+                }
+                if (this.isAIMode) {
+                    this.$nextTick(() => {
+                        // AI 模式要删除事件节点
+                        this.$refs.canvas.removeEventNode()
+                    })
+                }
+            })
+        },
+        // 由策略节点触发的联动画布事件，统一叫 link 事件，此处会代理分发调用画布（canvas）的内部方法，来进行联动新增、修改、删除
+        handleLink(linkName, args) {
+            const linkMap = {
+                'branch:add': 'addNewBranchNode',
+                // 'branch:add:merge': 'addNewMergeBranchNode',
+                'branch:delete': 'deleteBranchNode',
+                'branch:update:flowType': 'updateTypeBranchNode',
+                'branch:update:sampleType': 'updateSampleBranchNode',
+                'branch:update:mergeType': 'updateMergeBranchNode'
+            }
+            const eventName = linkMap[linkName]
+            this.$refs.canvas[eventName](...args)
+        },
+        async getEventNodeExploreIds() {
+            const data = this.getData()
+            const { detail, canvas } = data
+            let ids = []
+            let cstIds = []
+            // 活动目标
+            detail.target.forEach(tag => {
+                tag.children.forEach(item => {
+                    ids.push(item.id)
+                })
+            })
+            canvas.nodes.forEach(node => {
+                if (node.menuKey === 'cst') {
+                    // 客户节点
+                    node.form.exploreGroupTag.forEach(tag => {
+                        cstIds.push(tag.id)
+                    })
+                } else if (node.menuKey === 'strategyBranch') {
+                    // 旧规则策略
+                    if (node.form.tags) {
+                        node.form.tags.forEach(tag => {
+                            tag.children.forEach(item => {
+                                ids.push(item.id)
+                            })
+                        })
+                    }
+                    // 新规则策略
+                    if (node.form.strategyGroup) {
+                        let tags = node.form.strategyGroup.find(item => item.type === 'ruleStrategy')
+                        if (tags) {
+                            tags.ruleStrategy.forEach(tag => {
+                                tag.children.forEach(item => {
+                                    ids.push(item.id)
+                                })
+                            })
+                        }
+                    }
+                }
+            })
+            return ids
+        },
+        handleNodeDelete(id) {
+        },
+        handleMenuFold(folding) {
+            this.menuFolding = folding
+        },
+        // AI 选择改变
+        handleAIChange(isAIMode) {
+            // 改变模式
+            this.isAIMode = !!isAIMode
+            // 清空客户数据
+            this.$refs.canvas.removeCustomerNode()
+            // 删除事件节点
+            this.$refs.canvas.removeEventNode()
+            // 清空渠道营销建议
+            this.$refs.canvas.clearChannelTags()
+            // 清空周期活动选择
+            this.$refs.detail.clearCorn()
+        },
+        // 重置cst名单form
+        resetCstForm(data) {
+            let initForm = {
+                "introduction": null,
+                "customerGroup": [],
+                "customerTagTotal": 0,
+                "customerGroupTag": [],
+                "customerGroupTagApp": [],
+                "customerGroupTagAI": [],
+                "exploreGroupTag": [],
+                "uploadGroup": {
+                    "successCount": 0,
+                    "failCount": 0,
+                    "fileName": null
+                },
+                "uploadGroupWhite": {
+                    "successCount": 0,
+                    "failCount": 0,
+                    "fileName": null
+                }
+            }
+            let { nodes } = data
+            if (nodes && nodes.length) {
+                nodes.forEach(node => {
+                    if (node.menuKey === 'cst') {
+                        node.form = { ...node.form, ...initForm }
+                    }
+                })
+            }
+        },
+        /**
+         * 校验节点中的时效性信息是否已过期
+         * 例如产品节点中产品会过期，在这个方法中通过接口进行校验
+         * 如果过期，则移除，否则更新（只要接口返回详情就认为更新）
+         * 
+         * 该方法会改变nodes.form
+         * 
+         * @return Promise
+         *  */
+        checkNodesExpired (nodes) {
+            const fetchList = []
+            nodes.forEach(node => {
+                let p
+                if (node.menuKey === 'prod' && node.form.product?.prodId && !node.form.hasNotified) {
+                    // p = detailProdInfo(node.form.product.prodId, { noErrorMessage: true }).then(res => {
+                    //     node.form.product = res.data
+                    //     this.$notify({
+                    //         title: '组件更新提示',
+                    //         message: `已为您更新[${node.form.componentName}]组件所选产品`
+                    //     })
+                    // }).catch(e => {
+                    //     console.log(e)
+                    //     node.form.product = undefined
+                    //     this.$notify({
+                    //         title: '组件更新提示',
+                    //         message: `[${node.form.componentName}]组件所选产品已失效，已清除所选产品`
+                    //     })
+                    // }).finally(() => {
+                    //     node.form.hasNotified = true // 标记一下，表示提醒过了，下次不再提醒
+                    // })
+                } else if (node.menuKey === 'cst' && node.form.customerGroupTag?.length && !node.form.hasNotified) {
+                    // const list = node.form.customerGroupTag.map(cstGroup => {
+                    //     return getGroupDetail(cstGroup.id, { noErrorMessage: true }).then(res => {
+                    //         if (!res.data) {
+                    //             return cstGroup.name
+                    //         } else {
+                    //             return null
+                    //         }
+                    //     })
+                    // })
+                    // p = Promise.all(list)
+                    //     .then(names => names.filter(name => name !== null))
+                    //     .then(notExistGroupNames => {
+                    //         if (notExistGroupNames.length) {
+                    //             this.$notify({
+                    //                 title: '提示',
+                    //                 message: `[${node.form.name}]组件所选静态群组中(${notExistGroupNames.join(',')})已失效，请重新选择`
+                    //             })
+                    //         }
+                    //     })
+                    //     .finally(() => {
+                    //         node.form.hasNotified = true // 标记一下，表示提醒过了，下次不再提醒
+                    //     })
+                }
+                if (p) {
+                    fetchList.push(p)
+                }
+            })
+            return Promise.all(fetchList)
+        },
+        handleOpenTemplate() {
+            this.$refs['eventTemplate'].open()
+        },
+        // 展示活动详情框
+        showDetail() {
+            this.folding = false
+        },
+        clearCanvas() {
+            const graph = this.getGraph()
+            graph.changeData(this.rawData)
+            // 重新查询活动类型
+            this.$refs.detail.getMulActTypeList()
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.event-main {
+    min-height: 500px;
+    height: 100%;
+    // padding-right: 300px;
+    overflow: hidden;
+    position: relative;
+
+    .dialog-side {
+        height: calc(100% - 134px);
+    }
+
+    &.no-side {
+        padding-right: 0;
+        height: 100%;
+    }
+}
+</style>