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 [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) {
rentalEquipmentSearch[key] = equipmentSearch[key];
}
setRentalEquipmentSearch({ ...rentalEquipmentSearch });
rentalEquipmentSelectList(1);
}
const equipmentSearchingEnter = (key) => {
if (key == 'Enter') {
equipmentSearching();
} else {
return;
}
}
//입고 및 미대여 장비 검색 정보
const [rentalEquipmentSearch, setRentalEquipmentSearch] = React.useState({
'government_id': defaultGovernmentId,
'agency_id': defaultAgencyId,
'currentPage': 1,
'perPage': 10,
});
//입고 및 미대여 목록
const [rentalEquipment, setRentalEquipment] = React.useState({ equipmentList: [], equipmentListCount: 0 });
console.log("rentalEquipmentSearch:", rentalEquipmentSearch)
//입고 및 미대여 목록 조회
const rentalEquipmentSelectList = (currentPage) => {
rentalEquipmentSearch.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
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 [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("추가완료");
rentalEquipmentSelectList();
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(() => {
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>
<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="대여시행자">
{CommonUtil.isEmpty(item['rental_detail_insert_user_name']) == false ?
item['rental_detail_insert_user_name'] + '(' + item['rental_detail_insert_user_id'] + ')'
: '-'}
</td>
<td data-label="대여일">{CommonUtil.isEmpty(item['rental_start_date']) == false ? item['rental_start_date'] : '-'}</td>
<td data-label="대여여부">{CommonUtil.isEmpty(item['user_name']) == false ? '대여중' : '미대여'}</td>
<td data-label="장비사용대상자">{CommonUtil.isEmpty(item['user_name']) == false ? item['user_name'] : '-'}</td>
<td cata-label="장비대여">
{CommonUtil.isEmpty(item['user_name']) == false ? '-'
: (<button className={"btn-small gray-btn"} onClick={() => modalRentalOpen(item)}>장비대여</button>)}
</td>
</tr>
)
})}
{CommonUtil.isEmpty(rentalEquipment.equipmentList) ?
<tr>
<td colSpan={11}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={rentalEquipmentSearch.currentPage}
perPage={rentalEquipmentSearch.perPage}
totalCount={rentalEquipment.equipmentListCount}
maxRange={5}
click={rentalEquipmentSelectList}
/>
</>
);
return (
<main>
<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="content-wrap">
<DetailTitle contentTitle={"장비 사용 현황"} />
<div className="board-wrap" style={{ marginTop: "3rem" }} >
<div className="btn-wrap margin-bottom">
<div className="btn-wrap flex-end margin-bottom ">
{state.loginUser['authority'] == 'ROLE_AGENCYADMIN' ? (
<button className={"btn-small gray-btn"} onClick={() => navigate("/AgencyAdminSeniorSelect")}>대상자 관리</button>
) : (
<button className={"btn-small gray-btn"} onClick={() => navigate("/AgencySeniorSelect")}>대상자 관리</button>
)}
</div>
{rentalContent}
</div>
</div>
</div>
<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>
</main >
);
}