mirror of
https://github.com/ccmjga/zhilu-admin
synced 2026-04-08 22:47:36 +00:00
新增部门子级查询功能，更新相关API接口和前端组件，优化部门树形结构展示，支持父子部门关系的处理
This commit is contained in:
Chuck1sn
87
frontend/src/components/common/department/DepartmentTree.vue
Normal file
87
frontend/src/components/common/department/DepartmentTree.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="department-tree">
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!departmentTree || departmentTree.length === 0" class="flex flex-col items-center justify-center py-8">
|
||||
<svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
<p class="mt-2 text-sm text-gray-500">暂无部门数据</p>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="flex justify-end mb-3 gap-2">
|
||||
<TableButton variant="secondary" size="xs" @click="toggleAllNodes" :title="isAllExpanded ? '收起所有部门' : '展开所有部门'">
|
||||
<template #icon>
|
||||
<svg v-if="isAllExpanded" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
<svg v-else class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</template>
|
||||
{{ isAllExpanded ? '收起所有' : '展开所有' }}
|
||||
</TableButton>
|
||||
</div>
|
||||
|
||||
<!-- 树形结构内容区域 -->
|
||||
<div class="max-h-[500px] overflow-y-auto p-2 bg-gray-50 border border-gray-200 rounded shadow-inner">
|
||||
<TreeNodeComponent v-for="node in departmentTree" :key="node.id" :node="node" :expand-all="expandAll"
|
||||
@add-child="handleAddChild" @edit="handleEditNode" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TableButton from "@/components/tables/TableButton.vue";
|
||||
import type { DepartmentTreeNode } from "@/composables/department/useDepartmentQuery";
|
||||
import { computed, defineEmits, defineProps, ref, watch } from "vue";
|
||||
import TreeNodeComponent from "./TreeNodeComponent.vue";
|
||||
|
||||
// 定义组件属性
|
||||
const props = defineProps<{
|
||||
departmentTree: DepartmentTreeNode[];
|
||||
}>();
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits<{
|
||||
(e: "add-child", node: DepartmentTreeNode): void;
|
||||
(e: "edit", node: DepartmentTreeNode): void;
|
||||
}>();
|
||||
|
||||
// 控制所有节点展开/折叠状态
|
||||
const expandAll = ref<boolean>(true);
|
||||
|
||||
// 通过计算属性提供展开状态
|
||||
const isAllExpanded = computed(() => expandAll.value);
|
||||
|
||||
// 监听树数据变化，当数据改变时重置展开状态
|
||||
watch(
|
||||
() => props.departmentTree,
|
||||
() => {
|
||||
// 当树数据变化时，默认展开所有节点
|
||||
expandAll.value = true;
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 切换所有节点的展开/折叠状态
|
||||
const toggleAllNodes = () => {
|
||||
expandAll.value = !expandAll.value;
|
||||
};
|
||||
|
||||
// 处理添加子部门
|
||||
const handleAddChild = (node: DepartmentTreeNode) => {
|
||||
emit("add-child", node);
|
||||
};
|
||||
|
||||
// 处理编辑节点
|
||||
const handleEditNode = (node: DepartmentTreeNode) => {
|
||||
emit("edit", node);
|
||||
};
|
||||
</script>
|
||||
129
frontend/src/components/common/department/TreeNodeComponent.vue
Normal file
129
frontend/src/components/common/department/TreeNodeComponent.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="relative mb-0.5">
|
||||
<div class="flex items-center py-1.5 px-2 cursor-pointer hover:bg-gray-100 rounded transition-colors group"
|
||||
@click="toggleExpand">
|
||||
<!-- 折叠/展开图标 -->
|
||||
<span class="mr-1.5 text-gray-500 cursor-pointer flex-shrink-0" v-if="node.children && node.children.length > 0">
|
||||
<svg v-if="localExpanded" class="w-4 h-4 transform transition-transform duration-200" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<svg v-else class="w-4 h-4 transform transition-transform duration-200" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="mr-1.5 text-gray-500 invisible flex-shrink-0" v-else>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<!-- 部门名称 -->
|
||||
<span class="text-sm font-medium text-gray-800 flex-grow cursor-pointer truncate" :title="node.name">
|
||||
{{ node.name }}
|
||||
</span>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="ml-auto hidden group-hover:flex flex-shrink-0">
|
||||
<button @click.stop="$emit('add-child', node)"
|
||||
class="text-gray-500 hover:text-blue-600 focus:outline-none transition-colors p-0.5" title="添加子部门">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button @click.stop="$emit('edit', node)"
|
||||
class="text-gray-500 hover:text-blue-600 focus:outline-none transition-colors ml-1 p-0.5" title="编辑部门">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<transition enter-active-class="transition-[height,opacity] duration-300 ease-in-out overflow-hidden"
|
||||
leave-active-class="transition-[height,opacity] duration-300 ease-in-out overflow-hidden" @enter="expandEnter"
|
||||
@after-enter="expandAfterEnter" @leave="expandLeave">
|
||||
<div v-if="localExpanded && node.children && node.children.length > 0"
|
||||
class="pl-4 border-l border-gray-200 ml-2 overflow-hidden">
|
||||
<TreeNodeComponent v-for="childNode in node.children" :key="childNode.id" :node="childNode"
|
||||
:expand-all="expandAll" @add-child="$emit('add-child', $event)" @edit="$emit('edit', $event)" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { DepartmentTreeNode } from "@/composables/department/useDepartmentQuery";
|
||||
import { defineEmits, defineProps, ref, watch } from "vue";
|
||||
|
||||
// 定义组件属性
|
||||
const props = defineProps<{
|
||||
node: DepartmentTreeNode;
|
||||
expandAll: boolean;
|
||||
}>();
|
||||
|
||||
// 定义事件
|
||||
defineEmits<{
|
||||
(e: "add-child", node: DepartmentTreeNode): void;
|
||||
(e: "edit", node: DepartmentTreeNode): void;
|
||||
}>();
|
||||
|
||||
// 本地展开状态，默认展开
|
||||
const localExpanded = ref(true);
|
||||
|
||||
// 监听expandAll属性变化
|
||||
watch(
|
||||
() => props.expandAll,
|
||||
(newVal) => {
|
||||
localExpanded.value = newVal;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// 切换展开状态
|
||||
const toggleExpand = () => {
|
||||
localExpanded.value = !localExpanded.value;
|
||||
};
|
||||
|
||||
// 展开动画处理函数
|
||||
const expandEnter = (element: Element) => {
|
||||
const el = element as HTMLElement;
|
||||
el.style.height = "0";
|
||||
el.style.opacity = "0";
|
||||
};
|
||||
|
||||
const expandAfterEnter = (element: Element) => {
|
||||
const el = element as HTMLElement;
|
||||
el.style.height = "";
|
||||
el.style.opacity = "";
|
||||
};
|
||||
|
||||
const expandLeave = (element: Element) => {
|
||||
const el = element as HTMLElement;
|
||||
el.style.height = `${el.scrollHeight}px`;
|
||||
|
||||
// 强制回流
|
||||
void el.offsetHeight;
|
||||
|
||||
el.style.height = "0";
|
||||
el.style.opacity = "0";
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.department-tree-node {
|
||||
position: relative;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.expand-enter-active,
|
||||
.expand-leave-active {
|
||||
transition: height 0.3s ease, opacity 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
7
frontend/src/components/common/department/index.ts
Normal file
7
frontend/src/components/common/department/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import DepartmentTree from "./DepartmentTree.vue";
|
||||
|
||||
export { DepartmentTree };
|
||||
|
||||
export default {
|
||||
DepartmentTree,
|
||||
};
|
||||
Reference in New Issue
Block a user