调整采购入库和修改可拖拽部门树组件
This commit is contained in:
weiwei committed
1 parent
f0105c0325
commit
6177e3e053
5 files changed
+368
-403
No files matched your search
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<Splitpanes @resize="treeWidth = $event[0].size">
|
||||
<pane :size="treeWidth">
|
||||
<div class="container">
|
||||
<!-- 头部区域 -->
|
||||
<div class="container-header">
|
||||
<div class="container-header-input">
|
||||
<el-input v-model="searchName" suffix-icon="search" :placeholder="placeholder" clearable @change="getTreeData" />
|
||||
</div>
|
||||
<div class="container-header-dropdown" v-if="showExpand">
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<el-icon style="transform: rotate(90deg)">
|
||||
<MoreFilled />
|
||||
</el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
link
|
||||
:icon="isExpand ? 'expand' : 'fold'"
|
||||
@click="toggleRowExpansionAll(isExpand ? false : true)"
|
||||
>
|
||||
{{ isExpand ? "折叠" : "展开" }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 树形结构 -->
|
||||
<div class="container-tree">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:props="props.props"
|
||||
:data="state.treeDataList"
|
||||
:expand-on-click-node="false"
|
||||
:loading="state.loading"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 底部区域 -->
|
||||
<div class="container-switch">
|
||||
<el-switch
|
||||
v-model="state.isDeep"
|
||||
@change="handleTreeDeepSearch"
|
||||
:inactive-text="switchInactiveText"
|
||||
:active-text="switchActiveText"
|
||||
:disabled="checkedTreeNodes.length > 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</pane>
|
||||
|
||||
<pane :size="100 - treeWidth" class="pl-4 relative">
|
||||
<!-- 拖拽线 -->
|
||||
<div
|
||||
class="w-[12px] h-[56px] absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer"
|
||||
@click="handleClickDepTreeDrawer(isOpen)"
|
||||
style="background-color: #e3e9ed; border-top-right-radius: 10px; border-bottom-right-radius: 10px"
|
||||
>
|
||||
<i class="drawer-icon">
|
||||
<el-icon>
|
||||
<ArrowLeftBold v-if="treeWidth > 0" />
|
||||
<ArrowRightBold v-else />
|
||||
</el-icon>
|
||||
</i>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-full overflow-auto">
|
||||
<slot name="default" />
|
||||
</div>
|
||||
</pane>
|
||||
</Splitpanes>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="DraggableDepTree">
|
||||
import { useMessage } from "/@/hooks/message"
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
placeholder?: string // 输入框占位符
|
||||
loading?: boolean // 加载中的状态
|
||||
showExpand?: boolean // 折叠控制
|
||||
query?: (searchName?: string) => Promise<any> // 查询函数
|
||||
props?: object
|
||||
switchInactiveText?: string | undefined
|
||||
switchActiveText?: string | undefined
|
||||
defaultTreeWidth?: number | string
|
||||
}>(),
|
||||
{
|
||||
placeholder: "",
|
||||
loading: false,
|
||||
showExpand: true,
|
||||
query: () => new Promise((resolve) => resolve([])),
|
||||
props: () => {
|
||||
return {
|
||||
label: "name",
|
||||
children: "children",
|
||||
value: "id",
|
||||
}
|
||||
},
|
||||
switchInactiveText: "当前级",
|
||||
switchActiveText: "当前级及子级",
|
||||
defaultTreeWidth: 20,
|
||||
},
|
||||
)
|
||||
const emit = defineEmits(["nodeClick", "treeDeepSearch", "treeNodeCheckChange"])
|
||||
|
||||
const treeRef = ref() // 树组件的引用
|
||||
const searchName = ref() // 查询关键字
|
||||
const isExpand = ref(true) // 是否展开所有节点
|
||||
const isOpen = ref(true) // 是否展开树组件
|
||||
const treeWidth = ref<number>(Number(props.defaultTreeWidth)) // 部门树组件宽度
|
||||
const checkedTreeNodes = ref([])
|
||||
const state = reactive({
|
||||
treeDataList: [],
|
||||
loading: props.loading,
|
||||
isDeep: false,
|
||||
})
|
||||
|
||||
// 获取部门树形结构数据
|
||||
const getTreeData = () => {
|
||||
if (props.query instanceof Function) {
|
||||
state.loading = true
|
||||
|
||||
// 调用传入的查询函数，并将查询关键字作为参数传入
|
||||
const result = props.query(unref(searchName))
|
||||
|
||||
// 如果查询结果为 Promise 类型，则进行后续处理
|
||||
if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
|
||||
result
|
||||
.then((r: any) => {
|
||||
state.treeDataList = r.data
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
.finally(() => (state.loading = false))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const tempTreeWidth = ref()
|
||||
// 点击展开树组件
|
||||
const handleClickDepTreeDrawer = (isDrawerOpen: boolean) => {
|
||||
if (isDrawerOpen) {
|
||||
tempTreeWidth.value = treeWidth.value
|
||||
treeWidth.value = 0
|
||||
} else {
|
||||
treeWidth.value = tempTreeWidth.value
|
||||
}
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
// 点击树形结构节点
|
||||
const handleNodeClick = (item: any) => emit("nodeClick", item)
|
||||
|
||||
// 节点深度搜索
|
||||
const handleTreeDeepSearch = () => emit("treeDeepSearch", state.isDeep)
|
||||
|
||||
// 勾选树节点时
|
||||
const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
|
||||
const checkedNodes = treeRef.value.getCheckedNodes()
|
||||
checkedTreeNodes.value = checkedNodes
|
||||
emit("treeNodeCheckChange", checkedNodes)
|
||||
}
|
||||
|
||||
// 切换所有节点的展开/收起状态。status：true 为展开，false 为收起
|
||||
const toggleRowExpansionAll = (status: boolean) => {
|
||||
isExpand.value = status
|
||||
const nodes = treeRef.value.store._getAllNodes()
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
nodes[i].expanded = status
|
||||
}
|
||||
}
|
||||
|
||||
// 勾选树节点关闭switch
|
||||
watch(checkedTreeNodes, (val) => {
|
||||
if (checkedTreeNodes.value.length > 0) {
|
||||
state.isDeep = false
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getTreeData()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
getTreeData,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
|
||||
&-input {
|
||||
width: 90%;
|
||||
}
|
||||
&-dropdown {
|
||||
flex: 1;
|
||||
margin-left: 5%;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-tree {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-switch {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.splitpanes--vertical > .splitpanes__splitter {
|
||||
background: var(--el-color-primary);
|
||||
/* min-width: 2px; */
|
||||
width: 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.splitpanes--vertical > .splitpanes__splitter:active {
|
||||
background: var(--el-color-primary);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.splitpanes--vertical > .splitpanes__splitter:hover {
|
||||
background: var(--el-color-primary);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.drawer-icon {
|
||||
color: #b7bdc8;
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
}
|
||||
.drawer-icon:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
/* .drawer-icon::before {
|
||||
content: "<";
|
||||
background: none;
|
||||
box-sizing: inherit;
|
||||
color: #b7bdc8;
|
||||
font-size: 1em;
|
||||
} */
|
||||
</style>
|
||||
Reference in new issue
Block a user