mirror of
https://git.hmsn.ink/kospo/svcm/dmz.git
synced 2026-03-20 05:43:33 +09:00
first
This commit is contained in:
385
src/components/pages/contract/ContractView.vue
Normal file
385
src/components/pages/contract/ContractView.vue
Normal file
@@ -0,0 +1,385 @@
|
||||
<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 is-multiline">
|
||||
<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 class="column is-12">
|
||||
<VField horizontal>
|
||||
<VLabel>제목</VLabel>
|
||||
<VControl>
|
||||
<div class="content">
|
||||
<p>{{ props.prcs.title }}</p>
|
||||
</div>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
<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 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 class="column is-12">
|
||||
<VField>
|
||||
<VLabel>첨부파일</VLabel>
|
||||
<VControl>
|
||||
<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 }}
|
||||
</div>
|
||||
<div class="estimate-file-size">
|
||||
{{ 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>
|
||||
</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 is-multiline">
|
||||
<div class="column is-12">
|
||||
<VField>
|
||||
<VLabel>
|
||||
규격
|
||||
</VLabel>
|
||||
<VControl>
|
||||
<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>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/@src/scss/abstracts/all';
|
||||
@import '/@src/scss/components/forms-outer';
|
||||
|
||||
.form-layout {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-fieldset {
|
||||
max-width: 786px;
|
||||
animation: fadeInLeft 0.5s;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 120px !important;
|
||||
}
|
||||
|
||||
.file-cta {
|
||||
padding-left:0em;
|
||||
padding-right:0em;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.datatable-table {
|
||||
tr {
|
||||
border: 1px solid var(--fade-grey);
|
||||
td {
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.file-delete {
|
||||
font-size: 10px;
|
||||
padding-left:5px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fieldset-heading {
|
||||
border-bottom: 1px solid var(--fade-grey) !important;
|
||||
padding-bottom: 10px !important;
|
||||
h4 {
|
||||
font-size: 1.3em;
|
||||
color: var(--modal-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form-outer {
|
||||
padding: 20px !important;
|
||||
border: 1px solid var(--fade-grey) !important;
|
||||
background-color: var(--modal-background) !important;
|
||||
}
|
||||
|
||||
.form-fieldset {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.field{
|
||||
label {
|
||||
color: var(--modal-text) !important;
|
||||
font-weight:bold !important;
|
||||
}
|
||||
p {
|
||||
font-weight: lighter !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
padding: 10px 0;
|
||||
label {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.estimate-file-wrapper {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
border:1px solid #ccc;
|
||||
border-radius:5px;
|
||||
padding:10px 20px;
|
||||
margin-bottom:10px;
|
||||
.estimate-file-download, .estimate-file-delete {
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.estimate-file-img {
|
||||
font-size: 40px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
.estimate-file-name {
|
||||
width: 400px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.estimate-file-size {
|
||||
width: 150px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-trigger {
|
||||
margin-left: 10px;
|
||||
height:15px;
|
||||
padding:10px 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user