layui在easyadmin中的示例

1. 前端路径：public/static/js/对应的JS文件：
define(["jquery", "easy-admin"], function ($, ea) {
    var init = {
        table_elem: '#currentTable',
        table_render_id: 'currentTableRenderId',
        index_url: 'mall.productxiadan/index',
        add_url: 'mall.productxiadan/add',
        edit_url: 'mall.productxiadan/edit',
        delete_url: 'mall.productxiadan/delete',
        export_url: 'mall.productxiadan/export',
        modify_url: 'mall.productxiadan/modify',
    };
    return {
        index: function () {
            ea.table.render({
                init: init,
                cols: [[
                    {type: 'checkbox'},
                    {field: 'id', title: 'id'},
                    {field: 'ordernum', title: '订单编号'},
                    {field: 'userid', title: '用户昵称',templet:function(row){
                        $.ajax({
                           type: 'get',
                           async: false,
                           url: 'https://xxx/admin/mall.productxiadan/getusers/',
                        //   dataType: 'json',
                           data: {
                                userid:row.userid
                           },
                           success: function(response){
                            showusername = JSON.parse(response).name;
                            //   console.log('ID:'+JSON.parse(response).id);
                              console.log(response);
                           },
                           error: function(error) {
                        	   //console.log(error);
                           }
                        });
                        return showusername;
                    }},
                    {field: '', title: '手机号',templet:function(row){
                        $.ajax({
                           type: 'get',
                           async: false,
                           url: 'https://xxx/admin/mall.productxiadan/getusermobile/',
                           data: {
                                userid:row.userid
                           },
                           success: function(response){
                                showmobile = JSON.parse(response).mobile;
                                console.log(response);
                           }
                        });
                        return showmobile;
                    }},
                    {field: 'productid', title:'产品名称', templet:function(row){
                        $.ajax({
                           type: 'get',
                           async: false,
                           url: 'https://xxx/admin/mall.productxiadan/getproduct/',
                           data: {
                                productid:row.productid
                           },
                           success: function(response){
                            showproductitle = JSON.parse(response).title;
                           }
                        });
                        return showproductitle;
                    }},
                    {field: 'price', title: '金额', search:false},
                    // {field: 'tixian', title: '提现状态',sort:true,filter:true,templet:function(row){
                    //     if(row.tixian==0){
                    //         return '待入账';
                    //     }else if(row.tixian==1){
                    //         return '已入账';
                    //     }else if(row.tixian==2){
                    //         return '已提现';
                    //     }
                    // }},
                    // {field: '', title: '入账操作',templet:function(row){
                    //     return '<a href=/index/index/clickruzhang/id/'+row.id+'>入账</a>';
                    // }},
                    // {field: 'status', title: '显示', templet: ea.table.switch},
                    {field: 'images', title: '兑换截图', search:false,templet:function(row){
                        if(row.images!=''){
                            return '<span><img src='+row.images+' width=35 height=35 /></span>';
                        }
                    }},
                    {field: 'exchange', title: '兑换时间', search:false, templet:'<div>{{layui.util.toDateString(d.createDate,"yyyy-MM-dd HH:mm:ss")}}</div>',},
                    {field: 'expresscode', title: '快递公司编码', search:false, templet:function(row){
                        $.ajax({
                           type: 'get',
                           async:false,
                           url: 'https://xxx/admin/mall.productxiadan/getexpresscode/',
                           data: {
                                expresscode:row.expresscode
                           },
                           success: function(response){
                                showexpresscode = JSON.parse(response).company;
                           }
                        });
                        return showexpresscode;
                    }},
                    {field: 'expressnum', title: '快递单号'},
                    {field: '', title: '物流状态', templet:function(row){
                        return '<a href="javascript:void(0);" onclick=tanchuangwuliuzhuangtai("'+row.expresscode+'","'+row.expressnum+'")>查看物流</a>';
                    }},
                    {field: 'create_time', title: '下单时间', search:false},
                    {field: 'tixian', title: '提现操作',sort:true,filter:true,templet:function(row){
                        if(row.tixian==0){
                            // return '待入账';
                            // return '<a href=/index/index/clickruzhang/id/'+row.id+'/userid/'+row.userid+'/productid/'+row.productid+'/price/'+row.price+' class=ruku>入账</a>';
                            return '<a href=/index/index/clickruzhang/id/'+row.id+'/userid/'+row.userid+'/moneyid/'+row.moneyid+' class=ruku>入账</a>';
                        }else if(row.tixian==1){
                            return '<span style="color:#32CD32">已入账</span>';
                        }
                    }, search: 'select', selectList: {0: '未入账', 1: '已入账'}},
                    // {title: '审核入库', templet: function(row){
                    //     return '<a href="javascript:void(0);" onclick=tanchuangshenheruku("'+row.expresscode+'","'+row.userid+'","'+row.productid+'","'+row.ordernum+'")>审核入库</a>';
                    // }},
                    {title: '查看详情', templet: function(row){
                        return '<a href="javascript:void(0);" onclick=tanchuangshenheruku("'+row.expresscode+'","'+row.userid+'","'+row.productid+'","'+row.ordernum+'")>审核入库</a>';
                    }},
                    {width: 250, title: '操作', templet: ea.table.tool},
                ]],
            });
            ea.listen();
        },
        add: function () {
            ea.listen();
        },
        edit: function () {
            ea.listen();
        },
    };
    
    
});

