开发桌面端列表单选页面模板

开发列表单选页面

在 IDE 中开发出一个能正常运行的列表单选页面，示例代码如下：

.w 源码

<antdpro:Page class="x-page" id="page" uix="true" xmlns:antdpro="$UI/comp/antdpro/components" xmlns:attr="http://www.wex5.com/attr" xmlns:bind="http://www.wex5.com/wx/bind" xmlns:catch="http://www.wex5.com/wx/event/catch" xmlns:ext="http://www.wex5.com/ext" xmlns:on="http://www.wex5.com/wx/event/on" xmlns:wx="$UI/wxsys/comps">
    <wx:model id="model" style="left:0px;top:0px;height:auto;position:absolute">
        <wx:wxApi designer_label="通用接口" id="wxapi"/>
        <wx:commonOperation designer_label="操作扩展" id="commonOperation" xmlns:wx="$UI/wxsys/comps"/>
        <wx:restData _created="true" auto="load" className="/main/demoXiangmuys" designer_label="项目营收" id="dialogData" limit="10" microServiceName="" restResource="class" url="/dbrest" version="2.0.33">
            <treeOption id="default0"/>
        </wx:restData>
        <wx:restData _created="true" className="/main/demoXiangmuys" designer_label="选择的数据" id="selectData" microServiceName="" restResource="class" url="/dbrest" version="2.0.33">
            <treeOption id="default1"/>
        </wx:restData>
    </wx:model>
    <wx:inVisibleCompContainer id="inVisibleCompContainer0"/>
    <antdpro:Space direction="vertical" id="space0" size="small" style="width:100%">
        <antdpro:SmartFilter allowClear="true" filterColumns="fid" id="smartFilter0" placeholder="搜索" searchDataId="dialogData"/>
        <antdpro:Table bind:items="dialogData.value" currentRowClassName="ant-table-row-selected" id="table0" item="item" on:onRowClick="[{'operation':'selectData.clear'},{'operation':'commonOperation.copyRows','args':{'sourceData':'dialogData','rows':'js:dialogData.current.fid','destData':'selectData'}}]" on:onRowDoubleClick="[{"operation":"selectData.clear"},{"operation":"commonOperation.copyRows","args":{"sourceData":"dialogData","rows":"js:dialogData.current.fid","destData":"selectData"}},{"operation":"commonOperation.okclose","args":{"data":"selectData"}}]" pagination="false" size="middle">
            <ext:use style="display: none !important;" xmlns:ext="http://www.wex5.com/ext"/>
            <antdpro:Table.Column class="column" dataIndex="fid" id="tableColumn_1" sorter="{{"compare":false}}" width="120px">
                <attr:title id="title1">
                    <antdpro:Typography.Text id="typographyText_1" text="主键"/>
                </attr:title>
                <attr:render id="render1"/>
            </antdpro:Table.Column>
            <antdpro:Table.Column class="column" dataIndex="fshouyi" id="tableColumn_2" sorter="{{"compare":false}}" width="120px">
                <attr:title id="title2">
                    <antdpro:Typography.Text id="typographyText_2" text="项目名称"/>
                </attr:title>
                <attr:render id="render2"/>
            </antdpro:Table.Column>
            <antdpro:Table.Column class="column" dataIndex="fshouyin1eeu1q" id="tableColumn_3" sorter="{{"compare":false}}" width="120px">
                <attr:title id="title3">
                    <antdpro:Typography.Text id="typographyText_3" text="营收金额"/>
                </attr:title>
                <attr:render id="render3"/>
            </antdpro:Table.Column>
            <antdpro:Table.Column class="column" dataIndex="fyingshou" id="tableColumn_4" sorter="{{"compare":false}}" width="120px">
                <attr:title id="title4">
                    <antdpro:Typography.Text id="typographyText_4" text="营收年份"/>
                </attr:title>
                <attr:render id="render4"/>
            </antdpro:Table.Column>
            <antdpro:Table.Column class="column" dataIndex="fyingshoun1efs1j" id="tableColumn_5" sorter="{{"compare":false}}" width="120px">
                <attr:title id="title5">
                    <antdpro:Typography.Text id="typographyText_5" text="营收月份"/>
                </attr:title>
                <attr:render id="render5"/>
            </antdpro:Table.Column>
        </antdpro:Table>
        <antdpro:Pagination bind:items="dialogData.value" class="x-pagination" id="pagination0"/>
        <antdpro:ToolBar class="x-toolbar" id="toolBar0">
            <attr:toolBarExtra class="toolBarExtra" d_canAddChild="true" designer_label="右侧区域" id="toolBarExtra0">
                <antdpro:Button id="button0" on:onClick="{'operation':'commonOperation.close'}" text="取消"/>
                <antdpro:Button id="button1" on:onClick="[{"operation":"commonOperation.okclose","args":{"data":"selectData"},"cond":"js:wx.Util.iif(selectData.count($row)>0,true,false)"}]" text="确定" type="primary"/>
            </attr:toolBarExtra>
        </antdpro:ToolBar>
    </antdpro:Space>
