页面模板配置页

页面模板由若干个配置页组成，配置于 template.config.xml 文件中。页面向导显示一个个配置页，并收集各个配置页的输出参数。按照配置页 ID 属性（<item id="idDefine"/>），以 { idDefine：templateOutputParam } 的方式缓存于上下文中。当向导执行到最后一步时，把所有收集到的各配置页的输出参数，使用 Handlebars 进行模板编译，模板编译后，即可按页面模板文件创建 W 页面，JS 文件等。

配置文件

页面模板中的配置文件 template.config.xml 用于配置页面模板中的配置页，文件是由 wizard、steps、item、param 等节点构成的 XML 文件。

示例代码如下：

<wizard text="树形表单" desc="树+详细(表单)">
    <steps>
        <item text="主数据" configPage="$UI/system/designer/tplWizard/configPages/mainData.w" id="data"/>

        <item text="树型设置" configPage="$UI/system/designer/tplWizard/configPages/treeViewMore.w" id="tree">
            <param name="data" value="data"/>
        </item>

        <item text="编辑表单" configPage="$UI/system/designer/tplWizard/configPages/queryFormView.w" id="detail">
            <param name="data" value="data"/>
        </item>

        <item text="功能命名" configPage="$UI/system/designer/tplWizard/configPages/filename.w" id="fileName"></item>

    </steps>
</wizard>

在向导中显示配置页，如下图所示

文件结构

配置文件常规结构如下：

<wizard text="" desc="">
    <steps>
        <item text="" configPage="" id="">
        </item>
        <item text="" configPage="" id="">
        </item>
        <item text="" configPage="" id="">
        </item>
        ......
    </steps>
</wizard>

文件组成元素

wizard 元素

wizard 元素是配置文件的根节点，属性说明如下：

属性名	用途	说明
text	记录页面模板名称	记录页面模板的中文名称。
desc	记录页面模板说明	记录页面模板的简易说明。

steps 元素

steps 元素是各步骤的父节点，在其中定义步骤及使用的配置页

item 元素

item 元素定义使用的配置页，属性说明如下：

属性名	用途	说明
text	步骤标题	该属性记录步骤的标题，在新建页面时弹出框的向导步骤中显示为步骤标题。
configPage	使用的配置页	该属性记录使用的配置页，格式 configPage="$UI/system/designer/tplWizard/configPages/xxx.w"
id	配置页 ID	该属性记录配置页实例的 ID，以当前 ID 值作为 key，配置页的输出参数集缓存于上下文中，供后续的配置页使用（后续配置页使用当前配置页的输出参数时，可以使用<param name="itemId.outputParamName" value="true" dataType="string"/>的方式使用输出参数，属性值"itemId.outputParamName"中 itemId 就是当前配置页的 id 属性，outputParamName 就是当前配置页的输出参数）。

配置页

配置页是一套按输入参数控制渲染的表单交互的页面，输出参数缓存于上下文，可以给之后的配置页提供参数（例如：数据集配置页能为编辑列表配置页的输入参数提供值），当向导执行到最后一步时，把所有参数送于 Handlebars 中对页面模板套件（后缀为.css、.js、.w、.w.meta等文件）进行编译，编译后的模板套件即为已处理好的新建页面文件套件。

按用途，将配置页分为数据集配置、列表配置、表单配置、树形配置、功能命名配置等几种类型。

数据集配置

数据集配置页用于选择数据集，为之后的配置页提供数据集参数。系统提供2个数据集配置页，见下表

配置页	选择一个数据集	选择主从数据集	配置页面
单个数据集配置	1		mainData.w
主从数据集配置		1	masterDetailData.w

单个数据集配置

页面中使用数据集时，需要使用数据集配置页，配置一个数据集。单个数据集配置页预览如下图：

在配置文件中，配置单个数据集配置页，示例代码如下：

<item text="数据设置" configPage="$UI/system/designer/tplWizard/configPages/mainData.w" id="data">
</item>

单个数据配置页输出参数见下表：

参数名	用途
className	记录数据集的 className 属性
microServiceName	记录数据集的 microServiceName 属性
label	记录数据的 label 属性
idColumn	记录数据集的 idColumn 属性

单个数据集配置页输出参数 JSON 值案例如下：

{
    "data": {
        "className": "/uaa/users",
        "microServiceName": "",
        "label": "用户(用户服务)",
        "idColumn": "id"
    }
}