function tanchuangwuliuzhuangtai(expresscode,expressnum){
    layer.open({
          type: 2,//弹出框类型
          title: '查看物流',
          anim: 0,
          btn: ['关闭'],
          shadeClose: false, //点击遮罩关闭层
          area : ['80%','100%'],//弹出框大小
          shift:1,//弹出框动画效果
          content: 'https://xxx/index/index/wuliuzhuangtai/expresscode/'+expresscode+'/expressnum/'+expressnum
    });
}

function tanchuangshenheruku(expresscode,userid,productid,ordernum){
    layer.open({
          type: 2,//弹出框类型
          title: '审核入库',
          anim: 0,
          btn: ['关闭'],
          shadeClose: false, //点击遮罩关闭层
          area : ['60%','90%'],//弹出框大小
          shift:1,//弹出框动画效果
          content: 'https://xxx/index/index/shenheruku/expresscode'+expresscode+'/userid/'+userid+'/productid/'+productid+'/ordernum/'+ordernum
    });
}

2. 后端控制器：
//后台->订单管理->审核入库扫码枪
    public function shenheruku(){
        return view('shenheruku');
    }
    //后台->订单管理->审核入库扫码枪
    public function shenherukuajax(){
        $expresscode = $this->request->param("expresscode");
        // $userid = $this->request->param("userid");
        // $productid = $this->request->param("productid");
        // $ordernum = $this->request->param("ordernum");
        $result = Db::table('ea8_mall_productxiadan')->where('expressnum',$expresscode)->find();
        if(!isset($result)){
            return '暂无数据';
        }else{
            $resultuser = Db::table('ea8_system_users')->where('id',$result['userid'])->find();
            $username = $resultuser['name'];
            $productid = $result['productid'];
            $resultproduct = Db::table('ea8_mall_product')->where('id',$productid)->find();
            $productname = $resultproduct['title'];
            $ordernum = $result['ordernum'];
            return json_encode(['expressnum'=>$expresscode,'username'=>$username,'productname'=>$productname,'ordernum'=>$ordernum]);
        }
    }
    
    //审核入库提交
    public function shenherukusubmit(){
        $danhao = $this->request->param("danhaoparam");
        $shenheyijian = $this->request->param("shenheyijianparam");
        $result = Db::table('ea8_mall_productxiadan')->where('expressnum',$danhao)->find();
        if(!isset($result)){
            return 'error';
        }else{
            Db::table('ea8_mall_productxiadan')->where('expressnum',$danhao)->update(['tixian'=>$shenheyijian]);
            return 'success';
        }
    }
    
