Commit @04bbf364685a30e0ec666f9c473f3b8b02bbf176

류윤주 07-31

250731 류윤주 수정

@04bbf364685a30e0ec666f9c473f3b8b02bbf176

d457ebf

04bbf36

client/views/component/GoogleCalendar.vue

--- client/views/component/GoogleCalendar.vue

+++ client/views/component/GoogleCalendar.vue


           day: '일'
         },
         showNonCurrentDates: false,
-        fixedWeekCount: false
+        fixedWeekCount: false,
+        height: '100%',
       }
     }
   },

d457ebf

04bbf36

client/views/pages/Manager/sanctn/MyApprovalRequestList.vue

--- client/views/pages/Manager/sanctn/MyApprovalRequestList.vue

+++ client/views/pages/Manager/sanctn/MyApprovalRequestList.vue


 <template>
-  <div class="col-lg-12">
     <div class="card">
       <div class="card-body">
-        <h2 class="card-title">결재 요청</h2>
-        <div class="sch-form-wrap">
-          <div class="input-group">
-            <select name="yearPicker" id="yearPicker" class="form-select" v-model="searchParams.year" @change="handlePageChange(1)">
-              <option value="">연도 전체</option>
-              <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
-            </select>
-            <select name="monthPicker" id="monthPicker" class="form-select" v-model="searchParams.month" @change="handlePageChange(1)">
-              <option value="">월 전체</option>
-              <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
-            </select>
-            <select name="sanctnIemPicker" id="sanctnIemPicker" class="form-select" v-model="searchParams.sanctnIem" @change="handlePageChange(1)">
-              <option value="">전체</option>
-              <option v-for="(item, idx) of approvalTypeOptions" :key="idx" :value="item.code">{{ item.codeNm }}</option>
-            </select>
+        <div>
+          <h2 class="card-title">결재 요청</h2>
+          <div class="search-wrap mb20">
+              <select name="yearPicker" id="yearPicker" class="form-select sm" v-model="searchParams.year" @change="handlePageChange(1)">
+                <option value="">연도 전체</option>
+                <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
+              </select>
+              <select name="monthPicker" id="monthPicker" class="form-select sm" v-model="searchParams.month" @change="handlePageChange(1)">
+                <option value="">월 전체</option>
+                <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
+              </select>
+              <select name="sanctnIemPicker" id="sanctnIemPicker" class="form-select sm" v-model="searchParams.sanctnIem" @change="handlePageChange(1)">
+                <option value="">전체</option>
+                <option v-for="(item, idx) of approvalTypeOptions" :key="idx" :value="item.code">{{ item.codeNm }}</option>
+              </select>
           </div>
-        </div>
-        <div class="tbl-wrap">
-          <table class="tbl data">
-            <colgroup>
-              <col style="width: 13.33%;">
-              <col style="width: 13.33%;">
-              <col style="width: 13.33%;">
-              <col style="width: 30%;">
-              <col style="width: 16.66%;">
-              <col style="width: 13.33%;">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>구분</th>
-                <th>결재구분</th>
-                <th>신청자</th>
-                <th>기간</th>
-                <th>신청일</th>
-                <th>상태</th>
-              </tr>
-            </thead>
-            <tbody>
-              <template v-if="approvalRequestList.length > 0">
-                <tr v-for="(item, idx) of approvalRequestList" :key="idx" @click="handleDetailNavigation(item.sanctnMbyId)">
-                  <td>{{ item.sanctnIemNm }}</td>
-                  <td>{{ item.sanctnSeNm }}</td>
-                  <td>{{ item.registerNm }}</td>
-                  <td>{{ $formattedDates(item) }}</td>
-                  <td>{{ item.rgsde }}</td>
-                  <td>{{ item.confmAtNm }}</td>
+          <div class="tbl-wrap">
+            <table class="tbl data common-radius">
+              <colgroup>
+                <col style="width: 13.33%;">
+                <col style="width: 13.33%;">
+                <col style="width: 13.33%;">
+                <col style="width: 30%;">
+                <col style="width: 16.66%;">
+                <col style="width: 13.33%;">
+              </colgroup>
+              <thead>
+                <tr>
+                  <th style="border-radius: 1rem 0 0 0;">구분</th>
+                  <th>결재구분</th>
+                  <th>신청자</th>
+                  <th>기간</th>
+                  <th>신청일</th>
+                  <th style="border-radius: 0 1rem 0 0;">상태</th>
                 </tr>
-              </template>
-              <tr v-else>
-                <td colspan="6">게시물이 존재하지 않습니다.</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <Pagination :search="searchParams" @onChange="handlePageChange" />
-        <div class="buttons">
-          <button type="button" class="btn sm sm primary" @click="isOptionsModalVisible = true">등록</button>
+              </thead>
+              <tbody>
+                <template v-if="approvalRequestList.length > 0">
+                  <tr v-for="(item, idx) of approvalRequestList" :key="idx" @click="handleDetailNavigation(item.sanctnMbyId)">
+                    <td>{{ item.sanctnIemNm }}</td>
+                    <td>{{ item.sanctnSeNm }}</td>
+                    <td>{{ item.registerNm }}</td>
+                    <td>{{ $formattedDates(item) }}</td>
+                    <td>{{ item.rgsde }}</td>
+                    <td>{{ item.confmAtNm }}</td>
+                  </tr>
+                </template>
+                <tr v-else>
+                  <td colspan="6">게시물이 존재하지 않습니다.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+    <div class="d-flex justify-between align-center">
+      <div></div>
+      <Pagination :search="searchParams" @onChange="handlePageChange" />
+      <button class="btn sm primary" @click="isOptionsModalVisible = true">신청하기</button>
+    </div>
   <div v-if="isOptionsModalVisible" class="popup-overlay">
     <div class="popup-content">
       <div class="card">

