319 lines
20 KiB
JavaScript
319 lines
20 KiB
JavaScript
'use client'
|
|
|
|
import Pagination from "@/components/common/grid/Pagination";
|
|
import QGrid from "@/components/common/grid/QGrid";
|
|
import ReactSelect from "@/components/common/reactselect/ReactSelect";
|
|
import { useState } from "react";
|
|
|
|
export default function ProductInfoTable(){
|
|
const [gridProps, setGridProps] = useState({
|
|
gridData: [
|
|
{ planNumber: "1", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, " },
|
|
{ planNumber: "2", orderStatus: "O", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
|
|
{ planNumber: "3", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
|
|
{ planNumber: "4", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
|
|
{ planNumber: "5", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
|
|
],
|
|
gridColumns:[
|
|
{ headerName: "プラン番号 ", field: "planNumber", width: 100, cellStyle: {alignItems: "center"} },
|
|
{ headerName: "発注可 ", field: "orderStatus", width: 80, cellStyle: {alignItems: "center"} },
|
|
{ headerName: "モジュール ", field: "module", flex: 1, cellStyle: {alignItems: "flex-start"/* 좌측정렬*/ }},
|
|
{ headerName: "システム容量 ", field: "systemCapacity", width: 120, cellStyle: { alignItems: "flex-end"/* 우측정렬*/ } },
|
|
{ headerName: "屋根材 ", field: "roofMaterial", width: 140, wrapText: true, autoHeight: true,cellStyle: { alignItems: "flex-start"/* 좌측정렬*/} },
|
|
{ headerName: "施工方法 ", field: "constructionMethod",cellStyle: {alignItems: "flex-start"/* 좌측정렬*/ } },
|
|
{ headerName: "架台 ", field: "mountingStructure",cellStyle: { alignItems: "flex-start"/* 좌측정렬*/ } },
|
|
{ headerName: "パワーコンディショナー ", field: "powerConditioner", flex: 1, wrapText: true, autoHeight: true, cellStyle: {alignItems: "flex-start"/* 좌측정렬*/}},
|
|
{ headerName: "管理 ", field: "management", width: 200, autoHeight: true, cellStyle: { alignItems: "center" }, cellRenderer: (params) => {
|
|
return (
|
|
<div className='grid-cell-btn'>
|
|
<button className='grid-btn'><span className="file"></span>見積書の照会</button>
|
|
<button className='grid-btn'><span className="excel"></span>Excel</button>
|
|
</div>
|
|
);
|
|
}},
|
|
|
|
],
|
|
isPageable: true,
|
|
})
|
|
|
|
return(
|
|
<div className="sub-table-box">
|
|
<div className="promise-title-wrap">
|
|
<div className="promise-gudie"><span className="important">*</span> 必須入力項目</div>
|
|
<div className="left-unit-box">
|
|
<button className="btn-origin grey mr5">商品リスト</button>
|
|
<button className="btn-origin navy mr5">保存</button>
|
|
<button className="btn-origin grey">物の削除</button>
|
|
</div>
|
|
</div>
|
|
<div className="infomation-wrap">
|
|
<div className="infomation-table">
|
|
<table>
|
|
<colgroup>
|
|
<col style={{width: '200px'}}/>
|
|
<col />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th>設計依頼No.</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="product-input-wrap mr5">
|
|
<input type="text" className="product-input" defaultValue='1000000002' readOnly/>
|
|
<button className="product-delete"></button>
|
|
</div>
|
|
<button className="btn-origin grey">設計依頼のインポート</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>担当者 <span className="important">*</span></th>
|
|
<td>
|
|
<div className="input-wrap" style={{width : '500px'}}>
|
|
<input type="text" className="input-light" defaultValue='Kim Ji Young'/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>物品区分/物件名 <span className="important">*</span></th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="d-check-radio light mr10">
|
|
<input type="radio" name="radio01" id="ra01" />
|
|
<label htmlFor="ra01">新築</label>
|
|
</div>
|
|
<div className="d-check-radio light mr10">
|
|
<input type="radio" name="radio01" id="ra02" />
|
|
<label htmlFor="ra02">基軸</label>
|
|
</div>
|
|
<div className="input-wrap mr5" style={{width : '545px'}}>
|
|
<input type="text" className="input-light" defaultValue='jy0619_0625'/>
|
|
</div>
|
|
<div className="select-wrap" style={{width : '120px'}}>
|
|
<select className="select-light" name="" id="" >
|
|
<option>案件</option>
|
|
<option>案件</option>
|
|
<option>案件</option>
|
|
<option>案件</option>
|
|
<option>案件</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>商品名 ふりがな</th>
|
|
<td>
|
|
<div className="input-wrap" style={{width : '789px'}}>
|
|
<input type="text" className="input-light" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<div className="flx-box">
|
|
<div className="title">
|
|
一次販売店名/ID <span className="important">*</span>
|
|
</div>
|
|
<div className="tooltips">
|
|
<span>販売代理店または販売代理店IDを1文字以上入力してください。</span>
|
|
</div>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="select-wrap mr5" style={{width : '567px'}}>
|
|
<ReactSelect/>
|
|
</div>
|
|
<div className="input-wrap" style={{width : '216px'}}>
|
|
<input type="text" className="input-light" readOnly/>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<div className="flx-box">
|
|
<div className="title">
|
|
二次販売店名/ID <span className="important">*</span>
|
|
</div>
|
|
<div className="tooltips">
|
|
<span>販売代理店または販売代理店IDを1文字以上入力してください。</span>
|
|
</div>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="select-wrap mr5" style={{width : '567px'}}>
|
|
<ReactSelect/>
|
|
</div>
|
|
<div className="input-wrap" style={{width : '216px'}}>
|
|
<input type="text" className="input-light" readOnly/>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>郵便番号 <span className="important">*</span></th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="input-wrap mr5" style={{width : '200px'}}>
|
|
<input type="text" className="input-light" readOnly/>
|
|
</div>
|
|
<button className="btn-origin grey">住所検索</button>
|
|
<div className="guide">※ 郵便番号7桁を入力した後、アドレス検索ボタンをクリックしてください</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>都道府県 / 住所 <span className="important">*</span></th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="input-wrap mr5" style={{width : '200px'}}>
|
|
<input type="text" className="input-light" readOnly/>
|
|
</div>
|
|
<div className="input-wrap mr5" style={{width : '580px'}}>
|
|
<input type="text" className="input-light" />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>発電量シミュレーション地域 <span className="important">*</span></th>
|
|
<td>
|
|
<div className="select-wrap" style={{width : '200px'}} >
|
|
<select className="select-light" name="" id="" disabled>
|
|
<option>東京</option>
|
|
</select>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>基準風速 <span className="important">*</span></th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="select-wrap mr10" style={{width : '200px'}}>
|
|
<select className="select-light" name="" id="">
|
|
<option>40</option>
|
|
</select>
|
|
</div>
|
|
<span className="mr10">m/s以下</span>
|
|
<button className="btn-origin grey">風速選択</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>垂直説説 <span className="important">*</span></th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="select-wrap mr10" style={{width : '200px'}}>
|
|
<select className="select-light" name="" id="">
|
|
<option>40</option>
|
|
</select>
|
|
</div>
|
|
<span className="mr10">cm</span>
|
|
<div className="d-check-box light">
|
|
<input type="checkbox" id="ch01" />
|
|
<label htmlFor="ch01">寒冷地対策施行</label>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>面調図区分 <span className="important">*</span></th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="radio-wrap flx-box" style={{width: '239px'}}>
|
|
<div className="d-check-radio light mr10">
|
|
<input type="radio" name="radio02" id="ra03" />
|
|
<label htmlFor="ra03">III・IV</label>
|
|
</div>
|
|
<div className="d-check-radio light">
|
|
<input type="radio" name="radio02" id="ra04" />
|
|
<label htmlFor="ra04">II</label>
|
|
</div>
|
|
</div>
|
|
<div className="d-check-box light mr5">
|
|
<input type="checkbox" id="ch02" />
|
|
<label htmlFor="ch02">塩害地域用アイテムの使用</label>
|
|
</div>
|
|
<div className="tooltips"><span>塩害地域の定義は各メーカーの設置マニュアルをご確認ください</span></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>設置高さ <span className="important">*</span></th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="select-wrap mr10" style={{width : '200px'}}>
|
|
<select className="select-light" name="" id="">
|
|
<option>5</option>
|
|
</select>
|
|
</div>
|
|
<span>m</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>契約条件</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="d-check-radio light mr10">
|
|
<input type="radio" name="radio03" id="ra05" />
|
|
<label htmlFor="ra05">余剰</label>
|
|
</div>
|
|
<div className="d-check-radio light mr10">
|
|
<input type="radio" name="radio03" id="ra06" />
|
|
<label htmlFor="ra06">全量</label>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>メモ</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input type="text" className="input-light" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div className="table-box-title-wrap">
|
|
<div className="title-wrap">
|
|
<h3>プランリスト</h3>
|
|
<ul className="info-wrap">
|
|
<li>全体 <span className="red">28</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="information-help-wrap">
|
|
<div className="information-help-tit-wrap">
|
|
<div className="help-tit-icon"></div>
|
|
<div className="help-tit">ヘルプ</div>
|
|
</div>
|
|
<div className="information-help-guide">
|
|
<span>1.発注は同一品番基準1件のみ可能です。</span>
|
|
<span>2. [Excelダウンロード]は、見積書、図面、シミュレーション結果をExcelファイルとして一度にダウンロードします。</span>
|
|
<span>3.プラン情報をダブルクリックすると図面作成画面に移動します。</span>
|
|
</div>
|
|
</div>
|
|
<div className="information-grid">
|
|
<div className='q-grid no-cols'>
|
|
<QGrid {...gridProps}/>
|
|
<div className='pagination-wrap'>
|
|
<Pagination/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="sub-right-footer">
|
|
<button className="btn-origin grey mr5">商品リスト</button>
|
|
<button className="btn-origin navy mr5">保存</button>
|
|
<button className="btn-origin grey">物の削除</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |