File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
2023-02-17
File name
Commit message
Commit date
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 [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);
});
}
const thead1 = [
"No",
"모델 명",
"시리얼 넘버",
"입고 일자",
"상태",
"보유 기관",
"대상자",
"관리",
];
const key1 = [
"equipment_name",
"equipment_serial_number",
"equipment_stock_date",
"equipment_state",
"agency_name",
"user_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 [seniorList, setSeniorList] = React.useState([]);
// 대상자 장비 등록 모달창
const [seniorMatchModal, setSeniorMatchModal] = React.useState(false);
// 대상자 장비 등록 모달창 열기
const seniorMatchModalOpen = (item) => {
setSeniorEquipment(item); // 선택한 장비 데이터 저장
setSeniorMatchModal(true);
};
// 대상자 장비 등록 모달창 닫기
const seniorMatchModalClose = () => {
setSeniorMatchModal(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 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 agencySeniorEquipmentSelectList = () => {
// console.log('agencySeniorEquipmentSelectList Function Run');
// fetch("/equipment/agencySeniorEquipmentSelectList.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('agencySeniorEquipmentSelectList response : ', data);
// setAgencySeniorEquipmentList(data);
// }).catch((error) => {
// console.log('agencySeniorEquipmentSelectList 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({});
alert('등록이 완료됐습니다.');
}).catch((error) => {
console.log('seniorEquipmentInsert error : ', error);
alert('등록에 실패했습니다.');
});
}
// 대상자 목록 조회
const seniorSelectList = () => {
console.log('seniorSelectList Function Run');
fetch("/user/selectSubjectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
}).then((response) => response.json()).then((data) => {
console.log('seniorSelectList response : ', data);
setSeniorList(data);
}).catch((error) => {
console.log('seniorSelectList 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 = [
"equipment_name",
"equipment_serial_number",
"equipment_state",
"user_name",
"equipment_rental_start_date",
"equipment_rental_end_date",
"equipment_rental_return_date"
];
const thead33 = [
"No",
"장비명",
"시리얼 넘버",
"입고일자",
"납품 기관",//관리기관, 올잇메디
"대상자",//시행기관
];
const key33 = [
"No",
"equipment",
"serialNumber",
"date",
"agency",
"senior",
];
const content33 = [
{
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}
/>
),
},
];
// 마운트 시 실행 함수
React.useEffect(() => {
equipmentSelectList();
agencyEquipmentSelectList();
// agencySeniorEquipmentSelectList();
seniorSelectList();
}, [])
// 대상자, 재고 장비 목록
React.useEffect(() => {
console.log('@@@', agencyEquipmentList);
let data = [];
for(let i = 0; i < agencyEquipmentList.length; i++) {
if(agencyEquipmentList[i]['senior_id'] != null) {
data.push(agencyEquipmentList[i]);
}
}
console.log('@@@data', data);
setAgencySeniorEquipmentList(data);
}, [agencyEquipmentList])
/********************************** 시행기관 장비 (끝) **********************************/
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 = [
"대상자",
"대여일",
"반납예정일",
"선택",
];
const key5 = [
"senior",
"date",
"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: "전체 장비" + "(" + 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={() => seniorMatchModalOpen(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}
/>
<Button
className={"btn-small green-btn"}
btnName={"등록"}
onClick={openModal3}
/>
</div>
</div>
<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: "대상자 장비(시행기관)" + "(" + agencySeniorEquipmentList.length + ")",
description: (
<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={seniorMatchDelete}
/>
</td>
</tr>
);
})}
</tbody>
</table> */}
<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={seniorMatchDelete}
/>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
),
},
{
id: 6,
title: "재고 장비(시행기관)" + "(" + ")",
description: (
<Table
className={"caregiver-user"}
head={thead33}
contents={content33}
contentKey={key33}
/>
),
},
];
//시작 탭 설정
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={seniorMatchModal} close={seniorMatchModalClose} header="대상자 장비 등록">
<div className="board-wrap">
<div>
<table className={"caregiver-user"}>
<thead>
<tr>
{thead5.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={seniorMatchModalClose}
/>
</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>
);
}