egbim_homepage/egbim/skin/sales/sales_members.skin.php

<?php 
include __DIR__ . '/layout_sales.php';
sales_layout_start("영업담당자 관리");
?>

<h2 class="text-2xl font-bold mb-4">영업담당자 관리</h2>

<div id="grid_members" style="width: 100%; height: 720px;"></div>

<!-- =====================================================
     🔥 JS 직접 포함 (CDN 문제 방지 / 로드 순서 문제 해결)
====================================================== -->
<link rel="stylesheet" type="text/css"
      href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">

<script type="module">
import { w2grid } from "https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js";

function clean(v) {
    return (v === undefined || v === null) ? '' : v;
}

let grid = new w2grid({
    name: 'grid_members',
    box: '#grid_members',

    show: {
        toolbar: true,
        footer: true,
        lineNumbers: true,
        toolbarSave: true,
        toolbarReload: true,
        toolbarSearch: true,
        toolbarColumns: true
    },

    multiSearch: true,
    searches: [
        { field: 'emp_no', label: '사번', type: 'text' },
        { field: 'emp_name', label: '이름', type: 'text' },
        { field: 'position', label: '직위', type: 'text' },
        { field: 'department', label: '부서', type: 'text' },
        { field: 'created_at', label: '등록일', type: 'date' }
    ],

    columns: [
        { field: 'emp_no', text: '사번', size: '120px', editable: { type: 'text' }, resizable: true, sortable: true },
        { field: 'emp_name', text: '이름', size: '150px', editable: { type: 'text' }, resizable: true, sortable: true },
        { field: 'position', text: '직위', size: '120px', editable: { type: 'text' }, resizable: true, sortable: true },
        { field: 'department', text: '부서', size: '180px', editable: { type: 'text' }, resizable: true, sortable: true },
        { field: 'created_at', text: '등록일', size: '160px', resizable: true, sortable: true }
    ],

    toolbar: {
        items: [
            { id: 'add', type: 'button', text: '추가', icon: 'w2ui-icon-plus' },
            // { id: 'delete', type: 'button', text: '삭제', icon: 'w2ui-icon-cross' }
        ],

        onClick(event) {
            const g = this.owner;

            // 🔄 reload
            if (event.target === 'w2ui-reload') {
                loadMembers();
                return;
            }

            // ➕ 추가 (DB insert 아직 X)
            if (event.target === 'add') {
                // recid를 숫자가 아닌 'new-' 접두어를 붙여서 생성합니다.
                const newId = "new-" + Math.random().toString(36).substr(2, 9);
                g.add({ 
                    recid: newId,
                    emp_no: "",
                    emp_name: "",
                    position: "",
                    department: "",
                    created_at: "" 
                });
                g.scrollIntoView(newId);
                g.editField(newId, 0); // 사번 컬럼부터 바로 편집 모드
            }

            // ❌ 삭제
            if (event.target === 'delete') {

                const sel = g.getSelection();   // ✅ sel 변수를 반드시 선언
                if (!sel.length) return;

                if (!confirm("정말 삭제하시겠습니까?")) return;

                sel.forEach(id => {

                    // 신규행(new-*)는 DB 삭제 안 함
                    if (String(id).startsWith("new-")) {
                        g.remove(id);
                        return;
                    }

                    fetch("/egbim/bbs/sales_members.php", {
                        method: "POST",
                        headers: { "Content-Type": "application/x-www-form-urlencoded" },
                        body: new URLSearchParams({
                            action: "delete",
                            emp_no: id
                        })
                    })
                    .then(r => r.json())
                    .then(res => {
                        console.log("삭제 응답:", res);
                    })
                    .catch(err => console.error("삭제 오류:", err));

                    g.remove(id);
                });
            }
        }
    },

    // 💾 onSave — INSERT + UPDATE
    onSave(event) {
        const changes = this.getChanges();
        if (!changes.length) {
            alert("변경된 내용이 없습니다.");
            return;
        }

        Promise.all(
            changes.map(ch => {
                const isNew = String(ch.recid).startsWith("new-");
                
                // 신규 데이터일 경우 사용자가 grid에 입력한 emp_no를 가져와야 함
                // 만약 ch.emp_no가 없다면 grid.get(ch.recid).emp_no 확인
                const targetData = this.get(ch.recid);
                const empNo = isNew ? (ch.emp_no || targetData.emp_no) : ch.recid;

                return fetch("/egbim/bbs/sales_members.php", {
                    method: "POST",
                    headers: { "Content-Type": "application/x-www-form-urlencoded" },
                    body: new URLSearchParams({
                        action: isNew ? "insert" : "update",
                        emp_no: clean(empNo),
                        emp_name: clean(ch.emp_name || targetData.emp_name),
                        position: clean(ch.position || targetData.position),
                        department: clean(ch.department || targetData.department)
                    })
                });
            })
        ).then(() => {
            loadMembers();
            alert("저장되었습니다.");
        }).catch(err => {
            console.error("저장 오류:", err);
            alert("저장 중 오류가 발생했습니다.");
        });
    }
});

// --------------------------------------------
// 🔵 loadMembers() — 데이터 불러오기
// --------------------------------------------
function loadMembers() {
    fetch("/egbim/bbs/sales_members.php?action=list")
        .then(r => r.json())
        .then(res => {
            if (res.status === "ok") {
                grid.records = res.records.map(row => ({
                    recid: row.emp_no,
                    emp_no: clean(row.emp_no),
                    emp_name: clean(row.emp_name),
                    position: clean(row.position),
                    department: clean(row.department),
                    created_at: clean(row.created_at)
                }));
                
                grid.reload();   // ★★★ refresh 말고 reload 사용
            }
        });
}

loadMembers();
</script>

<?php 
sales_layout_end();
?>