ff7947d5bd
- 결재선 0개 시 경고 메시지 + '결재선 바로 생성' 버튼 표시 - 결재선 있을 때 '새 결재선 추가' 링크 표시 - 빠른 결재선 생성 모달 (z-[60]): 인원 목록 / 결재선 편집 2단 레이아웃 - 부서별 펼침/접기, 이름 검색, SortableJS 드래그 순서 변경 - 저장 후 드롭다운 동적 갱신 + 새 결재선 자동 선택
1036 lines
53 KiB
PHP
1036 lines
53 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '휴가관리')
|
|
|
|
@section('content')
|
|
<div class="px-4 py-6">
|
|
{{-- 페이지 헤더 --}}
|
|
<div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4 mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">휴가관리</h1>
|
|
<p class="text-sm text-gray-500 mt-1">휴가 신청 시 결재가 자동 생성되며, 결재 승인/반려에 따라 휴가가 처리됩니다.</p>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2 sm:gap-3">
|
|
<button type="button" onclick="openLeaveModal()"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
휴가 신청
|
|
</button>
|
|
<button type="button" onclick="exportLeaves()"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium rounded-lg transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
엑셀 다운로드
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 탭 네비게이션 --}}
|
|
<div class="flex items-center gap-1 mb-4 border-b border-gray-200">
|
|
<button type="button" onclick="switchTab('list')" id="tab-list"
|
|
class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-blue-600 text-blue-600">
|
|
휴가신청
|
|
</button>
|
|
<button type="button" onclick="switchTab('balance')" id="tab-balance"
|
|
class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 hover:text-gray-700">
|
|
잔여연차
|
|
</button>
|
|
<button type="button" onclick="switchTab('stats')" id="tab-stats"
|
|
class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 hover:text-gray-700">
|
|
사용현황
|
|
</button>
|
|
</div>
|
|
|
|
{{-- 탭 콘텐츠 영역 --}}
|
|
<div id="leaves-content">
|
|
{{-- 휴가신청 탭 --}}
|
|
<div id="content-list">
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
{{-- 필터 --}}
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<x-filter-collapsible id="leaveFilter">
|
|
<form id="leaveFilterForm" class="flex flex-wrap gap-3 items-end">
|
|
<div style="flex: 1 1 180px; max-width: 260px;">
|
|
<label class="block text-xs text-gray-500 mb-1">검색</label>
|
|
<input type="text" name="q" placeholder="사원 이름..."
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div style="flex: 0 1 160px;">
|
|
<label class="block text-xs text-gray-500 mb-1">부서</label>
|
|
<select name="department_id"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="">전체 부서</option>
|
|
@foreach($departments as $dept)
|
|
<option value="{{ $dept->id }}">{{ $dept->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div style="flex: 0 1 130px;">
|
|
<label class="block text-xs text-gray-500 mb-1">유형</label>
|
|
<select name="leave_type"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="">전체 유형</option>
|
|
@foreach($typeMap as $key => $label)
|
|
<option value="{{ $key }}">{{ $label }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div style="flex: 0 1 120px;">
|
|
<label class="block text-xs text-gray-500 mb-1">상태</label>
|
|
<select name="status"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="">전체 상태</option>
|
|
@foreach($statusMap as $key => $label)
|
|
<option value="{{ $key }}">{{ $label }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div style="flex: 0 1 150px;">
|
|
<label class="block text-xs text-gray-500 mb-1">시작일</label>
|
|
<input type="date" name="date_from"
|
|
value="{{ now()->startOfYear()->toDateString() }}"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div style="flex: 0 1 150px;">
|
|
<label class="block text-xs text-gray-500 mb-1">종료일</label>
|
|
<input type="date" name="date_to"
|
|
value="{{ now()->toDateString() }}"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div class="shrink-0">
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white text-sm rounded-lg transition-colors">
|
|
검색
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</x-filter-collapsible>
|
|
</div>
|
|
|
|
{{-- HTMX 테이블 영역 --}}
|
|
<div id="leaves-table"
|
|
hx-get="{{ route('api.admin.hr.leaves.index') }}"
|
|
hx-vals='{"date_from": "{{ now()->startOfYear()->toDateString() }}", "date_to": "{{ now()->toDateString() }}"}'
|
|
hx-trigger="load"
|
|
hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
|
|
class="min-h-[200px]">
|
|
<div class="flex justify-center items-center p-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 잔여연차 탭 --}}
|
|
<div id="content-balance" class="hidden">
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex items-center gap-3">
|
|
<label class="text-sm text-gray-600 font-medium">연도:</label>
|
|
<select id="balanceYear" onchange="loadBalance()"
|
|
class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
@for($y = now()->year; $y >= now()->year - 2; $y--)
|
|
<option value="{{ $y }}">{{ $y }}년</option>
|
|
@endfor
|
|
</select>
|
|
|
|
{{-- 도움말 버튼 --}}
|
|
<button type="button"
|
|
hx-get="{{ route('hr.leaves.help') }}"
|
|
hx-target="#leave-help-modal-container"
|
|
hx-swap="innerHTML"
|
|
class="ml-auto inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors"
|
|
title="휴가관리 도움말">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="balance-container">
|
|
<div class="flex justify-center items-center p-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 사용현황 탭 --}}
|
|
<div id="content-stats" class="hidden">
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex items-center gap-3">
|
|
<label class="text-sm text-gray-600 font-medium">연도:</label>
|
|
<select id="statsYear" onchange="loadStats()"
|
|
class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
@for($y = now()->year; $y >= now()->year - 2; $y--)
|
|
<option value="{{ $y }}">{{ $y }}년</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
<div id="stats-container">
|
|
<div class="flex justify-center items-center p-12">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 휴가 신청 모달 --}}
|
|
<div id="leaveModal" class="fixed inset-0 z-50 hidden">
|
|
<div class="fixed inset-0 bg-black/40" onclick="closeLeaveModal()"></div>
|
|
<div class="fixed inset-0 flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-lg relative">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-800">휴가 신청</h3>
|
|
<button type="button" onclick="closeLeaveModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form id="leaveForm" onsubmit="submitLeave(event)">
|
|
<div class="px-6 py-4 space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">사원 <span class="text-red-500">*</span></label>
|
|
<select name="user_id" id="leaveUserId" required onchange="loadUserBalance()"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="">선택하세요</option>
|
|
@foreach($employees as $emp)
|
|
<option value="{{ $emp->user_id }}">{{ $emp->display_name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">유형 <span class="text-red-500">*</span></label>
|
|
<select name="leave_type" id="leaveType" required onchange="onTypeChange()"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
@foreach($typeMap as $key => $label)
|
|
<option value="{{ $key }}">{{ $label }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<div class="flex-1">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">시작일 <span class="text-red-500">*</span></label>
|
|
<input type="date" name="start_date" id="leaveStartDate" required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div class="flex-1">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">종료일 <span class="text-red-500">*</span></label>
|
|
<input type="date" name="end_date" id="leaveEndDate" required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
</div>
|
|
{{-- 잔여연차 표시 --}}
|
|
<div id="balanceInfo" class="hidden p-3 bg-blue-50 rounded-lg text-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-blue-700">잔여 연차:</span>
|
|
<span id="balanceDisplay" class="font-semibold text-blue-800">-</span>
|
|
</div>
|
|
</div>
|
|
{{-- 결재선 선택 --}}
|
|
<div id="approvalLineSection">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">결재선 <span class="text-red-500">*</span></label>
|
|
@if($approvalLines->isEmpty())
|
|
{{-- 결재선 없음 경고 + 바로 생성 버튼 --}}
|
|
<div id="noLineWarning" class="p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
|
<p class="text-sm text-amber-700 mb-2">등록된 결재선이 없습니다. 결재선을 먼저 생성해주세요.</p>
|
|
<button type="button" onclick="openQuickLineModal()"
|
|
class="px-3 py-1.5 bg-amber-600 hover:bg-amber-700 text-white text-xs font-medium rounded-lg transition-colors">
|
|
+ 결재선 바로 생성
|
|
</button>
|
|
</div>
|
|
<input type="hidden" name="approval_line_id" id="leaveApprovalLine" value="">
|
|
<div id="approvalStepsPreview" class="mt-2 flex items-center gap-1 overflow-x-auto py-1"></div>
|
|
@else
|
|
<select name="approval_line_id" id="leaveApprovalLine" required
|
|
onchange="previewApprovalSteps()"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
@foreach($approvalLines as $line)
|
|
<option value="{{ $line->id }}" {{ $line->is_default ? 'selected' : '' }}
|
|
data-steps='@json($line->steps)'>
|
|
{{ $line->name }}{{ $line->is_default ? ' (기본)' : '' }} — {{ count($line->steps ?? []) }}단계
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
<div id="approvalStepsPreview" class="mt-2 flex items-center gap-1 overflow-x-auto py-1"></div>
|
|
<button type="button" onclick="openQuickLineModal()"
|
|
class="text-xs text-blue-600 hover:underline mt-1">
|
|
+ 새 결재선 추가
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">사유</label>
|
|
<textarea name="reason" rows="3" maxlength="1000" placeholder="휴가 사유를 입력하세요..."
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-gray-200">
|
|
<button type="button" onclick="closeLeaveModal()"
|
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
|
|
취소
|
|
</button>
|
|
<button type="submit" id="leaveSubmitBtn"
|
|
class="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
|
|
신청
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 도움말 모달 컨테이너 --}}
|
|
<div id="leave-help-modal-container"></div>
|
|
|
|
{{-- 반려 사유 모달 --}}
|
|
<div id="rejectModal" class="fixed inset-0 z-50 hidden">
|
|
<div class="fixed inset-0 bg-black/40" onclick="closeRejectModal()"></div>
|
|
<div class="fixed inset-0 flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-sm relative">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-800">반려 사유</h3>
|
|
<button type="button" onclick="closeRejectModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form onsubmit="submitReject(event)">
|
|
<div class="px-6 py-4">
|
|
<input type="hidden" id="rejectLeaveId">
|
|
<textarea id="rejectReason" rows="3" maxlength="1000" placeholder="반려 사유를 입력하세요..."
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-gray-200">
|
|
<button type="button" onclick="closeRejectModal()"
|
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
|
|
취소
|
|
</button>
|
|
<button type="submit"
|
|
class="px-4 py-2 text-sm text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors">
|
|
반려
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{-- 빠른 결재선 생성 모달 --}}
|
|
<div id="quickLineModal" class="fixed inset-0 z-[60] hidden">
|
|
<div class="fixed inset-0 bg-black/50" onclick="closeQuickLineModal()"></div>
|
|
<div class="fixed inset-0 flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl relative max-h-[90vh] flex flex-col" x-data="quickLineEditor()" x-init="init()">
|
|
{{-- 헤더 --}}
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 shrink-0">
|
|
<h3 class="text-lg font-semibold text-gray-800">빠른 결재선 생성</h3>
|
|
<button type="button" onclick="closeQuickLineModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- 본문 --}}
|
|
<div class="px-6 py-4 overflow-y-auto flex-1 min-h-0">
|
|
{{-- 결재선 이름 --}}
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">결재선 이름 <span class="text-red-500">*</span></label>
|
|
<input type="text" x-model="lineName" placeholder="예: 휴가 결재선"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
|
|
{{-- 2단 레이아웃: 인원 목록 | 결재선 편집 --}}
|
|
<div class="flex gap-4" style="min-height: 300px;">
|
|
{{-- 왼쪽: 인원 목록 --}}
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden flex flex-col" style="flex: 0 0 240px;">
|
|
<div class="px-3 py-2 bg-gray-50 border-b border-gray-200 shrink-0">
|
|
<input type="text" x-model="searchQuery" placeholder="이름/부서 검색..."
|
|
class="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div class="overflow-y-auto flex-1" style="max-height: 280px;">
|
|
<template x-if="loading">
|
|
<div class="flex justify-center items-center p-6">
|
|
<div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
</template>
|
|
<template x-if="!loading && filteredDepartments.length === 0">
|
|
<p class="text-xs text-gray-400 p-3">인원이 없습니다.</p>
|
|
</template>
|
|
<template x-for="dept in filteredDepartments" :key="dept.department_id ?? 'none'">
|
|
<div>
|
|
<button type="button" @click="toggleDept(dept.department_id ?? 'none')"
|
|
class="w-full flex items-center justify-between px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 hover:bg-gray-100 border-b border-gray-100">
|
|
<span x-text="dept.department_name + ' (' + dept.users.length + '명)'"></span>
|
|
<svg class="w-3 h-3 transition-transform" :class="isDeptExpanded(dept.department_id ?? 'none') ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</button>
|
|
<template x-if="isDeptExpanded(dept.department_id ?? 'none')">
|
|
<div>
|
|
<template x-for="user in dept.users" :key="user.id">
|
|
<div class="flex items-center justify-between px-3 py-1.5 hover:bg-blue-50 border-b border-gray-50">
|
|
<div class="min-w-0">
|
|
<span class="text-xs text-gray-800 font-medium" x-text="user.name"></span>
|
|
<span class="text-[10px] text-gray-400 ml-1" x-text="user.position || user.job_title || ''"></span>
|
|
</div>
|
|
<button type="button" @click="addStep(user, dept.department_name)"
|
|
class="shrink-0 text-[10px] px-1.5 py-0.5 rounded"
|
|
:class="isAdded(user.id) ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-blue-100 text-blue-600 hover:bg-blue-200'"
|
|
:disabled="isAdded(user.id)"
|
|
x-text="isAdded(user.id) ? '추가됨' : '+ 추가'">
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 오른쪽: 결재선 편집 --}}
|
|
<div class="flex-1 border border-gray-200 rounded-lg overflow-hidden flex flex-col">
|
|
<div class="px-3 py-2 bg-gray-50 border-b border-gray-200 shrink-0">
|
|
<span class="text-xs font-medium text-gray-600">결재선 구성</span>
|
|
<span class="text-[10px] text-gray-400 ml-1">(드래그로 순서 변경)</span>
|
|
</div>
|
|
<div class="overflow-y-auto flex-1 p-2" style="max-height: 280px;">
|
|
<template x-if="steps.length === 0">
|
|
<p class="text-xs text-gray-400 text-center py-8">왼쪽에서 결재자를 추가하세요.</p>
|
|
</template>
|
|
<div x-ref="sortableList" class="space-y-1.5">
|
|
<template x-for="(step, index) in steps" :key="step._key">
|
|
<div class="flex items-center gap-2 px-2 py-2 bg-white border border-gray-200 rounded-lg hover:border-blue-200 transition-colors" :data-index="index">
|
|
{{-- 드래그 핸들 --}}
|
|
<span class="drag-handle cursor-grab text-gray-300 hover:text-gray-500 shrink-0" title="드래그하여 순서 변경">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M7 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
|
|
</svg>
|
|
</span>
|
|
{{-- 순번 --}}
|
|
<span class="text-[10px] text-gray-400 shrink-0 w-4 text-center" x-text="index + 1"></span>
|
|
{{-- 이름/부서 --}}
|
|
<div class="min-w-0 flex-1">
|
|
<span class="text-xs font-medium text-gray-800" x-text="step.user_name"></span>
|
|
<span class="text-[10px] text-gray-400 ml-1" x-text="step.department ? '(' + step.department + ')' : ''"></span>
|
|
</div>
|
|
{{-- 유형 선택 --}}
|
|
<select x-model="step.step_type"
|
|
class="shrink-0 text-[11px] px-1.5 py-1 border border-gray-200 rounded focus:ring-1 focus:ring-blue-500"
|
|
style="width: 62px;">
|
|
<option value="approval">결재</option>
|
|
<option value="agreement">합의</option>
|
|
<option value="reference">참조</option>
|
|
</select>
|
|
{{-- 삭제 --}}
|
|
<button type="button" @click="removeStep(index)"
|
|
class="shrink-0 text-gray-300 hover:text-red-500 transition-colors" title="삭제">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 푸터 --}}
|
|
<div class="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-gray-50 shrink-0">
|
|
<div class="flex items-center gap-3 text-[11px] text-gray-500">
|
|
<span>결재: <strong class="text-blue-600" x-text="countByType('approval')"></strong></span>
|
|
<span>합의: <strong class="text-amber-600" x-text="countByType('agreement')"></strong></span>
|
|
<span>참조: <strong class="text-gray-600" x-text="countByType('reference')"></strong></span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button type="button" onclick="closeQuickLineModal()"
|
|
class="px-3 py-1.5 text-xs text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
|
|
취소
|
|
</button>
|
|
<button type="button" @click="save()"
|
|
:disabled="saving"
|
|
class="px-4 py-1.5 text-xs text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors disabled:opacity-50">
|
|
<span x-show="!saving">저장</span>
|
|
<span x-show="saving">저장 중...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// ===== 탭 관리 =====
|
|
let currentTab = 'list';
|
|
const tabLoaded = { list: true, balance: false, stats: false };
|
|
|
|
function switchTab(tab) {
|
|
document.getElementById('tab-' + currentTab).className = 'px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 hover:text-gray-700';
|
|
document.getElementById('content-' + currentTab).classList.add('hidden');
|
|
|
|
currentTab = tab;
|
|
document.getElementById('tab-' + tab).className = 'px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-blue-600 text-blue-600';
|
|
document.getElementById('content-' + tab).classList.remove('hidden');
|
|
|
|
if (!tabLoaded[tab]) {
|
|
tabLoaded[tab] = true;
|
|
if (tab === 'balance') loadBalance();
|
|
if (tab === 'stats') loadStats();
|
|
}
|
|
}
|
|
|
|
let balanceSort = 'hire_date';
|
|
let balanceDirection = 'asc';
|
|
|
|
function loadBalance(sort, direction) {
|
|
if (sort) balanceSort = sort;
|
|
if (direction) balanceDirection = direction;
|
|
const year = document.getElementById('balanceYear').value;
|
|
htmx.ajax('GET', '{{ route("api.admin.hr.leaves.balance") }}', {
|
|
target: '#balance-container',
|
|
swap: 'innerHTML',
|
|
values: { year: year, sort: balanceSort, direction: balanceDirection },
|
|
});
|
|
}
|
|
|
|
function loadStats() {
|
|
const year = document.getElementById('statsYear').value;
|
|
htmx.ajax('GET', '{{ route("api.admin.hr.leaves.stats") }}', {
|
|
target: '#stats-container',
|
|
swap: 'innerHTML',
|
|
values: { year: year },
|
|
});
|
|
}
|
|
|
|
// ===== 필터 =====
|
|
document.getElementById('leaveFilterForm')?.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
refreshTable();
|
|
});
|
|
|
|
function refreshTable() {
|
|
htmx.ajax('GET', '{{ route("api.admin.hr.leaves.index") }}', {
|
|
target: '#leaves-table',
|
|
swap: 'innerHTML',
|
|
values: getFilterValues(),
|
|
});
|
|
}
|
|
|
|
function getFilterValues() {
|
|
const form = document.getElementById('leaveFilterForm');
|
|
const formData = new FormData(form);
|
|
const values = {};
|
|
for (const [key, value] of formData.entries()) {
|
|
if (value) values[key] = value;
|
|
}
|
|
return values;
|
|
}
|
|
|
|
// ===== 엑셀 다운로드 =====
|
|
function exportLeaves() {
|
|
const params = new URLSearchParams(getFilterValues());
|
|
window.location.href = '{{ route("api.admin.hr.leaves.export") }}?' + params.toString();
|
|
}
|
|
|
|
// ===== 결재선 미리보기 =====
|
|
function previewApprovalSteps() {
|
|
const select = document.getElementById('leaveApprovalLine');
|
|
const preview = document.getElementById('approvalStepsPreview');
|
|
if (!select || !preview) return;
|
|
|
|
const option = select.options[select.selectedIndex];
|
|
if (!option || !option.dataset.steps) {
|
|
preview.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
let steps;
|
|
try { steps = JSON.parse(option.dataset.steps); } catch { steps = []; }
|
|
if (!steps.length) {
|
|
preview.innerHTML = '<span class="text-xs text-gray-400">결재 단계가 없습니다.</span>';
|
|
return;
|
|
}
|
|
|
|
const typeLabels = { approval: '결재', agreement: '합의', reference: '참조' };
|
|
const typeColors = { approval: '#2563EB', agreement: '#D97706', reference: '#6B7280' };
|
|
const typeBgs = { approval: '#EFF6FF', agreement: '#FFFBEB', reference: '#F9FAFB' };
|
|
|
|
preview.innerHTML = steps.map((s, i) => {
|
|
const type = s.step_type || s.type || 'approval';
|
|
const color = typeColors[type] || '#6B7280';
|
|
const bg = typeBgs[type] || '#F9FAFB';
|
|
const name = s.user_name || '사용자 ' + s.user_id;
|
|
const arrow = i > 0 ? '<span style="color:#D1D5DB;margin:0 2px;">→</span>' : '';
|
|
return arrow + '<span style="display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:9999px;font-size:12px;white-space:nowrap;background:' + bg + ';color:' + color + ';">'
|
|
+ name + ' <span style="color:' + color + ';opacity:0.7;">(' + (typeLabels[type] || type) + ')</span></span>';
|
|
}).join('');
|
|
}
|
|
|
|
// ===== 휴가 신청 모달 =====
|
|
function openLeaveModal() {
|
|
document.getElementById('leaveForm').reset();
|
|
document.getElementById('balanceInfo').classList.add('hidden');
|
|
document.getElementById('leaveModal').classList.remove('hidden');
|
|
previewApprovalSteps();
|
|
}
|
|
|
|
function closeLeaveModal() {
|
|
document.getElementById('leaveModal').classList.add('hidden');
|
|
}
|
|
|
|
const deductibleTypes = ['annual', 'half_am', 'half_pm'];
|
|
|
|
function onTypeChange() {
|
|
const type = document.getElementById('leaveType').value;
|
|
const startDate = document.getElementById('leaveStartDate');
|
|
const endDate = document.getElementById('leaveEndDate');
|
|
|
|
if (type === 'half_am' || type === 'half_pm') {
|
|
endDate.value = startDate.value;
|
|
endDate.setAttribute('readonly', true);
|
|
} else {
|
|
endDate.removeAttribute('readonly');
|
|
}
|
|
|
|
loadUserBalance();
|
|
}
|
|
|
|
function loadUserBalance() {
|
|
const userId = document.getElementById('leaveUserId').value;
|
|
const type = document.getElementById('leaveType').value;
|
|
|
|
if (!userId || !deductibleTypes.includes(type)) {
|
|
document.getElementById('balanceInfo').classList.add('hidden');
|
|
return;
|
|
}
|
|
|
|
fetch('{{ url("/api/admin/hr/leaves/balance") }}/' + userId, {
|
|
headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success && res.data) {
|
|
document.getElementById('balanceDisplay').textContent =
|
|
res.data.remaining_days + '일 (부여: ' + res.data.total_days + ' / 사용: ' + res.data.used_days + ')';
|
|
document.getElementById('balanceInfo').classList.remove('hidden');
|
|
} else {
|
|
document.getElementById('balanceDisplay').textContent = '연차 정보 없음';
|
|
document.getElementById('balanceInfo').classList.remove('hidden');
|
|
}
|
|
})
|
|
.catch(() => {
|
|
document.getElementById('balanceInfo').classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
function submitLeave(e) {
|
|
e.preventDefault();
|
|
const form = document.getElementById('leaveForm');
|
|
const formData = new FormData(form);
|
|
const data = Object.fromEntries(formData.entries());
|
|
|
|
const btn = document.getElementById('leaveSubmitBtn');
|
|
btn.disabled = true;
|
|
btn.textContent = '처리 중...';
|
|
|
|
fetch('{{ route("api.admin.hr.leaves.store") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(r => r.json().then(json => ({ ok: r.ok, json })))
|
|
.then(({ ok, json }) => {
|
|
if (ok && json.success) {
|
|
closeLeaveModal();
|
|
refreshTable();
|
|
showToast(json.message, 'success');
|
|
} else {
|
|
// Laravel 422 validation errors
|
|
const msg = json.message || (json.errors ? Object.values(json.errors).flat().join('\n') : '등록에 실패했습니다.');
|
|
showToast(msg, 'error');
|
|
}
|
|
})
|
|
.catch(() => showToast('네트워크 오류가 발생했습니다.', 'error'))
|
|
.finally(() => {
|
|
btn.disabled = false;
|
|
btn.textContent = '신청';
|
|
});
|
|
}
|
|
|
|
// ===== 승인/반려/취소 =====
|
|
function approveLeave(id) {
|
|
if (!confirm('승인하시겠습니까?')) return;
|
|
|
|
fetch('{{ url("/api/admin/hr/leaves") }}/' + id + '/approve', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
refreshTable();
|
|
showToast(res.message, 'success');
|
|
} else {
|
|
showToast(res.message || '승인 처리에 실패했습니다.', 'error');
|
|
}
|
|
})
|
|
.catch(() => showToast('네트워크 오류가 발생했습니다.', 'error'));
|
|
}
|
|
|
|
function openRejectModal(id) {
|
|
document.getElementById('rejectLeaveId').value = id;
|
|
document.getElementById('rejectReason').value = '';
|
|
document.getElementById('rejectModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeRejectModal() {
|
|
document.getElementById('rejectModal').classList.add('hidden');
|
|
}
|
|
|
|
function submitReject(e) {
|
|
e.preventDefault();
|
|
const id = document.getElementById('rejectLeaveId').value;
|
|
const reason = document.getElementById('rejectReason').value;
|
|
|
|
fetch('{{ url("/api/admin/hr/leaves") }}/' + id + '/reject', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ reject_reason: reason })
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
closeRejectModal();
|
|
refreshTable();
|
|
showToast(res.message, 'success');
|
|
} else {
|
|
showToast(res.message || '반려 처리에 실패했습니다.', 'error');
|
|
}
|
|
})
|
|
.catch(() => showToast('네트워크 오류가 발생했습니다.', 'error'));
|
|
}
|
|
|
|
function cancelLeave(id) {
|
|
if (!confirm('취소하시겠습니까? 연차가 복원됩니다.')) return;
|
|
|
|
fetch('{{ url("/api/admin/hr/leaves") }}/' + id + '/cancel', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.success) {
|
|
refreshTable();
|
|
showToast(res.message, 'success');
|
|
} else {
|
|
showToast(res.message || '취소 처리에 실패했습니다.', 'error');
|
|
}
|
|
})
|
|
.catch(() => showToast('네트워크 오류가 발생했습니다.', 'error'));
|
|
}
|
|
|
|
// ===== 토스트 =====
|
|
function showToast(message, type) {
|
|
if (typeof window.showToastNotification === 'function') {
|
|
window.showToastNotification(message, type);
|
|
return;
|
|
}
|
|
const colors = { success: 'bg-emerald-500', error: 'bg-red-500', info: 'bg-blue-500' };
|
|
const toast = document.createElement('div');
|
|
toast.className = `fixed top-4 right-4 z-[70] px-4 py-3 rounded-lg text-white text-sm shadow-lg ${colors[type] || colors.info}`;
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 3000);
|
|
}
|
|
|
|
// ===== 반차 시작일 변경 시 종료일 동기화 =====
|
|
document.getElementById('leaveStartDate')?.addEventListener('change', function() {
|
|
const type = document.getElementById('leaveType').value;
|
|
if (type === 'half_am' || type === 'half_pm') {
|
|
document.getElementById('leaveEndDate').value = this.value;
|
|
}
|
|
});
|
|
|
|
// ===== 빠른 결재선 생성 모달 =====
|
|
function openQuickLineModal() {
|
|
document.getElementById('quickLineModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeQuickLineModal() {
|
|
document.getElementById('quickLineModal').classList.add('hidden');
|
|
}
|
|
|
|
function quickLineEditor() {
|
|
let keyCounter = 0;
|
|
|
|
return {
|
|
departments: [],
|
|
steps: [],
|
|
lineName: '',
|
|
searchQuery: '',
|
|
expandedDepts: {},
|
|
loading: true,
|
|
saving: false,
|
|
sortableInstance: null,
|
|
|
|
async init() {
|
|
try {
|
|
const res = await fetch('/api/admin/tenant-users/list', {
|
|
headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
|
|
});
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
this.departments = data.data;
|
|
this.departments.forEach(d => {
|
|
this.expandedDepts[d.department_id ?? 'none'] = true;
|
|
});
|
|
}
|
|
} catch (e) {
|
|
console.error('인원 목록 로딩 실패:', e);
|
|
}
|
|
this.loading = false;
|
|
},
|
|
|
|
get filteredDepartments() {
|
|
if (!this.searchQuery.trim()) return this.departments;
|
|
const q = this.searchQuery.trim().toLowerCase();
|
|
return this.departments
|
|
.map(dept => {
|
|
const deptMatch = dept.department_name.toLowerCase().includes(q);
|
|
const matchedUsers = dept.users.filter(u =>
|
|
u.name.toLowerCase().includes(q) ||
|
|
(u.position || '').toLowerCase().includes(q) ||
|
|
(u.job_title || '').toLowerCase().includes(q)
|
|
);
|
|
if (deptMatch) return dept;
|
|
if (matchedUsers.length > 0) return { ...dept, users: matchedUsers };
|
|
return null;
|
|
})
|
|
.filter(Boolean);
|
|
},
|
|
|
|
toggleDept(deptId) {
|
|
this.expandedDepts[deptId] = !this.expandedDepts[deptId];
|
|
},
|
|
|
|
isDeptExpanded(deptId) {
|
|
return !!this.expandedDepts[deptId];
|
|
},
|
|
|
|
isAdded(userId) {
|
|
return this.steps.some(s => s.user_id === userId);
|
|
},
|
|
|
|
addStep(user, deptName) {
|
|
if (this.isAdded(user.id)) return;
|
|
this.steps.push({
|
|
_key: ++keyCounter,
|
|
user_id: user.id,
|
|
user_name: user.name,
|
|
department: deptName || '',
|
|
position: user.position || user.job_title || '',
|
|
step_type: 'approval',
|
|
});
|
|
this.$nextTick(() => this.initSortable());
|
|
},
|
|
|
|
removeStep(index) {
|
|
this.steps.splice(index, 1);
|
|
this.$nextTick(() => this.initSortable());
|
|
},
|
|
|
|
initSortable() {
|
|
if (this.sortableInstance) {
|
|
this.sortableInstance.destroy();
|
|
this.sortableInstance = null;
|
|
}
|
|
const el = this.$refs.sortableList;
|
|
if (!el || typeof Sortable === 'undefined') return;
|
|
|
|
this.sortableInstance = Sortable.create(el, {
|
|
handle: '.drag-handle',
|
|
animation: 150,
|
|
ghostClass: 'opacity-30',
|
|
onEnd: (evt) => {
|
|
const item = this.steps.splice(evt.oldIndex, 1)[0];
|
|
this.steps.splice(evt.newIndex, 0, item);
|
|
},
|
|
});
|
|
},
|
|
|
|
countByType(type) {
|
|
return this.steps.filter(s => s.step_type === type).length;
|
|
},
|
|
|
|
async save() {
|
|
if (!this.lineName.trim()) {
|
|
showToast('결재선 이름을 입력해주세요.', 'error');
|
|
return;
|
|
}
|
|
const nonRefSteps = this.steps.filter(s => s.step_type !== 'reference');
|
|
if (nonRefSteps.length === 0) {
|
|
showToast('결재자를 1명 이상 추가해주세요.', 'error');
|
|
return;
|
|
}
|
|
|
|
this.saving = true;
|
|
try {
|
|
const payload = {
|
|
name: this.lineName.trim(),
|
|
steps: this.steps.map(s => ({
|
|
user_id: s.user_id,
|
|
step_type: s.step_type,
|
|
})),
|
|
is_default: false,
|
|
};
|
|
|
|
const res = await fetch('/api/admin/approvals/lines', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
|
},
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
const data = await res.json();
|
|
if (res.ok && data.success) {
|
|
showToast('결재선이 생성되었습니다.', 'success');
|
|
closeQuickLineModal();
|
|
refreshApprovalLines(data.data?.id || null);
|
|
// 상태 초기화
|
|
this.lineName = '';
|
|
this.steps = [];
|
|
} else {
|
|
const msg = data.message || (data.errors ? Object.values(data.errors).flat().join('\n') : '결재선 생성에 실패했습니다.');
|
|
showToast(msg, 'error');
|
|
}
|
|
} catch (e) {
|
|
console.error('결재선 생성 실패:', e);
|
|
showToast('네트워크 오류가 발생했습니다.', 'error');
|
|
}
|
|
this.saving = false;
|
|
},
|
|
};
|
|
}
|
|
|
|
// ===== 결재선 드롭다운 갱신 =====
|
|
async function refreshApprovalLines(selectedLineId) {
|
|
try {
|
|
const res = await fetch('/api/admin/approvals/lines', {
|
|
headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
|
|
});
|
|
const data = await res.json();
|
|
if (!data.success || !data.data) return;
|
|
|
|
const lines = data.data;
|
|
const section = document.getElementById('approvalLineSection');
|
|
if (!section) return;
|
|
|
|
// 경고 영역 제거 (있으면)
|
|
const warning = document.getElementById('noLineWarning');
|
|
if (warning) warning.remove();
|
|
|
|
// 기존 hidden input 제거 (결재선 없음 상태에서 만들어진 것)
|
|
const hiddenInput = section.querySelector('input[type="hidden"][name="approval_line_id"]');
|
|
if (hiddenInput) hiddenInput.remove();
|
|
|
|
// 기존 select가 있으면 재사용, 없으면 새로 생성
|
|
let select = document.getElementById('leaveApprovalLine');
|
|
let isNewSelect = false;
|
|
|
|
if (!select || select.tagName !== 'SELECT') {
|
|
// hidden input이었던 경우 제거
|
|
if (select) select.remove();
|
|
|
|
select = document.createElement('select');
|
|
select.name = 'approval_line_id';
|
|
select.id = 'leaveApprovalLine';
|
|
select.required = true;
|
|
select.setAttribute('onchange', 'previewApprovalSteps()');
|
|
select.className = 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
|
|
isNewSelect = true;
|
|
}
|
|
|
|
// option 목록 재구성
|
|
select.innerHTML = '';
|
|
lines.forEach(line => {
|
|
const opt = document.createElement('option');
|
|
opt.value = line.id;
|
|
opt.dataset.steps = JSON.stringify(line.steps || []);
|
|
opt.textContent = line.name + (line.is_default ? ' (기본)' : '') + ' — ' + (line.steps?.length || 0) + '단계';
|
|
if (selectedLineId && line.id == selectedLineId) {
|
|
opt.selected = true;
|
|
} else if (!selectedLineId && line.is_default) {
|
|
opt.selected = true;
|
|
}
|
|
select.appendChild(opt);
|
|
});
|
|
|
|
if (isNewSelect) {
|
|
// label 다음에 삽입
|
|
const label = section.querySelector('label');
|
|
if (label) {
|
|
label.after(select);
|
|
} else {
|
|
section.prepend(select);
|
|
}
|
|
}
|
|
|
|
// 미리보기 영역 확보
|
|
let preview = document.getElementById('approvalStepsPreview');
|
|
if (!preview) {
|
|
preview = document.createElement('div');
|
|
preview.id = 'approvalStepsPreview';
|
|
preview.className = 'mt-2 flex items-center gap-1 overflow-x-auto py-1';
|
|
select.after(preview);
|
|
}
|
|
|
|
// "새 결재선 추가" 링크 확보
|
|
if (!section.querySelector('.quick-line-link')) {
|
|
const link = document.createElement('button');
|
|
link.type = 'button';
|
|
link.className = 'quick-line-link text-xs text-blue-600 hover:underline mt-1';
|
|
link.textContent = '+ 새 결재선 추가';
|
|
link.onclick = openQuickLineModal;
|
|
preview.after(link);
|
|
}
|
|
|
|
// 미리보기 갱신
|
|
previewApprovalSteps();
|
|
|
|
} catch (e) {
|
|
console.error('결재선 목록 갱신 실패:', e);
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|