jichoi / calendar star
하관우 하관우 07-08
2025-07-07 하관우 자산관리
@99936634f97fd9cdf722a34bb80c18f0656080cc
 
9993663
client/resources/api/asset.js (added)
+++ client/resources/api/asset.js
@@ -0,0 +1,41 @@
+import apiClient from "./index";
+
+// 차량 정보 등록
+export const saveAsSetVhcle = insertAsSetVhcleDTO => {
+  return apiClient.post(`/assetVhcle/saveAsSetVhcle.json`, insertAsSetVhcleDTO );
+}
+
+// 차량 정보 조회
+export const findAllAsSetVhcle = searchReqDTO => {
+  return apiClient.get(`/assetVhcle/findAllAsSetVhcle.json`, { params: searchReqDTO });
+}
+
+// 차량 정보 변경
+export const updateAsSetVhcle = (vhcleId, updateAsSetVhcleDTO) => {
+  return apiClient.put(`/assetVhcle/${vhcleId}/updateAsSetVhcle.json`, updateAsSetVhcleDTO);
+}
+
+// 차량 정보 사용 현황 조회
+export const findAllAsSetVhcleHis = searchReqDTO => {
+  return apiClient.get(`/assetVhcle/findAllAsSetVhcleHis.json`, { params: searchReqDTO });
+}
+
+// 카드 정보 등록
+export const saveAsSetCard = insertAsSetCardDTO => {
+  return apiClient.post(`/assetCard/saveAsSetCard.json`, insertAsSetCardDTO );
+}
+
+// 카드 정보 조회
+export const findAllAsSetCard = searchReqHisDTO => {
+  return apiClient.get(`/assetCard/findAllAsSetCard.json`, { params: searchReqHisDTO });
+}
+
+// 카드 정보 변경
+export const updateAsSetCard = (cardId, updateAsSetCardDTO) => {
+  return apiClient.put(`/assetCard/${cardId}/updateAsSetCard.json`, updateAsSetCardDTO);
+}
+
+// 카드 정보 사용 현황 조회
+export const findAllAsSetCardHis = searchReqDTO => {
+  return apiClient.get(`/assetCard/findAllAsSetCardHis.json`, { params: searchReqDTO });
+}(파일 끝에 줄바꿈 문자 없음)
97fb27b
9993663
client/views/pages/AppRouter.js
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
@@ -55,9 +55,9 @@
 
 import MeetingCostList from '../pages/Manager/financial/MeetingCostList.vue';
 
 //자산관리
 
 import asset from '../pages/Manager/asset/asset.vue';
 
-import CarList from '../pages/Manager/asset/CarList.vue';
 
+import VhcleList from '../pages/Manager/asset/VhcleList.vue';
 
 import CardList from '../pages/Manager/asset/CardList.vue';
 
-import CarInfoManagement from '../pages/Manager/asset/CarInfoManagement.vue';
 
+import VhcleInfoManagement from '../pages/Manager/asset/VhcleInfoManagement.vue';
 
 import CardInfoManagement from '../pages/Manager/asset/CardInfoManagement.vue';
 
 //인사관리
 
 import hr from '../pages/Manager/hr/hr.vue';
@@ -149,10 +149,10 @@
 
             { path: 'MeetingCostList.page', name: 'MeetingCostList', component: MeetingCostList },
 
         ]
 
      }, //재무관리
 