d457ebf

04bbf36

client/views/pages/Manager/sanctn/PendingApprovalList.vue

--- client/views/pages/Manager/sanctn/PendingApprovalList.vue

+++ client/views/pages/Manager/sanctn/PendingApprovalList.vue


 <template>
-  <div class="col-lg-12">
-    <div class="card">
+
+    <div class="card" style="height: 100%;">
       <div class="card-body">
-        <h2 class="card-title">승인 대기 목록</h2>
-        <div class="sch-form-wrap title-wrap">
-          <h3><img :src="sectionIcon" alt="">승인 대기</h3>
-          <div class="input-group">
-            <select class="form-select" v-model="pendingSearchParams.year" @change="handlePageChange(1, 'pending')">
-              <option value="">연도 전체</option>
-              <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
-            </select>
-            <select class="form-select" v-model="pendingSearchParams.month" @change="handlePageChange(1, 'pending')">
-              <option value="">월 전체</option>
-              <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
-            </select>
-            <div class="sch-input">
-              <input type="text" class="form-control" v-model="pendingSearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('pending')">
-              <button button="button" class="ico-sch" @click="handleSearch('pending')">
-                <SearchOutlined />
-              </button>
+        <div>
+          <h2 class="card-title">승인 대기 목록</h2>
+          <div style="height: 50%;">
+              <div class="d-flex justify-between align-center">
+              <h3 class="sub-title">승인 대기</h3>
+              <div class="search-wrap mb10">
+                  <select class="form-select sm" v-model="pendingSearchParams.year" @change="handlePageChange(1, 'pending')">
+                    <option value="">연도 전체</option>
+                    <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
+                  </select>
+                  <select class="form-select sm" v-model="pendingSearchParams.month" @change="handlePageChange(1, 'pending')">
+                    <option value="">월 전체</option>
+                    <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
+                  </select>
+                  <input type="text" class="form-control sm" v-model="pendingSearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('pending')">
+                  <button button="button" class="ico-sch" @click="handleSearch('pending')">
+                    <SearchOutlined />
+                  </button>
+              </div>
             </div>
