axwen-test31 2.0.0

package/src/views/market/market-event-edit-pro/side/resource/node-side-content.vue

@@ -0,0 +1,679 @@
+<template>
+    <dialog-side class="content" v-model="isSideShow" :title="nodeName" :node="node" :isShowBtn="false">
+        <event-form ref="form" :fields="fields" :isText="isText" />
+    </dialog-side>
+</template>
+
+<script>
+import EventForm from '../event-form'
+import DialogSide from '../dialog-side'
+import { getChannelCompTable } from '@/api/channel-comp';
+import NodeSelectContentTempInside from '../../select/node-select-content-temp-inside.vue'
+import NodeSelectContentTempOutside from '../../select/node-select-content-temp-outside.vue'
+import TempContent from '@/components/temp-content'
+import TempContentPreview from '@/components/temp-content/temp-content-preview.vue'
+import { changeToText } from '@/components/temp-content/functions'
+import { compareVal } from '@/utils'
+import { getContentCompConfigList } from '@/api/channel-comp';
+import { getChannelManageTable } from '@/api/reach.js';
+import { isTempleteMasterOrBranchView } from '@market-event-edit-pro/util'
+import { cloneDeep } from 'lodash'
+import { mapState } from 'vuex'
+import NodeSelectContentTab from '../../select/node-select-content-tab.vue'
+
+export default {
+    components: {
+        DialogSide,
+        EventForm,
+        NodeSelectContentTab
+    },
+    props: {
+        isText: {
+            type: Boolean,
+            default: false
+        },
+        nodeName: {
+            type: String,
+            default: ''
+        },
+        isPauseUpdate: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            form: {},
+            isSideShow: false,
+            model: {},
+            showBtn:[],
+            contentConfigList:[],
+            channelTypeMap: null,
+            node: null,
+            channelCust: [],
+            channelInner: []
+        }
+    },
+    computed:{
+        ...mapState(['config']),
+        fields(){
+            return [
+                {
+                    title: '组件ID',
+                    key: 'name',
+                    type: 'input',
+                    isRequired: true,
+                    isShow: () => {
+                        if(this.isTempleteMasterOrBranchView){
+                            return false
+                        }else{
+                            return this.isText
+                        }
+                    },
+                    renderContent: (h, item, form) => {
+                        return <div>
+                            <el-input disabled vModel={this.model.nodeNumber} />
+                        </div>
+                    }
+                },
+                {
+                    title: '名称',
+                    key: 'name',
+                    type: 'input',
+                    isRequired: true,
+                    props: {
+                        maxlength: 30
+                    },
+                    on: {
+                        'clear': () => {
+                            this.$emit('changeLabel', null, this.model.id)
+                        }
+                    },
+                    nativeOn: {
+                        'change': (e) => {
+                            let value = e.target.value
+                            this.$emit('changeLabel', value, this.model.id)
+                        }
+                    }
+                },
+                {
+                    title: '',
+                    key: 'sendTarget',
+                    defaultValue:'Customer',
+                    isShow: false,
+                    renderContent: (h, item, form) => {
+                        const text={
+                            Customer:`${this.config.CANVAS_CONTENT_DUIWAI}`,
+                            Insider:`${this.config.CANVAS_CONTENT_DUINEI}`
+                        }
+                        return <div class="w-full">
+                            <el-radio-group v-model={form.sendTarget} disabled={this.isText} onInput={()=>this.changeSendTarget()}>
+                                <el-radio-button label="Customer">发送给客户</el-radio-button>
+                                <el-radio-button label="Insider">发送给内部人员</el-radio-button>
+                            </el-radio-group>
+                            <div class="text-xs mt-2 text-gray-99">{text[form.sendTarget]}</div>
+                        </div>
+                    }
+                },
+                {
+                    title: '选择模板',
+                    key: 'templateId',
+                    renderTitle: (h, item, form) => {
+                        return form.sendTarget==='Customer'?this.isShowItem('CustomerTemplate','internal').title : this.isShowItem('InsiderTemplate','internal').title
+                    },
+                    isShow:(form) => form.sendTarget==='Customer'?this.isShowItem('CustomerTemplate','internal').isShow : this.isShowItem('InsiderTemplate','internal').isShow,
+                    renderContent: (h, item, form) => {
+                        // 内部和外部的模板选择改成二选一
+                        let isText = ((this.isText && !this.isPauseUpdate) || form.externalTemplateName) ? true : false
+                        return <NodeSelectContentTempInside
+                            v-model={form.templateId}
+                            valueName={form.templateName}
+                            title="选择消息模板"
+                            sendTarget={form.sendTarget}
+                            isPauseUpdate={this.isPauseUpdate}
+                            readonly={isText}
+                            onChange={(obj) => {
+                                const { tmplName ,tmplContent, variableList, channelId, imgPath, remoteAddress, title } = obj;
+                                form.templateName = tmplName;
+                                form.templateContent=tmplContent
+                                form.templateArgs=variableList
+                                form.templateType = this.channelTypeMap[channelId]
+                                form.templatePictureUrlPath = imgPath
+                                form.templatePictureRemoteUrlPath = remoteAddress
+                                form.templateTitle = title
+                                if (Array.isArray(variableList)){
+                                    let arr = variableList.filter(
+                                        (attr) => attr.typeOne === 'custom' && (tmplContent.indexOf(attr.showDes) > -1 || tmplContent.indexOf(attr.fullCode) > -1)
+                                    );
+                                    form.customArgs=arr.sort(compareVal('typeFour'));
+                                }
+                                this.save()
+                                this.$emit('checkEdge', this.node, form)
+                            }}
+                            onClear={() => {
+                                form.templateName = ''
+                                form.templateContent = ''
+                                form.templatePictureUrlPath = ''
+                                form.templatePictureRemoteUrlPath = ''
+                                form.templateTitle = ''
+                                form.templateArgs = []
+                                form.templateType = []
+                                form.customArgs = []
+                                this.save()
+                                this.$emit('checkEdge', this.node, form)
+                            }}
+                        >
+                        </NodeSelectContentTempInside>
+                    }
+                },
+                {
+                    title: '模板标题',
+                    key: 'templateTitle',
+                    defaultValue: '',
+                    isShow: (form) => form.templateTitle ? true : false,
+                    renderContent: (h, item, form) => {
+                        return <div class="ql-editor content-wrap content-template-title" domPropsInnerHTML={ form.templateTitle } />
+                    }
+                },
+                {
+                    title: '模板内容',
+                    key: 'templateContent',
+                    defaultValue:'',
+                    renderTitle: (h, item, form) => {
+                        return <div class="flex items-center justify-between">
+                            <span>模板内容</span>
+                            <TempContentPreview content={form.templateContent} variableList={form.templateArgs} customArgs={form.customArgs} />
+                        </div>
+                    },
+                    isShow:(form) => form.sendTarget==='Customer'?this.isShowItem('CustomerTemplate','internal').isShow : this.isShowItem('InsiderTemplate','internal').isShow,
+                    renderContent: (h, item, form) => {
+                        const content=changeToText(form.templateContent,form.templateArgs||[])
+                        return <div class="ql-editor content-wrap" domPropsInnerHTML={ content } />
+                    }
+                },
+                {
+                    title: '',
+                    key: 'customArgs',
+                    defaultValue:[],
+                    isShow:(form)=>form.customArgs&&form.customArgs.length>0&&(form.sendTarget==='Customer'?this.isShowItem('CustomerTemplate','internal').isShow : this.isShowItem('InsiderTemplate','internal').isShow),
+                    renderContent: (h, item, form) => {
+                        if(!Array.isArray(form.customArgs)) return ''
+                        return <div>{
+                            form.customArgs.map((item)=>{
+                                return <div class="flex mb-1">
+                                    <div class="w-24">自定义参数{item.typeFour}=</div>
+                                    <el-input class="flex-1" maxlength={30} vModel={item.typeFourValue} disabled={this.isText && !this.isPauseUpdate}></el-input>
+                                </div>
+                            })
+                        }</div>
+                    }
+                },
+                {
+                    title: '选择模板-外部',
+                    key: 'externalTemplateId',
+                    renderTitle: (h, item, form) => {
+                        return form.sendTarget==='Customer'?this.isShowItem('CustomerTemplate','external').title : this.isShowItem('InsiderTemplate','external').title
+                    },
+                    isShow:(form) => form.sendTarget==='Customer'?this.isShowItem('CustomerTemplate','external').isShow : this.isShowItem('InsiderTemplate','external').isShow,
+                    renderContent: (h, item, form) => {
+                        // 内部和外部的模板选择改成二选一
+                        let isText = ((this.isText && !this.isPauseUpdate) || form.templateName) ? true : false
+                        return <NodeSelectContentTempOutside
+                                v-model={form.externalTemplateId}
+                                valueName={form.externalTemplateName}
+                                sendTarget={form.sendTarget}
+                                title="选择模板"
+                                readonly={isText}
+                                onChange={(obj) => {
+                                    const { tmplName ,tempContent, channelId, externalTemplateField, isCall } = obj;
+                                    form.externalTemplateName = tmplName;
+                                    form.externalTemplateContent = tempContent
+                                    form.isCall = isCall;
+                                    form.externalTemplateField = externalTemplateField
+                                    form.templateType = this.channelTypeMap[channelId]
+                                    this.save()
+                                    this.$emit('checkEdge', this.node, form)
+                                }}
+                                onClear={() => {
+                                    form.externalTemplateName = ''
+                                    form.externalTemplateContent = ''
+                                    form.externalTemplateField = ''
+                                    form.isCall = '0'
+                                    form.templateType = []
+                                    this.save()
+                                    this.$emit('checkEdge', this.node, form)
+                                }}
+                                >
+                        </NodeSelectContentTempOutside>
+                    }
+                },
+                {
+                    title: '',
+                    key: 'isCall',
+                    isShow:(form)=>form.isCall== '1',
+                    defaultValue:'',
+                    renderContent: (h, item, form) => {
+                        return <div class="distributeContent">
+                                    <div class="distributeContent_head"><i class="el-icon-warning"></i><span>请按顺序选择对应的下发内容</span></div>
+                                    <div class="distributeContent_mid">{form.externalTemplateField}</div>
+                                </div>
+                        
+                    }
+                },
+                //{
+                //    title: '模板内容',
+                //    key: 'externalTemplateContent',
+                //    defaultValue:'',
+                //    renderContent: (h, item, form) => {
+                //        return <div class="ql-editor content-wrap" domPropsInnerHTML={ form.externalTemplateContent || '' } />
+                //    }
+                //},
+                {
+                    title: '下发内容',
+                    key: 'dispatchArgsText',
+                    defaultValue:'',
+                    // rule: [{ validator: this.dispatchArgsTextRule }],
+                    renderTitle: (h, item, form) => {
+                        return form.sendTarget==='Customer'?this.isShowItem('CustomerDispatchContent').title : this.isShowItem('InsiderDispatchContent').title
+                    },
+                    isShow:(form) => form.sendTarget==='Customer'?this.isShowItem('CustomerDispatchContent').isShow : this.isShowItem('InsiderDispatchContent').isShow,
+                    renderContent: (h, item, form) => {
+                        let externalLength = 0
+                        if(form.isCall == '1'){
+                            const externalTemplateFieldArr = form.externalTemplateField.split('、')
+                            // const isPhoneFlag = externalTemplateFieldArr.some(item => item === '手机号')
+                            externalLength = externalTemplateFieldArr.length
+                        }
+                        // 0726湖南需先隐藏渠道属性btnText={{label:'标签',event:'事件属性',product:'产品参数',channelReturn: '渠道属性'}}
+                        return <TempContent
+                                showBtn={this.showBtn}
+                                btnText={{label:'标签',event:'事件属性',product:'产品参数'}}
+                                initVariableList={form.dispatchArgs}
+                                readonly={this.isText && !this.isPauseUpdate}
+                                showContent={false}
+                                btnSize="mini"
+                                jumpType="content-dispatch"
+                                isCallObj={{
+                                    isCallFlag: form.isCall == '1',
+                                    externalLength: form.isCall == '1' ?  externalLength : 0
+                                }}
+                                onChange={(obj) => {
+                                    const { variableList } = obj;
+                                    form.dispatchArgs = variableList;
+                                    if(form.isCall == '1')this.$refs.form.$refs.form.validateField('dispatchArgsText')
+                                }}>
+                        </TempContent>
+                    }
+                },
+                //湖南需隐藏渠道属性 btnText={{label:'标签',event:'事件属性',product:'产品参数',channelReturn: '渠道属性'}}
+                {
+                    // title: '营销建议',
+                    title: this.isShowItem('Suggest').title,
+                    key: 'suggestContent',
+                    isShow:(form)=>form.sendTarget==='Insider' && this.isShowItem('Suggest').isShow,
+                    defaultValue:'',
+                    renderContent: (h, item, form) => {
+                        return <TempContent
+                                v-model={form.suggestContent}
+                                btnSize="mini"
+                                placeholder="请输入营销建议"
+                                jumpType="content-suggest"
+                                showBtn={this.showBtn}
+                                btnText={{label:'标签',event:'事件属性',product:'产品参数'}}
+                                initVariableList={form.suggestArgs}
+                                readonly={this.isText && !this.isPauseUpdate}
+                                onChange={(obj) => {
+                                    const { contentWithCode, variableList } = obj;
+                                    form.suggestContentCode = contentWithCode;
+                                    form.suggestArgs = variableList || form.suggestArgs;
+                                }}>
+                        </TempContent>
+                    }
+                },
+                {
+                    title: '模板内容转换后',
+                    key: 'suggestContentCode',
+                    isShow: false
+                },
+                {
+                    title: '',
+                    key: 'templateName',
+                    isShow: false
+                },
+                {
+                    key: 'templateType',
+                    isShow: false,
+                    defaultValue: ''
+                },
+                {
+                    key: 'templatePictureUrlPath',
+                    isShow: false,
+                    defaultValue: ''
+                },
+                {
+                    key: 'formTab',
+                    isShow:(form)=>form.sendTarget==='Insider'  && this.config.ISHIDDEN_CONTENT_RESOURCE_LIST == 'false',
+                    renderContent: (h, item, form) => {
+                        return <NodeSelectContentTab form={form} isPauseUpdate={this.isPauseUpdate} isText={this.isText} isSideShow={this.isSideShow}></NodeSelectContentTab>
+                    }
+                },
+                {
+                    key: 'productArgs',
+                    defaultValue: {
+                        autoRecommend: "0",
+                        autoRecoProdType: [],
+                        arr: []
+                    },
+                    isShow: false
+                },
+                {
+                    key: 'equityArgs',
+                    defaultValue: {
+                        arr: [],
+                        customerGroupTagAI: [],
+                        type: 0
+                    },
+                    isShow: false
+                },
+                {
+                    key: 'activityArgs',
+                    defaultValue: {
+                        arr: []
+                    },
+                    isShow: false,
+                },
+                {
+                    key: 'resourceVal',
+                    defaultValue: 'productArgs',
+                    isShow: false,
+                },
+                {
+                    key: 'currentList',
+                    defaultValue: [],
+                    isShow: false,
+                },
+            ]
+        },
+        // 是否是总分行模板查看模式【总分行模板不需要展示组件ID】
+        isTempleteMasterOrBranchView(){
+            return isTempleteMasterOrBranchView(this.$route)
+        }
+    },
+    created(){
+        this.getChannelManageTable()
+    },
+    methods: {
+        dispatchArgsTextRule(rule, value, cb){
+            const {  externalTemplateField, isCall, dispatchArgs } = this.$refs.form.getForm();
+            if(isCall=='1'){
+                const externalTemplateFieldArr = externalTemplateField.split('、')
+                const labelLength = dispatchArgs.length
+                //const isPhoneFlag = externalTemplateFieldArr.some(item => item === '手机号')
+                const externalLength =  externalTemplateFieldArr.length
+                if(externalLength > labelLength){
+                    cb(new Error(`智能外呼模板下发的数量少于${externalLength}个字段`))
+                }else if(externalLength < labelLength){
+                    cb(new Error(`智能外呼模板下发的数量超过${externalLength}个字段`))
+                }
+                cb();
+            }
+        },
+        async getChannelManageTable(){
+            this.channelCust = []
+            this.channelInner = []
+            Promise.all([
+                this.$getOptionsForSystemParams('channel_type'),
+                getChannelManageTable({
+                    pageNum: 1,
+                    pageSize: 100,
+                    search:{}
+                })
+            ]).then(([channelDict, data]) => {
+                const channelCust = new Set()
+                const channelInner = new Set()
+                data.data.list?.forEach(item=>{
+                    if(item.channelSign == '1'){
+                        channelCust.add(item.channelType)
+                    }else if(item.channelSign == '2'){
+                        channelInner.add(item.channelType)
+                    }
+                })
+                this.channelCust = [...channelCust].map(key => channelDict.find(i => i.value === key)?.label).filter(Boolean)
+                this.channelInner = [...channelInner].map(key => channelDict.find(i => i.value === key)?.label).filter(Boolean)
+            })
+        },
+        isShowItem(key,tempType='internal'){
+            if(!this.contentConfigList) return {isShow:false}
+            let idx=-1
+            if(['CustomerTemplate','InsiderTemplate'].includes(key) && tempType){
+                idx=this.contentConfigList.findIndex((item)=>item.code===key && tempType===item.type)
+            }else{
+                idx = this.contentConfigList.findIndex((item)=>item.code===key)
+            }
+            if(idx===-1) return {isShow:false}
+            const { enabled, type, title }=this.contentConfigList[idx]
+            if(!enabled) return {isShow:false}
+            return {isShow:true,type,title}
+        },
+        changeSendTarget(){
+            this.$refs.form.setForm({
+                templateId:'',
+                templateName:'',
+                templateContent:'',
+                dispatchArgs:[],
+                suggestContent:'',
+                suggestContentCode:'',
+                suggestArgs:[],
+                templateType:'',
+                externalTemplateName: '',
+                externalTemplateContent: '',
+                customArgs:[],
+                templatePictureUrlPath:'',
+                isCall:'0',
+                externalTemplateField:'',
+                templatePictureRemoteUrlPath: '',
+                templateTitle: '',
+                activityArgs:{
+                    arr: []
+                },
+                productArgs:{
+                    autoRecommend: "0",
+                    autoRecoProdType: [],
+                    arr: []
+                },
+                equityArgs:{
+                    customerGroupTagAI: [],
+                    type: 0,
+                    arr: []
+                },
+            })
+            this.save()
+        },
+        // 加载事件名称选项
+        loadOptions() {
+            getContentCompConfigList().then((res)=>{
+                this.contentConfigList=res.data
+            })
+            this.$getOptionsForSystemParams(['bigsales.DynamicAttribute']).then(data => {
+                const fields=data[0].filter((item)=>item.value!=='custom')
+                this.showBtn=fields.map((item)=>item.value)
+            })
+         },
+        show(node) {
+            this.showBtn=[]
+            this.loadOptions()
+            this.isSideShow = true
+            let model = node.getModel()
+            this.model = model || {}
+            this.$refs.form.reset()
+            // 解决图文模板名称清除不掉的问题
+            if (!model?.form?.graphicTemplate) {
+                model.form.graphicTemplateName = ''
+            }
+            const {form}=model
+            if(!form.dispatchArgs) model.form.dispatchArgs=[]
+            if(!form.suggestArgs) model.form.suggestArgs=[]
+            if(!form.templateArgs) model.form.templateArgs=[]
+            if(!form.customArgs) model.form.customArgs=[]
+            const { suggestArgs,suggestContent,suggestContentCode } = form
+            this.$refs.form.setForm({
+                ...model.form,
+                name: model.label,
+                suggestContentCode,
+                suggestContent,
+                externalTemplateName: model.form.externalTemplateName,
+                externalTemplateContent: model.form.externalTemplateContent
+            });
+            this.node = node
+            this.loadChannelOptions()
+            // 事急从权，紧急缺陷偷鸡处理
+            this.$nextTick().then(() => {
+                this.$el.querySelector('div.contentTab')?.__vue__?.changeCurrentList()
+            })
+        },
+        hide(form) {
+            if (this.isSideShow) {
+                this.save()
+                this.isSideShow = false
+            }
+        },
+        // 获取选择模板类型，用来判断连线是否正常
+        loadChannelOptions () {
+            if (this.channelTypeMap) return
+            this.channelTypeMap = {}
+            let params = {
+                pageNum: 1,
+                pageSize: 100,
+                search: {}
+            }
+            getChannelCompTable(params).then(res => {
+                res.data.list.forEach(item => {
+                    if (this.channelTypeMap[item.componentChannel]) {
+                        this.channelTypeMap[item.componentChannel].push(item.componentCode)
+                    } else {
+                        this.channelTypeMap[item.componentChannel] = [item.componentCode]
+                    }
+                })
+            })
+        },
+        save() {
+            const form=this.$refs.form.getForm()
+            this.$emit('change',{ ...form }, this.model.id)
+        },
+        validate(node) {
+            this.model = node
+            this.isSideShow = true
+            const { suggestArgs, suggestContent} = node.form
+            if (suggestContent) {
+                const res = this.validSuggestTagMatchSuggestContentContent(suggestContent, suggestArgs)
+                if (!res.validResult) {
+                    this.$warning(res.msg)
+                    return Promise.resolve(false)
+                }
+            }
+            this.$refs.form.setForm({ name: node.label, ...node.form })
+            this.loadOptions()
+            this.loadChannelOptions()
+            return this.$refs.form.validate()
+        },
+        validSuggestTagMatchSuggestContentContent(suggestContent, suggestArgs) {
+            let content = suggestContent;
+            let validResult = true;
+            let msg = ''
+            while (content.length > 0) {
+                const startIdx = content.indexOf("${");
+                const endIdx = content.indexOf("}");
+
+                if (startIdx === -1 ||  endIdx === -1) break;
+
+                const tagContent = content.substring(startIdx + 2, endIdx);
+                const arg = suggestArgs.find(item => item.showDes === tagContent);
+                if (!arg) {
+                    validResult = false;
+                    msg = `${'${' + tagContent + '}'}未能匹配到已选内容`
+                    break
+                }
+
+                content = content.substring(endIdx + 1)
+            }
+            return {
+                validResult, msg
+            }
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.content{
+    width: 290px !important;
+    transform: translateX(380px);
+}
+/deep/.el-form-item__content{
+    .content-wrap {
+        width: 100%;
+        height: 150px;
+        overflow-y: auto;
+        background-color: #F5F7F9;
+        border-radius: 4px;
+        padding: 5px 15px;
+    }
+
+    .content-template-title {
+        height: 50px !important;
+    }
+}
+
+.side-event-date-wrap {
+    height: 25px;
+    position: relative;
+
+    &::after {
+        content: '';
+        top: 25px;
+        left: 0;
+        width: 100%;
+        height: 190px;
+        background-color: #F5F7F9;
+        position: absolute;
+    }
+}
+
+.side-event-date {
+    padding: 0 @space;
+}
+
+.el-radio {
+    margin-right: 0 !important;
+}
+
+/deep/.distributeContent{
+    padding: 16px;
+    background-color: #FFF7E8 ;
+    font-family: PingFang SC;
+    .distributeContent_head{
+        display: flex;
+        align-items: center;
+        i{
+            color: #FF7D00;
+            font-size: 16px;
+            margin-right: 8px;
+        }
+        span{
+            color: #191919;
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 24px;
+            letter-spacing: normal;
+        }
+    }
+
+    .distributeContent_mid{
+        font-size: 12px;
+        line-height: 20px;
+        letter-spacing: normal;
+        color: #666666;
+        text-indent: 2em;
+    }
+}
+</style>