axwen-test31 2.0.0

package/src/views/market/market-event-create/market-event-base/index.vue

@@ -0,0 +1,947 @@
+<template>
+    <div class="event-basis-news d-flex flex-column" v-loading="nextLoading">
+        <div class="d-flex flex-column basis-main">
+            <div class="step-header">
+                <el-steps :active="stepIndex" align-center process-status="finish">
+                    <el-step title="策略信息设置"></el-step>
+                    <el-step title="策略画布编排"></el-step>
+                </el-steps>
+            </div>
+            <div class="label-view">
+                <!-- <div class="form-title--prefix">
+                    <span>标签库选择</span>
+                </div>
+                <div style="width: 50%; padding-right: 42px">
+                    <el-select style="width: 100%" v-model="libId" placeholder="请选择标签库" @change="handleLibIdChange" :disabled="isPauseUpdate">
+                        <el-option v-for="item in libList" :key="item.key" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                </div> -->
+                
+                <div class="form-title--prefix mt-5">
+                    <span>基本信息</span>
+                </div>
+            </div>
+            <yt-form
+                ref="form"
+                :labelWidth="150"
+                :fields="fields"
+                :gutter="84"
+                class="event-form"
+                contentWidth="100%"
+                :options="{'label-position': 'top'}"
+                :grid="[[12,12],[12,12],[12,12],[24],[12,12],[12,12],[12,12,12],[12,12],[12,12],[12],[12],[12],[24],[12, 12],[24],[24],[24],[12,12],[12,12],[12,12],[12,12],[12,12]]"
+                @submit="handleFormSubmit"
+            />
+            <div v-if="config.SHOW_COST === '1'">
+                <p class="title" v-if="!isLoop"> <span>成本管理</span> </p>
+                <CostsManager v-if="!isLoop " ref="cost" :costsResponseDTOS="costsBack" :readonly="isPauseUpdate" />
+            </div>
+        </div>
+        <div class="form-footer flex-center">
+            <yt-button @click="handleClose">取消</yt-button>
+            <yt-button type="primary" @click="goNext" :loading="nextLoading">下一步</yt-button>
+        </div>
+    </div>
+</template>
+<script>
+import DetailTestRunCustomer from '@/views/market/market-event-edit-pro/select/detail-test-run-customer'
+import EventRunTime from '@market-event-edit-pro/time/event-run-time'
+import EventWatchTime from '@market-event-edit-pro/time/event-watch-time'
+import Upload from '@market-event-edit-pro/dialog/upload'
+import { mapState, mapMutations, mapGetters } from 'vuex'
+import ActTarget from '@/views/market/components/act-target'
+import CycleSetting from '@/views/market/components/cycle-setting'
+import SubActivityTable from '@/views/market/components/sub-activity-table.vue'
+import { AI_EVENT, dayOptions, weekOptions, monthOptions } from '@/utils/variable'
+import CostsManager from './costs-manager.vue'
+import NodeSelectEvent from '../../market-event-edit-pro/select/node-select-event'
+import TreeSelect from '@/components/tree-select'
+import { getMulActTypeList, getTargetById } from '@/api/act-type-manage'
+import { getDisabled, pruneTree } from '@/utils'
+import { getActNumber } from '@/api/market'
+import { formatTargetToPage } from '@/views/market/market-event-edit-pro/util'
+import dayjs from 'dayjs'
+
+export default {
+    inject: ['getLibId', 'isSupportHotDeploy'],
+    components: {
+        DetailTestRunCustomer,
+        EventRunTime,
+        EventWatchTime,
+        ActTarget,
+        Upload,
+        CostsManager,
+        NodeSelectEvent,
+        TreeSelect
+    },
+    props: ['basis', 'costsBack', 'isPauseUpdate', 'isText', 'nextLoading', ],
+    data() {
+        const validateRunDate = function (rule, value, callback) {
+            let context = this
+            let form = context.getForm()
+            this.$refs.form.$refs.form.validateField('watch')
+            const now = new Date()
+            let { executeEndTime, executeStartTime, executeFlag } = form
+            if (!executeFlag) {
+                if (!executeStartTime) {
+                    callback(new Error('请选择运行开始时间'))
+                } else if (!executeEndTime) {
+                    callback(new Error('请选择运行结束时间'))
+                } else if (executeEndTime <= executeStartTime) {
+                    callback(new Error('结束时间需要大于开始时间'))
+                } else if(executeStartTime < now && this.mode !== 'pause_update'){
+                    callback(new Error('开始时间需要大于当前时间'))
+                } else if(executeEndTime <= now){
+                    callback(new Error('结束时间需要大于当前时间'))
+                } else{
+                    callback()
+                }
+            } else if (!executeEndTime) {
+                callback(new Error('请选择运行结束时间'))
+            } else {
+                callback()
+            }
+        }
+        const validateWatchDate = function (rule, value, callback) {
+            let context = this
+            let form = context.getForm()
+            let { executeEndTime, executeStartTime, executeFlag, superviseEndTime, superviseStartTime, superviseFlag } = form
+            if (superviseFlag) {
+                callback()
+            } else {
+                if (!executeFlag) {
+                    // 需要监测时间
+                    if (!superviseStartTime) {
+                        callback(new Error('请选择监测开始时间'))
+                    } else if (!superviseEndTime) {
+                        callback(new Error('请选择监测结束时间'))
+                    } else if (superviseEndTime < superviseStartTime) {
+                        callback(new Error('结束时间需要大于开始时间'))
+                    } else if (superviseStartTime < executeStartTime && executeStartTime) {
+                        callback(new Error('监测开始时间需要大于运行开始时间'))
+                    } else if (superviseEndTime < executeEndTime) {
+                        callback(new Error('监测结束时间需要大于运行结束时间'))
+                    } else {
+                        callback()
+                    }
+                } else {
+                    if (!superviseEndTime) {
+                        callback(new Error('请选择监测结束时间'))
+                    } else if (superviseEndTime < executeEndTime) {
+                        callback(new Error('监测结束时间需要大于运行结束时间'))
+                    } else {
+                        callback()
+                    }
+                }
+            }
+        }
+        const validatexpiraTime = function (rule, value, callback) {
+            let context = this.$refs.form
+            let form = context.getForm()
+            let { expirationTime, executeStartTime } = form
+            let moment = new Date()
+            if (executeStartTime) {
+                if (expirationTime) {
+                    if (expirationTime > moment && ((expirationTime - moment) > 300000) && expirationTime < executeStartTime) {
+                        callback()
+                    } else if (expirationTime < moment || (expirationTime > moment && (expirationTime - moment) < 300000)) {
+                        callback(new Error('审批时限最早时间应设置为此刻后5分钟'))
+                    } else {
+                        callback(new Error('审批时限不得晚于活动开始时间'))
+                    }
+                }
+            } else if (expirationTime) {
+                if (expirationTime > moment && ((expirationTime - moment) > 300000)) {
+                    callback()
+                } else {
+                    callback(new Error('审批时限最早时间应设置为此刻后5分钟'))
+                }
+            }
+        }
+        let query = this.$route.query
+        let type = query.type
+        let isTemplate = type === 'template-root' || type === 'template-branch'
+        return {
+            mode: query.mode || 'add',
+            type: query.type || 'event',
+            isLoop: query.isLoop === 'true' || query.isLoop === true,
+            treeData: [],
+            treeProps: {
+                id: 'code',
+                label: 'label',
+                pid: 'parent',
+                children: 'children'
+            },
+            fields: [
+                {
+                    title: '创建人',
+                    type: 'text',
+                    key: 'actInitiatorName',
+                    defaultValue: '',
+                    disabled: this.isText,
+                    isShow: false,
+                    renderContent: (h, item, form) => <p class="form-text">{form.actInitiatorName + `(${form.actInitiator})`}</p>
+                },
+                {
+                    title: '创建机构',
+                    type: 'text',
+                    key: 'actInitiatorOrgName',
+                    defaultValue: '',
+                    disabled: this.isText,
+                    isShow: false
+                },
+                {
+                    title: '活动类型',
+                    type: 'input',
+                    key: 'actType',
+                    disabled: this.isText || this.isPauseUpdate,
+                    rule: [
+                        { required: true, message: '请选择活动类型', trigger: ['change', 'blur']}
+                    ],
+                    renderContent: (h, item, form) => 
+                        <TreeSelect
+                            vModel={form.actType}
+                            options={this.treeData}
+                            treeProps={this.treeProps}
+                            expandNode={true}
+                            expand={false}
+                            disabled={this.isText || this.isPauseUpdate}
+                            onChange={() => this.setDefaultTarget(form)}
+                        ></TreeSelect>
+                },
+                {
+                    title: '营销活动名称',
+                    type: 'input',
+                    key: 'actName',
+                    isRequired: true,
+                    props: {
+                        maxlength: 50
+                    },
+                    disabled: this.isText
+                },
+                
+
+                {
+                    title: '活动成本预算',
+                    key: 'budgetAmount',
+                    type: 'input-number',
+                    props: {
+                        unit: '元',
+                        max: 1000000000
+                    }
+                },
+                {
+                    title: '监测方式',
+                    key: 'monitorType',
+                    type: 'select',
+                    isRequired: true,
+                    defaultValue: '1',
+                    isShow: () => !this.isLoop,
+                    options: [],
+                    onInput: (value, item, form) => {
+                        form.superviseFlag = false
+                        form.superviseStartTime = null
+                        form.superviseEndTime = null
+                        form.monitorDelay = value === '2' ? '30' : ''
+                    },
+                    props: {
+                        clearable: false
+                    }
+                },
+                {
+                    title: '活动ID',
+                    type: 'input',
+                    key: 'actNumber',
+                    isShow: false,
+                    disabled: true,
+                    renderContent: (h, item, form) => {
+                        return (form.actNumber ?
+                            <div>
+                                <el-input disabled vModel={form.actNumber} />
+                            </div> :
+                            <div style="display: flex;">
+                                <el-input style="{width: 70%;}" disabled vModel={form.actNumber} />
+                                <div
+                                    style="width: 36px;height: 18px;line-height: 14px;color: #1664FF;cursor:pointer;padding-left: 8px;"
+                                    onClick={() => this.handleGetActNumber(form) }
+                                >保存生成</div>
+                            </div>
+                        )
+                    }
+                },
+                {
+                    type: 'input',
+                    key: 'placeholder ',
+                    isShow: false
+                },
+                {
+                    title: '有无营销名单',
+                    type: 'radio-group',
+                    key: 'marketingFlag',
+                    options: [
+                        { label: '有营销名单', value: '1' },
+                        { label: '无营销名单', value: '0' }
+                    ],
+                    defaultValue: '1',
+                    isRequired: true,
+                    disabled: this.isPauseUpdate,
+                    isShow: () => false
+                },
+                {
+                    title: '活动子类型',
+                    type: 'select',
+                    key: 'actTypeSub',
+                    options: [],
+                    isShow: (form) => form.actType === '01',
+                    isRequired: true,
+                    disabled: this.isText || this.isPauseUpdate,
+                },
+                {
+                    title: '剔除历史下发客户',
+                    key: 'excludeHisCust',
+                    type: 'switch',
+                    settings: {
+                        class: 'inline close basic'
+                    },
+                    isShow: () => !this.isLoop && false,
+                    isRequired: true,
+                    defaultValue: false
+                },
+                // {
+                //     title: '审批时限',
+                //     key: 'expirationTime',
+                //     isShow: (form) => form.isNeedSmsApprove === '1',
+                //     rule: [
+                //         { required: false, validator: validatexpiraTime.bind(this), trigger: 'change' }
+                //     ],
+                //     renderContent: (h, item, form) => {
+                //         h = this.$createElement
+                //         return <event-approve-time readonly={this.isText} form={form} />
+                //     }
+                // },
+                
+                {
+                    title: '活动运行时间',
+                    key: 'run',
+                    rule: [
+                        { required: true, validator: validateRunDate.bind(this), trigger: 'change' }
+                    ],
+                    renderContent: (h, item, form) => <EventRunTime readonly={this.isText} portHotDeplayReadonly={this.portHotDeplayReadonly} isPauseUpdate={this.isPauseUpdate} form={form} />
+                },
+                {
+                    title: '活动监测时间',
+                    key: 'watch',
+                    isShow: (form) => form.monitorType !== '2',
+                    rule: [
+                        { required: true, validator: validateWatchDate.bind(this), trigger: 'change' }
+                    ],
+                    renderContent: (h, item, form) => <EventWatchTime readonly={this.isText} portHotDeplayReadonly={this.portHotDeplayReadonly} isPauseUpdate={this.isPauseUpdate} form={form} />
+                },
+                {
+                    title: '监测时长',
+                    key: 'monitorDelay',
+                    type: 'select',
+                    isRequired: true,
+                    isShow: (form) => form.monitorType === '2',
+                    options: [],
+                    defaultValue: '30',
+                    renderContent: (h, item, form) => {
+                        return (<div style="display: flex;">
+                            <yt-select style="flex: 1;" vModel={form.monitorDelay} options={item.options} />
+                            <span class="pl-2">天</span>
+                        </div>)
+                    }
+                },
+                {
+                    title: '周期执行',
+                    key: 'cycleFlag',
+                    type: 'switch',
+                    settings: {
+                        class: 'inline close basic'
+                    },
+                    isShow: (form) => !this.isLoop && false,
+                    defaultValue: false,
+                    onInput: (value, item, form) => {
+                        form.cycleRange = 'day'
+                        form.cycleWay = ''
+                        form.cycleTime = null
+                        this.setCycleOptions(form)
+                    }
+                },
+                {
+                    key: 'zhanweifu', // 占位
+                    isShow: () => false
+                },
+                {
+                    title: '执行周期',
+                    key: 'cycleRange',
+                    type: 'radio-group',
+                    isShow: (form) => form.cycleFlag && !this.isLoop,
+                    isRequired: true,
+                    defaultValue: 'day',
+                    options: [],
+                    onInput: (value, item, form) => {
+                        form.cycleWay = ['week', 'month'].includes(value) ? [] : ''
+                        this.setCycleOptions(form)
+                    }
+                },
+                {
+                    title: '活动目标',
+                    key: 'areas',
+                    defaultValue: [],
+                    isRequired: true,
+                    isShow: (form) => !this.isLoop && form.cycleFlag,
+                    renderContent: (h, item, form) => {
+                        const handleValid = () => {
+                            const elementFormVm = this.$refs.form.$refs.form
+                            elementFormVm.validateField('areas')
+                        }
+                        return (
+                            <ActTarget 
+                                vModel={form.areas}  
+                                form={form} 
+                                readonly={this.isText || this.isPauseUpdate || this.portHotDeplayReadonly} 
+                                onInput={() => handleValid()} 
+                            />
+                        )
+                    }
+                },
+                {
+                    title: '周期方式',
+                    key: 'cycleWay',
+                    type: 'select',
+                    options: [],
+                    isShow: (form) => form.cycleFlag && !this.isLoop,
+                    isRequired: true,
+                    props: {
+                        multiple: false
+                    }
+                },
+                {
+                    title: '开始时间',
+                    key: 'cycleTime',
+                    type: 'time',
+                    isShow: (form) => form.cycleFlag && !this.isLoop,
+                    isRequired: true,
+                    props: {
+                        valueFormat: 'HH:mm:ss'
+                    }
+                },
+                {
+                    title: '认定方式',
+                    key: 'targetConfirmType',
+                    type: 'select',
+                    options: []
+                },
+                {
+                    title: '活动目标',
+                    key: 'areas',
+                    defaultValue: [],
+                    isRequired: true,
+                    isShow: (form) => this.isLoop || (!this.isLoop && !form.cycleFlag),
+                    renderContent: (h, item, form) => {
+                        const handleValid = () => {
+                            const elementFormVm = this.$refs.form.$refs.form
+                            elementFormVm.validateField('areas')
+                        }
+                        let intoFlag = 'create'
+                        return <ActTarget ref="actTarget" vModel={form.areas} form={form} readonly={this.isText || this.isPauseUpdate || this.portHotDeplayReadonly} onInput={() => handleValid()} />
+                    }
+                },
+                {
+                    title: '活动周期',
+                    key: 'actCycleFrequencyJsonString',
+                    defaultValue: '',
+                    isShow: (form) => this.isLoop,
+                    isRequired: true,
+                    renderContent: (h, item, form) => {
+                        let handleClearValid = () => {
+                            this.$refs.form?.$refs.form?.validateField('actCycleFrequencyJsonString')
+                        }
+                        return (<CycleSetting
+                            ref="cycleSetting"
+                            isAIMode={form.actType === AI_EVENT}
+                            isCanvas={this.mode === 'update'}
+                            readonly={this.isText}
+                            onValid={ () => handleClearValid() }
+                            form={form}
+                        />)
+                    }
+                },
+                {
+                    title: '参与限制',
+                    key: 'actCycleLimitType',
+                    defaultValue: '',
+                    isShow: (form) => this.isLoop,
+                    isRequired: true,
+                    options: [
+                        {label:'当天',value:'day'},
+                        {label:'当周',value:'week'},
+                        {label:'当月',value:'month'},
+                        {label:'当季',value:'quarter'}
+                    ],
+                    renderContent: (h, item, form) => {
+                        const toInteger = () => {
+                            let reg = /^[1-9]+$/
+                            if(!reg.test(form.actCycleLimitValue)){
+                                this.$message.warning("只能输入正整数")
+                                // 用以在dom渲染挂载后重新触发dom渲染挂载
+                                this.$nextTick(() => {
+                                    form.actCycleLimitValue = parseInt(form.actCycleLimitValue)
+                                })
+                            }
+                        }
+                        return (<div class="flex gap-2" style="flex-wrap: wrap; align-items: center">
+                            <span style="line-height: 16px">当前{this.joName}，同一个用户</span>
+                            <yt-select class="w-20" options={item.options} vModel={form.actCycleLimitType}></yt-select>
+                            <span style="line-height: 16px">内，最多参与</span>
+                            <el-input-number vModel={form.actCycleLimitValue} onChange={toInteger} min={1} style="width: 24%;"></el-input-number>
+                            次
+                        </div>)
+                    }
+                },
+                {
+                    title: '子活动',
+                    key: 'corn6',
+                    defaultValue: '',
+                    isShow: (form) => this.isLoop,
+                    renderContent: (h, item, form) => <SubActivityTable ref="subActivityTable" isView={false} isInit={this.mode === 'update'} form={form} />
+                },
+                {
+                    title: '试运行群组选择',
+                    key: 'testGroupView',
+                    defaultValue: null,
+                    isShow: () => !this.isLoop,
+                    // renderTitle: (h, item, form) => {
+                    //     let num = form.testGroupView && form.testGroupView.custCnt ? form.testGroupView.custCnt : 0
+                    //     const handleClickNum = () => {
+                    //         this.$refs['test-run']?.openDetail()
+                    //     }
+                    //     const clearNum = () => {
+                    //         form.testGroupView = null
+                    //         form.testGroupCompents = ''
+                    //     }
+                    //     return (<div class="flex-between">
+                    //         <span>
+                    //             <span>试运行群组选择</span>
+                    //             <yt-button type="text" onClick={ handleClickNum }>
+                    //                 <span class="font-green">（{num}）</span>
+                    //             </yt-button>
+                    //         </span>
+                    //         <yt-button type="text" disabled={this.isText || this.isPauseUpdate} size="mini" onClick={clearNum}>清空</yt-button>
+                    //     </div>)
+                    // },
+                    renderContent: (h, item, form) => {
+                        h = this.$createElement
+                        const handleChange = (pkId, row) => {
+                            form.testGroupView = row
+                            form.testGroupCompents = pkId
+                        }
+                        const handleClickNum = () => {
+                            this.$refs['test-run']?.openDetail()
+                        }
+                        const clearNum = () => {
+                            form.testGroupView = null
+                            form.testGroupCompents = ''
+                        }
+                        return (<DetailTestRunCustomer
+                            ref="test-run"
+                            form={form}
+                            onClickNum={handleClickNum}
+                            onClearNum={clearNum}
+                            disabled={this.isText || this.isPauseUpdate}
+                            onChange={(pkId, row) => handleChange(pkId, row)}
+                        />)
+                    }
+                },
+                {
+                    title: '活动说明',
+                    key: 'actDesc',
+                    type: 'textarea',
+                    isRequired: false,
+                    props: {
+                        maxlength: 1000,
+                        placeholder: `此项活动的目的，此项活动针对的目标客群特征，对应的产品、渠道、优惠政策`
+                    },
+                    attrs: {
+                        rows: 4
+                    },
+                    disabled: this.isText
+                },
+                {
+                    key: 'executeStartTime',
+                    defaultValue: null,
+                    isShow: false
+                },
+                {
+                    key: 'executeEndTime',
+                    defaultValue:  dayjs().add(3, 'month').set('hour', 23).set('minute', 59).set('second', 59),
+                    isShow: false
+                },
+                {
+                    key: 'executeFlag',
+                    defaultValue: true,
+                    isShow: false
+                },
+                {
+                    key: 'superviseStartTime',
+                    defaultValue: null,
+                    isShow: false
+                },
+                {
+                    key: 'superviseEndTime',
+                    defaultValue: null,
+                    isShow: false
+                },
+                {
+                    key: 'superviseFlag',
+                    defaultValue: true,
+                    isShow: false
+                },
+                {
+                    key: 'cornData',
+                    defaultValue: {
+                        month: [],
+                        day: [],
+                        week: [],
+                        hour: []
+                    },
+                    isShow: false
+                },
+                {
+                    key: 'hotDeployType',
+                    defaultValue: '0',
+                    isShow: false
+                },
+                {
+                    key: 'testGroupCompents',
+                    defaultValue: '',
+                    isShow: false
+                }
+            ],
+            tableData: [],
+            stepIndex: 0,
+            libId: '',
+            oldLibId: undefined,
+        }
+    },
+    watch: {
+        libId: {
+            handler(newLibId, oldLibId) {
+                this.oldLibId = oldLibId
+                this.$parent.getChannelCompAllList()
+            },
+            immediate: true
+        },
+        defaultLibId: {
+            handler(newVal) {
+                this.libId = newVal;
+            },
+            immediate: true
+        }
+    },
+    created(){
+        this.fields.forEach(item => {
+            if(item.title?.includes('活动')) {
+                item.title = item.title.replace('活动',this.joName)
+            }
+            if (item.key === 'actDesc') {
+                item.props.placeholder = item.props.placeholder.replace('活动',this.joName)
+            }
+
+        })
+    },
+    computed: {
+        ...mapState(['profile', 'config', 'customerTagMap', 'libList']),
+        ...mapGetters({
+            defaultLibId: 'libId'
+        }),
+        joName(){
+            return this.config.IS_ACTIVITY ?  this.config.IS_ACTIVITY : ''
+        },
+        portHotDeplayReadonly() {
+            return this.$route.query.mode === 'pause_update' ? (this.isSupportHotDeploy ? false : true) : this.isText
+        }
+    },
+    async mounted() {
+        // 周期活动不涉及成本管理相关操作
+        if (!this.isLoop && this.config.SHOW_COST === '1') {
+            this.$refs.cost.form.tableData = []
+            // vuex 中设置成本校验状态为true
+            this.setCostValid(true)
+        }
+        await this.getMulActTypeList()
+        this.getOptions()
+    },
+    methods: {
+        ...mapMutations({
+            setCostValid: 'market/setCostValid',
+        }),
+        handleLibIdChange() {
+            this.$confirm('切换标签库会清空画布所有内容，是否继续？', '提示', { type: 'warning' }).then(() => {
+                console.log('切换成功')
+                // todo 切换成功，清空画布内容、活动目标
+                this.$parent.$refs.detail.clearCanvas()
+                let detailForm = this.getForm()
+                this.setActNumber({ ...detailForm, areas: [], actType: '' })
+                this.resetLibId()
+            }).catch(() => {
+                this.libId = this.oldLibId
+            })
+        },
+        async getMulActTypeList() {
+            const data = await getMulActTypeList({ libId: this.getLibId() })
+            let target = data.data.sort((a, b) => a.sort - b.sort)
+            let tree = this.$util.listToTree({
+                data: target,
+                rootValue: null,
+                valueKey: 'id',
+                parentKey: 'parentId',
+                labelKey: 'name'
+            })
+            let formatTree = pruneTree(tree)
+            this.treeData = getDisabled(formatTree)
+        },
+        setDefaultTarget(form) {
+            let code = form.actType
+            if (!code) return
+            getTargetById(code).then(res => {
+                form.areas = formatTargetToPage((res.data || []), this.customerTagMap)
+            })
+        },
+        getOptions() {
+            this.$nextTick(() => {
+                this.$refs.form?.clear()
+                let profile = this.profile
+                let params = {
+                    actInitiator: profile.userName,
+                    actInitiatorName: profile.positionName,
+                    actInitiatorOrgName: profile.orgName
+                }
+                
+                if (this.mode === 'add' && this.treeData && this.treeData.length) {
+                    let actType = ''
+                    function loop (list) {
+                        if (list[0].children && list[0].children.length) {
+                            loop(list[0].children)
+                        } else {
+                            actType = list[0].code
+                        }
+                    }
+                    loop(this.treeData)
+                    params.actType = actType
+                }
+                if (this.routerParams && this.routerParams.length) {
+                    let routeParams = {
+                        ...params,
+                        ...JSON.parse(this.routerParams)
+                    }
+                    this.tableData = routeParams.tableData
+                    delete routeParams.tableData
+                    this.$refs.form.setForm(routeParams)
+                } else {
+                    this.$refs.form?.setForm(params)
+                }
+            })
+            let list = [
+                'bigsales.OPPT_TYPE',
+                'bigsales.OPPT_SUB_TYPE',
+                'bigsales.OPPT_MONITOR_TYPE',
+                'bigsales.OPPT_MONITOR_DELAY',
+                'bigsales.OPPT_CYCLE_RANGE',
+                'bigsales.TARGET_DETERMINE_METHOD'
+            ]
+            this.$getOptionsForSystemParams(list).then(data => {
+                this.fields.find(item => item.key === 'actType').options = data[0]
+                this.fields.find(item => item.key === 'actTypeSub').options = data[1]
+                this.fields.find(item => item.key === 'monitorType').options = data[2]
+                this.fields.find(item => item.key === 'monitorDelay').options = data[3]
+                this.fields.find(item => item.key === 'cycleRange').options = data[4]
+                this.fields.find(item => item.key === 'targetConfirmType').options = data[5]
+                this.$nextTick(() => {
+                    this.$refs.form.clear()
+                })
+            })
+        },
+        setCycleOptions(form) {
+            let type = form?.cycleRange || ''
+            let options = dayOptions
+            let multiple = false
+            switch (type) {
+                case 'day':
+                    options = dayOptions
+                    multiple = false
+                    break
+                case 'week':
+                    options = weekOptions
+                    multiple = true
+                    break
+                case 'month':
+                    options = monthOptions()
+                    multiple = true
+                    break
+                default:
+                    break
+            }
+            this.$nextTick(() => {
+                this.fields.find((i) => i.key === 'cycleWay').options = options
+                this.fields.find((i) => i.key === 'cycleWay').props.multiple = multiple
+                setTimeout(() => {
+                    this.$refs.form?.clear()
+                }, 100)
+            })
+        },
+        // 下一步
+        goNext({ immediateSave }, dialogInset = false) {
+            this.$refs.actTarget.getForm()
+            let params = this.getForm()
+            if (!this.isLoop && this.config.SHOW_COST === '1') {
+                // 非周期活动有成本管理
+                let costValid = this.$refs.cost.valid()
+                this.setCostValid(costValid)
+                params.costsResponseDTOS = this.$refs.cost.form.tableData
+                params.totalCost = this.$refs.cost.totalCost
+            }
+            this.$emit('next', {
+                mode: 'add',
+                params: JSON.stringify(params),
+                isLoop: this.isLoop,
+                immediateSave: immediateSave ? true : false
+            })
+        },
+        setForm(params) {
+            this.setCycleOptions(params)
+            this.$nextTick(() => {
+                this.$refs.form.reset()
+                this.$refs.form.setForm(params)
+                this.$refs.cycleSetting && this.$refs.cycleSetting.showData()
+                setTimeout(() => {
+                    this.$refs.subActivityTable && this.$refs.subActivityTable.getTable()
+                }, 1000)               
+            })
+        },
+        setActNumber (params) {
+            this.$nextTick(() => {
+                this.$refs.form.setForm(params)       
+            })
+        },
+        resetLibId() {
+            this.getMulActTypeList()
+        },
+        getForm() {
+            return {
+                ...this.$refs.form.getForm(),
+            }
+        },
+        handleFormSubmit(form, valid) {
+            if (valid) {
+                let params = this.getForm()
+                params.tableData = this.tableData
+                // this.goNext({ immediateSave: true })
+                this.$emit('save-first-step-form',{
+                    ode: 'add',
+                    params: JSON.stringify(params),
+                    isLoop: this.isLoop,
+                    immediateSave: true 
+                } )
+            }
+        },
+        handleClose() {
+            this.$emit('cancel')
+            let name = this.isLoop ? 'market/cycle' : 'market/event'
+            this.$router.replace({
+                name,
+                query: {
+                    __beforeClose: true
+                }
+            })
+        },
+        handleGetActNumber (form) {
+            let params = {
+                createUser: form.actInitiator,
+                type: this.isLoop ? 1 : 0
+            }
+            getActNumber(params).then(res => {
+                form.actNumber = res.data
+            })
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.event-basis-news {
+    width: 100%;
+    height: 100%;
+    .el-step__title {
+        line-height: 32px !important;
+    }
+    .basis-main{
+        height: calc(100% - 40px);
+        overflow-y: auto;
+        background-color: #fff;
+        padding-bottom: 50px;
+    }
+    .step-header {
+        // height: 76px;
+        padding: 16px 0 10px 0;
+        margin-bottom: 24px;
+        border-bottom: 1px solid #E3E5E8;
+    }
+
+    .yt-form {
+        width: 80%;
+        margin: 0 auto 56px;
+    }
+    .form-footer{
+        width: 100%;
+        height: 40px;
+        // box-shadow: 0px 0px 16px 0px rgb(172 182 195 / 65%);
+        background-color: #fff;
+        z-index: 11;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+    }
+
+    .title {
+        font-size: 16px;
+        font-weight: bold;
+        padding: 0 0 16px;
+
+        span {
+            border-left: 2px solid #13B4F5;
+            padding-left: 5px;
+        }
+
+        margin-top: 10px;
+    }
+
+    .cost-table {
+        margin-bottom: 30px;
+    }
+
+    .table-icon {
+        font-size: 20px;
+        cursor: pointer;
+        margin: 10px 5px;
+    }
+
+    .btn-box {
+        width: 100%;
+        height: 56px;
+        box-shadow: 0px 0px 16px 0px rgba(172, 182, 195, 0.65);
+        background-color: #fff;
+        z-index: 11;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        .flex();
+    }
+    .label-view {
+        width: 80%;
+        margin: 0 auto;
+        // margin-bottom: 18px;
+    }
+
+}
+</style>