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 Bi003-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="excel-btn">엑셀</button>
<button class="del-btn">삭제</button>
<button class="save-btn">저장</button>
</div>
</div>
</div>
<div class="container flex-column">
<div class="content list-wrap flex-column ">
<div class="pb2">
<div class="content-title flex justify-between mb1">
계정과목등록
</div>
<div class="pd1 section-wrap" style="border-radius: 10px;">
<table class="form-table Bi003-table pd3 ">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 10%;">
<col style="width: 15%;">
<col style="width:10%;">
<col style="width: 15%;">
<col style="width:10%;">
<col style="width: 15%;">
</colgroup>
<tbody>
<tr>
<th>코드</th>
<td>
<input type="text" name="" id="" class="mr2">
<button class="blue-btn" @click="openModal">검색</button>
</td>
</tr>
<tr>
<th>계정명</th>
<td>
<input type="text">
</td>
<th rowspan="5">필수입력항목구분</th>
<td>
<input type="checkbox" id="e" class="ui-checkbox ">
<label for="e">증빙구분</label>
<input type="checkbox" id="f" class="ui-checkbox ">
<label for="f">비용부서</label>
<input type="checkbox" id="g" class="ui-checkbox ">
<label for="g">외화금액($)</label>
</td>
<th>자금원장표시</th>
<td>
<input type="checkbox" id="n" class="ui-checkbox ">
<label for="n">자금원장표시계정</label>
</td>
</tr>
<tr>
<th>잔액구분</th>
<td>
<select name="" id="" class="small-select">
<option value="">1.차변</option>
<option value="">1.대변</option>
</select>
<input type="checkbox" id="a" class="ui-checkbox ">
<label for="a">전표발생구분</label>
</td>
<td rowspan="4" class="">
<input type="checkbox" id="h" class="ui-checkbox mb5">
<label for="h">관리일자1_증빙일자및어음발행일</label> <br>
<input type="checkbox" id="i" class="ui-checkbox mb5">
<label for="i">관리일자2_대금지불일및어음만기일</label> <br>
<input type="checkbox" id="j" class="ui-checkbox mb5">
<label for="j">참고항목_어음지급은행</label> <br>
<input type="checkbox" id="k" class="ui-checkbox ">
<label for="k">공급가액 및 승인금액</label>
</td>
<th>동변발생구분</th>
<td>
<input type="checkbox" id="o" class="ui-checkbox ">
<label for="o">동변자동발생계정</label>
</td>
</tr>
<tr>
<th>금액발생여부</th>
<td>
<input type="checkbox" id="b" class="ui-checkbox ">
<label for="b">차변</label>
<input type="checkbox" id="c" class="ui-checkbox ">
<label for="c">대변</label>
</td>
<th>동변계정(계산서)</th>
<td>
<select name="" id="" class="large-select">
<option value=""></option>
<option value="">부가세대급금(세금계산서)</option>
<option value="">부가세대급금(신용카드)</option>
<option value="">토지 불공제</option>
<option value="">차량운반구 불공제</option>
<option value="">건설중인자산(유형) 불공제</option>
<option value="">접대비 불공제</option>
<option value="">차량유지비 불공제</option>
<option value="">기부금 불공제</option>
<option value="">제)차량유지비 불공제</option>
<option value="">제)접대비 불공제</option>
</select>
</td>
</tr>
<tr>
<th>관리항목1</th>
<td>
<input type="checkbox" id="d" class="ui-checkbox ">
<label for="d">거래처/사원번호/은행/법인카드</label>
</td>
<th>동변불공제계정(계산서)</th>
<td>
<select name="" id="" class="large-select">
<option value=""></option>
<option value="">부가세대급금(세금계산서)</option>
<option value="">부가세대급금(신용카드)</option>
<option value="">토지 불공제</option>
<option value="">차량운반구 불공제</option>
<option value="">건설중인자산(유형) 불공제</option>
<option value="">접대비 불공제</option>
<option value="">차량유지비 불공제</option>
<option value="">기부금 불공제</option>
<option value="">제)차량유지비 불공제</option>
<option value="">제)접대비 불공제</option>
</select>
</td>
</tr>
<tr>
<th>관리항목2</th>
<td>
<input type="checkbox" id="d" class="ui-checkbox ">
<label for="d">계좌 및 어음NO</label>
</td>
<th>동변계정(법인카드)</th>
<td>
<select name="" id="" class="large-select">
<option value=""></option>
<option value="">부가세대급금(세금계산서)</option>
<option value="">부가세대급금(신용카드)</option>
<option value="">토지 불공제</option>
<option value="">차량운반구 불공제</option>
<option value="">건설중인자산(유형) 불공제</option>
<option value="">접대비 불공제</option>
<option value="">차량유지비 불공제</option>
<option value="">기부금 불공제</option>
<option value="">제)차량유지비 불공제</option>
<option value="">제)접대비 불공제</option>
</select>
</td>
</tr>
<tr>
<th>프로젝트구분</th>
<td>
<select name="" id="">
<option value="">히트펌프연구개발</option>
</select>
</td>
<th>계정명</th>
<td>
<input type="checkbox" id="l" class="ui-checkbox ">
<label for="l">매출세무계정</label>
<input type="checkbox" id="m" class="ui-checkbox ">
<label for="m">매입세무계정</label>
</td>
<th>동변불공제계정(법인카드)</th>
<td>
<select name="" id="" class="large-select">
<option value=""></option>
<option value="">부가세대급금(세금계산서)</option>
<option value="">부가세대급금(신용카드)</option>
<option value="">토지 불공제</option>
<option value="">차량운반구 불공제</option>
<option value="">건설중인자산(유형) 불공제</option>
<option value="">접대비 불공제</option>
<option value="">차량유지비 불공제</option>
<option value="">기부금 불공제</option>
<option value="">제)차량유지비 불공제</option>
<option value="">제)접대비 불공제</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="flex-column table-wrap">
<div class="content-title flex justify-between mb1">
계정과목목록
</div>
<div class="Bi003-list flex">
<table class="list-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 4%;">
<col style="width: 5%;">
<col style="width: 3%;">
<col style="width: 2%;">
<col style="width: 2%;">
<col style="width: 2%;">
<col style="width: 2%;">
<col style="width: 2%;">
<col style="width: 2%;">
<col style="width: 4%;">
<col style="width: 4%;">
<col style="width: 4%;">
<col style="width: 4%;">
<col style="width: 4%;">
<col style="width: 4%;">
<col style="width: 4%;">
<col style="width: 3%;">
<col style="width: 4%;">
<col style="width: 4%;">
<col style="width: 4%;">
<col style="width: 4%;">
<col style="width: 4%;">
<col style="width: 4%;">
</colgroup>
<thead>
<tr class="table-header">
<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>관리일자1</th>
<th>관리일자2</th>
<th>참고항목</th>
<th>공급가액 및승인액</th>
<th>세무계정</th>
<th>자금원장계정</th>
<th>동변발생구분</th>
<th>동변계정(계산서)</th>
<th>동변불공제계정(계산서)</th>
<th>동변계정(법인카드)</th>
<th>동변불공제계정(법인카드)</th>
</tr>
</thead>
<tbody>
<tr class="table-border" v-for="(listTable) in tableList">
<td>{{ listTable.no }}</td>
<td>{{ listTable.name }}</td>
<td>{{ listTable.list1 }}</td>
<td>{{ listTable.list2 }}</td>
<td>{{ listTable.list3 }}</td>
<td>{{ listTable.list4 }}</td>
<td>{{ listTable.list5 }}</td>
<td>{{ listTable.list6 }}</td>
<td>{{ listTable.list7 }}</td>
<td>{{ listTable.list8 }}</td>
<td>{{ listTable.list9 }}</td>
<td>{{ listTable.list10 }}</td>
<td>{{ listTable.list11 }}</td>
<td>{{ listTable.list12 }}</td>
<td>{{ listTable.list13 }}</td>
<td>{{ listTable.list14 }}</td>
<td>{{ listTable.list15 }}</td>
<td>{{ listTable.list16 }}</td>
<td>{{ listTable.list17 }}</td>
<td>{{ listTable.list18 }}</td>
<td>{{ listTable.list19 }}</td>
<td>{{ listTable.list20 }}</td>
<td>{{ listTable.list21 }}</td>
</tr>
<tr v-if="postList === 0">
<td colspan="5" class="no-list">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div v-show="isPopupOpen" 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>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isPopupOpen: false,
activeItemId: 0,
selectedId: null,
tableList: [
{ no: "1000000", name: "자산", },
{ no: "1101000", name: "현금", list1: "1.차변", list2: "Y", list3: "Y", list4: "Y", list5: "Y", list6: "Y", list7: "Y", list8: "Y", list9: "Y", list10: "Y", list11: "Y", list12: "Y", list13: "Y", list14: "Y", list15: "Y", list16: "세무계정", list17: "Y", list18: "부가세대급금(세금계산서)", list19: "Y", list20: "Y" }
],
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.isPopupOpen = true;
},
closeModal() {
this.isPopupOpen = false;
}
},
watch: {
},
computed: {
},
mounted() {
}
}
</script>
<style scoped>
</style>