-    { path: '/asset-management.page', name: 'asset', component: asset, redirect: '/asset-management.page/CarList.page',
 
+    { path: '/asset-management.page', name: 'asset', component: asset, redirect: '/asset-management.page/VhcleList.page',
 
       children: [
 
-        { path: 'CarList.page', name: 'CarList', component: CarList },
 
-        { path: 'CarInfoManagement.page', name: 'CarInfoManagement', component: CarInfoManagement },
 
+        { 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 },
97fb27b
 
client/views/pages/Manager/asset/CarInfoManagement.vue (deleted)
--- client/views/pages/Manager/asset/CarInfoManagement.vue
@@ -1,275 +0,0 @@
-<template>
-  <div class="card ">
-    <div class="card-body ">
-      <h2 class="card-title">차량정보 관리</h2>
-      <div class="flex align-top">
-        <div class="sch-form-wrap search">
-          <div class="input-group" style="display: flex;">
-            <select name="" id="" class="form-select">
-              <option value="">전체</option>
-              <option value="">차량명</option>
-              <option value="">차량번호</option>
-            </select>
-            <div class="sch-input">
-              <input type="text" class="form-control">
-              <button class="ico-sch">
-                <SearchOutlined />
-              </button>
-            </div>
-          </div>
-          <div class="tbl-wrap table-scroll">
-            <table id="myTable" class="tbl data">
-              <!-- 동적으로 <th> 생성 -->
-              <thead>
-                <tr>
-                  <th>차량목록 </th>
-                </tr>
-              </thead>
-              <!-- 동적으로 <td> 생성 -->
-              <tbody>
-                <tr v-for="(item, index) in listData" :key="index">
-                  <td></td>
-                </tr>
-              </tbody>
-            </table>
-  
-          </div>
-        </div>
-  
-        <div style="width: 100%;">
-          <div class=" sch-form-wrap title-wrap">
-            <h3><img :src="h3icon" alt="">차량 정보</h3>
-            <div class="buttons" style="margin: 0;">
-              <button type="submit" class="btn sm tertiary">신규</button>
-              <button type="reset" class="btn sm secondary">등록</button>
-              <button type="delete" class="btn sm btn-red">삭제</button>
-            </div>
-          </div>
-          <form class="row g-3 pt-3  needs-validation " @submit.prevent="handleSubmit"
-            style="margin-bottom: 3rem;">
-            <div class="col-12">
-          <div class="col-12 border-x">
-            <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"  />
-          </div>
-          <div class="col-12 border-x">
-            <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" />
-          </div>
-  
-       </div>
-       <div class="col-12">
-          <div class="col-12 border-x">
-            <label for="where" class="form-label">연료종류</label>
-            <input type="text" class="form-control" id="where" v-model="where" />
-          </div>
-          <div class="col-12 border-x">
-            <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" />
-          </div>
-  
-       </div>
-       <div class="col-12  ">
-              <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>
-       <div class="col-12  ">
-              <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="selectedname" readonly/>
-              <input type="button" class="form-control " value="검색" @click="showPopup = true" />
-              <HrPopup v-if="showPopup" @close="showPopup = false" @select="addApproval"/>
-            </div>
-            <div class="col-12 chuljang ">
-              <label for="prvonsh" class="form-label">비고</label>
-              <input type="text" class="form-control textarea" id="reason" v-model="reason" />
-            </div>
-            <div class="col-12 border-x input-radio">
-              <label for="prvonsh" class="form-label"> <p>상태
-                <p class="require"><img :src="require" alt=""></p>
-                </p></label>
-                <select class="form-select" >
-                <option value="선택">선택</option>
-                <option value=""></option>
-                <option value=""></option>
-              </select>
-            </div>
-
-
-          </form>
-          <div class=" sch-form-wrap title-wrap">
-            <h3><img :src="h3icon" alt="">예약현황</h3>
-          </div>
-          <div class="tbl-wrap chk-area">
-            <table id="myTable" class="tbl data">
-
-              <thead>
-                <tr>
-                  <th>차종</th>
-                  <th>운행자</th>
-                  <th>기간</th>
-                  <th>상태</th>
-                </tr>
-              </thead>
-              <!-- 동적으로 <td> 생성 -->
-              <tbody>
-                <tr v-for="(item, index) in listData" :key="index">
-      <td>{{ item.type }}</td>
-      <td>{{ item.driver }}</td>
-      <td>{{ item.startDate }} ~ {{ item.endDate }}</td>
-      <td :class="getStatusClass(item.status)">
-        {{ item.status }}
-      </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>
-        </div>
-      </div>
-    </div>
-
-  </div>
-
-</template>
-
-<script>
-import GoogleCalendar from "../../../component/GoogleCalendar.vue"
-import { SearchOutlined } from '@ant-design/icons-vue';
-import HrPopup from "../../../component/Popup/HrPopup.vue";
-export default {
-  data() {
-    return {
-      showPopup: false,
-      selectedname: '',
-      approvals: [],
-      require: "/client/resources/img/require.png",
-      h3icon: "/client/resources/img/h3icon.png",
-      photoicon: "/client/resources/img/photo_icon.png",
-      img1: "/client/resources/img/img.png",
-      icon1: "/client/resources/img/icon.png",
-      dateicon: "/client/resources/img/date.png",
-      startbtn: "/client/resources/img/start.png",
-      stopbtn: "/client/resources/img/stop.png",
-      moreicon: "/client/resources/img/more.png",
-      today: new Date().toLocaleDateString('ko-KR', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        weekday: 'short',
-      }),
-      time: this.getCurrentTime(),
-      listData: [
-        {
-          type: 'SUV',
-          driver: '김철수',
-          startDate: '2025-05-01',
-          endDate: '2025-05-03',
-          status: '예약', // 사용중
-        },
-        {
-          type: '세단',
-          driver: '이영희',
-          startDate: '2025-05-05',
-          endDate: '2025-05-06',
-          status: '예약', // 예약됨
-        },
-        {
-          type: '트럭',
-          driver: '박민호',
-          startDate: '2025-04-25',
-          endDate: '2025-04-28',
-          status: '반납', // 반납됨
-        },
-      ],
-    }
-  },
-  components: {
-    SearchOutlined, HrPopup
-  },
-  methods: {
-    addApproval(selectedUser) {
-      this.approvals.push({
-        name: selectedUser.name
-      });
-
-      this.selectedname = selectedUser.name; // 입력창에 표시
-      this.showPopup = false;
-    },
-    formatBudget(amount) {
-      return new Intl.NumberFormat().format(amount) + ' 원';
-    },
-    isPastPeriod(period) {
-      // 예: '2025-05-01 ~ 2025-05-03' → 종료일 추출
-      const endDateStr = period.split('~')[1]?.trim();
-      if (!endDateStr) return false;
-
-      const endDate = new Date(endDateStr);
-      const today = new Date();
-
-      // 현재 날짜보다 과거면 true
-      return endDate < today;
-    },
-    getStatusClass(status) {
-      return status === 'active' ? 'status-active' : 'status-inactive';
-    },
-    getStatusClass(status) {
-      if (status === '예약') return 'status-pending';
-      if (status === '반납') return 'status-approved';
-
-      // Default empty string
-      return '';
-    },
-    getCurrentTime() {
-      const now = new Date();
-      const hours = String(now.getHours()).padStart(2, '0');
-      const minutes = String(now.getMinutes()).padStart(2, '0');
-      const seconds = String(now.getSeconds()).padStart(2, '0');
-      return `${hours}:${minutes}:${seconds}`;
-    },
-    getCategoryClass(category) {
-      switch (category) {
-        case '용역': return 'category-service';
-        case '내부': return 'category-internal';
-        case '국가과제': return 'category-government';
-        default: return '';
-      }
-    },
-  },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  mounted() {
-    console.log('main mounted');
-    setInterval(() => {
-      this.time = this.getCurrentTime();
-    }, 1000);
-  }
-}
-</script>
-<style scoped>
-tr {
-  cursor: pointer;
-}
-</style>(파일 끝에 줄바꿈 문자 없음)
97fb27b
 
client/views/pages/Manager/asset/CarList.vue (deleted)
--- client/views/pages/Manager/asset/CarList.vue
@@ -1,223 +0,0 @@
-<template>
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h2 class="card-title">사용현황</h2>
-        <div class="sch-form-wrap title-wrap">
-          <h3><img :src="h3icon" alt="">예약현황</h3>
-          <div class="input-group">
-            <select name="" id="" class="form-select">
-              <option value="">전체</option>
-              <option value="">차량명</option>
-              <option value="">차량번호</option>
-              <option value="">운행자</option>
-            </select>
-            <div class="sch-input">
-              <input type="text" class="form-control">
-              <button class="ico-sch"><SearchOutlined /></button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Table  -->
-        <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">
-      <td>{{ item.type }}</td>
-      <td>{{ item.number }}</td>
-      <td>{{ item.name }}</td>
-      <td>{{ item.department }}</td>
-      <td>{{ item.driver }}</td>
-      <td>{{ item.startDate }} ~ {{ item.endDate }}</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>
-        <div class="sch-form-wrap title-wrap">
-          <h3><img :src="h3icon" alt="">사용이력</h3>
-          <div class="input-group">
-            <select name="" id="" class="form-select">
-              <option value="">전체</option>
-              <option value="">차량명</option>
-              <option value="">차량번호</option>
-              <option value="">운행자</option>
-            </select>
-            <div class="sch-input">
-              <input type="text" class="form-control">
-              <button class="ico-sch"><SearchOutlined /></button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Table  -->
-        <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">
-      <td>{{ item.type }}</td>
-      <td>{{ item.number }}</td>
-      <td>{{ item.name }}</td>
-      <td>{{ item.department }}</td>
-      <td>{{ item.driver }}</td>
-      <td>{{ item.startDate }} ~ {{ item.endDate }}</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>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref } from 'vue';
-import { SearchOutlined } from '@ant-design/icons-vue';
-export default {
-  data() {
-    return {
-      currentPage: 1,
-      totalPages: 3,
-      photoicon: "/client/resources/img/photo_icon.png",
-      h3icon: "/client/resources/img/h3icon.png",
-      // 데이터 초기화
-      years: [2023, 2024, 2025], // 연도 목록
-      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
-      selectedYear: '',
-      selectedMonth: '',
-      listData: [
-      {
-          type: 'SUV',
-          number: '12가3456',
-          name: '쏘렌토',
-          department: '총무부',
-          driver: '김철수',
-          startDate: '2025-05-01',
-          endDate: '2025-05-10',
-        },
-        {
-          type: '세단',
-          number: '34나7890',
-          name: '그랜저',
-          department: '영업부',
-          driver: '이영희',
-          startDate: '2025-05-03',
-          endDate: '2025-05-04',
-        },],
-      filteredData: [],
-    };
-  },
-  computed: {
-  },
-  components:{
-    SearchOutlined
-  },
-  methods: {
-    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);
-      }
-    },
-    registerLeave() {
-      console.log("등록 버튼 클릭됨");
-
-      // Vue의 반응성 문제를 피하기 위해, 새로운 객체를 추가합니다.
-      this.DeptData = [
-        ...this.DeptData,
-        { member: '', deptNM: '', acceptTerms: false }
-      ];
-
-      console.log(this.DeptData); // 배열 상태 출력
-    },
-    getStatusClass(status) {
-      if (status === '승인') return 'status-approved';
-      if (status === '대기') return 'status-pending';
-      return '';
-    },
-    
-  },
-  created() {
-  },
-  mounted() {
-
-
-  },
-};
-</script>
-
-<style scoped></style>(파일 끝에 줄바꿈 문자 없음)
97fb27b
9993663
client/views/pages/Manager/asset/CardInfoManagement.vue
--- client/views/pages/Manager/asset/CardInfoManagement.vue
+++ client/views/pages/Manager/asset/CardInfoManagement.vue
@@ -5,12 +5,14 @@
 
       <div class="flex align-top">
 
         <div class="sch-form-wrap search">
 
           <div class="input-group" style="display: flex;">
 
-            <select name="" id="" class="form-select">
 
-              <option value="">전체</option>
 
+            <select v-model="searchReqDTO.searchType" id="searchType" class="form-select">
 
+              <option value="all">전체</option>
 
+              <option value="cm">카드명</option>
 
+              <option value="nm">신청자</option>
 
             </select>
 
             <div class="sch-input">
 
-              <input type="text" class="form-control">
 
-              <button class="ico-sch">
 
+              <input type="text" class="form-control" v-model="searchReqDTO.searchText" @keyup.enter="searchCards">
 
+              <button class="ico-sch" @click="searchCards">
 
                 <SearchOutlined />
 
               </button>
 
             </div>
@@ -25,12 +27,16 @@
 
               </thead>
 
               <!-- 동적으로 <td> 생성 -->
 
               <tbody>
 
-                <tr v-for="(item, index) in listData" :key="index">
 
-                  <td></td>
 
+                <tr v-if="selectedCards.length === 0">
 
+                  <td style="text-align: center;">등록된 카드정보가 없습니다.</td>
 
+                </tr>
 
+                <tr v-for="(item, index) in selectedCards" :key="index" @click="selectCard(item)">
 
+                  <td>
 
+                    {{ item.cardNm }}
 
+                  </td>
 
                 </tr>
 
               </tbody>
 
             </table>
 
-
 
           </div>
 
         </div>
@@ -38,52 +44,49 @@
 
           <div class=" sch-form-wrap title-wrap">
 
             <h3><img :src="h3icon" alt="">카드 정보</h3>
 
             <div class="buttons" style="margin: 0;">
 
-              <button type="submit" class="btn sm tertiary">신규</button>
 
-              <button type="reset" class="btn sm secondary">등록</button>
 
-              <button type="delete" class="btn sm btn-red">삭제</button>
 
+              <button type="submit" class="btn sm tertiary" @click="resetCard">신규</button>
 
+              <button type="reset" class="btn sm secondary" @click="insertByUpdateCard">
 
+                {{ buttonText }}
 
+              </button>
 
+              <button type="delete" class="btn sm btn-red" @click="deleteByUseAtCard">삭제</button>
 
             </div>
 
           </div>
 
           <form class="row g-3 pt-3  needs-validation " @submit.prevent="handleSubmit" style="margin-bottom: 3rem;">
 
 
             <div class="col-12  ">
 
-              <label for="prvonsh" class="form-label">
 
+              <label for="cardNm" class="form-label">
 
                 <p>카드명
 
                 <p class="require"><img :src="require" alt=""></p>
 
                 </p>
 
               </label>
 
-              <input type="text" class="form-control " id="reason" v-model="reason" />
 
+              <input type="text" class="form-control " id="reason" v-model="selectedCard.cardNm" />
 
             </div>
 
             <div class="col-12  ">
 
-              <label for="prvonsh" class="form-label">
 
+              <label for="chargerId" class="form-label">
 
                 <p>담당자
 
                 <p class="require"><img :src="require" alt=""></p>
 
                 </p>
 
               </label>
 
-              <input type="text" class="form-control " id="reason" v-model="selectedname" readonly />
 
+              <input type="text" class="form-control " id="reason" v-model="selectedCard.chargerId" readonly />
 
               <input type="button" class="form-control " value="검색" @click="showPopup = true" />
 
               <!-- 팝업 -->
 
