qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

물건 상세 그리드 추가

Browse Source
This commit is contained in:
김창수 2024-10-15 13:58:21 +09:00
parent bd2b146a6e
commit f481ef729e
6 changed files with 106 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/static/images/sub/grid-btn-excel.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="elements">
<path id="Vector 4232" d="M0.499939 8.5556L0.681818 9.07093C1.38972 11.0766 1.74367 12.0795 2.55127 12.6509C3.35887 13.2223 4.42235 13.2223 6.54932 13.2223H8.45058C10.5775 13.2223 11.641 13.2223 12.4486 12.6509C13.2562 12.0795 13.6102 11.0766 14.3181 9.07093L14.5 8.5556" stroke="#94A0AD" stroke-linecap="round"/>
<path id="Vector" d="M7.49981 8.55556V0.777771M7.49981 8.55556C6.95518 8.55556 5.93766 7.00444 5.55536 6.61111M7.49981 8.55556C8.04443 8.55556 9.06195 7.00444 9.44425 6.61111" stroke="#94A0AD" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 682 B

8
public/static/images/sub/grid-btn-file.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="elements">
<path id="Rectangle 2175" d="M12.5556 6.25V5.41C12.5497 3.44799 12.487 2.40784 11.8095 1.73809C11.0629 1 9.8612 1 7.45783 1L6.09832 1C3.69495 1 2.49326 1 1.74663 1.73809C1 2.47618 1 3.66412 1 6.04L1 9.26C1 11.6359 1 12.8238 1.74663 13.5619C2.40945 14.2171 3.4309 14.2907 5.33333 14.299" stroke="#94A0AD" stroke-linecap="round"/>
<path id="Vector" d="M12.321 13.382L13.9999 15M13.2777 11.15C13.2777 9.4103 11.8226 8 10.0277 8C8.23278 8 6.77771 9.4103 6.77771 11.15C6.77771 12.8897 8.23278 14.3 10.0277 14.3C11.8226 14.3 13.2777 12.8897 13.2777 11.15Z" stroke="#94A0AD" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector 4435" d="M3.88879 4.5H9.66657" stroke="#94A0AD" stroke-linecap="round"/>
<path id="Vector 4436" d="M3.88879 7.29993H6.05546" stroke="#94A0AD" stroke-linecap="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 927 B

2
src/app/canvas/page.jsx
View File

@ -130,7 +130,7 @@ export default function CanvasPage() {
{/* <PlaneShapeOption/> */}
{/* 오브젝트 배치*/}
{/* <ObjectOption/> */}
<ObjectOption/>
{/* 표시변겅 */}
{/* <DisplayChange/> */}

1
src/app/management/productinfo/page.jsx
View File

@ -3,6 +3,7 @@ import Image from "next/image";
import Link from 'next/link';
import Footer from '@/components/layout/Footer';
import '@/styles/contents.scss';
import '@/styles/grid.scss';
import ProductInfoTable from "@/components/sub/management/productinfo/ProductInfoTable";
import ProductInfoBox from "@/components/sub/management/productinfo/ProductInfoBox";

43
src/components/sub/management/productinfo/ProductInfoTable.jsx
View File

@ -1,4 +1,40 @@
'use client'
import Pagination from "@/components/common/grid/Pagination";
import QGrid from "@/components/common/grid/QGrid";
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, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
{ 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: {display: 'flex', justifyContent: "center", alignItems: "center" } },
{ headerName: "発注可 ", field: "orderStatus", width: 80, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } },
{ headerName: "モジュール ", field: "module", flex: 1, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" }},
{ headerName: "システム容量 ", field: "systemCapacity", width: 120, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } },
{ headerName: "屋根材 ", field: "roofMaterial", width: 140, wrapText: true, autoHeight: true,cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } },
{ headerName: "施工方法 ", field: "constructionMethod",cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } },
{ headerName: "架台 ", field: "mountingStructure",cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } },
{ headerName: "パワーコンディショナー ", field: "powerConditioner", flex: 1, wrapText: true, autoHeight: true, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" }},
{ headerName: "管理 ", field: "management", width: 200,cellStyle: {display: 'flex', justifyContent: "center", 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-gudie"><span className="important">*</span> 必須入力項目</div>
@ -253,7 +289,12 @@ export default function ProductInfoTable(){
</div>
</div>
<div className="information-grid">
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>

48
src/styles/_grid-detail.scss
View File

@ -61,4 +61,52 @@
margin-left: 12px;
}
}
&.no-cols{
.ag-row{
&:nth-child(2n){
background-color: #fff;
}
}
}
}
// grid-button
.grid-cell-btn{
display: flex;
flex-direction: column;
gap: 5px;
width: 117px;
margin: 0 auto;
.grid-btn{
display: block;
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border: 1px solid #94A0AD;
background-color: transparent;
border-radius: 2px;
font-size: 13px;
color: #94A0AD;
font-weight: 400;
text-align: center;
span{
display: block;
margin-right: 5px;
&.file{
width: 13px;
height: 14px;
background: url(../../public/static/images/sub/grid-btn-file.svg)no-repeat center;
background-size: cover;
}
&.excel{
width: 14px;
height: 13px;
background: url(../../public/static/images/sub/grid-btn-excel.svg)no-repeat center;
background-size: cover;
}
}
}
}