Commit @8c5ba61dc44ddf60365a73dd5d7c37785eb746b6

박정하 07-18

250718 출장 현황, 출장 신청 추가

@8c5ba61dc44ddf60365a73dd5d7c37785eb746b6

8c5ba61

client/resources/api/bsrp.js (added)

+++ client/resources/api/bsrp.js

...	...	@@ -0,0 +1,26 @@
	1	+import apiClient from "./index";
	2	+
	3	+// 등록
	4	+export const saveBsrpProc = data => {
	5	+ return apiClient.post('/bsrp/saveBsrp.json', data);
	6	+}
	7	+
	8	+// 목록 조회
	9	+export const bsrpsProc = data => {
	10	+ return apiClient.get('/bsrp/bsrps.json', { params: data });
	11	+}
	12	+
	13	+// 상세 조회
	14	+export const bsrpProc = data => {
	15	+ return apiClient.get(`/bsrp/${data}/bsrp.json`);
	16	+}
	17	+
	18	+// 수정
	19	+export const updateBsrpProc = data => {
	20	+ return apiClient.put('/bsrp/updateBsrp.json', data);
	21	+}
	22	+
	23	+// 삭제
	24	+export const deleteBsrpProc = data => {
	25	+ return apiClient.delete(`/bsrp/${data}/deleteBsrp.json`);
	26	+}(파일 끝에 줄바꿈 문자 없음)

3beb56e

8c5ba61

client/resources/js/cmmnPlugin.js

--- client/resources/js/cmmnPlugin.js

+++ client/resources/js/cmmnPlugin.js

...	...	@@ -86,7 +86,7 @@
86	86	sanctnCodeList: [], // 결재 구분 (결재/대결/전결)
87	87	confmCodeList: [], // 상태 코드 (대기/결재대기/승인/반려)
88	88	clsfCodeList: [], // 직급 코드 (사원/주임/대리)
89		- rspofcCodeList: [], // 직책 코드 (사원/주임/대리)
	89	+ rspofcCodeList: [], // 직책 코드 (팀장)
90	90	};
91	91
92	92	// 휴가 종류 - depth 2 조회

3beb56e

8c5ba61

client/views/component/Sanctn/SanctnFormList.vue (Renamed from client/views/component/Sanctn/SanctnList.vue)

--- client/views/component/Sanctn/SanctnList.vue

+++ client/views/component/Sanctn/SanctnFormList.vue


 <template>
   <div>
-    <div v-for="(sanctns, idx) of sanctns" :key="sanctns.sanctnId || idx" class="draggable-item-wrapper">
+    <div v-for="(lists, idx) of lists" :key="lists.sanctnId || idx" class="draggable-item-wrapper">
       <div class="drop-zone" @dragover.prevent="handleDragEnter($event, idx)" @dragenter.prevent="handleDragEnter($event, idx)" @dragleave="handleDragLeave($event, idx)" @drop.prevent="handleDrop($event, idx)" :class="{
         'drop-active': dropTarget === idx,
         'drop-visible': draggedIndex !== null && shouldShowDropZone(idx),

         <div class="drop-indicator">여기에 놓기</div>
       </div>
       <div class="d-flex addapproval draggable-item" draggable="true" @dragstart="handleDragStart(idx, $event)" @dragend="handleDragEnd" :class="{ 'being-dragged': draggedIndex === idx }">
-        <select class="form-select" v-model="sanctns.sanctnSe" style="width: 110px;" @mousedown.stop>
+        <select class="form-select" v-model="lists.sanctnSe" style="width: 110px;" @mousedown.stop>
           <option v-for="(item, idx) of cmmnCodes.sanctnCodeList" :key="idx" :value="item.code"> {{ item.codeNm }} </option>
         </select>
         <div class="d-flex align-items-center border-x">
-          <p>{{ sanctns.userNm }} {{ formatClsf(sanctns.clsfNm) }} ({{ sanctns.sanctnOrdr }})</p>
+          <p>{{ lists.confmerNm }} {{ lists.clsfNm }} ({{ lists.sanctnOrdr }})</p>
           <button type="button" @click="$emit('delSanctn', idx)" @mousedown.stop>
             <CloseOutlined />
           </button>
         </div>
       </div>
     </div>
-    <div class="drop-zone" @dragover.prevent="handleDragEnter($event, sanctns.length)" @dragenter.prevent="handleDragEnter($event, sanctns.length)" @dragleave="handleDragLeave($event, sanctns.length)" @drop.prevent="handleDrop($event, sanctns.length)" :class="{
-      'drop-active': dropTarget === sanctns.length,
+    <div class="drop-zone" @dragover.prevent="handleDragEnter($event, lists.length)" @dragenter.prevent="handleDragEnter($event, lists.length)" @dragleave="handleDragLeave($event, lists.length)" @drop.prevent="handleDrop($event, lists.length)" :class="{
+      'drop-active': dropTarget === lists.length,
       'drop-visible': draggedIndex !== null && shouldShowLastDropZone(),
       'drop-hidden': draggedIndex !== null && !shouldShowLastDropZone()
     }">

   components: { CloseOutlined },
 
   props: {
-    sanctns: {
+    lists: {
       type: Array,
       default: () => [],
     }

   },
 
   methods: {
-    formatClsf(code) {
-      const clsfCode = this.cmmnCodes?.clsfCodeList?.find(item => item.code === code);
-      return clsfCode?.codeNm || code;
-    },
-
     shouldShowDropZone(index) {
       if (this.draggedIndex === null) return true;
       if (index === this.draggedIndex || index === this.draggedIndex + 1) return false;

 
     shouldShowLastDropZone() {
       if (this.draggedIndex === null) return true;
-      return this.draggedIndex !== this.sanctns.length - 1;
+      return this.draggedIndex !== this.lists.length - 1;
     },
 
     handleDragStart(index, event) {

           finalDropIndex = dropIndex - 1;
         }
 
-        const newSanctns = [...this.sanctns];
+        const newSanctns = [...this.lists];
         const draggedItem = newSanctns.splice(this.draggedIndex, 1)[0];
         newSanctns.splice(finalDropIndex, 0, draggedItem);
 

           item.sanctnOrdr = index + 1;
         });
 
-        this.$emit('update:sanctns', newSanctns);
+        this.$emit('update:lists', newSanctns);
       }
 
       this.dropTarget = null;

8c5ba61

client/views/component/Sanctn/SanctnViewList.vue (added)

+++ client/views/component/Sanctn/SanctnViewList.vue

...	...	@@ -0,0 +1,36 @@
	1	+<template>
	2	+ <div class="approval-box tbl-wrap tbl2">
	3	+ <table class="tbl data">
	4	+ <tbody>
	5	+ <tr class="thead">
	6	+ <td rowspan="2" class="th">승인자</td>
	7	+ <td v-for="(item, idx) of sanctns" :key="idx">{{ item.clsfNm }}</td>
	8	+ </tr>
	9	+ <tr>
	10	+ <td v-for="(item, idx) of sanctns" :key="idx">
	11	+ <template v-if="item.confmAt === 'A'">
	12	+ <p v-if="item.sanctnSe === 'sanctn_agncy'">(대결)</p>
	13	+ <p class="name">{{ item.confmerNm }}</p>
	14	+ <small class="date">{{ new Date(item.sanctnDe).toISOString().split('T')[0] }}</small>
	15	+ </template>
	16	+ <template v-else-if="item.confmAt === 'R'">
	17	+ <p class="name">반려</p>
	18	+ </template>
	19	+ </td>
	20	+ </tr>
	21	+ </tbody>
	22	+ </table>
	23	+ </div>
	24	+</template>
	25	+<script>
	26	+export default {
	27	+ name: 'SanctnViewList',
	28	+
	29	+ props: {
	30	+ sanctns: {
	31	+ type: Array,
	32	+ default: () => [],
	33	+ }
	34	+ },
	35	+}
	36	+</script>(파일 끝에 줄바꿈 문자 없음)

3beb56e

8c5ba61

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import Join from '../pages/User/Join.vue';
 import MyPage from '../pages/User/MyPage.vue';
 
-// import Main2 from '../pages/main/Main2.vue';
-
-// import HomeView from "../pages/HomeView.vue";
-// import AboutView from "../pages/AboutView.vue";
-
 // 직원
 import ChuljangList from '../pages/Employee/ChuljangList.vue';
 import HyugaList from '../pages/Employee/HyugaList.vue';

 import Hyuga from '../pages/Manager/approval/Hyuga.vue';
 
 //근태관리
-import ChuljangPumuiDetail from '../pages/Manager/attendance/ChuljangPumuiDetail.vue';
 import ChuljangBokmyeongDetail from '../pages/Manager/attendance/ChuljangBokmyeongDetail.vue';
-import ChuljangDetailAll from '../pages/Manager/attendance/ChuljangDetailAll.vue';
-import attendance from '../pages/Manager/attendance/attendance.vue';
+import ChuljangDetailAll from './Manager/attendance/ChuljangDetailAll.vue';
+import ChuljangStatue from '../pages/Manager/attendance/ChuljangStatue.vue';
+import ChuljangInsert from '../pages/Manager/attendance/ChuljangInsert.vue';
 import myAttendance from '../pages/Manager/attendance/myAttendance.vue';
 import buseoAttendance from '../pages/Manager/attendance/buseoAttendance.vue';
+import attendance from '../pages/Manager/attendance/attendance.vue';
 import AttendanceDetail from '../pages/Manager/attendance/AttendanceDetail.vue';
 import hyugaStatue from '../pages/Manager/attendance/hyugaStatue.vue';
 import HyugaInsert from '../pages/Manager/attendance/HyugaInsert.vue';
 import HyugaDetail from '../pages/Manager/attendance/HyugaDetail.vue';
 import BokmyeongInsert from '../pages/Manager/attendance/BokmyeongInsert.vue';
