HANYANG_MES/home_dir/www/ksvc/manage/test.html

<?php
/**
 * @Overview 품목 등록
 * @History 2024-03-04 / 최승연 / 최초작성
 * @History 2024-03-05 / 최승연 / 정렬 변경
 */

include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
include_once _SVC_INC_PATH_ . "/header.php";
?>
<link rel="stylesheet" href="/include/vendor/sortable-tree/sortable-tree.0.7.2.css">
<script src="/include/vendor/sortable-tree/sortable-tree.0.7.2.js"></script>

<div class="container">
  <!-- 사이드바 불러오기 -->
  <div id="tree2">

  </div>
  <?php include_once _SVC_INC_PATH_ . "/sidebar.php"; ?>
  

  <script>
  const nodes = [
	{
		data: { title: 'Homepage', path: '/' },
		nodes: [
			{
				data: {
					title: 'Page Number One',
					path: '/number-one',
				},
				nodes: [
					{
						data: {
							title: 'Subpage',
							path: '/number-one/subpage',
						},
						nodes: [],
					},
					{
						data: {
							title: 'Another Subpage',
							path: '/number-one/another',
						},
						nodes: [
							{
								data: {
									title: 'Deep Nested Page',
                  path: '/number-one/another/deep-nested',
                },
                nodes: [],
              },
              ],
          },
          ],
      },
      {
        data: { title: 'Page Two', path: '/page-two' },
        nodes: [],
      },
      {
        data: { title: 'Third Page', path: '/third-page' },
        nodes: [],
      },
      ],
  },
  ];

  const tree = new SortableTree( {
    nodes:nodes,
    element: document.getElementById('tree2'),
    renderLabel: (data) => {
      let menubar = '';
      if( data.href ){
        menubar = `<a href="${data.href}">${data.title}</a>`;
      }else{
        menubar = `<span class="tree__collapse">${data.title}</span>`;
      }
      return menubar;
    },
    onChange: ({ nodes, movedNode, srcParentNode, targetParentNode }) => {
      console.log(movedNode.data);
    },
    onClick: (event, node) => {
      console.log(node.data);
    },
  } );
  </script>
  <!-- 사이드바 불러오기 종료 // -->

  <!-- 메인 섹션 -->
  <div class="main-part" id="item_section">

    <!-- 검색 조회 및 저장 -->
    <div class="table-header item-header">
      <div class="inner-container">

        <!-- 검색 조건(인풋) -->
        <div class="search-container">
          <div class="input-container flexcol gap06">
            <label for="item_group">품목그룹</label>
            <div class="input-box">
              <select name="item_group" id="item_group">
                <option value="">선택</option>
                <option value="a"></option>
                <option value="b"></option>
              </select>
            </div>
          </div>
          <div class="input-container flexcol gap06">
            <label for="item_code">품목코드</label>
            <div>
              <div class="input-box">
                <input type="text" id="item_code_pop">
                <?php include _SVC_INC_PATH_ . '/img/popupIcon.php' ?>
              </div>
              <div class="input-box">
                <label for="sub_item_code_pop"></label>
                <input type="text" id="sub_item_code_pop">
                <?php include _SVC_INC_PATH_ . '/img/popupIcon.php' ?>
              </div>
            </div>
          </div>
        </div>
        <!-- 검색 조건 종료 // -->

        <!-- 조회 및 저장 버튼 -->
        <div class="button-container">
          <div class="button-box">
            <!-- <button class="point-btn" id="item_ex_down">엑셀다운</button>
            <button class="point-btn" id="item_ex_load">엑셀업로드</button> -->
            <button class="point-btn" id="filter_btn">조회</button>
            <button class="point-btn" id="put_item">저장</button>
          </div>
        </div>
        <!-- 조회 및 저장 버튼 종료 // -->
      </div>
      <!-- 검색 조회 및 저장 종료 // -->
    </div>
    <!-- 테이블 헤더 종료 // -->


    <!-- 컨텐츠 컨테이너 -->
    <div class="contents-container">

      <!-- 테이블 컨테이너 -->
      <div class="table-container">
        <div class="inner-container">

        <!-- 수평 테이블 컨테이너 시작 -->
          <div class="flexrow gap20">

          <!-- 테이블 박스 시작 -->
            <div class="table-box flex-1" id="item_ifo_table">
              <!-- 테이블 헤더(제목, 추가, 삭제) -->
              <div class="table-title">
                <p class="title">품목정보</p>

                <!-- 버튼 -->
                <div class="button-box">
                  <button class="add-btn reverse-btn">
                    <?php include _SVC_INC_PATH_ . '/img/add.php' ?>
                    추가
                  </button>
                  <button class="remove-btn reverse-btn">
                    <?php include _SVC_INC_PATH_ . '/img/delete.php' ?>
                    삭제
                  </button>
                  <button class="up-btn basic-btn">위로</button>
                  <button class="down-btn basic-btn">아래로</button>
                </div>
                <!-- 버튼 종료 // -->

              </div>
              <!-- 테이블 헤더 종료 // -->

              <!-- 테이블 -->
              <div class="hy-table" ></div>
              <!-- 테이블 종료 // -->

            </div>
            <!-- 테이블 박스 종료 // -->


            <div class="flexcol flex-1 gap20">
              <!-- 테이블 박스 시작 -->
              <div class="table-box flex-1" id="routing_table">
                <!-- 테이블 헤더(제목, 추가, 삭제) -->
                <div class="table-title">
                  <p class="title"></p>

                  <!-- 버튼 -->
                  <div class="button-box">
                    <button class="add-btn reverse-btn">
                      <?php include _SVC_INC_PATH_ . '/img/add.php' ?>
                      추가
                    </button>
                    <button class="remove-btn reverse-btn">
                      <?php include _SVC_INC_PATH_ . '/img/delete.php' ?>
                      삭제
                    </button>
                    <button class="up-btn basic-btn">위로</button>
                    <button class="down-btn basic-btn">아래로</button>
                  </div>
                  <!-- 버튼 종료 // -->

                </div>
                <!-- 테이블 헤더 종료 // -->

                <!-- 테이블 -->
                <div class="hy-table" ></div>
                <!-- 테이블 종료 // -->

              </div>
              <!-- 테이블 박스 종료 // -->

              <!-- 테이블 박스 시작 -->
              <div class="table-box flex-1" id="process_check_table">
                <!-- 테이블 헤더(제목, 추가, 삭제) -->
                <div class="table-title">
                  <p class="title">공정별 검사항목</p>

                  <!-- 버튼 -->
                  <div class="button-box">
                    <button class="add-btn reverse-btn">
                      <?php include _SVC_INC_PATH_ . '/img/add.php' ?>
                      추가
                    </button>
                    <button class="remove-btn reverse-btn">
                      <?php include _SVC_INC_PATH_ . '/img/delete.php' ?>
                      삭제
                    </button>
                    <button class="up-btn basic-btn">위로</button>
                    <button class="down-btn basic-btn">아래로</button>
                  </div>
                  <!-- 버튼 종료 // -->

                </div>
                <!-- 테이블 헤더 종료 // -->

                <!-- 테이블 -->
                <div class="hy-table" ></div>
                <!-- 테이블 종료 // -->

              </div>
              <!-- 테이블 박스 종료 // -->

            </div>
            <!-- 수직 테이블 컨테이너 종료 // -->

          </div>
          <!-- 수평 테이블 컨테이너 종료 // -->
        </div>

      </div>
    </div>
    <!-- 테이블 컨테이너 종료 // -->
  </div>
</div>

<?php
include_once _SVC_INC_PATH_ . "/footer_common.php";
?>
<?php
include_once _SVC_INC_PATH_ . "/footer.php";