+            <div class="tbl-wrap">
+              <table id="myTable" class="tbl data common-radius">
+                <colgroup>
+                  <col style="width: 13.33%;">
+                  <col style="width: 13.33%;">
+                  <col style="width: 13.33%;">
+                  <col style="width: 30%;">
+                  <col style="width: 30%;">
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th  style="border-radius: 1rem 0 0 0;">구분</th>
+                    <th>결재구분</th>
+                    <th>신청자</th>
+                    <th>기간</th>
+                    <th style="border-radius: 0 1rem 0 0;">신청일</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(item, idx) in pendingApprovalList" :key="idx" @click="handleDetailNavigation(item.sanctnMbyId)">
+                    <td>{{ item.sanctnIemNm }}</td>
+                    <td>{{ item.sanctnSeNm }}</td>
+                    <td>{{ item.registerNm }}</td>
+                    <td>{{ $formattedDates(item) }}</td>
+                    <td>{{ item.rgsde }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <Pagenation :search="pendingSearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'pending')" />
+          </div>
+          <div style="height: 50%;">
+            <div class="d-flex justify-between align-center">
+              <h3  class="sub-title">승인 이력</h3>
+              <div class="search-wrap mb10">
+                  <select class="form-select sm" v-model="historySearchParams.year" @change="handlePageChange(1, 'history')">
+                    <option value="">연도 전체</option>
+                    <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
+                  </select>
+                  <select class="form-select sm" v-model="historySearchParams.month" @change="handlePageChange(1, 'history')">
+                    <option value="">월 전체</option>
+                    <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
+                  </select>
+                  <select name="" id="" class="form-select sm">
+                    <option value="all">상태</option>
+                    <option value="">승인</option>
+                    <option value="">반려</option>
+                  </select>
+                    <input type="text" class="form-control sm" v-model="historySearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('history')">
+                    <button button="button" class="ico-sch" @click="handleSearch('history')">
+                      <SearchOutlined />
+                    </button>
+              </div>
+            </div>
+            <div class="tbl-wrap">
+              <table id="myTable" class="tbl data">
+                <colgroup>
+                  <col style="width: 13.33%;">
+                  <col style="width: 13.33%;">
+                  <col style="width: 13.33%;">
+                  <col style="width: 30%;">
+                  <col style="width: 16.66%;">
+                  <col style="width: 13.33%;">
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th  style="border-radius: 1rem 0 0 0;">구분</th>
+                    <th>결재구분</th>
+                    <th>신청자</th>
+                    <th>기간</th>
+                    <th>신청일</th>
+                    <th  style="border-radius: 0 1rem 0 0;">상태</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(item, index) in approvalHistoryList" :key="index" class="expired" @click="handleDetailNavigation(item.sanctnMbyId)">
+                    <td>{{ item.sanctnIemNm }}</td>
+                    <td>{{ item.sanctnSeNm }}</td>
+                    <td>{{ item.registerNm }}</td>
+                    <td>{{ $formattedDates(item) }}</td>
+                    <td>{{ item.rgsde }}</td>
+                    <td>{{ item.confmAtNm }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <Pagenation :search="historySearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'history')" />
           </div>
         </div>
-        <div class="tbl-wrap">
-          <table id="myTable" class="tbl data">
-            <colgroup>
-              <col style="width: 13.33%;">
-              <col style="width: 13.33%;">
-              <col style="width: 13.33%;">
-              <col style="width: 30%;">
-              <col style="width: 30%;">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>구분</th>
-                <th>결재구분</th>
-                <th>신청자</th>
-                <th>기간</th>
-                <th>신청일</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(item, idx) in pendingApprovalList" :key="idx" @click="handleDetailNavigation(item.sanctnMbyId)">
-                <td>{{ item.sanctnIemNm }}</td>
-                <td>{{ item.sanctnSeNm }}</td>
-                <td>{{ item.registerNm }}</td>
-                <td>{{ $formattedDates(item) }}</td>
-                <td>{{ item.rgsde }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <Pagenation :search="pendingSearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'pending')" />
-        <div class="sch-form-wrap title-wrap">
-          <h3><img :src="sectionIcon" alt="">승인 이력</h3>
-          <div class="input-group">
-            <select class="form-select" v-model="historySearchParams.year" @change="handlePageChange(1, 'history')">
-              <option value="">연도 전체</option>
-              <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
-            </select>
-            <select class="form-select" v-model="historySearchParams.month" @change="handlePageChange(1, 'history')">
-              <option value="">월 전체</option>
-              <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
-            </select>
-            <select name="" id="" class="form-select">
-              <option value="all">상태</option>
-              <option value="">승인</option>
-              <option value="">반려</option>
-            </select>
-            <div class="sch-input">
-              <input type="text" class="form-control" v-model="historySearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('history')">
-              <button button="button" class="ico-sch" @click="handleSearch('history')">
-                <SearchOutlined />
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="tbl-wrap">
-          <table id="myTable" class="tbl data">
-            <colgroup>
-              <col style="width: 13.33%;">
-              <col style="width: 13.33%;">
-              <col style="width: 13.33%;">
-              <col style="width: 30%;">
-              <col style="width: 16.66%;">
-              <col style="width: 13.33%;">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>구분</th>
-                <th>결재구분</th>
-                <th>신청자</th>
-                <th>기간</th>
-                <th>신청일</th>
-                <th>상태</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(item, index) in approvalHistoryList" :key="index" class="expired" @click="handleDetailNavigation(item.sanctnMbyId)">
-                <td>{{ item.sanctnIemNm }}</td>
-                <td>{{ item.sanctnSeNm }}</td>
-                <td>{{ item.registerNm }}</td>
-                <td>{{ $formattedDates(item) }}</td>
-                <td>{{ item.rgsde }}</td>
-                <td>{{ item.confmAtNm }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <Pagenation :search="historySearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'history')" />
       </div>
     </div>
-  </div>
 </template>
 <script>
 import { SearchOutlined } from '@ant-design/icons-vue';

d457ebf

04bbf36

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


                 </li>
                 <li>
                     <p>5</p>
-                    <div class="name ">신청</div>
+                    <div class="name ">대기</div>
                 </li>
                 <li>
                     <p>5</p>
-                    <div class="name blue">신청</div>
+                    <div class="name blue">승인</div>
                 </li>
                 <li>
                     <p>5</p>
-                    <div class="name red">신청</div>
+                    <div class="name red">결제</div>
                 </li>
             </ul>
         </div>

             </div>
         </div>
     </div>
-    <div class="content">
-        <div class="top-content">
-            <div class="boxs">
-
-                <div class="title">
-                    <h2>근무체크 <span>출근전</span></h2>
-                    <div class="sub"><img :src="dateicon" alt="">{{ today }}</div>
+    <div class="card" style="height: 100%;">
+        <div class="card-body">
+            <div class="grid-wrap gap30" style="height: 100%; grid-template-columns: minmax(845px, auto) 550px; grid-template-rows: minmax(512px, auto) 243px;">
+                <div style="width: 100%;">
+                    <GoogleCalendar />
                 </div>
-                <div class="blue-box">
-                    <div class="box">
-                        <p class="time">{{ time }}</p>
+                <div class="schedule-zone">
+                    <div class="commute">
+                        <div class="title d-flex align-center justify-between mb10">
+                            <h2>근무체크 <span>출근전</span></h2>
+                            <div class="sub"><img :src="dateicon" alt="">{{ today }}</div>
+                        </div>
+                        <div class="blue-box">
+                            <div class="box mb10">
+                                <p class="time">{{ time }}</p>
+                            </div>
+                            <div class="d-flex justify-between align-center">
+                                <button><img :src="startbtn" alt=""></button>
+                                <i class="fa-bars"></i>
+                                <button><img :src="stopbtn" alt=""></button>
+                            </div>
+                        </div>
                     </div>
-                    <div class="buttons">
-                        <button><img :src="startbtn" alt=""></button>
-                        <i class="fa-bars"></i>
-                        <button><img :src="stopbtn" alt=""></button>
+                    <div class="boxs today-event">
+                        <div class="title">
+                            <h2>오늘 일정 요약</h2>
+                        </div>
+                        <ul>
+                            <li v-for="(event, index) in todayEvents" :key="index">
+                                <div class="grid-wrap gap10">
+                                    <p class="category">{{ event.category }}</p>
+                                    <p class="name">{{ event.name }} {{ event.position }}</p>
+                                    <p class="department">{{ event.department }}</p>
+                                </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
-
-            </div>
-            <div class="boxs" style="width: 100%;">
-                <div class="title">
-                    <h2>프로젝트 현황</h2>
-                    <div class="sub">더보기<img :src="moreicon" alt=""></div>
-                </div>
-                <div class="board tbl-wrap">
-                    <table class="tbl data">
-                        <tbody>
-                            <tr v-for="(item, index) in requestList" :key="index" >
-                                <td :class="getCategoryClass(item.category)">
-                                    <p>{{ item.category }}</p>
-                                </td>
-                                <td>{{ item.name }}</td>
-                                <td>{{ item.startdate }} ~ {{ item.enddate }}</td>
-                                <td class="status" :class="getStatusClass(item.status)">
-                                    <p>{{ item.status }}</p>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                <div class="boxs" style="grid-column: 1 / 3 ;">
+                    <div class="title d-flex justify-between align-center">
+                        <h2>프로젝트 현황</h2>
+                        <div class="sub">더보기<img :src="moreicon" alt=""></div>
+                    </div>
+                    <div class="board tbl-wrap">
+                        <table class="tbl data common-radius">
+                            <colgroup>
+                                <col style="width: 15%;">
+                                <col style="width: 38%;">
+                                <col style="width: 32%;">
+                                <col style="width: 15%;">   
+                            </colgroup>
+                            <tbody>
+                                <tr v-for="(item, index) in requestList" :key="index" >
+                                    <td :class="getCategoryClass(item.category)" >
+                                        <p>{{ item.category }}</p>
+                                    </td>
+                                    <td>{{ item.name }}</td>
+                                    <td>{{ item.startdate }} ~ {{ item.enddate }}</td>
+                                    <td class="status" :class="getStatusClass(item.status)">
+                                        <p>{{ item.status }}</p>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="schedule-zone">
-            <div class="boxs">
-                <div class="title">
-                    <h2>오늘의 일정</h2>
-                    <!-- <div class="sub">더보기<img :src="moreicon" alt=""></div> -->
-                </div>
-                <ul>
-                    <li v-for="(event, index) in todayEvents" :key="index">
-                       <div>
-                           <p class="category">{{ event.category }}</p>
-                            <p class="name">{{ event.name }}</p>
-                            <p class="position">{{ event.position }}</p>
-                            <p class="department">{{ event.department }}</p>
-                       </div>
-                    </li>
-                </ul>
-            </div>
-            <GoogleCalendar />
         </div>
     </div>
 </template>

Add a comment

Open 0
Closed 0

List

...	...	@@ -0,0 +1,56 @@
	1	+<template>
	2	+ <div :class="['modal-back', { in: showModal }]">
	3	+ <div :class="['modal', { in: showModal, shown: showModal }]">
	4	+ <div class="modal-dialog">
	5	+ <div class="modal-content">
	6	+ <div class="modal-header">
	7	+ <div class="flex justify-between align-center">
	8	+ <slot name="header"></slot>
	9	+ </div>
	10	+ </div>
	11	+ <div class="modal-conts">
	12	+ <slot></slot>
	13	+ </div>
	14	+ <div class="modal-btn flex justify-end">
	15	+ <slot name="footer"></slot>
	16	+ </div>
	17	+ </div>
	18	+ </div>
	19	+ </div>
	20	+ </div>
	21	+</template>
	22	+
	23	+<script>
	24	+
	25	+export default {
	26	+ name: 'job-container',
	27	+ props: {
	28	+ showModal: {
	29	+ type: Boolean,
	30	+ default: false
	31	+ },
	32	+ className: {
	33	+ type: String,
	34	+ default: ''
	35	+ }
	36	+ },
	37	+ data() {
	38	+ return {
	39	+
	40	+ }
	41	+ },
	42	+ methods: {
	43	+ },
	44	+ watch: {
	45	+
	46	+ },
	47	+ computed: {
	48	+
	49	+ },
	50	+ components: {
	51	+
	52	+ },
	53	+ mounted() {
	54	+ }
	55	+}
	56	+</script>

...	...	@@ -46,7 +46,8 @@
46	46	day: '일'
47	47	},
48	48	showNonCurrentDates: false,
49		- fixedWeekCount: false
	49	+ fixedWeekCount: false,
	50	+ height: '100%',
50	51	}
51	52	}
52	53	},

...	...	@@ -1,68 +1,67 @@
1	1	<template>
2		- <div class="col-lg-12">
3	2	<div class="card">
4	3	<div class="card-body">
5		- <h2 class="card-title">결재 요청</h2>
6		- <div class="sch-form-wrap">
7		- <div class="input-group">
8		- <select name="yearPicker" id="yearPicker" class="form-select" v-model="searchParams.year" @change="handlePageChange(1)">
9		- <option value="">연도 전체</option>
10		- <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
11		- </select>
12		- <select name="monthPicker" id="monthPicker" class="form-select" v-model="searchParams.month" @change="handlePageChange(1)">
13		- <option value="">월 전체</option>
14		- <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
15		- </select>
16		- <select name="sanctnIemPicker" id="sanctnIemPicker" class="form-select" v-model="searchParams.sanctnIem" @change="handlePageChange(1)">
17		- <option value="">전체</option>
18		- <option v-for="(item, idx) of approvalTypeOptions" :key="idx" :value="item.code">{{ item.codeNm }}</option>
19		- </select>
	4	+ <div>
	5	+ <h2 class="card-title">결재 요청</h2>
	6	+ <div class="search-wrap mb20">
	7	+ <select name="yearPicker" id="yearPicker" class="form-select sm" v-model="searchParams.year" @change="handlePageChange(1)">
	8	+ <option value="">연도 전체</option>
	9	+ <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
	10	+ </select>
	11	+ <select name="monthPicker" id="monthPicker" class="form-select sm" v-model="searchParams.month" @change="handlePageChange(1)">
	12	+ <option value="">월 전체</option>
	13	+ <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
	14	+ </select>
	15	+ <select name="sanctnIemPicker" id="sanctnIemPicker" class="form-select sm" v-model="searchParams.sanctnIem" @change="handlePageChange(1)">
	16	+ <option value="">전체</option>
	17	+ <option v-for="(item, idx) of approvalTypeOptions" :key="idx" :value="item.code">{{ item.codeNm }}</option>
	18	+ </select>
