桌面端表单类组件

桌面端提供两种表单样式：无边框表单和有边框表单，界面效果如下面两张图所示

• 无边框表单

• 有边框表单

快速布局

系统提供表单快速布局，提供快速生成表单、修改表单的能力。支持普通表单、卡片表单、分步表单、表格表单（有边框表单），如下图所示

• 普通表单

• 卡片表单

• 分步表单

• 表格表单

打开快速布局

选中“表单”组件，点击“快速布局”，如下图所示，打开快速布局配置页面

设置布局方式

空表单可以设置是否使用分步表单、卡片表单、表格表单，生成表单后不能再修改。 快速布局配置页面中有3个开关：使用分步表单、使用卡片、使用表格布局，如下图所示，选中表示使用，取消选中表示不使用

配置表单项

将页面上数据组件中的列添加为表单项，表单项配置如下

• 排序：通过拖拽排序图标，调整表单项的显示顺序
• 设置标签：“表单项名称”为空，标签显示列名，否则显示“表单项名称”中定义的内容
• 设置输入类组件：可选择输入框、长文本、选择器、单选组、多选组、开关、附件等组件
• 设置列宽：设置特殊列的列宽，例如占整行，设置为24。表单分为几列，可以在表单组件上设置，不用在这里设置

无边框表单

无边框表单使用：表单、行列、表单项等组件组成。页面结构如下图所示

源码如下

{% raw %}
<antdpro:Form id="form0" labelCol="{{"span":6}}" >
    <antdpro:Row gutter="20" id="row0" >
        <antdpro:Col id="col0" span="12" >
            <antdpro:Form.Item id="formItem0" label="{restData0.label('name')}" />
        </antdpro:Col>
        <antdpro:Col id="col1" span="12" >
            <antdpro:Form.Item id="formItem1" label="{restData0.label('firstClass')}" />
        </antdpro:Col>
        <antdpro:Col id="col2" span="24" >
            <antdpro:Form.Item id="formItem2" label="{restData0.label('unit')}" />
        </antdpro:Col>
    </antdpro:Row>
</antdpro:Form>
{% endraw %}

表单组件

表单组件提供统一设置表单样式能力，包括

• 标签文本是否显示冒号
• 标签文本对齐方式：左对齐、右对齐
• 标签文本是否允许换行
• 标签和控件位置：
  • 单独一行，标签在左侧
  • 单独一行，标签在上面
  • 和其他标签、控件连成一行
• 表单尺寸：大、中、小
• 标签布局：标签宽度（例如：160px）、栅格占位格数、左侧间隔格数、向左移动格数
• 控件布局：栅格占位格数、左侧间隔格数、flex 布局属性

只有一列内容的表单，可以不使用行列组件，在表单组件中直接放表单项组件。

行列组件

行列组件在表单中提供一行多列、及设置列宽的能力

• 一行显示一列、二列、三列、四列等
• 栅格一行总共24格，在列上设置不同栅格占位格数，实现不同的列宽
• 或者在列上设置 flex 布局属性，实现不同的列宽

表单项组件

表单项组件用来显示数据列的标签和控件（编辑器），提供下面几项能力：

• 继承表单组件中设置的样式，或者自定义样式
• 感知数据组件的规则设置
  • 数据列设置为必填时，标签前面会显示红星
  • 数据列内容验证失败时，显示提示信息（红色文字）
• 设置数据列的提示信息 tooltip 及图标
• 设置是否显示该数据列

有边框表单

有边框表单使用：表单、描述列表等组件组成。页面结构如下图所示

描述列表由一个个描述列表项组成，运行效果如下图所示

• 描述列表的“布局类型”属性分为：描述项和表单项，作为表单使用时，应该设置为表单项
• 表单项的样式跟随表单的设置，例如标签对齐方式，是否显示冒号等
• 表单项分为：标签、内容、后缀标签3个部分，下图中的“元”就是后缀标签
• 描述列表项使用栅格占位格数，占满一行为24

