开发者学堂课程【宜搭低代码开发认证教程: 宜搭认证课程-掌握表单设计(四)】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/299/detail/3500
宜搭认证课程-掌握表单设计(四)
“我的爱好”只出现在 PC 端,不出现在移动端,需将多端显示中的移动端勾选掉,就会只出现在 PC 端:
• 高级——每个组件都有唯一 id,id 可复制
• 动作设置——主要用于设置一些动作函数
例如:在姓名处新建动作
当值发生变化时有其他动作
新建一个动作:
点击确定后会有一个回调函数的填写:
export function onChange(ctx, value) {
ctx.fn.alert(value);
}
保存函数后打开 console 页面
这时输入名字不同时会报错,说 ctx.fn.alert(value);
不是一个函数
此时修改函数为:
export function onChange(ctx, value) {
console.log(value);//打印输入的值
}
删除一个字后只出现一个字“砚”
再修正函数为:
export function onChange(ctx, {value}) {
console.log(value);
}
这时就会把输入内容打印出来
这就是一个事件回调函数,当输入框的值发生改变时,就会触发函数,然后执行 console.log(value) 这条输入输出语句,然后打印语句。
三、案例详解
案例:T 恤尺码收集
效果图:
新建单据页面:T 恤尺码收集
拖入两个分组,第一个基本信息,第二个尺码信息
第一个组件中包含的基本信息,第一行分别是人员、性别、衣服尺码;
第二行是所在团队;
所以第一行要使用分栏组件进行分栏排列,按比例分好三栏后,人员拖入单行输入框组件、性别拖入单选框组件、衣服尺码拖入单选框组件;
第一个组件输入 label 为人员;然后状态设置为只读状态(不允许输入值);默认值选择公式编辑,用 LOGINUSER 公式获取当前登陆人姓名
第二个组件输入 label 为性别;然后选项设置为两个,第一个设置男,第二个设置为女;然后校验设置为必填,错误提示设置为请选择性别;选项中默认选中男
第三个组件输入 label 为衣服尺码;然后校验设置为必填;选项通过关联其他表单数据实现:先新建一个单据,通过 Excel 导入衣服尺码数据并修改名称为衣服尺码
衣服尺码表单数据如图:
然后衣服尺码选项通过关联衣服尺码表单数据,选择衣服尺码实现
预览:
第二行所在团队拖入一个单选组件,并通过大纲树操作拖入第一个分栏中;组件输入 label 为所在团队;然后校验设置为必填,错误提示设置为请选择团队;选项通过关联其他表单数据实现:先新建一个单据,通过 Excel 导入团队数据并修改名称为所在团队
所在团队表单如图:
然后所在团队选项通过关联所在团队表单数据,选择所在团队实现;
将宽度设置为100%
预览:
第二个分组尺码信息需要男女衣服尺码不同,所以先拖入容器,因为容器是一个载体,里面可以输入其他的组件;放入一个图片组件,在复制一个容器;给第一个容器的 label 改为男性尺码,第二个容器的 label 改为女性尺码;然后在大纲树中上传图片地址;
上传后如图:
图片跟性别联动:在选项中有一个关联选项设置,关联选项设置就是当选择不同的选项时,可以制定一些规则让一些组件进行显示隐藏
点击关联选项设置,为男性时选男性尺码,为女性时选女性尺码
预览:
选男性时:
选女性时:
测试:选男性、男 L、基础运维部
详情页面:
应用搭建成功后一般要进行上线和下线
上线完成后在设置中有一个提交规则并勾选
在点击分享设置,输入一个分享地址和名称并保存
然后将短链接发给需要的人进行提交就结束了