pengcheng-exam-teacher/src/views/paper/question/DeptTree.vue

<template>
  <div style="height: 100%; display: flex; flex-direction: column">
    <!-- 搜索框固定在顶部 -->
    <div style="flex-shrink: 0; margin-bottom: 16px">
      <el-input
        v-model="deptName"
        clearable
        placeholder="搜索知识点..."
        style="
          --el-input-border-radius: 20px;
          --el-input-bg-color: #f8f9fa;
          --el-input-border-color: transparent;
        "
        size="default"
      >
        <template #prefix>
          <el-icon style="color: #67c23a">
            <Search />
          </el-icon>
        </template>
      </el-input>
    </div>
    <!-- 树形内容区域可滚动 -->
    <div
      style="flex: 1; overflow: auto; margin: -2px; padding: 2px 8px 8px 2px; border-radius: 6px"
    >
      <el-tree
        ref="treeRef"
        :data="deptList"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :props="defaultProps"
        default-expand-all
        highlight-current
        node-key="id"
        @node-click="handleNodeClick"
        style="
          --el-tree-node-hover-bg-color: #f0f9ff;
          --el-tree-node-content-height: auto;
          padding-bottom: 8px;
        "
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ElTree } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { defaultProps, handleTree } from '@/utils/tree'
import * as SpecialtyApi from '@/api/points'

defineOptions({ name: 'SystemUserDeptTree' })

const deptName = ref('')
const deptList = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()

/** 获得部门树 */
const getTree = async () => {
  const res = await SpecialtyApi.listPoints()
  deptList.value = []
  deptList.value.push(...handleTree(res))
}

/** 基于名字过滤 */
const filterNode = (name: string, data: Tree) => {
  if (!name) return true
  return data.name.includes(name)
}

/** 处理部门被点击 */
const handleNodeClick = async (row: { [key: string]: any }) => {
  emits('node-click', row)
}
const emits = defineEmits(['node-click'])

/** 监听deptName */
watch(deptName, (val) => {
  treeRef.value!.filter(val)
})

/** 初始化 */
onMounted(async () => {
  await getTree()
})
</script>

<style scoped>
/* 树节点内容样式 - 彻底解决长文本显示问题 */
:deep(.el-tree-node__content) {
  height: auto !important;
  min-height: 32px !important;
  padding: 6px 20px 6px 0 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: flex-start !important;
}

/* 树节点标签样式 */
:deep(.el-tree-node__label) {
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
  line-height: 1.4 !important;
  flex: 1 !important;
  padding-top: 2px;
}

/* 展开/收起图标对齐 */
:deep(.el-tree-node__expand-icon) {
  margin-top: 6px !important;
  flex-shrink: 0 !important;
}

/* 为不同层级的节点设置不同的样式 */
:deep(.el-tree-node[data-level='1'] .el-tree-node__content) {
  font-weight: 600;
  color: #303133;
}

:deep(.el-tree-node[data-level='2'] .el-tree-node__content) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-tree-node[data-level='3'] .el-tree-node__content) {
  font-weight: 400;
  color: #909399;
}

/* 悬停效果 */
:deep(.el-tree-node__content:hover) {
  background-color: #f0f9ff !important;
}

/* 选中状态 */
:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: #e1f5fe !important;
  color: #409eff !important;
}

/* 滚动条样式 */
:deep(.el-tree) {
  padding-bottom: 12px;
}
</style>