织信低代码平台开发文档

Appearance

自定义表格 ​

概述 ​

自定义表格图表通过读取数据源来渲染类似Excel的展示效果。在图表中可以展示文字、图片、二维码、条码等内容

设置项 ​

设置项说明
数据源类型配置数据源的类型。
选项：调用自动化、使用表达式计算
调用自动化返回数据数据源类型调用自动化时调用的自动化。通过设置自动化返回值步骤，返回数据
使用表达式计算数据数据源类型使用表达式计算时执行的表达式。
表格样式-边框
点击后调用自动化点击自定义图表内容后触发的自动化。
双击后调用自动化双击自定义图表内容后触发的自动化。
允许导出Excel开启后支持导出自定义表格Excel数据
在以下数据表变更时刷新图表配置的数据表数据发生变更时（包含数据表记录创建、数据表记录删除、数据表记录修改），刷新卡片数据

数据格式 ​

自动化返回的数据格式是二维数组，表示在表格中显示的单元格，数组中的每一个元素是一个Cell对象

javascript
[
    [{v:11},{v:12}],
    [{v:21},{v:22}],
    [{v:31},{v:32}]
]

单元格属性Cell

属性类型描述
vObject单元格的值
tString单元格类型，可选值为txt文本 、img图片、 barcode条码 qrcode二维码 date日期类型
sStyle单元格样式
csInteger向右侧合并多少个单元格，例如cs=2时，单元格占用2格空间
rsInteger向底部合并多少个单元格，例如rs=2时，单元格占用2格空间

单元格样式属性Style

属性类型描述
fmtString当t等于date时，fmt设置显示的日期格式,例如yyyy-MM-DD是年月日形式，具体的格式可参考moment库
barcodeString条码类型，可选值为CODE39 CODE128 CODE128A CODE128B CODE128C ISBN EAN13 EAN8 EAN5 EAN2 UPC ITF ITF14 MSI MSI11 MSI1010 MSI1110 pharmacode codabar
fsInteger字体大小
fString字体
cString单元格颜色
bgString单元格背景色
wInteger单元格宽度
hInteger单元格高度
phInteger单元格横向内边距
pvInteger单元格纵向内边距
bwTopInteger单元格上边框宽度
bsTopInteger单元格上边框样式，可选值为solid实线、solid 虚线
bcTopString单元格上边框颜色
bwBottomInteger单元格下边框宽度
bsBottomInteger单元格下边框样式，可选值为solid实线、solid 虚线
bcBottomString单元格下边框颜色
bwLeftInteger单元格左边框宽度
bsLeftInteger单元格左边框样式，可选值为solid实线、solid 虚线
bcLeftString单元格左边框颜色
bwRightInteger单元格右边框宽度
bsRightInteger单元格右边框样式，可选值为solid实线、solid 虚线
bcRightString单元格右边框颜色
haString水平方向的布局，可选值为left居左、center居中、 right居右
vaString垂直方向的布局，可选值为top顶部对齐、middle居中、 bottom底部对齐
italicBoolean是否是斜体
boldBoolean是否是粗体

以下是一个简单的例子

javascript
[
    [{v:'表头',cs:3,s:{fs:20,bold:true}}],//表头横跨三行,居中，粗体，字号20
    [{v:'0123456789',t:'barcode',s:{barcode:'CODE39'}},{v:2,s:{w:100,h:100}},{v:'右对齐',s:{w:100,ha:'right'}}],//第一列显示条形码
    [{v:'https//informat.cn',t:'qrcode',s:{w:200,w:200}},{v:2},{v:3}],//第一列显示二维码
    [{v:'https://www.informat.cn/assets/images/logo.png',t:'img',s:{w:200,w:200}},{v:2},{v:3}],//第一列显示图片
    [{v:'红色字体',s:{c:'#ff0000',bg:'#00ff00'}},{v:2},{v:3}],//第一列红色字体 绿色背景
    [{v:'红色边框',s:{bw:1,bc:'#ff0000',bs:'dashed'}},{v:2},{v:3}],//红色边框
    [{v:new Date(),t:'date',s:{fmt:'yyyy-MM-DD'}},{v:2},{v:3}],//日期类型
    [1,2,'文字']//直接返回数据
]

获取数据 ​

自定义表格通过自动化程序获取数据，自动化程序接受一个参数，类型为Record，表示仪表盘传递的过滤参数

交互 ​

点击或者双击表格中的单元格可以触发一个自动化程序，自动化程序接受一个参数，类型如下

javascript
{
    row:Number,//点击的行
    col:Number,//点击的列
    value:Object//点击的值
}

使用示例 ​

假设需要按用户选择的时间段生成一张库存统计表

依赖的数据表 ​

以下是示例中依赖的数据表结构：

商品表 ​

名称标识符类型描述
商品名称name单行文本
条码code单行文本

库存记录表 ​

名称标识符类型描述
商品good关联记录
条码goodCode关联记录字段
库存操作type列表选择选项值：出库、入库
数量quantity整数
操作时间time日期

生成自定义表格数据 ​

自动化程序新增一个类型为Record的参数，获取卡片中定义的参数，根据开始和结束时间查询库存记录表，并对查询数据进行处理，生成自定义表格数据，最终通过设置自动化返回值步骤，返回数据。

自动化配置

以下是生成的自定义表格数据：

javascript
[
  [
    {"rs":2,"v":"商品","w":100},
    {"rs":2,"v":"条码","w":50},
    {"cs":9,"v":"库存情况"}
  ],
  [
    {"cs":2,"v":"总数","w":30},
    {"v":"2023-04-01","w":30},
    {"v":"2023-04-02","w":30},
    {"v":"2023-04-03","w":30},
    {"v":"2023-04-04","w":30},
    {"v":"2023-04-05","w":30},
    {"v":"2023-04-06","w":30},
    {"v":"2023-04-07","w":30}
  ],
  [
    {"rs":2,"v":"Coca-Cola可口可乐（500毫升）"},
    {"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"049000050120"},
    "入库数量",2374,282,261,378,435,327,274,417
  ],
  ["出库数量",2597,282,261,378,435,327,274,417],
  [
    {"rs":2,"v":"娃哈哈AD钙奶（250毫升）"},
    {"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6902083890256"}
    ,"入库数量",2207,323,198,335,359,198,401,393
  ],
  ["出库数量",2182,323,198,335,359,198,401,393],
  [
    {"rs":2,"v":"三只松鼠碧根果（110克）"},
    {"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6970349130014"},
    "入库数量",1008,58,68,186,289,75,171,161
  ],
  ["出库数量",1072,58,68,186,289,75,171,161],
  [
    {"rs":2,"v":"洽洽香瓜子（208克）"},
    {"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6901668026551"},
    "入库数量",2363,510,282,219,363,436,335,218
  ],
  ["出库数量",2379,510,282,219,363,436,335,218],
  [
    {"rs":2,"v":"康师傅方便面（牛肉味，105克）"},
    {"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6920155402703"},
    "入库数量",2422,147,431,440,394,281,444,285
  ],
  ["出库数量",2600,147,431,440,394,281,444,285],
  [
    {"rs":2,"v":"脉动维生素饮料（青柠味，600毫升）"},
    {"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6902083885559"},
    "入库数量",1297,295,122,228,87,219,173,173
  ],
  ["出库数量",977,295,122,228,87,219,173,173],
  [
    {"rs":2,"v":"红牛功能饮料（原味，250毫升）"},
    {"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6920202888885"},
    "入库数量",2194,289,231,275,188,520,366,325
  ],
  ["出库数量",2178,289,231,275,188,520,366,325]
]

示例图 ​

使用示例