20	19	</div>
21		- </div>
22		- <div class="tbl-wrap">
23		- <table class="tbl data">
24		- <colgroup>
25		- <col style="width: 13.33%;">
26		- <col style="width: 13.33%;">
27		- <col style="width: 13.33%;">
28		- <col style="width: 30%;">
29		- <col style="width: 16.66%;">
30		- <col style="width: 13.33%;">
31		- </colgroup>
32		- <thead>
33		- <tr>
34		- <th>구분</th>
35		- <th>결재구분</th>
36		- <th>신청자</th>
37		- <th>기간</th>
38		- <th>신청일</th>
39		- <th>상태</th>
40		- </tr>
41		- </thead>
42		- <tbody>
43		- <template v-if="approvalRequestList.length > 0">
44		- <tr v-for="(item, idx) of approvalRequestList" :key="idx" @click="handleDetailNavigation(item.sanctnMbyId)">
45		- <td>{{ item.sanctnIemNm }}</td>
46		- <td>{{ item.sanctnSeNm }}</td>
47		- <td>{{ item.registerNm }}</td>
48		- <td>{{ $formattedDates(item) }}</td>
49		- <td>{{ item.rgsde }}</td>
50		- <td>{{ item.confmAtNm }}</td>
	20	+ <div class="tbl-wrap">
	21	+ <table class="tbl data common-radius">
	22	+ <colgroup>
	23	+ <col style="width: 13.33%;">
	24	+ <col style="width: 13.33%;">
	25	+ <col style="width: 13.33%;">
	26	+ <col style="width: 30%;">
	27	+ <col style="width: 16.66%;">
	28	+ <col style="width: 13.33%;">
	29	+ </colgroup>
	30	+ <thead>
	31	+ <tr>
	32	+ <th style="border-radius: 1rem 0 0 0;">구분</th>
	33	+ <th>결재구분</th>
	34	+ <th>신청자</th>
	35	+ <th>기간</th>
	36	+ <th>신청일</th>
	37	+ <th style="border-radius: 0 1rem 0 0;">상태</th>
51	38	</tr>
52		- </template>
53		- <tr v-else>
54		- <td colspan="6">게시물이 존재하지 않습니다.</td>
55		- </tr>
56		- </tbody>
57		- </table>
58		- </div>
59		- <Pagination :search="searchParams" @onChange="handlePageChange" />
60		- <div class="buttons">
61		- <button type="button" class="btn sm sm primary" @click="isOptionsModalVisible = true">등록</button>
	39	+ </thead>
	40	+ <tbody>
	41	+ <template v-if="approvalRequestList.length > 0">
	42	+ <tr v-for="(item, idx) of approvalRequestList" :key="idx" @click="handleDetailNavigation(item.sanctnMbyId)">
	43	+ <td>{{ item.sanctnIemNm }}</td>
	44	+ <td>{{ item.sanctnSeNm }}</td>
	45	+ <td>{{ item.registerNm }}</td>
	46	+ <td>{{ $formattedDates(item) }}</td>
	47	+ <td>{{ item.rgsde }}</td>
	48	+ <td>{{ item.confmAtNm }}</td>
	49	+ </tr>
	50	+ </template>
	51	+ <tr v-else>
	52	+ <td colspan="6">게시물이 존재하지 않습니다.</td>
	53	+ </tr>
	54	+ </tbody>
	55	+ </table>
	56	+ </div>
62	57	</div>
63	58	</div>
64	59	</div>
65		- </div>
	60	+ <div class="d-flex justify-between align-center">
	61	+ <div></div>
	62	+ <Pagination :search="searchParams" @onChange="handlePageChange" />
	63	+ <button class="btn sm primary" @click="isOptionsModalVisible = true">신청하기</button>
	64	+ </div>