3. 对应的控制视图View文件：
<div class="center" style="margin-top:25px;">
    <center><h3>审核入库</h3></center>
    <!--<form method="get" action="#" onsubmit="return checkForm()" id="myform">-->
    <form class="layui-form" action="" lay-filter="formDemo">
        <table class="main">
            <tr>
                <td><label for="danhaolabel"><font face="宋体" size="4">快递单号：</font></label></td>
                <td><input type="text" id="danhao" name="danhao" placeholder="" value=""></td>
            </tr>
            <tr>
                <td><label for="yonghu"><font face="宋体" size="4">系统匹配用户：</font></label></td>
                <td><div id="pipeiyonghu"></div></td>
            </tr>
            <tr>
                <td><label for="chanping"><font face="宋体" size="4">系统匹配产品：</font></label></td>
                <td><div id="productname"></div></td>
            </tr>
            <tr>
                <td><label for="bianhaolabel"><font face="宋体" size="4">订单编号：</font></label></td>
                <td><input type="text" name="bianhao" id="bianhao" placeholder="" value=""></td>
            </tr>
            <tr>
                <td><label for="shenheyijianlabel"><font face="宋体" size="4">审核意见：</font></label></td>
                <td><select name="shenheyijian" id="shenheyijian">
						<option value="1">核对无误,确认入库</option>
						<option value="0">商品有误,拒绝入库</option>
					</select>
				</td>
            </tr>
            <tr>
                <td colspan="2" style="height:60px;width: 100%;text-align: center;vertical-align: bottom;">
                    <!--<input class="submit" type="submit" name="login" value="确认">-->
                    <div class="layui-btn" lay-submit lay-filter="submitDemo">提交</div>
                </td>
            </tr>
        </table>
    </form>
</div>

<style>
    .waibao{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left:auto;
		margin-right:auto;
		margin-top:15px;
	}
	#username, #password, #email, #name, #tel, #birthday, #yzm,#shenheyijian {
		border-radius: 3px;
		height: 30px;
	}
	.main{
	    margin:0 auto;
	    padding:0 auto;
	}
	.main tr{
	    line-height: 40px;
	}
</style>

<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
<script src="/static/plugs/layui-v2.x/layui.js"></script>
<link rel="stylesheet" type="text/css" href="/static/plugs/layui-v2.x/css/layui.css" />
<script>
layui.config({
    jquery: '/static/plugs/jquery-3.4.1/jquery-3.4.1.min.js'
}).use(['jquery','form', 'layer'], function($){
    var $ = layui.jquery;
    var form = layui.form;
    var layer = layui.layer;
    //表单输入自动调取后台数据
    $('#danhao').focus();
	$('#danhao').on('input', function(){
		var value = $(this).val();
		$.ajax({
			url: "https://xxx/index/index/shenherukuajax",
			type: "GET",
			async:false,
			data:{
			    expresscode:value
			},
			success: function(data) {
			 if(data=='暂无数据'){
			     layer.open({
                    type: 2,
                    content: '/index/index/kongdanruku/expressordernum/'+value,
                    area: ['100%', '100%']
                });
			 }
			 // layer.msg(data);
			 var resultdata = JSON.parse(data);
			 if(resultdata.username!=""){
			     $("#pipeiyonghu").text(resultdata.username);
    			 $("#productname").text(resultdata.productname);
    			 $("#bianhao").val(resultdata.ordernum);
			 }else{
			     $("#pipeiyonghu").text('');
    			 $("#productname").text('');
    			 $("#bianhao").val('');
			 }
			 //console.log(data);
			},
			error: function(xhr, status, error) {
             $("#pipeiyonghu").text('');
			 $("#productname").text('');
			 $("#bianhao").val('');
            }
		  });
	});
	//表单监听提交
    form.on('submit(submitDemo)', function(data){
        //获取表单数据
        // console.log(data)
        var danhao = data.field.danhao;
        var shenheyijian = data.field.shenheyijian;
        $.post("https://xxx/index/index/shenherukusubmit", {danhaoparam:danhao, shenheyijianparam:shenheyijian}, function(resp){
            // layer.msg(resp);
          if(resp == "success"){
            layer.msg("提交成功！");
          }else{
            layer.msg("提交失败！");
          }
        });
        return false; //阻止表单提交
    });
});
</script>