Source/UBCS-WEB/src/components/template/TableTransfer.vue

@@ -1,5 +1,5 @@
<template>
    <el-dialog :title="title" width="70%" append-to-body="true" :visible.sync="dialogVisible">
    <el-dialog :title="title" width="70%" append-to-body="true" :visible.sync="dialogVisible" @close="handelClose">
        <el-row :gutter="20">
            <el-col :span="11">
                <el-card class="box-card">
@@ -8,9 +8,9 @@
                        <el-input class="input" v-if="showSearch" v-model="searchLeft" placeholder="请输入搜索内容"
                            @keyup.enter.native="handleEnter"></el-input>
                    </div>
                    <el-table ref="transferLeftTable" :data="leftData" height="500" highlight-current-row
                        tooltip-effect="dark" @selection-change="handleLeftSelectionChange" @row-click="handleLeftRowClick">
                        <el-table-column type="selection" width="50" align="center" fixed="left" :selectable="selectable" />
                    <el-table ref="transferTable" :data="leftData" height="500" highlight-current-row tooltip-effect="dark"
                        @selection-change="handleLeftSelectionChange" @row-click="handleLeftRowClick">
                        <el-table-column type="selection" width="50" align="center" fixed="left" />
                        <div v-for="(item, index) in columns" :key="index">
                            <el-table-column v-if="item.visible" :label="item.label" align="center" :prop="item.key" />
                        </div>
@@ -74,7 +74,7 @@
        //主键key值
        keyName: {
            type: String,
            default: "id",
            default: "oid",
        },
        columns: {
            type: Array,
@@ -116,17 +116,12 @@
            },
            deep: true,
        },
        dataList: {
            handler(data) {
                console.log(data)

            },
            deep: true,
        }
    },
    data() {
        return {
            dialogVisible: this.visible,
            indeterminate: false,
            isCheck: false,
            searchLeft: "",
            leftIds: [],
            leftMultiple: true,
@@ -143,23 +138,23 @@
        this.init();
    },
    methods: {
        selectable(row, index) {
            console.log(row)
            return row.checked === false //为true的时候可以选，为false则不可选择
        },
        init() {
            this.rightIds = this.value;
            console.log(this.rightIds)
            for (let i = 0; i < this.dataList.length; i++) {
                if (this.value.some((item) => item == this.dataList[i][this.keyName])) {
                    this.rightDataList.push(this.dataList[i]);
                } else {
                    this.leftDataList.push(this.dataList[i]);
            let that = this
            that.rightIds = that.value;
            for (let i = 0; i < that.dataList.length; i++) {
                if (that.value.some((item) => item == that.dataList[i][that.keyName])) {
                    that.rightDataList.push(that.dataList[i]);
                }
                // else{
                //     that.leftDataList.push(that.dataList[i])
                // }
                that.leftDataList.push(that.dataList[i])

            }
            this.leftData = [...this.leftDataList];
            this.rightData = [...this.rightDataList];
            that.leftData = [...that.leftDataList];
            that.rightData = [...that.rightDataList];
        },

        // left多选框选中数据
        handleLeftSelectionChange(selection) {
            this.leftIds = selection.map((item) => item[this.keyName]);
@@ -176,21 +171,26 @@
                let a = this.leftIds.findIndex(
                    (item) => item == this.leftDataList[i][this.keyName]
                );
                console.log(a)
                if (a !== -1) {
                    this.rightDataList.push(this.leftDataList[i]);
                    // this.leftDataList[i].checked = true
                    // this.$refs.transferLeftTable.toggleRowSelection(this.leftDataList[i],true)
                    this.$delete(this.leftDataList, i);
                    i--;
                    let moveLefti = this.leftDataList[i];//左边罗过来的
                    let moveLeftiKey = moveLefti['id'];
                    let isMove = true;
                    for (let j = 0; j < this.rightDataList.length; j++) {
                        let rifhtDataListi = this.rightDataList[j];//右边循环出来的每一个
                        let rightDataListiKey = rifhtDataListi['id'];//每一个key
                        if (rightDataListiKey == moveLeftiKey) {
                            isMove = false;
                            break;
                        }
                    }
                    if (isMove) {
                        this.rightDataList.push(this.leftDataList[i]);
                        this.leftDataList[i].checked = true
                        // this.$delete(this.leftDataList, i);
                        // i--;
                    }
                }
            }
            // let obj = {}
            // let filterright = this.rightDataList.reduce((cur, next) => {
            //     obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
            //     return cur;
            // }, [])
            // console.log('filterright', filterright)
            this.leftData = this.setData(this.leftDataList, this.searchLeft);
            this.rightData = this.setData(this.rightDataList, this.searchRight);
            this.$emit(
@@ -205,17 +205,12 @@
                    (item) => item == this.rightDataList[i][this.keyName]
                );
                if (a !== -1) {
                    this.leftDataList.push(this.rightDataList[i]);
                    this.leftDataList[i].checked = false
                    // this.leftDataList.push(this.rightDataList[i]);
                    this.$delete(this.rightDataList, i);
                    i--;
                }
            }
            // let obj = {}
            // let filterleft = this.leftDataList.reduce((cur, next) => {
            //     obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
            //     return cur;
            // }, [])
            // console.log('filterright', filterleft)
            this.leftData = this.setData(this.leftDataList, this.searchLeft);
            this.rightData = this.setData(this.rightDataList, this.searchRight);
            this.$emit(
@@ -233,9 +228,9 @@
        // 单选
        handleLeftRowClick(row) {
            if (this.leftData) {
                this.$refs.transferLeftTable.toggleRowSelection(row)
                this.$refs.transferTable.toggleRowSelection(row)
            } else {
                this.$refs.transferLeftTable.clearSelection()
                this.$refs.transferTable.clearSelection()
            }
        },
        // 单选
@@ -268,55 +263,64 @@
            console.log(this.value)
        },
        done() {
            this.leftData = []
            this.leftDataList = []
            this.rightDataList = []
            this.rightData = []
            this.dialogVisible = false
        },
        tableTransferSave() {
            this.$emit('save', this.rightData)
            this.leftData = [...this.rightData, ...this.leftData]
            this.leftDataList = [...this.rightDataList, ...this.leftDataList]
            this.rightDataList = []
            this.rightData = []
            this.done()

        }

        },
        // 关闭清除所有数据
        handelClose() {
            this.$emit('close')
            this.done()
        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep(.el-col>.el-card >.el-card__header) {
    background: #fff
}

.box-card {
    background: #fff;
}

.clearfix {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.input {
    float: right;
    padding: 3px 0;
    max-width: 400px;
}

.btns {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    .btn {
        margin: 20px 0;
    ::v-deep {
        .el-col>.el-card >.el-card__header {
            background: #fff
        }
        
    }
}
</style>

    .box-card {
        background: #fff;
    }
    .clearfix {
        display: -webkit-box;
        display: flex;
        display: -ms-flexbox;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .input {
        float: right;
        padding: 3px 0;
        max-width: 400px;
    }

    .btns {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        .btn {
            margin: 20px 0;
        }
    }
</style>