mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-11-13 22:23:48 +08:00
73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<!--
|
||
* 组织架构
|
||
*
|
||
* @Author: 1024创新实验室-主任：卓大
|
||
* @Date: 2022-08-08 20:46:18
|
||
* @Wechat: zhuda1024
|
||
* @Email: lab1024@163.com
|
||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||
-->
|
||
<template>
|
||
<div class="height100">
|
||
<a-row :gutter="16" class="height100">
|
||
<a-col :span="6">
|
||
<DepartmentTree ref="departmentTree" />
|
||
</a-col>
|
||
|
||
<a-col :span="18" class="height100">
|
||
<div class="employee-box height100">
|
||
<!-- <DepartmentChildren style="flex-grow: 1" :breadcrumb="breadcrumb" :selectedDepartmentChildren="selectedDepartmentChildren" /> -->
|
||
<EmployeeList style="flex-grow: 2.5" class="employee" :departmentId="selectedDepartmentId" />
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import _ from 'lodash';
|
||
import { computed, ref } from 'vue';
|
||
import DepartmentChildren from './components/department-children/index.vue';
|
||
import DepartmentTree from './components/department-tree/index.vue';
|
||
import EmployeeList from './components/employee-list/index.vue';
|
||
|
||
const departmentTree = ref();
|
||
|
||
// 部门 面包屑
|
||
const breadcrumb = computed(() => {
|
||
if (departmentTree.value) {
|
||
return departmentTree.value.breadcrumb;
|
||
}
|
||
return [];
|
||
});
|
||
|
||
// 当前选中部门的孩子
|
||
const selectedDepartmentChildren = computed(() => {
|
||
if (departmentTree.value) {
|
||
return departmentTree.value.selectedDepartmentChildren;
|
||
}
|
||
return [];
|
||
});
|
||
|
||
// 当前选中的部门id
|
||
const selectedDepartmentId = computed(() => {
|
||
if (departmentTree.value) {
|
||
let selectedKeys = departmentTree.value.selectedKeys;
|
||
return _.isEmpty(selectedKeys) ? null : selectedKeys[0];
|
||
}
|
||
return null;
|
||
});
|
||
</script>
|
||
<style scoped lang="less">
|
||
.height100 {
|
||
height: 100%;
|
||
}
|
||
.employee-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.employee {
|
||
flex-grow: 2;
|
||
}
|
||
}
|
||
</style>
|