+}

+

+.search-zone{

+    padding: 2rem;

+    border: 1px solid #213F9A;

+    border-radius: 1rem;

+}

+

+.left-icon{

+    height: 5rem;

+    padding-left: 6rem;

+    background-image: url(#{$url}/img.png);

+    background-position: left center;

+    background-repeat: no-repeat;

+    background-size: 50px 50px;

+  <div class="card">

+      <div>

+        <div class="d-flex align-stretch justify-between mb10">

+          <div class="img-area" style="width: 300px; background-color: #EFF1FA;border-radius: 1rem; padding: 3rem;">

+            <div class="img" style="width: 92px;background-color: #ffffff; padding: 1rem; margin: 0 auto;"><img :src="photoicon" ></div>

+        <div class="search-wrap mb10">

+          <div class="input-group d-flex justify-end">

+                <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>

+              </select>

+              <select name="" id="" class="form-select sm">

+                <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>

+            <select name="" id="" class="form-select sm">

+                  <option value="">전체</option>

+                  <option value="">지각</option>

+                  <option value="">조기퇴근</option>

+                  <option value="">결근</option>

+                  <option value="">출장</option>

+                  <option value="">대체휴가</option>

+                  <option value="">휴가</option>

+                  <option value="">공가</option>

+                  <option value="">병가</option>

+          </div>

+        </div>

+        <div class="tbl-wrap mb10">

+          <table class="tbl data">

+            <tbody>

+              <tr>

+                <th rowspan="2">근태 현황</th>

+                <th>지각</th>

+                <th>조기퇴근</th>

+                <th>결근</th>

+                <th>출장</th>

+                <th>주말출근</th>

+              </tr>

+              <tr>

+                <td>{{ late }}</td>

+                <td>{{ earlyLeave }}</td>

+                <td>{{ absence }}</td>

+                <td>{{ businessTrip }}</td>

+                <td>{{ weekendWork }}</td>

+              </tr>

+            </tbody>

+

+          </table>

+        </div>

+        <div class="tbl-wrap mb10">

+          <table class="tbl data">

+            <tbody>

+              <tr>

+                <th rowspan="2">휴가 현황</th>

+                <th>연차</th>

+                <th>대체휴가</th>

+                <th>공가</th>

+                <th>병가</th>

+              </tr>

+              <tr>

+                <td></td>

+                <td></td>

+                <td></td>

+                <td></td>

+              </tr>

+            </tbody>

+          </table>

+        </div>

+        <div class="tbl-wrap">

+          <table id="myTable" class="tbl data">

+            <thead>

+              <tr>

+                <th>연차 </th>

+                <th>내용</th>

+              </tr>

+            </thead>

+            <!-- 동적으로 <td> 생성 -->

+            <tbody>

+              <tr v-for="(item, index) in listData" :key="index">

+                <td>{{ item.type }}</td>

+                <td>{{ item.content }}</td>

+              </tr>

+            </tbody>

+          </table>

+

+  <Pagination />

+import Pagination from '../../../component/Pagination.vue';

+    Pagination

+      <div>

+        <p class="require">* 필수입력</p>

+        <div class="tbl-wrap">

+          <table class="tbl data">

+            <tbody>

+              <tr>

+                <th>출장구분 *</th>

+                <td>

+                  <select class="form-select sm" style="width: 110px;" v-model="bsrpInfo.bsrpSe">

+                    <option v-for="(item, idx) of bsrpCodes" :key="idx" :value="item.code"> {{ item.codeNm }} </option>

+                  </select>

+                </td>

+                <th>일수</th>

+                <td>

+                  <input type="text" class="form-control sm" v-model="totalDays" readonly />

+                </td>

+              </tr>

+              <tr>

+                <th>출장지 *</th>

+                <td>

+                  <input type="text" class="form-control sm" v-model="bsrpInfo.bsrpPlace" />

+                </td>

+                <th>출장목적 *</th>

+                <td>

+                  <input type="text" class="form-control sm" v-model="bsrpInfo.bsrpPurps" />

+                </td>

+              </tr>

+              <tr>

+                <th>출장기간 *</th>

+                <td colspan="3">

+                  <div class="d-flex">

+                    <div class="d-flex gap-1 mb-1">

+                      <input type="date" class="form-control sm" v-model="bsrpInfo.bgnde" />

+                      <input type="text" class="form-control sm" style="width: 100px;" placeholder="시" v-model="bsrpInfo.beginHour" maxlength="2" @input="validateHour('beginHour', $event)" />

+                      <input type="text" class="form-control sm" style="width: 100px;" placeholder="분" v-model="bsrpInfo.beginMnt" maxlength="2" @input="validateMinute('beginMnt', $event)" />

+                    </div>

+                    <div class="d-flex gap-1">

+                      <input type="date" class="form-control sm" v-model="bsrpInfo.endde" />

+                      <input type="text" class="form-control sm" style="width: 100px;" placeholder="시" v-model="bsrpInfo.endHour" maxlength="2" @input="validateHour('endHour', $event)" />

+                      <input type="text" class="form-control sm" style="width: 100px;" placeholder="분" v-model="bsrpInfo.endMnt" maxlength="2" @input="validateMinute('endMnt', $event)" />

+                    </div>

+                </td>

+              </tr>

+              <tr>

+                <th>동행자</th>

+                <td>

+                  <button type="button" title="추가" @click="isOpenNmprModal = true">

+                    <PlusCircleFilled />

+                  </button>

+                  <HrPopup v-if="isOpenNmprModal" :selectedEmployees="bsrpInfo.bsrpNmprList" idField="triperId" :dateInfo="bsrpInfo" @select="handleCompanionAdd" @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="handleCompanionRemove(idx)" @mousedown.stop>

+                          <CloseOutlined />

+                        </button>

+                      </div>

+                    </div>

+                </td>

+                <th>승인자 *</th>

+                <td>

+                  <button type="button" title="추가" @click="isOpenSanctnModal = true">

+                    <PlusCircleFilled />

+                  </button>

+                  <HrPopup v-if="isOpenSanctnModal" :selectedEmployees="bsrpCnsul.sanctnList" idField="confmerId" @select="handleApproverAdd" @close="isOpenSanctnModal = false" />

+                  <div class="approval-container">

+                    <SanctnList v-model:lists="bsrpCnsul.sanctnList" @delSanctn="handleApproverRemove" />

+                  </div>

+                </td>

+              </tr>

+              <tr>

+                <th>품의내용 *</th>

+                <td colspan="3" style="height: calc(100% - 550px);">

+                  <EditorComponent v-model:contents="bsrpCnsul.cn" />

+                </td>

+              </tr>

+              <tr>

+                <th>법인카드</th>

+                <td>

+                  <button type="button" title="추가" @click="isOpenCardModal = true">

+                    <PlusCircleFilled />

+                  </button>

+                  <CorpCardPopup v-if="isOpenCardModal" :bsrpInfo="bsrpInfo" :lists="cards" @close="isOpenCardModal = false" @onSelected="handleCardAdd" />

+                  <div class="approval-container">

+                    <div v-for="(card, idx) in cards" :key="idx" class="d-flex gap-2 addapproval mb-2">

+                      <form class="d-flex align-items-center border-x">

+                        <p>{{ card.cardNm }}</p>

+                        <button type="button" @click="handleCardRemove(idx)" class="delete-button">

+                          <CloseOutlined />

+                        </button>

+                      </form>

+                    </div>

+                  </div>

+                </td>

+                <th>법인차량</th>

+                <td>

+                  <button type="button" title="추가" @click="isOpenVhcleModal = true">

+                    <PlusCircleFilled />

+                  </button>

+                  <CorpCarPopup v-if="isOpenVhcleModal" :bsrpInfo="bsrpInfo" :lists="vhcles" @close="isOpenVhcleModal = false" @onSelected="handleVehicleAdd" />

+                  <div class="approval-container">

+                    <div v-for="(vhcle, idx) in vhcles" :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="handleVehicleRemove(idx)" class="delete-button">

+                </td>

+              </tr>

+            </tbody>

+          </table>

+        </div>

+  <div class="d-flex justify-end align-center gap10">

+    <button type="button" class="btn sm btn-red" @click="handleLoadLastApprovers">이전 승인자 불러오기</button>

+    <button type="button" class="btn sm primary" v-if="$isEmpty(pageId)" @click="handleSave">신청</button>

+    <template v-else>

+      <button type="button" class="btn sm primary" v-if="isReapplyMode" @click="handleReapply">재신청</button>

+      <button type="button" class="btn sm primary" v-else @click="handleUpdate">수정</button>

+      <button type="button" class="btn sm secondary" @click="handleCancel">취소</button>

+    </template>

+  </div>

+

+        <div>

+          <div class="search-wrap mb30">

+            <select class="form-select sm" v-model="searchParams.year" @change="handleSearchChange">

+            <select class="form-select sm" v-model="searchParams.month" @change="handleSearchChange">

+          <div class="tbl-wrap">

+            <table class="tbl data">

+              <thead>

+                <tr>

+                  <th>출장구분</th>

+                  <th>출장지</th>

+                  <th>목적</th>

+                  <th>출장기간</th>

+                  <th>품의서 상태</th>

+                  <th>복명서 등록 여부</th>

+                  <th>복명서 상태</th>

+              </thead>

+              <tbody>

+                <template v-if="hasBusinessTrips">

+                  <tr v-for="(item, idx) in businessTripList" :key="`${item.bsrpId}-${idx}`" @click="handleItemClick(item.bsrpId)">

+                    <td>{{ item.bsrpSeNm }}</td>

+                    <td>{{ item.bsrpPlace }}</td>

+                    <td>{{ item.bsrpPurps }}</td>

+                    <td>{{ $formattedDates(item) }}</td>

+                    <td>{{ item.cnsulConfmAtNm }}</td>

+                    <td>{{ getReportRegistrationStatus(item.hasRport) }}</td>

+                    <td>{{ getReportStatus(item) }}</td>

+                  </tr>

+                </template>

+                <tr v-else>

+                  <td colspan="7">게시물이 존재하지 않습니다.</td>

+                </tr>

+              </tbody>

+            </table>

+          </div>

+    <Pagination :search="searchParams" @onChange="handlePageChange" />

+      <div>

+              <p class="require">* 필수입력</p>

+      </div>

+    </div>

+  </div>

+  <div class="d-flex justify-end align-center gap10">

+        <div>

+          <div class="search-wrap mb30">

+                <div class="datepicker-input gap10">

+                  <input type="date" class="form-control datepicker cal sm" v-model="searchParams.bgnde" style="max-width: 200px;" @change="handleSearchChange" />

+                  <span>~</span>

+                  <input type="date" class="form-control datepicker cal sm" v-model="searchParams.endde" style="max-width: 200px;" @change="handleSearchChange" />

+                </div>

+          </div>

+          <div class="boxs mb20">

+            <div class="color-boxs grid-wrap" style="grid-template-columns: repeat(6,1fr);">

+              <div class="box">

+                <h3>전체</h3>

+                <div>

+                  <span @click="handleFilterChange()">{{ totalDays }}</span>

+                  <small @click="handleExcessReqst(usedLeaveItem.code)">({{ carriedOverDays }})</small>

+                </div>

+              </div>

+              <div class="box" @click="handleFilterChange(usedLeaveItem.code)">

+                <h3>사용</h3>

+                <div>{{ usedLeaveItem.userSpendCnt }}</div>

+              </div>

+              <div class="box">

+                <h3>미사용</h3>

+                <div>{{ remainingDays }}</div>

+              </div>

+              <div class="box" v-for="(item, idx) of otherItems" :key="idx" @click="handleFilterChange(item.code)">

+                <h3>{{ item.codeNm }}</h3>

+                <div>{{ item.userSpendCnt }}</div>

+          <div class="tbl-wrap">

+            <table id="myTable" class="tbl data">

+              <colgroup>

+                <col style="width: 15%;">

+                <col style="width: 40%;">

+                <col style="width: 30%;">

+                <col style="width: 15%;">

+              </colgroup>

+              <thead>

+                <tr>

+                  <th>구분</th>

+                  <th>기간</th>

+                  <th>신청일</th>

+                  <th>상태</th>

+              </thead>

+              <tbody>

+                <template v-if="hasVacations">

+                  <tr v-for="(item, idx) in vacationList" :key="`${item.vcatnId}-${idx}`" @click="handleItemClick(item.vcatnId)">

+                    <td>{{ item.vcatnKndNm }}</td>

+                    <td>{{ $formattedDates(item) }}</td>

+                    <td>{{ item.rgsde }}</td>

+                    <td>{{ item.confmAtNm }}</td>

+                  </tr>

+                </template>

+                <tr v-else>

+                  <td colspan="4">해당 기간 내 등록된 휴가가 없습니다.</td>

+                </tr>

+              </tbody>

+            </table>

+          </div>

+    <Pagination :search="searchParams" @onChange="handlePageChange" />