Yezb
/
ss_new_ui_skin_and_page


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143
							<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日历拖拽</title>
<css.ss file="/ss/fullcalendar/main_.css"/>
<css.ss file="/ss/fullcalendar/fullcalendar.css"/>
<css.ss file="/ss/fullcalendar/jquery-ui.css"/>
<%-- 必须去掉，会导致下拉列表出不来(变成录入框)。Lin
		    与编译时加入的 /ss/jquery/jquery.js 版本为 v1.11.2
		    /ss/fullcalendar/jquery.js 版本为 v1.9.1
<js@ss file="/ss/fullcalendar/jquery.js"/>
--%>
<js.ss file="/ss/fullcalendar/jquery-ui.js"/>
<js.ss file="/ss/fullcalendar/fullcalendar.js"/>
<style type="text/css">
		/* 原main.css部分,无需理会 */
		.icon-doc {
				width: 22px;
				height: 40px;
				display: inline-block;
				vertical-align: middle;
				background: url(/skin/easy/image/list-icon.png) center center no-repeat;
				float: left;
				margin-right: 6px;
		}
		.box {
				border: 1px solid #a9c5e1;
				box-sizing: border-box;
				border-radius: 3px;
				font-size: 18px;
				color: #4c4c4c;
		}
		.dragList-div {
				overflow: hidden;
		}
		.dragList-div .box {
				overflow: hidden;
				width: 48.5%;
				box-sizing: border-box;
		}
		.dragList-div .box:first-child {
				float: left;
				margin-left: 7px;
		}
		.dragList-div .box:last-child {
				float: right;
				margin-right: 7px;
		}
		.list-div {
				position: relative;
				overflow: auto;
				box-sizing: border-box;
		}
		.list {
				font-size: 14px;
				color: #000;
		}
		.list:nth-child(odd) {
				background-color: #ffffff;
		}
		.list:nth-child(even) {
				background-color: #fafafa;
		}
		span.list:hover {
				background-color: #c7e3fc;
		}
		div.list:hover {
				background-color: #c7e3fc;
		}
		.list a {
				color: #000;
		}
		table.list {
				width: calc(100% - 60px) !important;
				height: auto;
				border-collapse: separate;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				border-spacing: 0px;
				overflow: hidden;
				box-sizing: border-box;
				border: 1px solid #e0e0e0;
				margin-left: 30px;
		}
		.list tr {
				height: 40px;
		}
		.list tr:nth-child(odd) {
				background-color: #ffffff;
		}
		.list tr:nth-child(even) {
				background-color: #fafafa;
		}
		.list th {
				background-color: #6c9ed7;
				font-size: 14px;
				height: 40px;
				padding: 0px 30px 0px 12px;
				color: #fff;
				min-width: 50px;
				max-width: 250px;
				text-align: left;
				border-right: 1px solid #f2f2f2;
				box-sizing: border-box;
				word-break: break-word;
				vertical-align: middle;
				position: relative;
		}
		.list th:last-child {
				border-right: none;
		}
		.list tr td {
				font-size: 14px;
				color: #747474;
				box-sizing: border-box;
				word-break: break-word;
				position: relative;
				line-height: 42px;
				overflow: hidden;
				font-weight: normal;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding: 0px 30px 0px 12px;
				border-right: 1px solid #f2f2f2;
				vertical-align: middle;
				max-width: 370px;
		}
		.list tr td:last-child {
				border-right: none;
		}
		/*闭合文件夹样式*/
		.list-highlight {
				color: #2b368f;
				font-size: 14px;
		}
		/* 次要的（待办列表灰色时间） */
		.list-smallDim {
				color: #969696;
				font-size: 12px;
				display: inline-block;
				vertical-align: middle;
				box-sizing: border-box;
				height: 40px;
				cursor: url(image/cur.ico), default !important;
		}
		.label {
				margin: 0;
				background-color: #6c9ddb;
				text-indent: 15px;
				height: 42px;
				text-overflow: ellipsis;
				box-sizing: border-box;
				overflow: hidden;
				white-space: nowrap;
				vertical-align: middle;
				font-weight: bold;
				color: #fff;
				line-height: 42px;
				font-size: 16px;
				position: relative;
		}
		 /* 原main.css部分结束,无需理会 */

		.container{
				width: 100%;
				height: 100%;
				display: flex;
				gap: 20px;
				justify-content: center;
				align-items: center;
		}
		#calendar {
				width: 960px;
				margin-top: 20px;
				/* margin: 20px auto 10px auto; */
				float: left;
		}

		.fancy {
				width: 450px;
				height: auto
		}

		.fancy h3 {
				height: 30px;
				line-height: 30px;
				border-bottom: 1px solid #d3d3d3;
				font-size: 14px
		}

		.fancy form {
				padding: 10px
		}

		.fancy p {
				height: 28px;
				line-height: 28px;
				padding: 4px;
				color: #999
		}

		.input {
				height: 20px;
				line-height: 20px;
				padding: 2px;
				border: 1px solid #d3d3d3;
				width: 100px
		}

		.btn {
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				padding: 5px 12px;
				cursor: pointer
		}

		.btn_ok {
				background: #360;
				border: 1px solid #390;
				color: #fff
		}

		.btn_cancel {
				background: #f0f0f0;
				border: 1px solid #d3d3d3;
				color: #666
		}

		.btn_del {
				background: #f90;
				border: 1px solid #f80;
				color: #fff
		}

		.sub_btn {
				height: 32px;
				line-height: 32px;
				padding-top: 6px;
				border-top: 1px solid #f0f0f0;
				text-align: right;
				position: relative
		}

		.sub_btn .del {
				position: absolute;
				left: 2px
		}
		#menu {
				position: absolute;
				height: auto;
				display: none;
				z-index:99999999999;
				padding: 5px 5px;
				overflow: auto hidden;
				outline: none;
				box-shadow: 4px 4px 9px rgba(0, 0, 0, .13);
				box-sizing: border-box;
				background-color: #fff;
				border-left: 1px solid #e1e1e1;
				border-right: 1px solid #e1e1e1;
				border-bottom: 1px solid #e1e1e1;
		}
		.popList{
				width: 60px;
				height: 100%;
		}
		.active:hover{
				background: rgba(107, 159, 211);
				color: #fff;
		}


		/* 拖拽时的样式 */
		.drag-helper {
				padding: 5px 10px;
				background: #4a90e2;
				color: white;
				border-radius: 3px;
				z-index: 9999;
				position: fixed;
				pointer-events: none;
		}

		/* 日历事件样式 */
		.fc-event {
				background-color: #4a90e2 !important;
				border: none !important;
				color: white !important;
				padding: 2px 5px !important;
				border-radius: 3px !important;
				margin: 1px 2px !important;
		}

		/* 日期单元格高亮样式 */
		.fc-highlight {
				background: #e8f0fe !important;
		}

		/* 拖拽项样式 */
		.staff-list li {
				cursor: move;
		}

		/* 保存按钮样式 */
		.save-button {
				/* position: fixed;
				bottom: 20px;
				right: 20px; */
				margin: 0 10px;
				padding: 10px 20px;
				background-color: #4a90e2;
				color: white;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				font-size: 16px;
				box-shadow: 0 2px 4px rgba(0,0,0,0.2);
				transition: all 0.3s ease;
		}
		.save-button:hover {
				background-color: #357abd;
				box-shadow: 0 4px 8px rgba(0,0,0,0.2);
		}

		/* 事件悬停样式 */
		.fc-event {
				position: relative;
		}

		.delete-btn {
				display: none;
				position: absolute;
				right: 2px;
				top: 50%;
				transform: translateY(-50%);
				color: #fff;
				width: 16px;
				height: 16px;
				line-height: 16px;
				text-align: center;
				cursor: pointer;
				font-size: 14px;
				transition: all 0.2s;
				z-index: 10;
		}

		.fc-event:hover .delete-btn {
				display: block;
		}

		.fc-event:hover .delete-btn:hover {
				color: #e74c3c;
				transform: translateY(-50%) scale(1.2);
		}

		/* 删除确认弹窗样式 */
		.delete-confirm {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: white;
				padding: 20px;
				border-radius: 8px;
				box-shadow: 0 2px 10px rgba(0,0,0,0.1);
				z-index: 1000;
				display: none;
		}

		.delete-confirm .buttons {
				margin-top: 15px;
				text-align: right;
		}

		.delete-confirm button {
				padding: 5px 15px;
				margin-left: 10px;
				border-radius: 4px;
				cursor: pointer;
				border: none;
		}

		.delete-confirm .confirm {
				background: #e74c3c;
				color: white;
		}

		.delete-confirm .cancel {
				background: #f0f0f0;
				color: #333;
		}
