결재팝업 결재자 체크 선택 펼침 포함

티스토리 뷰

WEB/JavaScript
결재팝업 결재자 체크 선택 펼침 포함

silverline79 2026. 3. 5. 07:07
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>전자결재 시스템 - 결재선 지정</title>
    <style>
        :root { --primary: #007bff; --bg: #f4f7f9; --border: #ced4da; }
        body { margin: 0; font-family: 'Segoe UI', sans-serif; background: var(--bg); display: flex; justify-content: center; align-items: center; height: 100vh; }
        
        .popup { width: 1100px; height: 850px; background: #fff; display: flex; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }

        /* 왼쪽 패널: 결재선 지정 */
        .left-panel { width: 400px; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
        .panel-title { padding: 12px; background: #eee; font-weight: bold; font-size: 14px; border-bottom: 1px solid var(--border); }
        
        /* 트리 메뉴 영역 (상단) */
        .tree-container { flex: 1; overflow-y: auto; padding: 10px; border-bottom: 2px solid #ddd; }
        ul { list-style: none; padding-left: 18px; margin: 5px 0; }
        .tree-item { cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 3px 0; }
        .toggle-btn { width: 16px; display: inline-block; font-family: monospace; font-weight: bold; }
        .nested { display: none; }
        .active { display: block; }
        .user-node { color: #555; font-size: 13px; }

        /* 중간 컨트롤러 */
        .controls { padding: 10px; text-align: center; background: #fafafa; }
        .btn { padding: 8px 15px; cursor: pointer; border: 1px solid var(--border); background: #fff; border-radius: 4px; font-weight: bold; }
        .btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

        /* 결재선 명단 (하단) */
        .list-container { height: 250px; overflow-y: auto; padding: 10px; }
        table { width: 100%; border-collapse: collapse; font-size: 12px; }
        th, td { border: 1px solid #eee; padding: 8px; text-align: center; }
        th { background: #f8f9fa; position: sticky; top: 0; }

        /* 오른쪽 패널: 보고서 미리보기 */
        .right-panel { flex: 1; display: flex; flex-direction: column; background: #525659; }
        .toolbar { padding: 10px; background: #333; color: white; display: flex; gap: 10px; align-items: center; }
        .viewer { flex: 1; overflow: auto; padding: 40px; display: flex; justify-content: center; }
        .paper { 
            background: white; width: 550px; min-height: 750px; padding: 50px; 
            box-shadow: 0 0 20px rgba(0,0,0,0.4); transform-origin: top center; transition: 0.2s;
        }
    </style>
</head>
<body>

<div class="popup">
    <aside class="left-panel">
        <div class="panel-title">조직도 (4단계)</div>
        <div class="tree-container" id="orgTree">
            <ul>
                <li>
                    <div class="tree-item"><span class="toggle-btn">+</span> 🏢 (주)글로벌네트워크</div>
                    <ul class="nested">
                        <li>
                            <div class="tree-item"><span class="toggle-btn">+</span> 📂 전략본부</div>
                            <ul class="nested">
                                <li>
                                    <div class="tree-item"><span class="toggle-btn">+</span> 👥 기획팀</div>
                                    <ul class="nested">
                                        <li>
                                            <div class="tree-item"><span class="toggle-btn">+</span> 🧩 전략1파트</div>
                                            <ul class="nested">
                                                <li class="user-node"><input type="checkbox" data-name="강백호" data-rank="파트장"> 👤 강백호 파트장</li>
                                                <li class="user-node"><input type="checkbox" data-name="서태웅" data-rank="대리"> 👤 서태웅 대리</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class="tree-item"><span class="toggle-btn">+</span> 📂 기술개발본부</div>
                            <ul class="nested">
                                <li>
                                    <div class="tree-item"><span class="toggle-btn">+</span> 👥 플랫폼개발팀</div>
                                    <ul class="nested">
                                        <li>
                                            <div class="tree-item"><span class="toggle-btn">+</span> 🧩 백엔드파트</div>
                                            <ul class="nested">
                                                <li class="user-node"><input type="checkbox" data-name="이명헌" data-rank="파트장"> 👤 이명헌 파트장</li>
                                                <li class="user-node"><input type="checkbox" data-name="송태섭" data-rank="과장"> 👤 송태섭 과장</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="controls">
            <button class="btn" onclick="addSelected()">결재선 추가 ▼</button>
            <button class="btn" onclick="clearList()">초기화</button>
        </div>

        <div class="panel-title">선택된 결재선</div>
        <div class="list-container">
            <table>
                <thead>
                    <tr><th>순서</th><th>이름</th><th>직급</th><th>삭제</th></tr>
                </thead>
                <tbody id="approvalTable"></tbody>
            </table>
        </div>
    </aside>

    <main class="right-panel">
        <div class="toolbar">
            <button class="btn" onclick="zoom(0.1)">➕ 확대</button>
            <button class="btn" onclick="zoom(-0.1)">➖ 축소</button>
            <button class="btn" onclick="zoom(0, true)">100%</button>
        </div>
        <div class="viewer">
            <div id="paper" class="paper">
                <h1 style="text-align: center;">업무 협조전</h1>
                <p><strong>수신:</strong> 전 임직원</p>
                <p><strong>참조:</strong> 관리팀</p>
                <hr>
                <div style="margin-top:30px; line-height: 1.8;">
                    본 문서는 조직도 트리 메뉴와 결재선 지정 시스템의 프로토타입입니다.<br>
                    왼쪽 조직도에서 <b>[+]</b> 버튼을 눌러 하위 부서를 펼치고,<br>
                    체크박스를 선택한 뒤 <b>[결재선 추가]</b> 버튼을 눌러보세요.
                </div>
            </div>
        </div>
    </main>
</div>

<script>
    /* --- 트리 메뉴 제어 --- */
    document.querySelectorAll('.tree-item').forEach(item => {
        item.addEventListener('click', function(e) {
            const nestedList = this.nextElementSibling;
            const toggle = this.querySelector('.toggle-btn');
            
            if (nestedList && nestedList.classList.contains('nested')) {
                nestedList.classList.toggle('active');
                toggle.textContent = nestedList.classList.contains('active') ? '-' : '+';
            }
        });
    });

    /* --- 결재선 추가 로직 --- */
    let approvalList = [];

    function addSelected() {
        const checkboxes = document.querySelectorAll('.user-node input[type="checkbox"]:checked');
        
        checkboxes.forEach(cb => {
            const name = cb.getAttribute('data-name');
            const rank = cb.getAttribute('data-rank');
            
            // 중복 추가 방지
            if (!approvalList.some(user => user.name === name)) {
                approvalList.push({ name, rank });
            }
            cb.checked = false; // 추가 후 체크 해제
        });
        renderTable();
    }

    function renderTable() {
        const tbody = document.getElementById('approvalTable');
        tbody.innerHTML = approvalList.map((user, i) => `
            <tr>
                <td>${i + 1}</td>
                <td>${user.name}</td>
                <td>${user.rank}</td>
                <td><button onclick="removeItem(${i})">x</button></td>
            </tr>
        `).join('');
    }

    function removeItem(index) {
        approvalList.splice(index, 1);
        renderTable();
    }

    function clearList() {
        approvalList = [];
        renderTable();
    }

    /* --- 확대/축소 로직 --- */
    let currentScale = 1.0;
    function zoom(delta, reset = false) {
        currentScale = reset ? 1.0 : currentScale + delta;
        document.getElementById('paper').style.transform = `scale(${currentScale})`;
    }
</script>

</body>
</html>
※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.
'WEB > JavaScript' 카테고리의 다른 글

전단계 결재자 포함 조직도 (0)	2026.03.05
결재선 지정 선택 팝업 (0)	2026.03.05
6주 카테고리 달력 (0)	2026.03.04
카테고리 기능이 추가된 달력 스크립트 (년/월 이동 + 오늘 일정 자동 표시) (0)	2026.03.03
통합 달력 스크립트 (년/월 이동 + 오늘 일정 자동 표시) (0)	2026.03.03
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
« 2026/03 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31
글 보관함
실버라인의 잡다한 정보

티스토리 뷰

결재팝업 결재자 체크 선택 펼침 포함

'WEB > JavaScript' 카테고리의 다른 글

티스토리툴바
