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-09-24 16:33:17 +09:00
parent 63db3e2864
commit 71e753e019
7 changed files with 328 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/static/images/sub/file_delete.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="14" height="14" rx="7" fill="white"/>
<rect x="0.5" y="0.5" width="14" height="14" rx="7" stroke="#94A0AD"/>
<path d="M9.741 10.559L7.509 8.327L5.277 10.559L4.512 9.794L6.744 7.562L4.512 5.33L5.277 4.565L7.509 6.797L9.741 4.565L10.506 5.33L8.274 7.562L10.506 9.794L9.741 10.559Z" fill="#94A0AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 429 B

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

@ -20,7 +20,7 @@ export default function CanvasPage() {
<div className="wrap">
<Header/>
<div className="content">
<div className="canvas-wrap">
<div className={`canvas-wrap ${menuValue === 5 || menuValue === 6 ? 'sub-wrap' : ''}`}>
<CanvasMenu setMenuValue={setMenuValue}/>
<div className="canvas-content">
<CanvasLayout menuValue={menuValue}/>

212
src/components/canvas/CanvasEstimate.jsx
View File

@ -1,5 +1,215 @@
import SingleDatePicker from "../common/datepicker/SingleDatePicker";
import Footer from "../layout/Footer";
export default function CanvasEstimate() {
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">
<div className="estimate-box">
<div className="estimate-tit">品番</div>
<div className="estimate-name">RX524231020006 (Plan No: 1)</div>
</div>
<div className="estimate-box">
<div className="estimate-tit">見積書番号</div>
<div className="estimate-name">5242310200065242</div>
</div>
<div className="estimate-box">
<div className="estimate-tit">登録日</div>
<div className="estimate-name">2024.09.28</div>
</div>
<div className="estimate-box">
<div className="estimate-tit">変更日時</div>
<div className="estimate-name">2024.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>基本情報</h3>
</div>
</div>
<div className="common-table bt-able">
<table>
<colgroup>
<col style={{width : '160px'}}/>
<col />
<col style={{width : '160px'}}/>
<col />
</colgroup>
<tbody>
<tr>
<th>一次販売店名</th>
<td>
鈴与商事株式会社
</td>
<th>見積日 <span className="important">*</span></th>
<td>
<div className="date-picker" style={{width: '350px'}}>
<SingleDatePicker/>
</div>
</td>
</tr>
<tr>
<th>二次販売店名</th>
<td>
2次店販売店名表示
</td>
<th>担当者 <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>案件名 <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={'三油商会PITステーション名東一社'}/>
</div>
<div className="input-wrap" style={{width: '200px'}}>
<input type="text" className="input-light" defaultValue={'案件'}/>
</div>
</div>
</td>
</tr>
<tr>
<th>メモ</th>
<td colSpan={3}>
商品情報から入力したメモを表示
</td>
</tr>
<tr>
<th>注文分類  <span className="important">*</span></th>
<td colSpan={3}>
<div className="radio-wrap">
<div className="d-check-radio light mr10">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">住宅PKG</label>
</div>
<div className="d-check-radio light">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">積上げ( YJOD )</label>
</div>
</div>
</td>
</tr>
<tr>
<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 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 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">
<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>
</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>ファイル添付</h3>
<div className="d-check-box light mr5">
<input type="checkbox" id="ch01" />
<label htmlFor="ch01" style={{color: '#101010'}}>後日資料提出</label>
</div>
</div>
</div>
<div className="common-table mb10">
<table>
<colgroup>
<col style={{width: '160px'}}/>
<col />
</colgroup>
<tbody>
<tr>
<th>ファイル添付</th>
<td>
<div className="drag-file-box">
<div className="btn-area">
<button className="btn-origin grey">ファイル選択</button>
</div>
<div className="drag-file-area">
<p>Drag file here</p>
<ul className="file-list">
<li className="file-item"><span>選択したファイル名 <button className="delete"></button></span></li>
<li className="file-item"><span>選択したファイル名 <button className="delete"></button></span></li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div className="common-table">
<table>
<colgroup>
<col style={{width: '160px'}}/>
<col />
</colgroup>
<tbody>
<tr>
<th>添付ファイル一覧</th>
<td>
<div className="drag-file-box">
<ul className="file-list">
<li className="file-item"><span>保存した添付ファイル名 <button className="delete"></button></span></li>
<li className="file-item"><span>保存した添付ファイル名 <button className="delete"></button></span></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<Footer/>
</div>
)
}

8
src/components/publishpage/PublishPage.jsx
View File

