File name
Commit message
Commit date
2023-04-04
File name
Commit message
Commit date
2023-04-04
2023-04-04
File name
Commit message
Commit date
2023-04-04
2023-04-04
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 [equipmentStates, setEquipmentStates] = React.useState({});
// 시스템 코드 - 장비 대여 상태
const [equipmentRentalStates, setEquipmentRentalStates] = React.useState({});
const [modalOpen, setModalOpen] = React.useState(false);
const openModal = () => {
setModalOpen(true);
};
const closeModal = () => {
setModalOpen(false);
};
const navigate = useNavigate();
// 시스템 코드 - 장비 상태 조회
const equipmentStatesSelect = () => {
console.log('equipmentStatesSelect Function Run');
//fetch post
fetch("/common/systemCode/equipmentStatesSelect.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({})
}).then((response) => response.json()).then((data) => {
console.log('equipmentStatesSelect response : ', data);
setEquipmentStates(data);
}).catch((error) => {
console.log('equipmentStatesSelect error : ', error);
});
}
// 시스템 코드 - 장비 대여 상태 조회
const equipmentRentalStatesSelect = () => {
console.log('equipmentRentalStatesSelect Function Run');
//fetch post
fetch("/common/systemCode/equipmentRentalStatesSelect.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({})
}).then((response) => response.json()).then((data) => {
console.log('equipmentRentalStatesSelect response : ', data);
setEquipmentRentalStates(data);
}).catch((error) => {
console.log('equipmentRentalStatesSelect error : ', error);
});
//fetch get
/* fetch('/common/systemCode/equipmentRentalStatesSelect.json')
.then((response) => response.json()).then((data) => {
console.log('equipmentRentalStatesSelect response : ', data);
}).catch((error) => {
console.log('equipmentRentalStatesSelect error : ', error);
}); */
//axios get
/* axios.get('/common/systemCode/equipmentRentalStatesSelect.json')
.then(function (response) {
console.log('equipmentRentalStatesSelect : ', response.data);
}).catch(function (error) {
console.log("equipmentRentalStatesSelect - error : ", error);
}); */
//axios post
/* axios({
url: '/common/systemCode/equipmentRentalStatesSelect.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {}
}).then(function (response) {
console.log("equipmentRentalStatesSelect - response : ", response.data);
}).catch(function (error) {
console.log("equipmentRentalStatesSelect - error : ", error);
}); */
}
// 장비 비매칭 대상자 목록 조회
const equipmentNotMatchSeniorSelectList = () => {
console.log('seniorSelectList Function Run');
fetch("/user/equipmentMatchStateSelectListBySenior.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
agency_id: 'AGENCY01',
matchState: false
})
}).then((response) => response.json()).then((data) => {
console.log('equipmentNotMatchSeniorSelectList response : ', data);
setEquipmentNotMatchSeniorList(data);
}).catch((error) => {
console.log('equipmentNotMatchSeniorSelectList error : ', error);
});
}
// 담당자 목록 조회
const workerSelectList = () => {
console.log('workerSelectList Function Run');
fetch("/user/selectUserList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
authority: 'WORKER01'
})
}).then((response) => response.json()).then((data) => {
console.log('workerSelectList response : ', data);
setWorkerList(data);
}).catch((error) => {
console.log('workerSelectList error : ', error);
});
}
/********************************** 관리자 장비 (시작) **********************************/
//로그 확인
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 [equipmentOneModal, setEquipmentOneModal] = React.useState(false);
// 전체 장비 목록 조회
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 equipmentInsertModalOpen = () => {
setEquipmentInsertModal(true);
};
// 장비 등록 모달창 닫기
const equipmentInsertModalClose = () => {
// 장비 초기화
setEquipment(equipment_);
setEquipmentInsertModal(false);
};
// 장비 임시 데이터
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;
}
}
// 시리얼 넘버 중복검사
for(let i = 0; i < equipmentList.length; i++) {
if(equipment["equipment_serial_number"] == equipmentList[i]["equipment_serial_number"]) {
alert('이미 등록된 시리얼 넘버입니다.');
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('등록에 실패했습니다.');
});
}
// 장비 상세 조회 모달창 열기
const equipmentOneModalOpen = (item) => {
setEquipment(item);
setEquipmentOneModal(true);
};
// 장비 상세 조회 모달창 닫기
const equipmentOneModalClose = () => {
// 장비 초기화
setEquipment(equipment_);
setEquipmentOneModal(false);
};
// 장비 수정
const equipmentUpdate = () => {
console.log('equipmentUpdate Function Run');
// 유효성 검사
for(let i = 0; i < equipmentInsertHead.length; i++) {
if(equipment[equipmentInsertKey[i]] == null) {
alert(equipmentInsertHead[i] +'를 선택해 주세요');
return;
}
}
fetch("/equipment/equipmentUpdate.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(equipment),
}).then((response) => response.json()).then((data) => {
console.log('equipmentUpdate response : ', data);
// 장비 목록 조회
equipmentSelectList();
// 장비 초기화
setEquipment(equipment_);
// 모달창 닫기
setEquipmentOneModal(false);
alert('수정이 완료됐습니다.');
}).catch((error) => {
console.log('equipmentUpdate error : ', error);
alert('수정에 실패했습니다.');
});
}
// 장비 삭제
const equipmentDelete = () => {
console.log('equipmentDelete Function Run');
// 삭제 확인 팝업
if (confirm('정말 삭제하시겠습니까?') == false) {
return;
}
fetch("/equipment/equipmentDelete.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(equipment),
}).then((response) => response.json()).then((data) => {
console.log('equipmentDelete response : ', data);
// 장비 목록 조회
equipmentSelectList();
// 장비 초기화
setEquipment(equipment_);
// 모달창 닫기
setEquipmentOneModal(false);
alert('삭제가 완료됐습니다.');
}).catch((error) => {
console.log('equipmentDelete 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",
"equipment_serial_number",
"equipment_stock_date",
"equipment_state",
"agency_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 [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 [agencyEquipmentOneModal, setAgencyEquipmentOneModal] = React.useState(false);
// 장비별 대상자 매칭 목록 조회
const [seniorMatchListByEquipment, setSeniorMatchListByEquipment] = React.useState([]);
// 장비 비매칭 대상자 목록
const [equipmentNotMatchSeniorList, setEquipmentNotMatchSeniorList] = 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 agencyEquipmentOneModalOpen = (item) => {
agencyEquipmentSelectOne(item);
// setSeniorEquipment(item); // 선택한 장비 데이터 저장
setAgencyEquipmentOneModal(true);
};
// 시행기관 장비 상세 조회 모달창 닫기
const agencyEquipmentOneModalClose = () => {
setAgencyEquipmentOneModal(false);
};
// 시행기관 전체 장비 목록 조회
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 agencyEquipmentSelectOne = (item) => {
console.log('agencyEquipmentSelectOne Function Run: ', item);
// 대상자 장비 반납 구분 조건 data
item['matchTarget'] = 'equipment';
fetch("/equipment/equipmentMatchSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(item),
}).then((response) => response.json()).then((data) => {
console.log('agencyEquipmentSelectOne response : ', data);
// 장비별 대상자 매칭 목록
setSeniorMatchListByEquipment(data);
}).catch((error) => {
console.log('agencyEquipmentSelectOne error : ', error);
});
}
// 대상자 장비 등록
const seniorEquipmentInsert = () => {
console.log('seniorEquipmentInsert Function Run');
// 대상자 아이디 유효성 검사
let check = 0;
for (let i = 0; i < equipmentNotMatchSeniorList.length; i++) {
// 입력한 대상자 아이디가 대상자 목록에 있을 경우
if (equipmentNotMatchSeniorList[i]['senior_id'] == seniorEquipment['senior_id']) {
console.log('success: ', equipmentNotMatchSeniorList[i]['senior_id']);
// 원본 데이터 복사 및 수정
let data = {
...seniorEquipment,
user_name: equipmentNotMatchSeniorList[i]['user_name'],
}
// 복사 데이터를 원본 데이터에 덮어쓰기
setSeniorEquipment(data);
check = 1;
}
}
// 입력한 대상자 아이디가 대상자 목록에 없을 경우
if (check != 1) {
console.log('fail: ', equipmentNotMatchSeniorList, seniorEquipment['senior_id']);
alert('존재하지 않는 대상자입니다.');
return;
}
// 대여일 유효성 검사
if(seniorEquipment['equipment_rental_start_date'] == null) {
alert('대여일을 입력해 주세요');
return;
}
// 반납 예정일 유효성 검사
if(seniorEquipment['equipment_rental_end_date'] == null) {
alert('반납 예정일 입력해 주세요');
return;
}
// 이전 매칭 기록 확인 조건 data
// console.log('insert seniorEquipment before: ', seniorEquipment);
seniorEquipment['matchTarget'] = 'senior';
// console.log('insert seniorEquipment after: ', seniorEquipment);
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({});
//장비 비매칭 대상자 목록 조회
equipmentNotMatchSeniorSelectList();
// 장비 목록 조회
agencyEquipmentSelectList();
agencySeniorEquipmentSelectList();
agencyStockEquipmentSelectList();
// 모달창 닫기
setSeniorMatchInsertModal(false);
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;
}
// 반납 예정일 유효성 검사
if(seniorEquipment['equipment_rental_return_date'] == null) {
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({});
//장비 비매칭 대상자 목록 조회
equipmentNotMatchSeniorSelectList();
// 장비 목록 조회
agencyEquipmentSelectList();
agencySeniorEquipmentSelectList();
agencyStockEquipmentSelectList();
// 모달창 닫기
setSeniorMatchReturnModal(false);
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",
"equipment_match_idx",
];
// 시행기관 재고 장비 thead, key
const thead33 = [
"No",
"모델 명",
"시리얼 넘버",
"기기 상태",
"대상자 관리",
];
const key33 = [
"equipment_name",
"equipment_serial_number",
"equipment_state",
];
// 장비 대상자 등록 모달창 thead
const thead44 = [
"대상자",
"대여일",
"반납예정일",
"선택",
];
// 장비 대상자 반납 모달창 thead
const thead55 = [
"반납일",
"반납 담당자",
"선택",
];
const thead66 = [
"대상자",
"대여일",
"반납일",
"반납 담당자",
];
const key66 = [
"senior_name",
"equipment_rental_start_date",
"equipment_rental_return_date",
"return_user_name",
];
// 마운트 시 실행 함수
React.useEffect(() => {
// 공통
equipmentStatesSelect();
equipmentRentalStatesSelect();
equipmentNotMatchSeniorSelectList();
workerSelectList();
// 관리자
equipmentSelectList();
// 시행기관
agencyEquipmentSelectList();
agencySeniorEquipmentSelectList();
agencyStockEquipmentSelectList();
}, [])
/********************************** 시행기관 장비 (끝) **********************************/
//기관 계층 구조 목록
const [orgListOfHierarchy, setOrgListOfHierarchy] = React.useState([]);
//기관(관리, 시행) 계층 구조 목록 조회
const orgSelectListOfHierarchy = () => {
fetch("/org/orgSelectListOfHierarchy.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({}),
}).then((response) => response.json()).then((data) => {
console.log("기관(관리, 시행) 계층 구조 목록 조회 : ", data);
setOrgListOfHierarchy(data);
}).catch((error) => {
console.log('orgSelectListOfHierarchy() /org/orgSelectListOfHierarchy.json error : ', error);
});
};
//관리기관 관리자 목록 및 페이징 정보
userSearch['authority'] = 'ROLE_GOVERNMENT';
const [government, setGovernment] = React.useState({userList: [], userListCount: 0, search: JSON.parse(JSON.stringify(userSearch))});
const governmentSearchChange = (targetKey, value) => {
let newGovernment = JSON.parse(JSON.stringify(government));
newGovernment.search[targetKey] = value;
setGovernment(newGovernment);
}
const governmentSelectListEnter = (key) => {
if (key == 'Enter') {
governmentSelectList();
} else {
return;
}
}
//관리기관 담당자 목록 조회
const governmentSelectList = (currentPage) => {
government.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
fetch("/user/userSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(government.search),
}).then((response) => response.json()).then((data) => {
data.search = government.search;
console.log("관리기관 담당자 목록 조회 : ", data);
setGovernment(data);
}).catch((error) => {
console.log('governmentSelectList() /user/userSelectList.json error : ', error);
});
}
//시스템 관리자 목록 및 페이징 정보
userSearch['authority'] = 'ROLE_ADMIN';
const [admin, setAdmin] = React.useState({userList: [], userListCount: 0, search: JSON.parse(JSON.stringify(userSearch))});
const adminSearchChange = (targetKey, value) => {
let newAdmin = JSON.parse(JSON.stringify(admin));
newAdmin.search[targetKey] = value;
setAdmin(newAdmin);
}
const adminSelectListEnter = (key) => {
if (key == 'Enter') {
adminSelectList();
} else {
return;
}
}
// 장비 납품 모달창 thead, key
const thead4 = [
"No",
"기관명",
"선택하기",
];
const key4 = [
"No",
"agency",
"choice",
];
const content4 = [
{
No: 1,
agency: (
<div>
<div style={{width: '100%', fontSize: '16px'}} className="category">
{/* <a className={() => {return "active"}} onClick={adminChange}>올잇메디</a> */}
<a onClick={adminChange}
className={userSearch['government_id'] == null && userSearch['agency_id'] == null ? "active" : ""}>
올잇메디
</a>
<ul style={{marginLeft: '15px'}}>
{orgListOfHierarchy.map((item, idx) => { return (
<li style={{margin: '10px 0px'}} key={idx}>
<span style={{marginRight: '5px'}}><img src={House} alt="" /></span>
<a onClick={() => {governmentChange(item['government_id'])}}
className={item['government_id'] == userSearch['government_id'] ? "active" : ""}>
{item['government_name']}
</a>
{item['agencyList'] != undefined && item['agencyList'] != null ?
<ul style={{marginLeft: '15px'}}>
{item['agencyList'].map((item2, idx2) => { return (
<li style={{margin: '10px 0px'}} key={idx2}>
<span style={{marginRight: '5px'}}><img src={Arrow} alt="" /></span>
<a onClick={() => {agencyChange(item['government_id'], item2['agency_id'])}}
className={item2['agency_id'] == userSearch['agency_id'] ? "active" : ""}>
{item2['agency_name']}
</a>
</li>
)})}
</ul>
: null
}
</li>
)})}
</ul>
</div>
</div>
)
,
choice: (<Button
className={"btn-small gray-btn"}
btnName={"선택"}
/>)
},
];
// 장비 탭별 화면
const data = [
{
id: 1,
title: "전체 장비" + "(" + equipmentList.length + ")",
description: (
<div>
<div className="flex equip-tab">
<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
<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={equipmentInsertModalOpen}
/>
</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.length > 0
? equipmentList.map((item, index) => {
return (
<tr key={index} onClick={() => equipmentOneModalOpen(item)}>
<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 onClick={(e) => e.stopPropagation()}>
{
item['senior_id'] == null
? <Button
className={"btn-small gray-btn"}
btnName={"등록"}
onClick={() => seniorMatchInsertModalOpen(item)}
/>
: <Button
className={"btn-small gray-btn"}
btnName={"반납"}
onClick={seniorMatchDelete}
/>
}
<Button
className={"btn-small gray-btn"}
btnName={"삭제"}
onClick={() => seniorMatchInsertModalOpen(item)}
/>
</td>
</tr>
);
})
: <td colSpan={7}>조회된 데이터가 없습니다.</td>
}
</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 equip-tab">
<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
<div className="btn-wrap flex-end margin-bottom ">
<Button
className={"btn-small gray-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} onClick={() => agencyEquipmentOneModalOpen(item)}>
<td>{agencyEquipmentList.length - index}</td>
{/* {key11.map((kes) => {
if(kes == "equipment_rental_state") {
for(let i = 0; i < Object.keys(equipmentRentalStates).length; i++) {
if(item[kes].toString().toUpperCase() == Object.keys(equipmentRentalStates)[i]) {
item[kes] = Object.values(equipmentRentalStates)[i];
}
}
}
return <td>{item[kes]}</td>
})} */}
<td>{item['equipment_name']}</td>
<td>{item['equipment_serial_number']}</td>
{Object.keys(equipmentStates).map((key, idx) => {
if(item['equipment_state'] == key)
return <td>{Object.values(equipmentStates)[idx]}</td>
})}
{Object.keys(equipmentRentalStates).map((key, idx) => {
if(item['equipment_rental_state'] == key)
return <td>{Object.values(equipmentRentalStates)[idx]}</td>
})}
<td>{item['equipment_match_idx']}</td>
<td onClick={(e) => e.stopPropagation()}>
{
item['equipment_rental_state'] == 'RENTABLE'
? <Button
className={"btn-small gray-btn"}
btnName={"등록"}
onClick={() => seniorMatchInsertModalOpen(item)}
/>
: <Button
className={"btn-small gray-btn"}
btnName={"반납"}
onClick={() => seniorMatchReturnModalOpen(item)}
/>
}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
),
},
{
id: 5,
title: "대상자 장비(시행기관)" + "(" + agencySeniorEquipmentList.length + ")",
description: (
<div>
<div className="flex equip-tab">
<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
</div>
<table class="caregiver-user">
<thead>
<tr>
{thead22.map((i) => {
return <th>{i}</th>;
})}
</tr>
</thead>
<tbody>
{agencySeniorEquipmentList.length > 0
? 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 gray-btn"}
btnName={"반납"}
onClick={() => seniorMatchReturnModalOpen(item)}
/>
}
</td>
</tr>
);
})
: <td colSpan={9}>조회된 데이터가 없습니다.</td>
}
</tbody>
</table>
</div>
),
},
{
id: 6,
title: "재고 장비(시행기관)" + "(" + agencyStockEquipmentList.length + ")",
description: (
<div>
<div className="flex equip-tab">
<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
</div>
<table class="caregiver-user">
<thead>
<tr>
{thead33.map((i) => {
return <th>{i}</th>;
})}
</tr>
</thead>
<tbody>
{agencyStockEquipmentList.length > 0
? 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 gray-btn"}
btnName={"등록"}
onClick={() => seniorMatchInsertModalOpen(item)}
/>
}
</td>
</tr>
);
})
: <td colSpan={5}>조회된 데이터가 없습니다.</td>
}
</tbody>
</table>
</div>
),
},
];
//시작 탭 설정
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={equipmentOneModal} close={equipmentOneModalClose} header="장비 상세 조회">
<div className="board-wrap">
<div>
<table className="flex70 margin-bottom">
<tbody className="equipment-insert">
<tr>
<th>종류</th>
<td colSpan={5}>
<select value={equipment['equipment_type']} name="equipment_type" onChange={equipmentChange}>
<option value="" selected 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" value={equipment['equipment_serial_number']} name="equipment_serial_number" placeholder="S/N을 입력해 주세요" disabled onChange={equipmentChange}/>
</td>
</tr>
<tr>
<th>생산 일자</th>
<td colSpan={5}>
<input type="date" value={equipment['equipment_product_date']} name="equipment_product_date" onChange={equipmentChange}/>
</td>
</tr>
<tr>
<th>입고 일자</th>
<td colSpan={5}>
<input type="date" value={equipment['equipment_stock_date']} name="equipment_stock_date" onChange={equipmentChange}/>
</td>
</tr>
</tbody>
</table>
<table className={"caregiver-user"}>
<thead>
<tr>
{thead66.map((i) => {
return <th>{i}</th>;
})}
</tr>
</thead>
<tbody>
{seniorMatchListByEquipment.length > 0
? seniorMatchListByEquipment.map((item, index) => {
return (
<tr>
{key66.map((kes) => {
return <td>{item[kes]}</td>
})}
</tr>
);
})
: <td colSpan={4}>조회된 데이터가 없습니다.</td>
}
</tbody>
</table>
</div>
<div justify-content="center">
<Button
className={"btn-small gray-btn"}
btnName={"수정"}
onClick={equipmentUpdate}
/>
<Button
className={"btn-small gray-btn"}
btnName={"삭제"}
onClick={equipmentDelete}
/>
<Button
className={"btn-small gray-btn"}
btnName={"닫기"}
onClick={equipmentOneModalClose}
/>
</div>
</div>
</Modal>
<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 gray-btn"}
btnName={"닫기"}
onClick={closeModal}
/>
</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">
{equipmentNotMatchSeniorList.map((item) => {
// return <option value={item['user_name'] + " (" + item['senior_id'] + ")"}></option>
return <option value={item['senior_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 gray-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 gray-btn"}
btnName={"닫기"}
onClick={seniorMatchInsertModalClose}
/>
</div>
</div>
</Modal>
<Modal open={agencyEquipmentOneModal} close={agencyEquipmentOneModalClose} header="대상자 장비 상세 조회">
<div className="board-wrap">
<div>
<table className={"caregiver-user"}>
<thead>
<tr>
{thead66.map((i) => {
return <th>{i}</th>;
})}
</tr>
</thead>
<tbody>
{seniorMatchListByEquipment.length > 0
? seniorMatchListByEquipment.map((item, index) => {
return (
<tr>
{key66.map((kes) => {
return <td>{item[kes]}</td>
})}
</tr>
);
})
: <td colSpan={4}>조회된 데이터가 없습니다.</td>
}
</tbody>
</table>
</div>
<div>
<Button
className={"btn-100 gray-btn"}
btnName={"닫기"}
onClick={seniorMatchInsertModalClose}
/>
</div>
</div>
</Modal>
<div className="tab-container">
<ul className="tab-menu flex-start">
{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>
<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>
);
}