You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

651 lines
27 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../Content/css/bootstrap_table_mincss.css" rel="stylesheet" />
<link href="../../Content/css/bootstrap_mincss.css" rel="stylesheet" />
<link rel="stylesheet" href="../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../Content/css/bootstrap-table.min.css" />
<link href="../Content/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="../Content/css/radiocss/build.css">
<link href="../../Content/css/build.css" rel="stylesheet" />
<script src="../Content/js/jquery-3.3.1.min.js"></script>
<script src="../Content/js/bootstrap.min.js"></script>
<script src="../Content/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../Content/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../Content/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<style>
body, html {
height: 100%;
width: 100%;
font-family: "Microsoft YaHei";
overflow: hidden;
}
hr {
margin: 0;
height: 1px;
background: rgba(211,211,211,1);
}
.c_Title {
width: 100%;
height: 40px;
text-align: center;
}
.c_Title .c_Title_text {
font-size: 20px;
font-weight: 400;
line-height: 40px;
}
.c_ActionBar {
color: #444444;
font-size: 16px;
margin: 0;
}
.c_ActionBar .c_ActionBar_row {
height: 40px;
padding: 10px;
float: left;
}
.c_ActionBar .c_query_btn {
background-color: #00C7BA;
color: #FFFFFF;
font-size: 15px;
width: 90px;
}
.c_ActionBar label {
font-weight: 400;
margin-left: 10px;
}
.c_Main {
height: 100%;
width: 100%;
padding-bottom: 190px;
}
.c_Main .c_SaleOrders {
height: 100%;
width: 50%;
overflow-x: scroll;
overflow-y: hidden;
float: left;
border-right: solid 1px #D3D3D3;
}
.c_Main .c_SaleDetail {
width: 50%;
float: right;
height: 40%;
overflow-x: scroll;
overflow-y: hidden;
}
.c_Main .c_SaleMake {
width: 50%;
float: right;
height: 30%;
overflow-x: scroll;
overflow-y: hidden;
}
.c_Main .c_SalePay {
width: 50%;
float: right;
height: 30%;
overflow-x: scroll;
overflow-y: hidden;
}
.thisactive {
color: #FFFFFF;
background-color: #00C7BA;
border-color: #00C7BA;
}
.c_SaleOrderstr {
background-color: #E7EAF1;
}
.c_SaleDetailtr {
background-color: #E7EAF1;
}
.cause_item {
background-color: #E0E0E0;
color: #333333;
font-size: 20px;
margin: 5px;
padding: 10px 20px 10px 20px;
}
.cause_itemchecked {
background-color: #00C7BA;
color: #FFFFFF;
font-size: 20px;
margin: 5px;
padding: 10px 20px 10px 20px;
}
</style>
</head>
<body oncontextmenu="return false;" onselectstart="return false;">
<!--标头-->
<div class="c_Title">
<label class="c_Title_text ">销售流水</label>
<img class="Close" src="../images/Report/X@2x.png" height="15"width="15" style="float:right; margin:13px 20px 0 0;" />
</div>
<hr />
<!--操作栏-->
<div class="navbar c_ActionBar">
<div class="navbar-form">
<label style="margin-right:10px;">起止日期 :</label>
<div class="input-group date form_datetime" style="width:210px; border-radius:6px;" data-date="1979-09-16 05:25" data-date-format="yyyy-MM-dd HH:mm" timezone="GMT+8" data-link-field="startdate">
<input class="form-control startdate " size="16" style="background-color:#E7EAF1;border:0; " type="text" value="" readonly>
<span class="input-group-addon" style="background-color:#E7EAF1; border:0;"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="startdate" value="" />
<div class="input-group date form_datetime" style="width:210px;" data-date="1979-09-16 05:25" data-date-format="yyyy-MM-dd HH:mm" data-link-field="enddate">
<input class="form-control enddate" type="text" style="background-color:#E7EAF1; border:0;" size="16" value="" readonly>
<span class="input-group-addon" style="background-color:#E7EAF1; border:0;">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<input type="hidden" id="enddate" value="" />
<input class="form-control textno" type="text" placeholder="订单编号" />
<input class="form-control orderNo" style="width:80px;" type="text" placeholder="序号" />
<a class="btn btn-group c_query_btn Query" style="font-size:16px;">查询</a>
</div>
<div class="navbar-form ">
<label style="margin-right:10px;">营业模式 :</label>
<div class="radio radio-success radioordertype" name="全部">
<input id="1" type="radio" name="ordertype" value="全部" t checked="checked" /><label for="1" class="c_ordertype_text">全部</label>
</div>
<div class="radio radio-success radioordertype" name="堂食">
<input id="2" name="ordertype" type="radio" value="堂食" /><label for="2" class="c_ordertype_text">堂食</label>
</div>
<div class="radio radio-success radioordertype" name="外带">
<input id="3" name="ordertype" type="radio" value="外带" /><label for="3" class="c_ordertype_text">外带</label>
</div>
<div class="radio radio-success radioordertype" name="电话外卖">
<input id="4" name="ordertype" type="radio" value="电话外卖" /><label for="4" class="c_ordertype_text">电话外卖</label>
</div>
<div class="radio radio-success radioordertype" name="美团外卖">
<input id="5" name="ordertype" type="radio" value="美团外卖" /><label for="5" class="c_ordertype_text">美团外卖</label>
</div>
<div class="radio radio-success radioordertype" name="饿了么">
<input id="6" name="ordertype" type="radio" value="饿了么" /><label for="6" class="c_ordertype_text">饿了么</label>
</div>
<div class="radio radio-success radioordertype" name="百度外卖">
<input id="7" name="ordertype" type="radio" value="百度外卖" /><label for="7" class="c_ordertype_text">百度外卖</label>
</div>
<div class="radio radio-success radioordertype" name="微信点餐">
<input id="8" name="ordertype" type="radio" value="微信点餐" /><label for="8" class="c_ordertype_text">微信点餐</label>
</div>
</div>
<div class="navbar-form" style="margin-left:10px;">
<div class="btn-group datetype">
<button type="button" style="font-size:16px;" class="btn btn-default">今天</button>
<button type="button" style="font-size:16px;" class="btn btn-default">昨天</button>
<button type="button" style="font-size:16px;" class="btn btn-default">前一天</button>
<button type="button" style="font-size:16px;" class="btn btn-default">本周</button>
<button type="button" style="font-size:16px;" class="btn btn-default">上周</button>
<button type="button" style="font-size:16px;" class="btn btn-default">本月</button>
<button type="button" style="font-size:16px;" class="btn btn-default">上月</button>
</div>
<a class="btn btn-group navbar-right c_repairprint_btn" style="background-color:#10AFE3;color:rgb(255, 255, 255);width:90px; margin-left:5px;margin-right:5px; font-size:16px;">补打</a>
<a class="btn btn-group navbar-right c_chargeback_btn" style="background-color:#F45B63; color:rgb(255, 255, 255);width:90px; font-size:16px;" data-toggle="modal">退单</a>
</div>
</div>
<!--内容-->
<div class="c_Main">
<div class="c_SaleOrders">
<div style="width:1300px; height:100%; margin-left:-25px;">
<table id="salemain" data-response-handler="responseHandler" class="table table-bordered" >
<thead>
<tr>
<th></th>
<th data-formatter="rowIndexFormat"></th>
<th data-field="no">订单号</th>
<th data-field="orderNo" data-align="center">序号</th>
<th data-field="workNo" data-align="center">工号</th>
<th data-field="type" data-align="center" data-formatter="OrderType">营业模式</th>
<th data-field="workNo" data-align="center">人数</th>
<th data-field="people" data-align="center" data-formatter="Intformatting">消费金额</th>
<th data-field="discountTotal" data-align="center" data-formatter="Intformatting">优惠金额</th>
<th data-field="receivable" data-align="center" data-formatter="Intformatting">应收金额</th>
<th data-field="maling" data-align="center" data-formatter="Intformatting">抹零金额</th>
<th data-field="paid" data-align="center" data-formatter="Intformatting">实收金额</th>
<th data-field="status" data-align="center" data-formatter="OrderState">单据状态</th>
<th data-field="tableNo" data-align="center">桌台</th>
<th data-field="saleDate" data-align="center" data-formatter="dateformatting">创建时间</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="c_SaleDetail">
<div style="width:1500px; height:100%;">
<table id="c_SaleDetail" data-response-handler="responseHandler" class="table table-bordered">
<thead>
<tr>
<th data-formatter="rowIndexFormat" data-align="center"></th>
<th data-field="productNo" data-align="center">商品编号</th>
<th data-field="productName" data-align="center">商品名称</th>
<th data-field="specName" data-align="center">规格名</th>
<th data-field="productUnitName" data-align="center">商品单位</th>
<th data-field="typeName" data-align="center">类别</th>
<th data-field="count" data-align="center" data-formatter="Intformatting">数量</th>
<th data-field="rcount" data-align="center" data-formatter="Intformatting">退菜数量</th>
<th data-field="priceOrg" data-align="center" data-formatter="Intformatting">销售价格</th>
<th data-field="discountPrice" data-align="center" data-formatter="Intformatting">折后价格</th>
<th data-field="discountTotal" data-align="center" data-formatter="Intformatting">优惠总额</th>
<th data-field="receivable" data-align="center" data-formatter="Intformatting">应收总额</th>
<th data-field="" data-align="center" data-formatter="OrderProductRowState">是否套餐</th>
<th data-field="finishDate" data-align="center" data-formatter="dateformatting">销售时间</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="c_SaleMake">
<div style="width:1000px;height:100%;">
<table id="c_SaleMake" class="table table-bordered">
<thead>
<tr>
<th data-formatter="rowIndexFormat"></th>
<th data-field="makeName">做法描述</th>
<th data-field="addPrice">做法加价</th>
<th data-field="qtyFlag" data-formatter="Intformatting">数量</th>
<th data-field="rcount" data-formatter="Intformatting">退数量</th>
<th data-field="addTotal" data-formatter="Intformatting">加价总额</th>
<th data-field="discountAddTotal" data-formatter="Intformatting">优惠总额</th>
<th data-field="receivableAmount" data-formatter="Intformatting">应收金额</th>
<th data-field="hand" data-formatter="isMakehand">是否手写</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="c_SalePay">
<div style="width:1200px; height:100%;">
<table id="c_SalePay" class="table table-bordered">
<thead>
<tr>
<th data-formatter="rowIndexFormat"></th>
<th data-field="orderId">支付单号</th>
<th data-field="prePayNo">支付方式编码</th>
<th data-field="payType">支付名称</th>
<th data-field="paidAmount" >实收金额</th>
<th data-formatter="PayMoney">应收金额</th>
<th data-field="rchange" >找零金额</th>
<th data-field="overAmount">溢出金额</th>
<th data-field="voucherNo">凭证号</th>
<th data-field="cardno">卡号</th>
<th data-field="cardFaceNo">卡面号</th>
<th data-field="memo">备注</th>
<th data-field="payDate" data-formatter="dateformatting">支付日期</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!--背景遮盖-->
<div class="modal fade" id="causeshow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style=" height: 500px; width: 480px;">
<div style="height:50px; background-color:#F3F3F3; border-bottom: solid 1px #ECECEC; border-radius:5px; ">
<h4 class="modal-title text-center" style="font-size:20px; line-height:50px;" id="myModalLabel">
请选择退单原因
</h4>
</div>
<div class="modal-body">
<div style="height:100% ;width:100%; padding:10px;">
<div class=" " style="height:250px;">
<div class="btn btn-group cause_item">有异物</div>
<div class="btn btn-group cause_item">出品慢</div>
<div class="btn btn-group cause_item">其他原因</div>
</div>
<div class="text-center " style="margin:0px,5px,20px,5px; margin-bottom:20px;">
<div style="border-radius:5px; border:solid 1px #D0D0D0; padding:10px;">
<input class="txtcause" style="width:100%; font-size: 18px; padding:10px;border:0;outline-color:#F3F3F3 ;outline-style:solid;outline-width:0; " placeholder="请输入其他原因" value="" />
</div>
</div>
<div class="text-center" style="margin-bottom:20px;">
<div class="btn btn-group CauseShowClose " style="background-color:#999999; font-size:22px; width:186px; color:#F3F3F3; margin-right:15px;">
取消
</div>
<div class="btn btn-group CauseShowOk" style="background-color:#00C7BA; font-size:22px;width:186px; color:#F3F3F3;">
确认
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
net.Init();
//初始化日期控件
$('.form_datetime').datetimepicker({
language: 'zh-CN', //控件语言
weekStart: 1,//一周从哪一天开始0星期日到6星期六默认从0开始 Integer类型
todayBtn: true,//开启选择今天的按钮,Boolean, “linked”类型 默认值false,如果此值为true 或 “linked”则在日期时间选择器组件的底部显示一个 “Today” 按钮用以选择当前日期。
autoclose: true,//选择之后,自动关闭时间弹框 Boolean类型 默认值false
todayHighlight: true,//今天日期高亮显示 如果为true, 高亮当前日期。Boolean类型 ,默认值false
startView: 2,
forceParse: true,//强制性设置日期格式转换成format格式 就是你输入的可能不正规但是它胡强制尽量解析成你规定的格式format默认为true
showMeridian: 1,
initialDate: new Date(),// 初始化日期时间,在打开时默认选当时的时间显示在View中。默认值new Date() Date or String类型
showMeridian: 0, //显示上午或下午
});
//点击查询
$('.Query').on('click', function () {
// $('.ordertype input:radio:checked').val();
var _enddate = $('#enddate').val();
var _startdate = $('#startdate').val();
var _textno = $('.textno').val();
var _orderNo = $('.orderNo').val();
net.Query(_enddate, _startdate, _textno, _orderNo);
})
//选中日期规格
$(".datetype button").on('click', function () {
$(".datetype button").removeClass("thisactive");
$(this).addClass("thisactive");
var _name = $(this).html();
net.SelectDate(_name);
})
//关闭窗口
$('.Close').on('click', function () {
net.CloseForm();
})
//选择营业模式
$('.radioordertype').on('click', function () {
var _type = $(this).attr("name");
net.Query("", "", "", "", _type);
})
//退款按钮
$('.c_chargeback_btn').on('click', function () {
var _row = $('#salemain').bootstrapTable('getSelections');
if (_row.length != 1) {
alert("请选择数据!");
return;
}
net.backTicket(_row[0].no, _row[0].finishDate);
});
//退菜原因窗口确定
$('.CauseShowOk').on('click', function () {
$("#causeshow").modal('hide');
var _txt = $('.cause_itemchecked').html();
if (_txt == null) {
_txt = $('.txtcause').val();
}
var _row = $('#salemain').bootstrapTable('getSelections');
if (_row.length != 1) {
alert("请选择数据!");
return;
}
var _no = _row[0].no;
net.RefundOrder(_no, _txt);
});
//退菜原因窗口关闭
$('.CauseShowClose').on('click', function () {
$("#causeshow").modal('hide');
})
//打印单据
$('.c_repairprint_btn').on('click', function () {
var _row = $('#salemain').bootstrapTable('getSelections');
if (_row.length != 1) {
alert("请选择数据!");
return;
}
var _no = _row[0].no;
net.TicketPrint(_no);
});
//选择原因项
$('.cause_item').on('click', function () {
$('.cause_item').removeClass('cause_itemchecked');
$(this).addClass('cause_itemchecked');
})
});
function CauseViewshow() {
$("#causeshow").modal('show');
}
//初始化日期控件值
function initialDate(data) {
var _data = JSON.parse(data);
$(".startdate").val(_data.startdate);
$(".enddate").val(_data.enddate);
}
//set orders
function SetSaleMainView(data) {
try {
$('#salemain').bootstrapTable("destroy");
var boottable = null;
//初始化 bootstrap-table
//=========================
boottable = $('#salemain').bootstrapTable({
data: eval(data),
height: $(".c_SaleOrders").height(),
sidePagination: 'client',
pagination: false,
clickToSelect: true,
singleSelect: true,
rowStyle: rowStyle,//通过自定义函数设置行样式
columns: [{ checkbox: true }],
onClickRow: function (_data, rows, index) {
net.GetSaleOrder(_data.no);
},
formatNoMatches: function () {
return "";
}
})
} catch (e) {
alert(e);
}
}
//set detail
function SetSaleDetailView(deteil) {
try {
$('#c_SaleDetail').bootstrapTable("destroy");
if (deteil == null) {
return;
}
$('#c_SaleDetail').bootstrapTable({
data: eval(deteil),
height: $(".c_SaleDetail").height(),
sidePagination: 'client',
pagination: false,
fixedColumns: true,
formatNoMatches: function () {
return "";
}
});
} catch (e) {
alert(e);
}
}
function SetSalePayView(pay) {
try {
$('#c_SalePay').bootstrapTable('destroy');
if (pay == null) {
return;
}
$('#c_SalePay').bootstrapTable({
data: eval(pay),
height: $(".c_SalePay").height(),
sidePagination: 'client',
pagination: false,
fixedNumber: 5,
formatNoMatches: function () {
return "";
}
});
} catch (e) {
alert(e);
}
}
function SetSaleMakeView(make) {
try {
$('#c_SaleMake').bootstrapTable('destroy');
if (make == null) {
return;
}
$('#c_SaleMake').bootstrapTable({
height: $(".c_SaleMake").height(),
data: eval(make),
sidePagination: 'client',
pagination: false,
formatNoMatches: function () {//无数据 提示
return "";
},
formatLoadingMessage: function () {//加载提示
return "请稍等,正在加载中。。。";
}
});
} catch (e) {
alert(e);
}
}
/**
* bootstrap table
*/
//时间格式话
function dateformatting(value) {
if (value != null && value != "") {
return value.replace('T', ' ').substring(0, 19);
}
}
//订单类型
function OrderType(value, rows, index) {
var _txt = "";
switch (rows.type) {
case 0:
_txt = "堂食";
break;
case 1:
_txt = "外带";
break;
case 2:
_txt = "电话外卖";
break;
case 3:
_txt = "餐桌";
break;
case 4: _txt = "美团外卖";
brea
k;
case 5:
_txt = "饿了么";
break;
case 6:
_txt = "百度外卖";
break;
case 7:
_txt = "微信点餐";
break;
default:
}
return _txt;
}
//数据类型转换
function Intformatting(value, rows, index) {
var _val = parseInt(value);
if (_val == null) {
return value;
} else {
return _val.toFixed(2)
}
}
//订单状态
function OrderState(value, rows, index) {
var _txt = "";
switch (rows.status) {
case -1: _txt = "新建单";
break;
case 0: _txt = "等待付款";
break;
case 1: _txt = "已支付";
break;
case 2: _txt = "已退单";
break;
case 3: _txt = "已取消";
break;
case 4: _txt = "已完成";
break;
case 5: _txt = "部分退款";
break;
default: _txt = "未知状态";
break;
}
return _txt;
}
//行号
function rowIndexFormat(value, rows, index) {
return index + 1;
}
//状态样式
function rowStyle(row, index) {
if (row.status == 2) {
return {
css: { 'color': 'red' }
}
} else {
return {};
}
}
</script>
</body>
</html>