148 lines
4.7 KiB
Vue
148 lines
4.7 KiB
Vue
<template>
|
|
<div>
|
|
<div style="transition: all 0.3s; overflow: hidden; height: 100%">
|
|
<div class="cn-tree">
|
|
<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>
|
|
</div>
|
|
<el-tree
|
|
style="flex: 1; overflow: auto"
|
|
:props="defaultProps"
|
|
highlight-current
|
|
:filter-node-method="filterNode"
|
|
node-key="id"
|
|
v-bind="$attrs"
|
|
default-expand-all
|
|
:data="tree"
|
|
ref="treRef"
|
|
@node-click="clickNode"
|
|
:expand-on-click-node="false"
|
|
>
|
|
<template #default="{ node, data: nodeData }">
|
|
<span class="custom-tree-node">
|
|
<div class="left" style="display: flex; align-items: center">
|
|
<Icon
|
|
:name="nodeData.icon"
|
|
style="font-size: 16px"
|
|
:style="{ color: nodeData.color }"
|
|
v-if="nodeData.icon"
|
|
/>
|
|
<span style="margin-left: 5px">{{ node.label }}</span>
|
|
</div>
|
|
</span>
|
|
</template>
|
|
</el-tree>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue'
|
|
import { getSchemeTree } from '@/api/cs-device-boot/planData'
|
|
import { useConfig } from '@/stores/config'
|
|
import { ElTree } from 'element-plus'
|
|
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
|
import { createLineTreeDecorators } from './lineTreeUtils'
|
|
import { bootstrapWithTemplate } from './treeCommonUtils'
|
|
import { createTreeFilterNode } from './treeFilterUtils'
|
|
|
|
defineOptions({ name: 'govern/schemeTree', inheritAttrs: false })
|
|
|
|
interface Props {
|
|
template?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), { template: false })
|
|
|
|
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'node-click', 'editNode', 'getChart', 'Policy'])
|
|
|
|
const config = useConfig()
|
|
const tree = ref<any[]>([])
|
|
const treRef = ref<InstanceType<typeof ElTree>>()
|
|
const filterText = ref('')
|
|
const id = ref<string | null>(null)
|
|
const planId = ref('')
|
|
|
|
const defaultProps = { children: 'children', label: 'name', value: 'id' }
|
|
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
|
const filterNode = createTreeFilterNode()
|
|
|
|
watch(filterText, val => treRef.value?.filter(val))
|
|
|
|
function decorateSchemeTree(data: any[]): any[] {
|
|
const { primary, applyMeta } = decorators
|
|
const leaves: any[] = []
|
|
|
|
data.forEach(item => {
|
|
applyMeta(item, { icon: 'el-icon-Menu', color: primary() })
|
|
item.children?.forEach((child: any) => {
|
|
applyMeta(child, { icon: 'el-icon-Document', color: primary() })
|
|
leaves.push(child)
|
|
})
|
|
})
|
|
|
|
return leaves
|
|
}
|
|
|
|
function getTreeList() {
|
|
getSchemeTree().then(res => {
|
|
const leaves = decorateSchemeTree(res.data)
|
|
tree.value = res.data
|
|
|
|
const node = id.value ? leaves.find(item => item.id == id.value) : leaves[0]
|
|
if (!node) {
|
|
emit('init')
|
|
return
|
|
}
|
|
|
|
treRef.value?.setCurrentKey(node.id)
|
|
emit('init', { level: 2, ...node })
|
|
})
|
|
}
|
|
|
|
const clickNode = (e: any) => {
|
|
planId.value = e?.children ? e.id : e.pid
|
|
id.value = e.id
|
|
emit('nodeChange', e)
|
|
emit('node-click', e)
|
|
}
|
|
|
|
bootstrapWithTemplate(
|
|
props.template,
|
|
getTreeList,
|
|
() => querySysExcel({}),
|
|
data => emit('Policy', data)
|
|
)
|
|
</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%;
|
|
height: calc(100vh - 125px);
|
|
overflow-y: auto;
|
|
|
|
: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);
|
|
}
|
|
}
|
|
</style>
|