<!-- -->
|
<template>
|
<div class="left-tree-box">
|
<title-box-vue :title="titleName" v-if="showTitle">
|
<template v-slot:right>
|
<slot name="customTitleRight"></slot>
|
|
<div class="titleSlotRight">
|
<el-switch
|
v-if="showSorter"
|
size="small"
|
style="margin-right: 10px"
|
v-model="dragSwitch"
|
@change="handleDragStatusChange"
|
inline-prompt
|
active-icon="ele-Check"
|
inactive-icon="ele-Close"
|
></el-switch>
|
<SvgIcon v-if="showAdd" :size="20" name="ele-Plus" color="#528abe" class="cursor-pointer" @click="handleAdd()" />
|
</div>
|
</template>
|
</title-box-vue>
|
<div :style="{ height: showTitle ? 'calc(100% - 40px)' : '100%' }">
|
<el-tree-select
|
filterable
|
:indent="10"
|
class="w100"
|
style="margin-bottom: 15px"
|
ref="treeSelect"
|
:node-key="selectProps.id"
|
v-if="selectIsShow"
|
:props="selectProps"
|
:check-strictly="isleafclose"
|
v-model="state.selectValue"
|
:data="selectData"
|
:clearable="clearable"
|
:accordion="accordion"
|
placeholder="请选择"
|
:default-expand-all="selectDefaultExpandAll"
|
:expandNode="false"
|
@node-click="selectChange"
|
:render-after-expand="false"
|
><template #default="{ node, data }">
|
<span class="custom-tree-node select-tree-node">
|
<span style="display: flex">
|
<template v-if="showSelectNodeIcon">
|
<SvgIcon v-if="selectNodeIcon" :name="selectNodeIcon(node, data)" :size="18" color="rgb(64,158,255)"> </SvgIcon>
|
<SvgIcon
|
v-else-if="selectFolderIcon ? selectFolderIcon(node, data) : node.level !== selectMaxLevel"
|
:name="node.expanded ? 'ele-FolderOpened' : 'ele-Folder'"
|
:size="18"
|
color="rgb(64,158,255)"
|
></SvgIcon>
|
<SvgIcon v-else name="ele-Document" :size="14" color="rgb(64,158,255)"></SvgIcon>
|
</template>
|
<span class="ml5 flex-center">
|
{{ node.label }}
|
</span>
|
</span>
|
</span>
|
</template></el-tree-select
|
>
|
<div class="flex" v-if="searchIsShow && !treeDataIsNull">
|
<el-input
|
v-model="filterText"
|
placeholder="搜索"
|
size="default"
|
prefix-icon="ele-Search"
|
@clear="treeSearchClear"
|
clearable
|
class="mb7"
|
></el-input>
|
<div v-if="maxLevel > 1">
|
<el-dropdown @command="handleCommand">
|
<el-button style="margin-left: 8px; width: 34px">
|
<el-icon class="el-icon--center">
|
<more-filled />
|
</el-icon>
|
</el-button>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="expandAll">全部展开</el-dropdown-item>
|
<el-dropdown-item command="collapseAll">全部折叠</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
|
<el-tree
|
:indent="5"
|
:style="{ height: selectIsShow ? 'calc(100% - 95px)' : 'calc(100% - 40px)' }"
|
ref="listTreeRef"
|
:data="treedata"
|
:check-strictly="checkStrictly"
|
:show-checkbox="showCheckbox"
|
:props="defaultProps"
|
:show-icon="true"
|
:node-key="defaultProps.id"
|
:current-node-key="state.currentNodeKey1"
|
:default-expanded-keys="defaultExpandedKeys"
|
:expand-on-click-node="expandOnClickNode"
|
:default-expand-all="defaultExpandAll"
|
:default-checked-keys="checkBoxCurrentIDs"
|
:highlight-current="highlightCurrent"
|
:filter-node-method="handleSearch"
|
:allow-drag="allowDrag"
|
:allow-drop="allowDrop"
|
@check="handleCheckChange"
|
@node-click="handleNodeClick"
|
@node-drag-end="handleDragEnd"
|
@node-drag-start="handleDragStart"
|
:draggable="draggable || treeDraggable"
|
>
|
<template #default="{ node, data }">
|
<span class="custom-tree-node">
|
<span class="flex items-center" style="width: calc(100% - 20px)">
|
<template v-if="showNodeIcon">
|
<SvgIcon v-if="nodeIcon" :name="nodeIcon(node, data)" :size="14" color="rgb(64,158,255)"> </SvgIcon>
|
<SvgIcon
|
v-else-if="folderIcon ? folderIcon(node, data) : node.level !== maxLevel"
|
:name="node.expanded ? 'ele-FolderOpened' : 'ele-Folder'"
|
:size="18"
|
color="rgb(64,158,255)"
|
></SvgIcon>
|
<SvgIcon v-else name="ele-Document" :size="18" color="rgb(64,158,255)"></SvgIcon>
|
</template>
|
<el-tooltip v-if="tooltip" effect="dark" :content="tooltip(node, data)" placement="top-start"
|
><div class="over-ellipsis ml5">
|
{{ node.label }}
|
</div>
|
</el-tooltip>
|
<el-tooltip v-else :disabled="disableTooltip" effect="dark" :content="node.label" placement="top-start"
|
><div class="over-ellipsis ml5" @mouseover="textMouseOver($event)">
|
{{ node.label }}
|
</div>
|
</el-tooltip>
|
</span>
|
<span class="flex items-center">
|
<slot name="listNodeSuffix" :data="data" :node="node"></slot>
|
|
<el-dropdown v-if="typeof showMoreOperate === 'function' ? showMoreOperate(node, data) : showMoreOperate">
|
<el-button icon="ele-MoreFilled" size="small" link type="primary" style="padding-left: 12px" />
|
<template #dropdown>
|
<slot name="customDropdown" :data="data" :node="node" v-if="customDropdown"> </slot>
|
|
<el-dropdown-menu v-else>
|
<el-dropdown-item>
|
<el-button
|
@click.stop="() => handleEdit(data, node)"
|
link
|
type="primary"
|
icon="ele-Edit"
|
style="cursor: pointer"
|
>
|
编辑
|
</el-button>
|
</el-dropdown-item>
|
<el-dropdown-item>
|
<el-button
|
link
|
type="danger"
|
@click.stop="() => handleDelete(data, node)"
|
icon="ele-Delete"
|
style="cursor: pointer"
|
>
|
删除
|
</el-button>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
<SvgIcon
|
v-if="suffixIcon"
|
:size="18"
|
:name="suffixIconFun(node, data).name"
|
:color="suffixIconFun(node, data).color"
|
></SvgIcon>
|
</span>
|
</span>
|
</template>
|
</el-tree>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import titleBoxVue from '/@/components/titleBox.vue';
|
import { leftTreeEmits, leftTreeProps } from '/@/components/tree/leftTreeByMgr';
|
import { useLeftTree } from '/@/components/tree/useLeftTree';
|
|
const props = defineProps(leftTreeProps);
|
|
const emits = defineEmits(leftTreeEmits);
|
const {
|
state,
|
listTreeRef,
|
filterText,
|
handleEdit,
|
handleDelete,
|
treeSearchClear,
|
handleAdd,
|
selectChange,
|
handleNodeClick,
|
handleCheckChange,
|
//#region ====================== 拖拽 ======================
|
allowDrop,
|
dragSwitch,
|
handleDragStart,
|
handleDragEnd,
|
allowDrag,
|
handleDragStatusChange,
|
//#endregion
|
handleSearch,
|
treeDataIsNull,
|
maxLevel,
|
selectMaxLevel,
|
textMouseOver,
|
treeDraggable,
|
disableTooltip,
|
suffixIconFun,
|
handleCommand,
|
} = useLeftTree(props, emits);
|
|
defineExpose({
|
treeRef: listTreeRef,
|
});
|
|
// useSaveScroll(listTreeRef as any)
|
</script>
|
<style lang="scss" scoped>
|
.el-tree {
|
overflow-y: auto;
|
}
|
.left-tree-box {
|
background-color: #fff;
|
width: 100%;
|
height: 100%;
|
}
|
|
.custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
width: calc(100% - 24px);
|
}
|
|
:deep(.el-tree-node__content) {
|
box-sizing: content-box;
|
padding: 5px 0;
|
}
|
.titleSlotRight {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
</style>
|
