桌面端其它类组件

下面列举几个常用的组件：序号组件和过滤组件

序号组件

序号组件提供生成序号的能力，提供以下4个方法

参数说明

• key：标识，序号的前缀
• format：字符串格式，组件采用 Java String 类的 format() 方法格式化，这个 format 就是 format 方法的 format 参数，例如："%04d"表示格式化为4位整数，不足4位时前面补0
• num：获取序号的个数，支持一次获取多个序号

使用案例

默认值

序号组件最常用的使用场景是作为数据的默认值，即新增数据时，自动生成一个序号

在页面上添加“序号”组件，设置数据列的默认值规则

从序号组件的这4个方法中选择一个

新增数据时的运行结果，如下图所示

单独获取

• 使用操作

使用两个操作：生成序号和获取序号，如下图所示

• 使用 JS 代码

调用序号组件的方法

    onJsBtnClick = async (event) => {
        let data = await this.comp("wxSn0").next("JSSN", "%04d", 1);
        message.info("获取的序号为：" + data);
    }

调用序号组件提供的服务，代码如下

    onRequestBtnClick = async (event) => {
        let { data } = await this.request({
            url: "$serviceName/sn/sn/next",
            data: {
                key: "REQSN",
                format: "%04d",
                num: 1
            }
        })
        message.info("获取的序号为：" + data);
    }

过滤组件

系统提供几个用于过滤数据的过滤组件，分别是：智能过滤、日期过滤、组织过滤和数据过滤框

智能过滤

智能过滤组件用于对一个数据组件的多列进行过滤，多列之间是或者的关系，运行效果如下图所示

智能过滤组件属性说明如下，设计界面如下图所示

• 过滤数据集：选择要过滤数据的数据组件
• 过滤列：可选择多列，任意一列包含搜索内容，就会被查询出来

过滤树形表

日期过滤

日期过滤组件用于对一个数据组件的日期列进行过滤，支持两种过滤模式，运行效果如下图所示

• 单日期过滤：对一个日期列进行过滤，日期在查询范围内，就会被查询出来
• 日期范围过滤：对两个日期列进行过滤，日期范围包含查询范围，就会被查询出来

对一个日期列进行过滤，日期过滤组件的属性设置如下图所示

• 过滤数据集：选择要过滤数据的数据组件
• 过滤模式：单日期过滤
• 过滤日期：选择要过滤的日期列
• 自动刷新数据：选择后是否立即刷新数据

对两个日期列进行过滤，日期过滤组件的属性设置如下图所示

• 过滤数据集：选择要过滤数据的数据组件
• 过滤模式：日期范围过滤
• 开始日期：选择要过滤的两个日期列中的开始日期
• 结束日期：选择要过滤的两个日期列中的结束日期
• 自动刷新数据：选择后是否立即刷新数据

特别说明

• 过滤 key 属性，用于设置生成的数据组件的过滤条件的名称，一般情况无需设置，过滤条件名称就是 setFilter 方法的第一个参数

获取开始时间和结束时间

使用日期过滤组件在对日期类的字段进行数据过滤时，其实取的是某个时间段中的数据，获取这个时间段的开始时间和结束时间参考如下:

在日期过滤组件的搜索事件中获取

react 代码

    onDateFilter0Search = (event) => {
        let {detail:{filter}} = event;
        let beginDate = event.detail.beginDate;
        let begin = wx.Date.toString(beginDate, wx.Date.STANDART_FORMAT);
        let endDate = event.detail.endDate;
        let end = wx.Date.toString(endDate, wx.Date.STANDART_FORMAT);
    }

vue 代码

    let onDateFilterSearch = (event) => {
        let {detail:{filter}} = event;
        let beginDate = event.detail.beginDate;
        let begin = wx.Date.toString(beginDate, wx.Date.STANDART_FORMAT);
        let endDate = event.detail.endDate;
        let end = wx.Date.toString(endDate, wx.Date.STANDART_FORMAT);
    }

组织过滤

组织过滤组件用于对一个数据组件的组织全路径标识列进行过滤，组织采用 like 过滤，用户支持按照 fid 或 id 过滤，运行效果如下图所示

