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="card">
<div class="card-body">
<h2 class="card-title">부서 관리</h2>
<!-- Multi Columns Form -->
<div class="flex align-top">
<div class="sch-form-wrap search ">
<div v-for="(menu, index) in menus" :key="index" class="sidemenu">
<details class="menu-box" open>
<summary class="topmenu">
<img :src="arrow" alt="" class="arrow">
<img :src="topmenuicon" alt="">
<p>{{ menu.title }} </p>
<button @click="addSubMenu(index)" class="btn sm xsm secondary">sub +</button>
</summary>
<ul>
<li class="submenu" v-for="(submenu, subIndex) in menu.submenus" :key="subIndex">
<router-link :to="submenu.link" exact-active-class="active-link" v-slot="{ isExactActive }">
<img :src="menuicon" alt="">
<p>{{ submenu.label }}</p>
</router-link>
</li>
</ul>
</details>
</div>
<div class="buttons">
<button @click="addTopMenu"><img :src="addtopmenu" alt=""></button>
</div>
</div>
<div style="width: 100%;">
<div class=" sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">부서 정보</h3>
<div class="buttons" style="margin: 0;">
<button type="submit" class="btn sm sm tertiary">초기화</button>
<button type="reset" class="btn sm sm secondary">등록</button>
<button type="delete" class="btn sm sm btn-red">삭제</button>
</div>
</div>
<form class="row g-3 pt-3 needs-validation detail" @submit.prevent="handleSubmit"
style="margin-bottom: 3rem;">
<div class="col-12">
<label for="purpose" class="form-label">상위부서</label>
<input type="text" class="form-control" id="purpose" v-model="purpose" readonly />
</div>
<div class="col-12">
<label for="purpose" class="form-label">
<p>부서명
<p class="require"><img :src="require" alt=""></p>
</p>
</label>
<input type="text" class="form-control" id="purpose" v-model="purpose" />
</div>
<div class="col-12 chuljang border-x">
<label for="prvonsh" class="form-label">부서설명</label>
<input type="text" class="form-control textarea" id="reason" v-model="reason" />
</div>
</form>
<div class=" sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">부서 사용자</h3>
<div class="buttons" style="margin: 0;">
<button type="reset" class="btn sm sm secondary" @click="showPopup = true">사용자 추가</button>
<button type="delete" class="btn sm sm btn-red" @click="removeMember(index)">사용자 삭제</button>
</div>
<HrPopup v-if="showPopup" @close="showPopup = false" @select="addMember"/>
</div>
<div class="tbl-wrap chk-area">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th>선택</th>
<th>직급</th>
<th>이름</th>
<th>부서장</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(member, index) in members" :key="index">
<td>
<div class="form-check">
<input type="checkbox" :id="`chk_${index}`" :value="member.name" v-model="member.checked" />
<label :for="`chk_${index}`"></label>
</div>
</td>
<td>{{ member.position }}</td>
<td>{{ member.name }}</td>
<td>
<div class="form-check">
<input type="radio" name="manager" :id="`rdo_${index}`" :value="member.name"
v-model="selectedManager" />
<label :for="`rdo_${index}`"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<ul>
<!-- 왼쪽 화살표 (이전 페이지) -->
<li class="arrow" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">
<
</li>
<!-- 페이지 번호 -->
<li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }"
@click="changePage(page)">
{{ page }}
</li>
<!-- 오른쪽 화살표 (다음 페이지) -->
<li class="arrow" :class="{ disabled: currentPage === totalPages }" @click="changePage(currentPage + 1)">
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import { PlusCircleFilled, CloseOutlined, DownOutlined } from '@ant-design/icons-vue';
import HrPopup from '../../../component/Popup/HrPopup.vue';
const isOpen = ref(false)
export default {
data() {
const today = new Date().toISOString().split('T')[0];
return {
selectedManager: '',
showPopup: false,
menus: [
{
title: '부서1',
submenus: [
{
label: '직원검색',
link: { name: 'hrSearch' },
},
],
},
],
currentPage: 1,
totalPages: 3,
members: [] ,
selectedManager: null,
h3icon: "/client/resources/img/h3icon.png",
require: "/client/resources/img/require.png",
menuicon: "/client/resources/img/arrow-rg.png",
topmenuicon: "/client/resources/img/topmenu.png",
arrow: "/client/resources/img/arrow.png",
addtopmenu: "/client/resources/img/addtopmenu.png",
addsubmenu: "/client/resources/img/addsubmenu.png",
fileName: '',
startDate: today,
startTime: '09:00',
endDate: today,
endTime: '18:00',
where: '',
purpose: '',
approvals: [
{
category: '결재',
name: '',
},
],
receipts: [
{
type: '개인결제',
category: '결재',
category1: '구분',
},
],
};
},
components: {
PlusCircleFilled, CloseOutlined, DownOutlined, HrPopup
},
computed: {
loginUser() {
const authStore = useAuthStore();
return authStore.getLoginUser;
},
},
methods: {
addMember(selectedUser) {
this.members.push({
position: selectedUser.position,
name: selectedUser.name, // or other fields if needed
});
this.showPopup = false; // 팝업 닫기
},
removeMember() {
this.members = this.members.filter(member => !member.checked);
},
addTopMenu() {
const newIndex = this.menus.length + 1;
this.menus.push({
title: `부서${newIndex}`,
submenus: [],
});
},
addSubMenu(menuIndex) {
this.menus[menuIndex].submenus.push({
label: `신규메뉴${this.menus[menuIndex].submenus.length + 1}`,
link: { name: 'hrSearch' },
});
},
goToPage(type) {
if (type === '회의록 등록') {
this.$router.push({ name: 'meetingInsert' });
} else if (type === '출장') {
this.$router.push({ name: 'ChuljangDetail' });
}
},
handleFileUpload(event) {
const file = event.target.files[0];
if (file) {
this.fileName = file.name;
}
},
addApproval() {
this.approvals.push({
category: '결재',
name: '',
});
},
addReceipt() {
this.receipts.push({
type: '개인결제',
category: '결재',
category1: '',
name: '',
file: null,
});
},
// 승인자 삭제
removeApproval(index) {
this.approvals.splice(index, 1);
},
removeReceipt(index) {
this.receipts.splice(index, 1);
},
validateForm() {
// 필수 입력 필드 체크
if (
this.startDate &&
this.startTime &&
this.endDate &&
this.endTime &&
this.where &&
this.purpose.trim() !== ""
) {
this.isFormValid = true;
} else {
this.isFormValid = false;
}
},
calculateDayCount() {
const start = new Date(`${this.startDate}T${this.startTime}:00`);
const end = new Date(`${this.endDate}T${this.endTime}:00`);
let totalHours = (end - start) / (1000 * 60 * 60); // 밀리초를 시간 단위로 변환
if (this.startDate !== this.endDate) {
// 시작일과 종료일이 다른경우
const startDateObj = new Date(this.startDate);
const endDateObj = new Date(this.endDate);
const daysDifference = (endDateObj - startDateObj) / (1000 * 60 * 60 * 24); // 두 날짜 사이의 차이를 일수로 계산
if (this.startTime !== "09:00" || this.endTime !== "18:00") {
this.dayCount = daysDifference + 0.5; // 시간 조건이 기준에서 벗어날 경우
} else {
this.dayCount = Math.ceil(daysDifference + 1); // 시간 조건이 기준에 맞을 경우
}
} else {
// 시작일과 종료일이 같은 경우
if (this.startTime !== "09:00" || this.endTime !== "18:00") {
this.dayCount = 0.5; // 시작 시간 또는 종료 시간이 기준과 다를 경우 0.5
} else {
this.dayCount = 1; // 기준 시간(09:00~18:00)이 맞으면 1일로 간주
}
}
this.validateForm(); // dayCount 변경 후 폼 재검증
},
handleSubmit() {
this.validateForm(); // 제출 시 유효성 확인
if (this.isFormValid) {
localStorage.setItem('ChuljangFormData', JSON.stringify(this.$data));
alert("승인 요청이 완료되었습니다.");
// 추가 처리 로직 (API 요청 등)
} else {
alert("모든 필드를 올바르게 작성해주세요.");
}
},
loadFormData() {
const savedData = localStorage.getItem('ChuljangFormData');
if (savedData) {
this.$data = JSON.parse(savedData);
}
},
},
mounted() {
// Load the saved form data when the page is loaded
this.loadFormData();
},
watch: {
startDate: 'calculateDayCount',
startTime: 'calculateDayCount',
endDate: 'calculateDayCount',
endTime: 'calculateDayCount',
where: 'validateForm',
purpose: "validateForm",
},
};
</script>
<style scoped>
/* 필요한 스타일 추가 */
</style>