11d5fb57a7
- 회사(대표이사) → 1단계 부서 → 2단계 → 3단계 하향식 트리 구조 - 부서 간 수직/수평 연결선으로 계층 시각화 - 미배치 직원 패널을 상단 접이식으로 변경 - 부서 카드 클릭 시 하위 부서 펼침/접기 - drag & drop 배치 기능 유지
407 lines
26 KiB
PHP
407 lines
26 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '조직도 관리')
|
|
|
|
@section('content')
|
|
<div x-data="orgChart()" x-init="init()">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
|
<i class="ri-organization-chart text-purple-600"></i>
|
|
조직도 관리
|
|
</h1>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-sm text-gray-500" x-text="`전체 ${totalEmployees}명 | 배치 ${assignedCount}명 | 미배치 ${unassignedCount}명`"></span>
|
|
<a href="{{ route('rd.index') }}" class="bg-white hover:bg-gray-100 text-gray-700 px-4 py-2 rounded-lg border transition text-sm">
|
|
<i class="ri-arrow-left-line"></i> 돌아가기
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 안내 -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg px-4 py-3 mb-6 text-sm text-blue-700 flex items-start gap-2">
|
|
<i class="ri-information-line text-lg shrink-0 mt-0.5"></i>
|
|
<span>직원 카드를 드래그하여 부서에 배치하거나, 미배치 영역으로 이동할 수 있습니다. 변경은 즉시 저장됩니다.</span>
|
|
</div>
|
|
|
|
<!-- 미배치 직원 패널 (상단 접이식) -->
|
|
<div x-data="{ panelOpen: unassignedCount > 0 }" class="mb-8">
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
|
|
<div class="flex items-center gap-2 px-4 py-3 bg-orange-50 border-b border-orange-200 rounded-t-lg cursor-pointer select-none"
|
|
@click="panelOpen = !panelOpen">
|
|
<i class="ri-arrow-down-s-line transition-transform text-gray-400" :class="!panelOpen && '-rotate-90'"></i>
|
|
<i class="ri-user-unfollow-line text-orange-500"></i>
|
|
<span class="font-semibold text-gray-700 text-sm">미배치 직원</span>
|
|
<span class="bg-orange-100 text-orange-600 text-xs font-bold px-2 py-0.5 rounded-full" x-text="unassignedCount"></span>
|
|
<div class="ml-auto flex items-center gap-2" @click.stop>
|
|
<input type="text" x-model="searchUnassigned" placeholder="이름 검색..."
|
|
class="px-3 py-1 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
style="width: 160px;">
|
|
</div>
|
|
</div>
|
|
<div x-show="panelOpen" x-collapse>
|
|
<div id="unassigned-zone" class="p-3 flex flex-wrap gap-2" data-department-id="" style="min-height: 50px;">
|
|
<template x-for="emp in filteredUnassigned" :key="emp.id">
|
|
<div class="employee-card bg-white border border-gray-200 rounded-lg px-3 py-2 cursor-grab hover:shadow-md hover:border-purple-300 transition flex items-center gap-2"
|
|
:data-employee-id="emp.id">
|
|
<div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-white shrink-0"
|
|
:style="`background-color: ${getAvatarColor(emp.display_name)}`"
|
|
x-text="emp.display_name?.charAt(0) || '?'"></div>
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-medium text-gray-800 whitespace-nowrap" x-text="emp.display_name"></p>
|
|
<p class="text-xs text-gray-400 whitespace-nowrap" x-text="emp.position_label || ''"></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div x-show="filteredUnassigned.length === 0" class="w-full text-center text-gray-400 text-xs py-4">
|
|
<i class="ri-user-smile-line text-2xl block mb-1"></i>
|
|
미배치 직원 없음
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 클래식 조직도 (하향식 트리) -->
|
|
<div class="overflow-x-auto pb-8">
|
|
<div class="org-tree" style="min-width: fit-content;">
|
|
<!-- 최상단: 회사 -->
|
|
<div class="org-level flex justify-center">
|
|
<div class="org-node-wrapper">
|
|
<div class="org-node org-node-root bg-gradient-to-br from-purple-600 to-indigo-700 text-white rounded-xl px-6 py-4 shadow-lg text-center">
|
|
<div class="flex items-center justify-center gap-2 mb-1">
|
|
<i class="ri-building-4-line text-lg"></i>
|
|
<span class="font-bold text-lg" x-text="companyName"></span>
|
|
</div>
|
|
<p class="text-purple-200 text-sm" x-text="ceoName ? `대표이사 ${ceoName}` : ''"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 수직 연결선 (회사 → 1단계 부서) -->
|
|
<div class="org-connector flex justify-center" x-show="rootDepartments.length > 0">
|
|
<div class="w-px bg-gray-300" style="height: 32px;"></div>
|
|
</div>
|
|
|
|
<!-- 수평 연결선 + 1단계 부서 -->
|
|
<template x-if="rootDepartments.length > 0">
|
|
<div>
|
|
<!-- 수평선 (1단계 부서가 2개 이상일 때) -->
|
|
<div class="flex justify-center" x-show="rootDepartments.length > 1">
|
|
<div class="org-h-line bg-gray-300" style="height: 1px;"
|
|
:style="`width: calc(${(rootDepartments.length - 1)} * 240px)`"></div>
|
|
</div>
|
|
|
|
<!-- 1단계 부서들 -->
|
|
<div class="org-level flex justify-center gap-0">
|
|
<template x-for="dept in rootDepartments" :key="dept.id">
|
|
<div class="flex flex-col items-center" style="min-width: 240px;">
|
|
<!-- 수직선 (수평선 → 부서 카드) -->
|
|
<div class="w-px bg-gray-300" style="height: 32px;" x-show="rootDepartments.length > 1"></div>
|
|
|
|
<!-- 부서 카드 -->
|
|
<div class="org-node bg-white border-2 border-purple-300 rounded-xl shadow-sm text-center cursor-pointer select-none hover:shadow-md transition"
|
|
style="width: 200px;"
|
|
@click="toggleDept(dept.id)">
|
|
<div class="bg-purple-50 px-4 py-2.5 rounded-t-xl border-b border-purple-100">
|
|
<div class="flex items-center justify-center gap-1.5">
|
|
<i class="ri-building-2-line text-purple-600 text-sm"></i>
|
|
<span class="font-bold text-gray-800 text-sm" x-text="dept.name"></span>
|
|
</div>
|
|
<span class="text-xs text-gray-400" x-text="dept.code ? `(${dept.code})` : ''"></span>
|
|
</div>
|
|
<div class="dept-drop-zone px-2 py-2" :data-department-id="dept.id" style="min-height: 40px;">
|
|
<template x-for="emp in getDeptEmployees(dept.id)" :key="emp.id">
|
|
<div class="employee-card flex items-center gap-1.5 bg-gray-50 rounded-lg px-2 py-1 mb-1 cursor-grab hover:bg-purple-50 transition text-left"
|
|
:data-employee-id="emp.id">
|
|
<div class="w-5 h-5 rounded-full flex items-center justify-center text-white shrink-0" style="font-size: 9px; font-weight: 700;"
|
|
:style="`background-color: ${getAvatarColor(emp.display_name)}`"
|
|
x-text="emp.display_name?.charAt(0) || '?'"></div>
|
|
<span class="text-xs text-gray-700 truncate" x-text="emp.display_name" style="max-width: 110px;"></span>
|
|
<button class="ml-auto text-gray-300 hover:text-red-500 transition shrink-0" title="미배치"
|
|
@click.stop="unassignEmployee(emp.id)">
|
|
<i class="ri-close-line" style="font-size: 11px;"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<div x-show="getDeptEmployees(dept.id).length === 0" class="text-center text-gray-300 text-xs py-1">
|
|
드래그하여 배치
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 px-2 py-1 rounded-b-xl border-t border-gray-100 text-xs text-gray-400"
|
|
x-text="`${getDeptTotalCount(dept.id)}명`"></div>
|
|
</div>
|
|
|
|
<!-- 하위 부서 연결 -->
|
|
<template x-if="getChildDepartments(dept.id).length > 0 && expandedDepts.includes(dept.id)">
|
|
<div class="flex flex-col items-center">
|
|
<!-- 수직 연결선 -->
|
|
<div class="w-px bg-gray-300" style="height: 24px;"></div>
|
|
|
|
<!-- 수평선 (2단계 부서가 2개 이상일 때) -->
|
|
<div x-show="getChildDepartments(dept.id).length > 1" class="flex justify-center">
|
|
<div class="bg-gray-300" style="height: 1px;"
|
|
:style="`width: calc(${(getChildDepartments(dept.id).length - 1)} * 200px)`"></div>
|
|
</div>
|
|
|
|
<!-- 2단계 부서들 -->
|
|
<div class="flex justify-center gap-0">
|
|
<template x-for="child in getChildDepartments(dept.id)" :key="child.id">
|
|
<div class="flex flex-col items-center" style="min-width: 200px;">
|
|
<!-- 수직선 -->
|
|
<div class="w-px bg-gray-300" style="height: 24px;" x-show="getChildDepartments(dept.id).length > 1"></div>
|
|
|
|
<!-- 2단계 부서 카드 -->
|
|
<div class="org-node bg-white border border-indigo-200 rounded-lg shadow-sm text-center hover:shadow-md transition"
|
|
style="width: 180px;">
|
|
<div class="bg-indigo-50 px-3 py-2 rounded-t-lg border-b border-indigo-100">
|
|
<div class="flex items-center justify-center gap-1">
|
|
<i class="ri-git-branch-line text-indigo-400 text-xs"></i>
|
|
<span class="font-semibold text-gray-700 text-xs" x-text="child.name"></span>
|
|
</div>
|
|
</div>
|
|
<div class="dept-drop-zone px-2 py-1.5" :data-department-id="child.id" style="min-height: 32px;">
|
|
<template x-for="emp in getDeptEmployees(child.id)" :key="emp.id">
|
|
<div class="employee-card flex items-center gap-1 bg-gray-50 rounded px-1.5 py-0.5 mb-0.5 cursor-grab hover:bg-indigo-50 transition text-left"
|
|
:data-employee-id="emp.id">
|
|
<div class="w-4 h-4 rounded-full flex items-center justify-center text-white shrink-0" style="font-size: 8px; font-weight: 700;"
|
|
:style="`background-color: ${getAvatarColor(emp.display_name)}`"
|
|
x-text="emp.display_name?.charAt(0) || '?'"></div>
|
|
<span class="text-xs text-gray-600 truncate" x-text="emp.display_name" style="max-width: 100px;"></span>
|
|
<button class="ml-auto text-gray-300 hover:text-red-500 transition shrink-0" title="미배치"
|
|
@click.stop="unassignEmployee(emp.id)">
|
|
<i class="ri-close-line" style="font-size: 10px;"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<div x-show="getDeptEmployees(child.id).length === 0" class="text-center text-gray-300 py-0.5" style="font-size: 10px;">
|
|
드래그 배치
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 px-2 py-0.5 rounded-b-lg border-t border-gray-100 text-xs text-gray-400"
|
|
x-text="`${getDeptTotalCount(child.id)}명`"></div>
|
|
</div>
|
|
|
|
<!-- 3단계 하위 부서 -->
|
|
<template x-if="getChildDepartments(child.id).length > 0">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-px bg-gray-300" style="height: 20px;"></div>
|
|
<div x-show="getChildDepartments(child.id).length > 1" class="flex justify-center">
|
|
<div class="bg-gray-300" style="height: 1px;"
|
|
:style="`width: calc(${(getChildDepartments(child.id).length - 1)} * 170px)`"></div>
|
|
</div>
|
|
<div class="flex justify-center gap-0">
|
|
<template x-for="gc in getChildDepartments(child.id)" :key="gc.id">
|
|
<div class="flex flex-col items-center" style="min-width: 170px;">
|
|
<div class="w-px bg-gray-300" style="height: 20px;" x-show="getChildDepartments(child.id).length > 1"></div>
|
|
<div class="bg-white border border-gray-200 rounded-lg shadow-sm text-center" style="width: 150px;">
|
|
<div class="bg-gray-50 px-2 py-1.5 rounded-t-lg border-b border-gray-100">
|
|
<span class="text-xs font-medium text-gray-600" x-text="gc.name"></span>
|
|
</div>
|
|
<div class="dept-drop-zone px-1.5 py-1" :data-department-id="gc.id" style="min-height: 28px;">
|
|
<template x-for="emp in getDeptEmployees(gc.id)" :key="emp.id">
|
|
<div class="employee-card flex items-center gap-1 bg-gray-50 rounded px-1 py-0.5 mb-0.5 cursor-grab hover:bg-gray-100 transition text-left"
|
|
:data-employee-id="emp.id">
|
|
<div class="w-4 h-4 rounded-full flex items-center justify-center text-white shrink-0" style="font-size: 7px; font-weight: 700;"
|
|
:style="`background-color: ${getAvatarColor(emp.display_name)}`"
|
|
x-text="emp.display_name?.charAt(0) || '?'"></div>
|
|
<span class="text-xs text-gray-600 truncate" x-text="emp.display_name" style="max-width: 85px;"></span>
|
|
<button class="ml-auto text-gray-300 hover:text-red-500 transition shrink-0" @click.stop="unassignEmployee(emp.id)">
|
|
<i class="ri-close-line" style="font-size: 9px;"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<div x-show="getDeptEmployees(gc.id).length === 0" class="text-center text-gray-300 py-0.5" style="font-size: 9px;">
|
|
드래그
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div x-show="rootDepartments.length === 0" class="text-center text-gray-400 py-12">
|
|
<i class="ri-building-2-line text-4xl block mb-2"></i>
|
|
<p>등록된 부서가 없습니다. 먼저 부서를 등록해주세요.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 저장 중 토스트 -->
|
|
<div x-show="saving" x-transition
|
|
class="fixed bottom-6 right-6 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg text-sm flex items-center gap-2 z-50">
|
|
<i class="ri-loader-4-line animate-spin"></i> 저장 중...
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.org-tree { display: flex; flex-direction: column; align-items: center; }
|
|
.employee-card.sortable-ghost { opacity: 0.4; }
|
|
.employee-card.sortable-drag { box-shadow: 0 8px 25px rgba(0,0,0,0.15); z-index: 999; }
|
|
.dept-drop-zone.sortable-drag-over { background-color: #F3E8FF; border-radius: 8px; }
|
|
</style>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function orgChart() {
|
|
return {
|
|
departments: @json($departments),
|
|
employees: @json($employees),
|
|
companyName: @json($companyName),
|
|
ceoName: @json($ceoName),
|
|
searchUnassigned: '',
|
|
saving: false,
|
|
sortables: [],
|
|
expandedDepts: [],
|
|
|
|
get totalEmployees() { return this.employees.length; },
|
|
get assignedCount() { return this.employees.filter(e => e.department_id).length; },
|
|
get unassignedCount() { return this.employees.filter(e => !e.department_id).length; },
|
|
get unassignedEmployees() { return this.employees.filter(e => !e.department_id); },
|
|
get filteredUnassigned() {
|
|
if (!this.searchUnassigned) return this.unassignedEmployees;
|
|
const s = this.searchUnassigned.toLowerCase();
|
|
return this.unassignedEmployees.filter(e => e.display_name?.toLowerCase().includes(s));
|
|
},
|
|
get rootDepartments() {
|
|
return this.departments.filter(d => !d.parent_id);
|
|
},
|
|
|
|
getChildDepartments(parentId) {
|
|
return this.departments.filter(d => d.parent_id === parentId);
|
|
},
|
|
|
|
getDeptEmployees(deptId) {
|
|
return this.employees.filter(e => e.department_id === deptId);
|
|
},
|
|
|
|
getDeptTotalCount(deptId) {
|
|
let count = this.employees.filter(e => e.department_id === deptId).length;
|
|
const children = this.departments.filter(d => d.parent_id === deptId);
|
|
for (const child of children) {
|
|
count += this.getDeptTotalCount(child.id);
|
|
}
|
|
return count;
|
|
},
|
|
|
|
toggleDept(deptId) {
|
|
const idx = this.expandedDepts.indexOf(deptId);
|
|
if (idx >= 0) {
|
|
this.expandedDepts.splice(idx, 1);
|
|
} else {
|
|
this.expandedDepts.push(deptId);
|
|
}
|
|
// 하위 부서 드롭존 재초기화
|
|
this.$nextTick(() => this.initDropZones());
|
|
},
|
|
|
|
getAvatarColor(name) {
|
|
if (!name) return '#9CA3AF';
|
|
const colors = ['#6366F1','#8B5CF6','#EC4899','#F59E0B','#10B981','#3B82F6','#EF4444','#14B8A6','#F97316','#6D28D9'];
|
|
let hash = 0;
|
|
for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
|
|
return colors[Math.abs(hash) % colors.length];
|
|
},
|
|
|
|
init() {
|
|
// 하위 부서가 있는 1단계 부서는 기본 펼침
|
|
this.expandedDepts = this.rootDepartments
|
|
.filter(d => this.getChildDepartments(d.id).length > 0)
|
|
.map(d => d.id);
|
|
|
|
this.$nextTick(() => {
|
|
this.initSortable();
|
|
this.initDropZones();
|
|
});
|
|
},
|
|
|
|
initSortable() {
|
|
const unassignedEl = document.getElementById('unassigned-zone');
|
|
if (unassignedEl && !unassignedEl._sortableInitialized) {
|
|
unassignedEl._sortableInitialized = true;
|
|
this.sortables.push(new Sortable(unassignedEl, {
|
|
group: 'org-chart',
|
|
animation: 150,
|
|
ghostClass: 'sortable-ghost',
|
|
dragClass: 'sortable-drag',
|
|
onAdd: (evt) => this.handleDrop(evt),
|
|
}));
|
|
}
|
|
},
|
|
|
|
initDropZones() {
|
|
document.querySelectorAll('.dept-drop-zone').forEach(el => {
|
|
if (el._sortableInitialized) return;
|
|
el._sortableInitialized = true;
|
|
this.sortables.push(new Sortable(el, {
|
|
group: 'org-chart',
|
|
animation: 150,
|
|
ghostClass: 'sortable-ghost',
|
|
dragClass: 'sortable-drag',
|
|
onAdd: (evt) => this.handleDrop(evt),
|
|
}));
|
|
});
|
|
},
|
|
|
|
handleDrop(evt) {
|
|
const employeeId = parseInt(evt.item.dataset.employeeId);
|
|
const targetDeptId = evt.to.dataset.departmentId;
|
|
const newDeptId = targetDeptId ? parseInt(targetDeptId) : null;
|
|
|
|
const emp = this.employees.find(e => e.id === employeeId);
|
|
if (emp) emp.department_id = newDeptId;
|
|
|
|
this.saveAssignment(employeeId, newDeptId);
|
|
},
|
|
|
|
async saveAssignment(employeeId, departmentId) {
|
|
this.saving = true;
|
|
try {
|
|
const url = departmentId
|
|
? '{{ route("rd.org-chart.assign") }}'
|
|
: '{{ route("rd.org-chart.unassign") }}';
|
|
const body = departmentId
|
|
? { employee_id: employeeId, department_id: departmentId }
|
|
: { employee_id: employeeId };
|
|
|
|
await fetch(url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify(body),
|
|
});
|
|
} catch (e) {
|
|
console.error('조직도 저장 실패:', e);
|
|
} finally {
|
|
this.saving = false;
|
|
}
|
|
},
|
|
|
|
async unassignEmployee(empId) {
|
|
const emp = this.employees.find(e => e.id === empId);
|
|
if (emp) {
|
|
emp.department_id = null;
|
|
await this.saveAssignment(empId, null);
|
|
}
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
@endpush
|