@ -80,8 +80,10 @@ export default function PublishPage() {
<td className="t-center"><strong>CanvasPage</strong></td>
<td><strong className="title"></strong></td>
<td><Link href="/canvas" target="_blank">CanvasPage</Link></td>
<td className="coding_stat_web"></td>
<td className="t-center">2024-09-06</td>
<td className="coding_stat_web">
견적서 6번째 탭 클릭시 나옴
</td>
<td className="t-center">2024-09-24</td>
</tr>
<tr>
<td className="t-center"><strong>MainPage</strong></td>
@ -102,7 +104,7 @@ export default function PublishPage() {
<td><strong className="title"></strong></td>
<td><Link href="/management/productstate" target="_blank">물건현황</Link></td>
<td className="coding_stat_web"></td>
<td className="t-center">2024-09-12</td>
<td className="t-center">2024-09-24</td>
</tr>
<tr>
<td><strong className="title"></strong></td>

2
src/components/sub/management/productstate/PropertyStatus.jsx
View File

@ -76,7 +76,7 @@ export default function PropertyStatus(){
<th>期間検索</th>
<td colSpan={3}>
<div className="form-flex-wrap">
<div className="radio-wrap">
<div className="radio-wrap mr10">
<div className="d-check-radio light mr10">
<input type="radio" name="radio02" id="ra04" />
<label htmlFor="ra04">更新日</label>

95
src/styles/_contents.scss
View File

@ -9,6 +9,12 @@
height: 100%;
}
}
&.sub-wrap{
overflow: hidden;
.canvas-content{
height: calc(100% - 47px);
}
}
}
// CanvasMenu
.canvas-menu-wrap{
@ -497,7 +503,7 @@
.sub-content-inner{
max-width: 1720px;
margin: 0 auto;
padding-top: 24px;
padding-top: 20px;
.sub-content-box{
margin-bottom: 20px;
&:last-child{
@ -505,6 +511,11 @@
}
}
}
&.estimate{
height: calc(100% - 36.5px);
overflow-y: auto;
padding-top: 0;
}
}
.sub-table-box{
padding: 20px;
@ -515,7 +526,7 @@
.table-box-title-wrap{
display: flex;
align-items: center;
margin-bottom: 10px;
margin-bottom: 15px;
.title-wrap{
display: flex;
align-items: center;
@ -610,4 +621,84 @@
background-size: cover;
}
}
}
// 견적서
.estimate-list-wrap{
display: flex;
align-items: center;
.estimate-box{
flex: 1 1 auto;
display: flex;
align-items: center;
&:last-child{
flex: none;
}
.estimate-tit{
width: 105px;
height: 30px;
line-height: 30px;
background-color: #F4F4F7;
border-radius: 100px;
text-align: center;
font-size: 13px;
font-weight: 500;
color: #344356;
}
.estimate-name{
font-size: 13px;
color: #344356;
margin-left: 14px;
font-weight: 400;
}
}
}
// file drag box
.drag-file-box{
padding: 10px;
.btn-area{
padding-bottom: 15px;
border-bottom: 1px solid #ECF0F4;
}
.drag-file-area{
position: relative;
margin-top: 15px;
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 13px;
color: #ccc;
font-weight: 400;
cursor: default;
}
}
.file-list{
.file-item{
margin-bottom: 15px;
span{
position: relative;
font-size: 13px;
color: #45576F;
font-weight: 400;
white-space: nowrap;
padding-right: 55px;
button{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 15px;
height: 15px;
background: url(../../public/static/images/sub/file_delete.svg)no-repeat center;
background-size: cover;
}
}
&:last-child{
margin-bottom: 0;
}
}
}
}

16
src/styles/_table.scss
View File

@ -5,11 +5,11 @@
.common-table{
table{
table-layout: fixed;
border: 1px solid #ECF0F4;
border-radius: 3px;
border-collapse:collapse;
tbody{
th{
font-size: 13px;
font-weight: 500;
@ -17,17 +17,21 @@
padding: 14px 12px;
border: 1px solid #ECF0F4 ;
background-color: #F7F9FA;
vertical-align: middle;
}
td{
padding: 0px 9px;
padding: 9px;
border: 1px solid #ECF0F4 ;
font-size: 13px;
font-weight: 400;
color: #45576F;
vertical-align: middle;
.radio-wrap{
flex: none;
@include flexbox;
}
.form-flex-wrap{
@include flexbox;
gap: 15px;
}
.date-picker-wrap{
width: 100%;
@ -39,6 +43,9 @@
}
}
}
&.bt-able{
margin-bottom: 30px;
}
}
.infomation-table{
@ -92,4 +99,5 @@
background-size: cover;
cursor: pointer;
}
}
}