借贷系统(后端)3

上次讲到认证管理的让图片显示,这次我们要讲的是如何在点击一个按钮时,弹出一个表格,如图所示

这次需要使用到上次的在表格中显示图片的知识点,所以控制器中的代码大差不差,主要的是需要使用到layui中的插件


<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>公告类型信息</title>
    <link rel="shortcut icon" href="~/Content/images/重庆邮电.ico" />
    <link href="~/Content/Plugins/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Content/Plugins/bootstrap-4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .layui-btn-xs {
            height: 28px;
            padding: 2px 16px;
            font-size: 12px;
        }

        .col-form-label {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 查询条件&表格 -->
    <div class="container-fluid">
        <!--查询条件-->
        <div class="row">
            <div class="col-sm-8">
                <form action="/" method="post" id="formSearch">
                    <div class="form-row">
                        <div class="form-row">
                            <div class="row mt-2">
                                <label class="col-form-label col-auto" for="searchText">搜索:</label>
                                <input type="text" class="form-control col" style="width:500px" id="searchText" name="searchText" placeholder="模糊搜索用户名称,邮箱" oninput="searchStudent()">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--table 表格-->
        <div class="row mt-1">
            <div class="col">
                <table class="layui-hide" id="tabStudents" lay-filter="tabStudents"></table>
            </div>
        </div>
        <!--model 查看模态窗体-->
        <div class="modal fade" id="modTitles" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-xl" style="max-width: 900px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="textBorrowing">用户材料详细信息</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid p-2">
                            <div class="card ">
                                <div class="card-body p-0">
                                    <table id="Tabing" lay-filter="Tabing"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--model 查看模态窗体-->
        <div class="modal fade" id="modles" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-xl" style="max-width: 900px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="textBorrowing">用户资金详细信息</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid p-2">
                            <div class="card ">
                                <div class="card-body p-0">
                                    <table id="bing" lay-filter="bing"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 基本信息模态框-->
        <div class="modal fade" id="studentModal" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <!-- 顶部 标题 关闭按钮 -->
                    <div class="modal-header">
                        <!--标题-->
                        <h5 class="modal-title" id="BasicInformation">用户基本信息</h5>
                        <!--关闭按钮-->
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!-- 内容部分 表单-->
                    <div class="modal-body">
                        <form id="from">
                            <!--隐藏域  用户id-->
                            <input type="hidden" id="UserDetail" name="UserDetail" value="" />
                            <div class="row">
                                <!-- 表单控件 -->
                                <div class="col-12 col-lg-12 mt-3 row">
                                    <div class="form-row col-12">
                                        <label for="UserName" class="col-3 col-form-label">用户名</label>
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="UserName1" name="UserName" autocomplete="off" disabled />
                                        </div>
                                    </div>
                                    <div class="form-row col-12 mt-2">
                                        <label for="" class="col-3 col-form-label">真实姓名</label>
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetailName1" name="DetailName" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 mt-2">
                                        <label for="LoginNum" class="col-3 col-form-label">性别</label>
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetaiSex1" name="DetaiSex" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 mt-2">
                                        <label for="Register" class="col-3 col-form-label">出生日期</label>
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetaiBirthDate1" name="DetaiBirthDate" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 mt-2">
                                        <label for="Lastlogin" class="col-3 col-form-label">籍贯</label>
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetaiNativePlace1" name="DetaiNativePlace" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">身份证号码</label>
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetaiIdNumber1" name="DetaiIdNumber" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">手机号码</label>
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetaiPhone1" name="DetaiPhone" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- 底部 按钮 取消 确定 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="saveStudentInfor()">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 详细信息模态框-->
        <div class="modal fade" id="details" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <!-- 顶部 标题 关闭按钮 -->
                    <div class="modal-header">
                        <!--标题-->
                        <h5 class="modal-title" id="UserDetails">用户详细信息</h5>
                        <!--关闭按钮-->
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!-- 内容部分 表单-->
                    <div class="modal-body">
                        <form id="formDetails">
                            <div class="row">
                                <!-- 表单控件 -->
                                <div class="col-12 col-lg-12 mt-3  row">
                                    <div class="form-row  col-12 col-xl-6 mt-2">
                                        <label for="" class="col-3 col-form-label">用户名</label>
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="UserName2" name="UserName2" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="LoginNum" class="col-3 col-form-label">用户类型</label>
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="UserType" name="UserTypeName" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Register" class="col-3 col-form-label">真实姓名</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetailName2" name="DetailName" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Lastlogin" class="col-3 col-form-label">性别</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetaiSex2" name="DetaiSex" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">出生日期</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetaiBirthDate2" name="DetaiBirthDate" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">身份证号</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetaiIdNumber2" name="DetaiIdNumber" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">手机号</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetaiPhone2" name="DetaiPhone" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">籍贯</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetaiNativePlace2" name="DetaiNativePlace" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">邮箱</label>
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="Mailbox" name="Mailbox" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">文化程度</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="Culture" name="Culture" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">婚姻状况</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="MaritalStatus" name="MaritalStatus" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">子女</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="Children" name="Children" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">社保</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="SocialSecurity" name="SocialSecurity" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">住房条件</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="DetaiHousing" name="DetaiHousing" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">是否购车</label><!--用户明细表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="IfBuyVehicle" name="IfBuyVehicle" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">资产总额</label><!--用户账号表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="UserSum" name="UserSum" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">可用金额</label><!--用户账号表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="AccountSum" name="AccountSum" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">冻结金额</label><!--用户账号表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="AccounSumNo" name="AccounSumNo" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">待收金额</label><!--用户账号表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="AccounSumDueIn" name="AccounSumDueIn" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-row col-12 col-xl-6 mt-2">
                                        <label for="Finallylogin" class="col-3 col-form-label">待还金额</label><!--用户账号表-->
                                        <div class="col-9">
                                            <input type="text" class="form-control" id="StayRepaySum" name="StayRepaySum" autocomplete="off" disabled/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- 底部 按钮 取消 确定 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="saveStudentInfor()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="~/Content/Plugins/jquery-3.2.1.min.js"></script>
    <script src="~/Content/Plugins/bootstrap-4.6.0/dist/js/bootstrap.min.js"></script>
    <script src="~/Content/Plugins/layui/layui.js"></script>
    <script>
        //全局变量声明
        var tabStudents;//公告 table
        var layer, layuiTable;//保存layui模块以便全局使用
        var tabStudent,tabStuden;

        $(document).ready(function () {
            //加载&初始化layui模块
            layui.use(['layer', 'table'], function () {
                layer = layui.layer;
                layuiTable = layui.table;
                //渲染表格
                tabStudents = layuiTable.render({
                    elem: '#tabStudents',
                    data: [],
                    cols: [[
                        { title: 'ID', field: 'UserID', align: 'center' },
                        { title: '用户名', field: 'UserName', align: 'center' },
                        { title: '邮箱', field: 'Mailbox', align: 'center' },
                        { title: '积分', field: 'OlientIntegral', align: 'center' },
                        { title: '用户类型', field: 'UserType', align: 'center' },
                        { title: '最后登录时间', field: 'Finallylogin', align: 'center' },
                        { title: '基本信息', templet: Information, align: 'center' },
                        { title: '详细信息', templet: Details, align: 'center' },
                        { title: '审核材料', templet: Material, align: 'center' },
                        { title: '资金详细', templet: Money, align: 'center' }
                    ]],
                    page: true,
                });
                //重载数据表
                searchStudent();
                渲染表格
                tabStudent = layuiTable.render({
                    elem: '#Tabing',
                    //url: "/User/User/TypeQuery",
                    cols: [[
                        { title: 'ID', field: 'MaterialTypeID', align: 'center', width: 100 },
                        { title: '用户名', field: 'UserName', align: 'center', width: 100 },
                        { title: '类型', field: 'typeName', align: 'center', width: 100 },
                        { title: '缩略图',templet: setPicture, field: 'Thumbnail', align: 'center', width: 100 },
                        { title: '积分', field: 'MaterialIntegral', align: 'center', width: 100 },
                        { title: '状态', field: 'MaterialStatu', align: 'center', width: 100 },
                        { title: '添加时间', field: 'Materialsubmit', align: 'center', width: 100 },
                        { title: '备注', field: 'MaterialRemark', align: 'center', width: 100 },
                        { title: '审核备注', field: 'ReviewRemarks', align: 'center', width: 100 },
                    ]],
                    page: true,
                });
                ///资金详细信息
                tabStudent = layuiTable.render({
                    elem: '#bing',
                    //url: "/User/User/TypeQuery",
                    cols: [[
                        { title: 'ID', field: 'IncomeExpensesRecordID', align: 'center', width: 100 },
                        { title: '用户名', field: 'UserName', align: 'center', width: 100 },
                        { title: '类型', field: 'ExpensesType', align: 'center', width: 100 },
                        { title: '操作金额/元', field: 'OperationAmount', align: 'center', width: 120 },
                        { title: '余额/元', field: 'TotalAssets', align: 'center', width: 100 },
                        { title: '收入/元', field: 'RecordIncome', align: 'center', width: 100 },
                        { title: '支出/元', field: 'RecordExpend', align: 'center', width: 100 },
                        { title: '备注', field: 'RecordRemark', align: 'center', width: 100 },
                        { title: '操作时间', field: 'Record', align: 'center', width: 120 },
                    ]],
                    page: true,
                });
            });
        });

        //1.2自定义操作列
        function Information(data) {
            //用户类型id
            var noticeId = data.UserID;
            btns = '<button type="button" class="layui-btn layui-btn-xs" onclick=basic(' + noticeId + ')>查看</button>';
            return btns;
        }
        function Details(data) {
            //用户类型id
            var noticeId = data.UserID;
            btns = '<button type="button" class="layui-btn layui-btn-xs" onclick=detailed(' + noticeId + ')>查看</button>';
            return btns;
        }
        function Material(data) {
            //用户类型id
            var noticeId = data.UserID;
            btns = '<button type="button" class="layui-btn layui-btn-xs" onclick=audit(' + noticeId + ')>查看</button>';
            return btns;
        }
        //弹出材料模态框
        function audit(UserID) {
            $("#modTitles").modal();
            layuiTable.reload('Tabing', {
                url: "/User/User/TypeQuery?UserID=" + UserID,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据
        }
        function Money(data) {
            //用户类型id
            var noticeId = data.UserID;
            btns = '<button type="button" class="layui-btn layui-btn-xs" onclick=money(' + noticeId + ')>查看</button>';
            return btns;
        };
        //弹出资金模态框
        function money(user) {
            $("#modles").modal();
            layuiTable.reload('bing', {
                url: "/User/User/UserFundAudit?user=" + user,
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据
        }

        //条件查询
        function searchStudent() {
            var searchText = $("#searchText").val();
            tabStudents.reload({
                url: "/User/User/UserInformationQuery",
                where: {
                    searchText: searchText
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                },
            });
        }


        //1.6打开修改模态框
        //基本信息查看
        function basic(olent) {
            $("#studentModal").modal("show");
            //1.1 公告数据回填
            $.post("/User/User/BasicInformationQuery?olent=" + olent, function (data) {
                if (data != null) {
                    $("#UserName1").val(data.UserName);//用户名
                    $("#DetailName1").val(data.DetailName);//真实姓名
                    $("#DetaiSex1").val(data.DetaiSex);//性别
                    $("#DetaiNativePlace1").val(data.DetaiNativePlace);//籍贯
                    $("#DetaiIdNumber1").val(data.DetaiIdNumber);//身份证号
                    $("#DetaiPhone1").val(data.DetaiPhone);//手机号码
                    $("#DetaiBirthDate1").val(data.Birthday);//出生日期
                }
            });
        };
        //详细信息查看
        function detailed(user) {
            $("#details").modal("show");
            //1.1 公告数据回填
            $.post("/User/User/UserDetail?user=" + user, function (data) {
                if (data != null) {
                    $("#UserName2").val(data.UserName);//用户名
                    $("#UserType").val(data.UserTypeName);//用户类型
                    $("#DetailName2").val(data.DetailName);//真实姓名
                    $("#DetaiSex2").val(data.DetaiSex);//性别
                    $("#DetaiBirthDate2").val(data.Birthday);//出生日期
                    $("#DetaiIdNumber2").val(data.DetaiIdNumber);//身份证号
                    $("#DetaiPhone2").val(data.DetaiPhone);//手机号
                    $("#DetaiNativePlace2").val(data.DetaiNativePlace);//籍贯
                    $("#Mailbox").val(data.Mailbox);//邮箱
                    $("#Culture").val(data.Culture);//文化程度
                    $("#MaritalStatus").val(data.MaritalStatus);//婚姻状况
                    $("#Children").val(data.Children);//子女
                    $("#SocialSecurity").val(data.SocialSecurity);//社保
                    $("#DetaiHousing").val(data.DetaiHousing);//住房条件
                    $("#IfBuyVehicle").val(data.IfBuyVehicle);//是否购车
                    $("#UserSum").val(data.UserSum);//资产总额
                    $("#AccountSum").val(data.AccountSum);//可用金额
                    $("#AccounSumNo").val(data.AccounSumNo);//冻结金额
                    $("#AccounSumDueIn").val(data.AccounSumDueIn);//待收金额
                    $("#StayRepaySum").val(data.StayRepaySum);//待还金额
                }
            });
        };

        //1.7在表格中显示图片
        function setPicture(data) {
            var MaterialID = data.MaterialID;

            var img = "<img src='/User/User/picture?MaterialID=" + MaterialID + "' alt='Alternate Text' style='width:100px;height:40px;'/>";
            return img;

        };
    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值