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 Bi002-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>
<div class="flex align-center">
<button class="blue-btn" style="padding-top: 7px ; padding-bottom: 7px;">조회(F12)</button>
</div>
</div>
</div>
</div>
<div class="gd-12 flex">
<div class="gd-5" style="width: 100%; height: 70%; ">
<div class="flex justify-between align-center ">
<div class="content-title pt2 pb2">
거래처 정보
</div>
<div>
<button class="blue-small-btn" style="color: var(--navbarblue);">거래처 찾기</button>
</div>
</div>
<div style="width: 100%; height: 100%; " class=" scroll-table pd2">
<div style="border-top: 1px solid var(--borderlightgray); border-bottom: 1px solid var(--borderlightgray);"
class="scrollable-table mb2">
<table class="list-table text text-ct">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 10%;">
<col style="width: 15%;">
<col style="width: 15%;">
<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>
<tr class="table-header">
<th>코드</th>
<th>거래처명</th>
<th>사업자번호</th>
<th>매입</th>
<th>매출</th>
<th>회계</th>
<th>영업</th>
<th>원자재</th>
<th>부자재</th>
<th>폐기물</th>
<th>약품</th>
</tr>
</thead>
<tbody class="table-border">
<tr v-for="(codeNum) in codeList" key="codeNum.id" style="max-height: 700px;">
<td>{{ codeNum.pathNum }}</td>
<td>{{ codeNum.pathName }}</td>
<td>{{ codeNum.businessNum }}</td>
<td><input type="checkbox" class="ui-checkbox"></td>
<td><input type="checkbox" class="ui-checkbox"></td>
<td><input type="checkbox" class="ui-checkbox"></td>
<td><input type="checkbox" class="ui-checkbox"></td>
<td><input type="checkbox" class="ui-checkbox"></td>
<td><input type="checkbox" class="ui-checkbox"></td>
<td><input type="checkbox" class="ui-checkbox"></td>
<td><input type="checkbox" class="ui-checkbox"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="gd-7 flex-column" style="padding-left: 30px;">
<div class="mb3">
<div class="content-title mt2 mb1">
거래처 등록
</div>
<div class=" flex section-wrap pd3" style="gap: 30px;">
<table class="Bi002-table flex" style="overflow-x: hidden;">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
</colgroup>
<tbody>
<tr>
<th>거래처명</th>
<td><input type="text"></td>
<td colspan="2">
<button class="blue-small-btn"
style="color: var(--navbarblue);">거래처복사</button>
</td>
</tr>
<tr>
<th>사업자번호</th>
<td class="flex">
<input type="text">
<input class="input-gray" type="text">
</td>
<th>종사업자번호</th>
<td class="flex">
<input type="text">
<input class="input-gray" type="text">
</td>
</tr>
<tr>
<th>법인/주민번호</th>
<td class="flex">
<input type="text">
<input class="input-gray" type="text">
</td>
<th>세금계산서종류</th>
<td class="flex">
<select name="" id="">
<option value=""></option>
<option value="">전자세금계산서</option>
<option value="">종이세금계산서</option>
<option value="">기타</option>
</select>
<input class="input-gray" type="text">
</td>
</tr>
<tr>
<th>대표자명</th>
<td class="flex">
<input type="text">
<input class="input-gray" type="text">
</td>
<th>홈페이지</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<th>업태</th>
<td>
<input type="text">
</td>
<th>종목</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<th>사업장 주소</th>
<td colspan="1">
<input type="text">
</td>
<td colspan="2">
<input type="text">
</td>
</tr>
<tr>
<th>전화번호</th>
<td class="flex">
<input type="text">
<input class="input-gray" type="text">
</td>
<th>팩스번호</th>
<td class="flex">
<input type="text">
<input class="input-gray" type="text">
</td>
</tr>
<tr>
<th>사업자구분</th>
<td class="flex">
<select name="" id="">
<option value=""></option>
<option value="">법인</option>
<option value="">개인</option>
</select>
<input class="input-gray" type="text">
</td>
<th>해외여부</th>
<td class="flex">
<select name="" id="">
<option value=""></option>
<option value="">국내</option>
</select>
<input class="input-gray" type="text">
</td>
</tr>
<tr>
<th>과세구분</th>
<td class="flex">
<select name="" id="">
<option value=""></option>
<option value="">과세</option>
<option value="">면세</option>
</select>
<input class="input-gray" type="text">
</td>
<th>거래코드</th>
<td class="flex">
<select name="" id="">
<option value=""></option>
<option value="">내수</option>
<option value="">Local</option>
<option value="">직수출</option>
</select>
<input class="input-gray" type="text">
</td>
</tr>
<tr>
<th>특수관계자</th>
<td class="flex">
<select name="" id="">
<option value=""></option>
<option value="">일반</option>
</select>
<input class="input-gray" type="text">
</td>
<th>계약기간</th>
<td class="flex align-center">
<input type="date">~
<input type="date">
</td>
</tr>
<tr>
<th>담당자1</th>
<td class="flex">
<input type="text">
<input class="input-gray" type="text">
</td>
<th>담당자2</th>
<td class="flex">
<input type="text">
<input class="input-gray" type="text">
</td>
</tr>
<tr>
<th>모바일번호1</th>
<td class="flex">
<input type="text">
<input class="input-gray" type="text">
</td>
<th>모바일번호2</th>
<td class="flex">
<input type="text">
<input class="input-gray" type="text">
</td>
</tr>
<tr>
<th>이메일1</th>
<td><input type="text"></td>
<th>이메일2</th>
<td><input type="text"></td>
</tr>
<tr>
<th>거래여부</th>
<td class="flex">
<div class="content-w100 flex align-center ">
<input type="checkbox" class="ui-checkbox" id="a">
<label for="a">거래</label>
<input type="checkbox" class="ui-checkbox" id="b">
<label for="b">중지</label>
</div>
<input class="input-gray" type="text">
</td>
<th>지급조건</th>
<td>
<select name="" id="">
<option value=""></option>
<option value="">현금 1개월</option>
<option value="">현금 2개월</option>
<option value="">현금 3개월</option>
<option value="">현금 중간결제</option>
<option value="">현금 매월25일</option>
<option value="">현금 매월27일</option>
<option value="">현금 매월말일</option>
<option value="">어음 1개월 초</option>
<option value="">어음 1개월 중</option>
<option value="">어음 1개월 말</option>
<option value="">어음 2개월 초</option>
<option value="">어음 2개월 중</option>
<option value="">어음 2개월 말</option>
<option value="">어음 3개월 초</option>
<option value="">어음 3개월 중</option>
<option value="">어음 3개월 말</option>
<option value="">법인카드</option>
</select>
</td>
</tr>
<tr>
<th>거래구분</th>
<td class="flex align-center ">
<div class="content-w100 flex align-center ">
<input type="checkbox" class="ui-checkbox" id="i">
<label for="i">매입</label>
<input type="checkbox" class="ui-checkbox" id="j">
<label for="j">매출</label>
</div>
<input class="input-gray" type="text">
</td>
<th>사용처</th>
<td class="flex align-center ">
<input type="checkbox" class="ui-checkbox" id="c">
<label for="c">회계</label>
<input type="checkbox" class="ui-checkbox" id="d">
<label for="d">영업</label>
<input type="checkbox" class="ui-checkbox" id="e">
<label for="e">원자재</label>
<input type="checkbox" class="ui-checkbox" id="f">
<label for="f">부자재</label>
<input type="checkbox" class="ui-checkbox" id="g">
<label for="g">폐기물</label>
<input type="checkbox" class="ui-checkbox" id="h">
<label for="h">약품</label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div style="border-top: 1px solid var(--borderlightgray); " class="scrollable-table mb2">
<table class="list-table text section-table bank-wrap">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 5%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 15%;">
<col style="width: 5%;">
</colgroup>
<thead>
<tr class="table-header">
<th>구분</th>
<th>은행</th>
<th>사업자번호</th>
<th>예금주명</th>
<th>주거래계좌</th>
</tr>
</thead>
<tbody class="table-border ">
<tr style="max-height: 700px;">
<th class="table-header">거래은행1</th>
<td>
<select name="" id="">
<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>
<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>
<td><input type="text"></td>
<td><input type="text"></td>
<td class="text-ct"><input type="checkbox" class="ui-checkbox"></td>
</tr>
<tr>
<th class="table-header">거래은행2</th>
<td>
<select name="" id="">
<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>
<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>
<td><input type="text"></td>
<td><input type="text"></td>
<td class="text-ct"><input type="checkbox" class="ui-checkbox"></td>
</tr>
<tr>
<th class="table-header">거래은행3</th>
<td>
<select name="" id="">
<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>
<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>
<td><input type="text"></td>
<td><input type="text"></td>
<td class="text-ct"><input type="checkbox" class="ui-checkbox"></td>
</tr>
<tr>
<th class="table-header">거래은행4</th>
<td>
<select name="" id="">
<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>
<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>
<td><input type="text"></td>
<td><input type="text"></td>
<td class="text-ct"><input type="checkbox" class="ui-checkbox"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
codeList: [
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
{ pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
]
}
},
methods: {
},
watch: {
},
computed: {
},
mounted() {
console.log('Main mounted');
}
}
</script>
<style scoped>
.Bi002-table th {
padding: 0 10px;
white-space: nowrap
}
.Bi002-table td {
padding: 2px;
}
.Bi002-table input,
.Bi002-table select {
padding: 3px;
}
.Bi002-table .flex {
flex-wrap: nowrap;
}
.Bi002-table select option {
padding: 3px;
}
.Bi002-table input[type="text"],
.Bi002-table select,
.Bi002-table input[type="date"] {
width: 100%;
margin-right: 3px;
}
.Bi002-table input[type="checkbox"] {
margin-right: 3px;
}
.Bi002-table label {
margin-right: 2px;
line-height: 18px;
}
.address-row .flex {
flex-wrap: nowrap;
}
.address-row .flex input {
width: 40%;
}
.section-table input[type="text"],.section-table select{
width: 100%;
border: 0px;
}
.section-table input[type="checkbox"]{
text-align: center;
margin: 0 auto;
}
.section-wrap table {
height: 230px;
overflow-y: auto;
}
.bank-wrap td{
padding: 2px 0;
}
</style>