-              <HrPopup v-if="showPopup" @close="showPopup = false"  @select="addApproval"/>
 
+              <HrPopup v-if="showPopup" @close="showPopup = false" @select="addApproval" />
 
             </div>
 
             <div class="col-12 chuljang ">
 
               <label for="prvonsh" class="form-label">비고</label>
 
-              <input type="text" class="form-control textarea" id="reason" v-model="reason" />
 
+              <input type="text" class="form-control textarea" id="reason" v-model="selectedCard.rm" />
 
             </div>
 
             <div class="col-12 border-x input-radio">
 
               <label for="prvonsh" class="form-label">
 
-                <p>사용여부
 
+                <p>상태
 
                 <p class="require"><img :src="require" alt=""></p>
 
                 </p>
 
               </label>
 
-              <div class="chk-area">
 
-                <div class="form-check">
 
-                  <input type="radio" name="rdo_1" id="rdo_1">
 
-                  <label for="rdo_1">사용</label>
 
-                </div>
 
-                <div class="form-check">
 
-                  <input type="radio" name="rdo_1" id="rdo_2" checked>
 
-                  <label for="rdo_2">미사용</label>
 
-                </div>
 
-              </div>
 
+              <select class="form-select" id="sttus" v-model="selectedCard.sttus">
 
+                <option value="N">정상</option>
 
+                <option value="R">재발급</option>
 
+                <option value="D">폐기</option>
 
+              </select>
 
             </div>
@@ -104,10 +107,10 @@
 
               </thead>
 
               <!-- 동적으로 <td> 생성 -->
 
               <tbody>
 
-                <tr v-for="(item, index) in listData" :key="index">
 
-                  <td>{{ item.buseo }}</td>
 
-                  <td>{{ item.user }}</td>
 
-                  <td>{{ item.startDate }} ~ {{ item.endDate }}</td>
 
+                <tr v-for="(item, index) in processedCards" :key="index">
 
+                  <td>{{ item.deptId }}</td>
 
+                  <td>{{ item.applcntId }}</td>
 
+                  <td>{{ item.formattedPeriod }}</td>
 
                   <td :class="getStatusClass(item.status)">
 
                     {{ item.status }}
 
                   </td>
@@ -116,25 +119,7 @@
 
             </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="searchReqHisDTO" @onChange="fnChangeCurrentPage" />
 
         </div>
 
       </div>
 
     </div>
@@ -147,11 +132,13 @@
 
 import GoogleCalendar from "../../../component/GoogleCalendar.vue"
 
 import HrPopup from "../../../component/Popup/HrPopup.vue";
 
 import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
 
+import { saveAsSetCard, findAllAsSetCard, updateAsSetCard, findAllAsSetCardHis } from "../../../../resources/api/asset"; //카드 정보 API
 
+import Pagenation from "../../../component/Pagenation.vue";
 
+
 
 export default {
 
   data() {
 
     return {
 
       showPopup: false,
 
-      selectedname: '',
 
       approvals: [],
 
       require: "/client/resources/img/require.png",
 
       h3icon: "/client/resources/img/h3icon.png",
@@ -162,102 +149,246 @@
 
       startbtn: "/client/resources/img/start.png",
 
       stopbtn: "/client/resources/img/stop.png",
 
       moreicon: "/client/resources/img/more.png",
 
-      today: new Date().toLocaleDateString('ko-KR', {
 
-        year: 'numeric',
 
-        month: '2-digit',
 
-        day: '2-digit',
 
-        weekday: 'short',
 
-      }),
 
-      time: this.getCurrentTime(),
 
-      listData: [
 
-        {
 
-          buseo: '',
 
-          user: '김철수',
 
-          startDate: '2025-05-01',
 
-          endDate: '2025-05-03',
 
-          status: '예약', // 사용중
 
-        },
 
-        {
 
-          buseo: '',
 
-          user: '이영희',
 
-          startDate: '2025-05-05',
 
-          endDate: '2025-05-06',
 
-          status: '예약', // 예약됨
 
-        },
 
-        {
 
-          buseo: '',
 
-          user: '박민호',
 
-          startDate: '2025-04-25',
 
-          endDate: '2025-04-28',
 
-          status: '반납', // 반납됨
 
-        },
 
-      ],
 
       
+      checkCard: false,
 
+      cardId: null,
 
+      selectedCards: [],
 
+      selectedCardsHis: [],
 
+      searchReqDTO: {
 
+        searchType: "all",
 
+        searchText: null,
 
+        useAt: null,
 
+        useAll: true,
 
+      },
 
+      searchReqHisDTO: {
 
+        searchType: "all",
 
+        searchText: null,
 
+        useAt: null,
 
+        useAll: false,
 
+        listType:"all",
 
+
 
+        currentPage: null,
 
+        recordSize: 4,
 
+        pageSize: null,
 
+        totalRecordCount: null,
 
+        totalPageCount: null,
 
+        startPage: null,
 
+        endPage: null,
 
+        limitStart: null,
 
+        existPrevPage: null,
 
+        existNextPage: null,
 
+      },
 
+      selectedCard: {
 
+        cardNm: null,
 
+        chargerId: null,
 
+        rm: null,
 
+        sttus: "N",
 
+        useAt: "Y"
 
+      },
 
     }
 
   },
 
   components: {
 
-    SearchOutlined, CloseCircleFilled, HrPopup
 
+    SearchOutlined, CloseCircleFilled, HrPopup, Pagenation
 
   },
 
   methods: {
 
+    // 페이지 이동
 
+    fnChangeCurrentPage(currentPage) {
 
+      this.searchReqHisDTO.currentPage = Number(currentPage);
 
+      console.log(this.searchReqHisDTO);
 
+      this.$nextTick(() => {
 
+        this.searchCardsHis();
 
+      });
 
+    },
 
+    //카드 정보 전체 조회
 
+    async searchCards() {
 
+      try {
 
+        const response = await findAllAsSetCard(this.searchReqDTO);
 
+        if (response.status === 200) {
 
+          this.selectedCards = response.data.data.card; // API 응답에서 카테고리 목록을 가져옴
 
+        }
 
+      } catch (error) {
 
+        console.error("검색 중 오류 발생:", error);
 
+      }
 
+    },
 
+
 
+    //카드 정보 사용 현황 전체 조회
 
+    async searchCardsHis() {
 
+      try {
 
+        const response = await findAllAsSetCardHis(this.searchReqHisDTO);
 
+        if (response.status === 200) {
 
+          this.selectedCardsHis = response.data.data.cardHis; // API 응답에서 카테고리 목록을 가져옴
 
+          this.searchReqHisDTO = response.data.data.search;
 
+        }
 
+      } catch (error) {
 
+        console.error("검색 중 오류 발생:", error);
 
+      }
 
+    },
 
+
 
+    // 카드 정보 등록 수정
 
+    async insertByUpdateCard() {
 
+
 
+      if (!this.validateCheck()) {
 
+        return; // 유효성 검사 실패 시 함수 종료
 
+      }
 
+      if (this.cardId == null && this.cardId == "") {
 
+        try {
 
+          const response = await saveAsSetCard(this.selectedCard);
 
+          if (response.status === 200) { // 성공 여부 체크
 
+            alert("등록되었습니다.");
 
+            window.location.reload();
 
+          }
 
+        } catch (error) {
 
+          // HTTP 오류가 발생한 경우
 
+          const errorMessage = error.response?.data?.message || "등록이 실패하였습니다.";
 
+          alert(errorMessage); // 오류 메시지 표시
 
+          this.searchCards();
 
+        }
 
+      } else {
 
+        try {
 
+          const response = await updateAsSetCard(this.cardId, this.selectedCard);
 
+          if (response.status === 200) {
 
+            alert("수정되었습니다.");
 
+            window.location.reload();
 
+          }
 
+        } catch (error) {// HTTP 오류가 발생한 경우
 
+          const errorMessage = error.response?.data?.message || "수정이 실패하였습니다.";
 
+          alert(errorMessage); // 오류 메시지 표시
 
+          this.searchCards();
 
+        }
 
+      }
 
+    },
 
+
 
+    // 등록 유효성 체크 함수
 
+    validateCheck() {
 
+      // 1. 카드명 (cardNm) 필수 체크
 
+      if (!this.selectedCard.cardNm || this.selectedCard.cardNm.trim() === "") {
 
+        alert("카드명은 필수 입력 항목입니다.");
 
+        return false;
 
+      }
 
+
 
+      // 2. 담당자 (chargerId) 필수 체크
 
+      if (!this.selectedCard.chargerId || this.selectedCard.chargerId.trim() === "") {
 
+        alert("담당자는 필수 입력 항목입니다.");
 
+        return false;
 
+      }
 
+
 
+      return true; // 모든 유효성 검사 통과
 
+    },
 
+
 
+    // 삭제 버튼을 눌렀을 시 삭제
 
+    async deleteByUseAtCard() {
 
+      try {
 
+        this.selectedCard.useAt = "N";
 
+        const response = await updateAsSetCard(this.cardId, this.selectedCard);
 
+        if (response.status === 200) {
 
+          alert("삭제되었습니다.");
 
+          window.location.reload();
 
+        }
 
+      } catch (error) {
 
+        alert("삭제가 실패하였습니다.");
 
+      }
 
+    },
 
+
 
+    //선택한 카드의 정보를 오른쪽에 표시
 
+    selectCard(item) {
 
+      this.checkCard = true;
 
+      this.cardId = item.cardId;
 
+      this.selectedCard = {
 
+        cardNm: item.cardNm,
 
+        chargerId: item.chargerId,
 
+        rm: item.rm,
 
+        sttus: item.sttus,
 
+        useAt: item.useAt
 
+      };
 
+    },
 
+
 
+    // 신규 버튼을 눌렀을 시
 
+    resetCard() {
 
+      this.checkCard = false;
 
+      this.selectedCard = {
 
+        cardNm: null,
 
+        chargerId: null,
 
+        rm: null,
 
+        sttus: "N",
 
+        useAt: "Y"
 
+      };
 
+    },
 
+
 
+
 
+
 
     addApproval(selectedUser) {
 
       this.approvals.push({
 
         name: selectedUser.name
 
       });
 
 
-      this.selectedname = selectedUser.name; // 입력창에 표시
 
+      this.selectedCard.chargerId = selectedUser.name; // 입력창에 표시
 
       this.showPopup = false;
 
-    },
 
-    formatBudget(amount) {
 
-      return new Intl.NumberFormat().format(amount) + ' 원';
 
-    },
 
-    isPastPeriod(period) {
 
-      // 예: '2025-05-01 ~ 2025-05-03' → 종료일 추출
 
-      const endDateStr = period.split('~')[1]?.trim();
 
-      if (!endDateStr) return false;
 
-
 
-      const endDate = new Date(endDateStr);
 
-      const today = new Date();
 
-
 
-      // 현재 날짜보다 과거면 true
 
-      return endDate < today;
 
-    },
 
-    getStatusClass(status) {
 
-      return status === 'active' ? 'status-active' : 'status-inactive';
 
     },
 
     getStatusClass(status) {
 
       if (status === '예약') return 'status-pending';
 
+      if (status === '사용 중') return 'status-pending';
 
       if (status === '반납') return 'status-approved';
 
-
 
-      // Default empty string
 
-      return '';
 
-    },
 
-    getCurrentTime() {
 
-      const now = new Date();
 
-      const hours = String(now.getHours()).padStart(2, '0');
 
-      const minutes = String(now.getMinutes()).padStart(2, '0');
 
-      const seconds = String(now.getSeconds()).padStart(2, '0');
 
-      return `${hours}:${minutes}:${seconds}`;
 
-    },
 
-    getCategoryClass(category) {
 
-      switch (category) {
 
-        case '용역': return 'category-service';
 
-        case '내부': return 'category-internal';
 
-        case '국가과제': return 'category-government';
 
-        default: return '';
 
-      }
 
+      return ''; // 기본값
 
     },
 
   },
 
   watch: {
 
 
   },
 
   computed: {
 
+    buttonText() {
 
+      return this.checkCard ? "수정" : "등록";
 
+    },
 
+    // selectedCardsHis 데이터를 가공하여 화면에 표시할 데이터를 만듭니다.
 
+    processedCards() {
 
+      const now = new Date(); // 현재 시간
 
 
+      // 날짜와 시간 문자열을 조합하여 Date 객체를 생성하는 헬퍼 함수
 
+      const createDateTime = (dateStr, hourStr, minStr) => {
 
+        // dateStr이 "YYYY-MM-DD HH:MM:SS.ms" 형태라고 가정하고 "YYYY-MM-DD" 부분만 추출
 
+        const datePart = dateStr.split(' ')[0];
 
+        const year = parseInt(datePart.substring(0, 4), 10);
 
+        const month = parseInt(datePart.substring(5, 7), 10) - 1; // 월은 0부터 시작 (0=1월)
 
+        const day = parseInt(datePart.substring(8, 10), 10);
 
+        const hour = parseInt(hourStr, 10);
 
+        const minute = parseInt(minStr, 10);
 
+        return new Date(year, month, day, hour, minute, 0);
 
+      };
 
+
 
+      // Date 객체를 'YYYY-MM-DD HH:MI' 형식으로 포맷하는 헬퍼 함수
 
+      const formatDateTime = (dateObj) => {
 
+        const year = dateObj.getFullYear();
 
+        const month = String(dateObj.getMonth() + 1).padStart(2, '0');
 
+        const day = String(dateObj.getDate()).padStart(2, '0');
 
+        const hour = String(dateObj.getHours()).padStart(2, '0');
 
+        const minute = String(dateObj.getMinutes()).padStart(2, '0');
 
+        return `${year}-${month}-${day} ${hour}:${minute}`;
 
+      };
 
+
 
+      return this.selectedCardsHis.map(item => {
 
+        const startDateTime = createDateTime(item.bgnde, item.beginHour, item.beginMnt);
 
+        const endDateTime = createDateTime(item.endde, item.endHour, item.endMnt);
 
+
 
+        let status = '';
 
+        if (now >= startDateTime && now <= endDateTime) {
 
+          status = '사용 중'; // 현재 시간이 기간 안에 포함
 
+        } else if (now < startDateTime) {
 
+          status = '예약';    // 현재 시간이 시작일시보다 이전
 
+        } else { // now > endDateTime
 
+          status = '반납';    // 현재 시간이 종료일시보다 이후
 
+        }
 
+
 
+        return {
 
+          ...item, // 원본 아이템의 모든 속성 유지
 
+          formattedPeriod: `${formatDateTime(startDateTime)} ~ ${formatDateTime(endDateTime)}`, // 포맷된 기간 문자열
 
+          status: status // 계산된 상태
 
+        };
 
+      });
 
+    }
 
   },
 
   mounted() {
 
     console.log('main mounted');
 
-    setInterval(() => {
 
-      this.time = this.getCurrentTime();
 
-    }, 1000);
 
+    this.searchCards();
 
+    this.searchCardsHis();
 
   }
 
 }
 
 </script>
