DS7/DSWeb/MvcShipping/Views/MsOpRule/RuleList.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/MvcShipping/Views/Shared/PC.Master" AutoEventWireup="true" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Body" runat="server">

    <%
        List<string> fields = ViewData["fields"] as List<string>;
    %>

    <div class="ibox-content">
        <div class="row row-lg">
            <div class="col-sm-12">
                <div id="toolbar">
                    <div class="form-inline" role="form">
                        <button id="btnAdd" type="button" class="btn btn-primary"><i class="fa fa-plus"></i>添加</button>
                        <button id="btnDel" type="button" class="btn btn-danger"><i class="fa fa-trash"></i>删除</button>
                        <button id="btnEnable" type="button" class="btn btn-info"><i class="fa fa-check"></i>生效</button>
                        <button id="btnDisable" type="button" class="btn btn-warning"><i class="fa fa-ban"></i>失效</button>
                    </div>
                </div>

                <table id="table"
                    data-toggle="table"
                    data-show-refresh="false"
                    data-show-toggle="false"
                    data-show-columns="true"
                    data-toolbar="#toolbar"
                    data-url="/MvcShipping/MsOpRule/RuleListData"
                    data-content-type="application/x-www-form-urlencoded"
                    data-pagination="true"
                    data-side-pagination="server"
                    data-total-field="Total"
                    data-data-field="List"
                    data-page-number="1"
                    data-page-size="15"
                    data-method="post">
                    <thead>
                        <tr>
                            <th data-field="Code" data-formatter="chooseFormatter">规则编号</th>
                            <th data-field="Title">规则名称</th>
                            <th data-field="RedAlertField">红色字体提醒</th>
                            <th data-field="SaveDisable" data-formatter="trueFalseFormatter">禁止保存</th>
                            <th data-field="Enable" data-formatter="trueFalseFormatter">是否有效</th>
                            <th data-field="EnableDisableTime">生效/失效时间</th>
                            <th data-field="GID" data-formatter="operateFormatter" data-events="operateEvents">操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="editModel" tabindex="-1" role="dialog" aria-labelledby="editModelTitle">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editModelTitle">编辑规则</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="iptRuleGID" name="GID" />
                    <div class="form-inline">
                        <div class="form-group">
                            <label for="iptRuleCode">规则编号</label>
                            <input type="text" class="form-control" id="iptRuleCode" placeholder="请输入规则编号">
                        </div>
                        <div class="form-group">
                            <label for="iptRuleName">规则名称</label>
                            <input type="text" class="form-control" id="iptRuleName" placeholder="请输入规则名称">
                        </div>
                        <div class="form-group">
                            <label for="iptRuleName">红色提醒</label>
                            <select class="form-control" id="selRuleRedAlertField">
                                <option value="">请选择</option>
                                <% foreach (var item in fields)
                                    { %>
                                <option value="<%=item %>"><%=item %></option>
                                <%} %>
                            </select>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="chkSaveDisable">
                                禁止保存
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="chkEnable">
                                是否有效
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="radioCompareType" value="And" checked>
                                与
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="radioCompareType" value="Or">
                                或
                            </label>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-body item-container">

                            <div class="form-inline">
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <button type="button" class="btn btn-primary" id="btnItemAdd">增加</button>
                                        <button type="button" class="btn btn-danger" id="btnItemDel">删除</button>
                                    </div>
                                </div>
                            </div>

                            <div class="form-inline item-group">
                                <div class="form-group">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="chkRuleItem">
                                        </label>
                                    </div>
                                    <label>字段</label>
                                    <select class="form-control" name="selRuleItemField">
                                        <option value="">请选择</option>
                                        <% foreach (var item in fields)
                                            { %>
                                        <option value="<%=item %>"><%=item %></option>
                                        <%} %>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>条件</label>
                                    <select class="form-control" name="selRuleItemCompare">
                                        <option value="Contains">包含</option>
                                        <option value="NotContains">不包含</option>
                                        <option value="Large">大于</option>
                                        <option value="Small">小于</option>
                                        <option value="LargeEqual">大于等于</option>
                                        <option value="SmallEqual">小于等于</option>
                                        <option value="Equal">等于</option>
                                        <option value="NotEqual">不等于</option>
                                    </select>
                                    <input type="text" class="form-control" name="iptRuleItemValue">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="modelBtnSave">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div style="display: none;" id="itemCopy">
        <div class="form-inline item-group">
            <div class="form-group">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="chkRuleItem">
                    </label>
                </div>
                <label>字段</label>
                <select class="form-control" name="selRuleItemField">
                    <option value="">请选择</option>
                    <% foreach (var item in fields)
                        { %>
                    <option value="<%=item %>"><%=item %></option>
                    <%} %>
                </select>
            </div>
            <div class="form-group">
                <label>条件</label>
                <select class="form-control" name="selRuleItemCompare">
                    <option value="Contains">包含</option>
                    <option value="NotContains">不包含</option>
                    <option value="Large">大于</option>
                    <option value="Small">小于</option>
                    <option value="LargeEqual">大于等于</option>
                    <option value="SmallEqual">小于等于</option>
                    <option value="Equal">等于</option>
                    <option value="NotEqual">不等于</option>
                </select>
                <input type="text" class="form-control" name="iptRuleItemValue">
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FooterScript" runat="server">

    <script>
        $(function () {
            $('#table').bootstrapTable({ height: $(window).height() - 150 });

            $("#btnSearch").click(function () {
                $('#table').bootstrapTable('refresh')
            })

            //添加
            $("#btnAdd").click(function () {
                $('#editModel').modal('show');

                //重置
                $('#editModel input[type="text"],input[type="hidden"]').val("");
                $("#editModel select").val("");
                $("#chkSaveDisable").prop("checked", false);
                $("#editModel :radio[name='radioCompareType']:first").prop("checked", "checked");
                $('div.item-container div.item-group').each(function (i, v) {
                    $(v).remove();
                });
                $('div.item-container').append($("#itemCopy").html());
            })

            //删除
            $("#btnDel").click(function () {
                var strIds = '';
                $('#table :checkbox:checked').each(function (i, v) {
                    strIds += $(v).val() + ","
                });

                if (strIds.length == 0) {
                    layer.msg("请选择要删除的规则", { icon: 2 });
                    return;
                }

                layer.confirm('确定删除吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    var loadIdx = layer.load();
                    $.ajax({
                        type: "POST",
                        url: "/MvcShipping/MsOpRule/DeleteRules?strIds=" + strIds,
                        dataType: "json",
                        success: function (data) {
                            if (data.Success) {
                                layer.msg(data.Message, { icon: 1 }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.close(loadIdx);
                                layer.msg(data.Message, { icon: 5 });
                            }
                        }
                    });
                });

            })

            //添加item
            $("#btnItemAdd").click(function () {
                $('div.item-container').append($("#itemCopy").html());
            })

            //删除item
            $("#btnItemDel").click(function () {
                $('div.item-container div.item-group').each(function (i, v) {
                    var len = $(this).find(":checkbox:checked").length;
                    if (len > 0) {
                        $(v).remove();
                    }
                });
            })

            //生效
            $("#btnEnable").click(function () {
                var strIds = '';
                $('#table :checkbox:checked').each(function (i, v) {
                    strIds += $(v).val() + ","
                });

                if (strIds.length == 0) {
                    layer.msg("请选择要生效的规则", { icon: 2 });
                    return;
                }

                layer.confirm('确定生效吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    var loadIdx = layer.load();
                    $.ajax({
                        type: "POST",
                        url: "/MvcShipping/MsOpRule/EnableDisableRules?strIds=" + strIds,
                        dataType: "json",
                        success: function (data) {
                            if (data.Success) {
                                layer.msg(data.Message, { icon: 1 }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.close(loadIdx);
                                layer.msg(data.Message, { icon: 5 });
                            }
                        }
                    });
                });
            })

            //失效
            $("#btnDisable").click(function () {
                var strIds = '';
                $('#table :checkbox:checked').each(function (i, v) {
                    strIds += $(v).val() + ","
                });

                if (strIds.length == 0) {
                    layer.msg("请选择要失效的规则", { icon: 2 });
                    return;
                }

                layer.confirm('确定失效吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    var loadIdx = layer.load();
                    $.ajax({
                        type: "POST",
                        url: "/MvcShipping/MsOpRule/EnableDisableRules?enable=false&strIds=" + strIds,
                        dataType: "json",
                        success: function (data) {
                            if (data.Success) {
                                layer.msg(data.Message, { icon: 1 }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.close(loadIdx);
                                layer.msg(data.Message, { icon: 5 });
                            }
                        }
                    });
                });
            })

            //保存
            $("#modelBtnSave").click(function () {
                var model = new Object();
                model.GID = $("#iptRuleGID").val();
                model.Code = $("#iptRuleCode").val();
                model.Title = $("#iptRuleName").val();
                model.RedAlertField = $("#selRuleRedAlertField").val();
                model.SaveDisable = $("#chkSaveDisable").prop("checked");
                model.Enable = $("#chkEnable").prop("checked");
                model.CompareType = $(":radio[name='radioCompareType']:checked").val();

                if (model.Code.length == 0) {
                    layer.msg("规则编号必须输入", { icon: 2 });
                    return;
                }

                if (model.Title.length == 0) {
                    layer.msg("规则名称必须输入", { icon: 2 });
                    return;
                }

                var items = new Array();
                var groups = $("div.item-container div.item-group");
                for (var idx = 0; idx < groups.length; idx++) {
                    var itemField = $(groups[idx]).find("select[name='selRuleItemField']:first").val();
                    var itemCompare = $(groups[idx]).find("select[name='selRuleItemCompare']:first").val();
                    var itemValue = $(groups[idx]).find("input[name='iptRuleItemValue']:first").val();
                    if (itemField.length == 0 || itemValue.length == 0) {
                        layer.msg("所有字段内容必须填写", { icon: 2 });
                        return;
                    }

                    items.push({
                        Field: itemField,
                        Compare: itemCompare,
                        Value: itemValue
                    });
                }

                model.Items = items;

                var loadIdx = layer.load();
                $.ajax({
                    type: "POST",
                    url: "/MvcShipping/MsOpRule/SaveRule",
                    //contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(model),
                    success: function (data) {
                        if (data.Success) {
                            layer.msg(data.Message, { icon: 1 }, function () {
                                location.reload();
                            });
                        } else {
                            layer.close(loadIdx);
                            layer.msg(data.Message, { icon: 5 });
                        }
                    }
                });
            });
        })



        function trueFalseFormatter(value, row, index) {
            if (value) {
                return '是';
            } else {
                return '否'
            }
        }

        function operateFormatter(value, row, index) {
            return [
                '<a class="edit" href="javascript:void(0)" title="编辑">',
                '<i class="fa fa-edit"></i> 编辑',
                '</a>  '
            ].join('');
        }

        function chooseFormatter(value, row, index) {
            return '<input type="checkbox" name="chkChoose" value="' + row.GID + '">&nbsp;' + row.Code;
        }

        window.operateEvents = {
            'click .edit': function (e, value, row, index) {
                $('#editModel').modal('show');

                var loadIndex = layer.load();
                $.ajax({
                    type: "POST",
                    url: "/MvcShipping/MsOpRule/GetRule?gid=" + value,
                    success: function (data) {

                        $("#iptRuleGID").val(value);
                        $("#iptRuleCode").val(data.Code);
                        $("#iptRuleName").val(data.Title);
                        $("#selRuleRedAlertField").val(data.RedAlertField);
                        $("#chkSaveDisable").prop("checked", data.SaveDisable);
                        $("#chkEnable").prop("checked", data.Enable);
                        $(":radio[name='radioCompareType'][value='" + data.CompareType + "']").prop("checked", true);

                        $('div.item-container div.item-group').each(function (i, v) {
                            $(v).remove();
                        });

                        for (var idx = 0; idx < data.Items.length; idx++) {
                            $('div.item-container').append($("#itemCopy").html());

                            var lastItem = $('div.item-container div.item-group:last');


                            lastItem.find("select[name='selRuleItemField']:first").val(data.Items[idx].Field);
                            lastItem.find("select[name='selRuleItemCompare']:first").val(data.Items[idx].Compare);
                            lastItem.find("input[name='iptRuleItemValue']:first").val(data.Items[idx].Value);
                        }

                        layer.close(loadIndex);
                    }
                });
            }

        }
    </script>
</asp:Content>