admin-govern/src/views/govern/device/planData/components/treeTransfers.vue

<template>
    <div class="transferTreeBox" v-if="leftData.length!=0||rightData.length!=0">
        <!-- 左侧待选内容 -->
        <div class="SelectBox">
            <div class="boxTitle" @click="clickAllSelect">全选 &gt;</div>
            <div class="boxCenter">
                <el-tree
                    ref="leftTree"
                    default-expand-all
                    :data="leftData"
                    :props="defaultProps"
                    show-checkbox
                    node-key="id"
                />
            </div>
        </div>
        <!-- 中间穿梭按钮 -->
        <div class="transferBtn">
            <div class="pickBtn" @click="towardsRight">&gt;&gt;</div>
            <div class="pickBtn" @click="towardsLeft">&lt;&lt;</div>
        </div>
        <!-- 右侧已选内容 -->
        <div class="SelectBox">
            <div class="boxTitle" @click="clickCancelAllSelect">&lt; 取消全选</div>
            <div class="boxCenter">
                <el-tree
                    ref="rightTree"
                    default-expand-all
                    :data="rightData"
                    :props="defaultProps"
                    show-checkbox
                    node-key="id"
                />
            </div>
        </div>
    </div>
</template>

<script>
// const mockTreeData = [
//     {
//         id: '1',
//         label: '1',
//         children: [
//             {
//                 id: '1-1',
//                 label: '1-1',
//                 pid: '1'
//             },
//             {
//                 id: '1-2',
//                 label: '1-2',
//                 pid: '1'
//             },
//             {
//                 id: '1-3',
//                 label: '1-3',
//                 pid: '1'
//             }
//         ]
//     },
//     {
//         id: '2',
//         label: '2',
//         children: [
//             {
//                 id: '2-1',
//                 label: '2-1',
//                 pid: '2'
//             },
//             {
//                 id: '2-2',
//                 label: '2-2',
//                 pid: '2'
//             },
//             {
//                 id: '2-3',
//                 label: '2-3',
//                 pid: '2'
//             }
//         ]
//     },
//     {
//         id: '3',
//         label: '3',
//         children: [
//             {
//                 id: '3-1',
//                 label: '3-1',
//                 pid: '3'
//             },
//             {
//                 id: '3-2',
//                 label: '3-2',
//                 pid: '3'
//             },
//             {
//                 id: '3-3',
//                 label: '3-3',
//                 pid: '3'
//             }
//         ]
//     }
// ]
export default {
    layout: 'login',
    props: ['fromData', 'toData'],
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            leftData: [],
            rightData: []
        }
    },
    watch: {
        fromData(val, oldVal) {
            if (val) {
                this.leftData = val
            }
        },
        toData(val, oldVal) {
            if (val) {
                this.rightData = val
                this.$emit('getData', this.rightData)
            }
        }
    },
    mounted() {
        this.$forceUpdate()
        this.$emit('getData', this.rightData)
    },
    methods: {
        // 点击向右穿梭
        towardsRight() {
            // (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，
            // 1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
            this.$nextTick(() => {
                const checkedNodes = this.$refs.leftTree.getCheckedNodes(false, true) // 包含半选
                const checkedKeys = this.$refs.leftTree.getCheckedKeys(false)
                const copyNodes = JSON.parse(JSON.stringify(checkedNodes))
                copyNodes.forEach(x => {
                    x.children = []
                    if (!this.$refs.rightTree.getNode(x.id)) {
                        this.$refs.rightTree.append(x, x.pid)
                    }
                })
                checkedKeys.forEach(x => {
                    this.$refs.leftTree.remove(x)
                })
                this.afterToward()
                this.$forceUpdate()
            })
        },
        // 点击向左穿梭
        towardsLeft() {
            this.$nextTick(() => {
                const checkedNodes = this.$refs.rightTree.getCheckedNodes(false, true) // 包含半选
                const checkedKeys = this.$refs.rightTree.getCheckedKeys(false)
                const copyNodes = JSON.parse(JSON.stringify(checkedNodes))
                copyNodes.forEach(x => {
                    x.children = []
                    if (!this.$refs.leftTree.getNode(x.id)) {
                        this.$refs.leftTree.append(x, x.pid)
                    }
                })
                checkedKeys.forEach(x => {
                    this.$refs.rightTree.remove(x)
                })

                this.$forceUpdate()
                this.afterToward()
            })
            console.log(this.leftData,"++++++++++176", this.$refs.rightTree);
        },
        // 点击全选
        clickAllSelect() {
            this.$refs.leftTree.setCheckedNodes(this.leftData)
            this.towardsRight()
        },
        // 点击取消全选
        clickCancelAllSelect() {
            this.$refs.rightTree.setCheckedNodes(this.rightData)
            this.towardsLeft()
        },
        // 数据穿梭后
        afterToward() {
            this.$refs.leftTree.setCheckedKeys([])
            this.$refs.rightTree.setCheckedKeys([])
            console.log(this.rightData, '00000000000000', this.leftData)
            this.$emit('getData', this.rightData)
            this.$forceUpdate()
        }
    }
}
</script>
<style lang="scss" scoped>
.transferTreeBox {
    display: flex;
    width: 100%;
    justify-content: space-around;

    .SelectBox {
        border: 1px solid #ccc;
        height: 500px;
        width: 45%;
        color: #fff;
        position: relative;

        .boxTitle {
            background: var(--el-color-primary);
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        .boxCenter {
            height: 100%;
            width: 100%;

            overflow-y: scroll;
            background: #fff;
        }
    }

    .transferBtn {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .pickBtn {
            height: 30px;
            width: 50px;
            background: var(--el-color-primary);
            color: #fff;
            font-weight: 700;
            font-size: 20px;
            border-radius: 5px;
            margin-top: 10px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
    }
}
</style>