138 lines
4.7 KiB
Vue
138 lines
4.7 KiB
Vue
<template>
|
||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden;'>
|
||
<Icon v-show='menuCollapse' @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 mt20 menu-collapse'
|
||
style='cursor: pointer' />
|
||
<div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
|
||
<div style='display: flex; align-items: center' class='mb10'>
|
||
<el-input maxlength="32" show-word-limit v-model.trim='filterText' placeholder='请输入内容' clearable>
|
||
<template #prefix>
|
||
<Icon name='el-icon-Search' style='font-size: 16px' />
|
||
</template>
|
||
</el-input>
|
||
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
|
||
style='cursor: pointer' v-if='props.canExpand' /> -->
|
||
</div>
|
||
<el-tree :style="{ height: 'calc(100vh - 200px)' }"
|
||
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current :default-expand-all="false"
|
||
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
|
||
<template #default='{ node, data }'>
|
||
<span class='custom-tree-node'>
|
||
<Icon :name='data.icon' style='font-size: 16px' :style='{ color: data.color }'
|
||
v-if='data.icon' />
|
||
<span style='margin-left: 4px'>{{ node.label }}</span>
|
||
</span>
|
||
</template>
|
||
</el-tree>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang='ts' setup>
|
||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||
import { ElTree } from 'element-plus'
|
||
import { emit } from 'process';
|
||
import { ref, watch } from 'vue'
|
||
|
||
defineOptions({
|
||
name: 'govern/tree'
|
||
})
|
||
|
||
interface Props {
|
||
width?: string
|
||
canExpand?: boolean
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
width: '280px',
|
||
canExpand: true
|
||
})
|
||
const { proxy } = useCurrentInstance()
|
||
const menuCollapse = ref(false)
|
||
const filterText = ref('')
|
||
const defaultProps = {
|
||
label: 'name',
|
||
value: 'id'
|
||
}
|
||
const emit = defineEmits(['checkTreeNodeChange'])
|
||
watch(filterText, val => {
|
||
treeRef.value!.filter(val)
|
||
|
||
})
|
||
const onMenuCollapse = () => {
|
||
menuCollapse.value = !menuCollapse.value
|
||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||
}
|
||
const filterNode = (value: string, data: any, node: any) => {
|
||
if (!value) return true
|
||
// return data.name.includes(value)
|
||
if (data.name) {
|
||
|
||
return chooseNode(value, data, node)
|
||
}
|
||
}
|
||
|
||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||
const chooseNode = (value: string, data: any, node: any) => {
|
||
if (data.name.indexOf(value) !== -1) {
|
||
return true
|
||
}
|
||
const level = node.level
|
||
// 如果传入的节点本身就是一级节点就不用校验了
|
||
if (level === 1) {
|
||
return false
|
||
}
|
||
// 先取当前节点的父节点
|
||
let parentData = node.parent
|
||
// 遍历当前节点的父节点
|
||
let index = 0
|
||
while (index < level - 1) {
|
||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||
if (parentData.data.name.indexOf(value) !== -1) {
|
||
return true
|
||
}
|
||
// 否则的话再往上一层做匹配
|
||
parentData = parentData.parent
|
||
index++
|
||
}
|
||
// 没匹配到返回false
|
||
return false
|
||
}
|
||
const checkTreeNodeChange = () => {
|
||
// console.log(treeRef.value?.getCheckedNodes(), "ikkkkkiisiiisis");
|
||
emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
|
||
}
|
||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||
defineExpose({ treeRef })
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.cn-tree {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
height: 100%;
|
||
width: 100%;
|
||
|
||
:deep(.el-tree) {
|
||
border: 1px solid var(--el-border-color);
|
||
}
|
||
|
||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||
background-color: var(--el-color-primary-light-7);
|
||
}
|
||
|
||
.menu-collapse {
|
||
color: var(--el-color-primary);
|
||
}
|
||
}
|
||
|
||
.custom-tree-node {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style>
|