intelligent-etmf-system-admin/src/views/demo/TreeTest.vue

<template>
    <div class="tree-test">
        <el-card shadow="never">
            <template #header>
                <h3>树形组件测试</h3>
            </template>

            <div class="test-content">
                <p>测试目标：当选中"成都市"时，"四川省"应该保持半选状态，而不是全选状态</p>

                <div class="tree-container">
                    <data-permission-tree :data="treeData" :selected-keys="selectedKeys"
                        @update:selectedKeys="handleSelectedKeysChange" @check="handleCheck" />
                </div>

                <div class="info-panel">
                    <h4>当前选中的节点：</h4>
                    <p>{{ selectedKeys }}</p>

                    <h4>当前半选的节点：</h4>
                    <p>{{ indeterminateKeys }}</p>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DataPermissionTree from '@/components/DataPermisionTree/index.vue'
import type { TreeData, CheckedKeys } from '@/components/DataPermisionTree/types'

// 树形数据示例 - 模拟地理层级结构
const treeData: TreeData[] = [
    {
        id: 1,
        name: '中国',
        children: [
            {
                id: 2,
                name: '四川省',
                children: [
                    { id: 3, name: '成都市' },
                    { id: 4, name: '绵阳市' },
                    { id: 5, name: '德阳市' }
                ]
            },
            {
                id: 6,
                name: '广东省',
                children: [
                    { id: 7, name: '广州市' },
                    { id: 8, name: '深圳市' },
                    { id: 9, name: '珠海市' }
                ]
            }
        ]
    }
]

// 选中键值
const selectedKeys = ref<number[]>([])

// 半选键值
const indeterminateKeys = ref<number[]>([])

// 处理选中键值变化
const handleSelectedKeysChange = (keys: number[]) => {
    selectedKeys.value = keys
}

// 处理选中事件
const handleCheck = (keys: CheckedKeys) => {
    console.log('Checked keys:', keys.checked)
    console.log('Indeterminate keys:', keys.indeterminate)
    indeterminateKeys.value = keys.indeterminate
}
</script>

<style scoped>
.tree-test {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.test-content {
    padding: 20px 0;
}

.tree-container {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #f5f7fa;
    min-height: 200px;
}

.info-panel {
    margin-top: 20px;
    padding: 15px;
    background-color: #ecf5ff;
    border-radius: 4px;
}

.info-panel h4 {
    margin-top: 0;
    color: #303133;
}

.info-panel p {
    font-family: monospace;
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
    margin: 10px 0 0 0;
}
</style>