</antdpro:Page>

.w.meta 源码

{
    "devMode": "source",
    "fileMode": "pc",
    "modules": [
        "antdpro"
    ],
    "label": "列表单选"
}

新建页面模板

新建页面模板，参考《页面模板开发》

配置页面模板配置文件

本例页面中包括数据集和表格，因此需要配置数据集配置页、列表配置页、功能命名配置页。配置页参考《页面模板配置页》。配置文件示例代码如下

<wizard text="列表单选" desc="列表单选">
    <steps>
        <item text="主数据" configPage="$UI/system/designer/tplWizard/configPages/mainData.w" id="data">
            <param name="inputIdColumn" value="true" dataType="string"/>
        </item>
        <item text="主页视图" configPage="$UI/system/designer/tplWizard/configPages/showListView.w" id="list">
            <param name="data" value="data"/>
        </item>
        <item text="功能命名" configPage="$UI/system/designer/tplWizard/configPages/filename.w" id="fileName"></item>
    </steps>
</wizard>

开发页面模板文件

复制文件

将开发好的列表单选的页面文件内容复制到页面模板相应类型的文件中，例如：w 文件内容复制到 {{$fileName}}.w 中，其他文件同规则处理。

模板文件中使用配置页参数

使用数据集配置页

数据集配置页的输出参数有：className、label、microServiceName。加上配置文件 template.config.xml 中数据集配置页的 id （本例为 data），形成变量格式：{{data.className}} 等。

本例 W 源码中定义了两个数据组件，使用同一个数据集，用于列表显示和存储选择。

<wx:restData _created="true" auto="load" className="/main/demoXiangmuys" designer_label="项目营收" id="dialogData"
    limit="10" microServiceName="" restResource="class" url="/dbrest" version="2.0.33">
    <treeOption id="default0" />
</wx:restData>
<wx:restData _created="true" className="/main/demoXiangmuys" designer_label="选择的数据" id="selectData"
    microServiceName="" restResource="class" url="/dbrest" version="2.0.33">
    <treeOption id="default1" />
</wx:restData>

使用数据集配置页的输出变量，修改 {{$fileName}}.w 文件，替换后代码如下：

<wx:restData _created="true" auto="load" className="{{data.className}}" designer_label="{{data.label}}" id="dialogData" 
    limit="10" microServiceName="{{data.microServiceName}}"  restResource="class" url="/dbrest" version="2.0.33">
    <treeOption id="default0"/>
</wx:restData>
<wx:restData _created="true" className="{{data.className}}" designer_label="选择的数据" id="selectData" 
    microServiceName="{{data.microServiceName}}"  restResource="class" url="/dbrest" version="2.0.33">
    <treeOption id="default1"/>
</wx:restData>

使用列表配置页

列表配置页的输出参数有：filterCols、hasNo、columns。加上配置文件 template.config.xml 中列表配置页的 id （本例为 list），形成变量格式：{{list.filterCols}} 等。

