File name
Commit message
Commit date
2023-04-18
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import { useNavigate } from "react-router";
import { useSelector } from "react-redux";
import { useStateWithCallbackLazy } from 'use-state-with-callback';
import DetailTitle from "../../component/DetailTitle.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Modal from "../../component/Modal.jsx";
import House from "../../../resources/files/icon/house.png";
import Arrow from "../../../resources/files/icon/arrow.png";
import Pagination from "../../component/Pagination.jsx";
import CommonUtil from "../../../resources/js/CommonUtil.js";
export default function GovernmentEquipmentSelect() {
const navigate = useNavigate();
//전역 변수 저장 객체
const state = useSelector((state) => { return state });
const defaultGovernmentId = CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['government_id'];
const defaultAgencyId = CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['agency_id'];
//기관 계층 구조 목록
const [orgListOfHierarchy, setOrgListOfHierarchy] = React.useState([]);
//기관(관리, 시행) 계층 구조 목록 조회
const orgSelectListOfHierarchy = () => {
fetch("/org/orgSelectListOfHierarchy.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
'government_id': defaultGovernmentId,
'agency_id': defaultAgencyId
}),
}).then((response) => response.json()).then((data) => {
console.log("기관(관리, 시행) 계층 구조 목록 조회 : ", data);
setOrgListOfHierarchy(data);
}).catch((error) => {
console.log('orgSelectListOfHierarchy() /org/orgSelectListOfHierarchy.json error : ', error);
});
};
//검색 변수 (초기화값)
const [org, setOrg] = React.useState({
'government_id': defaultGovernmentId,
'agency_id': defaultAgencyId,
});
//올잇메디 선택
const adminChange = () => {
org['government_id'] = null;
org['agency_id'] = null;
setOrg({ ...org });
}
//관리 기관 선택
const governmentChange = (government_id) => {
org['government_id'] = government_id;
org['agency_id'] = null;
setOrg({ ...org });
rentalEquipmentSelectList(1);
}
//시행 기관 선택
const agencyChange = (government_id, agency_id) => {
org['government_id'] = government_id;
org['agency_id'] = agency_id;
setOrg({ ...org });
rentalEquipmentSelectList(1);
}
// 시스템 코드 - 장비 상태
const [equipmentStates, setEquipmentStates] = React.useState({});
// 시스템 코드 - 장비 상태 조회
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 [equipmentSearch, setEquipmentSearch] = React.useState({
'equipment_state': null,
'searchType': null,
'searchText': null,
});
//장비 정보 변경
const equipmentSearchChange = (targetKey, value) => {
equipmentSearch[targetKey] = value;
setEquipmentSearch({ ...equipmentSearch });
}
//장비 검색
const equipmentSearching = () => {
for (const key in equipmentSearch) {
deliveryEquipmentSearch[key] = equipmentSearch[key];
rentalEquipmentSearch[key] = equipmentSearch[key];
}
setDeliveryEquipmentSearch({ ...deliveryEquipmentSearch });
setRentalEquipmentSearch({ ...rentalEquipmentSearch });
deliveryEquipmentSelectList(1);
rentalEquipmentSelectList(1);
}
const equipmentSearchingEnter = (key) => {
if (key == 'Enter') {
equipmentSearching();
} else {
return;
}
}
//입고 및 미대여 장비 검색 정보
const [deliveryEquipmentSearch, setDeliveryEquipmentSearch] = React.useState({
'government_id': defaultGovernmentId,
'senior_id': 'IS_NULL',
'currentPage': 1,
'perPage': 10,
});
//입고 및 미대여 목록
const [deliveryEquipment, setDeliveryEquipment] = React.useState({ equipmentList: [], equipmentListCount: 0 });
//입고 및 미대여 목록 조회
const deliveryEquipmentSelectList = (currentPage) => {
deliveryEquipmentSearch.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
setDeliveryEquipmentSearch({ ...deliveryEquipmentSearch });
fetch("/equipment/equipmentSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(deliveryEquipmentSearch)
}).then((response) => response.json()).then((data) => {
console.log('deliveryEquipmentSelectList response : ', data);
setDeliveryEquipment(data);
}).catch((error) => {
console.log('deliveryEquipmentSelectList error : ', error);
});
}
//입고 및 미대여 장비 검색 정보
const [rentalEquipmentSearch, setRentalEquipmentSearch] = React.useState({
'government_id': defaultGovernmentId,
'agency_id': org['agency_id'],
'senior_id': 'IS_NOT_NULL',
'currentPage': 1,
'perPage': 10,
});
//입고 및 미대여 목록
const [rentalEquipment, setRentalEquipment] = React.useState({ equipmentList: [], equipmentListCount: 0 });
//입고 및 미대여 목록 조회
const rentalEquipmentSelectList = (currentPage) => {
rentalEquipmentSearch.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
rentalEquipmentSearch['agency_id'] = org['agency_id'];
setRentalEquipmentSearch({ ...rentalEquipmentSearch });
fetch("/equipment/equipmentSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(rentalEquipmentSearch)
}).then((response) => response.json()).then((data) => {
console.log('rentalEquipmentSelectList response : ', data);
setRentalEquipment(data);
}).catch((error) => {
console.log('rentalEquipmentSelectList error : ', error);
});
}
//장비 초기값
const equipmentInit = {
'equipment_serial_number': null,
'equipment_type': 'SMART_PILLBOX',
'equipment_name': null,
'equipment_state': null,
'equipment_product_date': null,
'equipment_stock_date': null,
'equipment_insert_datetime': null,
'equipment_insert_user_id': null,
'equipment_update_datetime': null,
'equipment_update_user_id': null,
'government_id': defaultGovernmentId,
'agency_id': defaultAgencyId,
'senior_id': null
}
//장비
const [equipment, setEquipment] = useStateWithCallbackLazy({ ...equipmentInit });
//각 데이터별로 Dom 정보 담을 Ref 생성
const equipmentRef = React.useRef({ ...equipmentInit });
//장비 정보 변경
const equipmentValueChange = (targetKey, value) => {
let newEquipment = { ...equipment };
newEquipment[targetKey] = value;
setEquipment(newEquipment);
}
//장비 유효성 검사
const equipmentValidation = () => {
const target = equipment;
const targetRef = equipmentRef;
if (CommonUtil.isEmpty(target['equipment_name']) == true) {
targetRef.current['equipment_name'].focus();
alert("모델명을 입력해 주세요.");
return false;
}
if (CommonUtil.isEmpty(target['equipment_serial_number']) == true) {
targetRef.current['equipment_serial_number'].focus();
alert("S/N을 입력해 주세요.");
return false;
}
/* if (CommonUtil.isEmpty(target['equipment_product_date']) == true) {
targetRef.current['equipment_product_date'].focus();
alert("생산일자를 선택해 주세요.");
return false;
} */
if (CommonUtil.isEmpty(target['equipment_stock_date']) == true) {
targetRef.current['equipment_stock_date'].focus();
alert("입고일자를 선택해 주세요.");
return false;
}
return true;
}
//시리얼 번호 중복 확인
const [isSerialNumberCheck, setIsSerialNumberCheck] = React.useState(false);
const [isEquipmentCheck, setIsEquipmentCheck] = React.useState(false);
//시리얼 번호 중복 검사
const serialNumberCheck = () => {
if (CommonUtil.isEmpty(equipment['equipment_serial_number']) == true) {
equipmentRef.current['equipment_serial_number'].focus();
alert("모델명을 입력해 주세요.");
return false;
}
fetch("/equipment/equipmentSelectSerialNumber.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(equipment),
}).then((response) => response.json()).then((data) => {
console.log("시리얼 번호 중복 검사 : ", data);
if (CommonUtil.isEmpty(data['equipment']) != false) {
setIsSerialNumberCheck(true);
if (data['serialNumberChk']['count'] == 1) {
setIsEquipmentCheck(true);
} else {
setIsEquipmentCheck(false);
}
equipmentRef.current['equipment_product_date'].focus();
alert("사용가능한 시리얼 번호 입니다.");
buttonChange();
} else {
setIsSerialNumberCheck(false);
equipmentRef.current['equipment_serial_number'].focus();
alert("이미 존재하는 시리얼 번호 입니다.");
}
}).catch((error) => {
console.log('userIdCheck() /user/equipmentSelectSerialNumber.json error : ', error);
});
}
//장비 등록
const equipmentInsert = () => {
if (equipmentValidation() == false) {
return;
}
if (isSerialNumberCheck == false) {
alert("시리얼 번호 중복확인을 해주세요.");
equipmentRef.current['equipment_serial_number'].focus();
return;
}
console.log('equipmentInsert equipment : ', equipment);
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("장비 등록 결과(건수) : ", data);
if (data > 0) {
alert("등록완료");
equipmentSearching();
modalEquipmentClose();
} else {
alert("등록에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('equipmentInsert() /equipment/equipmentInsert.json error : ', error);
});
}
// 미확인 장비 등록
const equipmentInsertUpdate = () => {
if (equipmentValidation() == false) {
return;
}
equipment['equipment_state'] = 'AVAILABLE';
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("미확인 장비 등록 결과(건수) : ", data);
if (data > 0) {
alert("등록완료");
equipmentSearching();
modalEquipmentClose();
} else {
alert("등록에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('equipmentUpdate() /equipment/equipmentUpdate.json error : ', error);
});
}
//장비 수정
const equipmentUpdate = () => {
if (equipmentValidation() == false) {
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("장비 수정 결과(건수) : ", data);
if (data > 0) {
alert("수정완료");
equipmentSearching();
modalEquipmentClose();
} else {
alert("수정에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('equipmentUpdate() /equipment/equipmentUpdate.json error : ', error);
});
}
//장비 삭제
const equipmentDelete = () => {
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("장비 삭제 결과(건수) : ", data);
if (data > 0) {
alert("삭제완료");
equipmentSearching();
modalEquipmentClose();
} else {
alert("삭제에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('equipmentDelete() /equipment/equipmentDelete.json error : ', error);
});
}
// 장비 관리(등록,수정) 모달창
const [modalEquipmentIsOpen, setModalEquipmentIsOpen] = React.useState(false);
// 장비 관리(등록,수정) 모달창 열기
const modalEquipmentOpen = (item) => {
if (CommonUtil.isEmpty(item)) {
//equipment['equipment_insert_datetime'] = null;
/* if (CommonUtil.isEmpty(orgListOfHierarchy[0]['agencyList']) == false) {
equipmentInit['agency_id'] = orgListOfHierarchy[0]['agencyList'][0]['agency_id'];
} */
setIsSerialNumberCheck(false);
setEquipment({ ...equipmentInit });
} else {
setEquipment(item);
}
setModalEquipmentIsOpen(true);
};
// 장비 관리(등록,수정) 모달창 닫기
const modalEquipmentClose = () => {
setModalEquipmentIsOpen(false);
};
//장비 대여 모달 여부
const [modalRentalIsOpen, setModalRentalIsOpen] = React.useState(false);
//장비 대여 오픈
const modalRentalOpen = (item) => {
setSelectEquipment(item);
mySenior['search']['agency_id'] = item['agency_id'];
mySeniorSelectList(1);
setModalRentalIsOpen(true);
};
//장비 대여 닫기
const modalRentalClose = () => {
setModalRentalIsOpen(false);
};
//장비 대여 등록 정보
const [selectEquipment, setSelectEquipment] = React.useState()
//장비 대여 등록
const equipmentRentalInsert = (senior) => {
if (confirm('해당 장비를 추가하시겠습니까?') == false) {
return;
}
selectEquipment['agency_id'] = senior['agency_id']; // 장비에 시행기관이 '없음'일 경우 배포한 시니어의 시행기관을 등록
selectEquipment['senior_id'] = senior['senior_id'];
selectEquipment['rental_start_date'] = new Date();
fetch("/equipment/equipmentRentalInsert.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(selectEquipment),
}).then((response) => response.json()).then((data) => {
console.log("장비 대여 등록 결과(건수) : ", data);
if (data > 0) {
alert("추가완료");
orgSelectListOfHierarchy();
equipmentStatesSelect();
equipmentSearching();
modalRentalClose();
} else {
alert("장비추가에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('seniorSelectOne() /user/seniorSelectOne.json error : ', error);
});
};
// 소속기관 내 시니어
const [mySenior, setMySenior] = React.useState({
seniorList: [],
seniorListCount: 0,
search: {
'government_id': defaultGovernmentId,
'agency_id': defaultAgencyId,
'user_use': true,
'equipment_search': 'IS_NULL',
'currentPage': 1,
'perPage': 5,
}
});
// 소속기관 내 시니어 목록 조회
const mySeniorSelectList = (currentPage) => {
mySenior.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
fetch("/user/seniorSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(mySenior.search),
}).then((response) => response.json()).then((data) => {
data.search = mySenior.search;
console.log(" 소속기관 내 시니어 목록 조회 : ", data);
setMySenior(data);
}).catch((error) => {
console.log('seniorSelectList() /user/seniorSelectList.json error : ', error);
});
}
//Mounted
React.useEffect(() => {
orgSelectListOfHierarchy();
equipmentStatesSelect();
equipmentSearching();
}, []);
//대여(사용) 중 장비 목록 내용
const rentalContent = (
<>
<table class="caregiver-user protector-user">
<thead>
<tr>
<th>No</th>
<th>모델명</th>
<th>시리얼넘버</th>
<th>입고일자</th>
<th>장비상태</th>
<th>기관</th>
<th>대여시행자</th>
<th>대여일</th>
<th>대여여부</th>
<th>장비사용대상자</th>
</tr>
</thead>
<tbody>
{rentalEquipment.equipmentList.map((item, idx) => {
return (
<tr>
<td data-label="No">{rentalEquipment.equipmentListCount - idx - (rentalEquipmentSearch.currentPage - 1) * rentalEquipmentSearch.perPage}</td>
<td data-label="모델명">{item['equipment_name']}</td>
<td data-label="시리얼넘버">{item['equipment_serial_number']}</td>
<td data-label="입고일자">{item['equipment_stock_date']}</td>
<td data-label="장비상태">{equipmentStates[item['equipment_state']]}</td>
<td>{item['agency_name']}</td>
<td data-label="대여시행자">
{item['rental_detail_insert_user_name']}
({item['rental_detail_insert_user_id']})
</td>
<td data-label="대여일">{item['rental_start_date']}</td>
<td data-label="대여여부">{CommonUtil.isEmpty(item['user_name']) == false ? '대여중' : '미대여'}</td>
<td data-label="장비사용대상자">{item['user_name']}</td>
</tr>
)
})}
{CommonUtil.isEmpty(rentalEquipment.equipmentList) ?
<tr>
<td colSpan={10}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={rentalEquipmentSearch.currentPage}
perPage={rentalEquipmentSearch.perPage}
totalCount={rentalEquipment.equipmentListCount}
maxRange={5}
click={rentalEquipmentSelectList}
/>
</>
);
//현재 탭 Index
const [tabIndex, setTabIndex] = React.useState(0);
//탭 초기화
const tab = [{
title: `사용가능 장비 (${deliveryEquipment.equipmentListCount})`,
content: (
<div>
<div className="flex equip-tab">
<SubTitle explanation={"현재 기관에 입고된 장비 중 돌봄 대상자에게 대여하지 않은 장비 목록입니다."} />
<div className="btn-wrap flex-end margin-bottom ">
<button className={"btn-small gray-btn"} onClick={() => { modalEquipmentOpen() }}>장비 등록</button>
</div>
</div>
<table class="caregiver-user protector-user">
<thead>
<tr>
<th>No </th>
<th>모델명</th>
<th>시리얼넘버</th>
<th>입고일자</th>
<th>장비상태</th>
<th>대여기관</th>
{/* <th>장비대여</th> */}
<th>관리</th>
</tr>
</thead>
<tbody>
{deliveryEquipment.equipmentList.map((item, idx) => {
return (
<tr>
<td data-label="No">{deliveryEquipment.equipmentListCount - idx - (deliveryEquipmentSearch.currentPage - 1) * deliveryEquipmentSearch.perPage}</td>
<td data-label="모델명">{item['equipment_name']}</td>
<td data-label="시리얼넘버">{item['equipment_serial_number']}</td>
<td data-label="입고일자">{item['equipment_stock_date']}</td>
<td data-label="장비상태">{equipmentStates[item['equipment_state']]}</td>
<td data-label="기관">{item['agency_name'] != null ? item['agency_name'] : '없음'}</td>
{/* <td cata-label="장비대여">
<button className={"btn-small gray-btn"} onClick={() => modalRentalOpen(item)}>장비 배포</button>
</td> */}
<td data-label="관리">
<button className={"btn-small gray-btn"} onClick={() => modalEquipmentOpen(item)}>정보 수정</button>
</td>
</tr>
)
})}
{CommonUtil.isEmpty(deliveryEquipment.equipmentList) ?
<tr>
<td colSpan={8}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={deliveryEquipmentSearch.currentPage}
perPage={deliveryEquipmentSearch.perPage}
totalCount={deliveryEquipment.equipmentListCount}
maxRange={5}
click={deliveryEquipmentSelectList}
/>
</div >
)
}, {
title: `사용중인 장비 (${rentalEquipment.equipmentListCount})`,
content: (
<div>
<div className="flex-align-start userauthoriylist gap5">
<div className="left">
<SubTitle explanation={"기관 리스트"} />
<div style={{ fontSize: '16px', marginTop: '0px' }} className="category">
{/* {state.loginUser['authority'] == 'ROLE_ADMIN' ?
<a onClick={adminChange}
className={org['government_id'] == null && org['agency_id'] == null ? "active" : ""}>
올잇메디
</a>
: null} */}
<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'] == org['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'] == org['agency_id'] ? "active" : ""}>
{item2['agency_name']}
</a>
</li>
)
})}
</ul>
: null
}
</li>
)
})}
</ul>
</div>
</div>
<div className="right">
<div className="flex equip-tab">
<SubTitle explanation={"선택한 기관의 돌봄 대상자가 사용중인 장비 목록입니다."} />
<div className="btn-wrap flex-end margin-bottom ">
{/* <button className={"btn-small gray-btn"} onClick={() => {modalEquipmentOpen()}}>등록</button> */}
</div>
</div>
{rentalContent}
</div>
</div>
</div>
)
}];
return (
<main>
<Modal open={modalEquipmentIsOpen} close={modalEquipmentClose} header="장비 등록">
<div className="board-wrap">
<div>
<table className="flex70 margin-bottom detail-table">
<tbody className="equipment-insert ">
<tr>
<th><span style={{ color: "red" }}>*</span>종류</th>
<td>
<select>
<option value="SMART_PILLBOX" selected>스마트 약상자</option>
{/* <option value="ECG" disabled>심전도계</option>
<option value="SPHYGMOMANOMETER" disabled>혈압계</option> */}
</select>
</td>
</tr>
<tr>
<th><span style={{ color: "red" }}>*</span>모델명</th>
<td>
<input type="text" placeholder="모델명을 입력해 주세요"
value={equipment['equipment_name']}
ref={el => equipmentRef.current['equipment_name'] = el}
onChange={(e) => equipmentValueChange('equipment_name', e.target.value)} />
</td>
</tr>
<tr>
<th><span style={{ color: "red" }}>*</span>시리얼넘버</th>
<td>
{CommonUtil.isEmpty(equipment['equipment_insert_datetime'])
? <>
<input type="text" placeholder="S/N를 입력해 주세요"
style={{ width: 'calc(100% - 110px)' }}
value={equipment['equipment_serial_number']}
ref={el => equipmentRef.current['equipment_serial_number'] = el}
onChange={(e) => { equipmentValueChange('equipment_serial_number', e.target.value); setIsSerialNumberCheck(false); }}
/>
<button className={"btn-small red-btn"} style={{ width: '110px' }} onClick={serialNumberCheck}>중복확인</button>
</>
: <input type="text"
value={equipment['equipment_serial_number']}
disabled={true}
/>
}
</td>
</tr>
<tr>
<th>생산일자</th>
<td>
<input type="date"
value={equipment['equipment_product_date']}
ref={el => equipmentRef.current['equipment_product_date'] = el}
onChange={(e) => equipmentValueChange('equipment_product_date', e.target.value)} />
</td>
</tr>
<tr>
<th><span style={{ color: "red" }}>*</span>입고일자</th>
<td>
<input type="date"
value={equipment['equipment_stock_date']}
ref={el => equipmentRef.current['equipment_stock_date'] = el}
onChange={(e) => equipmentValueChange('equipment_stock_date', e.target.value)} />
</td>
</tr>
{CommonUtil.isEmpty(equipment['equipment_insert_datetime']) == false
? <tr>
<th><span style={{ color: "red" }}>*</span>장비상태</th>
<td>
<div className="gender flex-start gap2">
{Object.keys(equipmentStates).map((key, idx) => {
return (
<div className="flex-start">
<input type="radio" name="equipment_state" id={key} key={key} value={key}
style={{ width: '25px' }}
checked={equipment['equipment_state'] == key}
onChange={(e) => { e.target.checked ? equipmentValueChange('equipment_state', e.target.value) : null }}
/>
<label for={key}>{equipmentStates[key]}</label>
</div>
)
})}
</div>
</td>
</tr>
: null}
<tr>
<th>대여기관 선택</th>
{/* <td>
{orgListOfHierarchy.map((item, idx) => {
return (
<select onChange={(e) => {
console.log('e.target.value : ', e.target.value);
equipmentValueChange('agency_id', e.target.value);
}}>
<option value="">시행기관을 선택해주세요.</option>
{item['agencyList'] != undefined && item['agencyList'] != null ?
item['agencyList'].map((item2, idx2) => {
return (
<option key={idx2} value={item2['agency_id']}
selected={equipment['agency_id'] == item2['agency_id']}>
{item2['agency_name']}
</option>
)
})
: null}
</select>
)
})}
</td> */}
<td>
<select onChange={(e) => {
console.log('e.target.value : ', e.target.value);
equipmentValueChange('agency_id', e.target.value);
}}>
<option value="">대여기관을 선택해주세요.</option>
{orgListOfHierarchy && orgListOfHierarchy[0] && orgListOfHierarchy[0]['agencyList'] != undefined ?
orgListOfHierarchy[0]['agencyList'].map((item2, idx2) => {
return (
<option key={idx2} value={item2['agency_id']}
selected={equipment['agency_id'] == item2['agency_id']}>
{item2['agency_name']}
</option>
)
})
: null}
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div className="flex-center">
{CommonUtil.isEmpty(equipment['equipment_insert_datetime'])
?
!isEquipmentCheck ?
<button className={"btn-small gray-btn"} onClick={equipmentInsert}>등록</button>
:
<button className={"btn-small gray-btn"} onClick={equipmentInsertUpdate}>등록</button>
: <>
<button className={"btn-small gray-btn"} onClick={equipmentUpdate}>수정</button>
<button className={"btn-small red-btn"} onClick={equipmentDelete}>삭제</button>
</>
}
</div>
</div>
</Modal>
<Modal open={modalRentalIsOpen} close={modalRentalClose} header="장비 배포 시니어 선택">
<div className="board-wrap">
<table className={"protector-user"}>
<thead>
<tr>
<th>No</th>
<th>소속기관명</th>
<th>이름</th>
<th>생년월일</th>
<th>성별</th>
<th>배포</th>
</tr>
</thead>
<tbody>
{mySenior.seniorList.map((item, idx) => {
return (
<tr key={idx}>
<td data-label="No">{mySenior.seniorListCount - idx - (mySenior.search.currentPage - 1) * mySenior.search.perPage}</td>
<td data-label="소속기관명">{item['agency_name']}</td>
<td data-label="이름">{item['user_name']}</td>
<td data-label="생년월일">{item['user_birth']}</td>
<td data-label="성별">{item['user_gender']}</td>
<td data-label="배포">
<button className="btn-small gray-btn" onClick={() => { equipmentRentalInsert(item) }}>배포하기</button>
</td>
</tr>
)
})}
{CommonUtil.isEmpty(mySenior.seniorList) ?
<tr>
<td colSpan={8}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={mySenior.search.currentPage}
perPage={mySenior.search.perPage}
totalCount={mySenior.seniorListCount}
maxRange={5}
click={mySeniorSelectList}
/>
</div>
</Modal>
{/* <Modal open={modalDeliveryIsOpen} close={modalDeliveryClose} header="납품 기관 선택">
<div className="board-wrap">
<div>
<div style={{textAlign:'left', fontSize: '16px',margin:'2rem 0'}} className="category">
<div className="search-management flex-end margin-bottom2 margin-top">
<div style={{width: '90px', fontWeight: '600'}}>납품일자</div>
<input type="date"
value={equipmentDelivery['delivery_date']}
onChange={(e) => {
equipmentDelivery['delivery_date'] = e.target.value;
setEquipmentDelivery({...equipmentDelivery})}
}/>
</div>
<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>{item['government_name']}</a>
<button onClick={() => {
if (confirm(`'${item['government_name']}'에 장비를 납품하시겠습니까?`)) {
equipmentDeliveryInsert(item['government_id'])
} else {
return;
}
}}>선택</button>
</li>
)})}
</ul>
</div>
</div>
</div>
</Modal> */}
<div className="search-management flex-end margin-bottom2 margin-top gap">
<select style={{ maxWidth: '150px' }}
onChange={(e) => equipmentSearchChange('equipment_state', e.target.value)}>
<option value="">상태</option>
{Object.keys(equipmentStates).map((key, idx) => {
return (
<option key={key} value={key}>
{equipmentStates[key]}
</option>
)
})}
</select>
<select style={{ maxWidth: '150px' }}
onChange={(e) => equipmentSearchChange('searchType', e.target.value)}>
<option value="">전체</option>
<option value="equipment_name">모델명</option>
<option value="equipment_serial_number">시리얼넘버</option>
</select>
<input type="text"
value={equipmentSearch.searchText}
onChange={(e) => equipmentSearchChange('searchText', e.target.value)}
onKeyUp={(e) => equipmentSearchingEnter(e.key)}
/>
<button className={"btn-small gray-btn"} style={{ maxWidth: '150px' }} onClick={equipmentSearching}>검색</button>
</div>
<div className="tab-container">
<ul className="tab-menu flex-start">
{tab.map((item, idx) => {
return (
<li onClick={() => setTabIndex(idx)} className={idx == tabIndex ? 'active' : null}>
{item.title}
</li>
)
})}
</ul>
<div className="content-wrap">
<ul className="tab-content">
<li>
{tab[tabIndex].content}
</li>
</ul>
</div>
</div>
</main >
);
}