intelligent-etmf-system-web/src/views/demo/TestPermissionTree.vue

<template>
  <div class="test-permission-tree">
    <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="selected-info">
          <h4>当前选中的节点ID：</h4>
          <p>{{ selectedKeys }}</p>

          <h4>当前半选的节点ID：</h4>
          <p>{{ indeterminateKeys }}</p>
        </div>

        <div class="actions">
          <el-button @click="selectChengdu">选中成都市</el-button>
          <el-button @click="clearSelection">清空选择</el-button>
        </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);
  selectedKeys.value = keys.checked;
  indeterminateKeys.value = keys.indeterminate;
};

// 选中成都市
const selectChengdu = () => {
  selectedKeys.value = [3];
};

// 清空选择
const clearSelection = () => {
  selectedKeys.value = [];
};
</script>

<style scoped>
.test-permission-tree {
  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;
}

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

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

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

.actions {
  margin-top: 20px;
}

.actions .el-button {
  margin-right: 10px;
}
</style>