SmartCommunity/operationSupport/src/views/patrolManagement/components/shannon-transfer.vue

<template>
    <div class="shannon-transfer">
        <div class="shannon-transfer-panel">
            <div class="shannon-transfer-panel__header">
                <div class="item-flex justify">
                    <div class="item-flex justify cursor" @click="leftAllf">
                        <span class="label-block" :class="leftAll ? 'is-checked' : ''"></span>
                        <span class="label-name">{{ title[0] }}</span>
                    </div>
                    <span class="label-number">{{ leftSelectArr.length }}/{{ leftArr.length }}</span>
                </div>
            </div>
            <div class="shannon-transfer-panel__body">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search shannon-transfer-panel__filter"></el-input>
                <div class="shannon-transfer-panel__list is-filterable">
                    <div class="shannon-transfer-panel__item" v-for="(item, index) in newArr[0]" :key="item.id">
                        <div class="item-flex cursor" @click="leftThis(item, index)">
                            <span class="label-block" :class="item.isChecked ? 'is-checked' : ''"></span>
                            <span class="label-name">{{ item.label }}</span>
                        </div>
                        <!-- <div>{{ newArr }}</div> -->
                    </div>
                </div>
                <p class="shannon-transfer-panel__empty">无匹配数据</p>
                <p class="shannon-transfer-panel__empty">无数据</p>
            </div>
        </div>
        <div class="shannon-transfer__buttons">
            <el-button type="primary" class="shannon-transfer__button" @click="moveData('left')">
                <span><i class="el-icon-arrow-left"></i></span>
            </el-button>
            <el-button type="primary" class="shannon-transfer__button" @click="moveData('right')">
                <span><i class="el-icon-arrow-right"></i></span>
            </el-button>
        </div>
        <div class="shannon-transfer-panel">
            <div class="shannon-transfer-panel__header">
                <div class="item-flex justify">
                    <div class="item-flex justify cursor" @click="rightAllf">
                        <span class="label-block" :class="rightAll ? 'is-checked' : ''"></span>
                        <span class="label-name">{{ title[0] }}</span>
                    </div>
                    <span class="label-number">{{ rightSelectArr.length }}/{{ rightArr.length }}</span>
                </div>
            </div>
            <div class="shannon-transfer-panel__body">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search shannon-transfer-panel__filter"></el-input>
                <div class="shannon-transfer-panel__list is-filterable">
                    <div class="shannon-transfer-panel__item" v-for="item in newArr[1]" :key="item.id">
                        <div class="item-flex cursor" @click="rightThis(item)">
                            <span class="label-block" :class="item.isChecked ? 'is-checked' : ''"></span>
                            <span class="label-name">{{ item.label }}</span>
                        </div>
                        <div></div>
                    </div>
                </div>
                <p class="shannon-transfer-panel__empty">无匹配数据</p>
                <p class="shannon-transfer-panel__empty">无数据</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        arr: {
            type: Array,
            default: () => [
                {
                    id: 1,
                    label: '测试一号',
                    isChecked: false
                },
                {
                    id: 2,
                    label: '测试二号',
                    isChecked: false
                }
            ]
        },
        title: {
            type: Array,
            default: () => ['待选列表', '已选列表']
        }
    },
    data() {
        return {
            //左右数据 左右勾选数据
            leftArr: [],
            rightArr: [],
            leftSelectArr: [],
            rightSelectArr: [],
            leftAll: false,
            rightAll: false
        };
    },
    watch: {
        rightSelectArr: {
            deep: true,
            handler(n) {
                console.log(n);
            }
        }
    },
    computed: {
        newArr() {
            let newData = [];
            if (this.rightArr.length == 0) {
                newData[0] = this.arr;
                this.leftArr = this.arr;
            } else {
                newData[0] = this.leftArr;
                this.rightArr = this.rightArr;
            }
            newData[1] = this.rightArr;
            return newData;
        }
    },
    methods: {
        leftAllf() {
            this.leftArr.map((item) => {
                if (!item.isChecked) {
                    item.isChecked = true;
                } else {
                    item.isChecked = false;
                }
            });
            this.allTrue(0);
        },
        rightAllf() {
            this.rightArr.map((item) => {
                if (!item.isChecked) {
                    item.isChecked = true;
                } else {
                    item.isChecked = false;
                }
            });
            this.allTrue(1);
        },
        leftThis(item, index) {
            item.isChecked = !item.isChecked;
            if (item.isChecked) {
                this.leftSelectArr.push(item.id);
            } else {
                this.leftSelectArr.map((its, inx) => {
                    if (item.id == its) {
                        this.leftSelectArr.splice(inx, 1);
                    }
                });
            }
            this.allTrue(0);
        },
        rightThis(item) {
            item.isChecked = !item.isChecked;
            if (item.isChecked) {
                this.rightSelectArr.push(item.id);
            } else {
                this.rightSelectArr.map((its, inx) => {
                    if (item.id == its) {
                        this.rightSelectArr.splice(inx, 1);
                    }
                });
            }
            this.allTrue(1);
        },
        moveData(direction) {
            if (direction == 'right' && this.leftSelectArr.length !== 0) {
                this.rightArr.push(this.leftSelectArr);
                let thisLeft = this.leftArr.filter((item, index) => {
                    return this.leftSelectArr[index] !== item.id;
                });
                let thisRight = this.leftArr.filter((item, index) => {
                    item.isChecked = false;
                    return this.leftSelectArr[index] == item.id;
                });
                console.log(thisLeft);
                console.log(thisRight);
                this.leftArr = thisLeft;
                this.rightArr = thisRight;
                this.leftSelectArr = [];
            } else if (direction == 'left' && this.rightSelectArr.length !== 0) {
                this.leftArr.push(this.rightSelectArr);
                let thisRight = this.rightArr.filter((item, index) => {
                    return this.rightSelectArr[index] !== item.id;
                });
                let thisLeft = this.rightArr.filter((item, index) => {
                    item.isChecked = false;
                    return this.rightSelectArr[index] == item.id;
                });
                console.log(thisLeft);
                console.log(thisRight);
                this.leftArr = thisLeft;
                this.rightArr = thisRight;
                this.rightSelectArr = [];
            }
        },
        allTrue(sun) {
            if (sun == 0) {
                let leftAll = false;
                this.newArr[0].map((item) => {
                    leftAll = item.isChecked;
                    if (leftAll == false) {
                        this.leftAll = 'Multiple';
                    } else {
                        this.leftAll = 'all';
                    }
                });
                this.leftAll = leftAll;
            } else {
                let rightAll = false;
                this.newArr[1].map((item) => {
                    rightAll = item.isChecked;
                });
                this.rightAll = rightAll;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
$name: shannon-transfer;
$panelName: #{$name}-panel;
$white: white;
.backWhite {
    background: $white;
}
$eaeff: #0eaeff;
.color0eaeff {
    color: $eaeff;
}
.cursor {
    cursor: pointer;
}
.#{$name} {
    &-panel {
        border: 1px solid #ebeef5;
        border-radius: 4px;
        overflow: hidden;
        @extend .backWhite;
        display: inline-block;
        vertical-align: middle;
        width: 200px;
        max-height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        .#{$name}-panel__header {
            height: 40px;
            line-height: 40px;
            background: #f5f7fa;
            margin: 0;
            padding-left: 15px;
            border-bottom: 1px solid #ebeef5;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #000;
        }
        .#{$panelName}__body {
            height: 246px;
            .#{$panelName}__filter {
                text-align: center;
                margin: 15px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                display: block;
                width: auto;
            }
            .#{$panelName}__list {
                margin: 0;
                padding: 6px 0;
                list-style: none;
                height: 246px;
                overflow: auto;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            .#{$panelName}__item {
                line-height: 30px;
                margin: 0 15px;
                .label-block {
                    margin-top: 8px;
                }
            }
            .el-input--prefix {
                margin: 15px;
                width: calc(100% - 30px);
                .el-input__inner {
                    border-radius: 30px;
                }
            }
        }
        .item-flex {
            display: flex;
            &.justify {
                justify-content: space-between;
            }
        }
        .label-block {
            position: relative;
            height: 14px;
            width: 14px;
            border-radius: 3px;
            margin-top: 13px;
            border: 1px solid #dcdfe6;
            @extend .backWhite;
            cursor: pointer;
            &.is-checked {
                background: $eaeff;
                border-color: $eaeff;
            }
            &.is-checked {
                background: $eaeff;
                border-color: $eaeff;
            }
            &:hover {
                border-color: $eaeff;
            }
            &::after {
                content: '';
                position: absolute;
                left: 2px;
                top: 2px;
                width: 50%;
                height: 25%;
                border: 2px solid #fff;
                border-radius: 1px;
                border-top: none;
                border-right: none;
                background: transparent;
                transform: rotate(-45deg);
            }
        }
        .label-name {
            margin-left: 10px;
        }
    }
    &__buttons {
        display: inline-block;
        vertical-align: middle;
        padding: 0 30px;
        .#{$name}__button {
            &:first-child {
                margin-bottom: 10px;
            }
            span {
                font-size: 14px;
            }
        }
    }
}
</style>