디자인 변경

src/components/base/VModal.vue

@@ -2,7 +2,7 @@
 import type { Component } from 'vue'
 import { FocusTrap } from 'focus-trap-vue'
 
-export type VModalSize = 'small' | 'medium' | 'large' | 'big' | 'wide' | 'full'
+export type VModalSize = 'small' | 'medium' | 'large' | 'big' | 'wide' | 'wide-large' | 'full'
 export type VModalAction = 'center' | 'right'
 
 export interface VModalEmits {
@@ -154,6 +154,21 @@ onUnmounted(() => {
     }
   }
 
+  &.is-wide-large {
+    .modal-content {
+      width: 100%;
+      max-width: 60%;
+
+      .modal-card {
+        width: 100%;
+      }
+    }
+
+    .form-layout {
+      max-width: 98%;
+    }
+  }
+
   &.is-full {
     .modal-content {
       width: 100%;

src/components/pages/contract/Contract.vue

@@ -98,6 +98,7 @@ watch(params, (newValue) => {
       v-if="prcsList !== undefined"
       :length="length"
       :page="page"
+      :row="params.row"
       :prcs-list="prcsList"
       :total="total"
       @on-search="onSearch"
@@ -110,7 +111,7 @@ watch(params, (newValue) => {
       title="견적 등록"
       actions="center"
       cancel-label="취소"
-      size="full"
+      size="wide-large"
       @close="saveModal = false"
     >
       <template #content>
@@ -137,7 +138,7 @@ watch(params, (newValue) => {
       title="견적 확인"
       actions="center"
       cancel-label="취소"
-      size="full"
+      size="wide-large"
       @close="viewModal = false"
     >
       <template #content>

src/components/pages/contract/ContractList.vue

@@ -1,15 +1,24 @@
 <script setup lang="ts">
 import dateFormat from '/@src/utils/dateFormat'
-import type { iCode, iPrcsPageable } from '/@src/utils/types.ts'
+import type { iCode, iPrcsPageable } from '/@src/utils/types'
 
 export type MinimalTheme = 'darker' | 'light'
 
-const props = defineProps<{
+const props = withDefaults(
-  prcsList: iPrcsPageable
+  defineProps<{
+    estimateList: iPrcsPageable
     total: number
     length: number
     page: number
-}>()
+    row: number
+  }>(),
+  {
+    total: 0,
+    length: 0,
+    page: 0,
+    row: 0,
+  },
+)
 
 const emits = defineEmits(['on-search', 'on-tr-click'])
 const selUser = ref()
@@ -18,6 +27,7 @@ const masks = ref({
 })
 
 const cates = ref<iCode[]>([])
+const changePage = ref<number>(1)
 
 onMounted(() => {
   api.getCode(5).then((res: iCode[]) => {
@@ -48,6 +58,11 @@ function onTabLeave(e: any) {
 watch(selUser, (value) => {
   console.log(value)
 })
+
+watch(changePage, (newParams) => {
+  params.page = newParams
+  emits('on-search', params)
+})
 </script>
 
 <template>
@@ -213,10 +228,10 @@ watch(selUser, (value) => {
     </div>
     <!--Table Pagination-->
     <VFlexPagination
-      v-if="length > 5"
+      v-if="length > params.row"
-      v-model:current-page="props.page"
+      v-model:current-page="changePage"
-      :item-per-page="10"
+      :item-per-page="params.row"
-      :max-links-displayed="7"
+      :max-links-displayed="10"
       :total-items="total"
       class="mt-4"
       no-router

src/components/pages/estimate/Estimate.vue

@@ -17,7 +17,7 @@ const params = ref({
   estStatCd: '',
   mngNm: '',
   page: 1,
-  row: 10,
+  row: 5,
 })
 
 const estimateList = ref<iEstimatePageable>()
@@ -99,6 +99,7 @@ watch(params, (newValue) => {
       v-if="estimateList !== undefined"
       :length="length"
       :page="page"
+      :row="params.row"
       :estimateList="estimateList"
       :total="total"
       @on-search="onSearch"
@@ -111,7 +112,7 @@ watch(params, (newValue) => {
       title="견적 수정"
       actions="center"
       cancel-label="취소"
-      size="full"
+      size="wide-large"
       @close="updateModal = false"
     >
       <template #content>
@@ -138,7 +139,7 @@ watch(params, (newValue) => {
       title="견적 상세보기"
       actions="center"
       cancel-label="취소"
-      size="full"
+      size="wide-large"
       @close="viewModal = false"
     >
       <template #content>

src/components/pages/estimate/EstimateList.vue

@@ -2,6 +2,7 @@
 import dateFormat from '/@src/utils/dateFormat'
 import type { iEstimatePageable, iCode } from '/@src/utils/types.ts'
 import regex from '/@src/utils/regex'
+import {number} from "zod";
 export type MinimalTheme = 'darker' | 'light'
 
 const props = withDefaults(
@@ -10,17 +11,20 @@ const props = withDefaults(
     total: number
     length: number
     page: number
+    row: number
   }>(),
   {
     total: 0,
     length: 0,
     page: 0,
+    row: 0,
   },
 )
 
 const emits = defineEmits(['on-search', 'on-tr-click'])
 
 const cates = ref<iCode[]>([])
+const changePage = ref<number>(1)
 
 onMounted(() => {
   api.getCode(4).then((res: iCode[]) => {
@@ -32,8 +36,8 @@ const params = {
   estiStatCd: '',
   title: '',
   mngNm: '',
-  page: 1,
+  page: props.page,
-  row: 10,
+  row: props.row,
 }
 
 function onTabOver(e: any) {
@@ -46,6 +50,11 @@ function onTabLeave(e: any) {
   tr.classList.remove('tab-active')
 }
 
+watch(changePage, (newParams) => {
+  params.page = newParams
+  emits('on-search', params)
+})
+
 </script>
 
 <template>
@@ -172,10 +181,10 @@ function onTabLeave(e: any) {
     </div>
     <!--Table Pagination-->
     <VFlexPagination
-      v-if="length > 5"
+      v-if="total > params.row"
-      v-model:current-page="props.page"
+      v-model:current-page="changePage"
-      :item-per-page="10"
+      :item-per-page="params.row"
-      :max-links-displayed="7"
+      :max-links-displayed="10"
       :total-items="total"
       class="mt-4"
       no-router
@@ -279,7 +288,6 @@ function onTabLeave(e: any) {
   }
 }
 
-
 .datatable-wrapper {
   width: 100%;
 

src/scss/components/_custom-contract.scss

@@ -6,14 +6,14 @@
       .field {
         padding: 0 !important;
         .label {
-          padding: 8px !important;
+          padding: 10px 14px !important;
           //padding: 0 !important;
           margin: 0 !important;
           background-color: var(--primary);
           color: #fff !important;
         }
         .control {
-          padding: 8px !important;
+          padding: 10px 14px !important;
         }
       }
     }
@@ -43,6 +43,10 @@ input {
   margin: 0px;
 }
 
+.datatable-wrapper {
+  margin-top: 10px !important;
+}
+
 .datatable-table {
   th {
     padding: 10px !important;
@@ -51,6 +55,7 @@ input {
   tr {
     padding: 10px !important;
     border: 1px solid var(--fade-grey);
+
     td {
       padding: 5px 10px !important;
       border: 1px solid #ededed;
@@ -87,8 +92,8 @@ a.mouse-pointer {
 }
 
 .fieldset-heading {
-  border-bottom: 1px solid var(--fade-grey) !important;
+  //border-bottom: 1px solid var(--fade-grey) !important;
-  padding-bottom: 10px !important;
+  //padding-bottom: 0px !important;
   h4 {
     font-size: 1.3em;
     color: var(--modal-text) !important;
@@ -129,8 +134,11 @@ a.mouse-pointer {
   border-radius:5px;
   padding:0px 20px;
   margin-bottom:10px;
+  &:first-child {
+    margin-top: 5px;
+  }
   .estimate-file-download, .estimate-file-delete {
-    font-size: 20px;
+    font-size: 17px;
     line-height: 40px;
     padding-left: 30px;
     cursor: pointer;

src/scss/layout/_custom.scss

@@ -13,14 +13,14 @@
 }
 
 .tab-active {
-  background-color: var(--primary) !important;
+  //background-color: var(--primary) !important;
-
+    background-color: #F8F8F8 !important;
 
   td {
-    color: white !important;
+    color: black !important;
 
     .flex-media > .meta > h3 {
-      color: white !important;
+      color: black !important;
     }
   }
 }