输入类组件

系统在页面上提供数据组件，和表单类组件绑定后，实现双向数据绑定

• 写入数据：用户录入，或通过代码赋值后，数据会写入数据组件的当前行
• 读取数据：表单类组件实时显示数据组件当前行的数据，数据改变后，会立即显示新的数据

输入类组件包括：输入框、文本框、密码框等组件，是最简单的表单类组件。它们通过设置“绑定数据列”属性绑定到一个数据组件的列上，从而实现双向数据绑定。

选择类组件

选择类组件包括：选择器、单选组、多选组等组件，通过设置“范围数据集”列出可选项，提供给用户选择。

特别说明

• “范围数据集”指定的数据组件和“绑定数据列”里面的数据组件不能是同一个数据组件
• 页面运行时，选择类组件在界面上显示“范围数据集”中“选择项名称”列里面的数据，提供给用户选择
• 用户选择后，选择类组件将“范围数据集”中“选择项值”列里面的数据，写入“绑定数据列”
• 如果组件有“绑定显示列”属性，将“选择项名称”列里面的数据，写入“绑定显示列”
• 选择器和多选组组件的“绑定数据列”和“范围数据集-选择项值”这两列都必须是“文本”类型的，不能是“数字”类型的；单选组没有这个限制

例如：“单位”单选组组件，界面上显示“单位字典”表中所有行“名称”列里面的值。用户选择后，将“名称”列里面的值写入到“商品”表的“单位”列中，配置如下图所示

例如：“一级分类”选择器组件，界面上显示“商品分类”表中所有行“分类名称”列里面的值。用户选择后，将“商品分类”表“主键”列里面的值写入到“商品”表的“一级分类”列中，将“分类名称”列里面的值写入到“商品”表的“商品分类.分类名称”列中，配置如下图所示

树选择和级联选择组件

上面介绍的选择类组件用于选择平板数据，对于树形数据使用树选择组件或级联选择组件

树选择组件

• 下拉数据以树形展示，如下图所示
• 用户选择后，存入选择数据本身的值
• 支持逐级加载数据，适合大量数据场景

树形数据如果有“全路径ID”列和“全路径名称”列，树选择组件支持服务端过滤，设置方法如下

• 设置树选择组件的范围数据集的“根展现方式”属性为“虚拟树”
• 设置树选择组件的“显示搜索框”属性为“是”
• 设置树选择组件的“搜索模式“属性为”服务端“
• 设置树选择组件的“过滤列”属性为名称列

运行效果如下图所示

级联选择组件

• 下拉数据从左到右依次逐级展开，如下图所示
• 用户选择后，存入选择数据的全路径的值
• 必须加载全部数据，不适合大量数据场景

级联选择组件支持前端过滤，运行效果如下图所示

日期选择类组件

日期选择类组件包括：日期选择、日期范围选择、时间选择、时间范围选择等组件，用于选择日期时间、日期、年、年月、时分秒等

• “日期选择”组件提供选择日期时间、日期、年、年月、季、周
• “时间选择”组件提供选择时分秒，可显示为时分秒、时分、分秒、时、分、秒
• “范围组件”提供两个日期时间的选择，且保证后一个日期时间大于前一个日期时间

特别注意

• 存日期的列，数据类型是日期
• 存日期时间的列，数据类型是日期时间
• 存不完整日期时间的列，数据类型必须是字符串
• 以上规则适用于动态数据集、静态数据集和自定义数据

各种选择形式的设置方法见下表

输入提示

“自动完成”组件提供输入提示能力，即边输入边用一个下拉框显示，用输入值过滤出来的数据。输入后，即可以将输入值写入某个数据列，也可以按输入值进行查询。

设置“提示数据列”属性为某个数据组件的某列，当“自动完成”组件的输入框中的值发生变化时，系统发送请求，查询“提示数据列”包括输入值的数据，将查询到的数据显示到下拉框中，作为提示信息。

搜索框

