C# MVC + layui

MVC+LAYUI 专栏收录该内容
1 篇文章 0 订阅

C# MVC +layui

Controller

        [HttpGet]
        public async Task<ActionResult> AccountsIndex()
        {

            IPayModeManager payMgr = new PayModeManager();
            List<PayModeDto> dtopay = new List<PayModeDto>();
            dtopay = await payMgr.GetAllPayModeByUserId();
            var pay = JsonConvert.SerializeObject(dtopay);

            ViewData["pay"] = pay;


            return View();
        }

        /// <summary>
        /// 账单POST列表请求与搜索
        /// </summary>

        /// <returns></returns>
        [HttpPost]
        public JsonResult AccountsLst(int page, int limit,string userid, string member = null, string itemname = null, string paymode = null, string dt1 = null, string dt2 = null)
        {

            List<InComePayDto> dto = new List<InComePayDto>();
            InComePaySearchDto str = new InComePaySearchDto()
            {
                ItemName = itemname,
                Member = member,
                PayType = paymode,
                DtStat=dt1,
                DtEnd=dt2,
                UserId =Convert.ToInt64(userid),
            };

            var obj = Mgr.GetAllByDto(page, limit, str, out long fpcount);
            JsonTableDto tjson = new JsonTableDto()
            {
                code = 0,
                msg = "",
                count = fpcount,
                data = obj,
            };

            var jsonResult = Json(tjson, JsonRequestBehavior.AllowGet);
            jsonResult.MaxJsonLength = int.MaxValue;
            return jsonResult;
        }

#BLL

        public List<InComePayDto> GetAllByDto(int page, int limit, InComePaySearchDto str, out long lstcount)
        {

                using (IInComePayService Srv = new InComePayService())
                {
                    var list = Srv.GetAll().Where(m => m.UserId == str.UserId).AsEnumerable();

                    if (!string.IsNullOrEmpty(str.Member))
                    {
                        list = list.Where(m => m.Member==str.Member);
                    }

                    if (!string.IsNullOrEmpty(str.ItemName))
                    {
                        list = list.Where(m => m.ItemName == str.ItemName);
                    }
                    if (!string.IsNullOrEmpty(str.PayType))
                    {
                        list = list.Where(m => m.PayType == str.PayType);
                    }

                    if (!string.IsNullOrEmpty(str.DtStat))
                    {
                    DateTime dtover;
                        if (!string.IsNullOrEmpty(str.DtEnd))
                        {
                            dtover= Convert.ToDateTime(str.DtEnd).AddDays(1);
       
                        }
                        else
                        {
                            dtover = Convert.ToDateTime(str.DtStat).AddDays(1);
                        }
                    list = list.Where(m => m.CreateTime >= Convert.ToDateTime(str.DtStat) && m.CreateTime < dtover);
                }

                    lstcount = list.Count();
                    return list.OrderByDescending(m => m.Id).Skip(limit * (page - 1)).Take(limit).ToList().Select(m => new InComePayDto()
                    {
                        Id = m.Id,
                        ItemName = m.ItemName,
                        Member = m.Member,
                        GoodsQuantity = m.GoodsQuantity,
                        XfPrice = m.XfPrice,
                        YsPrice = m.YsPrice,
                        SsPrice = m.SsPrice,
                        PayType = m.PayType,
                        PayPrice = m.PayPrice,
                        OutPrice = m.OutPrice,
                        IsArrears = m.IsArrears,
                        JfCount = m.JfCount,
                        Remarks = m.Remarks,
                        OrderNumber = m.OrderNumber,
                        AdminId = m.AdminId,
                        ItemType = m.ItemType,
                        Dt = m.CreateTime


                    }).ToList();
                }



        }

HTML 部分

@section headers{
    <title>营业单据</title>
    <style>
        .tst {
            width: 900px;
            border: 2px solid red;
            padding: 15px;
        }

        .y {
            background-color: darkorange;
            color: azure;
        }

        .g {
            background-color: forestgreen;
            color: azure;
        }

        .r {
            background-color: darkorchid;
            color: azure;
        }

        .find-w {
            width: 130px !important;
        }
    </style>

    <link rel="stylesheet" href="~/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="~/lib/public.css" media="all">
    @Styles.Render("~/Content/table")

}

<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset layui-form ">
            <legend>单据搜索</legend>
            <div style="margin: 10px 10px 10px 10px" id="btn">

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline find-w">
                            <input type="text" name="txtcard" Id="txtcard" autocomplete="off" class="layui-input" placeholder="卡号" value="">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div class="layui-input-inline find-w">
                            <select id="OptItem" name="OptItem" class="layui-anim layui-anim-upbit" lay-filter="OptItem">
                                <option value="" selecte d> 选择项目</option>
                                <option value="开卡">开卡</option>
                                <option value="商品消费">商品消费</option>
                                <option value="快速消费">快速消费</option>
                                <option value="计次消费">计次消费</option>
                                <option value="充值">充值</option>
                                <option value="充次">充次</option>
                                <option value="积分变动">积分变动</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline ">
                        <div class="layui-input-inline  find-w">
                            <select id="OptPay" name="OptPay" lay-filter="OptPay">
                                <option value="" selected> 支付方式</option>

                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div class="layui-input-inline  find-w">
                            <input type="text" class="layui-input" id="DtStat" placeholder="开始时间" autocomplete="off" name="DtStat">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline  find-w">
                            <input type="text" class="layui-input" id="DtEnd" placeholder="截止时间" autocomplete="off" name="DtEnd">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn">
                            <i class="layui-icon"></i> 搜 索
                        </button>
                        <button type="button" class="layui-btn layui-btn-normal" id="btnReset"><i class="layui-icon layui-icon-refresh-3"></i> 重置</button>
                    </div>

                </div>

            </div>

        </fieldset>

        <table class="layui-hide" id="ItemTableId" lay-filter="currentTableFilter"></table>
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-Details" lay-event="Details">详细</a>
        </script>
    </div>
