本文主要介绍F1平台V3.0的新控件和新功能
1 磁贴表格控件
磁贴表格控件提供了一种新的表格数据展现方式:
磁贴表格中的一个卡片对应于原来表格中的一行数据,卡片能够更好的展示每行数据的主要信息。如果想要查看详细信息或编辑数据,可以通过点击“详情”或编辑按钮,在详情弹窗中进行。如下图所示:
磁贴表格组件的源码在平台组件源码中的jquery.f1.magentlist.js文件,使用方式和表格组件基本一致,新增了用于生成磁贴的配置项。
2 标签多选框
根据需求开发了新控件:人员多选框(tagtextfield),如下图所示
tagtextfield实现了如下功能:
- 人员新增生成对应的小面板
- 人员删除按钮
- delete键删除人员,ctrl+delete全部删除
- 根据输入信息进行人员模糊查询
控件源码存放在平台组件源码中的jquery.f1.tagtextfield.js,使用方式和其他的表单控件一样。具体的配置项请参考源码或者API。
3 人员选择弹窗
应用在新版消息管理器的写信模块中,用来进行人员选择,如下
上方的输入框是一个人员多选框,支持全部选择人的模糊查询,下方左侧是人员部门树,右侧是根据部门树生成的人员列表,支持人员头像和缩略图两种形式的切换,还有搜索该部门下的人员名称搜索功能。
弹窗页面存放在V3.0信息平台“F1UI_permission_bundle”模块下的src/views/dialog/personChoiceNew.html中,通过单击‘人员多选框’控件弹出。
~~如何通过单击‘人员多选框’控件弹出人员选择页面?
通过配置人员多选框的onBeforeFocus事件来打开弹窗并返回false即可,如下:
onBeforeFocus: function() {
//弹窗
window.top.artDialog.open(getRootPath() + "permission/views/dialog/personChoiceNew.html", {
id: 'personDialog',
title: '人员选择',
onclose: function() {
//人员选择弹窗关闭事件
}
});
//返回false阻止“人员多选框”的正常focus事件
return false;
},
4 图片裁剪控件
V3.0新增图片选择裁剪控件,用来做头像裁剪,然后将图片转位base64编码,如下图所示
点击选择图片按钮选择本地图片,选择完毕后会弹出图片裁剪弹窗,如下图所示:
提供了获取裁剪完图片base64位编码的方法,以及其他配置项,请参考API或者源码(jquery.f1.uploadImgBlock.js)
5 换肤功能
新版平台中提供了换肤功能。首先进入首页,点击换肤按钮:
在换肤弹框中选择要使用的皮肤:
换肤前后的对比示例如下: