<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> </div> </div> </div> <div class="container flex"> <div class="content gd-2 list-wrap flex-column "> <div class="content-title flex justify-between mb1"> 분류목록 </div> <div class="content-table pd4 "> <div style="border-top: 1px solid var(--borderlightgray);"> <table class="list-table"> <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 --> <colgroup> <col style="width: 20%;"> <col style="width: 80%;"> </colgroup> <thead> <tr class="table-header" style="background-color: var(--tableblue); color: var(--navbarblue); "> <th>코드분류</th> <th>코드분류명</th> </tr> </thead> <tbody class="table-border"> <tr v-for="(codeNum) in codeList" key="codeNum.id"> <td :class="{ 'selected': selectedId === codeNum.id }">{{ codeNum.pathNum }} </td> <td @click="clickCodeName(codeNum.id)" :class="{ 'selected': selectedId === codeNum.id }" class="wrap-text">{{ codeNum.pathName }}</td> </tr> </tbody> </table> </div> </div> </div> <div class="content gd-10 flex-column content-wrap" style="width: 100%;"> <div> <div class="flex justify-between"> <div class="content-title mb1 list-box">코드등록</div> <div><button>등록하기</button></div> </div> <div class=" flex section-wrap pd2"> <table class="Bi001-table flex " style="overflow-x: hidden; width: 100%;"> <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 --> <colgroup> <col style="width: 16%;"> <col style="width: 16%;"> <col style="width: 16%;"> <col style="width: 16%;"> <col style="width: 16%;"> <col style="width: 5%;"> </colgroup> <tbody v-for="(codeInput, id) in filteredCodeBox" :key="id" class="filter-table"> <tr> <th>분류코드</th> <td><input type="text"></td> <th>분류명</th> <td><input type="text"></td> <th>코드</th> <td><input type="text" class="input-wrap"></td> <td colspan="2"> <th>정렬순서</th> <td><input type="text" class="input-wrap"></td> <th>사용여부</th> <td><input type="checkbox" class="ui-checkbox"></td> </td> </tr> <tr v-show="activeItemId === codeInput.id"> <th>코드명</th> <td><input type="text"></td> <th>코드약명</th> <td><input type="text"></td> <th>{{ codeInput.pathName1 }}</th> <td><input type="text"></td> <th>{{ codeInput.pathName2 }}</th> <td><input type="text"></td> </tr> <tr> <th>{{ codeInput.pathName3 }}</th> <td><input type="text" name="" id=""></td> <th>{{ codeInput.pathName4 }}</th> <td><input type="text" name="" id=""></td> <th>{{ codeInput.pathName5 }}</th> <td><input type="text" name="" id=""></td> <th>{{ codeInput.pathName6 }}</th> <td><input type="text" name="" id=""></td> </tr> <tr> <th>{{ codeInput.pathName7 }}</th> <td><input type="text" name="" id=""></td> <th>{{ codeInput.pathName8 }}</th> <td><input type="text" name="" id=""></td> <th>{{ codeInput.pathName9 }}</th> <td><input type="text" name="" id=""></td> <th>{{ codeInput.pathName10 }}</th> <td><input type="text" name="" id=""></td> </tr> </tbody> </table> </div> <div class="table-border"> <div class="content-title mb1">코드목록</div> <div class="" style="height: 398px ; overflow-y: auto;"> <table class="list-table" style="height: 100%; overflow-y: auto;"> <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 --> <colgroup> <col style="width: 5%;"> <col style="width: 10%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> </colgroup> <thead class="list-table"> <tr v-for="(codeInput, id) in filteredCodeBox" :key="id" style="background-color: var(--tableblue);"> <th>코드</th> <th>코드명칭</th> <th>코드약칭</th> <th>정렬순서</th> <th>사용</th> <th class="wrap-text">{{ codeInput.pathName1 }}</th> <th>{{ codeInput.pathName2 }}</th> <th>{{ codeInput.pathName3 }}</th> <th>{{ codeInput.pathName4 }}</th> <th>{{ codeInput.pathName5 }}</th> <th>{{ codeInput.pathName6 }}</th> <th>{{ codeInput.pathName7 }}</th> <th>{{ codeInput.pathName8 }}</th> <th>{{ codeInput.pathName9 }}</th> <th>{{ codeInput.pathName10 }}</th> <th>{{ codeInput.pathName11 }}</th> <th class="wrap-text">{{ codeInput.pathName12 }}</th> </tr> </thead> <tbody style="height: 100%; "> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>000101</td> <td>합계잔액시산표</td> <td></td> <td>0</td> <td><input type="checkbox" checked name="" id="" class="ui-checkbox"> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr v-if="postList === 0"> <td colspan="5" class="no-list">검색조건에 해당하는 데이터가 없습니다.</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { activeItemId: 0, selectedId: null, codeList: [ { id: 0, pathNum: "001", pathName: "제무제표양식종류", selected: true }, { id: 1, pathNum: "002", pathName: "증빙구분" }, { id: 2, pathNum: "003", pathName: "카드번호" }, { id: 3, pathNum: "004", pathName: "사업장(회계)" }, { id: 4, pathNum: "005", pathName: "국세청전자(세금)계산서 수정사유코드" }, { id: 5, pathNum: "006", pathName: "은행코드" }, { id: 6, pathNum: "007", pathName: "지급조건" }, { id: 7, pathNum: "008", pathName: "어음종류" }, { id: 8, pathNum: "009", pathName: "어음구분" }, { id: 9, pathNum: "010", pathName: "차입종류" }, { id: 10, pathNum: "011", pathName: "원금상환방법" }, { id: 11, pathNum: "012", pathName: "이자납입방법" }, { id: 12, pathNum: "013", pathName: "전표결제진행상태" }, { id: 13, pathNum: "014", pathName: "사원번호별 계정과목 조회(사번)" }, { id: 14, pathNum: "015", pathName: "국책과제 카드" }, ], codeBox: [ // 제무제표양식종류 { id: 0, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 증빙구분 { id: 1, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 카드번호 { id: 2, pathName1: "카드번호", pathName2: "사업장구분", pathName3: "관리부서코드", pathName4: "NBS코드", pathName5: "카드수령일", pathName6: "유형", pathName7: "한도", pathName8: "유효기간(CVC)", pathName9: "사용부서명", pathName10: "담당자/부서장", pathName11: "관리항목11", pathName12: "관리항목12" }, // 사업장(회계) { id: 3, pathName1: "법인번호", pathName2: "사업자번호", pathName3: "대표자명", pathName4: "업태", pathName5: "종목", pathName6: "대표전화", pathName7: "사업장주소", pathName8: "설립년도", pathName9: "사업장 정식명칭", pathName10: "유형", pathName11: "관리항목11", pathName12: "관리항목12" }, // 국세청전자(세금)계산서 수정사유코드 { id: 4, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 은행코드 { id: 5, pathName1: "NBS은행코드", pathName2: "어음할인율(%)", pathName3: "할인한도액", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 지급조건 { id: 6, pathName1: "현금/어음/법인카드", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 어음종류 { id: 7, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 어음구분 { id: 8, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 차입종류 { id: 9, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 원금상환방법 { id: 10, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 이자납입방법 { id: 11, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 전표결제진행상태 { id: 12, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 전표결재진행상태 { id: 13, pathName1: "계정과목 (,로구분)", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, // 국책과제 카드 { id: 14, pathName1: "프로젝트 코드", pathName2: "사업장구분", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, ] } }, created() { if (this.codeList.length > 0) { this.selectedId = this.codeList[0].id; // 첫 번째 항목의 id를 선택합니다. } }, methods: { clickCodeName(id) { console.log(id); this.activeItemId = id; this.selectedId = id; console.log(`ID: ${this.activeItemId}`); } }, watch: { }, computed: { filteredCodeBox() { return this.codeBox.filter(codeInput => this.activeItemId === codeInput.id); }, }, mounted() { console.log('Main mounted'); } } </script> <style scoped> .wrap { width: 100%; height: 100%; } .content-wrap { padding-left: 30px; } .container { width: 100%; height: 100%; flex-wrap: nowrap; } td, th { padding: 5px 0; text-align: center; cursor: pointer; } .table-border td, .table-border th, .table-header th { border-bottom: 1px solid var(--borderlightgray); border-right: 1px solid var(--borderlightgray); } .list-table th { color: var(--navbarblue); } .filter-table th { text-align: left; } .wrap-text { word-break: keep-all; } input[type="text"]{ width: 100%; padding-right: 20px; } .Bi001-table th{ padding:0 20px; word-break: keep-all; } </style>