import '@grapecity/wijmo.styles/wijmo.css';
import 'bootstrap/dist/css/bootstrap.css';
import '@grapecity/wijmo.react.grid';
import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {Card, Grid, makeStyles, CardHeader, Typography} from '@material-ui/core';
import {FlexGrid, FlexGridColumn} from '@grapecity/wijmo.react.grid';
import {CellMaker} from '@grapecity/wijmo.grid.cellmaker';
import OrdvdTRFproductPopup from '../../popup/OrdvdTRFproductPopup';
import OrdvdTRFcustomerPopup from '../../popup/OrdvdTRFcustomerPopup';
import {useSelector} from 'react-redux';
import {gridSpacing} from '../../../store/constant';
const useStyles = makeStyles((theme) => ({
card: {
backgroundColor: theme.palette.grey[300],
position: 'relative'
},
inquiryBtn: {
width: '100%'
},
pagePst: {
position: 'absolute',
top: '30px',
right: '5px'
},
flexGrid: {
height: 600
}
}));
const OrdVendorTransferGrid = ({gridData, gridStyle, selectGridtype, selectGridStyle}) => {
const paraMeter = useSelector((state) => state.parameter);
const classes = useStyles();
const [grid, setGrid] = useState();
const [trfCustomerCode, setTrfCustomerCode] = useState([]);
const [trfProducCode, setTrfProducCode] = useState([]);
function initializeGrid(flex) {
setGrid(flex);
// flex.rows.defaultSize = 60;
// console.log('flex', flex);
// flex.formatItem.addHandler((flex, e) => {
// if (e.panel == flex.cells) {
// let col = flex.columns[e.col];
// if (col.binding === 'buttons') {
// e.cell.innerHTML = document.getElementById('btnCell').innerHTML;
// }
// }
// });
flex.addEventListener(flex.hostElement, 'click', (e) => {
let ht = flex.hitTest(e);
if (ht.panel.cellType === 1) {
let editItem = flex.rows[ht.row].dataItem;
let clickProductCode = editItem.PRODUCT_CODE;
let clickCustomerCode = editItem.DISTRIBUTOR_NO;
setTrfCustomerCode(clickCustomerCode);
setTrfProducCode(clickProductCode);
}
// if (e.target instanceof HTMLButtonElement) {
// // handle buttons
// switch (e.target.id) {
// // start editing this item
// case 'btnTest':
// alert('버튼을 클릭하셨습니다.');
// break;
// }
// }
});
}
//customer info(poppup)
const [customerInfo, setCustomerInfo] = useState([]);
async function SP_DP_MST_CUSTOMER_INFO() {
const res = await axios.patch(process.env.REACT_APP_REST_SERVER, {
p_language: paraMeter.language,
p_company: sessionStorage.getItem('userCompanyData'),
p_user: paraMeter.userid,
p_userip: paraMeter.userip,
p_pgm: 'SP_DP_MST_CUSTOMER_INFO',
p_option: {
in_custcode: trfCustomerCode
}
});
setCustomerInfo(res.data.rows);
console.log('SP_DP_MST_CUSTOMER_INFO.rows', res.data.rows);
// console.log("SP_DP_MST_PRODUCT_INFO.rtnResult", res.data.rtnResult);
// console.log("SP_DP_MST_PRODUCT_INFO.rtnMessage", res.data.rtnMessage);
}
useEffect(() => {
if (trfCustomerCode.length > 0) {
SP_DP_MST_CUSTOMER_INFO();
}
return () => {};
}, [trfCustomerCode]);
//product info(popup)
const [producInfo, setProducInfo] = useState([]);
async function SP_DP_MST_PRODUCT_INFO() {
const res = await axios.patch(process.env.REACT_APP_REST_SERVER, {
p_language: paraMeter.language,
p_company: sessionStorage.getItem('userCompanyData'),
p_user: paraMeter.userid,
p_userip: paraMeter.userip,
p_pgm: 'SP_DP_MST_PRODUCT_INFO',
p_option: {
in_productcode: trfProducCode
}
});
setProducInfo(res.data.rows);
console.log('SP_DP_MST_PRODUCT_INFO.rows', res.data.rows);
// console.log("SP_DP_MST_PRODUCT_INFO.rtnResult", res.data.rtnResult);
// console.log("SP_DP_MST_PRODUCT_INFO.rtnMessage", res.data.rtnMessage);
}
useEffect(() => {
if (trfProducCode.length > 0) {
SP_DP_MST_PRODUCT_INFO();
}
return () => {};
}, [trfProducCode]);
const [producPopup, setProducPopup] = useState();
const productInfoPopup = () => {
setProducPopup((isOpen) => !isOpen);
};
const [customerPopup, setCustomerPopup] = useState();
const customerInfoPopup = () => {
setCustomerPopup((isOpen) => !isOpen);
};
return (
<div className="ordvendortransfergrid">
<Grid container spacing={gridSpacing}>
<Grid item xs={12}>
<Card className={classes.card}>
<CardHeader title={<Typography variant="h3">Order Status</Typography>} />
<div className={classes.pagePst}>
<div className="input-group input-group-sm">
<span className="label-span input-group-text" id="label-span">
<Typography variant="h5">Row Count</Typography>
</span>
<select className="form-select" onChange={selectGridStyle} value={selectGridtype}>
{gridStyle.map((el, i) => (
<option value={el.children} key={i}>
{el.title}
</option>
))}
</select>
</div>
</div>
<FlexGrid
className={classes.flexGrid}
isReadOnly={true} // true일때 row값 수정안됨. false일때 row값 수정 가능.
// selectionMode="Row" 주석 해제시 한개의 row만 선택됨.
itemsSource={gridData}
initialized={initializeGrid}
allowSorting={false} // 컬럼 헤드 내림차순 오름차순
allowDragging={false} // 컬럼 헤드 전체 행 선택
stickyHeaders={true} // 컬럼 헤드 고정
// allowAddNew={true}
// allowDelete={true}
alternatingRowStep={0}
headersVisibility="Column"
autoGenerateColumns={false}
>
<FlexGridColumn
width={100}
binding="STATUS"
header="Status"
// format="d*"
align="center"
/>
<FlexGridColumn width={90} binding="ISSUE_DATE" header="Issue Date" align="center" />
<FlexGridColumn width={90} binding="DELIVERY_NO" align="center" header="Delivery No" />
<FlexGridColumn width={100} binding="DELIVERY_DATE" align="center" format="d" header="Delivery Date" />
<FlexGridColumn
width={100}
binding="DISTRIBUTOR_NO"
align="center"
header="Distributor No"
cellTemplate={CellMaker.makeButton({
click: (e, ctx) => customerInfoPopup()
})}
/>
<FlexGridColumn width={110} binding="WAREHOUSE_NO" align="center" header="Warehouse No" />
<FlexGridColumn width={90} binding="RMA_PO_NO" align="center" header="RMA PO No" />
<FlexGridColumn width={100} binding="CAR_MAKER_NO" align="center" header="Car Maker No" />
<FlexGridColumn width={120} binding="CAR_DEALER_CODE" align="center" header="Car Dealer Code" />
<FlexGridColumn
minWidth={220}
binding="CAR_DEALER_NEXEN_ACCOUNT_CODE"
header="Car Dealer Nexen Account Code"
align="center"
/>
<FlexGridColumn width={130} binding="PURCHASE_ORDER_NO" align="center" header="Purchase Order No" />
<FlexGridColumn
width={110}
padding={0}
align="center"
// binding="buttons"
isReadOnly={true}
allowSorting={false}
binding="PRODUCT_CODE"
header="Product Code"
// cellTemplate={CellMaker.makeButton({
// click: (e, ctx) => productInfoPopup()
// })}
cellTemplate={CellMaker.makeButton({
click: (e, ctx) => productInfoPopup()
})}
/>
<FlexGridColumn width={100} binding="DELIVERY_QTY" align="center" header="Delivery Q'ty" />
<FlexGridColumn width="*" minWidth={120} binding="" align="center" header="Remark" />
</FlexGrid>
{/* <div id="btnCell">
<div>버튼</div>
<Button id="btnTest" className="bn btn-default btn-sm" style={{height: '20px'}}>
<Typography variant="h6">More Info</Typography>
</Button>
</div> */}
</Card>
</Grid>
<div className={customerPopup ? 'customerpopup-show' : 'customerpopup-hide'}>
<OrdvdTRFcustomerPopup
trfCustomerCode={trfCustomerCode}
customerInfoPopup={customerInfoPopup}
customerInfo={customerInfo}
/>
</div>
<div className={producPopup ? 'producinfopopup-show' : 'producinfopopup-hide'}>
<OrdvdTRFproductPopup producInfo={producInfo} trfProducCode={trfProducCode} productInfoPopup={productInfoPopup} />
</div>
</Grid>
</div>
);
};
export default OrdVendorTransferGrid;
첫번째 스크린샷은 튜토리얼보고 적용한 버튼 형식입니다.
row의 cell 내부에 버튼이 한 공간을 모두 차지하지만 소스의 데이터 바인딩을 하여 버튼 내부에 데이터 값이 나옵니다.
위 스크린샷은 문의사항에 제공해주신 소스입니다.