crm/app/sys/view/wework/add_external_message.html

{extend name="public/layout" /} {block name="title"}群发到客户{/block} {block name="body"}
<style type="text/css">
	html {
		background: #fff;
	}

	body {
		min-width: 320px;
	}

	@media screen and (max-width: 450px) {
		.layui-form-item {
			width: 100%;
		}
	}

	#layuiadmin-app-form-list {
		padding: 1% 2%;
	}

	.layui-form-item {
		position: relative;
	}

	.layui-form-label {
		width: 20%;
	}

	.layui-input {
		border: none;
		outline: none;
	}

	.layui-input-inline-bottom {
		border-bottom: 1px solid #D4E4ED;
	}

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

	.border {
		border: 1px solid #D4E4ED;
		padding-right: 10px;
		border-radius: 5px;
	}

	.layui-form-radio>i:hover,
	.layui-form-radioed>i {
		color: #249EFB;
	}

	.layui-form-radioed {
		color: #249EFB;
	}

	.layui-tab-card>.layui-tab-title {
		background-color: #fff;
	}

	.layui-tab-card {
		border-radius: 10px;
		box-shadow: none;
		border: none;
	}

	.layui-form-label {
		color: #8A9AAA;
	}

	.layui-input::placeholder {
		color: #9DB6CF;
	}

	.layui-tab-card>.layui-tab-title .layui-this {
		background-color: #249EFB;
		color: #fff;
	}

	.layui-tab-card>.layui-tab-title .layui-this:after {
		border-bottom: none;
		border: none;
	}

	.layui-tab-card>.layui-tab-title li {
		background-color: #F2F2F2;
		margin: 0px 5px;
	}

	.layui-anim.layui-icon {
		font-size: 18px;
	}

	.imgs {
		width: 89%;
		float: left;
		margin-top: -1%;
		margin-left: -1%;
	}

	.upload {
		background-color: #fff;
		/*position: absolute;*/
		bottom: 10px;
		/*right: 9%;*/
		cursor: pointer;
		z-index: 1;
		padding: 10px 5px 0px;
	}

	.cancel,
	.cancel:hover {
		background-color: #fff;
		color: #249EFB;
		border: 1px solid #249EFB;
		padding: 0px 20px;
	}
	.imageDiv {
		display: inline-block;
		width: 140px;
		height: 125px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px dashed darkgray;
		background: #f8f8f8;
		position: relative;
		overflow: hidden;
		margin-right: 10px;
	}
	.imageDiv div {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		background-color: #e6e6e600;
	}
	
	.imageDiv div i {
		display: none;
		font-size: 31px;
		position: absolute;
		top: 37%;
		left: 45%;
	}
	
	.imageDiv div:hover {
		background-color: #e6e6e680;
	}
	
	.imageDiv div:hover i {
		display: block;
		cursor: pointer;
	}
	.font15 {
		font-size: 14px !important;
		margin-left: 5px;
	}
	.mt10 {
		margin-top: 10px !important;
	}
	.mask {
		width:100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 999999 !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#range_people {
		width: 550px !important;
		height: 35px;
		border: 1px solid #CCCCCC;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 10px;
	}
	.mask-content {
		width: 90%;
		height: 90%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}
	.header-nav {
		background-color: #D8E6F1;
		width: 100%;
		height: 45px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px 20px;
		box-sizing: border-box;
		color: #333333;
	}
	.list-content {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	.first-box {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.first-content {
		padding: 10px 20px;
		box-sizing: border-box;
		overflow: auto;
	}
	/* 设置滚动条的样式 */
	.first-content::-webkit-scrollbar {
		width:10px;
	}
	/* 滚动槽 */
	.first-content::-webkit-scrollbar-track {
		-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
	}
	/* 滚动条滑块 */
	.first-content::-webkit-scrollbar-thumb {
		background: #666666;
		-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
	}
	.first-content::-webkit-scrollbar-thumb:window-inactive {
		background:#333;
	}
	.first-page {
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 20px;
		box-sizing: border-box;
	}
	.item {
		height: 40px;
		border-bottom: 1px solid #ECECEC;
		display: flex;
		align-items: center;
	}
	.second-box {
		flex: 1;
		overflow: auto;
		padding: 10px 20px;
		box-sizing: border-box;
		border-left: 1px solid #f5f5f5;
	}
	/* 设置滚动条的样式 */
	.second-box::-webkit-scrollbar {
		width:10px;
	}
	/* 滚动槽 */
	.second-box::-webkit-scrollbar-track {
		-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
	}
	/* 滚动条滑块 */
	.second-box::-webkit-scrollbar-thumb {
		background: #666666;
		-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
	}
	.second-box::-webkit-scrollbar-thumb:window-inactive {
		background:#333;
	}
	.space-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex-sub {
		flex: 1;
		text-align: right;
	}
	.grey {
		background-color: #CCCCCC;
	}
	.justify-end {
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 10px 20px;
	}
	.justify-start {
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 10px 20px;
	}
	.ptb10 {
		box-sizing: border-box;
		padding: 10px 20px;
	}
	.borderTop {
		border-top: 1px solid #f5f5f5;
	}
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

<body>
	<form class="layui-form" id="admin" enctype="multipart/form-data">
		<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list">
			<div class="layui-form-item">
				<div class="layui-tab layui-tab-card">
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<div class="layui-form-item">
								<label class="layui-form-label"><i style="color:red;">*&nbsp;</i>群发类型</label>
								<input type="radio" lay-filter="type" name="type" value="1" title="群发到客户" checked>
								<input type="radio" lay-filter="type" name="type" value="2" title="群发到客户群" >
							</div>
							<div class="layui-form-item mt10">
								<label class="layui-form-label"><i style="color:red;">*&nbsp;</i>群发内容</label>
								<textarea name="content" required lay-verify="required" placeholder="请输入"
									class="layui-textarea" style="width:70%;"></textarea>
<!--								<div class="upload" id="img"><i class="layui-icon layui-icon-picture"></i><span class="font15">上传图片</span></div>-->
							</div>
							<!-- <div class="layui-form-item mt10">
								<label class="layui-form-label">群发附件</label>
								<div class="layui-input-inline">
									<div class="upload" id="img"><i class="layui-icon layui-icon-picture"></i><span class="font15">上传图片</span></div>
									<input type="hidden" name="media_id" id="media_id">
								</div>
							</div> -->
							<div class="layui-form-item" id="imageFiles" style="min-height: 0px;margin-bottom: 0px;">
								<label class="layui-form-label"></label>
								<div class="picDiv" style="margin-left: 225px;">
								</div>
							</div>
							<div class="layui-form-item" style="margin-bottom: 30px;">
								<label class="layui-form-label"><i style="color:red;">*&nbsp;</i>执行时间</label>
								<div class="layui-input-inline flex-center border">
									<input type="text" name="sendtime" id="start_date" placeholder="选择开始日期"
										autocomplete="off" class="layui-input" lay-verify="required">
									<img src="__STATIC__/img/bg-calendar.png" alt="日历" width="14px" height="14px">
								</div>
								<div class="layui-form-mid">-</div>
								<div class="layui-input-inline flex-center border">
									<input type="text" name="endtime" id="end_date" placeholder="选择结束日期"
										autocomplete="off" class="layui-input" lay-verify="required">
									<img src="__STATIC__/img/bg-calendar.png" alt="日历" width="14px" height="14px">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"><i style="color:red;">*&nbsp;</i>群发对象</label>
								<div class="layui-input-inline" style="width: 500px;">
									<div id="range_person" style="width: 500px;"></div>
									<div id="range_people" class="layui-hide"></div>
								</div>
							</div>
							<input type="button" style="margin-left:23.5%;height:38px;" lay-submit
								class="layui-btn layui-btn-normal" lay-filter="activity-submit" id="activity-submit"
								value="确认添加">
							<!-- <button type="button" class="layui-btn plr20 cancel">取消</button> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
	<div class="mask layui-hide">
		<div class="mask-content">
			<div class="header-nav">
				<span>选择客户群</span>
				<i class="layui-icon layui-icon-close" style="font-weight: 600;font-size: 18px;cursor: pointer;" id="closeMask"></i>
			</div>
			<div class="list-content">
				<div class="first-box">
					<div class="first-content">
					</div>
				</div>
				<div class="second-box">
					
				</div>
			</div>
			<div class="space-between borderTop">
				<div class="flex-sub center" id="test1">
					
				</div>
				<div class="justify-end flex-sub">
					<div class="layui-btn sure">确定</div>
				</div>
			</div>
		</div>
	</div>
</body>
{/block} {block name="js"}
<script src="__STATIC__/layui/layui/lay/modules/xm-select.js" type="text/javascript" charset="utf-8"></script>
<script>
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'form', 'upload', 'layedit', 'laydate','laypage'], function () {
		var form = layui.form,
			upload = layui.upload,
			layedit = layui.layedit,
			laydate = layui.laydate,
			$ = layui.jquery,
			files,
			img_id=[],
			img_id_arr=[],
			listData = [],
			selectData = [],
			laypage = layui.laypage;
			
		var textarea = layedit.build('content', {
			'height': 500
		});
		form.render();
		/* 监听提交 */
		form.on('submit(activity-submit)', function (obj) {
			var index = parent.layer.getFrameIndex(window.name);
			var formData = new FormData(obj.form);
			let val1 = approve_ids.getValue('valueStr');
			let typeVal = formData.get("type");
			let startDate = new Date(formData.get("sendtime")).getTime();
			let endDate = new Date(formData.get("endtime")).getTime();
			if (endDate < startDate) {
				layer.msg('结束时间不能小于开始时间', {
					anim: 6
					,time: 2000
				});
				return;
			}
			if ((!val1 && typeVal == 1) || (!selectData.length && typeVal == 2)) {
				layer.msg('请选择群发对象', {
					anim: 6
					, time: 2000
				});
				return;
			}
			if (typeVal == 1) {
				if (formData.has("employee_id")) {
					formData.delete('employee_id');
				}
				formData.append('select', val1)
			} else {
				if (formData.has("select")) {
					formData.delete('select');
				}
				formData.append('employee_id', selectData.map(v => v.id).join(','))
			}
			var formImg = []
			for(i in img_id_arr) {
				formImg.push(img_id[img_id_arr[i]])
			}
			formData.append('media_id_arr', formImg);
			// 单击之后提交按钮不可选,防止重复提交
			var DISABLED = 'layui-btn-disabled';
			var target = '#activity-submit';
			$(target).addClass(DISABLED);
			$(target).attr('disabled', 'disabled');

			$.ajax({
				url: '{:url("add_external_message")}',
				type: 'post',
				data: formData,
				dataType: 'json',
				processData: false,
				contentType: false,
				success: function(res) {
					if(res.code === 0) {
						layer.msg(res.msg, {
							anim: 0
						}, function() {
							parent.layui.table.reload('qunfa-table');
							parent.layer.close(index);
						});
					} else {
						layer.msg(res.msg, {
							anim: 6
						});
					}
				}
			});
		});

		$('#range_people').click(() => {
			let el = $('.mask')[0];
			if (el.className.indexOf('layui-hide') > 0) {
				el.className = 'mask';
			} else {
				el.className = 'mask layui-hide';
			}
		})
		function getchatListData (page = 1) {
			$.ajax({
				url: "{:url('getUserList')}",
				data: {
					page: page,
					limit: 10
				},
				dataType: 'json',
				type: 'post',
				success: function(data) {
					listData = data.data.list;
					$('.first-content')[0].innerHTML = listData.map((v,i) => {
						let il = selectData.filter(o => o.id == v.id);
						if(il.length) {
							return `<div class="item space-between" title="${v.id}">
									<input id="${v.id}" type="checkbox" name="${v.id}" title="${v.name}" lay-skin="primary" style="display:block;" checked/>
									<label for="${v.id}" class="flex-sub">${v.name}</label>
								</div>`
						} else {
							return `<div class="item space-between" title="${v.id}">
									<input id="${v.id}" type="checkbox" name="${v.id}" title="${v.name}" lay-skin="primary" style="display:block;"/>
									<label for="${v.id}" class="flex-sub">${v.name}</label>
								</div>`
						}
					}).join('');
					//执行一个laypage实例
					laypage.render({
						elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
						,count: data.data.count, //数据总数，从服务端得到
						curr: page,
						groups: 3,
						jump: function(obj, first){
							//obj包含了当前分页的所有参数，比如：
							console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
							console.log(obj.limit); //得到每页显示的条数
							//首次不执行
							if(!first){
								getchatListData(obj.curr);
							}
						}
					});
				}
			});
		}
		getchatListData();

		function setSelectDataHtml (data) {
			$('.second-box')[0].innerHTML = data.map((v,i) => {
				return `<div class="item space-between">
							<span>${v.name}</span>
							<i class="layui-icon layui-icon-close" data-index="${i}" data-chatId="${v.id}"></i>   
						</div>`
			}).join('');
		}

		$('.sure').click(() => {
			$('#range_people')[0].innerHTML = selectData.map((v,i) => {
				return v.name;
			}).join(', ');
			$('.mask')[0].className = 'mask layui-hide';
		})

		$('.first-content').click((e) => {
			if (e.target.name) {
				let index = null;
				let o = listData.filter(v => v.id == e.target.name);
				let ol = selectData.filter((v,i) => {
					if (v.id == e.target.name) {
						index = i;
						return v;
					}
				} );
				if (ol.length > 0 && (index || (index == 0))) {
					selectData.splice(index,1);
					setSelectDataHtml(selectData)
				} else {
					selectData.push(...o);
					setSelectDataHtml(selectData)
				}
			}
		});

		$('.second-box').click((e) => {
			if (e.target.localName == 'i') {
				let o = parseInt(e.target.dataset.index);
				selectData.splice(o,1);
				setSelectDataHtml(selectData);
				$(`#${e.target.dataset.chatid}`).prop('checked',false)
			}
		})

		$(document).click((e) => {
			let pl = $('.layui-form-radioed')[0];
			if (pl.innerText == '群发到客户群') {
				let el = $('#range_person')[0];
				let elo = $('#range_people')[0];
				el.className = 'layui-hide'
				elo.className = ''
			} else {
				let el = $('#range_person')[0];
				let elo = $('#range_people')[0];
				el.className = '';
				elo.className = 'layui-hide'
			}
		})

		$('#closeMask').click(() => {
			let el = $('.mask')[0];
			el.className = 'mask layui-hide';
		})

		//选择群发对象
		var approve_ids = xmSelect.render({
			el: "#range_person",
			autoRow: true,
			filterable: true,
			tips: '群发对象',
			toolbar: {
				//工具条,全选,清空,反选,自定义
				show: true,
				list: [
					'ALL',
					'CLEAR',
					'REVERSE'
				]
			},
			// tree: {
			// 	show: true,
			// 	showFolderIcon: true,
			// 	showLine: true,
			// 	indent: 20,
			// 	expandedKeys: [ -3 ],
			// },
			height: "200px",
			data: [{
					children: [],
					id: 1,
					name: "确认量房",
					pid: 0,
					value: 1,
				}, {
					children: [],
					id: 2,
					name: "交定",
					pid: 0,
					value: 2,
				}, {
					children: [],
					id: 3,
					name: "合同",
					pid: 0,
					value: 3,
				}],
			//文本显示模式
			//处理方式
		});

		//多图片上传
		// upload.render({
		// 	elem: '#img',
		// 	accept: 'images',
		// 	url: '/upload/',
		// 	exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
		// 	field: 'article_image',
		// 	size: 5 * 1024,
		// 	auto: false,
		// 	multiple: true,
		// 	choose: function(obj) {
		// 		files = obj.pushFile();
		// 		length = $('.imageDiv').length;
		// 		obj.preview(function(index, file, result) {
		// 			console.log(index)
		// 			console.log(file)
		// 			console.log(result)
		// 			length++;
		// 			if(length > 9) {
		// 				if(length == 10) layer.msg('限制九张图片以下');
		// 				delete files[index];
		// 			} else {
		// 				$.ajax({
		// 					url: "{:url('weworkUpload')}",
		// 					data: {path: result},
		// 					type: 'post',
		// 					success:function (res) {
		// 						if (res.code == 0) {
		// 							img_id_arr.push(index);
		// 							img_id[index] = res.data;
		// 							$('.picDiv').prepend('<div class="imageDiv" data-id="' + index + '"><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="100%" height="100%"><div><i class="layui-icon layui-icon-delete" prop="del"></i></div></div>');
		// 						} else {
		// 							layer.msg(res.msg);
		// 						}
		// 					}
		// 				})
		// 			}
		// 			if (length) {
		// 				$('#imageFiles').removeClass('layui-hide')
		// 			}

		// 		});
		// 	}
		// });

		$('.cancel').click(function () {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		})



		//日期范围
		laydate.render({
			elem: '#start_date',
			trigger: 'click',//呼出事件改成click
			type: 'datetime',
			format: 'yyyy-MM-dd HH:mm'
		});
		
		laydate.render({
			elem: '#end_date',
			trigger: 'click', //呼出事件改成click
			type: 'datetime',
			format: 'yyyy-MM-dd HH:mm'
		});

		form.on('radio(type)', function (data) {
			if (data.value == 1) {
				$('#money').addClass('layui-hide');
			} else {
				$('#money').removeClass('layui-hide');
			}
		});

		$('.picDiv').on('click', 'i', function(e) {
			var that = this;
			if (e.target.attributes[1].nodeValue === 'view') {
				layer.photos({ photos: {"data": [{"src": e.target.attributes[2].nodeValue}]} ,closeBtn:true});
			} else {
				layer.confirm('确定删除该图片么？',{title:['信息', 'color:#333333;background-color:#D8E6F1;'],}, function(index) {
					var imgDiv = $(that).closest('.imageDiv');
					if(id = imgDiv.data('id')) {
						delete files[id];
						var io = img_id_arr.indexOf(id)
						if (io > -1) {
							img_id_arr.splice(io, 1);
						}
					}
					imgDiv.remove();
					layer.close(index);
				});
			}			
		});
	});
</script>
{/block}