Commit @e6e06481cdc474a3e3cc30ac25c34052c32c7823

박정하 01-13

250113 박정하 부서, 부서 사용자, 부서 호스트, 호스트 수정

@e6e06481cdc474a3e3cc30ac25c34052c32c7823

87f7d4a

e6e0648

client/views/component/DepartmentTree.vue

--- client/views/component/DepartmentTree.vue

+++ client/views/component/DepartmentTree.vue


 <template>
-  <li class="cursor">
-    <div
-      :class="{
+  <ul class="tree-wrap">
+    <li class="cursor" v-for="(item, idx) of treeList" :key="idx">
+      <div :class="{
         'tree-container flex align-center': true,
-        selected: node.dept_code === selectedId,
-      }"
-      @click="handleClick"
-    >
-      <p>
-        <svg-icon
-          type="mdi"
-          :width="18"
-          :height="18"
-          :path="arrowPath"
-        ></svg-icon>
-      </p>
-      <p>
-        <svg-icon
-          type="mdi"
-          :width="18"
-          :height="18"
-          :path="notePath"
-          :color="'#fbbe28'"
-        ></svg-icon>
-      </p>
-      <p class="node-text">{{ node.dept_nm }}</p>
-    </div>
-    <ul
-      v-if="node.children && node.children.length > 0"
-      class="children-node"
-      :style="{ height: toggleSelect === node.dept_code ? 'auto' : '0' }"
-    >
-      <DepartmentTree
-        v-for="(child, index) in node.children"
-        :node="child"
-        :key="index"
-        @selectedNode="parentSelectedNode"
-      />
-    </ul>
-  </li>
+        selected: node.id === selectedId,
+      }" @click="handleClick">
+        <p>
+          <svg-icon type="mdi" :width="18" :height="18" :path="arrowPath"></svg-icon>
+        </p>
+        <p>
+          <svg-icon type="mdi" :width="18" :height="18" :path="notePath" :color="'#fbbe28'"></svg-icon>
+        </p>
+        <p class="node-text">{{ node.nm }}</p>
+      </div>
+      <ul v-if="node.childList && node.childList.length > 0" class="children-node" :style="{ height: toggleSelect === node.id ? 'auto' : '0' }">
+        <DepartmentTree v-for="(item, idx) in node.childList" :node="item" :key="idx" @selectedNode="parentSelectedNode" />
+      </ul>
+    </li>
+  </ul>
 </template>
-
 <script>
-import axios from "axios";
 import SvgIcon from "@jamescoyle/vue-icon";
-import {
-  mdiNote,
-  mdiChevronRight,
-  mdiChevronDown,
-  mdiNoteOutline,
-} from "@mdi/js";
+import { mdiNote, mdiChevronRight, mdiChevronDown, mdiNoteOutline } from "@mdi/js";
 
 export default {
   name: "DepartmentTree",
+
   props: {
-    node: {
-      type: Object,
-      default: () => ({}),
+    treeList: {
+      type: Array,
+      default: [],
     },
   },
+
   data() {
     return {
       toggleSelect: null,

       selectedId: null,
     };
   },
+
   methods: {
     handleClick: function () {
       const vm = this;

       });
 
       // 노드 선택 시 하위 노드 표시 및 가리기
-      vm.$emit("selectedNode", vm.node);
-      if (vm.toggleSelect === vm.node.dept_code) {
+      if (vm.toggleSelect === vm.node.id) {
         vm.toggleSelect = null;
         vm.selectedId = null;
         vm.arrowPath = mdiChevronRight;

         if (!vm.node.children || vm.node.children.length === 0) {
           vm.getChildDepartment();
         }
-        vm.toggleSelect = vm.node.dept_code;
-        vm.selectedId = vm.node.dept_code;
+        vm.toggleSelect = vm.node.id;
+        vm.selectedId = vm.node.id;
         vm.arrowPath = mdiChevronDown;
         vm.notePath = mdiNoteOutline;
       }
+
+      vm.$emit("selectedNode", vm.node.id);
     },
     parentSelectedNode(node) {
       this.$emit("selectedNode", node);
     },
-    // 깊이 2 이상일 때 자식 노드 불러오기
-    getChildDepartment: function () {
-      axios
-        .get(`/department/tree/${this.node.dept_code}`)
-        .then((response) => {
-          this.node.children.push(...response.data.resultData.childDepartments);
-        })
-        .catch((error) => {
-          this.$showAlert(
-            "오류",
-            "목록 불러오기 오류, 관리자에게 문의바랍니다."
-          );
-        });
-    },
   },
+
   components: {
     SvgIcon: SvgIcon,
   },
 };
 </script>
-
 <style scoped>
 .tree-container {
   padding: 5px 10px;
 }
+
 .children-node {
   padding: 0 0 0 10px;
   overflow: hidden;
   transition: max-height 0.5s ease-in-out;
 }
+
 .node-text {
   font-size: 1.4rem;
   margin-left: 5px;

e6e0648

client/views/component/treeMenu/TreeMenu.vue (added)

+++ client/views/component/treeMenu/TreeMenu.vue

...	...	@@ -0,0 +1,102 @@
	1	+<template>
	2	+ <li>
	3	+ <div :class="{
	4	+ 'tree-container flex align-center cursor': true,
	5	+ selected: currentDeptCode.id === node.id,
	6	+ }" @click="toggleNode(node)">
	7	+ <div>
	8	+ <svg-icon type="mdi" :width="18" :height="18" :path="arrowPath"></svg-icon>
	9	+ </div>
	10	+ <div>
	11	+ <svg-icon type="mdi" :width="18" :height="18" :path="notePath" :color="'#fbbe28'"></svg-icon>
	12	+ </div>
	13	+ <p class="node-text">{{ node.nm }}</p>
	14	+ </div>
	15	+ <template v-if="node.childList.length > 0">
	16	+ <ul v-if="isOpen" class="children-node">
	17	+ <li v-for="(item, idx) of node.childList" :key="idx">
	18	+ <TreeMenu :node="item" :currentDeptCode="currentDeptCode" @changeCurrent="changeCurrentNode" />
	19	+ </li>
	20	+ </ul>
	21	+ </template>
	22	+ </li>
	23	+</template>
	24	+<script>
	25	+import SvgIcon from "@jamescoyle/vue-icon";
	26	+import { mdiNote, mdiChevronRight, mdiChevronDown, mdiNoteOutline } from "@mdi/js";
	27	+
	28	+export default {
	29	+ name: "TreeMenu",
	30	+
	31	+ components: {
	32	+ SvgIcon: SvgIcon,
	33	+ },
	34	+
	35	+ props: {
	36	+ node: {
	37	+ type: Object,
	38	+ required: true,
	39	+ },
	40	+ currentDeptCode: {
	41	+ type: Object,
	42	+ },
	43	+ },
	44	+
	45	+ data() {
	46	+ return {
	47	+ isOpen: false,
	48	+
	49	+ notePath: mdiNote,
	50	+ arrowPath: mdiChevronRight,
	51	+ };
	52	+ },
	53	+
	54	+ watch: {
	55	+ currentDeptCode: {
	56	+ deep: true,
	57	+ handler(v) {
	58	+ if (this.$isEmpty(v)) {
	59	+ this.isOpen = false;
	60	+ this.notePath = mdiNote;
	61	+ this.arrowPath = mdiChevronRight;
	62	+ }
	63	+ },
	64	+ }
	65	+ },
	66	+
	67	+ methods: {
	68	+ toggleNode(node) {
	69	+ this.isOpen = !this.isOpen;
	70	+
	71	+ if (this.isOpen) {
	72	+ this.notePath = mdiNote;
	73	+ this.arrowPath = mdiChevronRight;
	74	+ } else {
	75	+ this.notePath = mdiNoteOutline;
	76	+ this.arrowPath = mdiChevronDown;
	77	+ }
	78	+
	79	+ this.changeCurrentNode(node);
	80	+ },
	81	+ changeCurrentNode(node) {
	82	+ this.$emit("changeCurrent", node);
	83	+ }
	84	+ },
	85	+};
	86	+</script>
	87	+<style scoped>
	88	+.tree-container {
	89	+ padding: 5px 10px;
	90	+}
	91	+
	92	+.children-node {
	93	+ padding: 0 0 0 10px;
	94	+ overflow: hidden;
	95	+ transition: max-height 0.5s ease-in-out;
	96	+}
	97	+
	98	+.node-text {
	99	+ font-size: 1.4rem;
	100	+ margin-left: 5px;
	101	+}
	102	+</style>(No newline at end of file)

87f7d4a

e6e0648

client/views/pages/integrated/DepartmentManagement.vue

--- client/views/pages/integrated/DepartmentManagement.vue

+++ client/views/pages/integrated/DepartmentManagement.vue


           <div class="left-content flex100 content-box">
             <div class="content-box">
               <div class="content-titleZone">
-                <p class="box-title">부서리스트</p>
+                <p class="box-title">부서 목록</p>
               </div>
               <div class="content-zone overflow-y">
-                <ul class="tree-wrap">
-                  <DepartmentTree v-for="(node, index) in departmentTreeList" :node="node" :key="index" @selectedNode="loadDepartmentData" @click="deptHostUncheckAll" />
+                <ul class="tree-wrap" v-if="deptTreeList.length > 0">
+                  <TreeMenu v-for="(item, idx) in deptTreeList" :key="idx" :node="item" :currentDeptCode="selectedDept" @changeCurrent="fnSelectDept" />
                 </ul>
               </div>
             </div>
           </div>
         </div>