单个数据集配置页输出参数使用案例如下：

<wx:restData checkMode="beforeSave" 
    auto="load" 
    className="{{data.className}}" 
    id="mainData" 
    designer_label="{{data.label}}" 
    restResource="class" 
    url="/dbrest" version="2.0.33"
/>

主从数据集配置

页面使用主从数据集时，需要配置主从数据集配置页。主从数据集配置页预览如下图：

在配置文件中，配置主从数据集配置页，示例代码如下：

<item text="数据设置" configPage="$UI/system/designer/tplWizard/configPages/masterDetailData.w" id="data">
</item>

主从数据集配置页输出参数见下表：

参数名	用途	说明
masterData	记录主表信息	值为对象类型，分别有 className、microServiceName、label 子属性
detailData	记录从表信息	值为对象类型，分别有 className、microServiceName、label、relation子属性

主从数据集配置页输出参数 JSON 值案例如下：

{
    "data": {
        "masterData": {
            "className": "/uaa/users",
            "microServiceName": "",
            "label": "用户(用户服务)"
        },
        "detailData": {
            "className": "/uaa/groups",
            "microServiceName": "",
            "label": "群组(用户服务)",
            "relation": "name"
        }
    }
}

主从数据集配置页输出参数使用案例如下：

<wx:model id="model" style="left:0px;top:0px;height:auto;position:absolute">
    <!-- ... -->
    <wx:restData version="2.0.33" _created="true" auto="load" microServiceName="{{data.masterData.microServiceName}}" className="{{data.masterData.className}}" id="mainData" designer_label="{{data.masterData.label}}" url="/dbrest">
    </wx:restData>
    <wx:restData _created="true" auto="load" enableMaster="true" microServiceName="{{data.detailData.microServiceName}}" className="{{data.detailData.className}}" id="detailData" designer_label="{{data.detailData.label}}" url="/dbrest" version="2.0.33">
        <master data="mainData" id="default_0" relation="{{data.detailData.relation}}"/>
    </wx:restData>
    <!-- ... -->
</wx:model>

列表配置

列表配置页用于选择数据集的列以及编辑器，以数组类型作为输出参数。通常用于配置表格、列表等页面。系统提供3个列表配置页，见下表

配置页	指定标题	指定搜索列	生成序号列	指定编辑器	生成查询条件	配置页面
列表配置页	1	1				listView.w
编辑列表配置页		1	1	1		showListView.w
查询列表配置页			1	1	1	queryListView.w

列表配置页

页面中显示表格或列表时，需要使用列表配置页。列表配置页预览如下图：

在配置文件中，配置列表配置页，示例代码如下：

<!-- 该节点为必须配置的前置节点 -->
<item text="表头设置" configPage="$UI/system/designer/tplWizard/configPages/listView.w" id="masterList">
    <param name="data" value="data.masterData"/>
</item>

列表配置页输入参数见下表：

参数名	用途	说明
data	必须，指定使用的数据集	value 的值为前置单个数据集配置页的 ID 值，主从数据集配置页的 ID 值.masterData 或 ID 值.detailData

列表配置页输出参数见下表：

参数名	用途
title	记录标题
filterCols	记录用作搜索列的列名
columns	记录已选择的数据的列信息

列表配置页输出参数 JSON 值案例如下：

{
    "masterList": {
        "title": "列表",
        "filterCols": "",
        "columns": [
            {
                "filterEditor": "",
                "filterEditorName": "",
                "colEditor": "ed",
                "dataType": "Long",
                "isCondition": "",
                "name": "version",
                "index": 1,
                "alias": "",
                "isFiltCol": "",
                "label": "版本",
                "isVisible": "是"
            },
            {
                "filterEditor": "",
                "filterEditorName": "",
                "colEditor": "ed",
                "dataType": "String",
                "isCondition": "",
                "name": "username",
                "index": 2,
                "alias": "",
                "isFiltCol": "",
                "label": "用户名",
                "isVisible": "是"
            },
            {
                "filterEditor": "",
                "filterEditorName": "",
                "colEditor": "ed",
                "dataType": "String",
                "isCondition": "",
                "name": "password",
                "index": 3,
                "alias": "",
                "isFiltCol": "",
                "label": "密码",
                "isVisible": "是"
            }
        ],
        "conditions": []
    }
}