设置“展示效果”属性为“搜索”，并设置“搜索数据列”为某个数据组件的某列，用户回车或点击搜索按钮时，系统发送请求，查询“搜索数据列”包括输入值的数据，实现搜索框的能力，运行效果如下图所示

输入框

设置“展示效果”属性为“输入”，并设置“输入数据列”为某个数据组件的某列，用户输入后，系统将输入值写入“输入数据列”，实现输入框的能力

表单类组件

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

注意：表单组件中输入类及选择类等组件事件，如值改变、回车输入等都是异步事件，因此在实际使用中要注意使用方法，例如在值变化事件下获取数据集当前行数据，是无法获取到新设置的值。要解决这个问题需要将相关逻辑放在“event.defaultActionPromise”中使用，例如：

let onInput0Change = (event) => {
    /**
     * 这是异步事件，修改的值不会立即同步到数据集，因此在这里调用获取数据集当前行无法获取到新变化值
     */
    event.defaultActionPromise?.then(() => {
        //这里获取到的数据，对应字段值就是新变化值
        const currentRow=$page.comp("tableCustomData0").getCurrentRow();
        //其他业务逻辑
    })
}

使用案例

设置数值输入框显示格式

对数字进行格式化显示，例如显示金额时前面加上货币符号￥或者 $，显示千分位

存储的值如下：

运行时展示如下：

输入框组件绑定了数值或小数类型的字段后，提供“数值输入配置”或“小数输入配置”

在配置中提供“输入框展示值格式”和“转换数字的方式”设置

• 输入框展示值格式 formatter：指定输入框展示值的格式
• 转换数字的方式 parser：指定从 formatter 里转换回数字的方式，和 formatter 搭配使用

在“输入框展示值格式”中设置显示的格式，代码如下：

react 代码

