bj-maritime-dcds-web/src/views/addressBook/components/treeSelect.vue

<template>
  <div class="tree-container">
    <!-- 搜索区域 -->
    <div class="search-bar">
      <el-input
        v-model="searchKeyword"
        placeholder="快速检索"
        class="search-input"
        prefix-icon="Search"
      />
      <el-button type="primary" class="search-btn" @click="handleSearch">查询</el-button>
      <el-button type="default" class="reset-btn" @click="handleReset">重置</el-button>
    </div>

    <!-- 树形结构区域 -->
    <div class="tree-wrapper">
      <el-tree
        v-model:checkedKeys="checkedKeys"
        :data="treeData"
        :props="treeProps"
        show-checkbox
        node-key="id"
        :filter-node-method="filterNode"
        ref="treeRef"
        class="custom-tree"
        :indent="16"
        :icon="renderIcon"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElTree } from 'element-plus';
import { CircleClose, CircleCheck } from '@element-plus/icons-vue';

// 树形结构数据（模拟后端返回数据）
const treeData = ref([
  {
    id: 1,
    label: '交通部根节点',
    children: [
      { id: 11, label: 'XXXXXXXX机构', checked: true },
      { 
        id: 12, 
        label: 'XXXXXXXX机构', 
        checked: true,
        children: [
          { id: 121, label: 'XXXXXXXX机构', checked: true },
          { id: 122, label: 'XXXXXXXX机构' },
          { id: 123, label: 'XXXXXXXX机构' },
          { id: 124, label: 'XXXXXXXX机构' },
          { id: 125, label: 'XXXXXXXX机构' },
          { id: 126, label: 'XXXXXXXX机构', checked: true },
        ]
      },
      { 
        id: 13, 
        label: 'XXXXXXXX机构', 
        checked: true,
        children: [
          { id: 121, label: 'XXXXXXXX机构', checked: true },
          { id: 122, label: 'XXXXXXXX机构' },
          { id: 123, label: 'XXXXXXXX机构' },
          { id: 124, label: 'XXXXXXXX机构' },
          { id: 125, label: 'XXXXXXXX机构' },
          { id: 126, label: 'XXXXXXXX机构', checked: true },
        ]
      },
      { 
        id: 14, 
        label: 'XXXXXXXX机构', 
        checked: true,
        children: [
          { id: 121, label: 'XXXXXXXX机构', checked: true },
          { id: 122, label: 'XXXXXXXX机构' },
          { id: 123, label: 'XXXXXXXX机构' },
          { id: 124, label: 'XXXXXXXX机构' },
          { id: 125, label: 'XXXXXXXX机构' },
          { id: 126, label: 'XXXXXXXX机构', checked: true },
        ]
      },
    ]
  }
]);

// 树形配置项
const treeProps = ref({
  label: 'label',
  children: 'children',
  disabled: (data: any) => data.disabled, // 可自定义禁用节点
});

// 搜索关键词
const searchKeyword = ref('');
// 选中的节点ID（受控于v-model:checkedKeys）
const checkedKeys = ref<(string | number)[]>([]);
// 树形组件实例
const treeRef = ref<InstanceType<typeof ElTree>>();

// 过滤节点（搜索功能）
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.toLowerCase().includes(value.toLowerCase());
};

// 处理搜索
const handleSearch = () => {
  treeRef.value?.filter(searchKeyword.value);
};

// 处理重置
const handleReset = () => {
  searchKeyword.value = '';
  treeRef.value?.filter(''); // 清空搜索过滤
};

const renderIcon = (props: any) => {
  if (!props.data) return null;
  const isLeaf = !props.data.children || props.data.children.length === 0;
  // 叶子节点且未勾选：空复选框图标
  if (isLeaf && !props.checked) {
    return h(CircleClose, { class: 'tree-icon unchecked' });
  }
  // 叶子节点且勾选：绿色勾选图标
  if (isLeaf && props.checked) {
    return h(CircleCheck, { class: 'tree-icon checked' });
  }
  return null;
};
</script>

<style scoped lang="scss">
.tree-container {
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}


/* 搜索区域样式 */
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;

  .search-input {
    flex: 1;
    height: 38px;
    width: 150px;
  }

  .search-btn, .reset-btn {
    min-width: 80px;
    height: 38px;
    padding: 0 16px;
  }

  .reset-btn {
    border: 1px solid #dcdfe6;
    color: #606266;
    margin-left: 0;
  }
}

/* 树形结构样式 */
.tree-wrapper {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  max-height: 500px;
  overflow-y: auto;
  padding: 10px 0;
}

.custom-tree {
  --el-tree-node-content-hover-bg-color: transparent; /* 移除节点hover背景 */

  .el-tree-node__content {
    height: 36px;
    align-items: center;
  }

  /* 复选框样式调整 */
  .el-checkbox .el-checkbox__inner {
    width: 18px;
    height: 18px;
    border-radius: 4px;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #10b981; /* 绿色勾选背景 */
    border-color: #10b981;
  }

  /* 自定义图标样式 */
  .tree-icon {
    font-size: 18px;
    &.checked {
      color: #10b981; /* 绿色勾选图标 */
    }
    &.unchecked {
      color: #c0c6cf; /* 未勾选灰色图标 */
    }
  }
}
</style>