66	65	<div v-if="isOptionsModalVisible" class="popup-overlay">
67	66	<div class="popup-content">
68	67	<div class="card">

...	...	@@ -1,117 +1,118 @@
1	1	<template>
2		- <div class="col-lg-12">
3		- <div class="card">
	2	+
	3	+ <div class="card" style="height: 100%;">
4	4	<div class="card-body">
5		- <h2 class="card-title">승인 대기 목록</h2>
6		- <div class="sch-form-wrap title-wrap">
7		- <h3><img :src="sectionIcon" alt="">승인 대기</h3>
8		- <div class="input-group">
9		- <select class="form-select" v-model="pendingSearchParams.year" @change="handlePageChange(1, 'pending')">
10		- <option value="">연도 전체</option>
11		- <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
12		- </select>
13		- <select class="form-select" v-model="pendingSearchParams.month" @change="handlePageChange(1, 'pending')">
14		- <option value="">월 전체</option>
15		- <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
16		- </select>
17		- <div class="sch-input">
18		- <input type="text" class="form-control" v-model="pendingSearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('pending')">
19		- <button button="button" class="ico-sch" @click="handleSearch('pending')">
20		- <SearchOutlined />
21		- </button>
	5	+ <div>
	6	+ <h2 class="card-title">승인 대기 목록</h2>
	7	+ <div style="height: 50%;">
	8	+ <div class="d-flex justify-between align-center">
	9	+ <h3 class="sub-title">승인 대기</h3>
	10	+ <div class="search-wrap mb10">
	11	+ <select class="form-select sm" v-model="pendingSearchParams.year" @change="handlePageChange(1, 'pending')">
	12	+ <option value="">연도 전체</option>
	13	+ <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
	14	+ </select>
	15	+ <select class="form-select sm" v-model="pendingSearchParams.month" @change="handlePageChange(1, 'pending')">
	16	+ <option value="">월 전체</option>
	17	+ <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
	18	+ </select>
	19	+ <input type="text" class="form-control sm" v-model="pendingSearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('pending')">
	20	+ <button button="button" class="ico-sch" @click="handleSearch('pending')">
	21	+ <SearchOutlined />
	22	+ </button>
	23	+ </div>
22	24	</div>
	25	+ <div class="tbl-wrap">
	26	+ <table id="myTable" class="tbl data common-radius">
	27	+ <colgroup>
	28	+ <col style="width: 13.33%;">
	29	+ <col style="width: 13.33%;">
	30	+ <col style="width: 13.33%;">
	31	+ <col style="width: 30%;">
	32	+ <col style="width: 30%;">
	33	+ </colgroup>
	34	+ <thead>
	35	+ <tr>
	36	+ <th style="border-radius: 1rem 0 0 0;">구분</th>
	37	+ <th>결재구분</th>
	38	+ <th>신청자</th>
	39	+ <th>기간</th>
	40	+ <th style="border-radius: 0 1rem 0 0;">신청일</th>
	41	+ </tr>
	42	+ </thead>
	43	+ <tbody>
	44	+ <tr v-for="(item, idx) in pendingApprovalList" :key="idx" @click="handleDetailNavigation(item.sanctnMbyId)">
	45	+ <td>{{ item.sanctnIemNm }}</td>
	46	+ <td>{{ item.sanctnSeNm }}</td>
	47	+ <td>{{ item.registerNm }}</td>
	48	+ <td>{{ $formattedDates(item) }}</td>
	49	+ <td>{{ item.rgsde }}</td>
	50	+ </tr>
	51	+ </tbody>
	52	+ </table>
	53	+ </div>
	54	+ <Pagenation :search="pendingSearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'pending')" />
	55	+ </div>
	56	+ <div style="height: 50%;">
	57	+ <div class="d-flex justify-between align-center">
	58	+ <h3 class="sub-title">승인 이력</h3>
	59	+ <div class="search-wrap mb10">
	60	+ <select class="form-select sm" v-model="historySearchParams.year" @change="handlePageChange(1, 'history')">
	61	+ <option value="">연도 전체</option>
	62	+ <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
	63	+ </select>
	64	+ <select class="form-select sm" v-model="historySearchParams.month" @change="handlePageChange(1, 'history')">
	65	+ <option value="">월 전체</option>
	66	+ <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
	67	+ </select>
	68	+ <select name="" id="" class="form-select sm">
	69	+ <option value="all">상태</option>
	70	+ <option value="">승인</option>
	71	+ <option value="">반려</option>
	72	+ </select>
	73	+ <input type="text" class="form-control sm" v-model="historySearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('history')">
	74	+ <button button="button" class="ico-sch" @click="handleSearch('history')">
	75	+ <SearchOutlined />
	76	+ </button>
	77	+ </div>
	78	+ </div>
	79	+ <div class="tbl-wrap">
	80	+ <table id="myTable" class="tbl data">
	81	+ <colgroup>
	82	+ <col style="width: 13.33%;">
	83	+ <col style="width: 13.33%;">
	84	+ <col style="width: 13.33%;">
	85	+ <col style="width: 30%;">
	86	+ <col style="width: 16.66%;">
	87	+ <col style="width: 13.33%;">
	88	+ </colgroup>
	89	+ <thead>
	90	+ <tr>
	91	+ <th style="border-radius: 1rem 0 0 0;">구분</th>
	92	+ <th>결재구분</th>
	93	+ <th>신청자</th>
	94	+ <th>기간</th>
	95	+ <th>신청일</th>
	96	+ <th style="border-radius: 0 1rem 0 0;">상태</th>
	97	+ </tr>
	98	+ </thead>
	99	+ <tbody>
	100	+ <tr v-for="(item, index) in approvalHistoryList" :key="index" class="expired" @click="handleDetailNavigation(item.sanctnMbyId)">
	101	+ <td>{{ item.sanctnIemNm }}</td>
	102	+ <td>{{ item.sanctnSeNm }}</td>
	103	+ <td>{{ item.registerNm }}</td>
	104	+ <td>{{ $formattedDates(item) }}</td>
	105	+ <td>{{ item.rgsde }}</td>
	106	+ <td>{{ item.confmAtNm }}</td>
	107	+ </tr>
	108	+ </tbody>
	109	+ </table>
	110	+ </div>
	111	+ <Pagenation :search="historySearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'history')" />
