
+++ client/resources/scss/common/component/_pagination.scss
... | ... | @@ -0,0 +1,15 @@ |
1 | +.pagination{ | |
2 | + ul{ | |
3 | + @include flex-layout(flex, center, center); | |
4 | + gap: 1rem; | |
5 | + li{ | |
6 | + width: 4rem; | |
7 | + height: 4rem; | |
8 | + @include flex-layout(flex, center, center); | |
9 | + cursor: pointer; | |
10 | + // padding: 1rem; | |
11 | + border: 1px solid #ddd; | |
12 | + border-radius: 1rem; | |
13 | + } | |
14 | + } | |
15 | +}(파일 끝에 줄바꿈 문자 없음) |
--- client/views/component/Pagination.vue
+++ client/views/component/Pagination.vue
... | ... | @@ -2,9 +2,9 @@ |
2 | 2 |
<div class="pagination"> |
3 | 3 |
<ul> |
4 | 4 |
<li class="arrow" :class="{ disabled: currentPage <= 1 }" @click="changePage(currentPage - 1)"><</li> |
5 |
- <template v-for="pageNum in displayedPageNumbers" :key="pageNum"> |
|
6 |
- <li :class="{ active: currentPage === pageNum, disabled: currentPage === pageNum }" @click="changePage(pageNum)">{{ pageNum }}</li> |
|
7 |
- </template> |
|
5 |
+ <li v-for="pageNum in displayedPageNumbers" :key="pageNum"> |
|
6 |
+ <span :class="{ active: currentPage === pageNum, disabled: currentPage === pageNum }" @click="changePage(pageNum)">{{ pageNum }}</span> |
|
7 |
+ </li> |
|
8 | 8 |
<li class="arrow" :class="{ disabled: currentPage >= totalPages }" @click="changePage(currentPage + 1)">></li> |
9 | 9 |
</ul> |
10 | 10 |
</div> |
--- client/views/pages/App.vue
+++ client/views/pages/App.vue
... | ... | @@ -1,5 +1,5 @@ |
1 | 1 |
<template> |
2 |
- <div v-if="isLoginPage" class="login"> |
|
2 |
+ <div v-if="isLoginPage" class="login-wrap"> |
|
3 | 3 |
<router-view /> |
4 | 4 |
</div> |
5 | 5 |
<div v-else class="container"> |
--- client/views/pages/Manager/system/AuthorManagement.vue
+++ client/views/pages/Manager/system/AuthorManagement.vue
... | ... | @@ -1,35 +1,86 @@ |
1 | 1 |
<template> |
2 |
- <div class="card "> |
|
2 |
+ <div class="card " style="height: 100%;"> |
|
3 | 3 |
<div class="card-body "> |
4 | 4 |
<h2 class="card-title">사용자 권한 관리</h2> |
5 |
- <div class="flex align-top"> |
|
6 |
- <div class="sch-form-wrap search"> |
|
7 |
- <div class="tbl-wrap table-scroll"> |
|
5 |
+ <div class="d-flex align-stretch gap30"> |
|
6 |
+ <div class="left-zone"> |
|
7 |
+ <div class="tbl-wrap"> |
|
8 | 8 |
<table id="myTable" class="tbl data"> |
9 | 9 |
<thead> |
10 | 10 |
<tr> |
11 |
- <th>권한 목록</th> |
|
11 |
+ <th style="border-radius: 1rem 1rem 0 0;">권한 목록</th> |
|
12 | 12 |
</tr> |
13 | 13 |
</thead> |
14 | 14 |
<tbody> |
15 | 15 |
<tr v-for="(item, idx) of lists" :key="idx" @click="findData(item.authorCode)"> |
16 |
- <td :class="{ 'selected': selectedAuthor == item.authorCode, 'muted': item.useAt === 'N' }">{{ item.authorNm }}</td> |
|
16 |
+ <td :class="{ 'selected': selectedAuthor == item.authorCode, 'muted': item.useAt === 'N' }" style="border-radius: 0 0 1rem 1rem;">{{ item.authorNm }}</td> |
|
17 | 17 |
</tr> |
18 | 18 |
</tbody> |
19 | 19 |
</table> |
20 | 20 |
</div> |
21 | 21 |
</div> |
22 |
- <div> |
|
23 |
- <div class="sch-form-wrap title-wrap"> |
|
24 |
- <h3><img :src="h3icon" alt="">권한 정보</h3> |
|
25 |
- <div class="buttons"> |
|
26 |
- <button type="button" class="btn sm tertiary" @click="fnResetForm">신규</button> |
|
27 |
- <button type="button" class="btn sm secondary" v-if="!isEditMode" @click="fnSave">등록</button> |
|
28 |
- <button type="button" class="btn sm secondary" v-else @click="fnUpdate">수정</button> |
|
29 |
- <button type="button" class="btn sm btn-red" v-if="isEditMode" @click="fnDelete">삭제</button> |
|
22 |
+ <div class="right-zone"> |
|
23 |
+ <div class="d-flex justify-between align-center mb20"> |
|
24 |
+ <h3 class="sub-title">권한 정보</h3> |
|
25 |
+ <div class="d-flex gap10"> |
|
26 |
+ <button class="btn sm tertiary" @click="fnResetForm">신규</button> |
|
27 |
+ <button class="btn sm secondary" v-if="!isEditMode" @click="fnSave">등록</button> |
|
28 |
+ <button class="btn sm secondary" v-else @click="fnUpdate">수정</button> |
|
29 |
+ <button class="btn sm btn-red" v-if="isEditMode" @click="fnDelete">삭제</button> |
|
30 | 30 |
</div> |
31 | 31 |
</div> |
32 |
- <div class="tbl-wrap row g-3 pt-3 needs-validation detail"> |
|
32 |
+ <div class="tbl-wrap" style="height: calc(100% - 60px);"> |
|
33 |
+ <table class="tbl data grid-table" style="border: none; width: 100%;height: 100%;"> |
|
34 |
+ <!-- <colgroup> |
|
35 |
+ <col style="width: 20%;"> |
|
36 |
+ <col style="width: 80%;"> |
|
37 |
+ </colgroup> --> |
|
38 |
+ <tbody> |
|
39 |
+ <tr> |
|
40 |
+ <th scope="row" style="border-radius: 1rem 0 0 0;"> |
|
41 |
+ 권한코드 <sup>*</sup> |
|
42 |
+ </th> |
|
43 |
+ <td style="border-radius: 0 1rem 0 0;"> |
|
44 |
+ <input type="text" class="form-control sm" id="authorCode" v-model="data.authorCode" /> |
|
45 |
+ </td> |
|
46 |
+ </tr> |
|
47 |
+ <tr> |
|
48 |
+ <th scope="row" > |
|
49 |
+ 권한명 <sup>*</sup> |
|
50 |
+ </th> |
|
51 |
+ <td> |
|
52 |
+ <input type="text" class="form-control sm" id="authorNm" v-model="data.authorNm" /> |
|
53 |
+ </td> |
|
54 |
+ </tr> |
|
55 |
+ <tr> |
|
56 |
+ <th scope="row"> |
|
57 |
+ 사용여부 <sup>*</sup> |
|
58 |
+ </th> |
|
59 |
+ <td> |
|
60 |
+ <div class="chk-area"> |
|
61 |
+ <div class="form-check" style="display: inline-block; margin-right: 1rem;"> |
|
62 |
+ <input type="radio" name="useAt" id="useAtTrue" value="Y" v-model="data.useAt" :disabled="!hasAuthorCode"> |
|
63 |
+ <label for="useAtTrue">사용</label> |
|
64 |
+ </div> |
|
65 |
+ <div class="form-check" style="display: inline-block;"> |
|
66 |
+ <input type="radio" name="useAt" id="useAtFalse" value="N" v-model="data.useAt" :disabled="!hasAuthorCode"> |
|
67 |
+ <label for="useAtFalse">미사용</label> |
|
68 |
+ </div> |
|
69 |
+ </div> |
|
70 |
+ </td> |
|
71 |
+ </tr> |
|
72 |
+ <tr> |
|
73 |
+ <th scope="row" style="border-radius: 0 0 0 1rem;"> |
|
74 |
+ 권한설명 |
|
75 |
+ </th> |
|
76 |
+ <td style="border-radius: 0 0 1rem 0;"> |
|
77 |
+ <textarea name="dc" id="dc" class="form-control" v-model="data.dc" style="height: 100%;"></textarea> |
|
78 |
+ </td> |
|
79 |
+ </tr> |
|
80 |
+ </tbody> |
|
81 |
+ </table> |
|
82 |
+ </div> |
|
83 |
+ <!-- <div class="tbl-wrap" style="border: none;"> |
|
33 | 84 |
<div class="col-12"> |
34 | 85 |
<label for="authorCode" class="form-label"> |
35 | 86 |
<p>권한코드 <span class="require"><img :src="require" alt=""></span></p> |
... | ... | @@ -61,7 +112,7 @@ |
61 | 112 |
</div> |
62 | 113 |
</div> |
63 | 114 |
</div> |
64 |
- </div> |
|
115 |
+ </div> --> |
|
65 | 116 |
</div> |
66 | 117 |
</div> |
67 | 118 |
</div> |
--- client/views/pages/Manager/system/CodeManagementInsert.vue
+++ client/views/pages/Manager/system/CodeManagementInsert.vue
... | ... | @@ -2,53 +2,45 @@ |
2 | 2 |
<div class="card"> |
3 | 3 |
<div class="card-body"> |
4 | 4 |
<h2 class="card-title">공통코드 {{ isEditMode ? '수정' : '등록' }}</h2> |
5 |
- <p class="require">* 필수입력</p> |
|
6 |
- <div class="tbl-wrap needs-validation detail"> |
|
7 |
- <table class="tbl data radius-table"> |
|
8 |
- <colgroup> |
|
9 |
- <col style="width: 25%;"> |
|
10 |
- <col style="width: 75%;"> |
|
11 |
- </colgroup> |
|
12 |
- <tbody> |
|
5 |
+ <p style="text-align: right;"><sup>*</sup>필수입력</p> |
|
6 |
+ <div class="tbl-wrap" style="height: calc(100% - 94px);"> |
|
7 |
+ <table class="tbl data radius-table grid-table"> |
|
8 |
+ <tbody style="grid-template-rows: auto auto auto auto auto auto 1fr;"> |
|
13 | 9 |
<tr> |
14 | 10 |
<th>상위코드</th> |
15 | 11 |
<td> |
16 |
- <input type="text" id="parentCode" v-model="formData.upperCode" readonly /> |
|
17 |
- <button type="button" class="btn sm primary" @click="handleModalOpen"> 검색 </button> |
|
12 |
+ <div class="input-group"> |
|
13 |
+ <input type="text" id="parentCode" class="form-control sm" v-model="formData.upperCode" readonly style="width: calc(100% - 4rem);"/> |
|
14 |
+ <button class="btn sm primary" @click="handleModalOpen"> 검색 </button> |
|
15 |
+ </div> |
|
18 | 16 |
</td> |
19 | 17 |
</tr> |
20 | 18 |
<tr> |
21 | 19 |
<th>상위코드 명</th> |
22 | 20 |
<td> |
23 |
- <input type="text" id="parentCodeName" v-model="formData.upperCodeNm" readonly /> |
|
21 |
+ <input type="text" id="parentCodeName" class="form-control sm" v-model="formData.upperCodeNm" readonly /> |
|
24 | 22 |
</td> |
25 | 23 |
</tr> |
26 | 24 |
<tr> |
27 |
- <th>코드 *</th> |
|
25 |
+ <th>코드<sup>*</sup></th> |
|
28 | 26 |
<td> |
29 |
- <input type="text" id="code" v-model="formData.code" :disabled="isEditMode" /> |
|
27 |
+ <input type="text" id="code" class="form-control sm" v-model="formData.code" :disabled="isEditMode" /> |
|
30 | 28 |
</td> |
31 | 29 |
</tr> |
32 | 30 |
<tr> |
33 |
- <th>코드명 *</th> |
|
31 |
+ <th>코드명<sup>*</sup></th> |
|
34 | 32 |
<td> |
35 |
- <input type="text" id="codeName" v-model="formData.codeNm" /> |
|
33 |
+ <input type="text" id="codeName" class="form-control sm" v-model="formData.codeNm" /> |
|
36 | 34 |
</td> |
37 | 35 |
</tr> |
38 | 36 |
<tr> |
39 | 37 |
<th>코드 설정값</th> |
40 | 38 |
<td> |
41 |
- <input type="text" id="codeValue" v-model="formData.codeValue" /> |
|
39 |
+ <input type="text" id="codeValue" class="form-control sm" v-model="formData.codeValue" /> |
|
42 | 40 |
</td> |
43 | 41 |
</tr> |
44 | 42 |
<tr> |
45 |
- <th>설명</th> |
|
46 |
- <td> |
|
47 |
- <textarea name="description" id="description" v-model="formData.dc"></textarea> |
|
48 |
- </td> |
|
49 |
- </tr> |
|
50 |
- <tr> |
|
51 |
- <th>사용여부 *</th> |
|
43 |
+ <th>사용여부<sup>*</sup></th> |
|
52 | 44 |
<td> |
53 | 45 |
<div class="chk-area"> |
54 | 46 |
<div class="form-check"> |
... | ... | @@ -62,21 +54,27 @@ |
62 | 54 |
</div> |
63 | 55 |
</td> |
64 | 56 |
</tr> |
57 |
+ <tr> |
|
58 |
+ <th>설명</th> |
|
59 |
+ <td> |
|
60 |
+ <textarea name="description" id="description" v-model="formData.dc" style="width: 100%;height: 100%;"></textarea> |
|
61 |
+ </td> |
|
62 |
+ </tr> |
|
65 | 63 |
</tbody> |
66 | 64 |
</table> |
67 | 65 |
</div> |
68 |
- <div class="buttons"> |
|
69 |
- <template v-if="!isEditMode"> |
|
70 |
- <button type="button" class="btn sm primary" @click="handleCreate">등록</button> |
|
71 |
- <button type="button" class="btn sm tertiary" @click="handleNavigation('list')">취소</button> |
|
72 |
- </template> |
|
73 |
- <template v-else> |
|
74 |
- <button type="button" class="btn sm primary" @click="handleUpdate">수정</button> |
|
75 |
- <button type="button" class="btn sm tertiary" @click="handleNavigation('view', codeId)">취소</button> |
|
76 |
- </template> |
|
77 |
- </div> |
|
78 | 66 |
</div> |
79 | 67 |
</div> |
68 |
+ <div class="d-flex justify-end align-center gap10"> |
|
69 |
+ <template v-if="!isEditMode"> |
|
70 |
+ <button type="button" class="btn sm primary" @click="handleCreate">등록</button> |
|
71 |
+ <button type="button" class="btn sm tertiary" @click="handleNavigation('list')">취소</button> |
|
72 |
+ </template> |
|
73 |
+ <template v-else> |
|
74 |
+ <button type="button" class="btn sm primary" @click="handleUpdate">수정</button> |
|
75 |
+ <button type="button" class="btn sm tertiary" @click="handleNavigation('view', codeId)">취소</button> |
|
76 |
+ </template> |
|
77 |
+ </div> |
|
80 | 78 |
<CodeSelectorModal v-if="isModalVisible" :current-code-id="codeId" @select="handleCodeSelect" @close="handleModalClose" /> |
81 | 79 |
</template> |
82 | 80 |
<script> |
--- client/views/pages/Manager/system/CodeManagementList.vue
+++ client/views/pages/Manager/system/CodeManagementList.vue
... | ... | @@ -1,69 +1,63 @@ |
1 | 1 |
<template> |
2 |
- <div class="col-lg-12"> |
|
3 | 2 |
<div class="card"> |
4 | 3 |
<div class="card-body"> |
5 | 4 |
<h2 class="card-title">공통코드 관리</h2> |
6 |
- <div class="sch-form-wrap"> |
|
7 |
- <div class="input-group"> |
|
8 |
- <select name="searchType" id="searchType" class="form-select" v-model="searchParams.searchType"> |
|
9 |
- <option value="">전체</option> |
|
10 |
- <option v-for="(item, index) of searchOptions" :key="index" :value="item.key"> {{ item.label }} </option> |
|
11 |
- </select> |
|
12 |
- <div class="sch-input"> |
|
13 |
- <input type="text" class="form-control" v-model="searchParams.searchText" @keyup.enter="handleSearch" placeholder="검색어를 입력하세요"> |
|
14 |
- <button class="ico-sch" @click="handleSearch" type="button"> |
|
15 |
- <SearchOutlined /> |
|
16 |
- </button> |
|
5 |
+ <div> |
|
6 |
+ <div class="search-wrap mb20"> |
|
7 |
+ <select name="searchType" id="searchType" class="form-select sm" v-model="searchParams.searchType"> |
|
8 |
+ <option value="">전체</option> |
|
9 |
+ <option v-for="(item, index) of searchOptions" :key="index" :value="item.key"> {{ item.label }} </option> |
|
10 |
+ </select> |
|
11 |
+ <input type="text" class="form-control sm" v-model="searchParams.searchText" @keyup.enter="handleSearch" placeholder="검색어를 입력하세요"> |
|
12 |
+ <button class="btn-ico md ico-sch" @click="handleSearch"></button> |
|
17 | 13 |
</div> |
18 |
- </div> |
|
19 |
- </div> |
|
20 |
- <div class="tbl-wrap"> |
|
21 |
- <table id="codeTable" class="tbl data"> |
|
22 |
- <colgroup> |
|
23 |
- <col style="width: 18%;"> |
|
24 |
- <col style="width: 18%;"> |
|
25 |
- <col style="width: 18%;"> |
|
26 |
- <col style="width: 18%;"> |
|
27 |
- <col style="width: 18%;"> |
|
28 |
- <col style="width: 10%;"> |
|
29 |
- </colgroup> |
|
30 |
- <thead> |
|
31 |
- <tr> |
|
32 |
- <th>상위코드</th> |
|
33 |
- <th>상위코드명</th> |
|
34 |
- <th>코드</th> |
|
35 |
- <th>코드명</th> |
|
36 |
- <th>등록일</th> |
|
37 |
- <th>사용여부</th> |
|
38 |
- </tr> |
|
39 |
- </thead> |
|
40 |
- <tbody> |
|
41 |
- <template v-if="codeList.length > 0"> |
|
42 |
- <tr v-for="(code, index) in codeList" :key="index" :class="{ expired: code.useAt === 'N' }" @click="handleNavigation('view', code.code)"> |
|
43 |
- <td>{{ code.upperCode }}</td> |
|
44 |
- <td>{{ code.upperCodeNm }}</td> |
|
45 |
- <td>{{ code.code }}</td> |
|
46 |
- <td>{{ code.codeNm }}</td> |
|
47 |
- <td>{{ formatDate(code.rgsde) }}</td> |
|
48 |
- <td>{{ getActiveStatusText(code.useAt) }}</td> |
|
14 |
+ <div class="tbl-wrap"> |
|
15 |
+ <table id="codeTable" class="tbl data"> |
|
16 |
+ <colgroup> |
|
17 |
+ <col style="width: 18%;"> |
|
18 |
+ <col style="width: 18%;"> |
|
19 |
+ <col style="width: 18%;"> |
|
20 |
+ <col style="width: 18%;"> |
|
21 |
+ <col style="width: 18%;"> |
|
22 |
+ <col style="width: 10%;"> |
|
23 |
+ </colgroup> |
|
24 |
+ <thead> |
|
25 |
+ <tr> |
|
26 |
+ <th style="border-radius: 1rem 0 0 0;">상위코드</th> |
|
27 |
+ <th>상위코드명</th> |
|
28 |
+ <th>코드</th> |
|
29 |
+ <th>코드명</th> |
|
30 |
+ <th>등록일</th> |
|
31 |
+ <th style="border-radius: 0 1rem 0 0;">사용여부</th> |
|
49 | 32 |
</tr> |
50 |
- </template> |
|
51 |
- <tr v-else> |
|
52 |
- <td colspan="6" class="text-center">등록된 코드가 없습니다.</td> |
|
53 |
- </tr> |
|
54 |
- </tbody> |
|
55 |
- </table> |
|
56 |
- </div> |
|
57 |
- <Pagination :search="searchParams" @onChange="handlePageChange" /> |
|
58 |
- <div class="buttons"> |
|
59 |
- <button type="button" class="btn sm primary" @click="handleNavigation('edit')">등록</button> |
|
33 |
+ </thead> |
|
34 |
+ <tbody> |
|
35 |
+ <template v-if="codeList.length > 0"> |
|
36 |
+ <tr v-for="(code, index) in codeList" :key="index" :class="{ expired: code.useAt === 'N' }" @click="handleNavigation('view', code.code)"> |
|
37 |
+ <td>{{ code.upperCode }}</td> |
|
38 |
+ <td>{{ code.upperCodeNm }}</td> |
|
39 |
+ <td>{{ code.code }}</td> |
|
40 |
+ <td>{{ code.codeNm }}</td> |
|
41 |
+ <td>{{ formatDate(code.rgsde) }}</td> |
|
42 |
+ <td>{{ getActiveStatusText(code.useAt) }}</td> |
|
43 |
+ </tr> |
|
44 |
+ </template> |
|
45 |
+ <tr v-else> |
|
46 |
+ <td colspan="6" class="text-center" style="border-radius: 0 0 1rem 1rem;">등록된 코드가 없습니다.</td> |
|
47 |
+ </tr> |
|
48 |
+ </tbody> |
|
49 |
+ </table> |
|
50 |
+ </div> |
|
60 | 51 |
</div> |
61 | 52 |
</div> |
62 | 53 |
</div> |
63 |
- </div> |
|
54 |
+ <div class="d-flex justify-between align-center"> |
|
55 |
+ <div></div> |
|
56 |
+ <Pagination :search="searchParams" @onChange="handlePageChange" /> |
|
57 |
+ <button class="btn sm primary" @click="handleNavigation('edit')">등록</button> |
|
58 |
+ </div> |
|
64 | 59 |
</template> |
65 | 60 |
<script> |
66 |
-import { SearchOutlined } from '@ant-design/icons-vue'; |
|
67 | 61 |
import Pagination from "../../../component/Pagination.vue"; |
68 | 62 |
// API |
69 | 63 |
import { findCodesProc } from "../../../../resources/api/code"; |
... | ... | @@ -72,7 +66,6 @@ |
72 | 66 |
name: 'CodeListPage', |
73 | 67 |
|
74 | 68 |
components: { |
75 |
- SearchOutlined, |
|
76 | 69 |
Pagination, |
77 | 70 |
}, |
78 | 71 |
|
--- client/views/pages/Manager/system/MenuAuthorManagement.vue
+++ client/views/pages/Manager/system/MenuAuthorManagement.vue
... | ... | @@ -2,40 +2,40 @@ |
2 | 2 |
<div class="card"> |
3 | 3 |
<div class="card-body"> |
4 | 4 |
<h2 class="card-title">접근제어관리</h2> |
5 |
- <div class="flex align-top"> |
|
6 |
- <div class="sch-form-wrap search"> |
|
7 |
- <div class="tbl-wrap table-scroll"> |
|
5 |
+ <div class="d-flex align-stretch gap30"> |
|
6 |
+ <div class="left-zone"> |
|
7 |
+ <div class="tbl-wrap"> |
|
8 | 8 |
<table id="myTable" class="tbl data"> |
9 | 9 |
<thead> |
10 | 10 |
<tr> |
11 |
- <th>권한목록</th> |
|
11 |
+ <th style="border-radius: 1rem 1rem 0 0;">권한목록</th> |
|
12 | 12 |
</tr> |
13 | 13 |
</thead> |
14 | 14 |
<tbody> |
15 |
- <tr v-for="(item, idx) of authorLists" :key="idx" @click="findMenuAuthorList(item.authorCode)"> |
|
16 |
- <td v-if="item.useAt === 'Y'" :class="{ 'selected': selectedAuthor == item.authorCode }">{{ item.authorNm }}</td> |
|
15 |
+ <tr v-for="(item, idx) of authorLists" :key="idx" @click="findMenuAuthorList(item.authorCode)" > |
|
16 |
+ <td v-if="item.useAt === 'Y'" :class="{ 'selected': selectedAuthor == item.authorCode }" style="border-radius: 0 0 1rem 1rem;">{{ item.authorNm }}</td> |
|
17 | 17 |
</tr> |
18 | 18 |
</tbody> |
19 | 19 |
</table> |
20 | 20 |
</div> |
21 | 21 |
</div> |
22 |
- <div style="width: 100%;"> |
|
23 |
- <div class="tbl-wrap chk-area"> |
|
22 |
+ <div class="right-zone"> |
|
23 |
+ <div class="tbl-wrap"> |
|
24 | 24 |
<table id="myTable" class="tbl data"> |
25 | 25 |
<thead> |
26 | 26 |
<tr> |
27 |
- <th>메뉴명</th> |
|
27 |
+ <th style="border-radius: 1rem 0 0 0;">메뉴명</th> |
|
28 | 28 |
<th>전체</th> |
29 | 29 |
<th>읽기</th> |
30 | 30 |
<th>쓰기</th> |
31 | 31 |
<th>수정</th> |
32 |
- <th>삭제</th> |
|
32 |
+ <th style="border-radius: 0 1rem 0 0;">삭제</th> |
|
33 | 33 |
</tr> |
34 | 34 |
</thead> |
35 | 35 |
<tbody> |
36 | 36 |
<template v-if="menuAuthorLists.length > 0"> |
37 | 37 |
<tr v-for="(item, idx) in menuAuthorLists" :key="idx"> |
38 |
- <td :style="getMenuStyle(item)"> {{ item.menuNm }} </td> |
|
38 |
+ <td :style="getMenuStyle(item)" style="border-radius: 0 0 0 1rem;"> {{ item.menuNm }} </td> |
|
39 | 39 |
<td> |
40 | 40 |
<div class="form-check"> |
41 | 41 |
<input type="checkbox" :id="`all_${idx}`" :checked="isAllChecked(item)" @change="toggleAll(idx)" /> |
... | ... | @@ -60,7 +60,7 @@ |
60 | 60 |
<label :for="`updt_${idx}`"></label> |
61 | 61 |
</div> |
62 | 62 |
</td> |
63 |
- <td> |
|
63 |
+ <td style="border-radius: 0 0 1rem 0;"> |
|
64 | 64 |
<div class="form-check"> |
65 | 65 |
<input type="checkbox" :id="`delete_${idx}`" :checked="item.delete === 'Y'" @change="updatePermission(idx, 'delete', $event)" /> |
66 | 66 |
<label :for="`delete_${idx}`"></label> |
... | ... | @@ -70,19 +70,20 @@ |
70 | 70 |
</template> |
71 | 71 |
<template v-else> |
72 | 72 |
<tr> |
73 |
- <td colspan="6">조회된 정보가 없습니다.</td> |
|
73 |
+ <td colspan="6" style="border-radius: 0 0 1rem 1rem;text-align: center;">조회된 정보가 없습니다.</td> |
|
74 | 74 |
</tr> |
75 | 75 |
</template> |
76 | 76 |
</tbody> |
77 | 77 |
</table> |
78 | 78 |
</div> |
79 |
- <div> |
|
80 |
- <button type="button" class="btn sm secondary" @click="fnUpdate">저장</button> |
|
81 |
- </div> |
|
82 | 79 |
</div> |
83 | 80 |
</div> |
84 | 81 |
</div> |
85 | 82 |
</div> |
83 |
+ <div class="d-flex justify-between align-center"> |
|
84 |
+ <div></div> |
|
85 |
+ <button type="button" class="btn sm secondary" @click="fnUpdate">저장</button> |
|
86 |
+ </div> |
|
86 | 87 |
</template> |
87 | 88 |
<script> |
88 | 89 |
// API |
--- client/views/pages/User/Login.vue
+++ client/views/pages/User/Login.vue
... | ... | @@ -1,31 +1,26 @@ |
1 | 1 |
<template> |
2 |
- <div class=""> |
|
3 |
- <div class="card mb-3"> |
|
4 |
- <div class="card-body"> |
|
5 |
- <div class="pb-2"> |
|
6 |
- <h2 class="card-title text-center pb-0 fs-4"><img :src="logo" alt="로고"></h2> |
|
7 |
- </div> |
|
2 |
+ <div class="login"> |
|
3 |
+ <div class="logo"> |
|
4 |
+ <h2 class="card-title"><img :src="logo" alt="로고"></h2> |
|
5 |
+ </div> |
|
6 |
+ <div class="row g-3 needs-validation" :class="{ 'was-validated': formSubmitted }"> |
|
7 |
+ <div class="box"> |
|
8 |
+ <label for="yourUsername" class="form-label id">아이디</label> |
|
9 |
+ <div class="input-group has-validation"> |
|
10 |
+ <input v-model="userInfo.loginId" ref="loginId" type="text" name="username" class="form-control sm" id="yourUsername" placeholder="아이디를 입력하세요." required> |
|
11 |
+ </div> |
|
12 |
+ </div> |
|
8 | 13 |
|
9 |
- <div class="row g-3 needs-validation" :class="{ 'was-validated': formSubmitted }"> |
|
10 |
- <div class="box"> |
|
11 |
- <label for="yourUsername" class="form-label"><img :src="idIcon" alt="아이디 아이콘">아이디</label> |
|
12 |
- <div class="input-group has-validation"> |
|
13 |
- <input v-model="userInfo.loginId" ref="loginId" type="text" name="username" class="form-control sm" id="yourUsername" placeholder="아이디를 입력하세요." required> |
|
14 |
- </div> |
|
15 |
- </div> |
|
14 |
+ <div class="box"> |
|
15 |
+ <label for="yourPassword" class="form-label pw">비밀번호</label> |
|
16 |
+ <input v-model="userInfo.password" ref="password" type="password" name="password" class="form-control sm" id="yourPassword" placeholder="비밀번호를 입력하세요." required @keydown.enter="handleLogin"/> |
|
17 |
+ </div> |
|
16 | 18 |
|
17 |
- <div class="box"> |
|
18 |
- <label for="yourPassword" class="form-label"><img :src="passwordIcon" alt="비밀번호 아이콘">비밀번호</label> |
|
19 |
- <input v-model="userInfo.password" ref="password" type="password" name="password" class="form-control sm" id="yourPassword" placeholder="비밀번호를 입력하세요." required @keydown.enter="handleLogin"/> |
|
20 |
- </div> |
|
21 |
- |
|
22 |
- <div class="box"> |
|
23 |
- <button class="btn md" type="submit" @click="handleLogin"><img :src="loginIcon" alt="로그인 아이콘">로그인</button> |
|
24 |
- </div> |
|
25 |
- </div> |
|
26 |
- </div> |
|
27 |
- </div> |
|
28 |
- </div> |
|
19 |
+ <div class="box"> |
|
20 |
+ <button class="btn md" type="submit" @click="handleLogin"><img :src="loginIcon" alt="로그인 아이콘">로그인</button> |
|
21 |
+ </div> |
|
22 |
+ </div> |
|
23 |
+ </div> |
|
29 | 24 |
</template> |
30 | 25 |
|
31 | 26 |
<script> |
... | ... | @@ -35,8 +30,6 @@ |
35 | 30 |
data() { |
36 | 31 |
return { |
37 | 32 |
// 임시 로그인 정보 |
38 |
- idIcon: "/client/resources/img/id.png", |
|
39 |
- passwordIcon: "/client/resources/img/password.png", |
|
40 | 33 |
loginIcon: "/client/resources/img/loginicon.png", |
41 | 34 |
formSubmitted: false, |
42 | 35 |
logo: "/client/resources/img/logo.png", // 경로를 Vue 프로젝트 구조에 맞게 설정 |
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?