+            width: 550px;

+            padding: 32px;

+import Hyuga from '../pages/Manager/approval/Hyuga.vue';

+import HyugaInsert from '../pages/Manager/attendance/HyugaInsert.vue';

+import HyugaDetail from '../pages/Manager/attendance/HyugaDetail.vue';

+//업무관리

+//재무관리

+//자산관리

+//인사관리

+//시스템관리

+    { path: '/approval-management.page', name: 'approval', component: approval, redirect: '/approval-management.page/approvalRequest.page',

+              path: 'approvalRequest.page', // => /approval-management.page/list

+              path: 'approvalList.page', // => /approval-management.page/detail/123

+              component: approvalList,

+              children: [

+              ]

+            { path: 'ChuljangPumui.page', name: 'ChuljangPumui', component: ChuljangPumui },

+            { path: 'ChuljangBokmyeong.page', name: 'ChuljangBokmyeong', component: ChuljangBokmyeong },

+            { path: 'Hyuga.page', name: 'Hyuga', component: Hyuga },

+          

+    { path: '/attendance-management.page', name: 'attendance', component: attendance, redirect: '/attendance-management.page/myAttendance.page',

+            { path: 'myAttendance.page', name: 'myAttendance', component: myAttendance },

+            { path: 'buseoAttendance.page', name: 'buseoAttendance', component: buseoAttendance },

+            { path: 'AttendanceDetail.page', name: 'AttendanceDetail', component: AttendanceDetail },

+            { path: 'hyugaStatue.page', name: 'hyugaStatue', component: hyugaStatue },

+            { path: 'HyugaDetail.page', name: 'HyugaDetail', component: HyugaDetail },

+            { path: 'hyugaInsert.page', name: 'hyugaInsert', component: HyugaInsert },

+            { path: 'ChuljangStatue.page', name: 'ChuljangStatue', component: ChuljangStatue },

+            { path: 'BokmyeongInsert.page', name: 'BokmyeongInsert', component: BokmyeongInsert },

+            { path: 'ChuljangInsert.page', name: 'ChuljangInsert', component: ChuljangInsert },

+            { path: 'ChuljangPumuiDetail.page', name: 'ChuljangPumuiDetail', component: ChuljangPumuiDetail },

+            { path: 'ChuljangBokmyeongDetail.page', name: 'ChuljangBokmyeongDetail', component: ChuljangBokmyeongDetail },

+            { path: 'ChuljangDetailAll.page', name: 'ChuljangDetailAll', component: ChuljangDetailAll },

+    { path: '/task-management.page', name: 'task', component: task, redirect: '/task-management.page/projectStatue.page',

+            { path: 'projectStatue.page', name: 'projectStatue', component: projectStatue },

+            { path: 'projectDetail.page', name: 'projectDetail', component: projectDetail },

+            { path: 'meetingInsert.page', name: 'meetingInsert', component: meetingInsert },

+            { path: 'meetingDetail.page', name: 'meetingDetail', component: meetingDetail },

+            { path: 'projectInsert.page', name: 'projectInsert', component: projectInsert },

+            { path: 'projectTuib.page', name: 'projectTuib', component: projectTuib },

+            { path: 'projectTuibDetail.page', name: 'projectTuibDetail', component: projectTuibDetail },

+    { path: '/financial-management.page', name: 'financial', component: financial, redirect: '/financial-management.page/salaryList.page',

+            { path: 'salaryList.page', name: 'salaryList', component: salaryList },

+            { path: 'employeeSalaryList.page', name: 'employeeSalaryList', component: employeeSalaryList },

+            { path: 'employeeSalaryDetail.page', name: 'employeeSalaryDetail', component: employeeSalaryDetail },

+            { path: 'employeeSalaryInsert.page', name: 'employeeSalaryInsert', component: employeeSalaryInsert },

+            { path: 'ChuljangCostList.page', name: 'ChuljangCostList', component: ChuljangCostList },

+            { path: 'MeetingCostList.page', name: 'MeetingCostList', component: MeetingCostList },

+    { path: '/asset-management.page', name: 'asset', component: asset, redirect: '/asset-management.page/CarList.page',

+        { path: 'CarList.page', name: 'CarList', component: CarList },

+        { path: 'CarInfoManagement.page', name: 'CarInfoManagement', component: CarInfoManagement },

+        { path: 'CardList.page', name: 'CardList', component: CardList },

+        { path: 'CardInfoManagement.page', name: 'CardInfoManagement', component: CardInfoManagement },

+    { path: '/hr-management.page', name: 'hr', component: hr, redirect: '/hr-management.page/hrSearch.page',

+        { path: 'hrSearch.page', name: 'hrSearch', component: hrSearch },

+        { path: 'hrManagement.page', name: 'hrManagement', component: hrManagement },

+        { path: 'hrDetail.page', name: 'hrDetail', component: hrDetail },

+        { path: 'hrInsert.page', name: 'hrInsert', component: hrInsert },

+        { path: 'buseoManagement.page', name: 'buseoManagement', component: buseoManagement },

+    { path: '/system-management.page', name: 'system', component: system,  redirect: { name: 'userManagement' },

+        { path: 'userManagement.page', name: 'userManagement', component: userManagement },

+        { path: 'accessControlManagement.page', name: 'accessControlManagement', component: accessControlManagement },

+        { path: 'commonCodeManagement.page', name: 'commonCodeManagement', component: commonCodeManagement },

+        { path: 'commonCodeInsert.page', name: 'commonCodeInsert', component: commonCodeInsert },

+        { path: 'commonCodeDetail.page', name: 'commonCodeDetail', component: commonCodeDetail },

+      <details class="menu-box" open>

+            <li> <router-link :to="{ name: 'approvalRequest' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+              <router-link :to="{ name: 'approvalList' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+      this.$router.push({name: 'Hyuga'});

+      this.$router.push({name: 'ChuljangPumui'});

+      this.$router.push({name: 'ChuljangBokmyeong'});

+        this.$router.push({ name: 'HyugaInsert' });

+        this.$router.push({ name: 'HyugaChuljangDetailDetail' });

+      <details class="menu-box" open>

+            <li> <router-link :to="{ name: 'CarList' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+              <router-link :to="{ name: 'CarInfoManagement' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+            <li> <router-link :to="{ name: 'CardList' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+            <li> <router-link :to="{ name: 'CardInfoManagement' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+    this.$router.push({ name: 'BokmyeongInsert' });

+    this.$router.push({ name: 'ChuljangDetailAll' });

+    this.$router.push({ name: 'ChuljangPumuiDetail' });

+    this.$router.push({ name: 'ChuljangBokmyeongDetail' });

+<template>

+<div class="card ">

+      <div class="card-body">

+          <h2 class="card-title">휴가 현황</h2>

+       

+      <div class="form-card">

+        <h1>휴가신청서</h1>

+        <div class="approval-box tbl-wrap tbl2">

+         <table class="tbl data">

+          <tbody>

+            <tr class="thead">

+              <td rowspan="2" class="th">승인자</td>

+              <td>과장</td>

+              <td>소장</td>

+            </tr>

+            <tr>

+              <td><p class="name">홍길동</p><p class="date">2025/05/09</p></td>

+              <td><p class="name">홍길동</p><p class="date">2025/05/09</p></td>

+            </tr>

+          </tbody>

+

+         </table>

+        </div>

+          <form class="row g-3 needs-validation detail"  :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>

+                <div class="col-12 ">

+                  <div class="col-12 border-x">

+                    <label for="youremail" class="form-label ">유형<p class="require"><img :src="require" alt=""></p></label>

+                    <input  v-model="email" type="text" name="username" class="form-control"  readonly >

+                  </div>

+    

+                  <div class="col-12 border-x">

+                    <label for="yourPassword" class="form-label">신청자</label>

+                    <input  v-model="password" type="password" name="password" class="form-control"  readonly   placeholder="주식회사 테이큰 소프트"> 

+                  </div>

+               </div>

+               <div class="col-12">

+                  <div class="col-12 border-x">

+                    <label for="youremail" class="form-label">부서</label>

+                    <input  v-model="email" type="text" name="username" class="form-control"  readonly  placeholder="과장">

+                  </div>

+    

+                  <div class="col-12 border-x">

+                    <label for="yourPassword" class="form-label">직급</label>

+                    <input  v-model="password" type="password" name="password" class="form-control"  readonly  placeholder="팀장"> 

+                  </div>

+               </div>

+               <div class="col-12">

+                  <label for="yourName" class="form-label">기간</label>

+                  <input  v-model="name" type="text" name="name" class="form-control"  readonly>

+            </div>

+            <div class="col-12 hyuga">

+                  <label for="yourName" class="form-label">세부사항</label>

+                  <input v-model="name" type="text" name="name" class="form-control textarea"  readonly>

+            </div>

+            <div class="col-12 ">

+                  <label for="yourName" class="form-label">신청일</label>

+                  <input v-model="name" type="text" name="name" class="form-control "  readonly>

+            </div>

+            <div class="col-12 border-x return" >

+                  <label for="yourName" class="form-label ">반려사유</label>

+                  <input  v-model="name" type="text" name="name" class="form-control"  readonly   >

+            </div>

+           

+                

+              </form>

+      </div>

+            <div class="buttons">

+              <button class="btn  btn-red"  type="button">신청취소</button>

+                <button class="btn secondary"  type="button">재신청</button>

+                <button class="btn secondary"  type="button">수정</button>

+                <button class="btn tertiary "  type="button">목록</button>

+              </div>

+              <ReturnPopup v-if="showPopup" @close="showPopup = false"/>

+      </div>

+    </div>

+</template>

+

+<script>

+import ReturnPopup from '../../../component/Popup/ReturnPopup.vue';

+export default {

+  data() {

+    const today = new Date().toISOString().split('T')[0];

+    return {

+      showPopup: false,

+      startDate: today,

+      startTime: "09:00", // 기본 시작 시간 09:00

+      endDate: today,

+      endTime: "18:00", // 기본 종료 시간 18:00

+      category: "", 

+      dayCount: 1, 

+      reason: "", // 사유

+      listData: [

+  {

+    type: '연차',

+    approvalType: '결재',

+    applicant: '홍길동',

+    period: '2025-05-10 ~ 2025-15-03',

+    requestDate: '2025-04-25',

+    status: '대기'

+  },   {

+    type: '반차',

+    approvalType: '전결',

+    applicant: '홍길동',

+    period: '2025-05-01 ~ 2025-05-03',

+    requestDate: '2025-04-25',

+    status: '승인'

+  }],

+    };

+  },

+  components: {

+    ReturnPopup

+  },

+  computed: {

+  

+  },

+  methods: {

+   

+    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 변경 후 폼 재검증

+  },

+    

+    

+    

+  },

+  mounted() {

+  },

+  

+};

+</script>

+            <details class="menu-box" open>

+            <li> <router-link :to="{ name: 'myAttendance' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+              <router-link :to="{ name: 'buseoAttendance' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+            <li> <router-link :to="{ name: 'hyugaStatue' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+            <li> <router-link :to="{ name: 'hyugaInsert' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+              </router-link></li>

+           

+            <li> <router-link :to="{ name: 'ChuljangStatue' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+              <router-link :to="{ name: 'ChuljangInsert' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+      if (type === '휴가') {

+  this.$router.push({ name: 'HyugaDetail' });

+} else if (type === '출장') {

+  this.$router.push({ name: 'ChuljangDetail' });

+}

+  this.$router.push({

+    name: 'HyugaDetail',

+    query: { id: item.id }

+  });

+},

+    this.$router.push({ 

+      name: 'employeeSalaryDetail',

+       query: { id: item.id } 

+      });

+        this.$router.push({ name: 'HyugaInsert' });

+        this.$router.push({ name: 'ChuljangDetail' });

+    this.$router.push({ name: 'employeeSalaryDetail', query: { id: item.id } });

+        this.$router.push({ name: 'HyugaInsert' });

+        this.$router.push({ name: 'ChuljangDetail' });

+    this.$router.push({ name: 'employeeSalaryDetail', query: { id: item.id } });

+        this.$router.push({ name: 'HyugaInsert' });

+        this.$router.push({ name: 'ChuljangDetail' });

+      <details class="menu-box" open>

+            <li> <router-link :to="{ name: 'salaryList' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+              <router-link :to="{ name: 'employeeSalaryList' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+              <router-link :to="{ name: 'employeeSalaryInsert' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+            <li> <router-link :to="{ name: 'ChuljangCostList' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+              <router-link :to="{ name: '' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+              <router-link  :to="{ name: 'MeetingCostList' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+        this.$router.push({ name: 'HyugaInsert' });

+        this.$router.push({ name: 'ChuljangDetail' });

+              link: { name: 'hrSearch' },

+        link: { name: 'hrSearch' },

+        this.$router.push({ name: 'meetingInsert' });

+        this.$router.push({ name: 'ChuljangDetail' });

+      <details class="menu-box" open>

+            <li> <router-link :to="{ name: 'hrSearch' }" exact-active-class="active-link" v-slot="{ isExactActive }">

+              <router-link :to="{ name: 'hrManagement' }" exact-active-class="active-link" v-slot="{ isExactActive }">