织信低代码平台开发文档

Appearance

进货送检单 ​

对于像合同、账单这一类页面，在页面中的明细列表的长度是不固定的，这种情况下就需要使用流式布局实现。

定义数据结构 ​

进货送检单 ​

字段名标识符类型
单号code单行字段
渠道channel单行文本
单据日期date日期

进货送检单明细 ​

字段名标识符类型
序号index整数
品号name单行文本
规格specification单行文本
特性值描述characterization单行文本
单位unit单行文本
数量num整数
副单位deputyUnit单行文本
副数量deputyNum整数
合格数量qualified整数
采购单号purchaseCode单行文本
备注remark多行文本

示例数据 ​

json
{
  "list": [
    [
      {
        "characterization": "两端需要加钢圈",
        "deputyNum": 1,
        "deputyUnit": "箱",
        "index": 1,
        "name": "PC-T012-001",
        "num": 6,
        "purchaseCode": "CG20240101001",
        "qualified": 6,
        "remark": "需要特殊包装",
        "specification": "300*500",
        "unit": "根"
      },
      {
        "characterization": "两端需要加钢圈",
        "deputyNum": 1,
        "deputyUnit": "箱",
        "index": 2,
        "name": "PC-T012-001",
        "num": 6,
        "purchaseCode": "CG20240101001",
        "qualified": 6,
        "remark": "需要特殊包装",
        "specification": "300*500",
        "unit": "根"
      },
      {
        "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供应商",
    "code": "TEST20240106001",
    "date": 1721115249656
  }
}

页面设计 ​

表格组件实现 ​

富文本组件实现 ​

页面设计富文本组件代码 ​

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生产制作有限公司</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="">进货送检单</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="">供应商：${data.record.channel}</span>
      </td>
      <td style="height: 27px;" data-id=""><span style="font-size: 15px;" data-id="">单号：${data.record.code}</span>
      </td>
      <td style="height: 27px;" data-id=""><span style="font-size: 15px;" data-id="">日期:${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="">
        <col style="width: 9.09%;" data-id="">
      </colgroup>
      <tbody data-id="">
      <tr data-id="">
        <td data-id="">序号</td>
        <td data-id="">品号</td>
        <td data-id="">规格</td>
        <td data-id="">特性值描述</td>
        <td data-id="">单位</td>
        <td data-id="">数量</td>
        <td data-id="">副单位</td>
        <td data-id="">副数量</td>
        <td data-id="">合格数量</td>
        <td data-id="">采购单号</td>
        <td data-id="">备注</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>