Files
oa/src/pages/app/documentManagementDetail.vue

513 lines
15 KiB
Vue

<script setup lang="ts">
import {getSlipDetail, saveTempSlip} from "/@src/service/slipApi.ts";
import {formatDatefromStringDate} from "/@src/utils/common/comfunc.ts";
onBeforeMount(async ()=>{
const result = await getSlipDetail(history.state.key)
getDetailList(result)
})
const notyf = useNotyf()
const getDetailList = (item) => {
console.log("getDetailList",item)
params.contNo = item.contNo
affiliationCode.value = item.bukrs//소속
params.title = item.bktxt //계약명
params.regNm = item.lifnr //계약상대자
params.place = ''// 업체명 bupla
formattedNumber.value = item.wrbtrS //공급가액
taxCode.value= item.mwskz //세금코드 ->세금계산서랑 같이 ?
currencyCode.value = item.waers //통화
params.regSdt = formatDatefromStringDate(item.bldat) //증빙일
params.regSdt2 = formatDatefromStringDate(item.budat)//전기일
params.bankl = item.bankl //계좌관리 은행코드
params.bankn = item.bankn//계좌관리 계좌번호
//taxInvoiceCode.value = item.mwskz //세금계산서 따로 연계 태워야됨 todo
// item.hkont G/L 계정
selectCostCode.value = ''//코스트센터 kostl wbs요소코드 projk
//코드
//첨부파일
params.apprList = item.zwf0011t.apprs[0].value[0]
}
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: '',
place: '',
regDt: '',
reason: '',
regSdt: '',
regSdt2: '',
bankl:'',
bankn:'',
page: 1,
row: 10,
flexColumn: [
{ key: 'btext', label: '이름'},
{ key: 'bname', label: '사원번호'},
{ key: 'posit', label: '부서'},
{ key: 'lineclsf', label: '담당'},
{ key: 'wkfst', label: '결재요청'},
],
apprList:[],
modalColumn: [],
})
const formattedNumber = ref(0)
function onInput(event) {
let onlyNumber = event.target.value.replace(/[^0-9]/g, '')
formattedNumber.value = onlyNumber ? Number(onlyNumber).toLocaleString() : ''
}
const selectCostCode = ref('코스트센터') //todo
const selectCostCodeOptions = [
{ text: '코스트센터', key: 'kostl' },
{ text: 'WBS', key: 'projk'}
]
const router = useRouter()
const cancel = () => {
router.push('/app/contractManagement')
}
const loading = ref(false)
const createChit = async () => {
let res = null
try{
loading.value = true
const createParams = {
contNo : params.contNo,
bldat : '20250602',//params.regSdt.replace("-",""),
budat : '20250602',//params.regSdt2.replace("-",""),
waers : currencyCode.value,
bktxt : params.title,
lifnr : params.regNm,
wrbtr : formattedNumber.value, //수정필요
mwskz : taxCode.value,
gsber : affiliationCode.value, //무슨 값인지 모름 gsber bukrs bupla
bupla : affiliationCode.value,
zterm : '', //어떤 값인지 모름
banks : '' , //어떤 값인지 모름
bankl : params.bankl,
bankn : params.bankn,
hkont : '',//G/L 계정
wrbtrS : formattedNumber.value,
kostl : selectCostCode.value,
projk : selectCostCode.value,
trtGubun : '',//어떤 값인지 모름
txBillSeq : '',//어떤 값인지 모름
slipAtts: '' // 파일 업로드
}
notyf.dismissAll()
res = await saveTempSlip(createParams)
if(res.request.status == '200'){
notyf.primary('등록 되었습니다.')
router.push({path: '/app/priceManagement'})
}
}catch(e){
notyf.error(e.message)
}finally {
loading.value = false
}
}
</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.place"
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.bankl"
class="input custom-text-filter"
placeholder="계약번호"
>
</VControl>
</VField>
</td>
<td colspan="2">
<VField>
<VControl>
<input
v-model="params.bankn"
class="input custom-text-filter"
placeholder="계좌번호"
>
</VControl>
</VField>
</td>
<td>
<VButton color="info">
계좌조회
</VButton>
</td>
<td>
<VButton color="success">
정상
</VButton>
</td>
<td></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>
<VField>
<VSelect v-model="selectCostCode">
<option v-for="opt in selectCostCodeOptions" :key="opt.key">
{{ opt.text }}
</option>
</VSelect>
</VField>
</td>
<td colspan="2">
<VField>
<VControl>
<input
v-model="params.title"
class="input custom-text-filter"
placeholder="코드"
>
</VControl>
</VField>
</td>
<td colspan="4"></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 @click="createChit">대금지급중</VButton>
<VButton @click="cancel"> </VButton>
</div>
<VTabs
type="boxed"
selected="team"
:tabs="[
{ label: '결재', value:'team' }, //todo 이 데이터를 동적으로 들고와야 한다..
]"
>
<template #tab="{ activeValue }">
<p v-if="activeValue === 'team'">
<ComVFlexTable
:data="params.apprList"
:columns="params.flexColumn"
:compact="true">
<template #body-cell="{ row, column, index, value }">
<span v-if="column.key=='lineclsf'" class="column">
<VField class="pr-1">
<VCodeSelect
disabled="true"
cd_grp=9
v-model="row.lineclsf"
/>
<!-- :disabled="index === 0"-->
</VField>
</span>
<span v-if="column.key=='wkfst'" class="column">
<VField class="pr-1">
<VCodeSelect
disabled="true"
cd_grp=8
v-model="row.wkfst"
/>
<!-- :disabled="index === 0"-->
</VField>
</span>
</template>
</ComVFlexTable>
</p>
</template>
</VTabs>
</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%;
}
}
.button.v-button {
padding: 0px 0px;
}
.bottom-button {
text-align: center;
button {
background-color: cornflowerblue;
margin: 10px;
font-weight: bold;
border-color: var(--primary);
color: white;
padding: 0.5rem 1rem !important;
}
}
button:nth-child(2) {
background-color: #AB9A6c;
}
button:nth-child(3) {
background-color: silver;
}
.field {
margin: 0px 0px;
}
.disabled-button {
//opacity: 0.5;
background-color: #ccc;
cursor: not-allowed;
//transition: all 0.2s;
}
</style>