195 lines
3.9 KiB
Vue
195 lines
3.9 KiB
Vue
<template>
|
|
<div class="head-container">
|
|
<div class="head-container-header">
|
|
<div class="head-container-header-input">
|
|
<el-input
|
|
v-model="searchName"
|
|
suffix-icon="search"
|
|
:placeholder="placeholder"
|
|
clearable
|
|
@change="getdeptTree"
|
|
/>
|
|
</div>
|
|
<div class="head-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="buttonClass"
|
|
link
|
|
type="primary"
|
|
:icon="isExpand ? 'expand' : 'fold'"
|
|
@click="toggleRowExpansionAll(isExpand ? false : true)"
|
|
>
|
|
{{ isExpand ? "折叠" : "展开" }}
|
|
</el-button>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
<el-tree
|
|
class="mt20"
|
|
:data="state.List"
|
|
:props="props.props"
|
|
:expand-on-click-node="false"
|
|
ref="deptTreeRef"
|
|
:loading="state.localLoading"
|
|
node-key="id"
|
|
highlight-current
|
|
default-expand-all
|
|
@node-click="handleNodeClick"
|
|
>
|
|
<template #default="{ node, data }" v-if="$slots.default">
|
|
<slot :node="node" :data="data"></slot>
|
|
</template>
|
|
</el-tree>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="query-tree">
|
|
import { useMessage } from "/@/hooks/message"
|
|
const emit = defineEmits(["search", "nodeClick"])
|
|
|
|
const props = defineProps({
|
|
/**
|
|
* 树结构属性配置。
|
|
*
|
|
* @default { label: 'name', children: 'children', value: 'id' }
|
|
*/
|
|
props: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
label: "name",
|
|
children: "children",
|
|
value: "id",
|
|
}
|
|
},
|
|
},
|
|
|
|
/**
|
|
* 输入框占位符。
|
|
*
|
|
* @default ''
|
|
*/
|
|
placeholder: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
|
|
/**
|
|
* 是否显示加载中状态。
|
|
*
|
|
* @default false
|
|
*/
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
|
|
/**
|
|
* 查询函数，必须返回 Promise 类型数据。
|
|
*/
|
|
query: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
|
|
/**
|
|
* 是否显示折叠控制
|
|
*/
|
|
showExpand: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const state = reactive({
|
|
List: [], // 树形结构列表数据
|
|
localLoading: props.loading, // 是否加载中
|
|
})
|
|
|
|
const deptTreeRef = ref() // 部门树形结构组件实例引用
|
|
const searchName = ref() // 查询关键字
|
|
const isExpand = ref(true) // 是否展开所有节点
|
|
|
|
const buttonClass = computed(() => {
|
|
return ["!h-[20px]", "reset-margin", "!text-gray-500", "dark:!text-white", "dark:hover:!text-primary"]
|
|
})
|
|
|
|
/**
|
|
* 点击树形结构节点触发的事件。
|
|
*
|
|
* @param item 被点击的节点数据。
|
|
*/
|
|
const handleNodeClick = (item: any) => {
|
|
emit("nodeClick", item)
|
|
}
|
|
|
|
/**
|
|
* 获取部门树形结构数据。
|
|
*/
|
|
const getdeptTree = () => {
|
|
if (props.query instanceof Function) {
|
|
state.localLoading = true
|
|
|
|
// 调用传入的查询函数，并将查询关键字作为参数传入
|
|
const result = props.query(unref(searchName))
|
|
|
|
// 如果查询结果为 Promise 类型，则进行后续处理
|
|
if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
|
|
result
|
|
.then((r: any) => {
|
|
state.List = r.data
|
|
})
|
|
.catch((err) => {
|
|
useMessage().error(err.msg)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 切换所有节点的展开/收起状态。
|
|
*
|
|
* @param status 目标状态，true 为展开，false 为收起。
|
|
*/
|
|
const toggleRowExpansionAll = (status) => {
|
|
isExpand.value = status
|
|
const nodes = deptTreeRef.value.store._getAllNodes()
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
nodes[i].expanded = status
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
getdeptTree()
|
|
})
|
|
|
|
// 方便父组件调用刷新树方法
|
|
defineExpose({
|
|
getdeptTree,
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.head-container {
|
|
&-header {
|
|
display: flex;
|
|
align-items: center;
|
|
&-input {
|
|
width: 90%;
|
|
}
|
|
&-dropdown {
|
|
flex: 1;
|
|
margin-left: 5%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|