com : pagination 추가 하기 , 검색 기능까지 처리

src/pages/app/priceManagement.vue

@@ -14,8 +14,9 @@ const masks = ref({
 })
 
 const totalItems = ref(0)        // 전체 아이템 수
-const currentPage = ref(0)       // 현재 페이지
+const currentPage = ref<number>(1)       // 현재 페이지
 const itemsPerPage = 8
+const totalPages = ref(1)
 
 const searchParamsList = reactive({
   cateCd : '', //분야코드
@@ -38,32 +39,25 @@ const params = reactive({
 
 async function getPriceListData(){
   const today = new Date()
+  searchParamsList.regSdt = new Date().setDate(today.getDate() - 30)
+  searchParamsList.regEdt = new Date().setDate(today.getDate())
 
-  const before30 = new Date()
-  before30.setDate(today.getDate() - 30)
-
-  const after30 = new Date()
-  after30.setDate(today.getDate())
   const priceBase = {
     params:{
-      regSdt: formatDatefromObject(before30),
+      regSdt: formatDatefromString(searchParamsList.regSdt),
-      regEdt: formatDatefromObject(after30),
+      regEdt: formatDatefromString(searchParamsList.regEdt),
-      page: Number.parseInt(route.query.page as string) || 1,
+      page: 1,
-      row: 10
+      row: itemsPerPage
     }
   }
   const result = await getPriceList(priceBase)
   params.priceData = result.content
   //페이지 관련 값 설정
-  currentPage.value = result.pageable.pageNumber + 1
   totalItems.value = result.totalElements
-  console.log("currentPage.value",currentPage.value)
+  totalPages.value = result.totalPages
-  console.log("totalItems.value",totalItems.value)
 }
 
-const route = useRoute()
+const searchPrice = async (item) => {
-const searchPrice = async () => {
-
   const searchParams = {
     params: {
       cateCd : searchParamsList.cateCd, //분야코드
@@ -71,20 +65,13 @@ const searchPrice = async () => {
       regNm : searchParamsList.regNm, //담당자
       regSdt: formatDatefromString(searchParamsList.regSdt),//등록시작일
       regEdt: formatDatefromString(searchParamsList.regEdt),//등록종료일
-      page: Number.parseInt(route.query.page as string) || 1,//페이지
+      page: item,//페이지
-      row: 10 //아이템갯수
+      row: itemsPerPage //아이템갯수
     }
   }
-  console.log("searchParams", Number.parseInt(route.query.page as string))
   const result = await getPriceList(searchParams)
   params.priceData = result.content
-  currentPage.value = null
-  totalItems.value = null
-  //페이지 관련 값 설정
-  currentPage.value = result.pageable.pageNumber + 1
   totalItems.value = result.totalElements
-  console.log("currentPage.value",currentPage.value)
-  console.log("totalItems.value",totalItems.value)
 }
 
 function getPriceDetail(){
@@ -96,8 +83,9 @@ function getPriceDetail(){
   }
 }
 
-watch(() => route.query.page, (newPage) => {
+watch(currentPage, (newParams) => {
-  searchPrice()
+  currentPage.value =  newParams
+  searchPrice(currentPage.value)
 })
 </script>
 
@@ -137,7 +125,7 @@ watch(() => route.query.page, (newPage) => {
                   v-model="searchParamsList.regNm"
                   class="input custom-text-filter"
                   placeholder="담당자"
-                  @keydown.enter="searchPrice"
+                  @keydown.enter="searchPrice(1)"
               >
             </VControl>
           </VField>
@@ -205,7 +193,7 @@ watch(() => route.query.page, (newPage) => {
                   color="primary"
                   elevated
                   icon="fas fa-search"
-                  @click.stop="searchPrice"
+                  @click.stop="searchPrice(1)"
               >
                 검색
               </VButton>
@@ -222,7 +210,27 @@ watch(() => route.query.page, (newPage) => {
             :compact="true"
             @rowClick="getPriceDetail"
         />
-        </div>
+        <VPlaceholderPage
+            v-if="params.priceData.length === 0"
+            larger
+            subtitle="입력하신 검색어와 일치하는 결과를 찾을 수 없습니다.
+        다른 검색어나 조건으로 조회해 보세요."
+            title="일치하는 결과를 찾을 수 없습니다."
+        >
+          <!--        <template #image>-->
+          <!--          <img-->
+          <!--            alt=""-->
+          <!--            class="light-image"-->
+          <!--            src="/images/illustrations/placeholders/search-7.svg"-->
+          <!--          >-->
+          <!--          <img-->
+          <!--            alt=""-->
+          <!--            class="dark-image"-->
+          <!--            src="/images/illustrations/placeholders/search-7-dark.svg"-->
+          <!--          >-->
+          <!--        </template>-->
+        </VPlaceholderPage>
+      </div>
     </div>
       <VButtons class="v-buttons-right-align">
         <VButton
@@ -237,8 +245,7 @@ watch(() => route.query.page, (newPage) => {
       <VFlexPagination
           :item-per-page="itemsPerPage"
           :total-items="totalItems"
-          :current-page="currentPage"
+          v-model:current-page="currentPage"
-          :max-links-displayed="5"
       />
   </div>