mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 03:02:31 +09:00
610 lines
18 KiB
Vue
610 lines
18 KiB
Vue
<script setup lang="ts">
|
|
|
|
import axios from 'axios'
|
|
import {saveContract} from "/@src/service/contract.ts";
|
|
import type {iPbAtt} from "/@src/utils/types.ts";
|
|
import {useRouter} from "vue-router";
|
|
|
|
const registerFormOpen = ref(false)
|
|
const loading = ref(false)
|
|
const notyf = useNotyf()
|
|
const router = useRouter()
|
|
const params = reactive({
|
|
cateCd: '',
|
|
contNo: '',
|
|
title: '',
|
|
compNm: '',
|
|
signDt: '',
|
|
contAmt: '',
|
|
contStatCd: '',
|
|
contStat: '',
|
|
regsabun: '',
|
|
regNm: '',
|
|
regDt: '',
|
|
reason: '',
|
|
page: 1,
|
|
row: 10,
|
|
flexColumn: [],
|
|
modalColumn: [],
|
|
contAtts: [], //첨부파일 데이터
|
|
})
|
|
|
|
const completedPriceDataParams = reactive({
|
|
prcsNo:'',
|
|
cateCd:'',
|
|
cateNm:'',
|
|
bizNo:'',
|
|
compNm:'',
|
|
title:'',
|
|
content:'',
|
|
regSdat:'',
|
|
regEdat:'',
|
|
regSabun:'',
|
|
regNm:'',
|
|
regDt:'',
|
|
contAmt:'',
|
|
stCd:'',
|
|
stNm:'',
|
|
svyDt:'',
|
|
reason:'',
|
|
estimates: [],
|
|
excYn: false,
|
|
page: 1,
|
|
row: 5,
|
|
})
|
|
|
|
params.modalColumn = [
|
|
{ key: 'cateNm', label: '분야' },
|
|
{ key: 'title', label: '제목' },
|
|
{ key: 'regNm', label: '담당자' },
|
|
{ key: 'stNm', label: '등록상태' },
|
|
{ key: 'title', label: '비고' },
|
|
{ key: 'regNm', label: '선택' },
|
|
]
|
|
|
|
const selectedCode = ref()
|
|
const priceSearchCheckBoxStatus = ref(false)
|
|
|
|
const data = reactive({
|
|
contractData: [],
|
|
completedPriceSearchData: [],
|
|
})
|
|
|
|
const isLoading = ref(false)
|
|
watch(registerFormOpen, async (isOpen) => {
|
|
if (isOpen) {
|
|
isLoading.value = true
|
|
// error.value = null
|
|
try {
|
|
const priceSearchDataRespone = await axios.get('/api/cont/prcs')
|
|
data.completedPriceSearchData = Array.isArray(priceSearchDataRespone.data) ? priceSearchDataRespone.data : []
|
|
}
|
|
catch (error) {
|
|
console.log(error)
|
|
data.priceData = []
|
|
}
|
|
}
|
|
})
|
|
|
|
function formatMonthDate(dateStr) {
|
|
if (!dateStr) return ''
|
|
const date = new Date(dateStr)
|
|
return date.toLocaleDateString('ko-KR', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
}).replace(/\./g, '-').replace(/\s/g, '').replace(/-$/, '')
|
|
}
|
|
|
|
function getDateDiff(start, end) {
|
|
if (!start || !end) return null
|
|
const startDate = new Date(start)
|
|
const endDate = new Date(end)
|
|
const diff = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24))
|
|
return diff >= 0 ? diff + 1 : null
|
|
}
|
|
|
|
const contractPeriod = computed(() => {
|
|
const start = completedPriceDataParams.regSdat
|
|
const end = completedPriceDataParams.regEdat
|
|
const startStr = formatMonthDate(start)
|
|
const endStr = formatMonthDate(end)
|
|
const diff = getDateDiff(start, end)
|
|
if (startStr && endStr && diff) {
|
|
return `${startStr} ~ ${endStr} (${diff}일)`
|
|
}
|
|
else if (startStr && endStr) {
|
|
return `${startStr} ~ ${endStr}`
|
|
}
|
|
else if (startStr) {
|
|
return `${startStr} ~`
|
|
}
|
|
else if (endStr) {
|
|
return `~ ${endStr}`
|
|
}
|
|
else {
|
|
return ''
|
|
}
|
|
})
|
|
|
|
|
|
function handlePriceRowClick(row) {
|
|
completedPriceDataParams.prcsNo = row.prcsNo || ''
|
|
completedPriceDataParams.cateCd = row.cateCd || ''
|
|
completedPriceDataParams.cateNm = row.cateNm || ''
|
|
completedPriceDataParams.title = row.title || ''
|
|
completedPriceDataParams.content = row.content || ''
|
|
completedPriceDataParams.regSdat = row.regSdat || ''
|
|
completedPriceDataParams.regEdat = row.regEdat || ''
|
|
completedPriceDataParams.regSabun = row.regSabun || ''
|
|
completedPriceDataParams.regNm = row.regNm || ''
|
|
completedPriceDataParams.regDt = row.regDt || ''
|
|
completedPriceDataParams.stCd = row.stCd || ''
|
|
completedPriceDataParams.stNm = row.stNm || ''
|
|
completedPriceDataParams.svyDt = row.svyDt || ''
|
|
completedPriceDataParams.reason = row.reason || ''
|
|
|
|
selectedCode.value = row.cateCd || ''
|
|
completedPriceDataParams.estimates = row.estimates || []
|
|
|
|
if (row.estimates && row.estimates.length > 0) {
|
|
const minEstimate = row.estimates.reduce((min, curr) => curr.amt < min.amt ? curr : min, row.estimates[0])
|
|
completedPriceDataParams.bizNo = minEstimate.bizNo || ''
|
|
completedPriceDataParams.compNm = minEstimate.compNm || ''
|
|
completedPriceDataParams.contAmt = minEstimate.amt || ''
|
|
} else {
|
|
completedPriceDataParams.bizNo = ''
|
|
completedPriceDataParams.compNm = ''
|
|
completedPriceDataParams.contAmt = ''
|
|
notyf.error("견적서가 없습니다.")
|
|
}
|
|
|
|
registerFormOpen.value = false
|
|
console.log(row)
|
|
console.log(completedPriceDataParams.contAmt)
|
|
}
|
|
|
|
const showFileInputs = ref(false)
|
|
const fileInputs = ref([
|
|
{ file: null, description: '시행 품의문' },
|
|
{ file: null, description: '소액수의계약서' },
|
|
{ file: null, description: '수의계약 체결 제한 여부 확인서' },
|
|
{ file: null, description: '퇴직자 재직여부 확인서' },
|
|
{ file: null, description: '인지세 납부확인서' },
|
|
{ file: null, description: '정부권장정책 이행 구매 검토서' },
|
|
{ file: null, description: '기타' }
|
|
])
|
|
|
|
const saveContOne = async () => {
|
|
let res = null
|
|
try{
|
|
loading.value = true
|
|
// if (!validation()) {
|
|
// return;
|
|
// }
|
|
const paramsCont ={
|
|
prcsNo: completedPriceDataParams.prcsNo,
|
|
bizNo: completedPriceDataParams.bizNo,
|
|
cateCd: priceSearchCheckBoxStatus.value ? selectedCode.value : completedPriceDataParams.cateCd,
|
|
compNm: completedPriceDataParams.compNm,
|
|
title: completedPriceDataParams.title,
|
|
regSdat: formatMonthDate(completedPriceDataParams.regSdat),
|
|
regEdat: formatMonthDate(completedPriceDataParams.regEdat),
|
|
contAmt: completedPriceDataParams.contAmt,
|
|
signDt: formatMonthDate(completedPriceDataParams.regSdat),
|
|
reason: completedPriceDataParams.reason,
|
|
excYn: priceSearchCheckBoxStatus.value, // 가격조사 예외여부 확인필요
|
|
contAtts: params.contAtts,
|
|
}
|
|
console.log(pbAtts)
|
|
res = await saveContract(paramsCont)
|
|
|
|
if(res.request.status == '200'){
|
|
notyf.primary('등록 되었습니다.')
|
|
// router.push({path: '/app/contractManagement'})
|
|
}
|
|
}catch(e){
|
|
notyf.error(e.message)
|
|
}finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const pbAtts = ref<iPbAtt[]>(params.contAtts)
|
|
|
|
const onFileChange = (e, idx) => {
|
|
const file = e.target.files[0]
|
|
if (!file) return
|
|
const reader = new FileReader()
|
|
reader.onload = () => {
|
|
const result = reader.result
|
|
const pbAtt = {
|
|
prcsNo: completedPriceDataParams.prcsNo,
|
|
logiFnm: file.name,
|
|
size: file.size,
|
|
data: result.split(',')[1],
|
|
}
|
|
// 인덱스별로 파일 저장
|
|
pbAtts.value[idx] = pbAtt
|
|
console.log(pbAtts)
|
|
console.log(pbAtts.value[0].logiFnm)
|
|
}
|
|
reader.readAsDataURL(file)
|
|
}
|
|
|
|
function resetForm() {
|
|
completedPriceDataParams.prcsNo = ''
|
|
completedPriceDataParams.bizNo = ''
|
|
completedPriceDataParams.compNm = ''
|
|
completedPriceDataParams.title = ''
|
|
completedPriceDataParams.regSdat = ''
|
|
completedPriceDataParams.regEdat = ''
|
|
completedPriceDataParams.contAmt = ''
|
|
completedPriceDataParams.reason = ''
|
|
selectedCode.value = ''
|
|
pbAtts.value = []
|
|
// 기타 입력값도 여기에 추가
|
|
}
|
|
|
|
watch(
|
|
() => priceSearchCheckBoxStatus.value,
|
|
() => {resetForm()}
|
|
)
|
|
|
|
function routerMove() {
|
|
router.push({path: '/app/contractManagement'})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-content is-navbar-lg">
|
|
<div class="datatable-wrapper">
|
|
<div class="table-container">
|
|
<table class="table datatable-table is-fullwidth">
|
|
<colgroup>
|
|
<col style="width: 10%;">
|
|
<col style="width: 20%;">
|
|
<col style="width: 20%;">
|
|
<col style="width: 10%;">
|
|
<col style="width: 10%;">
|
|
<col style="width: 20%;">
|
|
<col style="width: 10%;">
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<td>분야</td>
|
|
<td>
|
|
<span class="colum">
|
|
<VField class="">
|
|
<VCodeSelect
|
|
v-model="selectedCode"
|
|
cd_grp="5"
|
|
:disabled="!priceSearchCheckBoxStatus"
|
|
/></VField>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<VButton
|
|
color="primary"
|
|
@click="registerFormOpen = true"
|
|
>
|
|
가격조사 가져오기
|
|
</VButton>
|
|
<VModal
|
|
is="form"
|
|
:open="registerFormOpen"
|
|
title="계약관리 등록"
|
|
size="contract-big"
|
|
actions="right"
|
|
>
|
|
<template #content>
|
|
<div class="modal-form">
|
|
<ComVFlexTable
|
|
:data="data.completedPriceSearchData"
|
|
:columns="params.modalColumn"
|
|
:compact="true"
|
|
:separators="true"
|
|
@row-click="handlePriceRowClick"
|
|
clickable
|
|
/>
|
|
</div>
|
|
</template>
|
|
</VModal>
|
|
</td>
|
|
<td>
|
|
<VField class="is-flex">
|
|
<VControl raw subcontrol>
|
|
<VCheckbox
|
|
label="예외사유"
|
|
color="info"
|
|
v-model="priceSearchCheckBoxStatus"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
</td>
|
|
<td colspan="3">
|
|
<div class="column is-fullhd">
|
|
<VField>
|
|
<VControl>
|
|
<input
|
|
v-model="completedPriceDataParams.reason"
|
|
class="input custom-text-filter"
|
|
placeholder="가격조사 안했을 시 예외 사유 입력(필수)"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>계약명</td>
|
|
<td colspan="6">
|
|
<VField>
|
|
<VControl>
|
|
<input
|
|
v-model="completedPriceDataParams.title"
|
|
class="input custom-text-filter"
|
|
placeholder="계약명"
|
|
:disabled="!priceSearchCheckBoxStatus"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>계약상대자</td>
|
|
<td>
|
|
<VField>
|
|
<VControl>
|
|
<input
|
|
v-model="completedPriceDataParams.bizNo"
|
|
class="input custom-text-filter"
|
|
placeholder="사업자번호"
|
|
:disabled="!priceSearchCheckBoxStatus"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</td>
|
|
<td>
|
|
<VField>
|
|
<VControl>
|
|
<input
|
|
v-model="completedPriceDataParams.compNm"
|
|
class="input custom-text-filter"
|
|
placeholder="업체명"
|
|
:disabled="!priceSearchCheckBoxStatus"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</td>
|
|
<td>
|
|
<VButton color="warning">
|
|
부정당 확인
|
|
</VButton>
|
|
</td>
|
|
<td>
|
|
<VButton color="success">
|
|
정상
|
|
</VButton>
|
|
</td>
|
|
<td>
|
|
<VButton color="warning">
|
|
분할계약 확인
|
|
</VButton>
|
|
</td>
|
|
<td>
|
|
<VButton color="success">
|
|
정상
|
|
</VButton>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>계약체결일</td>
|
|
<td>
|
|
<VField>
|
|
<VControl>
|
|
<input
|
|
:value="formatMonthDate(completedPriceDataParams.regSdat)"
|
|
class="input custom-text-filter"
|
|
placeholder="계약체결일"
|
|
:disabled="!priceSearchCheckBoxStatus"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</td>
|
|
<td>
|
|
<VButton
|
|
color="primary"
|
|
>
|
|
계 약 금 액
|
|
</VButton>
|
|
</td>
|
|
<td colspan="2">
|
|
<VField>
|
|
<VControl>
|
|
<input
|
|
v-model="completedPriceDataParams.contAmt"
|
|
class="input custom-text-filter"
|
|
placeholder="금액"
|
|
:disabled="!priceSearchCheckBoxStatus"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</td>
|
|
<td colspan="1">
|
|
<span class="colum">
|
|
<VField>
|
|
<VSelect>
|
|
<VOption value="">
|
|
수의계약 사유
|
|
</VOption>
|
|
</VSelect>
|
|
</VField>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<VButton>근거</VButton>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>계약기간</td>
|
|
<td colspan="1">
|
|
<div>
|
|
<div>
|
|
<VDatePicker
|
|
v-model="completedPriceDataParams.regSdat"
|
|
color="green"
|
|
trim-weeks
|
|
>
|
|
<template #default="{ inputValue, inputEvents }">
|
|
<VField>
|
|
<VControl icon="lucide:calendar">
|
|
<input
|
|
class="input v-input"
|
|
type="text"
|
|
:value="inputValue"
|
|
placeholder="시작일"
|
|
v-on="inputEvents"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
</VDatePicker>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td colspan="1">
|
|
<div class="">
|
|
<div>
|
|
<VDatePicker
|
|
v-model="completedPriceDataParams.regEdat"
|
|
color="green"
|
|
trim-weeks
|
|
>
|
|
<template #default="{ inputValue, inputEvents }">
|
|
<VField>
|
|
<VControl icon="lucide:calendar">
|
|
<input
|
|
class="input v-input"
|
|
type="text"
|
|
:value="inputValue"
|
|
placeholder="종료일"
|
|
v-on="inputEvents"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
</VDatePicker>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td colspan="5">
|
|
계약기간 : {{ contractPeriod }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>첨부파일</td>
|
|
<td colspan="1">
|
|
<VButton color="info" @click="showFileInputs = !showFileInputs">
|
|
등록
|
|
</VButton>
|
|
</td>
|
|
<td colspan="5">
|
|
<!-- 첨부파일 입력영역: 등록 버튼 클릭 시 토글 -->
|
|
<div v-if="showFileInputs" class="file-upload-list" style="margin-top:10px;">
|
|
<div
|
|
v-for="(input, idx) in fileInputs"
|
|
:key="idx"
|
|
style="display: flex; align-items: center; margin-bottom: 8px;"
|
|
>
|
|
<!-- 파일선택 -->
|
|
<label class="file-label" style="margin-right: 10px;">
|
|
<input
|
|
type="file"
|
|
class="file-input"
|
|
@change="(e) => onFileChange(e, idx)"
|
|
/>
|
|
<span class="file-cta">파일선택</span>
|
|
</label>
|
|
<span style="flex:1; margin-right: 10px;">
|
|
{{ pbAtts[idx] == null ? '' : pbAtts[idx].logiFnm }}
|
|
</span>
|
|
<span style="flex:2; color: #666;">{{ input.description }}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="bottom-button">
|
|
<VButton @click="saveContOne">저 장</VButton>
|
|
<VButton @click="routerMove">취 소</VButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.table tbody td {
|
|
color: var(--smoke-white);
|
|
}
|
|
.datatable-table {
|
|
td{
|
|
font-family: var(--font),serif;
|
|
vertical-align: middle;
|
|
padding: 4px 12px;
|
|
border-bottom: 1px solid var(--fade-grey);
|
|
}
|
|
|
|
td:nth-child(1) {
|
|
background-color: var(--primary);
|
|
text-align: center;
|
|
}
|
|
|
|
tr:nth-child(3) {
|
|
text-align: center;
|
|
}
|
|
|
|
tr td button{
|
|
width: 100%;
|
|
}
|
|
|
|
tr:nth-child(5) > td:nth-child(4) {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
.bottom-button {
|
|
text-align: center;
|
|
button {
|
|
background-color: cornflowerblue;
|
|
margin: 10px;
|
|
font-weight: bold;
|
|
border-color: var(--primary);
|
|
color: white;
|
|
}
|
|
}
|
|
button:nth-child(2) {
|
|
background-color: #AB9A6c;
|
|
}
|
|
button:nth-child(3) {
|
|
background-color: silver;
|
|
}
|
|
.field {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.file-label {
|
|
cursor: pointer;
|
|
}
|
|
.file-input {
|
|
display: none;
|
|
}
|
|
.file-cta {
|
|
background: #eee;
|
|
padding: 4px 12px;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|