-        <div class="flex80 content-box">
-          <div class="right-content flex100">
-            <div class="content-titleZone">
-              <p v-if="departmentData.dept_nm" class="box-title"> {{ departmentData.dept_nm }} </p>
-              <p v-else class="box-title">부서 추가</p>
+        <div class="right-content flex80">
+          <!-- 부서 정보 -->
+          <div class="content-titleZone">
+            <p class="box-title">부서 정보</p>
+          </div>
+          <div class="table-zone">
+            <div class="form-box">
+              <table class="form-table2">
+                <colgroup>
+                  <col style="width: 10%" />
+                  <col style="width: 40%" />
+                  <col style="width: 10%" />
+                  <col style="width: 40%" />
+                </colgroup>
+                <tbody>
+                  <tr>
+                    <th>부서코드</th>
+                    <td style="display: flex">
+                      <input type="text" class="full-input" v-model="currentDept.dept_code" :disabled="editMode == 'update'" />
+                      <button style="flex-grow: 1" class="small-btn blue-border-btn" v-if="editMode == 'create'" @click="fnDeptCodeDupChk">중복확인</button>
+                    </td>
+                    <th>부서명</th>
+                    <td>
+                      <input type="text" class="full-input" v-model="currentDept.dept_nm" />
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>부서설명</th>
+                    <td>
+                      <input type="text" class="full-input" v-model="currentDept.dept_dc" />
+                    </td>
+                    <th>상위부서</th>
+                    <td style="display: flex">
+                      <input type="text" class="full-input" v-model="currentDept.upper_dept_nm" readonly />
+                      <button style="flex-grow: 1" class="small-btn blue-border-btn" @click="fnOpenModalByDeptList">부서찾기</button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
-            <div class="content-zone overflow-y">
-              <div style="max-height: 35%">
-                <div class="table-zone">
-                  <div class="form-box">
-                    <table class="form-table2">
-                      <colgroup>
-                        <col style="width: 10%" />
-                        <col style="width: 40%" />
-                        <col style="width: 10%" />
-                        <col style="width: 40%" />
-                      </colgroup>
-                      <tbody>
-                        <tr>
-                          <th>부서코드</th>
-                          <td style="display: flex">
-                            <input type="text" v-model="departmentData.dept_code" id="dept_code" class="full-input" :disabled="dataLoaded" />
-                            <button v-if="!dataLoaded" @click="deptCodeDuplicateCheck()" style="flex-grow: 1" class="small-btn blue-border-btn" id="deptCodeDuplicateCheck">중복확인</button>
-                          </td>
-                          <th>부서명</th>
-                          <td>
-                            <input type="text" v-model="departmentData.dept_nm" id="dept_nm" class="full-input" />
-                          </td>
-                        </tr>
-                        <tr>
-                          <th>부서설명</th>
-                          <td>
-                            <input type="text" v-model="departmentData.dept_dc" id="dept_dc" class="full-input" />
-                          </td>
-                          <th>상위부서</th>
-                          <td style="display: flex">
-                            <input type="text" v-model="departmentData.upper_dept_nm" id="upper_dept_nm" class="full-input" readonly :disabled="departmentData.dept_code == '1000' && departmentData.upper_dept == null" />
-                            <button v-if="!dataLoaded || (departmentData.dept_code == '1000' && departmentData.upper_dept != null)" @click="openDeptSearchModal()" style="flex-grow: 1" class="small-btn blue-border-btn">부서찾기</button>
-                          </td>
-                        </tr>
-                        <tr v-if="departmentData.author == 'ROLE_ADMIN'">
-                          <th>권한</th>
-                          <td>
-                            <select name="" id="author" class="full-select" v-model="departmentData.author" :disabled="dataLoaded">
-                              <option :value="null" disabled> 권한을 선택해주세요. </option>
-                              <option v-for="(author, idx) in authorList" :key="idx" :value="author.author">{{ author.author_dc }}</option>
-                            </select>
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-                <div class="flex justify-end">
-                  <template v-if="!dataLoaded">
-                    <button class="blue-btn small-btn" @click="departmentInsert">등록</button>
-                  </template>
-                  <template v-else>
-                    <button class="blue-btn small-btn" @click="updateDepartment()">수정</button>
-                    <button v-if="departmentData.upper_dept != null" class="red-border-btn small-btn" @click="deleteDepartments()">삭제</button>
-                    <button class="blue-border-btn small-btn" @click="insertForm()">취소</button>
-                  </template>
-                </div>
+          </div>
+          <div class="flex justify-end">
+            <button class="blue-btn small-btn" v-if="editMode == 'create'" @click="fnInsertDept">등록</button>
+            <button class="blue-btn small-btn" v-else @click="fnUpdateDept">수정</button>
+            <button class="red-border-btn small-btn" v-if="editMode == 'update'" @click="fnDeleteDept">삭제</button>
+            <button class="blue-border-btn small-btn" @click="fnCancelDept"><span v-if="editMode == 'create'">초기화</span><span v-else>취소</span></button>
+          </div>
+          <!-- 부서 내 사용자 목록 -->
+          <div class="content-titleZone">
+            <p class="box-title">사용자 목록</p>
+          </div>
+          <div class="table-zone">
+            <div class="list-info flex justify-between align-center">
+              <div class="count-zone">
+                <p> 총 <span>{{ userList.length }}</span>건 중 <span>{{ userSelectList.length }}</span>건 선택 </p>
               </div>
-              <div style="min-height: 32.5%">
-                <div class="table-zone">
-                  <div class="list-info flex justify-between align-center">
-                    <div class="count-zone">
-                      <p> 총 <span>{{ inDeptMemberList.length }}</span>건 중 <span>{{ selectedMembers.length }}</span>건 선택 </p>
-                    </div>
-                    <div class="cunt-selectZone">
-                      <select name="" id="">
-                        <option value="">10개 보기</option>
-                        <option value="">20개 보기</option>
-                      </select>
-                    </div>
-                  </div>
-                  <table class="list-table">
-                    <colgroup>
-                      <col style="width: 5%" />
-                      <col style="width: 10%" />
-                      <col style="width: 42.5%" />
-                      <col style="width: 42.5%" />
-                    </colgroup>
-                    <thead>
-                      <tr>
-                        <th>
-                          <input type="checkbox" @change="memberCheckAll" />
-                        </th>
-                        <th>No</th>
-                        <th>이름</th>
-                        <th>로그인아이디</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr v-for="(inDeptMember, idx) in inDeptMemberList" :key="idx">
-                        <td>
-                          <input type="checkbox" v-model="inDeptMember.selected" name="memberList" />
-                        </td>
-                        <td>{{ memberIdx - idx }}</td>
-                        <td>{{ inDeptMember.userNm }}</td>
-                        <td>{{ inDeptMember.userId }}</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-                <div class="flex justify-end">
-                  <button class="blue-btn small-btn" @click="openMemberModal">멤버추가</button>
-                  <button class="red-border-btn small-btn" @click="deleteSelection">멤버삭제</button>
-                </div>
-                <PaginationButton v-model:currentPage="memberSearch.currentPage" :perPage="memberSearch.perPage" :totalCount="memberSearch.totalRows" :maxRange="5" :click="selectMemberList" />
+              <div class="cunt-selectZone">
+                <select v-model="searchByUser.perPage" @change="fnSelectUserList">
+                  <option value="10">10개 보기</option>
+                  <option value="20">20개 보기</option>
+                </select>
               </div>
-              <!-- <div style="min-height: 32.5%">
-                <div class="table-zone">
-                  <div class="list-info flex justify-between align-center">
-                    <div class="count-zone">
-                      <p> 총 <span>{{ deptHostData.length }}</span>건 중 <span>{{ selectedDepts.length }}</span>건 선택 </p>
-                    </div>
-                    <div class="cunt-selectZone">
-                      <select name="" id="">
-                        <option value="">10개 보기</option>
-                        <option value="">20개 보기</option>
-                      </select>
-                    </div>
-                  </div>
-                  <table class="list-table">
-                    <colgroup>
-                      <col style="width: 5%" />
-                      <col style="width: 10%" />
-                      <col style="width: 42.5%" />
-                      <col style="width: 42.5%" />
-                    </colgroup>
-                    <thead>
-                      <tr>
-                        <th>
-                          <input type="checkbox" @click="deptHostCheckAll" v-model="deptCheckAll" />
-                        </th>
-                        <th>No</th>
-                        <th>호스트명</th>
-                        <th>메인폴더</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr v-for="(data, index) in deptHostData" :key="index" @click="chooseDeptHost(data, 'update')">
-                        <td>
-                          <input type="checkbox" v-model="selectedDepts" :value="data.host_code" @click.stop />
-                        </td>
-                        <td>{{ index + 1 }}</td>
-                        <td>{{ data.host_nm }}</td>
-                        <td>{{ data.main_folder_path }}</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                  <PaginationButton v-model:currentPage="deptSearch.currentPage" :perPage="deptSearch.perPage" :totalCount="deptSearch.totalRows" :maxRange="5" :click="selectDeptHost" />
-                </div>
-                <div class="flex justify-end">
-                  <button class="orange-border-btn small-btn" @click="openHostModal"> 호스트추가 </button>
-                  <button class="blue-border-btn small-btn" @click="deleteSelectedDeptHosts"> 호스트삭제 </button>
-                </div>
-              </div> -->
             </div>
+            <table class="list-table">
+              <colgroup>
+                <col style="width: 5%" />
+                <col style="width: 10%" />
+                <col style="width: 42.5%" />
+                <col style="width: 42.5%" />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th>
+                    <input type="checkbox" v-model="isChkUserAll" @change="fnChkAll()" />
+                  </th>
+                  <th>No</th>
+                  <th>이름</th>
+                  <th>아이디</th>
+                </tr>
+              </thead>
+              <tbody>
+                <template v-if="userList.length > 0">
+                  <tr v-for="(item, idx) of userList" :key="idx">
+                    <td>
+                      <input type="checkbox" :value="item" v-model="userSelectList" @click.stop="" @change="fnChangeChk" />
+                    </td>
+                    <td>{{ searchByUser.totalRows - idx - (searchByUser.currentPage - 1) * searchByUser.perPage }}</td>
+                    <td>{{ item.userNm }}</td>
+                    <td>{{ item.userId }}</td>
+                  </tr>
+                </template>
+                <tr v-else>
+                  <td colspan="4">등록된 데이터가 없습니다.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end">
+            <button class="blue-btn small-btn" @click="fnOpenModalByUserList">사용자추가</button>
+            <button class="red-border-btn small-btn" @click="fnDeleteUser">사용자삭제</button>
+          </div>
+          <PaginationButton v-model:currentPage="searchByUser.currentPage" :perPage="searchByUser.perPage" :totalCount="searchByUser.totalRows" :maxRange="5" :click="selectMemberList" />
+          <!-- 부서 내 호스트 목록 -->
+          <div class="content-titleZone">
+            <p class="box-title">호스트 목록</p>
+          </div>
+          <DeptHostList :deptCode="selectedDept.id" />
+          <!-- 부서 내 디렉터리 목록 -->
+          <div class="content-titleZone">
+            <p class="box-title">디렉터리 목록</p>
+          </div>
+          <div class="table-zone">
+            <div class="list-info flex justify-between align-center">
+              <div class="count-zone">
+                <p> 총 <span></span>건 중 <span></span>건 선택 </p>
+              </div>
+              <div class="cunt-selectZone">
+                <select name="" id="">
+                  <option value="10">10개 보기</option>
+                  <option value="20">20개 보기</option>
+                </select>
+              </div>
+            </div>
+            <table class="list-table">
+              <colgroup>
+                <col style="width: 5%" />
+                <col style="width: 10%" />
+                <col style="width: 42.5%" />
+                <col style="width: 42.5%" />
+              </colgroup>
+              <thead>
+                <tr>
+                  <th>
+                    <input type="checkbox" />
+                  </th>
+                  <th>No</th>
+                  <th>호스트명</th>
+                  <th>메인폴더</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    <input type="checkbox" name="memberList" />
+                  </td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                </tr>
+              </tbody>
+            </table>
+            <PaginationButton v-model:currentPage="searchByDirectory.currentPage" :perPage="searchByDirectory.perPage" :totalCount="searchByDirectory.totalRows" :maxRange="5" :click="selectDeptHost" />
+          </div>
+          <div class="flex justify-end">
+            <button class="blue-btn small-btn" @click="openHostModal">호스트추가</button>
+            <button class="blue-border-btn small-btn" @click="deleteSelectedDeptHosts">호스트삭제</button>
           </div>
         </div>
       </div>

     <div class="modal-container">
       <div class="modal-title flex justify-between align-center">
         <h2>부서 찾기</h2>
-        <button class="close-btn" @click="closeModal">
+        <button class="close-btn" @click="fnCloseModalByDeptList">
           <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
         </button>
       </div>

           <div class="search-bar w100">
             <div class="flex justify-between align-center">
               <div class="flex25 pl0">
-                <select class="square-select full-select" v-model="dept_search_data.key">
+                <select class="square-select full-select" v-model="searchDataByDept.key">
                   <option :value="null">전체</option>
                   <option value="dept_code">부서코드</option>
                   <option value="dept_nm">부서명</option>
                 </select>
               </div>
               <div class="flex75 flex align-center no-gutter pr0">
-                <input type="text" class="square-input flex90" placeholder="부서를 검색해주세요" v-model="dept_search_data.value" @keyup.enter="selectDepartmentList" />
-                <button class="square-button blue-btn flex10" @click="selectDepartmentList">
+                <input type="text" class="square-input flex90" placeholder="부서를 검색해주세요" v-model="searchDataByDept.value" @keyup.enter="fnSelectUpperDeptList" />
+                <button class="square-button blue-btn flex10" @click="fnSelectUpperDeptList">
                   <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
                 </button>
               </div>

         <div class="overflow-y" style="height: 500px">
           <table class="sticky-table list-table2">
             <colgroup>
-              <col style="width: 50%" />
-              <col style="width: 50%" />
+              <col style="width: 35%" />
+              <col style="width: 35%" />
+              <col style="width: 30%" />
             </colgroup>
             <thead>
               <tr>
                 <th>부서코드</th>
                 <th>부서명</th>
+                <th>비고</th>
               </tr>
             </thead>
             <tbody>