97fb27b
9993663
client/views/pages/Manager/asset/CardList.vue
--- client/views/pages/Manager/asset/CardList.vue
+++ client/views/pages/Manager/asset/CardList.vue
@@ -6,14 +6,17 @@
 
         <div class="sch-form-wrap title-wrap">
 
           <h3><img :src="h3icon" alt="">예약현황</h3>
 
           <div class="input-group">
 
-            <select name="" id="" class="form-select">
 
-              <option value="">전체</option>
 
-              <option value="">카드명</option>
 
-              <option value="">신청자</option>
 
+            <select v-model="searchReqHisResDTO.searchType" id="searchType" class="form-select">
 
+              <option value="all">전체</option>
 
+              <option value="cm">카드명</option>
 
+              <option value="nm">신청자</option>
 
             </select>
 
             <div class="sch-input">
 
-              <input type="text" class="form-control">
 
-              <button class="ico-sch"><SearchOutlined /></button>
 
+              <input type="text" class="form-control" v-model="searchReqHisResDTO.searchText"
 
+                @keyup.enter="searchCardsHisRes">
 
+              <button class="ico-sch" @click="searchCardsHisRes">
 
+                <SearchOutlined />
 
+              </button>
 
             </div>
 
           </div>
 
         </div>
@@ -32,46 +35,37 @@
 
             </thead>
 
             <!-- 동적으로 <td> 생성 -->
 
             <tbody>
 
-              <tr v-for="(item, index) in listData" :key="index">
 
-      <td>{{ item.name }}</td>
 
-      <td>{{ item.department }}</td>
 
-      <td>{{ item.user }}</td>
 
-      <td>{{ item.startDate }} ~ {{ item.endDate }}</td>
 
-    </tr>
 
+              <tr v-if="!(cardHisResData && cardHisResData.length)">
 
+                <td colspan="4" style="text-align: center;">등록된 예약현황이 없습니다.</td>
 
+              </tr>
 
+              <tr v-for="(item, index) in cardHisResData" :key="index">
 
+                <td>{{ item.cardNm }}</td>
 
+                <td>{{ item.deptId }}</td>
 
+                <td>{{ item.applcntId }}</td>
 
+                <td>
 
+                  {{ item.bgnde }} {{ item.beginHour.padStart(2, '0') }}:{{ item.beginMnt.padStart(2, '0') }} ~
 
+                  {{ item.endde }} {{ item.endHour.padStart(2, '0') }}:{{ item.endMnt.padStart(2, '0') }}
 
+                </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="searchReqHisResDTO" @onChange="fnChangeCurrentPageRes" />
 
         <div class="sch-form-wrap title-wrap">
 
           <h3><img :src="h3icon" alt="">사용이력</h3>
 
           <div class="input-group">
 
-            <select name="" id="" class="form-select">
 
-              <option value="">전체</option>
 
-              <option value="">카드명</option>
 
-              <option value="">신청자</option>
 
+            <select v-model="searchReqHisRtnDTO.searchType" id="searchType" class="form-select">
 
+              <option value="all">전체</option>
 
+              <option value="cm">카드명</option>
 
+              <option value="nm">신청자</option>
 
             </select>
 
             <div class="sch-input">
 
-              <input type="text" class="form-control">
 
-              <button class="ico-sch"><SearchOutlined /></button>
 
+              <input type="text" class="form-control" v-model="searchReqHisRtnDTO.searchText"
 
+                @keyup.enter="searchCardsHisRtn">
 
+              <button class="ico-sch" @click="searchCardsHisRtn">
 
+                <SearchOutlined />
 