设置过滤列

本例 W 源码中定义了一个智能过滤组件 SmartFilter，filterColumns 属性用于配置需要过滤的列名

<antdpro:SmartFilter allowClear="true" filterColumns="fid" id="smartFilter0" placeholder="搜索" searchDataId="dialogData" />

使用列表配置页的输出变量，修改 {{$fileName}}.w 文件，替换后代码如下：

<antdpro:SmartFilter allowClear="true" filterColumns="{{list.filterCols}}" id="smartFilter0" placeholder="搜索" searchDataId="dialogData"/>

设置表格列

本例 W 源码中定义了一个表格组件 Table

<antdpro:Table bind:items="dialogData.value" currentRowClassName="ant-table-row-selected" id="table0"
    item="item"
    on:onRowClick="[{'operation':'selectData.clear'},{'operation':'commonOperation.copyRows','args':{'sourceData':'dialogData','rows':'js:dialogData.current.fid','destData':'selectData'}}]"
    on:onRowDoubleClick="[{"operation":"selectData.clear"},{"operation":"commonOperation.copyRows","args":{"sourceData":"dialogData","rows":"js:dialogData.current.fid","destData":"selectData"}},{"operation":"commonOperation.okclose","args":{"data":"selectData"}}]"
    pagination="false" size="middle">
    <ext:use style="display: none !important;" xmlns:ext="http://www.wex5.com/ext" />
    <antdpro:Table.Column class="column" dataIndex="fid" id="tableColumn_1"
        sorter="{{"compare":false}}" width="120px">
        <attr:title id="title1">
            <antdpro:Typography.Text id="typographyText_1" text="主键" />
        </attr:title>
        <attr:render id="render1" />
    </antdpro:Table.Column>
    <antdpro:Table.Column class="column" dataIndex="fshouyi" id="tableColumn_2"
        sorter="{{"compare":false}}" width="120px">
        <attr:title id="title2">
            <antdpro:Typography.Text id="typographyText_2" text="项目名称" />
        </attr:title>
        <attr:render id="render2" />
    </antdpro:Table.Column>
    <antdpro:Table.Column class="column" dataIndex="fshouyin1eeu1q" id="tableColumn_3"
        sorter="{{"compare":false}}" width="120px">
        <attr:title id="title3">
            <antdpro:Typography.Text id="typographyText_3" text="营收金额" />
        </attr:title>
        <attr:render id="render3" />
    </antdpro:Table.Column>
    <antdpro:Table.Column class="column" dataIndex="fyingshou" id="tableColumn_4"
        sorter="{{"compare":false}}" width="120px">
        <attr:title id="title4">
            <antdpro:Typography.Text id="typographyText_4" text="营收年份" />
        </attr:title>
        <attr:render id="render4" />
    </antdpro:Table.Column>
    <antdpro:Table.Column class="column" dataIndex="fyingshoun1efs1j" id="tableColumn_5"
        sorter="{{"compare":false}}" width="120px">
        <attr:title id="title5">
            <antdpro:Typography.Text id="typographyText_5" text="营收月份" />
        </attr:title>
        <attr:render id="render5" />
    </antdpro:Table.Column>
</antdpro:Table>

表格中的序号列、表格列和列中的编辑器，需要根据配置页中的选择动态生成。使用列表配置页的输出变量，修改 {{$fileName}}.w 文件，替换后代码如下：

