crm/app/sys/view/camp/settrainingcamp.html

{extend name="public/layout"/} {block name="title"}设置训练营{/block} {block name="body"}
<style type="text/css">
	html,
	body {
		display: block;
		min-width: 1100px;
	}

	.layui-layer .layui-layer-iframe .layui-layer-title {
		background-color: #D8E6F1;
	}

	.layui-fluid {
		display: block;
		box-shadow: 0 0 4px 0 #B6CADE;
		border-radius: 5px;
		margin: 15px;
		background-color: #ffffff;
	}

	.layui-form-label {
		width: auto;
	}

	.layui-btn-primary {
		color: #249EFB;
		border: 1px solid #249EFB;
	}

	.layui-btn-primary:hover {
		background-color: #E3F7FF;
		color: #249EFB;
	}

	.layui-form-item .layui-input-inline {
		width: auto;
		margin-right: 0px;
	}

	.layui-table-cell {
		padding: 0px 20px;
	}

	.plr10 {
		padding: 0px 10px;
	}

	.goback {
		float: left;
		margin-right: 20px;
	}

	.goback a {
		color: #269efb;
	}

	.goback i {
		position: relative !important;
		left: 0px;
	}

	.addPlan {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		background-color: #F5F7FA;
		box-sizing: border-box;
		padding: 0px 20px;
		color: #269efb;
		cursor: pointer;
	}

	.additemPlan {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		background-color: #f2f2f2;
		box-sizing: border-box;
		padding: 0px 20px 0px 60px;
		color: #269efb;
		cursor: pointer;
	}

	.itemPlanTitle {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #F5F7FA;
		box-sizing: border-box;
		padding: 0px 20px;
		margin-bottom: 10px;
		cursor: pointer;
	}

	.itemPlan {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f2f2f2;
		box-sizing: border-box;
		padding: 0px 20px 0px 60px;
		margin-bottom: 10px;
		cursor: pointer;
	}

	.mb10 {
		margin-bottom: 10px;
	}

	.ml5 {
		margin-left: 5px;
	}

	.ml10 {
		margin-left: 10px;
	}

	.mr10 {
		margin-right: 10px;
	}

	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.flex-sub {
		flex: 1;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-around {
		justify-content: space-around;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		bottom: 0px;
		right: 0px;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mask-content {
		width: 600px;
		height: 350px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.mask-title {
		height: 45px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #D8E6F1;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 20px;
		color: #333;
	}

	.item-box {
		width: 150px;
		height: 130px;
		border: 1px solid #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 15px;
		cursor: pointer;
	}

	.planTitle {
		width: 100%;
		height: 40px;
		color: #333;
		font-weight: 600;
		box-sizing: border-box;
		padding: 0px 20px;
		border-left: 4px solid #249EFB;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		background-color: #f6f6f6;
	}

	.width100 {
		width: 100%;
	}

	.active {
		border: 2px solid #249EFB;
		color: #249EFB;
		font-weight: 600;
	}

	.p20 {
		padding: 20px;
	}

	.reopen {
		color: #249EFB;
	}

	.cDelStyle {
		font-size: 18px;
		margin-left: 10px;
	}

	.link {
		cursor: pointer;
	}
	.rotate90 {
		transform: rotate(180deg);
		transition: .5s;
	}
</style>
<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-form layui-card-header layuiadmin-card-header-auto">
			<div class="layui-form-item">
				<div class="layui-inline" style="float: left;">
					<div class="goback">
						<a class="link">
							新增训练计划
						</a>
						<span>>></span>
						<span>设置训练营</span>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-card-body">
			<div class="planTitle">训练计划目录</div>
			<div class="planContent">
			</div>
			<div class="addPlan">
				<i class="layui-icon layui-icon-addition"></i>
				<span>添加计划</span>
			</div>
		</div>
		<div class="flex justify-center p20">
			<button type="button" class="layui-btn layui-btn-normal submitMsg">保存</button>
		</div>
	</div>
	<!-- 弹窗 -->
	<div class="mask layui-hide">
		<div class="mask-content">
			<div class="mask-title">
				<span>选择任务类型</span>
				<i class="layui-icon layui-icon-close"></i>
			</div>
			<div class="width100 flex-sub flex justify-around align-center">
				<div class="item-box" data-index="0">
					课程类
				</div>
				<div class="item-box" data-index="1">
					考试类
				</div>
			</div>
			<!-- <div class="flex justify-end p20">
				<button type="button" class="layui-btn layui-btn-primary cancel">取消</button>
				<button type="button" class="layui-btn sure">确定</button>
			</div> -->
		</div>
	</div>
	<input type="hidden" name="course_id" id="course_id" />
</div>
{/block} {block name="js"}
<script>
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index'
	}).use(['index', 'table', 'layedit', 'element'], function () {
		var $ = layui.$,
			table = layui.table,
			element = layui.element,
			form = layui.form,
			arrPlan = [],
			addType = null,
			planId = null,
			isEdit = false,
			trainCampId = null,
			plan_index = null,
			task_index = null,
			loading = false,
			isChange = false;


		var field = {};
		form.on('submit(LAY-app-contlist-search)', function (data) {
			var type_id = $('.type_id').val();
			var keyword = $('.keyword').val();

			field['type_id'] = type_id;
			field['keyword'] = keyword;
			//执行重载
			table.reload('datalist', {
				where: field,
				page: {
					curr: 1
				}
			});
		});

		//获取已设置的训练计划
		getTrainCampList();
		function getTrainCampList(index) {
			arrPlan = [];
			$.ajax({
				url: "{:url('camp/read')}",
				data: {
					id: "{$id}"
				},
				dataType: 'json',
				type: 'post',
				success: function (res) {
					if (res.code == 0) {
						arrPlan = res.data;
						setTimeout(() => {
							setHtml(arrPlan, index);
						}, 50)
					} else {
						layer.msg(res.msg, {
							anim: 6
							, time: 2000
						});
					}
				}
			})
		}

		// 编辑计划名称
		function editPlanName(plan_name, id) {
			$.ajax({
				url: "{:url('camp/edit')}",
				data: {
					camp_id: "{$id}",
					plan_name: plan_name,
					id: id
				},
				dataType: 'json',
				type: 'post',
				success: function (res) {
					if (res.code == 0) {
						getTrainCampList();
						isChange = true;
						layer.msg('编辑成功', {
							time: 2000
						});
					} else {
						layer.msg(res.msg, {
							anim: 6
							, time: 2000
						});
					}
				}
			})
		}

		//编辑训练任务
		function editTrainCamp(id, plan_id, type, con_name, con_id) {
			$.ajax({
				url: "{:url('camp/edit_plan')}",
				data: {
					id: id,
					plan_id: plan_id,
					type: type,
					con_name: con_name,
					con_id: con_id
				},
				dataType: 'json',
				type: 'post',
				success: function (res) {
					if (res.code == 0) {
						// getTrainCampList();
						isChange = true;
						layer.msg('编辑成功', {
							time: 2000
						});
						setHtml(arrPlan);
					} else {
						layer.msg(res.msg, {
							anim: 6
							, time: 2000
						});
					}
				}
			})
		}

		function setHtml(arr, index) {
			$('.planContent')[0].innerHTML = arr.map((v, i) => {
				return `<div class="mb10">
					<div class="itemPlanTitle">
						<div class="flex-sub flex align-center">
							<i class="layui-icon layui-icon-up" data-index="${i}"></i>
							<span class="ml5 ${index != i ? 'layui-show' : 'layui-hide'}">${v.title}</span>
							<span class="${index == i ? 'layui-show' : 'layui-hide'}">
								<div class="flex align-center">
									<input type="text" name="" id="plan${i}" value="${v.title}" placeholder="请输入计划名称" class="layui-input ml5 flex-sub" style="width: 200px;">
									<i class="layui-icon layui-icon-ok ml10" data-index=${i} data-id="${v.id}"></i>
								</div>
							</span>
						</div>
						<div class="flex-sub flex justify-end">
							<i class="layui-icon layui-icon-edit mr10" style="font-size: 18px;" data-index="${i}"></i>
							<i class="layui-icon layui-icon-delete delElement" style="font-size: 18px;" data-id="${v.id}" data-index="${i}"></i>
						</div>
					</div>
					<div class="planItemBox${i}">
					${v.plan.map((o, x) => {
					return `<div class="itemPlan">
						<div>
							<span>${o.type == 0 ? '课程类' : '考试类'}：${o.title}</span>
						</div>
						<div class="flex align-center">
							<span class="reopen" data-index="${i}" data-oindex="${x}" data-planid="${o.plan_id}" data-id="${o.id}" data-type="${o.type}">重新选择</span>
							<i class="layui-icon layui-icon-delete cDelStyle" data-conid="${o.con_id}" data-id="${o.id}" data-index="${i}" data-oindex="${x}"></i>
						</div>
					</div>`;
				}).join('')}
					<div class="additemPlan" data-index="${i}" data-planid="${v.id}">
						<i class="layui-icon layui-icon-addition" data-index="${i}" data-planid="${v.id}"></i> 
						<span data-index="${i}" data-planid="${v.id}">添加训练任务</span>
						</div>	
					</div>
				</div>`
			}).join('');
			setTimeout(() => {
				$(".layui-icon-up").click(function() {
					let index = $(this).prop('dataset').index;
					$(`.planItemBox${index}`).toggleClass('layui-hide');
					$(this).toggleClass('rotate90');
				})
				//删除计划
				$('.delElement').click((e) => {
					let plan_id = parseInt(e.target.dataset.id);
					let delIndex = parseInt(e.target.dataset.index);
					layer.confirm('确定删除当前训练计划吗？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
						if (plan_id && plan_id != 'undefined') {
							$.ajax({
								url: "{:url('camp/del_plan')}",
								type: 'post',
								data: {
									id: plan_id
								},
								success: function (res) {
									if (res.code == 0) {
										// getTrainCampList();
										isChange = true;
										arrPlan.splice(delIndex,1);
										setHtml(arrPlan);
										layer.msg('删除成功', {
											time: 2000
										});
									} else {
										layer.msg(res.msg, {
											anim: 6
											, time: 2000
										});
									}
								}
							});
						} else {
							arrPlan.splice(delIndex, 1);
							setHtml(arrPlan)
						}
						layer.close(index);
					});
				})
				// 删除训练任务
				$('.cDelStyle').click((e) => {
					let conid = e.target.dataset.conid;
					let task_id = e.target.dataset.id;
					let p_index = parseInt(e.target.dataset.index);
					let c_index = parseInt(e.target.dataset.oindex);
					layer.confirm('确定删除当前训练任务？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
						if (conid && conid != 'undefined') {
							$.ajax({
								url: "{:url('camp/del_plan')}",
								type: 'post',
								data: {
									id: task_id
								},
								success: function (res) {
									if (res.code == 0) {
										// getTrainCampList();
										isChange = true;
										arrPlan[p_index].plan.splice(c_index,1);
										setHtml(arrPlan);
										layer.msg('删除成功', {
											time: 2000
										});
										
									} else {
										layer.msg(res.msg, {
											anim: 6
											, time: 2000
										});
									}
								}
							});
						} else {
							arrPlan[p_index].plan.splice(c_index, 1);
							setHtml(arrPlan);
						}
						layer.close(index);
					});
				})
				// 编辑计划名称
				$('.layui-icon-ok').click((e) => {
					let index = parseInt(e.target.dataset.index);
					let val = $(`#plan${index}`).val();
					let id = e.target.dataset.id;
					if (id && id != 'undefined') {
						editPlanName(val, id);
					} else {
						arrPlan[index].title = val;
						setHtml(arrPlan)
					}
				})
				$('.layui-icon-edit').click((e) => {
					let index = parseInt(e.target.dataset.index);
					setHtml(arrPlan, index);
				})
				$('.reopen').click((e) => {
					let type = parseInt(e.target.dataset.type);
					planId = e.target.dataset.planid;
					trainCampId = e.target.dataset.id;
					plan_index = parseInt(e.target.dataset.index);
					task_index = parseInt(e.target.dataset.oindex);
					if (planId && planId != 'undefined') {
						isEdit = true;
					} else {
						isEdit = false;
					}
					$('.mask')[0].className = 'mask';
					$('.item-box')[type].className = 'item-box active';
					if (type == 0) {
						$('.item-box')[1].className = 'item-box';
					} else {
						$('.item-box')[0].className = 'item-box';
					}
				})
				$('.additemPlan').click((e) => {
					if (arrPlan.length && arrPlan[arrPlan.length - 1].title == '') {
						layer.msg('请完善计划名称', {
							anim: 6
							, time: 2000
						});
						return;
					}
					plan_index = parseInt(e.target.dataset.index);
					task_index = null;
					isEdit = false;
					planId = e.target.dataset.planid;
					$('.mask')[0].className = 'mask';
				})
			}, 100)
		}

		$('.layui-icon-close,.cancel').click(() => {
			$('.mask')[0].className = 'mask layui-hide';
		})

		function handleParams() {
			let arrayTrainPlan = JSON.parse(JSON.stringify(arrPlan));
			let arr = arrayTrainPlan.filter(v => {
				if (!v.id) {
					return v;
				} else {
					v.plan = v.plan.filter(o => !o.con_id);
					return v;
				}
			}).filter(x => {
				if (x.plan.length) {
					return { title: x.title, plan: x.plan };
				}
			});
			return arr;
		}

		// 返回上一级
		$('.link').click(() => {
			let data = handleParams();
			if (data.length) {
				layer.confirm('您还有数据未保存，确定离开吗', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
					window.history.back(-1);
					layer.close(index);
				});
			} else {
				window.history.back(-1);
			}
		})

		$('.submitMsg').click(() => {
			if (arrPlan.length && arrPlan[arrPlan.length - 1].title == '') {
				layer.msg('请完善计划名称', {
					anim: 6
					, time: 2000
				});
				return;
			}
			let data = handleParams();
			if (isChange && !data.length) {
				layer.msg('保存成功', {
					time: 2000
				});
				setTimeout(() => {
					isChange = false;
					window.history.back(-1);
					sessionStorage.setItem('Dialog',true);
				}, 1000)
				return;
			}
			if (!data.length) {
				layer.msg('保存成功', {
					time: 2000
				});
				setTimeout(() => {
					isChange = false;
					window.history.back(-1);
					sessionStorage.setItem('Dialog',true);
				}, 1000)
				return;
			}
			if (!loading) {
				loading = true;
				$.ajax({
					url: "{:url('camp/save')}",
					data: {
						camp_id: "{$id}",
						arr: data
					},
					dataType: 'json',
					type: 'post',
					success: function (res) {
						if (res.code == 0) {
							getTrainCampList();
							layer.msg('保存成功', {
								time: 2000
							});
							setTimeout(() => {
								window.history.back(-1);
								sessionStorage.setItem('Dialog',true);
							}, 1000)
						} else {
							layer.msg(res.msg, {
								anim: 6
								, time: 2000
							});
						}
						loading = false;
					}
				})
			} else {
				layer.msg('正在保存数据', {
					anim: 6
					, time: 2000
				});
			}
		})

		//获取已选中的课程数据
		function getAllCourseTaskIds() {
			let arrTask = JSON.parse(JSON.stringify(arrPlan));
			let arr = [];
			arrTask.forEach(v => {
				let ids = v.plan.filter(w => !w.con_id && w.type == '0');
				if (ids.length) {
					arr.push(...ids)
				}
			})
			return arr;
		}

		//获取已选中的试卷数据
		function getAllTestPaperTaskIds() {
			let arrTask = JSON.parse(JSON.stringify(arrPlan));
			let arr = [];
			arrTask.forEach(v => {
				let ids = v.plan.filter(w => !w.con_id && w.type == '1');
				if (ids.length) {
					arr.push(...ids)
				}
			})
			return arr;
		}

		$('.item-box').click((e) => {
			if (e.target.dataset.index == 0) {
				e.target.className = 'item-box active';
				$('.item-box')[1].className = 'item-box';
			} else {
				e.target.className = 'item-box active';
				$('.item-box')[0].className = 'item-box';
			}
			let p = $('.active').prop('dataset');
			addType = p.index;
			if (addType == '0') {
				var task_ids = getAllCourseTaskIds().map(v => v.id).join(',');
				layer.open({
					type: 2,
					title: ['选择课程', 'color:#333333;background-color:#D8E6F1;'],
					content: '{:url("camp/class_choice_course")}?camp_id=' + "{$id}" + "&taskIds=" + task_ids,
					area: ['80%', '80%'],
					btn: ['确定', '取消'],
					yes: function (index, layero) {
						//点击确认触发 iframe 内容中的按钮提交
						var classCourse = JSON.parse(layero.find('iframe').contents().find("#hiddentext").val()); //获取选中的课程
						if (!isEdit) {
							if (task_index || task_index == 0) {
								arrPlan[plan_index].plan[task_index] = { type: '0', title: classCourse[0].title, id: classCourse[0].id };
							} else {
								classCourse.forEach(v => {
									let arr = arrPlan[plan_index].plan.filter(w => w.id == v.id || v.id == w.con_id);
									if (!arr.length) {
										arrPlan[plan_index].plan.push({ type: '0', title: v.title, id: v.id });
									}
								});
							}
							setHtml(arrPlan);
						} else {
							arrPlan[plan_index].plan[task_index] = { type: '0', title: classCourse[0].title, id: classCourse[0].id };
							editTrainCamp(trainCampId, planId, addType, classCourse[0].title, classCourse[0].id);
						}
						layer.close(index);
					}
				});
			} else {
				var task_ids = getAllTestPaperTaskIds().map(v => v.id).join(',');
				layer.open({
					type: 2,
					title: ['选择试卷', 'color:#333333;background-color:#D8E6F1;'],
					content: '{:url("camp/choice_test_paper")}?camp_id=' + "{$id}" + "&taskIds=" + task_ids,
					area: ['80%', '80%'],
					btn: ['确定', '取消'],
					yes: function (index, layero) {
						//点击确认触发 iframe 内容中的按钮提交
						var testPaper = JSON.parse(layero.find('iframe').contents().find("#hiddentext").val()); //获取选中的课程
						if (!isEdit) {
							if (task_index || task_index == 0) {
								arrPlan[plan_index].plan[task_index] = { type: '1', title: testPaper[0].name, id: testPaper[0].id };
							} else {
								testPaper.forEach(v => {
									let arr = arrPlan[plan_index].plan.filter(w => w.id == v.id || v.id == w.con_id);
									if (!arr.length) {
										arrPlan[plan_index].plan.push({ type: '1', title: v.name, id: v.id });
									}
								});
							}
							setHtml(arrPlan);
						} else {
							arrPlan[plan_index].plan[task_index] = { type: '1', title: testPaper[0].name, id: testPaper[0].id };
							editTrainCamp(trainCampId, planId, addType, testPaper[0].name, testPaper[0].id);
						}

						layer.close(index);
					}
				});
			}
			$('.mask')[0].className = 'mask layui-hide';
		})

		$('.addPlan').click(() => {
			if (arrPlan.length && arrPlan[arrPlan.length - 1].title == '') {
				layer.msg('请完善计划名称', {
					anim: 6
					, time: 2000
				});
				return;
			}
			arrPlan.push({ title: '', plan: [] });
			setHtml(arrPlan, (arrPlan.length - 1))
		})

		$('.layui-btn.layuiadmin-btn').on('click', function () {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
	});
</script>

{/block}