ShWasher/src_0nline/ShwasherSys/ShwasherSys.Web/Views/InvoiceInfo/StatementBill.cshtml

@using System.Text
@using Abp.Timing
@using Org.BouncyCastle.Asn1.X509
@using ShwasherSys.Authorization.Permissions
@using ShwasherSys.BasicInfo
@using ShwasherSys.Models.Layout
@using ShwasherSys.Views.Shared.New.Modals
@using ShwasherSys.Views.Shared.New.Table

@{
    ViewBag.Title = "对账单信息维护";
    string activeMenu = PermissionNames.PagesInvoiceInfoStatementBill; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    List<SelectListItem> customerItems = ViewBag.CustomerList;
    StringBuilder strOptionCustomer = new StringBuilder();
    strOptionCustomer.Append("<option value=\"\">请选择</option>");
    foreach (var c in customerItems)
    {
        strOptionCustomer.Append(string.Format("<option value=\"{0}\">{1}</option>", c.Value, c.Value));
    }
    List<SelectListItem> stateItems = new List<SelectListItem>()
    {
        new SelectListItem()
        {
            Value = "0",
            Text = "未开票"
        }, new SelectListItem()
        {
            Value = "1",
        Text = "已开票"
    }
    };
    string newStatementNo = "S" + Clock.Now.ToString("yyMMddHHmmss");
    var searchForm = new SearchFormViewModal(new List<SearchItem>()
{
        new SearchItem("statementBillNo","对账单号"),
        new SearchItem("customerId","客户编号").SetSearchIcon("query_customer_modal","SearchForm"),
        new SearchItem("statementState","是否开票",FiledType.Inull,ExpType.Equal).SetSearchItem(stateItems,isAddBlank:true),
        new SearchItem("orderStickBillNo","发票号"),

    });

    var table = new TableViewModel("/api/services/app/StatementBill/GetAll", activeMenu, searchForm)
    .SetFields(new List<FieldItem>()
    {
        new FieldItem("statementBillNo", "对账单编号"),
        new FieldItem("customerId", "客户编号"),
        new FieldItem("customerName", "客户名称"),
        new FieldItem("description", "备注"),
        new FieldItem("creationTime", "创建时间","DateFormatter"),
        new FieldItem("billMan", "对账人员"),
        new FieldItem("statementState", "是否开票","StatementStateFormatter"),
        new FieldItem("orderStickBillNo", "发票号"),

                    });

}
@section css{
    <style>
        .form-box {
            min-height: 50px;
        }

            .form-box .input-group-addon {
                background: #d1dcf9;
                border-color: #d1dcf9;
                color: #563d7c;
            }

            .form-box .form-control {
                border-color: #d1dcf9;
            }

            .form-box .form-box-column {
                float: left;
                min-width: 250px;
                width: 18%;
                margin: 0 5px;
            }

        .btn-action {
            margin-left: 20px;
            width: 100px;
            margin-top: 0px;
        }
        .guide > i {
            display: inline-block;
            color: #ffffff;
            transition: all 1s ease;
        }
        .down-direction2 {
            transform: rotate(180deg);
        }
        .selectedRecord {
            position: fixed;
            min-width: 86vw;
            bottom: 51px;
            display: flex;
            flex-flow: column nowrap;
        }
        .selectedRecord .header-arrow {
            height: 25px;
            background: #563d7c;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            cursor: pointer;
            border-radius: 5px 5px 0 0;
        }
        .selectedRecord .header-arrow .guide {
            font-size: 1rem;
            padding: 2px;
        }
        .selected-content {
            display: none;
            border: 1px solid #563d7c;
            padding: 0!important;
            height: auto;
        }
        .selected-content .fixed-table-body {
            height: 90% !important;
        }
    </style>
}
<div class="row" style="margin: 0 0;">
    <div class="col-xs-12" style="padding: 0 5px;">
        <div class="nav-tabs-custom" style="margin-bottom: 5px;">
            <ul class="nav nav-tabs" id="tabIndex">

                <li class="active"><a href="#createInvoice_tab" data-toggle="tab">填开对账单页</a></li>
                <li><a href="#query_tab" data-toggle="tab">查询信息页</a></li>
            </ul>
            <div class="tab-content form-box">

                <div class="tab-pane active" id="createInvoice_tab" style="width: 100%; ">
                    <div style="width: 100%; height:25px;margin: 1px 0 5px 0;">
                        <form id="formInvoice">
                            <div class="form-box-column">
                                <div class="form-group-sm input-group">
                                    <div class="input-group-addon" style="">
                                        <span>客户编号</span>
                                    </div>
                                    @*<select class="form-control" Required id="customerId" name="customerId" placeholder="请输入..." value="" style="width: 100%;" type="text" onchange="RefreshCustomer(this)">
            @Html.Raw(strOptionCustomer)
        </select>*@
                                    <input type="text" class="form-control KeyWords" style="border-radius: 0 0 0 0 !important;" id="customerId" name="customerId" data-keyField="customerId" data-fieldType="0" data-expType="0" readonly="readonly" onchange="RefreshCustomer(this)"/>
                                   
                                    <div class="input-group-addon" style="cursor: pointer;" onclick="ShowQueryModal('query_customer_modal','formInvoice')">
                                        <i class="iconfont icon-search"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="form-box-column">
                                <div class="form-group-sm input-group">
                                    <div class="input-group-addon">
                                        <span>发货日期</span>
                                    </div>
                                    <input type="text" class="form-control iwb-date-range" style="border-radius: 0 0 0 0 !important;" id="queryDateRange" name="queryDateRange" data-keyField="queryDateRange" data-fieldType="0" data-expType="0" readonly="readonly" onchange="RefreshCustomer(this)"/>
                                    <div class="input-group-addon" style="cursor: pointer;" onclick="$('#queryDateRange').val('')">
                                        <i class="iconfont icon-close"></i>
                                    </div>
                                </div>
                            </div>
                          
                            <div class="form-box-column">
                                <div class="form-group-sm input-group">
                                    <div class="input-group-addon">
                                        <span>对账单号</span>
                                    </div>
                                    <input type="text" class="form-control" id="statementBillNo" name="statementBillNo" value="@newStatementNo" onchange="RefreshCustomer(this)"/>

                                </div>
                            </div>
                            <div class="form-box-column">
                                <div class="form-group-sm input-group">
                                    <div class="input-group-addon">
                                        <span>备注</span>
                                    </div>
                                    <input type="text" class="form-control" id="description" name="description" value="" />

                                </div>
                            </div>
                            <div class="form-box-column">
                                <button type="button" class="btn btn-block btn-info btn-sm" id="createStickBillBtn" style="width: 360px;" onclick="CreateBill()"><i class="iconfont icon-fapiao"></i><span style="font-size: 1.3rem;"><strong>生成对账单</strong></span></button>
                            </div>
                        </form>

                    </div>
                    <div class="table-box iwb-bootstrap-table">
                        <table id="tableSendItem"
                               data-striped="true" data-id-field="id" data-unique-id="id"
                               data-method="post"
                               data-side-pagination="server"
                               data-content-type="application/x-www-form-urlencoded; charset=UTF-8"
                               data-cache="false"
                               data-pagination="false" data-page-size="30" data-page-number="1" data-page-list="[30,50,100,200]" data-pagination-detail-h-align="right" data-pagination-h-align="left"
                               data-query-params="QueryParams"
                               data-response-handler="ResponseHandler"
                               data-click-to-select="true"
                               data-single-select="false">
                            <thead>
                            <tr class="row" id="header">
                                <th data-field="state" data-checkbox="true"></th>
                                <th data-align="center" data-field="orderNo">流水号</th>
                                <th data-align="center" data-field="stockNo">客户订单号 </th>
                                <th data-align="center" data-field="orderSendBillNo">发货单号</th>
                                <th data-align="center" data-field="customerId">客户编号</th>
                                <th data-align="center" data-field="productNo">产品编号</th>
                                <th data-align="center" data-field="productDesc">产品描述</th>
                                <th data-align="center" data-field="partNo">零件号</th>
                                <th data-align="center" data-field="productName">产品名称</th>
                                <th data-align="center" data-field="model">规格</th>
                                <th data-align="center" data-field="surfaceColor">表色</th>
                                <th data-align="center" data-field="rigidity">硬度</th>
                                <th data-align="center" data-field="sendQuantity">数量</th>
                                <th data-align="center" data-field="orderUnitName">单位</th>
                                <th data-align="center" data-field="orderDate">订单日期</th>
                                <th data-align="center" data-field="sendActionDate">送货日期</th>
                                <th data-align="center" data-field="linkName">联系人</th>

                            </tr>
                            </thead>
                        </table>

                    </div>
                    <div class="selectedRecord">
                        <div class="header-arrow">
                            <span class="guide">查看选中明细  <i class="iconfont icon-up"></i></span>
                        </div>
                        <div class="table-box mr-4  iwb-bootstrap-table selected-content">
                            <table id="selectedTable" data-click-to-select="false" data-height="300"
                                   data-single-select="false">
                                <thead>
                                <tr class="row" >
                                    @*<th data-field="state" data-checkbox="true"></th>*@
                                    <th data-align="center" data-field="id"></th>
                                    <th data-align="center" data-field="orderNo">流水号</th>
                                    <th data-align="center" data-field="stockNo">客户订单号 </th>
                                    <th data-align="center" data-field="orderSendBillNo">发货单号</th>
                                    <th data-align="center" data-field="customerId">客户编号</th>
                                    <th data-align="center" data-field="productNo">产品编号</th>
                                    <th data-align="center" data-field="productDesc">产品描述</th>
                                    <th data-align="center" data-field="partNo">零件号</th>
                                    <th data-align="center" data-field="productName">产品名称</th>
                                    <th data-align="center" data-field="model">规格</th>
                                    <th data-align="center" data-field="surfaceColor">表色</th>
                                    <th data-align="center" data-field="rigidity">硬度</th>
                                    <th data-align="center" data-field="sendQuantity">数量</th>
                                    <th data-align="center" data-field="orderUnitName">单位</th>
                                    <th data-align="center" data-field="orderDate">订单日期</th>
                                    <th data-align="center" data-field="sendActionDate">送货日期</th>
                                    <th data-align="center" data-field="linkName">联系人</th>

                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="query_tab" style="width: 100%;">
                    @Html.Partial("New/Table/_Table", table)
                </div>
            </div>
        </div>
    </div>
