175 lines
11 KiB
JavaScript
175 lines
11 KiB
JavaScript
'use client'
|
|
|
|
import SingleDatePicker from "@/components/common/datepicker/SingleDatePicker";
|
|
import Pagination from "@/components/common/grid/Pagination";
|
|
import QGrid from "@/components/common/grid/QGrid";
|
|
import { useState } from "react";
|
|
|
|
const HeaderRadioButton = () => {
|
|
return(
|
|
<div className="d-check-radio pop no-text">
|
|
<input type="radio" name="radio99" id="ra99" disabled/>
|
|
<label htmlFor="ra99"></label>
|
|
</div>
|
|
)
|
|
}
|
|
const CellRadioButton = () => {
|
|
return(
|
|
<div className="d-check-radio light no-text">
|
|
<input type="radio" name="radio98" id="ra98" />
|
|
<label htmlFor="ra98"></label>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function DesignRequestPop(){
|
|
const [gridProps, setGridProps] = useState({
|
|
gridData: [
|
|
{ status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
|
|
{ status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
|
|
{ status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
|
|
{ status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
|
|
],
|
|
gridColumns:[
|
|
{ field: "radio", width: 45, cellRenderer: CellRadioButton, headerComponent: HeaderRadioButton, cellStyle: { display: 'flex', alignItems: 'center', justifyContent: 'center' }},
|
|
{ headerName: "状態 ", field: "status", width: 100, cellStyle: { textAlign: "center" } },
|
|
{ headerName: "設計依頼番号", field: "designRequestNumber", cellStyle: { textAlign: "center" } },
|
|
{ headerName: "販売代理店ID", field: "salesAgentID" },
|
|
{ headerName: "販売代理店名", field: "salesAgentName" },
|
|
{ headerName: "案件名", field: "projectName" },
|
|
{ headerName: "都道府県", field: "prefecture" },
|
|
{ headerName: "設置家屋数 ", field: "installedHouses", cellStyle: { textAlign: "center" } },
|
|
{ headerName: "依頼者名 ", field: "clientName", cellStyle: { textAlign: "center" } },
|
|
{ headerName: "設計依頼提出日 ", field: "submissionDate", cellStyle: { textAlign: "center" } },
|
|
],
|
|
isPageable: true,
|
|
})
|
|
|
|
return(
|
|
<div className="modal-popup">
|
|
<div className="modal-dialog big">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<h1 className="title">設計依頼のインポート </h1>
|
|
<button className="modal-close">닫기</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="modal-body-inner">
|
|
<div className="design-tit-wrap">
|
|
<h3>設計依頼検索</h3>
|
|
<div className="design-search-wrap">
|
|
<button className="btn-origin grey mr5">検索</button>
|
|
<button className="btn-origin navy ">初期化</button>
|
|
</div>
|
|
</div>
|
|
<div className="design-request-table">
|
|
<div className="common-table">
|
|
<table>
|
|
<colgroup>
|
|
<col style={{width : '160px'}}/>
|
|
<col />
|
|
<col style={{width : '160px'}}/>
|
|
<col />
|
|
<col style={{width : '160px'}}/>
|
|
<col />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th>設計依頼番号</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input type="text" className="input-light" />
|
|
</div>
|
|
</td>
|
|
<th>案件名</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input type="text" className="input-light" />
|
|
</div>
|
|
</td>
|
|
<th>都道府県</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input type="text" className="input-light" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>販売代理店名</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input type="text" className="input-light" />
|
|
</div>
|
|
</td>
|
|
<th>依頼者名</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input type="text" className="input-light" />
|
|
</div>
|
|
</td>
|
|
<th>状態</th>
|
|
<td>
|
|
<div className="select-wrap">
|
|
<select className="select-light" name="" id="" >
|
|
<option>All</option>
|
|
</select>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>期間検索</th>
|
|
<td colSpan={5}>
|
|
<div className="form-flex-wrap">
|
|
<div className="radio-wrap mr10">
|
|
<div className="d-check-radio light mr10">
|
|
<input type="radio" name="radio04" id="ra07" />
|
|
<label htmlFor="ra07">提出日</label>
|
|
</div>
|
|
<div className="d-check-radio light">
|
|
<input type="radio" name="radio04" id="ra08" />
|
|
<label htmlFor="ra08">受付日</label>
|
|
</div>
|
|
</div>
|
|
<div className="date-picker-wrap">
|
|
<div className="date-picker" style={{flex: 1}}>
|
|
<SingleDatePicker/>
|
|
</div>
|
|
<span> ~ </span>
|
|
<div className="date-picker" style={{flex: 1}}>
|
|
<SingleDatePicker/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div className="design-request-grid">
|
|
<div className="design-request-count">
|
|
<div className="design-request-grid-tit">Plan List</div>
|
|
<div className="select-wrap">
|
|
<select className="select-light" name="" id="" >
|
|
<option>20</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className='q-grid'>
|
|
<QGrid {...gridProps}/>
|
|
<div className='pagination-wrap'>
|
|
<Pagination/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="footer-btn-wrap">
|
|
<button className="btn-origin grey mr5">閉じる</button>
|
|
<button className="btn-origin navy ">選択の適用</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |