dmz/src/components/pages/estimate/Estimate.vue

<script lang="ts" setup>
import type { iEstimate, iEstimateList, iEstimatePageable, iPbAtt } from '/@src/utils/types'

const notyf = useNotyf()

const page = ref(1)
const total = ref(1)
const length = ref(0)
const select = ref<iEstimate>({})
const updateModal = ref(false)
const viewModal = ref(false)
const ests = ref<iEstimate[]>([])
const pbAtts = ref<iPbAtt[]>([])

const params = ref({
  title: '',
  estStatCd: '',
  mngNm: '',
  page: 1,
  row: 5,
})

const estimateList = ref<iEstimatePageable>()

onMounted(() => {
  api.getEstimate(params.value).then((res: iEstimatePageable) => {
    estimateList.value = res
    page.value = estimateList.value.totlaPages
    total.value = estimateList.value.totalElements
    length.value = estimateList.value.content.length
    params.value.page = 1
  })
})

function onTrClick(data: iEstimate) {
  api.getPrc(data.prcsNo).then((res: iEstimate) => {
    select.value = res
    if (res.estStatCd === '0100') {
      updateModal.value = true
    }
    else {
      viewModal.value = true
    }
  })
}

function onSearch(data: any) {
  params.value = structuredClone(data)
}

const setData = (data: iEstimate[]) => {
  console.log(data)
  ests.value = data
}

const setAttData = (data: iPbAtt[]) => {
  pbAtts.value = data
}

const onEstimateUpdate = () => {
  console.log('Form submitted!')
  /*kcb 인증후 추가*/
  notyf.dismissAll()
  api.updateEstimate(<iEstimateList>{ estimates: ests.value, pbAtts: pbAtts.value }).then((res: iEstimateList) => {
    notyf.primary('수정 되었습니다.')
    updateModal.value = false
    /*데이터 갱신*/
    if (res.estimates.length > 0) {
      const reTotAmt = res.estimates.reduce((a, b) => {
        return a + b.amt
      }, 0)
      estimateList.value?.content.forEach((est: iEstimate) => {
        if (est.prcsNo === select.value?.prcsNo) {
          est.totAmt = reTotAmt
        }
      })
    }
  }).catch((res) => {
    notyf.error(res.response._data.body)
  })
}

watch(params, (newValue) => {
  api.getEstimate(newValue).then((res: iEstimatePageable) => {
    estimateList.value = res
    page.value = estimateList.value.totlaPages
    total.value = estimateList.value.totalElements
    length.value = estimateList.value.content.length
    params.value.page = 1
  }).catch((res) => {
    notyf.error(res.response._data.body)
  })
})

</script>

<template>
  <div>
    <EstimateList
      v-if="estimateList !== undefined"
      :length="length"
      :page="page"
      :row="params.row"
      :estimateList="estimateList"
      :total="total"
      @on-search="onSearch"
      @on-tr-click="onTrClick"
    />
    <VModal
      is="form"
      :open="updateModal"
      novalidate
      title="견적 수정"
      actions="center"
      cancel-label="취소"
      size="full"
      @close="updateModal = false"
    >
      <template #content>
        <EstimateUpdate
          :estimate="select"
          @setData="setData"
          @setAttData="setAttData"
        />
      </template>
      <template #action>
        <VButton
          color="primary"
          raised
          @click="onEstimateUpdate"
        >
          수정
        </VButton>
      </template>
    </VModal>
    <VModal
      is="form"
      :open="viewModal"
      novalidate
      title="견적 상세보기"
      actions="center"
      cancel-label="취소"
      size="full"
      @close="viewModal = false"
    >
      <template #content>
        <EstimateView
          :estimate="select"
        />
      </template>
    </VModal>
  </div>
</template>

<style lang="scss">
.text-right {
  text-align:right !important;
}
.text-center {
  text-align:center !important;
}
.modal-card-body {
  height: 50vh;
}
</style>