mycoms
2024-03-11
240311 김하영 계정과목 등록페이지 수정 완료
@6215e8ecb2c1f78b74d73eee8c7b3a33fbccb289
--- client/resources/css/component.css
+++ client/resources/css/component.css
... | ... | @@ -323,6 +323,8 @@ |
| 323 | 323 |
|
| 324 | 324 |
.modal-title {
|
| 325 | 325 |
width: 100%; |
| 326 |
+ font-size: 1.3rem; |
|
| 327 |
+ color: var(--navbarblue); |
|
| 326 | 328 |
border-bottom: 1px solid #d4cccc; |
| 327 | 329 |
padding: 10px 0; |
| 328 | 330 |
} |
... | ... | @@ -861,6 +863,7 @@ |
| 861 | 863 |
border-radius: 10px; |
| 862 | 864 |
font-size: 1rem; |
| 863 | 865 |
} |
| 866 |
+ |
|
| 864 | 867 |
/* input checkbox */ |
| 865 | 868 |
/* checkbox settings 👇 */ |
| 866 | 869 |
|
--- client/resources/css/style.css
+++ client/resources/css/style.css
... | ... | @@ -100,18 +100,22 @@ |
| 100 | 100 |
height: 100%; |
| 101 | 101 |
background-color: var(--white); |
| 102 | 102 |
} |
| 103 |
-.pwchange-modal h1{
|
|
| 103 |
+ |
|
| 104 |
+.pwchange-modal h1 {
|
|
| 104 | 105 |
font-size: 2rem; |
| 105 | 106 |
text-align: left; |
| 106 | 107 |
} |
| 107 |
-.pwchange-header button{
|
|
| 108 |
+ |
|
| 109 |
+.pwchange-header button {
|
|
| 108 | 110 |
background: url(../img/component/chevron-left-solid.svg) no-repeat; |
| 109 | 111 |
background-size: contain; |
| 110 | 112 |
background-position: center; |
| 111 | 113 |
width: 30px; |
| 112 | 114 |
height: 30px; |
| 113 | 115 |
} |
| 114 |
-.pwchange-user input ,.pwchange-pw input {
|
|
| 116 |
+ |
|
| 117 |
+.pwchange-user input, |
|
| 118 |
+.pwchange-pw input {
|
|
| 115 | 119 |
background: url(../img/component/pwchange-icon.png) no-repeat; |
| 116 | 120 |
background-size: 20px; |
| 117 | 121 |
background-position: right; |
... | ... | @@ -128,7 +132,7 @@ |
| 128 | 132 |
|
| 129 | 133 |
.logo {
|
| 130 | 134 |
width: 300px; |
| 131 |
- height: 50px; |
|
| 135 |
+ height: 40px; |
|
| 132 | 136 |
background: url(../img/common/header-logo-w.png) no-repeat; |
| 133 | 137 |
background-size: contain; |
| 134 | 138 |
background-position: center; |
... | ... | @@ -179,12 +183,13 @@ |
| 179 | 183 |
font-family: 'Pretendard'; |
| 180 | 184 |
font-weight: 500; |
| 181 | 185 |
/* height: px; */ |
| 186 |
+ width: 100%; |
|
| 182 | 187 |
color: var(--white); |
| 183 | 188 |
font-size: 1.5rem; |
| 184 | 189 |
} |
| 185 | 190 |
|
| 186 | 191 |
.topmenu-wrap p.active {
|
| 187 |
- width: 100px; |
|
| 192 |
+ width: 100%; |
|
| 188 | 193 |
background-color: white; |
| 189 | 194 |
color: var(--navbarblue); |
| 190 | 195 |
padding: 1px 5px; |
... | ... | @@ -343,6 +348,7 @@ |
| 343 | 348 |
background: url(../img/component/xmark-solid.svg) no-repeat; |
| 344 | 349 |
width: 20px; |
| 345 | 350 |
height: 20px; |
| 351 |
+ border: 0px !important; |
|
| 346 | 352 |
} |
| 347 | 353 |
|
| 348 | 354 |
.table-border th {
|
... | ... | @@ -470,11 +476,17 @@ |
| 470 | 476 |
} |
| 471 | 477 |
|
| 472 | 478 |
/* 계정과목 등록 페이지 */ |
| 473 |
-.Bi003-table{
|
|
| 479 |
+.table-wrap {
|
|
| 480 |
+ width: 100%; |
|
| 481 |
+ height: 100%; |
|
| 482 |
+} |
|
| 483 |
+ |
|
| 484 |
+.Bi003-table {
|
|
| 474 | 485 |
border-left: 1px solid var(--borderlightgray); |
| 475 | 486 |
border-bottom: 1px solid var(--borderlightgray); |
| 476 | 487 |
} |
| 477 |
-.Bi003-table td{
|
|
| 488 |
+ |
|
| 489 |
+.Bi003-table td {
|
|
| 478 | 490 |
text-align: left; |
| 479 | 491 |
/* border: 1px solid red; */ |
| 480 | 492 |
padding: 0 10px; |
... | ... | @@ -482,25 +494,35 @@ |
| 482 | 494 |
border-right: 1px solid var(--borderlightgray); |
| 483 | 495 |
border-top: 1px solid var(--borderlightgray); |
| 484 | 496 |
} |
| 485 |
-.Bi003-table th{
|
|
| 497 |
+ |
|
| 498 |
+.Bi003-table th {
|
|
| 486 | 499 |
background-color: var(--navbarblue); |
| 487 | 500 |
color: var(--white); |
| 488 | 501 |
border-bottom: 1px solid var(--borderlightgray); |
| 489 | 502 |
} |
| 490 |
-.large-select{
|
|
| 491 |
- width: 100% ; |
|
| 503 |
+ |
|
| 504 |
+.large-select {
|
|
| 505 |
+ width: 100%; |
|
| 492 | 506 |
} |
| 493 |
-.small-select{
|
|
| 494 |
- width: 30% ; |
|
| 507 |
+ |
|
| 508 |
+.small-select {
|
|
| 509 |
+ width: 30%; |
|
| 495 | 510 |
margin-right: 10px; |
| 496 | 511 |
} |
| 497 | 512 |
|
| 498 |
-.Bi003-table input{
|
|
| 513 |
+.Bi003-table input {
|
|
| 499 | 514 |
vertical-align: middle; |
| 500 | 515 |
|
| 501 | 516 |
} |
| 502 |
-.Bi003-table label{
|
|
| 517 |
+ |
|
| 518 |
+.Bi003-table label {
|
|
| 503 | 519 |
padding: 5px; |
| 504 | 520 |
vertical-align: middle; |
| 505 | 521 |
|
| 522 |
+} |
|
| 523 |
+ |
|
| 524 |
+.Bi003-list table {
|
|
| 525 |
+ text-align: center; |
|
| 526 |
+ border-top: 1px solid var(--borderlightgray); |
|
| 527 |
+ word-break: keep-all; |
|
| 506 | 528 |
}(파일 끝에 줄바꿈 문자 없음) |
+++ client/resources/img/component/magnifyingglasssolid.svg
... | ... | @@ -0,0 +1,1 @@ |
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#c1c1c1" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>(파일 끝에 줄바꿈 문자 없음) |
--- client/views/pages/AccountingManagement/BaselineInformation/Bi003.vue
+++ client/views/pages/AccountingManagement/BaselineInformation/Bi003.vue
... | ... | @@ -6,9 +6,9 @@ |
| 6 | 6 |
<div class="flex justify-end gd-5"> |
| 7 | 7 |
|
| 8 | 8 |
<div class="flex justify-between button-wrap"> |
| 9 |
+ <button class="rest-btn">초기화</button> |
|
| 9 | 10 |
<button class="excel-btn">엑셀</button> |
| 10 | 11 |
<button class="del-btn">삭제</button> |
| 11 |
- <button class="rest-btn">초기화</button> |
|
| 12 | 12 |
<button class="save-btn">저장</button> |
| 13 | 13 |
</div> |
| 14 | 14 |
|
... | ... | @@ -17,7 +17,7 @@ |
| 17 | 17 |
</div> |
| 18 | 18 |
<div class="container flex-column"> |
| 19 | 19 |
<div class="content list-wrap flex-column "> |
| 20 |
- <div> |
|
| 20 |
+ <div class="pb2"> |
|
| 21 | 21 |
<div class="content-title flex justify-between mb1"> |
| 22 | 22 |
계정과목등록 |
| 23 | 23 |
</div> |
... | ... | @@ -35,7 +35,11 @@ |
| 35 | 35 |
<tbody> |
| 36 | 36 |
<tr> |
| 37 | 37 |
<th>코드</th> |
| 38 |
- <td><input type="text" name="" id=""></td> |
|
| 38 |
+ <td> |
|
| 39 |
+ <input type="text" name="" id="" class="mr2"> |
|
| 40 |
+ |
|
| 41 |
+ <button class="blue-btn" @click="openModal">검색</button> |
|
| 42 |
+ </td> |
|
| 39 | 43 |
</tr> |
| 40 | 44 |
<tr> |
| 41 | 45 |
<th>계정명</th> |
... | ... | @@ -49,7 +53,7 @@ |
| 49 | 53 |
<input type="checkbox" id="f" class="ui-checkbox "> |
| 50 | 54 |
<label for="f">비용부서</label> |
| 51 | 55 |
<input type="checkbox" id="g" class="ui-checkbox "> |
| 52 |
- <label for="g">외화금액</label> |
|
| 56 |
+ <label for="g">외화금액($)</label> |
|
| 53 | 57 |
</td> |
| 54 | 58 |
<th>자금원장표시</th> |
| 55 | 59 |
<td> |
... | ... | @@ -67,7 +71,7 @@ |
| 67 | 71 |
<input type="checkbox" id="a" class="ui-checkbox "> |
| 68 | 72 |
<label for="a">전표발생구분</label> |
| 69 | 73 |
</td> |
| 70 |
- <td rowspan="4" class="" > |
|
| 74 |
+ <td rowspan="4" class=""> |
|
| 71 | 75 |
<input type="checkbox" id="h" class="ui-checkbox mb5"> |
| 72 | 76 |
<label for="h">관리일자1_증빙일자및어음발행일</label> <br> |
| 73 | 77 |
<input type="checkbox" id="i" class="ui-checkbox mb5"> |
... | ... | @@ -192,16 +196,23 @@ |
| 192 | 196 |
</div> |
| 193 | 197 |
|
| 194 | 198 |
</div> |
| 195 |
- <div style="width: 100%; border: 1px solid red;" class="flex-column gd-12"> |
|
| 199 |
+ <div class="flex-column table-wrap"> |
|
| 196 | 200 |
<div class="content-title flex justify-between mb1"> |
| 197 |
- 계정과목 |
|
| 201 |
+ 계정과목목록 |
|
| 198 | 202 |
</div> |
| 199 |
- <div class="Bi003-list flex" style="border: 1px solid red; width: 100%;"> |
|
| 203 |
+ <div class="Bi003-list flex"> |
|
| 200 | 204 |
<table class="list-table"> |
| 201 | 205 |
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 --> |
| 202 | 206 |
<colgroup> |
| 203 | 207 |
<col style="width: 4%;"> |
| 204 | 208 |
<col style="width: 5%;"> |
| 209 |
+ <col style="width: 3%;"> |
|
| 210 |
+ <col style="width: 2%;"> |
|
| 211 |
+ <col style="width: 2%;"> |
|
| 212 |
+ <col style="width: 2%;"> |
|
| 213 |
+ <col style="width: 2%;"> |
|
| 214 |
+ <col style="width: 2%;"> |
|
| 215 |
+ <col style="width: 2%;"> |
|
| 205 | 216 |
<col style="width: 4%;"> |
| 206 | 217 |
<col style="width: 4%;"> |
| 207 | 218 |
<col style="width: 4%;"> |
... | ... | @@ -209,14 +220,7 @@ |
| 209 | 220 |
<col style="width: 4%;"> |
| 210 | 221 |
<col style="width: 4%;"> |
| 211 | 222 |
<col style="width: 4%;"> |
| 212 |
- <col style="width: 4%;"> |
|
| 213 |
- <col style="width: 4%;"> |
|
| 214 |
- <col style="width: 4%;"> |
|
| 215 |
- <col style="width: 4%;"> |
|
| 216 |
- <col style="width: 4%;"> |
|
| 217 |
- <col style="width: 4%;"> |
|
| 218 |
- <col style="width: 4%;"> |
|
| 219 |
- <col style="width: 4%;"> |
|
| 223 |
+ <col style="width: 3%;"> |
|
| 220 | 224 |
<col style="width: 4%;"> |
| 221 | 225 |
<col style="width: 4%;"> |
| 222 | 226 |
<col style="width: 4%;"> |
... | ... | @@ -244,7 +248,7 @@ |
| 244 | 248 |
<th>관리일자1</th> |
| 245 | 249 |
<th>관리일자2</th> |
| 246 | 250 |
<th>참고항목</th> |
| 247 |
- <th>공급가액및승인액</th> |
|
| 251 |
+ <th>공급가액 및승인액</th> |
|
| 248 | 252 |
<th>세무계정</th> |
| 249 | 253 |
<th>자금원장계정</th> |
| 250 | 254 |
<th>동변발생구분</th> |
... | ... | @@ -289,12 +293,113 @@ |
| 289 | 293 |
</div> |
| 290 | 294 |
|
| 291 | 295 |
</div> |
| 296 |
+ <div v-show="isPopupOpen" class="modal-wrapper"> |
|
| 297 |
+ <div class="modal-container flex flex-column"> |
|
| 298 |
+ <div> |
|
| 299 |
+ <div class=" mb2"> |
|
| 300 |
+ |
|
| 301 |
+ <div class="flex justify-between modal-title"> |
|
| 302 |
+ <h1>계정과목찾기</h1> |
|
| 303 |
+ <div> |
|
| 304 |
+ <button class="close-btn " @click="closeModal"></button> |
|
| 305 |
+ </div> |
|
| 306 |
+ |
|
| 307 |
+ </div> |
|
| 308 |
+ </div> |
|
| 309 |
+ <div class="flex justify-between"> |
|
| 310 |
+ <div class="content-title mb1"> |
|
| 311 |
+ 조회조건 |
|
| 312 |
+ </div> |
|
| 313 |
+ <div class=" button-wrap"> |
|
| 314 |
+ <button class="rest-btn">초기화</button> |
|
| 315 |
+ </div> |
|
| 316 |
+ </div> |
|
| 317 |
+ <div class="flex button-wrap modal-title mb2 button-wrap"> |
|
| 318 |
+ <p class="blue-text">계정코드/명</p> |
|
| 319 |
+ <input type="text" id="date"> |
|
| 320 |
+ <button>조회</button> |
|
| 321 |
+ </div> |
|
| 322 |
+ <div> |
|
| 323 |
+ <div class="content-title flex justify-between "> |
|
| 324 |
+ 계정과목목록 |
|
| 325 |
+ </div> |
|
| 326 |
+ <div class="table-zone table-scroll"> |
|
| 327 |
+ <table class="list-table"> |
|
| 328 |
+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 --> |
|
| 329 |
+ <colgroup> |
|
| 330 |
+ <col style="width: 5%;"> |
|
| 331 |
+ <col style="width: 10%;"> |
|
| 332 |
+ <col style="width: 3%;"> |
|
| 333 |
+ <col style="width: 3%;"> |
|
| 334 |
+ <col style="width: 3%;"> |
|
| 335 |
+ <col style="width: 3%;"> |
|
| 336 |
+ <col style="width: 3%;"> |
|
| 337 |
+ <col style="width: 3%;"> |
|
| 338 |
+ <col style="width: 3%;"> |
|
| 339 |
+ <col style="width: 3%;"> |
|
| 340 |
+ <col style="width: 3%;"> |
|
| 341 |
+ <col style="width: 3%;"> |
|
| 342 |
+ <col style="width: 3%;"> |
|
| 343 |
+ <col style="width: 3%;"> |
|
| 344 |
+ <col style="width: 3%;"> |
|
| 345 |
+ <col style="width: 3%;"> |
|
| 346 |
+ </colgroup> |
|
| 347 |
+ <thead> |
|
| 348 |
+ <tr class="table-header table-border " |
|
| 349 |
+ style="background-color: var(--tableblue); color: var(--navbarblue); "> |
|
| 350 |
+ <th>코드</th> |
|
| 351 |
+ <th>계정명</th> |
|
| 352 |
+ <th>잔액구분</th> |
|
| 353 |
+ <th>차변금액</th> |
|
| 354 |
+ <th>대변금액</th> |
|
| 355 |
+ <th>전표발생</th> |
|
| 356 |
+ <th>관리항목1</th> |
|
| 357 |
+ <th>관리항목2</th> |
|
| 358 |
+ <th>증빙구분</th> |
|
| 359 |
+ <th>증빙일자</th> |
|
| 360 |
+ <th>비용부서</th> |
|
| 361 |
+ <th>공급가액및승인금액</th> |
|
| 362 |
+ <th>세무계정</th> |
|
| 363 |
+ <th>외화금액($)</th> |
|
| 364 |
+ <th>어음정보</th> |
|
| 365 |
+ <th>대금지불일</th> |
|
| 366 |
+ </tr> |
|
| 367 |
+ </thead> |
|
| 368 |
+ <tbody> |
|
| 369 |
+ <tr v-for="(modalWrap) in modalList" key="codeNum" |
|
| 370 |
+ style="overflow-y: scroll;" class="table-border modal-td"> |
|
| 371 |
+ <td>{{ modalWrap.num }}</td>
|
|
| 372 |
+ <td>{{ modalWrap.name }}</td>
|
|
| 373 |
+ <td>{{ modalWrap.list1 }}</td>
|
|
| 374 |
+ <td>{{ modalWrap.list2 }}</td>
|
|
| 375 |
+ <td>{{ modalWrap.list3 }}</td>
|
|
| 376 |
+ <td>{{ modalWrap.list4 }}</td>
|
|
| 377 |
+ <td>{{ modalWrap.list5 }}</td>
|
|
| 378 |
+ <td>{{ modalWrap.list6 }}</td>
|
|
| 379 |
+ <td>{{ modalWrap.list7 }}</td>
|
|
| 380 |
+ <td>{{ modalWrap.list8 }}</td>
|
|
| 381 |
+ <td>{{ modalWrap.list9 }}</td>
|
|
| 382 |
+ <td>{{ modalWrap.list10 }}</td>
|
|
| 383 |
+ <td>{{ modalWrap.list11 }}</td>
|
|
| 384 |
+ <td>{{ modalWrap.list12 }}</td>
|
|
| 385 |
+ <td>{{ modalWrap.list13 }}</td>
|
|
| 386 |
+ <td>{{ modalWrap.list14 }}</td>
|
|
| 387 |
+ </tr> |
|
| 388 |
+ |
|
| 389 |
+ </tbody> |
|
| 390 |
+ </table> |
|
| 391 |
+ </div> |
|
| 392 |
+ </div> |
|
| 393 |
+ </div> |
|
| 394 |
+ </div> |
|
| 395 |
+ </div> |
|
| 292 | 396 |
|
| 293 | 397 |
</div> |
| 294 | 398 |
</div> |
| 295 | 399 |
|
| 296 | 400 |
|
| 297 | 401 |
</div> |
| 402 |
+ |
|
| 298 | 403 |
|
| 299 | 404 |
</div> |
| 300 | 405 |
</template> |
... | ... | @@ -303,18 +408,28 @@ |
| 303 | 408 |
export default {
|
| 304 | 409 |
data() {
|
| 305 | 410 |
return {
|
| 411 |
+ isPopupOpen: false, |
|
| 306 | 412 |
activeItemId: 0, |
| 307 | 413 |
selectedId: null, |
| 308 | 414 |
tableList: [ |
| 309 | 415 |
{ no: "1000000", name: "자산", },
|
| 310 | 416 |
{ 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" }
|
| 311 | 417 |
], |
| 418 |
+ modalList: [ |
|
| 419 |
+ { 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" }
|
|
| 420 |
+ ], |
|
| 312 | 421 |
|
| 313 | 422 |
} |
| 314 | 423 |
}, |
| 315 | 424 |
|
| 316 | 425 |
methods: {
|
| 426 |
+ openModal() {
|
|
| 427 |
+ this.isPopupOpen = true; |
|
| 428 |
+ }, |
|
| 429 |
+ closeModal() {
|
|
| 430 |
+ this.isPopupOpen = false; |
|
| 317 | 431 |
|
| 432 |
+ } |
|
| 318 | 433 |
}, |
| 319 | 434 |
watch: {
|
| 320 | 435 |
|
... | ... | @@ -323,11 +438,14 @@ |
| 323 | 438 |
|
| 324 | 439 |
}, |
| 325 | 440 |
mounted() {
|
| 326 |
- console.log('Main mounted');
|
|
| 441 |
+ |
|
| 327 | 442 |
} |
| 328 | 443 |
} |
| 329 | 444 |
</script> |
| 330 | 445 |
|
| 331 | 446 |
<style scoped> |
| 332 |
- |
|
| 447 |
+.modal-td {
|
|
| 448 |
+ text-align: center; |
|
| 449 |
+ word-break: keep-all; |
|
| 450 |
+} |
|
| 333 | 451 |
</style>(파일 끝에 줄바꿈 문자 없음) |
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?