axwen-test31 2.0.0

package/src/views/market/market-event-edit-pro/select/node-select-group.vue

@@ -0,0 +1,1129 @@
+<template>
+    <div class="node-select-customer-group multiple-select">
+        <!-- 资源位新建页面使用 -->
+        <div v-if="['resource-side-reach-customer'].includes(source)" style="height: 60px;">
+            <div v-if="!(value && value.length)">
+                <yt-button
+                    size="mini"
+                    icon="el-icon-plus"
+                    type="primary"
+                    @click="handleOpen"
+                >选择客群</yt-button>
+            </div>
+            <div v-else class="group-info d-flex flex-column resource-state-customer" style="padding: 10px;">
+                <div>
+                    <span>已选客群({{selectedTotal}}人)： </span>
+                    <span v-for="(item, index) in value" :key="index">
+                        <span class="group-info-item group-info-symbol" v-if="item.symbol && index !== 0">{{ item.symbol | symbol(options) }}</span>
+                        <span v-for="count in item.left" :key="count" class="group-info-item group-info-left">(</span>
+                        <span :class="{ 'cursor': !['node-side-customer', 'business-add', 'resource-side-reach-customer'].includes(source) }" class="group-info-item group-info-name" @click="viewDetail(item)">{{ item.name || item.appActName || item.modelName }}</span>
+                        <span v-for="count in item.right" :key="count" class="group-info-item group-info-right">)</span>
+                    </span>
+                </div>
+                <div v-if="!readonly">
+                    <yt-button type="text" @click="handleReachReset">清空</yt-button>
+                    <yt-button type="text" @click="handleOpen">修改</yt-button>
+                </div>
+            </div>
+        </div>
+        <div v-else class="multiple-select-content upload">
+            <div class="multiple-select-header">
+                <yt-button
+                    v-if="!readonly || ['node-side-customer', 'business-add'].includes(source)"
+                    class="multiple-select-add"
+                    size="mini"
+                    icon="el-icon-plus"
+                    :disabled="readonly"
+                    @click="handleOpen"
+                >{{ _defaultOptions.btnText }}</yt-button>
+                <yt-button
+                    v-if="readonly && value.length && !isChannelAvoid && !['node-side-customer', 'business-add'].includes(source)"
+                    class="multiple-select-add"
+                    size="mini"
+                    @click="handleOpenRead"
+                >
+                    <yt-icon icon="eye" />{{ _defaultOptions.btnReadOnlyText }}
+                </yt-button>
+            </div>
+            <div class="group-info">
+                <span v-for="(item, index) in value" :key="index">
+                    <span class="group-info-item group-info-symbol" v-if="item.symbol && index !== 0">{{ item.symbol | symbol(options) }}</span>
+                    <span v-for="count in item.left" :key="count" class="group-info-item group-info-left">(</span>
+                    <span :class="{ 'cursor': !['node-side-customer', 'business-add'].includes(source) }" class="group-info-item group-info-name" @click="viewDetail(item)">{{ item.name || item.appActName || item.modelName }}</span>
+                    <span v-for="count in item.right" :key="count" class="group-info-item group-info-right">)</span>
+                </span>
+            </div>
+        </div>
+        <yt-dialog
+            :title="dialogTitle || _defaultOptions.btnText"
+            v-model="dialog"
+            append-to-body
+            :width="1200"
+            :isFormDialog="!readonly"
+            class="node-select-customer-group-dialog"
+            @confirm="handleConfirm"
+            :hasConfirm="!readonly && !dialogTitle"
+            @close="handleClose"
+            top="50px"
+            :hasCancel="result ? false : true"
+        >
+            <ul class="header-tabs">
+                <li
+                    v-for="item in needTabs"
+                    :key="item.value"
+                    class="header-tab-item"
+                    @click="handleTabChange(item)"
+                    :class="{ active: item.value === tab }"
+                >{{ item.label }}</li>
+            </ul>
+            <div class="customer-group" :class="{ hide: result }" style="height: 60vh;">
+                <yt-card class="group-left h-full" :header="_defaultOptions.cardTitleText" shadow="none" :padding="0">
+                    <el-input v-model="keyword" style="width: 70%;" clearable @keydown.enter.native="handleSearch" size="mini" :placeholder="_defaultOptions.inputPlaceholderText" slot="right">
+                        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
+                    </el-input>
+                    <yt-table
+                        v-if="reRun"
+                        ref="table"
+                        :fields="fields"
+                        :api="_api"
+                        class="h-full"
+                        :autoload="false"
+                        :animation="false"
+                        :border="false"
+                        :params="_params"
+                        :hasTip="false"
+                        :beforeSearch="beforeSearch"
+                        :autoCalcHeight="false"
+                        :pagerCount="5"
+                    />
+                </yt-card>
+                <yt-card class="group-right" :header="_defaultOptions.customTitleText" shadow="none" :padding="8">
+                    <yt-button class="group-search" slot="right" size="mini" type="primary" @click="getReuslt" :logPrefix="_defaultOptions.btnText">查询结果</yt-button>
+                    <div class="group-info">
+                        <span v-for="(item, index) in list" :key="index">
+                            <span class="group-info-item group-info-symbol" v-if="item.symbol && index !== 0">{{ item.symbol | symbol(options) }}</span>
+                            <span v-for="count in item.left" :key="'left' + count" class="group-info-item group-info-left">(</span>
+                            <span class="group-info-item group-info-name cursor" @click="viewDetail(item)">{{ item.name || item.appActName || item.modelName }}</span>
+                            <span v-for="count in item.right" :key="'right' + count" class="group-info-item group-info-right">)</span>
+                        </span>
+                    </div>
+                    <div class="group-list">
+                        <node-temp-detail ref="sideTemp" type="card" v-if="groupType === NODE_GROUP_TYPE_LABEL" />
+                        <div class="group-header">
+                            <div class="group-header-item" style="width: 120px;">集合</div>
+                            <div class="group-header-item" style="width: 70px;">左括号</div>
+                            <div class="group-header-item" style="width: 190px;">名称</div>
+                            <div class="group-header-item" style="width: 70px;">右括号</div>
+                            <div class="group-header-item" style="flex: 1;">操作</div>
+                        </div>
+                        <draggable
+                            :list="list"
+                            tag="div"
+                            class="group-drag"
+                            ghost-class="group-item-ghost"
+                            handle=".icon-drag"
+                            :animation="200"
+                            @start="drag = true"
+                            @end="drag = false"
+                            @scroll.native="handleScroll"
+                            @drop.native.self="(e) => handleDragEnd(e)"
+                            @dragleave.native.prevent
+                            @dragover.native.prevent
+                            @dragenter.native="handleEnter"
+                            :class="{ 'active': dragging }"
+                        >
+                                <div
+                                    class="group-item"
+                                    v-for="(item, index) in list"
+                                    :key="item.pkId || item.modelId"
+                                    @dragover="(e) => handleDragOver(e, item, index)"
+                                    @drop="(e) => handleDragEnd(e)"
+                                    @dragleave.prevent
+                                >
+                                    <span class="group-symbol group-gap" v-if="index === 0"></span>
+                                    <el-select v-else class="group-symbol group-gap" size="small" v-model="item.symbol">
+                                        <el-option
+                                            v-for="option in options"
+                                            :key="option.value"
+                                            :value="option.value"
+                                            :label="option.label"
+                                        >{{ option.label }}</el-option>
+                                    </el-select>
+                                    <el-input-number class="group-gap group-number" v-model="item.left" :min="0" :max="list.length" size="small" controls-position="right" />
+                                    <el-input class="group-input group-gap" readonly size="small" :value="item.name || item.appActName || item.modelName" />
+                                    <el-input-number class="group-gap group-number" v-model="item.right" :min="0" :max="list.length" size="small" controls-position="right" />
+                                    <div class="group-ctrl group-gap" size="small">
+                                        <yt-button type="text" title="置顶" :logPrefix="_defaultOptions.btnText" logName="置顶" size="small" @click="handleTop(index)">
+                                            <yt-icon icon="to-top" />
+                                        </yt-button>
+                                        <yt-button type="text" title="置底" :logPrefix="_defaultOptions.btnText" logName="置底" size="small" @click="handleBottom(index)">
+                                            <yt-icon icon="to-bottom" />
+                                        </yt-button>
+                                        <yt-button size="small" title="拖拽排序" :logPrefix="_defaultOptions.btnText" logName="拖拽排序" type="text">
+                                            <yt-icon icon="drag" />
+                                        </yt-button>
+                                        <yt-button icon="el-icon-delete" :logPrefix="_defaultOptions.btnText" logName="删除" size="small" title="删除" type="text" @click="handleDelete(index)"></yt-button>
+                                    </div>
+                                </div>
+                        </draggable>
+                        <div class="group-tip" v-if="!list.length">{{ _defaultOptions.dragText }}</div>
+                        <div v-if="dragging && !drag" class="group-drop-indicater" :style="{ top: dropIndicatorTop + 'px' }"></div>
+                    </div>
+                </yt-card>
+            </div>
+            <div v-show="result" class="customer-list" :class="{ active: result }" style="height: calc(100% - 20px);">
+                <yt-table
+                    ref="result"
+                    :api="customerApi"
+                    :fields="customerFields"
+                    :autoload="false"
+                    :beforeSearch="funcBeforeSearch"
+                    :animation="false"
+                    height="100%"
+                    @load="handleLoad"
+                    @total-change="handleUpdateTotal"
+                >
+                    <yt-button v-if="!readonly && !dialogTitle" icon="el-icon-arrow-left" :logPrefix="_defaultOptions.btnText" @click="handleBack">返回</yt-button>
+                </yt-table>
+            </div>
+        </yt-dialog>
+        <node-select-customer-detail ref="detail" />
+        <node-temp-detail ref="temp" />
+    </div>
+</template>
+
+<script lang="jsx">
+import NodeSelectCustomerDetail from '@/views/market/market-event-edit-pro/select/node-select-customer-detail'
+import NodeTempDetail from './node-temp-detail'
+import { getGroup, queryAssemblyGroupData, getAIGroupList} from '@/api/customer/customer-group'
+// eslint-disable-next-line
+import { arithmeticNew, getCustomerDetailListByLabelFunc, getActCstNodeGroupByPage } from '@/api/market'
+import { getCustomerGroupFunc } from '../util'
+import { mapGetters, mapState } from 'vuex'
+import { NODE_GROUP_TYPE_CUSTOMER, NODE_GROUP_TYPE_LABEL, SCENE_USE, NODE_GROUP_TYPE_APP_ACT, NODE_CUSTOMER_TYPE } from '@/utils/variable'
+import Draggable from 'vuedraggable'
+import {preventAndStopEvent} from "@/utils/dom";
+import { qryColumns } from '@/api/system'
+import { getFiledsWithOptions } from "@/utils/getOptions";
+import _ from 'lodash'
+
+export default {
+    components: { Draggable, NodeSelectCustomerDetail, NodeTempDetail },
+    props: {
+        value: {
+            type: Array,
+            default: () => []
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        nodeId: {
+            type: String,
+            default: ''
+        },
+        groupNum: {
+            type: [String, Number],
+            default: ''
+        },
+        id: {
+            type: String,
+            default: ''
+        },
+        branchStra: {
+            type: [Number, String],
+            default: ''
+        },
+        cstId: {
+            type: [Number, String],
+            default: ''
+        },
+        groupType: {
+            type: Number,
+            default: 1 // 1: 群组，2: 标签组合， 3：APP
+        },
+        api: {
+            type: Function,
+            default: getGroup
+        },
+        unipueCustomer: {
+            type: Boolean,
+            default: false
+        },
+        appActGroup: {
+            type: Boolean,
+            default: false
+        },
+        isChannelAvoid: { // 渠道防打扰入口
+            type: Boolean,
+            default: false
+        },
+        // 判断被哪个组件引用
+        source: {
+            type: String,
+            default: ''
+        },
+        selectedTotal: {
+            type: [Number, String],
+            default: ''
+        },
+        defaultOptions: {
+            type: Object,
+            default: () => {
+                return {
+                    btnText: '客群选择',
+                    btnReadOnlyText: '查看群组',
+                    linkText: '前往客户群组管理',
+                    linkPathName: 'customer/group',
+                    linkTip: '前往群组管理会取消此次编辑，确定要跳转吗？',
+                    inputPlaceholderText: '请输入群组名称',
+                    cardTitleText: '客户群组列表',
+                    customTitleText: '自定义客户群',
+                    dragText: '请将左侧群组名称拖拽到区域',
+                    rowKey: 'name',
+                    rowTitle: '客群名称'
+                }
+            }
+        }
+    },
+    inject:['getGraph', 'getLibId', 'getCurrentJobId'],
+    data () {
+        return {
+            reRun: true,
+            SCENE_USE,
+            NODE_GROUP_TYPE_LABEL,
+            groupNumber: this.groupNum,
+            dialog: false,
+            keyword: '', // 搜索关键词
+            rowName: '', // 搜索名字
+            drag: false, // 是否正处于上下拖拽中
+            dropIndex: 0, // 拖拽指示器的 index
+            dragging: false,
+            dragTargetRow: {},
+            scrollTop: 0,
+            result: false,
+            tab: '0',
+            tabs: [
+                { label: '静态群组', value: '0' },
+                { label: '动态群组', value: '1' },
+                { label: '组合客群', value: '2' },
+                { label: 'AI模型客群', value: '3' },
+                { label: '流转客群', value: '4' }
+            ],
+            tabsChannel: [
+                { label: '客户群组', value: '0' }
+            ],
+            fields: [
+                {
+                    title: this.defaultOptions.rowTitle,
+                    key: this.rowKey,
+                    isShow: () => {
+                        // return this.tab !== '1'
+                        return true
+                    },
+                    table:{
+                        width: 150
+                    },
+                    render: (h, { row }) => {
+                        return <span
+                            class="group-name ellipsis"
+                            draggable
+                            title={ row[this.rowKey] }
+                            onDragstart={ (e) => this.handleDragStart(e, row) }
+                            onDragend = { () => { this.dragging = false } }
+                        >{ row[this.rowKey] }</span>
+                    }
+                },
+                {
+                    title: '客群类型',
+                    key: 'type',
+                    options:[
+                        { label: '静态客群', value: '99' },
+                        { label: '动态客群', value: '98' }
+                    ],
+                    isShow: () => {
+                        return this.tab === '0' || this.tab === '1'
+                    },
+                },
+                {
+                    title: '组合规则',
+                    key: 'ruleName',
+                    isShow: () => {
+                        return this.tab === '2'
+                    },
+                    table: {
+                        "show-overflow-tooltip": true
+                    },
+                    render:(h, { row })=>{
+                        return h("div", {
+                            class: {
+                                ellipsis: true
+                            },
+                            domProps: {
+                                innerHTML: row.ruleName// 这里是要渲染的数据
+                            }
+                        })
+                    }
+                },
+                {
+                    title: 'AI模型编号',
+                    key: 'modelId',
+                    isShow: () => {
+                        return this.tab === '3'
+                    },
+                },
+                {
+                    title: '成员数',
+                    key: 'custCnt',
+                    isShow: () => {
+                        return ['0', '1', '3', '4'].includes(this.tab)
+                    },
+                },
+                {
+                    title: '更新时间',
+                    key: 'updTm',
+                    isShow: () => {
+                        return true
+                    },
+                    table:{
+                        width: 180,
+                        render: (h, { row }) => {
+                            return h('p', this.tab === '3' ? row.updDt : row.updTm)
+                        }
+                    }
+                },
+                {
+                    title: '备注',
+                    key: 'dsc',
+                    tooltip: true,
+                    table:{
+                        width: 120
+                    },
+                    isShow: () => {
+                        return this.groupType === NODE_GROUP_TYPE_CUSTOMER && this.tab !== '3'
+                    }
+                },
+                {
+                    title: '操作',
+                    key: 'groupDesc',
+                    tooltip: true,
+                    isShow: this.groupType === NODE_GROUP_TYPE_LABEL,
+                    render: (h, { row }) => {
+                        return <yt-ctrl>
+                            <yt-ctrl-item onClick={ () => this.handleOpenTempSideDetail(row) }>详情</yt-ctrl-item>
+                        </yt-ctrl>
+                    }
+                }
+            ],
+            options: [
+                { label: '差', symbol: '-', value: 'minus' },
+                { label: '并', symbol: '+', value: 'union' },
+                { label: '交', symbol: '∩', value: 'intersect' }
+            ],
+            dialogTitle: '',
+            list: [],
+            hasBeenUpdate: false, // 首次打开客户清单页面需要更新数量
+            customerFields:[],
+            needTabs: [],
+            resultTableSearchParams:{},
+            isSearching: false
+        }
+    },
+    filters: {
+        symbol (value, options) {
+            let option = options.find(option => option.value === value)
+            return option ? option.symbol : ''
+        }
+    },
+    computed: {
+        ...mapState(['config']),
+        ...mapGetters(['libId']),
+        customerApi () {
+            if(this.groupType === NODE_GROUP_TYPE_CUSTOMER) {
+                if(this.readonly) {
+                    return getActCstNodeGroupByPage
+                }else{
+                    return arithmeticNew
+                }
+            } else if (this.groupType === NODE_GROUP_TYPE_APP_ACT) {
+                return arithmeticNew
+            } else if (this.groupType === NODE_CUSTOMER_TYPE) {
+                return arithmeticNew
+            } else {
+                return getCustomerDetailListByLabelFunc
+            }
+        },
+        rowKey () {
+            return this._defaultOptions.rowKey
+        },
+        _api () {
+            switch(this.tab){
+                case '0':
+                    return this.api
+                // 组合客群
+                case '2':
+                    return queryAssemblyGroupData
+                // AI模型客群
+                case '3':
+                    return getAIGroupList
+                default:
+                    return this.api
+            }
+        },
+        _params () {
+            return this.tab === '0' ? { scene: SCENE_USE } : { loadStat: '2' }
+        },
+        _defaultOptions () {
+            switch (this.tab) {
+                case '0':
+                case '1':
+                    return this.defaultOptions
+                // 组合客群
+                case '2':
+                    return {
+                        btnText: '客群选择',
+                        btnReadOnlyText: '查看组合客群列表',
+                        linkText: '前往组合客群群组管理',
+                        linkPath: '/customer/app-act',
+                        linkTip: '前往群组管理会取消此次编辑，确定要跳转吗？',
+                        inputPlaceholderText: '请输入组合客群名称',
+                        cardTitleText: '组合客群列表',
+                        customTitleText: '自定义客户群',
+                        dragText: '请将左侧群组名称拖拽到区域',
+                        rowKey: 'name',
+                        rowTitle: '组合客群名称'
+                    }
+                // AI客群
+                case '3':
+                    return {
+                        btnText: '客群选择',
+                        btnReadOnlyText: '查看AI客群列表',
+                        linkText: '前往AI客群群组管理',
+                        linkPath: '/customer/app-act',
+                        linkTip: '前往群组管理会取消此次编辑，确定要跳转吗？',
+                        inputPlaceholderText: '请输入AI模型名称或编码',
+                        cardTitleText: 'AI模型客群列表',
+                        customTitleText: '自定义客户群',
+                        dragText: '请将左侧群组名称拖拽到区域',
+                        rowKey: 'modelName',
+                        rowTitle: 'AI模型名称'
+                    }
+                default:
+                    return this.defaultOptions
+            }
+
+        },
+        maxGroupSize () {
+            let { config } = this
+            if (!config || !config.MAX_CUSTOMER_GROUP_SIZE) {
+                return 10
+            } else {
+                return ~~this.config.MAX_CUSTOMER_GROUP_SIZE
+            }
+        },
+        dropIndicatorTop () {
+            // 第几行  * 40 - 滚动高度 - 表头 + 表头之间的间距
+            return this.dropIndex * 40 - this.scrollTop + 40 + 8
+        }
+    },
+    watch: {
+        groupType: {
+            handler (val) {
+                if (val === 1 && !this.unipueCustomer) {
+                    this.needTabs = [
+                        { label: '客户群组', value: '0' },
+                        { label: 'APP活动群组', value: '1' }
+                    ]
+                } else {
+                    this.needTabs = [
+                        // { label: '客户群组', value: '0' }
+                    ]
+                }
+            },
+            immediate: true
+        },
+        // 参照其它页面名称查询，输入长度不能超出30
+        keyword(newValue,oldValue){
+            if(newValue.length>30){
+                this.keyword = oldValue
+                return;
+            }
+        }
+    },
+    methods: {
+        async initFields () {
+            const libId = this.getLibId ? this.getLibId() : this.libId
+            const res = await qryColumns(libId)
+            let data = res.data?.map(item => {
+                return {
+                    ...item,
+                    title: item.labelName,
+                    key: item.labelCode,
+                    type: item.showType
+                }
+            })
+            this.customerFields = await getFiledsWithOptions(data, this)
+        },
+        handleTabChange (item) {
+            this.tab = item.value
+            this.fields[0].title = this._defaultOptions.rowTitle
+            this.rowName = ''
+            this.keyword = ''
+            this.reRun = false
+            this.$nextTick(() => {
+                this.reRun = true
+                this.$nextTick(() => {
+                    this.$refs.table.getData()
+                })
+            })
+        },
+        handleOpen () {
+            // 渠道防打扰
+            if (this.source === 'avoid-disturb-cst-tange' && !this.getLibId()) {
+                this.$info('请先选择标签库')
+                return
+            }
+            this.$emit('clear')
+            this.initFields()
+            if (this.groupType == 3) {
+                this.tab = '1'
+            }
+            this.needTabs = this.isChannelAvoid ? this.tabsChannel : this.tabs
+            // 配置管理菜单中新增配置项控制AI模型客群是否展示
+            if (this.config?.AI_CUSTOMER_HIDDEN) {
+                this.needTabs = this.needTabs.filter((i) => i.value !== '3')
+            }
+            // 静态名单组件不展示流转客群
+            if (this.source === 'node-side-customer') {
+                this.needTabs = this.needTabs.filter((i) => i.value !== '4')
+            }
+            this.dialog = true
+            this.result = false
+            this.keyword = ''
+            this.rowName = ''
+            this.list = this.$util.copy(this.value)
+            this.$nextTick(() => {
+                this.$refs.table.refresh()
+            })
+        },
+        handleReachReset() {
+            this.$emit('reachReset')
+        },
+        handleOpenRead (params) {
+            let { dialogTitle } = params
+            this.dialogTitle = dialogTitle || ''
+            this.initFields()
+            this.dialog = true
+            this.result = true
+            this.hasBeenUpdate = false
+            this.list = this.$util.copy(this.value)
+            this.$nextTick(() => {
+                this.$refs.result.refresh(true)
+            })
+        },
+        handleClose () {
+            this.dialogTitle = ''
+            if (this.$refs.sideTemp) {
+                this.$refs.sideTemp.close()
+            }
+        },
+        handleSearch () {
+            this.rowName = this.keyword
+            this.$refs.table.refresh(true)
+        },
+        funcBeforeSearch (params) {
+            if(this.groupType === NODE_GROUP_TYPE_CUSTOMER && this.readonly) {
+                params.search = {
+                    actId: this.id || this.cstId,
+                    nodeId: this.nodeId,
+                    jobId: this.getCurrentJobId()
+                }
+            }else {
+                if(this.list.find(x=>x.isCombine)){
+                    params.search = getCustomerGroupFunc(this.list,'idCopy')
+                }else{
+                    params.search = getCustomerGroupFunc(this.list)
+                }
+            }
+            if (this.groupType === NODE_CUSTOMER_TYPE) {
+                params.search = params.search
+                params.libId = this.getLibId()
+            }
+            params.libId = this.getLibId()
+            if(params) this.resultTableSearchParams = _.cloneDeep(params)
+            return params
+        },
+        beforeSearch (params) {
+            params.search[this.rowKey] = this.rowName
+            params.search['libId'] = this.getLibId()
+            if (this.tab === '0') {
+                params.search['type'] = '99'
+            } else if (this.tab === '1') {
+                params.search['type'] = '98'
+            } else if (this.tab === '2') {
+                params.search['type'] = '66'
+            } else if (this.tab === '4') {
+                params.search['type'] = '95'
+            }
+            return params
+        },
+        handleLink () {
+            this.$confirm(this.defaultOptions.linkTip, '提示', { type: 'warning' }).then(() => {
+                this.$emit('closeDialog')
+                this.dialog = false
+                this.$router.push({
+                    name: this._defaultOptions.linkPathName,
+                    query: {}
+                })
+            })
+        },
+        handleDragStart (e, row) {
+            let { maxGroupSize } = this
+            if (this.list.length >= maxGroupSize) {
+                e.preventDefault()
+                this.$info(`组合最大允许 ${maxGroupSize} 个`)
+                return
+            }
+            if(this.tab === '2'){
+                row.groupType = 'combination' // 组合客群加上标志
+
+            }
+            this.dragTargetRow = row
+        },
+        handleDragOver (e, item, index) {
+            if (this.drag || !this.dragTargetRow) return
+            e.preventDefault()
+            let dropIndex = index
+            if (e.offsetY < 24) {
+                dropIndex = index
+            } else {
+                dropIndex = index + 1
+            }
+            if (dropIndex < 0) {
+                dropIndex = 0
+            }
+            this.dropIndex = dropIndex
+            this.dragging = true
+        },
+        handleDragEnd (e) {
+            preventAndStopEvent(e)
+            if (this.drag || !this.dragTargetRow) return
+            if (this.dragTargetRow.type === '95' && this.list && this.list.length
+                || this.list && this.list.length && this.list[0].type === '95'
+            ) {
+                this.$error('单个名单组件内，流转客群不可进行组合处理')
+                return
+            }
+
+            let row = {
+                symbol: '',
+                left: false,
+                id: this.dragTargetRow.pkId || `AI_${this.dragTargetRow.modelId}`,
+                idCopy: this.dragTargetRow.pkId || `AI_${this.dragTargetRow.modelId}`,
+                [this.rowKey]: this.dragTargetRow[this.rowKey],
+                right: false,
+                isCombine: false, // 是否是组合客群
+                type: this.dragTargetRow.type,
+                isAI: this.dragTargetRow.modelId ? true : false, // 是否为AI客群
+            }
+            // 针对组合客群时规则取法变化
+            if(this.dragTargetRow?.groupType && this.dragTargetRow?.groupType==='combination'){
+                row.idCopy =  `(${this.dragTargetRow.rule})`
+                row.isCombine = true // 是否有组合区分
+            }
+            this.list.splice(this.dropIndex, 0, row)
+            this.dragTargetRow = {}
+        },
+        handleEnter () {
+            if (this.drag || !this.dragTargetRow) return
+            this.dragging = true
+            this.dropIndex = this.list.length
+        },
+        handleScroll (e) {
+            this.scrollTop = e.target.scrollTop
+        },
+        handleDelete (index) {
+            this.list.splice(index, 1)
+        },
+        handleTop (index) {
+            let list = this.list;
+            [list[0], list[index]] = [list[index], list[0]]
+            list.splice()
+        },
+        handleBottom (index) {
+            let list = this.list;
+            [list[list.length - 1], list[index]] = [list[index], list[list.length - 1]]
+            list.splice()
+        },
+        getReuslt () {
+            if (!this.list.length) {
+                this.$info('请选择一个集合')
+                return
+            }
+            if (!this.checkList()) {
+                return
+            }
+            if (this.list.length !== 1) {
+                if (this.list.every(item => item.id === this.list[0].id)) {
+                    this.$info('同一个集合不能进行运算')
+                    return
+                }
+            }
+            this.isSearching = true
+            this.result = true
+            setTimeout(() => {
+                this.$refs.result.refresh(true)
+            }, 300)
+        },
+        refreshTableResult(){
+            let params = this.funcBeforeSearch(this.resultTableSearchParams)
+            return new Promise((resolve,reject)=>{
+                let api = this.customerApi
+                api(params).then(res=>{
+                    resolve(res)
+                }).catch(err=> reject(err))
+            })
+        },
+        handleBack () {
+            this.result = false
+        },
+        checkList () {
+            let { list } = this
+            let checkSymbol = list.every((item, i) => (i === 0 ? true : item.symbol))
+            if (!checkSymbol) {
+                this.$info('请选择集合')
+                return false
+            }
+            let leftCount = 0
+            let rightCount = 0
+            let arr = []
+            // 把所有的括号整理出来
+            list.forEach(item => {
+                leftCount += item.left
+                rightCount += item.right
+                for (let i = 0; i < item.left; i++) {
+                    arr.push('(')
+                }
+                for (let i = 0; i < item.right; i++) {
+                    arr.push(')')
+                }
+            })
+            if (leftCount !== rightCount) {
+                this.$info('请确认括号')
+                return false
+            }
+            // 遇到 ( +1，遇到 ) -1，遇到 -1 必错，结束后不是 0 必错
+            let stackIndex = 0
+            for (let i = 0; i < arr.length; i++) {
+                let item = arr[i]
+                if (item === '(') {
+                    stackIndex += 1
+                } else {
+                    stackIndex -= 1
+                }
+                if (stackIndex < 0) {
+                    this.$info('请确认括号')
+                    return false
+                }
+            }
+            if (stackIndex !== 0) {
+                this.$info('请确认括号')
+                return false
+            }
+            return true
+        },
+        async handleConfirm () {
+            if (this.isSearching) {
+                this.$info('正在查询中')
+                return
+            }
+            if (!this.checkList()) {
+                return
+            }
+            if (this.list.length !== 1) {
+                if (this.list.every(item => item.id === this.list[0].id)) {
+                    this.$info('同一个集合不能进行运算')
+                    return
+                }
+            }
+            if(!this.isChannelAvoid && !['business-add', 'resource-side-reach-customer'].includes(this.source)) {
+                const graph = this.getGraph()
+                const currentNodeForm = graph.findById(this.nodeId)?.getModel()?.form || {}
+                currentNodeForm.branchStra = 0
+                currentNodeForm.groupIsType = 0
+            }
+            let total = 0;
+            if(this.result){
+                // 第二个页面直接取页面上的
+                total = this.$refs.result.total
+            }else{
+                // 第一个页面需调接口获取数量
+                let numRes = await this.refreshTableResult();
+                if(!numRes.success){
+                    this.$message.warning(numRes.errorMsg)
+                    return;
+                }
+                total = numRes.data.total
+            }
+
+            this.dialog = false
+            this.$emit('input', this.$util.copy(this.list))
+            this.$emit('groupMember',total)
+            setTimeout(() => {
+                this.result = false
+            }, 300)
+        },
+        viewDetail (item) {
+            if (['node-side-customer', 'business-add', 'resource-side-reach-customer'].includes(this.source) || (this.source === 'node-side-split-cst-branch' && this.readonly)) {
+                return
+            }
+            if (this.groupType === NODE_GROUP_TYPE_LABEL) {
+                this.$refs.temp.open(item.templateName, item.id)
+                return
+            }
+            this.$refs.detail.open({ nodeId: this.nodeId, actId: this.id, groupId: item.id, groupType: [NODE_GROUP_TYPE_CUSTOMER, this.groupNumber, this.cstId, this.branchStra], name: item.groupName, readonly: true })
+        },
+        handleOpenTempSideDetail (item) {
+            this.$refs.sideTemp.open(item.name || item.groupName, item.pkId)
+        },
+        handleLoad() {
+            this.isSearching = false;
+        },
+        handleUpdateTotal(total) {
+            if (this.hasBeenUpdate || this.readonly) return
+            this.hasBeenUpdate = true
+            this.$emit('total-change', total)
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.node-select-customer-group,
+.customer-group {
+    -webkit-user-select: none;
+    .group-info {
+        padding: 0 20px;
+        line-height: @space3;
+        margin-bottom: @space;
+        overflow: hidden;
+        div {
+            float: left;
+        }
+    }
+    .group-info-item {
+        margin-right: @space;
+        flex-shrink: 0;
+    }
+    .group-info-symbol {
+        color: @primary;
+        font-weight: bold;
+    }
+    .group-info-left,
+    .group-info-right {
+        color: @primary;
+    }
+    .group-info-name {
+        &:hover {
+            // text-decoration: underline;
+        }
+    }
+    .resource-state-customer {
+        background-color: #f8f9fb;
+        border-radius: 4px;
+    }
+}
+.customer-group {
+    display: flex;
+    transform: translate(0);
+    transition: 300ms;
+    opacity: 1;
+    &.hide {
+        transform: translateX(-50%);
+        opacity: 0;
+    }
+    th {
+        color: #666;
+        background-color: #f8f8f8;
+    }
+    th, td {
+        height: 40px;
+        padding: 0;
+    }
+    .yt-table {
+        margin-top: @space2;
+    }
+    .group-left,
+    .group-right {
+        width: 50%;
+    }
+    .group-left {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+        .yt-table {
+            margin-top: 0;
+        }
+        .yt-table-info {
+            opacity: 0;
+            user-select: none;
+        }
+        .yt-table-footer {
+            padding: 0 @space;
+        }
+    }
+    .group-right {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        border-left: none;
+        .yt-card-body {
+            background-color: #f8f8f8;
+            display: flex;
+            flex-direction: column;
+        }
+    }
+    .yt-card-header {
+        padding-right: @space;
+    }
+    .yt-card-body {
+        height: 400px;
+        overflow: hidden;
+    }
+    .group-name {
+        max-width: 100%;
+        line-height: @space3;
+        padding: 0 @space2;
+        border-radius: @space2;
+        border: 1px solid transparent;
+        cursor: pointer;
+        display: inline-block;
+        user-select: none;
+        &:hover {
+            color: #1890FF;
+            border-color: @primary;
+            background-color: #E6F7FF;
+        }
+    }
+    .group-item {
+        padding: 2px 0;
+        display: flex;
+        align-items: center;
+    }
+    .group-input {
+        flex: 1;
+    }
+    .group-number {
+        width: 90px;
+        .el-input__inner {
+            padding-left: @space;
+            padding-right: 40px;
+        }
+    }
+    .group-symbol {
+        width: 100px;
+        min-height: 1px;
+    }
+    .group-ctrl {
+        width: 102px;
+        flex-shrink: 0;
+    }
+    .group-search {
+        float: right;
+    }
+    .group-item-ghost {
+        opacity: .5;
+    }
+    .group-gap + .group-gap {
+        margin-left: @space;
+    }
+    .group-header {
+        height: 40px;
+        line-height: 40px;
+        display: flex;
+        background-color: #fff;
+    }
+    .group-header-item {
+        padding-left: @space;
+    }
+    .group-header-item + .group-header-item {
+        height: 100%;
+    }
+    .group-tip {
+        top: 30%;
+        left: 50%;
+        color: #999;
+        position: absolute;
+        transform: translateX(-50%);
+        user-select: none;
+        pointer-events: none;
+    }
+    .group-list {
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+    .group-drag {
+        flex: 1;
+        padding: 0 @space;
+        margin-top: @space;
+        border: 1px dashed @primary;
+        overflow: auto;
+        background-color: rgba(255, 255, 255, .5);
+    }
+    .group-info {
+        min-height: 36px;
+        line-height: 34px;
+        border: 1px solid #FF8001;
+        border-radius: 4px;
+        background-color: #edf0f8;
+    }
+    .node-temp-side {
+        top: -5px;
+        left: -5px;
+        height: 100%;
+        box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
+        z-index: 10;
+        position: absolute;
+        transform: translateX(120%);
+        &.show {
+            transform: translateX(0);
+        }
+        .el-form-item {
+            margin-bottom: @space;
+        }
+        .yt-card-body {
+            background-color: #fff;
+            overflow: auto;
+        }
+    }
+    .comp-missing-list {
+        height: unset;
+        min-height: 144px;
+    }
+}
+.node-select-customer-group-dialog {
+    .yt-dialog-body {
+        overflow: auto;
+    }
+    // 接入主应用后样式错乱
+    .el-input-number.is-controls-right .el-input-number__decrease, .el-input-number.is-controls-right .el-input-number__increase {
+        line-height: 14px !important;
+    }
+}
+.customer-list {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 469px;
+    z-index: 1;
+    opacity: .5;
+    background-color: #fff;
+    transform: translateX(100%);
+    position: absolute;
+    transition: 500ms;
+    &.active {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+</style>