물건현황 화면에서 견적서로 이동. 견적서 화면 작업
This commit is contained in:
parent
64c4a6ddca
commit
d65f27c036
@ -1,3 +1,9 @@
|
||||
import Estimate from '@/components/estimate/Estimate'
|
||||
|
||||
export default function EstimatePage() {
|
||||
return <div>이자리....</div>
|
||||
return (
|
||||
<>
|
||||
<Estimate />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
307
src/components/estimate/Estimate.jsx
Normal file
307
src/components/estimate/Estimate.jsx
Normal file
@ -0,0 +1,307 @@
|
||||
'use client'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import SingleDatePicker from '../common/datepicker/SingleDatePicker'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
|
||||
|
||||
export default function Estimate() {
|
||||
const { getMessage } = useMessage()
|
||||
const objectRecoil = useRecoilValue(floorPlanObjectState)
|
||||
console.log('견적서화면이군요', objectRecoil.floorPlanObjectNo)
|
||||
return (
|
||||
<div className="sub-content estimate">
|
||||
<div className="sub-content-inner">
|
||||
{/* 물건번호, 견적서번호, 등록일, 변경일시 시작 */}
|
||||
<div className="sub-content-box">
|
||||
<div className="sub-table-box">
|
||||
<div className="estimate-list-wrap one">
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.objectNo')}</div>
|
||||
<div className="estimate-name">RX524231020006 (Plan No: 1)</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.estimateNo')}</div>
|
||||
<div className="estimate-name">5242310200065242</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.createDatetime')}</div>
|
||||
<div className="estimate-name">9999.09.28</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.lastEditDatetime')}</div>
|
||||
<div className="estimate-name">9999.09.28 06:36</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 물건번호, 견적서번호, 등록일, 변경일시 끝 */}
|
||||
{/* 기본정보 시작 */}
|
||||
<div className="sub-content-box">
|
||||
<div className="sub-table-box">
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>{getMessage('estimate.detail.header.title')}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="common-table bt-able">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
{/* 1차 판매점명 */}
|
||||
<th>{getMessage('estimate.detail.saleStoreId')}</th>
|
||||
<td></td>
|
||||
{/* 견적일 */}
|
||||
<th>
|
||||
{getMessage('estimate.detail.estimateDate')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="date-picker" style={{ width: '350px' }}>
|
||||
<SingleDatePicker />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 2차 판매점명 */}
|
||||
<th>{getMessage('estimate.detail.otherSaleStoreId')}</th>
|
||||
<td></td>
|
||||
{/* 담당자 */}
|
||||
<th>
|
||||
{getMessage('estimate.detail.receiveUser')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '350px' }}>
|
||||
<input type="text" className="input-light" defaultValue={'물건정보에서 입력한 담당자명 표시'} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 안건명 */}
|
||||
<th>
|
||||
{getMessage('estimate.detail.title')} <span className="important">*</span>
|
||||
</th>
|
||||
<td colSpan={3}>
|
||||
<div className="form-flex-wrap">
|
||||
<div className="input-wrap mr5" style={{ width: '610px' }}>
|
||||
<input type="text" className="input-light" defaultValue={'안건명:::'} />
|
||||
</div>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input type="text" className="input-light" defaultValue={'경칭?'} />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 메모 */}
|
||||
<th>{getMessage('estimate.detail.remarks')}</th>
|
||||
<td colSpan={3}>물건정보에서 입력한 메모 표시</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 주문분류 */}
|
||||
<th>
|
||||
注文分類/주문분류 <span className="important">*</span>
|
||||
</th>
|
||||
<td colSpan={3}>
|
||||
<div className="radio-wrap"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 지붕재・사양시공 최대4개*/}
|
||||
<th>屋根材・仕様施工 / 지붕재・사양시공</th>
|
||||
<td colSpan={3}>
|
||||
<div className="form-flex-wrap mb5">
|
||||
<div className="input-wrap mr5" style={{ width: '610px' }}>
|
||||
<input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly />
|
||||
</div>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input type="text" className="input-light" defaultValue={'標準施工'} readOnly />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-flex-wrap mb5"></div>
|
||||
<div className="form-flex-wrap mb5"></div>
|
||||
{/* 마지막div엔 mb5 제외 */}
|
||||
<div className="form-flex-wrap"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 비고 */}
|
||||
<th>備考 /비고</th>
|
||||
<td colSpan={3}>
|
||||
<div className="input-wrap">
|
||||
<input type="text" className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 파일첨부 시작 */}
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>{getMessage('estimate.detail.header.fileList1')}</h3>
|
||||
<div className="d-check-box light mr5">
|
||||
<input type="checkbox" id="" />
|
||||
<label htmlFor="" style={{ color: '#101010' }}>
|
||||
後日資料提出 / 후일자료제출
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="common-table mb10">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{getMessage('estimate.detail.header.fileList1')}</th>
|
||||
<td>
|
||||
<div className="drag-file-box">
|
||||
<div className="btn-area">
|
||||
<button className="btn-origin grey">{getMessage('estimate.detail.fileList.btn')}</button>
|
||||
</div>
|
||||
<div className="drag-file-area">
|
||||
<p>Drag file here</p>
|
||||
<ul className="file-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 첨부파일 목록 시작 */}
|
||||
<div className="common-table bt-able">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{getMessage('estimate.detail.header.fileList2')}</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 첨부파일 목록 끝 */}
|
||||
{/* 파일첨부 끝 */}
|
||||
{/* 견적특이사항 시작 */}
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3 className="product">{getMessage('estimate.detail.header.specialEstimate')}</h3>
|
||||
<div className="product_tit">{getMessage('estimate.detail.header.specialEstimateProductInfo')}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 공통코드영역시작 */}
|
||||
<div className="special-note-check-wrap"></div>
|
||||
{/* 공통코드영역끝 */}
|
||||
{/* 견적특이사항 내용영역시작 */}
|
||||
<div className="calculation-estimate"></div>
|
||||
{/* 견적특이사항 내용영역끝 */}
|
||||
{/* 견적특이사항 끝 */}
|
||||
{/* 제품정보 시작 */}
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>{getMessage('estimate.detail.header.specialEstimateProductInfo')}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="estimate-wrap">
|
||||
<div className="estimate-list-wrap one">
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">수량 (PCS)</div>
|
||||
<div className="estimate-name blue">74</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">용량 (Kw)</div>
|
||||
<div className="estimate-name blue">8300</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">공급가액</div>
|
||||
<div className="estimate-name blue">6,798,900</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">부가세 (10％)</div>
|
||||
<div className="estimate-name blue">679,890</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">총액</div>
|
||||
<div className="estimate-name red">7,478,790</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* YJOD면 아래영역 숨김 */}
|
||||
<div className="common-table bt-able">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice')}
|
||||
<span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap">
|
||||
<input type="text" className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
<th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgWeight')}</th>
|
||||
<td>(모듈수량 * 수량) / 100)</td>
|
||||
<th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgPrice')}</th>
|
||||
<td>PKG단가(W) * PKG용량(W)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 제품정보 끝 */}
|
||||
{/* 가격표시영역시작 */}
|
||||
<div className="estimate-product-option">
|
||||
<div className="product-price-wrap">
|
||||
<div className="product-price-tit">{getMessage('estimate.detail.header.showPrice')}</div>
|
||||
<div className="select-wrap"></div>
|
||||
<button className="btn-origin grey ml5">{getMessage('estimate.detail.showPrice.btn1')}</button>
|
||||
</div>
|
||||
<div className="product-edit-wrap">
|
||||
<div className="product-edit-explane">
|
||||
<div className="click-check">
|
||||
<span className="ico"></span>
|
||||
{getMessage('estimate.detail.showPrice.description')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="product-edit-btn">
|
||||
<button className="btn-origin navy mr5">
|
||||
<span className="plus"></span>
|
||||
{getMessage('estimate.detail.showPrice.btn2')}
|
||||
</button>
|
||||
<button className="btn-origin grey">
|
||||
<span className="minus"></span>
|
||||
{getMessage('estimate.detail.showPrice.btn3')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 가격표시영역끝 */}
|
||||
{/* html테이블시작 */}
|
||||
<div className="q-grid no-cols"></div>
|
||||
{/* html테이블끝 */}
|
||||
</div>
|
||||
</div>
|
||||
{/* 기본정보끝 */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -257,7 +257,9 @@ export default function StuffDetail() {
|
||||
type="button"
|
||||
className="grid-btn"
|
||||
onClick={() => {
|
||||
console.log('견적서조회버튼클릭')
|
||||
//mid:5(견적서), /pid:플랜번호
|
||||
setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo })
|
||||
router.push(`/floor-plan/5/${params.data.planNo}`)
|
||||
}}
|
||||
>
|
||||
<span className="file"></span>
|
||||
@ -270,7 +272,8 @@ export default function StuffDetail() {
|
||||
console.log('엑셀버튼클릭')
|
||||
}}
|
||||
>
|
||||
<span className="excel"></span>Excel
|
||||
<span className="excel"></span>
|
||||
{getMessage('stuff.detail.planGrid.btn2')}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { useState, useMemo, useCallback, useEffect } from 'react'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { AgGridReact } from 'ag-grid-react'
|
||||
import 'ag-grid-community/styles/ag-grid.css'
|
||||
import 'ag-grid-community/styles/ag-theme-quartz.css'
|
||||
@ -8,7 +9,7 @@ export default function StuffPlanQGrid(props) {
|
||||
const [rowData, setRowData] = useState(null)
|
||||
// const [gridApi, setGridApi] = useState(null)
|
||||
const [colDefs, setColDefs] = useState(planGridColumns)
|
||||
|
||||
const { getMessage } = useMessage()
|
||||
const defaultColDef = useMemo(() => {
|
||||
return {
|
||||
flex: 1,
|
||||
@ -46,6 +47,7 @@ export default function StuffPlanQGrid(props) {
|
||||
pagination={isPageable}
|
||||
domLayout="autoHeight"
|
||||
suppressCellFocus={true}
|
||||
overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -707,5 +707,29 @@
|
||||
"surface.shape.validate.size.1to23": "①길이는 ②+③보다 큰 값을 넣어주세요.",
|
||||
"surface.shape.validate.size.2to3": "②길이는 ③보다 큰 값을 넣어주세요.",
|
||||
"surface.shape.validate.size.3to4": "③길이는 ④보다 큰 값을 넣어주세요.",
|
||||
"surface.shape.validate.size.4to5": "④길이는 ⑤보다 큰 값을 넣어주세요."
|
||||
"surface.shape.validate.size.4to5": "④길이는 ⑤보다 큰 값을 넣어주세요.",
|
||||
"estimate.detail.header.title": "基本情報",
|
||||
"estimate.detail.objectNo": "品番",
|
||||
"estimate.detail.estimateNo": "見積書番号",
|
||||
"estimate.detail.createDatetime": "登録日",
|
||||
"estimate.detail.lastEditDatetime": "変更日時",
|
||||
"estimate.detail.saleStoreId": "一次販売店名",
|
||||
"estimate.detail.estimateDate": "見積日",
|
||||
"estimate.detail.otherSaleStoreId": "二次販売店名",
|
||||
"estimate.detail.receiveUser": "担当者 ",
|
||||
"estimate.detail.title": "案件名",
|
||||
"estimate.detail.remarks": "メモ",
|
||||
"estimate.detail.header.fileList1": "ファイル添付",
|
||||
"estimate.detail.fileList.btn": "ファイル選択",
|
||||
"estimate.detail.header.fileList2": "添付ファイル一覧",
|
||||
"estimate.detail.header.specialEstimate": "見積もりの具体的な",
|
||||
"estimate.detail.header.specialEstimateProductInfo": "製品情報",
|
||||
"estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice": "住宅PKG単価 (W)",
|
||||
"estimate.detail.sepcialEstimateProductInfo.pkgWeight": "PKG容量 (Kw)",
|
||||
"estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG金額",
|
||||
"estimate.detail.header.showPrice": "価格表示",
|
||||
"estimate.detail.showPrice.btn1": "Pricing",
|
||||
"estimate.detail.showPrice.description": "クリックして製品の特異性を確認する",
|
||||
"estimate.detail.showPrice.btn2": "製品を追加",
|
||||
"estimate.detail.showPrice.btn3": "製品削除"
|
||||
}
|
||||
|
||||
@ -712,5 +712,29 @@
|
||||
"surface.shape.validate.size.1to23": "①길이는 ②+③보다 큰 값을 넣어주세요.",
|
||||
"surface.shape.validate.size.2to3": "②길이는 ③보다 큰 값을 넣어주세요.",
|
||||
"surface.shape.validate.size.3to4": "③길이는 ④보다 큰 값을 넣어주세요.",
|
||||
"surface.shape.validate.size.4to5": "④길이는 ⑤보다 큰 값을 넣어주세요."
|
||||
"surface.shape.validate.size.4to5": "④길이는 ⑤보다 큰 값을 넣어주세요.",
|
||||
"estimate.detail.header.title": "기본정보",
|
||||
"estimate.detail.objectNo": "물건번호",
|
||||
"estimate.detail.estimateNo": "견적서 번호",
|
||||
"estimate.detail.createDatetime": "등록일",
|
||||
"estimate.detail.lastEditDatetime": "변경일시",
|
||||
"estimate.detail.saleStoreId": "1차 판매점명",
|
||||
"estimate.detail.estimateDate": "견적일",
|
||||
"estimate.detail.otherSaleStoreId": "2차 판매점명",
|
||||
"estimate.detail.receiveUser": "담당자",
|
||||
"estimate.detail.title": "안건명",
|
||||
"estimate.detail.remarks": "메모",
|
||||
"estimate.detail.header.fileList1": "파일첨부",
|
||||
"estimate.detail.fileList.btn": "파일선택",
|
||||
"estimate.detail.header.fileList2": "첨부파일 목록",
|
||||
"estimate.detail.header.specialEstimate": "견적특이사항",
|
||||
"estimate.detail.header.specialEstimateProductInfo": "제품정보",
|
||||
"estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice": "주택PKG단가 (W)",
|
||||
"estimate.detail.sepcialEstimateProductInfo.pkgWeight": "PKG 용량 (Kw)",
|
||||
"estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG 금액",
|
||||
"estimate.detail.header.showPrice": "가격표시",
|
||||
"estimate.detail.showPrice.btn1": "Pricing",
|
||||
"estimate.detail.showPrice.description": "클릭하여 제품 특이사항 확인",
|
||||
"estimate.detail.showPrice.btn2": "제품추가",
|
||||
"estimate.detail.showPrice.btn3": "제품삭제"
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user