Smartchart开发手册

Smartchart开发手册 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/ Recent content on Smartchart开发手册 Hugo -- gohugo.io https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E5%B8%B8%E7%94%A8%E5%BC%80%E5%8F%91/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E5%B8%B8%E7%94%A8%E5%BC%80%E5%8F%91/ 简介 # 本文档是 SmartChart CRUD 模板的完整开发指南，涵盖从建表、数据集配置、条件查询、选项联动、EXCEL 导入、主子表写入到后端分页的全部常用功能。通过配置面板驱动，无需手写表单代码即可实现企业级数据管理应用。核心概念说明 0号数据集查询展示（SELECT） 1号数据集写入操作（INSERT/UPDATE）配置面板 CRUD 所有功能均通过配置面板控制建表 # 推荐使用mysql做为目标数据库, 因为这是深度测试过的, 支持在界面进行建表, 但可能用sql建表更方便, 以下为推荐的建表样列 -- mysql create table work_order( id int PRIMARY KEY auto_increment, tid int comment '租户ID', 工单号 varchar(50) unique KEY, 工单类型 varchar(50), 工单数量 int, status varchar(20) comment '状态', create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, updater varchar(50) comment '更新人' ) comment '工单'; id,create_time,update_time,updater建意都保留更多建表请参考建表参考 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E6%A0%B8%E5%BF%83%E9%85%8D%E7%BD%AE/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E6%A0%B8%E5%BF%83%E9%85%8D%E7%BD%AE/ SmartCRUD 使用说明 # 基于 SmartChart 平台的低代码 CRUD 框架，通过可视化配置面板快速构建数据管理界面。目录 # 快速开始整体架构数据集绑定（⚙️ 数据管理）表格显示配置（📋 表格显示）查询与过滤（🔍 筛选过滤）新增与修改（✏️ 新增修改）字段类型参考模型管理（🔧 模型管理）高级功能常见问题 1. 快速开始 # 1.1 打开配置面板 # 页面右下角点击「CRUD配置」按钮，弹出底部配置抽屉，共有 5 个 Tab： Tab 功能 📋 表格显示表格外观、列设置、分页 🔍 筛选过滤查询区、过滤条件、选项 ✏️ 新增修改表单字段、权限按钮 ⚙️ 数据管理绑定各功能的数据集 ID 🔧 模型管理数据库表结构管理 1.2 基本配置流程 # ① ⚙️ 数据管理 → 填写 table_id（查询数据集） ② ⚙️ 数据管理 → 填写 add_id / update_id / delete_id ③ 📋 表格显示 → 设置 tableFields（表格显示字段）和 nameDict（字段中文名） ④ ✏️ 新增修改 → 设置 aform（新增字段）和 constFields（只读/主键字段） ⑤ 点击「预览」查看效果 → 确认后点击「发布」 1. https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E8%87%AA%E5%AE%9A%E4%B9%89/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E8%87%AA%E5%AE%9A%E4%B9%89/ 简介 # CRUD 自定义功能通过模板重写实现高度个性化的界面定制，包括自定义列显示（条件样式、进度条）、多级表头、自定义查看页（抽屉/弹窗）、自定义校验规则、自定义函数以及自定义默认值等高级能力。自定义区域对应 block 模板自定义列 body_table_column 多级表头 body_table_columns 自定义查看页 dialog_card 自定义新增页 dialog_modify 自定义指标卡 body_extHead 改写组件区域 # 自定义列显示 # 比如对于指定"销售额"(字段名sales)列如果数字大于100显示红色  {% block body_table_column %} 100?'color:red':''">{[ scope.row[item]]} {% endblock %} 比如显示将字段"进度"(rate)显示为进度条 {% block body_table_column %} <el-progress v-else-if="item==='rate'" :percentage="scope.row[item]"></el-progress> {% endblock %} 比如当大于0时显示上箭头,小于0显示下箭头  .red{color:red} .green{color:green}  0?'el-icon-top red':'el-icon-bottom green'">{[ Math.abs(scope.row[item]) ]} 注意列名需使用实际字段名而非显示名多级表头 #  .el-table--border th.el-table__cell,.el-table__fixed-right-patch{border:0.5px solid;)  {% block body_table_columns %} <el-table-column prop="date" label="日期" width="150"></el-table-column> <el-table-column label="配送信息"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column label="地址"> <el-table-column prop="province" label="省份"></el-table-column> <el-table-column prop="city" label="市区"></el-table-column> </el-table-column> </el-table-column> {% endblock %} 自定义查看页 # detail绑定的点击查看时的数据 <! https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E8%A1%8C%E5%8A%A8%E4%BD%9C/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E8%A1%8C%E5%8A%A8%E4%BD%9C/ 简介 # CRUD 行动作用于在表格每行右侧显示图标按钮，点击后执行预设功能，如查看明细数据、弹出图形、发送消息等。通过配置面板的"查看 ds 映射"指定图标与数据集的对应关系，系统自动传递整行数据给数据集处理。配置格式说明图标:数据集ID 点击弹窗用表格或图形显示数据集返回的数据图标:数据集ID! 弹窗显示数据集返回的表格/图形图标:数据集ID!! 仅执行数据集，不弹窗应用场景 # 点击每一行右边的图标按钮实现功能，比如查看明细数据，图形，发送消息等配置方法 # 在"数据管理"面板配置"查看ds映射"，弹出查看详情时与查询数据集的对应关系,图标:数据集,逗号分隔如:el-icon-goods:5,el-icon-food:6 图标你可以使用 elementui的图标动作数据集 # 比如上面配置的对应 5 号数据集，那么当点击时，系统会向数据集传递整行的数据，我们可以进行对应的处理数据查询,编写 sql即可，系统会自动判断用表格还是图形显示 select a,b from table1 where a='$a' 也可以执行任意数据集动作，比如发送邮件,写入数据等等 Elementui完整图标清单 # 常用图标 # 图标名称代码预览 search el-icon-search setting el-icon-setting user el-icon-user phone el-icon-phone star-off el-icon-star-off star-on el-icon-star-on s-goods el-icon-s-goods goods el-icon-goods question el-icon-question info el-icon-info remove el-icon-remove circle-plus el-icon-circle-plus success el-icon-success error el-icon-error 系统操作图标 # 图标名称代码预览 zoom-in el-icon-zoom-in zoom-out el-icon-zoom-out remove-outline el-icon-remove-outline circle-plus-outline el-icon-circle-plus-outline circle-check el-icon-circle-check circle-close el-icon-circle-close s-help el-icon-s-help help el-icon-help minus el-icon-minus plus el-icon-plus check el-icon-check close el-icon-close 媒体图标 # 图标名称代码预览 picture el-icon-picture picture-outline el-icon-picture-outline picture-outline-round el-icon-picture-outline-round upload el-icon-upload upload2 el-icon-upload2 download el-icon-download camera el-icon-camera camera-solid el-icon-camera-solid video-camera el-icon-video-camera video-camera-solid el-icon-video-camera-solid message el-icon-message 时间与通知图标 # 图标名称代码预览 time el-icon-time bell el-icon-bell date el-icon-date 位置图标 # 图标名称代码预览 location el-icon-location location-outline el-icon-location-outline location-information el-icon-location-information 文档与文件夹图标 # 图标名称代码预览 document el-icon-document folder el-icon-folder folder-opened el-icon-folder-opened folder-add el-icon-folder-add tickets el-icon-tickets 购物与订单图标 # 图标名称代码预览 ticket el-icon-ticket s-order el-icon-s-order s-home el-icon-s-home s-data el-icon-s-data s-shop el-icon-s-shop 方向与导航图标 # 图标名称代码预览 caret-top el-icon-caret-top caret-bottom el-icon-caret-bottom caret-left el-icon-caret-left caret-right el-icon-caret-right d-caret el-icon-d-caret arrow-left el-icon-arrow-left arrow-right el-icon-arrow-right arrow-up el-icon-arrow-up arrow-down el-icon-arrow-down back el-icon-back right el-icon-right 其他图标 # 图标名称代码预览 share el-icon-share s-flag el-icon-s-flag s-marketing el-icon-s-marketing s-cooperation el-icon-s-cooperation s-platform el-icon-s-platform bottom-left el-icon-bottom-left bottom-right el-icon-bottom-right top-left el-icon-top-left top-right el-icon-top-right refresh el-icon-refresh refresh-left el-icon-refresh-left refresh-right el-icon-refresh-right delete el-icon-delete delete-solid el-icon-delete-solid https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E6%95%B0%E6%8D%AE%E5%AE%A1%E6%89%B9/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E6%95%B0%E6%8D%AE%E5%AE%A1%E6%89%B9/ 简介 # SmartChart CRUD 支持完整的工作流审批能力，包括审批流定义（多节点流程配置）和数据变更审批（新增/修改/删除需审批后才生效）。审批流通过三张系统表（flowinfo、flowinstances、flowtasks）实现，数据审批则通过 modify_request 表记录变更内容。审批类型说明审批流多节点流程定义，适合工单、合同等业务流程数据变更审批新增/修改数据时进入审批队列，审批通过才写入审批流 # mysql建表 # drop table if exists oa_flowinfo; CREATE TABLE oa_flowinfo( id int PRIMARY KEY auto_increment, tid smallint default 0 comment '租户ID', uuid varchar(20), name varchar(50), description varchar(200), category varchar(50), flow TEXT, status varchar(20), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, updater varchar(50), UNIQUE uc(tid,name) ) comment '审批流定义'; drop table if exists oa_flowinstances; CREATE TABLE if exists oa_flowinstances( id int PRIMARY KEY auto_increment, tid smallint default 0 comment '租户ID', uuid varchar(50), title varchar(100), remark varchar(500), formId varchar(50), variables varchar(500), definitionId varchar(50), applicant varchar(50), status varchar(50), currentNodeId varchar(50), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, updater varchar(50) )comment '审批单'; drop table if exists oa_flowtasks; CREATE TABLE oa_flowtasks( id int PRIMARY KEY auto_increment, tid smallint default 0 comment '租户ID', uuid varchar(50), instanceId varchar(50), nodeId varchar(50), nodeName varchar(50), assignee varchar(50), status varchar(50), instructions varchar(200), variables varchar(500), comment varchar(100), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, updater varchar(50) )comment '审批任务'; sqlite建表 # DROP TABLE IF EXISTS oa_flowinfo; CREATE TABLE oa_flowinfo( id INTEGER PRIMARY KEY AUTOINCREMENT, tid INTEGER DEFAULT 0, uuid TEXT, name TEXT, description TEXT, category TEXT, flow TEXT, status TEXT, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP, updater TEXT, UNIQUE(tid, name) ); DROP TABLE IF EXISTS oa_flowinstances; CREATE TABLE oa_flowinstances( id INTEGER PRIMARY KEY AUTOINCREMENT, tid INTEGER DEFAULT 0, uuid TEXT, title TEXT, remark TEXT, formId TEXT, variables TEXT, definitionId TEXT, applicant TEXT, status TEXT, currentNodeId TEXT, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP, updater TEXT ); DROP TABLE IF EXISTS oa_flowtasks; CREATE TABLE oa_flowtasks( id INTEGER PRIMARY KEY AUTOINCREMENT, tid INTEGER DEFAULT 0, uuid TEXT, instanceId TEXT, nodeId TEXT, nodeName TEXT, assignee TEXT, status TEXT, instructions TEXT, variables TEXT, comment TEXT, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP, updater TEXT ); 导入审批流页面 # 专业版本可以找客服提供 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E6%8B%96%E6%8B%BD%E7%BB%84%E5%90%88/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E6%8B%96%E6%8B%BD%E7%BB%84%E5%90%88/ 简介 # CRUD 拖拽组合功能允许将 CRUD 组件与其他图形组件在仪表盘中以拖拽方式自由布局，复用 CRUD 的查询、筛选等配置化能力，同时结合图形的可视化展示，实现更丰富的业务页面组合。功能说明开启拖拽配置面板 → 表格显示 → 开启拖拽开关查询联动数据管理 → 查询联动，配置联动图形 ID 行联动数据管理 → 行联动，点击行触发刷新应用场景 # 实现 crud组件和其它图形组件拖拽式开发复用 crud组件查询等配置化功能你可参考视屏拖拽联动使用方法 # 开启 crud开发模式后，在配置面板 –> 表格显示中开启拖拽开关，然后保存需要刷新一下页面生效进入拖拽开发模式，也可以通过配置面板 –> 表格显示中的显示表格的开发来控制是否显示表格可以通过配置数据管理中的查询联动和行联动可实现当点击查询和点击表格行时需要刷新联动的图形 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E6%A0%91%E5%BD%A2%E6%9F%A5%E8%AF%A2%E5%8C%BA/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E6%A0%91%E5%BD%A2%E6%9F%A5%E8%AF%A2%E5%8C%BA/ 简介 # CRUD 树形查询区用于在表格左侧展示层级结构的树形目录，点击叶子节点时自动将参数传递给表格数据集，实现按层级筛选数据的功能。适用于组织架构、产品分类、区域字典等父子层级数据的快速查询场景。关键配置说明树区域数据集查询 father/child 父子关系 _label 参数点击节点自动传递，值为 child 值自定义树形可通过模板重写 body_tree 自定义样式和行为开启树形查询区 # 新建一个懒加载数据集,假设是3号数据集写入以下查询, 查询父,子关系 -- 最简单方式, 如果无重名的情况 select father, child from table -- 如果有重名的情况就需要使用到编码的方式 select father, child, fatherName, childName from table 在"数据管理"的面板中, 填写"树区域",比如本案例为3 点击保存, 然后需要重新刷新页面才会生效此时即可见树形查询区域在左方实现查询功能 # 当点击叶子节点时, 会自动向表格数据传递参数名为"_label", 并自动刷新表格数据传递的值默认为child的值如果需要变更传值, 需要在查询中带入名为param的字段,此时将传递的是param的值, 比如 select father, child, father+child as param from table 自定义树形区域 # 可以在模板中通过重写树形区域实现 {% block body_tree %} <div class="tree_div" style="width:150px;font-size:12px"> <el-tree :data="tree_data" @node-click="handleNodeClick"> <span :class="data. https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E7%94%A8%E6%88%B7%E8%AE%BE%E5%AE%9A/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E7%94%A8%E6%88%B7%E8%AE%BE%E5%AE%9A/ 简介 # CRUD 用户设定功能允许基于当前登录用户动态控制界面显示内容和操作权限。通过 $username 变量判断用户身份，或从数据集中查询用户角色，实现不同用户看到不同字段、按钮或数据范围。控制方式说明 filter_param.username 直接判断当前用户名数据集 + vapp.btnEdit 根据角色控制按钮显隐配置项查找配置面板编辑页面有参数名提示应用场景 # 有很多情况下, 需要基于不同用户采用不同的配置, 实现不同用户看到不同的内容或界面, 比如新增修改的按钮等配置方法 # 基于用户的个性化设定需要在模板编辑中开发, 注意写在自定义js代码区比如判断当用户为neo时,不显示编辑功能 if(filter_param.username === 'neo'){ vapp.btnEdit=false; } 你可以基于更个性化的配置,比如从一个数据集来获取显示权限,比如数据集编号4 select 角色 from xxxx where 用户='$username' 然后在模板开发中进行设定 ds_refresh(4); if(data4.length>1 && data4[1][0] === '只读'){ vapp.btnEdit=false; } 你也可以通过ds_my函数来获取用户信息 //获取当前用户信息 let my = ds_my(); //my = {username:用户名, name:姓名, roles:[角色名], position:岗位, department:部门, groups:[django组名]} console.log(my.roles, my.position, my.department, my.groups); 如何找到对应的配置项 # 你可以在配置界面, 点击进入编辑页面, 在首行的提示有相应的参数名 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E5%8A%9F%E8%83%BD%E6%8C%89%E9%92%AE/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E5%8A%9F%E8%83%BD%E6%8C%89%E9%92%AE/ 简介 # CRUD 功能按钮用于在表格中批量执行操作，如批量修改状态、打开弹窗、执行自定义逻辑等。支持三种方式：单功能数据集（默认批量更新 status 字段）、功能数据集映射（自定义 SQL 执行）和行按钮方式（点击某行触发操作）。按钮方式传参适用场景单功能数据集 action + updatelist（主键列表）批量更新状态功能数据集映射图标:数据集ID 配置自定义复杂逻辑行按钮方式整行数据作为参数传递查看详情、执行动作应用场景 # 需要选中数据行,执行批量动作, 比如批量状态修改，打开新的功能项表格侧面自定义功能按钮单功能数据集方式 # 配置方法 # 在"新增修改"面板"批量动作"可以配置按钮的显示名和颜色 {"完成":["按钮名","black"],...} 在用户批量选择行后, 会自动提交两个参数: action: 如上为参数为："完成“ updatelist: 选择行清单主键的字符串,主键是在只读字段中定义了, 如:'key1','key2', 注意已自带单引号了默认执行 # 当不配置功能数据集时，会自动触发将表中status的字段更新为action对应的参数值如果表中的状态字段不是status，需要在新增对应的数据库中，加入配置项"status":“对应的字段名” 直接执行更新脚本 # 如果需要自定义执行，可新建一个懒加载数据集, 比如编号为6号 update action_log set status='$action' where id in ({$updatelist}) 在"数据管理"界面配置批量"功能"对应的ds为6, 即可实现选中行后,批量将status改为按钮对应的action名也可以按action的值来判定执行不同语句（参考参数联动的方法） /* update action_log1 set status='$action' where id in ({$updatelist}) -- $action__action1*/ /* update action_log2 set status='$action' where id in ({$updatelist}) -- $action__action2*/ 个性化的功能 # 如果需要执行复杂的需求,推荐使python数据源 action='$action' updatelist="$updatelist" sql='' if action=='arrive': sql=f"update action_log set remark='已到达' where code in ({updatelist})" if sql: ds=ds_sql('local',sql) ds={"status":200, "msg":ds} else: ds={"status":400, "msg":"无效参数"} 功能数据集映射方式 # 在面板“数据管理” 中可配置功能ds映射，方法如下：功能按钮,图标:数据集,逗号分隔 el-icon-goods:5,库存:3,el-icon-food:6! https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E5%BB%BA%E8%A1%A8%E5%8F%82%E8%80%83/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/9.CRUD%E6%A8%A1%E6%9D%BF/CRUD%E5%BB%BA%E8%A1%A8%E5%8F%82%E8%80%83/ 简介 # CRUD 模板对数据库表结构有一定规范要求，推荐使用 MySQL 作为目标数据库。本文档提供 MySQL、SQLite3、PostgreSQL、Oracle、SQL Server 五种数据库的建表参考，包含主键、自增、时间戳、更新人等标准字段定义。必含字段说明 id 主键，自增 tid 租户 ID（多租户场景） create_time 创建时间 update_time 更新时间 updater 更新人（通过 $username 自动填充） -- sqlite3 CREATE TABLE work_order ( id INTEGER PRIMARY KEY AUTOINCREMENT, 工单号 TEXT UNIQUE, 工单类型 TEXT, 工单数量 INTEGER, create_time DATETIME DEFAULT (datetime('now', 'localtime')), update_time DATETIME DEFAULT (datetime('now', 'localtime')), updater TEXT ); -- postgreSQL CREATE TABLE work_order ( id SERIAL PRIMARY KEY, "工单号" VARCHAR(50) UNIQUE, "工单类型" VARCHAR(50), "工单数量" INT, create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updater VARCHAR(50) ); COMMENT ON TABLE work_order IS '工单'; COMMENT ON COLUMN work_order.