axwen-test31 2.0.0

package/src/views/market/market-event-edit-pro/side/node-side-strategy-branch-editor.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="node-side-strategy-branch-editor">
+        <div class="editor-item" v-for="(item,i) in editor" :key="i">
+            <div class="editor-item-content" v-if="item.type === 'ruleStrategy'">
+                <p class="editor-item-header">
+                    <span>按标签分流</span>
+                    <span v-if="!readonly">
+                        <yt-button
+                            :disabled="!item.ruleStrategy || item.ruleStrategy.length === 0"
+                            type="text" 
+                            @click="() => {
+                                handleRuleClear(i)
+                            }">清空</yt-button>
+                    </span>
+                </p>
+                <CustomerExploreSelect
+                    title="设置标签"
+                    simple
+                    :value="item.ruleStrategy"
+                    :ckAreas="item.ruleStrategyCK"
+                    :disabled="readonly"
+                    :proOperator="false"
+                    :tempLabelText="tempLabelText"
+                    :libId="getLibId()"
+                    @change="(data)=> handleRuleChange(data,i)"
+                />
+                </div>
+            <div class="editor-item-content" v-if="item.type === 'cstGroupStrategy'">
+                <p class="editor-item-header">
+                    <span>按客群分流</span>
+                    <span v-if="!readonly">
+                        <yt-button
+                            :disabled="!item.cstGroupStrategy || item.cstGroupStrategy.length === 0"
+                            type="text" 
+                            @click="() => {
+                                handleCustomerClear(item)
+                                editor.splice(i, 1)
+                            }">清空</yt-button>
+                    </span>
+                </p>
+                <p v-if="isShowappActId" >
+                    <node-select-customer-group :readonly="readonly" :cstId="cstId" :nodeId="nodeId" :branchStra="branchStra" v-model="item.cstGroupStrategy" />
+                </p>
+                <p v-else>
+                    <node-select-unique-customer :readonly="readonly" :cstId="cstId" :nodeId="nodeId" :branchStra="branchStra" v-model="item.cstGroupStrategy" :unipueCustomer="unipueCustomer" source="node-side-split-cst-branch" />
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import CustomerExploreSelect from '@/components/customer-explore-select'
+import NodeSelectCustomerGroup from '../select/node-select-customer-group'
+import NodeSelectUniqueCustomer from '../select/node-select-unique-customer'
+import { mapState } from 'vuex'
+
+export default {
+    name: 'nodeSideStrategyBranchEditor',
+    components: {
+        CustomerExploreSelect,
+        NodeSelectCustomerGroup,
+        NodeSelectUniqueCustomer
+    },
+    inject: ['getLibId'],
+    props: {
+        editor: {
+            type: Array,
+            default: () => []
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        cstId: {
+            type: [String, Number],
+            default: ''
+        },
+        nodeId: {
+            type: [String, Number],
+            default: ''
+        },
+        type: {
+            type: String,
+            default: ''
+        },
+        tempLabelText: {
+            type: String,
+            default: ''
+        }
+    },
+    data () {
+        return {
+            branchStra: 1,
+            isShowappActId: false,
+            unipueCustomer: true,
+        }
+    },
+    computed: {
+        ...mapState(['profile']),
+    },
+    created () {
+        this.init()
+    },
+    methods: {
+        init () {
+            if (this.type === 'cstGroupStrategy') {
+                this.branchStra = 0
+            }
+        },
+        handleRuleClear (index) {
+            this.$emit('clear',index)
+        },
+        handleCustomerClear (item) {
+            item.cstGroupStrategy = []
+            this.branchStra = 0
+        },
+        handleRuleChange(data,index){
+            this.$emit('change',data,index)
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.node-side-strategy-branch-editor {
+    .multiple-select-content.upload {
+        background-color: #fff;
+    }
+
+    .multiple-select-header .el-button {
+        background-color: #F5F7F9;
+    }
+    .editor-add {
+        border-style: dashed;
+    }
+    .editor-add,
+    .el-dropdown {
+        width: 100%;
+    }
+    .editor-item-content {
+        padding: 0 @space @space;
+        border-radius: (@space / 2);
+        background-color: #F5F7F9;
+    }
+    .editor-item-header {
+        min-height: @space4;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+}
+</style>

package/src/views/market/market-event-edit-pro/side/node-side-strategy-table.vue

@@ -0,0 +1,270 @@
+<template>
+    <div class="node-side-strategy-table h-full flex flex-col">
+        <div class="flex-auto">
+            <yt-table
+                ref="table"
+                :fields="fields"
+                :hasPagination="false"
+                :data="data"
+                :animation="false"
+                :hasExport="false"
+                :hasTip="false"
+                :showFooter="false"
+            />
+        </div>
+        <div class="extend-row " v-if="!noAdd">
+            <el-popover
+                placement="top"
+                title="新增分支名称"
+                v-model="visible"
+                @show="handleShow"
+                :append-to-body="true"
+                popper-class="node-side-strategy-table-popover"
+            >
+                <el-input ref="input" v-model="newName" class="mt mb" :placeholder="defaultName" maxlength="30" clearable></el-input>
+                <p class="font-gray font-small">新增后可在分支节点上编辑名字。</p>
+                <div class="tr">
+                    <yt-button size="mini" @click="visible = false" logIgnore>否</yt-button>
+                    <yt-button type="primary" size="mini" @click="handleAdd" logName="分流-添加分支">是</yt-button>
+                </div>
+                <yt-button icon="el-icon-plus" slot="reference" class="add-btn" >添加</yt-button>
+            </el-popover>
+        </div>
+    </div>
+</template>
+
+<script>
+import bus from '@/bus'
+import { NODE_SAMPLE_TYPE_NUMBER } from '@/utils/variable'
+
+export default {
+    props: {
+        data: {
+            type: Array,
+            default: () => []
+        },
+        disable: {
+            type: Boolean,
+            default: false
+        },
+        noAdd: {
+            type: Boolean,
+            default: false
+        },
+        noSort: {
+            type: Boolean,
+            default: false
+        },
+        noIndex: {
+            type: Boolean,
+            default: true
+        },
+        nodeType: {
+            type: String,
+            default: ''
+        },
+        hasBeforeEdges: {
+            type: Boolean,
+            default: true
+        },
+        // 限制分支数量，为0时无分支数量限制
+        limit: {
+            type: Number,
+            default: 0
+        },
+        // 判断是否选了分流方式
+        splitStage: {
+            type: Boolean,
+            default: true
+        },
+        sampleType: {
+            type: String,
+            default: NODE_SAMPLE_TYPE_NUMBER
+        },
+    },
+    data () {
+        return {
+            visible: false,
+            newName: '',
+            defaultName: '',
+            fields: [
+                {
+                    title: '优先级',
+                    type: 'index',
+                    width: 65,
+                    align: 'center',
+                    isShow: () => !this.noIndex
+                },
+                // {
+                //     title: '优先级',
+                //     key: "samplePriority",
+                //     width: 65,
+                //     isShow: () => this.sampleType === NODE_SAMPLE_TYPE_NUMBER
+                // },
+                {
+                    title: '名称',
+                    key: 'name',
+                    render: (h, { row }) => row.name
+                },
+                {
+                    title: '操作',
+                    width: 70,
+                    isShow: () => !this.disable,
+                    render: (h, { row, $index }) => {
+                        // 其他节点不允许编辑
+                        if (row.isOther) {
+                            return
+                        }
+                        let btns = [
+                            <yt-ctrl-item confirm primary={ row.name } onClick={ () => { this.handleDelete(row, $index) }} logName="分流-删除分支" trigger="hover">
+                                <yt-icon icon="delete"></yt-icon>
+                            </yt-ctrl-item>
+                        ]
+                        // 热部署 - 继承发布 - 分支组件是否可以删除
+                        if (row.isHiddenDelete) {
+                            btns = []
+                        }
+                        if (!this.noSort) {
+                            btns.unshift(
+                                <yt-ctrl-item onClick={ () => this.upRow($index) } logName="分流-移动分支">
+                                    <yt-icon icon="el-icon-top"></yt-icon>
+                                </yt-ctrl-item>,
+                                <yt-ctrl-item onClick={ () => this.downRow($index) } logName="分流-移动分支">
+                                    <yt-icon icon="el-icon-bottom"></yt-icon>
+                                </yt-ctrl-item>
+                            )
+                        }
+                        return <yt-ctrl>
+                            {
+                                ...btns.map(btn => {
+                                    return btn
+                                })
+                            }
+                        </yt-ctrl>
+                    }
+                }
+            ]
+        }
+    },
+    mounted () {
+        bus.$on('graph-node:delete', this.handleNodeDelete)
+        bus.$on('flow-branch-close', this.close)
+    },
+    methods: {
+        handleAdd () {
+            if (!this.hasBeforeEdges) {
+                return this.$message.info('请连接前序渠道组件')
+            }
+
+            // 判断是否选了分流方式
+            if(!this.splitStage){
+                this.$message.info('请选择分流方式')
+                return 
+            }
+            let hasOther = this.data.some(row => row.isOther)
+            let id = 'node' + new Date().getTime()
+            let name = this.newName || this.defaultName
+            let order = this.data.length
+            // 如果有其他节点，排序 -1
+            if (hasOther) {
+                order -= 1
+            }
+            // 样本类型为"样本数"时，需要增加 samplePriority "优先级"字段
+            let samplePriority = (order + 1).toString()
+            // 往结尾追加一条数据
+            if (hasOther) {
+                this.data.splice(this.data.length - 1, 0, { id, name})
+            } else {
+                this.data.push({ id, name })
+            }
+            this.visible = false
+
+            /**
+             * 之所以采用 emit 传递新增，是因为如果用 bus 传递时，多个相同分流节点会有重复产生的可能性
+             */
+            this.$emit('add', { name, id, order, samplePriority })
+        },
+        handleShow () {
+            this.defaultName = '分流分支' + (this.data.length + 1)
+            this.newName = ''
+            this.$nextTick(() => {
+                this.$refs.input.focus()
+            })
+        },
+        // 删除行
+        handleDelete (row, i) {
+            this.$emit('delete', row.id)
+            this.data.splice(i, 1)
+            this.resetSamplePriority()
+        },
+        // 向上移动行
+        upRow ($index) {
+            if ($index === 0) {
+                return
+            }
+            let prevIndex = $index - 1
+            let data = this.data;
+            [data[$index], data[prevIndex]] = [data[prevIndex], data[$index]]
+            this.data.splice()
+            this.resetSamplePriority()
+        },
+        // 向下移动行
+        downRow ($index) {
+            // 最后一条数据以及其他不允许向下移动
+            if ($index === this.data.length - 1 || this.data[$index + 1].isOther) {
+                return
+            }
+            let nextIndex = $index + 1
+            let data = this.data;
+            [data[$index], data[nextIndex]] = [data[nextIndex], data[$index]]
+            this.data.splice()
+            this.resetSamplePriority()
+        },
+        handleNodeDelete (id) {
+            let i = this.data.findIndex(row => row.id === id)
+            if (i >= 0) {
+                this.data.splice(i, 1)
+                this.resetSamplePriority()
+            }
+        },
+        resetSamplePriority() {
+            // 这里如果要使用 reset-priority 的方式
+            // 那么自定义事件的接收形式也要做对应修改
+          this.$emit('resetPriority')
+        },
+        close() {
+            this.visible = false;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+::v-deep.node-side-strategy-table {
+    .yt-table {
+        padding: 0;
+    }
+    .el-table{
+        min-height: 200px;
+    }
+    .extend-row {
+        border: 1px solid #EBEEF5;
+        border-top: none;
+        padding: @space;
+        .add-btn{
+            width: 100%;
+            border-style: dashed;
+        }
+    }
+    .cell {
+        padding-left: 6px !important;
+        font-size: 14px;
+    }
+    .yt-divider {
+        display: none;
+    }
+}
+.node-side-strategy-table-popover {
+    z-index: 3000 !important;
+}
+</style>

package/src/views/market/market-event-edit-pro/side/node-side-time-config.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <yt-select v-model="value.executeType" :options="options" style="width: 100%" @input="handleChange" />
+        <el-row class="mt" v-if="value.executeType !== 'now'">
+            <el-col :span="14">
+                <yt-input-number-str v-model="value.executeDate" placeholder="请输入时间" />
+            </el-col>
+            <el-col :span="10">
+                <yt-select v-model="value.executeDateType" class="ml" :options="dateOptions" />
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    data () {
+        return {
+            options: [
+                { label: '立即执行', value: 'now' },
+                { label: '提前', value: 'before' },
+                { label: '延后', value: 'after' }
+            ],
+            dateOptions: [
+                { label: '年', value: 'year' },
+                { label: '月', value: 'month' },
+                { label: '日', value: 'day' },
+                { label: '时', value: 'hour' }
+            ]
+        }
+    },
+    methods: {
+        handleChange () {
+            this.value.executeDate = null
+            this.value.executeDateType = null
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,125 @@
+<template>
+    <dialog-side v-model="isSideShow" title="时刻">
+        <yt-button v-if="isTestMode" slot="header" size="small" type="primary" icon="el-icon-video-play">执行到此节点</yt-button>
+        <event-form
+            ref="form"
+            :fields="fields"
+            :isText="isText"
+        />
+    </dialog-side>
+</template>
+
+<script>
+import EventForm from './event-form'
+import DialogSide from './dialog-side'
+import NodeSideTimeConfig from './node-side-time-config'
+
+export default {
+    components: {
+        EventForm,
+        DialogSide,
+        NodeSideTimeConfig
+    },
+    props: {
+        isText: {
+            type: Boolean,
+            default: false
+        },
+        id: {
+            type: String,
+            default: ''
+        },
+        isTestMode: {
+            type: Boolean,
+            default: false
+        },
+        cstLoading: {
+            type: Boolean,
+            default: false
+        },
+        isAIMode: {
+            type: Boolean,
+            default: false
+        },
+        isLoop: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            isSideShow: false,
+            model: {}
+        }
+    },
+    computed: {
+        fields () {
+            return [
+                {
+                    title: '名称',
+                    key: 'name',
+                    type: 'input',
+                    isRequired: true,
+                    on: {
+                        'blur': (e) => {
+                            let value = e.target.value
+                            this.$emit('changeLabel', value, this.model.id)
+                        }
+                    }
+                },
+                {
+                    title: '时刻类型',
+                    key: 'type',
+                    type: 'select',
+                    isRequired: true,
+                    options: [
+                        { label: '数据到达时间', value: '1' },
+                        { label: '事件发生时间', value: '2' }
+                    ]
+                },
+                {
+                    title: '类型参数',
+                    key: 'config',
+                    isRequired: true,
+                    defaultValue: {
+                        executeType: null,
+                        executeDate: null,
+                        executeDateType: null
+                    },
+                    renderContent: (h, item, form) => {
+                        return <NodeSideTimeConfig value={form.config} />
+                    }
+                }
+            ]
+        }
+    },
+    methods: {
+        show (node) {
+            this.isSideShow = true
+            let model = node.getModel()
+            this.model = model || {}
+            this.$refs.form.reset()
+            this.$refs.form.setForm({ name: model.label, nodeId: node._cfg.id, ...model.form })
+            this.node = node
+        },
+        hide (form) {
+            if (this.isSideShow) {
+                this.save()
+                this.isSideShow = false
+            }
+        },
+        save () {
+            this.$emit('change', this.$refs.form.getForm(), this.model.id)
+        },
+        validate (node) {
+            this.model = node
+            this.isSideShow = true
+            this.$refs.form.setForm({ name: node.label, ...node.form })
+            return this.$refs.form.validate()
+        },
+        clearCustomerAll (form, type) {
+            this.$refs['upload' + type].deleteAll()
+        }
+    }
+}
+</script>