</div>

@section Scripts{
    <script src="~/lib/layui/layui.js" charset="utf-8"></script>
    <script src="~/lib/lay-config.js?v=2.0.0" charset="utf-8"></script>

    @Scripts.Render("~/Scripts/Common")
<script>

    //常规用法
    layui.use(['layer', 'form', 'table', 'element', 'util', 'laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            element = layui.element,
            util = layui.util,
            form = layui.form,
            table = layui.table,
            layer = layui.layer
            laydate = layui.laydate;
        //加载日期
        laydate.render({
            elem: '#DtStat' //指定元素
        });
        laydate.render({
            elem: '#DtEnd' //指定元素

        });
        SelectLoad();
        //SELECT 加载
        function SelectLoad() {
            var lstpay = JSON.parse('@Html.Raw(@ViewData["pay"])');

            for (j in lstpay) {
                $(OptPay).append('<option value="' + lstpay[j].Name + '">' + lstpay[j].Name + '</option>');
            }

            layui.form.render("select");
        };
        var UserId ="@Session["UserId"]"
   
        var UrlItem = "/Accounts/AccountsLst?userid=" + UserId;
        //表格初始加载
        table.render({
            elem: '#ItemTableId',
            method: 'post',
            url: UrlItem,
            totalRow: true,
            dataType: 'json',
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
            skin: 'line', //行边框风格
            even: true, //开启隔行背景
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: "账单列表",
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                //{ type: "checkbox", width: 50 },Sessionessionession
                { field: 'Id', title: '编号', hide: true },
                { field: 'ItemName', width: 90, title: '项目类型' },
                { field: 'Member', width: 120, title: '卡号' },
                { field: 'GoodsQuantity', width: 80, title: '数量',  totalRow: true},
                { field: 'XfPrice', width: 90, title: '消费总额', totalRow: true },
                { field: 'YsPrice', width: 90, title: '应收金额', totalRow: true },
                { field: 'SsPrice', width: 90, title: '实收金额', totalRow: true },
                { field: 'PayType', width: 90, title: '支付方式' },
                { field: 'PayPrice', width: 95, title: '收款金额' },
                { field: 'OutPrice', width: 80, title: '找零' },
                { field: 'JfCount', width: 90, title: '积分' },
                { field: 'Remarks', width: 170, title: '备注', minWidth: 100 },
                { field: 'OrderNumber', width: 150, title: '单号', hide: true },
                {
                    field: 'Dt', width: 200, title: '时间', align: 'center',
                    templet: function (d) {
                        return FormatToDate(d.Dt);
                    }
                },

                { field: 'ItemType', width: 90, title: '收支类型', hide: true },
                { field: 'AdminId', width: 90, title: '业务员', hide: true },

                { title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center" }
            ]]
            , done: function (data, index) {
                console.log("初始加载完成!");
            }
            , initSort: {
                field: 'Id' //排序字段,对应 cols 设定的各字段名
                , type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
            , page: true
            , limits: [50, 100, 200, 500]  //一页选择显示3,5或10条数据
            , limit: 50  //一页显示10条数据
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据

            }
        });
        var i = 1;

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //var result = JSON.stringify(data.field);
            if ($('#txtcard').val() == "" && $('#OptItem').val() == "" && $('#OptPay').val() == ""
                && $('#DtStat').val() == "" && $('#DtEnd').val() == "") {
                layer.msg('查询条件不能为空');
                return false;
            }
            console.log("监听搜索开始");
            table.reload('ItemTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    member: $('#txtcard').val(),
                    itemname: $('#OptItem').val(),
                    paymode: $('#OptPay').val(),
                    dt1: $('#DtStat').val(),
                    dt2: $('#DtEnd').val()
                },
                done: function (res, curr, count, url) {
                    console.log(this.where);
                }
            }, 'data');

            return false;
        });

        //重置事件
        $('#btnReset').click(function () {
            $('#txtcard').val('');
            $('#OptItem').val('');
            $('#OptPay').val('');
            $('#DtStat').val('');
            $('#DtEnd').val('');
            form.render("select");
            table.reload('ItemTableId', {
                page: {
                    curr: 1
                },
                where:null,
            });
            //return false;
        });



        /**
         * toolbar监听事件
         */




    });
</script>

}

DTO 和 DAL 自行解决 内容不完美 请大佬们多指点。

效果图
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值