</style>
</head>
<body>
	<div class="container">
		<div id="calendar" >
			<menu id="menu">
				<ul class="popList">
				</ul>
			</menu>
		</div>
		<div id="datass" style="display: none;">
		</div>
		<div style="display: flex;flex-direction: column;gap: 20px;">
			<div  class="dragList-div">
<%-- Start 来自 rcjhRc_ddpZbAdd.ss.jsp。Lin
		 去掉 wsbf.js 里的 searchBm(this)，直接用 findbm()
		    wsbf.js 里的 searchBm(this)：
		       findbm();
			     selectedClass(_obj, bmSelectButton); --%>
				<div style="float:right;">
<%-- 增加，增加群组。Lin --%>
					<input id="qzid" name="qzid" type="hidden" value="${bmid}" onchange="findQz()"/>
					<input name="qzName" type="text" placeholder="群组" style="width: 118px"/>
					<objp.ss name="qz" cb="qz" inp="true"/>
<%-- --%>
					<input type="hidden" id="data" name="" value="${dataType}">
					<input id="bmid" name="bmid" type="hidden" value="${bmid}" onchange="findbm()"/> <%-- ="searchBm(this)"。Lin --%>
					<input name="bmName" type="text" placeholder="部门" style="width: 118px"/>
					<objp.ss name="bm" cb="bm" inp="true"/>
				</div>
