@model DTO.OrderBanciDTO
|
@using DTO;
|
@using zhengcaioa.Models;
|
@{
|
|
|
|
|
}
|
@{
|
Layout = null;
|
}
|
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
<meta name="description" content="">
|
<meta name="author" content="ThemeBucket">
|
<title>@(SiteConfig.SiteName)</title>
|
<link href="~/css/bootstrap.min.css" rel="stylesheet">
|
<link href="~/css/font-awesome.min.css" rel="stylesheet">
|
<link href="~/css/animate.min.css" rel="stylesheet">
|
|
@*<link href="~/css/plugins/iCheck/custom.css" rel="stylesheet">*@
|
<link href="~/css/style.min.css" rel="stylesheet">
|
<link href="~/css/plugins/chosen/chosen.css" rel="stylesheet">
|
@*<link href="~/js/plugins/layer/skin/layer.css" rel="stylesheet">*@
|
@*<link href="~/css/plugins/datapicker/datepicker3.css" rel="stylesheet">*@
|
<link href="~/css/style.min.css" rel="stylesheet">
|
<link href="~/css/plugins/toastr/toastr.min.css" rel="stylesheet" />
|
<link href="~/css/plugins/webuploader/webuploader.css" rel="stylesheet" />
|
|
<style type="text/css">
|
.webuploader-pick {
|
position: relative;
|
display: inline-block;
|
cursor: pointer;
|
background: #00b7ee;
|
padding: 8px 14px 7px 14px;
|
color: #fff;
|
text-align: center;
|
border-radius: 3px;
|
overflow: hidden;
|
}
|
|
div.clearfix > label {
|
padding-top: 8px;
|
}
|
|
.chosen-container {
|
border-radius: 1px;
|
border: 1px solid #e5e6e7;
|
}
|
|
.col-md-1.control-label {
|
padding-right: 0px;
|
font-weight: 400;
|
}
|
|
|
|
.row {
|
display: flex;
|
padding-left: 20px;
|
}
|
|
.seat {
|
/* display: inline-block; */
|
width: 60px;
|
height: 45px;
|
text-align: center;
|
line-height: 45px;
|
border: 1px solid #ccc;
|
}
|
|
.available {
|
background-color: #eee;
|
}
|
|
.selected {
|
background-color: #00ff00;
|
}
|
|
.booked {
|
background-color: #ff0000;
|
}
|
|
#seat-map {
|
width: 100%;
|
}
|
</style>
|
|
<!-- jqgrid-->
|
@*<link href="~/css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet">*@
|
<script language="javascript" src="~/js/jquery.min.js" type="text/javascript"></script>
|
<script src="~/js/bootstrap.min.js"></script>
|
@*<script src="~/js/plugins/bootstro/bootstro.js"></script>*@
|
|
<!--容器-->
|
@*<script language="javascript" src="~/js/datehelper.js" type="text/javascript"></script>*@
|
@*<script language="javascript" src="~/js/plugins/query/jquery.query-object.js" type="text/javascript"></script>*@
|
@*<script language="javascript" src="~/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>*@
|
<script language="javascript" src="~/js/plugins/chosen/chosen.jquery.js" type="text/javascript"></script>
|
@*<script language="javascript" src="~/js/plugins/datapicker/bootstrap-datepicker.js" type="text/javascript"></script>*@
|
<script language="javascript" src="~/js/plugins/layer/layer.js" type="text/javascript"></script>
|
@*<script src="~/js/plugins/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>*@
|
@*<script src="~/js/plugins/jqgrid/i18n/grid.locale-cn.js" type="text/javascript"></script>*@
|
<script src="~/js/plugins/toastr/toastr.min.js" type="text/javascript"></script>
|
<script src="~/js/plugins/webuploader/webuploader.min.js"></script>
|
|
<script language="javascript" src="~/js/common-layout.js" type="text/javascript"></script>
|
<script src="~/js/plugins/layer/laydate/laydate.js" type="text/javascript"></script>
|
@*<script src="~/js/plugins/iTexbox/itextbox.js" type="text/javascript"></script>*@
|
@*<script src="~/js/plugins/iuploader/iuploader.js"></script>*@
|
<script src="~/js/TUJS.js"></script>
|
</head>
|
<body class="gray-bg" style="overflow:auto">
|
<form id="formtest">
|
<div class="wrapper wrapper-content" id="ibox-content" style="padding:15px;">
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5> <i class="fa fa-list"></i> 预留座位</h5>
|
</div>
|
<div id="div_content" class="ibox-content" style="background-color:white;">
|
<div class="row">
|
<input type="hidden" id="Id" name="Id" value="@Model.Id" />
|
<div id="seat-map">
|
<!-- 在这里生成座位图 -->
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="wrapper wrapper-content" style="margin-top:0px"></div>
|
<div class="ibox-content" id="top" style="z-index:100; position:fixed; height:50px; width:100%;bottom:0; text-align: right; padding-top:8px ">
|
<div class="" style="float:right;" data-bootstro-width="500px" data-bootstro-content="功能按钮：“保存”，“删除”">
|
|
|
<a class="btn btn-success Update" href="javascript:void(0)" onclick="savePosition();" style="margin-left: 4px; border-radius: 4px;">
|
<i class="glyphicon glyphicon-ok"></i> <span class="bold">提交</span>
|
</a>
|
</div>
|
</div>
|
|
</form>
|
<script type="text/javascript">
|
var hh = document.body.clientHeight - $('.ibox-title').height() - $("#top").height() * 2 - 95;
|
$("#div_content").height(hh);
|
|
toastr.options = {
|
"closeButton": true,
|
"debug": false,
|
"progressBar": true,
|
"positionClass": "toast-bottom-right",
|
"onclick": null,
|
"showDuration": "300",
|
"hideDuration": "600",
|
"timeOut": "4500",
|
"extendedTimeOut": "600",
|
"showEasing": "swing",
|
"hideEasing": "linear",
|
"showMethod": "fadeIn",
|
"hideMethod": "fadeOut"
|
};
|
|
|
var id = '@Model.Id';
|
|
|
|
|
// 保存岗位信息
|
var savePosition = function () {
|
|
|
var selectedSeats = $(".selected");
|
var selectedSeatNumbers = [];
|
selectedSeats.each(function () {
|
selectedSeatNumbers.push($(this).attr("id"));
|
});
|
console.log("选中的座位：" + selectedSeatNumbers.join(", "));
|
|
|
|
//if ($("#Shijian").val() == '') {
|
// toastr.warning("开始时间不能为空");
|
// return;
|
//}
|
|
//if ($("#Shijianend").val() == '') {
|
// toastr.warning("结束时间不能为空");
|
// return;
|
//}
|
|
//if ($.trim($("#Banci").val()) == '') {
|
// toastr.warning("班次不能为空");
|
// return;
|
//}
|
//if ($.trim($("#Mingcheng").val()) == '') {
|
// toastr.warning("名称不能为空");
|
// return;
|
//}
|
//if ($.trim($("#Renshu").val()) == '') {
|
// toastr.warning("人数不能为空");
|
// return;
|
//}
|
|
//if ($.trim($("#Didian").val()) == '') {
|
// toastr.warning("地点不能为空");
|
// return;
|
//}
|
|
|
|
|
|
|
|
var data = { Id: id, SeatID: selectedSeatNumbers };
|
$.ajax({
|
type: "POST",
|
url: "/OrderBanci/SaveLiuzuo",
|
dataType: "json",
|
global: false,
|
data: data,
|
success: function (data) {
|
|
|
|
if (data.Result) {
|
// parent._afterSave(true);
|
parent.layer.msg('成功保存', { icon: 6 });
|
//window.location = "/Project/add?id=" + data.ReturnID;
|
|
|
try {
|
_pageAutoClose();//自动关闭页面方法
|
}
|
catch (err) {
|
parent._CloseTab1("/OrderBanci/Liuzuo/");
|
}
|
|
}
|
else {
|
// toastr.error("失败");
|
parent.layer.msg(data.Message, { icon: 5 });
|
}
|
|
},
|
error: function () {
|
|
|
parent.layer.msg('失败', { icon: 5 });
|
}
|
});
|
}
|
|
|
|
|
|
|
function _pageAutoClose() {
|
parent.window._reloadPageData();
|
var index = parent.layer.getFrameIndex(window.name);
|
parent.layer.isRefresh = true;
|
parent.layer.closeAll('loading');
|
parent.layer.close(index);
|
return false;
|
}
|
var seatData = JSON.parse( '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.orderBanciZuoweiDTOs))');
|
|
|
// 生成座位图的逻辑
|
function generateSeatMap() {
|
var seatMap = $("#seat-map");
|
for (var row = 0; row < seatData.length; row++) {
|
var rowElement = $("<div class='row'></div>");
|
for (var seat = 0; seat < seatData[row].length; seat++) {
|
console.log(seatData[row])
|
var elrow = seatData[row][seat];
|
console.log(elrow)
|
|
var seatElement = $("<div class='seat' id='" + elrow.ZuoweiId+"' ></div>");
|
seatElement.text(elrow.SeatNo);
|
if (elrow.Status == 0) {//待售
|
seatElement.addClass("available");
|
seatElement.click(function () {
|
$(this).toggleClass("selected");
|
});
|
|
}
|
else if (elrow.Status == 2) {//预定
|
seatElement.addClass("available");
|
seatElement.addClass("selected");
|
seatElement.click(function () {
|
$(this).toggleClass("selected");
|
});
|
|
}
|
else {
|
seatElement.addClass("booked");
|
}
|
rowElement.append(seatElement);
|
}
|
seatMap.append(rowElement);
|
}
|
}
|
|
|
// 初始化
|
generateSeatMap();
|
|
</script>
|
</body>
|
</html>
|
