mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 14:33:28 +09:00
first
This commit is contained in:
435
src/pages/app/ContractInsert.vue
Normal file
435
src/pages/app/ContractInsert.vue
Normal file
@@ -0,0 +1,435 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
const registerFormOpen = ref(false)
|
||||
const params = reactive({
|
||||
cateCd: '',
|
||||
contNo: '',
|
||||
title: '',
|
||||
compNm: '',
|
||||
signDt: '',
|
||||
contAmt: '',
|
||||
contStatCd: '',
|
||||
contStat: '',
|
||||
regsabun: '',
|
||||
regNm: '',
|
||||
regDt: '',
|
||||
reason: '',
|
||||
page: 1,
|
||||
row: 10,
|
||||
flexColumn: [],
|
||||
modalColumn: [],
|
||||
})
|
||||
|
||||
params.modalColumn = [
|
||||
{ key: 'cateNm', label: '분야' },
|
||||
{ key: 'title', label: '제목' },
|
||||
{ key: 'regNm', label: '담당자' },
|
||||
{ key: 'stNm', label: '등록상태' },
|
||||
{ key: 'title', label: '비고' },
|
||||
{ key: 'regNm', label: '선택' },
|
||||
]
|
||||
const selectedCode = ref()
|
||||
|
||||
const data = reactive({
|
||||
contractData: [],
|
||||
priceSearchData: [],
|
||||
})
|
||||
|
||||
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')
|
||||
console.log(priceSearchDataRespone.data)
|
||||
data.priceSearchData = Array.isArray(priceSearchDataRespone.data) ? priceSearchDataRespone.data : []
|
||||
}
|
||||
catch (error) {
|
||||
console.log(error)
|
||||
data.priceData = []
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function formatDate(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 = params.regSdt
|
||||
const end = params.regEdt
|
||||
const startStr = formatDate(start)
|
||||
const endStr = formatDate(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 ''
|
||||
}
|
||||
})
|
||||
|
||||
</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="pr-2">
|
||||
<VCodeSelect
|
||||
v-model="selectedCode"
|
||||
cd_grp="5/"
|
||||
/></VField>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<VButton
|
||||
color="primary"
|
||||
@click="registerFormOpen = true"
|
||||
>
|
||||
가격조사 가져오기
|
||||
</VButton>
|
||||
<VModal
|
||||
is="form"
|
||||
:open="registerFormOpen"
|
||||
title="계약관리 등록"
|
||||
size="contract-big"
|
||||
actions="right"
|
||||
@submit.prevent="registerFormOpen = false"
|
||||
@close="registerFormOpen = false"
|
||||
>
|
||||
<template #content>
|
||||
<div class="modal-form">
|
||||
<ComVFlexTable
|
||||
:data="data.priceSearchData"
|
||||
:columns="params.modalColumn"
|
||||
:compact="true"
|
||||
:separators="true"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #action>
|
||||
<VButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
raised
|
||||
>
|
||||
Save Changes
|
||||
</VButton>
|
||||
</template>
|
||||
</VModal>
|
||||
</td>
|
||||
<td>
|
||||
<VField class="is-flex">
|
||||
<VControl raw subcontrol>
|
||||
<VCheckbox
|
||||
label="가격조사여부"
|
||||
color="info"
|
||||
/>
|
||||
</VControl>
|
||||
</VField>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<div class="column is-fullhd">
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
v-model="params.reason"
|
||||
class="input custom-text-filter"
|
||||
placeholder="가격조사 안했을 시 예외 사유 입력(필수)"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>계약명</td>
|
||||
<td colspan="6">
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
v-model="params.title"
|
||||
class="input custom-text-filter"
|
||||
placeholder="계약명"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>계약상대자</td>
|
||||
<td>
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
v-model="params.regNm"
|
||||
class="input custom-text-filter"
|
||||
placeholder="사업자번호"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</td>
|
||||
<td>
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
v-model="params.compNm"
|
||||
class="input custom-text-filter"
|
||||
placeholder="업체명"
|
||||
>
|
||||
</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
|
||||
v-model="params.signDt"
|
||||
class="input custom-text-filter"
|
||||
placeholder="계약체결일"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</td>
|
||||
<td>
|
||||
<VButton
|
||||
color="primary"
|
||||
>
|
||||
계 약 금 액
|
||||
</VButton>
|
||||
<VModal
|
||||
actions="center"
|
||||
title="계약금액"
|
||||
>
|
||||
<template #content>
|
||||
<VPlaceholderSection
|
||||
title="Go Premium"
|
||||
subtitle="Unlock more features and business tools by going premium"
|
||||
/>
|
||||
</template>
|
||||
<template #action>
|
||||
<VButton color="primary" raised>
|
||||
등록
|
||||
</VButton>
|
||||
</template>
|
||||
</VModal>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
v-model="params.contAmt"
|
||||
class="input custom-text-filter"
|
||||
placeholder="금액"
|
||||
>
|
||||
</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="params.regSdt"
|
||||
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="pr-2">
|
||||
<div>
|
||||
<VDatePicker
|
||||
v-model="params.regEdt"
|
||||
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">
|
||||
등록
|
||||
</VButton>
|
||||
</td>
|
||||
<td colspan="5" />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bottom-button">
|
||||
<VButton
|
||||
to="/app/DocumentManagement"
|
||||
>
|
||||
전 표 (임시)
|
||||
</VButton>
|
||||
<VButton>저 장</VButton>
|
||||
<VButton>취 소</VButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table tbody td {
|
||||
color: var(--smoke-white);
|
||||
|
||||
}
|
||||
|
||||
.datatable-table {
|
||||
padding: 12px 12px;
|
||||
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user