inputNumber1FormatterFn = (value, info) => {
    if(value){
        return `$${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }else{
            return "";
    }
}

vue 代码

let inputNumber0FormatterFn = (value, info) => {
    if(value){
        return `$${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
}

在“转换数字的方式”中把数据转换为要存储的值，代码如下：

react 代码

inputNumber1ParserFn = (str) => {
    if(str){
        return  str.replace(/\$\s?|(,*)/g, '');
    }
}

vue 代码

let inputNumber0ParserFn = (str) => {
    if(str){
        return  str.replace(/\$\s?|(,*)/g, '');
    }
}

运行时展示如下：

日期选择-控制不可选日期或时间

“日期选择”组件提供“不可选日期”和“不可选时间”属性，用于控制某些日期和时间不能选择。日期和时间的不可选是分别控制的，控制日期不可选在“不可选日期”上设置，控制时间(时、分、秒)不可选在“不可选时间”上设置，通过在 js 代码中返回不可选的日期、时间进行控制。

例如，不能选择今天以前的日期。“不可选日期”属性的 js 代码如下：

datePicker0DisabledDateFn = (currentDate) => {
    return currentDate && currentDate < new Date();
}

例如，只能选今天及往后三天的日期。“不可选日期”属性的 js 代码如下：

datePicker0DisabledDateFn = (currentDate) => {
    return  wx.Date.decrease(wx.Date.now(),0,wx.Date.UNIT_DAY)>currentDate || wx.Date.increase(wx.Date.now(),4,wx.Date.UNIT_DAY)<currentDate;
}

例如：小时不能选择1, 3, 5, 6，分钟不能选择3, 4，秒不能选择1, 2。“不可选时间”属性的 js 代码如下：

datePicker0DisabledTimeFn = (date) => {
    return {
        disabledHours: function() {
        return [1, 3, 5, 6]; 
        },
        disabledMinutes: function() {
        return [3, 4];
        },
        disabledSeconds: function(){
        return [1, 2];//不需要设置的类型直接返回[]即可
        }
    } 
}

运行效果如下，不可选的日期和时间以灰色显示

日期选择-自定义日期文案

“日期选择”组件提供“日期渲染”属性，实现自定义日期文案。在 js 代码中根据不同的日子返回不同的样式。

js 代码中使用了 react，因此需要引用 react，代码如下

    import React from 'react';

日期渲染的 js 代码如下：

        datePicker0DateRenderFn(currentDate,today){
        let containerStyle = { 
            height: "35px", 
            width: "35px",
            margin: "0 auto",
            borderRadius: "50%",
            fontSize: "12px",
            border:  "1px blue solid", // 边框   
            backgroundColor:  "lightgray" // 背景色
        };
        let day1Style = { 
            height: "35px", 
            width: "35px",
            margin: "0 auto",
            borderRadius: "50%",
            fontSize: "12px",
            border:  "1px red solid", // 边框   
            backgroundColor:  "white" // 背景色
        };
        let todayStyle = { 
            height: "35px", 
            width: "35px",
            margin: "0 auto",
            borderRadius: "50%",
            fontSize: "12px",
            border:  "1px yellow solid", // 边框   
            backgroundColor:  "white" // 背景色
        };

        //设置文字居中
        let dateMiddle = {
            position: "relative",
            top: "8px"
        };

        //和今天的日子一样用 todayStyle 样式，每月1日用 day1Style 样式，其它日子用 containerStyle 样式
        if(currentDate.date() === today.date()){
                return <div style={todayStyle}>
                <div style={dateMiddle}>{currentDate.date()}</div>
              </div>
        }else if(currentDate.date() === 1){
            return <div style={day1Style}>
                <div style={dateMiddle}>{currentDate.date()}</div>
              </div>
        }else{
            return (
              <div style={containerStyle}>
                <div style={dateMiddle}>{currentDate.date()}</div>
              </div>
            );
        }
    }

运行效果如下图所示

表单-缩小行距

系统默认在表单项中显示提示信息，如下图所示，导致表单行距比较大

通过设置样式实现不显示提示信息，以达到缩小行距的效果，如下图所示

在css文件中，增加下面的代码，即可实现上图的效果

  :global{
        .ant-form-item-with-help .ant-form-item-explain{ display:none; }
        .ant-form-item-control-input{ min-height:33px; }
    }

将上面代码中的33px调整为43px是下图的效果

设置富文本编辑器内容自适应

插件默认配置，可参考“$UI2\comp\antdpro\components\TinyMceEditor\TinyMceEditor.react.js”

//语言
this.languageIds = {
    "zh-CN":"zh-Hans",
    "zh-TW":"zh-Hant",
    "en-US":"en-US",
}
//默认配置      
getDefaultInit = () => {
    return {
        plugins:
            'advlist autolink lists link image media charmap  anchor table emoticons ' +
            'preview searchreplace visualblocks code fullscreen ' +
            'insertdatetime  code wordcount'
        ,
        automatic_uploads: true,
        skin: false,
        language: this.languageIds[this.getPage().getCurrentLanguage().languageId],
        promotion: false,
        branding: false,
        content_css: false,
        relative_urls: true,
        font_family_formats: "宋体;方正小标宋=FZXiaoBiaoSong-B05S;仿宋=FangSong;微软雅黑=Microsoft Yahei;黑体;楷体",
        toolbar:
            'undo redo | fontfamily | styles |image |  bold italic | ' +
            ' forecolor backcolor | alignleft aligncenter alignright alignjustify | ' +
            'outdent indent |  numlist bullist | ' +
            'removeformat | emoticons | fullscreen | media | link | anchor | table | code | wordcount',
        document_base_url: new URI(location.href).origin(),
        content_style: contentUiCss.toString() + '\n' + contentCss.toString(),
    }
}

富文本编辑器（TinyMceEditor）相关配置可参考官网。富文本编辑器默认没有引用自适应插件，因此在使用时，需要在组件上先行配置开启插件，再到对应的js中引入自适应插件，如下图所示：

案例位置

桌面-页面-列表表单组件-表单组件.w