</div>


@section modal{
    <!--Main Modal-->
    @{
		//		var modal = new ModalViewModel("人员", new ModalBodyViewModel(new List<Input>()
		//{
		//			new InputHide("id"),
		//			new Input("no", "人员编号"),
		//			new Input("name", "人员姓名"),
		//			new Input("phoneNumber", "手机号").SetNotRequired(),
		//			new Input("cardId", "身份证号").SetNotRequired(),

		//			new InputTextarea("description", "详情").SetNotRequired(),

		//		}));
		var modal = new ModalViewModel("修改备注", new ModalBodyViewModel(new List<Input>()
		{
			new InputHide("id"),

		 
            //new Input("gender", "性别").SetSelectOptions(gender),
            //new Input("departmentNo", "部门").SetNotRequired().SetSelectOptions(depart),
            //new Input("dutyNo", "职务").SetNotRequired().SetSelectOptions(duty),
            new InputTextarea("description", "备注").SetNotRequired()
            //new Input("userName", "登陆账号").SetNotRequired(),
        }));
		//        var accountModal = new ModalViewModel("绑定账号", new ModalBodyViewModel(new List<Input>()
		//{
		//            new InputHide("id"),
		//            new Input("userName", "登陆账号",InputTypes.List),
		//        }), "Account_Modal");
    }
    @Html.Partial("New/Modals/_Modal", modal)
    @*@Html.Partial("New/Modals/_Modal", accountModal)*@

    <section>
        @Html.Partial("Modals/Query/_Customer", "KeyWords-2|customerId")
    </section>
}