<antdpro:Table bind:items="dialogData.value" id="table0" item="item" pagination="false" currentRowClassName="ant-table-row-selected" size="middle" 
    on:onRowClick="[{'operation':'selectData.clear'},{'operation':'commonOperation.copyRows','args':{'sourceData':'dialogData','rows':'js:dialogData.current.{{data.idColumn}}','destData':'selectData'}}]"
    on:onRowDoubleClick="[{"operation":"selectData.clear"},{"operation":"commonOperation.copyRows","args":{"sourceData":"dialogData","rows":"js:dialogData.current.{{data.idColumn}}","destData":"selectData"}},{"operation":"commonOperation.okclose","args":{"data":"selectData"}}]">
    <ext:use xmlns:ext="http://www.wex5.com/ext" style="display: none !important;"/>
    {{#compare list.hasNo '==' '1'}}
        <antdpro:Table.Column class="column" dataIndex="noCol" id="tableCol" width="30px">
            <attr:title id="titleCol">
                <antdpro:Typography.Text id="typographyTextCol" text="序号"/>
            </attr:title>
            <attr:render id="renderCol"/>
        </antdpro:Table.Column>
    {{/compare}}
    {{#each list.columns}}
        <antdpro:Table.Column class="column" dataIndex="{{name}}" id="tableColumn_{{index}}" width="120px" sorter="\{{"compare":false}}">
            <attr:title id="title{{index}}">
                <antdpro:Typography.Text id="typographyText_{{index}}" text="{{label}}"/>
            </attr:title>
        {{#compare columnEditor '==' 'input'}}
            <attr:render id="render{{index}}">
                <antdpro:Input bind:ref="$row.{{name}}" id="input_{{index}}"/>
            </attr:render>
        {{/compare}}
        {{#compare columnEditor '==' 'img'}}
            <attr:render id="render{{index}}">
                <antdpro:Image bind:src="$row.{{name}}" id="image_{{index}}" style="width:100px;height:100px"/>
            </attr:render>
        {{/compare}}
        {{#compare columnEditor '==' 'attch'}}
            <attr:render id="render{{index}}">
                <antdpro:Upload bind:ref="$row.{{name}}" id="upload_{{index}}"/>
            </attr:render>
        {{/compare}}
        {{#compare columnEditor '==' 'btn'}}
            <attr:render id="render{{index}}">
                <antdpro:Button text="按钮" id="button_{{index}}"/>
            </attr:render>
        {{/compare}}
        {{#compare columnEditor '==' 'select'}}
            <attr:render id="render{{index}}">
                <antdpro:Select id="select_{{index}}" placeholder="请选择..." bind:ref="$row.{{name}}"/>
            </attr:render>
        {{/compare}}
        {{#compare columnEditor '==' 'radio'}}
            <attr:render id="render{{index}}">
                <antdpro:Radio.Group id="radioGroup_{{index}}" bind:ref="$row.{{name}}"/>
            </attr:render>
        {{/compare}}
        {{#compare columnEditor '==' 'checkbox'}}
            <attr:render id="render{{index}}">
                <antdpro:Checkbox.Group id="checkboxGroup_{{index}}" bind:ref="$row.{{name}}"/>
            </attr:render>
        {{/compare}}
        {{#compare columnEditor '==' 'switch'}}
            <attr:render id="render{{index}}">
                <antdpro:Switch id="switch_{{index}}" bind:ref="$row.{{name}}"/>
            </attr:render>
        {{/compare}}
        {{#compare columnEditor '==' 'text'}}
            <attr:render id="render{{index}}">
                <antdpro:Input.TextArea id="inputTextArea_{{index}}" bind:ref="$row.{{name}}"/>
            </attr:render>
        {{/compare}}
        {{#unless columnEditor}}
            <attr:render id="render{{index}}" />
        {{/unless}}
        </antdpro:Table.Column>
    {{/each}}
</antdpro:Table>

模板代码解释：

• {{#compare list.hasNo '==' '1'}} 和 {{/compare}} 形成一个 Handlebars 条件语法判断代码块，类似 JS 语言中的 if(list.hasNo == '1'){} 语法块
• {{#each list.columns}} 和 {{/each}} 形成一个 Handlebars 循环语法代码块，类似 JS 中的 list.columns.forEach(()=>{}) 语法块
• {{#unless columnEditor}} 和 {{/unless}}形成一个 Handlebars 语法非代码块，类似 JS 中的 if(!columnEditor){} 语法块
• {{#each}} 内部的 {{name}}、{{label}}、{{index}}、是 Handlebars 循环语法代码块中，由被循环变量当前行的值提供的变量，类似 JS 循环中的

    list.columns.forEach((item)=>{
        let {name, label, index} = item;
    })

至此 W 文件内容已经处理完毕，完整的文件内容如下：

<antdpro:Page xmlns:antdpro="$UI/comp/antdpro/components" xmlns:attr="http://www.wex5.com/attr" xmlns:bind="http://www.wex5.com/wx/bind" xmlns:catch="http://www.wex5.com/wx/event/catch" xmlns:ext="http://www.wex5.com/ext" xmlns:on="http://www.wex5.com/wx/event/on" xmlns:wx="$UI/wxsys/comps" class="x-page" id="page" uix="true">
    <wx:model id="model" style="left:0px;top:0px;height:auto;position:absolute">
        <wx:wxApi id="wxapi" designer_label="通用接口"/>
        <wx:commonOperation xmlns:wx="$UI/wxsys/comps" id="commonOperation" designer_label="操作扩展"/>
        <wx:restData _created="true" limit="10" auto="load" microServiceName="{{data.microServiceName}}" className="{{data.className}}" id="dialogData" designer_label="{{data.label}}"  restResource="class" url="/dbrest" version="2.0.33">
            <treeOption id="default0"/>
            {{#compare list.hasNo '==' '1'}}
            <column id="default_1" label="序号" name="noCol" type="String"></column>
            <rule id="rule_0">
                <col id="default_3" name="noCol">
                <calculate id="default_4">
                    <expr id="default_5">
                        <![CDATA[dialogData.getIndex($row)/*{"dependencies":["mainData"]}*/]]>
                    </expr>
                </calculate>
                </col>
            </rule>
        {{/compare}}
        </wx:restData>
        <wx:restData _created="true" microServiceName="{{data.microServiceName}}" className="{{data.className}}" id="selectData" designer_label="选择的数据"  restResource="class" url="/dbrest" version="2.0.33">
            <treeOption id="default1"/>
        </wx:restData>
    </wx:model>
    <wx:inVisibleCompContainer id="inVisibleCompContainer0"/>
    <antdpro:Space direction="vertical" id="space0" style="width:100%" size="small">
        <antdpro:SmartFilter allowClear="true" filterColumns="{{list.filterCols}}" id="smartFilter0" placeholder="搜索" searchDataId="dialogData"/>
        <antdpro:Table bind:items="dialogData.value" id="table0" item="item" pagination="false" currentRowClassName="ant-table-row-selected" size="middle" 
            on:onRowClick="[{'operation':'selectData.clear'},{'operation':'commonOperation.copyRows','args':{'sourceData':'dialogData','rows':'js:dialogData.current.{{data.idColumn}}','destData':'selectData'}}]"
            on:onRowDoubleClick="[{"operation":"selectData.clear"},{"operation":"commonOperation.copyRows","args":{"sourceData":"dialogData","rows":"js:dialogData.current.{{data.idColumn}}","destData":"selectData"}},{"operation":"commonOperation.okclose","args":{"data":"selectData"}}]">
            <ext:use xmlns:ext="http://www.wex5.com/ext" style="display: none !important;"/>
            {{#compare list.hasNo '==' '1'}}
                <antdpro:Table.Column class="column" dataIndex="noCol" id="tableCol" width="30px">
                    <attr:title id="titleCol">
                        <antdpro:Typography.Text id="typographyTextCol" text="序号"/>
                    </attr:title>
                    <attr:render id="renderCol"/>
                </antdpro:Table.Column>
            {{/compare}}
            {{#each list.columns}}
                <antdpro:Table.Column class="column" dataIndex="{{name}}" id="tableColumn_{{index}}" width="120px" sorter="\{{"compare":false}}">
                    <attr:title id="title{{index}}">
                        <antdpro:Typography.Text id="typographyText_{{index}}" text="{{label}}"/>
                    </attr:title>
                    {{#compare columnEditor '==' 'input'}}
                    <attr:render id="render{{index}}">
                        <antdpro:Input bind:ref="$row.{{name}}" id="input_{{index}}"/>
                    </attr:render>
                {{/compare}}
                {{#compare columnEditor '==' 'img'}}
                    <attr:render id="render{{index}}">
                        <antdpro:Image bind:src="$row.{{name}}" id="image_{{index}}" style="width:100px;height:100px"/>
                    </attr:render>
                {{/compare}}
                {{#compare columnEditor '==' 'attch'}}
                    <attr:render id="render{{index}}">
                        <antdpro:Upload bind:ref="$row.{{name}}" id="upload_{{index}}"/>
                    </attr:render>
                {{/compare}}
                {{#compare columnEditor '==' 'btn'}}
                    <attr:render id="render{{index}}">
                        <antdpro:Button text="按钮" id="button_{{index}}"/>
                    </attr:render>
                {{/compare}}
                {{#compare columnEditor '==' 'select'}}
                    <attr:render id="render{{index}}">
                        <antdpro:Select id="select_{{index}}" placeholder="请选择..." bind:ref="$row.{{name}}"/>
                    </attr:render>
                {{/compare}}
                {{#compare columnEditor '==' 'radio'}}
                    <attr:render id="render{{index}}">
                        <antdpro:Radio.Group id="radioGroup_{{index}}" bind:ref="$row.{{name}}"/>
                    </attr:render>
                {{/compare}}
                {{#compare columnEditor '==' 'checkbox'}}
                    <attr:render id="render{{index}}">
                        <antdpro:Checkbox.Group id="checkboxGroup_{{index}}" bind:ref="$row.{{name}}"/>
                    </attr:render>
                {{/compare}}
                {{#compare columnEditor '==' 'switch'}}
                    <attr:render id="render{{index}}">
                        <antdpro:Switch id="switch_{{index}}" bind:ref="$row.{{name}}"/>
                    </attr:render>
                {{/compare}}
                {{#compare columnEditor '==' 'text'}}
                    <attr:render id="render{{index}}">
                        <antdpro:Input.TextArea id="inputTextArea_{{index}}" bind:ref="$row.{{name}}"/>
                    </attr:render>
                {{/compare}}
                {{#unless columnEditor}}
                    <attr:render id="render{{index}}" />
                {{/unless}}
                </antdpro:Table.Column>
            {{/each}}
        </antdpro:Table>
        <antdpro:Pagination bind:items="dialogData.value" class="x-pagination" id="pagination0" />
        <antdpro:ToolBar class="x-toolbar" id="toolBar0">
            <attr:toolBarExtra class="toolBarExtra" d_canAddChild="true" designer_label="右侧区域" id="toolBarExtra0">
                <antdpro:Button id="button0" text="取消" on:onClick="{'operation':'commonOperation.close'}"/>
                <antdpro:Button id="button1" text="确定" type="primary" on:onClick="[{"operation":"commonOperation.okclose","args":{"data":"selectData"},"cond":"js:wx.Util.iif(selectData.count($row)>0,true,false)"}]"/>
            </attr:toolBarExtra>
        </antdpro:ToolBar>
    </antdpro:Space>
</antdpro:Page>

使用功能命名配置页

功能命名配置页的输出参数有：fileLabel。形成变量格式：{{$fileLabel}}。

本例 .w.meta 文件代码如下

{
    "devMode": "source",
    "fileMode": "pc",
    "label": "列表单选测试",
    "modules": [
        "antdpro"
    ]
}

使用功能命名配置页的输出变量，修改 {{$fileName}}.w.meta 文件，替换后代码如下：

{
    "devMode": "source",
    "fileMode": "pc",
    "label": "{{$fileLabel}}",
    "modules": [
        "antdpro"
    ]
}

测试页面模板

上面创建的页面模板支持直接使用，新建页面时即可看到该页面模板，使用此模板创建页面，测试页面模板。测试后可以上传市场，参考《页面模板开发》