From d0c91e6a4472132f6939d601e31d7eb5264b82f7 Mon Sep 17 00:00:00 2001
From: Kasi <zkfwls12@gmail.com>
Date: Wed, 28 May 2025 18:11:05 +0900
Subject: [PATCH] =?UTF-8?q?com=20:=20app.vue=20-=20breadcrumb=20=EC=A3=BC?=
 =?UTF-8?q?=EC=84=9D=20com=20:=20navbar.vue=20-=20=ED=85=8C=EB=A7=88?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=82=AD=EC=A0=9C=20func=20:=20VFlexTable?=
 =?UTF-8?q?=20=EC=BB=A4=EC=8A=A4=ED=85=80=EC=B6=94=EA=B0=80=20fix=20:=20?=
 =?UTF-8?q?=EA=B3=84=EC=95=BD=EA=B4=80=EB=A6=AC,=20=EA=B2=B0=EC=9E=AC?=
 =?UTF-8?q?=ED=95=A8=20=EC=8A=A4=ED=83=80=EC=9D=BC=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app-vuero/VFlexTableCustomize.vue         | 595 ++++++++++++++++++
 src/layouts/navbar.vue                        |   5 -
 src/pages/app.vue                             |  28 +-
 src/pages/app/ApprovalManagement.vue          | 189 +++---
 src/pages/app/contractManagement.vue          |  12 +
 src/pages/app/priceDetail.vue                 |   7 +-
 6 files changed, 694 insertions(+), 142 deletions(-)
 create mode 100644 src/components/app-vuero/VFlexTableCustomize.vue

diff --git a/src/components/app-vuero/VFlexTableCustomize.vue b/src/components/app-vuero/VFlexTableCustomize.vue
new file mode 100644
index 0000000..3f60478
--- /dev/null
+++ b/src/components/app-vuero/VFlexTableCustomize.vue
@@ -0,0 +1,595 @@
+<script setup lang="ts">
+import { type VNode } from 'vue'
+import { flewTableWrapperSymbol } from '../base/VFlexTableWrapper.vue'
+
+export interface VFlexTableColumn {
+  key: string
+  label: string
+  format: (value: any, row: any, index: number) => any
+  renderHeader?: () => VNode
+  renderRow?: (row: any, column: VFlexTableColumn, index: number) => VNode
+  align?: 'start' | 'center' | 'end'
+  bold?: boolean
+  inverted?: boolean
+  scrollX?: boolean
+  scrollY?: boolean
+  grow?: boolean | 'lg' | 'xl'
+  media?: boolean
+  cellClass?: string
+}
+
+export interface VFlexTableProps {
+  data?: any[]
+  columns?: Record<string, string | Partial<VFlexTableColumn>>
+  printObjects?: boolean
+  reactive?: boolean
+  compact?: boolean
+  rounded?: boolean
+  separators?: boolean
+  clickable?: boolean
+  subtable?: boolean
+  noHeader?: boolean
+  usePaymentHeader?: boolean
+}
+
+const emits = defineEmits<{
+  (e: 'rowClick', row: any, index: number): void
+}>()
+const props = withDefaults(defineProps<VFlexTableProps>(), {
+  columns: undefined,
+  usePaymentHeader: false,
+  data: () => [],
+})
+
+const wrapper = inject(flewTableWrapperSymbol, null)
+
+const data = computed(() => {
+  if (wrapper?.data) return wrapper.data
+
+  if (props.reactive) {
+    if (isReactive(props.data)) {
+      return props.data
+    }
+    else {
+      return reactive(props.data)
+    }
+  }
+
+  return toRaw(props.data)
+})
+
+const defaultFormatter = (value: any) => value
+const columns = computed(() => {
+  const columnsSrc = wrapper?.columns ?? props.columns
+  let columns: VFlexTableColumn[] = []
+
+  if (columnsSrc) {
+    for (const [key, label] of Object.entries(columnsSrc)) {
+      if (typeof label === 'string') {
+        columns.push({
+          format: defaultFormatter,
+          label,
+          key,
+        })
+      }
+      else {
+        columns.push({
+          format: defaultFormatter,
+          label: key,
+          key,
+          ...(label as any),
+        })
+      }
+    }
+  }
+  else if (data.value.length > 0) {
+    for (const [key] of Object.entries(data.value[0])) {
+      columns.push({
+        format: defaultFormatter,
+        label: key,
+        key,
+      })
+    }
+  }
+
+  return columns
+})
+
+</script>
+
+<template>
+  <div
+      class="flex-table"
+      :class="[
+      props.compact && 'is-compact',
+      props.rounded && 'is-rounded',
+      props.separators && 'with-separators',
+      props.noHeader && 'no-header',
+      props.clickable && 'is-table-clickable',
+      props.subtable && 'sub-table',
+    ]"
+  >
+    <slot v-if="props.usePaymentHeader" name="payment-header">
+      <div
+        v-if="!props.noHeader"
+        class="flex-table-header"
+      >
+        <template
+          v-for="column in columns"
+          :key="'col' + column.key"
+        >
+          <slot
+            name="header-column"
+            :column="column"
+          >
+            <component
+              :is="{ render: column.renderHeader } as any"
+              v-if="column.renderHeader"
+              :class="[
+                column.grow === true && 'is-grow',
+                column.grow === 'lg' && 'is-grow-lg',
+                column.grow === 'xl' && 'is-grow-xl',
+                column.align === 'end' && 'cell-end',
+                column.align === 'center' && 'cell-center',
+              ]"
+            />
+            <span
+              v-else
+              :class="[
+                column.grow === true && 'is-grow',
+                column.grow === 'lg' && 'is-grow-lg',
+                column.grow === 'xl' && 'is-grow-xl',
+                column.align === 'end' && 'cell-end',
+                column.align === 'center' && 'cell-center',
+              ]"
+            >{{ column.label }}</span>
+          </slot>
+        </template>
+      </div>
+    </slot>
+    <slot v-else name="header">
+      <div
+        v-if="!props.noHeader"
+        class="flex-table-header"
+      >
+        <template
+          v-for="column in columns"
+          :key="'col' + column.key"
+        >
+          <slot
+            name="header-column"
+            :column="column"
+          >
+            <component
+              :is="{ render: column.renderHeader } as any"
+              v-if="column.renderHeader"
+              :class="[
+                column.grow === true && 'is-grow',
+                column.grow === 'lg' && 'is-grow-lg',
+                column.grow === 'xl' && 'is-grow-xl',
+                column.align === 'end' && 'cell-end',
+                column.align === 'center' && 'cell-center',
+              ]"
+            />
+            <span
+              v-else
+              :class="[
+                column.grow === true && 'is-grow',
+                column.grow === 'lg' && 'is-grow-lg',
+                column.grow === 'xl' && 'is-grow-xl',
+                column.align === 'end' && 'cell-end',
+                column.align === 'center' && 'cell-center',
+              ]"
+            >{{ column.label }}</span>
+          </slot>
+        </template>
+      </div>
+    </slot>
+    <slot name="body">
+      <template
+        v-for="(row, index) in data"
+        :key="index"
+      >
+        <slot
+          name="body-row-pre"
+          :row="row"
+          :columns="columns"
+          :index="index"
+        />
+        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+        <div
+          class="flex-table-item"
+          :class="[props.clickable && 'is-clickable']"
+          :tabindex="props.clickable ? 0 : undefined"
+          :role="props.clickable ? 'button' : undefined"
+          @keydown.enter.prevent="
+            () => {
+              props.clickable && emits('rowClick', row, index)
+            }
+          "
+          @click="
+            () => {
+              props.clickable && emits('rowClick', row, index)
+            }
+          "
+        >
+          <slot
+            name="body-row"
+            :row="row"
+            :columns="columns"
+            :index="index"
+          >
+            <template
+              v-for="column in columns"
+              :key="'row' + column.key"
+            >
+              <VFlexTableCell :column="column">
+                <slot
+                  :name="`body-cell-${column.key}`"
+                  :row="row"
+                  :column="column"
+                  :index="index"
+                  :value="column.format(row[column.key], row, index)"
+                >
+                  <component
+                    :is="
+                      {
+                        render: () => column.renderRow?.(row, column, index),
+                      } as any
+                    "
+                    v-if="column.renderRow"
+                  />
+                  <span
+                    v-else-if="
+                      typeof column.format(row[column.key], row, index) === 'object'
+                    "
+                    :class="[
+                      column.cellClass,
+                      column.inverted && 'dark-inverted',
+                      // !column.inverted && (column.bold ? 'dark-text' : 'light-text'),
+                    ]"
+                  >
+                    <details v-if="printObjects">
+                      <div class="language-json py-4">
+                        <pre><code>{{ column.format(row[column.key], row, index) }}</code></pre>
+                      </div>
+                    </details>
+                  </span>
+                  <span
+                    v-else
+                    :class="[
+                      column.cellClass,
+                      column.inverted && 'dark-inverted',
+                      // !column.inverted && (column.bold ? 'dark-text' : 'light-text'),
+                    ]"
+                  >
+                    {{ column.format(row[column.key], row, index) }}
+                  </span>
+                </slot>
+              </VFlexTableCell>
+            </template>
+          </slot>
+        </div>
+        <slot
+          name="body-row-post"
+          :row="row"
+          :columns="columns"
+          :index="index"
+        />
+      </template>
+    </slot>
+  </div>
+</template>
+
+<style lang="scss">
+.flex-table {
+  .flex-table-header {
+    display: flex;
+    align-items: center;
+    padding: 20px 10px;
+    background-color: var(--primary);
+
+    > span,
+    .text {
+      flex: 1 1 0;
+      display: flex;
+      align-items: center;
+      font-size: 1.0rem;
+      font-weight: 600;
+      color: var(--smoke-white);
+      text-transform: uppercase;
+      padding: 0 10px;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+
+      &.is-checkbox {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 30px;
+        max-width: 30px;
+
+        .checkbox {
+          padding: 0;
+
+          > span {
+            height: 22px;
+          }
+        }
+      }
+
+      &.cell-center {
+        justify-content: center;
+      }
+
+      &.cell-end {
+        justify-content: flex-end;
+      }
+
+      &.is-grow {
+        flex-grow: 2;
+      }
+
+      &.is-grow-lg {
+        flex-grow: 3;
+      }
+
+      &.is-grow-xl {
+        flex-grow: 6;
+      }
+
+      a {
+        color: var(--muted-grey);
+      }
+    }
+
+    .checkbox {
+      padding-bottom: 10px;
+      padding-top: 0;
+
+      > span {
+        min-height: 20px;
+      }
+    }
+  }
+  .flex-table-item {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    min-height: 60px;
+    background: var(--white);
+    border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
+    padding: 8px;
+    margin-bottom: 6px;
+
+    &.is-row {
+      border: none;
+      background: transparent;
+    }
+  }
+
+  &.sub-table {
+    .flex-table-item {
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-bottom: 0;
+      min-height: 40px;
+      border: none;
+      background: transparent;
+
+      .table-label {
+        font-family: var(--font);
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        color: var(--light-text);
+      }
+
+      .table-total {
+        font-family: var(--font);
+        color: var(--dark-text);
+        font-weight: 500;
+
+        &.is-bigger {
+          font-size: 1.2rem;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+
+  &.is-compact {
+    .flex-table-item {
+      margin-bottom: 0;
+      border-radius: 0;
+
+      &:not(:last-child) {
+        border-bottom: none;
+      }
+    }
+
+    &.is-rounded {
+      &:not(.no-header) {
+        .flex-table-item {
+          &:nth-of-type(2) {
+            border-radius: 8px 8px 0 0;
+          }
+
+          &:last-child {
+            margin-bottom: 6px;
+            border-radius: 0 0 8px 8px;
+          }
+        }
+      }
+
+      &.no-header {
+        .flex-table-item {
+          &:first-child {
+            border-radius: 8px 8px 0 0;
+          }
+
+          &:last-child {
+            margin-bottom: 6px;
+            border-radius: 0 0 8px 8px;
+          }
+        }
+      }
+    }
+  }
+
+  &:not(.is-compact) {
+    &.is-rounded {
+      .flex-table-item {
+        border-radius: 8px;
+      }
+    }
+  }
+
+  &.is-table-clickable {
+    .flex-table-item {
+      &:hover,
+      &:focus-within {
+        background: var(--widget-grey) !important;
+      }
+    }
+  }
+
+  &.with-separators {
+    .flex-table-item {
+      .flex-table-cell {
+        &:not(:first-of-type) {
+          border-inline-start: solid 1px color-mix(in oklab, var(--fade-grey), black 3%);
+        }
+      }
+    }
+  }
+}
+
+/* ==========================================================================
+2. Flex Table Dark mode
+========================================================================== */
+
+.is-dark {
+  .flex-table {
+    &:not(.sub-table) {
+      .flex-table-item {
+        background: color-mix(in oklab, var(--dark-sidebar), white 6%);
+        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
+      }
+    }
+
+    &.with-separators {
+      .flex-table-item {
+        .flex-table-cell {
+          &:not(:first-of-type) {
+            border-inline-start: dashed 1px color-mix(in oklab, var(--dark-sidebar), white 12%);
+          }
+        }
+      }
+    }
+
+    &.is-table-clickable {
+      .flex-table-item {
+        &:hover,
+        &:focus-within {
+          background: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
+        }
+      }
+    }
+  }
+}
+
+/* ==========================================================================
+3. Media Queries
+========================================================================== */
+
+@media (width <= 767px) {
+  .flex-table {
+    .flex-table-header {
+      display: none;
+    }
+
+    .flex-table-item {
+      flex-direction: column;
+      justify-content: center;
+      width: 100% !important;
+      padding: 20px;
+      margin-bottom: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      > div {
+        border: none !important;
+      }
+    }
+
+    &:not(.sub-table) {
+      .flex-table-item {
+        .flex-table-cell {
+          > span,
+          > small,
+          > strong,
+          > p,
+          > div,
+          > .is-pushed-mobile,
+          > .text {
+            margin-inline-start: auto;
+
+            &.no-push {
+              margin-inline-start: 0 !important;
+            }
+          }
+        }
+
+        &:not(:first-child) {
+          .flex-table-cell {
+            &[data-th] {
+              &::before {
+                content: attr(data-th);
+                font-size: 0.9rem;
+                text-transform: uppercase;
+                font-weight: 500;
+                color: var(--muted-grey);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (width <= 767px) {
+  .flex-table {
+    &.sub-table {
+      padding-top: 16px;
+
+      .is-vhidden {
+        display: none !important;
+      }
+
+      .flex-table-item:not(.is-vhidden) {
+        flex-direction: revert !important;
+      }
+    }
+  }
+}
+
+.paymentColumn1 {
+  min-width: 20%;
+}
+.paymentColumn2 {
+  min-width: 40%;
+}
+.paymentColumn3 {
+  min-width: 10%;
+}
+.paymentColumn4 {
+  min-width: 20%;
+}
+.paymentColumn5 {
+  min-width: 10%;
+}
+</style>
diff --git a/src/layouts/navbar.vue b/src/layouts/navbar.vue
index 9740cbe..e1d59f2 100644
--- a/src/layouts/navbar.vue
+++ b/src/layouts/navbar.vue
@@ -62,11 +62,6 @@ const links = ref<NavbarItem[]>([
     </template>
 
     <template #toolbar>
-      <!--      <LayoutSwitcher class="is-hidden-mobile" />-->
-      <!--      <ToolbarNotification />-->
-      <!--      <ToolbarActivity />-->
-      <ToolbarThemeToggle />
-      <!--      <ToolbarLanguage />-->
       <ToolbarUserProfile right class="ml-2 is-hidden-mobile" />
     </template>
 
diff --git a/src/pages/app.vue b/src/pages/app.vue
index f03f78a..ae943b0 100644
--- a/src/pages/app.vue
+++ b/src/pages/app.vue
@@ -7,24 +7,24 @@ definePage({
     requiresAuth: true,
   },
 })
-const breadcrumb = [
-  {
-    label: '가격조사',
-    hideLabel: true,
-    // use external links
-    link: 'https://vuero.cssninja.io/',
-  },
-  {
-    label: '가격조사',
-    // or generate a router link with 'to' props
-    to: '/components/',
-  }
-]
+// const breadcrumb = [
+//   {
+//     label: '가격조사',
+//     hideLabel: true,
+//     // use external links
+//     link: 'https://vuero.cssninja.io/',
+//   },
+//   {
+//     label: '가격조사',
+//     // or generate a router link with 'to' props
+//     to: '/components/',
+//   }
+// ]
 </script>
 
 <template>
   <Navbar>
-    <VBreadcrumb :items="breadcrumb" separator="succeeds" />
+<!--    <VBreadcrumb :items="breadcrumb" separator="succeeds" />-->
     <RouterView />
   </Navbar>
 </template>
\ No newline at end of file
diff --git a/src/pages/app/ApprovalManagement.vue b/src/pages/app/ApprovalManagement.vue
index 4e9583a..5484729 100644
--- a/src/pages/app/ApprovalManagement.vue
+++ b/src/pages/app/ApprovalManagement.vue
@@ -4,6 +4,9 @@ import type { VFlexTableWrapperSortFunction, VFlexTableWrapperFilterFunction } f
 import { users } from '/src/data/layouts/card-grid-v1'
 import PriceDetail from "/@src/pages/app/priceDetail.vue";
 import {conveterNo, updateApprovalStatus} from "/@src/service/approvalApi.ts";
+import {formatDatefromString} from "/@src/utils/common/comfunc.ts";
+import {getPriceList} from "/@src/service/priceApi.ts";
+import {getContractList} from "/@src/service/contractApi.ts";
 
 
 onBeforeMount(async () => {
@@ -13,6 +16,45 @@ const isModalOpen = ref(false)
 const selectedRow = ref<any>(null)
 const prcsNo = ref<string>('')
 const router = useRouter()
+const totalItems = ref(0)        // 전체 아이템 수
+const currentPage = ref<number>(1)       // 현재 페이지
+const itemsPerPage = 8
+const totalPages = ref(1)
+
+async function getApprovalListData(){
+  const today = new Date()
+  searchParamsList.regSdt = new Date().setDate(today.getDate() - 30)
+  searchParamsList.regEdt = new Date().setDate(today.getDate())
+
+  const priceBase = {
+    params:{
+      regSdt: formatDatefromString(searchParamsList.regSdt),
+      regEdt: formatDatefromString(searchParamsList.regEdt),
+      page: 1,
+      row: itemsPerPage
+    }
+  }
+  const result = await getPriceList(priceBase)
+  params.priceData = result.content
+  //페이지 관련 값 설정
+  totalItems.value = result.totalElements
+  totalPages.value = result.totalPages
+}
+
+const searchApprovalDoc = async (item) => {
+  const searchParams = {
+    params: {
+      title : searchParamsList.title, //제목
+      regSdt: formatDatefromString(searchParamsList.regSdt),//등록시작일
+      regEdt: formatDatefromString(searchParamsList.regEdt),//등록종료일
+      page: item,//페이지
+      row: itemsPerPage //아이템갯수
+    }
+  }
+  const result = await getContractList(searchParams)
+  params.priceData = result.content
+  totalItems.value = result.totalElements
+}
 
 const masks = ref({
   modelValue: 'YYYY-MM-DD',
@@ -34,14 +76,7 @@ const params = reactive({
     },
     { key: 'process', label: '구분', cellClass: 'paymentColumn5' },
   ],
-  flexWrapperColumn: {
-    apprNo: { label: '결재번호', cellClass: 'paymentColumn1', searchable: true, sortable: true },
-    title: { label: '제목', cellClass: 'paymentColumn2', searchable: true, sortable: true },
-    name: { label: '작성자', cellClass: 'paymentColumn3', searchable: true, sortable: true },
-    regDt: { label: '등록일', cellClass: 'paymentColumn4', searchable: true, sortable: true },
-    process: { label: '구분', cellClass: 'paymentColumn5', searchable: true, sortable: true },
-  },
-  paymentParams: [],
+  approvalParams: [],
   rowData: [],
 })
 
@@ -57,10 +92,13 @@ async function getIntegratedPaymentList() {
     sabun: '17131303', // 김진형 17131303, 손원창 17131304
   }
   const result = await getIntegratedApproval(paymentParams)
-  params.paymentParams = result.content.map(item => ({
+  params.approvalParams = result.content.map(item => ({
     ...item,
     process: gubunMap[item.gubun] || '',
   }))
+  //페이지 관련 값 설정
+  totalItems.value = result.totalElements
+  totalPages.value = result.totalPages
 }
 
 async function updateIntegratedPaymentApprovalFunc() {
@@ -95,16 +133,16 @@ const gubunMap = {
 }
 
 const searchApproval = async () => {
-  const paymentParams = {
+  const searchParams = {
     params: {
       title: params.title,
       page: '1',
       row: '10',
     },
   }
-  const result = await getIntegratedApproval(paymentParams)
-  params.paymentParams = result.content
-  console.log(params.paymentParams)
+  const result = await getIntegratedApproval(searchParams)
+  params.approvalParams = result.content
+  console.log(params.approvalParams)
 }
 
 type User = (typeof users)[0]
@@ -271,7 +309,7 @@ const onRowClick2 = (row: any) => {
       </div>
       <div class="datatable-wrapper">
         <ComVFlexTable
-          :data="params.paymentParams"
+          :data="params.approvalParams"
           :columns="params.flexColumn"
           :separators="true"
           :clickable="true"
@@ -308,119 +346,32 @@ const onRowClick2 = (row: any) => {
             <VButton type="submit" color="primary" raised @click="updateIntegratedPaymentApprovalFunc">승인</VButton>
           </template>
         </VModal>
-        <!--        <VFlexTableWrapper :columns="params.flexWrapperColumn" :data="params.paymentParams">-->
-        <!--&lt;!&ndash;-->
-        <!--            Here we retrieve the internal wrapperState.-->
-        <!--            Note that we can not destructure it-->
-        <!--          &ndash;&gt;-->
-        <!--          <template #default="wrapperState">-->
-        <!--            <pre>data: {{ data }}</pre>-->
-        <!--            &lt;!&ndash; We can place any content inside the default slot&ndash;&gt;-->
-        <!--            <VFlexTableToolbar>-->
-        <!--              <template #left>-->
-        <!--                &lt;!&ndash; We can bind wrapperState.searchInput to any input &ndash;&gt;-->
-        <!--                <VField>-->
-        <!--                  <VControl icon="lucide:search">-->
-        <!--                    <input-->
-        <!--                        v-model="wrapperState.searchInput"-->
-        <!--                        type="text"-->
-        <!--                        class="input is-rounded"-->
-        <!--                        placeholder="Filter..."-->
-        <!--                    >-->
-        <!--                  </VControl>-->
-        <!--                </VField>-->
-        <!--              </template>-->
 
-        <!--              <template #right>-->
-        <!--                &lt;!&ndash; We can also bind wrapperState.limit &ndash;&gt;-->
-        <!--                <VField>-->
-        <!--                  <VControl>-->
-        <!--                    <div class="select is-rounded">-->
-        <!--                      <select v-model="wrapperState.limit">-->
-        <!--                        <option :value="1">-->
-        <!--                          1 results per page-->
-        <!--                        </option>-->
-        <!--                        <option :value="10">-->
-        <!--                          10 results per page-->
-        <!--                        </option>-->
-        <!--                        <option :value="15">-->
-        <!--                          15 results per page-->
-        <!--                        </option>-->
-        <!--                        <option :value="25">-->
-        <!--                          25 results per page-->
-        <!--                        </option>-->
-        <!--                        <option :value="50">-->
-        <!--                          50 results per page-->
-        <!--                        </option>-->
-        <!--                      </select>-->
-        <!--                    </div>-->
-        <!--                  </VControl>-->
-        <!--                </VField>-->
-        <!--              </template>-->
-        <!--            </VFlexTableToolbar>-->
-
-        <!--            &lt;!&ndash;-->
-        <!--              The VFlexTable "data" and "columns" props-->
-        <!--              will be inherited from parent VFlexTableWrapper-->
-        <!--            &ndash;&gt;-->
-        <!--            <VFlexTable rounded>-->
-        <!--              &lt;!&ndash; Custom "name" cell content &ndash;&gt;-->
-        <!--              <template #body-cell="{ row, column }">-->
-        <!--                <template v-if="column.key === 'name'">-->
-        <!--                  <VAvatar-->
-        <!--                      size="medium"-->
-        <!--                      :picture="row.medias.avatar"-->
-        <!--                      :badge="row.medias.badge"-->
-        <!--                      :initials="row.initials"-->
-        <!--                  />-->
-        <!--                  <div>-->
-        <!--              <span class="dark-text" :title="row.name">-->
-        <!--                {{ row?.shortname }}-->
-        <!--              </span>-->
-        <!--                    <VTextEllipsis-->
-        <!--                        width="280px"-->
-        <!--                        class="light-text"-->
-        <!--                        :title="row.bio"-->
-        <!--                    >-->
-        <!--                      <small>{{ row?.bio }}</small>-->
-        <!--                    </VTextEllipsis>-->
-        <!--                  </div>-->
-        <!--                </template>-->
-        <!--              </template>-->
-        <!--            </VFlexTable>-->
-
-        <!--            &lt;!&ndash; Table Pagination with wrapperState.page binded&ndash;&gt;-->
-        <!--            <VFlexPagination-->
-        <!--                v-model:current-page="wrapperState.page"-->
-        <!--                class="mt-6"-->
-        <!--                :item-per-page="wrapperState.limit"-->
-        <!--                :total-items="wrapperState.total"-->
-        <!--                :max-links-displayed="5"-->
-        <!--                no-router-->
-        <!--            />-->
-        <!--          </template>-->
-        <!--        </VFlexTableWrapper>-->
+        <VFlexPagination
+            :item-per-page="itemsPerPage"
+            :total-items="totalItems"
+            v-model:current-page="currentPage"
+        />
       </div>
     </div>
-    <!--    <VButtons class="v-buttons-right-align">-->
-    <!--      <VButton-->
-    <!--          color="primary"-->
-    <!--          icon="fas fa-plus"-->
-    <!--          elevated-->
-    <!--          to="/app/PriceInsert"-->
-    <!--      >-->
-    <!--        등록-->
-    <!--      </VButton>-->
-    <!--    </VButtons>-->
   </div>
 </template>
 
 <style scoped lang="scss">
+.datatable-toolbar {
+  padding: 1rem 1.5rem;
+  margin: 0 0 2rem 0;
+}
+
+.flex-table .flex-table-item {
+  min-height: 3rem;
+}
+
 input[readonly] {
-  background-color: #f5f5f5;     /* 살짝 회색 배경 */
-  color: #888;                   /* 글자색 연하게 */
-  cursor: not-allowed;           /* 마우스 커서 변경 */
-  border-color: #e0e0e0;         /* 테두리 연하게 */
+  background-color: #f5f5f5;
+  color: #888;
+  cursor: not-allowed;
+  border-color: #e0e0e0;
 }
 
 .v-buttons-right-align {
diff --git a/src/pages/app/contractManagement.vue b/src/pages/app/contractManagement.vue
index 52cc7ec..683e87a 100644
--- a/src/pages/app/contractManagement.vue
+++ b/src/pages/app/contractManagement.vue
@@ -207,3 +207,15 @@ function getContractDetail(){
     </VButtons>
   </div>
 </template>
+
+<style scoped lang="scss">
+.datatable-toolbar {
+  padding: 1rem 1.5rem;
+  margin: 0 0 2rem 0;
+}
+
+.flex-table .flex-table-item {
+  min-height: 3rem;
+}
+
+</style>
diff --git a/src/pages/app/priceDetail.vue b/src/pages/app/priceDetail.vue
index 940881a..6d656f2 100644
--- a/src/pages/app/priceDetail.vue
+++ b/src/pages/app/priceDetail.vue
@@ -326,7 +326,7 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
             <td>견적서확인</td>
             <td colspan="9">
               <slot name="status"
-                    v-if="!params.svyYn"
+                    v-if="params.stCd == '0100'"
               >
               <div style="display: flex; justify-content: flex-end; gap: 8px;">
               <VButton
@@ -340,7 +340,7 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
               </div>
               </slot>
               <div class="mt-2">
-                <ComVFlexTable
+                <VFlexTableCustomize
                     :key="params.prcsBizs.length"
                     :data="params.prcsBizs"
                     :columns="params.prcsBizsColumn"
@@ -373,13 +373,12 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
                   </template>
                   <!-- 나머지 컬럼만 이 슬롯 사용 -->
                   <template #body-cell="{ column, index, value, row }">
-                    <pre>{{ row.sendYn }}</pre>
                     <div>
                       <span v-if="column.key=='num'">{{index + 1}}</span>
                       <span v-else>{{ value }}</span>
                     </div>
                   </template>
-                </ComVFlexTable>
+                </VFlexTableCustomize>
               </div>
             </td>
           </tr>