150 lines
4.2 KiB
JavaScript
150 lines
4.2 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import axios from 'axios';
|
|
import {
|
|
CCard,
|
|
CCardBody,
|
|
CCardHeader,
|
|
CCol,
|
|
CRow,
|
|
CDropdown,
|
|
CDropdownDivider,
|
|
CDropdownItem,
|
|
CDropdownMenu,
|
|
CDropdownToggle,
|
|
/////
|
|
CButton,
|
|
CCardFooter,
|
|
CForm,
|
|
CFormGroup,
|
|
CFormText,
|
|
CTextarea,
|
|
CInput,
|
|
CInputFile,
|
|
CInputCheckbox,
|
|
CInputRadio,
|
|
CLabel,
|
|
CSelect,
|
|
CSwitch
|
|
} from '@coreui/react'
|
|
import CIcon from '@coreui/icons-react'
|
|
const FileDownload = require('js-file-download');
|
|
|
|
function Index() {
|
|
|
|
const baseUrl = "https://natnats.mobilous.com/";
|
|
|
|
var today = new Date();
|
|
|
|
var cdate = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
|
|
|
|
const [data, setData] = useState([]);
|
|
const [sdate, setSdate] = useState(cdate);
|
|
const [report, setReport] = useState('');
|
|
const [selectedcons, setSelectedCons] = useState('');
|
|
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
// You can await here
|
|
const result = await axios('https://natnats.mobilous.com/getConstructionList');
|
|
setData(result.data);
|
|
}
|
|
fetchData();
|
|
}, []);
|
|
|
|
function setingSDate(e){
|
|
setSdate(e.target.value);
|
|
}
|
|
function setingReport(e){
|
|
setReport(e.target.value);
|
|
}
|
|
|
|
function setingSelectedCons(e) {
|
|
setSelectedCons(e.target.value);
|
|
}
|
|
|
|
function doGetReport(){
|
|
if(report == "" || selectedcons == ""){
|
|
alert("Please select both Construction and Report");
|
|
return;
|
|
}
|
|
var url = baseUrl + "/" + report + "?construction_id=" +selectedcons+ "&construction_date="+sdate;
|
|
console.log(selectedcons);
|
|
console.log(sdate);
|
|
console.log(report);
|
|
downloadReport(url);
|
|
}
|
|
|
|
function downloadReport(url) {
|
|
const response = axios(url).then((res) => {
|
|
FileDownload(res.data, 'report.xls');
|
|
})
|
|
console.log(response);
|
|
}
|
|
|
|
return (
|
|
<CRow>
|
|
<CCol xs="12" sm="12" md="12">
|
|
<CCard>
|
|
<CCardHeader>
|
|
レポート
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
|
|
<CSelect custom name="cons_select" id="cons_select" onChange={setingSelectedCons}>
|
|
" <option value=''>-- 選択 --</option>"+
|
|
{
|
|
data.map((cc, index) => {
|
|
return(
|
|
<option key={cc.construction_id} value={cc.construction_id}>{cc.construction_name}</option>
|
|
)
|
|
})
|
|
}
|
|
</CSelect>
|
|
|
|
|
|
<CCard>
|
|
<CCardBody>
|
|
<CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
|
|
<CFormGroup row>
|
|
<CCol md="3">
|
|
<CLabel htmlFor="date-input">日付 ({sdate})</CLabel>
|
|
</CCol>
|
|
<CCol xs="12" md="9">
|
|
<CInput type="date" id="date-input" name="date-input" placeholder="日付" value={sdate} onChange={setingSDate}/>
|
|
</CCol>
|
|
</CFormGroup>
|
|
<CFormGroup row>
|
|
<CCol md="3">
|
|
<CLabel htmlFor="select">選択</CLabel>
|
|
</CCol>
|
|
<CCol xs="12" md="9">
|
|
<CSelect custom name="select" id="select" onChange={setingReport} value={report}>
|
|
<option value="">-- 選択 --</option>
|
|
<option value="generateBoxDisplacement">函体変位表</option>
|
|
<option value="generateMachineControl">オープンシールドマシン管理日報</option>
|
|
<option value="generateMachineSheet">オープンシールド機変位表</option>
|
|
<option value="generateMeasurement">函底高・偏位量測定一覧表</option>
|
|
<option value="generateCheckSheet">工程内検査表</option>
|
|
<option value="generateInjection">裏込注入材料受払い簿</option>
|
|
</CSelect>
|
|
</CCol>
|
|
</CFormGroup>
|
|
|
|
|
|
</CForm>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton type="submit" size="sm" color="primary" onClick={doGetReport}><CIcon name="cil-scrubber" /> ダウンロード</CButton>
|
|
</CCardFooter>
|
|
</CCard>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs="1" sm="1" md="1">
|
|
</CCol>
|
|
</CRow>
|
|
);
|
|
}
|
|
|
|
export default Index
|