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>
</div>
</div>
</div>
<div class="content flex-column Bi001-content">
<div class="Bi001-wrap flex-column pd1 mb1" >
<div class="mb1">
<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>
<div>
<input type="date"> ~
<input type="date">
</div>
</div>
<div class="flex mr5">
<div>
<p class="blue-text">계정과목</p>
</div>
<div>
<input type="search" class="content-w20 search-btn mr1" style="cursor: pointer;"
@click="openModal">
<input type="text" class="content-w60 input-gray" placeholder="정기예금(만기3개월이내)">
</div>
</div>
</div>
<div class="flex align-center">
<button class="blue-btn"
style="padding-top: 7px ; padding-bottom: 7px;">조회(F12)</button>
</div>
</div>
</div>
<div class="flex-column">
<div class="flex justify-between mb1">
<div class="content-title">
이월전표등록
</div>
<div class="flex justify-end gd-2">
<button class="blue-small-btn mr1" style="color: var(--navbarblue);">신규전표입력</button>
<button class="blue-small-btn" style="color: var(--navbarblue);">연변추가입력</button>
</div>
</div>
<div class="Bi003-list flex mb1 ">
<table class="list-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 9%;">
<col style="width: 5%;">
<col style="width: 5%;">
<col style="width: 9%;">
<col style="width: 13%;">
<col style="width: 9%;">
<col style="width: 13%;">
<col style="width: 9%;">
<col style="width: 9%;">
<col style="width: 9%;">
</colgroup>
<thead>
<tr class="table-header">
<th>작성일자</th>
<th>전표NO</th>
<th>연번</th>
<th colspan="2">계정과목</th>
<th colspan="2">관리항목1</th>
<th>관리항목2</th>
<th>차변금액</th>
<th>대변금액</th>
</tr>
</thead>
<tbody>
<tr class="table-border" v-for="(codePath, index) in codeList">
<td><input type="date" style="border: 0px;padding: 0px;"></td>
<td class="input-gray">{{ codePath.num }}</td>
<td class="input-gray">{{ codePath.num2 }}</td>
<td class="input-gray">{{ codePath.nameNum }}</td>
<td class="input-gray">{{ codePath.name }}</td>
<td>{{ codePath.listNum }}</td>
<td class="input-gray">{{ codePath.listName }}</td>
<td>{{ codePath.num3 }}</td>
<td>{{ codePath.money }}</td>
<td>{{ codePath.money2 }}</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-end ">
<button class="green-excel-btn mr1">엑셀</button>
<button class="red-del-btn mr1">삭제</button>
<button class="blue-save-btn">저장</button>
</div>
</div>
</div>
<div class="flex-column">
<div class="content-title flex justify-between mb1">
이월전표내역
</div>
<div class="Bi003-list flex mb1" style="height: 50%; overflow-y: auto;" >
<table class="list-table" >
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 9%;">
<col style="width: 5%;">
<col style="width: 5%;">
<col style="width: 22%;">
<col style="width: 22%;">
<col style="width: 9%;">
<col style="width: 9%;">
<col style="width: 9%;">
</colgroup>
<thead>
<tr class="table-header" >
<th>작성일자</th>
<th>전표NO</th>
<th>연번</th>
<th>계정과목</th>
<th>관리항목1</th>
<th>관리항목2</th>
<th class="table-align">차변금액</th>
<th class="table-align">대변금액</th>
</tr>
</thead>
<tbody >
<tr class="table-border" v-for="(codePathHistroy) in codeHistroyList" style="max-height: 200px;" >
<td>{{ codePathHistroy.date }}</td>
<td>{{ codePathHistroy.num }}</td>
<td>{{ codePathHistroy.num2 }}</td>
<td class="text-lf">{{ codePathHistroy.nameNum }}{{ codePathHistroy.name }}</td>
<td class="text-lf">{{ codePathHistroy.listNum }}{{ codePathHistroy.listName }}</td>
<td>{{ codePathHistroy.num3 }}</td>
<td>{{ codePathHistroy.money }}</td>
<td>{{ codePathHistroy.money2 }}</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-end">
<table style=" min-width: 30%; border-top: 1px solid var(--borderlightgray);">
<tr class="table-border list-table" >
<th >합계</th>
<td>1,155,881,957</td>
<td>1,155,881,957</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 모달 -->
<div v-show="isOpen" class="modal-wrapper">
<div class="modal-container flex flex-column">
<div>
<div class=" mb2">
<div class="flex justify-between modal-title">
<h1>계정과목찾기</h1>
<div>
<button class="close-btn " @click="closeModal"></button>
</div>
</div>
</div>
<div class="flex justify-between">
<div class="content-title mb1">
조회조건
</div>
<div class=" button-wrap">
<button class="rest-btn">초기화</button>
</div>
</div>
<div class="flex button-wrap modal-title mb2 button-wrap">
<p class="blue-text">계정코드/명</p>
<input type="text" id="date">
<button>조회</button>
</div>
<div>
<div class="content-title flex justify-between ">
계정과목목록
</div>
<div class="table-zone table-scroll">
<table class="list-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 5%;">
<col style="width: 10%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
<col style="width: 3%;">
</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>관리항목1</th>
<th>관리항목2</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;"
class="table-border modal-td">
<td>{{ modalWrap.num }}</td>
<td>{{ modalWrap.name }}</td>
<td>{{ modalWrap.list1 }}</td>
<td>{{ modalWrap.list2 }}</td>
<td>{{ modalWrap.list3 }}</td>
<td>{{ modalWrap.list4 }}</td>
<td>{{ modalWrap.list5 }}</td>
<td>{{ modalWrap.list6 }}</td>
<td>{{ modalWrap.list7 }}</td>
<td>{{ modalWrap.list8 }}</td>
<td>{{ modalWrap.list9 }}</td>
<td>{{ modalWrap.list10 }}</td>
<td>{{ modalWrap.list11 }}</td>
<td>{{ modalWrap.list12 }}</td>
<td>{{ modalWrap.list13 }}</td>
<td>{{ modalWrap.list14 }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOpen: false,
codeList: [
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
],
codeHistroyList: [
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
{ date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
],
modalList: [
{ num: "1106044", name: "저장품(초지용구품)", list1: "1.차변", list2: "Y", list3: "Y", list4: "Y", list5: "Y", list6: "Y", list7: "Y", list8: "Y", list9: "Y", list10: "Y", list11: "매입", list12: "Y", list13: "Y", list14: "Y" }
],
}
},
methods: {
openModal() {
this.isOpen = true;
},
closeModal() {
this.isOpen = false;
}
},
watch: {
},
computed: {
},
mounted() {
console.log('Main mounted');
}
}
</script>
<style scoped>
button {
font-size: 1.4rem;
}
td {
padding-left: 10px;
}
</style>