流程表单页面布局

流程表单由三部分内容构成，头部，正文部分， 尾部信息。

1. 区块

标准的代码块由三部分构成: 区块, 标题, 标签，控件.

代码:

<!--人力资源部审批(需求人数在预算内)/HR Dept.(In Budget)：-->
<fm-group-head title="{{ form.$pageLang.inBudget}}"></fm-group-head>
<div class="row">
    <div class="form-group">
        <div class="col-xs-12">
             <!--申请类型-->
            <span class="col-xs-2 control-label required" ng-bind="form.$pageLang.bugetType"></span>           
            <div class="col-xs-4">
                <!--预算内外-->
                <fm-select items="[{id:'1',text:'预算内/In Budget'},
                                    {id:'2',text:'预算外/Over Budget'}]"
                              fm-model="1">
            </div>
        </div>
    </div>
</div>

1.1 标题

效果图:

代码:

<!--标题-->
<fm-group-head title="{{ form.$pageLang.inBudget}}"></fm-group-head>

具体控件用法，fm-group-head控件用法, 效果如下

1.2 区块布局

页面布局采用的是Bootstrap的 栅格系统。

效果图:

代码:

<!--占用一整行-->
<div class="row">
    <div class="form-group">
        <div class="col-xs-12">
             <!--控件或内容-->
        </div>
    </div>
</div>
<!--占用一半,分两列-->
<div class="row">
    <div class="form-group">
        <div class="col-xs-6">
             <!--控件或内容-->
        </div>
        <div class="col-xs-6">
             <!--控件或内容-->
        </div>
    </div>
</div>
<!--占用一半,分三列-->
<div class="row">
    <div class="form-group">
        <div class="col-xs-4">
             <!--控件或内容-->        
        </div>
        <div class="col-xs-4">
             <!--控件或内容-->        
        </div>
        <div class="col-xs-4">
             <!--控件或内容-->
        </div>
    </div>
</div>

所有的内容均需要放至上述【<!--控件或内容-->】区域。

1.3 标签

通常页面布局左侧为标签，右侧为控件。标签上有时会有必填标识。

效果图:

代码:

<!--标签-->
<span class="col-xs-2 control-label required" ng-bind="form.$pageLang.bugetType"></span>

加带‘’*‘’标记，需要加 'required' 的样式。

1.4 控件

基本数值控件

• fm-text
• fm-textarea
• fm-number
• fm-datetime

数据源控件:

• fm-radiolist
• fm-checklist
• fm-select
• fm-data-select

2.明细表

2.1 自定义表格信息

有些特殊表，需要进行行合并列合并，根据需要自己画表格即可，如下图事例:

具体代码如下:

<div class="form-group">
    <div class="row">
        <div class="col-xs-12">
            <table class="table table-bordered">
                <tbody>
                    <tr>
                        <td rowspan="2" style="width:150px">分子公司审批：</td>
                        <td style="width:140px">分子公司人事专员：</td>
                        <td>
                            <fm-radiolist items="[{id:'1',text:'同意'},
                                    {id:'2',text:'不同意'}]"
                                          fm-model="1">
                        </td>
                    </tr>
                    <tr>
                        <td>分子公司总经理：</td>
                        <td>
                            <fm-radiolist items="[{id:'1',text:'同意'},
                                    {id:'2',text:'不同意'}]"
                                          fm-model="1">
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="4">人力资源部审批：</td>
                        <td>人事科经理：</td>
                        <td>
                            <fm-radiolist items="[{id:'1',text:'同意'},
                                    {id:'2',text:'不同意'}]"
                                          fm-model="1">
                        </td>
                    </tr>
                    <tr>
                        <td>总部HR审核：</td>
                        <td>
                            <fm-radiolist items="[{id:'1',text:'同意'},
                                    {id:'2',text:'不同意'}]"
                                          fm-model="1">
                        </td>
                    </tr>
                    <tr ng-if="form.test2 ==  form.const.yes">
                        <td>薪酬福利科经理：</td>
                        <td>
                            <fm-radiolist items="[{id:'1',text:'同意'},
                                    {id:'2',text:'不同意'}]"
                                          fm-model="1">
                        </td>
                    </tr>
                    <tr>
                        <td>人力资源高级经理：</td>
                        <td>
                            <fm-radiolist dataitem="Common>YesOrNo"
                                          fm-model="form.test2">
                        </td>
                    </tr>
                    <tr><td></td><td></td><td></td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

列的宽度可以根据实际内容大小设置【 style='width:140px'】

2.2 二维表格

效果图:代码:

<!--礼品费报销列表-->
<fm-Group-Head title="{{ 'ExpenseReimbursementList' |translate}}"></fm-Group-Head>
<div class="row">
    <div class="col-xs-12">
        <table class="table table-bordered table-detail">
            <thead>
                <tr>
                    <th class="checktd"></th>
                    <th style="width:150px;">
                        <span class="control-label required" ng-bind="form.$pageLang.CostDate"></span> <!--费用发生日期-->
                    </th>
                    <th>
                        <span class="control-label required" ng-bind="form.$pageLang.Description"></span> <!--描述-->
                    </th>
                    <th style="width:150px;">
                        <span class="control-label required" ng-bind="form.$pageLang.AmountOfMoney"></span> <!--金额-->
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in form.admin06grc" ng-class="{'active': item.checked}" detail-name="{{ 'ExpenseReimbursementList' |translate}}">
                    <td class="checktd">
                        <input type="checkbox"
                               ng-if="base.pageState==1 || (form.$pageRight.StartNode == 'normal' && base.pageState==2) "
                               class="uniform" ng-model="item.checked" />
                    </td>
                    <td style="width:150px;">
                        <fm-datetime field-name="{{form.$pageLang.CostDate}}"
                                     required
                                     class="input-sm"
                                     date
                                     state="{{form.$pageRight.StartNode}}"
                                     fm-model="item.costDate"></fm-datetime>
                    </td>
                    <td>
                        <fm-text field-name="{{form.$pageLang.Description}}"
                                 required
                                 class="input-sm"
                                 state="{{form.$pageRight.StartNode}}"
                                 fm-model="item.description"></fm-text>
                    </td>
                    <td style="width:150px;">
                        <fm-number field-name="{{form.$pageLang.AmountOfMoney}}"
                                   required
                                   class="input-sm"
                                   cny
                                   state="{{form.$pageRight.StartNode}}"
                                   fm-model="item.money"
                                   callback-func="form.sum(data)"></fm-number>
                    </td>
                </tr>

            </tbody>
            <tfoot>
                <tr>
                    <td colspan="99" style="text-align: right;">
                        <input ng-if="base.pageState==1 || (form.$pageRight.StartNode == 'normal' && base.pageState==2) " type="button" class="btn btn-sm btn-info" ng-click="form.admin06grc.push({})" value="{{ 'Add' |translate}}" />
                        <input ng-if="base.pageState==1 || (form.$pageRight.StartNode == 'normal' && base.pageState==2) " type="button" class="btn btn-sm btn-danger" ng-click="form.delete()" value="{{ 'Delete' |translate}}" />
                    </td>
                </tr>
            </tfoot>
        </table>
        <div class="col-xs-12">
            <span class="control-label col-xs-9">合计金额(人民币)&nbsp;&nbsp;</span>
            <div class="col-xs-3">
                <fm-number cny class="bold"
                           fm-model="form.admin06.totalAmount"
                           readonly></fm-number>
            </div>
        </div>
        <div class="col-xs-12">
            <span class="control-label col-xs-9">会计记账金额(人民币)&nbsp;&nbsp;</span>
            <div class="col-xs-3">
                <fm-number cny class="bold"
                           fm-disabled="base.pageState != 2 || form.$pageRight.IsAccounting != 'normal'"
                           fm-normal="base.pageState == 2 && form.$pageRight.IsAccounting == 'normal'"
                           required
                           max-value="{{form.admin06.totalAmount}}"
                           min-value="0"
                           field-name="{{form.$pageLang.AccountTotalAmt}}"
                           fm-model="form.admin06.totalAcountAmount"></fm-number>
            </div>
        </div>
    </div>
</div>

2.3 卡片式表格

效果图:代码:

<!--采购定点信息-->
<fm-group-head title="{{form.$pageLang.PurchaseFix}}"></fm-group-head>
<div class="row">
    <div class="col-xs-12">
        <div class="col-xs-12">
            <span class="tip-text">开口合同不走布点审批流程，直接走定点审批流程</span>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="fm-detailinfo" ng-class="{'active':i.checked}" ng-repeat="m in form.pur02supplier | filter:{ type:0 }" detail-name="供应商">
            <div class="row header" style="background-color: #FFC107">
                <div class="col-xs-12">
                    <input class="uniform"
                           ng-if="base.pageState==1 || (form.$pageRight.StartNode == 'normal' && base.pageState==2)"
                           type="checkbox" ng-model="m.checked" />
                    <strong class="input-sm">{{form.$pageLang.Supplier}}{{$index + 1}}</strong>
                </div>
            </div>
            <div class="content">
                <div class="row">
                    <div class="col-xs-4 cell">
                        <!--供应商-->
                        <span class="col-xs-4 control-label required" ng-bind="form.$pageLang.Supplier"></span>
                        <div class="col-xs-8">
                            <fm-datatext-select class="input-sm"
                                                state="{{form.$pageRight.StartNode}}"
                                                field-name="{{form.$pageLang.Supplier}}"
                                                view="GetAllSuppliers"
                                                filter="{areaCode: base.areaCode}"
                                                required
                                                placeholder="（如无法选到,可手输）"
                                                fm-text-model="m.suppliers"
                                                select-item="form.preSelectedSuppliers[$index]"
                                                fm-blur="form.addNewPms(selectItem)"
                                                fm-model="m.supplier"></fm-datatext-select>
                        </div>
                    </div>
                    <div class="col-xs-4 cell">
                        <!--询价金额（不含税）-->
                        <span class="col-xs-6 control-label" ng-bind="form.$pageLang.Xamount"></span>
                        <div class="col-xs-6">
                            <fm-number class="input-sm"
                                       field-name="{{form.$pageLang.Remarks}}"
                                       fm-model="m.totalAmount"></fm-number>
                        </div>
                    </div>
                    <div class="col-xs-4 cell">
                        <!--成交金额（不含税）-->
                        <span class="col-xs-6 control-label" ng-bind="form.$pageLang.Camount"></span>
                        <div class="col-xs-6">
                            <fm-number class="input-sm"
                                       field-name="{{form.$pageLang.Remarks}}"
                                       readonly
                                       cny
                                       fm-model="m.camount"></fm-number>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-4 cell">
                        <!--税率-->
                        <span class="col-xs-4 control-label required" ng-bind="form.$pageLang.Slv"></span>
                        <div class="col-xs-8">
                            <fm-select dataitem="PurchaseRelated>ContractRate"
                                       state="{{form.$pageRight.StartNode}}"
                                       required
                                       callback-func="form.Invoicesum()"
                                       field-name="{{form.$pageLang.ContractRate}}"
                                       fm-model="m.slv"
                                       value-member="value"
                                       fm-code="form.$state.slv"></fm-select>

                        </div>
                    </div>
                    <div class="col-xs-4 cell">
                        <!--税金-->
                        <span class="col-xs-6 control-label" ng-bind="form.$pageLang.Smoney"></span>
                        <div class="col-xs-6">
                            <fm-number class="input-sm"
                                       field-name="{{form.$pageLang.Remarks}}"
                                       readonly
                                       cny
                                       fm-model="m.smoney"></fm-number>
                        </div>
                    </div>
                    <div class="col-xs-4 cell">
                        <!--成交金额（含税）-->
                        <span class="col-xs-6 control-label" ng-bind="form.$pageLang.Camountx"></span>
                        <div class="col-xs-6">
                            <fm-number class="input-sm"
                                       fm-blur="form.Invoicesum()"
                                       field-name="{{form.$pageLang.Remarks}}"
                                       fm-model="m.camountx"></fm-number>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-4 cell">
                            <span class="col-xs-6 control-label" ng-bind="form.$pageLang.Fj"></span>
                            <div class="col-xs-6">
                                <fm-attachment class="print-hide" form-files="form.$attachments" link-id="0"
                                               task-id='base.taskId'
                                               node-id="base.nodeId"
                                               draft-id="base.draftId"
                                               fm-disabled="base.pageState != 1 && form.$pageRight.StartNode != 'normal' && form.$pageRight.FixPurchase != 'normal'"
                                               fm-normal="base.pageState == 1 || form.$pageRight.StartNode == 'normal' || form.$pageRight.FixPurchase == 'normal'"
                                               button-name="{{ 'UploadAttachment' |translate}}"></fm-attachment>
                            </div>
                            <div class="col-xs-6">
                                <fm-checklist fm-model="m.mark"
                                              field-name="{{form.$pageLang.ApplicationRange}}"
                                              callback-func="form.chooseSupplierCode(selectItem)"
                                              items="[{id:'0',text:'启用此供应商'}]"></fm-checklist>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <!--<span class="tip-text">开口合同不走布点审批流程，直接走定点审批流程</span>-->
        <div class="pull-right">
            <input ng-if="base.pageState==1 || (form.$pageRight.StartNode == 'normal' && base.pageState==2)" type="button" class="btn btn-sm btn-info" ng-click="form.addSupplier(0)" value="新增供应商" />
            <input ng-if="base.pageState==1 || (form.$pageRight.StartNode == 'normal' && base.pageState==2)" type="button" class="btn btn-sm btn-danger" ng-click="form.delete()" value="删除供应商" />
        </div>
    </div>
</div>
<div class="row">
    <div style="text-align: right;">
        <span class="col-xs-3 col-xs-offset-6 control-label">价税合计总额</span>
        <div class="col-xs-3">
            <fm-number class="input-sm bold"
                       cny
                       readonly
                       fm-model="form.pur02.totalAmount"></fm-number>
        </div>
    </div>
</div>