+              </button>
 
             </div>
 
           </div>
 
         </div>
@@ -80,7 +74,7 @@
 
         <div class="tbl-wrap">
 
           <table id="myTable" class="tbl data">
 
             <!-- 동적으로 <th> 생성 -->
 
-              <thead>
 
+            <thead>
 
               <tr>
 
                 <th>카드명</th>
 
                 <th>부서</th>
@@ -90,35 +84,23 @@
 
             </thead>
 
             <!-- 동적으로 <td> 생성 -->
 
             <tbody>
 
-              <tr v-for="(item, index) in listData" :key="index">
 
-      <td>{{ item.name }}</td>
 
-      <td>{{ item.department }}</td>
 
-      <td>{{ item.user }}</td>
 
-      <td>{{ item.startDate }} ~ {{ item.endDate }}</td>
 
-    </tr>
 
+              <tr v-if="!(cardHisRtnData && cardHisRtnData.length)">
 
+                <td colspan="4" style="text-align: center;">등록된 사용이력이 없습니다.</td>
 
+              </tr>
 
+              <tr v-for="(item, index) in cardHisRtnData" :key="index">
 
+                <td>{{ item.cardNm }}</td>
 
+                <td>{{ item.deptId }}</td>
 
+                <td>{{ item.applcntId }}</td>
 
+                <td>
 
+                  {{ item.bgnde }} {{ item.beginHour.padStart(2, '0') }}:{{ item.beginMnt.padStart(2, '0') }} ~
 
+                  {{ item.endde }} {{ item.endHour.padStart(2, '0') }}:{{ item.endMnt.padStart(2, '0') }}
 
+                </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="searchReqHisRtnDTO" @onChange="fnChangeCurrentPageRtn" />
 
       </div>
 
     </div>
 
   </div>
@@ -127,81 +109,104 @@
 
 <script>
 
 import { ref } from 'vue';
 
 import { SearchOutlined } from '@ant-design/icons-vue';
 
+import Pagenation from "../../../component/Pagenation.vue";
 