23	112	</div>
24	113	</div>
25		- <div class="tbl-wrap">
26		- <table id="myTable" class="tbl data">
27		- <colgroup>
28		- <col style="width: 13.33%;">
29		- <col style="width: 13.33%;">
30		- <col style="width: 13.33%;">
31		- <col style="width: 30%;">
32		- <col style="width: 30%;">
33		- </colgroup>
34		- <thead>
35		- <tr>
36		- <th>구분</th>
37		- <th>결재구분</th>
38		- <th>신청자</th>
39		- <th>기간</th>
40		- <th>신청일</th>
41		- </tr>
42		- </thead>
43		- <tbody>
44		- <tr v-for="(item, idx) in pendingApprovalList" :key="idx" @click="handleDetailNavigation(item.sanctnMbyId)">
45		- <td>{{ item.sanctnIemNm }}</td>
46		- <td>{{ item.sanctnSeNm }}</td>
47		- <td>{{ item.registerNm }}</td>
48		- <td>{{ $formattedDates(item) }}</td>
49		- <td>{{ item.rgsde }}</td>
50		- </tr>
51		- </tbody>
52		- </table>
53		- </div>
54		- <Pagenation :search="pendingSearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'pending')" />
55		- <div class="sch-form-wrap title-wrap">
56		- <h3><img :src="sectionIcon" alt="">승인 이력</h3>
57		- <div class="input-group">
58		- <select class="form-select" v-model="historySearchParams.year" @change="handlePageChange(1, 'history')">
59		- <option value="">연도 전체</option>
60		- <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
61		- </select>
62		- <select class="form-select" v-model="historySearchParams.month" @change="handlePageChange(1, 'history')">
63		- <option value="">월 전체</option>
64		- <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
65		- </select>
66		- <select name="" id="" class="form-select">
67		- <option value="all">상태</option>
68		- <option value="">승인</option>
69		- <option value="">반려</option>
70		- </select>
71		- <div class="sch-input">
72		- <input type="text" class="form-control" v-model="historySearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('history')">
73		- <button button="button" class="ico-sch" @click="handleSearch('history')">
74		- <SearchOutlined />
75		- </button>
76		- </div>
77		- </div>
78		- </div>
79		- <div class="tbl-wrap">
80		- <table id="myTable" class="tbl data">
81		- <colgroup>
82		- <col style="width: 13.33%;">
83		- <col style="width: 13.33%;">
84		- <col style="width: 13.33%;">
85		- <col style="width: 30%;">
86		- <col style="width: 16.66%;">
87		- <col style="width: 13.33%;">
88		- </colgroup>
89		- <thead>
90		- <tr>
91		- <th>구분</th>
92		- <th>결재구분</th>
93		- <th>신청자</th>
94		- <th>기간</th>
95		- <th>신청일</th>
96		- <th>상태</th>
97		- </tr>
98		- </thead>
99		- <tbody>
100		- <tr v-for="(item, index) in approvalHistoryList" :key="index" class="expired" @click="handleDetailNavigation(item.sanctnMbyId)">
101		- <td>{{ item.sanctnIemNm }}</td>
102		- <td>{{ item.sanctnSeNm }}</td>
103		- <td>{{ item.registerNm }}</td>
104		- <td>{{ $formattedDates(item) }}</td>
105		- <td>{{ item.rgsde }}</td>
106		- <td>{{ item.confmAtNm }}</td>
107		- </tr>
108		- </tbody>
109		- </table>
110		- </div>
111		- <Pagenation :search="historySearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'history')" />
112	114	</div>
113	115	</div>
114		- </div>
115	116	</template>
116	117	<script>
117	118	import { SearchOutlined } from '@ant-design/icons-vue';

...	...	@@ -20,15 +20,15 @@
20	20	</li>
21	21	<li>
22	22	<p>5</p>
23		- <div class="name ">신청</div>
	23	+ <div class="name ">대기</div>
24	24	</li>
25	25	<li>
26	26	<p>5</p>
27		- <div class="name blue">신청</div>
	27	+ <div class="name blue">승인</div>
28	28	</li>
29	29	<li>
30	30	<p>5</p>
31		- <div class="name red">신청</div>
	31	+ <div class="name red">결제</div>
