
--- client/resources/css/layout.css
+++ client/resources/css/layout.css
... | ... | @@ -137,7 +137,7 @@ |
137 | 137 |
|
138 | 138 |
.content-wrap { |
139 | 139 |
max-width: 100%; |
140 |
- height: 90vh; |
|
140 |
+ height: 100%; |
|
141 | 141 |
padding: 2em; |
142 | 142 |
background-color: #ffffff; |
143 | 143 |
} |
... | ... | @@ -146,7 +146,6 @@ |
146 | 146 |
.hierarchy-menu { |
147 | 147 |
background-color: #f8f8f8; |
148 | 148 |
color: #333333; |
149 |
- height: 40vh; |
|
150 | 149 |
overflow-y: auto; |
151 | 150 |
} |
152 | 151 |
.hierarchy-menu a { |
... | ... | @@ -189,7 +188,7 @@ |
189 | 188 |
content: ''; |
190 | 189 |
display: block; |
191 | 190 |
height: 0px; |
192 |
- width: 20px; |
|
191 |
+ width: 50px; |
|
193 | 192 |
border-bottom: 1px solid #7A7F87; |
194 | 193 |
position: absolute; |
195 | 194 |
left: -10px; |
... | ... | @@ -206,7 +205,7 @@ |
206 | 205 |
top: -27px; |
207 | 206 |
} |
208 | 207 |
.hierarchy-menu > ul ul li.group-lvl:before { |
209 |
- width: 7px; |
|
208 |
+ width: 50px; |
|
210 | 209 |
} |
211 | 210 |
.hierarchy-menu > ul ul li:first-child:after { |
212 | 211 |
height: 28px; |
... | ... | @@ -214,9 +213,20 @@ |
214 | 213 |
} |
215 | 214 |
|
216 | 215 |
/* Links */ |
216 |
+.hierarchy-menu ul .max-agency{ |
|
217 |
+ margin-left: 0px; |
|
218 |
+ width: 37%; |
|
219 |
+} |
|
220 |
+.hierarchy-menu ul .top-agency{ |
|
221 |
+ margin-left: 49px; |
|
222 |
+ width: 39%; |
|
223 |
+} |
|
224 |
+.hierarchy-menu .low-agency{ |
|
225 |
+ margin-left: 50px; |
|
226 |
+} |
|
217 | 227 |
.hierarchy-menu ul a { |
218 | 228 |
display: block; |
219 |
- padding: 6px 18px; |
|
229 |
+ padding: 6px 0; |
|
220 | 230 |
height: 44px; |
221 | 231 |
position: relative; |
222 | 232 |
color: #333333; |
+++ client/views/component/Category.jsx
... | ... | @@ -0,0 +1,63 @@ |
1 | +import React, { useState } from "react"; | |
2 | + | |
3 | +function Menu({ className, children, href, title }) { | |
4 | + if (!children) { | |
5 | + return <li className="venue-lvl"> | |
6 | + <a href={href ?? '#'}> | |
7 | + <span>{title}</span> | |
8 | + </a> | |
9 | + </li> | |
10 | + } | |
11 | + const [open, setOpend] = useState('open'); | |
12 | + // if (className) className = 'group-lvl'; | |
13 | + // className = className ?? 'group-lvl'; | |
14 | + className ??= 'group-lvl'; | |
15 | + className = `${className} sub-nav ${open}`; //[className, 'sub-nav', open].join(' ') | |
16 | + return <li className={className}> | |
17 | + <a href={href ?? '#'} onClick={() => setOpend(open ? '' : 'open')} className="max-agency"> | |
18 | + <span>{title}</span> | |
19 | + </a> | |
20 | + {open && <ul id="venue-scope-options"> | |
21 | + {children} | |
22 | + </ul>} | |
23 | + </li> | |
24 | +} | |
25 | + | |
26 | +export default function UserAuthoriySelect() { | |
27 | + | |
28 | + return ( | |
29 | + <div style={{ height: "100%" }}> | |
30 | + <div class="hierarchy-menu"> | |
31 | + <ul> | |
32 | + <Menu className="customer-lvl" href="#" title="올잇메디"> | |
33 | + <li className="group-lvl sub-nav open"> | |
34 | + <a className="top-agency" href="#"> | |
35 | + <span>지자체</span> | |
36 | + </a> | |
37 | + <ul id="venue-scope-options" className="low-agency"> | |
38 | + <Menu href="#" title="보호기관1" /> | |
39 | + <Menu href="#" title="보호기관2" /> | |
40 | + <Menu href="#" title="보호기관3" /> | |
41 | + </ul> | |
42 | + </li> | |
43 | + <li class="group-lvl sub-nav open"> | |
44 | + <a href="#" className="active top-agency"> | |
45 | + <span>관리 병원</span> | |
46 | + </a> | |
47 | + <ul className="low-agency"> | |
48 | + <Menu href="#" title="병원1" /> | |
49 | + <Menu href="#" title="병원2" /> | |
50 | + <Menu href="#" title="병원3" /> | |
51 | + </ul> | |
52 | + </li> | |
53 | + <li class="venue-lvl "> | |
54 | + <a href="#" className="top-agency"> | |
55 | + <span>관리자</span> | |
56 | + </a> | |
57 | + </li> | |
58 | + </Menu> | |
59 | + </ul> | |
60 | + </div> | |
61 | + </div> | |
62 | + ); | |
63 | +} |
--- client/views/layout/Menu.jsx
+++ client/views/layout/Menu.jsx
... | ... | @@ -23,21 +23,27 @@ |
23 | 23 |
), |
24 | 24 |
}, |
25 | 25 |
{ |
26 |
- title: "장비 관리", |
|
27 |
- path: "/EquipmentManagementSelect", |
|
26 |
+ title: "장비 관리", |
|
28 | 27 |
icon: ( |
29 | 28 |
<SpeakerPhoneIcon |
30 | 29 |
sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} |
31 | 30 |
/> |
32 | 31 |
), |
33 |
- }, |
|
34 |
- { |
|
35 |
- title: "장비 반납/교환 요청", |
|
36 |
- path: "/EquipmentManagementSelectReturn", |
|
37 |
- icon: ( |
|
38 |
- <CallIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} /> |
|
39 |
- ), |
|
40 |
- }, |
|
32 |
+ childrens: [ |
|
33 |
+ { |
|
34 |
+ title: "장비 조회", |
|
35 |
+ path: "/EquipmentManagementSelect", |
|
36 |
+ }, |
|
37 |
+ { |
|
38 |
+ title: "장비 반납/교환 요청", |
|
39 |
+ path: "/EquipmentManagementSelectReturn", |
|
40 |
+ }, |
|
41 |
+ { |
|
42 |
+ title: "장비 추가 요청", |
|
43 |
+ path: "/EquipmentManagementSelectReturn", |
|
44 |
+ }, |
|
45 |
+ ], |
|
46 |
+ }, |
|
41 | 47 |
{ |
42 | 48 |
title: "문의게시판", |
43 | 49 |
path: "/EquipmentManagementSelectReturn", |
--- client/views/pages/equipment/EquipmentManagementSelect.jsx
+++ client/views/pages/equipment/EquipmentManagementSelect.jsx
... | ... | @@ -3,7 +3,9 @@ |
3 | 3 |
import Button from "../../component/Button.jsx"; |
4 | 4 |
import SubTitle from "../../component/SubTitle.jsx"; |
5 | 5 |
import Modal from "../../component/Modal.jsx"; |
6 |
+import Category from "../../component/Category.jsx"; |
|
6 | 7 |
import { useNavigate } from "react-router"; |
8 |
+ |
|
7 | 9 |
|
8 | 10 |
export default function EquipmentManagementSelect() { |
9 | 11 |
const [modalOpen, setModalOpen] = React.useState(false); |
... | ... | @@ -130,7 +132,12 @@ |
130 | 132 |
const content4 = [ |
131 | 133 |
{ |
132 | 134 |
No: 1, |
133 |
- equipment_name: "A복지관", |
|
135 |
+ equipment_name: ( |
|
136 |
+ <div> |
|
137 |
+ <Category /> |
|
138 |
+ </div> |
|
139 |
+ ) |
|
140 |
+ , |
|
134 | 141 |
serialNumber: (<Button |
135 | 142 |
className={"btn-small gray-btn"} |
136 | 143 |
btnName={"선택"} |
... | ... | @@ -196,7 +203,7 @@ |
196 | 203 |
const [index, setIndex] = React.useState(1); |
197 | 204 |
return ( |
198 | 205 |
<main> |
199 |
- <Modal open={modalOpen} close={closeModal} header="'김복남'님의 가족"> |
|
206 |
+ <Modal open={modalOpen} close={closeModal} header="납품 기관 선택"> |
|
200 | 207 |
<div className="board-wrap"> |
201 | 208 |
<div> |
202 | 209 |
<Table |
--- client/views/pages/equipment/EquipmentManagementSelectReturn.jsx
+++ client/views/pages/equipment/EquipmentManagementSelectReturn.jsx
... | ... | @@ -16,6 +16,7 @@ |
16 | 16 |
"요청일자", |
17 | 17 |
"교환/반납", |
18 | 18 |
"처리예정일", |
19 |
+ "완료일", |
|
19 | 20 |
]; |
20 | 21 |
const key = [ |
21 | 22 |
"No", |
... | ... | @@ -24,7 +25,8 @@ |
24 | 25 |
"name", |
25 | 26 |
"date", |
26 | 27 |
"period_of_use", |
27 |
- "visit" |
|
28 |
+ "visit", |
|
29 |
+ "finish" |
|
28 | 30 |
]; |
29 | 31 |
const content = [ |
30 | 32 |
{ |
... | ... | @@ -36,7 +38,10 @@ |
36 | 38 |
period_of_use: "교환", |
37 | 39 |
visit:(<div> |
38 | 40 |
<input type="date" /> |
39 |
- </div>) |
|
41 |
+ </div>), |
|
42 |
+ finish:(<div> |
|
43 |
+ <input type="date" /> |
|
44 |
+ </div>), |
|
40 | 45 |
}, |
41 | 46 |
{ |
42 | 47 |
No: 2, |
... | ... | @@ -47,7 +52,10 @@ |
47 | 52 |
period_of_use: "반납", |
48 | 53 |
visit:(<div> |
49 | 54 |
<input type="date" /> |
50 |
- </div>) |
|
55 |
+ </div>), |
|
56 |
+ finish:(<div> |
|
57 |
+ <input type="date" /> |
|
58 |
+ </div>), |
|
51 | 59 |
}, |
52 | 60 |
]; |
53 | 61 |
return ( |
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?