微调
This commit is contained in:
guanj
@@ -1,181 +1,196 @@
|
||||
<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 }">
|
||||
<span class="custom-tree-node">
|
||||
<div class="left">
|
||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
||||
v-if="data.icon" />
|
||||
<span>{{ node.label }}</span>
|
||||
</div>
|
||||
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, watch, defineProps, defineEmits } from 'vue'
|
||||
import { getSchemeTree, getTestRecordInfo } from '@/api/cs-device-boot/planData'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
defineOptions({
|
||||
name: 'govern/schemeTree'
|
||||
})
|
||||
|
||||
interface Props {
|
||||
template?: boolean
|
||||
|
||||
}
|
||||
const dictData = useDictData()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
template: false,
|
||||
|
||||
})
|
||||
const filterText = ref('')
|
||||
watch(filterText, val => {
|
||||
treRef.value!.filter(val)
|
||||
})
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
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 defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
const id: any = ref(null)
|
||||
const treeData = ref({})
|
||||
//获取方案树形数据
|
||||
const getTreeList = () => {
|
||||
getSchemeTree().then(res => {
|
||||
let arr: any[] = []
|
||||
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item?.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-Document'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
arr.push(item2)
|
||||
})
|
||||
})
|
||||
tree.value = res.data
|
||||
nextTick(() => {
|
||||
if (arr.length) {
|
||||
treRef.value.setCurrentKey(id.value || arr[0].id)
|
||||
let list = id.value ? arr.find((item: any) => item.id == id.value) : arr[0]
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...list
|
||||
})
|
||||
} else {
|
||||
emit('init')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
//方案id
|
||||
const planId: any = ref('')
|
||||
|
||||
const clickNode = (e: anyObj) => {
|
||||
e?.children ? (planId.value = e.id) : (planId.value = e.pid)
|
||||
id.value = e.id
|
||||
emit('nodeChange', e)
|
||||
}
|
||||
|
||||
|
||||
if (props.template) {
|
||||
getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
getTreeList()
|
||||
}).catch(err => {
|
||||
getTreeList()
|
||||
})
|
||||
} else {
|
||||
getTreeList()
|
||||
}
|
||||
|
||||
</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>
|
||||
<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 }">
|
||||
<span class="custom-tree-node">
|
||||
<div class="left" style="display: flex; align-items: center">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
/>
|
||||
<span style="margin-left: 5px;">{{ node.label }}</span>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, watch, defineProps, defineEmits } from 'vue'
|
||||
import { getSchemeTree, getTestRecordInfo } from '@/api/cs-device-boot/planData'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
defineOptions({
|
||||
name: 'govern/schemeTree'
|
||||
})
|
||||
|
||||
interface Props {
|
||||
template?: boolean
|
||||
}
|
||||
const dictData = useDictData()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
template: false
|
||||
})
|
||||
const filterText = ref('')
|
||||
watch(filterText, val => {
|
||||
treRef.value!.filter(val)
|
||||
})
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
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 defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
const id: any = ref(null)
|
||||
const treeData = ref({})
|
||||
//获取方案树形数据
|
||||
const getTreeList = () => {
|
||||
getSchemeTree().then(res => {
|
||||
let arr: any[] = []
|
||||
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item?.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-Document'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
arr.push(item2)
|
||||
})
|
||||
})
|
||||
tree.value = res.data
|
||||
nextTick(() => {
|
||||
if (arr.length) {
|
||||
treRef.value.setCurrentKey(id.value || arr[0].id)
|
||||
let list = id.value ? arr.find((item: any) => item.id == id.value) : arr[0]
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...list
|
||||
})
|
||||
} else {
|
||||
emit('init')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
//方案id
|
||||
const planId: any = ref('')
|
||||
|
||||
const clickNode = (e: anyObj) => {
|
||||
e?.children ? (planId.value = e.id) : (planId.value = e.pid)
|
||||
id.value = e.id
|
||||
emit('nodeChange', e)
|
||||
}
|
||||
|
||||
if (props.template) {
|
||||
getTemplateByDept({ id: dictData.state.area[0].id })
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
getTreeList()
|
||||
})
|
||||
.catch(err => {
|
||||
getTreeList()
|
||||
})
|
||||
} else {
|
||||
getTreeList()
|
||||
}
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user