前端整理

1、Select数据绑定

<select id="project" name="project" lay-verify="required">
    <option value="">-请选择-</option>
    @for(project in product.projectList){
    <option value="${project}">${project}</option>
    @}
</select>

<select id="socialSecurityCity" name="socialSecurityCity" lay-filter="socialSecurityCity" lay-verify="required">
　　<option value="">-所在市-</option>
</select>

function renderCityInfo() {
        var cityHtml = '<option value="">-所在市-</option>';
        var cityAjax = new $ax(Feng.ctxPath + '/sysArea/listCityByProvince?provinceId=320000', function (res) {
            if (res.success) {
                for (var i = 0; i < res.data.length; i++) {
                    cityHtml += '<option value="' + res.data[i].id + '">' + res.data[i].city + '</option>';
                }
            }
            $("#socialSecurityCity").html(cityHtml);
            form.render();
        });
        cityAjax.start();
    }

2、条件判断

@if(product.isIdentity == 1){
<div class="layui-inline layui-col-md6">
    <label class="layui-form-label">身份证<span style="color: red;">*</span></label>
    <div class="layui-input-block">
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" id="identityCardFrontUpload">上传正面</button>
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" id="identityCardBackUpload">上传背面</button>
        </div>
    </div>
</div>
@}

3、laytpl前端模板引擎

<!--建立视图。用于呈现渲染结果。 -->
<div class="layui-input-block" id="comDiv">
　　<input id="companyName" name="companyName" placeholder="请准确填写社保缴纳单位全称，没有则填写个人姓名"type="text" class="layui-input"
 autocomplete="off" lay-verify="required|companyName"/>
<i class="layui-icon layui-icon-search searchCom"></i>
</div>
<!--编写模板引擎-->
<script type="text/html" id="taxTpl">
    <div class="taxContainer">
        {{# layui.each(d, function(index, item){ }}
        <div class="tax-item" data-code="{{item.code}}" data-id="{{item.orgCustomerId}}">{{ item.name }}</div>
        {{# }); }}
    </div>
</script>
<!--渲染模板-->
if (taxListResult.data) {
　　laytpl($("#taxTpl").html()).render(taxListResult.data, function (html) {
　　　　$("#comDiv").append(html);
　　});
} else {
　　Feng.error("暂无查询结果");
}

<script type="text/html" id="repeatTipTpl">
    <div>
        <div class="info-half">
            <label class="info-label">订单号：</label>
            <div class="info-text">{{ d.orderNo }}</div>
        </div>
        <div class="info-half">
            <label class="info-label">姓名：</label>
            <div class="info-text">{{ d.name }}</div>
        </div>
        <div class="info-half">
            <label class="info-label">手机号码：</label>
            <div class="info-text">{{ d.mobile }}</div>
        </div>
        <div class="info-half">
            <label class="info-label">单位名称：</label>
            <div class="info-text">{{ d.companyName }}</div>
        </div>
        <div class="info-half">
            <label class="info-label">分公司：</label>
            <div class="info-text">{{ d.accountManagerOrgName }}</div>
        </div>
        <div class="info-half">
            <label class="info-label">部门：</label>
            <div class="info-text">{{ d.deptName }}</div>
        </div>
        <div class="info-half">
            业务员：{{ d.createUserName }}于{{ d.createTime }}录入
        </div>
    </div>
</script>

 var repeatTipHtml = "";
            laytpl($("#repeatTipTpl").html()).render(result.data, function (html) {
                repeatTipHtml = html;
            });
            layer.confirm("<h3 style='margin-bottom: 10px;'>" + result.message + "：</h3>" + repeatTipHtml + "<h3>是否继续录入？</h3>", {
                btn: ['否', '是']
            }, function (index, layero) {
                layer.closeAll();
            }, function (index) {
                layer.closeAll();
                step.next('#stepForm');
                return false;
            });