@section scripts
{
    <script src="~/Content/Plugins/jquery-ui/jquery-ui.js"></script>
    <script type="text/javascript">
        var $table=$('#table');
        $(function () {
            LoadTable();
            var funs = window.funs || { none: function () { console.log("No type"); } };
            funs["btnShow"] = function () {
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    window.open("@Url.Action("StatementBillDetail","InvoiceInfo")/" + row.statementBillNo, "_blank");
                }
                @*window.open("@Url.Action("InvoiceDetail","InvoiceInfo")/" + row.id, "_blank");*@
            }
			funs["btnUpdateDesc"] = function (url) {
				var rows = $("#table").bootstrapTable("getSelections");
				if (rows.length === 1) {
					var data = rows[0];
					OpenModal(url, { modal: $("#modal"), modaltitle: "修改备注", data: data });
				} else
					abp.message.warn(abp.localization.localize("ChooseOneToOp"));

			}
            $("#tableSendItem").hide();

            $('#queryDateRange').iwbDateRange();
			$(".guide").on('click',
				function () {
					$(".guide i").toggleClass("down-direction2");
					if ($(".guide i").hasClass('down-direction2')) {
						$('.selected-content').show();
					} else {
						$('.selected-content').hide();
					}
				});
			$(".selectedRecord ").draggable({ handle: ".header-arrow" });
        });
        function reloadSelectedTable() {
            $("#selectedTable").bootstrapTable("destroy");
            $("#selectedTable").bootstrapTable({
                data: [],
                onPostBody: OnPostBody,
                onLoadSuccess: OnLoadSuccess
            });
            $('#selectedTable tbody').sortable({ containment: "#selectedTable tbody", cursor: "move" });
        }
        function RefreshCustomer(that) {
            let cId = $('#customerId').val();
            let dateRange = $('#queryDateRange').val();
            let startDate, endDate;
            if (dateRange && /\s-\s/.test(dateRange)) {
                var dArr = dateRange.split(/\s-\s/);
                startDate = dArr[0];
                endDate = dArr[1];
            }
          
            QueryOrderSend(cId, startDate, endDate);
        }

        function QueryOrderSend(customerId, startDate, endDate) {
            if (customerId) {
                $("#tableSendItem").show();
            } else {
                $("#tableSendItem").hide();
                return;
            }
            SaveAjax({
                url: window.appUrl + "StatementBill/GetOrderSendByCustomerId",
                data: {
                    CustomerId: customerId,
                    SendDateStart: startDate,
                    SendDateEnd: endDate
                },
                dataType: "json",
                isValidate: false,
                isAlert: false,
                success: function(res) {
                    $("#tableSendItem").bootstrapTable("destroy");
                    reloadSelectedTable();
                    $("#tableSendItem").bootstrapTable({
                        data: res,
                        onPostBody: OnPostBody,
                        onAll: function() {
                            $("#createInvoice_tab .btn-action").prop('disabled', !$("#tableSendItem").bootstrapTable('getSelections').length);
                        },
                        onLoadSuccess: OnLoadSuccess,
                        onCheck: OnCheck2,
                        onUncheck: OnUnCheck2,
                        onUncheckAll: OnUnCheckAll,
                        onCheckAll: OnCheckAll
                    });
                    $("#createInvoice_tab .bs-checkbox").find("input").addClass("filled-in").after("<label></label");
                    $("#createInvoice_tab .btn-action").prop('disabled', !$("#tableSendItem").bootstrapTable('getSelections').length);
                    $("#tableSendItem thead th.bs-checkbox ").off("click.checkOnTable").on("click.checkOnTable",
                        function() {
                            $(this).find("input").click();

                        });
                }
            });
        }

        function CreateBill() {
            var customerId = $("#customerId").val();
            var statementBillNo = $("#statementBillNo").val();
			var desc = $("#description").val();

            //var rows = $("#tableSendItem").bootstrapTable("getSelections");
            var $trs = $("#selectedTable tbody tr");
            var sids = [];
            $.each($trs,
                function (i, item) {
                    sids.push($(item).find('td').eq(0).text());
                }
            );
            //console.log('---------------', sids.join());
			if (sids.length > 0) {
                //var sendIds = "";
                //for (var i = 0; i < rows.length; i++) {
                //    sendIds += "," + rows[i].id;
                //}
                //if (sendIds) {
                //    sendIds = sendIds.substr(1);
                //}
                SaveAjax({
                    url: window.appUrl + "StatementBill/Create",
                    data: {
						OrderSendIds: sids.join(),
                        CustomerId: customerId,
                        StatementBillNo: statementBillNo,
                        Description: desc
                    },
                    dataType: "json",
                    isValidate: false,
                    isAlert: false,
                    success: function (res) {
                        QueryOrderSend(customerId);
                        @*abp.message.success("创建成功！").done(function() {
                                window.open("@Url.Action("OrderSendBillDetail")/" + res.id, "_blank");
                            });*@

                        $('#tabIndex li:eq(1) a').tab('show');
                        RefreshTable();
                    }
                });
            } else
                abp.message.warn(abp.localization.localize("ChooseOneToOp"));
        }
        function OnCheck2(row, $element) {
            //$("#selectedTable").bootstrapTable("destroy");
            $("#selectedTable").bootstrapTable('append', [row]);
            $("#selectedTable").bootstrapTable('scrollTo','bottom');
        }

        function OnUnCheck2(row, $element) {
            //console.table(row)
            $("#selectedTable").bootstrapTable('remove', { field: 'id', values: [row.id] });
        }
        function OnUnCheckAll(rowsAfter, rowsBefore) {
            $("#selectedTable").bootstrapTable('removeAll');
        }
        function OnCheckAll(rowsAfter, rowsBefore) {
            //console.log(rowsAfter, rowsBefore)
            $("#selectedTable").bootstrapTable('load', rowsAfter);
            $("#selectedTable").bootstrapTable('scrollTo','bottom');
        }
        function KeepClock() {
            SaveAjax({
                url: window.appUrl + "Common/KeepClock",
                async:false,
                isValidate: false,
                isAlert: false,
                success: function(res) {
                    console.log('页面与服务器交户：'+res);
                }
            });
            setTimeout(KeepClock, 3 * 60 * 1000);
        }

        setTimeout(KeepClock, 3 * 60 * 1000);
    </script>

    <!--格式化-->
    <script id="formatter-script" type="text/javascript">
        function DutyFormatter(v) {
            var name = $('#hid-du option[value="' + v + '"]').text();
            if (name) {
                return '<span class="label label-info">' + name + '</span>';
            }
            return '';

        }
        function DepartmentFormatter(v) {
            var name = $('#hid-de option[value="' + v + '"]').text();
            if (name) {
                return '<span class="label label-info">' + name + '</span>';
            }
            return '';
        }
        function UserNameFormatter(v) {
            if (v) {
                return '<span class="label label-info">' + v + '</span>';
            } else {
                return '<span class="label label-warning">暂无账号</span>';

            }
        }
        function GenderFormatter(v) {
            var name = $('#hid-gender option[value="' + v + '"]').text();
            switch (v) {
                case 1:
                    return '<span class="label label-info">' + name + '</span>';
                case 2:
                    return '<span class="label label-danger">' + name + '</span>';
                default:
                    return '<span class="label label-info">' + name + '</span>';
            }
        }
        function StatementStateFormatter(v) {
            if (v==1) {
                return '<span class="label label-info">已开票</span>';
            } else {
                return '<span class="label label-warning">未开票</span>';

            }
        }
    </script>
}


<section style="display: none">
    <select id="hid-type">
        <option value=""></option>
    </select>

    @*@Html.DropDownList("hid-du", duty)
        @Html.DropDownList("hid-de", depart)
        @Html.DropDownList("hid-gender", gender)*@
</section>