axwen-test31 2.0.0

package/src/views/customer/computed-tags/edit-modal-new.vue

@@ -0,0 +1,512 @@
+<template>
+    <div>
+        <yt-button v-if="!readonly" type="primary" @click="openLableDialog">设置规则</yt-button>
+        <div class="tags-desc" v-if="showDefineText && showDefineText !==' '" v-html="showDefineText"></div>
+        <div class="tags-desc-2-wrapper" v-if="selectLabelShow.length">
+            <div class="tags-desc-2"  v-for="(item, idx) in this.selectLabel" :key="idx">
+                <span>{{ item.optionName }}</span>,
+                <span>[</span>
+                <span>{{ `${item.optionMin},${item.optionMax}` }}</span>
+                <span v-if="idx === 0">]</span>
+                <span v-else>)</span>
+            </div>
+        </div>
+        
+        <yt-dialog confirmText="确定" v-model="visible" @confirm="handleConfirm" append-to-body :width="1000" :title="title"
+            class="add-computed-tags-modal">
+            <div class="tags-desc" v-html="renderText"></div>
+            <div class="body">
+                <div class="left-tree">
+                    <yt-tree ref="originTree" v-loading="loadingTree" nodeKey="pkId"
+                        :default-expanded-keys="['cstinfo']" :treeData="treeData" :hasFilter="true"
+                        :default-expand-all="false" :renderContent="renderTagItem"></yt-tree>
+                </div>
+                <div class="right-editor">
+                    <div class="actions">
+                        <yt-button type="primary" @click="addGroup">+ (组)</yt-button>
+                        <div class="const-tag" draggable="true" @dragstart="dragConstTag">
+                            <img alt="icon" class="icon" src="@/assets/images/icon-svg/biaoqianxin.svg">
+                            <span>常量</span>
+                        </div>
+                    </div>
+                    <div class="label-header">
+                        <span>运算关系</span>
+                        <span>标签名称</span>
+                        <span>操作</span>
+                    </div>
+                    <div class="group-list">
+                        <div v-for="(group, gIndex) in groupList" :key="gIndex" class="group">
+                            <div @click="deleteGroup(gIndex)" class="delete-group">删除</div>
+                            <div v-for="(tag, index) in group.tags" :key="tag.id" class="group-item">
+                                <span v-if="index === 0" class="operator">(组)</span>
+                                <span v-else class="operator">
+                                    <el-select v-model="tag.operator">
+                                        <el-option v-for="operator in operatorList" :key="operator" :label="operator"
+                                            :value="operator"></el-option>
+                                    </el-select>
+                                </span>
+                                <span class="name" v-if="tag.constant"><el-input-number style="width: 120px"
+                                        placeholder="请输入数值" v-model="tag.label" controls-position="right"
+                                        @blur="() => { typeof tag.label === 'number' || (tag.label = 0) }"></el-input-number></span>
+                                <span v-else class="name"> <img class="icon"
+                                        src="@/assets/images/icon-svg/biaoqianxin.svg" alt="icon">{{ tag.label }}</span>
+                                <span class="delete" @click="deleteTag(group, gIndex, index)">
+                                    <el-icon class="el-icon-delete"></el-icon>
+                                </span>
+                            </div>
+                            <div @drop="handleDrop($event, group)" @dragover="handleDragOver" class="placeholder">
+                                请将标签拖入此区域</div>
+                            <el-radio-group size="small" v-if="gIndex > 0" v-model="group.op">
+                                <el-radio-button v-for="op in operatorList" :key="op" :label="op"></el-radio-button>
+                            </el-radio-group>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </yt-dialog>
+        <confirm-modal @succ="handleRefesh" @prev="show" ref="confirm"></confirm-modal>
+    </div>
+</template>
+
+<script>
+import * as service from '@/api/customer/customer-tags'
+import ConfirmModal from './confirm-modal'
+import { preventAndStopEvent } from "@/utils/dom";
+
+export default {
+    components: {
+        ConfirmModal
+    },
+    // readonly用来判断是否详情页
+    props: ['labelType','defineName','mode','libId','params','form','selectLabel', 'readonly'],
+    data() {
+        return {
+            visible: false,
+            loadingTree: false,
+            treeData: [],
+            renderContent: [],
+            currentRow: {},
+            operatorList: ['+', '-', '*', '/'],
+            groupList: [
+                {
+                    op: '',
+                    tags: []
+                }
+            ],
+            tagsMap: {}, // 存一个map，节省从原始结构解码出group结构的时间
+            tag:{},
+            showDefineText:null,
+            selectLabelShow: []
+        }
+    },
+    watch:{
+        defineName(val) {
+            this.showDefineText = val || ''
+        },
+        selectLabel(val) {
+            this.selectLabelShow = val || []
+        }
+    },
+    computed: {
+        title() {
+            let action = ''
+            switch (this.mode) {
+                case 'add':
+                    action = '添加'
+                    break
+                case 'edit':
+                    action = '编辑'
+                    break
+                case 'copy':
+                    action = '复制'
+                    break
+                default:
+                    break
+            }
+            return action + '衍生标签'
+        },
+        renderText() {
+            let groupText = ''
+            this.groupList.forEach((group, index) => {
+                const tags = group.tags
+                let tagsText = ''
+                tags.forEach((tag, index) => {
+                    tagsText += (tag.operator && index > 0 ? `<span class="op">${tag.operator}</span>` : ' ') + `<span class="label">${tag.label}</span>`
+                })
+                tagsText = tagsText ? `(${tagsText})` : ''
+                groupText += (group.op && index > 0 ? `<span class="op">${group.op}</span>` : ' ') + tagsText
+            })
+            return groupText
+        }
+    },
+    mounted() {
+        this.showDefineText = this.defineName
+    },
+    methods: {
+        handleConfirm() {
+            const define = this.cleanData()
+            this.hide()
+            this.tag = {
+                ...this.currentRow,
+                define,
+                groupList: this.groupList,
+                defineText: this.renderText,
+            }
+            this.showDefineText = this.renderText
+            this.$emit('getLabelRule', this.tag,this.mode)
+        },
+        handleRefesh() {
+            this.reset()
+            this.$parent.$refs.table.refresh()
+        },
+        cleanData() {
+            let groupText = ''
+            this.groupList.forEach(group => {
+                const tags = group.tags
+                let tagsText = ''
+                tags.forEach(tag => {
+                    tagsText += (tag.operator || '') + (tag.constant ? tag.label : tag.condCode)
+                })
+                tagsText = tagsText ? `(${tagsText})` : ''
+                groupText += (group.op || '') + tagsText
+            })
+            return groupText
+        },
+        addGroup() {
+            this.groupList.push({
+                op: '+',
+                tags: []
+            })
+        },
+        deleteGroup(index) {
+            if (this.groupList.length <= 1) {
+                return
+            }
+            this.groupList.splice(index, 1)
+        },
+        deleteTag(group, gIndex, index) {
+            group.tags.splice(index, 1)
+            if (this.groupList.length > 1 && group.tags.length === 0) {
+                this.groupList.splice(gIndex, 1)
+            }
+        },
+        openLableDialog() {
+            this.show(this.params)
+        },
+        show(data) {
+            sessionStorage.setItem('getLabelForm', JSON.stringify(this.form))
+            sessionStorage.setItem('modeLabelType', JSON.stringify(this.mode))
+            sessionStorage.setItem('noUpdateSave', JSON.stringify(data))  // 不更新操作进行保存的操作用的data
+            let tempLabelText = sessionStorage.getItem('tempLabelText') || ''
+            this.$emit('handleModel', false)
+            let query = {
+                autoload: false,
+                isPro: '',
+                // 是否简洁按钮
+                simple: false,
+                // 是否是活动目标
+                target: this.target,
+                labelShow: false,
+                tempLabelText: tempLabelText ? JSON.parse(tempLabelText) : tempLabelText,
+                jumpType: 'tagCustomer',
+                config: '',
+                nodeId: '',
+                labelType: this.labelType,
+                hasDialog: 'computed-tags',
+                libId: this.libId
+            }
+            this.$router.push({
+                name: 'sub-app/mp-cm/dialogInsetLabelSide',
+                query: {
+                    data: JSON.stringify(query)
+                }
+            })
+        },
+        hide() {
+            this.visible = false
+        },
+        decodeGroupList(define) {
+            if (!define) {
+                return
+            }
+            const regx = /\(([^(]*)\)/g
+            const groupList = define.match(regx)
+            const groupOpList = (define.match(/\)(.)\(/g) || []).map(item => item[1])
+
+            let result = []
+            groupList.forEach((group, index) => {
+                const cleanStr = group.slice(1, -1)
+                const tags = cleanStr.split(/[\+|\-|\*|\/]/)
+                const tagOps = cleanStr.match(/[\+|\-|\*|\/]/g)
+
+                let tagList = []
+                tags.forEach((code, tagIndex) => {
+                    if (!code) return
+                    let tag = this.tagsMap[code]
+                    if (!!+code) {
+                        tag = {
+                            constant: true,
+                            label: +code
+                        }
+                    }
+                    if (tagIndex > 0) {
+                        tag.operator = tagOps[tagIndex - 1]
+                    } else {
+                        tag.operator = ''
+                    }
+                    tagList.push(tag)
+                })
+
+                result.push({
+                    tags: tagList,
+                    op: index > 0 ? groupOpList[index - 1] : ''
+                })
+            })
+            return result
+        },
+        reset() {
+            this.currentRow = {}
+            this.groupList = [
+                {
+                    op: '',
+                    tags: []
+                }
+            ]
+        },
+        handleDragOver(e) {
+            e.preventDefault()
+
+        },
+        handleDrop(e, item) {
+            preventAndStopEvent(e)
+            const data = JSON.parse(e.dataTransfer.getData('text'))
+            if (item.tags.length > 0) {
+                data.operator = '+'
+            }
+            item.tags.push(data)
+        },
+        dragStart(data, e) {
+            e.dataTransfer.setData('text/plain', JSON.stringify(data))
+        },
+        dragConstTag(e) {
+            const data = {
+                label: '',
+                constant: true
+            }
+            e.dataTransfer.setData('text/plain', JSON.stringify(data))
+        },
+        renderTagItem(h, { node, data, store }) {
+            const domNode = <span class={['explore-tree-node', data.children.length === 0 ? 'drag-cursor' : '']}
+                domProps={{ draggable: node.isLeaf }}
+                onDragstart={(e) => { this.dragStart(data, e) }}>
+                <span class="'ivu-tree-title" style="display: flex; align-items: center;">
+                    {
+                        (data.children.length === 0 && data.dicCode !== null)
+                            ? <el-tooltip content="查看标签定义" placement="top-start" open-delay={300}>
+                                <img alt="icon" src={require(`@/assets/images/icon-svg/biaoqianxin.svg`)} style="margin-right: 4px; width: 16px; height: 16px; cursor: pointer;" onClick={() => this.showTagDetail(data)} />
+                            </el-tooltip>
+                            : <img alt="icon" src={require(`@/assets/images/icon-svg/wenjianjiaguanbi.svg`)} style="margin-right: 4px; width: 16px; height: 16px;" />
+                    }
+                    {(data.label.length > 10 && node.isLeaf) ? data.label.slice(0, 10) + '...' : data.label}
+                </span>
+            </span>
+            const domLeaf = data.label.length > 10 // 过长处理tooltips
+                ? <el-tooltip content={data.label} placement="top-start" open-delay={300}>
+                    {domNode}
+                </el-tooltip>
+                : domNode
+            return domLeaf
+        },
+        showTagDetail(data) {
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.add-computed-tags-modal {
+    user-select: none;
+
+    .el-dialog__body {
+        padding: 0 20px;
+
+        .yt-dialog-body {
+            padding: 8px 0;
+        }
+        .tags-desc {
+            background: #eee;
+            padding: 8px;
+            line-height: 20px;
+            max-height: 72px;
+            min-height: 36px;
+            overflow: auto;
+
+            .op {
+                color: @primary;
+                margin: 0 12px;
+                font-weight: 600;
+            }
+
+            .label {
+                color: #58ab12;
+                display: inline-block;
+            }
+        }
+
+        .body {
+            height: 480px;
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            width: 100%;
+
+            .left-tree {
+                height: 100%;
+                flex-shrink: 0;
+                // width: 40%;
+                border: 1px solid #ddd;
+                padding: 8px;
+
+                .yt-tree-content {
+                    position: relative;
+
+                    .expand-tree {
+                        margin-top: 0;
+                        position: absolute;
+                        bottom: 0;
+                        top: 44px;
+                        overflow: auto;
+                        width: 100%;
+                    }
+                }
+            }
+
+            .right-editor {
+                flex-grow: 1;
+                height: 100%;
+                margin-left: 24px;
+                position: relative;
+
+                .actions {
+                    display: flex;
+                    align-items: center;
+
+                    .const-tag {
+                        border: 1px solid #ddd;
+                        height: 24px;
+                        border-radius: 12px;
+                        padding: 0 16px;
+                        line-height: 24px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        margin-left: 24px;
+                        cursor: move;
+
+                        .icon {
+                            width: 16px;
+                            height: 16px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .label-header {
+                    width: 100%;
+                    display: flex;
+                    justify-content: space-between;
+                    padding: 8px 12px;
+                }
+
+                .group-list {
+                    width: 100%;
+                    bottom: 0;
+                    overflow: auto;
+                    position: absolute;
+                    top: 64px;
+                    bottom: 0;
+                    overflow: auto;
+
+                    .group {
+                        border: 1px solid #ddd;
+                        padding: 8px;
+                        position: relative;
+                        margin-top: 45px;
+
+                        .delete-group {
+                            text-align: right;
+                            color: @primary;
+                            cursor: pointer;
+                            padding: 0px 12px;
+                            position: absolute;
+                            right: 0;
+                            top: -34px;
+                            line-height: 24px;
+                            height: 24px;
+                        }
+
+                        .group-item {
+                            width: 100%;
+                            height: 48px;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            background: #eee;
+                            margin-bottom: 8px;
+                            padding: 0 12px;
+
+                            .operator {
+                                width: 80px;
+                                flex-shrink: 0;
+                            }
+
+                            .name {
+                                text-align: center;
+                                margin-left: 16px;
+                                display: flex;
+                                align-items: center;
+
+                                .icon {
+                                    width: 16px;
+                                    height: 16px;
+                                    margin-right: 4px;
+                                }
+
+                                flex-grow: 1;
+                            }
+
+                            .delete {
+                                flex-shrink: 0;
+                                color: @primary;
+                                font-size: 18px;
+                                cursor: pointer;
+                            }
+                        }
+
+                        .placeholder {
+                            border: 1px dashed @primary;
+                            height: 48px;
+                            background: #eee;
+                            color: @primary;
+                            text-align: center;
+                            line-height: 48px;
+                        }
+
+                        .el-radio-group {
+                            position: absolute;
+                            left: 0;
+                            top: -40px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.tags-desc-2-wrapper {
+    max-height: 240px;
+    overflow: auto;
+}
+</style>