mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 08:23:47 +09:00
first
This commit is contained in:
389
src/pages/app/DocumentManagement.vue
Normal file
389
src/pages/app/DocumentManagement.vue
Normal file
@@ -0,0 +1,389 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
const affiliationCode = ref()
|
||||
const taxCode = ref('')
|
||||
const currencyCode = ref('KRW')
|
||||
const taxInvoiceCode = ref()
|
||||
const accountSubjectCode = ref()
|
||||
const params = reactive({
|
||||
cateCd: '',
|
||||
contNo: '',
|
||||
title: '',
|
||||
compNm: '',
|
||||
signDt: '',
|
||||
contAmt: 0,
|
||||
contStatCd: '',
|
||||
contStat: '',
|
||||
regsabun: '',
|
||||
regNm: '',
|
||||
regDt: '',
|
||||
reason: '',
|
||||
page: 1,
|
||||
row: 10,
|
||||
flexColumn: [],
|
||||
modalColumn: [],
|
||||
})
|
||||
const selected = ref('cost')
|
||||
const formattedNumber = ref(0)
|
||||
|
||||
function onInput(event) {
|
||||
let onlyNumber = event.target.value.replace(/[^0-9]/g, '')
|
||||
formattedNumber.value = onlyNumber ? Number(onlyNumber).toLocaleString() : ''
|
||||
}
|
||||
|
||||
</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: 10%;">
|
||||
<col style="width: 10%;">
|
||||
<col style="width: 10%;">
|
||||
<col style="width: 10%;">
|
||||
<col style="width: 10%;">
|
||||
<col style="width: 10%;">
|
||||
<col style="width: 10%;">
|
||||
<col style="width: 10%;">
|
||||
<col style="width: 10%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>소속</td>
|
||||
<td colspan="2">
|
||||
<VField>
|
||||
<VCodeSelect
|
||||
v-model="affiliationCode"
|
||||
cd_grp=11 >
|
||||
</VCodeSelect>
|
||||
</VField>
|
||||
</td>
|
||||
<td colspan="7" />
|
||||
</tr>
|
||||
<tr>
|
||||
<td>계약명</td>
|
||||
<td colspan="9">
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
v-model="params.title"
|
||||
class="input custom-text-filter"
|
||||
placeholder="계약명"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>계약상대자</td>
|
||||
<td colspan="2">
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
v-model="params.regNm"
|
||||
class="input custom-text-filter"
|
||||
placeholder="사업자번호"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
v-model="params.title"
|
||||
class="input custom-text-filter"
|
||||
placeholder="업체명"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</td>
|
||||
<td>
|
||||
<VButton color="danger">
|
||||
구매처 확인
|
||||
</VButton>
|
||||
</td>
|
||||
<td>
|
||||
<VButton color="success">
|
||||
정상
|
||||
</VButton>
|
||||
</td>
|
||||
<td colspan="2" />
|
||||
</tr>
|
||||
<tr>
|
||||
<td>공급가액</td>
|
||||
<td colspan="2">
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
:value="formattedNumber"
|
||||
placeholder="금액"
|
||||
@input="onInput"
|
||||
class="input custom-text-filter"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</td>
|
||||
<td style="color: black">(부가세 별도)</td>
|
||||
<td style="background-color: var(--primary); text-align: center">
|
||||
<span>세금코드</span>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<VField>
|
||||
<VCodeSelect v-model="taxCode" cd_grp="12">
|
||||
<template #code="{ item }">
|
||||
{{ item.cd }}
|
||||
</template>
|
||||
</VCodeSelect>
|
||||
</VField>
|
||||
</td>
|
||||
<td style="background-color: var(--primary); text-align: center">통화</td>
|
||||
<td colspan="2">
|
||||
<VField>
|
||||
<VCodeSelect v-model="currencyCode" cd_grp="13">
|
||||
<template #code="{ item }">
|
||||
{{ item.cd }}
|
||||
</template>
|
||||
</VCodeSelect>
|
||||
</VField>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>증빙일</td>
|
||||
<td colspan="2">
|
||||
<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>
|
||||
</td>
|
||||
<td />
|
||||
<td style="background-color: var(--primary); text-align: center">
|
||||
<span>전기일</span>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<div>
|
||||
<VDatePicker
|
||||
v-model="params.regSdt2"
|
||||
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>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>계좌관리</td>
|
||||
<td>
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
v-model="params.title"
|
||||
class="input custom-text-filter"
|
||||
placeholder="계약번호"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
v-model="params.title"
|
||||
class="input custom-text-filter"
|
||||
placeholder="계좌번호"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</td>
|
||||
<td>
|
||||
<VButton color="info">
|
||||
계좌조회
|
||||
</VButton>
|
||||
</td>
|
||||
<td >
|
||||
<VButton color="warning">
|
||||
계좌확인중
|
||||
</VButton>
|
||||
</td>
|
||||
<td>
|
||||
<VButton color="success">
|
||||
정상
|
||||
</VButton>
|
||||
</td>
|
||||
<td style="background-color: var(--primary); text-align: center">
|
||||
<span>세금계산서</span>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<VField>
|
||||
<VCodeSelect
|
||||
v-model="taxInvoiceCode"
|
||||
cd_grp=12 >
|
||||
</VCodeSelect>
|
||||
</VField>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>예산관리</td>
|
||||
<td>
|
||||
<VButton
|
||||
color="primary"
|
||||
@click="centeredActionsOpen = true"
|
||||
>
|
||||
G/L계정
|
||||
</VButton>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<VField>
|
||||
<VCodeSelect
|
||||
v-model="accountSubjectCode"
|
||||
cd_grp=12 >
|
||||
</VCodeSelect>
|
||||
</VField>
|
||||
</td>
|
||||
<td>
|
||||
<VButton
|
||||
color="info"
|
||||
@click="selected = 'cost'"
|
||||
:class="{ 'disabled-button': selected === 'wbs' }"
|
||||
>
|
||||
코스트센터
|
||||
</VButton>
|
||||
</td>
|
||||
<td>
|
||||
<VButton
|
||||
color="info"
|
||||
@click="selected = 'wbs'"
|
||||
:class="{ 'disabled-button': selected === 'cost' }"
|
||||
>
|
||||
WBS
|
||||
</VButton>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<VField>
|
||||
<VControl>
|
||||
<input
|
||||
v-model="params.title"
|
||||
class="input custom-text-filter"
|
||||
placeholder="코드"
|
||||
>
|
||||
</VControl>
|
||||
</VField>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>첨부파일</td>
|
||||
<td colspan="1">
|
||||
<VButton color="info">
|
||||
등록
|
||||
</VButton>
|
||||
</td>
|
||||
<td colspan="5">
|
||||
<div>('준공보고서' 또는 '검수보고서' 등)</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bottom-button">
|
||||
<VButton>전 표 생 성</VButton>
|
||||
<VButton>취 소</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 20px;
|
||||
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%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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: 0px 0px;
|
||||
}
|
||||
|
||||
.button.v-button {
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
||||
.disabled-button {
|
||||
//opacity: 0.5;
|
||||
background-color: #ccc;
|
||||
cursor: not-allowed;
|
||||
//transition: all 0.2s;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user