![](/assets/images/project_default_logo.png)
![](/assets/images/default-avatar-128.png)
240307김하영 거래처정보등록 생성중
@02dc120f38afa40668cdbb468bef1eb6fce9979f
--- client/resources/css/component.css
+++ client/resources/css/component.css
... | ... | @@ -14,13 +14,17 @@ |
14 | 14 |
width: 100%; |
15 | 15 |
z-index: 1; |
16 | 16 |
} |
17 |
- |
|
17 |
+/* .app-wrap{ |
|
18 |
+ border: 1px solid red; |
|
19 |
+ min-width: 1280px; |
|
20 |
+} */ |
|
18 | 21 |
.wrapper { |
19 | 22 |
width: 100%; |
20 | 23 |
height: 100%; |
21 | 24 |
position: absolute; |
22 | 25 |
top: 0px; |
23 | 26 |
left: 0px; |
27 |
+ flex-wrap: nowrap; |
|
24 | 28 |
padding-top: 124.5px; |
25 | 29 |
font-family: 'Pretendard'; |
26 | 30 |
background-color: var(--white); |
--- client/resources/css/reset.css
+++ client/resources/css/reset.css
... | ... | @@ -44,11 +44,18 @@ |
44 | 44 |
padding: 0; |
45 | 45 |
} |
46 | 46 |
body { |
47 |
- min-width: 1280px; |
|
47 |
+ min-width: 1300px; |
|
48 |
+ overflow-x: auto; |
|
48 | 49 |
} |
49 |
-body::-webkit-scrollbar { |
|
50 |
- display: none; |
|
51 |
- } |
|
50 |
+ |
|
51 |
+.layout-wrap { |
|
52 |
+ width: 100%; |
|
53 |
+ min-height: 100vh; |
|
54 |
+ position: relative; |
|
55 |
+ |
|
56 |
+} |
|
57 |
+ |
|
58 |
+ |
|
52 | 59 |
a { |
53 | 60 |
color: #333; |
54 | 61 |
text-decoration: none; |
... | ... | @@ -106,6 +113,7 @@ |
106 | 113 |
line-height: 1.5; |
107 | 114 |
display: flex; |
108 | 115 |
flex-direction: column; |
116 |
+ |
|
109 | 117 |
} |
110 | 118 |
|
111 | 119 |
/* 제목 요소와 상호작용하는 요소에 대해 line-height를 더 짧게 설정합니다. */ |
... | ... | @@ -163,10 +171,6 @@ |
163 | 171 |
min-height: 10em; |
164 | 172 |
} |
165 | 173 |
|
166 |
-/* 고정된 모든 항목에는 여분의 스크롤 여백이 있어야 합니다. */ |
|
167 |
-:target { |
|
168 |
- scroll-margin-block: 5ex; |
|
169 |
-} |
|
170 | 174 |
|
171 | 175 |
table{ |
172 | 176 |
min-width: 100%; |
--- client/resources/css/responsive.css
+++ client/resources/css/responsive.css
... | ... | @@ -1,122 +1,0 @@ |
1 |
-/* 480 small */ |
|
2 |
-@media (min-width: 480px) { |
|
3 |
- .container { |
|
4 |
- max-width: 768px; |
|
5 |
- overflow-x: auto; |
|
6 |
- |
|
7 |
- } |
|
8 |
- .content-wrap{ |
|
9 |
- min-width: max-content; |
|
10 |
- } |
|
11 |
- .topmenu-wrap{ |
|
12 |
- min-width: max-content; |
|
13 |
- } |
|
14 |
- .main-nav::-webkit-scrollbar{ |
|
15 |
- height: 2px; |
|
16 |
- } |
|
17 |
- |
|
18 |
-} |
|
19 |
- |
|
20 |
-/* 768 medium */ |
|
21 |
-@media screen and (min-width: 768px ) and (max-width:1024px) { |
|
22 |
- .container { |
|
23 |
- max-width: 1024px; |
|
24 |
- overflow-x: auto; |
|
25 |
- |
|
26 |
- } |
|
27 |
- .content-wrap{ |
|
28 |
- min-width: max-content; |
|
29 |
- } |
|
30 |
- .topmenu-wrap{ |
|
31 |
- min-width: max-content; |
|
32 |
- } |
|
33 |
- .main-nav::-webkit-scrollbar{ |
|
34 |
- height: 2px; |
|
35 |
- } |
|
36 |
- |
|
37 |
-} |
|
38 |
- |
|
39 |
-/* 1024 large */ |
|
40 |
-@media screen and (min-width: 1024px)and (max-width:1280px) { |
|
41 |
- .container { |
|
42 |
- max-width: 1280px; |
|
43 |
- overflow-x: auto; |
|
44 |
- |
|
45 |
- } |
|
46 |
- |
|
47 |
- .content-wrap{ |
|
48 |
- min-width: max-content; |
|
49 |
- } |
|
50 |
- .main-nav{ |
|
51 |
- width: 100%; |
|
52 |
- overflow-x: auto; |
|
53 |
- } |
|
54 |
- .topmenu-wrap{ |
|
55 |
- min-width: max-content; |
|
56 |
- } |
|
57 |
- .main-nav::-webkit-scrollbar{ |
|
58 |
- height: 2px; |
|
59 |
- } |
|
60 |
-} |
|
61 |
- |
|
62 |
-/* 1280 Xlarge */ |
|
63 |
-@media (min-width: 1280px) { |
|
64 |
- .container { |
|
65 |
- max-width: 100%; |
|
66 |
- |
|
67 |
- } |
|
68 |
- .content-wrap{ |
|
69 |
- min-width: max-content; |
|
70 |
- } |
|
71 |
- |
|
72 |
- .main-nav ul { |
|
73 |
- padding: 10px 10px; |
|
74 |
- } |
|
75 |
- |
|
76 |
- .main-nav p { |
|
77 |
- font-size: 1.2rem; |
|
78 |
- } |
|
79 |
- |
|
80 |
- .topmenu-wrap p.active { |
|
81 |
- width: 80px; |
|
82 |
- } |
|
83 |
- |
|
84 |
- .box-area { |
|
85 |
- flex-wrap: nowrap; |
|
86 |
- } |
|
87 |
- .content-area td { |
|
88 |
- width: 16%; |
|
89 |
- } |
|
90 |
- |
|
91 |
- .wrap { |
|
92 |
- overflow-y: scroll; |
|
93 |
- } |
|
94 |
- |
|
95 |
- .content-scoll { |
|
96 |
- height: 200px; |
|
97 |
- } |
|
98 |
- |
|
99 |
- .content-table::-webkit-scrollbar { |
|
100 |
- width: 2px; |
|
101 |
- } |
|
102 |
- .content-table::-webkit-scrollbar-thumb{ |
|
103 |
- background-color: var(--navbarblue); |
|
104 |
- } |
|
105 |
- |
|
106 |
- .content-wrap { |
|
107 |
- padding-left: 20px; |
|
108 |
- } |
|
109 |
- |
|
110 |
- .box-overflow { |
|
111 |
- height: 298px; |
|
112 |
- } |
|
113 |
- |
|
114 |
- .box-overflow th { |
|
115 |
- word-break: keep-all; |
|
116 |
- |
|
117 |
- } |
|
118 |
- |
|
119 |
- .table-input input[type="text"] { |
|
120 |
- width: 130px; |
|
121 |
- } |
|
122 |
-}(No newline at end of file) |
--- client/resources/css/style.css
+++ client/resources/css/style.css
... | ... | @@ -196,17 +196,6 @@ |
196 | 196 |
font-weight: 600; |
197 | 197 |
} |
198 | 198 |
|
199 |
-/* .text-befor::before { |
|
200 |
- position: absolute; |
|
201 |
- content: ''; |
|
202 |
- background: url(../img/component/star-solid.svg) no-repeat; |
|
203 |
- width: 15px; |
|
204 |
- height: 15px; |
|
205 |
- top: 50%; |
|
206 |
- left: 0%; |
|
207 |
- transform: translateY(-50%); |
|
208 |
- color: var(--navbarblue); |
|
209 |
-} */ |
|
210 | 199 |
|
211 | 200 |
.table-border td.selected { |
212 | 201 |
background-color: var(--navbarblue); |
... | ... | @@ -238,4 +227,99 @@ |
238 | 227 |
.box-overflow thead { |
239 | 228 |
position: sticky; |
240 | 229 |
top: -1px; |
241 |
-}(No newline at end of file) |
|
230 |
+} |
|
231 |
+ |
|
232 |
+.wrap { |
|
233 |
+ width: 100%; |
|
234 |
+ height: 100%; |
|
235 |
+} |
|
236 |
+ |
|
237 |
+.content { |
|
238 |
+ height: 100%; |
|
239 |
+} |
|
240 |
+ |
|
241 |
+.content-wrap { |
|
242 |
+ padding-left: 20px; |
|
243 |
+ gap: 30px; |
|
244 |
+} |
|
245 |
+ |
|
246 |
+.container { |
|
247 |
+ width: 100%; |
|
248 |
+ height: 100%; |
|
249 |
+ flex-wrap: nowrap; |
|
250 |
+} |
|
251 |
+ |
|
252 |
+select, |
|
253 |
+input { |
|
254 |
+ font-size: 1.2rem; |
|
255 |
+ font-weight: 600; |
|
256 |
+} |
|
257 |
+ |
|
258 |
+p, |
|
259 |
+td { |
|
260 |
+ font-size: 1.3rem; |
|
261 |
+ margin-right: 10px; |
|
262 |
+} |
|
263 |
+ |
|
264 |
+td, |
|
265 |
+p, |
|
266 |
+th, |
|
267 |
+button { |
|
268 |
+ padding: 7px 0; |
|
269 |
+ /* text-align: center; */ |
|
270 |
+ cursor: pointer; |
|
271 |
+} |
|
272 |
+ |
|
273 |
+.table-border td, |
|
274 |
+.table-border th, |
|
275 |
+.table-header th { |
|
276 |
+ border-bottom: 1px solid var(--borderlightgray); |
|
277 |
+ border-right: 1px solid var(--borderlightgray); |
|
278 |
+ |
|
279 |
+} |
|
280 |
+ |
|
281 |
+.list-table th { |
|
282 |
+ color: var(--navbarblue); |
|
283 |
+} |
|
284 |
+ |
|
285 |
+ |
|
286 |
+ |
|
287 |
+ |
|
288 |
+.table-area { |
|
289 |
+ border: 1px solid var(--bordergray); |
|
290 |
+ border-radius: 10px; |
|
291 |
+} |
|
292 |
+ |
|
293 |
+.box-wrap { |
|
294 |
+ font-size: 1.2rem; |
|
295 |
+} |
|
296 |
+ |
|
297 |
+.blue-btn { |
|
298 |
+ background-color: var(--navbarblue); |
|
299 |
+ color: var(--white); |
|
300 |
+ padding: 3px 20px; |
|
301 |
+ font-size: 1.3rem; |
|
302 |
+ border-radius: 5px; |
|
303 |
+ |
|
304 |
+} |
|
305 |
+ |
|
306 |
+.header-btn p { |
|
307 |
+ margin: 0 auto; |
|
308 |
+} |
|
309 |
+ |
|
310 |
+.section-wrap{ |
|
311 |
+ overflow-y: auto; |
|
312 |
+ background-color: var(--tableblue); |
|
313 |
+ border: 1px solid red; |
|
314 |
+} |
|
315 |
+ |
|
316 |
+.Bi002-table{ |
|
317 |
+ text-align: left; |
|
318 |
+} |
|
319 |
+.input-box{ |
|
320 |
+ flex-wrap: nowrap; |
|
321 |
+ gap: 1px; |
|
322 |
+} |
|
323 |
+.input-box input{ |
|
324 |
+ width: 100%; |
|
325 |
+} |
--- client/views/pages/AccountingManagement/BaselineInformation/Bi001.vue
+++ client/views/pages/AccountingManagement/BaselineInformation/Bi001.vue
... | ... | @@ -1,57 +1,61 @@ |
1 | 1 |
<template> |
2 |
- <div class="gd-10 Bi001-page container" style="width: max-content;"> |
|
2 |
+ <div class="gd-10 Bi001-page container"> |
|
3 | 3 |
<div class="wrap pd2 flex-column"> |
4 | 4 |
<div class="wrap-title pb1 mb1 flex justify-between"> |
5 | 5 |
<h1>(회계) 공동 코드 등록</h1> |
6 | 6 |
<div class="flex justify-end gd-5"> |
7 | 7 |
|
8 | 8 |
<div class="flex justify-between button-wrap"> |
9 |
- <button>초기화</button> |
|
10 |
- <button>저장</button> |
|
9 |
+ <button class="rest-btn">초기화</button> |
|
10 |
+ <button class="save-btn">저장</button> |
|
11 | 11 |
</div> |
12 | 12 |
|
13 | 13 |
|
14 | 14 |
</div> |
15 | 15 |
</div> |
16 | 16 |
<div class="container flex"> |
17 |
- <div class="content gd-3 list-wrap flex-column"> |
|
17 |
+ <div class="content gd-2 list-wrap flex-column "> |
|
18 | 18 |
<div class="content-title flex justify-between mb1"> |
19 | 19 |
분류목록 |
20 | 20 |
</div> |
21 | 21 |
<div class="content-table pd4 "> |
22 |
- <table class="list-table"> |
|
23 |
- <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 --> |
|
24 |
- <colgroup> |
|
25 |
- <col style="width: 20%;"> |
|
26 |
- <col style="width: 80%;"> |
|
22 |
+ <div class="box-overflow"> |
|
27 | 23 |
|
28 |
- </colgroup> |
|
29 |
- <thead> |
|
30 |
- <tr class="table-header" |
|
31 |
- style="background-color: var(--tableblue); color: var(--navbarblue); "> |
|
32 |
- <th>코드분류</th> |
|
33 |
- <th>코드분류명</th> |
|
34 |
- |
|
35 |
- </tr> |
|
36 |
- </thead> |
|
37 |
- <tbody class="table-border"> |
|
38 |
- <tr v-for="(codeNum) in codeList" key="codeNum.id"> |
|
39 |
- <td :class="{ 'selected': selectedId === codeNum.id }">{{ codeNum.pathNum }}</td> |
|
40 |
- <td @click="clickCodeName(codeNum.id)" |
|
41 |
- :class="{ 'selected': selectedId === codeNum.id }">{{ codeNum.pathName }}</td> |
|
42 |
- |
|
43 |
- </tr> |
|
44 |
- |
|
45 |
- |
|
46 |
- </tbody> |
|
47 |
- </table> |
|
24 |
+ <table class="list-table"> |
|
25 |
+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 --> |
|
26 |
+ <colgroup> |
|
27 |
+ <col style="width: 20%;"> |
|
28 |
+ <col style="width: 80%;"> |
|
29 |
+ |
|
30 |
+ </colgroup> |
|
31 |
+ <thead> |
|
32 |
+ <tr class="table-header" |
|
33 |
+ style="background-color: var(--tableblue); color: var(--navbarblue); "> |
|
34 |
+ <th>코드분류</th> |
|
35 |
+ <th>코드분류명</th> |
|
36 |
+ |
|
37 |
+ </tr> |
|
38 |
+ </thead> |
|
39 |
+ <tbody class="table-border"> |
|
40 |
+ <tr v-for="(codeNum) in codeList" key="codeNum.id"> |
|
41 |
+ <td :class="{ 'selected': selectedId === codeNum.id }">{{ codeNum.pathNum }}</td> |
|
42 |
+ <td @click="clickCodeName(codeNum.id)" |
|
43 |
+ :class="{ 'selected': selectedId === codeNum.id }" class="wrap-text">{{ |
|
44 |
+ codeNum.pathName }}</td> |
|
45 |
+ |
|
46 |
+ </tr> |
|
47 |
+ |
|
48 |
+ |
|
49 |
+ </tbody> |
|
50 |
+ </table> |
|
51 |
+ </div> |
|
48 | 52 |
</div> |
49 | 53 |
|
50 | 54 |
</div> |
51 |
- <div class="content gd-9 flex-column content-wrap"> |
|
55 |
+ <div class="content gd-10 flex-column content-wrap" style="width: 100%;"> |
|
52 | 56 |
<div> |
53 | 57 |
<div class="content-title mb1 list-box">코드등록</div> |
54 |
- <div class="code-area"> |
|
58 |
+ <div class="code-area table-input"> |
|
55 | 59 |
|
56 | 60 |
<table> |
57 | 61 |
|
... | ... | @@ -152,7 +156,7 @@ |
152 | 156 |
<th>코드약칭</th> |
153 | 157 |
<th>정렬순서</th> |
154 | 158 |
<th>사용</th> |
155 |
- <th>{{ codeInput.pathName1 }}</th> |
|
159 |
+ <th class="wrap-text">{{ codeInput.pathName1 }}</th> |
|
156 | 160 |
<th>{{ codeInput.pathName2 }}</th> |
157 | 161 |
<th>{{ codeInput.pathName3 }}</th> |
158 | 162 |
<th>{{ codeInput.pathName4 }}</th> |
... | ... | @@ -163,7 +167,7 @@ |
163 | 167 |
<th>{{ codeInput.pathName9 }}</th> |
164 | 168 |
<th>{{ codeInput.pathName10 }}</th> |
165 | 169 |
<th>{{ codeInput.pathName11 }}</th> |
166 |
- <th>{{ codeInput.pathName12 }}</th> |
|
170 |
+ <th class="wrap-text">{{ codeInput.pathName12 }}</th> |
|
167 | 171 |
|
168 | 172 |
|
169 | 173 |
|
... | ... | @@ -172,10 +176,10 @@ |
172 | 176 |
<tbody> |
173 | 177 |
<tr> |
174 | 178 |
<td>000101</td> |
175 |
- <td>기업은행</td> |
|
179 |
+ <td>합계잔액시산표</td> |
|
176 | 180 |
<td></td> |
177 | 181 |
<td>0</td> |
178 |
- <td><input type="checkbox" name="" id="" class="ui-checkbox"></td> |
|
182 |
+ <td><input type="checkbox" checked name="" id="" class="ui-checkbox"></td> |
|
179 | 183 |
<td></td> |
180 | 184 |
<td></td> |
181 | 185 |
<td></td> |
... | ... | @@ -235,13 +239,13 @@ |
235 | 239 |
// 카드번호 |
236 | 240 |
{ id: 2, pathName1: "카드번호", pathName2: "사업장구분", pathName3: "관리부서코드", pathName4: "NBS코드", pathName5: "카드수령일", pathName6: "유형", pathName7: "한도", pathName8: "유효기간(CVC)", pathName9: "사용부서명", pathName10: "담당자/부서장", pathName11: "관리항목11", pathName12: "관리항목12" }, |
237 | 241 |
// 사업장(회계) |
238 |
- { id: 3, pathName1: "법인번호", pathName2: "사업자번호", pathName3: "대표자명", pathName4: "업태", pathName5: "종목", pathName6: "대표전화", pathName7: "사업장주소", pathName8: "설립년도", pathName9: "사업장정식명칭", pathName10: "유형", pathName11: "관리항목11", pathName12: "관리항목12" }, |
|
242 |
+ { id: 3, pathName1: "법인번호", pathName2: "사업자번호", pathName3: "대표자명", pathName4: "업태", pathName5: "종목", pathName6: "대표전화", pathName7: "사업장주소", pathName8: "설립년도", pathName9: "사업장 정식명칭", pathName10: "유형", pathName11: "관리항목11", pathName12: "관리항목12" }, |
|
239 | 243 |
// 국세청전자(세금)계산서 수정사유코드 |
240 | 244 |
{ 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" }, |
241 | 245 |
// 은행코드 |
242 | 246 |
{ id: 5, pathName1: "NBS은행코드", pathName2: "어음할인율(%)", pathName3: "할인한도액", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, |
243 | 247 |
// 지급조건 |
244 |
- { id: 6, pathName1: "1.현금 2.어음 3.법인카드", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, |
|
248 |
+ { 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" }, |
|
245 | 249 |
// 어음종류 |
246 | 250 |
{ 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" }, |
247 | 251 |
// 어음구분 |
... | ... | @@ -255,7 +259,7 @@ |
255 | 259 |
// 전표결제진행상태 |
256 | 260 |
{ 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" }, |
257 | 261 |
// 전표결재진행상태 |
258 |
- { 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" }, |
|
262 |
+ { 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" }, |
|
259 | 263 |
// 국책과제 카드 |
260 | 264 |
{ id: 14, pathName1: "프로젝트 코드", pathName2: "사업장구분", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" }, |
261 | 265 |
] |
... | ... | @@ -329,7 +333,8 @@ |
329 | 333 |
.filter-table th { |
330 | 334 |
text-align: left; |
331 | 335 |
} |
332 |
-.gd-10 { |
|
333 |
- width: max-content; |
|
336 |
+ |
|
337 |
+.wrap-text { |
|
338 |
+ word-break: keep-all; |
|
334 | 339 |
} |
335 | 340 |
</style>(No newline at end of file) |
--- client/views/pages/AccountingManagement/BaselineInformation/Bi002.vue
+++ client/views/pages/AccountingManagement/BaselineInformation/Bi002.vue
... | ... | @@ -1,12 +1,378 @@ |
1 | 1 |
<template> |
2 |
- <div class="row gd-10" >Main.vue</div> |
|
2 |
+ <div class="gd-10 Bi002-page container"> |
|
3 |
+ <div class="wrap pd2 flex-column"> |
|
4 |
+ <div class="wrap-title pb1 mb1 flex justify-between"> |
|
5 |
+ <h1>거래처 정보 등록</h1> |
|
6 |
+ <div class="flex justify-end gd-5"> |
|
3 | 7 |
|
8 |
+ <div class="flex justify-between button-wrap"> |
|
9 |
+ <button class="rest-btn">초기화</button> |
|
10 |
+ <button class="save-btn">저장</button> |
|
11 |
+ <button class="del-btn">삭제</button> |
|
12 |
+ </div> |
|
13 |
+ |
|
14 |
+ </div> |
|
15 |
+ </div> |
|
16 |
+ <div class="content flex-column"> |
|
17 |
+ <div class="row"> |
|
18 |
+ <div class="content-title flex justify-between mb1"> |
|
19 |
+ 조회조건 |
|
20 |
+ </div> |
|
21 |
+ <div class="flex justify-between pb1" style="border-bottom: 2px solid var(--bordergray);"> |
|
22 |
+ |
|
23 |
+ <div class="flex justify-start box-wrap gd-10"> |
|
24 |
+ |
|
25 |
+ <div class="flex mr5"> |
|
26 |
+ <div> |
|
27 |
+ <p class="blue-text">사업장</p> |
|
28 |
+ </div> |
|
29 |
+ <select name="" id="" style="width: 150px;"> |
|
30 |
+ <option value="본점">본점(제지)</option> |
|
31 |
+ <option value="본점(포장)">본점(포장)</option> |
|
32 |
+ <option value="에너지솔루션(주)">에너지솔루션(주)</option> |
|
33 |
+ </select> |
|
34 |
+ </div> |
|
35 |
+ </div> |
|
36 |
+ <div class="flex align-center"> |
|
37 |
+ <button class="blue-btn">조회</button> |
|
38 |
+ </div> |
|
39 |
+ |
|
40 |
+ |
|
41 |
+ </div> |
|
42 |
+ </div> |
|
43 |
+ </div> |
|
44 |
+ <div class="gd-12 flex"> |
|
45 |
+ |
|
46 |
+ <div class="gd-5" style="width: 100%; height: 100px;"> |
|
47 |
+ <div class="content-title flex justify-between pt2 pb2"> |
|
48 |
+ 거래처 정보 |
|
49 |
+ </div> |
|
50 |
+ <div style="border-bottom: 2px solid var(--borderlightgray);"> |
|
51 |
+ <table class="list-table"> |
|
52 |
+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 --> |
|
53 |
+ <colgroup> |
|
54 |
+ <col style="width: 10%;"> |
|
55 |
+ <col style="width: 20%;"> |
|
56 |
+ <col style="width: 20%;"> |
|
57 |
+ <col style="width: 5%;"> |
|
58 |
+ <col style="width: 5%;"> |
|
59 |
+ <col style="width: 5%;"> |
|
60 |
+ <col style="width: 5%;"> |
|
61 |
+ <col style="width: 5%;"> |
|
62 |
+ <col style="width: 5%;"> |
|
63 |
+ <col style="width: 5%;"> |
|
64 |
+ <col style="width: 5%;"> |
|
65 |
+ |
|
66 |
+ </colgroup> |
|
67 |
+ <thead> |
|
68 |
+ <tr class="table-header" |
|
69 |
+ style="background-color: var(--tableblue); color: var(--navbarblue); "> |
|
70 |
+ <th>코드</th> |
|
71 |
+ <th>거래처명</th> |
|
72 |
+ <th>사업자번호</th> |
|
73 |
+ <th>매입</th> |
|
74 |
+ <th>매출</th> |
|
75 |
+ <th>회계</th> |
|
76 |
+ <th>영업</th> |
|
77 |
+ <th>원자재</th> |
|
78 |
+ <th>부자재</th> |
|
79 |
+ <th>폐기물</th> |
|
80 |
+ <th>약품</th> |
|
81 |
+ |
|
82 |
+ </tr> |
|
83 |
+ </thead> |
|
84 |
+ <tbody class="table-border"> |
|
85 |
+ <tr v-for="(codeNum) in codeList" key="codeNum.id"> |
|
86 |
+ <td>{{ codeNum.pathNum }}</td> |
|
87 |
+ <td>{{ codeNum.pathName }}</td> |
|
88 |
+ <td>{{ codeNum.businessNum }}</td> |
|
89 |
+ <td><input type="checkbox" class="ui-checkbox"></td> |
|
90 |
+ <td><input type="checkbox" class="ui-checkbox"></td> |
|
91 |
+ <td><input type="checkbox" class="ui-checkbox"></td> |
|
92 |
+ <td><input type="checkbox" class="ui-checkbox"></td> |
|
93 |
+ <td><input type="checkbox" class="ui-checkbox"></td> |
|
94 |
+ <td><input type="checkbox" class="ui-checkbox"></td> |
|
95 |
+ <td><input type="checkbox" class="ui-checkbox"></td> |
|
96 |
+ <td><input type="checkbox" class="ui-checkbox"></td> |
|
97 |
+ </tr> |
|
98 |
+ </tbody> |
|
99 |
+ </table> |
|
100 |
+ </div> |
|
101 |
+ <div class="flex justify-end"> |
|
102 |
+ <button>거래처 찾기</button> |
|
103 |
+ </div> |
|
104 |
+ </div> |
|
105 |
+ <div class="gd-7" style="padding-left: 30px;"> |
|
106 |
+ <div class="flex-column justify-between" style="gap: 30px;"> |
|
107 |
+ <div class="content-title flex justify-between mb1"> |
|
108 |
+ 거래처 등록 |
|
109 |
+ </div> |
|
110 |
+ <div class="section-wrap pd3"> |
|
111 |
+ <table class="Bi002-table flex"> |
|
112 |
+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 --> |
|
113 |
+ <colgroup> |
|
114 |
+ <col style="width: 15%;"> |
|
115 |
+ <col style="width: 15%;"> |
|
116 |
+ <col style="width: 15%;"> |
|
117 |
+ <col style="width: 15%;"> |
|
118 |
+ <col style="width: 15%;"> |
|
119 |
+ |
|
120 |
+ |
|
121 |
+ |
|
122 |
+ </colgroup> |
|
123 |
+ <tbody> |
|
124 |
+ <tr> |
|
125 |
+ <th>코드</th> |
|
126 |
+ <td><input type="text" name="" id=""></td> |
|
127 |
+ <td><button>거래처복사</button></td> |
|
128 |
+ </tr> |
|
129 |
+ <tr> |
|
130 |
+ <th>거래처명</th> |
|
131 |
+ <td><input type="text" name="" id=""></td> |
|
132 |
+ <th>약칭명</th> |
|
133 |
+ <td><input type="text" name="" id=""></td> |
|
134 |
+ </tr> |
|
135 |
+ <tr> |
|
136 |
+ <th>사업자번호</th> |
|
137 |
+ <td class="input-box flex"> |
|
138 |
+ <input type="text" name="" id=""> |
|
139 |
+ <input type="text" name="" id=""> |
|
140 |
+ </td> |
|
141 |
+ <th>종사업자번호</th> |
|
142 |
+ <td class="input-box flex"> |
|
143 |
+ <input type="text" name="" id=""> |
|
144 |
+ <input type="text" name="" id=""> |
|
145 |
+ </td> |
|
146 |
+ </tr> |
|
147 |
+ <tr> |
|
148 |
+ <th>법인/주민번호</th> |
|
149 |
+ <td class="flex input-box"> |
|
150 |
+ <input type="text" name="" id=""> |
|
151 |
+ <input type="text" name="" id=""> |
|
152 |
+ </td> |
|
153 |
+ <th>세금계산서종류</th> |
|
154 |
+ <td class="flex input-box"> |
|
155 |
+ <select name="" id=""> |
|
156 |
+ <option value="">전자세금계산서</option> |
|
157 |
+ <option value="">종이세금계산서</option> |
|
158 |
+ <option value="">기타</option> |
|
159 |
+ </select> |
|
160 |
+ <input type="text" name="" id=""> |
|
161 |
+ </td> |
|
162 |
+ </tr> |
|
163 |
+ <tr> |
|
164 |
+ <th>대표자명</th> |
|
165 |
+ <td class="flex input-box"> |
|
166 |
+ <input type="text" name="" id=""> |
|
167 |
+ <input type="text" name="" id=""> |
|
168 |
+ </td> |
|
169 |
+ <th>홈페이지</th> |
|
170 |
+ <td> |
|
171 |
+ <input type="text" name="" id=""> |
|
172 |
+ </td> |
|
173 |
+ </tr> |
|
174 |
+ <tr> |
|
175 |
+ <th>업태</th> |
|
176 |
+ <td> |
|
177 |
+ <input type="text" name="" id=""> |
|
178 |
+ </td> |
|
179 |
+ <th>종목</th> |
|
180 |
+ <td> |
|
181 |
+ <input type="text" name="" id=""> |
|
182 |
+ </td> |
|
183 |
+ </tr> |
|
184 |
+ <tr class="address-row"> |
|
185 |
+ <th>사업장주소</th> |
|
186 |
+ <td colspan="1" style="border: 1px solid red;"> |
|
187 |
+ <input type="text" name="" id=""> |
|
188 |
+ </td> |
|
189 |
+ <td> |
|
190 |
+ <button>검색</button> |
|
191 |
+ |
|
192 |
+ </td> |
|
193 |
+ <td class="flex input-box"> |
|
194 |
+ <input type="text" name="" id=""> |
|
195 |
+ |
|
196 |
+ </td> |
|
197 |
+ |
|
198 |
+ </tr> |
|
199 |
+ <tr> |
|
200 |
+ |
|
201 |
+ <th>전화번호</th> |
|
202 |
+ <td class="input-box flex"> |
|
203 |
+ <input type="text" name="" id=""> |
|
204 |
+ <input type="text" name="" id=""> |
|
205 |
+ </td> |
|
206 |
+ |
|
207 |
+ <th>팩스번호</th> |
|
208 |
+ <td class="input-box flex"> |
|
209 |
+ <input type="text" name="" id=""> |
|
210 |
+ <input type="text" name="" id=""> |
|
211 |
+ </td> |
|
212 |
+ </tr> |
|
213 |
+ <tr> |
|
214 |
+ <th>사업자구분</th> |
|
215 |
+ <td class="flex"> |
|
216 |
+ <select name="" id=""> |
|
217 |
+ <option value="">법인</option> |
|
218 |
+ <option value="">개인</option> |
|
219 |
+ </select> |
|
220 |
+ </td> |
|
221 |
+ <th>해외여부</th> |
|
222 |
+ <td class="input-box flex"> |
|
223 |
+ <select name="" id=""> |
|
224 |
+ <option value="">국내</option> |
|
225 |
+ <option value="">해외</option> |
|
226 |
+ </select> |
|
227 |
+ <input type="text" name="" id=""> |
|
228 |
+ </td> |
|
229 |
+ </tr> |
|
230 |
+ <tr> |
|
231 |
+ <th>과세구분</th> |
|
232 |
+ <td class="flex"> |
|
233 |
+ <select name="" id=""> |
|
234 |
+ <option value="">과세</option> |
|
235 |
+ <option value="">면세</option> |
|
236 |
+ </select> |
|
237 |
+ </td> |
|
238 |
+ <th>거래코드</th> |
|
239 |
+ <td class="input-box flex"> |
|
240 |
+ <select name="" id=""> |
|
241 |
+ <option value="">내수</option> |
|
242 |
+ <option value="">Local</option> |
|
243 |
+ <option value="">직수출</option> |
|
244 |
+ </select> |
|
245 |
+ <input type="text" name="" id=""> |
|
246 |
+ </td> |
|
247 |
+ </tr> |
|
248 |
+ <tr> |
|
249 |
+ <th>특수관계자</th> |
|
250 |
+ <td> |
|
251 |
+ <select name="" id=""> |
|
252 |
+ <option value="">일반</option> |
|
253 |
+ </select> |
|
254 |
+ </td> |
|
255 |
+ <th>계약기간</th> |
|
256 |
+ <td class="input-box flex"> |
|
257 |
+ <input class=" mr1" type="date" id="date" value="2024-03-04">~ |
|
258 |
+ <input class=" mr1" type="date" id="date" value="2024-03-04"> |
|
259 |
+ |
|
260 |
+ </td> |
|
261 |
+ </tr> |
|
262 |
+ <tr> |
|
263 |
+ <th>담당자1</th> |
|
264 |
+ <td class="input-box flex"> |
|
265 |
+ <input type="text" name="" id=""> |
|
266 |
+ <input type="text" name="" id=""> |
|
267 |
+ </td> |
|
268 |
+ <th>담당자2</th> |
|
269 |
+ <td class="input-box flex"> |
|
270 |
+ <input type="text" name="" id=""> |
|
271 |
+ <input type="text" name="" id=""> |
|
272 |
+ </td> |
|
273 |
+ </tr> |
|
274 |
+ <tr> |
|
275 |
+ <th>모바일번호1</th> |
|
276 |
+ <td class="input-box flex"> |
|
277 |
+ <input type="text" name="" id=""> |
|
278 |
+ <input type="text" name="" id=""> |
|
279 |
+ </td> |
|
280 |
+ <th>모바일번호2</th> |
|
281 |
+ <td class="input-box flex"> |
|
282 |
+ <input type="text" name="" id=""> |
|
283 |
+ <input type="text" name="" id=""> |
|
284 |
+ </td> |
|
285 |
+ </tr> |
|
286 |
+ <tr> |
|
287 |
+ <th>이메일1</th> |
|
288 |
+ <td> |
|
289 |
+ <input type="text" name="" id=""> |
|
290 |
+ </td> |
|
291 |
+ <th>이메일2</th> |
|
292 |
+ <td> |
|
293 |
+ <input type="text" name="" id=""> |
|
294 |
+ </td> |
|
295 |
+ </tr> |
|
296 |
+ <tr> |
|
297 |
+ <th>거래여부</th> |
|
298 |
+ <td> |
|
299 |
+ <input type="checkbox" name="" id="a"> |
|
300 |
+ <label for="a">거래</label> |
|
301 |
+ <input type="checkbox" name="" id="b"> |
|
302 |
+ <label for="b">중지</label> |
|
303 |
+ </td> |
|
304 |
+ <th>지급조건</th> |
|
305 |
+ <td> |
|
306 |
+ <select name="" id=""> |
|
307 |
+ <option value="">현금 1개월</option> |
|
308 |
+ <option value="">현금 2개월</option> |
|
309 |
+ <option value="">현금 3개월</option> |
|
310 |
+ <option value="">현금 중간결제</option> |
|
311 |
+ <option value="">현금 매월25일</option> |
|
312 |
+ <option value="">현금 매월27일</option> |
|
313 |
+ <option value="">현금 매월말일</option> |
|
314 |
+ <option value="">어음 1개월 초</option> |
|
315 |
+ <option value="">어음 1개월 중</option> |
|
316 |
+ <option value="">어음 1개월 말</option> |
|
317 |
+ <option value="">어음 2개월 초</option> |
|
318 |
+ <option value="">어음 2개월 중</option> |
|
319 |
+ <option value="">어음 2개월 말</option> |
|
320 |
+ <option value="">어음 3개월 초</option> |
|
321 |
+ <option value="">어음 3개월 중</option> |
|
322 |
+ <option value="">어음 3개월 말</option> |
|
323 |
+ <option value="">법인카드</option> |
|
324 |
+ </select> |
|
325 |
+ </td> |
|
326 |
+ </tr> |
|
327 |
+ <tr> |
|
328 |
+ <th>거래구분</th> |
|
329 |
+ <td > |
|
330 |
+ <input type="checkbox" name="" id="a"> |
|
331 |
+ <label for="a">매입</label> |
|
332 |
+ <input type="checkbox" name="" id="b"> |
|
333 |
+ <label for="b">매출</label> |
|
334 |
+ </td> |
|
335 |
+ <td colspan="6"> |
|
336 |
+ <input type="text"> |
|
337 |
+ </td> |
|
338 |
+ </tr> |
|
339 |
+ <tr> |
|
340 |
+ <th>사용처</th> |
|
341 |
+ <th colspan="6"> |
|
342 |
+ <input type="checkbox" name="" id="c"> |
|
343 |
+ <label for="c">회계</label> |
|
344 |
+ <input type="checkbox" name="" id="c"> |
|
345 |
+ <label for="c">영업</label> |
|
346 |
+ <input type="checkbox" name="" id="c"> |
|
347 |
+ <label for="c">원자재</label> |
|
348 |
+ <input type="checkbox" name="" id="c"> |
|
349 |
+ <label for="c">부자재</label> |
|
350 |
+ <input type="checkbox" name="" id="c"> |
|
351 |
+ <label for="c">폐기물</label> |
|
352 |
+ <input type="checkbox" name="" id="c"> |
|
353 |
+ <label for="c">약품</label> |
|
354 |
+ </th> |
|
355 |
+ </tr> |
|
356 |
+ </tbody> |
|
357 |
+ </table> |
|
358 |
+ </div> |
|
359 |
+ <div class=" section-wrap"> |
|
360 |
+ xpdlqmf |
|
361 |
+ </div> |
|
362 |
+ </div> |
|
363 |
+ </div> |
|
364 |
+ </div> |
|
365 |
+ </div> |
|
366 |
+ </div> |
|
4 | 367 |
</template> |
5 | 368 |
|
6 | 369 |
<script> |
7 | 370 |
export default { |
8 |
- data () { |
|
371 |
+ data() { |
|
9 | 372 |
return { |
373 |
+ codeList: [ |
|
374 |
+ { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", } |
|
375 |
+ ] |
|
10 | 376 |
} |
11 | 377 |
}, |
12 | 378 |
methods: { |
... | ... | @@ -23,6 +389,5 @@ |
23 | 389 |
} |
24 | 390 |
} |
25 | 391 |
</script> |
26 |
-<style> |
|
27 | 392 |
|
28 |
-</style>(No newline at end of file) |
|
393 |
+<style></style>(No newline at end of file) |
--- client/views/pages/AccountingManagement/ChitManagement/Cm002.vue
+++ client/views/pages/AccountingManagement/ChitManagement/Cm002.vue
... | ... | @@ -1,6 +1,6 @@ |
1 | 1 |
<template> |
2 | 2 |
<div class="gd-10 Bi001-page container"> |
3 |
- <div class="wrap pd2 flex-column content-wrap"> |
|
3 |
+ <div class="wrap pd2 flex-column"> |
|
4 | 4 |
<div class="wrap-title pb1 mb1 flex justify-between"> |
5 | 5 |
<h1>전표 작성(일반)</h1> |
6 | 6 |
<div class="flex justify-end gd-5"> |
... | ... | @@ -483,83 +483,6 @@ |
483 | 483 |
</script> |
484 | 484 |
|
485 | 485 |
<style scoped> |
486 |
-.wrap { |
|
487 |
- width: 100%; |
|
488 |
- height: 100%; |
|
489 |
-} |
|
490 |
- |
|
491 |
-.content { |
|
492 |
- height: 100%; |
|
493 |
-} |
|
494 |
- |
|
495 |
-.content-wrap { |
|
496 |
- padding-left: 20px; |
|
497 |
- gap: 30px; |
|
498 |
-} |
|
499 |
- |
|
500 |
-.container { |
|
501 |
- width: 100%; |
|
502 |
- height: 100%; |
|
503 |
- flex-wrap: nowrap; |
|
504 |
-} |
|
505 |
- |
|
506 |
-select, |
|
507 |
-input { |
|
508 |
- font-size: 1.2rem; |
|
509 |
- font-weight: 600; |
|
510 |
-} |
|
511 |
- |
|
512 |
-p, |
|
513 |
-td { |
|
514 |
- font-size: 1.3rem; |
|
515 |
- margin-right: 10px; |
|
516 |
-} |
|
517 |
- |
|
518 |
-td, |
|
519 |
-p, |
|
520 |
-th, |
|
521 |
-button { |
|
522 |
- padding: 7px 0; |
|
523 |
- text-align: center; |
|
524 |
- cursor: pointer; |
|
525 |
-} |
|
526 |
- |
|
527 |
-.table-border td, |
|
528 |
-.table-border th, |
|
529 |
-.table-header th { |
|
530 |
- border-bottom: 1px solid var(--borderlightgray); |
|
531 |
- border-right: 1px solid var(--borderlightgray); |
|
532 |
- |
|
533 |
-} |
|
534 |
- |
|
535 |
-.list-table th { |
|
536 |
- color: var(--navbarblue); |
|
537 |
-} |
|
538 |
- |
|
539 |
- |
|
540 |
- |
|
541 |
- |
|
542 |
-.table-area { |
|
543 |
- border: 1px solid var(--bordergray); |
|
544 |
- border-radius: 10px; |
|
545 |
-} |
|
546 |
- |
|
547 |
-.box-wrap { |
|
548 |
- font-size: 1.2rem; |
|
549 |
-} |
|
550 |
- |
|
551 |
-.blue-btn { |
|
552 |
- background-color: var(--navbarblue); |
|
553 |
- color: var(--white); |
|
554 |
- padding: 3px 20px; |
|
555 |
- font-size: 1.3rem; |
|
556 |
- border-radius: 5px; |
|
557 |
- |
|
558 |
-} |
|
559 |
- |
|
560 |
-.header-btn p { |
|
561 |
- margin: 0 auto; |
|
562 |
-} |
|
563 | 486 |
|
564 | 487 |
|
565 | 488 |
|
--- client/views/pages/App.vue
+++ client/views/pages/App.vue
... | ... | @@ -1,8 +1,8 @@ |
1 | 1 |
<template> |
2 |
- <div class="flex-column" style=" height: 100%; flex-basis: 0;"> |
|
2 |
+ <div class="flex-column layout-wrap" > |
|
3 | 3 |
<Header></Header> |
4 | 4 |
<Menu @itemSelected="handleItemSelected"></Menu> |
5 |
- <div class="wrapper flex" style="flex-basis: auto;"> |
|
5 |
+ <div class="wrapper flex"> |
|
6 | 6 |
<SideMenu :selectedId="selectedId" class="gd-2"></SideMenu> |
7 | 7 |
<router-view/> |
8 | 8 |
</div> |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?