+import { findAllAsSetCardHis } from "../../../../resources/api/asset"; //카드 정보 API
 
 export default {
 
   data() {
 
     return {
 
-      currentPage: 1,
 
-      totalPages: 3,
 
       photoicon: "/client/resources/img/photo_icon.png",
 
       h3icon: "/client/resources/img/h3icon.png",
 
-      // 데이터 초기화
 
-      years: [2023, 2024, 2025], // 연도 목록
 
-      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
 
-      selectedYear: '',
 
-      selectedMonth: '',
 
-      listData: [
 
-      {
 
-          name: '쏘렌토',
 
-          department: '총무부',
 
-          user: '김철수',
 
-          startDate: '2025-05-01',
 
-          endDate: '2025-05-10',
 
-        },
 
-        {
 
-          name: '그랜저',
 
-          department: '영업부',
 
-          user: '이영희',
 
-          startDate: '2025-05-03',
 
-          endDate: '2025-05-04',
 
-        },],
 
-      filteredData: [],
 
+
 
+      searchReqHisResDTO: {
 
+        searchType: "all",
 
+        searchText: null,
 
+        useAt: null,
 
+        useAll: false,
 
+        listType: "res",
 
+
 
+        currentPage: null,
 
+        recordSize: 3,
 
+        pageSize: null,
 
+        totalRecordCount: null,
 
+        totalPageCount: null,
 
+        startPage: null,
 
+        endPage: null,
 
+        limitStart: null,
 
+        existPrevPage: null,
 
+        existNextPage: null,
 
+      }, // 예약현황
 
+      cardHisResData: [],     // 예약현황 데이터
 
+      searchReqHisRtnDTO: {
 
+        searchType: "all",
 
+        searchText: null,
 
+        useAt: null,
 
+        useAll: false,
 
+        listType: "rtn",
 
+
 
+        currentPage: null,
 
+        recordSize: 3,
 
+        pageSize: null,
 
+        totalRecordCount: null,
 
+        totalPageCount: null,
 
+        startPage: null,
 
+        endPage: null,
 
+        limitStart: null,
 
+        existPrevPage: null,
 
+        existNextPage: null,
 
+      }, // 사용현황
 
+      cardHisRtnData: [],     // 예약현황 데이터
 
     };
 
   },
 
   computed: {
 
   },
 
-  components:{
 
-    SearchOutlined
 
+  components: {
 
+    SearchOutlined, Pagenation
 
   },
 
   methods: {
 
-    changePage(page) {
 
-      if (page < 1 || page > this.totalPages) return;
 
-      this.currentPage = page;
 
-      this.$emit('page-changed', page); // 필요 시 부모에 알림
 
+    // 페이지 이동 예약현황황
 
+    fnChangeCurrentPageRes(currentPage) {
 
+      this.searchReqHisResDTO.currentPage = Number(currentPage);
 
+      this.$nextTick(() => {
 
+        this.searchCardsHisRes();
 
+      });
 
     },
 
-    async onClickSubmit() {
 
-      // `useMutation` 훅을 사용하여 mutation 함수 가져오기
 
-      const { mutate, onDone, onError } = useMutation(mygql);
 
-
 
+    //카드 정보 사용 현황 예약현황
 
+    async searchCardsHisRes() {
 
       try {
 
-        const result = await mutate();
 
-        console.log(result);
 
+        const response = await findAllAsSetCardHis(this.searchReqHisResDTO);
 
+        if (response.status === 200) {
 
+          this.cardHisResData = response.data.data.cardHis; // API 응답에서 카테고리 목록을 가져옴
 
+          this.searchReqHisResDTO = response.data.data.search;
 
+        }
 
       } catch (error) {
 
-        console.error('Mutation error:', error);
 
+        console.error("검색 중 오류 발생:", error);
 
       }
 
     },
 
-    registerLeave() {
 
-      console.log("등록 버튼 클릭됨");
 
-
 
-      // Vue의 반응성 문제를 피하기 위해, 새로운 객체를 추가합니다.
 
-      this.DeptData = [
 
-        ...this.DeptData,
 
-        { member: '', deptNM: '', acceptTerms: false }
 
-      ];
 
-
 
-      console.log(this.DeptData); // 배열 상태 출력
 
+    // 페이지 이동 사용현황 
+    fnChangeCurrentPageRtn(currentPage) {
 
+      this.searchReqHisRtnDTO.currentPage = Number(currentPage);
 
+      this.$nextTick(() => {
 
+        this.searchCardsHisRtn();
 
+      });
 
     },
 
-    getStatusClass(status) {
 
-      if (status === '승인') return 'status-approved';
 
-      if (status === '대기') return 'status-pending';
 
-      return '';
 
+    //카드 정보 사용 현황 사용현황
 
+    async searchCardsHisRtn() {
 
+      try {
 
+        const response = await findAllAsSetCardHis(this.searchReqHisRtnDTO);
 
+        if (response.status === 200) {
 
+          this.cardHisRtnData = response.data.data.cardHis; // API 응답에서 카테고리 목록을 가져옴
 
+          this.searchReqHisRtnDTO = response.data.data.search;
 
+        }
 
+      } catch (error) {
 
+        console.error("검색 중 오류 발생:", error);
 
+      }
 
     },
 
-    
   },
 
   created() {
 
   },
 
   mounted() {
 
-
 
-
 
+    this.searchCardsHisRes();
 
+    this.searchCardsHisRtn();
 
   },
 
 };
 
 </script>
 
9993663
client/views/pages/Manager/asset/VhcleInfoManagement.vue (added)
+++ client/views/pages/Manager/asset/VhcleInfoManagement.vue
@@ -0,0 +1,459 @@
+<template>
+  <div class="card ">
+    <div class="card-body ">
+      <h2 class="card-title">차량정보 관리</h2>
+      <div class="flex align-top">
+        <div class="sch-form-wrap search">
+          <div class="input-group" style="display: flex;">
+            <select v-model="searchReqDTO.searchType" id="searchType" class="form-select">
+              <option value="all">전체</option>
+              <option value="vm">차량명</option>
+              <option value="vn">차량번호</option>
+            </select>
+            <div class="sch-input">
+              <input type="text" class="form-control" v-model="searchReqDTO.searchText" @keyup.enter="searchVhcles">
+              <button class="ico-sch" @click="searchCards">
+                <SearchOutlined />
+              </button>
+            </div>
+          </div>
+          <div class="tbl-wrap table-scroll">
+            <table id="myTable" class="tbl data">
+              <!-- 동적으로 <th> 생성 -->
+              <thead>
+                <tr>
+                  <th>차량목록 </th>
+                </tr>
+              </thead>
+              <!-- 동적으로 <td> 생성 -->
+              <tbody>
+                <tr v-if="selectedVhcles.length === 0">
+                  <td style="text-align: center;">등록된 차량량정보가 없습니다.</td>
+                </tr>
+                <tr v-for="(item, index) in selectedVhcles" :key="index" @click="selectVhcle(item)">
+                  <td>
+                    {{ item.vhcleNm }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+          </div>
+        </div>
+
+        <div style="width: 100%;">
+          <div class=" sch-form-wrap title-wrap">
+            <h3><img :src="h3icon" alt="">차량 정보</h3>
+            <div class="buttons" style="margin: 0;">
+              <button type="submit" class="btn sm tertiary" @click="resetVhcle">신규</button>
+              <button type="reset" class="btn sm secondary" @click="insertByUpdateVhcle">
+                {{ buttonText }}
+              </button>
+              <button type="delete" class="btn sm btn-red" @click="deleteByUseAtVhcle">삭제</button>
+            </div>
+          </div>
+          <form class="row g-3 pt-3  needs-validation " @submit.prevent="handleSubmit" style="margin-bottom: 3rem;">
+            <div class="col-12">
+              <div class="col-12 border-x">
+                <label for="vhcty" class="form-label">
+                  <p>차종
+                  <p class="require"><img :src="require" alt=""></p>
+                  </p>
+                </label>
+                <input type="text" class="form-control" id="where" v-model="selectedVhcle.vhcty" />
+              </div>
+              <div class="col-12 border-x">
+                <label for="vhcleNo" class="form-label">
+                  <p>차량번호
+                  <p class="require"><img :src="require" alt=""></p>
+                  </p>
+                </label>
+                <input type="text" class="form-control" id="where" v-model="selectedVhcle.vhcleNo" />
+              </div>
+
+            </div>
+            <div class="col-12">
+              <div class="col-12 border-x">
+                <label for="fuelKnd" class="form-label">연료종류</label>
+                <input type="text" class="form-control" id="where" v-model="selectedVhcle.fuelKnd" />
+              </div>
+              <div class="col-12 border-x">
+                <label for="posesnStle" class="form-label">
+                  <p>소유형태
+                  <p class="require"><img :src="require" alt=""></p>
+                  </p>
+                </label>
+                <input type="text" class="form-control" id="where" v-model="selectedVhcle.posesnStle" />
+              </div>
+
+            </div>
+            <div class="col-12  ">
+              <label for="vhcleNm" 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="selectedVhcle.vhcleNm" />
+            </div>
+            <div class="col-12  ">
+              <label for="chargerId" 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="selectedVhcle.chargerId" readonly />
+              <input type="button" class="form-control " value="검색" @click="showPopup = true" />
+              <HrPopup v-if="showPopup" @close="showPopup = false" @select="addApproval" />
+            </div>
+            <div class="col-12 chuljang ">
+              <label for="rm" class="form-label">비고</label>
+              <input type="text" class="form-control textarea" id="reason" v-model="selectedVhcle.rm" />
+            </div>
+            <div class="col-12 border-x input-radio">
+              <label for="prvonsh" class="form-label">
+                <p>상태
+                <p class="require"><img :src="require" alt=""></p>
+                </p>
+              </label>
+              <select class="form-select" id="sttus" v-model="selectedVhcle.sttus">
+                <option value="N">정상</option>
+                <option value="R">수리</option>
+                <option value="D">폐차차</option>
+              </select>
+            </div>
+
+
+          </form>
+          <div class=" sch-form-wrap title-wrap">
+            <h3><img :src="h3icon" alt="">예약현황</h3>
+          </div>
+          <div class="tbl-wrap chk-area">
+            <table id="myTable" class="tbl data">
+
+              <thead>
+                <tr>
+                  <th>차종</th>
+                  <th>운행자</th>
+                  <th>기간</th>
+                  <th>상태</th>
+                </tr>
+              </thead>
+              <!-- 동적으로 <td> 생성 -->
+              <tbody>
+                <tr v-for="(item, index) in processedVhcles" :key="index">
+                  <td>{{ item.vhcty }}</td>
+                  <td>{{ item.drverId }}</td>
+                  <td>{{ item.formattedPeriod }}</td>
+                  <td :class="getStatusClass(item.status)">
+                    {{ item.status }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+          </div>
+          <Pagenation :search="searchReqHisDTO" @onChange="fnChangeCurrentPage" />
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import GoogleCalendar from "../../../component/GoogleCalendar.vue"
+import { SearchOutlined } from '@ant-design/icons-vue';
+import HrPopup from "../../../component/Popup/HrPopup.vue";
+import { saveAsSetVhcle, findAllAsSetVhcle, updateAsSetVhcle, findAllAsSetVhcleHis } from "../../../../resources/api/asset"; //카드 정보 API
+import Pagenation from "../../../component/Pagenation.vue";
+
+export default {
+  data() {
+    return {
+      showPopup: false,
+      selectedname: '',
+      approvals: [],
+      require: "/client/resources/img/require.png",
+      h3icon: "/client/resources/img/h3icon.png",
+      photoicon: "/client/resources/img/photo_icon.png",
+      img1: "/client/resources/img/img.png",
+      icon1: "/client/resources/img/icon.png",
+      dateicon: "/client/resources/img/date.png",
+      startbtn: "/client/resources/img/start.png",
+      stopbtn: "/client/resources/img/stop.png",
+      moreicon: "/client/resources/img/more.png",
+      
+      checkVhcle: false,
+      vhcleId: null,
+      selectedVhcles: [],
+      selectedVhcleHis: [],
+      searchReqDTO: {
+        searchType: "all",
+        searchText: null,
+        useAt: null,
+        useAll: true,
+      },
+      searchReqHisDTO: {
+        searchType: "all",
+        searchText: null,
+        useAt: null,
+        useAll: false,
+        listType:"all",
+
+        currentPage: null,
+        recordSize: 2,
+        pageSize: null,
+        totalRecordCount: null,
+        totalPageCount: null,
+        startPage: null,
+        endPage: null,
+        limitStart: null,
+        existPrevPage: null,
+        existNextPage: null,
+      },
+      selectedVhcle: {
+        vhcleNm: null,
+        vhcty: null,
+        vhcleNo: null,
+        fuelKnd: null,
+        posesnStle: null,
+        chargerId: null,
+        rm: null,
+        sttus: "N",
+        useAt: "Y"
+      },
+    }
+  },
+  components: {
+    SearchOutlined, HrPopup, Pagenation
+  },
+  methods: {
+    // 페이지 이동
+    fnChangeCurrentPage(currentPage) {
+      this.searchReqHisDTO.currentPage = Number(currentPage);
+      console.log(this.searchReqHisDTO);
+      this.$nextTick(() => {
+        this.searchVhclesHis();
+      });
+    },
+    //차량 정보 전체 조회
+    async searchVhcles() {
+      try {
+        const response = await findAllAsSetVhcle(this.searchReqDTO);
+        if (response.status === 200) {
+          this.selectedVhcles = response.data.data.vhcle; // API 응답에서 카테고리 목록을 가져옴
+        }
+      } catch (error) {
+        console.error("검색 중 오류 발생:", error);
+      }
+    },
+    //차량 정보 사용 현황 전체 조회
+    async searchVhclesHis() {
+      try {
+        const response = await findAllAsSetVhcleHis(this.searchReqHisDTO);
+        if (response.status === 200) {
+          this.selectedVhcleHis = response.data.data.vhcle; // API 응답에서 카테고리 목록을 가져옴
+          this.searchReqHisDTO = response.data.data.search;
+        }
+      } catch (error) {
+        console.error("검색 중 오류 발생:", error);
+      }
+    },
+    // 차량 정보 등록 수정
+    async insertByUpdateVhcle() {
+
+      if (!this.validateCheck()) {
+        return; // 유효성 검사 실패 시 함수 종료
+      }
+
+      if (this.vhcleId == null && this.vhcleId == "") {
+        try {
+          const response = await saveAsSetVhcle(this.selectedVhcle);
+          if (response.status === 200) { // 성공 여부 체크
+            alert("등록되었습니다.");
+            window.location.reload();
+          }
+        } catch (error) {
+          // HTTP 오류가 발생한 경우
+          const errorMessage = error.response?.data?.message || "등록이 실패하였습니다.";
+          alert(errorMessage); // 오류 메시지 표시
+          this.searchVhcles();
+        }
+      } else{
+        try {
+        const response = await updateAsSetVhcle(this.vhcleId, this.selectedVhcle);
+        if (response.status === 200) {
+          alert("수정되었습니다.");
+          window.location.reload();
+        }
+      } catch (error) {
+          // HTTP 오류가 발생한 경우
+          const errorMessage = error.response?.data?.message || "수정이 실패하였습니다.";
+          alert(errorMessage); // 오류 메시지 표시
+          this.searchVhcles();
+      }
+      }
+    },
+
+    // 등록 유효성 체크 함수
+    validateCheck() {
+      // 1. 차종 (vhcty) 필수 체크
+      if (!this.selectedVhcle.vhcty || this.selectedVhcle.vhcty.trim() === "") {
+        alert("차종은 필수 입력 항목입니다.");
+        return false;
+      }
+
+      // 2. 차량번호 (vhcleNo) 필수 체크
+      if (!this.selectedVhcle.vhcleNo || this.selectedVhcle.vhcleNo.trim() === "") {
+        alert("차량번호는 필수 입력 항목입니다.");
+        return false;
+      }
+
+      // 3. 소유형태 (posesnStle) 필수 체크
+      if (!this.selectedVhcle.posesnStle || this.selectedVhcle.posesnStle.trim() === "") {
+        alert("소유형태는 필수 입력 항목입니다.");
+        return false;
+      }
+
+      // 4. 차량명 (vhcleNm) 필수 체크
+      if (!this.selectedVhcle.vhcleNm || this.selectedVhcle.vhcleNm.trim() === "") {
+        alert("차량명은 필수 입력 항목입니다.");
+        return false;
+      }
+
+      // 5. 담당자 (chargerId) 필수 체크
+      if (!this.selectedVhcle.chargerId || this.selectedVhcle.chargerId.trim() === "") {
+        alert("담당자는 필수 입력 항목입니다.");
+        return false;
+      }
+      return true; // 모든 유효성 검사 통과
+    },
+
+    // 삭제 버튼을 눌렀을 시 삭제
+    async deleteByUseAtVhcle() {
+      try {
+        this.selectedVhcle.useAt = "N";
+        const response = await updateAsSetVhcle(this.vhcleId, this.selectedVhcle);
+        if (response.status === 200) {
+          alert("삭제되었습니다.");
+        }
+      } catch (error) {
+        alert("삭제가 실패하였습니다.");
+      }
+    },
+
+    //선택한 차량의 정보를 오른쪽에 표시
+    selectVhcle(item) {
+      this.checkVhcle = true;
+      this.vhcleId = item.vhcleId;
+      this.selectedVhcle = {
+        vhcleNm: item.vhcleNm,
+        vhcty: item.vhcty,
+        vhcleNo: item.vhcleNo,
+        fuelKnd: item.fuelKnd,
+        posesnStle: item.posesnStle,
+        chargerId: item.chargerId,
+        rm: item.rm,
+        sttus: item.sttus,
+        useAt: item.useAt
+      };
+    },
+
+    // 신규 버튼을 눌렀을 시
+    resetVhcle() {
+      this.checkVhcle = false;
+      this.selectedVhcle = {
+        vhcleNm: null,
+        vhcty: null,
+        vhcleNo: null,
+        fuelKnd: null,
+        posesnStle: null,
+        chargerId: null,
+        rm: null,
+        sttus: "N",
+        useAt: "Y"
+      };
+    },
+
+    addApproval(selectedUser) {
+      this.approvals.push({
+        name: selectedUser.name
+      });
+
+      this.selectedVhcle.chargerId = selectedUser.name; // 입력창에 표시
+      this.showPopup = false;
+    },
+    getStatusClass(status) {
+      if (status === '예약') return 'status-pending';
+      if (status === '사용 중') return 'status-pending';
+      if (status === '반납') return 'status-approved';
+      return ''; // 기본값
+    },
+  },
+  watch: {
+
+  },
+  computed: {
+    buttonText() {
+      return this.checkVhcle ? "수정" : "등록";
+    },
+    // selectedCardsHis 데이터를 가공하여 화면에 표시할 데이터를 만듭니다.
+    processedVhcles() {
+      const now = new Date(); // 현재 시간
+
+      // 날짜와 시간 문자열을 조합하여 Date 객체를 생성하는 헬퍼 함수
+      const createDateTime = (dateStr, hourStr, minStr) => {
+        // dateStr이 "YYYY-MM-DD HH:MM:SS.ms" 형태라고 가정하고 "YYYY-MM-DD" 부분만 추출
+        const datePart = dateStr.split(' ')[0];
+        const year = parseInt(datePart.substring(0, 4), 10);
+        const month = parseInt(datePart.substring(5, 7), 10) - 1; // 월은 0부터 시작 (0=1월)
+        const day = parseInt(datePart.substring(8, 10), 10);
+        const hour = parseInt(hourStr, 10);
+        const minute = parseInt(minStr, 10);
+        return new Date(year, month, day, hour, minute, 0);
+      };
+
+      // Date 객체를 'YYYY-MM-DD HH:MI' 형식으로 포맷하는 헬퍼 함수
+      const formatDateTime = (dateObj) => {
+        const year = dateObj.getFullYear();
+        const month = String(dateObj.getMonth() + 1).padStart(2, '0');
+        const day = String(dateObj.getDate()).padStart(2, '0');
+        const hour = String(dateObj.getHours()).padStart(2, '0');
+        const minute = String(dateObj.getMinutes()).padStart(2, '0');
+        return `${year}-${month}-${day} ${hour}:${minute}`;
+      };
+
+      return this.selectedVhcleHis.map(item => {
+        const startDateTime = createDateTime(item.bgnde, item.beginHour, item.beginMnt);
+        const endDateTime = createDateTime(item.endde, item.endHour, item.endMnt);
+
+        let status = '';
+        if (now >= startDateTime && now <= endDateTime) {
+          status = '사용 중'; // 현재 시간이 기간 안에 포함
+        } else if (now < startDateTime) {
+          status = '예약';    // 현재 시간이 시작일시보다 이전
+        } else { // now > endDateTime
+          status = '반납';    // 현재 시간이 종료일시보다 이후
+        }
+
+        return {
+          ...item, // 원본 아이템의 모든 속성 유지
+          formattedPeriod: `${formatDateTime(startDateTime)} ~ ${formatDateTime(endDateTime)}`, // 포맷된 기간 문자열
+          status: status // 계산된 상태
+        };
+      });
+    }
+  },
+  mounted() {
+    console.log('main mounted');
+    this.searchVhcles();
+    this.searchVhclesHis();
+  }
+}
+</script>
+<style scoped>
+tr {
+  cursor: pointer;
+}
+</style>(파일 끝에 줄바꿈 문자 없음)
 
9993663
client/views/pages/Manager/asset/VhcleList.vue (added)
+++ client/views/pages/Manager/asset/VhcleList.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="col-lg-12">
+    <div class="card">
+      <div class="card-body">
+        <h2 class="card-title">사용현황</h2>
+        <div class="sch-form-wrap title-wrap">
+          <h3><img :src="h3icon" alt="">예약현황</h3>
+          <div class="input-group">
+            <select v-model="searchReqHisResDTO.searchType" id="searchType" class="form-select">
+              <option value="all">전체</option>
+              <option value="vm">차량명</option>
+              <option value="vn">차량번호</option>
+              <option value="dr">운행자</option>
+            </select>
+            <div class="sch-input">
+              <input type="text" class="form-control" v-model="searchReqHisResDTO.searchText"
+                @keyup.enter="searchVhclesHisRes">
+              <button class="ico-sch" @click="searchVhclesHisRes">
+                <SearchOutlined />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Table  -->
+        <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-if="!(vhcleHisResData && vhcleHisResData.length)">
+                <td colspan="6" style="text-align: center;">등록된 예약현황이 없습니다.</td>
+              </tr>
+              <tr v-for="(item, index) in vhcleHisResData" :key="index">
+                <td>{{ item.vhcty }}</td>
+                <td>{{ item.vhcleNo }}</td>
+                <td>{{ item.vhcleNm }}</td>
+                <td>{{ item.deptId }}</td>
+                <td>{{ item.drverId }}</td>
+                <td>
+                  {{ item.bgnde }} {{ item.beginHour.padStart(2, '0') }}:{{ item.beginMnt.padStart(2, '0') }} ~
+                  {{ item.endde }} {{ item.endHour.padStart(2, '0') }}:{{ item.endMnt.padStart(2, '0') }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+        </div>
+        <Pagenation :search="searchReqHisResDTO" @onChange="fnChangeCurrentPageRes" />
+        <div class="sch-form-wrap title-wrap">
+          <h3><img :src="h3icon" alt="">사용이력</h3>
+          <div class="input-group">
+            <select v-model="searchReqHisRtnDTO.searchType" id="searchType" class="form-select">
+              <option value="all">전체</option>
+              <option value="vm">차량명</option>
+              <option value="vn">차량번호</option>
+              <option value="dr">운행자</option>
+            </select>
+            <div class="sch-input">
+              <input type="text" class="form-control" v-model="searchReqHisRtnDTO.searchText"
+                @keyup.enter="searchVhclesHisRtn">
+              <button class="ico-sch" @click="searchVhclesHisRtn">
+                <SearchOutlined />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Table  -->
+        <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-if="!(vhcleHisRtnData && vhcleHisRtnData.length)">
+                <td colspan="6" style="text-align: center;">등록된 예약현황이 없습니다.</td>
+              </tr>
+              <tr v-for="(item, index) in vhcleHisRtnData" :key="index">
+                <td>{{ item.vhcty }}</td>
+                <td>{{ item.vhcleNo }}</td>
+                <td>{{ item.vhcleNm }}</td>
+                <td>{{ item.deptId }}</td>
+                <td>{{ item.drverId }}</td>
+                <td>
+                  {{ item.bgnde }} {{ item.beginHour.padStart(2, '0') }}:{{ item.beginMnt.padStart(2, '0') }} ~
+                  {{ item.endde }} {{ item.endHour.padStart(2, '0') }}:{{ item.endMnt.padStart(2, '0') }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+        </div>
+        <Pagenation :search="searchReqHisRtnDTO" @onChange="fnChangeCurrentPageRtn" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { SearchOutlined } from '@ant-design/icons-vue';
+import Pagenation from "../../../component/Pagenation.vue";
+import { findAllAsSetVhcleHis } from "../../../../resources/api/asset"; //차량 정보 API
+export default {
+  data() {
+    return {
+      photoicon: "/client/resources/img/photo_icon.png",
+      h3icon: "/client/resources/img/h3icon.png",
+      
+      searchReqHisResDTO: {
+        searchType: "all",
+        searchText: null,
+        useAt: null,
+        useAll: false,
+        listType: "res",
+
+        currentPage: null,
+        recordSize: 3,
+        pageSize: null,
+        totalRecordCount: null,
+        totalPageCount: null,
+        startPage: null,
+        endPage: null,
+        limitStart: null,
+        existPrevPage: null,
+        existNextPage: null,
+      }, // 예약현황
+      vhcleHisResData: [],     // 예약현황 데이터
+      searchReqHisRtnDTO: {
+        searchType: "all",
+        searchText: null,
+        useAt: null,
+        useAll: false,
+        listType: "rtn",
+
+        currentPage: null,
+        recordSize: 3,
+        pageSize: null,
+        totalRecordCount: null,
+        totalPageCount: null,
+        startPage: null,
+        endPage: null,
+        limitStart: null,
+        existPrevPage: null,
+        existNextPage: null,
+      }, // 사용현황
+      vhcleHisRtnData: [],     // 예약현황 데이터
+    };
+  },
+  computed: {
+  },
+  components: {
+    SearchOutlined, Pagenation
+  },
+  methods: {
+    // 페이지 이동 예약현황황
+    fnChangeCurrentPageRes(currentPage) {
+      this.searchReqHisResDTO.currentPage = Number(currentPage);
+      this.$nextTick(() => {
+        this.searchVhclesHisRes();
+      });
+    },
+    //차량량 정보 사용 현황 예약현황
+    async searchVhclesHisRes() {
+      try {
+        const response = await findAllAsSetVhcleHis(this.searchReqHisResDTO);
+        if (response.status === 200) {
+          this.vhcleHisResData = response.data.data.vhcle; // API 응답에서 카테고리 목록을 가져옴
+          this.searchReqHisResDTO = response.data.data.search;
+        }
+      } catch (error) {
+        console.error("검색 중 오류 발생:", error);
+      }
+    },
+    // 페이지 이동 사용현황 
+    fnChangeCurrentPageRtn(currentPage) {
+      this.searchReqHisRtnDTO.currentPage = Number(currentPage);
+      this.$nextTick(() => {
+        this.searchVhclesHisRtn();
+      });
+    },
+    //차량 정보 사용 현황 사용현황
+    async searchVhclesHisRtn() {
+      try {
+        const response = await findAllAsSetVhcleHis(this.searchReqHisRtnDTO);
+        if (response.status === 200) {
+          this.vhcleHisRtnData = response.data.data.vhcle; // API 응답에서 카테고리 목록을 가져옴
+          this.searchReqHisRtnDTO = response.data.data.search;
+        }
+      } catch (error) {
+        console.error("검색 중 오류 발생:", error);
+      }
+    },
+  },
+  created() {
+  },
+  mounted() {
+    this.searchVhclesHisRes();
+    this.searchVhclesHisRtn();
+  },
+};
+</script>
+
+<style scoped></style>(파일 끝에 줄바꿈 문자 없음)
97fb27b
9993663
client/views/pages/Manager/asset/asset.vue
--- client/views/pages/Manager/asset/asset.vue
+++ client/views/pages/Manager/asset/asset.vue
@@ -15,52 +15,59 @@
 
       </div>
 
 
 
-      <details class="menu-box" open>
 
-          <summary><p>법인차량</p><div class="icon"><img :src="topmenuicon" alt=""></div></summary>
 
-          <ul>
 
-            <li> <router-link :to="{ name: 'CarList' }" exact-active-class="active-link" v-slot="{ isExactActive }">
 
-                <p>사용현황</p>
 
-                <div class="icon" v-if="isExactActive">
 
-                  <img :src="menuicon" alt="">
 
-                </div>
 
-              </router-link></li>
 
-            <li>
 
-              <router-link :to="{ name: 'CarInfoManagement' }" exact-active-class="active-link" v-slot="{ isExactActive }">
 
-                <p>차량정보 관리</p>
 
-                <div class="icon" v-if="isExactActive">
 
-                  <img :src="menuicon" alt="">
 
-                </div>
 
-              </router-link>
 
-            </li>
 
-           
-            
-          </ul>
 
+      <details class="menu-box" :open="$route.name.toLowerCase().includes('vhcle')">
 
+        <summary>
 
+          <p>법인차량</p>
 
+          <div class="icon"><img :src="topmenuicon" alt=""></div>
 
+        </summary>
 
+        <ul>
 
+          <li> <router-link :to="{ name: 'VhcleList' }" exact-active-class="active-link" v-slot="{ isExactActive }">
 
+              <p>사용현황</p>
 
+              <div class="icon" v-if="isExactActive">
 
+                <img :src="menuicon" alt="">
 
+              </div>
 
+            </router-link></li>
 
+          <li>
 
+            <router-link :to="{ name: 'VhcleInfoManagement' }" exact-active-class="active-link"
 
+              v-slot="{ isExactActive }">
 
+              <p>차량정보 관리</p>
 
+              <div class="icon" v-if="isExactActive">
 
+                <img :src="menuicon" alt="">
 
+              </div>
 
+            </router-link>
 
+          </li>
 
+
 
+
 
+        </ul>
 
       </details>
 
-      <details class="menu-box">
 
-          <summary><p>법인카드</p><div class="icon"><img :src="topmenuicon" alt=""></div></summary>
 
-          <ul>
 
-            <li> <router-link :to="{ name: 'CardList' }" exact-active-class="active-link" v-slot="{ isExactActive }">
 
-                <p>사용현황</p>
 
-                <div class="icon" v-if="isExactActive">
 
-                  <img :src="menuicon" alt="">
 
-                </div>
 
-              </router-link></li>
 
-            <li> <router-link :to="{ name: 'CardInfoManagement' }" exact-active-class="active-link" v-slot="{ isExactActive }">
 
-                <p>카드정보 관리</p>
 
-                <div class="icon" v-if="isExactActive">
 
-                  <img :src="menuicon" alt="">
 
-                </div>
 
-              </router-link></li>
 
-           
-            
-          </ul>
 
+      <details class="menu-box" :open="$route.name.toLowerCase().includes('card')">
 
+        <summary>
 
+          <p>법인카드</p>
 
+          <div class="icon"><img :src="topmenuicon" alt=""></div>
 
+        </summary>
 
+        <ul>
 
+          <li> <router-link :to="{ name: 'CardList' }" exact-active-class="active-link" v-slot="{ isExactActive }">
 
+              <p>사용현황</p>
 
+              <div class="icon" v-if="isExactActive">
 
+                <img :src="menuicon" alt="">
 
+              </div>
 
+            </router-link></li>
 
+          <li> <router-link :to="{ name: 'CardInfoManagement' }" exact-active-class="active-link"
 
+              v-slot="{ isExactActive }">
 
+              <p>카드정보 관리</p>
 
+              <div class="icon" v-if="isExactActive">
 
+                <img :src="menuicon" alt="">
 
+              </div>
 
+            </router-link></li>
 
+
 
+
 
+        </ul>
 
       </details>
 
     </div>
 
   </div>
 
   <!-- End Page Title -->
 
   <div class="content">
 
     <router-view></router-view>
 
-
 
   </div>
 
 </template>
@@ -88,6 +95,57 @@
 
   computed: {
 
   },
 
   methods: {
 
+    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);
 
+      }
 
+    },
 
+    registerLeave() {
 
+      console.log("등록 버튼 클릭됨");
 
+
 
+      // Vue의 반응성 문제를 피하기 위해, 새로운 객체를 추가합니다.
 
+      this.DeptData = [
 
+        ...this.DeptData,
 
+        { member: '', deptNM: '', acceptTerms: false }
 
+      ];
 
+
 
+      console.log(this.DeptData); // 배열 상태 출력
 
+    },
 
+    saveChanges() {
 
+      // 로컬스토리지에 DeptData 저장
 
+      localStorage.setItem('DeptData', JSON.stringify(this.DeptData));
 
+      console.log('데이터가 로컬스토리지에 저장되었습니다.');
 
+    },
 
+    deletePending() {
 
+      // 선택된 항목만 필터링하여 삭제
 
+      const selectedItems = this.DeptData.filter(item => item.acceptTerms);
 
+
 
+      // 승인된 항목이 없으면 삭제 진행
 
+      if (selectedItems.length > 0) {
 
+        this.DeptData = this.DeptData.filter(item => !item.acceptTerms);
 
+        alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
 
+      } else {
 
+        alert("선택된 항목이 없습니다.");
 
+      }
 
+    },
 
+    // 날짜 필터 적용
 
+    filterData() {
 
+      this.filteredData = this.DeptData.filter(item => {
 
+        const itemYear = new Date(item.startDate).getFullYear();
 
+        const itemMonth = new Date(item.startDate).getMonth() + 1; // 월은 0부터 시작하므로 1을 더해줍니다.
 
+
 
+        return (
 
+          (!this.selectedYear || itemYear === parseInt(this.selectedYear)) &&
 
+          (!this.selectedMonth || itemMonth === parseInt(this.selectedMonth))
 
+        );
 
+      });
 
+    },
 
 
     // 페이지 변경
 
     changePage(page) {
@@ -95,9 +153,18 @@
 
     },
 
   },
 
   created() {
 
+    // 로컬스토리지에서 기존 데이터가 있으면 불러오기
 
+    const storedData = localStorage.getItem('DeptData');
 
+    console.log(storedData);
 
+    if (storedData) {
 
+      this.DeptData = JSON.parse(storedData);
 
+    }
 
   },
 
   mounted() {
 
 
+    // 처음에는 모든 데이터를 표시
 
+    this.filteredData = this.DeptData;
 
+
 
   },
 
 };
 
 </script>
Add a comment
List