measure/src/components/choice-user/choice-user.vue

<template>
    <div class="hc-choice-user">
        <!-- 表单回显 -->
        <div class="choice-user-box hc-flex w-full cursor-pointer bg-white">
            <div class="tag-user-list" @click="showModalClick">
                <template v-for="(item, index) in UserDataList" :key="index">
                    <el-tag>{{ item.name }}</el-tag>
                </template>
                <div v-if="UserDataList.length <= 0">点击这里选择用户</div>
            </div>
        </div>
        <!-- 选择用户的弹窗 -->
        <hc-new-dialog ui="hc-choice-user-dialog" is-table widths="62rem" :show="userModalShow" title="选择用户" @save="userModalSave" @close="userModalClose">
            <div class="relative h-full flex">
                <div class="relative h-full flex-1 p-2" hc-border-r="1px solid #eee">
                    <el-scrollbar>
                        <hc-data-tree :h-props="treeProps" :datas="treeLoadNode" />
                    </el-scrollbar>
                </div>
                <div class="relative h-full h-full flex flex-[2] flex-col">
                    <div class="relative flex flex-1 flex-col">
                        <div class="hc-flex bg-gray-2 p-2 text-black">可选择的用户</div>
                        <div class="user-list relative flex-1 p-2">
                            <el-scrollbar>
                                <el-checkbox-group v-model="checkboxUserList">
                                    <template v-for="item in signUserList" :key="item.id">
                                        <div class="user-item checkbox-li">
                                            <el-checkbox :label="`${item.name}-${item.id}`">
                                                <div class="item-user-name">{{ item.name }}</div>
                                            </el-checkbox>
                                        </div>
                                    </template>
                                </el-checkbox-group>
                            </el-scrollbar>
                        </div>
                    </div>
                    <div class="relative flex flex-col">
                        <div class="hc-flex bg-gray-2 p-2 text-black">已选择({{ checkboxUserList.length }})</div>
                        <div class="user-list h-24">
                            <el-scrollbar>
                                <template v-for="(item, index) in checkboxUserList" :key="index">
                                    <el-tag closable @close="delCheckboxUser(index)">
                                        {{ item.name }}
                                    </el-tag>
                                </template>
                            </el-scrollbar>
                        </div>
                    </div>
                </div>
            </div>
        </hc-new-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'

defineOptions({
    name: 'HcChoiceUser',
})

const UserDataList = ref([])

//选择用户
const userModalShow = ref(false)
const showModalClick = () => {
    userModalShow.value = true
}

//数据格式
const treeProps = {
    label: 'label',
    children: 'children',
}
//数据
const treeLoadNode = ref([
    {
        label: 'Level one 1',
        children: [
            {
                label: 'Level two 1-1',
                children: [
                    { label: 'Level three 1-1-1' },
                ],
            },
            {
                label: 'Level two 2-1',
                children: [
                    { label: 'Level three 2-1-1' },
                ],
            },
            {
                label: 'Level two 2-2',
                children: [
                    { label: 'Level three 2-2-1' },
                ],
            },
            {
                label: 'Level two 3-1',
                children: [
                    { label: 'Level three 3-1-1' },
                ],
            },
            {
                label: 'Level two 3-2',
                children: [
                    { label: 'Level three 3-2-1' },
                ],
            },
        ],
    },
])

//选择用户
const checkboxUserList = ref([])
const signUserList = ref([
    { id: 1, name: '名称1' },
    { id: 2, name: '名称2' },
    { id: 3, name: '名称3' },
])
const delCheckboxUser = (index) => {

}

const userModalSave = () => {
    userModalClose()
}
const userModalClose = () => {
    userModalShow.value = false
}
</script>

<style scoped lang="scss">
.hc-choice-user {
    position: relative;
    width: 100%;
    --cubic-bezier: cubic-bezier(.645,.045,.355,1);
    .choice-user-box {
        border-radius: 4px;
        color: #606266;
        font-size: 14px;
        min-height: 40px;
        padding: 0 12px;
        border: 1px dashed #dddfe6;
        transition: border .2s var(--cubic-bezier);
        .tag-user-list {
            position: relative;
        }
    }
}
</style>

<style lang="scss">
.el-dialog.hc-choice-user-dialog {
    .el-dialog__body {
        padding: 0 !important;
    }
    .el-tree.hc-tree-node-v2 .data-custom-tree-node .label,
    .hc-tree-node .data-custom-tree-node .label {
        font-size: 15px;
    }
    .el-tree.hc-tree-node-v2 .data-custom-tree-node .label.level-name,
    .hc-tree-node .data-custom-tree-node .label.level-name {
        font-size: 15px;
        font-weight: initial;
    }

    .hc-tasks-user .tasks-user-box .tag-user-list {
        .el-tag {
            --el-icon-size: 14px;
            padding: 0 10px;
            height: 26px;
            margin: 4px 0;
        }
    }
    .user-list {
        .el-tag {
            margin-right: 10px;
            margin-top: 12px;
        }
        .user-item {
            position: relative;
            padding: 4px 0;
        }
        .user-item + .user-item {
            border-top: 1px dashed #EEEEEE;
        }
        .checkbox-li .el-checkbox {
            width: 100%;
            .el-checkbox__input {
                position: absolute;
                right: 0;
                .el-checkbox__inner {
                    width: 18px;
                    height: 18px;
                    &:after {
                        height: 9px;
                        left: 6px;
                        top: 2px;
                    }
                }
            }
            .el-checkbox__label {
                flex: 1;
                padding-left: 0;
                padding-right: 20px;
            }
        }
    }
}
</style>