import React from "react"; import Table from "../../component/Table.jsx"; import Button from "../../component/Button.jsx"; import SubTitle from "../../component/SubTitle.jsx"; import Modal from "../../component/Modal.jsx"; import Category from "../../component/Category.jsx"; import { useNavigate } from "react-router"; export default function EquipmentManagementSelect() { const [modalOpen, setModalOpen] = React.useState(false); const openModal = () => { setModalOpen(true); }; 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 = () => { setModalOpen3(true); }; const closeModal3 = () => { setModalOpen3(false); }; const navigate = useNavigate(); // 장비 목록 조회 const [equipmentList, setEquipmentList] = React.useState([]); // 장비 목록 조회 함수 const equipmentSelectList = () => { console.log('equipmentSelectList Function Run'); fetch("/equipment/equipmentSelectList.json", { method: "POST", headers: { 'Content-Type': 'application/json; charset=UTF-8' }, }).then((response) => response.json()).then((data) => { console.log('equipmentSelectList response : ', data); // setEquipmentList(data); }).catch((error) => { console.log('equipmentSelectList error : ', error); }); } // 함수 실행 함수 React.useEffect(() => { equipmentSelectList(); }, []) const thead1 = [ "No", "모델 명", "시리얼 넘버", "입고 일자", "상태", "보유 기관", //관리기관, 올잇메디 "대상자",//시행기관 ]; const key1 = [ "equipmentNo", "equipmentName", "equipmentSerialNumber", "equipmentStockDate", "equipmentState", "equipmentAgency", "equipmentSenior", ]; 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 = [ "No", "장비명", "시리얼 넘버", "입고일자", "납품 기관",//관리기관, 올잇메디 "대상자",//시행기관 ]; const key3 = [ "No", "equipment", "serialNumber", "date", "agency", "senior", ]; const content3 = [ { 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 thead2 = [ "No", "장비명", "시리얼 넘버", "대여일", "배터리 잔량", "보유기관",//관리기관, 올잇메디 "담당자",//시행기관 ]; const key2 = [ "No", "equipment", "serialNumber", "date", "battery", "agency", "protector", ]; const content2 = [ { No: 1, equipment: "스마트약상자", serialNumber: "ABCD-1", date: "2022.12.02", battery: "10%", agency: "A복지관", protector: "김복지" }, ]; const thead4 = [ "No", "기관명", "선택하기", ]; const key4 = [ "No", "agency", "choice", ]; const content4 = [ { No: 1, agency: ( <div> <Category /> </div> ) , choice: (<Button className={"btn-small gray-btn"} btnName={"선택"} />) }, ]; const thead5 = [ "No", "대상자", "선택하기", ]; const key5 = [ "No", "senior", "choice", ]; const content5 = [ { No: 1, senior: ( <div> <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> </div> ) , choice: (<Button className={"btn-small gray-btn"} btnName={"선택"} />) }, ]; const data = [ { id: 1, title: "장비 전체(205)", description: ( <div> <div className="flex"> <SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} /> <div className="btn-wrap flex-end margin-bottom "> <Button className={"btn-small green-btn"} btnName={"등록"} onClick={openModal3} /> </div> </div> <Table className={"caregiver-user"} head={thead1} contents={content1} contentKey={key1} onClick={() => { navigate("/EquipmentManagementSelectOne"); }} /> </div> ), }, { id: 2, title: "재고(미사용) 장비(5)", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함 description: ( <div> <Table className={"caregiver-user"} head={thead3} contents={content3} contentKey={key3} /> </div> ), }, { id: 3, title: "납품(내가 사용중인) 장비(200)",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함 description: ( <Table className={"caregiver-user"} head={thead2} contents={content2} contentKey={key2} /> ), }, ]; const [index, setIndex] = React.useState(1); return ( <main> <Modal open={modalOpen} close={closeModal} header="납품 기관 선택"> <div className="board-wrap"> <div> <Table className={"caregiver-user"} head={thead4} contents={content4} contentKey={key4} /> </div> <div> <Button className={"btn-100 green-btn"} btnName={"닫기"} onClick={closeModal} /> </div> </div> </Modal> <Modal open={modalOpen2} close={closeModal2} header="대상자 선택"> <div className="board-wrap"> <div> <Table className={"caregiver-user"} head={thead5} contents={content5} contentKey={key5} /> </div> <div> <Button className={"btn-100 green-btn"} btnName={"닫기"} onClick={closeModal2} /> </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> <Button className={"btn-100 green-btn"} btnName={"저장"} onClick={closeModal3} /> </div> </div> </Modal> <div className="tab-container"> <ul className="tab-menu"> {data.map((item) => ( <li key={item.id} className={index === item.id ? "active" : null} onClick={() => setIndex(item.id)} > {item.title} </li> ))} </ul> <div className="content-wrap"> <div className="search-management flex-end margin-bottom2"> <select name="management-agency"> <option value="기관전체">기관전체</option> <option value="대구보훈병원">복지재단1</option> <option value="군위군청">복지재단2</option> <option value="군위군청">복지재단3</option> </select> <select> <option value="이름">이름</option> <option value="아이디">아이디</option> </select> <input type="text" /> <Button className={"btn-small gray-btn"} btnName={"검색"} onClick={() => navigate("")} /> </div> <ul className="tab-content"> {data .filter((item) => index === item.id) .map((item) => ( <li>{item.description}</li> ))} </ul> </div> </div> </main> ); }