（前端）工作总结

erp系统所涉及到的前端框架：

• [ 1] layui ：地址 https://www.layui.com/
• 所涉及到的layui表单样式
• 基本样式：
  下拉框：

<div class="layui-form-item">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label">服务类型</label>
                                                    <div class="layui-input-inline">
                                                        <select name="" lay-verify="required" lay-search="">
                                                            <option value="">数据恢复</option>
                                                        </select>
                                                    </div>
                                                </div>

长文本框：

<div class="layui-form-item" style="display: inline-block; position: absolute;">
                                                        <label class="layui-form-label">备注</label>
                                                        //长文本
                                                        <div class="layui-input-inline layui-input-long">
                                                            <input type="text" name="" id="" class="layui-input" />
                                                        </div>
                                                    </div>

文本域：

 <div class="layui-form-item" style="display: inline-block;">
                                                	<div class="layui-form-text ">
                                                        <label class="layui-form-label ">报称故障</label>
                                                        <div class="layui-input-block ">
                                                            <textarea placeholder="请输入内容 " class="layui-textarea " name="desc "></textarea>
                                                        </div>
                                                    </div>
                                                    </div>

input 与 select 组合框：注意点 class="input"样式.input-short{ width: 100px; height: 25px; position: absolute; }

<div class="layui-inline">
                                                <label class="layui-form-label">
                                                    <span style="font-size: 19px; color: red;">*</span>联系人</label>
                                                <div class="layui-input-inline">
                                                    <asp:TextBox ID="tbLinkMan" runat="server" class="input-short" />
                                                    <asp:DropDownList ID="ddlCusLinkMan" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlCusLinkMan_SelectedIndexChanged"></asp:DropDownList>
                                                </div>
                                            </div>

示例图片

调用的css 文件为 ace.min.css 和 erp.css

上面图片中的布局 分为 左右两个div。 报称故障的div 设置成 display：inline-block 。 备注div 样式 position：absolute；display：inline-block； 随机附件 div 样式 display：inline-block 。 具体详情如下代码

<div class="layui-form-item" style="display: inline-block;">
                       	<div class="layui-form-text ">
                               <label class="layui-form-label ">报称故障</label>
                               <div class="layui-input-block ">
                                   <textarea placeholder="请输入内容 " class="layui-textarea " name="desc "></textarea>
                               </div>
                           </div>
                           </div>
                             <div class="layui-form-item" style="display: inline-block; position: absolute;">
                               <label class="layui-form-label">备注</label>
                               <div class="layui-input-inline layui-input-long">
                                   <input type="text" name="" id="" class="layui-input" />
                               </div>
                           </div>
                           <div class="layui-form-item" style="display: inline-block;">
                               <label class="layui-form-label ">随机附件</label>
                               <!--<i class="ace-icon glyphicon glyphicon-search " onclick='alert()' style="margin-top: 11px; position: absolute;margin-left: 120px; "></i>-->
                         <div class="layui-input-inline ">
                                   <input type="text " class="layui-input " id=" " name=" " value="无附件 " />
                               </div>
                       </div>

2. layui 弹出层位置 Z:\ERP\Public\h-ui.admin\js

/*弹出层*/
/*
	参数解释：
	title	标题
	url		请求的url
	id		需要操作的数据id
	w		弹出层宽度（缺省调默认值）
	h		弹出层高度（缺省调默认值）
*/


function layer_show(iparent,title,url,w,h){
	if (title == null || title == '') {
		title=false;
	};
	if (url == null || url == '') {
		url="404.html";
	};
	if (w == null || w == '') {
		w=800;
	};
	if (h == null || h == '') {
		h=($(window).height() - 50);
	};
	var strparent="";
	if(typeof(iparent)==="undefined"){
	    strparent=document.getElementById("hfActiveTab").value;
    }
    else
    {
        strparent="layui-layer-iframe"+iparent;
    }
    if(url.indexOf('?')!=-1)
    {
        url+="&parent="+strparent;
    }else
    {
        url+="?parent="+strparent;
    }
	//alert(iparent);
	layer.open({
		type: 2,
		area: [w+'px', h +'px'],
		fix: false, //不固定
		maxmin: true,
		shade:0.01,
		title: title,
		success: function(layero, index)
		{
            var body = layer.getChildFrame('body', index);
            var iframeWin = window[layero.find('iframe')[0]['name']];
            console.log(body.html())
            body.find('#hfparent').val(strparent)
        },
		content: url
	});
}
/*关闭弹出框口*/
function layer_close(index){	
	layer.close(index);
}