견적서 상세화면버튼 기능 정의 CanvasMenu.jsx 팝업작업

src/components/estimate/Estimate.jsx

@@ -539,7 +539,7 @@ export default function Estimate({ params }) {
                       return (
                         <dl>
                           <dt>{row.codeNm}</dt>
-                          <dd>{row.remarks}</dd>
+                          <dd dangerouslySetInnerHTML={{ __html: row.remarks }}></dd>
                         </dl>
                       )
                     }

src/components/estimate/popup/DocDownOptionPop.jsx

@@ -0,0 +1,255 @@
+'use client'
+import { useState } from 'react'
+import { useMessage } from '@/hooks/useMessage'
+import { useAxios } from '@/hooks/useAxios'
+import { useRecoilValue } from 'recoil'
+import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
+
+export default function DocDownOptionPop({ planNo, setEstimatePopupOpen }) {
+  // console.log('플랜번호::::::::::::', planNo)
+  const { getMessage } = useMessage()
+  const { promiseGet } = useAxios()
+
+  //다운로드 파일 EXCEL
+  const [schUnitPriceFlg, setSchUnitPriceFlg] = useState('0')
+
+  //견적제출서 표시명
+  const [schDisplayFlg, setSchSchDisplayFlg] = useState('0')
+  //가대 중량표 포함
+  const [schWeightFlg, setSchWeightFlg] = useState('0')
+  //도면/시뮬레이션 파일 포함
+  const [schDrawingFlg, setSchDrawingFlg] = useState('0')
+
+  // recoil 물건번호
+  const objectRecoil = useRecoilValue(floorPlanObjectState)
+
+  //문서 다운로드
+  const handleFileDown = async () => {
+    // console.log('물건번호:::', objectRecoil.floorPlanObjectNo)
+    // console.log('planNo::', planNo)
+    // 고른 옵션값들
+    //0 : 견적가 Excel 1 : 정가용Excel 2: 견적가 PDF 3 :정가용PDF
+    // console.log(schUnitPriceFlg)
+    // console.log(schDisplayFlg)
+    // console.log(schWeightFlg)
+    // console.log(schDrawingFlg)
+    const url = '/api/estimate/excel-download'
+    const params = {}
+    const options = { responseType: 'blob' }
+  }
+
+  return (
+    <div className="modal-popup">
+      <div className="modal-dialog middle">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h1 className="title">{getMessage('estimate.detail.docPopup.title')}</h1>
+            <button
+              type="button"
+              className="modal-close"
+              onClick={() => {
+                setEstimatePopupOpen(false)
+              }}
+            >
+              {getMessage('estimate.detail.docPopup.close')}
+            </button>
+          </div>
+          <div className="modal-body">
+            <div className="modal-body-inner">
+              <div className="explane">{getMessage('estimate.detail.docPopup.explane')}</div>
+              <div className="common-table">
+                <table>
+                  <colgroup>
+                    <col style={{ width: '260px' }} />
+                    <col />
+                  </colgroup>
+                  <tbody>
+                    <tr>
+                      <th>
+                        {getMessage('estimate.detail.docPopup.schUnitPriceFlg')}
+                        <span className="red">*</span>
+                      </th>
+                      <td>
+                        <div className="form-flex-wrap">
+                          <div className="d-check-radio light mr10">
+                            <input
+                              type="radio"
+                              id="schUnitPriceFlg0"
+                              name="schUnitPriceFlg"
+                              value={'0'}
+                              checked={schUnitPriceFlg === '0'}
+                              onChange={(e) => {
+                                setSchUnitPriceFlg(e.target.value)
+                              }}
+                            />
+                            <label htmlFor="schUnitPriceFlg0">{getMessage('estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg0')}</label>
+                          </div>
+                          <div className="d-check-radio light mr10">
+                            <input
+                              type="radio"
+                              id="schUnitPriceFlg1"
+                              name="schUnitPriceFlg"
+                              value={'1'}
+                              checked={schUnitPriceFlg === '1'}
+                              onChange={(e) => {
+                                setSchUnitPriceFlg(e.target.value)
+                              }}
+                            />
+                            <label htmlFor="schUnitPriceFlg1">{getMessage('estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg1')}</label>
+                          </div>
+                          <div className="d-check-radio light mr10">
+                            <input
+                              type="radio"
+                              id="schUnitPricePdfFlg0"
+                              name="schUnitPriceFlg"
+                              value={'2'}
+                              checked={schUnitPriceFlg === '2'}
+                              onChange={(e) => {
+                                setSchUnitPriceFlg(e.target.value)
+                              }}
+                            />
+                            <label htmlFor="schUnitPricePdfFlg0">{getMessage('estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg2')}</label>
+                          </div>
+                          <div className="d-check-radio light ">
+                            <input
+                              type="radio"
+                              id="schUnitPricePdfFlg1"
+                              name="schUnitPriceFlg"
+                              value={'3'}
+                              checked={schUnitPriceFlg === '3'}
+                              onChange={(e) => {
+                                setSchUnitPriceFlg(e.target.value)
+                              }}
+                            />
+                            <label htmlFor="schUnitPricePdfFlg1">{getMessage('estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg3')}</label>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>
+                        {getMessage('estimate.detail.docPopup.schDisplayFlg')} <span className="red">*</span>
+                      </th>
+                      <td>
+                        <div className="form-flex-wrap">
+                          <div className="d-check-radio light mr10">
+                            <input
+                              type="radio"
+                              name="schDisplayFlg"
+                              id="schDisplayFlg0"
+                              value={'0'}
+                              checked={schDisplayFlg === '0'}
+                              onChange={(e) => {
+                                setSchSchDisplayFlg(e.target.value)
+                              }}
+                            />
+                            <label htmlFor="schDisplayFlg0">{getMessage('estimate.detail.docPopup.schDisplayFlg.schDisplayFlg0')}</label>
+                          </div>
+                          <div className="d-check-radio light">
+                            <input
+                              type="radio"
+                              name="schDisplayFlg"
+                              id="schDisplayFlg1"
+                              value={'1'}
+                              checked={schDisplayFlg === '1'}
+                              onChange={(e) => {
+                                setSchSchDisplayFlg(e.target.value)
+                              }}
+                            />
+                            <label htmlFor="schDisplayFlg1">{getMessage('estimate.detail.docPopup.schDisplayFlg.schDisplayFlg1')}</label>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>
+                        {getMessage('estimate.detail.docPopup.schWeightFlg')} <span className="red">*</span>
+                      </th>
+                      <td>
+                        <div className="form-flex-wrap">
+                          <div className="d-check-radio light mr10">
+                            <input
+                              type="radio"
+                              name="schWeightFlg"
+                              id="schWeightFlg0"
+                              value={'0'}
+                              checked={schWeightFlg === '0'}
+                              onChange={(e) => {
+                                setSchWeightFlg(e.target.value)
+                              }}
+                            />
+                            <label htmlFor="schWeightFlg0">{getMessage('estimate.detail.docPopup.schWeightFlg.schWeightFlg0')}</label>
+                          </div>
+                          <div className="d-check-radio light">
+                            <input
+                              type="radio"
+                              name="schWeightFlg"
+                              id="schWeightFlg1"
+                              value={'1'}
+                              checked={schWeightFlg === '1'}
+                              onChange={(e) => {
+                                setSchWeightFlg(e.target.value)
+                              }}
+                            />
+                            <label htmlFor="schWeightFlg1">{getMessage('estimate.detail.docPopup.schWeightFlg.schWeightFlg1')}</label>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>{getMessage('estimate.detail.docPopup.schDrawingFlg')}</th>
+                      <td>
+                        <div className="form-flex-wrap">
+                          <div className="d-check-radio light mr10">
+                            <input
+                              type="radio"
+                              name="schDrawingFlg"
+                              id="schDrawingFlg0"
+                              value={'0'}
+                              checked={schDrawingFlg === '0'}
+                              onChange={(e) => {
+                                setSchDrawingFlg(e.target.value)
+                              }}
+                            />
+                            <label htmlFor="schDrawingFlg0">{getMessage('estimate.detail.docPopup.schDrawingFlg.schDrawingFlg0')}</label>
+                          </div>
+                          <div className="d-check-radio light">
+                            <input
+                              type="radio"
+                              name="schDrawingFlg"
+                              id="schDrawingFlg01"
+                              value={'1'}
+                              checked={schDrawingFlg === '1'}
+                              onChange={(e) => {
+                                setSchDrawingFlg(e.target.value)
+                              }}
+                            />
+                            <label htmlFor="schDrawingFlg01">{getMessage('estimate.detail.docPopup.schDrawingFlg.schDrawingFlg1')}</label>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div className="footer-btn-wrap">
+              <button
+                type="button"
+                className="btn-origin grey mr5"
+                onClick={() => {
+                  setEstimatePopupOpen(false)
+                }}
+              >
+                {getMessage('estimate.detail.docPopup.close')}
+              </button>
+              <button type="button" className="btn-origin navy" onClick={() => handleFileDown()}>
+                {getMessage('estimate.detail.docPopup.docDownload')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/floor-plan/CanvasMenu.jsx

@@ -34,6 +34,7 @@ import { MENU } from '@/common/common'
 
 import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
 import { estimateState } from '@/store/floorPlanObjectAtom'
+import DocDownOptionPop from '../estimate/popup/DocDownOptionPop'
 
 export default function CanvasMenu(props) {
   const { menuNumber, setMenuNumber } = props
@@ -54,8 +55,10 @@ export default function CanvasMenu(props) {
   const canvas = useRecoilValue(canvasState)
   const { handleZoomClear, handleZoom } = useCanvasEvent()
   const { handleMenu } = useMenu()
+
   const { handleEstimateSubmit } = useEstimateController()
   const estimateRecoilState = useRecoilValue(estimateState)
+  const [estimatePopupOpen, setEstimatePopupOpen] = useState(false)
 
   const { getMessage } = useMessage()
   const { currentCanvasPlan, saveCanvas } = usePlan()
@@ -262,7 +265,7 @@ export default function CanvasMenu(props) {
           {menuNumber === 5 && (
             <>
               <div className="ico-btn-from">
-                <button className="btn-frame gray ico-flx">
+                <button className="btn-frame gray ico-flx" onClick={() => setEstimatePopupOpen(true)}>
                   <span className="ico ico01"></span>
                   <span>{getMessage('plan.menu.estimate.docDown')}</span>
                 </button>
@@ -313,6 +316,8 @@ export default function CanvasMenu(props) {
       <div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
         {(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) && <MenuDepth01 />}
       </div>
+      {/* 견적서(menuNumber=== 5) 상세화면인경우 문서다운로드 팝업 */}
+      {estimatePopupOpen && <DocDownOptionPop planNo={estimateRecoilState?.planNo} setEstimatePopupOpen={setEstimatePopupOpen} />}
     </div>
   )
 }

src/locales/ja.json

@@ -850,6 +850,24 @@
   "estimate.detail.itemTableHeader.col5": "単位",
   "estimate.detail.itemTableHeader.col6": "単価",
   "estimate.detail.itemTableHeader.col7": "金額 (税別別)",
+  "estimate.detail.docPopup.title": "ドキュメントダウンロードオプションの設定",
+  "estimate.detail.docPopup.explane": "ダウンロードする文書のオプションを選択したら、 [文書のダウンロード]ボタンをクリックします.",
+  "estimate.detail.docPopup.schUnitPriceFlg": "ダウンロードファイル",
+  "estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg0": "見積もり Excel",
+  "estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg1": "定価用 Excel",
+  "estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg2": "見積もり PDF",
+  "estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg3": "定価用 PDF",
+  "estimate.detail.docPopup.schDisplayFlg": "見積提出先表示名",
+  "estimate.detail.docPopup.schDisplayFlg.schDisplayFlg0": "販売店名",
+  "estimate.detail.docPopup.schDisplayFlg.schDisplayFlg1": "案件名",
+  "estimate.detail.docPopup.schWeightFlg": "架台重量表を含む",
+  "estimate.detail.docPopup.schWeightFlg.schWeightFlg0": "含む",
+  "estimate.detail.docPopup.schWeightFlg.schWeightFlg1": "含まない",
+  "estimate.detail.docPopup.schDrawingFlg": "図面/シミュレーションファイルを含む",
+  "estimate.detail.docPopup.schDrawingFlg.schDrawingFlg0": "含む",
+  "estimate.detail.docPopup.schDrawingFlg.schDrawingFlg1": "含まない",
+  "estimate.detail.docPopup.close": "閉じる",
+  "estimate.detail.docPopup.docDownload": "文書のダウンロード",
   "estimate.detail.save.alertMsg": "保存されている見積書で製品を変更した場合、図面や回路には反映されません.",
   "estimate.detail.save.requiredMsg": "ファイル添付が必須のアイテムがあります。ファイルを添付するか、後日添付をチェックしてください.",
   "estimate.detail.reset.confirmMsg": "保存した見積書情報が初期化され、図面情報が反映されます。本当に初期化しますか?"

src/locales/ko.json

@@ -856,6 +856,24 @@
   "estimate.detail.itemTableHeader.col5": "단위",
   "estimate.detail.itemTableHeader.col6": "단가",
   "estimate.detail.itemTableHeader.col7": "금액(부가세별도)",
+  "estimate.detail.docPopup.title": "문서다운로드 옵션설정",
+  "estimate.detail.docPopup.explane": "다운로드할 문서 옵션을 선택한 후 문서 다운로드 버튼을 클릭합니다.",
+  "estimate.detail.docPopup.schUnitPriceFlg": "다운로드 파일",
+  "estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg0": "견적가 Excel",
+  "estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg1": "정가용 Excel",
+  "estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg2": "견적가 PDF",
+  "estimate.detail.docPopup.schUnitPriceFlg.schUnitPriceFlg3": "정가용 PDF",
+  "estimate.detail.docPopup.schDisplayFlg": "견적제출서 표시명",
+  "estimate.detail.docPopup.schDisplayFlg.schDisplayFlg0": "판매점명",
+  "estimate.detail.docPopup.schDisplayFlg.schDisplayFlg1": "안건명",
+  "estimate.detail.docPopup.schWeightFlg": "가대 중량표 포함",
+  "estimate.detail.docPopup.schWeightFlg.schWeightFlg0": "포함",
+  "estimate.detail.docPopup.schWeightFlg.schWeightFlg1": "미포함",
+  "estimate.detail.docPopup.schDrawingFlg": "도면/시뮬레이션 파일 포함",
+  "estimate.detail.docPopup.schDrawingFlg.schDrawingFlg0": "포함",
+  "estimate.detail.docPopup.schDrawingFlg.schDrawingFlg1": "미포함",
+  "estimate.detail.docPopup.close": "닫기",
+  "estimate.detail.docPopup.docDownload": "문서 다운로드",
   "estimate.detail.save.alertMsg": "저장되었습니다. 견적서에서 제품을 변경할 경우, 도면 및 회로에 반영되지 않습니다.",
   "estimate.detail.save.requiredMsg": "파일첨부가 필수인 아이템이 있습니다. 파일을 첨부하거나 후일첨부를 체크해주십시오.",
   "estimate.detail.reset.confirmMsg": "저장된 견적서 정보가 초기화되고, 도면정보가 반영됩니다. 정말로 초기화 하시겠습니까?"