列表配置页输出参数使用案例如下：

<antdpro:Card bordered="false" id="card0" size="small" title="{{masterList.title}}">
  <antdpro:Table pagination="false" bind:items="mainData.value" directEdit="true" id="table0" item="item" size="small" currentRowClassName="ant-table-row-selected">
  {{#each masterList.columns}}
    <antdpro:Table.Column xmlns:attr="http://www.wex5.com/attr" class="column" dataIndex="{{name}}" id="tableColumn_{{index}}" width="120px" sorter="true">
      <attr:title id="title_{{index}}">
        <antdpro:Typography.Text id="typographyText{{index}}" text="{{label}}"/>
      </attr:title>
      <attr:render id="render_{{index}}">
        <antdpro:Input bind:ref="$row.{{name}}" id="input_{{index}}"/>
      </attr:render>
    </antdpro:Table.Column>
    {{/each}}
  </antdpro:Table>
  <antdpro:Pagination bind:items="mainData.value" class="x-pagination" id="pagination0" />
</antdpro:Card>

编辑列表配置页

页面中显示带序号的表格或列表，在表格或列表中使用组件展示内容时，需要使用编辑列表配置页。编辑列表配置页预览如下图：

编辑列表配置页编辑器预览如下图：

在配置文件中，配置编辑列表配置页，示例代码如下：

<!-- 该节点为必须配置的前置节点 -->
<item text="数据设置" configPage="$UI/system/designer/tplWizard/configPages/mainData.w" id="xxxData">
    <param name="inputIdColumn" value="true" dataType="string"/>
</item>
<!-- 编辑列表配置页 -->
<item text="主页视图" configPage="$UI/system/designer/tplWizard/configPages/showListView.w" id="list">
    <param name="data" value="xxxData"/>
</item>

编辑列表配置页输入参数如下表：

参数名	用途	说明
data	必须，指定使用的数据集	value 的值为前置单个数据集配置页的 ID 值，主从数据集配置页的 ID 值.masterData 或 ID 值.detailData

编辑列表配置页输出参数如下表：

参数名	用途	说明
filterCols	记录用作搜索列的列名
columns	记录已选择的数据的列信息	columnEditor 表示列编辑器

columns 中的 columnEditor 记录了选择的编辑器，枚举值如下：

[
    {
        "code": "img",
        "name": "图片"
    },
    {
        "code": "attch",
        "name": "附件"
    },
    {
        "code": "btn",
        "name": "按钮"
    },
    {
        "code": "input",
        "name": "输入框"
    },
    {
        "code": "select",
        "name": "选择器"
    },
    {
        "code": "radio",
        "name": "单选组"
    },
    {
        "code": "checkbox",
        "name": "多选组"
    },
    {
        "code": "switch",
        "name": "开关"
    },
    {
        "code": "text",
        "name": "长文本"
    }
]

编辑列表配置页输出参数 JSON 值案例如下：

{
    "list": {
        "title": "列表",
        "filterCols": "",
        "columns": [
            {
                "filterEditor": "",
                "colEditor": "ed",
                "dataType": "String",
                "index": 1,
                "isFiltCol": "",
                "label": "密码",
                "isVisible": "是",
                "filterEditorName": "",
                "isCondition": "",
                "name": "password",
                "alias": "",
                "columnEditor": "input",
                "columnEditorName": "输入框"
            },
            {
                "filterEditor": "",
                "colEditor": "ed",
                "dataType": "String",
                "index": 2,
                "isFiltCol": "",
                "label": "邮箱",
                "isVisible": "是",
                "filterEditorName": "",
                "isCondition": "",
                "name": "email",
                "alias": "",
                "columnEditor": "",
                "columnEditorName": ""
            },
            {
                "filterEditor": "",
                "colEditor": "ed",
                "dataType": "String",
                "index": 3,
                "isFiltCol": "",
                "label": "用户类型",
                "isVisible": "是",
                "filterEditorName": "",
                "isCondition": "",
                "name": "authorities",
                "alias": "",
                "columnEditor": "",
                "columnEditorName": ""
            }
        ],
        "conditions": [],
        "hasNo": null
    }
}

编辑列表配置页输出参数使用案例如下：

<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" >
    <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>

查询列表配置页

页面中显示查询条件及表格或列表时，需要使用查询列表配置页。查询列表配置页预览如下图：

查询列表配置页编辑器预览如下图：

在配置文件中，配置查询列表配置页，示例代码如下：

<!-- 该节点为必须配置的前置节点 -->
<item text="数据设置" configPage="$UI/system/designer/tplWizard/configPages/mainData.w" id="xxxData">
    <param name="inputIdColumn" value="true" dataType="string"/>
</item>
<!-- 查询列表配置页 -->
<item text="列表视图" configPage="$UI/system/designer/tplWizard/configPages/queryListView.w" id="list">
    <param name="data" value="xxxData"/>
</item>

查询列表配置页输入参数如下表：

参数名	用途	说明
data	必须，指定使用的数据集	value 的值为前置单个数据集配置页的 ID 值，主从数据集配置页的 ID 值.masterData 或 ID 值.detailData

查询列表配置页输出参数如下表：

参数名	用途	说明
hasNo	记录是否生成序号列
columns	记录已选择的数据的列信息	columnEditor 表示列编辑器，isCondition 表示是否作为查询条件，filterEditor 表示查询条件编辑器，编辑器的枚举值说明见编辑列表配置页里面的说明

查询列表配置页输出参数 JSON 值案例如下：

{
    "list": {
        "title": "列表",
        "filterCols": "",
        "columns": [
            {
                "name": "lastModified",
                "label": "修改时间",
                "alias": "",
                "colEditor": "ed",
                "dataType": "DateTime",
                "index": 1,
                "isFiltCol": "",
                "isVisible": "是",
                "isCondition": "1",
                "filterEditor": "",
                "filterEditorName": "输入框",
                "columnEditor": "input",
                "columnEditorName": "输入框"
            },
            {
                "filterEditor": "",
                "colEditor": "ed",
                "dataType": "Long",
                "index": 2,
                "isFiltCol": "",
                "label": "版本",
                "isVisible": "是",
                "filterEditorName": "",
                "isCondition": "",
                "name": "version",
                "alias": "",
                "columnEditor": "",
                "columnEditorName": ""
            },
            {
                "filterEditor": "",
                "colEditor": "ed",
                "dataType": "String",
                "index": 3,
                "isFiltCol": "",
                "label": "用户名",
                "isVisible": "是",
                "filterEditorName": "",
                "isCondition": "",
                "name": "username",
                "alias": "",
                "columnEditor": "",
                "columnEditorName": ""
            }
        ],
        "conditions": [],
        "hasNo": null
    }
}

查询列表配置页输出参数使用案例如下：

<antdpro:Table scroll="\{{"y":true}}" tableLayout="fixed" bind:items="mainData.value" id="table" item="item" pagination="false" size="middle">
    {{#compare list.hasNo '==' '1'}}
    <antdpro:Table.Column class="column" dataIndex="noCol" id="tableColumn0" width="40px">
        <attr:title>
            <antdpro:Typography.Text id="typographyText0" text="序号"/>
        </attr:title>
        <attr:render id="render_0"/>
    </antdpro:Table.Column>
    {{/compare}}
    {{#each list.columns}}
    <antdpro:Table.Column class="column" dataIndex="{{name}}" id="tableColumn{{index}}" width="120px">
        <attr:title>
            <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.Column class="column" dataIndex="operateCol" id="tableColumn" width="120px" fixed="right">
        <attr:title id="title1">
            <antdpro:Typography.Text id="typographyText5" text="操作"/>
        </attr:title>
        <attr:render id="render00">
            <antdpro:Space id="space1">
                <antdpro:Button id="editBtn" on:onClick="onEditBtnClick({"rowid":$row.{{data.idColumn}} })" text="编辑" type="link"/>
                <antdpro:Button id="viewBtn" on:onClick="{"operation":"commonOperation.openPage","args":{"url":"{{$targetPath}}/{{$detailPageName}}.w","params":"js:{\"id\":$row.{{data.idColumn}},\"action\":\"view\"}"}}" text="查看" type="link"/>
                <antdpro:Button id="button0" on:onClick="{"operation":"wfmui.showChart","args":{"data":"js:$row.{{data.idColumn}}"}}" text="流程图" type="link"/>
            </antdpro:Space>
        </attr:render>
    </antdpro:Table.Column>
</antdpro:Table>

表单配置

表单配置页用于选择数据集的列以及编辑器，以数组类型作为输出参数。通常用于配置表单页面。系统提供1个表单配置页，见下表

配置页	指定每行列数	指定编辑器	列占格数	配置页面
表单配置页	1	1	1	queryFormView.w

表单配置页

页面显示表单时，需要配置表单配置页。表单配置页预览如下图：

在配置文件中，配置表单配置页，示例代码如下：

<!-- 该节点为必须配置的前置节点 -->
<item text="数据设置" configPage="$UI/system/designer/tplWizard/configPages/mainData.w" id="xxxData">
    <param name="inputIdColumn" value="true" dataType="string"/>
</item>
<!-- 表单配置页 -->
<item text="详细视图" configPage="$UI/system/designer/tplWizard/configPages/queryFormView.w" id="detail">
    <param name="data" value="xxxData"/>
</item>

表单配置页输入参数如下表：

参数名	用途	说明
data	必须，指定使用的数据集	value 的值为前置单个数据集配置页的 ID 值，主从数据集配置页的 ID 值.masterData 或 ID 值.detailData

表单配置页输出参数如下表：

参数名	用途	说明
formControls	记录已选择的数据的列信息	colSpan 表示列占格数，colEditor 表示编辑器

表单配置页输出参数 JSON 值案例如下：

{
    "detail": {
        "title": "标题",
        "formControls": [
            {
                "selectDataID": "",
                "colEditorName": "输入框",
                "colEditor": "input",
                "colSpan": 12,
                "dataType": "DateTime",
                "name": "created",
                "index": 1,
                "alias": "",
                "label": "创建时间",
                "refID": ""
            },
            {
                "selectDataID": "",
                "colEditorName": "输入框",
                "colEditor": "input",
                "colSpan": 12,
                "dataType": "DateTime",
                "name": "lastModified",
                "index": 2,
                "alias": "",
                "label": "修改时间",
                "refID": ""
            },
            {
                "selectDataID": "",
                "colEditorName": "输入框",
                "colEditor": "input",
                "colSpan": 12,
                "dataType": "Long",
                "name": "version",
                "index": 3,
                "alias": "",
                "label": "版本",
                "refID": ""
            },
            {
                "selectDataID": "",
                "colEditorName": "输入框",
                "colEditor": "input",
                "colSpan": 12,
                "dataType": "String",
                "name": "username",
                "index": 4,
                "alias": "",
                "label": "用户名",
                "refID": ""
            }
        ]
    }
}

formControls 中 colEditor 的枚举值如下：

[
    {
        "code": "input",
        "name": "输入框"
    },
    {
        "code": "select",
        "name": "选择器"
    },
    {
        "code": "radio",
        "name": "单选组"
    },
    {
        "code": "checkbox",
        "name": "多选组"
    },
    {
        "code": "switch",
        "name": "开关"
    },
    {
        "code": "text",
        "name": "长文本"
    },
    {
        "code": "img",
        "name": "图片"
    },
    {
        "code": "attach",
        "name": "附件"
    }
]

表单配置页输出参数使用案例如下：

<antdpro:Form id="form0" labelCol="\{{"flex":"120px"}}">
    <antdpro:Row id="row0">
        {{#each detail.formControls}}
        <antdpro:Col id="col_{{index}}" span="{{colSpan}}">
            <antdpro:Form.Item id="formItem_{{index}}" label="{mainData.label('{{name}}')}">
                {{#compare colEditor '==' 'input'}}
                <antdpro:Input bind:ref="mainData.current.{{name}}" id="input_{{index}}"/>
                {{/compare}}
                {{#compare colEditor '==' 'select'}}
                <antdpro:Select id="select_{{index}}" bind:ref="mainData.current.{{name}}" placeholder="请选择..."/>
                {{/compare}}
                {{#compare colEditor '==' 'radio'}}
                <antdpro:Radio.Group id="radioGroup_{{index}}" bind:ref="mainData.current.{{name}}"/>
                {{/compare}}
                {{#compare colEditor '==' 'checkbox'}}
                <antdpro:Checkbox.Group id="checkboxGroup_{{index}}" bind:ref="mainData.current.{{name}}"/>
                {{/compare}}
                {{#compare colEditor '==' 'switch'}}
                <antdpro:Switch id="switch_{{index}}" bind:ref="mainData.current.{{name}}"/>
                {{/compare}}
                {{#compare colEditor '==' 'text'}}
                <antdpro:Input.TextArea id="inputTextArea_{{index}}" bind:ref="mainData.current.{{name}}"/>
                {{/compare}}
                {{#compare colEditor '==' 'attach'}}
                <antdpro:Upload id="upload_{{index}}" bind:ref="mainData.current.{{name}}"/>
                {{/compare}}
                {{#compare colEditor '==' 'img'}}
                <antdpro:Image id="image{{index}}" src="{mainData.current.{{name}} }"/>
                {{/compare}}
            </antdpro:Form.Item>
        </antdpro:Col>
        {{/each}}
    </antdpro:Row>
</antdpro:Form>

树形配置

树形配置页用于选择数据集的列作为树显示列，定义是否显示虚根。通常用于配置树页面。系统提供2个树形配置页，见下表

配置页	指定显示列	指定是否使用虚根	指定父列名称	指定全路径 ID 列	指定全路径名称列	配置页面
树形配置页	1	1	1			treeViewMore.w
树形全路径配置页	1	1		1	1	treeViewMost.w

树形配置页

页面显示树时，需要配置树形配置页，树形配置页预览如下图：

在配置文件中，配置树形配置页，示例代码如下：

<!-- 该节点为必须配置的前置节点 -->
<item text="主数据" configPage="$UI/system/designer/tplWizard/configPages/mainData.w" id="xxxData">
    <param name="inputIdColumn" value="true" dataType="string"/>
</item>
<!-- 树形配置页 -->
<item text="树型设置" configPage="$UI/system/designer/tplWizard/configPages/treeViewMore.w" id="tree">
    <param name="xxxData" value="data"/>
</item>

树形配置页输入参数如下表：

参数名	用途	说明
data	必须，指定使用的数据集	value 的值为前置单个数据集配置页的 ID 值，主从数据集配置页的 ID 值.masterData 或 ID 值.detailData

树形配置页输出参数如下表：

参数名	用途	说明
expandColumn	记录显示名称列
parentID	记录父列
useVirtualRoot	记录是否使用虚根
virtualRootLabel	记录虚根节点的显示名称

树形配置页输出参数 JSON 值案例如下：

{
    "tree": {
        "expandColumn": "username",
        "parentID": "parent",
        "useVirtualRoot": true,
        "virtualRootLabel": "用户"
    }
}

树形配置页输出参数使用案例如下：

<antdpro:Button id="button1" on:onClick="{'operation':'mainData.new','args':{'parentRow':'js:mainData.current.{{tree.parentID}}'}}" text="添加同级" type="primary"/>
<antdpro:Tree bind:items="mainData.value"  titleColumn="{{tree.expandColumn}}" useVirtualRoot="{{tree.useVirtualRoot}}" virtualRootLabel="{{tree.virtualRootLabel}}">
</antdpro:Tree>

树形全路径配置页

页面显示树时，需要配置树形全路径配置页，树形全路径配置页预览如下图：

在配置文件中，配置树形全路径配置页，示例代码如下：

<!-- 该节点为必须配置的前置节点 -->
<item text="主数据" configPage="$UI/system/designer/tplWizard/configPages/mainData.w" id="xxxData">
    <param name="inputIdColumn" value="true" dataType="string"/>
</item>
<!-- 树形全路径配置页 -->
<item text="树型设置" configPage="$UI/system/designer/tplWizard/configPages/treeViewMost.w" id="tree">
    <param name="data" value="xxxData"/>
</item>

树形全路径配置页输入参数如下表：

参数名	用途	说明
data	必须，指定使用的数据集	value 的值为前置单个数据集配置页的 ID 值，主从数据集配置页的 ID 值.masterData 或 ID 值.detailData

树形全路径配置页输出参数如下表：

参数名	用途	说明
expandColumn	记录显示列名称
useVirtualRoot	记录是否使用虚根
virtualRootLabel	记录根节点的显示名称
fullName	记录全路径名称列
fullId	记录全路径 id 列

树形全路径配置页输出参数 JSON 值案例如下：

{
    "tree": {
        "expandColumn": "username",
        "useVirtualRoot": true,
        "virtualRootLabel": "用户",
        "fullName": null,
        "fullId": null
    }
}

树形全路径配置页输出参数使用案例如下：

<antdpro:Tree bind:items="mainData.value"  titleColumn="{{tree.expandColumn}}" useVirtualRoot="{{tree.useVirtualRoot}}" virtualRootLabel="{{tree.virtualRootLabel}}">
</antdpro:Tree>

功能命名配置

功能命名配置页用于为新建的页面提供页面名称，显示名称，是否添加导航栏等输出参数。系统提供5个功能命名配置页，见下表

配置页	单页	双页	指定详情页打开方式	指定有无导航栏	配置页面
单页功能名称配置页	1				filename.w
双页功能名称配置页		1			filenameDetail.w
双页功能名称（打开方式）配置页		1	1		filenameDialog.w
移动端单页功能名称配置页	1			1	filenameNavbar.w
移动端双页功能名称配置页		1		1	filenameNavbarDetail.w

单页功能命名配置页

生成单页面时，需使用单页功能命名配置页。单页功能命名配置页预览如下图：

在配置文件中，配置单页功能命名配置页，示例代码如下：

<item text="功能命名" configPage="$UI/system/designer/tplWizard/configPages/filename.w" id="fileName"></item>

单页功能命名配置页输出参数如下表：

参数名	用途	说明
$fileLabel	记录生成的 .w 页面显示名
$fileName	记录生成的 .w 页面名

单页功能命名配置页输出参数 JSON 值案例如下：

{
   "$fileLabel": "新建页面",
   "$fileName": "newPage"
}

单页功能命名配置页输出参数主要供新建页面时取值为新页面的名称，另外是用作 serviceMetaInfo.json.tpl 文件，使用案例如下：

{
    "authorize":{
    "permissions":[],
    "roles":[]
    },
    "menu":{
        "children":[
            {
                "children":[
                    {
                        "children":[],
                        "ext":{},
                        "title":"{{$fileLabel}}",
                        "types":["pcx","func"],
                        "url":"/{serviceName}/{{#replace $targetPath}}{{/replace}}/{{$fileName}}.w"
                    }
                ],
                "ext":{},
                "title":"{{$targetPathLabel}}",
                "types":[]
            }
        ],
        "ext":{},
        "title":"{serviceLabel}",
        "types":[]
    },
    "serviceInfo":{
        "label":"{serviceLabel}",
        "name":"{serviceName}"
    }
}

双页功能命名配置页

同时生成两个页面（例如：父子页面）时，需使用双页功能命名配置页。双页功能命名配置页预览如下图：

在配置文件中，配置双页功能命名配置页，示例代码如下：

<item text="功能命名" configPage="$UI/system/designer/tplWizard/configPages/filenameDetail.w" id="fileName"></item>

双页功能命名配置页输出参数如下表：

参数名	用途	说明
$fileLabel	记录生成的 .w 列表页面显示名
$fileName	记录生成的 .w 列表页面名称
$detailPageLabel	记录生成的 .w 明细页面显示名
$detailPageName	记录生成的 .w 明细页面名

双页功能命名配置页输出参数 JSON 值案例如下：

{
    "$fileLabel": "列表页",
    "$fileName": "liebiao_y",
    "$detailPageLabel": "明细页",
    "$detailPageName": "liebiao_y_detail"
}

双页功能命名配置页输出参数用于新建页面命名，$detailPageLabel 和 $detailPageName 的使用案例如下：

<vantui:Dialog id="dialog0" pagePath="$UI/mobile/{{$detailPageName}}.w">
</vantui:Dialog>

双页功能命名（打开方式）配置页

同时生成两个页面（例如：父子页面），且支持用户选择打开方式时，需使用双页功能命名（打开方式）配置页。双页功能命名（打开方式）配置页预览如下图：

在配置文件中，配置双页功能命名（打开方式）配置页，示例代码如下：

<item text="功能命名" configPage="$UI/system/designer/tplWizard/configPages/filenameDialog.w" id="fileName"></item>

双页功能命名（打开方式）配置页输出参数如下表：

参数名	用途	说明
$fileLabel	记录生成的 .w 列表页面显示名
$fileName	记录生成的 .w 列表页面名
$detailPageLabel	记录生成的 .w 明细页面显示名
$detailPageName	记录生成的 .w 明细页面名
$mode	记录详情页打开方式（默认 dialog）。	枚举值为：[{"mode":"对话框","value":"dialog"},{"mode":"打开页","value":"page"},{"mode":"抽屉","value":"drawer"}]

双页功能命名（打开方式）配置页输出参数 JSON 值案例如下：

{
    "$fileLabel": "新建页面",
    "$fileName": "newPage",
    "$detailPageLabel": "明细页",
    "$detailPageName": "liebiao_y_detail",
    "$mode": "dialog"
}

双页功能命名（打开方式）配置页输出参数主要用作页面命名，另外 $mode 参数使用案例如下：

<antdpro:Table bind:items="mainData.value" id="table" item="item" pagination="false" rowSelectedDataId="selectedData" scroll="\{{"y":true}}" tableLayout="fixed" size="middle">
    <antdpro:Table.Column class="column" dataIndex="operateCol" id="tableColumn" width="120px" fixed="right">
        <attr:title id="title1">
            <antdpro:Typography.Text id="typographyText5" text="操作"/>
        </attr:title>
        <attr:render id="render00">
            <antdpro:Space id="space1">
                {{#compare $mode '==' 'dialog'}}
                    <!-- 显示元素 -->
                {{/compare}}
            </antdpro:Space>
        </attr:render>
    </antdpro:Table.Column>
</antdpro:Table>

移动端单页功能命名配置页

生成移动端单页面，支持用户选择是否增加顶部导航栏时，需使用移动端单页功能命名配置页。移动端单页功能命名配置页预览如下图：

在配置文件中，配置移动端单页功能命名配置页，示例代码如下：

<item text="功能命名" configPage="$UI/system/designer/tplWizard/configPages/filenameNavbar.w" id="fileName"></item>

移动端单页功能命名配置页输出参数如下表：

参数名	用途	说明
$fileLabel	记录生成的 .w 页面显示名
$fileName	记录生成的 .w 页面名
$navbar	记录是否增加顶部导航栏	值为"1"时增加，其他值为否。

移动端单页功能命名配置页输出参数 JSON 值案例如下：

{
    "$fileLabel": "新建页面",
    "$fileName": "newPage",
    "$navbar": "1"
}

移动端单页功能命名配置页输出参数主要用于新建页面命名，另外 $navbar 参数使用案例如下：

<vantui:Page xmlns:bind="http://www.wex5.com/wx/bind"
    xmlns:catch="http://www.wex5.com/wx/event/catch"
    xmlns:on="http://www.wex5.com/wx/event/on"
    xmlns:vantui="$UI/comp/vantui/components"
    xmlns:wxContext="$UI/comp/wxContext/components"
    xmlns:wx="$UI/wxsys/comps" class="x-page" id="page"{{#compare $navbar '==' '1'}} navigationStyle="custom"{{/compare}}>
</vantui:Page>

移动端双页功能命名配置页

同时生成移动端两个页面（例如：父子页面），支持用户选择是否增加顶部导航栏时，需使用移动端双页功能命名配置页。移动端双页功能命名配置页预览如下图：

在配置文件中，配置移动端双页功能命名配置页，示例代码如下：

<item text="功能命名" configPage="$UI/system/designer/tplWizard/configPages/filenameNavbarDetail.w" id="fileName"></item>

移动端双页功能命名配置页输出参数如下表：

参数名	用途	说明
$fileLabel	记录生成的 .w 列表页面显示名
$fileName	记录生成的 .w 列表页面名
$detailPageLabel	记录生成的 .w 明细页面显示名
$detailPageName	记录生成的 .w 明细页面名
$navbar	记录是否增加顶部导航栏	值为"1"时增加，其他值为否。

移动端双页功能命名配置页输出参数 JSON 值案例如下：

{
    "$fileLabel": "新建页面",
    "$fileName": "newPage",
    "$detailPageLabel": "明细页",
    "$detailPageName": "liebiao_y_detail",
    "$navbar": "1"
}

移动端双页功能命名配置页输出参数案例同上。

页面模板配置页

页面模板配置页

配置文件

文件结构

文件组成元素

配置页

数据集配置

单个数据集配置

主从数据集配置

列表配置

列表配置页

编辑列表配置页

查询列表配置页

表单配置

表单配置页

树形配置

树形配置页

树形全路径配置页

功能命名配置

单页功能命名配置页

双页功能命名配置页

双页功能命名（打开方式）配置页

移动端单页功能命名配置页

移动端双页功能命名配置页

results matching ""

No results matching ""