<%-- End 来自 rcjhRc_ddpZbAdd.ss.jsp。Lin --%>
				<div class="box" style="width: 300px;">
					<p class="label">可选人员</p>
					<div class="list-body" style="position: relative;overflow-x: hidden;width: 100%;height: 380px;">
						<div id="ddpOption" class="scrollbar" style="height: 100%; overflow-y: auto; outline: none;" tabindex="2">
<%-- 去掉，改为动态插入。Lin
							<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
								<span class="icon-doc"></span>
								<div data-id="1" class="list"><span>陈明宝</span></div>
							</div>
							<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
								<span class="icon-doc"></span>
								<div data-id="2" class="list"><span>尤国君</span></div>
							</div>
							<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
								<span class="icon-doc"></span>
								<div data-id="3" class="list"><span>郑华姐</span></div>
							</div>
							<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
								<span class="icon-doc"></span>
								<div data-id="4" class="list"><span>张仕完</span></div>
							</div>
							<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
								<span class="icon-doc"></span>
								<div data-id="5" class="list"><span>郑锦通</span></div>
							</div>
							<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
								<span class="icon-doc"></span>
								<div data-id="6" class="list"><span>林晓东</span></div>
							</div>
--%>
						</div>
					</div>
				</div>
				<button class="save-button" onclick="saveSchedule()">保存排班表</button>
			</div>
		</div>
	</div>

	<!-- 删除确认弹窗 -->
	<div class="delete-confirm">
		<p>确定要删除这天的排班吗？</p>
		<div class="buttons">
			<button class="cancel" onclick="cancelDelete()">取消</button>
			<button class="confirm" onclick="confirmDelete()">确定</button>
		</div>
	</div>
</body>
<script>
	// 查询群组。Lin
	// 抄自 findbm()
	function findQz() {
//	initColumn();	// 去掉，没有了。不用先选中。Lin
//	var xm = $("#xm").val();	// 再去掉，没有 <input id=xm。Lin
		var qzid = $("#qzid").val();
//	var ryid=$("#ryid").val();	// 再去掉，没用到了 -- 去掉人员下拉选择了。Lin
//	console.info("xm:" + xm); //"bfsb_cx"	// 再去掉，没有 <input id=xm。Lin
		$.ajax({
			url: "<serv.ss name='rcjhRc_selRyOptByQzid'/>",
			type: "post",
			data: {
				qzid: qzid
/* 再去掉，没用到了 -- 去掉人员下拉选择了。Lin
				mc: xm,
				type: "bm",
				ryid: ryid
*/
			},
			dataType: "json",
			async: false,
			success: function (data) {
				insOptList(data.ryList);
			}
		})
	}

	// 抄自 rcjhRc_ddpZbAdd.ss.jsp 里的 findbm()。Lin
	//"查询部门"
	function findbm() {
//		initColumn();	// 去掉，没有了。不用先选中。Lin
//	var xm = $("#xm").val();	// 再去掉，没有 <input id=xm。Lin
		var bmid = $("#bmid").val();
//	var ryid=$("#ryid").val();	// 再去掉，没用到了 -- 去掉人员下拉选择了。Lin
//	console.info("xm:" + xm); //"bfsb_cx"	// 再去掉，没有 <input id=xm。Lin
		$.ajax({
			url: "<serv.ss name='rcjhRc_selRyOptByBmid'/>",	// :"pb_bd_zbap_findBm"。Lin
			type: "post",
			data: {
				bmid: bmid
/* 再去掉，没用到了 -- 去掉人员下拉选择了。Lin
				mc: xm,
				type: "bm",
				ryid:ryid
*/
			},
			dataType: "json",
			async: false,
			success: function(data) {
/* 去掉，抽取到 insOptList(，与 findQz( 共用。Lin
/// * 改，适配月排班。Lin
 //			console.info("ok<<<");
 //			console.info("ld:" + data.ryList.length);
 //			//console.info("come in");
 //			//console.info("ryids长度："+ryids.length);
 //			$("#ryList").remove();
 //			var box = '<div class="column" style="width:210px;height:75%;overflow:auto" id="ryList" tdname="1"><p class="label">可选</p></div>';
 //			$("#thirth").append(box);
 //			var divbox = ""
 //			for(var j = 0; j < data.ryList.length; j++) {
 //				divbox += '<div class="item" style="min-height: 41px;line-height: 41px;width: 100%;margin:auto;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" name="bfsb" onMouseDown="pd(this);" onmousemove="mouse(this)"><span class="icon-unchecked icons"  style="display: inline-block; width: 28px; height: 40px; float: left;"></span><span class="icon-doc"></span><h3>' + data.ryList[j].xm + '</h3><input type="hidden" value="' + data.ryList[j].ryid + '"/></div>';
 //			}
 //			console.log(divbox);
 //			$("#ryList").append(divbox);
/// *
				var divbox = ""
				for(var j = 0; j < data.ryList.length; j++) {
					divbox += '<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">'+
							'<span class="icon-doc"></span>'+
							'<div data-id="'+ data.ryList[j].ryid +'" class="list"><span>'+ data.ryList[j].xm +'</span></div></div>';
				}
				$("#ddpOption").append(divbox);
///// 增加，从外面移进来 -- 改为动态加载了。Lin
				// 初始化人员列表的拖拽
				$('.list-background').each(function() {

/// 再增加，解决跨月保存问题。Lin
					// 设置data属性，这些会被FullCalendar用来创建事件
					var staffId = $(this).find(".list").data("id");
					var staffName = $(this).find(".list span").text();

					$(this).data({
						event: {
							title: staffName,
							staffId: staffId,
							allDay: true,
							stick: true, // 保持事件在视图切换时不消失
							color: "#4a90e2",
						},
					});
///

					$(this).draggable({
						zIndex: 999,
						revert: true,
						revertDuration: 0,
						helper: function(event) {
/// * 再改，解决跨月保存问题。Lin
 //						var name = $(this).find('.list span').text();
 //						return $('<div>')
 //								.text(name)
/// *
							return $('<div>').text(staffName)

									.css({
										'background': '#4a90e2',
										'color': 'white',
										'padding': '5px 10px',
										'border-radius': '3px',
										'position': 'absolute',
										'width': 'auto',
										'height': 'auto',
										'line-height': 'normal',
										'font-size': '14px',
										'white-space': 'nowrap'
									});
						},
						appendTo: 'body',
						cursor: 'move',
						cursorAt: { left: 20, top: 15 },
						start: function(e, ui) {
							$(ui.helper).css('z-index', 9999);
						}
					});
				});

/// 再增加，解决跨月保存问题。Lin
				// 处理日历单元格的拖放
				$(".fc-day").droppable({
					drop: function (event, ui) {
						console.log("cell drop");
						// 保存拖放的目标日期到拖拽源元素
						var date = $(this).data("date");
						$(ui.draggable).data("drop-date", date);
					},
				});
///
/////
*/			insOptList(data.ryList);
			}
		})
	}


	// 增加，从 findbm() 里抽取出来 -- 与 findQz() 共用。Lin
	function insOptList(ryList) {
/* 改，适配月排班。Lin
		console.info("ok<<<");
		console.info("ld:" + data.ryList.length);
		//console.info("come in");
		//console.info("ryids长度："+ryids.length);
		$("#ryList").remove();
		var box = '<div class="column" style="width:210px;height:75%;overflow:auto" id="ryList" tdname="1"><p class="label">可选</p></div>';
		$("#thirth").append(box);
		var divbox = ""
		for(var j = 0; j < data.ryList.length; j++) {
			divbox += '<div class="item" style="min-height: 41px;line-height: 41px;width: 100%;margin:auto;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" name="bfsb" onMouseDown="pd(this);" onmousemove="mouse(this)"><span class="icon-unchecked icons"  style="display: inline-block; width: 28px; height: 40px; float: left;"></span><span class="icon-doc"></span><h3>' + data.ryList[j].xm + '</h3><input type="hidden" value="' + data.ryList[j].ryid + '"/></div>';
		}
		console.log(divbox);
		$("#ryList").append(divbox);
*/
		var divbox = ""
		for(var j = 0; j < ryList.length; j++) {	//  < data.ryList.。Lin
			divbox += '<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">'+
					'<span class="icon-doc"></span>'+
					'<div data-id="'+ ryList[j].ryid +'" class="list"><span>'+ ryList[j].xm +'</span></div></div>';	// + data.ryList[j].。Lin
		}
		$("#ddpOption").append(divbox);
///// 增加，从外面移进来 -- 改为动态加载了。Lin
		// 初始化人员列表的拖拽
		$('.list-background').each(function() {

/// 再增加，解决跨月保存问题。Lin
			// 设置data属性，这些会被FullCalendar用来创建事件
			var staffId = $(this).find(".list").data("id");
			var staffName = $(this).find(".list span").text();

			$(this).data({
				event: {
					title: staffName,
					staffId: staffId,
					allDay: true,
					stick: true, // 保持事件在视图切换时不消失
					color: "#4a90e2",
				},
			});
///

			$(this).draggable({
				zIndex: 999,
				revert: true,
				revertDuration: 0,
				helper: function(event) {
/* 再改，解决跨月保存问题。Lin
							var name = $(this).find('.list span').text();
							return $('<div>')
									.text(name)
*/						return $('<div>').text(staffName)
							.css({
								'background': '#4a90e2',
								'color': 'white',
								'padding': '5px 10px',
								'border-radius': '3px',
								'position': 'absolute',
								'width': 'auto',
								'height': 'auto',
								'line-height': 'normal',
								'font-size': '14px',
								'white-space': 'nowrap'
							});
				},
				appendTo: 'body',
				cursor: 'move',
				cursorAt: { left: 20, top: 15 },
				start: function(e, ui) {
					$(ui.helper).css('z-index', 9999);
				}
			});
		});

/// 再增加，解决跨月保存问题。Lin
		// 处理日历单元格的拖放
		$(".fc-day").droppable({
			drop: function (event, ui) {
				console.log("cell drop");
				// 保存拖放的目标日期到拖拽源元素
				var date = $(this).data("date");
				$(ui.draggable).data("drop-date", date);
			},
		});
///
/////
	}


		// 模拟接口数据
/* 改。Lin
 * date 改为 rq，staffId 改为 fzryid，staffName 改为 xm
const mockScheduleData = [
	{ date: '2025-05-15', staffId: '1', staffName: '陈明宝' },
	{ date: '2025-06-20', staffId: '2', staffName: '尤国君' },
	{ date: '2025-07-05', staffId: '3', staffName: '郑华姐' },
	{ date: '2025-05-10', staffId: '4', staffName: '张仕完' },
	{ date: '2025-05-20', staffId: '6', staffName: '林晓东' },
	{ date: '2025-06-15', staffId: '6', staffName: '林晓东' },
	{ date: '2025-06-25', staffId: '6', staffName: '林晓东' },
	{ date: '2025-07-10', staffId: '6', staffName: '林晓东' },
	{ date: '2025-07-15', staffId: '6', staffName: '林晓东' },
	{ date: '2025-07-20', staffId: '6', staffName: '林晓东' },
	{ date: '2025-07-25', staffId: '6', staffName: '林晓东' },
	{ date: '2025-08-05', staffId: '6', staffName: '林晓东' },
]; */
/* 再去掉，直接赋值到新加的 historySchedules -- 解决跨月保存问题。Lin
var mockScheduleData = $@{zbapList};
*/

// "调整了：存储所有历史数据的变量"(小许)。增加，解决跨月保存问题。Lin
let historySchedules = ${zbapList};	// = []。Lin

// 模拟API调用
/* 再去掉，直接赋值到 historySchedules 了。Lin
 * 原调用 fetchScheduleData() 后，赋值到 historySchedules
function fetchScheduleData(startDate, endDate) {
	return new Promise((resolve) => {
			setTimeout(() => {
					// 过滤出指定日期范围内的数据
					const filteredData = mockScheduleData.filter(schedule => {
							const scheduleDate = new Date(schedule.rq);	// (schedule.date)。Lin
							return scheduleDate >= startDate && scheduleDate <= endDate;
					});
					resolve(filteredData);
			}, 300); // 模拟网络延迟
	});
}
*/

$(function() {
	// 初始化日历
	var calendar = $('#calendar').fullCalendar({
			header: {
					left: 'prev,next today',
					center: 'title',
					right: 'month'
			},
			height: window.innerHeight - 50,
			// 调整3：启用事件编辑，允许拖拽已有排班
			editable: true,
			droppable: true,
			firstDay: 0,

			// 视图渲染完成后的回调
			viewRender: function(view) {
					// 获取当前视图的开始和结束日期
					var start = view.start;
					var end = view.end;

					// 清除当前视图的所有事件
					$('#calendar').fullCalendar('removeEvents');

					// 加载该月份的数据
/* 再改，解决跨月保存问题。Lin
 * 去掉 fetchScheduleData(startDate, endDate)，直接赋值到新加的 historySchedules
 * 原在 fetchScheduleData(startDate, endDate) 过滤出当前月数据，现改为在这过滤
					fetchScheduleData(new Date(start), new Date(end)).then(scheduleData => {
							scheduleData.forEach(schedule => {
*/
						historySchedules.forEach(schedule => {
								// 直接使用日期字符串创建 Date 对象
								var scheduleDate = new Date(schedule.rq);
								// 在日历组件内部根据视图范围过滤数据
								if (scheduleDate >= start && scheduleDate < end) {

									$('#calendar').fullCalendar('renderEvent', {
										title: schedule.xm,	// .staffName,。Lin
										start: schedule.rq,	// .date,。Lin
										allDay: true,
										staffId: schedule.fzryid,	// .staffId,。Lin
										color: '#4a90e2'
									}, true);
								}
							});
//				});	// 去掉 fetchScheduleData(new Date(start), new Date(end)).then(scheduleData => { 了。Lin
			},

/// 再增加，支持月历内拖放。Lin
		// 调整3：处理事件拖拽，更新historySchedules
		eventDrop: function(event, delta, revertFunc) {
			console.log('事件被拖拽到:', event.start);

			// 格式化新的日期
			var newDate = event.start;
			var formattedDate = newDate.getFullYear() + '-' +
					String(newDate.getMonth() + 1).padStart(2, '0') + '-' +
					String(newDate.getDate()).padStart(2, '0');

			// 从historySchedules中找到并更新对应的记录
			var oldValue = formattedDate.replace(/-/g, '') + '-' + event.staffId;

			// 更新historySchedules
			historySchedules = historySchedules.map(item => {
				var itemDate = new Date(item.rq);	// .date)。Lin
				var eventDate = new Date(event._oldDate); // 保存的原始日期

/// 再增加，解决 new Date(item.rq) 与 new Date(event._oldDate) 不一致问题。Lin
 //    new Date(item.rq) 转为 08:00:00，new Date(event._oldDate) 转为 00:00:00
 //       event._oldDate = event.start.toISOString()
				itemDate.setHours(0, 0, 0, 0);
				eventDate.setHours(0, 0, 0, 0);
///

				// 如果找到匹配的记录，更新日期
				if (itemDate.getTime() === eventDate.getTime() &&	// .getTime()。Lin
						item.fzryid === event.staffId) {	// .staffId ===。Lin
					return {
						...item,
						rq: formattedDate,	// date:。Lin
						value: oldValue
					};
				}
				return item;
			});

			console.log('更新后的historySchedules:', historySchedules);
		},
///

			// 拖拽事件
			drop: function(date) {
					var $this = $(this);
					var targetDate = date;

					// 移除当天已有的事件
					$('#calendar').fullCalendar('removeEvents', function(event) {
							var eventDate = new Date(event.start);
							var dropDate = new Date(targetDate);
							return eventDate.getDate() === dropDate.getDate() &&
										 eventDate.getMonth() === dropDate.getMonth() &&
										 eventDate.getFullYear() === dropDate.getFullYear();
					});

/// 再增加，解决跨月保存问题。Lin
				// 获取员工信息
				var staffId = $this.find(".list").data("id");
				var staffName = $this.find(".list span").text();

				// 格式化日期为 YYYY-MM-DD
				var formattedDate =
						targetDate.getFullYear() +
						"-" +
						String(targetDate.getMonth() + 1).padStart(2, "0") +
						"-" +
						String(targetDate.getDate()).padStart(2, "0");

				// 更新 historySchedules
				// 删除同一天的旧数据（如果存在）
				historySchedules = historySchedules.filter(
						(item) => item.rq !== formattedDate	// .date !==。Lin
				);

				// 添加新数据
				var newSchedule = {
					rq: formattedDate,	// date:。Lin
					fzryid: staffId,		// staffId:。Lin
					xm: staffName,	// staffName:。Lin
					value: formattedDate.replace(/-/g, "") + "-" + staffId,	// 去掉，没用到。再不能去掉，有用到 "首先将历史数据放入 Map，使用 value 作为键"。Lin
				};
				historySchedules.push(newSchedule);
				console.log("更新后的historySchedules:", historySchedules);
///

					// 添加新事件
					$('#calendar').fullCalendar('renderEvent', {
/* 再改，解决跨月保存问题。Lin
							title: $this.find('.list span').text(),
*/						title: staffName,
							start: targetDate,
							allDay: true,
/* 再改，解决跨月保存问题。Lin
							staffId: $this.find('.list').data('id'),
*/						staffId: staffId,
							color: '#4a90e2'
					}, true);
			},

			// 调整3：在事件渲染时保存原始日期，用于后续比较和更新
			// 拖放时的视觉反馈
			eventRender: function(event, element) {
/// 再增加，支持月历内拖放。Lin
				// 保存事件的原始日期
			event._oldDate = event.start.toISOString();
///
					element.css({
							'background-color': '#4a90e2',
							'border': 'none',
							'color': 'white',
							'padding': '2px 5px',
							'border-radius': '3px',
							'margin': '1px 2px'
					});

					// 添加删除按钮
					var deleteBtn = $('<span class="delete-btn" style="cursor:pointer;margin-left:5px;position:absolute;right:2px;top:50%;transform:translateY(-50%);">×</span>');
					element.append(deleteBtn);

					// 为删除按钮添加点击事件
					deleteBtn.on('click', function(e) {
							e.preventDefault();
							e.stopPropagation();
							window.eventToDelete = event;
							$('.delete-confirm').fadeIn(200);
					});
			},

			// 移除原来的 eventClick 处理器
			eventClick: function(event, jsEvent, view) {
					// 如果需要其他点击事件处理，可以在这里添加
			}
	});

	// 初始化人员列表的拖拽
/* 去掉，移到 findBm() 里 -- 改为动态加载。Lin
	$('.list-background').each(function() {
			$(this).draggable({
					zIndex: 999,
					revert: true,
					revertDuration: 0,
					helper: function(event) {
							var name = $(this).find('.list span').text();
							return $('<div>')
									.text(name)
									.css({
											'background': '#4a90e2',
											'color': 'white',
											'padding': '5px 10px',
											'border-radius': '3px',
											'position': 'absolute',
											'width': 'auto',
											'height': 'auto',
											'line-height': 'normal',
											'font-size': '14px',
											'white-space': 'nowrap'
									});
					},
					appendTo: 'body',
					cursor: 'move',
					cursorAt: { left: 20, top: 15 },
					start: function(e, ui) {
							$(ui.helper).css('z-index', 9999);
					}
			});
	});
*/
});

// 保存排班表 > 调整2：保存排班表时更新historySchedules
// 再改，解决跨月保存问题。Lin
function saveSchedule() {
	// 获取所有事件
	var events = $('#calendar').fullCalendar('clientEvents');
	var scheduleArray = [];

/// 增加，解决跨月保存问题。Lin
	// 创建一个 Map 来存储所有排班，键为日期
	var scheduleMap = new Map();

	// 首先将历史数据放入 Map，使用 value 作为键
	historySchedules.forEach(function(schedule) {
		scheduleMap.set(schedule.value, schedule);
	});

	// 获取当前视图的日期范围
	var view = $('#calendar').fullCalendar('getView');
	var viewStart = new Date(view.start);
	var viewEnd = new Date(view.end);
///

	// 处理当前视图中的事件，更新或添加到 Map 中
	events.forEach(function(event) {
			// 格式化日期为 YYYY-MM-DD
			var date = new Date(event.start);
/* 改，把 20250624 改为 2025-06-24 -- 转为原来的。Lin
			var formattedDate = date.getFullYear() + '' +
												 String(date.getMonth() + 1).padStart(2, '0') + '' +
												 String(date.getDate()).padStart(2, '0');
*/			var formattedDate = date.getFullYear() + '-' +
												 String(date.getMonth() + 1).padStart(2, '0') + '-' +
												 String(date.getDate()).padStart(2, '0');

			// 创建排班记录
			var schedule = {
					rq: formattedDate,	// date:。Lin
					fzryid: Number(event.staffId),	// staffId:。Lin
					xm: event.title,	// staffName:。Lin
					value:formattedDate.replace(/-/g, "") + '-' + event.staffId	// 去掉，没用到。再不能去掉，有用到 "首先将历史数据放入 Map，使用 value 作为键"。Lin
			};

/* 再改，解决跨月保存问题。Lin
			scheduleArray.push(schedule);
*/		scheduleMap.set(schedule.value, schedule);	// 更新 Map 中的数据
	});

/// 再增加，解决跨月保存问题。Lin
	// 删除当前视图范围内但不在 events 中的数据
/* 再去掉，不能删除 -- 解决跨月保存问题。Lin
	historySchedules.forEach(function(schedule) {
		var scheduleDate = new Date(schedule.date);

		// 如果日期在当前视图范围内，但不在 events 中，则删除
		if (scheduleDate >= viewStart && scheduleDate < viewEnd) {
			var found = events.some(function(event) {
				var eventDate = new Date(event.start);
				return eventDate.getTime() === scheduleDate.getTime();
			});

			if (!found) {
				scheduleMap.delete(schedule.value);
			}
		}
	});
*/
	// 将 Map 转换回数组
	scheduleArray = Array.from(scheduleMap.values());
///

	// 按日期排序
	scheduleArray.sort((a, b) => a.rq.localeCompare(b.rq));	// => a.date.，(b.date))。Lin

/// 再增加，解决跨月保存问题。Lin
	//调整2:更新历史数据
	historySchedules = scheduleArray;
///

/// 增加，转为原来的 ,2025-06-24|2025-06-24|13:30:00^13:32:00^111121$undefined$* -- 抄自 rcjhRc_ddpZbAdd.ss.jsp 里的 savebfap()。Lin
	var zstr = "";
	scheduleArray.forEach(schedule => {
		zstr += ","+ schedule.rq +"|"+ schedule.rq +"|"+
				"00:00:00^23:59:59^"+
				schedule.fzryid +"$undefined$*";
	});
	//保存
	$.ajax({
		url: "<serv.ss name='rcjhRc_saveZbAdd'/>",	// :"pb_bd_zbap_pbaobc"。Lin
		type: "post",
		data: {
			rcjhid: "${rcjhid}",
			rqsjstr: zstr
		},
		dataType: "json",
		success: function(data) {
			console.info(data.statu);
			if(data.statu == 1) {
				window.location = "<serv.ss dest='info' parm='{msg:"保存成功"}'/>";
			} else {
				window.location = "<serv.ss dest='info' parm='{msg:"保存失败"}'/>";
			}
		}
	})
///

//	alert('共'+scheduleArray.length+'条排班数据\n'+JSON.stringify(scheduleArray));	// 去掉，完成使命了。Lin

}

// 取消删除
function cancelDelete() {
	$('.delete-confirm').fadeOut(200);
	window.eventToDelete = null;
}

// 确认删除
function confirmDelete() {
	if (window.eventToDelete) {
/* 再改，解决跨月保存问题。Lin
			$('#calendar').fullCalendar('removeEvents', window.eventToDelete._id);
*/
		var date = window.eventToDelete.start;
		var staffId = window.eventToDelete.staffId;
		// 调用deleteSchedule函数
		deleteSchedule(date, staffId);

			// 关闭确认框
			$('.delete-confirm').fadeOut(200);
			window.eventToDelete = null;
	}
}

/// 再增加，解决跨月保存问题。Lin
	// 调整2：删除排班时更新historySchedules
	function deleteSchedule(date, staffId) {
		console.log("删除排班:", date, staffId);

		// 直接从historySchedules中删除对应的数据
		historySchedules = historySchedules.filter((item) => {
			var itemDate = new Date(item.rq);	// .date)。Lin
			var targetDate = new Date(date);
			return (
					itemDate.getTime() !== targetDate.getTime() ||
					item.fzryid !== staffId	// .staffId !==。Lin
			);
		});

		// 重新渲染当前视图
		var view = $("#calendar").fullCalendar("getView");
		var start = view.start;
		var end = view.end;

		// 清除当前视图的所有事件
		$("#calendar").fullCalendar("removeEvents");

		// 重新渲染数据
		historySchedules.forEach((schedule) => {
			var scheduleDate = new Date(schedule.rq);	// .date)。Lin
			if (scheduleDate >= start && scheduleDate < end) {
				$("#calendar").fullCalendar(
						"renderEvent",
						{
							title: schedule.xm,	// .staffName,。Lin
							start: scheduleDate,
							allDay: true,
							staffId: schedule.fzryid,	// .staffId,。Lin
							color: "#4a90e2",
						},
						true
				);
			}
		});
	}
///
</script>
</html>