-              <template v-if="departmentList.length > 0">
-                <tr v-for="(department, idx) in departmentList" :key="idx" @click="intoUpperDept(department)">
-                  <td>{{ department.dept_code }}</td>
-                  <td>{{ department.dept_nm }}</td>
+              <template v-if="selectDeptList.length > 0">
+                <tr v-for="(item, idx) in selectDeptList" :key="idx" :class="{ red: item.isUsed == false }">
+                  <td>{{ item.dept_code }}</td>
+                  <td>{{ item.dept_nm }}</td>
+                  <td><button type="button" class="small-btn blue-border-btn" @click="fnSelectedUpperDept(item)">선택</button></td>
                 </tr>
               </template>
               <tr v-else>
-                <td colspan="2">데이터가 존재하지 않습니다.</td>
+                <td colspan="3">데이터가 존재하지 않습니다.</td>
               </tr>
             </tbody>
           </table>
         </div>
       </div>
-      <div class="modal-end flex justify-end">
-        <button class="gray-btn large-btn pd5" @click="closeModal()">취소</button>
-      </div>
     </div>
   </div>
-  <div v-show="isHostModalOpen" class="modal-wrapper">
-    <div class="modal-container">
-      <div class="modal-title">
-        <div class="flex justify-between align-center">
-          <h2>호스트 목록</h2>
-          <button class="close-btn" @click="closeHostModal">
-            <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
-          </button>
-        </div>
-      </div>
-      <div class="searchbar-zone modal-content-monthly">
-        <div class="flex justify-end align-center">
-          <select name="" id="" class="square-select" v-model="host_search_data.key">
-            <option :value="null" disabled>선택</option>
-            <option value="host_nm">호스트명</option>
-            <option value="host_ip">호스트(IP)</option>
-            <option value="rgtr_id">등록자</option>
-          </select>
-          <div class="search-square">
-            <input type="text" class="square-input" v-model="host_search_data.value" placeholder="검색어를 입력해주세요." @keyup.enter="selectHosts" />
-            <button class="square-button" @click="selectHosts">
-              <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
-            </button>
-          </div>
-        </div>
-        <div class="table-zone">
-          <table class="form-table" style="text-align: center">
-            <colgroup>
-              <col style="width: 10%" />
-              <col style="width: 30%" />
-              <col style="width: 30%" />
-              <col style="width: 20%" />
-              <col style="width: 10%" />
-            </colgroup>
-            <thead>
-              <tr>
-                <th>No</th>
-                <th>호스트명</th>
-                <th>호스트(IP)</th>
-                <th>사용자명</th>
-                <th>포트</th>
-              </tr>
-            </thead>
-            <tbody v-if="hosts.length > 0">
-              <tr v-for="(host, index) in hosts" :key="index" @click="axiosDeptHost(host)">
-                <td>{{ hostIdx - index }}</td>
-                <td>{{ host.host_nm }}</td>
-                <td>{{ host.host_ip }}</td>
-                <td>{{ host.host_id }}</td>
-                <td>{{ host.host_port }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <PaginationButton v-model:currentPage="hostSearch.currentPage" :perPage="hostSearch.perPage" :totalCount="hostSearch.totalRows" :maxRange="5" :click="selectHosts" />
-    </div>
-  </div>
+  <UserSelectModal :deptCode="selectedDept.id" :isModalOpen="isUserModalOpen" @fnCloseModal="fnCloseModalByUserList" />
   <!-- 사용자 목록 모달 -->
-  <div v-show="isMemberModalOpen" class="modal-wrapper">
+  <!-- <div v-show="isMemberModalOpen" class="modal-wrapper">
     <div class="modal-container">
       <div class="modal-title flex justify-between align-center">
         <h2>멤버 추가</h2>

         <button class="blue-btn small-btn" @click="confirmSelection">등록</button>
       </div>
     </div>
-  </div>
-  <!-- // 사용자 목록 모달 -->
-  <TreeModal :modalOpen="treeModalOpen" :modalConnection="connection" :modalNodes="nodes" :selectType="selectModalType" @modalSelectFolder="selectFolder" @closeTreeModal="closeTreeModal" @modalSubmit="axiosDeptHost" />
+  </div> -->
+  <!-- <TreeModal :modalOpen="treeModalOpen" :modalConnection="connection" :modalNodes="nodes" :selectType="selectModalType" @modalSelectFolder="selectFolder" @closeTreeModal="closeTreeModal" @modalSubmit="axiosDeptHost" /> -->
 </template>
 <script>
-import PageNavigation from "../../component/PageNavigation.vue";
-import PaginationButton from "../../component/PaginationButton.vue";
+import axios from "axios";
+// icon용 svg import
 import SvgIcon from "@jamescoyle/vue-icon";
 import { mdiMagnify, mdiClose } from "@mdi/js";
-import axios from "axios";
+// 컴포넌트 import
+import PageNavigation from "../../component/PageNavigation.vue";
+import PaginationButton from "../../component/PaginationButton.vue";
 import DepartmentTree from "../../component/DepartmentTree.vue";
 import TreeModal from "../../component/FileTreeModal.vue";
+import TreeMenu from "../../component/treeMenu/TreeMenu.vue";
+import DeptHostList from "./department/DeptHostList.vue";
+
+import UserSelectModal from "../../component/modal/UserSelectModal.vue";
 
 export default {
+  components: { SvgIcon, PageNavigation, PaginationButton, DepartmentTree, TreeModal, TreeMenu, DeptHostList, UserSelectModal },
+
   data() {
     return {
+      // icon용 svg path
       searchPath: mdiMagnify,
-      startDate: true,
-      endDate: true,
-
-      departmentData: {
-        dept_code: null,
-        dept_nm: null,
-        dept_dc: null,
-        upper_dept: null,
-        upper_dept_nm: null,
-        dept_addr: null,
-        author: 'ROLE_USER', // 사용자 권한
-        dept_dp: null,
-      },
-
-      departmentList: [],
-      departmentTreeList: [],
-      //부서코드 중복확인 여부
-      isDuplicateChecked: false,
-      authorList: [],
-
-      // 부서 호스트 연결용 변수
-      modalType: "tab-modal",
       closePath: mdiClose,
-      isHostModalOpen: false,
-      hostSearch: this.$getDefaultSerchVO(),
-      host_search_data: this.$getDefaultSerchItem(null, "String"),
-      hosts: [],
-      hostIdx: 0,
-      selectedHost: null,
-      connection: {
-        host_code: null,
-        path: null,
-        depth: null,
-        type: null,
-      },
-      nodes: [],
-      treeModalOpen: false,
-      selectModalType: 0,
-      dept_search_data: this.$getDefaultSerchItem(null, "String"),
-      deptSearch: this.$getDefaultSerchVO(),
-      deptHostData: [],
-      deptIdx: 0,
-      deptCheckAll: false,
-      selectedDepts: [],
-      depthDepth: 0,
 
-      //사용자 추가
-      isMemberModalOpen: false,
-      addusers: [], // 선택된 사용자 정보를 저장할 배열
-      users: [],
-      usersIdx: 0,
-      usersSearch: this.$getDefaultSerchVO(),
-      search_data1: this.$getDefaultSerchItem(null, "string"),
-      search_data2: this.$getDefaultSerchItem(null, "string"),
-      selectedUsers: null,
+      // 검색
+      // 부서
+      searchByDept: Object.assign({}, this.$getDefaultSerchVO()),
+      searchDataByDept: this.$getDefaultSerchItem(null, "string"),
+      // 호스트
+      searchByHost: Object.assign({}, this.$getDefaultSerchVO()),
+      searchByDirectory: Object.assign({}, this.$getDefaultSerchVO()),
 
-      //세현 추가
+      // default
+      editMode: 'create',
+
+      deptTreeList: [],
+
+      deptVO: {},
+      originDept: {},
+      currentDept: {},
+      selectedDept: {
+        "upId": null,
+        "id": null,
+        "nm": null,
+        "dp": null,
+        "ordr": null,
+        "childList": [],
+      }, // 부서 목록에서 선택한 부서
+
+
+      // 부서 정보
+      isDeptCodeDupChk: false, // 부서코드 중복확인 여부
+
+      // 부서 찾기 모달 관련
       isDeptModalOpen: false,
-      memberSearch: this.$getDefaultSerchVO(),
-      member_search_data: this.$getDefaultSerchItem(null, "String"),
-      noDeptMemberList: [],
-      inDeptMemberList: [],
-      memberIdx: 0,
-      selectedMembers: [],
-      checkAll: false,
+      selectDeptList: [],
+
+      // 사용자 목록 관련
+      isChkUserAll: false,
+      userList: [],
+      userSelectList: [],
+      searchByUser: Object.assign({}, this.$getDefaultSerchVO()),
+      searchDataByUser: this.$getDefaultSerchItem(null, "string"),
+
+      // 사용자 추가 모달 관련
+      isUserModalOpen: false,
+      selectUserList: [],
+
     };
   },
 
+  mounted() {
+    this.fnSelectDeptListForTree();
+  },
+
+  watch: {
+    // 부서코드 변경 시 중복확인 여부 false로 변경
+    "currentDept.dept_code"() {
+      this.isDeptCodeDupChk = false;
+    },
+  },
+
   methods: {
-    deptSearchInit: function () {
-      this.deptSearch.searchObjectList.push(this.dept_search_data);
-    },
-
-    handleDateChange: function () {
-      if (this.startDate) {
-        this.startDate = false;
-      } else if (this.endDate) {
-        this.endDate = false;
-      }
-    },
-
-    insertForm: function () {
-      this.dataLoaded = false;
-      this.resetForm();
-    },
-
-    //부서 목록에서 선택 시
-    intoUpperDept: function (department) {
-      this.closeModal();
-      this.departmentData.upper_dept = department.dept_code;
-      this.departmentData.upper_dept_nm = department.dept_nm;
-    },
-
-    //부서코드 중복검사
-    deptCodeDuplicateCheck: function () {
+    // 부서 목록 조회 (트리형 목록 용도)
+    fnSelectDeptListForTree() {
       const vm = this;
-
-      // 1. 부서코드 null 검사
-      if (vm.$isEmpty(vm.departmentData.dept_code)) {
-        vm.$showAlert("부서 등록", "부서코드를 입력해주세요.");
-        document.getElementById("dept_code").focus();
-        return;
-      }
-
-      // 2. 부서코드 숫자만 검사
-      if (!/^\d+$/.test(vm.departmentData.dept_code)) {
-        vm.$showAlert("부서 등록", "부서코드는 숫자만 입력할 수 있습니다.");
-        document.getElementById("dept_code").focus();
-        return;
-      }
-
       axios({
-        url: "/department/" + vm.departmentData.dept_code,
+        url: "/department",
         method: "get",
-        headers: {
-          "Content-Type": "application/json;",
-        },
+        headers: { "Content-Type": "application/json; charset=UTF-8" },
       })
-        .then((response) => {
-          if (response.data.resultData.checkDuplicateOrgCode) {
-            vm.$showAlert("부서코드 중복확인", "사용중인 부서코드입니다.");
-            vm.isDuplicateChecked = false; // 중복 확인이 실패하였으므로 중복 확인 상태를 false로 설정합니다.
-          } else {
-            vm.$showAlert(
-              "부서코드 중복확인",
-              "사용할 수 있는 부서코드입니다."
-            );
-            vm.isDuplicateChecked = true; // 중복 확인이 성공하였으므로 중복 확인 상태를 true로 설정합니다.
-          }
+        .then(response => {
+          vm.deptVO = response.data.resultData.departmentVO;
+          vm.deptTreeList = response.data.resultData.hierachyList;
         })
-        .catch((error) => {
-          this.$showAlert(
-            "에러 발생",
-            "에러가 발생했습니다. 관리자에게 문의해 주세요."
-          );
+        .catch(error => {
+          this.$showAlert("에러 발생", "에러가 발생했습니다. 관리자에게 문의해 주세요.");
         });
     },
 
-    // 부서등록 유효성 검사
-    insertDepartmentValidation() {
+    // 부서코드 중복확인
+    fnDeptCodeDupChk() {
       const vm = this;
-      // 1. 부서코드 중복 검사 여부 확인
-      if (!vm.isDuplicateChecked) {
-        vm.$showAlert("부서 등록", "부서코드 중복확인 후 등록해주세요.");
-        document.getElementById("deptCodeDuplicateCheck").focus();
+
+      // 유효성 검사
+      if (!vm.validationDeptCode()) {
+        return;
+      };
+
+      axios({
+        url: "/department/" + vm.currentDept.dept_code,
+        method: "get",
+        headers: { "Content-Type": "application/json; charset=UTF-8" },
+      })
+        .then(response => {
+          if (response.data.resultData.checkDuplicateOrgCode) {
+            vm.$showAlert("부서코드 중복확인", "사용중인 부서코드입니다.");
+            vm.currentDept.dept_code = null;
+          } else {
+            vm.$showAlert("부서코드 중복확인", "사용할 수 있는 부서코드입니다.");
+            vm.isDeptCodeDupChk = true;
+          }
+        })
+        .catch(error => {
+          this.$showAlert("에러 발생", "에러가 발생했습니다. 관리자에게 문의해 주세요.");
+        });
+    },
+
+    // #부서찾기모달
+    // 부서찾기 모달 열기
+    fnOpenModalByDeptList() {
+      this.fnSelectUpperDeptList(); // 부서 목록 조회(자신 제외)
+      this.isDeptModalOpen = true;
+    },
+    // 부서찾기 모달 닫기
+    fnCloseModalByDeptList() {
+      this.isDeptModalOpen = false;
+    },
+    // 부서 목록 조회(자신 제외)
+    fnSelectUpperDeptList() {
+      const vm = this;
+      // 데이터 세팅
+      vm.searchByDept.searchObjectList = [];
+      vm.searchByDept.searchObjectList.push(vm.searchDataByDept);
+      // 실행
+      axios({
+        url: "/department/departments/" + vm.currentDept.dept_code,
+        method: "post",
+        headers: { "Content-Type": "application/json; charset=UTF-8" },
+        data: vm.searchByDept,
+      })
+        .then(response => {
+          if (response.data != null) {
+            vm.selectDeptList = response.data.resultData.selectDeptList;
+            vm.searchByDept = response.data.resultData.searchVO;
+
+            // 하위 부서 선택을 제외하기 위한 옵션 추가
+            let selectChildDeptList = response.data.resultData.selectChildDeptList; // 하위 부서 목록
+            if (vm.selectDeptList.length > 0 && selectChildDeptList.length > 0) {
+              for (let dept of vm.selectDeptList) {
+                dept.isUsed = true;
+                for (let deptCode of selectChildDeptList) {
+                  if (dept.dept_code == deptCode) {
+                    dept.isUsed = false;
+                    break;
+                  }
+                }
+              }
+            }
+          } else {
+            this.$showAlert("사용자 관리", "에러가 발생했습니다. 관리자에게 문의해 주세요.");
+          }
+        })
+        .catch(error => {
+          vm.$showAlert("사용자 관리", "목록 불러오기 오류, 관리자에게 문의바랍니다.");
+        });
+    },
+    // 부서찾기 모달 내 부서 선택
+    fnSelectedUpperDept(dept) {
+      if (!dept.isUsed) {
+        this.$showAlert("부서 찾기", "자신의 하위 부서는 선택할 수 없습니다.");
+        return;
+      }
+      this.currentDept.upper_dept = dept.dept_code;
+      this.currentDept.upper_dept_nm = dept.dept_nm;
+
+      this.fnCloseModalByDeptList(); // 부서찾기 모달 닫기
+    },
+
+    // 부서 등록
+    fnInsertDept() {
+      const vm = this;
+      // 유효성 검사
+      if (!vm.insertDeptValidation()) {
+        return
+      };
+      // 실행
+      axios({
+        url: "/department",
+        method: "post",
+        headers: { "Content-Type": "application/json; charset=UTF-8" },
+        data: vm.currentDept,
+      })
+        .then(response => {
+          vm.$showAlert("부서 등록", "부서 등록이 완료되었습니다.");
+
+          // 초기화
+          vm.fnCancelDept();
+          vm.fnSelectDeptListForTree() // 부서 목록 조회 (트리형 목록 용도)
+        })
+        .catch(error => {
+          this.$showAlert("에러 발생", "에러가 발생했습니다. 관리자에게 문의해 주세요.");
+        });
+    },
+
+    // 부서 수정
+    fnUpdateDept() {
+      const vm = this;
+      // 실행
+      axios({
+        url: "/department",
+        method: "put",
+        headers: { "Content-Type": "application/json; charset=UTF-8" },
+        data: vm.currentDept,
+      })
+        .then(response => {
+          vm.$showAlert("부서 수정", "부서 정보가 수정되었습니다.");
+
+          // 초기화
+          vm.fnCancelDept();
+          vm.fnSelectDeptListForTree(); // 부서 목록 조회 (트리형 목록 용도)
+        })
+        .catch(error => {
+          this.$showAlert("에러 발생", "에러가 발생했습니다. 관리자에게 문의해 주세요.");
+        });
+    },
+
+    // 부서 삭제
+    async fnDeleteDept() {
+      const vm = this;
+
+      let isConfirmChk = await this.$showConfirm("경고", "선택한 부서를 삭제하시겠습니까?");
+      if (!isConfirmChk) {
+        return;
+      }
+
+      // 실행
+      axios({
+        url: `/department`,
+        method: "delete",
+        headers: { "Content-Type": "application/json; charset=UTF-8" },
+        data: vm.currentDept,
+      })
+        .then(response => {
+          vm.$showAlert("부서 삭제", "부서 삭제에 성공했습니다.");
+
+          // 초기화
+          vm.fnCancelDept();
+          vm.fnSelectDeptListForTree(); // 부서 목록 조회 (트리형 목록 용도)
+        })
+        .catch(error => {
+          vm.$showAlert("부서 삭제", "삭제오류, 관리자에게 문의바랍니다.");
+        });
+    },
+
+    // 부서 취소
+    fnCancelDept() {
+      this.editMode = 'create';
+      this.currentDept = this.deptVO;
+      this.selectedDept = {};
+      this.isDeptCodeDupChk = false; // 부서코드 중복확인 여부
+
+      // 사용자 목록
+      this.userList = [];
+      this.userSelectList = [];
+      this.searchByUser = Object.assign({}, this.$getDefaultSerchVO());
+      this.searchDataByUser = this.$getDefaultSerchItem(null, "string");
+    },
+
+    // 부서 상세 조회
+    fnSelectDept(currentDept) {
+      const vm = this;
+      // 데이터 세팅
+      vm.selectedDept = currentDept;
+      // 실행
+      axios({
+        url: "/department/selectDept/" + currentDept.id,
+        method: "get",
+        headers: { "Content-Type": "application/json; charset=UTF-8" },
+      })
+        .then(response => {
+          vm.editMode = 'update';
+          vm.originDept = response.data.resultData.departmentVO;
+          vm.currentDept = Object.assign({}, response.data.resultData.departmentVO);
+          // 부서 내부 목록 조회
+          vm.fnSelectUserList();
+        })
+        .catch(error => {
+          vm.$showAlert("사용자 관리", "불러오기 오류, 관리자에게 문의바랍니다.");
+        });
+    },
+
+    // 부서 내 사용자 목록 조회
+    fnSelectUserList() {
+      const vm = this;
+      // 데이터 세팅
+      vm.searchDataByUser.key = "deptCode";
+      vm.searchDataByUser.value = vm.selectedDept.id;
+      vm.searchByUser.searchObjectList = [];
+      vm.searchByUser.searchObjectList.push(vm.searchDataByUser);
+      // 실행
+      axios({
+        url: "/orgnztMember/selectOrgnztMemberList",
+        method: "post",
+        headers: { "Content-Type": "application/json; charset=UTF-8" },
+        data: vm.searchByUser,
+      })
+        .then(response => {
+          vm.userList = response.data.resultData.list;
+          vm.searchByUser = response.data.resultData.searchVO;
+        })
+        .catch(error => {
+          vm.$showAlert("회원 목록", "목록 불러오기 오류, 관리자에게 문의바랍니다.");
+        });
+    },
+    // 사용자 목록 전체 선택
+    fnChkAll() {
+      if (this.isChkUserAll) {
+        this.userSelectList = this.userList;
+      } else {
+        this.userSelectList = [];
+      }
+    },
+    // 사용자 목록 상세 선택
+    fnChangeChk() {
+      if (this.userSelectList.length == this.userList.length) {
+        this.isChkUserAll = true;
+      } else {
+        this.isChkUserAll = false;
+      }
+    },
+    // 사용자 추가 모달 열기
+    fnOpenModalByUserList() {
+      this.isUserModalOpen = true;
+    },
+    // 사용자 추가 모달 닫기
+    fnCloseModalByUserList() {
+      this.isUserModalOpen = false;
+      this.fnSelectUserList(); // 사용자 목록 조회
+    },
+    // 사용자 삭제
+    fnDeleteUser() {
+      const vm = this;
+      // 실행
+      axios({
+        url: "/orgnztMember",
+        method: "delete",
+        headers: { "Content-Type": "application/json; charset=UTF-8" },
+        data: vm.userSelectList,
+      })
+        .then(function (response) {
+          vm.$showAlert("작업 성공", "사용자 삭제에 성공했습니다.");
+          vm.fnSelectUserList(); // 사용자 목록 조회
+        })
+        .catch(function (error) {
+          vm.$showAlert("작업 실패", "사용자 삭제에 실패했습니다.\n관리자에게 문의바랍니다.");
+        });
+    },
+
+    // #유효성 검사
+    // 부서 등록용 유효성 검사
+    insertDeptValidation() {
+      // 부서코드 중복 검사 여부 확인
+      if (!this.isDeptCodeDupChk) {
+        this.$showAlert("부서 등록", "부서코드 중복확인 후 등록해주세요.");
         return false;
       }
 
-      // 2. 부서명 null 검사
-      if (vm.$isEmpty(vm.departmentData.dept_nm)) {
-        vm.$showAlert("부서 등록", "부서명을 입력해주세요.");
-        document.getElementById("dept_nm").focus();
-        return false;
-      }
-
-      // // 3. 상위 부서 검사 null 검사
-      // if (vm.$isEmpty(vm.departmentData.upper_dept) || vm.$isEmpty(vm.departmentData.upper_dept_nm)) {
-      //   vm.$showAlert("부서 등록", "상위 부서를 선택해주세요.");
-      //   return false;
-      // }
-
-      // 4. 권한 null 검사
-      if (vm.$isEmpty(vm.departmentData.author)) {
-        vm.$showAlert("부서 등록", "권한을 선택해주세요.");
-        document.getElementById("author").focus();
+      // 부서코드 유효성 검사
+      if (!this.validationDeptCode()) {
         return false;
       }
 
       return true;
     },
-
-    //부서 등록
-    departmentInsert() {
-      const vm = this;
-      if (!vm.insertDepartmentValidation()) return;
-
-      axios({
-        url: "/department",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json;",
-        },
-        data: vm.departmentData,
-      })
-        .then(function (response) {
-          vm.$showAlert("부서 등록", "부서 등록이 완료되었습니다.");
-          vm.resetForm();
-
-          vm.selectDepartments(); // 부서 리스트 재조회
-        })
-        .catch(function (error) {
-          this.$showAlert(
-            "에러 발생",
-            "에러가 발생했습니다. 관리자에게 문의해 주세요."
-          );
-        });
-    },
-
-    // 부서 찾기 모달 열기
-    openDeptSearchModal() {
-      this.selectDepartmentList(); // 부서 목록 조회(전체)
-      this.isDeptModalOpen = true;
-    },
-    // 부서 찾기 모달 닫기
-    closeModal() {
-      this.departmentList = []; // 초기화
-      this.isDeptModalOpen = false;
-    },
-    // 부서 찾기 - 부서 목록 조회
-    selectDepartmentList() {
-      const vm = this;
-      axios({
-        url: "/department/departments",
-        method: "post",
-        data: vm.deptSearch,
-      })
-        .then(function (response) {
-          vm.departmentList = response.data.resultData.selectDeptList;
-        })
-        .catch(function (error) {
-          vm.$showAlert(
-            "부서 조회",
-            "목록 불러오기 오류, 관리자에게 문의바랍니다."
-          );
-        });
-    },
-
-    // 부서 리스트 조회
-    selectDepartments() {
-      const vm = this;
-      axios({
-        url: "/department",
-        method: "get",
-        params: {
-          user_id: vm.$store.state.loginUser.user_id,
-        },
-      })
-        .then(function (response) {
-          vm.departmentTreeList =
-            response.data.resultData.selectTreeDepartments;
-        })
-        .catch(function (error) {
-          this.$showAlert(
-            "에러 발생",
-            "에러가 발생했습니다. 관리자에게 문의해 주세요."
-          );
-        });
-    },
-
-    resetForm() {
-      this.departmentData = {
-        org_code: null,
-        dept_nm: null,
-        dept_dc: null,
-        upper_dept: null,
-        author: 'ROLE_USER', // 사용자 권한
-      };
-    },
-
-    // 권한 목록 조회
-    getAuthorList() {
-      const vm = this;
-      axios({
-        url: "/department/getAuthorInfo",
-        method: "get",
-      })
-        .then(function (response) {
-          vm.authorList = response.data.resultData.getAuthorInfo;
-        })
-        .catch(function (error) {
-          this.$showAlert(
-            "에러 발생",
-            "에러가 발생했습니다. 관리자에게 문의해 주세요."
-          );
-        });
-    },
-
-    loadDepartmentData(department) {
-      this.departmentData = Object.assign({}, department); // 클릭한 호스트의 데이터를 복사하여 저장합니다.
-      this.originaldepartmentData = Object.assign({}, department);
-      this.dataLoaded = true; // 데이터가 로드되었음을 표시합니다.
-      this.selectedDeptCode = department.dept_code;
-      this.selectMemberList();
-    },
-
-    //부서별 사용자 목록 조회
-    selectMemberList: function () {
-      const vm = this;
-      vm.member_search_data.key = "orgnzt_info.dept_code";
-      vm.member_search_data.value = vm.departmentData.dept_code;
-      vm.memberSearch.searchObjectList.push(vm.member_search_data);
-
-      axios({
-        url: "/member/list",
-        method: "post",
-        data: vm.memberSearch,
-      })
-        .then(function (response) {
-          if (response.data) {
-            vm.inDeptMemberList = response.data.resultData.selectMemberList;
-            vm.memberSearch.totalRows = response.data.resultData.totalRow;
-            vm.memberIdx =
-              vm.memberSearch.totalRows -
-              (vm.memberSearch.currentPage - 1) * vm.memberSearch.perPage;
-          } else {
-            this.$showAlert(
-              "에러 발생",
-              "에러가 발생했습니다. 관리자에게 문의해 주세요."
-            );
-          }
-        })
-        .catch(function (error) {
-          vm.$showAlert(
-            "회원 목록",
-            "목록 불러오기 오류, 관리자에게 문의바랍니다."
-          );
-        });
-    },
-
-    //사용자 선택 삭제용 선택 기능
-    check: function (member) {
-      this.selectedMembers.push(member.userId);
-    },
-
-    //사용자 선택 삭제용 전체 선택 기능
-    memberCheckAll(event) {
-      const isChecked = event.target.checked;
-      this.inDeptMemberList.forEach((inDeptMember) => {
-        inDeptMember.selected = isChecked; // 전체 선택/해제 기능
-      });
-    },
-
-    // 부서 수정
-    async updateDepartment() {
-      const vm = this;
-      if (
-        JSON.stringify(vm.departmentData) ===
-        JSON.stringify(vm.originaldepartmentData)
-      ) {
-        vm.$showAlert("부서 수정", "수정된 정보가 없습니다.");
-        return;
-      }
-      axios
-        .put("/department", vm.departmentData)
-        .then((response) => {
-          vm.$showAlert("부서 수정", "부서 정보가 수정되었습니다.");
-          vm.resetForm();
-
-          vm.selectDepartments(); // 부서 리스트 재조회
-        })
-        .catch((error) => {
-          vm.$showAlert(
-            "에러 발생",
-            "에러가 발생했습니다. 관리자에게 문의해 주세요.");
-        });
-    },
-
-    async deleteDepartments() {
-      const vm = this;
-
-      axios({
-        url: `/department`,
-        method: "delete",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        data: vm.departmentData,
-      })
-        .then(function (response) {
-          // 삭제가 성공하면 화면에서도 호스트를 제거합니다.
-          if (response.data.resultData.deleteDepartment > 0) {
-            vm.$showAlert("부서 삭제", "선택한 부서가 삭제되었습니다.");
-            vm.selectDepartments();
-          } else {
-            vm.$showAlert(
-              "부서 삭제",
-              "선택한 부서 삭제에 실패하였습니다. 다시 시도해주세요."
-            );
-          }
-        })
-        .catch(function (error) {
-          vm.$showAlert("부서 삭제", "삭제오류, 관리자에게 문의바랍니다.");
-        });
-    },
-
-    // 호스트-부서 연결을 위한 메서드들
-    // 호스트 연결 모달창
-    openHostModal: function () {
-      // if (!this.departmentData.dept_code) {
-      //   this.$showAlert("호스트 연결", "선택된 부서가 없습니다.");
-      //   return;
-      // }
-
-      this.isHostModalOpen = true;
-      this.hostSearch.searchObjectList.push(this.host_search_data);
-      this.selectHosts();
-    },
-    closeHostModal: function () {
-      this.isHostModalOpen = false;
-      this.hosts = [];
-      this.hostIdx = 0;
-      this.hostSearch = this.$getDefaultSerchVO();
-      this.host_search_data = this.$getDefaultSerchItem(null, "String");
-      this.selectedHost = null;
-    },
-    // 호스트 목록 불러오기
-    selectHosts() {
-      const vm = this;
-      axios({
-        url: "/host/list",
-        method: "post",
-        headers: {},
-        data: vm.hostSearch,
-      })
-        .then(function (response) {
-          vm.hosts = response.data.resultData.hostList;
-          vm.hostSearch.totalRows = response.data.resultData.totalRow;
-          vm.hostIdx =
-            vm.hostSearch.totalRows -
-            (vm.hostSearch.currentPage - 1) * vm.hostSearch.perPage;
-          // 이미 부서에 등록된 호스트는 빠지게
-          if (vm.depthDepth === 0) {
-            vm.hosts = vm.hosts.filter(
-              (host) =>
-                !vm.deptHostData.some(
-                  (deptHost) => deptHost.host_code === host.host_code
-                )
-            );
-          }
-        })
-        .catch(function (error) {
-          vm.$showAlert(
-            "호스트 목록",
-            "목록 불러오기 오류, 관리자에게 문의바랍니다."
-          );
-        });
-    },
-
-    // 사용자 연결 모달창
-    openMemberModal: function () {
-      if (!this.departmentData.dept_code) {
-        this.$showAlert("호스트 연결", "선택된 부서가 없습니다.");
-        return;
+    // 부서코드 유효성 검사
+    validationDeptCode() {
+      // 부서코드 null 검사
+      if (this.$isEmpty(this.currentDept.dept_code)) {
+        this.$showAlert("부서 등록", "부서코드를 입력해주세요.");
+        return false;
       }
 
-      this.isMemberModalOpen = true;
-      this.usersSearch.searchObjectList.push(this.search_data1);
-      this.usersSearch.searchObjectList.push(this.search_data2);
-      this.selectUsers();
-    },
-    closeMemberModal: function () {
-      this.isMemberModalOpen = false;
-      this.users = [];
-      this.usersIdx = 0;
-      this.usersSearch = this.$getDefaultSerchVO();
-      this.search_data1 = this.$getDefaultSerchItem(null, "String");
-      this.search_data2 = this.$getDefaultSerchItem(null, "String");
-      this.selectedUsers = null;
-    },
-
-    // 사용자 목록 불러오기
-    selectUsers() {
-      const vm = this;
-      vm.usersSearch.searchObjectList = [];
-      if (
-        vm.departmentData.dept_code != null &&
-        vm.departmentData.dept_code != ""
-      ) {
-        vm.search_data1.key = "dept_code";
-        vm.search_data1.value = vm.departmentData.dept_code;
-        vm.usersSearch.searchObjectList.push(vm.search_data1);
-      }
-      if (vm.search_data2.value != null && vm.search_data2.value != "") {
-        vm.usersSearch.searchObjectList.push(vm.search_data2);
-        vm.usersSearch.currentPage = 1; // 첫 페이지로 초기화
+      // 부서코드 숫자만 검사
+      if (!/^\d+$/.test(this.currentDept.dept_code)) {
+        this.$showAlert("부서 등록", "부서코드는 숫자만 입력할 수 있습니다.");
+        return false;
       }
 
-      axios({
-        url: "/member/users",
-        method: "post",
-        headers: {},
-        data: vm.usersSearch,
-      })
-        .then(function (response) {
-          vm.users = response.data.resultData.selectMemberList;
-          vm.usersSearch.totalRows = response.data.resultData.totalRow;
-          vm.usersIdx =
-            vm.usersSearch.totalRows -
-            (vm.usersSearch.currentPage - 1) * vm.usersSearch.perPage;
-        })
-        .catch(function (error) {
-          vm.$showAlert(
-            "사용자 목록",
-            "목록 불러오기 오류, 관리자에게 문의바랍니다."
-          );
-        });
+      return true;
     },
-    addSelectUsers() {
-      const vm = this;
-      axios({
-        url: "/member/users/add",
-        method: "post",
-        headers: { "Content-Type": "application/json" },
-        data: JSON.stringify({ users: vm.addusers }),
-      })
-        .then(function (response) {
-          vm.closeMemberModal();
-          vm.selectMemberList();
-        })
-        .catch(function (error) {
-          vm.$showAlert(
-            "멤버추가 오류",
-            "멤버추가 오류, 관리자에게 문의바랍니다."
-          );
-        });
-    },
-    delSelectUsers() {
-      const vm = this;
-      axios({
-        url: "/member/users/del",
-        method: "post",
-        headers: { "Content-Type": "application/json" },
-        data: JSON.stringify({ users: vm.addusers }),
-      })
-        .then(function (response) {
-          vm.closeMemberModal();
-          vm.selectMemberList();
-        })
-        .catch(function (error) {
-          vm.$showAlert(
-            "멤버추가 오류",
-            "멤버추가 오류, 관리자에게 문의바랍니다."
-          );
-        });
-    },
-    toggleSelectAll(event) {
-      const isChecked = event.target.checked;
-      this.users.forEach((user) => {
-        user.selected = isChecked; // 전체 선택/해제 기능
-      });
-    },
-    async confirmSelection() {
-      this.addusers = this.users
-        .filter((user) => user.selected) // 선택된 사용자 필터링
-        .map((user) => ({
-          userId: user.userId,
-          dept_code: this.departmentData.dept_code,
-        })); // 필요한 데이터 추출
-      const confirmed = await this.$showConfirm(
-        "멤버추가",
-        "선택하신 멤버를 추가하시겠습니까?"
-      );
-
-      console.log("!! 1")
-      // 사용자가 확인했을 경우에만 추가 함수 실행
-      if (confirmed) {
-        console.log("!! 2")
-        this.addSelectUsers();
-      }
-    },
-    async deleteSelection() {
-      this.addusers = this.inDeptMemberList
-        .filter((inDeptMember) => inDeptMember.selected) // 선택된 사용자 필터링
-        .map((inDeptMember) => ({
-          userId: inDeptMember.userId,
-          dept_code: this.departmentData.dept_code,
-        })); // 필요한 데이터 추출
-      const deleteSele = await this.$showConfirm(
-        "멤버삭제",
-        "선택하신 멤버를 삭제하시겠습니까?"
-      );
-
-      // 사용자가 확인했을 경우에만 추가 함수 실행
-      if (deleteSele) {
-        this.delSelectUsers();
-      }
-    },
-    // 폴더 모달창 열기
-    selectAndConnect(hostCode) {
-      this.selectedHost = hostCode;
-      this.connectionConfirm("choose");
-    },
-    connectionConfirm(type) {
-      const vm = this;
-      vm.connection.host_code = vm.selectedHost || vm.connection.host_code;
-
-      axios
-        .get("/files/connection", {
-          params: { host_code: vm.connection.host_code },
-        })
-        .then((response) => {
-          vm.$showAlert("파일시스템 연결", response.data.message);
-          if (response.data.status === 200) {
-            this.fileTreeList(type);
-          }
-        })
-        .catch((error) => {
-          vm.$showAlert(
-            "파일시스템 연결",
-            "파일시스템 연결 오류, 관리자에게 문의하세요."
-          );
-          vm.$router.go(-1); // 오류 시 이전 페이지로 이동
-        });
-    },
-    // 폴더 가져오기
-    fileTreeList(type) {
-      const vm = this;
-      vm.nodes = [];
-      vm.connection.path = "#";
-      vm.connection.depth = 0;
-      vm.connection.type = "folder";
-
-      axios
-        .get("/files/tree", { params: vm.connection })
-        .then((response) => {
-          vm.nodes = response.data.resultData.fileTree;
-          vm.connection.path = null;
-          vm.selectedHost = null;
-          vm.openTreeModal();
-          vm.selectModalType = type;
-        })
-        .catch((error) => {
-          vm.$showAlert(
-            "파일리스트 조회",
-            "파일리스트 조회 오류, 관리자에게 문의하세요."
-          );
-          vm.connection.path = null;
-          vm.selectedHost = null;
-          vm.closeHostModal();
-        });
-    },
-    openTreeModal() {
-      this.treeModalOpen = true;
-    },
-    closeTreeModal() {
-      this.treeModalOpen = false;
-      this.modalSeletedNode = null;
-    },
-    selectFolder(path) {
-      this.connection.path = path;
-    },
-    // 폴더 모달창에서 선택한 것으로 삽입 혹은 수정
-    async axiosDeptHost(host) {
-      const vm = this;
-      if (
-        !(await this.$showConfirm("호스트 추가", "호스트 추가하시겠습니까?"))
-      ) {
-        return;
-      }
-      // if (type === "선택") {
-      axios({
-        url: "/DeptHost",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        data: {
-          dept_code: vm.departmentData.dept_code,
-          host_code: host.host_code,
-          main_folder_path: host.path,
-        },
-      })
-        .then(function (response) {
-          if (response.data.resultData.insertDeptHost > 0) {
-            vm.$showAlert("호스트 추가", "선택한 호스트가 추가되었습니다.");
-            vm.selectDeptHost();
-          } else {
-            vm.$showAlert(
-              "호스트 추가",
-              "선택한 호스트 추가에 실패하였습니다. 다시 시도해주세요."
-            );
-          }
-          vm.connection.path = null;
-          vm.closeTreeModal();
-          vm.closeHostModal();
-        })
-        .catch(function (error) {
-          vm.$showAlert("호스트 추가", "추가오류, 관리자에게 문의바랍니다.");
-          vm.connection.path = null;
-          vm.closeTreeModal();
-          vm.closeHostModal();
-        });
-    },
-    // 호스트-부서 연결된 데이터 가져오기
-    selectDeptHost() {
-      const vm = this;
-      vm.dept_search_data.key = "dept_code";
-      vm.dept_search_data.value = vm.departmentData.dept_code;
-      vm.dept_search_data.type = "eq";
-      vm.deptSearch.searchObjectList.push(vm.dept_search_data);
-
-      axios({
-        url: "/DeptHost/list",
-        method: "post",
-        headers: {},
-        data: vm.deptSearch,
-      })
-        .then(function (response) {
-          vm.deptHostData = response.data.resultData.selectDeptHost;
-          // 상위부서에서 가져온 데이터인지 아닌지 구분
-          vm.depthDepth = response.data.resultData.selectDeptHost[0].depth;
-        })
-        .catch(function (error) { });
-    },
-    // 호스트-부서 연결된 데이터 수정하기
-    chooseDeptHost(data, type) {
-      const vm = this;
-      if (vm.depthDepth !== 0) {
-        vm.$showAlert("호스트 수정", "수정할 권한이 없습니다.");
-        return;
-      }
-      vm.connection.host_code = data.host_code;
-      vm.connectionConfirm(type);
-    },
-    // 호스트-부서 체크박스 일괄 체크
-    deptHostCheckAll() {
-      const vm = this;
-      vm.deptCheckAll = !vm.deptCheckAll;
-      vm.selectedDepts = [];
-
-      if (vm.deptCheckAll) {
-        vm.deptHostData.forEach((data) => {
-          vm.selectedDepts.push(data.host_code);
-        });
-      }
-    },
-    // 부서 변경 시 체크 해제
-    deptHostUncheckAll() {
-      this.deptCheckAll = null;
-      this.selectedDepts = [];
-    },
-    // 호스트-부서 삭제
-    async deleteSelectedDeptHosts() {
-      const vm = this;
-      if (vm.selectedDepts.length === 0) {
-        vm.$showAlert("호스트 삭제", "선택한 호스트가 없습니다.");
-        return;
-      }
-      if (vm.depthDepth !== 0) {
-        vm.$showAlert("호스트 삭제", "삭제할 권한이 없습니다.");
-        return;
-      }
-      if (
-        !(await vm.$showConfirm(
-          "호스트삭제",
-          "선택한 호스트를 삭제하시겠습니까?"
-        ))
-      ) {
-        return;
-      }
-      const deptHostsToDelete = vm.selectedDepts.map((host_code) => ({
-        dept_code: vm.departmentData.dept_code,
-        host_code: host_code,
-      }));
-
-      axios({
-        url: "/DeptHost",
-        method: "delete",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        data: deptHostsToDelete,
-      })
-        .then(function (response) {
-          if (response.data.resultData.deleteResult > 0) {
-            vm.$showAlert("호스트 삭제", "선택한 호스트가 삭제되었습니다.");
-            vm.deptCheckAll = false;
-            vm.selectedDepts = [];
-            vm.selectDeptHost();
-          } else {
-            vm.$showAlert(
-              "호스트 삭제",
-              "선택한 호스트 삭제에 실패하였습니다. 다시 시도해주세요."
-            );
-          }
-        })
-        .catch(function (error) {
-          vm.$showAlert("호스트 삭제", "삭제오류, 관리자에게 문의바랍니다.");
-        });
-    },
-  },
-  watch: {
-    departmentData: {
-      handler: "selectDeptHost",
-    },
-    //부서코드 값 변경 시 중복체크여부 false로 변경
-    "departmentData.dept_code": function (newVal, oldVal) {
-      this.isDuplicateChecked = false;
-    },
-  },
-  components: {
-    PageNavigation: PageNavigation,
-    SvgIcon: SvgIcon,
-    PaginationButton: PaginationButton,
-    DepartmentTree: DepartmentTree,
-    TreeModal: TreeModal,
-  },
-  mounted() {
-    this.getAuthorList();
-    this.selectDepartments();
-    this.deptSearchInit();
   },
 };
 </script>

e6e0648

client/views/pages/integrated/department/DeptHostList.vue (added)

+++ client/views/pages/integrated/department/DeptHostList.vue

...	...	@@ -0,0 +1,298 @@
	1	+<template>
	2	+ <div class="table-zone">
	3	+ <div class="list-info flex justify-between align-center">
	4	+ <div class="count-zone">
	5	+ <p> 총 <span>{{ list.length }}</span>건 중 <span>{{ selectedList.length }}</span>건 선택 </p>
	6	+ </div>
	7	+ <div class="cunt-selectZone">
	8	+ <select v-model="search.perPage" @change="fnSelectList">
	9	+ <option value="10">10개 보기</option>
	10	+ <option value="20">20개 보기</option>
	11	+ </select>
	12	+ </div>
	13	+ </div>
	14	+ <table class="list-table">
	15	+ <colgroup>
	16	+ <col style="width: 5%" />
	17	+ <col style="width: 10%" />
	18	+ <col style="width: 42.5%" />
	19	+ <col style="width: 42.5%" />
	20	+ </colgroup>
	21	+ <thead>
	22	+ <tr>
	23	+ <th>
	24	+ <input type="checkbox" v-model="isChkUserAll" @change="fnChkAll()" />
	25	+ </th>
	26	+ <th>No</th>
	27	+ <th>호스트명</th>
	28	+ <th>메인폴더</th>
	29	+ </tr>
	30	+ </thead>
	31	+ <tbody>
	32	+ <template v-if="list.length > 0">
	33	+ <tr v-for="(item, idx) of list" :key="idx">
	34	+ <td>
	35	+ <input type="checkbox" :value="item" v-model="selectedList" @click.stop="" @change="fnChangeChk" />
	36	+ </td>
	37	+ <td>{{ search.totalRows - idx - (search.currentPage - 1) * search.perPage }}</td>
	38	+ <td>{{ item.hostNm }}</td>
	39	+ <td>{{ item.mainFolderPath }}</td>
	40	+ </tr>
	41	+ </template>
	42	+ <tr v-else>
	43	+ <td colspan="4">등록된 데이터가 없습니다.</td>
	44	+ </tr>
	45	+ </tbody>
	46	+ </table>
	47	+ <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :maxRange="5" :click="selectDeptHost" />
	48	+ </div>
	49	+ <div class="flex justify-end">
	50	+ <button class="blue-btn small-btn" @click="fnOpenModal">호스트추가</button>
	51	+ <button class="red-border-btn small-btn" @click="fnDelete">호스트삭제</button>
	52	+ </div>
	53	+ <!-- 호스트 추가 모달 -->
	54	+ <div v-show="isModalOpen" class="modal-wrapper">
	55	+ <div class="modal-container">
	56	+ <div class="modal-title flex justify-between align-center">
	57	+ <h2>호스트 추가</h2>
	58	+ <button class="close-btn" @click="fnCloseModal">
	59	+ <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
	60	+ </button>
	61	+ </div>
	62	+ <div class="modal-content-monthly">
	63	+ <div class="search-bar flex justify-between align-center mb10">
	64	+ <div class="flex25 pl0">
	65	+ <select class="square-select full-select" v-model="modalSearchData.key">
	66	+ <option :value="null">전체</option>
	67	+ <option value="host_nm">호스트명</option>
	68	+ <option value="host_ip">호스트(IP)</option>
	69	+ <option value="rgtr_id">등록자</option>
	70	+ </select>
	71	+ </div>
	72	+ <div class="flex75 flex align-center no-gutter pr0">
	73	+ <input type="text" class="square-input flex90" placeholder="검색어를 입력해주세요." v-model="modalSearchData.value" @keyup.enter="fnSelectUserList" />
	74	+ <button class="square-button blue-btn flex10" @click="fnSelectUserList">
	75	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	76	+ </button>
	77	+ </div>
	78	+ </div>
	79	+ <div>
	80	+ <table class="list-table2">
	81	+ <colgroup>
	82	+ <col style="width: 10%" />
	83	+ <col style="width: 20%" />
	84	+ <col style="width: 20%" />
	85	+ <col style="width: 20%" />
	86	+ <col style="width: 20%" />
	87	+ <col style="width: 10%" />
	88	+ </colgroup>
	89	+ <thead>
	90	+ <tr>
	91	+ <th>No</th>
	92	+ <th>호스트명</th>
	93	+ <th>호스트(IP)</th>
	94	+ <th>사용자명</th>
	95	+ <th>포트</th>
	96	+ <th>선택</th>
	97	+ </tr>
	98	+ </thead>
	99	+ <tbody class="overflow-y" style="max-height: 500px">
	100	+ <template v-if="modalList.length > 0">
	101	+ <tr v-for="(item, idx) in modalList" :key="idx">
	102	+ <td>{{ modalSearch.totalRows - idx - (modalSearch.currentPage - 1) * modalSearch.perPage }}</td>
	103	+ <td>{{ item.host_nm }}</td>
	104	+ <td>{{ item.host_ip }}</td>
	105	+ <td>{{ item.host_id }}</td>
	106	+ <td>{{ item.host_port }}</td>
	107	+ <td><button type="button" class="blue-border-btn set-btn" @click="fnAddUser(item.hostCode)">선택</button></td>
	108	+ </tr>
	109	+ </template>
	110	+ <tr v-else>
	111	+ <td colspan="6">등록된 데이터가 없습니다.</td>
	112	+ </tr>
	113	+ </tbody>
	114	+ </table>
	115	+ <PaginationButton v-model:currentPage="modalSearch.currentPage" :perPage="modalSearch.perPage" :totalCount="modalSearch.totalRows" :click="fnSelectUserList" />
	116	+ </div>
	117	+ </div>
	118	+ </div>
	119	+ </div>
	120	+</template>
	121	+<script>
	122	+import axios from "axios";
	123	+// icon용 svg import
	124	+import SvgIcon from "@jamescoyle/vue-icon";
	125	+import { mdiMagnify, mdiClose } from "@mdi/js";
	126	+// 컴포넌트 import
	127	+import PageNavigation from "../../../component/PageNavigation.vue";
	128	+import PaginationButton from "../../../component/PaginationButton.vue";
	129	+
	130	+export default {
	131	+ components: { SvgIcon, PageNavigation, PaginationButton },
	132	+
	133	+ props: {
	134	+ deptCode: {
	135	+ type: String,
	136	+ default: null,
	137	+ },
	138	+ },
	139	+
	140	+ data() {
	141	+ return {
	142	+ // icon용 svg path
	143	+ searchPath: mdiMagnify,
	144	+ closePath: mdiClose,
	145	+
	146	+ // 목록
	147	+ list: [],
	148	+ isChkUserAll: false, // 전체 선택 여부
	149	+ selectedList: [], // 선택 항목 목록
	150	+ search: Object.assign({}, this.$getDefaultSerchVO()),
	151	+ searchData: Object.assign({}, this.$getDefaultSerchItem(null, "string")),
	152	+
	153	+ // 추가 모달
	154	+ isModalOpen: false,
	155	+ selectHostList: [],
	156	+
	157	+ // 검색용
	158	+ modalSearch: Object.assign({}, this.$getDefaultSerchVO()),
	159	+ modalSearchData: Object.assign({}, this.$getDefaultSerchItem(null, "string")),
	160	+
	161	+ // 목록용
	162	+ modalList: [],
	163	+ }
	164	+ },
	165	+
	166	+ watch: {
	167	+ deptCode(v) {
	168	+ this.fnSelectList();
	169	+ },
	170	+ },
	171	+
	172	+ methods: {
	173	+ // 목록 조회
	174	+ fnSelectList() {
	175	+ const vm = this;
	176	+ // 데이터 세팅
	177	+ vm.search.searchObjectList = [];
	178	+ vm.search.searchObjectList.push(vm.searchData);
	179	+ // 실행
	180	+ axios({
	181	+ url: "/deptHost/list/" + vm.deptCode,
	182	+ method: "post",
	183	+ headers: { "Content-Type": "application/json; charset=UTF-8" },
	184	+ data: vm.search,
	185	+ })
	186	+ .then(response => {
	187	+ vm.list = response.data.resultData.list;
	188	+ vm.search = response.data.resultData.searchVO;
	189	+ })
	190	+ .catch(error => {
	191	+ vm.$showAlert("호스트 목록", "목록 불러오기 오류, 관리자에게 문의바랍니다.");
	192	+ });
	193	+ },
	194	+
	195	+ // 목록 전체 선택
	196	+ fnChkAll() {
	197	+ if (this.isChkUserAll) {
	198	+ this.selectedList = this.list;
	199	+ } else {
	200	+ this.selectedList = [];
	201	+ }
	202	+ },
	203	+
	204	+ // 목록 상세 선택
	205	+ fnChangeChk() {
	206	+ if (this.selectedList.length == this.list.length) {
	207	+ this.isChkUserAll = true;
	208	+ } else {
	209	+ this.isChkUserAll = false;
	210	+ }
	211	+ },
	212	+
	213	+ // 호스트 삭제
	214	+ fnDelete() {
	215	+ const vm = this;
	216	+ // 실행
	217	+ axios({
	218	+ url: "/deptHost",
	219	+ method: "delete",
	220	+ headers: { "Content-Type": "application/json; charset=UTF-8" },
	221	+ data: vm.selectedList,
	222	+ })
	223	+ .then(response => {
	224	+ vm.$showAlert("작업 성공", "삭제에 성공했습니다.");
	225	+ vm.fnSelectList(); // 목록 조회
	226	+ })
	227	+ .catch(error => {
	228	+ vm.$showAlert("작업 실패", "삭제에 실패했습니다.\n관리자에게 문의바랍니다.");
	229	+ });
	230	+ },
	231	+
	232	+
	233	+ // **** 추가용 모달
	234	+ // 추가용 모달 열기
	235	+ fnOpenModal() {
	236	+ this.fnSelectUserList();
	237	+ // 모달 열기
	238	+ this.isModalOpen = true;
	239	+ },
	240	+ // 추가용 모달 닫기
	241	+ fnCloseModal() {
	242	+ // 초기화
	243	+ this.search = Object.assign({}, this.$getDefaultSerchVO());
	244	+ this.modalSearchData = Object.assign({}, this.$getDefaultSerchItem(null, "string"));
	245	+ this.modalList = []; // 목록
	246	+ // 모달 닫기
	247	+ this.isModalOpen = false;
	248	+ },
	249	+
	250	+ // 모달 목록 조회
	251	+ fnSelectUserList() {
	252	+ const vm = this;
	253	+
	254	+ // 데이터 세팅
	255	+ vm.modalSearch.searchObjectList = []; // 초기화
	256	+ vm.modalSearch.searchObjectList.push(vm.modalSearchData);
	257	+
	258	+ // 실행
	259	+ axios({
	260	+ url: "/host/list/" + vm.deptCode,
	261	+ method: "post",
	262	+ headers: { "Content-Type": "application/json; charset=UTF-8" },
	263	+ data: vm.modalSearch,
	264	+ })
	265	+ .then(response => {
	266	+ vm.modalSearch = response.data.resultData.searchVO;
	267	+ vm.modalList = response.data.resultData.list;
	268	+ })
	269	+ .catch(error => {
	270	+ vm.$showAlert("관리", "목록 불러오기 오류, 관리자에게 문의바랍니다.");
	271	+ });
	272	+ },
	273	+
	274	+ // 모달용 호스트 추가 (선택 버튼 동작)
	275	+ fnAddUser(hostCode) {
	276	+ const vm = this;
	277	+ // 데이터 세팅
	278	+ let deptHost = {
	279	+ hostCode: hostCode,
	280	+ deptCode: this.deptCode
	281	+ }
	282	+ // 실행
	283	+ axios({
	284	+ url: "/deptHost",
	285	+ method: "post",
	286	+ headers: { "Content-Type": "application/json" },
	287	+ data: deptHost,
	288	+ })
	289	+ .then(response => {
	290	+ vm.$showAlert("추가", "사용자를 추가했습니다.");
	291	+ })
	292	+ .catch(error => {
	293	+ vm.$showAlert("오류", "부서 내 추가 오류, 관리자에게 문의바랍니다.");
	294	+ });
	295	+ },
	296	+ }
	297	+}
	298	+</script>(No newline at end of file)

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,64 +1,38 @@
1	1	<template>
2		- <li class="cursor">
3		- <div
4		- :class="{
	2	+ <ul class="tree-wrap">
	3	+ <li class="cursor" v-for="(item, idx) of treeList" :key="idx">
	4	+ <div :class="{
5	5	'tree-container flex align-center': true,
6		- selected: node.dept_code === selectedId,
7		- }"
8		- @click="handleClick"
9		- >
10		- <p>
11		- <svg-icon
12		- type="mdi"
13		- :width="18"
14		- :height="18"
15		- :path="arrowPath"
16		- ></svg-icon>
17		- </p>
18		- <p>
19		- <svg-icon
20		- type="mdi"
21		- :width="18"
22		- :height="18"
23		- :path="notePath"
24		- :color="'#fbbe28'"
25		- ></svg-icon>
26		- </p>
27		- <p class="node-text">{{ node.dept_nm }}</p>
28		- </div>
29		- <ul
30		- v-if="node.children && node.children.length > 0"
31		- class="children-node"
32		- :style="{ height: toggleSelect === node.dept_code ? 'auto' : '0' }"
33		- >
34		- <DepartmentTree
35		- v-for="(child, index) in node.children"
36		- :node="child"
37		- :key="index"
38		- @selectedNode="parentSelectedNode"
39		- />
40		- </ul>
41		- </li>
	6	+ selected: node.id === selectedId,
	7	+ }" @click="handleClick">
	8	+ <p>
	9	+ <svg-icon type="mdi" :width="18" :height="18" :path="arrowPath"></svg-icon>
	10	+ </p>
	11	+ <p>
	12	+ <svg-icon type="mdi" :width="18" :height="18" :path="notePath" :color="'#fbbe28'"></svg-icon>
	13	+ </p>
	14	+ <p class="node-text">{{ node.nm }}</p>
	15	+ </div>
	16	+ <ul v-if="node.childList && node.childList.length > 0" class="children-node" :style="{ height: toggleSelect === node.id ? 'auto' : '0' }">
	17	+ <DepartmentTree v-for="(item, idx) in node.childList" :node="item" :key="idx" @selectedNode="parentSelectedNode" />
	18	+ </ul>
	19	+ </li>
	20	+ </ul>
42	21	</template>
43		-
44	22	<script>
45		-import axios from "axios";
46	23	import SvgIcon from "@jamescoyle/vue-icon";
47		-import {
48		- mdiNote,
49		- mdiChevronRight,
50		- mdiChevronDown,
51		- mdiNoteOutline,
52		-} from "@mdi/js";
	24	+import { mdiNote, mdiChevronRight, mdiChevronDown, mdiNoteOutline } from "@mdi/js";
53	25
54	26	export default {
55	27	name: "DepartmentTree",
	28	+
56	29	props: {
57		- node: {
58		- type: Object,
59		- default: () => ({}),
	30	+ treeList: {
	31	+ type: Array,
	32	+ default: [],
60	33	},
61	34	},
	35	+
62	36	data() {
63	37	return {
64	38	toggleSelect: null,
...	...	@@ -67,6 +41,7 @@
67	41	selectedId: null,
68	42	};
69	43	},
	44	+
70	45	methods: {
71	46	handleClick: function () {
72	47	const vm = this;
...	...	@@ -78,8 +53,7 @@
78	53	});
79	54
80	55	// 노드 선택 시 하위 노드 표시 및 가리기
81		- vm.$emit("selectedNode", vm.node);
82		- if (vm.toggleSelect === vm.node.dept_code) {
	56	+ if (vm.toggleSelect === vm.node.id) {
83	57	vm.toggleSelect = null;
84	58	vm.selectedId = null;
85	59	vm.arrowPath = mdiChevronRight;
...	...	@@ -88,45 +62,35 @@
88	62	if (!vm.node.children \|\| vm.node.children.length === 0) {
89	63	vm.getChildDepartment();
90	64	}
91		- vm.toggleSelect = vm.node.dept_code;
92		- vm.selectedId = vm.node.dept_code;
	65	+ vm.toggleSelect = vm.node.id;
	66	+ vm.selectedId = vm.node.id;
93	67	vm.arrowPath = mdiChevronDown;
94	68	vm.notePath = mdiNoteOutline;
95	69	}
	70	+
	71	+ vm.$emit("selectedNode", vm.node.id);
96	72	},
97	73	parentSelectedNode(node) {
98	74	this.$emit("selectedNode", node);
99	75	},
100		- // 깊이 2 이상일 때 자식 노드 불러오기
101		- getChildDepartment: function () {
102		- axios
103		- .get(`/department/tree/${this.node.dept_code}`)
104		- .then((response) => {
105		- this.node.children.push(...response.data.resultData.childDepartments);
106		- })
107		- .catch((error) => {
108		- this.$showAlert(
109		- "오류",
110		- "목록 불러오기 오류, 관리자에게 문의바랍니다."
111		- );
112		- });
113		- },
114	76	},
	77	+
115	78	components: {
116	79	SvgIcon: SvgIcon,
117	80	},
118	81	};
119	82	</script>
120		-
121	83	<style scoped>
122	84	.tree-container {
123	85	padding: 5px 10px;
124	86	}
	87	+
125	88	.children-node {
126	89	padding: 0 0 0 10px;
127	90	overflow: hidden;
128	91	transition: max-height 0.5s ease-in-out;
129	92	}
	93	+
130	94	.node-text {
131	95	font-size: 1.4rem;
132	96	margin-left: 5px;

...	...	@@ -0,0 +1,89 @@
	1	+<template>
	2	+ <div v-show="isModalOpen" class="modal-wrapper">
	3	+ <div class="modal-container">
	4	+ <!-- 모달 HEAD (제목) -->
	5	+ <div class="modal-title flex justify-between align-center">
	6	+ <h2>{{ title }}</h2>
	7	+ <button class="close-btn" @click="closeModal">
	8	+ <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
	9	+ </button>
	10	+ </div>
	11	+ <!-- 모달 BODY (본문) -->
	12	+ <div class="modal-content-monthly">
	13	+ <!-- 검색창 -->
	14	+ <div class="search-bar flex justify-center mb10">
	15	+ <div class="flex justify-between align-center">
	16	+ <div class="flex25 pl0">
	17	+ <select class="square-select full-select" v-model="searchData.key">
	18	+ <option :value="null">선택</option>
	19	+ <option value="user_nm">이름</option>
	20	+ <option value="user_id">아이디</option>
	21	+ </select>
	22	+ </div>
	23	+ <div class="pr0 flex75 flex align-center no-gutter">
	24	+ <input type="text" class="square-input flex90" v-model="searchData.value" placeholder="검색어를 입력해주세요." @keyup.enter="searchList" />
	25	+ <button class="square-button blue-btn flex10" @click="searchList">
	26	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	27	+ </button>
	28	+ </div>
	29	+ </div>
	30	+ </div>
	31	+ <!-- 목록: 본문 -->
	32	+ <div class="overflow-y" style="max-height: 500px">
	33	+ <table class="sticky-table list-table2">
	34	+ <colgroup>
	35	+ <col style="width: 10%" />
	36	+ <col style="width: 10%" />
	37	+ <col style="width: 40%" />
	38	+ <col style="width: 40%" />
	39	+ </colgroup>
	40	+ <thead>
	41	+ <tr>
	42	+ <th><input type="checkbox" /></th>
	43	+ <th>No</th>
	44	+ <th>이름</th>
	45	+ <th>아이디</th>
	46	+ </tr>
	47	+ </thead>
	48	+ <tbody>
	49	+ <tr>
	50	+ <td></td>
	51	+ <td></td>
	52	+ <td></td>
	53	+ <td></td>
	54	+ </tr>
	55	+ </tbody>
	56	+ </table>
	57	+ </div>
	58	+ <!-- 목록: 페이지네이션 -->
	59	+ <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :click="selectUsers" />
	60	+ </div>
	61	+ <!-- 모달 FOOT (버튼) -->
	62	+ <div class="modal-end flex justify-end">
	63	+ <button class="blue-btn small-btn" @click="confirmSelection">등록</button>
	64	+ </div>
	65	+ </div>
	66	+ </div>
	67	+</template>
	68	+<script>
	69	+// icon용 svg import
	70	+import SvgIcon from "@jamescoyle/vue-icon";
	71	+import { mdiMagnify, mdiClose } from "@mdi/js";
	72	+
	73	+export default {
	74	+ components: { SvgIcon },
	75	+
	76	+ data() {
	77	+ return {
	78	+ // icon용 svg path
	79	+ searchPath: mdiMagnify,
	80	+ closePath: mdiClose,
	81	+
	82	+ isModalOpen: true,
	83	+
	84	+ search: Object.assign({}, this.$getDefaultSerchVO()),
	85	+ searchData: this.$getDefaultSerchItem(null, "string"),
	86	+ }
	87	+ }
	88	+}
	89	+</script>(No newline at end of file)

...	...	@@ -0,0 +1,174 @@
	1	+<template>
	2	+ <div v-show="isModalOpen" class="modal-wrapper">
	3	+ <div class="modal-container">
	4	+ <!-- 모달 HEAD -->
	5	+ <div class="modal-title flex justify-between align-center">
	6	+ <h2>멤버 추가</h2>
	7	+ <button class="close-btn" @click="$emit('fnCloseModal')">
	8	+ <svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
	9	+ </button>
	10	+ </div>
	11	+ <!-- 모달 BODY -->
	12	+ <div class="modal-content-monthly">
	13	+ <!-- 검색 -->
	14	+ <div class="search-bar flex justify-between align-center mb10">
	15	+ <div class="flex25 pl0">
	16	+ <select class="square-select full-select" v-model="searchData.key">
	17	+ <option :value="null">전체</option>
	18	+ <option value="ui.user_nm">이름</option>
	19	+ <option value="ui.user_id">아이디</option>
	20	+ </select>
	21	+ </div>
	22	+ <div class="flex75 flex align-center no-gutter pr0">
	23	+ <input type="text" class="square-input flex90" placeholder="검색어를 입력해주세요." v-model="searchData.value" @keyup.enter="fnSelectUserList" />
	24	+ <button class="square-button blue-btn flex10" @click="fnSelectUserList">
	25	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	26	+ </button>
	27	+ </div>
	28	+ </div>
	29	+ <!-- 목록 -->
	30	+ <div>
	31	+ <!-- 목록-본문 -->
	32	+ <table class="list-table2">
	33	+ <colgroup>
	34	+ <col style="width: 10%" />
	35	+ <col style="width: 35%" />
	36	+ <col style="width: 35%" />
	37	+ <col style="width: 20%" />
	38	+ </colgroup>
	39	+ <thead>
	40	+ <tr>
	41	+ <th>No</th>
	42	+ <th>이름</th>
	43	+ <th>아이디</th>
	44	+ <th>선택</th>
	45	+ </tr>
	46	+ </thead>
	47	+ <tbody class="overflow-y" style="max-height: 500px">
	48	+ <template v-if="userList.length > 0">
	49	+ <tr v-for="(item, idx) in userList" :key="idx">
	50	+ <td>{{ search.totalRows - idx - (search.currentPage - 1) * search.perPage }}</td>
	51	+ <td>{{ item.userNm }}</td>
	52	+ <td>{{ item.userId }}</td>
	53	+ <td><button type="button" class="blue-border-btn set-btn" @click="fnAddUser(item.userId)">선택</button></td>
	54	+ </tr>
	55	+ </template>
	56	+ <tr v-else>
	57	+ <td colspan="4">등록된 데이터가 없습니다.</td>
	58	+ </tr>
	59	+ </tbody>
	60	+ </table>
	61	+ <!-- 목록-페이지네이션 -->
	62	+ <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :click="fnSelectUserList" />
	63	+ </div>
	64	+ </div>
	65	+ </div>
	66	+ </div>
	67	+</template>
	68	+<script>
	69	+import axios from "axios";
	70	+// icon용 svg import
	71	+import SvgIcon from "@jamescoyle/vue-icon";
	72	+import { mdiMagnify, mdiClose } from "@mdi/js";
	73	+// 컴포넌트 import
	74	+import PageNavigation from "../../component/PageNavigation.vue";
	75	+import PaginationButton from "../../component/PaginationButton.vue";
	76	+
	77	+export default {
	78	+ components: { SvgIcon, PageNavigation, PaginationButton },
	79	+
	80	+ props: {
	81	+ deptCode: {
	82	+ type: String,
	83	+ default: null,
	84	+ },
	85	+ isModalOpen: {
	86	+ type: Boolean,
	87	+ default: false,
	88	+ },
	89	+ },
	90	+
	91	+ data() {
	92	+ return {
	93	+ // icon용 svg path
	94	+ searchPath: mdiMagnify,
	95	+ closePath: mdiClose,
	96	+
	97	+ // 검색용
	98	+ search: Object.assign({}, this.$getDefaultSerchVO()),
	99	+ searchData: Object.assign({}, this.$getDefaultSerchItem(null, "string")),
	100	+
	101	+ // 목록용
	102	+ userList: [],
	103	+ }
	104	+ },
	105	+
	106	+ watch: {
	107	+ isModalOpen(v) {
	108	+ if (v) {
	109	+ this.fnSelectUserList();
	110	+ } else {
	111	+ // 초기화
	112	+ this.search = Object.assign({}, this.$getDefaultSerchVO());
	113	+ this.searchData = Object.assign({}, this.$getDefaultSerchItem(null, "string"));
	114	+ this.userList = []; // 사용자 목록
	115	+ }
	116	+ },
	117	+ },
	118	+
	119	+ methods: {
	120	+ // 사용자 목록 조회
	121	+ fnSelectUserList() {
	122	+ const vm = this;
	123	+
	124	+ // 데이터 세팅
	125	+ let deptInfo = Object.assign({}, this.$getDefaultSerchItem(null, "string"));
	126	+ deptInfo.key = 'deptCode';
	127	+ deptInfo.value = null;
	128	+
	129	+ vm.search.searchObjectList = []; // 초기화
	130	+ vm.search.searchObjectList.push(vm.searchData);
	131	+ vm.search.searchObjectList.push(deptInfo);
	132	+
	133	+ // 실행
	134	+ axios({
	135	+ url: "/member/list",
	136	+ method: "post",
	137	+ headers: { "Content-Type": "application/json; charset=UTF-8" },
	138	+ data: vm.search,
	139	+ })
	140	+ .then(response => {
	141	+ vm.search = response.data.resultData.searchVO;
	142	+ vm.userList = response.data.resultData.members;
	143	+ })
	144	+ .catch(error => {
	145	+ vm.$showAlert("사용자 관리", "목록 불러오기 오류, 관리자에게 문의바랍니다.");
	146	+ });
	147	+ },
	148	+
	149	+ // 사용자 추가 (선택 버튼 동작)
	150	+ fnAddUser(userId) {
	151	+ const vm = this;
	152	+ // 데이터 세팅
	153	+ let orgnztMember = {
	154	+ userId: userId,
	155	+ deptCode: this.deptCode
	156	+ }
	157	+ // 실행
	158	+ axios({
	159	+ url: "/orgnztMember",
	160	+ method: "post",
	161	+ headers: { "Content-Type": "application/json" },
	162	+ data: orgnztMember,
	163	+ })
	164	+ .then(response => {
	165	+ vm.$showAlert("사용자 추가", "사용자를 추가했습니다.");
	166	+ vm.$emit('fnCloseModal'); // 모달 닫기
	167	+ })
	168	+ .catch(error => {
	169	+ vm.$showAlert("오류", "부서 내 사용자 추가 오류, 관리자에게 문의바랍니다.");
	170	+ });
	171	+ },
	172	+ }
	173	+}
	174	+</script>(No newline at end of file)

Delete comment