F1V3.0-19 UI新控件及新功能简介

本文主要介绍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 换肤功能

新版平台中提供了换肤功能。首先进入首页，点击换肤按钮：

在换肤弹框中选择要使用的皮肤：

换肤前后的对比示例如下：