rax-medical/src/views/permissions-manage/form/empower-dialog.vue

<template>
    <el-dialog v-model="dialogVisible" width="30%">
        <template #header>
            <span class="el-dialog__title" style="margin-right: 50px;">授权权限</span>
            <el-checkbox v-model="toggleExpand" @change="toggleExpandChange">展开 / 折叠</el-checkbox>
            <el-checkbox v-model="toggleSelectAll" @change="toggleSelectAllChange">全选 / 全不选</el-checkbox>
        </template>
        <el-tree ref="treeRef" :key="treeKey" :props="props" :data="treeData" :default-expanded-keys="expandedKey" node-key="id"
            show-checkbox @check-change="checkChange" />
        <div style="text-align: right;margin-top: 20px;">
            <el-button class="f18" @click="dialogVisible = false">取消</el-button>
            <el-button class="f18" type="primary" @click="updateData">更新</el-button>
        </div>
    </el-dialog>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = {
    label: 'label',
    children: 'children'
}
let treeIds: Array<string> = []
let checkDatas: Array<any> = []

const treeRef = ref()
const treeKey = ref(0)
const dialogVisible = ref(false)
const toggleExpand = ref(false)
const toggleSelectAll = ref(false)
const treeData = ref()
const expandedKey = ref<Array<string>>([])

initTree()

defineExpose({
    open,
    close,
    initTree,
})
onMounted(() => {

})

function open() {
    dialogVisible.value = true
    setTimeout(() => {
        setTreeChecked(['1-1-1'])
    }, 0)
}
function close() {
    dialogVisible.value = false
}
function initTree() {
    treeData.value = [
        {
            id: '1', label: '权限管理', children: [
                {
                    id: '1-1', label: '医生管理', children: [
                        { id: '1-1-1', label: '医生新增' },
                        { id: '1-1-2', label: '医生删除' }
                    ]
                }
            ]
        },
        {
            id: '2', label: '患者管理', children: [
                {
                    id: '2-1', label: '医生管理', children: [
                        { id: '2-1-1', label: '医生新增' }
                    ]
                }
            ]
        }
    ]
    treeIds = []
    // 储存前两级id，全选、展开使用
    for (let i = 0; i < treeData.value.length; i++) {
        const levela = treeData.value[i]
        treeIds.push(levela.id)
        if (levela.children) {
            for (let j = 0; j < levela.children.length; j++) {
                const levelb = levela.children[j];
                treeIds.push(levelb.id)
            }
        }
    }
}
function setTreeChecked(e?: Array<any>) {
    e && treeRef.value.setCheckedKeys(e)
}

const toggleExpandChange = (e: boolean) => {
    if (e) expandedKey.value = JSON.parse(JSON.stringify(treeIds))
    else {
        expandedKey.value = []
        const storeCheck = JSON.parse(JSON.stringify(checkDatas)) // 储存上次更新的值
        treeKey.value++ // 刷新组件
        setTimeout(() => {
            setTreeChecked(storeCheck)
        })
        
    }
}
const toggleSelectAllChange = (e: boolean) => {
    if (!e) treeRef.value.setCheckedNodes(treeIds)
    else treeRef.value.setCheckedKeys(treeIds)
}
const checkChange = () => {
    checkDatas = treeRef.value.getCheckedKeys()
}
const updateData = () => {
    ElMessage.success('更新成功')
    close()
}
</script>

<style lang='scss' scoped></style>