zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
dzc committed 2025-07-17 11:01:09 +08:00
1 parent 4cb85e2dea
commit 9114d634eb
2 files changed
+38 -90
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/DraggableDepTree/index.vue
+22 -42
View File
@@ -4,15 +4,11 @@
<!-- 树 -->
<div v-loading="state.loading" class="h-full flex flex-col m-1">
<!-- 头部区域 -->
<div class="flex items-center pb-2 shadow-gray-400 z-10" style="box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1)">
<div class="flex items-center pb-2 shadow-gray-400 z-10"
style="box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1)">
<div class="w-4/5">
<el-input
v-model="state.searchName"
suffix-icon="search"
:placeholder="placeholder"
clearable
@change="handleSearchInputChange"
/>
<el-input v-model="state.searchName" suffix-icon="search" :placeholder="placeholder" clearable
@change="handleSearchInputChange" />
</div>
<div class="flex-1 ml-[5%] leading-none" v-if="showExpand">
<el-dropdown :hide-on-click="false">
@@ -24,10 +20,8 @@
<el-dropdown-item>
<el-button
class="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
link
:icon="state.isExpand ? 'expand' : 'fold'"
@click="toggleRowExpansionAll(state.isExpand ? false : true)"
>
link :icon="state.isExpand ? 'expand' : 'fold'"
@click="toggleRowExpansionAll(state.isExpand ? false : true)">
{{ state.isExpand ? "折叠" : "展开" }}
</el-button>
</el-dropdown-item>
@@ -39,20 +33,12 @@
<!-- 树形结构 -->
<div class="flex-1 overflow-hidden hover:overflow-auto">
<el-tree
ref="treeRef"
:props="props.props"
:data="state.treeDataList"
:expand-on-click-node="false"
node-key="id"
:highlight-current="nodeClickable ? true : false"
default-expand-all
show-checkbox
@node-click="handleNodeClick"
@check="handleCheck"
>
<el-tree ref="treeRef" :props="props.props" :data="state.treeDataList" :expand-on-click-node="false"
node-key="id" :highlight-current="nodeClickable ? true : false" default-expand-all show-checkbox
@node-click="handleNodeClick" @check="handleCheck">
<template #default="{ node, data }">
<el-tooltip v-if="data.isLock" effect="dark" :content="$t('sysuser.noDataScopeTip')" placement="right">
<el-tooltip v-if="data.isLock" effect="dark" :content="$t('sysuser.noDataScopeTip')"
placement="right">
<span>
{{ node.label }}
<SvgIcon name="ele-Lock" />
@@ -63,27 +49,19 @@
</div>
<!-- 底部区域 -->
<div
class="flex justify-center items-center pt-2 z-50 sticky bottom-0 overflow-hidden"
style="box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1)"
>
<el-switch
v-model="state.switch"
@change="handleSwitchChange"
:inactive-text="switchInactiveText"
<div class="flex justify-center items-center pt-2 z-50 sticky bottom-0 overflow-hidden"
style="box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1)">
<el-switch v-model="state.switch" @change="handleSwitchChange" :inactive-text="switchInactiveText"
:active-text="switchActiveText"
:disabled="nodeClickable && state.checkedTreeNodes.length > 0"
/>
:disabled="nodeClickable && state.checkedTreeNodes.length > 0" />
</div>
</div>
</pane>
<pane :size="100 - state.treeWidth" class="pl-1 relative">
<!-- 折叠按钮 -->
<div
class="w-[12px] h-[56px] bg-gray-200 absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer rounded-tr-2xl rounded-br-2xl"
@click="handleClickTreeFold()"
>
<div class="w-[12px] h-[56px] bg-gray-200 absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer rounded-tr-2xl rounded-br-2xl"
@click="handleClickTreeFold()">
<i class="text-gray-400 inline-block text-center leading-[62px] hover:opacity-50">
<el-icon>
<ArrowLeftBold v-if="state.treeWidth > 0" />
@@ -236,17 +214,19 @@ defineExpose({
</script>
<style>
.splitpanes--vertical > .splitpanes__splitter {
.splitpanes--vertical>.splitpanes__splitter {
background: var(--el-color-primary);
/* min-width: 2px; */
width: 2px;
transition: all 0.3s ease;
}
.splitpanes--vertical > .splitpanes__splitter:active {
.splitpanes--vertical>.splitpanes__splitter:active {
background: var(--el-color-primary);
opacity: 0.6;
}
.splitpanes--vertical > .splitpanes__splitter:hover {
.splitpanes--vertical>.splitpanes__splitter:hover {
background: var(--el-color-primary);
opacity: 0.6;
}