32	32	</li>
33	33	</ul>
34	34	</div>
...	...	@@ -64,67 +64,73 @@
64	64	</div>
65	65	</div>
66	66	</div>
67		- <div class="content">
68		- <div class="top-content">
69		- <div class="boxs">
70		-
71		- <div class="title">
72		- <h2>근무체크 <span>출근전</span></h2>
73		- <div class="sub"><img :src="dateicon" alt="">{{ today }}</div>
	67	+ <div class="card" style="height: 100%;">
	68	+ <div class="card-body">
	69	+ <div class="grid-wrap gap30" style="height: 100%; grid-template-columns: minmax(845px, auto) 550px; grid-template-rows: minmax(512px, auto) 243px;">
	70	+ <div style="width: 100%;">
	71	+ <GoogleCalendar />
74	72	</div>
75		- <div class="blue-box">
76		- <div class="box">
77		- <p class="time">{{ time }}</p>
	73	+ <div class="schedule-zone">
	74	+ <div class="commute">
	75	+ <div class="title d-flex align-center justify-between mb10">
	76	+ <h2>근무체크 <span>출근전</span></h2>
	77	+ <div class="sub"><img :src="dateicon" alt="">{{ today }}</div>
	78	+ </div>
	79	+ <div class="blue-box">
	80	+ <div class="box mb10">
	81	+ <p class="time">{{ time }}</p>
	82	+ </div>
	83	+ <div class="d-flex justify-between align-center">
	84	+ <button><img :src="startbtn" alt=""></button>
	85	+ <i class="fa-bars"></i>
	86	+ <button><img :src="stopbtn" alt=""></button>
	87	+ </div>
	88	+ </div>
78	89	</div>
79		- <div class="buttons">
80		- <button><img :src="startbtn" alt=""></button>
81		- <i class="fa-bars"></i>
82		- <button><img :src="stopbtn" alt=""></button>
	90	+ <div class="boxs today-event">
	91	+ <div class="title">
	92	+ <h2>오늘 일정 요약</h2>
	93	+ </div>
	94	+ <ul>
	95	+ <li v-for="(event, index) in todayEvents" :key="index">
	96	+ <div class="grid-wrap gap10">
	97	+ <p class="category">{{ event.category }}</p>
	98	+ <p class="name">{{ event.name }} {{ event.position }}</p>
	99	+ <p class="department">{{ event.department }}</p>
	100	+ </div>
	101	+ </li>
	102	+ </ul>
83	103	</div>
84	104	</div>
85		-
86		- </div>
87		- <div class="boxs" style="width: 100%;">
88		- <div class="title">
89		- <h2>프로젝트 현황</h2>
90		- <div class="sub">더보기<img :src="moreicon" alt=""></div>
91		- </div>
92		- <div class="board tbl-wrap">
93		- <table class="tbl data">
94		- <tbody>
95		- <tr v-for="(item, index) in requestList" :key="index" >
96		- <td :class="getCategoryClass(item.category)">
97		- <p>{{ item.category }}</p>
98		- </td>
99		- <td>{{ item.name }}</td>
100		- <td>{{ item.startdate }} ~ {{ item.enddate }}</td>
101		- <td class="status" :class="getStatusClass(item.status)">
102		- <p>{{ item.status }}</p>
103		- </td>
104		- </tr>
105		- </tbody>
106		- </table>
	105	+ <div class="boxs" style="grid-column: 1 / 3 ;">
	106	+ <div class="title d-flex justify-between align-center">
	107	+ <h2>프로젝트 현황</h2>
	108	+ <div class="sub">더보기<img :src="moreicon" alt=""></div>
	109	+ </div>
	110	+ <div class="board tbl-wrap">
	111	+ <table class="tbl data common-radius">
	112	+ <colgroup>
	113	+ <col style="width: 15%;">
	114	+ <col style="width: 38%;">
	115	+ <col style="width: 32%;">
	116	+ <col style="width: 15%;">
	117	+ </colgroup>
	118	+ <tbody>
	119	+ <tr v-for="(item, index) in requestList" :key="index" >
	120	+ <td :class="getCategoryClass(item.category)" >
	121	+ <p>{{ item.category }}</p>
	122	+ </td>
	123	+ <td>{{ item.name }}</td>
	124	+ <td>{{ item.startdate }} ~ {{ item.enddate }}</td>
	125	+ <td class="status" :class="getStatusClass(item.status)">
	126	+ <p>{{ item.status }}</p>
	127	+ </td>
	128	+ </tr>
	129	+ </tbody>
	130	+ </table>
	131	+ </div>
107	132	</div>
108	133	</div>
109		- </div>
110		- <div class="schedule-zone">
111		- <div class="boxs">
112		- <div class="title">
113		- <h2>오늘의 일정</h2>
114		- <!-- <div class="sub">더보기<img :src="moreicon" alt=""></div> -->
115		- </div>
116		- <ul>
117		- <li v-for="(event, index) in todayEvents" :key="index">
118		- <div>
119		- <p class="category">{{ event.category }}</p>
120		- <p class="name">{{ event.name }}</p>
121		- <p class="position">{{ event.position }}</p>
122		- <p class="department">{{ event.department }}</p>
123		- </div>
124		- </li>
125		- </ul>
126		- </div>
127		- <GoogleCalendar />
128	134	</div>
129	135	</div>
130	136	</template>

Delete comment