crm/app/sys/view/agents/stay_wiped_list.html

{extend name="public/layout" /} {block name="title"}日常任务{/block}
{block name="body"}
<style>
	.layui-fluid {
		display: block;
		box-shadow: 0 0 4px 0 #B6CADE;
		border-radius: 5px;
		/* margin: 15px; */
		background-color: #ffffff;
		min-height: calc(100vh - 80px);
	}

	.cardheader {
		padding-left: 10px;
	}

	.layui-table thead tr,
	.layui-table-header {
		background-color: #D8E6F1 !important;
	}

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

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

	.layui-card .layui-tab-brief .layui-tab-title li.layui-this {
		color: #249EFB;
	}

	.layui-tab-brief>.layui-tab-more li.layui-this:after,
	.layui-tab-brief>.layui-tab-title .layui-this:after {
		border: none;
	}

	.layui-card .layui-tab-brief .layui-tab-title .layui-this:after {
		width: 50px;
		height: 4px;
		background-color: #249EFB;
		top: 37px;
		left: 50%;
		transform: translateX(-50%);
	}

	.layui-card .layui-tab-brief .layui-tab-title li {
		margin: 0px 5px;
		padding: 0px 15px;
	}

	.layui-btn-xs,
	.layui-btn-xs:hover {
		border: 1px solid #249EFB;
		background-color: #fff;
		color: #249EFB;
		padding: 0px 10px;
	}

	.layui-btn-danger,
	.layui-btn-danger:hover {
		color: #FF5722;
		background-color: #fff;
		border: 1px solid #FF5722;
		padding: 0px 10px;
	}

	.layui-card .layui-tab-brief .layui-tab-title li {
		margin-left: 0 !important;
		margin-right: 15px;
	}

	/* .layui-card .layui-tab-brief .layui-tab-title{margin-left:15px;} */
	.flex-row {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		/*margin: 15px;*/
		height: 111px;
		box-shadow: 0 0 4px 0 #b6cade;
		border-radius: 5px;
	}

	.flex-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.font-weight {
		font-weight: 600;
	}

	.font24 {
		font-size: 24px;
	}

	.mt10 {
		margin-top: 10px;
	}

	.flex-box {
		flex: none;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FAFAFA;
		margin: 17px;
		box-sizing: border-box;
		border-radius: 5px;
		padding: 16px;
		width: 100%;
		margin-left: 0;
		margin-top: 0;
	}

	.flex-box-title {
		font-size: 17px;
		font-weight: 600;

	}

	.flex-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.box-title {
		border-left: 4px solid #249EFB;
		display: inline-block;
		height: 20px;
		line-height: 20px;
		padding-left: 5px;
		font-size: 16px;
		font-weight: 700;

	}

	.box-little {
		margin-top: 4px;
		color: #999999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.box-content {
		width: 100%;
		color: #aaa;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 12px;
	}

	.box-img {
		display: flex;
		height: 70px;
		margin-top: 4px;
	}

	.box-img img {
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}

	.box-tips {
		font-size: 12px;
	}

	.box-operate {
		width: 205px;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		/*border-left: 1px solid #cccccc;*/
		padding-left: 16px;
	}

	.box-del {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.color249EFB {
		color: #249EFB;
	}

	.ml10 {
		margin-left: 10px;
	}

	#page_container {
		padding: 0px 35px;
	}

	html {
		background: none;
	}

	.noneimgs {
		margin: 50px auto 0;
		width: 20%;
	}

	.layui-card {
		box-shadow: none !important;
	}

	.layui-card-body {
		padding: 0 !important;
	}
	.employeeStyle {
		color: #249EFB;
	}
	.integralStyle {
		color: #999999;
		margin-left: 15px;
	}
	.wechatStyle {
		color: #999999;
	}
	.integralNumber {
		color: #249EFB;
	}
	.timeStyle {
		color: #999999;
	}
	.box-column {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.passStyle {
		color: #249EFB;
		margin-left: 8px;
	}
	.employName {
		color: #333333;
	}
	.rejectStyle {
		color: red;
	}
	.color999 {
		color: #999999;
	}
	.font14 {
		font-size: 13px !important;
	}
	.flexcenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>

<body>
	<div class="layui-fluid" style="box-shadow: none;">
		<div class="layui-card">
			<div class="layui-card-body">
				<div class="layui-form layui-card-header layuiadmin-card-header-auto">
					<div class="layui-form-item">
						<div style="float:right;">
							<div class="layui-inline">
								<div class="layui-input-inline" style="width:280px;">
									<input type="text" name="keyword" placeholder="请输入业务员姓名/装修推荐官姓名/审核人员"
										autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<div class="layui-input-inline select-date">
									<input type="text" name="date" id="select_date" placeholder="选择审核时间"
										autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<button class="layui-btn layuiadmin-btn-course searchBtn" lay-submit
									lay-filter="LAY-user-front-search">
									<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
								</button>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md12 layui-col-xs12 layui-col-sm12">
						<div class="layui-tab layui-tab-brief" lay-filter="component-tabs-hash">
							<ul class="layui-tab-title">
								<li class="layui-this" lay-id="1">全部</li>
								<li lay-id="2">待核销</li>
								<li lay-id="3">已核销</li>
								<li lay-id="4">已驳回</li>
							</ul>
							<div class="layui-tab-content">
								<div class="layui-tab-item" id="con"
									style="display:flex !important;flex-wrap:wrap !important;">

								</div>

							</div>
							<div id="page_container"></div>
							<input type="hidden" name="count" value="0">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="width56_" style="display: none;">
			<button type="button" class="layui-btn layui-btn-normal pdlr30" lay-filter="spellgroup-submit"
				id="spellgroup-submit">保存</button>
		</div>
	</div>
	{/block}
	{block name="js"}
	<script>
		layui.config({
			base: '__LAYUI__/',
			urlbase: '/sys'
		}).extend({
			index: 'lib/index' //主入口模块
		}).use(['index', 'table', 'laypage', 'element', 'laydate'], function () {
			var $ = layui.$,
				table = layui.table,
				laypage = layui.laypage,
				element = layui.element,
				form = layui.form,
				laydate = layui.laydate;
			var page = 1;//当前页
			var date = keyword = '';
			//日期范围
			laydate.render({
				elem: '#select_date',
				format: "yyyy/MM/dd"
			});

			//选项卡切换
			element.on('tab(component-tabs-hash)', function (data) {
				var index = data.index;
				page = 1;
				if (index == 0) {
					active.list(page);
				} else if (index == 1) {
					active.list(page, 2);
				} else if (index == 2) {
					active.list(page, 3);
				} else if (index == 3) {
					active.list(page, 4);
				}
			});

			//监听搜索
			form.on('submit(LAY-user-front-search)', function (data) {
				//var field = data.field;
				 date = $("#select_date").val();
				keyword = $("[name=keyword]").val();
				active.list(page,0,date,keyword);
			});

			//一键核销
			$('#spellgroup-submit').click(function () {
				$.ajax({
					url: '{:url("agents/all_operation_wiped")}',
					type: 'post',
					data: '',
					dataType: 'json',
					processData: false,
					contentType: false,
					success: function (res) {
						if (res.code === 0) {
							layer.msg(res.msg, {
								anim: 0, time: 1000, icon: 6,
							}, function () {
								var index = parent.layer.getFrameIndex(window.name);
								parent.layui.table.reload('dev-table'); //重载表格
								parent.layer.close(index); //再执行关闭
							});
						} else {
							layer.msg(res.msg, { anim: 0, time: 1000, icon: 5 });
						}
					}
				});
				return false;
			})

			var active = {
				list: function (page, type = '',date = '',keyword = '') {
					$.ajax({
						url: '{:url("agents/stay_wiped_list")}',
						type: 'post',
						data: {
							page:page,
							status:type,
							review_time:date,
							keyword:keyword
						},
						success: function (res) {
							if (res.code == 0) {
								var data = res.data;
								if (data.length != 0) {
									var html = '';
									data.forEach(function (elem, index) {
										html += "<div class='flex-box'>";
										html += "<div class='flex-column'>";
										html += "<div class='box-img'>";
										html += "<div class='flexcenter'><img src=" + '__STATIC__/img/default.png' + " /></div>";
										html += "<div><p><span>" + elem.agent.agent_name + "</span>" + "<span class='employeeStyle'>" + "【业务员: " + elem.employee.name + "】</span><span class='integralStyle'>核销积分: " + "</span>" + "<span class='integralNumber'>" + elem.integral + "</span>" + "</p><p>" + "<span>"+ (elem.good_name?`兑奖商品:${elem.good_name}`:`核销了${elem.integral}积分即${elem.money}元`) +"</span>"+"</p><p class='timeStyle font14'>申请时间: " + elem.addtime + "</p></div></div>";
										html += "</div>";
										html += "<div class='box-operate'>";
										if (elem.status == 2) {
											html += "<div class='box-del del_task' data-id=" + elem.id + "><button type='button' data-id=" + elem.id + " class='layui-btn layui-btn-primary layui-border-blue layui-btn-sm laypass'>通过</button>";
											html += "<button type='button' data-id=" + elem.id + " class='layui-btn layui-btn-primary layui-border-red layui-btn-sm layreject'>驳回</button></div>";
										} else if (elem.status == 3) {
											html += "<div class='box-column' data-id=" + elem.id + "><p><span class='employName'>" + elem.review_name + "审核</span> <span class='passStyle'>已通过</span></p><p class='color999 font14'>通过时间: " + elem.review_time + "</p></div>";
										} else if (elem.status == 4) {
											html += "<div class='box-column' data-id=" + elem.id + "><p><span class='employName'>" + elem.review_name + "审核</span> <span class='rejectStyle'>已驳回</span></p><p class='color999 font14'>驳回时间: " + elem.review_time + "</p></div>";
										}
										html += "</div>";
										html += "</div>";
									});
									$('#con').empty();
									$('#con').html(html);
									active.page(res.count);
									setTimeout(() => {
										$('.laypass').click(function() {
											let id = $(this).prop('dataset').id;
											//alert(id);
											set(id,1);
										})
										$('.layreject').click(function() {
											let id = $(this).prop('dataset').id;
											//alert(id);
											set(id,2);
										})
									},300)
								} else {
									$('#con').html('<img class="noneimgs" src="__STATIC__/img/nonedata.png"/>');
								}

							}
						},
						error: function (res) {
							// layer.close(index);
						}
					});
				},
				page: function (count) {
					laypage.render({
						elem: 'page_container',
						count: count,
						limit: 6,
						curr: page,
						jump: function (obj, first) {
							// console.log(obj)
							//获取到当前的页数
							if (!first) {
								if (page != obj.curr) {
									page = obj.curr;
									active.list(page);
								}
							}
						}
					})
				}
			};
			active.list(page);

			// //删除任务
			// $("#con").on('click', '.del_task', function () {
			// 	var id = $(this).data("id");
			// 	$.ajax({
			// 		url: '{:url("agents/operation_wiped_integral")}',
			// 		data: {
			// 			id:id
			// 		},
			// 		type: 'post',
			// 		success: function (res) {

			// 			if (res.code === 0) {
			// 				layer.msg(res.msg, { anim: 0 });
			// 				active.list(page);
			// 			} else {
			// 				layer.msg(res.msg, { anim: 6 });
			// 			}
			// 		},
			// 		error: function (res) {
			// 			active.list(page);
			// 		}
			// 	});
			// });
			function set(id,type)
			{
					$.ajax({
					url: '{:url("agents/operation_wiped_integral")}',
					data: {
						id:id,
						type:type
					},
					type: 'post',
					success: function (res) {

						if (res.code === 0) {
							layer.msg(res.msg, { anim: 0 });
							active.list(page);
						} else {
							layer.msg(res.msg, { anim: 6 });
						}
					},
					error: function (res) {
						active.list(page);
					}
				});
			}

			//完成情况
			$("#con").on('click', '.color249EFB', function () {
				var id = $(this).data("id");
				var type = $(this).data("type");
				layer.open({
					type: 2,
					title: ['新建案例', 'color:#333333;background-color:#D8E6F1;'],
					content: "{:url('dailyTasks/person')}?id=" + id + '&type=' + type,
					resize: false,
					area: ['80%', '80%'],
				});
			});



		});
	</script>
	{/block}