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 [modalOpen3, setModalOpen3] = React.useState(false); const openModal3 = () => { // equipmentListData(); setModalOpen3(true); }; const closeModal3 = () => { setModalOpen3(false); }; // 대상자 매칭 반납 const seniorMatchDelete = () => { if (confirm('아니다') == false) { return; } // 대상자 매칭 반납 함수 사용하기 }; const navigate = useNavigate(); // 대상자 목록 조회 const seniorSelectList = () => { console.log('seniorSelectList Function Run'); fetch("/user/userSeleteList.json", { method: "POST", headers: { 'Content-Type': 'application/json; charset=UTF-8' }, body: JSON.stringify({ user_code: 'SENIOR01' }) }).then((response) => response.json()).then((data) => { console.log('seniorSelectList response : ', data); setSeniorList(data); }).catch((error) => { console.log('seniorSelectList error : ', error); }); } // 담당자 목록 조회 const workerSelectList = () => { console.log('workerSelectList Function Run'); fetch("/user/userSeleteList.json", { method: "POST", headers: { 'Content-Type': 'application/json; charset=UTF-8' }, body: JSON.stringify({ user_code: 'WORKER01' }) }).then((response) => response.json()).then((data) => { console.log('workerSelectList response : ', data); setWorkerList(data); }).catch((error) => { console.log('workerSelectList error : ', error); }); } /********************************** 관리자 장비 (시작) **********************************/ // 관리자 전체 장비 목록 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' }, body: JSON.stringify({}) }).then((response) => response.json()).then((data) => { console.log('equipmentSelectList response : ', data); setEquipmentList(data); }).catch((error) => { console.log('equipmentSelectList error : ', error); }); } const thead1 = [ "No", "모델 명", "시리얼 넘버", "입고 일자", "상태", "보유 기관", "대상자", "관리", ]; const key1 = [ "equipment_name", "equipment_serial_number", "equipment_stock_date", "equipment_state", "agency_name", "senior_name", ]; const thead2 = [ "No", "장비명", "시리얼 넘버", "입고일자", "납품 기관",//관리기관, 올잇메디 "대상자",//시행기관 ]; const key2 = [ "No", "equipment", "serialNumber", "date", "agency", "senior", ]; const content2 = [ { 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 thead3 = [ "No", "장비명", "시리얼 넘버", "대여일", "배터리 잔량", "보유기관",//관리기관, 올잇메디 "담당자",//시행기관 ]; const key3 = [ "No", "equipment", "serialNumber", "date", "battery", "agency", "protector", ]; const content3 = [ { No: 1, equipment: "스마트약상자", serialNumber: "ABCD-1", date: "2022.12.02", battery: "10%", agency: "A복지관", protector: "김복지" }, ]; /********************************** 관리자 장비 (끝) **********************************/ /********************************** 시행기관 장비 (시작) **********************************/ //로그 확인 const logCheck = () => { console.log('seniorList - change: ', seniorList); }; // 시행기관 전체 장비 목록 const [agencyEquipmentList, setAgencyEquipmentList] = React.useState([]); // 시행기관 대상자 장비 목록 const [agencySeniorEquipmentList, setAgencySeniorEquipmentList] = React.useState([]); // 시행기관 재고 장비 목록 const [agencyStockEquipmentList, setAgencyStockEquipmentList] = React.useState([]); // 선택한 대상자 장비 const [seniorEquipment, setSeniorEquipment] = React.useState({}); // 대상자 장비 등록 모달창 const [seniorMatchInsertModal, setSeniorMatchInsertModal] = React.useState(false); // 대상자 장비 반납 모달창 const [seniorMatchReturnModal, setSeniorMatchReturnModal] = React.useState(false); // 대상자 목록 const [seniorList, setSeniorList] = React.useState([]); // 담당자 목록 const [workerList, setWorkerList] = React.useState([]); // 대상자 장비 등록 모달창 열기 const seniorMatchInsertModalOpen = (item) => { setSeniorEquipment(item); // 선택한 장비 데이터 저장 setSeniorMatchInsertModal(true); }; // 대상자 장비 등록 모달창 닫기 const seniorMatchInsertModalClose = () => { setSeniorMatchInsertModal(false); }; // 대상자 장비 등록 - 대상자 const seniorEquipmentSeniorInsert = (e) => { console.log("senior: ", e.target.value); // // Name 속성 // const userName = e.target.value.split('(')[0].trim(); // // ID 속성 // const second = e.target.value.split('(')[1]; // ')' 자르기 전 // const userId = second.substr(0, second.length-1); // console.log("senior id: ", userId); // console.log("senior name: ", userName); // 원본 데이터 복사 및 수정 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 seniorMatchReturnModalOpen = (item) => { setSeniorEquipment(item); // 선택한 장비 데이터 저장 setSeniorMatchReturnModal(true); }; // 대상자 장비 반납 모달창 닫기 const seniorMatchReturnModalClose = () => { setSeniorMatchReturnModal(false); }; // 대상자 장비 - 반납일 const seniorEquipmentRentalReturnDateInsert = (e) => { console.log('@@@', e.target.value); // 원본 데이터 복사 및 수정 let data = { ...seniorEquipment, equipment_rental_return_date: e.target.value } // 복사 데이터를 원본 데이터에 덮어쓰기 setSeniorEquipment(data); }; // 대상자 장비 - 반납 담당자 const seniorEquipmentReturnUserIdInsert = (e) => { console.log('@@@@@', e.target.value); // 원본 데이터 복사 및 수정 let data = { ...seniorEquipment, return_user_id: e.target.value } // 복사 데이터를 원본 데이터에 덮어쓰기 setSeniorEquipment(data); }; // 시행기관 전체 장비 목록 조회 const agencyEquipmentSelectList = () => { console.log('agencyEquipmentSelectList Function Run'); fetch("/equipment/equipmentSelectList.json", { method: "POST", headers: { 'Content-Type': 'application/json; charset=UTF-8' }, body: JSON.stringify({ agency_id: 'AGENCY01', searchAll: true }), }).then((response) => response.json()).then((data) => { console.log('agencyEquipmentSelectList response : ', data); setAgencyEquipmentList(data); }).catch((error) => { console.log('agencyEquipmentSelectList error : ', error); }); } // 시행기관 대상자 장비 목록 조회 const agencySeniorEquipmentSelectList = () => { console.log('agencySeniorEquipmentSelectList Function Run'); fetch("/equipment/equipmentSelectList.json", { method: "POST", headers: { 'Content-Type': 'application/json; charset=UTF-8' }, body: JSON.stringify({ agency_id: 'AGENCY01', seniorCheck: true }), }).then((response) => response.json()).then((data) => { console.log('agencySeniorEquipmentSelectList response : ', data); setAgencySeniorEquipmentList(data); }).catch((error) => { console.log('agencySeniorEquipmentSelectList error : ', error); }); } // 시행기관 재고 장비 목록 조회 const agencyStockEquipmentSelectList = () => { console.log('agencyStockEquipmentList Function Run'); fetch("/equipment/equipmentSelectList.json", { method: "POST", headers: { 'Content-Type': 'application/json; charset=UTF-8' }, body: JSON.stringify({ agency_id: 'AGENCY01', seniorCheck: false }), }).then((response) => response.json()).then((data) => { console.log('agencyStockEquipmentList response : ', data); setAgencyStockEquipmentList(data); }).catch((error) => { console.log('agencyStockEquipmentList error : ', error); }); } // 대상자 장비 등록 const seniorEquipmentInsert = () => { console.log('seniorEquipmentInsert Function Run'); // 대상자 아이디 유효성 검사 let check = 0; for (let i = 0; i < seniorList.length; i++) { // 입력한 데이터가 대상자 목록에 있을 경우 if (seniorList[i]['user_id'] == seniorEquipment['senior_id']) { console.log('success: ', seniorList[i]['user_id']); // 원본 데이터 복사 및 수정 let data = { ...seniorEquipment, user_name: seniorList[i]['user_name'] } // 복사 데이터를 원본 데이터에 덮어쓰기 setSeniorEquipment(data); check = 1; } } // 입력한 데이터가 대상자 목록에 없을 경우 if (check != 1) { console.log('fail: ', seniorList, seniorEquipment['senior_id']); alert('존재하지 않는 대상자입니다.'); return; } fetch("/equipment/seniorEquipmentInsert.json", { method: "POST", headers: { 'Content-Type': 'application/json; charset=UTF-8' }, body: JSON.stringify(seniorEquipment), }).then((response) => response.json()).then((data) => { console.log('seniorEquipmentInsert response : ', data); // 대상자 장비 데이터 초기화 setSeniorEquipment({}); // 장비 목록 조회 agencyEquipmentSelectList(); agencySeniorEquipmentSelectList(); agencyStockEquipmentSelectList(); alert('등록이 완료됐습니다.'); }).catch((error) => { console.log('seniorEquipmentInsert error : ', error); alert('등록에 실패했습니다.'); }); } // 대상자 장비 반납 const seniorEquipmentReturn = () => { console.log('seniorEquipmentReturn Function Run'); // 담당자 아이디 유효성 검사 let check = 0; for (let i = 0; i < workerList.length; i++) { // 입력한 데이터가 담당자 목록에 있을 경우 if (workerList[i]['user_id'] == seniorEquipment['return_user_id']) { console.log('success: ', workerList[i]['user_id']); check = 1; } } // 입력한 데이터가 담당자 목록에 없을 경우 if (check != 1) { console.log('fail: ', workerList, seniorEquipment['return_user_id']); alert('존재하지 않는 담당자입니다.'); return; } fetch("/equipment/seniorEquipmentReturn.json", { method: "POST", headers: { 'Content-Type': 'application/json; charset=UTF-8' }, body: JSON.stringify(seniorEquipment), }).then((response) => response.json()).then((data) => { console.log('seniorEquipmentReturn response : ', data); // 대상자 장비 데이터 초기화 setSeniorEquipment({}); // 장비 목록 조회 agencyEquipmentSelectList(); agencySeniorEquipmentSelectList(); agencyStockEquipmentSelectList(); alert('반납이 완료됐습니다.'); }).catch((error) => { console.log('seniorEquipmentReturn error : ', error); alert('반납에 실패했습니다.'); }); } // 시행기관 전체 장비 thead, key const thead11 = [ "No", "모델 명", "시리얼 넘버", "기기 상태", "대여 상태", "대상자 관리", ]; const key11 = [ "equipment_name", "equipment_serial_number", "equipment_state", "equipment_rental_state", ]; // 시행기관 대상자 장비 thead, key const thead22 = [ "No", "모델 명", "시리얼 넘버", "기기 상태", "대상자", "대여일", "반납예정일", "대상자 관리", ]; const key22 = [ "equipment_name", "equipment_serial_number", "equipment_state", "senior_name", "equipment_rental_start_date", "equipment_rental_end_date", ]; // 시행기관 재고 장비 thead, key const thead33 = [ "No", "모델 명", "시리얼 넘버", "기기 상태", "대상자 관리", ]; const key33 = [ "equipment_name", "equipment_serial_number", "equipment_state", ]; // 장비 대상자 등록 모달창 thead const thead44 = [ "대상자", "대여일", "반납예정일", "선택", ]; // 장비 대상자 반납 모달창 thead const thead55 = [ "반납일", "반납 담당자", "선택", ]; // 마운트 시 실행 함수 React.useEffect(() => { seniorSelectList(); workerSelectList(); //관리자 equipmentSelectList(); //시행기관 agencyEquipmentSelectList(); agencySeniorEquipmentSelectList(); agencyStockEquipmentSelectList(); }, []) /********************************** 시행기관 장비 (끝) **********************************/ // 장비 납품 모달창 thead, key 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 data = [ { id: 1, title: "전체 장비" + "(" + equipmentList.length + ")", 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={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={() => seniorMatchInsertModalOpen(item)} /> : <Button className={"btn-small green-btn"} btnName={"반납"} onClick={seniorMatchDelete} /> } </td> </tr> ); })} </tbody> </table> </div> ), }, { id: 2, title: "재고 장비" + "(" + ")", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함 description: ( <div> <Table className={"caregiver-user"} head={thead2} contents={content2} contentKey={key2} /> </div> ), }, { id: 3, title: "납품 장비" + "(" + ")",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함 description: ( <Table className={"caregiver-user"} 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} /> </div> </div> <table class="caregiver-user"> <thead> <tr> {thead11.map((i) => { return <th>{i}</th>; })} </tr> </thead> <tbody> {agencyEquipmentList.map((item, index) => { if(item) return ( <tr key={index}> <td>{agencyEquipmentList.length - index}</td> {key11.map((kes) => { return <td>{item[kes]}</td> })} <td> { item['equipment_rental_state'] == false ? <Button className={"btn-small green-btn"} btnName={"등록"} onClick={() => seniorMatchInsertModalOpen(item)} /> : <Button className={"btn-small green-btn"} btnName={"반납"} onClick={() => seniorMatchReturnModalOpen(item)} /> } </td> </tr> ); })} </tbody> </table> </div> ), }, { id: 5, title: "대상자 장비(시행기관)" + "(" + agencySeniorEquipmentList.length + ")", description: ( <div> <div className="flex"> <SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} /> </div> <table class="caregiver-user"> <thead> <tr> {thead22.map((i) => { return <th>{i}</th>; })} </tr> </thead> <tbody> {agencySeniorEquipmentList.map((item, index) => { return ( <tr key={index}> <td>{agencySeniorEquipmentList.length - index}</td> {key22.map((kes) => { return <td>{item[kes]}</td> })} <td> { <Button className={"btn-small green-btn"} btnName={"반납"} onClick={() => seniorMatchReturnModalOpen(item)} /> } </td> </tr> ); })} </tbody> </table> </div> ), }, { id: 6, title: "재고 장비(시행기관)" + "(" + agencyStockEquipmentList.length + ")", description: ( <div> <div className="flex"> <SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} /> </div> <table class="caregiver-user"> <thead> <tr> {thead33.map((i) => { return <th>{i}</th>; })} </tr> </thead> <tbody> {agencyStockEquipmentList.map((item, index) => { return ( <tr key={index}> <td>{agencyStockEquipmentList.length - index}</td> {key33.map((kes) => { return <td>{item[kes]}</td> })} <td> { <Button className={"btn-small green-btn"} btnName={"등록"} onClick={() => seniorMatchInsertModalOpen(item)} /> } </td> </tr> ); })} </tbody> </table> </div> ), }, ]; //시작 탭 설정 const [index, setIndex] = React.useState(4); 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={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> <Modal open={seniorMatchInsertModal} close={seniorMatchInsertModalClose} header="대상자 장비 등록"> <div className="board-wrap"> <div> <table className={"caregiver-user"}> <thead> <tr> {thead44.map((i) => { return <th>{i}</th>; })} </tr> </thead> <tbody> <tr> <td> <input type="text" list="senior_list" placeholder="대상자를 입력해 주세요" onChange={seniorEquipmentSeniorInsert} /> <datalist id="senior_list"> {seniorList.map((item) => { // return <option value={item['user_name'] + " (" + item['user_id'] + ")"}></option> return <option value={item['user_id']}>{item['user_name']}</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={seniorMatchInsertModalClose} /> </div> </div> </Modal> <Modal open={seniorMatchReturnModal} close={seniorMatchReturnModalClose} header="대상자 장비 반납"> <div className="board-wrap"> <div> <table className={"caregiver-user"}> <thead> <tr> {thead55.map((i) => { return <th>{i}</th>; })} </tr> </thead> <tbody> <tr> <td> <input type="date" onChange={seniorEquipmentRentalReturnDateInsert} /> </td> <td> <input type="text" list="senior_list" placeholder="반납 담당자를 입력해 주세요" onChange={seniorEquipmentReturnUserIdInsert} /> <datalist id="senior_list"> {workerList.map((item) => { return <option value={item['user_id']}>{item['user_name']}</option> })} </datalist> </td> <td> <Button className={"btn-small gray-btn"} btnName={"선택"} onClick={seniorEquipmentReturn} /> </td> </tr> </tbody> </table> </div> <div> <Button className={"btn-100 green-btn"} btnName={"닫기"} onClick={seniorMatchInsertModalClose} /> </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> ); }