File name
Commit message
Commit date
2023-05-06
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, useLocation } from "react-router";
import { useSelector } from "react-redux";
import { useStateWithCallbackLazy } from 'use-state-with-callback';
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 EquipmentSelect() {
const navigate = useNavigate();
const location = useLocation();
//전역 변수 저장 객체
const state = useSelector((state) => {return state});
const defaultGovernmentId = CommonUtil.isEmpty(location.state) || CommonUtil.isEmpty(location.state['government_id']) ? null : location.state['government_id'];
console.log('location.state : ', location.state);
console.log('defaultGovernmentId : ', defaultGovernmentId);
//기관 계층 구조 목록
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);
});
};
//검색 변수 (초기화값)
const [org, setOrg] = React.useState({
'government_id': defaultGovernmentId,
'agency_id': null,
});
//올잇메디 선택
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});
}
//시행 기관 선택
const agencyChange = (government_id, agency_id) => {
org['government_id'] = government_id;
org['agency_id'] = agency_id;
setOrg({...org});
}
//Mounted
React.useEffect(() => {
equipmentSearching();
}, [org]);
// 시스템 코드 - 장비 상태
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 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': null,
'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 serialNumberCheck = () => {
if (CommonUtil.isEmpty(equipment['equipment_serial_number']) == true) {
equipmentRef.current['equipment_serial_number'].focus();
alert("모델명을 입력해 주세요.");
return false;
}
fetch("/equipment/equipmentSelectOne.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) == true) {
setIsSerialNumberCheck(true);
equipmentRef.current['equipment_product_date'].focus();
alert("사용가능한 시리얼 번호 입니다.");
} else {
setIsSerialNumberCheck(false);
equipmentRef.current['equipment_serial_number'].focus();
alert("이미 존재하는 시리얼 번호 입니다.");
}
}).catch((error) => {
console.log('userIdCheck() /user/equipmentSelectOne.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 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;
setIsSerialNumberCheck(false);
setEquipment({...equipment});
} else {
setEquipment(item);
}
setModalEquipmentIsOpen(true);
};
// 장비 관리(등록,수정) 모달창 닫기
const modalEquipmentClose = () => {
setModalEquipmentIsOpen(false);
};
// 장비 납품 모달창
const [modalDeliveryIsOpen, setModalDeliveryIsOpen] = React.useState(false);
// 장비 납품 모달창 열기
const modalDeliveryOpen = () => {
if (CommonUtil.isEmpty(equipmentDelivery.equipmentDeliveryDetailList)) {
alert("납품할 장비가 선택되지 않았습니다.");
return;
}
setModalDeliveryIsOpen(true);
};
// 장비 납품 모달창 닫기
const modalDeliveryClose = () => {
setModalDeliveryIsOpen(false);
};
//장비 납품 초기값
const equipmentDeliveryInit = {
'government_id': null,
'delivery_idx': null,
'delivery_date': CommonUtil.getDate(),
'delivery_total_price': null,
'delivery_insert_user_id': null,
equipmentDeliveryDetailList: [],
}
//장비 납품 정보
const [equipmentDelivery, setEquipmentDelivery] = useStateWithCallbackLazy({...equipmentDeliveryInit});
//장비 납품 모드 유무
const [isEquipmentDelivery, setIsEquipmentDelivery] = React.useState(false);
//장비 납품 선택
const equipmentDeliveryAdd = (equipment, isChecked) => {
const index = equipmentDelivery.equipmentDeliveryDetailList.findIndex(item => item['equipment_serial_number'] == equipment['equipment_serial_number']);
console.log('equipmentDeliveryAdd : ', equipment, isChecked, index);
if (isChecked == true && index == -1) {
equipmentDelivery.equipmentDeliveryDetailList.push(equipment);
setEquipmentDelivery({...equipmentDelivery});
} else if (isChecked == false && index > -1) {
equipmentDelivery.equipmentDeliveryDetailList.splice(index, 1);
setEquipmentDelivery({...equipmentDelivery});
} else {
return;
}
}
//장비 납품 선택 전체
const equipmentDeliveryAddAll = (isChecked) => {
if (isChecked) {
equipmentDelivery.equipmentDeliveryDetailList = [...stockEquipment.equipmentList];
setEquipmentDelivery({...equipmentDelivery});
} else {
equipmentDelivery.equipmentDeliveryDetailList = [];
setEquipmentDelivery({...equipmentDelivery});
}
}
//장비 납품
const equipmentDeliveryInsert = (governmentId) => {
if (CommonUtil.isEmpty(equipmentDelivery['delivery_date'])) {
alert("납품일자를 선택해 주세요.");
return;
}
if (CommonUtil.isEmpty(equipmentDelivery.equipmentDeliveryDetailList)) {
alert("납품할 장비가 선택되지 않았습니다.");
return;
}
equipmentDelivery['government_id'] = governmentId;
setEquipmentDelivery({...equipmentDelivery});
fetch("/equipment/equipmentDeliveryInsert.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(equipmentDelivery),
}).then((response) => response.json()).then((data) => {
console.log("장비 납품 결과(건수) : ", data);
if (data > 0) {
setEquipmentDelivery({...equipmentDeliveryInit});
modalDeliveryClose()
equipmentSearching();
setIsEquipmentDelivery(false);
setTabIndex(1);
alert("납품완료");
} else {
alert("장비납품에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('modalDelivery() /equipment/equipmentUpdate.json error : ', error);
});
}
//장비 납품 취소
const equipmentDeliveryDetailDeleteByDeliveryCancel = (equipment) => {
if (confirm('해당 장비의 납품을 취소하시겠습니까?') == false) {
return;
}
fetch("/equipment/equipmentDeliveryDetailDeleteByDeliveryCancel.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) {
equipmentSearching();
modalEquipmentClose();
alert("납품취소완료");
} else {
alert("납품취소에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('equipmentDeliveryDetailDeleteByDeliveryCancel() /equipment/equipmentDelete.json error : ', error);
});
}
//공통 검색 정보
const [equipmentSearch, setEquipmentSearch] = React.useState({
'equipment_state': null,
'searchType': CommonUtil.isEmpty(location.state) || CommonUtil.isEmpty(location.state['searchType']) ? null : location.state['searchType'],
'searchText': CommonUtil.isEmpty(location.state) || CommonUtil.isEmpty(location.state['searchText']) ? null : location.state['searchText']
});
//장비 정보 변경
const equipmentSearchChange = (targetKey, value) => {
let newSearch = {...equipmentSearch};
newSearch[targetKey] = value;
setEquipmentSearch(newSearch);
}
//장비 검색
const equipmentSearching = () => {
for (const key in equipmentSearch) {
stockEquipmentSearch[key] = equipmentSearch[key];
deliveryEquipmentSearch[key] = equipmentSearch[key];
}
setStockEquipmentSearch({...stockEquipmentSearch});
setDeliveryEquipmentSearch({...deliveryEquipmentSearch});
newEquipmentSelectList(1);
stockEquipmentSelectList(1);
deliveryEquipmentSelectList(1);
}
const equipmentSearchingEnter = (key) => {
if (key == 'Enter') {
equipmentSearching();
} else {
return;
}
}
//신규 장비 검색 정보
const [newEquipmentSearch, setNewEquipmentSearch] = React.useState({
'currentPage': 1,
'perPage': 10,
});
//신규 장비 목록
const [newEquipment, setNewEquipment] = React.useState({equipmentList: [], equipmentListCount: 0});
//신규 장비 목록 조회
const newEquipmentSelectList = (currentPage) => {
newEquipmentSearch.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
newEquipmentSearch['government_id'] = 'IS_NULL';
newEquipmentSearch['is_new_equipment'] = true;
setNewEquipmentSearch({...newEquipmentSearch});
fetch("/equipment/equipmentSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(newEquipmentSearch)
}).then((response) => response.json()).then((data) => {
console.log('newEquipmentSelectList response : ', data);
setNewEquipment(data);
}).catch((error) => {
console.log('newEquipmentSelectList error : ', error);
});
}
//재고 장비 검색 정보
const [stockEquipmentSearch, setStockEquipmentSearch] = React.useState({
'currentPage': 1,
'perPage': 10,
});
//재고 장비 목록
const [stockEquipment, setStockEquipment] = React.useState({equipmentList: [], equipmentListCount: 0});
//재고 장비 목록 조회
const stockEquipmentSelectList = (currentPage) => {
stockEquipmentSearch.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
stockEquipmentSearch['government_id'] = 'IS_NULL';
stockEquipmentSearch['is_new_equipment'] = false;
const newStockEquipmentSearch = {...stockEquipmentSearch};
setStockEquipmentSearch(newStockEquipmentSearch);
fetch("/equipment/equipmentSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(newStockEquipmentSearch)
}).then((response) => response.json()).then((data) => {
console.log('stockEquipmentSelectList response : ', data);
setStockEquipment(data);
}).catch((error) => {
console.log('stockEquipmentSelectList error : ', error);
});
}
//납품 장비 검색 정보
const [deliveryEquipmentSearch, setDeliveryEquipmentSearch] = React.useState({
'currentPage': 1,
'perPage': 10,
});
//납품 장비 목록
const [deliveryEquipment, setDeliveryEquipment] = React.useState({equipmentList: [], equipmentListCount: 0});
//납품 장비 목록 조회
const deliveryEquipmentSelectList = (currentPage) => {
deliveryEquipmentSearch.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
deliveryEquipmentSearch['government_id'] = CommonUtil.isEmpty(org['government_id']) ? 'IS_NOT_NULL' : org['government_id'];
const newDeliveryEquipmentSearch = {...deliveryEquipmentSearch};
setDeliveryEquipmentSearch(newDeliveryEquipmentSearch);
fetch("/equipment/equipmentSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(newDeliveryEquipmentSearch)
}).then((response) => response.json()).then((data) => {
console.log('deliveryEquipmentSelectList response : ', data);
setDeliveryEquipment(data);
}).catch((error) => {
console.log('deliveryEquipmentSelectList error : ', error);
});
}
//Mounted
React.useEffect(() => {
orgSelectListOfHierarchy();
equipmentStatesSelect();
equipmentSearching();
/* if (CommonUtil.isEmpty(location.state['searchType']) == false && CommonUtil.isEmpty(location.state['searchText']) == false
&& location.state['searchType'] == 'equipment_serial_number') {
} */
}, []);
//현재 탭 Index
const defaultTabIndex = CommonUtil.isEmpty(location.state) || CommonUtil.isEmpty(location.state['tabIndex']) ? 0 : location.state['tabIndex'];
const [tabIndex, setTabIndex] = React.useState(defaultTabIndex);
//탭 초기화
const tab = [{
title: `미등록 장비 (${newEquipment.equipmentListCount})`,
content: (
<div>
<div className="flex equip-tab">
<SubTitle explanation={"데이터 통신을 통해 확인된 장비 목록입니다. ★장비 정보를 업데이트해주세요.★"} />
{/* <div className="btn-wrap flex-end margin-bottom ">
{isEquipmentDelivery
? <>
<button className={"btn-small green-btn"} onClick={modalDeliveryOpen}>장비납품</button>
<button className={"btn-small red-btn"} onClick={() => {setIsEquipmentDelivery(false)}}>납품취소</button>
</>
: <>
<button className={"btn-small gray-btn"} onClick={() => {setIsEquipmentDelivery(true)}}>납품장비선택</button>
<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>
</tr>
</thead>
<tbody>
{newEquipment.equipmentList.map((item, idx) => { return (
<tr>
<td data-label="No">{newEquipment.equipmentListCount - idx - (newEquipmentSearch.currentPage - 1) * newEquipmentSearch.perPage}</td>
<td data-label="시스템등록일시">{item['equipment_insert_datetime']}</td>
<td data-label="시리얼넘버">{item['equipment_serial_number']}</td>
<td data-label="상태">{equipmentStates[item['equipment_state']]}</td>
<td data-label="관리">
<button className={"btn-small gray-btn"} onClick={() => modalEquipmentOpen(item)}>정보 수정</button>
</td>
</tr>
)})}
{CommonUtil.isEmpty(newEquipment.equipmentList) ?
<tr>
<td colSpan={8}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={newEquipmentSearch.currentPage}
perPage={newEquipmentSearch.perPage}
totalCount={newEquipment.equipmentListCount}
maxRange={5}
click={newEquipmentSelectList}
/>
</div>
)
}, {
title: `재고 장비 (${stockEquipment.equipmentListCount})`,
content: (
<div>
<div className="flex equip-tab">
<SubTitle explanation={"납품 가능한 장비 목록입니다."} />
<div className="btn-wrap flex-end margin-bottom ">
{isEquipmentDelivery
? <>
<button className={"btn-small green-btn"} onClick={modalDeliveryOpen}>장비납품</button>
<button className={"btn-small red-btn"} onClick={() => {setIsEquipmentDelivery(false)}}>납품취소</button>
</>
: <>
<button className={"btn-small gray-btn"} onClick={() => {setIsEquipmentDelivery(true)}}>납품장비선택</button>
<button className={"btn-small gray-btn"} onClick={() => {modalEquipmentOpen()}}>등록</button>
</>
}
</div>
</div>
<table class="caregiver-user protector-user">
<thead>
<tr>
{isEquipmentDelivery == true ?
<th>
<input type="checkbox"
onClick={(e) => equipmentDeliveryAddAll(e.target.checked)}
checked={equipmentDelivery.equipmentDeliveryDetailList.length == stockEquipment.equipmentList.length}
/>
</th>
: null}
<th>No</th>
<th>모델명</th>
<th>시리얼넘버</th>
<th>생산일자</th>
<th>입고일자</th>
<th>상태</th>
{isEquipmentDelivery == false ? <th>관리</th> : null}
</tr>
</thead>
<tbody>
{stockEquipment.equipmentList.map((item, idx) => { return (
<tr>
{isEquipmentDelivery == true
? <td>
<input type="checkbox"
onClick={(e) => equipmentDeliveryAdd(item, e.target.checked)}
checked={equipmentDelivery.equipmentDeliveryDetailList.findIndex(searchItem => searchItem['equipment_serial_number'] == item['equipment_serial_number']) > -1}
/>
</td>
: null}
<td data-label="No">{stockEquipment.equipmentListCount - idx - (stockEquipmentSearch.currentPage - 1) * stockEquipmentSearch.perPage}</td>
<td data-label="모델명">{item['equipment_name']}</td>
<td data-label="시리얼넘버">{item['equipment_serial_number']}</td>
<td data-label="생산일자">{item['equipment_product_date']}</td>
<td data-label="입고일자">{item['equipment_stock_date']}</td>
<td data-label="상태">{equipmentStates[item['equipment_state']]}</td>
{isEquipmentDelivery == false ?
<td data-label="관리">
<button className={"btn-small gray-btn"} onClick={() => modalEquipmentOpen(item)}>정보 수정</button>
</td>
: null}
</tr>
)})}
{CommonUtil.isEmpty(stockEquipment.equipmentList) ?
<tr>
<td colSpan={8}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={stockEquipmentSearch.currentPage}
perPage={stockEquipmentSearch.perPage}
totalCount={stockEquipment.equipmentListCount}
maxRange={5}
click={stockEquipmentSelectList}
/>
</div>
)
}, {
title: `납품 장비 (${deliveryEquipment.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>
<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>
{deliveryEquipment.equipmentList.map((item, idx) => { return (
<tr>
<td data-label="No">{deliveryEquipment.equipmentListCount - idx - (deliveryEquipmentSearch.currentPage - 1) * deliveryEquipmentSearch.perPage}</td>
<td data-label="납품기관">{item['government_name']}</td>
<td data-label="모델명">{item['equipment_name']}</td>
<td data-label="시리얼넘버">{item['equipment_serial_number']}</td>
<td data-label="생산일자">{item['equipment_product_date']}</td>
<td data-label="입고일자">{item['equipment_stock_date']}</td>
<td data-label="장비상태">{equipmentStates[item['equipment_state']]}</td>
<td data-label="대여상태">
{CommonUtil.isEmpty(item['senior_id'])
? <span className={"red"}>미대여</span>
: <span className={"green"}>대여중</span>
}
</td>
<td data-label="납품취소">
<button className={"btn-small red-btn"} onClick={() => equipmentDeliveryDetailDeleteByDeliveryCancel(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={9}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={deliveryEquipmentSearch.currentPage}
perPage={deliveryEquipmentSearch.perPage}
totalCount={deliveryEquipment.equipmentListCount}
maxRange={5}
click={deliveryEquipmentSelectList}
/>
</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}
</tbody>
</table>
</div>
<div className="flex-center">
{CommonUtil.isEmpty(equipment['equipment_insert_datetime'])
? <button className={"btn-small gray-btn"} onClick={equipmentInsert}>등록</button>
: <>
<button className={"btn-small gray-btn"}
onClick={equipmentUpdate}>수정</button>
<button className={"btn-small red-btn"} onClick={equipmentDelete}>삭제</button>
</>
}
</div>
</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" selected={equipmentSearch['searchType'] == 'equipment_name'}>모델명</option>
<option value="equipment_serial_number" selected={equipmentSearch['searchType'] == '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>
);
}