Receiving Inspection Sheet
For pages like contracts and bills, where the length of the detail list on the page is variable, the flow layout implementation is needed.
Define Data Structure
Receiving Inspection Sheet
| Field Name | Identifier | Type |
|---|---|---|
| Order Number | code | Single-line Text |
| Channel | channel | Single-line Text |
| Document Date | date | Date |
Receiving Inspection Sheet Details
| Field Name | Identifier | Type |
|---|---|---|
| Serial Number | index | Integer |
| Item Number | name | Single-line Text |
| Specification | specification | Single-line Text |
| Characterization | characterization | Single-line Text |
| Unit | unit | Single-line Text |
| Quantity | num | Integer |
| Secondary Unit | deputyUnit | Single-line Text |
| Secondary Quantity | deputyNum | Integer |
| Qualified Quantity | qualified | Integer |
| Purchase Order Number | purchaseCode | Single-line Text |
| Remarks | remark | Multi-line Text |
Sample Data
json
{
"list": [
[
{
"characterization": "Both ends need steel rings",
"deputyNum": 1,
"deputyUnit": "box",
"index": 1,
"name": "PC-T012-001",
"num": 6,
"purchaseCode": "CG20240101001",
"qualified": 6,
"remark": "Special packaging required",
"specification": "300*500",
"unit": "piece"
},
{
"characterization": "Both ends need steel rings",
"deputyNum": 1,
"deputyUnit": "box",
"index": 2,
"name": "PC-T012-001",
"num": 6,
"purchaseCode": "CG20240101001",
"qualified": 6,
"remark": "Special packaging required",
"specification": "300*500",
"unit": "piece"
},
{
"index": 3
},
{
"index": 4
},
{
"index": 5
},
{
"index": 6
},
{
"index": 7
},
{
"index": 8
},
{
"index": 9
},
{
"index": 10
},
{
"index": 11
},
{
"index": 12
},
{
"index": 13
}
]
],
"record": {
"channel": "xxx Supplier",
"code": "TEST20240106001",
"date": 1721115249656
}
}Page Design
Table Component Implementation
Rich Text Component Implementation
Page Design Rich Text Component Code
html
<div data-id="">
<table style="border-collapse: collapse; width: 100%; height: 190.25px; border-width: 1px;" border="1" data-id="">
<colgroup data-id="">
<col style="width: 33.2811%;" data-id="" />
<col style="width: 51.0432%;" data-id="" />
<col style="width: 15.6374%;" data-id="" />
</colgroup>
<thead data-id="">
<tr style="height: 81.625px;" data-id="">
<td style="height: 81.625px;" colspan="2" data-id="">
<h1 style="text-align: center;" data-id="">XX Manufacturing Co., Ltd.</h1>
</td>
<td style="height: 163.25px;" rowspan="2" data-id=""><img src="https://next.informat.cn/logo.png" alt="" width="300" height="300" data-id="" data-src="${Misc.qrcodeURL(data.record.code,100)}" /></td>
</tr>
<tr style="height: 81.625px;" data-id="">
<td style="height: 81.625px; text-align: center;" colspan="2" data-id="">
<h1 data-id="">Receiving Inspection Sheet</h1>
</td>
</tr>
<tr style="height: 27px;" data-id="">
<td style="height: 27px; text-align: left;" data-id=""><span style="font-size: 15px;" data-id="">Supplier: ${data.record.channel}</span></td>
<td style="height: 27px;" data-id=""><span style="font-size: 15px;" data-id="">Order Number: ${data.record.code}</span></td>
<td style="height: 27px;" data-id=""><span style="font-size: 15px;" data-id="">Date: ${Misc.formatDate(data.record.date,'yyyy-MM-dd')}</span></td>
</tr>
</thead>
</table>
<div data-id="">
<table style="border-collapse: collapse; width: 100%; border-width: 1px;" border="1" data-id="" data-style="line-height:1">
<colgroup data-id="">
<col style="width: 9.09%;" data-id="" />
<col style="width: 12%;" data-id="" />
<col style="width: 9.09%;" data-id="" />
<col style="width: 9.09%;" data-id="" />
<col style="width: 9.09%;" data-id="" />
<col style="width: 9.09%;" data-id="" />
<col style="width: 9.09%;" data-id="" />
<col style="width: 9.09%;" data-id="" />
<col style="width: 9.09%;" data-id="" />
<col style="width: 9.09%;" data-id="" />
</colgroup>
<tbody data-id="">
<tr data-id="">
<td data-id="">Serial Number</td>
<td data-id="">Item Number</td>
<td data-id="">Specification</td>
<td data-id="">Characterization</td>
<td data-id="">Unit</td>
<td data-id="">Quantity</td>
<td data-id="">Secondary Unit</td>
<td data-id="">Secondary Quantity</td>
<td data-id="">Qualified Quantity</td>
<td data-id="">Purchase Order Number</td>
<td data-id="">Remarks</td>
</tr>
<tr data-id="" data-for="${data.list[index]}" data-foritem="item">
<td data-id=""><span style="font-size: 12px;" data-id="">${item.index}</span></td>
<td data-id=""><span style="font-size: 12px;" data-id="">${item.name}</span></td>
<td data-id=""><span style="font-size: 12px;" data-id="">${item.specification}</span></td>
<td data-id=""><span style="font-size: 12px;" data-id="">${item.characterization}</span></td>
<td data-id=""><span style="font-size: 12px;" data-id="">${item.unit}</span></td>
<td data-id=""><span style="font-size: 12px;" data-id="">${item.num}</span></td>
<td data-id=""><span style="font-size: 12px;" data-id="">${item.deputyUnit}</span></td>
<td data-id=""><span style="font-size: 12px;" data-id="">${item.deputyNum}</span></td>
<td data-id=""><span style="font-size: 12px;" data-id="">${item.qualified}</span></td>
<td data-id=""><span style="font-size: 12px;" data-id="">${item.purchaseCode}</span></td>
<td data-id=""><span style="font-size: 12px;" data-id="">${item.remark}</span></td>
</tr>
</tbody>
</table>
<div style="text-align: center;" data-id="" data-style="high:5px"><strong data-id="">${index+1}</strong></div>
</div>
</div>