File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="gd-10 Bi001-page container">
<div class="wrap pd2 flex-column">
<div class="wrap-title pb1 mb1 flex justify-between">
<h1>전표 작성(일반)</h1>
<div class="flex justify-end gd-5">
<div class="flex justify-between button-wrap">
<button class="rest-btn">초기화</button>
<button class="save-btn">저장</button>
<button class="del-btn">삭제</button>
</div>
</div>
</div>
<div class="content flex-column">
<div class="row">
<div class="content-title flex justify-between mb1">
조회조건
</div>
<div class="flex justify-between pb1" style="border-bottom: 2px solid var(--bordergray);">
<div class="flex justify-start box-wrap gd-10">
<div class="flex mr5">
<div>
<p class="blue-text">사업장</p>
</div>
<select name="" id="" style="width: 150px;">
<option value="본점">본점(제지)</option>
<option value="본점(포장)">본점(포장)</option>
<option value="에너지솔루션(주)">에너지솔루션(주)</option>
</select>
</div>
<div class="flex mr5">
<div>
<p class="blue-text">발의 일자</p>
</div>
<input type="date" id="date" value="2024-03-04" style="width: 35%;">
<p class="ml2">~</p>
<input type="date" id="date" value="2024-03-04" style="width: 35%;">
</div>
<div class="flex justify-between mr5">
<div>
<p class="blue-text">발의자</p>
</div>
<div class="flex box-area">
<select name="" id="" class="flex30" >
<option value="">박정현(180516)</option>
<option value="">권문기(210702)</option>
<option value="">김황석(200702)</option>
</select>
</div>
</div>
</div>
<div class="flex align-center">
<button class="blue-btn">조회</button>
</div>
</div>
</div>
<div style="background-color: var(--tableblue); border-radius: 10px;"
class="content-wrap pt1 pb1 mt1 mb1">
<table class="form-table2 code-area">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 4%;">
<col style="width: 15%;">
<col style="width: 5%;">
<col style="width: 15%;">
<col style="width: 5%;">
</colgroup>
<tbody>
<tr class="">
<th colspan="1" class="blue-text">발의 일자</th>
<td colspan="2">
<input class=" mr1" type="date" id="date" value="2024-03-04">~
<input class="content-w30 input-gray" type="text" id="date" placeholder="0012">
</td>
<td colspan="4" class="button-wrap">
<button class="">신규발의번호부여</button>
<button class="">상세내역초기화</button>
<button class="" @click="openModal">수입결제전표만들기</button>
</td>
<td class="button-wrap">
</td>
</tr>
<tr class="content-area">
<th class="blue-text">발의 부서</th>
<td>
<input class="content-w30 input-gray mr1" type="text" id="date"
placeholder="103000">
<input class="content-w60 input-gray" type="text" id="date" placeholder="IT팀">
</td>
<th class="blue-text">발의자</th>
<td>
<input class="content-w30 input-gray mr1" type="text" id="date"
placeholder="180516">
<input class="content-w60 input-gray" type="text" id="date" placeholder="박정현">
</td>
<th class="blue-text">차변합계</th>
<td>
<input class="input-gray content-w40" type="text" id="date" placeholder="">
</td>
<th class="blue-text">대변합계</th>
<td>
<input class="input-gray" type="text" id="date" placeholder="">
</td>
<th class="blue-text">차액</th>
<td>
<input class="input-gray" type="text" id="date" placeholder="">
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex" style="gap: 15px; height: 100% ; flex-wrap: nowrap;">
<div class="gd-3 pd1 table-area">
<div class="content-title flex justify-between mb1">
전표목록
</div>
<div class="box-overflow">
<table class="list-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 10%;">
<col style="width: 15%;">
<col style="width: 20%;">
<col style="width: 10%;">
<col style="width: 10%;">
</colgroup>
<thead>
<tr class="table-header"
style="background-color: var(--tableblue); color: var(--navbarblue); ">
<th>선택</th>
<th>발의번호</th>
<th>전송일시</th>
<th>상태</th>
<th>자동</th>
<th>G/W</th>
</tr>
</thead>
<tbody>
<tr class="table-border">
<td><input type="checkbox"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="button-wrap flex justify-end mb2">
<button>전표 전송</button>
<button style="border: 1px solid var(--red); color: var(--red);">전표 취소</button>
<button>G/W 전송</button>
</div>
</div>
</div>
<div class=" pd1 table-area content-wrap" style="width: 80%;">
<div class="content-title flex justify-between mb1">
전표등록
</div>
<div class="box-overflow ">
<table class="list-table" >
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<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%;">
</colgroup>
<thead style="width: 100%;">
<tr class="table-header table-border"
style="background-color: var(--tableblue); color: var(--navbarblue); ">
<th rowspan="2">순번</th>
<th rowspan="2">계정과목</th>
<th>관리항목1</th>
<th>관리일자1</th>
<th>증빙</th>
<th>참고항목</th>
<th>환율</th>
<th rowspan="2">차변금액</th>
<th rowspan="2">대변금액</th>
<th rowspan="2">적요</th>
</tr>
<tr class="table-header table-border"
style="background-color: var(--tableblue); color: var(--navbarblue); ">
<th>관리항목2</th>
<th>관리일자2</th>
<th>비용부서</th>
<th>공급가액</th>
<th>외화금액($)</th>
</tr>
</thead>
<tbody class="box-overflow ">
<template v-for="(listNam, index) in listNam">
<tr class=" table-border">
<td rowspan="2">{{ listNam.no }}</td>
<td rowspan="2">{{ listNam.name }}</td>
<td>{{ listNam.list1 }}</td>
<td>{{ listNam.list2 }}</td>
<td>{{ listNam.list3 }}</td>
<td>{{ listNam.list4 }}</td>
<td>{{ listNam.list5 }}</td>
<td rowspan="2">{{ listNam.list6 }}</td>
<td rowspan="2">{{ listNam.list7 }}</td>
<td rowspan="2">{{ listNam.list8 }}</td>
</tr>
<tr class="table-border">
<td>{{ listNam.list9 }}</td>
<td>{{ listNam.list10 }}</td>
<td>{{ listNam.list11 }}</td>
<td>{{ listNam.list12 }}</td>
<td>{{ listNam.list13 }}</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- button 모달 -->
<div v-show="isModalOpen" class="modal-wrapper">
<div class="modal-container flex flex-column">
<div>
<div class="modal-title mb2">
<div class="flex justify-between">
<h2>수입결제전표만들기</h2>
<button class="close-btn " @click="closeModal"></button>
</div>
</div>
<div class="flex button-wrap ">
<p class="blue-text">조회조건</p>
<input type="date" id="date">
<p class="ml2">~</p>
<input type="date" id="date">
<button>조회</button>
</div>
<div class="modal-content-monthly ">
<div>
<p style="text-align: left; " class="blue-text"> 외화거래목록</p>
</div>
<div class="table-zone table-scroll">
<table class="list-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 10%;">
</colgroup>
<thead>
<tr class="table-header table-border "
style="background-color: var(--tableblue); color: var(--navbarblue); ">
<th>금융기관코드</th>
<th>금융기관코드</th>
<th>계좌번호</th>
<th>거래일자</th>
<th>일련번호</th>
<th>적요</th>
<th>통화구분</th>
<th>외화금액</th>
<th>원화금액</th>
</tr>
</thead>
<tbody>
<tr v-for="(modalWrap) in modalList" key="codeNum" style="overflow-y: scroll;">
<td>{{ modalWrap.code }}</td>
<td>{{ modalWrap.accountNum }}</td>
<td>{{ modalWrap.data }}</td>
<td>{{ modalWrap.pathNum }}</td>
<td>{{ modalWrap.detailName }}</td>
<td>{{ modalWrap.division }}</td>
<td>{{ modalWrap.foreignCurrency }}</td>
<td>{{ modalWrap.KRW }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="modal-content-monthly">
<div class="flex justify-between mb1">
<div class="flex button-wrap ">
<p style="text-align: left;" class="blue-text">선택내역</p>
<button>임시전표작성</button>
</div>
<div class="flex justify-end">
<p>차변합계</p>
<input type="text" class="content-w20">
<p class="ml1">대변합계</p>
<input type="text" class="content-w20">
<p class="ml1">차액</p>
<input type="text" class="content-w20">
</div>
</div>
<div class="table-zone">
<table class="list-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 10%;">
</colgroup>
<thead>
<tr class="table-header table-border"
style="background-color: var(--tableblue); color: var(--navbarblue); ">
<th>순번</th>
<th>계정과목</th>
<th>관리항목1</th>
<th>관리항목2</th>
<th>환율</th>
<th>외화금액($)</th>
<th>차변금액</th>
<th>대변금액</th>
<th>적요</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="flex button-wrap mb1">
<p style="text-align: left;" class="blue-text">작성내역</p>
<button>자동전표작성</button>
</div>
<div class="table-zone">
<table class="list-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 10%;">
</colgroup>
<thead>
<tr class="table-header table-border"
style="background-color: var(--tableblue); color: var(--navbarblue); ">
<th>순번</th>
<th>계정과목</th>
<th>관리항목1</th>
<th>관리항목2</th>
<th>환율</th>
<th>외화금액($)</th>
<th>차변금액</th>
<th>대변금액</th>
<th>적요</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isModalOpen: false,
openModal: false,
modalList: [
{
code: "003", accountNum: "6380000795600017", data: "2023-02-10", pathNum: "400", detailName: "외화송금출금",
division: "USD", foreignCurrency: "10,000,00", KRW: "12,406,000"
},
{
code: "003", accountNum: "6380000795600017", data: "2023-02-27", pathNum: "401", detailName: "외화송금출금",
division: "USD", foreignCurrency: "10,995,00", KRW: "13,641,141"
},
{
code: "003", accountNum: "6380000795600017", data: "2023-02-10", pathNum: "400", detailName: "외화송금출금",
division: "USD", foreignCurrency: "10,000,00", KRW: "12,406,000"
},
{
code: "003", accountNum: "6380000795600017", data: "2023-02-10", pathNum: "400", detailName: "외화송금출금",
division: "USD", foreignCurrency: "10,000,00", KRW: "12,406,000"
},
{
code: "003", accountNum: "6380000795600017", data: "2023-02-10", pathNum: "400", detailName: "외화송금출금",
division: "USD", foreignCurrency: "10,000,00", KRW: "12,406,000"
},
],
listNam: [
{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
]
}
},
methods: {
openModal() {
this.isModalOpen = true;
},
closeModal() {
this.isModalOpen = false;
}
},
watch: {
},
computed: {
},
components: {
},
mounted() {
}
}
</script>
<style scoped>
table td,table td{
text-align: center;
}
</style>