dmz/src/components/pages/contract/ContractView.vue

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

const props = defineProps<{
  prcs: iPrcs
}>()

const emits = defineEmits(['setData', 'setAttData'])

const userSession = useUserSession()
const user = <UserData>userSession.user

const mng = ref('홍길동')

const pbAtts = ref<iPbAtt[]>([])

const estimates = ref<iEstimate[]>(props.prcs.dtlSpecs.map((spec: iDtlSpec) => {
  return {
    prcsNo: spec.prcsNo,
    dtlSpNo: spec.dtlSpNo,
    bizNo: user.bizNo,
    mngNm: mng.value,
    unitPrc: 0,
    qty: spec.qty,
    amt: 0,
  }
}))

const onFileClick = () => {
  const input = <any> document.querySelector('.file-input')
  input.click()
}

const onFileChange = (e: any) => {
  Array.from(e.target.files).forEach((file: any) => {
    const reader = new FileReader()
    reader.onload = () => {
      const url: any = reader.result
      const pbAtt = <iPbAtt>{
        logiFnm: file.name,
        size: file.size,
        data: url.split(',')[1],
      }
      pbAtts.value.push(pbAtt)
    }

    reader.readAsDataURL(file)
  })
}

const onPrcsFileDownload = (prcsNo: string, fileOrd: number, logiFnm: string) => {
  api.downloadPrcsFile(prcsNo, fileOrd).then((res) => {
    const url = window.URL.createObjectURL(res)
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', logiFnm)
    document.body.appendChild(link)
    link.click()
    link.remove()
  })
}

const onFilDelete = (fileOrd: number) => {
  pbAtts.value.splice(fileOrd, 1)
}

const totPrc = computed(() => {
  return estimates.value.map((item: iEstimate) => {
    item.amt = item.unitPrc * item.qty
    return item.amt
  })
})

watch(estimates.value, (newValue) => {
  emits('setData', newValue)
})

watch(pbAtts.value, (newValue) => {
  emits('setAttData', newValue)
})
</script>

<template>
  <form
    method="post"
    novalidate
    class="form-layout"
  >
    <div class="form-body">
      <!--Fieldset-->
<!--      <div class="form-fieldset">-->
<!--        <div class="form-outer">-->
<!--          <div class="fieldset-heading">-->
<!--            <h4>업체정보</h4>-->
<!--          </div>-->
<!--          <div class="columns is-multiline">-->
<!--            <div class="column is-12">-->
<!--              <VField>-->
<!--                <VLabel>회사명</VLabel>-->
<!--                <VControl>-->
<!--                  <div class="content">-->
<!--                    <p>{{ user.compNm }}</p>-->
<!--                  </div>-->
<!--                </VControl>-->
<!--              </VField>-->
<!--            </div>-->
<!--            <div class="column is-6">-->
<!--              <VField>-->
<!--                <VLabel>사업자번호</VLabel>-->
<!--                <VControl>-->
<!--                  <div class="content">-->
<!--                    <p>{{ user.bizNo }}</p>-->
<!--                  </div>-->
<!--                </VControl>-->
<!--              </VField>-->
<!--            </div>-->
<!--            <div class="column is-6">-->
<!--              <VField>-->
<!--                <VLabel>대표자명</VLabel>-->
<!--                <VControl>-->
<!--                  <div class="content">-->
<!--                    <p>{{ user.repNm }}</p>-->
<!--                  </div>-->
<!--                </VControl>-->
<!--              </VField>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <!--Fieldset-->
      <div class="form-fieldset">
        <div class="form-outer">
          <div class="fieldset-heading">
            <h4>가격조사</h4>
          </div>
          <div class="columns">
            <div class="column is-6">
              <VField horizontal>
                <VLabel>No</VLabel>
                <VControl>
                  <div class="content">
                    <p>{{ props.prcs.prcsNo }}</p>
                  </div>
                </VControl>
              </VField>
            </div>
            <div class="column is-6">
              <VField horizontal>
                <VLabel>분야</VLabel>
                <VControl>
                  <div class="content">
                    <p>{{ props.prcs.cateNm }}</p>
                  </div>
                </VControl>
              </VField>
            </div>
          </div>
          <div class="columns">
            <div class="column is-12">
              <VField horizontal>
                <VLabel>제목</VLabel>
                <VControl>
                  <div class="content">
                    <p>{{ props.prcs.title }}</p>
                  </div>
                </VControl>
              </VField>
            </div>
          </div>
          <div class="columns">
            <div class="column is-12">
              <VField horizontal>
                <VLabel>내용</VLabel>
                <VControl>
                  <div class="content">
                    <p class="text-pre-line">
                      {{ props.prcs.content }}
                    </p>
                  </div>
                </VControl>
              </VField>
            </div>
          </div>
          <div class="columns">
            <div class="column is-12">
              <VField horizontal>
                <VLabel>등록기간</VLabel>
                <VControl>
                  <div class="content">
                    <p>{{ props.prcs.regSdat }} ~ {{ props.prcs.regEdat }}</p>
                  </div>
                </VControl>
              </VField>
            </div>
          </div>
          <div class="columns">
            <div class="column is-12">
              <VField>
                <VLabel>첨부파일</VLabel>
                <div
                  v-for="f in props.prcs.prcsAtts"
                  :key="f.logiFnm"
                  class="content estimate-file-wrapper"
                >
<!--                    <div>-->
<!--                      <i class="fa fa-file-pdf estimate-file-img" style="font-size:40px;" />-->
<!--                    </div>-->
                  <div class="estimate-file-name">
                    {{ f.logiFnm }} ({{ Math.ceil(f.size / 1024) }}kb)
                  </div>
                  <div>
                    <i class="fa fa-download estimate-file-download" @click="onPrcsFileDownload(f.prcsNo, f.fileOrd, f.logiFnm)" />
                  </div>
                </div>
              </VField>
            </div>
          </div>
          <div class="fieldset-heading">
            <h4>상세 규격</h4>
          </div>
          <div class="columns is-multiline">
            <div class="column is-12">
              <VField>
                <div class="datatable-wrapper">
                  <div class="table-container">
                    <table class="table datatable-table is-fullwidth">
                      <thead>
                        <th>순번</th>
                        <th>품명</th>
                        <th>규격</th>
                        <th>수량</th>
                        <th>단위</th>
                        <th>단가</th>
                        <th>금액</th>
                      </thead>
                      <tbody v-for="(dtl, index) in props.prcs.dtlSpecs" :key="dtl.dtlSpNo">
                        <tr>
                          <td>{{ index + 1 }}</td>
                          <td>{{ dtl.itemNm }}</td>
                          <td>{{ dtl.spec }}</td>
                          <td>{{ dtl.qty }}</td>
                          <td>{{ dtl.unit }}</td>
                          <td>0</td>
                          <td>{{ totPrc[index] || 0 }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </VField>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<style lang="scss" scoped>
@import '/@src/scss/abstracts/all';
@import '/@src/scss/components/forms-outer';
@import '/@src/scss/components/custom-contract';
</style>