File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="container">
<div class="page-titleZone flex justify-between align-center">
<p class="main-title flex80">부서 관리</p>
<PageNavigation />
</div>
<div class="content-wrap">
<div class="content-box flex justify-between">
<div class="flex20 content-box">
<div class="left-content flex100 content-box">
<div class="content-box">
<div class="content-titleZone">
<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>
</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>
<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 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>
<!-- <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>
</div>
</div>
</div>
</div>
</div>
<!-- 부서찾기 모달 -->
<div v-show="isDeptModalOpen" class="modal-wrapper">
<div class="modal-container">
<div class="modal-title flex justify-between align-center">
<h2>부서 찾기</h2>
<button class="close-btn" @click="closeModal">
<svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
</button>
</div>
<div class="modal-content-monthly">
<div class="flex justify-center w100 mb10">
<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">
<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">
<svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
</button>
</div>
</div>
</div>
</div>
<div class="overflow-y" style="height: 500px">
<table class="sticky-table list-table2">
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<thead>
<tr>
<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>
</tr>
</template>
<tr v-else>
<td colspan="2">데이터가 존재하지 않습니다.</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>
<!-- 사용자 목록 모달 -->
<div v-show="isMemberModalOpen" class="modal-wrapper">
<div class="modal-container">
<div class="modal-title flex justify-between align-center">
<h2>멤버 추가</h2>
<button class="close-btn" @click="closeMemberModal">
<svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon>
</button>
</div>
<div class="modal-content-monthly">
<div class="flex justify-center w100 mb10">
<div class="search-bar w100">
<div class="flex justify-between align-center">
<div class="flex25 pl0">
<select class="square-select full-select" v-model="search_data2.key">
<option :value="null">선택</option>
<option value="user_nm">이름</option>
<option value="user_id">아이디</option>
</select>
</div>
<div class="flex75 flex align-center no-gutter pr0">
<input type="text" class="square-input flex90" v-model="search_data2.value" placeholder="검색어를 입력해주세요." @keyup.enter="selectUsers" />
<button class="square-button blue-btn flex10" @click="selectUsers">
<svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
</button>
</div>
</div>
</div>
</div>
<div class="overflow-y" style="max-height: 500px">
<table class="sticky-table list-table2">
<colgroup>
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 40%" />
<col style="width: 40%" />
</colgroup>
<thead>
<tr>
<th><input type="checkbox" @change="toggleSelectAll" /></th>
<th>No</th>
<th>이름</th>
<th>아이디</th>
</tr>
</thead>
<tbody v-if="users.length > 0">
<tr v-for="(user, index) in users" :key="index">
<td><input type="checkbox" v-model="user.selected" /></td>
<td>{{ usersIdx - index }}</td>
<td>{{ user.userNm }}</td>
<td>{{ user.userId }}</td>
</tr>
</tbody>
</table>
</div>
<PaginationButton v-model:currentPage="usersSearch.currentPage" :perPage="usersSearch.perPage" :totalCount="usersSearch.totalRows" :click="selectUsers" />
</div>
<div class="modal-end flex justify-end">
<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" />
</template>
<script>
import PageNavigation from "../../component/PageNavigation.vue";
import PaginationButton from "../../component/PaginationButton.vue";
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify, mdiClose } from "@mdi/js";
import axios from "axios";
import DepartmentTree from "../../component/DepartmentTree.vue";
import TreeModal from "../../component/FileTreeModal.vue";
export default {
data() {
return {
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,
//세현 추가
isDeptModalOpen: false,
memberSearch: this.$getDefaultSerchVO(),
member_search_data: this.$getDefaultSerchItem(null, "String"),
noDeptMemberList: [],
inDeptMemberList: [],
memberIdx: 0,
selectedMembers: [],
checkAll: 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 () {
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,
method: "get",
headers: {
"Content-Type": "application/json;",
},
})
.then((response) => {
if (response.data.resultData.checkDuplicateOrgCode) {
vm.$showAlert("부서코드 중복확인", "사용중인 부서코드입니다.");
vm.isDuplicateChecked = false; // 중복 확인이 실패하였으므로 중복 확인 상태를 false로 설정합니다.
} else {
vm.$showAlert(
"부서코드 중복확인",
"사용할 수 있는 부서코드입니다."
);
vm.isDuplicateChecked = true; // 중복 확인이 성공하였으므로 중복 확인 상태를 true로 설정합니다.
}
})
.catch((error) => {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
// 부서등록 유효성 검사
insertDepartmentValidation() {
const vm = this;
// 1. 부서코드 중복 검사 여부 확인
if (!vm.isDuplicateChecked) {
vm.$showAlert("부서 등록", "부서코드 중복확인 후 등록해주세요.");
document.getElementById("deptCodeDuplicateCheck").focus();
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();
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;
}
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; // 첫 페이지로 초기화
}
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(
"사용자 목록",
"목록 불러오기 오류, 관리자에게 문의바랍니다."
);
});
},
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>