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

grid 폼 정렬 수정

Browse Source
This commit is contained in:
김창수 2024-10-24 10:07:28 +09:00
parent 4d5b9acd70
commit bf5d9a9fba
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,15 +15,15 @@ export default function ProductInfoTable(){
{ 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" }, { 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:[ gridColumns:[
{ headerName: "プラン番号 ", field: "planNumber", width: 100, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } }, { headerName: "プラン番号 ", field: "planNumber", width: 100, cellStyle: {justifyContent: "center"} },
{ headerName: "発注可 ", field: "orderStatus", width: 80, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } }, { headerName: "発注可 ", field: "orderStatus", width: 80, cellStyle: {justifyContent: "center"} },
{ headerName: "モジュール ", field: "module", flex: 1, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" }}, { headerName: "モジュール ", field: "module", flex: 1, cellStyle: {justifyContent: "flex-start"/* 좌측정렬*/ }},
{ headerName: "システム容量 ", field: "systemCapacity", width: 120, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } }, { headerName: "システム容量 ", field: "systemCapacity", width: 120, cellStyle: { justifyContent: "flex-end"/* 우측정렬*/ } },
{ headerName: "屋根材 ", field: "roofMaterial", width: 140, wrapText: true, autoHeight: true,cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } }, { headerName: "屋根材 ", field: "roofMaterial", width: 140, wrapText: true, autoHeight: true,cellStyle: { justifyContent: "flex-start"/* 좌측정렬*/} },
{ headerName: "施工方法 ", field: "constructionMethod",cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } }, { headerName: "施工方法 ", field: "constructionMethod",cellStyle: {justifyContent: "flex-start"/* 좌측정렬*/ } },
{ headerName: "架台 ", field: "mountingStructure",cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } }, { headerName: "架台 ", field: "mountingStructure",cellStyle: { justifyContent: "flex-start"/* 좌측정렬*/ } },
{ headerName: "パワーコンディショナー ", field: "powerConditioner", flex: 1, wrapText: true, autoHeight: true, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" }}, { headerName: "パワーコンディショナー ", field: "powerConditioner", flex: 1, wrapText: true, autoHeight: true, cellStyle: {justifyContent: "flex-start"/* 좌측정렬*/}},
{ headerName: "管理 ", field: "management", width: 200, autoHeight: true, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" }, cellRenderer: (params) => { { headerName: "管理 ", field: "management", width: 200, autoHeight: true, cellStyle: { justifyContent: "center" }, cellRenderer: (params) => {
return ( return (
<div className='grid-cell-btn'> <div className='grid-cell-btn'>
<button className='grid-btn'><span className="file"></span>見積書の照会</button> <button className='grid-btn'><span className="file"></span>見積書の照会</button>

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

@ -9,6 +9,7 @@
--ag-header-foreground-color: white; --ag-header-foreground-color: white;
--ag-header-background-color: #5D6A76; --ag-header-background-color: #5D6A76;
--ag-row-hover-color: #ECF0F4; --ag-row-hover-color: #ECF0F4;
// --ag-header-cell-hover-background-color: rgb(80, 40, 140); // --ag-header-cell-hover-background-color: rgb(80, 40, 140);
--ag-header-cell-moving-background-color: #5D6A76; --ag-header-cell-moving-background-color: #5D6A76;
.ag-root-wrapper{ .ag-root-wrapper{
@ -42,9 +43,16 @@
} }
} }
.ag-cell{ .ag-cell{
display: flex;
align-items: center;
font-size: 13px; font-size: 13px;
color: #45576F; color: #45576F;
line-height: 1.4; line-height: 1.4 !important;
padding-top: 10px;
padding-bottom: 10px;
.block{
display: block;
}
} }
.ag-icon-desc::before, .ag-icon-desc::before,
.ag-icon-asc::before, .ag-icon-asc::before,
@ -87,7 +95,6 @@
gap: 5px; gap: 5px;
width: 117px; width: 117px;
margin: 0 auto; margin: 0 auto;
padding: 15px 0;
.grid-btn{ .grid-btn{
display: block; display: block;
width: 100%; width: 100%;