axwen-test31 2.0.0

package/src/views/market/market-event-edit/side/node-side-detail.vue

@@ -0,0 +1,620 @@
+<template>
+    <dialog-side v-model="isSideShow" :title="type === 'event' ? '活动详情' : '模板详情'">
+        <!-- <qrcode-preview slot="header" /> -->
+        <event-form
+            ref="form"
+            :fields="fields"
+            :isText="isText"
+        />
+    </dialog-side>
+</template>
+
+<script>
+import EventForm from './event-form'
+import DialogSide from './dialog-side'
+import H5Editor from '@/components/h5-editor'
+import TagEditor from '@/components/tag-editor'
+import EventRunTime from '../time/event-run-time'
+import EventApproveTime from '../time/event-approve-time'
+import EventWatchTime from '../time/event-watch-time'
+import CornEditor from '../../components/corn-editor'
+import NodeSelectEvent from '../select/node-select-event'
+import NodeSelectAppact from '../select/node-select-appact'
+import { TEMPLATE_TYPE, currency } from '../util'
+import { AI_EVENT } from '@/utils/variable'
+import { mapState } from 'vuex'
+const clearArray = (list) => {
+    list.splice(0, list.length)
+}
+
+export default {
+    // eslint-disable-next-line vue/no-unused-components
+    components: { DialogSide, EventForm, 'h5-editor': H5Editor, TagEditor, CornEditor, EventRunTime, EventWatchTime, NodeSelectEvent, NodeSelectAppact, EventApproveTime },
+    props: {
+        isText: {
+            type: Boolean,
+            default: false
+        },
+        type: {
+            type: String,
+            default: 'event'
+        },
+        cstonly: {
+            type: Boolean,
+            default: false
+        },
+        isTemplate: {
+            type: Boolean,
+            default: false
+        },
+        isLoop: {
+            type: Boolean,
+            default: false
+        },
+        isAIMode: {
+            type: Boolean,
+            default: false
+        },
+         actSubShow: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        let { isTemplate } = this
+        let type = this.type
+        const validateRunDate = function (rule, value, callback) {
+            let context = this.$refs.form
+            let form = context.getForm()
+            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 {
+                    callback()
+                }
+            } else if (!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分钟'))
+                }
+            }
+        }
+        const validateWatchDate = function (rule, value, callback) {
+            let context = this.$refs.form
+            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()
+                    }
+                }
+            }
+        }
+        return {
+            isSideShow: true,
+            model: {},
+            isShowappActId: false,
+            canShow: false,
+            opptLineId: '',
+            fields: [
+                {
+                    title: '创建人　',
+                    type: 'text',
+                    key: 'actInitiatorName',
+                    defaultValue: '',
+                    renderContent: (h, item, form) => {
+                        if (!form.actInitiator) {
+                            return <p class="form-text">-</p>
+                        }
+                        return <p class="form-text">{ form.actInitiatorName + `(${form.actInitiator})` }</p>
+                    }
+                },
+                {
+                    title: '创建机构',
+                    type: 'text',
+                    key: 'actInitiatorOrgName',
+                    defaultValue: ''
+                },
+                {
+                    title: '模板类型',
+                    type: 'text',
+                    isShow: isTemplate && !this.isText,
+                    renderContent: (h) => {
+                        return <div class="form-text">{ TEMPLATE_TYPE[type] }</div>
+                    }
+                },
+                {
+                    title: '模板类型',
+                    type: 'text',
+                    isShow: this.isText && isTemplate,
+                    renderContent: (h, item, form) => {
+                        let map = {
+                            1: '总行模板',
+                            2: '分行模板',
+                            3: '个人模板'
+                        }
+                        return <div class="form-text">{ map[form.tempType] }</div>
+                    }
+                },
+                {
+                    title: '活动类型',
+                    type: 'select',
+                    key: 'actType',
+                    options: [],
+                    isRequired: true,
+                    onInput: (value, item, form, beforeValue) => {
+                        this.canShow = value === "01"
+                        this.actSubShow = value ==='01'
+                        if (value !== '01') {
+                            form.actTypeSub = ''
+                        }
+                        if (value === beforeValue) {
+                            return
+                        }
+                        if (value === AI_EVENT) {
+                            form.actType = beforeValue
+                            const tip = '切换 AI 活动将清空【客户】、【事件】与活动周期，是否切换？'
+                            this.$confirm(tip, '提示', { type: 'warning', closeOnClickModal: false, dangerouslyUseHTMLString: true }).then(() => {
+                                form.actType = value
+                                this.$emit('aiChange', true)
+                            }, () => {})
+                        } else if (beforeValue === AI_EVENT) {
+                            form.actType = beforeValue
+                            const tip = '切换 AI 活动将清空【客户】，是否切换？'
+                            this.$confirm(tip, '提示', { type: 'warning', closeOnClickModal: false, dangerouslyUseHTMLString: true }).then(() => {
+                                form.actType = value
+                                this.$emit('aiChange', false)
+                            }, () => {})
+                        }
+                    }
+                },
+                {
+                    title: '活动子类型',
+                    type: 'select',
+                    options: [],
+                    key: 'actTypeSub',
+                    isShow: () => { return this.subTypeShow || this.canShow },
+                    isRequired: true
+                },
+                // {
+                //     title: '活动预算',
+                //     type: 'input-number',
+                //     key: 'actBudget',
+                //     props: {
+                //         unit: '元'
+                //     },
+                //     rule: [
+                //         { pattern: /^[1-9]\d{0,9}$/, message: '请输入十位以内正整数', trigger: 'blur' }
+                //     ]
+                // },
+                {
+                    title: '营销活动名称',
+                    type: 'input',
+                    key: 'actName',
+                    isShow: type === 'event',
+                    isRequired: true,
+                    props: {
+                        maxlength: 50
+                    }
+                },
+                {
+                    title: '活动模板名称',
+                    type: 'input',
+                    key: 'actName',
+                    isShow: isTemplate,
+                    isRequired: true,
+                    props: {
+                        maxlength: 50
+                    }
+                },
+                {
+                    title: '活动执行时间',
+                    key: 'run',
+                    isRequired: true,
+                    isShow: !isTemplate,
+                    rule: [
+                        { required: true, validator: validateRunDate.bind(this), trigger: 'change' }
+                    ],
+                    renderContent: (h, item, form) => {
+                        // h = this.$createElement
+                        return <EventRunTime readonly={this.isText} form={form} />
+                    }
+                },
+                // {
+                //     title: '是否发送短信或APP-PUSH',
+                //     key: 'isNeedSmsApprove',
+                //     type: 'radio-group',
+                //     defaultValue: '0',
+                //     onInput: (value, item, form) => {
+                //         form.isNeedSmsApprove = value === '0' ? '0' : '1'
+                //         if (value === '1') {
+                //             let data = new Date()
+                //             let years = data.getFullYear()
+                //             let month = data.getMonth()
+                //             let day = data.getDate()
+                //             let hours = data.getHours()
+                //             let minutes = data.getMinutes()
+                //             if (hours > 18) {
+                //                 form.expirationTime = new Date(years, month, day + 1, 18, 40)
+                //             } else if (hours === 18) {
+                //                 if (minutes < 40) {
+                //                     form.expirationTime = new Date(years, month, day, 18, 40)
+                //                 } else {
+                //                     form.expirationTime = new Date(years, month, day + 1, 18, 40)
+                //                 }
+                //             } else {
+                //                 form.expirationTime = new Date(years, month, day, 18, 40)
+                //             }
+                //         } else {
+                //             form.expirationTime = ''
+                //         }
+                //     },
+                //     options: [
+                //         { label: '是', value: '1' },
+                //         { label: '否', value: '0' }
+                //     ]
+                // },
+                // {
+                //     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: 'watch',
+                    isRequired: true,
+                    isShow: !isTemplate,
+                    rule: [
+                        { required: true, validator: validateWatchDate.bind(this), trigger: 'change' }
+                    ],
+                    renderContent: (h, item, form) => {
+                        return <EventWatchTime readonly={this.isText} form={form} />
+                    }
+                },
+                {
+                    title: '周期设置',
+                    key: 'corn',
+                    defaultValue: '',
+                    isRequired: true,
+                    isShow: !isTemplate && this.isLoop,
+                    renderContent: (h, item, form) => {
+                        return <CornEditor isAIMode={this.isAIMode} readonly={this.isText} form={form} />
+                    }
+                },
+                {
+                    title: '活动内容',
+                    key: 'actDefContent',
+                    defaultValue: {},
+                    renderContent: (h, item, form) => {
+                        return <H5Editor ref="h5" vModel={ form.actDefContent } form={ form } readonly={ this.isText || this.cstonly } />
+                    }
+                },
+                {
+                    title: '活动说明',
+                    key: 'actDesc',
+                    type: 'textarea',
+                    isRequired: true,
+                    isShow: (form) => !form.communityFlag,
+                    props: {
+                        maxlength: 1000,
+                        placeholder: '此项活动的目的，此项活动针对的目标客群特征，对应的产品、渠道、优惠政策'
+                    },
+                    attrs: {
+                        rows: 4
+                    }
+                },
+                {
+                    title: '执行要求',
+                    key: 'requirementDesc',
+                    type: 'textarea',
+                    props: {
+                        maxlength: 1000,
+                        placeholder: '简要描述此次活动的执行要求，包含与客户的接触频率、接触方式、时间要求、接触成果（比如获取客户的某项信息'
+                    },
+                    attrs: {
+                        rows: 4
+                    }
+                },
+                {
+                    title: '关联APP活动',
+                    type: 'select',
+                    key: 'appActId',
+                    isShow: () => this.isShowappActId,
+                    props: {
+                        filterable: true,
+                        placeholder: '关联APP活动'
+                    },
+                    renderContent: (h, item, form) => {
+                        const onInput = (option) => {
+                            form.appActId = option.appActName
+                        }
+                        return <NodeSelectAppact readonly={this.isText} form={form} onInput={onInput} />
+                    }
+                },
+                {
+                    title: '活动目标类型',
+                    type: 'select',
+                    key: 'goalType',
+                    props: {
+                        placeholder: '活动目标类型'
+                    },
+                    onInput: (value, item, form) => {
+                        localStorage.removeItem('targetHtml')
+                        if (value === '') {
+                            form.target = []
+                        }
+                        form['goalVal'] = null
+                        form['target'] = []
+                    },
+                    options: [
+                        { label: '目标数', value: '0' },
+                        { label: '目标率', value: '1' }
+                    ]
+                },
+                {
+                    title: '活动目标数值',
+                    type: 'input-number',
+                    key: 'goalVal',
+                    defaultValue: null,
+                    isShow: (form) => form.goalType !== '' && form.goalType !== null,
+                    render: (h, item, form) => {
+                        let onGoalValueChange = value => {
+                            this.$nextTick(() => {
+                                if (form.goalType === '0') {
+                                    form.goalVal = (value + '').replace(/\./g, '')
+                                } else {
+                                    form.goalVal = currency(value)
+                                }
+                            })
+                        }
+                        if (this.isText) {
+                            return <p class="form-text">{ form.goalVal }{ form.goalType === '0' ? '人' : '%' }</p>
+                        } else {
+                            return <yt-input-number
+                                vModel={ form.goalVal }
+                                max={ form.goalType === '0' ? 9999999999 : 100 }
+                                unit={ form.goalType === '0' ? '人' : '%' }
+                                onBlur={ value => onGoalValueChange(form.goalVal) }
+                                placeholder="活动目标数值"
+                            />
+                        }
+                    }
+                },
+                {
+                    title: '活动目标',
+                    key: 'target',
+                    defaultValue: [],
+                    isShow: (form) => form.goalType !== '' && form.goalType !== null,
+                    renderContent: (h, item, form) => {
+                        return <TagEditor target isTarget={true} vModel={ form.target } readonly={ this.isText } />
+                    },
+                    settings: {
+                        class: 'mt'
+                    }
+                },
+                {
+                    title: '剔除客户',
+                    defaultValue: [],
+                    key: 'deleteActCustomer',
+                    isShow: () => !isTemplate,
+                    renderTitle: (h, item, form) => {
+                        return (<div class="event-form-btn-label">
+                            <span>{ item.title }</span>
+                            <yt-button
+                                type="text"
+                                size="mini"
+                                disabled={ form.deleteActCustomer.length === 0 || this.isText }
+                                onClick={ () => clearArray(form.deleteActCustomer) }
+                            >清空</yt-button>
+                        </div>)
+                    },
+                    renderContent: (h, item, form) => {
+                        return (<NodeSelectEvent ref="event" vModel={ form.deleteActCustomer } readonly={ this.isText } />)
+                    }
+                },
+                // 活动执行事件默认 key
+                {
+                    key: 'externalNo',
+                    defaultValue: null,
+                    isShow: false
+                },
+                {
+                    key: 'externalName',
+                    defaultValue: null,
+                    isShow: false
+                },
+                {
+                    key: 'externalLink',
+                    defaultValue: null,
+                    isShow: false
+                },
+                {
+                    key: 'executeStartTime',
+                    defaultValue: null,
+                    isShow: false
+                },
+                {
+                    key: 'executeEndTime',
+                    defaultValue: null,
+                    isShow: false
+                },
+                {
+                    key: 'executeFlag',
+                    defaultValue: false,
+                    isShow: false
+                },
+                {
+                    key: 'superviseStartTime',
+                    defaultValue: null,
+                    isShow: false
+                },
+                {
+                    key: 'superviseEndTime',
+                    defaultValue: null,
+                    isShow: false
+                },
+                {
+                    key: 'superviseFlag',
+                    defaultValue: false,
+                    isShow: false
+                },
+                {
+                    key: 'cornData',
+                    defaultValue: {
+                        month: [],
+                        day: [],
+                        week: [],
+                        hour: []
+                    },
+                    isShow: false
+                }
+            ]
+        }
+    },
+    computed: {
+        ...mapState(['profile'])
+    },
+    mounted () {
+        this.loadOptions()
+    },
+    methods: {
+        loadOptions () {
+
+            if (this.$refs.form.getForm().actType === '01') {
+                this.canShow = '01'
+            }
+            this.$getOptionsForSystemParams('bigsales.OPPT_TYPE').then(data => {
+                this.fields[4].options = data
+            })
+            this.$getOptionsForSystemParams('bigsales.OPPT_SUB_TYPE').then(data => {
+                this.fields[5].options = data
+            })
+        },
+        loadActType (form) {
+            if (form.actType === '01') {
+                this.$getOptionsForSystemParams('OPPT_SUB_TYPE_01_' + this.opptLineId).then(data => {
+                    this.fields[5].options = data
+                })
+            } else if (form.actType === '09') {
+                this.$getOptionsForSystemParams('OPPT_SUB_TYPE_09_' + this.opptLineId).then(data => {
+                    this.fields[5].options = data
+                })
+            } else if (form.actType === '10') {
+                this.$getOptionsForSystemParams('OPPT_SUB_TYPE_10_' + this.opptLineId).then(data => {
+                    this.fields[5].options = data
+                })
+            }
+        },
+        setForm (params) {
+            this.loadActType(params)
+            // 地址栏存储的可能会是字符串类型，需要转 date 才能正确触发校验
+            if (typeof params.executeStartTime === 'string' && params.executeStartTime.length) {
+                params.executeStartTime = new Date(params.executeStartTime)
+            }
+            if (typeof params.executeEndTime === 'string' && params.executeEndTime.length) {
+                params.executeEndTime = new Date(params.executeEndTime)
+            }
+            if (typeof params.superviseStartTime === 'string' && params.superviseStartTime.length) {
+                params.superviseStartTime = new Date(params.superviseStartTime)
+            }
+            if (typeof params.superviseEndTime === 'string' && params.superviseEndTime.length) {
+                params.superviseEndTime = new Date(params.superviseEndTime)
+            }
+            if (typeof params.expirationTime === 'string' && params.expirationTime.length) {
+                params.expirationTime = new Date(params.expirationTime)
+            }
+            this.$refs.form.setForm(params)
+            this.canShow = params.actType === '01'
+            this.$refs.form.clear()
+            if (params.actDefContent.title) {
+                this.$refs.h5.setTab('normal')
+            }
+        },
+        getData () {
+            return this.$refs.form.getForm()
+        },
+        show () {
+            this.isSideShow = true
+        },
+        hide (form) {
+            if (this.isSideShow) {
+                this.save()
+                this.isSideShow = false
+            }
+        },
+        save () {
+            this.$emit('change', this.$refs.form.getForm(), this.model.id)
+        },
+        validate () {
+            return this.$refs.form.validate()
+        },
+        clearCorn () {
+            this.$refs.form.setForm({
+                corn: '',
+                cornData: {
+                    day: [],
+                    hour: [],
+                    month: [],
+                    week: []
+                }
+            })
+        }
+    }
+}
+</script>