150 lines
4.8 KiB
Vue
150 lines
4.8 KiB
Vue
<template>
|
|
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
|
|
<div class="mt10 mr10" style="display: flex; justify-content: end" v-if="showBut">
|
|
<el-button type="primary" icon="el-icon-Select" @click="save" :loading="loading">保存</el-button>
|
|
</div>
|
|
<!-- <Icon
|
|
v-show="menuCollapse"
|
|
@click="onMenuCollapse"
|
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
|
:class="menuCollapse ? 'unfold' : ''"
|
|
size="18px"
|
|
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>
|
|
<el-tooltip placement="bottom" :hide-after="0" v-if="props.showPush">
|
|
<template #content>
|
|
<span>台账推送</span>
|
|
</template>
|
|
<Icon
|
|
name="el-icon-Promotion"
|
|
size="20px"
|
|
class="fold ml10 menu-collapse"
|
|
style="cursor: pointer"
|
|
:style="{ color: config.getColorVal('elementUiPrimary') }"
|
|
@click="onAdd"
|
|
/>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<el-tree
|
|
:style="{ height: `calc(100vh - ${height}px)` }"
|
|
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: nodeData }">
|
|
<span class="custom-tree-node">
|
|
<Icon
|
|
:name="nodeData.icon"
|
|
style="font-size: 16px"
|
|
:style="{ color: nodeData.color }"
|
|
v-if="nodeData.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 { ref, watch } from 'vue'
|
|
import { useConfig } from '@/stores/config'
|
|
import { createTreeFilterNode } from './govern/treeFilterUtils'
|
|
|
|
defineOptions({ name: 'govern/allocation', inheritAttrs: false })
|
|
|
|
interface Props {
|
|
width?: string
|
|
canExpand?: boolean
|
|
showPush?: boolean
|
|
showBut?: boolean
|
|
height?: number
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
width: '280px',
|
|
canExpand: true,
|
|
showPush: false,
|
|
showBut: true,
|
|
height: 267
|
|
})
|
|
|
|
const emit = defineEmits(['checkTreeNodeChange', 'onAdd', 'checkChange'])
|
|
|
|
const config = useConfig()
|
|
const { proxy } = useCurrentInstance()
|
|
const menuCollapse = ref(false)
|
|
const filterText = ref('')
|
|
const loading = ref(false)
|
|
const defaultProps = { label: 'name', value: 'id' }
|
|
const filterNode = createTreeFilterNode()
|
|
|
|
watch(filterText, val => treeRef.value?.filter(val))
|
|
|
|
const onMenuCollapse = () => {
|
|
menuCollapse.value = !menuCollapse.value
|
|
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
|
}
|
|
|
|
const save = () => {
|
|
loading.value = true
|
|
emit('checkChange')
|
|
}
|
|
|
|
const checkTreeNodeChange = () => {
|
|
emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
|
|
}
|
|
|
|
const onAdd = () => emit('onAdd')
|
|
|
|
const treeRef = ref<InstanceType<typeof ElTree>>()
|
|
defineExpose({ treeRef, loading })
|
|
</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>
|