实现单选多选列表

1.效果图

 2.代码

<template>
    <div>
        <el-dialog title="批量转移客户资料" :visible.sync="tranVisible" width="30%">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label="right" label-width="60px" class="demo-ruleForm"
                :label-position="labelPosition">
                <el-form-item label-width="22px">
                    <el-radio v-model="radio" label="1">{{ `已选择${ids.length}个客户` }}</el-radio>
                </el-form-item>
                <el-form-item label="组别" prop="treeValue">
                    <div class="tree-container">
                        <el-select ref="selectTree" v-model="ruleForm.treeValue" class="main-select-tree" clearable
                            style="width: 60%;">
                            <el-option v-for="item in formatData(deptOptions)" :key="item.value" :label="item.label"
                                :value="item.value" style="display: none;" />
                            <el-tree ref="selecteltree" class="main-select-el-tree" :data="deptOptions" node-key="id"
                                highlight-current :props="defaultProps" :current-node-key="ruleForm.treeValue"
                                :expand-on-click-node="expandOnClickNode" :default-expand-all="false"
                                @node-click="handleNodeClick" />
                        </el-select>
                    </div>
                </el-form-item>
                <!-- 这里下面是多选列表 -->
                <el-form-item v-if="CheckList.length > 0" prop="type" label-width="20px">
                    <div class="content">
                        <div class="selectAll" v-if="!isMultiple">
                            <div :class="['select', SelectId.length == CheckList.length ? 'selectActv' : '']"
                                @click="allFun()">
                            </div>
                            <span>全选/反选</span> <span class="zhuan">选择转入工号，数字为当天转入数量</span>
                        </div>
                        <div class="CheckBox">
                            <div v-for="(item, index) in CheckList" :key="index" class="CheckItem">
                                <div :class="['select', SelectId.includes(item.userId) ? 'selectActv' : '']"
                                    @click="selectFun(item.userId)"></div>
                                <span>{{ item.userId }}: {{ item.nickName }}</span>
                                <span style="padding-left: 4px;">{{ [Number(item.count)] }}</span>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button style="float:right;" type="primary" @click="submit('ruleForm')">确定转移</el-button>
                    <el-button style="float:right;margin-right:15px" @click="cancel('ruleForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
// const selector = () => import("@/views/compoments/selector.vue");
import { treeselect } from '@/api/admin/sys-dept'
import { getTranCtm, plTrainCustom } from "@/api/ctm/ctm-my";
export default {
    name: "TramCtm",
    components: {
        // selector,
    },
    props: {
        ids: {
            type: Array,
            default: () => []
        },
        isMultiple: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            radio: '1',
            tranVisible: false,
            labelPosition: 'right',
            ruleForm: {
                treeValue: null, // 这里下面都是下拉树形的数据
            },
            rules: {
                treeValue: [{ required: true, message: "请选择部门", trigger: "change" }],
            },

            SelectId: [], // 已选列表
            CheckList: [], // 部门下面的人员列表
            expandOnClickNode: true,
            deptOptions: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    computed: {
        // 被选中项的集合，多选或反选
        ChooseList () {
            return this.CheckList.filter((item) => {
                if (this.SelectId.includes(item.id)) {
                    return item
                }
            })
        },
    },
    watch: {
        'ruleForm.treeValue': {
            deep: true,
            immediate: true,
            handler (v) {
                this.getDepPeople(v)
                this.getTreeselect()
            }
        }
    },
    // mounted () {
    // },
    methods: {
        /** 查询部门下拉树结构 */
        getTreeselect () {
            treeselect().then(response => {
                this.deptOptions = response.data
            })
        },
        // 根据部门id返回人员
        getDepPeople (id) {
            const deptId = {
                deptId: id
            }
            getTranCtm(deptId).then((res) => {
                this.CheckList = res.data
            })
        },
        // 四级菜单
        formatData (data) {
            const options = [];

            function processItem (item) {
                options.push({ label: item.label, value: item.id });
                if (item.children) {
                    item.children.forEach((child) => {
                        processItem(child);
                    });
                }
            }

            data.forEach((item) => {
                processItem(item);
            });

            return options;
        }
 
        handleNodeClick (node) {
            this.ruleForm.treeValue = node.id;
            this.$refs.selectTree.blur();
        },

        selectFun (userId) {
            if (this.isMultiple) {
                // 多选
                if (!this.SelectId.includes(userId)) {
                    this.SelectId.push(userId) // 判断已选列表中是否存在该id，不是则追加进去
                } else {
                    const index = this.SelectId.indexOf(userId) // 求出当前id的所在位置
                    this.SelectId.splice(index, 1) // 否则则删除
                }
            } else {
                // 单选
                this.SelectId = []; // 清空已选列表
                this.SelectId.push(userId); // 将当前userId添加到已选列表中
            }
            // console.log(this.SelectId, 'this.SelectId');
        },
        // 全选、反选
        allFun () {
            if (this.SelectId.length === this.CheckList.length) {
                this.SelectId = [] // 判断是否已全部选中，是则清空已选列表
            } else {
                this.CheckList.forEach((item) => {
                    if (!this.SelectId.includes(item.userId)) {
                        this.SelectId.push(item.userId) // 否则将未选中的全部加入已选列表中
                    }
                })
            }
            console.log(this.ChooseList, 'ChooseList');
        },

        cancel () {
            this.tranVisible = false
            this.SelectId = []
        },
        submit (formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let res;
                    const data = {
                        CustomerIds: this.ids,
                        UserIds: this.SelectId
                    }
                    // eslint-disable-next-line prefer-const
                    res = await plTrainCustom(data);
                    if (res.code === 200) {
                        this.tranVisible = false
                        this.$message.success("转交客户成功");
                        this.$refs.ruleForm.resetFields();
                        this.$emit('ok'); // 调用父组件的方法
                        this.SelectId = []
                    }
                } else {
                    return false;
                }
            });
        },
        showDialog () {
            this.tranVisible = true
        },
    }
}
</script>

<style lang="scss" scoped>
.tree-container {
    padding: 0 !important;
}

.main-select-el-tree .el-tree-node .is-current>.el-tree-node__content {
    font-weight: bold;
    color: #409eff;
}

.main-select-el-tree .el-tree-node.is-current>.el-tree-node__content {
    font-weight: bold;
    color: #409eff;
}

.CheckBox {
    width: 100%;
    display: flex;
    // flex-wrap: wrap;
    // margin: 50px auto;
    // margin-bottom: 20px;
    flex-direction: column;
    height: 300px;
    overflow: auto;
}

.CheckItem {
    display: flex;
    // margin: 0px 30px 30px 0px;
    align-items: center;
}

.select {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin-right: 10px;
    align-items: center;
}

.selectActv::before {
    display: block;
    content: "";
    width: 5px;
    height: 12px;
    border-bottom: 2px solid #13ce66;
    border-right: 2px solid #13ce66;
    // border-right: 2px solid #aaa;
    transform: rotate(45deg);
}

.selectAll {
    display: flex;
    align-items: center;
}

.content {
    width: 500px;
    // margin: 120px auto;
}

.zhuan {
    display: inline-block;
    padding-left: 12px;
    font-size: 0.5rem;
    color: #b8b6b6;
}

</style>