Commit @b027af7a439289749b3a2474fd028d6415781766

하석형 2023-02-28

230228 하석형 장비 등록

@b027af7a439289749b3a2474fd028d6415781766

ffd7a86

b027af7

client/views/pages/equipment/EquipmentManagementSelect.jsx

--- client/views/pages/equipment/EquipmentManagementSelect.jsx

+++ client/views/pages/equipment/EquipmentManagementSelect.jsx


 		setModalOpen(false);
 	};
 
-	const [modalOpen3, setModalOpen3] = React.useState(false);
-	const openModal3 = () => {
-		// equipmentListData();
-		setModalOpen3(true);
-	};
-	const closeModal3 = () => {
-		setModalOpen3(false);
-	};
-
-	// 대상자 매칭 반납
-	const seniorMatchDelete = () => {
-		if (confirm('아니다') == false) {
-			return;
-		}
-		// 대상자 매칭 반납 함수 사용하기
-	};
 
 	const navigate = useNavigate();
 
-	// 시스템 코드 - 장비 대여 상태 조회
+	// 시스템 코드 - 장비 상태 조회
 	const equipmentStatesSelect = () => {
 		console.log('equipmentStatesSelect Function Run');
 

 	}
 
 	/********************************** 관리자 장비 (시작) **********************************/
+	//로그 확인
+	const logCheck = () => {
+		console.log('equipment - change: ', equipment);
+	};
+
+	// 장비 빈 초기값
+	const equipment_ = {
+		equipment_serial_number: null,
+		equipment_type: null,
+		equipment_name: null,
+		equipment_state: null,
+		equipment_product_date: null,
+		equipment_stock_date: null,
+	}
+
+
 	// 관리자 전체 장비 목록
 	const [equipmentList, setEquipmentList] = React.useState([]);
+	// 장비
+	const [equipment, setEquipment] = React.useState({
+		equipment_serial_number: null,
+		equipment_type: null,
+		equipment_name: null,
+		equipment_state: null,
+		equipment_product_date: null,
+		equipment_stock_date: null,
+	});
+	// 장비 등록 모달창
+	const [equipmentInsertModal, setEquipmentInsertModal] = React.useState(false);
+
+	// 장비 등록 모달창 열기
+	const equipmentInsertModalOpen = () => {
+		setEquipmentInsertModal(true);
+	};
+	// 장비 등록 모달창 닫기
+	const equipmentInsertModalClose = () => {
+		// 장비 초기화
+		setEquipment(equipment_);
+		setEquipmentInsertModal(false);
+	};
+
 
 	// 관리자 전체 장비 목록 조회
 	const equipmentSelectList = () => {

 		});
 	}
 
