axwen-test31 2.0.0

package/src/views/scene/scene-edit/event-main.vue

@@ -0,0 +1,900 @@
+<template>
+    <div class="event-main" >
+        <!-- v-loading="loading" -->
+        <event-canvas
+            ref="canvas"
+            :data="data"
+            :readonly="readonly"
+            :isImgMode="isImgMode"
+            :mode="mode"
+            :cstonly="cstonly"
+            :isSceneDetail="isSceneDetail"
+            :isAIMode="isAIMode"
+            :showEdgeLabel="showEdgeLabel"
+            :detailFold="folding"
+            :isShowComponentSide="isShowComponentSide"
+            :diabledKey="isAIMode ? 'event' : ''"
+            @nodeClick="handleNodeClick"
+            @canvasClick="handleCanvasClick"
+            @numClick="handleNumClick"
+            @nodeDelete="handleNodeDelete"
+            @menuFold="handleMenuFold"
+        />
+        <event-template ref="eventTemplate" version="2" v-if="!readonly" @use="handleUse" ></event-template>
+        <!-- 详情表单组件 -->
+        <node-side-detail
+            :isText="readonly"
+            ref="detail"
+            @aiChange="handleAIChange"
+            @on-fold="handleDetailFold"
+            v-bind="{ pageName, type, isTemplate, cstonly, isLoop, isAIMode, actSubShow , folding }"
+        />
+
+        <!-- 客户名单表单组件 -->
+        <node-side-customer
+            :isText="readonly || cantEditCustomerNodeWhenTemplateMode"
+            ref="cst"
+            v-bind="{ nodeName, id, cstLoading, isAIMode, isLoop, cstId, tempId }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+        />
+        <!-- 实时名单表单组件 -->
+        <node-side-flowCst
+            :isText="readonly || cantEditCustomerNodeWhenTemplateMode"
+            ref="flowCst"
+            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 }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+            @link="handleLink"
+        />
+        <!-- 按事件响应分流分支表单 -->
+        <node-side-split-evt-branch
+            :isText="readonly || cstonly"
+            :cstId="cstId"
+            :nodeId="nodeId"
+            v-bind="{ isAIMode, nodeName }"
+            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 }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+            @link="handleLink"
+        />
+        <!-- 按渠道分流分支表单 -->
+        <node-side-split-channel-branch
+            :isText="readonly || cstonly"
+            :cstId="cstId"
+            :nodeId="nodeId"
+            v-bind="{ isAIMode }"
+            ref="chnlRespFlowBranch"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+        />
+        <!-- 按客群分流表单组件 -->
+        <node-side-split-cst
+            :isText="readonly || cstonly"
+            ref="custFlow"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+            @link="handleLink"
+        />
+        <!-- 按客群分流分支表单 -->
+        <node-side-split-cst-branch
+            :isText="readonly || cstonly"
+            :cstId="cstId"
+            :nodeId="nodeId"
+            v-bind="{ isAIMode }"
+            ref="custFlowBranch"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+        />
+        <!-- 按标签分流表单组件 -->
+        <node-side-split-label
+            :isText="readonly || cstonly"
+            ref="labelFlow"
+            v-bind="{ nodeName }"
+            @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 }"
+            @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="readonly || cstonly"
+            ref="content"
+            v-bind="{ nodeName }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+            @eventTypeChange="handleEventTypeChange"
+        />
+        <!-- 产品 -->
+        <node-side-prod
+            :isText="readonly || cstonly"
+            ref="prod"
+            v-bind="{ nodeName }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+            @eventTypeChange="handleEventTypeChange"
+        />
+        <!-- 活动 -->
+        <node-side-act
+            :isText="readonly || cstonly"
+            ref="act"
+            v-bind="{ nodeName }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+            @eventTypeChange="handleEventTypeChange"
+        />
+        <!-- 权益 -->
+        <node-side-equity
+            :isText="readonly || cstonly"
+            ref="equity"
+            v-bind="{ nodeName }"
+            @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 }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+        />
+        <!-- 触发时机 ———— 等待某个事件发生-->
+        <node-side-opportunity-trigger
+            :isText="readonly || cstonly"
+            ref="waitEvent"
+            v-bind="{ nodeName }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+        />
+
+        <!-- 渠道类组件 isScene:场景库单独拎出来的main文件一定为true -->
+        <!-- 掌银  -->
+        <node-side-channel-handbnk
+            :isText="readonly || cstonly"
+            ref="ebankApp"
+            v-bind="{ nodeName,isScene:true }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+        />
+        <!-- 短信 -->
+        <node-side-channel-sms
+            :isText="readonly || cstonly"
+            ref="sms"
+            v-bind="{ nodeName,isScene:true }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+        />
+        <!-- 手机银行 -->
+        <node-side-channel-phonebnk
+            :isText="readonly || cstonly"
+            ref="appPush"
+            v-bind="{ nodeName,isScene:true }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+        />
+        <!-- 智能外呼 -->
+        <node-side-channel-call
+            :isText="readonly || cstonly"
+            ref="intligCall"
+            v-bind="{ nodeName,isScene:true }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+        />
+        <!-- 电销平台 -->
+        <node-side-channel-elecpin
+            :isText="readonly || cstonly"
+            ref="teleSalesPlat"
+            v-bind="{ nodeName,isScene:true }"
+            @changeLabel="handleLabelChange"
+            @change="handleChange"
+        />
+        <!-- 企微 -->
+        <node-side-channel-wechat
+            :isText="readonly || cstonly"
+            ref="weChat"
+            v-bind="{ nodeName,isScene:true }"
+            @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="readonly || cstonly" ref="channel" v-bind="{ nodeName }"
+            @changeLabel="handleLabelChange" @change="handleChange" />
+        <!-- 提示卡片 -->
+        <node-card-tips ref="cardTips" @nodeClick="handleNodeClick" @handleCanvasClick="handleCanvasClick"></node-card-tips>
+    </div>
+</template>
+
+<script>
+
+import EventCanvas from '@market-event-edit-pro/event-canvas'
+import EventTemplate from '@/views/market/components/event-template'
+import NodeSideDetail from '@market-event-edit-pro/side/node-side-detail-scene'
+
+// 客户群体
+import NodeSideCustomer from '@market-event-edit-pro/side/customer/node-side-customer'
+import NodeSideFlowCst from '@/views/market/market-event-edit-pro/side/customer/node-side-flowCst'
+// 汇聚
+import NodeSideMerge from '@market-event-edit-pro/side/merge/node-side-merge'
+
+// 分流类组件
+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 NodeSideSplitEvtBranchResp from '@market-event-edit-pro/side/split/node-side-split-evt-branch-resp'
+import NodeSideSplitEvtBranchNoResp from '@market-event-edit-pro/side/split/node-side-split-evt-branch-no-resp'
+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 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 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 NodeSideOpportunityDelay from '@market-event-edit-pro/side/opportunity/node-side-opportunity-delay'
+
+// 渠道类组件
+import NodeSideChannelHandbnk from '@market-event-edit-pro/side/channels/node-side-channel-handbnk'
+import NodeSideChannelSms from '@market-event-edit-pro/side/channels/node-side-channel-sms'
+import NodeSideChannelPhonebnk from '@market-event-edit-pro/side/channels/node-side-channel-phonebnk'
+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 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 NodeSideContent from '@market-event-edit-pro/side/resource/node-side-content'
+import NodeSideProd from '@market-event-edit-pro/side/resource/node-side-prod'
+import NodeSideAct from '@market-event-edit-pro/side/act/node-side-act'
+import NodeSideEquity from '@market-event-edit-pro/side/equity/node-side-equity'
+
+// 提示卡片组件
+import NodeCardTips from '@market-event-edit-pro/side/node-card-tips'
+
+import { translatePageDataForScene,  } from '@market-event-edit-pro/util'
+import { getCopyMarketDetail,  getCopyMarketCircleDetail } from '@/api/market'
+import { sceneSearchDetailsNew } from '@/api/scene'
+import { getMarketTemplate } from '@/api/template/template-active'
+import { mapState, mapActions, mapMutations } from 'vuex'
+import { AI_EVENT } from '@/utils/variable'
+import { transLinesAndOrgs } from '@/views/channel-components/util'
+
+
+export default {
+    components: {
+        EventCanvas,
+        EventTemplate,
+        NodeSideDetail,
+        NodeSideCustomer,
+        NodeSideFlowCst,
+        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
+    },
+    provide () {
+        return {
+            getDetailForm: this.getDetailForm,
+            showChannelTarget: this.config.SHOW_CHANNEL_TARGET === '1',
+            actId: this.id,
+            getGraph: this.getGraph
+        }
+    },
+    props: {
+        cstLoading: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        isImgMode: {
+            type: Boolean,
+            default: false
+        },
+        cstonly: {
+            type: Boolean,
+            default: false
+        },
+        mode: {
+            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
+        },
+        isSceneDetail: {
+            type: Boolean,
+            default: false
+        },
+        pageName: {
+            type: String,
+            default: ''
+        },
+        sceneParams: {
+            type: String,
+            default: ''
+        },
+        viewType:{
+            type:String,
+            default:''
+        }
+    },
+    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(),
+            data: {
+                nodes: [
+                    {
+                        id: 'start',
+                        x: 200,
+                        y: 200,
+                        label: '开始',
+                        type: 'point'
+                    },
+                    {
+                        id: 'end',
+                        x: 800,
+                        y: 200,
+                        label: '结束',
+                        type: 'point'
+                    }
+                ],
+                edges: []
+            },
+            nodeName: '',
+            folding: true,
+            isShowComponentSide: false
+        }
+    },
+    computed: {
+        ...mapState(['customerTagMap', 'config']),
+        // 总分行模式下不允许编辑客户节点
+        cantEditCustomerNodeWhenTemplateMode () {
+
+            return this.type === 'sceneView'
+
+        },
+        isTemplate () {
+            let { type } = this
+            return type === 'template-root' || type === 'template-branch' || type === 'template-person'||type==='template-scene'
+        }
+    },
+    mounted () {
+        window.addEventListener('keydown', event => {
+            if (event.keyCode === 9) {
+                event.preventDefault()
+            }
+        })
+    },
+    destroyed () {
+        window.removeEventListener('keydown', event => {
+            event.preventDefault()
+        })
+    },
+    methods: {
+        ...mapMutations(['SET_FULL_LOADING', 'UPDATE_CHANNEL_RELATIONS']),
+        ...mapActions(['getCusomterTagByIds']),
+        // 由父组件调用的初始化
+        init () {
+
+            let { mode, id, type, isLoop,viewType } = this
+            this.cstId = id
+            switch (mode) {
+                case 'add':
+                    let params = this.$route.query.paramsData
+                    if (params) {
+                        params = JSON.parse(params)
+                    }
+                    if (params.actType === AI_EVENT) {
+                        this.isAIMode = true
+                    }
+                    if (params.actType === '01') {
+                        this.actSubShow = true
+                    } else {
+                        this.actSubShow = false
+                    }
+                    this.$refs.detail.setForm(params)
+                    break
+                case 'update':
+                case 'view':
+                case 'calc_update':
+                case 'test_update':
+                    // 试运行中是不可编辑的，但是可以发布与修改（回退到草稿）
+                    // 迁移导入的客户从真实表到临时表
+                    this.getCusomterTagByIds([]).then(() => {
+                        if(viewType === '总行模板'){
+                            getMarketTemplate({ id }).then(data => {
+                                this.setData(data.data)
+                            })
+                            return;
+                        }
+                        // 模板详情
+                        sceneSearchDetailsNew(id).then(data=>{
+                            if(data?.data?.actBaseInfoVo){
+                                data.data.actBaseInfoVo.sceneName = data.data.actBaseInfoVo.secneDetailName
+                                data.data.actBaseInfoVo.appChannels = data.data.actBaseInfoVo.channelIntroduction
+                                data.data.actBaseInfoVo.sceDesc = data.data.actBaseInfoVo.sceneIntroduction
+                                data.data.actBaseInfoVo.busStrategy = data.data.actBaseInfoVo.strategicIntroduction    
+                                // data.data.actBaseInfoVo.createTime = data.data.actBaseInfoVo.createTime
+                                // data.data.createTime = data.data.crtTm
+                            }
+                            const { shareLines, orgCodes } = transLinesAndOrgs(data.data)
+                            data.data.shareLines = shareLines
+                            data.data.orgCodes = orgCodes
+                            this.setData(data.data)
+                        })
+                    })
+                    break
+                case 'copy':
+                    if (isLoop) {
+                        getCopyMarketCircleDetail(id).then(data => {
+                            this.setData(data.data, true)
+                        })
+                    } else {
+                        getCopyMarketDetail(id).then(data => {
+                            this.setData(data.data, true)
+                        })
+                    }
+                    break
+                default:
+                    break
+            }
+        },
+        show (key, node = {}) {
+            let { currKey } = this
+            // 如果不存在设定的几个 side，直接现实详情 side
+            if (!['cst', 'flowCst', 'merge', 'evtRespFlow', 'chnlRespFlow', 'custFlow', 'labelFlow', 'randomFlow', 'evtRespFlowBranch', 'evtRespFlowBranchResp', 'evtRespFlowBranchNoResp', 'chnlRespFlowBranch', 'randomFlowBranch', 'custFlowBranch', 'labelFlowBranch', 'intligCall', 'ebankApp', 'sms', 'manager','appPush', 'weChat', 'teleSalesPlat', '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) {
+            // if (!this.readonly) {
+            //     let { formatFullDateTime, copy } = this.$util
+            //     let data = this.getData()
+            //     let params = traslateSubmitData(data, formatFullDateTime, this.cstonly).actDefNodeList.filter(node => node.id === nodeId)[0]
+
+            //     updateWaitExcuteNodeInfo(params).then(
+            //         this.$success('保存成功')
+            //     )
+            // }
+            this.$refs.canvas.setNodeForm(nodeId, form)
+        },
+        // 事件事件类型改变事件
+        handleEventTypeChange (node, form) {
+            this.$refs.canvas.checkNodeEdge(node, form)
+        },
+        // 策略分支响应策略改变事件
+        handleBehaviorStrategyTypeChange (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)
+        },
+        // 监听画布点击，打开详情侧边
+        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', 'flowCst', 'merge', 'evtRespFlow', 'chnlRespFlow', 'custFlow', 'labelFlow', 'randomFlow', 'evtRespFlowBranch', 'chnlRespFlowBranch', 'custFlowBranch', 'labelFlowBranch', 'ebankApp', 'sms', 'appPush', 'intligCall','manager', 'weChat','teleSalesPlat', 'waitFixTime', 'waitToTime', 'waitEvent', 'content', 'equity'].includes(key)) {
+                return {}
+            }
+            let form = this.$refs[key].$refs.form.initForm()
+            let menu = this.$refs['canvas'].getMenuByKey(key)
+            form.name = form.name || menu.label
+            return form
+        },
+        validateSideForm (type, node) {
+            let validate
+            switch (type) {
+                case 'detail':
+                    this.show('detail')
+                    // 校验详情表单时 强制展示右侧活动详情
+                    this.showDetail()
+                    validate = this.$refs.detail.validate()
+                    break
+                case 'cst':
+                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 'manager':
+                case 'appPush':
+                case 'teleSalesPlat':
+                case 'waitFixTime':
+                case 'waitToTime':
+                case 'waitEvent':
+                case 'content':
+                    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
+        },
+        handleDetailFold(fold){
+            this.folding = fold
+        },
+        handleUse (data, cstonly, id) {
+            this.setData(data)
+            this.tempId = id
+            this.$emit('cstonly-change', cstonly)
+            setTimeout(() => {
+                // 校验画布表单
+                this.$refs.cardTips.init()
+            }, 1000)
+        },
+        // 获取数据
+        getData () {
+            return {
+                detail: {
+                    ...this.$refs.detail.getData(),
+                    createTime: this.createTime
+                },
+                canvas: this.$refs.canvas.getNodeList(),
+                $canvasEl: this.$refs.canvas.$refs.container,
+                graph: this.$refs.canvas.graph
+            }
+        },
+        getGraph () {
+            return this.$refs.canvas.graph
+        },
+        // 写入数据
+        setData (data) {
+            let newData
+            if (data.actDefCanvasVo) {
+                let baseDetail = JSON.parse(JSON.stringify(data))
+                delete baseDetail.actDefCanvasVo
+                newData = {
+                    ...data.actDefCanvasVo,
+                    actBaseInfoVo: {
+                        ...data.actDefCanvasVo.actBaseInfoVo,
+                        ...baseDetail
+                    }
+                }
+            } else {
+                newData = data
+            }
+            let { edges, nodes, detail, actCstExploreShowVoList } = translatePageDataForScene(newData, this.customerTagMap, 'actDefNodeLinkList')
+            this.CstExplorShowVoList = actCstExploreShowVoList
+            let cavans = {
+                edges,
+                nodes
+            }
+            let channelFlows = nodes.filter(e => e.menuKey === 'chnlRespFlow')
+            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
+            }
+            this.$refs.canvas.setData(cavans)
+            // this.$refs.detail.setForm(detail)
+            this.$refs.detail.setForm(newData.actBaseInfoVo)
+            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()
+        },
+        // 打开模板框
+        handleOpenTemplate () {
+            this.$refs['eventTemplate'].open()
+        },
+        // 展示活动详情框
+        showDetail () {
+            this.folding = false
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+.event-main {
+    min-height: 500px;
+    height: 100%;
+    // padding-right: 300px;
+    overflow: hidden;
+    position: relative;
+    padding: 12px;
+    background-color: #F6F8FC;
+    &.no-side {
+        padding-right: 0;
+        height: 100%;
+    }
+}
+</style>