189 lines
3.9 KiB
Vue
189 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>
|