Asp.Net Core 应用管理系统

分手后的思念是犯贱 2022-05-14 07:45 137阅读 0赞

1.项目分层  
![这里写图片描述][70]

基础库：SUNS.NETCORE.CommonLib  
服务层：SUNS.NETCORE.Application  
数据库：SUNS.NETCORE.DBEntity  
UI：SUNS.NETCORE.WebSite

2.页面效果  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]

3.UI 设计

@{
        ViewBag.Title = "产品列表";
        Layout = "~/Views/Shared/_layoutContent.cshtml";
    }
    <div class="layui-card">
        <div class="layui-form layui-card-header layui-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">产品名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="iptPName" placeholder="产品名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">产品类型</label>
                    <div class="layui-input-block">
                        <select name="selPType" id="selPType">
                            <option value="-1">请选择</option>
                            <option value="输入设备">输入设备</option>
                            <option value="输出设备">输出设备</option>
                            <option value="软件">软件</option>
                            <option value="3">硬件</option>
                            <option value="4">显示器</option>
                            <option value="5">连接线</option>
                            <option value="6">编辑电源</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-block">
                        <input type="text" id="iptPNo" placeholder="编号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">规格</label>
                    <div class="layui-input-block">
                        <input type="text" id="iptSpec" placeholder="规格" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">产品标识</label>
                    <div class="layui-input-block">
                        <select name="selPIsEnable" id="selPIsEnable">
                            <option value="-1">请选择</option>
                            <option value="1">有效</option>
                            <option value="0">无效</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">所属公司</label>
                    <div class="layui-input-block">
                        <input type="text" id="iptPCom" placeholder="所属公司" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">公司地址</label>
                    <div class="layui-input-block">
                        <input type="text" id="iptPAddr" placeholder="公司地址" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">价格范围</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" id="iptPriceMin" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" id="iptPriceMax" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width:120px">添加时间(范围)</label>
                    <div class="layui-input-block" style="margin-left:150px;">
                        <input type="text" id="iptAddTime" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 190px;">
                    <button class="layui-btn " id="searchBtn">查询</button>
                </div>
            </div>
    
        </div>
        <div class="layui-form layui-card-body">
            <div class="layui-form-item" style="margin-left:20px;">
                <div class="layui-inline">
                    <button class="layui-btn" id="addProductInfoBtn">添加产品</button>
                    <button class="layui-btn" id="exportExcelBtn">导出excel</button>
                    <button class="layui-btn" id="getCheckkBtn">获取选中行数据</button>
                    @*</div>
                        <div class="layui-inline">*@
                    <button class="layui-btn" data-type="getCheckkNumBtn" id="getCheckkNumBtn">获取选中数目</button>
                    <button class="layui-btn" data-type="isAll" id="getCheckkIsAllBtn">验证是否全选</button>
                    @*</div>
                        <div class="layui-inline">*@
                    <button class="layui-btn" id="openMOdalBtn">打开Modal</button>
                    <button class="layui-btn" id="sqlSendMqBtn">选中数据发送到MQ</button>
                </div>
            </div>
    
    
            @*<table class="layui-table" id="producttable"></table>*@
            <table class="layui-hide" id="producttable" lay-filter="test"></table>
            <script type="text/html" id="operate" lay-filter="productOpe">
                {
       {#
                var id = d.id;
                @*console.log(id);*@
                }}
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
            
            <script id="PAddTime" type="text/html">
                {
       {#
              return  '2018-07-01';
                }}
            </script>
    
            <div id="motaikunag" style="display:none">modal 测试</div>
        </div>
    </div>
    <script>
        layui.use(['table', 'jquery', 'layer', 'laydate'], function () {
            //引用table插件
            var table = layui.table;
            //引用jquery插件
            var $ = jQuery = layui.$;
            var laydate = layui.laydate;
    
            //laydate.render({
            //    elem: '#iptAddTime' //指定元素
            //});
            //日期范围选择
            laydate.render({
                elem: '#iptAddTime'
                , range: true //或 range: '~' 来自定义分割字符
            });
    
            //第一个实例
            table.render({
                //渲染元素
                elem: '#producttable'
                //表格样式
                , skin: 'line'
                //隔行背景
                , even: true
                //表格尺寸
                //, size: 'sm'
                //高度
                , height: 'full'
                //单元格最小宽度
                //, cellMinWidth: 80
                //数据接口地址
                , url: '/ProductInfo/GetProductList'
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    , groups: 10 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页
                    , limit: 20
    
                }
                , id: 'Ptable'
                //是否开启分页
                //, page: true //开启分页
                //是否显示加载条
                , loading: true
                , cols: [[ //表头
                    //序号
                    { type: 'numbers', fixed: true }
                    //复选框
                    , { type: 'checkbox', fixed: true }
                    , { field: 'id', title: 'ID', width: 30, sort: true }
                    , { field: 'pName', title: '产品', width: 100, sort: true }
                    , { field: 'pType', title: '类型', width: 100 }
                    , { field: 'pNo', title: '编号', width: 240 }
                    , { field: 'pCompany', title: '公司', width: 120 }
                    , { field: 'pAddress', title: '地址', width: 280 }
                    , { field: 'pSpec', title: '规格', width: 150 }
                    , { field: 'pPrice', title: '价格', sort: true, width: 80, edit: 'text' }
                    //格式化时间
                    , { field: 'pAddTime', title: '添加时间', sort: true, width: 150, templet: '#PAddTime' }
                    , { field: 'pUpdateTime', title: '修改时间', sort: true, width: 150 }
                    , { field: 'pIsEnable', title: '有效标识', width: 80, sort: true }
                    , { field: 'pRemark', title: '备注', width: 200, edit: 'text' }
                    , { field: '', title: '操作', width: 180, fixed: 'right', toolbar: '#operate' }
                ]]
                //表格加载完毕回调函数
                , done: function (res, curr, count) {
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    //console.log(res);
                    得到当前页码
                    //console.log(curr);
                    得到数据总量
                    //console.log(count);
                    隐藏ID列
                    //$("[data-field='Id']").css('display', 'none');
                }
                //默认排序
                , initSort: {
                    field: 'pAddTime' //排序字段，对应 cols 设定的各字段名
                    , type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
                //异常数据处理
                , text: {
                    none: '暂无数据'
                }
            });
    
            //监听表格复选框选择
            table.on('checkbox(producttable)', function (obj) {
                console.log(obj)
            });
    
            //查询
            $("#searchBtn").click(function () {
                var iptPName = $('#iptPName');
                //执行重载
                table.reload('Ptable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        PName: iptPName.val()
                        , PType: $('#selPType').val()
                        , PNo: $('#iptPNo').val()
                        , PSpec: $('#iptSpec').val()
                        , PIsEnable: $('#selPIsEnable').val()
                        , PCompany: $('#iptPCom').val()
                        , PAddress: $('#iptPAddr').val()
                        , AddTimeRange: $('#iptAddTime').val()
                        , PPriceMin: $('#iptPriceMin').val()
                        , PPriceMax: $('#iptPriceMax').val()
                        , OperateType: 0
    
                    }
                });
            });
    
            //导出excel
            $("#exportExcelBtn").click(function () {
                layer.confirm('确认要导出所有的数据吗？', {
                    btn: ['确定', '取消']//按钮
                }, function (index) {
                    layer.close(index);
                    window.location.href = "/ProductInfo/ExportExcelHtml?PName=" + $('#iptPName').val() + "&PType=" + $('#selPType').val() + "&PNo=" + $('#iptPNo').val() +
                        "&PSpec=" + $('#iptSpec').val() + "&PIsEnable=" + $('#selPIsEnable').val() + "&PCompany=" + $('#iptPCom').val() + "&PAddress=" + $('#iptPAddr').val() +
                        "&AddTimeRange=" + $('#iptAddTime').val() + "&PPriceMin=" + $('#iptPriceMin').val() + "&PPriceMax=" + $('#iptPriceMax').val() + "&OperateType=1";
                });
            });
            //获取选中行数据
            $("#getCheckkBtn").click(function () {
                var checkStatus = table.checkStatus('Ptable')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            });
            //获取选中条目
            $("#getCheckkNumBtn").click(function () {
                var checkStatus = table.checkStatus('Ptable')
                    , data = checkStatus.data;
                layer.alert(data.length);
            });
            //验证是否全选
            $("#getCheckkIsAllBtn").click(function () {
                var checkStatus = table.checkStatus('Ptable');
                layer.alert(checkStatus.isAll);
            });
            //监听单元格编辑
            table.on('edit(test)', function (obj) {
                layer.msg("edit");
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                layer.msg('[ID: ' + data.Id + '] ' + field + ' 字段更改为：' + value);
            });
    
            $("#addProductInfoBtn").click(function () {
                location.href = "/ProductInfo/AddProduct";
            });
            //编辑 删除 查看操作按钮
            table.on('tool(test)', function (obj) {
                console.log(obj);
                //查看
                if (obj.event == "detail") {
                    //layer.msg("details" + obj.data.Id);
                    location.href = "/ProductInfo/ProductDetails?Id=" + obj.data.id;
                }
                //编辑
                else if (obj.event == "edit") {
                    location.href = "/ProductInfo/ProductEdit?Id=" + obj.data.id;
                }
                //删除
                else if (obj.event == "del") {
                    var id = obj.data.id;
                    layer.confirm('确认要删除吗？', {
                        btn: ['确定', '取消']//按钮
                    }, function (index) {
                        layer.close(index);
                        $.post('/ProductInfo/DelProduct', { Id: id }, function (result) {
                            if (result.code == 0) {
                                //执行重载
                                table.reload('Ptable', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }
                        });
                    });
                }
            });
    
            $("#openMOdalBtn").click(function () {
                $("[name='testname']").val("xxxxxxxxxxxxxxx");//向模态框中赋值
                layui.use(['layer'], function () {
                    var layer = layui.layer, $ = layui.$;
                    layer.open({
                        type: 1,//类型
                        area: ['400px', '300px'],//定义宽和高
                        title: '查看详细信息',//题目
                        shadeClose: false,//点击遮罩层关闭
                        content: $('#motaikunag')//打开的内容
                    });
                })
            });
            //发送到Mq
            $("#sqlSendMqBtn").click(function () {
                var checkStatus = table.checkStatus('Ptable')
                    , data = checkStatus.data;
                if (data.length == 0) {
    
                    layer.msg("请选中数据");
                    return false;
                }
                var str = "";
                for (var i = 0; i < data.length; i++) {
                    str += data[i].id + ",";
                }
                str = str.substring(str.length - 1, 1);
                $.post("/ProductInfo/AddProAri",
                    { ids: str },
                    function (result) {
                        if (result.code == 0) {
                            layer.msg("发送成功");
                        }
                    });
            });
        });
    </script>

[70]: /images/20220514/a2cf7ac1458940ecb6cb0022ea0da348.png
[70 1]: /images/20220514/7d245243ed7e430db2cd519ae70c4af6.png
[70 2]: /images/20220514/6498ab7d8881484bb1af4d3450881fa7.png