• 选择一个组织，查询条件为：数据组件的组织全路径标识列 like 选择的组织的 fid + %
• 选择一个用户，支持两种过滤方式
  • 按岗位查询，查询条件为：数据组件的组织全路径标识列 = 选择的用户的 fid
  • 按用户查询，查询条件为：数据组件的用户 id 列 = 选择的用户的 id

组织过滤组件的属性说明如下

• 过滤数据集：选择要过滤数据的数据组件
• 路径过滤字段：必须，选择要过滤的组织全路径标识列
• 人员过滤字段：
  • 不设置此属性：表示使用岗位查询，过滤用户时，按照用户的 fid 过滤，即选择哪个岗位，就查询哪个岗位的数据
  • 设置此属性：表示使用用户查询，选择用户 id 列，过滤用户时，按照用户的 id 过滤，即查询这个用户的所有岗位的数据

组织过滤组件支持组织搜索，运行效果如下图所示

相关属性说明如下

• 显示搜索框：选择是
• 搜索模式：选择服务端
• 过滤列：选择组织名称 name 列

组织树，随着层级的展开，下拉列表会越来越宽，因此设置“列表和选择器同宽”为否，下拉列表的宽度会自动撑开，设计界面如下图所示

数据过滤框

数据过滤框组件，用于最终用户在查询数据时，自定义过滤条件，运行效果如下图所示

• 字符串类型的列，支持等于、字符匹配（like）
• 数字和时间类型的列，支持大于、小于、等于
• 支持使用小括号改变优先级
• 支持多条件之间设置并且（默认）、或者的关联关系

数据过滤框组件提供两个属性和一个操作，设计界面如下图所示

• “动态数据集”属性：选择要过滤数据的数据组件
• “对话框标题”属性：设置弹出框的标题
• “弹出”操作：用于显示数据过滤框

回到顶部

回到顶部组件用于返回页面顶部，运行效果如下图所示

组件属性说明如下

• 滚动高度：当页面滚动（例如 400px）时，右下角会出现返回顶部按钮
• 按钮类型：支持默认按钮和主按钮两种类型
• 形状：支持圆形和方形两种形状

音频

播放一个音频文件，运行效果如下图所示

在资源地址属性中绑定数据列，数据列中可以是通过附件组件上传的音频文件。支持设置是否显示控件，设计界面如下图所示

react 使用 react-audio-player 组件，参考 https://github.com/justinmc/react-audio-player#readme

vue 使用 html audio

代码控制

• react

audio 组件设置 ref 属性

<antdpro:Audio id="audio0" ref="audio0" src="{restData0.current?.image}">
</antdpro:Audio>

audio 组件提供 source 方法获取音频对象，即可调用播放等方法

onPlayAudioBtnClick = (event) => {
    let audio = this.comp("audio0");
    audio.source().play();
}

• vue

audio 组件设置 ref 属性

<antdv:Audio id="audio0" ref="audio0" src="{restData0.current?.image}">
</antdv:Audio>

audio 组件提供 source 方法获取音频对象，即可调用播放等方法

let onPlayAudioBtnClick = (event) => {
    let audio = $page.comp("audio0");
    audio.source().play();
}

视频

播放一个视频文件，运行效果如下图所示

在资源地址属性中绑定数据列，数据列中可以是通过附件组件上传的视频文件，设计界面如下图所示

视频组件使用 videojs 组件，参考 http://videojs.com。通过高度属性设置高度，如上图所示。

代码控制

• vue

video 组件设置 ref 属性

<antdv:Video height="200" id="video0" ref="video0" src="{restData1.current?.image}">
</antdv:Video>

video 组件提供 player 属性获取视频对象，即可调用播放等方法

let onPlayVideoBtnClick = (event) => {
    let video = $page.comp("video0");
    video.player.play();
}

其它类组件

其它类组件提供很多属性用于界面展现和用户交互，鉴于官网介绍的比较详细，本文不再赘述。

案例位置

桌面-页面-其它组件-*.w

桌面-页面-面板展示组件-悬浮按钮组件.w