-import ChuljangStatue from '../pages/Manager/attendance/ChuljangStatue.vue';
-import ChuljangInsert from '../pages/Manager/attendance/ChuljangInsert.vue';
 //업무관리
 import task from '../pages/Manager/task/task.vue';
 import projectStatue from '../pages/Manager/task/projectStatue.vue';

 import commonCodeDetail from '../pages/Manager/system/commonCodeDetail.vue';
 
 const routes = [
-    /* 메인화면 */
-    { path: '/', name: '/', component: Main},
-    { path: '/login.page', name: 'Login', component: Login},
-    { path: '/join.page', name: 'Join', component: Join},
-    { path: '/MyPage.page', name: 'MyPage', component: MyPage},
-    
-    { path: '/ChuljangList.page', name: 'ChuljangList', component: ChuljangList },
-    { path: '/HyugaList.page', name: 'HyugaList', component: HyugaList },
-    
-    { path: '/HyugaOk.page', name: 'HyugaOk', component: HyugaOk },
-    
-    { path: '/approval-management.page', name: 'approval', component: approval, redirect: '/approval-management.page/approvalRequest.page',
+  /* 메인화면 */
+  { path: '/', name: '/', component: Main },
+  { path: '/login.page', name: 'Login', component: Login },
+  { path: '/join.page', name: 'Join', component: Join },
+  { path: '/MyPage.page', name: 'MyPage', component: MyPage },
+  { path: '/ChuljangList.page', name: 'ChuljangList', component: ChuljangList },
+  { path: '/HyugaList.page', name: 'HyugaList', component: HyugaList },
+  { path: '/HyugaOk.page', name: 'HyugaOk', component: HyugaOk },
+  {
+    path: '/approval-management.page', name: 'approval', component: approval, redirect: '/approval-management.page/approvalRequest.page',
+    children: [
+      {
+        path: 'approvalRequest.page', // => /approval-management.page/list
+        name: 'approvalRequest',
+        component: approvalRequest,
         children: [
-            {
-              path: 'approvalRequest.page', // => /approval-management.page/list
-              name: 'approvalRequest',
-              component: approvalRequest,
-              children: [
-                
-              ]
-            },
-            {
-              path: 'approvalList.page', // => /approval-management.page/detail/123
-              name: 'approvalList',
-              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',
-        children: [
-            { 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: 'approvalList.page', // => /approval-management.page/detail/123
+        name: 'approvalList',
+        component: approvalList,
         children: [
-            { 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',
-        children: [
-            { 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/VhcleList.page',
-      children: [
-        { path: 'VhcleList.page', name: 'VhcleList', component: VhcleList },
-        { path: 'VhcleInfoManagement.page', name: 'VhcleInfoManagement', component: VhcleInfoManagement },
-        { 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',
-      children: [
-        { 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' },
-      children:[
-        { 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 },
-        
-      ]
-     },  //시스템관리
+      },
+      { 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',
+    children: [
+      { 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: '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',
+    children: [
+      { 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',
+    children: [
+      { 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/VhcleList.page',
+    children: [
+      { path: 'VhcleList.page', name: 'VhcleList', component: VhcleList },
+      { path: 'VhcleInfoManagement.page', name: 'VhcleInfoManagement', component: VhcleInfoManagement },
+      { 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',
+    children: [
+      { 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' },
+    children: [
+      { 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 },
+    ]
+  },  //시스템관리
 ];
 
-
 const AppRouter = createRouter({
-    history: createWebHistory(),
-    routes,
+  history: createWebHistory(),
+  routes,
 });
 
 // Add navigation guard
 AppRouter.beforeEach((to, from, next) => {
-    // Check login status
-    const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
-  
-    // If not logged in and trying to access any page other than login, redirect to login page
-    if (!isLoggedIn && to.path !== '/login.page') {
-      next('/login.page');
-    } 
-    // If logged in and trying to access login page, redirect to main page
-    else if (isLoggedIn && to.path === '/login.page') {
-      next('/');
-    } 
-    else {
-      next(); // Proceed to requested route
-    }
-  });
-  
+  // Check login status
+  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
+
+  // If not logged in and trying to access any page other than login, redirect to login page
+  if (!isLoggedIn && to.path !== '/login.page') {
+    next('/login.page');
+  }
+  // If logged in and trying to access login page, redirect to main page
+  else if (isLoggedIn && to.path === '/login.page') {
+    next('/');
+  }
+  else {
+    next(); // Proceed to requested route
+  }
+});
 
 export default AppRouter;

3beb56e

8c5ba61

client/views/pages/Manager/attendance/ChuljangDetailAll.vue

--- client/views/pages/Manager/attendance/ChuljangDetailAll.vue

+++ client/views/pages/Manager/attendance/ChuljangDetailAll.vue


 <template>
-<div class="card ">
-      <div class="card-body">
-          <h2 class="card-title">출장 현황</h2>
-       
+  <div class="card">
+    <div class="card-body">
+      <h2 class="card-title">출장 현황</h2>
       <div class="form-card" style="margin-bottom: 20px;">
         <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">
-                  <label for="yourName" class="form-label">출장목적</label>
-                  <input v-model="name" type="text" name="name" class="form-control "  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 chuljang">
-                  <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">
-                  <label for="yourName" class="form-label">법인차량</label>
-                  <input v-model="name" type="text" name="name" class="form-control "  readonly>
+        <SanctnViewList v-if="bsrpCnsul.sanctnList.length > 0" :sanctns="bsrpCnsul.sanctnList" />
+        <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 class="form-label">출장구분</label>
+              <p>{{ bsrpInfo.bsrpSeNm }}</p>
             </div>
             <div class="col-12 border-x">
-                  <label for="yourName" class="form-label">품의 신청일</label>
-                  <input v-model="name" type="text" name="name" class="form-control " i readonly>
+              <label class="form-label">이름</label>
+              <p>{{ user.userNm }}</p>
             </div>
-              </form>
+          </div>
+          <div class="col-12">
+            <div class="col-12 border-x">
+              <label class="form-label">부서</label>
+              <p>{{ user.deptNm }}</p>
+            </div>
+            <div class="col-12 border-x">
+              <label class="form-label">직급</label>
+              <p>{{ user.clsfNm }}</p>
+            </div>
+          </div>
+          <div class="col-12">
+            <label class="form-label">출장지</label>
+            <p>{{ bsrpInfo.bsrpPlace }}</p>
+          </div>
+          <div class="col-12">
+            <label class="form-label">출장목적</label>
+            <p>{{ bsrpInfo.bsrpPurps }}</p>
+          </div>
+          <div class="col-12">
+            <label class="form-label">동행자</label>
+            <div v-if="bsrpInfo.bsrpNmprList.length > 0">
+              <span v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx">{{ item.triperNm }}</span>
+            </div>
+          </div>
+          <div class="col-12">
+            <label class="form-label">품의내용</label>
+            <ViewerComponent :content="bsrpCnsul.cn" />
+          </div>
+          <div class="col-12">
+            <label class="form-label">법인카드</label>
+            <div>
+              <p v-for="(item, idx) of cprCardList" :key="idx">
+                <span v-if="idx !== 0">, </span>
+                <span>{{ item.cardNm }}</span>
+              </p>
+            </div>
+          </div>
+          <div class="col-12">
+            <label class="form-label">법인차량</label>
+            <div>
+              <p v-for="(item, idx) of cprVhcleList" :key="idx">
+                <span v-if="idx !== 0">, </span>
+                <span>{{ item.vhcleNm }}</span>
+              </p>
+            </div>
+          </div>
+          <div class="col-12 border-x">
+            <label class="form-label">품의 신청일</label>
+            <p>{{ bsrpCnsul.rgsde }}</p>
+          </div>
+        </form>
       </div>
-      <div class="form-card">
+      <div v-if="!$isEmpty(bsrpRport.bsrpId)" 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 chuljang">
-                  <label for="yourName" class="form-label">복명내용</label>
-                  <input v-model="name" type="text" name="name" class="form-control textarea " id="yourName" readonly>
-            </div>
-            <div class="col-12">
-                  <label for="yourName" class="form-label">여비계산</label>
-                  <input v-model="name" type="text" name="name" class="form-control " id="yourName" readonly>
-            </div>
-            <div class="col-12 ">
-                  <label for="yourName" class="form-label">복명 신청일</label>
-                  <input  v-model="name" type="text" name="name" class="form-control" id="yourName" readonly   placeholder="2025-01-01">
-            </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   placeholder="2025-01-01">
-            </div>
-           
-                
-              </form>
+        <SanctnViewList v-if="bsrpRport.sanctnList.length > 0" :sanctns="bsrpRport.sanctnList" />
+        <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>
+          <div class="col-12">
+            <label class="form-label">복명내용</label>
+            <ViewerComponent :content="bsrpRport.cn" />
+          </div>
+          <div class="col-12">
+            <label class="form-label">여비계산</label>
+            <p>{{ bsrpInfo.applcntId }}</p>
+          </div>
+          <div class="col-12">
+            <label class="form-label">복명 신청일</label>
+            <p>{{ bsrpRport.rgsde }}</p>
+          </div>
+          <div class="col-12 border-x return">
+            <label class="form-label">반려사유</label>
+            <p>{{ bsrpInfo.applcntId }}</p>
+          </div>
+        </form>
       </div>
-            <div class="buttons">
-              <button class="btn btn-red "  type="submit">신청취소</button>
-              <button class="btn secondary"  type="submit">재신청</button>
-              <button class="btn secondary"  type="submit"> 수정</button>
-                <button class="btn tertiary "  type="submit">목록</button>
-              </div>
-
+      <div class="buttons">
+        <button v-if="sanctnStatus === 'waiting' && sanctnStatus !== 'approved'" type="button" class="btn btn-red" @click="deleteData">신청취소</button>
+        <button v-if="sanctnStatus === 'waiting'" type="button" class="btn secondary" @click="fnMoveTo('edit', pageId)">수정</button>
+        <button v-if="sanctnStatus === 'rejected'" type="button" class="btn secondary" @click="fnMoveTo('edit', pageId)">재신청</button>
+        <button v-if="sanctnStatus === 'approved'" type="button" class="btn primary" @click="fnMoveTo('plus', pageId)">복명서 작성</button>
+        <button type="button" class="btn tertiary" @click="fnMoveTo('list')">목록</button>
       </div>
     </div>
+  </div>
 </template>
-
 <script>
+import SanctnViewList from '../../../component/Sanctn/SanctnViewList.vue';
+import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
+// API
+import { bsrpProc, deleteBsrpProc } from '../../../../resources/api/bsrp';
+
 export default {
+  components: {
+    SanctnViewList, ViewerComponent,
+  },
+
   data() {
-    const today = new Date().toISOString().split('T')[0];
     return {
-      isReturned: true,
-      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: '승인'
-  }],
+      pageId: null,
+
+      // 출장 정보
+      bsrpInfo: {
+        bsrpId: null,       // 출장 아이디
+        applcntId: null,    // 신청자 아이디
+        bsrpSe: null,       // 출장구분 (공통코드 : sanctn_mby_bsrp)
+        bsrpPlace: null,    // 출장지
+        bsrpPurps: null,    // 출장목적
+        bgnde: null,        // 시작일
+        beginHour: null,    // 시작시
+        beginMnt: null,     // 시작분
+        endde: null,        // 종료일
+        endHour: null,      // 종료시
+        endMnt: null,       // 종료분
+        bsrpSeNm: null,     // 출장구분 이름
+        bsrpNmprList: [],   // 출장 인원
+      },
+      // 품의서
+      bsrpCnsul: {
+        bsrpId: null,      // 출장 아이디
+        cn: null,          // 내용
+        confmAt: null,     // 승인 여부 (W: 대기, A: 승인, R 반려)
+        rgsde: null,       // 등록일
+        register: null,    // 등록자
+        updde: null,       // 수정일
+        updusr: null,      // 수정자
+        sanctnList: [],
+      },
+      // 복명서
+      bsrpRport: {
+        bsrpId: null,      // 출장 아이디
+        cn: null,          // 내용
+        confmAt: null,     // 승인 여부 (W: 대기, A: 승인, R 반려)
+        fileId: null,      // 파일 아이디
+        rgsde: null,       // 등록일
+        register: null,    // 등록자
+        updde: null,       // 수정일
+        updusr: null,      // 수정자
+        sanctnList: [],
+      },
+      // 신청자 정보
+      user: {},
     };
   },
-  computed: {
-    // Pinia Store의 상태를 가져옵니다.
-    loginUser() {
-      const authStore = useAuthStore();
-      return authStore.getLoginUser;
-    },
-  },
-  methods: {
-    // 폼 검증 메서드
-    validateForm() {
-      // 필수 입력 필드 체크
-      if (
-        this.category &&
-        this.startDate &&
-        this.startTime &&
-        this.endDate &&
-        this.endTime &&
-        this.dayCount > 0 &&
-        this.reason.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 변경 후 폼 재검증
+  computed: {
+    // 결재 상태 확인
+    sanctnStatus() {
+      const sanctnList = this.bsrpCnsul.sanctnList;
+
+      if (sanctnList.length === 0) return 'none'; // 결재 정보 없음
+
+      // 하나라도 반려가 있으면 '반려'
+      if (sanctnList.some(item => item.sanctnSttus === 'R')) {
+        return 'rejected';
+      }
+
+      // 모든 결재가 승인이면 '승인'
+      if (sanctnList.every(item => item.sanctnSttus === 'A')) {
+        return 'approved';
+      }
+
+      // 그 외에는 '대기'
+      return 'waiting';
+    }
   },
-    handleSubmit() {
-      this.validateForm(); // 제출 시 유효성 확인
-      if (this.isFormValid) {
-        localStorage.setItem('HyugaFormData', JSON.stringify(this.$data));
-        alert("승인 요청이 완료되었습니다.");
-        // 추가 처리 로직 (API 요청 등)
-      } else {
-        alert("모든 필드를 올바르게 작성해주세요.");
+
+  async created() {
+    this.pageId = this.$route.query.id;
+    if (this.$isEmpty(this.pageId)) {
+      alert("게시물이 존재하지 않습니다.");
+      this.fnMoveTo('list');
+    }
+  },
+
+  mounted() {
+    this.findDatas(); // 상세 조회
+  },
+
+  methods: {
+    // 상세 조회
+    async findDatas() {
+      try {
+        const response = await bsrpProc(this.pageId);
+        const result = response.data.data;
+
+        this.bsrpInfo = result.bsrpInfo;
+        this.bsrpInfo.bgnde = this.bsrpInfo.bgnde.split(' ')[0];
+        this.bsrpInfo.endde = this.bsrpInfo.endde.split(' ')[0];
+
+        this.cprCardList = result.cprCardList;
+        this.cprVhcleList = result.cprVhcleList;
+        this.user = result.user;
+
+        this.bsrpCnsul = result.bsrpCnsul;
+        this.bsrpRport = result.bsrpRport;
+      } catch (error) {
+        const message = error.response.data.message;
+        alert(message);
       }
     },
-    
-    
+
+    // 삭제
+    async deleteData() {
+      const isCheck = confirm("삭제하시겠습니까?");
+      if (!isCheck) {
+        return;
+      }
+
+      try {
+        const response = await deleteBsrpProc(this.pageId);
+
+        this.fnMoveTo('list');
+      } catch (error) {
+        if (error.response) {
+          alert(error.response.data.message);
+        } else {
+          alert("에러가 발생했습니다.");
+        }
+        console.error(error.message);
+        this.fnMoveTo('list');
+      }
+    },
+
+    // 페이지 이동
+    fnMoveTo(type, id) {
+      const routes = {
+        'list': { name: 'ChuljangStatue' },
+        'view': { name: 'ChuljangDetailAll', query: { id } },
+        'edit': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
+        'plus': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
+      };
+
+      if (routes[type]) {
+        if (!this.$isEmpty(this.pageId) && type === 'list') {
+          this.$router.push({ name: 'ChuljangDetailAll', query: { id: this.pageId } });
+        }
+        this.$router.push(routes[type]);
+      } else {
+        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
+        this.$router.push(routes['list']);
+      }
+    },
   },
 };
 </script>

3beb56e

8c5ba61

client/views/pages/Manager/attendance/ChuljangInsert.vue

--- client/views/pages/Manager/attendance/ChuljangInsert.vue

+++ client/views/pages/Manager/attendance/ChuljangInsert.vue


     <div class="card-body">
       <h2 class="card-title">출장 신청</h2>
       <p class="require"><img :src="require" alt=""> 필수입력</p>
-      <!-- Multi Columns Form -->
       <form class="row g-3 pt-3  needs-validation" @submit.prevent="handleSubmit">
-
-
         <div class="col-12">
-          <label for="where" class="form-label"><p>출장구분<p class="require"><img :src="require" alt=""></p></p></label>
-          <select class="form-select"  style="width: 110px;">
-                <option value="" selected>국내</option>
-                <option value="">국외</option>
-              </select>
+          <label for="where" class="form-label">
+            <p>출장구분 <span class="require"><img :src="require" alt=""></span></p>
+          </label>
+          <select class="form-select" style="width: 110px;" v-model="bsrpInfo.bsrpSe">
+            <option v-for="(item, idx) of cmmnCodes.bsrpCodeList" :key="idx" :value="item.code">{{ item.codeNm }}</option>
+          </select>
         </div>
         <div class="col-12">
-          <label for="where" class="form-label"><p>출장지<p class="require"><img :src="require" alt=""></p></p></label>
-          <input type="text" class="form-control" id="where" v-model="where" />
+          <label for="bsrpInfo.bsrpPlace" class="form-label">
+            <p>출장지 <span class="require"><img :src="require" alt=""></span></p>
+          </label>
+          <input type="text" class="form-control" id="bsrpInfo.bsrpPlace" v-model="bsrpInfo.bsrpPlace" />
         </div>
         <div class="col-12">
-          <label for="where" class="form-label"><p>출장목적<p class="require"><img :src="require" alt=""></p></p></label>
-          <input type="text" class="form-control" id="where" v-model="where" />
+          <label for="bsrpInfo.bsrpPurps" class="form-label">
+            <p>출장목적 <span class="require"><img :src="require" alt=""></span></p>
+          </label>
+          <input type="text" class="form-control" id="bsrpInfo.bsrpPurps" v-model="bsrpInfo.bsrpPurps" />
         </div>
         <div class="col-12">
-          <label for="where" class="form-label"><p>출장기간<p class="require"><img :src="require" alt=""></p></p></label>
+          <label for="where" class="form-label">
+            <p>출장기간 <span class="require"><img :src="require" alt=""></span></p>
+          </label>
           <div class="d-flex gap-1">
-            <input type="date" class="form-control" id="startDate" v-model="startDate" />
-            <!-- 시간 선택을 위한 select 사용 -->
-            <select class="form-control" id="startTime" v-model="startTime">
-              <option value="09:00">09:00</option>
-              <option value="10:00">10:00</option>
-              <option value="11:00">11:00</option>
-              <option value="12:00">12:00</option>
-              <option value="13:00">13:00</option>
-              <option value="14:00">14:00</option>
-              <option value="15:00">15:00</option>
-              <option value="16:00">16:00</option>
-              <option value="17:00">17:00</option>
-              <option value="18:00">18:00</option>
-            </select>
-            ~
+            <input type="date" class="form-control" id="bsrpInfo.bgnde" v-model="bsrpInfo.bgnde" />
+            <input type="text" class="form-control" id="bsrpInfo.beginHour" v-model="bsrpInfo.beginHour" style="width: 100px;" placeholder="시" />
+            <input type="text" class="form-control" id="bsrpInfo.beginMnt" v-model="bsrpInfo.beginMnt" style="width: 100px;" placeholder="분" />
           </div>
           <div class="d-flex gap-1">
-            <input type="date" class="form-control" id="endDate" v-model="endDate" />
-            <!-- 종료 시간을 위한 select 사용 -->
-            <select class="form-control" id="endTime" v-model="endTime">
-              <option value="09:00">09:00</option>
-              <option value="10:00">10:00</option>
-              <option value="11:00">11:00</option>
-              <option value="12:00">12:00</option>
-              <option value="13:00">13:00</option>
-              <option value="14:00">14:00</option>
-              <option value="15:00">15:00</option>
-              <option value="16:00">16:00</option>
-              <option value="17:00">17:00</option>
-              <option value="18:00">18:00</option>
-            </select>
+            <input type="date" class="form-control" id="bsrpInfo.endde" v-model="bsrpInfo.endde" />
+            <input type="text" class="form-control" id="bsrpInfo.endHour" v-model="bsrpInfo.endHour" style="width: 100px;" placeholder="시" />
+            <input type="text" class="form-control" id="bsrpInfo.endMnt" v-model="bsrpInfo.endMnt" style="width: 100px;" placeholder="분" />
           </div>
-          <div class="col-12 border-x">
-          <label for="dayCount" class="form-label">일수</label>
-          <input type="text" class="form-control" id="dayCount" v-model="dayCount" readonly />
         </div>
-        </div>
-
         <div class="col-12">
-          <label for="purpose" class="form-label">동행자 <button type="button" title="추가" @click="showPopup1 = true">
+          <label for="totalDays" class="form-label">일수</label>
+          <input type="text" class="form-control" id="totalDays" v-model="totalDays" readonly />
+        </div>
+        <div class="col-12">
+          <label for="purpose" class="form-label">동행자 <button type="button" title="추가" @click="isOpenNmprModal = true">
               <PlusCircleFilled />
-            </button></label>
-            <HrPopup v-if="showPopup1" @close="showPopup1 = false" @select="addMember"/>
-            <div v-for="(member, index) in members" :key="index" class="d-flex gap-2 addapproval mb-2">
-
-              <form class="d-flex align-items-center border-x">
-                <input type="text" class="form-control" v-model="member.name" style="max-width: 150px;" />
-                <button type="button" @click="removeMember(index)" class="delete-button">
+            </button>
+          </label>
+          <HrPopup v-if="isOpenNmprModal" :lists="bsrpInfo.bsrpNmprList" @onSelected="fnAddNmpr" @close="isOpenNmprModal = false" />
+          <div class="approval-container">
+            <div v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" class="d-flex addapproval">
+              <div class="d-flex align-items-center border-x">
+                <p>{{ item.triperNm }} {{ item.clsfNm }}</p>
+                <button type="button" @click="fnDelNmpr(idx)" @mousedown.stop>
                   <CloseOutlined />
                 </button>
-              </form>
+              </div>
             </div>
+          </div>
         </div>
-       
         <div class="col-12">
           <label for="member" class="form-label">
-            <p>승인자<button type="button" title="추가" @click="showPopup = true">
+            <p>승인자 <span class="require"><img :src="require" alt=""></span></p>
+            <button type="button" title="추가" @click="isOpenSanctnModal = true">
               <PlusCircleFilled />
-            </button><p class="require"><img :src="require" alt=""></p></p>
-            
+            </button>
           </label>
-          <HrPopup v-if="showPopup" @close="showPopup = false" @select="addApproval"/>
+          <HrPopup v-if="isOpenSanctnModal" :lists="bsrpCnsul.sanctnList" @onSelected="fnAddSanctn" @close="isOpenSanctnModal = false" />
           <div class="approval-container">
-            <div v-for="(approval, index) in approvals" :key="index" class="d-flex gap-2 addapproval mb-2">
-              <select class="form-select" v-model="approval.category" style="width: 110px;">
-                <option value="결재">결재</option>
-                <option value="전결">전결</option>
-                <option value="대결">대결</option>
-              </select>
-
-              <form class="d-flex align-items-center border-x">
-                <input type="text" class="form-control" v-model="approval.name" style="max-width: 150px;" />
-                <button type="button" @click="removeApproval(index)" class="delete-button">
-                  <CloseOutlined />
-                </button>
-              </form>
-            </div>
+            <SanctnList v-model:lists="bsrpCnsul.sanctnList" @delSanctn="fnDelSanctn" />
           </div>
         </div>
-        <div class="col-12 chuljang">
-          <label for="prvonsh" class="form-label"><p>품의내용<p class="require"><img :src="require" alt=""></p></p></label>
-          <input type="text" class="form-control textarea" id="reason" v-model="reason" />
+        <div class="col-12">
+          <label for="prvonsh" class="form-label">
+            <p>품의내용 <span class="require"><img :src="require" alt=""></span></p>
+          </label>
+          <EditorComponent v-model:contents="bsrpCnsul.cn" />
         </div>
         <div class="col-12">
-          <label for="purpose" class="form-label">법인카드 <button type="button" title="추가" @click="showPopup3 = true">
+          <label for="purpose" class="form-label">
+            <span>법인카드</span>
+            <button type="button" title="추가" @click="isOpenCardModal = true">
               <PlusCircleFilled />
-            </button></label>
-            <CorpCardPopup v-if="showPopup3" @close="showPopup3 = false" @select="addCard"/>
-            <div class="approval-container">
-            <div v-for="(card, index) in cards" :key="index" class="d-flex gap-2 addapproval mb-2">
-
+            </button>
+          </label>
+          <CorpCardPopup v-if="isOpenCardModal" :bsrpInfo="bsrpInfo" :lists="cprCardList" @close="isOpenCardModal = false" @onSelected="fnAddCard" />
+          <div class="approval-container">
+            <div v-for="(card, idx) in cprCardList" :key="idx" class="d-flex gap-2 addapproval mb-2">
               <form class="d-flex align-items-center border-x">
-                <input type="text" class="form-control" v-model="card.name" style="max-width: 150px;" />
-                <button type="button" @click="removeCard(index)" class="delete-button">
+                <p>{{ card.cardNm }}</p>
+                <button type="button" @click="fnDelCard(idx)" class="delete-button">
                   <CloseOutlined />
                 </button>
               </form>

           </div>
         </div>
         <div class="col-12 border-x">
-          <label for="purpose" class="form-label">법인차량 <button type="button" title="추가" @click="showPopup2 = true">
+          <label for="purpose" class="form-label">
+            <span>법인차량</span>
+            <button type="button" title="추가" @click="isOpenVhcleModal = true">
               <PlusCircleFilled />
-            </button></label>
-            <CorpCarPopup v-if="showPopup2" @close="showPopup2 = false" @select="addCar"/>
-            <div class="approval-container">
-            <div v-for="(car, index) in cars" :key="index" class="d-flex gap-2 addapproval mb-2">
-              <input type="text" class="form-control" v-model="car.name" style="max-width: 150px;" />
-              <select class="form-select" v-model="car.category" style="width: 120px;">
-                <option value="운전자">운전자</option>
+            </button>
+          </label>
+          <CorpCarPopup v-if="isOpenVhcleModal" :bsrpInfo="bsrpInfo" :lists="cprVhcleList" @close="isOpenVhcleModal = false" @onSelected="fnAddVhcle" />
+          <div class="approval-container">
+            <div v-for="(vhcle, idx) in cprVhcleList" :key="idx" class="d-flex gap-2 addapproval mb-2">
+              <p>{{ vhcle.vhcleNm }}</p>
+              <select class="form-select" v-model="vhcle.drverId">
+                <option value="" disabled hidden>운전자 선택</option>
+                <option :value="userInfo.userId">{{ userInfo.userNm }}</option>
+                <option v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" :value="item.userId">{{ item.userNm }}</option>
               </select>
-              <button type="button" @click="removeCar(index)" class="delete-button">
-                  <CloseOutlined />
-                </button>
+              <button type="button" @click="fnDelVhcle(idx)" class="delete-button">
+                <CloseOutlined />
+              </button>
             </div>
           </div>
         </div>
-
       </form>
       <div class="buttons">
-        <button type="submit" class="btn primary">신청</button>
-        <button type="reset" class="btn secondary">취소</button>
+        <button type="button" class="btn primary" @click="fnSave">신청</button>
+        <button v-if="$isEmpty(pageId)" type="button" class="btn secondary" @click="fnMoveTo('list')">목록</button>
+        <button v-else type="button" class="btn secondary" @click="fnMoveTo('view', pageId)">취소</button>
       </div>
-
     </div>
   </div>
 </template>
-
 <script>
 import { PlusCircleFilled, CloseOutlined } from '@ant-design/icons-vue';
 import HrPopup from '../../../component/Popup/HrPopup.vue';
 import CorpCarPopup from '../../../component/Popup/CorpCarPopup.vue';
 import CorpCardPopup from '../../../component/Popup/CorpCardPopup.vue';
+import SanctnList from '../../../component/Sanctn/SanctnFormList.vue';
+import EditorComponent from '../../../component/editor/EditorComponent.vue';
+// API
+import { saveBsrpProc, bsrpProc, updateBsrpProc } from '../../../../resources/api/bsrp';
+
 export default {
+  components: {
+    PlusCircleFilled, CloseOutlined,
+    HrPopup, CorpCarPopup, CorpCardPopup,
+    SanctnList, EditorComponent,
+  },
+
   data() {
-    const today = new Date().toISOString().split('T')[0];
     return {
-      showPopup: false,
-      showPopup1: false,
-      showPopup2: false,
-      showPopup3: false,
       require: "/client/resources/img/require.png",
-      fileName: '',
-      startDate: today,
-      startTime: '09:00',
-      endDate: today,
-      endTime: '18:00',
-      where: '',
-      purpose: '',
-      approvals: [        
-      ],
-      members: [        
-      ],
-      cards: [
-      ],
-      cars: [
-      ],
-     receipts: [
-        {
-          type: '개인결제',
-          category: '결재',
-          category1: '구분',
-        },
-      ],
+
+      pageId: null,
+      userInfo: this.$store.state.userInfo,
+      cmmnCodes: {},
+
+      isOpenNmprModal: false,
+      isOpenSanctnModal: false,
+      isOpenCardModal: false,
+      isOpenVhcleModal: false,
+
+      // 출장정보
+      bsrpInfo: {
+        applcntId: null,  // 신청자 아이디
+        bsrpSe: null,     // 출장구분
+        bsrpPlace: null,  // 출장지
+        bsrpPurps: null,  // 출장목적
+        bgnde: null,      // 시작일
+        beginHour: null,  // 시작시
+        beginMnt: null,   // 시작분
+        endde: null,      // 종료일
+        endHour: null,    // 종료시
+        endMnt: null,     // 종료분
+        bsrpNmprList: [], // 출장인원 목록
+      },
+      // 출장품의
+      bsrpCnsul: {
+        bsrpId: null,     // 출장 아이디
+        cn: null,         // 품의 내용
+        confmAt: null,    // 승인여부
+        rgsde: null,      // 등록일
+        register: null,   // 등록자
+        updde: null,      // 수정일
+        updusr: null,     // 수정자
+        sanctnList: [],   // 결재 목록
+      },
+      cprCardList: [],    // 법인카드 목록
+      cprVhcleList: [],   // 법인차량 목록
+
+      totalDays: 0, // 일수
     };
   },
-  components: {
-    PlusCircleFilled, CloseOutlined, HrPopup, CorpCarPopup, CorpCardPopup
-  },
-  computed: {
-    loginUser() {
-      const authStore = useAuthStore();
-      return authStore.getLoginUser;
+
+  computed: {},
+
+  watch: {
+    cmmnCodes(newVal) {
+      if (Object.keys(newVal).length > 0) {
+        this.bsrpInfo.bsrpSe = this.cmmnCodes.bsrpCodeList[0].code;
+      }
     },
+    'bsrpInfo.bgnde'(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.calcDayCnt(); // 일수 계산
+      }
+    },
+    'bsrpInfo.endde'(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.calcDayCnt(); // 일수 계산
+      }
+    },
+  },
+
+  async created() {
+    this.pageId = this.$route.query.id;
+    this.cmmnCodes = await this.$defaultCodes();
+  },
+
+  mounted() {
+    if (!this.$isEmpty(this.pageId)) {
+      this.findData();
+    }
   },
 
   methods: {
-    handleFileUpload(event) {
-      const file = event.target.files[0];
-      if (file) {
-        this.fileName = file.name;
+    // 상세 조회
+    async findData() {
+      try {
+        const response = await bsrpProc(this.pageId);
+        const result = response.data.data;
+
+        this.bsrpInfo = result.bsrpInfo;
+        this.bsrpInfo.bgnde = this.bsrpInfo.bgnde.split(' ')[0];
+        this.bsrpInfo.endde = this.bsrpInfo.endde.split(' ')[0];
+
+        this.bsrpCnsul = result.bsrpCnsul;
+        this.cprCardList = result.cprCardList;
+        this.cprVhcleList = result.cprVhcleList;
+      } catch (error) {
+        console.error('데이터 조회 실패:', error);
+        alert(error.response.data.message);
+
+        this.fnMoveTo('list');
       }
     },
-    addApproval(selectedUser) {
-      this.approvals.push({
-        category: '결재',
-        name: selectedUser.name, // or other fields if needed
-      });
-      this.showPopup = false; // 팝업 닫기
+
+    // 일수 계산
+    calcDayCnt() {
+      if (!this.bsrpInfo.bgnde || !this.bsrpInfo.endde) {
+        this.totalDays = 0;
+        return;
+      }
+
+      const startDate = new Date(this.bsrpInfo.bgnde);
+      const endDate = new Date(this.bsrpInfo.endde);
+
+      if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+        this.totalDays = 0;
+        return;
+      }
+
+      const timeDiff = endDate.getTime() - startDate.getTime();
+      const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24)) + 1;
+
+      this.totalDays = Math.max(0, dayDiff);
     },
-    addMember(selectedUser) {
-      this.members.push({
-        category: '결재',
-        name: selectedUser.name, // or other fields if needed
-      });
-      this.showPopup1 = false; // 팝업 닫기
+
+    // 동행자 추가
+    fnAddNmpr(user) {
+      const data = {
+        triperId: user.userId,  // 출장자 아이디
+        deptId: user.deptId,    // 부서 아이디
+        clsf: user.clsf,        // 직급
+
+        triperNm: user.userNm,  // 출장자 이름
+        deptNm: user.deptNm,    // 부서 이름
+        clsfNm: user.clsfNm,    // 직급 이름
+      };
+
+      this.bsrpInfo.bsrpNmprList.push(data);
+      this.isOpenNmprModal = false;
     },
-    addCard(selectedCard) {
-      this.cards.push({
-        category: '결재',
-        name: selectedCard.name, // or other fields if needed
-      });
-      this.showPopup3 = false; // 팝업 닫기
+
+    // 동행자 삭제
+    fnDelNmpr(idx) {
+      this.bsrpInfo.bsrpNmprList.splice(idx, 1);
     },
-    addCar(selectedCar) {
-      this.cars.push({
-        category: '결재',
-        name: selectedCar.name, // or other fields if needed
-      });
-      this.showPopup2 = false; // 팝업 닫기
+
+    // 승인자 추가
+    fnAddSanctn(user) {
+      const data = {
+        sanctnId: null,                                   // 결재 아이디
+        confmerId: user.userId,                           // 승인자 아이디
+        clsf: user.clsf,                                  // 직급
+        sanctnOrdr: this.bsrpCnsul.sanctnList.length + 1, // 결재 순서
+        sanctnIem: 'cnsul',                               // 결재 항목
+        sanctnMbyId: null,                                // 결재 주체 아이디
+        sanctnSe: this.cmmnCodes.sanctnCodeList[0].code,  // 결재구분
+
+        confmerNm: user.userNm,                           // 승인자 이름
+        clsfNm: user.clsfNm,                              // 직급 이름
+      };
+
+      this.bsrpCnsul.sanctnList.push(data);
+      this.isOpenSanctnModal = false;
     },
-    addReceipt() {
-  this.receipts.push({
-    type: '개인결제',
-    category: '결재',
-    category1: '',
-    name: '',
-    file: null,
-  });
-},
+
     // 승인자 삭제
-    removeApproval(index) {
-      this.approvals.splice(index, 1);
+    fnDelSanctn(idx) {
+      this.bsrpInfo.sanctnList.splice(idx, 1);
+      this.bsrpInfo.sanctnList.forEach((item, idx) => { item.sanctnOrdr = idx + 1; });
     },
-    removeMember(index) {
-      this.members.splice(index, 1);
+
+    // 법인카드 추가
+    fnAddCard(item) {
+      this.cprCardList.push(item);
+      this.isOpenCardModal = false;
     },
-    removeCard(index) {
-      this.cards.splice(index, 1);
+
+    // 법인카드 삭제
+    fnDelCard(idx) {
+      this.cprCardList.splice(idx, 1);
     },
-    removeCar(index) {
-      this.cars.splice(index, 1);
+
+    // 법인차량 추가
+    fnAddVhcle(item) {
+      item.drverId = '';
+      this.cprVhcleList.push(item);
+      this.isOpenVhcleModal = false;
     },
-    removeReceipt(index) {
-  this.receipts.splice(index, 1);
-},
+
+    // 법인차량 삭제
+    fnDelVhcle(idx) {
+      this.cprVhcleList.splice(idx, 1);
+    },
+
+    // 유효성 검사
     validateForm() {
-      // 필수 입력 필드 체크
-      if (
-        this.startDate &&
-        this.startTime &&
-        this.endDate &&
-        this.endTime &&
-        this.where &&
-        this.purpose.trim() !== ""
-      ) {
-        this.isFormValid = true;
-      } else {
-        this.isFormValid = false;
+      if (this.$isEmpty(this.bsrpInfo.bsrpSe)) {
+        return false;
       }
+      if (this.$isEmpty(this.bsrpInfo.bsrpPlace)) {
+        return false;
+      }
+      if (this.$isEmpty(this.bsrpInfo.bsrpPurps)) {
+        return false;
+      }
+      if (this.$isEmpty(this.bsrpInfo.bgnde) || this.$isEmpty(this.bsrpInfo.beginHour) || this.$isEmpty(this.bsrpInfo.beginMnt)) {
+        return false;
+      }
+      if (this.$isEmpty(this.bsrpInfo.endde) || this.$isEmpty(this.bsrpInfo.endHour) || this.$isEmpty(this.bsrpInfo.endMnt)) {
+        return false;
+      }
+      if (this.$isEmpty(this.bsrpInfo.bsrpNmprList) || this.bsrpInfo.bsrpNmprList.length === 0) {
+        return false;
+      }
+      if (this.$isEmpty(this.bsrpCnsul.cn)) {
+        return false;
+      }
+
+      return true;
     },
-    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); // 시간 조건이 기준에 맞을 경우
+    // 신청
+    async fnSave() {
+      try {
+        if (!this.validateForm()) {
+          return;
         }
-      } 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 변경 후 폼 재검증
+        let data = {
+          bsrpCnsulInsertDTO: this.bsrpCnsul,
+          cardDtlsList: this.cprCardList,
+          vhcleDtlsList: this.cprVhcleList,
+        }
+        if (this.$isEmpty(this.pageId)) {
+          data.bsrpInfoInsertDTO = this.bsrpInfo;
+        } else {
+          data.bsrpInfoUpdateDTO = this.bsrpInfo;
+        }
+
+        const response = this.$isEmpty(this.pageId) ? await saveBsrpProc(data) : await updateBsrpProc(data);
+        const message = this.$isEmpty(this.pageId) ? "등록되었습니다." : "수정되었습니다.";
+        alert(message);
+
+        this.fnMoveTo('view', response.data.data.pageId);
+      } catch (error) {
+        console.error('저장 실패:', error);
+        const message = error.response?.data?.message || "저장에 실패했습니다.";
+        alert(message);
+      }
     },
-    handleSubmit() {
-      this.validateForm(); // 제출 시 유효성 확인
-      if (this.isFormValid) {
-        localStorage.setItem('ChuljangFormData', JSON.stringify(this.$data));
-        alert("승인 요청이 완료되었습니다.");
-        // 추가 처리 로직 (API 요청 등)
+
+    fnMoveTo(type, id) {
+      const routes = {
+        'list': { name: 'ChuljangStatue' },
+        'view': { name: 'ChuljangDetailAll', query: { id } },
+        'edit': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
+      };
+
+      if (routes[type]) {
+        if (!this.$isEmpty(this.pageId) && type === 'list') {
+          this.$router.push({ name: 'ChuljangDetailAll', query: { id: this.pageId } });
+          return;
+        }
+        this.$router.push(routes[type]);
       } else {
-        alert("모든 필드를 올바르게 작성해주세요.");
+        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
+        this.$router.push(routes['list']);
       }
     },
-    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>
+</script>

3beb56e

client/views/pages/Manager/attendance/ChuljangPumuiDetail.vue (deleted)

--- client/views/pages/Manager/attendance/ChuljangPumuiDetail.vue

...	...	@@ -1,186 +0,0 @@
	1	-<template>
	2	- <div class="card ">
	3	- <div class="card-body">
	4	- <h2 class="card-title">출장 현황</h2>
	5	-
	6	- <div class="form-card">
	7	- <h1>출장품의서</h1>
	8	- <div class="approval-box tbl-wrap tbl2">
	9	- <table class="tbl data">
	10	- <tbody>
	11	- <tr class="thead">
	12	- <td rowspan="2" class="th">승인자</td>
	13	- <td v-for="(approver, index) in approvers" :key="index">
	14	- <p class="position">{{ approver.position }}</p>
	15	- </td>
	16	- </tr>
	17	- <tr>
	18	- <td v-for="(approver, index) in approvers" :key="index">
	19	- <p class="name">{{ approver.name }}</p>
	20	- <p class="date">{{ approver.date }}</p>
	21	- </td>
	22	- </tr>
	23	-
	24	- </tbody>
	25	-
	26	- </table>
	27	- </div>
	28	- <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }"
	29	- @submit.prevent="handleRegister" novalidate>
	30	- <div class="col-12 ">
	31	- <div class="col-12 border-x">
	32	- <label for="youremail" class="form-label ">출장구분<p class="require"><img :src="require" alt=""></p></label>
	33	- <input v-model="email" type="text" name="username" class="form-control" id="youremail" readonly>
	34	- </div>
	35	-
	36	- <div class="col-12 border-x">
	37	- <label for="yourPassword" class="form-label">이름</label>
	38	- <input v-model="password" type="password" name="password" class="form-control" readonly
	39	- placeholder="주식회사 테이큰 소프트">
	40	- </div>
	41	- </div>
	42	- <div class="col-12">
	43	- <div class="col-12 border-x">
	44	- <label for="youremail" class="form-label">부서</label>
	45	- <input v-model="email" type="text" name="username" class="form-control" readonly placeholder="과장">
	46	- </div>
	47	-
	48	- <div class="col-12 border-x">
	49	- <label for="yourPassword" class="form-label">직급</label>
	50	- <input v-model="password" type="password" name="password" class="form-control" readonly placeholder="팀장">
	51	- </div>
	52	- </div>
	53	- <div class="col-12">
	54	- <label for="yourName" class="form-label">출장지</label>
	55	- <input v-model="name" type="text" name="name" class="form-control" readonly>
	56	- </div>
	57	- <div class="col-12">
	58	- <label for="yourName" class="form-label">출장목적</label>
	59	- <input v-model="name" type="text" name="name" class="form-control " readonly>
	60	- </div>
	61	- <div class="col-12">
	62	- <label for="yourName" class="form-label">동행자</label>
	63	- <input v-model="name" type="text" name="name" class="form-control " readonly>
	64	- </div>
	65	- <div class="col-12 chuljang">
	66	- <label for="yourName" class="form-label">내용</label>
	67	- <input v-model="name" type="text" name="name" class="form-control textarea " readonly>
	68	- </div>
	69	- <div class="col-12">
	70	- <label for="yourName" class="form-label">법인카드</label>
	71	- <input v-model="name" type="text" name="name" class="form-control " readonly>
	72	- </div>
	73	- <div class="col-12">
	74	- <label for="yourName" class="form-label">법인차량</label>
	75	- <input v-model="name" type="text" name="name" class="form-control " readonly>
	76	- </div>
	77	- <div class="col-12">
	78	- <label for="yourName" class="form-label">품의 신청일</label>
	79	- <input v-model="name" type="text" name="name" class="form-control " readonly>
	80	- </div>
	81	- <div class="col-12 border-x return">
	82	- <label for="yourName" class="form-label">반려사유</label>
	83	- <input v-model="name" type="text" name="name" class="form-control" readonly placeholder="2025-01-01">
	84	- </div>
	85	-
	86	-
	87	- </form>
	88	- </div>
	89	- <div class="buttons">
	90	- <button class="btn btn-red" type="submit">신청취소</button>
	91	- <button class="btn secondary" type="submit">재신청</button>
	92	- <button class="btn secondary" type="submit">수정</button>
	93	- <button v-if="hasAnyApprover" class="btn primary" type="submit" @click="goToBokmyeongInsert">
	94	- 복명서 작성
	95	- </button>
	96	- <button class="btn tertiary " type="submit">목록</button>
	97	- </div>
	98	-
	99	- </div>
	100	- </div>
	101	-</template>
	102	-
	103	-<script>
	104	-export default {
	105	- data() {
	106	- const today = new Date().toISOString().split('T')[0];
	107	- return {
	108	- showPopup: false,
	109	- startDate: today,
	110	- startTime: "09:00", // 기본 시작 시간 09:00
	111	- endDate: today,
	112	- endTime: "18:00", // 기본 종료 시간 18:00
	113	- category: "",
	114	- dayCount: 1,
	115	- reason: "", // 사유
	116	- approvers: [
	117	- { position: '', name: '', date: '' },
	118	- { position: '', name: '', date: '' },
	119	- ],
	120	- listData: [
	121	- {
	122	- type: '연차',
	123	- approvalType: '결재',
	124	- applicant: '홍길동',
	125	- period: '2025-05-10 ~ 2025-15-03',
	126	- requestDate: '2025-04-25',
	127	- status: '대기'
	128	- }, {
	129	- type: '반차',
	130	- approvalType: '전결',
	131	- applicant: '홍길동',
	132	- period: '2025-05-01 ~ 2025-05-03',
	133	- requestDate: '2025-04-25',
	134	- status: '승인'
	135	- }],
	136	- };
	137	- },
	138	- computed: {
	139	- },
	140	- methods: {
	141	- goToBokmyeongInsert() {
	142	- this.$router.push({ name: 'BokmyeongInsert' });
	143	- },
	144	- hasAnyApprover() {
	145	- return this.approvers.some(
	146	- (approver) =>
	147	- approver.name?.trim() !== '' && approver.date?.trim() !== ''
	148	- );
	149	- },
	150	- calculateDayCount() {
	151	- const start = new Date(`${this.startDate}T${this.startTime}:00`);
	152	- const end = new Date(`${this.endDate}T${this.endTime}:00`);
	153	-
	154	- let totalHours = (end - start) / (1000 * 60 * 60); // 밀리초를 시간 단위로 변환
	155	-
	156	- if (this.startDate !== this.endDate) {
	157	- // 시작일과 종료일이 다른경우
	158	- const startDateObj = new Date(this.startDate);
	159	- const endDateObj = new Date(this.endDate);
	160	- const daysDifference = (endDateObj - startDateObj) / (1000 * 60 * 60 * 24); // 두 날짜 사이의 차이를 일수로 계산
	161	- if (this.startTime !== "09:00" \|\| this.endTime !== "18:00") {
	162	- this.dayCount = daysDifference + 0.5; // 시간 조건이 기준에서 벗어날 경우
	163	- } else {
	164	- this.dayCount = Math.ceil(daysDifference + 1); // 시간 조건이 기준에 맞을 경우
	165	- }
	166	- } else {
	167	- // 시작일과 종료일이 같은 경우
	168	- if (this.startTime !== "09:00" \|\| this.endTime !== "18:00") {
	169	- this.dayCount = 0.5; // 시작 시간 또는 종료 시간이 기준과 다를 경우 0.5
	170	- } else {
	171	- this.dayCount = 1; // 기준 시간(09:00~18:00)이 맞으면 1일로 간주
	172	- }
	173	- }
	174	-
	175	- },
	176	-
	177	-
	178	-
	179	- },
	180	-};
	181	-</script>
	182	-<style scoped>
	183	-td p {
	184	- width: 125px;
	185	-}
	186	-</style>

3beb56e

8c5ba61

client/views/pages/Manager/attendance/ChuljangStatue.vue

--- client/views/pages/Manager/attendance/ChuljangStatue.vue

+++ client/views/pages/Manager/attendance/ChuljangStatue.vue


     <div class="card">
       <div class="card-body">
         <h2 class="card-title">출장 현황</h2>
-        <!-- 폼그룹 -->
         <div class="sch-form-wrap">
-        <div class="input-group">
-          <select name="" id="" class="form-select">
-              <option :value="currentYear">{{ currentYear }}년</option>
-  <option value="all">전체</option>
-  <option
-    v-for="year in remainingYears"
-    :key="year"
-    :value="year"
-    v-if="year !== currentYear"
-  >
-    {{ year }}년
-  </option>
+          <div class="input-group">
+            <select class="form-select" v-model="request.year" @change="fnChangeCurrentPage(1)">
+              <option value="">연도 전체</option>
+              <option v-for="year in years" :key="year" :value="year">{{ year }}년</option>
             </select>
-            <select name="" id="" class="form-select">
-              <option :value="currentMonth">{{ currentMonth }}월</option>
-  <option value="all">전체</option>
-  <option
-    v-for="month in remainingMonths"
-    :key="month"
-    :value="month"
-    v-if="month !== currentMonth"
-  >
-    {{ month }}월
-  </option>
+            <select class="form-select" v-model="request.month" @change="fnChangeCurrentPage(1)">
+              <option value="">월 전체</option>
+              <option v-for="month in months" :key="month" :value="month">{{ month }}월</option>
             </select>
-      </div>
-      </div>
-        <!-- Table  -->
+          </div>
+        </div>
         <div class="tbl-wrap">
           <table id="myTable" class="tbl data">
-            <!-- 동적으로 <th> 생성 -->
             <thead>
               <tr>
-                <th>출장구분 </th>
+                <th>출장구분</th>
                 <th>출장지</th>
                 <th>목적</th>
                 <th>출장기간</th>

                 <th>복명서 상태</th>
               </tr>
             </thead>
-            <!-- 동적으로 <td> 생성 -->
             <tbody>
-              <tr v-for="(item, index) in listData" :key="index" :class="{ 'expired': isPast(item) }" @click="handleClick(item)">
-                <td>{{ item.type }}</td>
-                <td>{{ item.where }}</td>
-                <td>{{ item.purpose }}</td>
-                <td >{{ item.period }}</td>
-<td
-  :class="getStatusClass(item.pumuiStatue)"
-  
->
-  {{ item.pumuiStatue }}
-</td>
-<td
-  :class="getBokmyeongClass(item.bokmyeong)"
->
-  {{ item.bokmyeong }}
-</td>
-
-<td :class="getStatusClass(item.status)">
-  {{ item.status }}
-</td>
+              <tr v-for="(item, idx) in lists" :key="idx" :class="{ 'expired': item.hasRport }" @click="fnMoveTo('view', item.bsrpId)">
+                <td>{{ item.bsrpSeNm }}</td>
+                <td>{{ item.bsrpPlace }}</td>
+                <td>{{ item.bsrpPurps }}</td>
+                <td>{{ item.bgnde }}</td>
+                <td>{{ item.bsrpCnsulDTO.confmAtNm }}</td>
+                <td>{{ item.hasRport ? '등록' : '미등록' }}</td>
+                <td>{{ item.hasRport ? item.bsrpRportDTO.confmAt : '-' }}</td>
               </tr>
             </tbody>
           </table>
-
         </div>
-        <div class="pagination">
-          <ul>
-            <!-- 왼쪽 화살표 (이전 페이지) -->
-            <li class="arrow" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">
-              &lt;
-            </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)">
-              &gt;
-            </li>
-          </ul>
-        </div>
-
+        <Pagenation :search="request" @onChange="fnChangeCurrentPage" />
       </div>
     </div>
   </div>
 </template>
-
 <script>
-import { ref } from 'vue';
 import { SearchOutlined } from '@ant-design/icons-vue';
-const currentYear = new Date().getFullYear();
-const currentMonth = new Date().getMonth() + 1;
+// API
+import { bsrpsProc } from '../../../../resources/api/bsrp';
+
 export default {
-  data() {
-    return {
-      currentMonth,
-      selectedMonth: currentMonth,
-      remainingMonths: Array.from({ length: 12 }, (_, i) => i + 1),
-      currentYear,
-      selectedYear: currentYear,
-      remainingYears: Array.from({ length: 10 }, (_, i) => currentYear - i),
-      showOptions: false,
-      currentPage: 1,
-      totalPages: 3,
-      photoicon: "/client/resources/img/photo_icon.png",
-      // 데이터 초기화
-      years: [2023, 2024, 2025], // 연도 목록
-      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
-      selectedYear: '',
-      selectedMonth: '',
-      listData: [
-        {
-          type: '연차',
-          where: '상주시청',
-          purpose: '유지보수',
-          period: '2025-05-10 ~ 2025-05-23',
-          pumuiStatue: '대기',
-          bokmyeong: '미등록',          
-          status: '-'
-        },
-        {
-          type: '연차',
-          where: '상주시청',
-          purpose: '유지보수',
-          period: '2025-05-10 ~ 2025-05-23',
-          pumuiStatue: '승인',
-          bokmyeong: '미등록',          
-          status: '-'
-        },
-        {
-          type: '연차',
-          where: '상주시청',
-          purpose: '유지보수',
-          period: '2025-05-10 ~ 2025-05-23',
-          pumuiStatue: '승인',
-          bokmyeong: '등록',          
-          status: '대기'
-        }, {
-          type: '연차',
-          where: '상주시청',
-          purpose: '유지보수',
-          period: '2025-05-10 ~ 2025-05-10',
-          pumuiStatue: '승인',
-          bokmyeong: '등록',          
-          status: '승인'
-        },],
-      filteredData: [],
-    };
-  },
   components: {
     SearchOutlined
   },
-  computed: {
-  },
-  methods: {
-    goToAttendancePage(item) {
-      this.$router.push({ name: 'AttendanceDetail', query: { id: item.id } });
-    },
-    changePage(page) {
-      if (page < 1 || page > this.totalPages) return;
-      this.currentPage = page;
-      this.$emit('page-changed', page); // 필요 시 부모에 알림
-    },
-    async onClickSubmit() {
-      // `useMutation` 훅을 사용하여 mutation 함수 가져오기
-      const { mutate, onDone, onError } = useMutation(mygql);
 
-      try {
-        const result = await mutate();
-        console.log(result);
-      } catch (error) {
-        console.error('Mutation error:', error);
+  data() {
+    return {
+      photoicon: "/client/resources/img/photo_icon.png",
+
+      years: [],
+      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+
+      cmmnCodes: {},
+      request: {
+        year: '',
+        month: '',
+      },
+      lists: [],
+    };
+  },
+
+  watch: {},
+
+  created() {
+    this.generateYears();
+  },
+
+  mounted() {
+    this.findList(); // 목록 조회
+  },
+
+  methods: {
+    generateYears() {
+      const startYear = 2020;
+      const currentYear = new Date().getFullYear();
+
+      for (let year = currentYear; year >= startYear; year--) {
+        this.years.push(year);
       }
     },
 
-    // 상태에 따른 클래스 반환 메소드
-    getStatusClass(status) {
-      return status === 'active' ? 'status-active' : 'status-inactive';
+    // 목록 조회
+    async findList() {
+      try {
+        const response = await bsrpsProc(this.request);
+        const result = response.data.data;
+
+        this.lists = result.lists;
+        this.request = result.search;
+      } catch (error) {
+        const message = error.response.data.message;
+        alert(message);
+      }
     },
-    getStatusClass(status, pumuiStatue) {
-  // Check the 'status' and 'pumuiStatue' to return the correct class
-  if (pumuiStatue === '승인') return 'status-approved'; 
-  if (pumuiStatue === '대기') return 'status-pending'; 
-  // If no match, fallback to status-based class
-  if (status === '대기') return 'status-pending';
-  if (status === '승인') return 'status-approved';
 
-  // Default empty string
-  return '';
-},
-getBokmyeongClass(bokmyeong) {
-  if (bokmyeong === '등록') return 'status-approved';
-  if (bokmyeong === '미등록') return 'status-pending';
-  return '';
-},
-isPast(item) {
-    return (
-      item.pumuiStatue === '승인' &&
-      item.bokmyeong === '등록' &&
-      item.status === '승인'
-    );
-  },
-  handleClick(item) {
-  const isCasePumui = (
-    (item.pumuiStatue === '대기' && item.bokmyeong === '미등록') ||
-    (item.pumuiStatue === '승인' && item.bokmyeong === '미등록')
-  );
+    // 페이지 이동
+    fnChangeCurrentPage(currentPage) {
+      this.request.currentPage = Number(currentPage);
+      this.$nextTick(() => {
+        this.findList();
+      });
+    },
 
-  if (item.bokmyeong === '등록') {
-    this.$router.push({ name: 'ChuljangDetailAll' });
-  } else if (isCasePumui) {
-    this.$router.push({ name: 'ChuljangPumuiDetail' });
-  } else {
-    console.log('이동 조건이 아닙니다.');
-  }
-},
-  handleBokmyeongClick(item) {
-    this.$router.push({ name: 'ChuljangBokmyeongDetail' });
-  },
-  },
-  created() {
-  },
-  mounted() {
+    fnMoveTo(type, id) {
+      const routes = {
+        'list': { name: 'ChuljangStatue' },
+        'view': { name: 'ChuljangDetailAll', query: { id } },
+        'edit': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
+      };
 
-
+      if (routes[type]) {
+        if (!this.$isEmpty(this.pageId) && type === 'list') {
+          this.$router.push({ name: 'ChuljangDetailAll', query: { id: this.pageId } });
+          return;
+        }
+        this.$router.push(routes[type]);
+      } else {
+        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
+        this.$router.push(routes['list']);
+      }
+    },
   },
-
 };
 </script>
-
 <style scoped>
 tr {
   cursor: pointer;

3beb56e

8c5ba61

client/views/pages/Manager/attendance/HyugaDetail.vue

--- client/views/pages/Manager/attendance/HyugaDetail.vue

+++ client/views/pages/Manager/attendance/HyugaDetail.vue


       <div class="buttons">
         <button v-if="detailData.confmAt === 'W' || detailData.confmAt === 'R'" class="btn btn-red" type="button" @click="deleteData">신청취소</button>
         <button v-if="detailData.confmAt === 'W'" class="btn secondary" type="button" @click="fnMoveTo('edit', pageId)">수정</button>
-        <button v-if="detailData.confmAt === 'R'" class="btn secondary" type="button" @click="reSave">재신청</button>
+        <button v-if="detailData.confmAt === 'R'" class="btn secondary" type="button" @click="fnMoveTo('edit', pageId)">재신청</button>
         <button class="btn tertiary" type="button" @click="fnMoveTo('list')">목록</button>
       </div>
       <ReturnPopup v-if="showPopup" @close="showPopup = false" />

 
     // 삭제
     async deleteData() {
+      const isCheck = confirm("삭제하시겠습니까?");
+      if (!isCheck) {
+        return;
+      }
+
       try {
         const response = await deleteVcatnProc(this.pageId);
 

         console.error(error.message);
         this.fnMoveTo('list');
       }
-    },
-
-    // 재신청
-    reSave() {
-      this.$router.push({ name: 'hyugaInsert', query: { id: this.pageId } });
     },
 
     // 페이지 이동

3beb56e

8c5ba61

client/views/pages/Manager/attendance/HyugaInsert.vue

--- client/views/pages/Manager/attendance/HyugaInsert.vue

+++ client/views/pages/Manager/attendance/HyugaInsert.vue


           </label>
           <div class="d-flex gap-1">
             <input type="date" class="form-control" id="bgnde" v-model="editData.bgnde" @keydown="preventKeyboard" />
-            <input type="text" class="form-control" placeholder="시" v-model="editData.beginHour" readonly />
-            <input type="text" class="form-control" placeholder="분" v-model="editData.beginMnt" readonly />
+            <input type="text" class="form-control" placeholder="시" style="width: 100px;" v-model="editData.beginHour" readonly />
+            <input type="text" class="form-control" placeholder="분" style="width: 100px;" v-model="editData.beginMnt" readonly />
           </div>
         </div>
         <div class="col-12">

           </label>
           <div class="d-flex gap-1">
             <input type="date" class="form-control" id="endde" v-model="editData.endde" :readonly="dayCnt === 0.5" @keydown="preventKeyboard" />
-            <input type="text" class="form-control" placeholder="시" v-model="editData.endHour" readonly />
-            <input type="text" class="form-control" placeholder="분" v-model="editData.endMnt" readonly />
+            <input type="text" class="form-control" placeholder="시" style="width: 100px;" v-model="editData.endHour" readonly />
+            <input type="text" class="form-control" placeholder="분" style="width: 100px;" v-model="editData.endMnt" readonly />
           </div>
         </div>
         <div class="col-12">

               <PlusCircleFilled />
             </button>
           </label>
-          <HrPopup v-if="isOpenModal" :sanctns="editData.sanctnList" @onSelected="fnAddSanctn" @close="isOpenModal = false" />
+          <HrPopup v-if="isOpenModal && isCodesLoaded" :sanctns="editData.sanctnList" :cmmnCodes="cmmnCodes" @onSelected="fnAddSanctn" @close="isOpenModal = false" />
           <div class="approval-container">
             <SanctnList v-model:sanctns="editData.sanctnList" @delSanctn="fnDelSanctn" />
           </div>

       <div class="buttons">
         <button type="button" class="btn btn-red" @click="fnRecord">이전 승인자 불러오기</button>
         <button type="button" class="btn primary" @click="fnSave">신청</button>
-        <button type="reset" class="btn tertiary" @click="fnMoveTo('list')">취소</button>
+        <button type="button" class="btn tertiary" @click="fnMoveTo('list')">취소</button>
       </div>
     </div>
   </div>

 <script>
 import { PlusCircleFilled, CloseOutlined } from '@ant-design/icons-vue';
 import HrPopup from '../../../component/Popup/HrPopup.vue';
-import SanctnList from '../../../component/Sanctn/SanctnList.vue';
+import SanctnList from '../../../component/Sanctn/SanctnFormList.vue';
 import EditorComponent from '../../../component/editor/EditorComponent.vue';
 // API
 import { findVcatnProc, saveVcatnProc, findLastVcatnProc, updateVcatnProc } from '../../../../resources/api/vcatn';

     // 세부 유형 선택박스를 보여줄지 여부
     showSubTypeSelect() {
       return this.dayCnt === 0.5 && this.subTypes.length > 0;
+    },
+
+    // cmmnCodes가 로드되었는지 확인
+    isCodesLoaded() {
+      return this.cmmnCodes && Object.keys(this.cmmnCodes).length > 0;
     }
   },
 

     },
     'editData.endde'(newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.validateAndCalculateDays(); // calculateTotalDays 대신 validateAndCalculateDays 호출
+        this.validateAndCalculateDays();
       }
     },
   },

 
         let sanctns = [];
         for (let sanctn of this.editData.sanctnList) {
-          console.log("sanctn: ", sanctn);
           let data = {
             confmerId: sanctn.confmerId,
             clsf: sanctn.clsf,

         }
         this.editData.sanctnList = sanctns;
 
-        // cmmnCodes가 초기화되었는지 확인 후 호출
-        if (this.cmmnCodes && this.cmmnCodes.vcatnKndCodeList) {
-          await this.fnOnchangeVcatnKnd();
-        } else {
-          console.warn('cmmnCodes가 아직 초기화되지 않았습니다.');
-        }
+        await this.fnOnchangeVcatnKnd();
       } catch (error) {
         console.error('데이터 조회 실패:', error);
         const message = error.response?.data?.message || "데이터를 불러오는데 실패했습니다.";

 
     // 유형 변경
     async fnOnchangeVcatnKnd() {
-      // 안전성 검사 추가
-      if (!this.cmmnCodes || !this.cmmnCodes.vcatnKndCodeList || !Array.isArray(this.cmmnCodes.vcatnKndCodeList)) {
-        console.warn('cmmnCodes.vcatnKndCodeList가 초기화되지 않았거나 배열이 아닙니다.');
+      if (!this.isCodesLoaded || !Array.isArray(this.cmmnCodes.vcatnKndCodeList)) {
+        console.warn('cmmnCodes가 초기화되지 않았습니다.');
         return;
       }
 

       if (this.dayCnt === 0.5) {
         this.changeBgnde(); // 반차일 경우 종료일을 시작일과 동일하게 설정
       } else {
-        // 반차가 아닌 경우
         this.editData.vcatnSubKnd = ''; // 세부 유형 선택 초기화
 
         // 전체 근무시간으로 설정

 
       // 날짜 유효성 검사
       if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
-        console.warn('유효하지 않은 날짜입니다.');
         this.totalDays = 0;
         return;
       }

       }
     },
 
-    fnAddSanctn(data) {
+    // 승인자
+    fnAddSanctn(user) {
+      const data = {
+        confmerId: user.userId,
+        clsf: user.clsf,
+        sanctnOrdr: this.editData.nmprList.length + 1,
+        sanctnSe: this.cmmnCodes.sanctnCodeList[0].code,
+
+        clsfNm: this.formatClsf(user.clsf),
+        userNm: user.userNm,
+      };
+
       this.editData.sanctnList.push(data);
       this.isOpenModal = false;
     },

       });
     },
 
+    // 직급 매칭
+    formatClsf(code) {
+      const clsfCode = this.cmmnCodes?.clsfCodeList?.find(item => item.code === code);
+      return clsfCode?.codeNm || code;
+    },
+
     async fnRecord() {
       try {
         const response = await findLastVcatnProc();

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div>
3		- <div v-for="(sanctns, idx) of sanctns" :key="sanctns.sanctnId \|\| idx" class="draggable-item-wrapper">
	3	+ <div v-for="(lists, idx) of lists" :key="lists.sanctnId \|\| idx" class="draggable-item-wrapper">
4	4	<div class="drop-zone" @dragover.prevent="handleDragEnter($event, idx)" @dragenter.prevent="handleDragEnter($event, idx)" @dragleave="handleDragLeave($event, idx)" @drop.prevent="handleDrop($event, idx)" :class="{
5	5	'drop-active': dropTarget === idx,
6	6	'drop-visible': draggedIndex !== null && shouldShowDropZone(idx),
...	...	@@ -9,19 +9,19 @@
9	9	<div class="drop-indicator">여기에 놓기</div>
10	10	</div>
11	11	<div class="d-flex addapproval draggable-item" draggable="true" @dragstart="handleDragStart(idx, $event)" @dragend="handleDragEnd" :class="{ 'being-dragged': draggedIndex === idx }">
12		- <select class="form-select" v-model="sanctns.sanctnSe" style="width: 110px;" @mousedown.stop>
	12	+ <select class="form-select" v-model="lists.sanctnSe" style="width: 110px;" @mousedown.stop>
13	13	<option v-for="(item, idx) of cmmnCodes.sanctnCodeList" :key="idx" :value="item.code"> {{ item.codeNm }} </option>
14	14	</select>
15	15	<div class="d-flex align-items-center border-x">
16		- <p>{{ sanctns.userNm }} {{ formatClsf(sanctns.clsfNm) }} ({{ sanctns.sanctnOrdr }})</p>
	16	+ <p>{{ lists.confmerNm }} {{ lists.clsfNm }} ({{ lists.sanctnOrdr }})</p>
17	17	<button type="button" @click="$emit('delSanctn', idx)" @mousedown.stop>
18	18	<CloseOutlined />
19	19	</button>
20	20	</div>
21	21	</div>
22	22	</div>
23		- <div class="drop-zone" @dragover.prevent="handleDragEnter($event, sanctns.length)" @dragenter.prevent="handleDragEnter($event, sanctns.length)" @dragleave="handleDragLeave($event, sanctns.length)" @drop.prevent="handleDrop($event, sanctns.length)" :class="{
24		- 'drop-active': dropTarget === sanctns.length,
	23	+ <div class="drop-zone" @dragover.prevent="handleDragEnter($event, lists.length)" @dragenter.prevent="handleDragEnter($event, lists.length)" @dragleave="handleDragLeave($event, lists.length)" @drop.prevent="handleDrop($event, lists.length)" :class="{
	24	+ 'drop-active': dropTarget === lists.length,
25	25	'drop-visible': draggedIndex !== null && shouldShowLastDropZone(),
26	26	'drop-hidden': draggedIndex !== null && !shouldShowLastDropZone()
27	27	}">
...	...	@@ -38,7 +38,7 @@
38	38	components: { CloseOutlined },
39	39
40	40	props: {
41		- sanctns: {
	41	+ lists: {
42	42	type: Array,
43	43	default: () => [],
44	44	}
...	...	@@ -57,11 +57,6 @@
57	57	},
58	58
59	59	methods: {
60		- formatClsf(code) {
61		- const clsfCode = this.cmmnCodes?.clsfCodeList?.find(item => item.code === code);
62		- return clsfCode?.codeNm \|\| code;
63		- },
64		-
65	60	shouldShowDropZone(index) {
66	61	if (this.draggedIndex === null) return true;
67	62	if (index === this.draggedIndex \|\| index === this.draggedIndex + 1) return false;
...	...	@@ -70,7 +65,7 @@
70	65
71	66	shouldShowLastDropZone() {
72	67	if (this.draggedIndex === null) return true;
73		- return this.draggedIndex !== this.sanctns.length - 1;
	68	+ return this.draggedIndex !== this.lists.length - 1;
74	69	},
75	70
76	71	handleDragStart(index, event) {
...	...	@@ -105,7 +100,7 @@
105	100	finalDropIndex = dropIndex - 1;
106	101	}
107	102
108		- const newSanctns = [...this.sanctns];
	103	+ const newSanctns = [...this.lists];
109	104	const draggedItem = newSanctns.splice(this.draggedIndex, 1)[0];
110	105	newSanctns.splice(finalDropIndex, 0, draggedItem);
111	106
...	...	@@ -113,7 +108,7 @@
113	108	item.sanctnOrdr = index + 1;
114	109	});
115	110
116		- this.$emit('update:sanctns', newSanctns);
	111	+ this.$emit('update:lists', newSanctns);
117	112	}
118	113
119	114	this.dropTarget = null;

...	...	@@ -5,11 +5,6 @@
5	5	import Join from '../pages/User/Join.vue';
6	6	import MyPage from '../pages/User/MyPage.vue';
7	7
8		-// import Main2 from '../pages/main/Main2.vue';
9		-
10		-// import HomeView from "../pages/HomeView.vue";
11		-// import AboutView from "../pages/AboutView.vue";
12		-
13	8	// 직원
14	9	import ChuljangList from '../pages/Employee/ChuljangList.vue';
15	10	import HyugaList from '../pages/Employee/HyugaList.vue';
...	...	@@ -23,19 +18,18 @@
23	18	import Hyuga from '../pages/Manager/approval/Hyuga.vue';
24	19
25	20	//근태관리
26		-import ChuljangPumuiDetail from '../pages/Manager/attendance/ChuljangPumuiDetail.vue';
27	21	import ChuljangBokmyeongDetail from '../pages/Manager/attendance/ChuljangBokmyeongDetail.vue';
28		-import ChuljangDetailAll from '../pages/Manager/attendance/ChuljangDetailAll.vue';
29		-import attendance from '../pages/Manager/attendance/attendance.vue';
	22	+import ChuljangDetailAll from './Manager/attendance/ChuljangDetailAll.vue';
	23	+import ChuljangStatue from '../pages/Manager/attendance/ChuljangStatue.vue';
	24	+import ChuljangInsert from '../pages/Manager/attendance/ChuljangInsert.vue';
30	25	import myAttendance from '../pages/Manager/attendance/myAttendance.vue';
31	26	import buseoAttendance from '../pages/Manager/attendance/buseoAttendance.vue';
	27	+import attendance from '../pages/Manager/attendance/attendance.vue';
32	28	import AttendanceDetail from '../pages/Manager/attendance/AttendanceDetail.vue';
33	29	import hyugaStatue from '../pages/Manager/attendance/hyugaStatue.vue';
34	30	import HyugaInsert from '../pages/Manager/attendance/HyugaInsert.vue';
35	31	import HyugaDetail from '../pages/Manager/attendance/HyugaDetail.vue';
36	32	import BokmyeongInsert from '../pages/Manager/attendance/BokmyeongInsert.vue';
37		-import ChuljangStatue from '../pages/Manager/attendance/ChuljangStatue.vue';
38		-import ChuljangInsert from '../pages/Manager/attendance/ChuljangInsert.vue';
39	33	//업무관리
40	34	import task from '../pages/Manager/task/task.vue';
41	35	import projectStatue from '../pages/Manager/task/projectStatue.vue';
...	...	@@ -75,133 +69,129 @@
75	69	import commonCodeDetail from '../pages/Manager/system/commonCodeDetail.vue';
76	70
77	71	const routes = [
78		- /* 메인화면 */
79		- { path: '/', name: '/', component: Main},
80		- { path: '/login.page', name: 'Login', component: Login},
81		- { path: '/join.page', name: 'Join', component: Join},
82		- { path: '/MyPage.page', name: 'MyPage', component: MyPage},
83		-
84		- { path: '/ChuljangList.page', name: 'ChuljangList', component: ChuljangList },
85		- { path: '/HyugaList.page', name: 'HyugaList', component: HyugaList },
86		-
87		- { path: '/HyugaOk.page', name: 'HyugaOk', component: HyugaOk },
88		-
89		- { path: '/approval-management.page', name: 'approval', component: approval, redirect: '/approval-management.page/approvalRequest.page',
	72	+ /* 메인화면 */
	73	+ { path: '/', name: '/', component: Main },
	74	+ { path: '/login.page', name: 'Login', component: Login },
	75	+ { path: '/join.page', name: 'Join', component: Join },
	76	+ { path: '/MyPage.page', name: 'MyPage', component: MyPage },
	77	+ { path: '/ChuljangList.page', name: 'ChuljangList', component: ChuljangList },
	78	+ { path: '/HyugaList.page', name: 'HyugaList', component: HyugaList },
	79	+ { path: '/HyugaOk.page', name: 'HyugaOk', component: HyugaOk },
	80	+ {
	81	+ path: '/approval-management.page', name: 'approval', component: approval, redirect: '/approval-management.page/approvalRequest.page',
	82	+ children: [
	83	+ {
	84	+ path: 'approvalRequest.page', // => /approval-management.page/list
	85	+ name: 'approvalRequest',
	86	+ component: approvalRequest,
90	87	children: [
91		- {
92		- path: 'approvalRequest.page', // => /approval-management.page/list
93		- name: 'approvalRequest',
94		- component: approvalRequest,
95		- children: [
96		-
97		- ]
98		- },
99		- {
100		- path: 'approvalList.page', // => /approval-management.page/detail/123
101		- name: 'approvalList',
102		- component: approvalList,
103		- children: [
104		- ]
105		- },
106		- { path: 'ChuljangPumui.page', name: 'ChuljangPumui', component: ChuljangPumui },
107		- { path: 'ChuljangBokmyeong.page', name: 'ChuljangBokmyeong', component: ChuljangBokmyeong },
108		- { path: 'Hyuga.page', name: 'Hyuga', component: Hyuga },
109		-
110		-
111		-
112		- ]
113		- }, //결재관리
114		- { path: '/attendance-management.page', name: 'attendance', component: attendance, redirect: '/attendance-management.page/myAttendance.page',
115		- children: [
116		- { path: 'myAttendance.page', name: 'myAttendance', component: myAttendance },
117		- { path: 'buseoAttendance.page', name: 'buseoAttendance', component: buseoAttendance },
118		- { path: 'AttendanceDetail.page', name: 'AttendanceDetail', component: AttendanceDetail },
119		- { path: 'hyugaStatue.page', name: 'hyugaStatue', component: hyugaStatue },
120		- { path: 'HyugaDetail.page', name: 'HyugaDetail', component: HyugaDetail },
121		- { path: 'hyugaInsert.page', name: 'hyugaInsert', component: HyugaInsert },
122		- { path: 'ChuljangStatue.page', name: 'ChuljangStatue', component: ChuljangStatue },
123		- { path: 'BokmyeongInsert.page', name: 'BokmyeongInsert', component: BokmyeongInsert },
124		- { path: 'ChuljangInsert.page', name: 'ChuljangInsert', component: ChuljangInsert },
125		- { path: 'ChuljangPumuiDetail.page', name: 'ChuljangPumuiDetail', component: ChuljangPumuiDetail },
126		- { path: 'ChuljangBokmyeongDetail.page', name: 'ChuljangBokmyeongDetail', component: ChuljangBokmyeongDetail },
127		- { path: 'ChuljangDetailAll.page', name: 'ChuljangDetailAll', component: ChuljangDetailAll },
128	88
129	89	]
130		- }, //근태관리
131		- { path: '/task-management.page', name: 'task', component: task, redirect: '/task-management.page/projectStatue.page',
	90	+ },
	91	+ {
	92	+ path: 'approvalList.page', // => /approval-management.page/detail/123
	93	+ name: 'approvalList',
	94	+ component: approvalList,
132	95	children: [
133		- { path: 'projectStatue.page', name: 'projectStatue', component: projectStatue },
134		- { path: 'projectDetail.page', name: 'projectDetail', component: projectDetail },
135		- { path: 'meetingInsert.page', name: 'meetingInsert', component: meetingInsert },
136		- { path: 'meetingDetail.page', name: 'meetingDetail', component: meetingDetail },
137		- { path: 'projectInsert.page', name: 'projectInsert', component: projectInsert },
138		- { path: 'projectTuib.page', name: 'projectTuib', component: projectTuib },
139		- { path: 'projectTuibDetail.page', name: 'projectTuibDetail', component: projectTuibDetail },
140	96	]
141		- }, //업무관리
142		- { path: '/financial-management.page', name: 'financial', component: financial, redirect: '/financial-management.page/salaryList.page',
143		- children: [
144		- { path: 'salaryList.page', name: 'salaryList', component: salaryList },
145		- { path: 'employeeSalaryList.page', name: 'employeeSalaryList', component: employeeSalaryList },
146		- { path: 'employeeSalaryDetail.page', name: 'employeeSalaryDetail', component: employeeSalaryDetail },
147		- { path: 'employeeSalaryInsert.page', name: 'employeeSalaryInsert', component: employeeSalaryInsert },
148		- { path: 'ChuljangCostList.page', name: 'ChuljangCostList', component: ChuljangCostList },
149		- { path: 'MeetingCostList.page', name: 'MeetingCostList', component: MeetingCostList },
150		- ]
151		- }, //재무관리
152		- { path: '/asset-management.page', name: 'asset', component: asset, redirect: '/asset-management.page/VhcleList.page',
153		- children: [
154		- { path: 'VhcleList.page', name: 'VhcleList', component: VhcleList },
155		- { path: 'VhcleInfoManagement.page', name: 'VhcleInfoManagement', component: VhcleInfoManagement },
156		- { path: 'CardList.page', name: 'CardList', component: CardList },
157		- { path: 'CardInfoManagement.page', name: 'CardInfoManagement', component: CardInfoManagement },
158		-
159		- ]
160		- }, //자산관리
161		- { path: '/hr-management.page', name: 'hr', component: hr, redirect: '/hr-management.page/hrSearch.page',
162		- children: [
163		- { path: 'hrSearch.page', name: 'hrSearch', component: hrSearch },
164		- { path: 'hrManagement.page', name: 'hrManagement', component: hrManagement },
165		- { path: 'hrDetail.page', name: 'hrDetail', component: hrDetail },
166		- { path: 'hrInsert.page', name: 'hrInsert', component: hrInsert },
167		- { path: 'buseoManagement.page', name: 'buseoManagement', component: buseoManagement },
168		- ]
169		- }, //인사관리
170		- { path: '/system-management.page', name: 'system', component: system, redirect: { name: 'userManagement' },
171		- children:[
172		- { path: 'userManagement.page', name: 'userManagement', component: userManagement },
173		- { path: 'accessControlManagement.page', name: 'accessControlManagement', component: accessControlManagement },
174		- { path: 'commonCodeManagement.page', name: 'commonCodeManagement', component: commonCodeManagement },
175		- { path: 'commonCodeInsert.page', name: 'commonCodeInsert', component: commonCodeInsert },
176		- { path: 'commonCodeDetail.page', name: 'commonCodeDetail', component: commonCodeDetail },
177		-
178		- ]
179		- }, //시스템관리
	97	+ },
	98	+ { path: 'ChuljangPumui.page', name: 'ChuljangPumui', component: ChuljangPumui },
	99	+ { path: 'ChuljangBokmyeong.page', name: 'ChuljangBokmyeong', component: ChuljangBokmyeong },
	100	+ { path: 'Hyuga.page', name: 'Hyuga', component: Hyuga },
	101	+ ]
	102	+ }, //결재관리
	103	+ {
	104	+ path: '/attendance-management.page', name: 'attendance', component: attendance, redirect: '/attendance-management.page/myAttendance.page',
	105	+ children: [
	106	+ { path: 'myAttendance.page', name: 'myAttendance', component: myAttendance },
	107	+ { path: 'buseoAttendance.page', name: 'buseoAttendance', component: buseoAttendance },
	108	+ { path: 'AttendanceDetail.page', name: 'AttendanceDetail', component: AttendanceDetail },
	109	+ { path: 'hyugaStatue.page', name: 'hyugaStatue', component: hyugaStatue },
	110	+ { path: 'HyugaDetail.page', name: 'HyugaDetail', component: HyugaDetail },
	111	+ { path: 'hyugaInsert.page', name: 'hyugaInsert', component: HyugaInsert },
	112	+ { path: 'ChuljangStatue.page', name: 'ChuljangStatue', component: ChuljangStatue },
	113	+ { path: 'BokmyeongInsert.page', name: 'BokmyeongInsert', component: BokmyeongInsert },
	114	+ { path: 'ChuljangInsert.page', name: 'ChuljangInsert', component: ChuljangInsert },
	115	+ { path: 'ChuljangBokmyeongDetail.page', name: 'ChuljangBokmyeongDetail', component: ChuljangBokmyeongDetail },
	116	+ { path: 'ChuljangDetailAll.page', name: 'ChuljangDetailAll', component: ChuljangDetailAll },
	117	+ ]
	118	+ }, //근태관리
	119	+ {
	120	+ path: '/task-management.page', name: 'task', component: task, redirect: '/task-management.page/projectStatue.page',
	121	+ children: [
	122	+ { path: 'projectStatue.page', name: 'projectStatue', component: projectStatue },
	123	+ { path: 'projectDetail.page', name: 'projectDetail', component: projectDetail },
	124	+ { path: 'meetingInsert.page', name: 'meetingInsert', component: meetingInsert },
	125	+ { path: 'meetingDetail.page', name: 'meetingDetail', component: meetingDetail },
	126	+ { path: 'projectInsert.page', name: 'projectInsert', component: projectInsert },
	127	+ { path: 'projectTuib.page', name: 'projectTuib', component: projectTuib },
	128	+ { path: 'projectTuibDetail.page', name: 'projectTuibDetail', component: projectTuibDetail },
	129	+ ]
	130	+ }, //업무관리
	131	+ {
	132	+ path: '/financial-management.page', name: 'financial', component: financial, redirect: '/financial-management.page/salaryList.page',
	133	+ children: [
	134	+ { path: 'salaryList.page', name: 'salaryList', component: salaryList },
	135	+ { path: 'employeeSalaryList.page', name: 'employeeSalaryList', component: employeeSalaryList },
	136	+ { path: 'employeeSalaryDetail.page', name: 'employeeSalaryDetail', component: employeeSalaryDetail },
	137	+ { path: 'employeeSalaryInsert.page', name: 'employeeSalaryInsert', component: employeeSalaryInsert },
	138	+ { path: 'ChuljangCostList.page', name: 'ChuljangCostList', component: ChuljangCostList },
	139	+ { path: 'MeetingCostList.page', name: 'MeetingCostList', component: MeetingCostList },
	140	+ ]
	141	+ }, //재무관리
	142	+ {
	143	+ path: '/asset-management.page', name: 'asset', component: asset, redirect: '/asset-management.page/VhcleList.page',
	144	+ children: [
	145	+ { path: 'VhcleList.page', name: 'VhcleList', component: VhcleList },
	146	+ { path: 'VhcleInfoManagement.page', name: 'VhcleInfoManagement', component: VhcleInfoManagement },
	147	+ { path: 'CardList.page', name: 'CardList', component: CardList },
	148	+ { path: 'CardInfoManagement.page', name: 'CardInfoManagement', component: CardInfoManagement },
	149	+
	150	+ ]
	151	+ }, //자산관리
	152	+ {
	153	+ path: '/hr-management.page', name: 'hr', component: hr, redirect: '/hr-management.page/hrSearch.page',
	154	+ children: [
	155	+ { path: 'hrSearch.page', name: 'hrSearch', component: hrSearch },
	156	+ { path: 'hrManagement.page', name: 'hrManagement', component: hrManagement },
	157	+ { path: 'hrDetail.page', name: 'hrDetail', component: hrDetail },
	158	+ { path: 'hrInsert.page', name: 'hrInsert', component: hrInsert },
	159	+ { path: 'buseoManagement.page', name: 'buseoManagement', component: buseoManagement },
	160	+ ]
	161	+ }, //인사관리
	162	+ {
	163	+ path: '/system-management.page', name: 'system', component: system, redirect: { name: 'userManagement' },
	164	+ children: [
	165	+ { path: 'userManagement.page', name: 'userManagement', component: userManagement },
	166	+ { path: 'accessControlManagement.page', name: 'accessControlManagement', component: accessControlManagement },
	167	+ { path: 'commonCodeManagement.page', name: 'commonCodeManagement', component: commonCodeManagement },
	168	+ { path: 'commonCodeInsert.page', name: 'commonCodeInsert', component: commonCodeInsert },
	169	+ { path: 'commonCodeDetail.page', name: 'commonCodeDetail', component: commonCodeDetail },
	170	+ ]
	171	+ }, //시스템관리
180	172	];
181	173
182		-
183	174	const AppRouter = createRouter({
184		- history: createWebHistory(),
185		- routes,
	175	+ history: createWebHistory(),
	176	+ routes,
186	177	});
187	178
188	179	// Add navigation guard
189	180	AppRouter.beforeEach((to, from, next) => {
190		- // Check login status
191		- const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
192		-
193		- // If not logged in and trying to access any page other than login, redirect to login page
194		- if (!isLoggedIn && to.path !== '/login.page') {
195		- next('/login.page');
196		- }
197		- // If logged in and trying to access login page, redirect to main page
198		- else if (isLoggedIn && to.path === '/login.page') {
199		- next('/');
200		- }
201		- else {
202		- next(); // Proceed to requested route
203		- }
204		- });
205		-
	181	+ // Check login status
	182	+ const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
	183	+
	184	+ // If not logged in and trying to access any page other than login, redirect to login page
	185	+ if (!isLoggedIn && to.path !== '/login.page') {
	186	+ next('/login.page');
	187	+ }
	188	+ // If logged in and trying to access login page, redirect to main page
	189	+ else if (isLoggedIn && to.path === '/login.page') {
	190	+ next('/');
	191	+ }
	192	+ else {
	193	+ next(); // Proceed to requested route
	194	+ }
	195	+});
206	196
207	197	export default AppRouter; (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -1,225 +1,262 @@
1	1	<template>
2		-<div class="card ">
3		- <div class="card-body">
4		- <h2 class="card-title">출장 현황</h2>
5		-
	2	+ <div class="card">
	3	+ <div class="card-body">
	4	+ <h2 class="card-title">출장 현황</h2>
6	5	<div class="form-card" style="margin-bottom: 20px;">
7	6	<h1>출장품의서</h1>
8		- <div class="approval-box tbl-wrap tbl2">
9		- <table class="tbl data">
10		- <tbody>
11		- <tr class="thead">
12		- <td rowspan="2" class="th">승인자</td>
13		- <td>과장</td>
14		- <td>소장</td>
15		- </tr>
16		- <tr>
17		- <td><p class="name">홍길동</p><p class="date">2025/05/09</p></td>
18		- <td><p class="name">홍길동</p><p class="date">2025/05/09</p></td>
19		- </tr>
20		- </tbody>
21		-
22		- </table>
23		- </div>
24		- <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate >
25		- <div class="col-12 ">
26		- <div class="col-12 border-x">
27		- <label for="youremail" class="form-label ">출장구분<p class="require"><img :src="require" alt=""></p></label>
28		- <input v-model="email" type="text" name="username" class="form-control" readonly >
29		- </div>
30		-
31		- <div class="col-12 border-x">
32		- <label for="yourPassword" class="form-label">이름</label>
33		- <input v-model="password" type="password" name="password" class="form-control" readonly placeholder="주식회사 테이큰 소프트">
34		- </div>
35		- </div>
36		- <div class="col-12">
37		- <div class="col-12 border-x">
38		- <label for="youremail" class="form-label">부서</label>
39		- <input v-model="email" type="text" name="username" class="form-control" readonly placeholder="과장">
40		- </div>
41		-
42		- <div class="col-12 border-x">
43		- <label for="yourPassword" class="form-label">직급</label>
44		- <input v-model="password" type="password" name="password" class="form-control" readonly placeholder="팀장">
45		- </div>
46		- </div>
47		- <div class="col-12">
48		- <label for="yourName" class="form-label">출장지</label>
49		- <input v-model="name" type="text" name="name" class="form-control" readonly>
50		- </div>
51		- <div class="col-12">
52		- <label for="yourName" class="form-label">출장목적</label>
53		- <input v-model="name" type="text" name="name" class="form-control " readonly>
54		- </div>
55		- <div class="col-12">
56		- <label for="yourName" class="form-label">동행자</label>
57		- <input v-model="name" type="text" name="name" class="form-control " readonly>
58		- </div>
59		- <div class="col-12 chuljang">
60		- <label for="yourName" class="form-label">품의내용</label>
61		- <input v-model="name" type="text" name="name" class="form-control textarea " readonly>
62		- </div>
63		- <div class="col-12">
64		- <label for="yourName" class="form-label">법인카드</label>
65		- <input v-model="name" type="text" name="name" class="form-control " readonly>
66		- </div>
67		- <div class="col-12">
68		- <label for="yourName" class="form-label">법인차량</label>
69		- <input v-model="name" type="text" name="name" class="form-control " readonly>
	7	+ <SanctnViewList v-if="bsrpCnsul.sanctnList.length > 0" :sanctns="bsrpCnsul.sanctnList" />
	8	+ <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>
	9	+ <div class="col-12">
	10	+ <div class="col-12 border-x">
	11	+ <label class="form-label">출장구분</label>
	12	+ <p>{{ bsrpInfo.bsrpSeNm }}</p>
70	13	</div>
71	14	<div class="col-12 border-x">
72		- <label for="yourName" class="form-label">품의 신청일</label>
73		- <input v-model="name" type="text" name="name" class="form-control " i readonly>
	15	+ <label class="form-label">이름</label>
	16	+ <p>{{ user.userNm }}</p>
74	17	</div>
75		- </form>
	18	+ </div>
	19	+ <div class="col-12">
	20	+ <div class="col-12 border-x">
	21	+ <label class="form-label">부서</label>
	22	+ <p>{{ user.deptNm }}</p>
	23	+ </div>
	24	+ <div class="col-12 border-x">
	25	+ <label class="form-label">직급</label>
	26	+ <p>{{ user.clsfNm }}</p>
	27	+ </div>
	28	+ </div>
	29	+ <div class="col-12">
	30	+ <label class="form-label">출장지</label>
	31	+ <p>{{ bsrpInfo.bsrpPlace }}</p>
	32	+ </div>
	33	+ <div class="col-12">
	34	+ <label class="form-label">출장목적</label>
	35	+ <p>{{ bsrpInfo.bsrpPurps }}</p>
	36	+ </div>
	37	+ <div class="col-12">
	38	+ <label class="form-label">동행자</label>
	39	+ <div v-if="bsrpInfo.bsrpNmprList.length > 0">
	40	+ <span v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx">{{ item.triperNm }}</span>
	41	+ </div>
	42	+ </div>
	43	+ <div class="col-12">
	44	+ <label class="form-label">품의내용</label>
	45	+ <ViewerComponent :content="bsrpCnsul.cn" />
	46	+ </div>
	47	+ <div class="col-12">
	48	+ <label class="form-label">법인카드</label>
	49	+ <div>
	50	+ <p v-for="(item, idx) of cprCardList" :key="idx">
	51	+ <span v-if="idx !== 0">, </span>
	52	+ <span>{{ item.cardNm }}</span>
	53	+ </p>
	54	+ </div>
	55	+ </div>
	56	+ <div class="col-12">
	57	+ <label class="form-label">법인차량</label>
	58	+ <div>
	59	+ <p v-for="(item, idx) of cprVhcleList" :key="idx">
	60	+ <span v-if="idx !== 0">, </span>
	61	+ <span>{{ item.vhcleNm }}</span>
	62	+ </p>
	63	+ </div>
	64	+ </div>
	65	+ <div class="col-12 border-x">
	66	+ <label class="form-label">품의 신청일</label>
	67	+ <p>{{ bsrpCnsul.rgsde }}</p>
	68	+ </div>
	69	+ </form>
76	70	</div>
77		- <div class="form-card">
	71	+ <div v-if="!$isEmpty(bsrpRport.bsrpId)" class="form-card">
78	72	<h1>출장복명서</h1>
79		- <div class="approval-box tbl-wrap tbl2">
80		- <table class="tbl data">
81		- <tbody>
82		- <tr class="thead">
83		- <td rowspan="2" class="th">승인자</td>
84		- <td>과장</td>
85		- <td>소장</td>
86		- </tr>
87		- <tr>
88		- <td><p class="name">홍길동</p><p class="date">2025/05/09</p></td>
89		- <td><p class="name">홍길동</p><p class="date">2025/05/09</p></td>
90		- </tr>
91		- </tbody>
92		-
93		- </table>
94		- </div>
95		- <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>
96		-
97		- <div class="col-12 chuljang">
98		- <label for="yourName" class="form-label">복명내용</label>
99		- <input v-model="name" type="text" name="name" class="form-control textarea " id="yourName" readonly>
100		- </div>
101		- <div class="col-12">
102		- <label for="yourName" class="form-label">여비계산</label>
103		- <input v-model="name" type="text" name="name" class="form-control " id="yourName" readonly>
104		- </div>
105		- <div class="col-12 ">
106		- <label for="yourName" class="form-label">복명 신청일</label>
107		- <input v-model="name" type="text" name="name" class="form-control" id="yourName" readonly placeholder="2025-01-01">
108		- </div>
109		- <div class="col-12 border-x return">
110		- <label for="yourName" class="form-label">반려사유</label>
111		- <input v-model="name" type="text" name="name" class="form-control" readonly placeholder="2025-01-01">
112		- </div>
113		-
114		-
115		- </form>
	73	+ <SanctnViewList v-if="bsrpRport.sanctnList.length > 0" :sanctns="bsrpRport.sanctnList" />
	74	+ <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>
	75	+ <div class="col-12">
	76	+ <label class="form-label">복명내용</label>
	77	+ <ViewerComponent :content="bsrpRport.cn" />
	78	+ </div>
	79	+ <div class="col-12">
	80	+ <label class="form-label">여비계산</label>
	81	+ <p>{{ bsrpInfo.applcntId }}</p>
	82	+ </div>
	83	+ <div class="col-12">
	84	+ <label class="form-label">복명 신청일</label>
	85	+ <p>{{ bsrpRport.rgsde }}</p>
	86	+ </div>
	87	+ <div class="col-12 border-x return">
	88	+ <label class="form-label">반려사유</label>
	89	+ <p>{{ bsrpInfo.applcntId }}</p>
	90	+ </div>
	91	+ </form>
116	92	</div>
117		- <div class="buttons">
118		- <button class="btn btn-red " type="submit">신청취소</button>
119		- <button class="btn secondary" type="submit">재신청</button>
120		- <button class="btn secondary" type="submit"> 수정</button>
121		- <button class="btn tertiary " type="submit">목록</button>
122		- </div>
123		-
	93	+ <div class="buttons">
	94	+ <button v-if="sanctnStatus === 'waiting' && sanctnStatus !== 'approved'" type="button" class="btn btn-red" @click="deleteData">신청취소</button>
	95	+ <button v-if="sanctnStatus === 'waiting'" type="button" class="btn secondary" @click="fnMoveTo('edit', pageId)">수정</button>
	96	+ <button v-if="sanctnStatus === 'rejected'" type="button" class="btn secondary" @click="fnMoveTo('edit', pageId)">재신청</button>
	97	+ <button v-if="sanctnStatus === 'approved'" type="button" class="btn primary" @click="fnMoveTo('plus', pageId)">복명서 작성</button>
	98	+ <button type="button" class="btn tertiary" @click="fnMoveTo('list')">목록</button>
124	99	</div>
125	100	</div>
	101	+ </div>
126	102	</template>
127		-
128	103	<script>
	104	+import SanctnViewList from '../../../component/Sanctn/SanctnViewList.vue';
	105	+import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
	106	+// API
	107	+import { bsrpProc, deleteBsrpProc } from '../../../../resources/api/bsrp';
	108	+
129	109	export default {
	110	+ components: {
	111	+ SanctnViewList, ViewerComponent,
	112	+ },
	113	+
130	114	data() {
131		- const today = new Date().toISOString().split('T')[0];
132	115	return {
133		- isReturned: true,
134		- startDate: today,
135		- startTime: "09:00", // 기본 시작 시간 09:00
136		- endDate: today,
137		- endTime: "18:00", // 기본 종료 시간 18:00
138		- category: "",
139		- dayCount: 1,
140		- reason: "", // 사유
141		- listData: [
142		- {
143		- type: '연차',
144		- approvalType: '결재',
145		- applicant: '홍길동',
146		- period: '2025-05-10 ~ 2025-15-03',
147		- requestDate: '2025-04-25',
148		- status: '대기'
149		- }, {
150		- type: '반차',
151		- approvalType: '전결',
152		- applicant: '홍길동',
153		- period: '2025-05-01 ~ 2025-05-03',
154		- requestDate: '2025-04-25',
155		- status: '승인'
156		- }],
	116	+ pageId: null,
	117	+
	118	+ // 출장 정보
	119	+ bsrpInfo: {
	120	+ bsrpId: null, // 출장 아이디
	121	+ applcntId: null, // 신청자 아이디
	122	+ bsrpSe: null, // 출장구분 (공통코드 : sanctn_mby_bsrp)
	123	+ bsrpPlace: null, // 출장지
	124	+ bsrpPurps: null, // 출장목적
	125	+ bgnde: null, // 시작일
	126	+ beginHour: null, // 시작시
	127	+ beginMnt: null, // 시작분
	128	+ endde: null, // 종료일
	129	+ endHour: null, // 종료시
	130	+ endMnt: null, // 종료분
	131	+ bsrpSeNm: null, // 출장구분 이름
	132	+ bsrpNmprList: [], // 출장 인원
	133	+ },
	134	+ // 품의서
	135	+ bsrpCnsul: {
	136	+ bsrpId: null, // 출장 아이디
	137	+ cn: null, // 내용
	138	+ confmAt: null, // 승인 여부 (W: 대기, A: 승인, R 반려)
	139	+ rgsde: null, // 등록일
	140	+ register: null, // 등록자
	141	+ updde: null, // 수정일
	142	+ updusr: null, // 수정자
	143	+ sanctnList: [],
	144	+ },
	145	+ // 복명서
	146	+ bsrpRport: {
	147	+ bsrpId: null, // 출장 아이디
	148	+ cn: null, // 내용
	149	+ confmAt: null, // 승인 여부 (W: 대기, A: 승인, R 반려)
	150	+ fileId: null, // 파일 아이디
	151	+ rgsde: null, // 등록일
	152	+ register: null, // 등록자
	153	+ updde: null, // 수정일
	154	+ updusr: null, // 수정자
	155	+ sanctnList: [],
	156	+ },
	157	+ // 신청자 정보
	158	+ user: {},
157	159	};
158	160	},
159		- computed: {
160		- // Pinia Store의 상태를 가져옵니다.
161		- loginUser() {
162		- const authStore = useAuthStore();
163		- return authStore.getLoginUser;
164		- },
165		- },
166		- methods: {
167		- // 폼 검증 메서드
168		- validateForm() {
169		- // 필수 입력 필드 체크
170		- if (
171		- this.category &&
172		- this.startDate &&
173		- this.startTime &&
174		- this.endDate &&
175		- this.endTime &&
176		- this.dayCount > 0 &&
177		- this.reason.trim() !== ""
178		- ) {
179		- this.isFormValid = true;
180		- } else {
181		- this.isFormValid = false;
182		- }
183		- },
184		- calculateDayCount() {
185		- const start = new Date(`${this.startDate}T${this.startTime}:00`);
186		- const end = new Date(`${this.endDate}T${this.endTime}:00`);
187		-
188		- let totalHours = (end - start) / (1000 * 60 * 60); // 밀리초를 시간 단위로 변환
189		-
190		- if (this.startDate !== this.endDate) {
191		- // 시작일과 종료일이 다른경우
192		- const startDateObj = new Date(this.startDate);
193		- const endDateObj = new Date(this.endDate);
194		- const daysDifference = (endDateObj - startDateObj) / (1000 * 60 * 60 * 24); // 두 날짜 사이의 차이를 일수로 계산
195		- if (this.startTime !== "09:00" \|\| this.endTime !== "18:00") {
196		- this.dayCount = daysDifference + 0.5; // 시간 조건이 기준에서 벗어날 경우
197		- } else {
198		- this.dayCount = Math.ceil(daysDifference + 1); // 시간 조건이 기준에 맞을 경우
199		- }
200		- } else {
201		- // 시작일과 종료일이 같은 경우
202		- if (this.startTime !== "09:00" \|\| this.endTime !== "18:00") {
203		- this.dayCount = 0.5; // 시작 시간 또는 종료 시간이 기준과 다를 경우 0.5
204		- } else {
205		- this.dayCount = 1; // 기준 시간(09:00~18:00)이 맞으면 1일로 간주
206		- }
207		- }
208	161
209		- this.validateForm(); // dayCount 변경 후 폼 재검증
	162	+ computed: {
	163	+ // 결재 상태 확인
	164	+ sanctnStatus() {
	165	+ const sanctnList = this.bsrpCnsul.sanctnList;
	166	+
	167	+ if (sanctnList.length === 0) return 'none'; // 결재 정보 없음
	168	+
	169	+ // 하나라도 반려가 있으면 '반려'
	170	+ if (sanctnList.some(item => item.sanctnSttus === 'R')) {
	171	+ return 'rejected';
	172	+ }
	173	+
	174	+ // 모든 결재가 승인이면 '승인'
	175	+ if (sanctnList.every(item => item.sanctnSttus === 'A')) {
	176	+ return 'approved';
	177	+ }
	178	+
	179	+ // 그 외에는 '대기'
	180	+ return 'waiting';
	181	+ }
210	182	},
211		- handleSubmit() {
212		- this.validateForm(); // 제출 시 유효성 확인
213		- if (this.isFormValid) {
214		- localStorage.setItem('HyugaFormData', JSON.stringify(this.$data));
215		- alert("승인 요청이 완료되었습니다.");
216		- // 추가 처리 로직 (API 요청 등)
217		- } else {
218		- alert("모든 필드를 올바르게 작성해주세요.");
	183	+
	184	+ async created() {
	185	+ this.pageId = this.$route.query.id;
	186	+ if (this.$isEmpty(this.pageId)) {
	187	+ alert("게시물이 존재하지 않습니다.");
	188	+ this.fnMoveTo('list');
	189	+ }
	190	+ },
	191	+
	192	+ mounted() {
	193	+ this.findDatas(); // 상세 조회
	194	+ },
	195	+
	196	+ methods: {
	197	+ // 상세 조회
	198	+ async findDatas() {
	199	+ try {
	200	+ const response = await bsrpProc(this.pageId);
	201	+ const result = response.data.data;
	202	+
	203	+ this.bsrpInfo = result.bsrpInfo;
	204	+ this.bsrpInfo.bgnde = this.bsrpInfo.bgnde.split(' ')[0];
	205	+ this.bsrpInfo.endde = this.bsrpInfo.endde.split(' ')[0];
	206	+
	207	+ this.cprCardList = result.cprCardList;
	208	+ this.cprVhcleList = result.cprVhcleList;
	209	+ this.user = result.user;
	210	+
	211	+ this.bsrpCnsul = result.bsrpCnsul;
	212	+ this.bsrpRport = result.bsrpRport;
	213	+ } catch (error) {
	214	+ const message = error.response.data.message;
	215	+ alert(message);
219	216	}
220	217	},
221		-
222		-
	218	+
	219	+ // 삭제
	220	+ async deleteData() {
	221	+ const isCheck = confirm("삭제하시겠습니까?");
	222	+ if (!isCheck) {
	223	+ return;
	224	+ }
	225	+
	226	+ try {
	227	+ const response = await deleteBsrpProc(this.pageId);
	228	+
	229	+ this.fnMoveTo('list');
	230	+ } catch (error) {
	231	+ if (error.response) {
	232	+ alert(error.response.data.message);
	233	+ } else {
	234	+ alert("에러가 발생했습니다.");
	235	+ }
	236	+ console.error(error.message);
	237	+ this.fnMoveTo('list');
	238	+ }
	239	+ },
	240	+
	241	+ // 페이지 이동
	242	+ fnMoveTo(type, id) {
	243	+ const routes = {
	244	+ 'list': { name: 'ChuljangStatue' },
	245	+ 'view': { name: 'ChuljangDetailAll', query: { id } },
	246	+ 'edit': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
	247	+ 'plus': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
	248	+ };
	249	+
	250	+ if (routes[type]) {
	251	+ if (!this.$isEmpty(this.pageId) && type === 'list') {
	252	+ this.$router.push({ name: 'ChuljangDetailAll', query: { id: this.pageId } });
	253	+ }
	254	+ this.$router.push(routes[type]);
	255	+ } else {
	256	+ alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
	257	+ this.$router.push(routes['list']);
	258	+ }
	259	+ },
223	260	},
224	261	};
225	262	</script>

...	...	@@ -3,42 +3,23 @@
3	3	<div class="card">
4	4	<div class="card-body">
5	5	<h2 class="card-title">출장 현황</h2>
6		- <!-- 폼그룹 -->
7	6	<div class="sch-form-wrap">
8		- <div class="input-group">
9		- <select name="" id="" class="form-select">
10		- <option :value="currentYear">{{ currentYear }}년</option>
11		- <option value="all">전체</option>
12		- <option
13		- v-for="year in remainingYears"
14		- :key="year"
15		- :value="year"
16		- v-if="year !== currentYear"
17		- >
18		- {{ year }}년
19		- </option>
	7	+ <div class="input-group">
	8	+ <select class="form-select" v-model="request.year" @change="fnChangeCurrentPage(1)">
	9	+ <option value="">연도 전체</option>
	10	+ <option v-for="year in years" :key="year" :value="year">{{ year }}년</option>
20	11	</select>
21		- <select name="" id="" class="form-select">
22		- <option :value="currentMonth">{{ currentMonth }}월</option>
23		- <option value="all">전체</option>
24		- <option
25		- v-for="month in remainingMonths"
26		- :key="month"
27		- :value="month"
28		- v-if="month !== currentMonth"
29		- >
30		- {{ month }}월
31		- </option>
	12	+ <select class="form-select" v-model="request.month" @change="fnChangeCurrentPage(1)">
	13	+ <option value="">월 전체</option>
	14	+ <option v-for="month in months" :key="month" :value="month">{{ month }}월</option>
32	15	</select>
33		- </div>
34		- </div>
35		- <!-- Table -->
	16	+ </div>
	17	+ </div>
36	18	<div class="tbl-wrap">
37	19	<table id="myTable" class="tbl data">
38		- <!-- 동적으로 <th> 생성 -->
39	20	<thead>
40	21	<tr>
41		- <th>출장구분 </th>
	22	+ <th>출장구분</th>
42	23	<th>출장지</th>
43	24	<th>목적</th>
44	25	<th>출장기간</th>
...	...	@@ -47,201 +28,113 @@
47	28	<th>복명서 상태</th>
48	29	</tr>
49	30	</thead>
50		- <!-- 동적으로 <td> 생성 -->
51	31	<tbody>
52		- <tr v-for="(item, index) in listData" :key="index" :class="{ 'expired': isPast(item) }" @click="handleClick(item)">
53		- <td>{{ item.type }}</td>
54		- <td>{{ item.where }}</td>
55		- <td>{{ item.purpose }}</td>
56		- <td >{{ item.period }}</td>
57		-<td
58		- :class="getStatusClass(item.pumuiStatue)"
59		-
60		->
61		- {{ item.pumuiStatue }}
62		-</td>
63		-<td
64		- :class="getBokmyeongClass(item.bokmyeong)"
65		->
66		- {{ item.bokmyeong }}
67		-</td>
68		-
69		-<td :class="getStatusClass(item.status)">
70		- {{ item.status }}
71		-</td>
	32	+ <tr v-for="(item, idx) in lists" :key="idx" :class="{ 'expired': item.hasRport }" @click="fnMoveTo('view', item.bsrpId)">
	33	+ <td>{{ item.bsrpSeNm }}</td>
	34	+ <td>{{ item.bsrpPlace }}</td>
	35	+ <td>{{ item.bsrpPurps }}</td>
	36	+ <td>{{ item.bgnde }}</td>
	37	+ <td>{{ item.bsrpCnsulDTO.confmAtNm }}</td>
	38	+ <td>{{ item.hasRport ? '등록' : '미등록' }}</td>
	39	+ <td>{{ item.hasRport ? item.bsrpRportDTO.confmAt : '-' }}</td>
72	40	</tr>
73	41	</tbody>
74	42	</table>
75		-
76	43	</div>
77		- <div class="pagination">
78		- <ul>
79		- <!-- 왼쪽 화살표 (이전 페이지) -->
80		- <li class="arrow" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">
81		- <
82		- </li>
83		-
84		- <!-- 페이지 번호 -->
85		- <li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }"
86		- @click="changePage(page)">
87		- {{ page }}
88		- </li>
89		-
90		- <!-- 오른쪽 화살표 (다음 페이지) -->
91		- <li class="arrow" :class="{ disabled: currentPage === totalPages }" @click="changePage(currentPage + 1)">
92		- >
93		- </li>
94		- </ul>
95		- </div>
96		-
	44	+ <Pagenation :search="request" @onChange="fnChangeCurrentPage" />
97	45	</div>
98	46	</div>
99	47	</div>
100	48	</template>
101		-
102	49	<script>
103		-import { ref } from 'vue';
104	50	import { SearchOutlined } from '@ant-design/icons-vue';
105		-const currentYear = new Date().getFullYear();
106		-const currentMonth = new Date().getMonth() + 1;
	51	+// API
	52	+import { bsrpsProc } from '../../../../resources/api/bsrp';
	53	+
107	54	export default {
108		- data() {
109		- return {
110		- currentMonth,
111		- selectedMonth: currentMonth,
112		- remainingMonths: Array.from({ length: 12 }, (_, i) => i + 1),
113		- currentYear,
114		- selectedYear: currentYear,
115		- remainingYears: Array.from({ length: 10 }, (_, i) => currentYear - i),
116		- showOptions: false,
117		- currentPage: 1,
118		- totalPages: 3,
119		- photoicon: "/client/resources/img/photo_icon.png",
120		- // 데이터 초기화
121		- years: [2023, 2024, 2025], // 연도 목록
122		- months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
123		- selectedYear: '',
124		- selectedMonth: '',
125		- listData: [
126		- {
127		- type: '연차',
128		- where: '상주시청',
129		- purpose: '유지보수',
130		- period: '2025-05-10 ~ 2025-05-23',
131		- pumuiStatue: '대기',
132		- bokmyeong: '미등록',
133		- status: '-'
134		- },
135		- {
136		- type: '연차',
137		- where: '상주시청',
138		- purpose: '유지보수',
139		- period: '2025-05-10 ~ 2025-05-23',
140		- pumuiStatue: '승인',
141		- bokmyeong: '미등록',
142		- status: '-'
143		- },
144		- {
145		- type: '연차',
146		- where: '상주시청',
147		- purpose: '유지보수',
148		- period: '2025-05-10 ~ 2025-05-23',
149		- pumuiStatue: '승인',
150		- bokmyeong: '등록',
151		- status: '대기'
152		- }, {
153		- type: '연차',
154		- where: '상주시청',
155		- purpose: '유지보수',
156		- period: '2025-05-10 ~ 2025-05-10',
157		- pumuiStatue: '승인',
158		- bokmyeong: '등록',
159		- status: '승인'
160		- },],
161		- filteredData: [],
162		- };
163		- },
164	55	components: {
165	56	SearchOutlined
166	57	},
167		- computed: {
168		- },
169		- methods: {
170		- goToAttendancePage(item) {
171		- this.$router.push({ name: 'AttendanceDetail', query: { id: item.id } });
172		- },
173		- changePage(page) {
174		- if (page < 1 \|\| page > this.totalPages) return;
175		- this.currentPage = page;
176		- this.$emit('page-changed', page); // 필요 시 부모에 알림
177		- },
178		- async onClickSubmit() {
179		- // `useMutation` 훅을 사용하여 mutation 함수 가져오기
180		- const { mutate, onDone, onError } = useMutation(mygql);
181	58
182		- try {
183		- const result = await mutate();
184		- console.log(result);
185		- } catch (error) {
186		- console.error('Mutation error:', error);
	59	+ data() {
	60	+ return {
	61	+ photoicon: "/client/resources/img/photo_icon.png",
	62	+
	63	+ years: [],
	64	+ months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
	65	+
	66	+ cmmnCodes: {},
	67	+ request: {
	68	+ year: '',
	69	+ month: '',
	70	+ },
	71	+ lists: [],
	72	+ };
	73	+ },
	74	+
	75	+ watch: {},
	76	+
	77	+ created() {
	78	+ this.generateYears();
	79	+ },
	80	+
	81	+ mounted() {
	82	+ this.findList(); // 목록 조회
	83	+ },
	84	+
	85	+ methods: {
	86	+ generateYears() {
	87	+ const startYear = 2020;
	88	+ const currentYear = new Date().getFullYear();
	89	+
	90	+ for (let year = currentYear; year >= startYear; year--) {
	91	+ this.years.push(year);
187	92	}
188	93	},
189	94
190		- // 상태에 따른 클래스 반환 메소드
191		- getStatusClass(status) {
192		- return status === 'active' ? 'status-active' : 'status-inactive';
	95	+ // 목록 조회
	96	+ async findList() {
	97	+ try {
	98	+ const response = await bsrpsProc(this.request);
	99	+ const result = response.data.data;
	100	+
	101	+ this.lists = result.lists;
	102	+ this.request = result.search;
	103	+ } catch (error) {
	104	+ const message = error.response.data.message;
	105	+ alert(message);
	106	+ }
193	107	},
194		- getStatusClass(status, pumuiStatue) {
195		- // Check the 'status' and 'pumuiStatue' to return the correct class
196		- if (pumuiStatue === '승인') return 'status-approved';
197		- if (pumuiStatue === '대기') return 'status-pending';
198		- // If no match, fallback to status-based class
199		- if (status === '대기') return 'status-pending';
200		- if (status === '승인') return 'status-approved';
201	108
202		- // Default empty string
203		- return '';
204		-},
205		-getBokmyeongClass(bokmyeong) {
206		- if (bokmyeong === '등록') return 'status-approved';
207		- if (bokmyeong === '미등록') return 'status-pending';
208		- return '';
209		-},
210		-isPast(item) {
211		- return (
212		- item.pumuiStatue === '승인' &&
213		- item.bokmyeong === '등록' &&
214		- item.status === '승인'
215		- );
216		- },
217		- handleClick(item) {
218		- const isCasePumui = (
219		- (item.pumuiStatue === '대기' && item.bokmyeong === '미등록') \|\|
220		- (item.pumuiStatue === '승인' && item.bokmyeong === '미등록')
221		- );
	109	+ // 페이지 이동
	110	+ fnChangeCurrentPage(currentPage) {
	111	+ this.request.currentPage = Number(currentPage);
	112	+ this.$nextTick(() => {
	113	+ this.findList();
	114	+ });
	115	+ },
222	116
223		- if (item.bokmyeong === '등록') {
224		- this.$router.push({ name: 'ChuljangDetailAll' });
225		- } else if (isCasePumui) {
226		- this.$router.push({ name: 'ChuljangPumuiDetail' });
227		- } else {
228		- console.log('이동 조건이 아닙니다.');
229		- }
230		-},
231		- handleBokmyeongClick(item) {
232		- this.$router.push({ name: 'ChuljangBokmyeongDetail' });
233		- },
234		- },
235		- created() {
236		- },
237		- mounted() {
	117	+ fnMoveTo(type, id) {
	118	+ const routes = {
	119	+ 'list': { name: 'ChuljangStatue' },
	120	+ 'view': { name: 'ChuljangDetailAll', query: { id } },
	121	+ 'edit': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
	122	+ };
238	123
239		-
	124	+ if (routes[type]) {
	125	+ if (!this.$isEmpty(this.pageId) && type === 'list') {
	126	+ this.$router.push({ name: 'ChuljangDetailAll', query: { id: this.pageId } });
	127	+ return;
	128	+ }
	129	+ this.$router.push(routes[type]);
	130	+ } else {
	131	+ alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
	132	+ this.$router.push(routes['list']);
	133	+ }
	134	+ },
240	135	},
241		-
242	136	};
243	137	</script>
244		-
245	138	<style scoped>
246	139	tr {
247	140	cursor: pointer;

...	...	@@ -76,7 +76,7 @@
76	76	<div class="buttons">
77	77	<button v-if="detailData.confmAt === 'W' \|\| detailData.confmAt === 'R'" class="btn btn-red" type="button" @click="deleteData">신청취소</button>
78	78	<button v-if="detailData.confmAt === 'W'" class="btn secondary" type="button" @click="fnMoveTo('edit', pageId)">수정</button>
79		- <button v-if="detailData.confmAt === 'R'" class="btn secondary" type="button" @click="reSave">재신청</button>
	79	+ <button v-if="detailData.confmAt === 'R'" class="btn secondary" type="button" @click="fnMoveTo('edit', pageId)">재신청</button>
80	80	<button class="btn tertiary" type="button" @click="fnMoveTo('list')">목록</button>
81	81	</div>
82	82	<ReturnPopup v-if="showPopup" @close="showPopup = false" />
...	...	@@ -223,6 +223,11 @@
223	223
224	224	// 삭제
225	225	async deleteData() {
	226	+ const isCheck = confirm("삭제하시겠습니까?");
	227	+ if (!isCheck) {
	228	+ return;
	229	+ }
	230	+
226	231	try {
227	232	const response = await deleteVcatnProc(this.pageId);
228	233
...	...	@@ -236,11 +241,6 @@
236	241	console.error(error.message);
237	242	this.fnMoveTo('list');
238	243	}
239		- },
240		-
241		- // 재신청
242		- reSave() {
243		- this.$router.push({ name: 'hyugaInsert', query: { id: this.pageId } });
244	244	},
245	245
246	246	// 페이지 이동

...	...	@@ -25,8 +25,8 @@
25	25	</label>
26	26	<div class="d-flex gap-1">
27	27	<input type="date" class="form-control" id="bgnde" v-model="editData.bgnde" @keydown="preventKeyboard" />
28		- <input type="text" class="form-control" placeholder="시" v-model="editData.beginHour" readonly />
29		- <input type="text" class="form-control" placeholder="분" v-model="editData.beginMnt" readonly />
	28	+ <input type="text" class="form-control" placeholder="시" style="width: 100px;" v-model="editData.beginHour" readonly />
	29	+ <input type="text" class="form-control" placeholder="분" style="width: 100px;" v-model="editData.beginMnt" readonly />
30	30	</div>
31	31	</div>
32	32	<div class="col-12">
...	...	@@ -35,8 +35,8 @@
35	35	</label>
36	36	<div class="d-flex gap-1">
37	37	<input type="date" class="form-control" id="endde" v-model="editData.endde" :readonly="dayCnt === 0.5" @keydown="preventKeyboard" />
38		- <input type="text" class="form-control" placeholder="시" v-model="editData.endHour" readonly />
39		- <input type="text" class="form-control" placeholder="분" v-model="editData.endMnt" readonly />
	38	+ <input type="text" class="form-control" placeholder="시" style="width: 100px;" v-model="editData.endHour" readonly />
	39	+ <input type="text" class="form-control" placeholder="분" style="width: 100px;" v-model="editData.endMnt" readonly />
40	40	</div>
41	41	</div>
42	42	<div class="col-12">
...	...	@@ -50,7 +50,7 @@
50	50	<PlusCircleFilled />
51	51	</button>
52	52	</label>
53		- <HrPopup v-if="isOpenModal" :sanctns="editData.sanctnList" @onSelected="fnAddSanctn" @close="isOpenModal = false" />
	53	+ <HrPopup v-if="isOpenModal && isCodesLoaded" :sanctns="editData.sanctnList" :cmmnCodes="cmmnCodes" @onSelected="fnAddSanctn" @close="isOpenModal = false" />
54	54	<div class="approval-container">
55	55	<SanctnList v-model:sanctns="editData.sanctnList" @delSanctn="fnDelSanctn" />
56	56	</div>
...	...	@@ -65,7 +65,7 @@
65	65	<div class="buttons">
66	66	<button type="button" class="btn btn-red" @click="fnRecord">이전 승인자 불러오기</button>
67	67	<button type="button" class="btn primary" @click="fnSave">신청</button>
68		- <button type="reset" class="btn tertiary" @click="fnMoveTo('list')">취소</button>
	68	+ <button type="button" class="btn tertiary" @click="fnMoveTo('list')">취소</button>
69	69	</div>
70	70	</div>
71	71	</div>
...	...	@@ -73,7 +73,7 @@
73	73	<script>
74	74	import { PlusCircleFilled, CloseOutlined } from '@ant-design/icons-vue';
75	75	import HrPopup from '../../../component/Popup/HrPopup.vue';
76		-import SanctnList from '../../../component/Sanctn/SanctnList.vue';
	76	+import SanctnList from '../../../component/Sanctn/SanctnFormList.vue';
77	77	import EditorComponent from '../../../component/editor/EditorComponent.vue';
78	78	// API
79	79	import { findVcatnProc, saveVcatnProc, findLastVcatnProc, updateVcatnProc } from '../../../../resources/api/vcatn';
...	...	@@ -126,6 +126,11 @@
126	126	// 세부 유형 선택박스를 보여줄지 여부
127	127	showSubTypeSelect() {
128	128	return this.dayCnt === 0.5 && this.subTypes.length > 0;
	129	+ },
	130	+
	131	+ // cmmnCodes가 로드되었는지 확인
	132	+ isCodesLoaded() {
	133	+ return this.cmmnCodes && Object.keys(this.cmmnCodes).length > 0;
129	134	}
130	135	},
131	136
...	...	@@ -154,7 +159,7 @@
154	159	},
155	160	'editData.endde'(newVal, oldVal) {
156	161	if (newVal !== oldVal) {
157		- this.validateAndCalculateDays(); // calculateTotalDays 대신 validateAndCalculateDays 호출
	162	+ this.validateAndCalculateDays();
158	163	}
159	164	},
160	165	},
...	...	@@ -171,7 +176,6 @@
171	176
172	177	let sanctns = [];
173	178	for (let sanctn of this.editData.sanctnList) {
174		- console.log("sanctn: ", sanctn);
175	179	let data = {
176	180	confmerId: sanctn.confmerId,
177	181	clsf: sanctn.clsf,
...	...	@@ -184,12 +188,7 @@
184	188	}
185	189	this.editData.sanctnList = sanctns;
186	190
187		- // cmmnCodes가 초기화되었는지 확인 후 호출
188		- if (this.cmmnCodes && this.cmmnCodes.vcatnKndCodeList) {
189		- await this.fnOnchangeVcatnKnd();
190		- } else {
191		- console.warn('cmmnCodes가 아직 초기화되지 않았습니다.');
192		- }
	191	+ await this.fnOnchangeVcatnKnd();
193	192	} catch (error) {
194	193	console.error('데이터 조회 실패:', error);
195	194	const message = error.response?.data?.message \|\| "데이터를 불러오는데 실패했습니다.";
...	...	@@ -200,9 +199,8 @@
200	199
201	200	// 유형 변경
202	201	async fnOnchangeVcatnKnd() {
203		- // 안전성 검사 추가
204		- if (!this.cmmnCodes \|\| !this.cmmnCodes.vcatnKndCodeList \|\| !Array.isArray(this.cmmnCodes.vcatnKndCodeList)) {
205		- console.warn('cmmnCodes.vcatnKndCodeList가 초기화되지 않았거나 배열이 아닙니다.');
	202	+ if (!this.isCodesLoaded \|\| !Array.isArray(this.cmmnCodes.vcatnKndCodeList)) {
	203	+ console.warn('cmmnCodes가 초기화되지 않았습니다.');
206	204	return;
207	205	}
208	206
...	...	@@ -217,7 +215,6 @@
217	215	if (this.dayCnt === 0.5) {
218	216	this.changeBgnde(); // 반차일 경우 종료일을 시작일과 동일하게 설정
219	217	} else {
220		- // 반차가 아닌 경우
221	218	this.editData.vcatnSubKnd = ''; // 세부 유형 선택 초기화
222	219
223	220	// 전체 근무시간으로 설정
...	...	@@ -314,7 +311,6 @@
314	311
315	312	// 날짜 유효성 검사
316	313	if (isNaN(startDate.getTime()) \|\| isNaN(endDate.getTime())) {
317		- console.warn('유효하지 않은 날짜입니다.');
318	314	this.totalDays = 0;
319	315	return;
320	316	}
...	...	@@ -360,7 +356,18 @@
360	356	}
361	357	},
362	358
363		- fnAddSanctn(data) {
	359	+ // 승인자
	360	+ fnAddSanctn(user) {
	361	+ const data = {
	362	+ confmerId: user.userId,
	363	+ clsf: user.clsf,
	364	+ sanctnOrdr: this.editData.nmprList.length + 1,
	365	+ sanctnSe: this.cmmnCodes.sanctnCodeList[0].code,
	366	+
	367	+ clsfNm: this.formatClsf(user.clsf),
	368	+ userNm: user.userNm,
	369	+ };
	370	+
364	371	this.editData.sanctnList.push(data);
365	372	this.isOpenModal = false;
366	373	},
...	...	@@ -372,6 +379,12 @@
372	379	});
373	380	},
374	381
	382	+ // 직급 매칭
	383	+ formatClsf(code) {
	384	+ const clsfCode = this.cmmnCodes?.clsfCodeList?.find(item => item.code === code);
	385	+ return clsfCode?.codeNm \|\| code;
	386	+ },
	387	+
375	388	async fnRecord() {
376	389	try {
377	390	const response = await findLastVcatnProc();

Delete comment