Commit @b94f36c76b1c06b230c6425199eaa8c135c7a3f7

하석형 2023-02-21

230221 하석형 장비 매칭 작업 중

@b94f36c76b1c06b230c6425199eaa8c135c7a3f7

0204190

b94f36c

client/views/pages/equipment/EquipmentManagementSelect.jsx

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

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


 	const closeModal = () => {
 		setModalOpen(false);
 	};
-	const [modalOpen2, setModalOpen2] = React.useState(false);
-	const openModal2 = () => {
-		setModalOpen2(true);
-	};
-	const closeModal2 = () => {
-		setModalOpen2(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();
 
-	// 장비 목록 조회
+	// 함수 실행 함수
+	React.useEffect(() => {
+		equipmentSelectList();
+
+		agencyEquipmentSelectList();
+	}, [])
+
+
+
+	/********************************** 관리자 장비 (시작) **********************************/
+	// 관리자 전체 장비 목록
 	const [equipmentList, setEquipmentList] = React.useState([]);
 
-	// 장비 목록 조회 함수
+	// 관리자 전체 장비 목록 조회
 	const equipmentSelectList = () => {
 		console.log('equipmentSelectList Function Run');
 		fetch("/equipment/equipmentSelectList.json", {

 			},
 		}).then((response) => response.json()).then((data) => {
 			console.log('equipmentSelectList response : ', data);
-			// setEquipmentList(data);
+			setEquipmentList(data);
 		}).catch((error) => {
 			console.log('equipmentSelectList error : ', error);
 		});
 	}
 
-	// 함수 실행 함수
-	React.useEffect(() => {
-		equipmentSelectList();
-	}, [])
+	// 장비 목록 조회 확인
+	const equipmentListData = () => {
+		console.log('equipmentSelectList Function Run', equipmentList);
+		console.log('equipmentSelectList Function Run', equipmentList.length);
+		console.log('content1 before data: ', content1);
+		for(let i = 0; i < equipmentList.length; i++) {
+			content1.equipmentNo = i + 1;
+			content1.equipmentName = equipmentList[i].equipment_name;
+		}
+		console.log('content1 after data: ', content1);
+	}
 
 	const thead1 = [
 		"No",

 		"시리얼 넘버",
 		"입고 일자",
 		"상태",
-		"보유 기관", //관리기관, 올잇메디
-		"대상자",//시행기관
+		"보유 기관",
+		"대상자",
+		"관리",
 	];
 	const key1 = [
-		"equipmentNo",
-		"equipmentName",
-		"equipmentSerialNumber",
-		"equipmentStockDate",
-		"equipmentState",
-		"equipmentAgency",
-		"equipmentSenior",
+		"equipment_name",
+		"equipment_serial_number",
+		"equipment_stock_date",
+		"equipment_state",
+		"agency_name",
+		"user_name",
 	];
-	const content1 = [
-		{
-			No: 1,
-			equipment: "스마트약상자",
-			serialNumber: "ABCD-1",
-			date: "2022.12.02",
-			use: "사용",
-			agency: "A복지관",
-			protector: "김복지",
-		},
-		{
-			No: 2,
-			equipment: "스마트약상자",
-			serialNumber: "ABCD-1",
-			date: "2022.12.02",
-			use: "미사용",
-			agency: "B복지관",
-			protector: "-"
-		},
-	];
-	const thead3 = [
+
+	const thead2 = [
 		"No",
 		"장비명",
 		"시리얼 넘버",

 		"납품 기관",//관리기관, 올잇메디
 		"대상자",//시행기관
 	];
-	const key3 = [
+	const key2 = [
 		"No",
 		"equipment",
 		"serialNumber",

 		"agency",
 		"senior",
 	];
-	const content3 = [
+	const content2 = [
 		{
 			No: 1,
 			equipment: "스마트약상자",

 				<Button
 					className={"btn-small gray-btn"}
 					btnName={"선택"}
-					onClick={openModal2}
+					// onClick={openModal2}
 				/>
 			),
 		},

 				<Button
 					className={"btn-small gray-btn"}
 					btnName={"선택"}
-					onClick={openModal2}
+					// onClick={openModal2}
 				/>
 			),
 		},
 	];
-	const thead2 = [
+	const thead3 = [
 		"No",
 		"장비명",
 		"시리얼 넘버",

 		"보유기관",//관리기관, 올잇메디
 		"담당자",//시행기관
 	];
-	const key2 = [
+	const key3 = [
 		"No",
 		"equipment",
 		"serialNumber",

 		"agency",
 		"protector",
 	];
-	const content2 = [
+	const content3 = [
 		{
 			No: 1,
 			equipment: "스마트약상자",

 
 		},
 	];
+	/********************************** 관리자 장비 (끝) **********************************/
+
+
+
+	/********************************** 시행기관 장비 (시작) **********************************/
+	//로그 확인
+	const logCheck = () => {
+		console.log('agencyEquipmentList - change: ', agencyEquipmentList);
+	};
+
+	// 시행기관 전체 장비 목록
+	const [agencyEquipmentList, setAgencyEquipmentList] = React.useState([]);
+
+	// 대상자 장비 등록 모달창
+	const [seniorMatchModal, setSeniorMatchModal] = React.useState(false);
+
+	// 대상자 장비
+	const [seniorEquipment, setSeniorEquipment] = React.useState({});
+
+	// 대상자 장비 등록 모달창 열기
+	const seniorMatchModalOpen = (item) => {
+		setSeniorEquipment(item); // 선택한 장비 데이터 저장
+		setSeniorMatchModal(true);
+	};
+	// 대상자 장비 등록 모달창 닫기
+	const seniorMatchModalClose = () => {
+		setSeniorMatchModal(false);
+	};
+
+	// 대상자 장비 등록 - 대상자
+	const seniorEquipmentSeniorInsert = (e) => {
+		// 원본 데이터 복사 및 수정
+		let data = {
+			...seniorEquipment,
+			senior_id: e.target.value,
+			user_name: null
+		}
+		// 복사 데이터를 원본 데이터에 덮어쓰기
+		setSeniorEquipment(data);
+	};
+
+	// 대상자 장비 등록 - 대여일
+	const seniorEquipmentRentalStartDateInsert = (e) => {
+		// 원본 데이터 복사 및 수정
+		let data = {
+			...seniorEquipment,
+			equipment_rental_start_date: e.target.value
+		}
+		// 복사 데이터를 원본 데이터에 덮어쓰기
+		setSeniorEquipment(data);
+	};
+
+	// 대상자 장비 등록 - 반납예정일
+	const seniorEquipmentRentalEndDateInsert = (e) => {
+		// 원본 데이터 복사 및 수정
+		let data = {
+			...seniorEquipment,
+			equipment_rental_end_date: e.target.value
+		}
+		// 복사 데이터를 원본 데이터에 덮어쓰기
+		setSeniorEquipment(data);
+	};
+
+	// 시행기관 전체 장비 목록 조회
+	const agencyEquipmentSelectList = () => {
+		console.log('agencyEquipmentSelectList Function Run');
+		fetch("/equipment/agencyEquipmentSelectList.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify({
+				agency_id: 'AGENCY01',
+			}),
+		}).then((response) => response.json()).then((data) => {
+			console.log('agencyEquipmentSelectList response : ', data);
+			setAgencyEquipmentList(data);
+		}).catch((error) => {
+			console.log('agencyEquipmentSelectList error : ', error);
+		});
+	}
+
+	// 대상자 장비 등록
+	const seniorEquipmentInsert = () => {
+		console.log('seniorEquipmentInsert Function Run');
+		fetch("/equipment/seniorEquipmentInsert.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify({
+				agency_id: 'AGENCY01',
+			}),
+		}).then((response) => response.json()).then((data) => {
+			console.log('seniorEquipmentInsert response : ', data);
+			setSeniorEquipment(data);
+		}).catch((error) => {
+			console.log('seniorEquipmentInsert error : ', error);
+		});
+	}
+
+	const thead11 = [
+		"No",
+		"모델 명",
+		"시리얼 넘버",
+		"상태",
+		"대상자",
+		"대여일",
+		"반납예정일",
+		"반납일",
+		"관리"
+	];
+	const key11 = [
+		"equipment_name",
+		"equipment_serial_number",
+		"equipment_state",
+		"user_name",
+		"equipment_rental_start_date",
+		"equipment_rental_end_date",
+		"equipment_rental_return_date"
+	];
+
+	const thead22 = [
+		"No",
+		"장비명",
+		"시리얼 넘버",
+		"입고일자",
+		"납품 기관",//관리기관, 올잇메디
+		"대상자",//시행기관
+	];
+	const key22 = [
+		"No",
+		"equipment",
+		"serialNumber",
+		"date",
+		"agency",
+		"senior",
+	];
+	const content22 = [
+		{
+			No: 1,
+			equipment: "스마트약상자",
+			serialNumber: "ABCD-1",
+			date: "2022.12.02",
+			agency: (
+				<Button
+					className={"btn-small gray-btn"}
+					btnName={"선택"}
+					onClick={openModal}
+				/>
+			),
+			senior: (
+				<Button
+					className={"btn-small gray-btn"}
+					btnName={"선택"}
+					// onClick={openModal2}
+				/>
+			),
+		},
+		{
+			No: 2,
+			equipment: "스마트약상자",
+			serialNumber: "ABCD-1",
+			date: "2022.12.02",
+			agency: (<Button
+				className={"btn-small gray-btn"}
+				btnName={"선택"}
+				onClick={openModal}
+			/>),
+			senior: (
+				<Button
+					className={"btn-small gray-btn"}
+					btnName={"선택"}
+					// onClick={openModal2}
+				/>
+			),
+		},
+	];
+	const thead33 = [
+		"No",
+		"장비명",
+		"시리얼 넘버",
+		"대여일",
+		"배터리 잔량",
+		"보유기관",//관리기관, 올잇메디
+		"담당자",//시행기관
+	];
+	const key33 = [
+		"No",
+		"equipment",
+		"serialNumber",
+		"date",
+		"battery",
+		"agency",
+		"protector",
+	];
+	const content33 = [
+		{
+			No: 1,
+			equipment: "스마트약상자",
+			serialNumber: "ABCD-1",
+			date: "2022.12.02",
+			battery: "10%",
+			agency: "A복지관",
+			protector: "김복지"
+
+		},
+	];
+	/********************************** 시행기관 장비 (끝) **********************************/
+
 	const thead4 = [
 		"No",
 		"기관명",

 		},
 	];
 	const thead5 = [
-		"No",
 		"대상자",
-		"선택하기",
+		"대여일",
+		"반납예정일",
+		"선택",
 	];
 	const key5 = [
-		"No",
 		"senior",
+		"date",
 		"choice",
 	];
 	const content5 = [

 	const data = [
 		{
 			id: 1,
-			title: "장비 전체(205)",
+			title: "전체 장비" + "(" + equipmentList.length + ")",
 			description: (
 				<div>
 					<div className="flex">

 							/>
 						</div>
 					</div>
-					<Table
+					{/* <Table
 						className={"caregiver-user"}
 						head={thead1}
-						contents={content1}
+						contents={equipmentList}
 						contentKey={key1}
 						onClick={() => {
 							navigate("/EquipmentManagementSelectOne");
 						}}
-					/>
+					/> */}
+					<table class = "caregiver-user">
+						<thead>
+							<tr>
+							{thead1.map((i) => {
+								return <th>{i}</th>;
+							})}
+							</tr>
+						</thead>
+						<tbody>
+							{equipmentList.map((item, index) => {
+							return (
+								<tr key={index}>
+									<td>{equipmentList.length - index}</td>
+									{key1.map((kes) => {
+										return <td>{item[kes]}</td>
+									})}
+									<td>
+									{
+										item['senior_id'] == null
+										? <Button
+												className={"btn-small green-btn"}
+												btnName={"등록"}
+												onClick={() => seniorMatchModalOpen(item)}
+											/>
+										: <Button
+											className={"btn-small green-btn"}
+											btnName={"삭제"}
+											onClick={seniorMatchDelete}
+										/>
+									}
+									</td>
+								</tr>
+							);
+							})}
+						</tbody>
+					</table>
 				</div>
 			),
 		},
 		{
 			id: 2,
-			title: "재고(미사용) 장비(5)", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
+			title: "재고 장비" + "(" + ")", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
 			description: (
 				<div>
 					<Table
 						className={"caregiver-user"}
-						head={thead3}
-						contents={content3}
-						contentKey={key3}
+						head={thead2}
+						contents={content2}
+						contentKey={key2}
 					/>
 				</div>
 			),
 		},
 		{
 			id: 3,
-			title: "납품(내가 사용중인) 장비(200)",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
+			title: "납품 장비" + "(" + ")",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
 			description: (
 				<Table
 					className={"caregiver-user"}
-					head={thead2}
-					contents={content2}
-					contentKey={key2}
+					head={thead3}
+					contents={content3}
+					contentKey={key3}
+				/>
+			),
+		},
+
+		{
+			id: 4,
+			title: "전체 장비(시행기관)" + "(" + agencyEquipmentList.length + ")",
+			description: (
+				<div>
+					<div className="flex">
+						<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
+						<div className="btn-wrap flex-end margin-bottom ">
+							<Button
+								className={"btn-small green-btn"}
+								btnName={"LOG"}
+								onClick={logCheck}
+							/>
+							<Button
+								className={"btn-small green-btn"}
+								btnName={"등록"}
+								onClick={openModal3}
+							/>
+						</div>
+					</div>
+					{/* <Table
+						className={"caregiver-user"}
+						head={thead11}
+						contents={agencyEquipmentList}
+						contentKey={key11}
+						onClick={() => {
+							navigate("/EquipmentManagementSelectOne");
+						}}
+					/> */}
+					<table class = "caregiver-user">
+						<thead>
+							<tr>
+							{thead11.map((i) => {
+								return <th>{i}</th>;
+							})}
+							</tr>
+						</thead>
+						<tbody>
+							{agencyEquipmentList.map((item, index) => {
+							return (
+								<tr key={index}>
+									<td>{agencyEquipmentList.length - index}</td>
+									{key11.map((kes) => {
+										return <td>{item[kes]}</td>
+									})}
+									<td>
+									{
+										item['senior_id'] == null
+										? <Button
+												className={"btn-small green-btn"}
+												btnName={"등록"}
+												onClick={() => seniorMatchModalOpen(item)}
+											/>
+										: <Button
+											className={"btn-small green-btn"}
+											btnName={"삭제"}
+											onClick={seniorMatchDelete}
+										/>
+									}
+									</td>
+								</tr>
+							);
+							})}
+						</tbody>
+					</table>
+				</div>
+			),
+		},
+		{
+			id: 5,
+			title: "재고 장비(시행기관)" + "(" + ")", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
+			description: (
+				<div>
+					<Table
+						className={"caregiver-user"}
+						head={thead22}
+						contents={content22}
+						contentKey={key22}
+					/>
+				</div>
+			),
+		},
+		{
+			id: 6,
+			title: "납품 장비(시행기관)" + "(" + ")",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
+			description: (
+				<Table
+					className={"caregiver-user"}
+					head={thead33}
+					contents={content33}
+					contentKey={key33}
 				/>
 			),
 		},
 	];
-	const [index, setIndex] = React.useState(1);
+
+	//시작 탭 설정
+	const [index, setIndex] = React.useState(4);
 	return (
 		<main>
 			<Modal open={modalOpen} close={closeModal} header="납품 기관 선택">

 					</div>
 				</div>
 			</Modal>
-			<Modal open={modalOpen2} close={closeModal2} header="대상자 선택">
+			<Modal open={seniorMatchModal} close={seniorMatchModalClose} header="대상자 장비 등록">
 				<div className="board-wrap">
 					<div>
-						<Table
-							className={"caregiver-user"}
-							head={thead5}
-							contents={content5}
-							contentKey={key5}
-						/>
+						<table className={"caregiver-user"}>
+							<thead>
+								<tr>
+								{thead5.map((i) => {
+									return <th>{i}</th>;
+								})}
+								</tr>
+							</thead>
+							<tbody>
+								<tr>
+									<td>
+										<input type="text" list="senior_list" />
+										<datalist id="senior_list">
+											<option value="대상자1(ID)"></option>
+											<option value="대상자2(ID)"></option>
+											<option value="대상자3(ID)"></option>
+										</datalist>
+									</td>
+									<td>
+										<input type="date" onChange={seniorEquipmentRentalStartDateInsert}/>
+									</td>
+									<td>
+										<input type="date" onChange={seniorEquipmentRentalEndDateInsert}/>
+									</td>
+									<td>
+										<Button
+											className={"btn-small gray-btn"}
+											btnName={"선택"}
+											onClick={seniorEquipmentInsert}
+										/>
+									</td>
+								</tr>
+							</tbody>
+						</table>
 					</div>
 					<div>
 						<Button
 							className={"btn-100 green-btn"}
 							btnName={"닫기"}
-							onClick={closeModal2}
+							onClick={seniorMatchModalClose}
 						/>
 					</div>
 				</div>
 			</Modal>
-			<Modal open={modalOpen3} close={closeModal3} header="대상자 선택">
+			<Modal open={modalOpen3} close={closeModal3} header="장비 등록">
 				<div className="board-wrap">
 					<div>
 						<table className="flex70 margin-bottom">

Add a comment

Open 0
Closed 0

List

...	...	@@ -16,26 +16,40 @@
16	16	const closeModal = () => {
17	17	setModalOpen(false);
18	18	};
19		- const [modalOpen2, setModalOpen2] = React.useState(false);
20		- const openModal2 = () => {
21		- setModalOpen2(true);
22		- };
23		- const closeModal2 = () => {
24		- setModalOpen2(false);
25		- };
	19	+
26	20	const [modalOpen3, setModalOpen3] = React.useState(false);
27	21	const openModal3 = () => {
	22	+ // equipmentListData();
28	23	setModalOpen3(true);
29	24	};
30	25	const closeModal3 = () => {
31	26	setModalOpen3(false);
32	27	};
	28	+
	29	+ // 대상자 매칭 삭제
	30	+ const seniorMatchDelete = () => {
	31	+ if(confirm('등록된 대상자를 삭제하시겠습니까?') == false) {
	32	+ return;
	33	+ }
	34	+ // 대상자 매칭 삭제 함수 사용하기
	35	+ };
	36	+
33	37	const navigate = useNavigate();
34	38
35		- // 장비 목록 조회
	39	+ // 함수 실행 함수
	40	+ React.useEffect(() => {
	41	+ equipmentSelectList();
	42	+
	43	+ agencyEquipmentSelectList();
	44	+ }, [])
	45	+
	46	+
	47	+
	48	+ /******************************** 관리자 장비 (시작) ********************************/
	49	+ // 관리자 전체 장비 목록
36	50	const [equipmentList, setEquipmentList] = React.useState([]);
37	51
38		- // 장비 목록 조회 함수
	52	+ // 관리자 전체 장비 목록 조회
39	53	const equipmentSelectList = () => {
40	54	console.log('equipmentSelectList Function Run');
41	55	fetch("/equipment/equipmentSelectList.json", {
...	...	@@ -45,16 +59,23 @@
45	59	},
46	60	}).then((response) => response.json()).then((data) => {
47	61	console.log('equipmentSelectList response : ', data);
48		- // setEquipmentList(data);
	62	+ setEquipmentList(data);
49	63	}).catch((error) => {
50	64	console.log('equipmentSelectList error : ', error);
51	65	});
52	66	}
53	67
54		- // 함수 실행 함수
55		- React.useEffect(() => {
56		- equipmentSelectList();
57		- }, [])
	68	+ // 장비 목록 조회 확인
	69	+ const equipmentListData = () => {
	70	+ console.log('equipmentSelectList Function Run', equipmentList);
	71	+ console.log('equipmentSelectList Function Run', equipmentList.length);
	72	+ console.log('content1 before data: ', content1);
	73	+ for(let i = 0; i < equipmentList.length; i++) {
	74	+ content1.equipmentNo = i + 1;
	75	+ content1.equipmentName = equipmentList[i].equipment_name;
	76	+ }
	77	+ console.log('content1 after data: ', content1);
	78	+ }
58	79
59	80	const thead1 = [
60	81	"No",
...	...	@@ -62,39 +83,20 @@
62	83	"시리얼 넘버",
63	84	"입고 일자",
64	85	"상태",
65		- "보유 기관", //관리기관, 올잇메디
66		- "대상자",//시행기관
	86	+ "보유 기관",
	87	+ "대상자",
	88	+ "관리",
67	89	];
68	90	const key1 = [
69		- "equipmentNo",
70		- "equipmentName",
71		- "equipmentSerialNumber",
72		- "equipmentStockDate",
73		- "equipmentState",
74		- "equipmentAgency",
75		- "equipmentSenior",
	91	+ "equipment_name",
	92	+ "equipment_serial_number",
	93	+ "equipment_stock_date",
	94	+ "equipment_state",
	95	+ "agency_name",
	96	+ "user_name",
76	97	];
77		- const content1 = [
78		- {
79		- No: 1,
80		- equipment: "스마트약상자",
81		- serialNumber: "ABCD-1",
82		- date: "2022.12.02",
83		- use: "사용",
84		- agency: "A복지관",
85		- protector: "김복지",
86		- },
87		- {
88		- No: 2,
89		- equipment: "스마트약상자",
90		- serialNumber: "ABCD-1",
91		- date: "2022.12.02",
92		- use: "미사용",
93		- agency: "B복지관",
94		- protector: "-"
95		- },
96		- ];
97		- const thead3 = [
	98	+
	99	+ const thead2 = [
98	100	"No",
99	101	"장비명",
100	102	"시리얼 넘버",
...	...	@@ -102,7 +104,7 @@
102	104	"납품 기관",//관리기관, 올잇메디
103	105	"대상자",//시행기관
104	106	];
105		- const key3 = [
	107	+ const key2 = [
106	108	"No",
107	109	"equipment",
108	110	"serialNumber",
...	...	@@ -110,7 +112,7 @@
110	112	"agency",
111	113	"senior",
112	114	];
113		- const content3 = [
	115	+ const content2 = [
114	116	{
115	117	No: 1,
116	118	equipment: "스마트약상자",
...	...	@@ -127,7 +129,7 @@
127	129	<Button
128	130	className={"btn-small gray-btn"}
129	131	btnName={"선택"}
130		- onClick={openModal2}
	132	+ // onClick={openModal2}
131	133	/>
132	134	),
133	135	},
...	...	@@ -145,12 +147,12 @@
145	147	<Button
146	148	className={"btn-small gray-btn"}
147	149	btnName={"선택"}
148		- onClick={openModal2}
	150	+ // onClick={openModal2}
149	151	/>
150	152	),
151	153	},
152	154	];
153		- const thead2 = [
	155	+ const thead3 = [
154	156	"No",
155	157	"장비명",
156	158	"시리얼 넘버",
...	...	@@ -159,7 +161,7 @@
159	161	"보유기관",//관리기관, 올잇메디
160	162	"담당자",//시행기관
161	163	];
162		- const key2 = [
	164	+ const key3 = [
163	165	"No",
164	166	"equipment",
165	167	"serialNumber",
...	...	@@ -168,7 +170,7 @@
168	170	"agency",
169	171	"protector",
170	172	];
171		- const content2 = [
	173	+ const content3 = [
172	174	{
173	175	No: 1,
174	176	equipment: "스마트약상자",
...	...	@@ -180,6 +182,216 @@
180	182
181	183	},
182	184	];
	185	+ /******************************** 관리자 장비 (끝) ********************************/
	186	+
	187	+
	188	+
	189	+ /******************************** 시행기관 장비 (시작) ********************************/
	190	+ //로그 확인
	191	+ const logCheck = () => {
	192	+ console.log('agencyEquipmentList - change: ', agencyEquipmentList);
	193	+ };
	194	+
	195	+ // 시행기관 전체 장비 목록
	196	+ const [agencyEquipmentList, setAgencyEquipmentList] = React.useState([]);
	197	+
	198	+ // 대상자 장비 등록 모달창
	199	+ const [seniorMatchModal, setSeniorMatchModal] = React.useState(false);
	200	+
	201	+ // 대상자 장비
	202	+ const [seniorEquipment, setSeniorEquipment] = React.useState({});
	203	+
	204	+ // 대상자 장비 등록 모달창 열기
	205	+ const seniorMatchModalOpen = (item) => {
	206	+ setSeniorEquipment(item); // 선택한 장비 데이터 저장
	207	+ setSeniorMatchModal(true);
	208	+ };
	209	+ // 대상자 장비 등록 모달창 닫기
	210	+ const seniorMatchModalClose = () => {
	211	+ setSeniorMatchModal(false);
	212	+ };
	213	+
	214	+ // 대상자 장비 등록 - 대상자
	215	+ const seniorEquipmentSeniorInsert = (e) => {
	216	+ // 원본 데이터 복사 및 수정
	217	+ let data = {
	218	+ ...seniorEquipment,
	219	+ senior_id: e.target.value,
	220	+ user_name: null
	221	+ }
	222	+ // 복사 데이터를 원본 데이터에 덮어쓰기
	223	+ setSeniorEquipment(data);
	224	+ };
	225	+
	226	+ // 대상자 장비 등록 - 대여일
	227	+ const seniorEquipmentRentalStartDateInsert = (e) => {
	228	+ // 원본 데이터 복사 및 수정
	229	+ let data = {
	230	+ ...seniorEquipment,
	231	+ equipment_rental_start_date: e.target.value
	232	+ }
	233	+ // 복사 데이터를 원본 데이터에 덮어쓰기
	234	+ setSeniorEquipment(data);
	235	+ };
	236	+
	237	+ // 대상자 장비 등록 - 반납예정일
	238	+ const seniorEquipmentRentalEndDateInsert = (e) => {
	239	+ // 원본 데이터 복사 및 수정
	240	+ let data = {
	241	+ ...seniorEquipment,
	242	+ equipment_rental_end_date: e.target.value
	243	+ }
	244	+ // 복사 데이터를 원본 데이터에 덮어쓰기
	245	+ setSeniorEquipment(data);
	246	+ };
	247	+
	248	+ // 시행기관 전체 장비 목록 조회
	249	+ const agencyEquipmentSelectList = () => {
	250	+ console.log('agencyEquipmentSelectList Function Run');
	251	+ fetch("/equipment/agencyEquipmentSelectList.json", {
	252	+ method: "POST",
	253	+ headers: {
	254	+ 'Content-Type': 'application/json; charset=UTF-8'
	255	+ },
	256	+ body: JSON.stringify({
	257	+ agency_id: 'AGENCY01',
	258	+ }),
	259	+ }).then((response) => response.json()).then((data) => {
	260	+ console.log('agencyEquipmentSelectList response : ', data);
	261	+ setAgencyEquipmentList(data);
	262	+ }).catch((error) => {
	263	+ console.log('agencyEquipmentSelectList error : ', error);
	264	+ });
	265	+ }
	266	+
	267	+ // 대상자 장비 등록
	268	+ const seniorEquipmentInsert = () => {
	269	+ console.log('seniorEquipmentInsert Function Run');
	270	+ fetch("/equipment/seniorEquipmentInsert.json", {
	271	+ method: "POST",
	272	+ headers: {
	273	+ 'Content-Type': 'application/json; charset=UTF-8'
	274	+ },
	275	+ body: JSON.stringify({
	276	+ agency_id: 'AGENCY01',
	277	+ }),
	278	+ }).then((response) => response.json()).then((data) => {
	279	+ console.log('seniorEquipmentInsert response : ', data);
	280	+ setSeniorEquipment(data);
	281	+ }).catch((error) => {
	282	+ console.log('seniorEquipmentInsert error : ', error);
	283	+ });
	284	+ }
	285	+
	286	+ const thead11 = [
	287	+ "No",
	288	+ "모델 명",
	289	+ "시리얼 넘버",
	290	+ "상태",
	291	+ "대상자",
	292	+ "대여일",
	293	+ "반납예정일",
	294	+ "반납일",
	295	+ "관리"
	296	+ ];
	297	+ const key11 = [
	298	+ "equipment_name",
	299	+ "equipment_serial_number",
	300	+ "equipment_state",
	301	+ "user_name",
	302	+ "equipment_rental_start_date",
	303	+ "equipment_rental_end_date",
	304	+ "equipment_rental_return_date"
	305	+ ];
	306	+
	307	+ const thead22 = [
	308	+ "No",
	309	+ "장비명",
	310	+ "시리얼 넘버",
	311	+ "입고일자",
	312	+ "납품 기관",//관리기관, 올잇메디
	313	+ "대상자",//시행기관
	314	+ ];
	315	+ const key22 = [
	316	+ "No",
	317	+ "equipment",
	318	+ "serialNumber",
	319	+ "date",
	320	+ "agency",
	321	+ "senior",
	322	+ ];
	323	+ const content22 = [
	324	+ {
	325	+ No: 1,
	326	+ equipment: "스마트약상자",
	327	+ serialNumber: "ABCD-1",
	328	+ date: "2022.12.02",
	329	+ agency: (
	330	+ <Button
	331	+ className={"btn-small gray-btn"}
	332	+ btnName={"선택"}
	333	+ onClick={openModal}
	334	+ />
	335	+ ),
	336	+ senior: (
	337	+ <Button
	338	+ className={"btn-small gray-btn"}
	339	+ btnName={"선택"}
	340	+ // onClick={openModal2}
	341	+ />
	342	+ ),
	343	+ },
	344	+ {
	345	+ No: 2,
	346	+ equipment: "스마트약상자",
	347	+ serialNumber: "ABCD-1",
	348	+ date: "2022.12.02",
	349	+ agency: (<Button
	350	+ className={"btn-small gray-btn"}
	351	+ btnName={"선택"}
	352	+ onClick={openModal}
	353	+ />),
	354	+ senior: (
	355	+ <Button
	356	+ className={"btn-small gray-btn"}
	357	+ btnName={"선택"}
	358	+ // onClick={openModal2}
	359	+ />
	360	+ ),
	361	+ },
	362	+ ];
	363	+ const thead33 = [
	364	+ "No",
	365	+ "장비명",
	366	+ "시리얼 넘버",
	367	+ "대여일",
	368	+ "배터리 잔량",
	369	+ "보유기관",//관리기관, 올잇메디
	370	+ "담당자",//시행기관
	371	+ ];
	372	+ const key33 = [
	373	+ "No",
	374	+ "equipment",
	375	+ "serialNumber",
	376	+ "date",
	377	+ "battery",
	378	+ "agency",
	379	+ "protector",
	380	+ ];
	381	+ const content33 = [
	382	+ {
	383	+ No: 1,
	384	+ equipment: "스마트약상자",
	385	+ serialNumber: "ABCD-1",
	386	+ date: "2022.12.02",
	387	+ battery: "10%",
	388	+ agency: "A복지관",
	389	+ protector: "김복지"
	390	+
	391	+ },
	392	+ ];
	393	+ /******************************** 시행기관 장비 (끝) ********************************/
	394	+
183	395	const thead4 = [
184	396	"No",
185	397	"기관명",
...	...	@@ -207,13 +419,14 @@
207	419	},
208	420	];
209	421	const thead5 = [
210		- "No",
211	422	"대상자",
212		- "선택하기",
	423	+ "대여일",
	424	+ "반납예정일",
	425	+ "선택",
213	426	];
214	427	const key5 = [
215		- "No",
216	428	"senior",
	429	+ "date",
217	430	"choice",
218	431	];
219	432	const content5 = [
...	...	@@ -243,7 +456,7 @@
243	456	const data = [
244	457	{
245	458	id: 1,
246		- title: "장비 전체(205)",
	459	+ title: "전체 장비" + "(" + equipmentList.length + ")",
247	460	description: (
248	461	<div>
249	462	<div className="flex">
...	...	@@ -256,46 +469,179 @@
256	469	/>
257	470	</div>
258	471	</div>
259		- <Table
	472	+ {/* <Table
260	473	className={"caregiver-user"}
261	474	head={thead1}
262		- contents={content1}
	475	+ contents={equipmentList}
263	476	contentKey={key1}
264	477	onClick={() => {
265	478	navigate("/EquipmentManagementSelectOne");
266	479	}}
267		- />
	480	+ /> */}
	481	+ <table class = "caregiver-user">
	482	+ <thead>
	483	+ <tr>
	484	+ {thead1.map((i) => {
	485	+ return <th>{i}</th>;
	486	+ })}
	487	+ </tr>
	488	+ </thead>
	489	+ <tbody>
	490	+ {equipmentList.map((item, index) => {
	491	+ return (
	492	+ <tr key={index}>
	493	+ <td>{equipmentList.length - index}</td>
	494	+ {key1.map((kes) => {
	495	+ return <td>{item[kes]}</td>
	496	+ })}
	497	+ <td>
	498	+ {
	499	+ item['senior_id'] == null
	500	+ ? <Button
	501	+ className={"btn-small green-btn"}
	502	+ btnName={"등록"}
	503	+ onClick={() => seniorMatchModalOpen(item)}
	504	+ />
	505	+ : <Button
	506	+ className={"btn-small green-btn"}
	507	+ btnName={"삭제"}
	508	+ onClick={seniorMatchDelete}
	509	+ />
	510	+ }
	511	+ </td>
	512	+ </tr>
	513	+ );
	514	+ })}
	515	+ </tbody>
	516	+ </table>
268	517	</div>
269	518	),
270	519	},
271	520	{
272	521	id: 2,
273		- title: "재고(미사용) 장비(5)", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
	522	+ title: "재고 장비" + "(" + ")", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
274	523	description: (
275	524	<div>
276	525	<Table
277	526	className={"caregiver-user"}
278		- head={thead3}
279		- contents={content3}
280		- contentKey={key3}
	527	+ head={thead2}
	528	+ contents={content2}
	529	+ contentKey={key2}
281	530	/>
282	531	</div>
283	532	),
284	533	},
285	534	{
286	535	id: 3,
287		- title: "납품(내가 사용중인) 장비(200)",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
	536	+ title: "납품 장비" + "(" + ")",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
288	537	description: (
289	538	<Table
290	539	className={"caregiver-user"}
291		- head={thead2}
292		- contents={content2}
293		- contentKey={key2}
	540	+ head={thead3}
	541	+ contents={content3}
	542	+ contentKey={key3}
	543	+ />
	544	+ ),
	545	+ },
	546	+
	547	+ {
	548	+ id: 4,
	549	+ title: "전체 장비(시행기관)" + "(" + agencyEquipmentList.length + ")",
	550	+ description: (
	551	+ <div>
	552	+ <div className="flex">
	553	+ <SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
	554	+ <div className="btn-wrap flex-end margin-bottom ">
	555	+ <Button
	556	+ className={"btn-small green-btn"}
	557	+ btnName={"LOG"}
	558	+ onClick={logCheck}
	559	+ />
	560	+ <Button
	561	+ className={"btn-small green-btn"}
	562	+ btnName={"등록"}
	563	+ onClick={openModal3}
	564	+ />
	565	+ </div>
	566	+ </div>
	567	+ {/* <Table
	568	+ className={"caregiver-user"}
	569	+ head={thead11}
	570	+ contents={agencyEquipmentList}
	571	+ contentKey={key11}
	572	+ onClick={() => {
	573	+ navigate("/EquipmentManagementSelectOne");
	574	+ }}
	575	+ /> */}
	576	+ <table class = "caregiver-user">
	577	+ <thead>
	578	+ <tr>
	579	+ {thead11.map((i) => {
	580	+ return <th>{i}</th>;
	581	+ })}
	582	+ </tr>
	583	+ </thead>
	584	+ <tbody>
	585	+ {agencyEquipmentList.map((item, index) => {
	586	+ return (
	587	+ <tr key={index}>
	588	+ <td>{agencyEquipmentList.length - index}</td>
	589	+ {key11.map((kes) => {
	590	+ return <td>{item[kes]}</td>
	591	+ })}
	592	+ <td>
	593	+ {
	594	+ item['senior_id'] == null
	595	+ ? <Button
	596	+ className={"btn-small green-btn"}
	597	+ btnName={"등록"}
	598	+ onClick={() => seniorMatchModalOpen(item)}
	599	+ />
	600	+ : <Button
	601	+ className={"btn-small green-btn"}
	602	+ btnName={"삭제"}
	603	+ onClick={seniorMatchDelete}
	604	+ />
	605	+ }
	606	+ </td>
	607	+ </tr>
	608	+ );
	609	+ })}
	610	+ </tbody>
	611	+ </table>
	612	+ </div>
	613	+ ),
	614	+ },
	615	+ {
	616	+ id: 5,
	617	+ title: "재고 장비(시행기관)" + "(" + ")", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
	618	+ description: (
	619	+ <div>
	620	+ <Table
	621	+ className={"caregiver-user"}
	622	+ head={thead22}
	623	+ contents={content22}
	624	+ contentKey={key22}
	625	+ />
	626	+ </div>
	627	+ ),
	628	+ },
	629	+ {
	630	+ id: 6,
	631	+ title: "납품 장비(시행기관)" + "(" + ")",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
	632	+ description: (
	633	+ <Table
	634	+ className={"caregiver-user"}
	635	+ head={thead33}
	636	+ contents={content33}
	637	+ contentKey={key33}
294	638	/>
295	639	),
296	640	},
297	641	];
298		- const [index, setIndex] = React.useState(1);
	642	+
	643	+ //시작 탭 설정
	644	+ const [index, setIndex] = React.useState(4);
299	645	return (
300	646	<main>
301	647	<Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
...	...	@@ -317,26 +663,54 @@
317	663	</div>
318	664	</div>
319	665	</Modal>
320		- <Modal open={modalOpen2} close={closeModal2} header="대상자 선택">
	666	+ <Modal open={seniorMatchModal} close={seniorMatchModalClose} header="대상자 장비 등록">
321	667	<div className="board-wrap">
322	668	<div>
323		- <Table
324		- className={"caregiver-user"}
325		- head={thead5}
326		- contents={content5}
327		- contentKey={key5}
328		- />
	669	+ <table className={"caregiver-user"}>
	670	+ <thead>
	671	+ <tr>
	672	+ {thead5.map((i) => {
	673	+ return <th>{i}</th>;
	674	+ })}
	675	+ </tr>
	676	+ </thead>
	677	+ <tbody>
	678	+ <tr>
	679	+ <td>
	680	+ <input type="text" list="senior_list" />
	681	+ <datalist id="senior_list">
	682	+ <option value="대상자1(ID)"></option>
	683	+ <option value="대상자2(ID)"></option>
	684	+ <option value="대상자3(ID)"></option>
	685	+ </datalist>
	686	+ </td>
	687	+ <td>
	688	+ <input type="date" onChange={seniorEquipmentRentalStartDateInsert}/>
	689	+ </td>
	690	+ <td>
	691	+ <input type="date" onChange={seniorEquipmentRentalEndDateInsert}/>
	692	+ </td>
	693	+ <td>
	694	+ <Button
	695	+ className={"btn-small gray-btn"}
	696	+ btnName={"선택"}
	697	+ onClick={seniorEquipmentInsert}
	698	+ />
	699	+ </td>
	700	+ </tr>
	701	+ </tbody>
	702	+ </table>
329	703	</div>
330	704	<div>
331	705	<Button
332	706	className={"btn-100 green-btn"}
333	707	btnName={"닫기"}
334		- onClick={closeModal2}
	708	+ onClick={seniorMatchModalClose}
335	709	/>
336	710	</div>
337	711	</div>
338	712	</Modal>
339		- <Modal open={modalOpen3} close={closeModal3} header="대상자 선택">
	713	+ <Modal open={modalOpen3} close={closeModal3} header="장비 등록">
340	714	<div className="board-wrap">
341	715	<div>
342	716	<table className="flex70 margin-bottom">

Delete comment