+	// 장비 임시 데이터
+	const equipmentChange = (e) => {
+		console.log('equipmentChange: ', e.target.name, e.target.value);
+
+		// 원본 데이터 복사 및 수정
+		let data = {};
+
+		// 장비 종류가 '디지털 약상자'일 경우 모델 명에 '스마트 약상자' 입력
+		if(e.target.name == "equipment_type" && e.target.value == "DIGITAL_MEDIBOX") {
+			data = {
+				...equipment,
+				[e.target.name]: e.target.value,
+				equipment_name: "스마트 약상자"
+			}
+		} else { // 장비 종류 이외의 이벤트 핸들러일 경우
+			data = {
+				...equipment,
+				[e.target.name]: e.target.value
+			}
+		}
+		// 복사 데이터를 원본 데이터에 덮어쓰기
+		setEquipment(data);
+	}
+
+	// 장비 등록
+	const equipmentInsert = () => {
+		console.log('equipmentInsert Function Run');
+
+		// 유효성 검사
+		for(let i = 0; i < equipmentInsertHead.length; i++) {
+			if(equipment[equipmentInsertKey[i]] == null) {
+				alert(equipmentInsertHead[i] +'를 선택해 주세요');
+				return;
+			}
+		}
+
+		fetch("/equipment/equipmentInsert.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify(equipment),
+		}).then((response) => response.json()).then((data) => {
+			console.log('equipmentInsert response : ', data);
+			// 장비 목록 조회
+			equipmentSelectList();
+			// 장비 초기화
+			setEquipment(equipment_);
+			// 모달창 닫기
+			setEquipmentInsertModal(false);
+
+			alert('등록이 완료됐습니다.');
+		}).catch((error) => {
+			console.log('equipmentInsert error : ', error);
+			alert('등록에 실패했습니다.');
+		});
+	}
+
+	// 장비 등록 th
+	const equipmentInsertHead = [
+		"종류",
+		"모델 명",
+		"시리얼 넘버",
+		"생산 일자",
+		"입고 일자",
+	]
+
+	// 장비 등록 key
+	const equipmentInsertKey = [
+		"equipment_type",
+		"equipment_name",
+		"equipment_serial_number",
+		"equipment_product_date",
+		"equipment_stock_date",
+	]
+
+	//스마트 약상자 모델명 리스트 (예시)
+	const smartMediBoxNameList = ["SMB-NB100", "NB100", "SDC-2000", "SDC-2002"]
+
 	const thead1 = [
 		"No",
 		"모델 명",

 		"입고 일자",
 		"상태",
 		"보유 기관",
-		"관리",
+		"시행기관 관리",
 	];
 	const key1 = [
 		"equipment_name",

 
 
 	/********************************** 시행기관 장비 (시작) **********************************/
-	//로그 확인
-	const logCheck = () => {
-		console.log('seniorMatchListByEquipment - change: ', seniorMatchListByEquipment.length);
-	};
-
 	// 시행기관 전체 장비 목록
 	const [agencyEquipmentList, setAgencyEquipmentList] = React.useState([]);
 	// 시행기관 대상자 장비 목록

 	const [equipmentNotMatchSeniorList, setEquipmentNotMatchSeniorList] = React.useState([]);
 	// 담당자 목록
 	const [workerList, setWorkerList] = React.useState([]);
-
 
 	// 대상자 장비 등록 모달창 열기
 	const seniorMatchInsertModalOpen = (item) => {

 
 	// 마운트 시 실행 함수
 	React.useEffect(() => {
+		// 공통
 		equipmentStatesSelect();
 		equipmentRentalStatesSelect();
 		equipmentNotMatchSeniorSelectList();
 		workerSelectList();
 
-		//관리자
+		// 관리자
 		equipmentSelectList();
 
-		//시행기관
+		// 시행기관
 		agencyEquipmentSelectList();
 		agencySeniorEquipmentSelectList();
 		agencyStockEquipmentSelectList();

 						<div className="btn-wrap flex-end margin-bottom ">
 							<Button
 								className={"btn-small gray-btn"}
+								btnName={"LOG"}
+								onClick={logCheck}
+							/>
+							<Button
+								className={"btn-small gray-btn"}
 								btnName={"등록"}
-								onClick={openModal3}
+								onClick={equipmentInsertModalOpen}
 							/>
 						</div>
 					</div>

 										<tr key={index}>
 											<td>{equipmentList.length - index}</td>
 											{key1.map((kes) => {
+												if(kes == "equipment_state") {
+													Object.keys(equipmentStates).map((key, idx) => {
+														if(item[kes] == key) {
+															item[kes] = Object.values(equipmentStates)[idx];
+														}
+													})
+												}
 												return <td>{item[kes]}</td>
 											})}
 											<td>

 	];
 
 	//시작 탭 설정
-	const [index, setIndex] = React.useState(4);
+	const [index, setIndex] = React.useState(1);
 
 	return (
 		<main>
+
+			<Modal open={equipmentInsertModal} close={equipmentInsertModalClose} header="장비 등록">
+				<div className="board-wrap">
+					<div>
+						<table className="flex70 margin-bottom">
+							<tbody className="equipment-insert">
+								<tr>
+									<th>종류</th>
+									<td colSpan={5}>
+										<select defaultValue={""} name="equipment_type" onChange={equipmentChange}>
+											<option value="" disabled>선택</option>
+											<option value="DIGITAL_MEDIBOX">디지털 약상자</option>
+											<option value="ECG" disabled>심전도계</option>
+											<option value="SPHYGMOMANOMETER" disabled>혈압계</option>
+										</select>
+									</td>
+								</tr>
+								<tr>
+									<th>모델 명</th>
+									<td colSpan={5}>
+										<input type="text" value={equipment['equipment_name']} id="equipmentName" name="equipment_name" placeholder="모델 명을 입력해 주세요" onChange={equipmentChange}></input>
+										{/* {smartMediBoxNameList.map((item) => {
+											return (
+												<span>
+													<input type="radio" id={item} name="equipment_name" value={item}></input>
+													<label for={item}>{item}</label>
+												</span>
+											)
+										})} */}
+									</td>
+								</tr>
+								<tr>
+									<th>시리얼 넘버</th>
+									<td colSpan={5}>
+										<input type="text" name="equipment_serial_number" placeholder="S/N을 입력해 주세요" onChange={equipmentChange}/>
+									</td>
+								</tr>
+								<tr>
+									<th>생산 일자</th>
+									<td colSpan={5}>
+										<input type="date" name="equipment_product_date" onChange={equipmentChange}/>
+									</td>
+								</tr>
+								<tr>
+									<th>입고 일자</th>
+									<td colSpan={5}>
+										<input type="date" name="equipment_stock_date" onChange={equipmentChange}/>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+					<div className="flex-center">
+						<Button
+							className={"btn-small gray-btn"}
+							btnName={"저장"}
+							onClick={equipmentInsert}
+						/>
+					</div>
+				</div>
+			</Modal>
+
 			<Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
 				<div className="board-wrap">
 					<div>

 							className={"btn-100 gray-btn"}
 							btnName={"닫기"}
 							onClick={closeModal}
-						/>
-					</div>
-				</div>
-			</Modal>
-
-			<Modal open={modalOpen3} close={closeModal3} header="장비 등록">
-				<div className="board-wrap">
-					<div>
-						<table className="flex70 margin-bottom">
-							<tbody className="equipment-insert">
-								<tr>
-									<th>장비명</th>
-									<td colSpan={5}>
-										<input type="text" name="" id="" />
-									</td>
-								</tr>
-								<tr>
-									<th>시리얼 넘버</th>
-									<td colSpan={5}>
-										<input type="text" name="" id="" />
-									</td>
-								</tr>
-								<tr>
-									<th>입고일자</th>
-									<td colSpan={5}>
-										<input type="text" name="" id="" />
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-					<div className="flex-center">
-						<Button
-							className={"btn-small gray-btn"}
-							btnName={"저장"}
-							onClick={closeModal3}
 						/>
 					</div>
 				</div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -22,26 +22,10 @@
22	22	setModalOpen(false);
23	23	};
24	24
25		- const [modalOpen3, setModalOpen3] = React.useState(false);
26		- const openModal3 = () => {
27		- // equipmentListData();
28		- setModalOpen3(true);
29		- };
30		- const closeModal3 = () => {
31		- setModalOpen3(false);
32		- };
33		-
34		- // 대상자 매칭 반납
35		- const seniorMatchDelete = () => {
36		- if (confirm('아니다') == false) {
37		- return;
38		- }
39		- // 대상자 매칭 반납 함수 사용하기
40		- };
41	25
42	26	const navigate = useNavigate();
43	27
44		- // 시스템 코드 - 장비 대여 상태 조회
	28	+ // 시스템 코드 - 장비 상태 조회
45	29	const equipmentStatesSelect = () => {
46	30	console.log('equipmentStatesSelect Function Run');
47	31
...	...	@@ -149,8 +133,47 @@
149	133	}
150	134
151	135	/******************************** 관리자 장비 (시작) ********************************/
	136	+ //로그 확인
	137	+ const logCheck = () => {
	138	+ console.log('equipment - change: ', equipment);
	139	+ };
	140	+
	141	+ // 장비 빈 초기값
	142	+ const equipment_ = {
	143	+ equipment_serial_number: null,
	144	+ equipment_type: null,
	145	+ equipment_name: null,
	146	+ equipment_state: null,
	147	+ equipment_product_date: null,
	148	+ equipment_stock_date: null,
	149	+ }
	150	+
	151	+
152	152	// 관리자 전체 장비 목록
153	153	const [equipmentList, setEquipmentList] = React.useState([]);
	154	+ // 장비
	155	+ const [equipment, setEquipment] = React.useState({
	156	+ equipment_serial_number: null,
	157	+ equipment_type: null,
	158	+ equipment_name: null,
	159	+ equipment_state: null,
	160	+ equipment_product_date: null,
	161	+ equipment_stock_date: null,
	162	+ });
	163	+ // 장비 등록 모달창
	164	+ const [equipmentInsertModal, setEquipmentInsertModal] = React.useState(false);
	165	+
	166	+ // 장비 등록 모달창 열기
	167	+ const equipmentInsertModalOpen = () => {
	168	+ setEquipmentInsertModal(true);
	169	+ };
	170	+ // 장비 등록 모달창 닫기
	171	+ const equipmentInsertModalClose = () => {
	172	+ // 장비 초기화
	173	+ setEquipment(equipment_);
	174	+ setEquipmentInsertModal(false);
	175	+ };
	176	+
154	177
155	178	// 관리자 전체 장비 목록 조회
156	179	const equipmentSelectList = () => {
...	...	@@ -169,6 +192,85 @@
169	192	});
170	193	}
171	194
	195	+ // 장비 임시 데이터
	196	+ const equipmentChange = (e) => {
	197	+ console.log('equipmentChange: ', e.target.name, e.target.value);
	198	+
	199	+ // 원본 데이터 복사 및 수정
	200	+ let data = {};
	201	+
	202	+ // 장비 종류가 '디지털 약상자'일 경우 모델 명에 '스마트 약상자' 입력
	203	+ if(e.target.name == "equipment_type" && e.target.value == "DIGITAL_MEDIBOX") {
	204	+ data = {
	205	+ ...equipment,
	206	+ [e.target.name]: e.target.value,
	207	+ equipment_name: "스마트 약상자"
	208	+ }
	209	+ } else { // 장비 종류 이외의 이벤트 핸들러일 경우
	210	+ data = {
	211	+ ...equipment,
	212	+ [e.target.name]: e.target.value
	213	+ }
	214	+ }
	215	+ // 복사 데이터를 원본 데이터에 덮어쓰기
	216	+ setEquipment(data);
	217	+ }
	218	+
	219	+ // 장비 등록
	220	+ const equipmentInsert = () => {
	221	+ console.log('equipmentInsert Function Run');
	222	+
	223	+ // 유효성 검사
	224	+ for(let i = 0; i < equipmentInsertHead.length; i++) {
	225	+ if(equipment[equipmentInsertKey[i]] == null) {
	226	+ alert(equipmentInsertHead[i] +'를 선택해 주세요');
	227	+ return;
	228	+ }
	229	+ }
	230	+
	231	+ fetch("/equipment/equipmentInsert.json", {
	232	+ method: "POST",
	233	+ headers: {
	234	+ 'Content-Type': 'application/json; charset=UTF-8'
	235	+ },
	236	+ body: JSON.stringify(equipment),
	237	+ }).then((response) => response.json()).then((data) => {
	238	+ console.log('equipmentInsert response : ', data);
	239	+ // 장비 목록 조회
	240	+ equipmentSelectList();
	241	+ // 장비 초기화
	242	+ setEquipment(equipment_);
	243	+ // 모달창 닫기
	244	+ setEquipmentInsertModal(false);
	245	+
	246	+ alert('등록이 완료됐습니다.');
	247	+ }).catch((error) => {
	248	+ console.log('equipmentInsert error : ', error);
	249	+ alert('등록에 실패했습니다.');
	250	+ });
	251	+ }
	252	+
	253	+ // 장비 등록 th
	254	+ const equipmentInsertHead = [
	255	+ "종류",
	256	+ "모델 명",
	257	+ "시리얼 넘버",
	258	+ "생산 일자",
	259	+ "입고 일자",
	260	+ ]
	261	+
	262	+ // 장비 등록 key
	263	+ const equipmentInsertKey = [
	264	+ "equipment_type",
	265	+ "equipment_name",
	266	+ "equipment_serial_number",
	267	+ "equipment_product_date",
	268	+ "equipment_stock_date",
	269	+ ]
	270	+
	271	+ //스마트 약상자 모델명 리스트 (예시)
	272	+ const smartMediBoxNameList = ["SMB-NB100", "NB100", "SDC-2000", "SDC-2002"]
	273	+
172	274	const thead1 = [
173	275	"No",
174	276	"모델 명",
...	...	@@ -176,7 +278,7 @@
176	278	"입고 일자",
177	279	"상태",
178	280	"보유 기관",
179		- "관리",
	281	+ "시행기관 관리",
180	282	];
181	283	const key1 = [
182	284	"equipment_name",
...	...	@@ -277,11 +379,6 @@
277	379
278	380
279	381	/******************************** 시행기관 장비 (시작) ********************************/
280		- //로그 확인
281		- const logCheck = () => {
282		- console.log('seniorMatchListByEquipment - change: ', seniorMatchListByEquipment.length);
283		- };
284		-
285	382	// 시행기관 전체 장비 목록
286	383	const [agencyEquipmentList, setAgencyEquipmentList] = React.useState([]);
287	384	// 시행기관 대상자 장비 목록
...	...	@@ -303,7 +400,6 @@
303	400	const [equipmentNotMatchSeniorList, setEquipmentNotMatchSeniorList] = React.useState([]);
304	401	// 담당자 목록
305	402	const [workerList, setWorkerList] = React.useState([]);
306		-
307	403
308	404	// 대상자 장비 등록 모달창 열기
309	405	const seniorMatchInsertModalOpen = (item) => {
...	...	@@ -698,15 +794,16 @@
698	794
699	795	// 마운트 시 실행 함수
700	796	React.useEffect(() => {
	797	+ // 공통
701	798	equipmentStatesSelect();
702	799	equipmentRentalStatesSelect();
703	800	equipmentNotMatchSeniorSelectList();
704	801	workerSelectList();
705	802
706		- //관리자
	803	+ // 관리자
707	804	equipmentSelectList();
708	805
709		- //시행기관
	806	+ // 시행기관
710	807	agencyEquipmentSelectList();
711	808	agencySeniorEquipmentSelectList();
712	809	agencyStockEquipmentSelectList();
...	...	@@ -754,8 +851,13 @@
754	851	<div className="btn-wrap flex-end margin-bottom ">
755	852	<Button
756	853	className={"btn-small gray-btn"}
	854	+ btnName={"LOG"}
	855	+ onClick={logCheck}
	856	+ />
	857	+ <Button
	858	+ className={"btn-small gray-btn"}
757	859	btnName={"등록"}
758		- onClick={openModal3}
	860	+ onClick={equipmentInsertModalOpen}
759	861	/>
760	862	</div>
761	863	</div>
...	...	@@ -783,6 +885,13 @@
783	885	<tr key={index}>
784	886	<td>{equipmentList.length - index}</td>
785	887	{key1.map((kes) => {
	888	+ if(kes == "equipment_state") {
	889	+ Object.keys(equipmentStates).map((key, idx) => {
	890	+ if(item[kes] == key) {
	891	+ item[kes] = Object.values(equipmentStates)[idx];
	892	+ }
	893	+ })
	894	+ }
786	895	return <td>{item[kes]}</td>
787	896	})}
788	897	<td>
...	...	@@ -1001,10 +1110,72 @@
1001	1110	];
1002	1111
1003	1112	//시작 탭 설정
1004		- const [index, setIndex] = React.useState(4);
	1113	+ const [index, setIndex] = React.useState(1);
1005	1114
1006	1115	return (
1007	1116	<main>
	1117	+
	1118	+ <Modal open={equipmentInsertModal} close={equipmentInsertModalClose} header="장비 등록">
	1119	+ <div className="board-wrap">
	1120	+ <div>
	1121	+ <table className="flex70 margin-bottom">
	1122	+ <tbody className="equipment-insert">
	1123	+ <tr>
	1124	+ <th>종류</th>
	1125	+ <td colSpan={5}>
	1126	+ <select defaultValue={""} name="equipment_type" onChange={equipmentChange}>
	1127	+ <option value="" disabled>선택</option>
	1128	+ <option value="DIGITAL_MEDIBOX">디지털 약상자</option>
	1129	+ <option value="ECG" disabled>심전도계</option>
	1130	+ <option value="SPHYGMOMANOMETER" disabled>혈압계</option>
	1131	+ </select>
	1132	+ </td>
	1133	+ </tr>
	1134	+ <tr>
	1135	+ <th>모델 명</th>
	1136	+ <td colSpan={5}>
	1137	+ <input type="text" value={equipment['equipment_name']} id="equipmentName" name="equipment_name" placeholder="모델 명을 입력해 주세요" onChange={equipmentChange}></input>
	1138	+ {/* {smartMediBoxNameList.map((item) => {
	1139	+ return (
	1140	+ <span>
	1141	+ <input type="radio" id={item} name="equipment_name" value={item}></input>
	1142	+ <label for={item}>{item}</label>
	1143	+ </span>
	1144	+ )
	1145	+ })} */}
	1146	+ </td>
	1147	+ </tr>
	1148	+ <tr>
	1149	+ <th>시리얼 넘버</th>
	1150	+ <td colSpan={5}>
	1151	+ <input type="text" name="equipment_serial_number" placeholder="S/N을 입력해 주세요" onChange={equipmentChange}/>
	1152	+ </td>
	1153	+ </tr>
	1154	+ <tr>
	1155	+ <th>생산 일자</th>
	1156	+ <td colSpan={5}>
	1157	+ <input type="date" name="equipment_product_date" onChange={equipmentChange}/>
	1158	+ </td>
	1159	+ </tr>
	1160	+ <tr>
	1161	+ <th>입고 일자</th>
	1162	+ <td colSpan={5}>
	1163	+ <input type="date" name="equipment_stock_date" onChange={equipmentChange}/>
	1164	+ </td>
	1165	+ </tr>
	1166	+ </tbody>
	1167	+ </table>
	1168	+ </div>
	1169	+ <div className="flex-center">
	1170	+ <Button
	1171	+ className={"btn-small gray-btn"}
	1172	+ btnName={"저장"}
	1173	+ onClick={equipmentInsert}
	1174	+ />
	1175	+ </div>
	1176	+ </div>
	1177	+ </Modal>
	1178	+
1008	1179	<Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
1009	1180	<div className="board-wrap">
1010	1181	<div>
...	...	@@ -1020,42 +1191,6 @@
1020	1191	className={"btn-100 gray-btn"}
1021	1192	btnName={"닫기"}
1022	1193	onClick={closeModal}
1023		- />
1024		- </div>
1025		- </div>
1026		- </Modal>
1027		-
1028		- <Modal open={modalOpen3} close={closeModal3} header="장비 등록">
1029		- <div className="board-wrap">
1030		- <div>
1031		- <table className="flex70 margin-bottom">
1032		- <tbody className="equipment-insert">
1033		- <tr>
1034		- <th>장비명</th>
1035		- <td colSpan={5}>
1036		- <input type="text" name="" id="" />
1037		- </td>
1038		- </tr>
1039		- <tr>
1040		- <th>시리얼 넘버</th>
1041		- <td colSpan={5}>
1042		- <input type="text" name="" id="" />
1043		- </td>
1044		- </tr>
1045		- <tr>
1046		- <th>입고일자</th>
1047		- <td colSpan={5}>
1048		- <input type="text" name="" id="" />
1049		- </td>
1050		- </tr>
1051		- </tbody>
1052		- </table>
1053		- </div>
1054		- <div className="flex-center">
1055		- <Button
1056		- className={"btn-small gray-btn"}
1057		- btnName={"저장"}
1058		- onClick={closeModal3}
1059	1194	/>
1060	1195	</div>
1061	1196	</div>

Delete comment