crm/app/sys/view/wechat_activity/team.html

{extend name="public/layout" /} {block name="title"}分配{/block} {block name="body"}
<link rel="stylesheet" href="__STATIC__/css/csspc.css">
<link rel="stylesheet" href="__STATIC__/css/font.css">
<link rel="stylesheet" " href=" __STATIC__/css/common.css">
<style>
   html,body{
		background:#F0F4F7;
		font-size: 12px;
        box-sizing: border-box;
        min-width:1200px;
        overflow-x: auto;
	}
	.toptitbox{
        display: block;
        width:1200px;
        padding: 15px 10px;
        border: 1px solid #F0F0F0;
        background: #FCFCFC;
        margin-bottom: 10px;
        position: relative;
        line-height: 28px;
    }
	.golastbtn{
        display: block;
        margin-right: 21px;
        color: #000;
        background: url(__STATIC__/img/btn_bg.gif) repeat-x;
        border: 1px solid #C0C0C0;
        padding: 0 12px;
        padding: 0 6px;
        height: 28px;
        cursor: pointer;
    }
	.mainbox{

    }
	.bodys{
		background-color: #fff;
	}

    .cardheader {
        padding-left: 10px;
    }

    .laytable-cell-1-0-1 {
        height: 32px !important;
        line-height: 32px !important;
    }

    .layui-tree-set,
    .layui-tree-entry {
        margin-top: 5px !important;
    }

    .layui-table tr {
        height: 7vh;
    }

    @media screen and (min-width: 992px) {
        .layui-col-md9 {
            margin-left: 1%;
            width: 74%;
        }
    }

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

    #root-list {
        border-right: 1px solid #f6f6f6;
    }

    #addRoot {
        border-top: 1px solid #f6f6f6;
    }

    .root {
        cursor: pointer;
        text-align: center;
        padding: 10px 1px;
        font-size: 1rem;
        font-weight: bold;
    }

    .root.selected {
        font-size: x-large;
        color: #269efb;
    }

    .root:hover {
        font-size: x-large;
        color: #269efb;
    }

    .layui-form-label {
        width: 150px;
    }

    .layui-input-block {
        margin-left: 180px;
    }

    .strucinfo {
        cursor: pointer;
    }

    .setleader {
        float: right;
        display: none;
    }

    .setleader:hover {
        display: block;
    }

    .leader {
        float: right;
    }

    /*重要 样式*/

    .layui-tree-entry.tree-node-current .layui-tree-main {
        background-color: #d7edbf87;
    }

    /*重要 样式*/

    .layui-btn.layui-btn-success {
        background-color: #009688;
    }

    .filterbutton {
        float: right;
    }

    .layui-layer-content {
        overflow: inherit !important;
    }

    .layui-zz-box {
        border: 1px solid #f2f2f2;
        margin-right: 20px;
    }

    .list>ul:first-child>li>div {
        /*background-color: #f2f2f2;*/
        display: block;
        padding: 5px
    }

    .list li {
        min-width: 150px;
    }

    .list li div {
        padding: 3px;
        padding-right: 5px;
    }

    .list>ul ul {
        margin-left: 15px;
    }

    .list .op {
        float: right;
        margin-left: 2px;
    }

    .list i.op:hover,
    .list i.group:hover,
    .list span:hover {
        cursor: pointer;
    }

    .list span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 184px;
        display: inline-block;
    }

    .list li i:first-child {
        position: relative;
        top: -6px;
        margin-right: 5px;
    }

    .list {
        padding-bottom: 24px;
        padding-right: 24px;
    }

    .everydepart {
        display: block;
        position: relative;
        padding-right: 24px !important;
    }

    .everydepart .checkdiv {
        display: block;
        position: absolute;
        right: 4px;
        top: 10px;
    }

    .addbtn {
        position: absolute;
        display: block;
        width: 48px;
        height: 32px;
        top: 40%;
        left: 50%;
        margin-left: -24px;
    }

    .clearfix {
        clear: both;
    }

    .clearfix::after {
        clear: both;
        content: ' ';
        display: table;
    }

    .clearfix::before {
        content: ' ';
        display: table;
    }

    .height100 {
        height: 100%;
    }

    .showdepartbox {
        /*border: 1px solid #f2f2f2;*/
        width: 64%;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .everynowdepart {
        position: relative;
        height: 32px;
        padding-left: 16px;
        line-height: 32px;
        border-bottom: 1px solid #e9e9e9;
        padding-right: 48px;
    }

    .del {
        position: absolute;
        top: 0;
        right: 0;
        height: 32px;
        width: 48px;
        text-align: center;
        cursor: pointer;
    }

    .rightitlebox {
        padding: 0 8px;
        border-bottom: 1px solid #e4e4e4;
    }

    div {
        box-sizing: border-box;
    }

    .leftcontentbox {
        position: relative;
        height: 100%;
        overflow: hidden;
        width: 36%;
    }

    .rotate {
        transform: rotateY(90deg);
    }

    .layui-zz-box {
        display: block;
        height: 100%;
    }

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

    .keyword {
        height: 35px;
        margin: 4px;
    }

    .keywords {
        height: 35px;
        margin: 4px;
    }

    input[disabled][type="checkbox"]:checked::before {
        content: "\2713";
        background-color: #2196F3;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: 1px solid #2196F3;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        line-height: 18px;
        z-index: 999;
    }

    #range_person{
        height: calc(100vh - 230px);
    }

    .layui-border-left {
        display: inline-block;
        border-left: 5px solid #666666;
        padding-left: 10px;
    }

    .flex {
        display: flex;
        align-items: center;
        padding: 0px 20px;
    }

    .plr20 {
        padding: 0px 20px;
    }

    .circle {
        width: 5px;
        height: 5px;
        background-color: #333;
        border-radius: 50%;
        position: absolute;
        left: 0px;
        top: 10px;
    }

    .relative {
        position: relative;
        height: 30px;
        line-height: 30px;
    }

    .line {
        position: absolute;
        width: 1px;
        height: 30px;
        background-color: #666666;
        left: 2.3px;
        top: 13px;
    }

    .mt10 {
        margin-top: 10px;
    }

    .delcolor {
        color: #249EFB;
    }

    .layui-card .layui-tab-brief .layui-tab-content {
        padding: 8px;
    }

    .dapartbox li {
        width: 50%;
        padding: 0;
    }
	.layui-table td, .layui-table th{width:25%;}
    .layui-table-body{
        height: auto !important;
        overflow: initial;
    }
	.datashow_dl{overflow: hidden;}
	.datashow_dl dd{float:left;padding:8px 20px;border: 1px solid #DCE1E5;color:#555;margin:15px 20px 0 0;border-radius: 4px;}
	.jf_li{float: left;width:380px;margin-top:30px;}
	.layui-card{box-shadow: none;}
	.flex-sub2{align-content:flex-end}
	.flex-sub2 a{text-decoration: underline;color:#535DFD;font-size:14px;}
	.header-nav {
	    display: flex;
	    align-items: center;
	    background-color: #fff;
	    padding: 15px 20px;
	}
	.justify-between {
	    justify-content: space-between;
	}
	.flex {
	    display: flex;
	}
	.justify-center {
	    justify-content: center;
	}
	.align-center {
	    align-items: center;
	}
	.flex-sub {
	    flex: 1;
	}
	.flex-sub a{color:#666;}
	.circleBox {
	    width: 20px;
	    height: 20px;
	    background-color: #000;
	    border-radius: 50%;
	}
	.layui-tab-title,.layui-tab-title .layui-this:after{border: 0 !important;}
	.layui-this a{color:#1e9fff !important;}
	.mr10 {
	    margin-right: 10px;
	}
</style>

<body>
	<div class="layui-tab" style="margin-top: 0;">
	    <div class="header-nav">
	        <div class="mr10 circleBox flex align-center justify-center" style="padding: 0;">
	            <a href="index.html"><i class="layui-icon layui-icon-return"
	                    style="color: #fff;font-size: 14px;"></i></a>
	        </div>
	        <ul class="layui-tab-title flex-sub">
	            <li><a href="setting.html?id={$activity.id}">规则设置</a></li>
	            <li class="layui-this"><a href="team.html?id={$activity.id}">团队设置</a></li>
	            <li><a href="panel_setting.html?id={$activity.id}">控制面板</a></li>
	        </ul>
            {notempty name="activity.course"}
			<div class="flex-sub2">
				<a target="_blank" href="{$url}">打开大屏</a>
				<a style="margin-left:25px;cursor: pointer;" id="Copy" data-urls="{$url}">复制大屏链接</a>
			</div>
            {/notempty}
	    </div>
	    <div class="layui-tab-content" style="padding: 0;">

			
			<div class="layui-tab-item layui-show">
				<div class="layui-fluid">
					<div class="layui-card" style="height: calc(100vh - 140px);">
						
						<div class="mainbox height100_">
						    <div class="bodys wpsr height100_">

						            <div style="overflow: hidden;">
						        
						                <div class="layui-col-md5 layui-col-xs5 layui-col-sm5 leftcontentbox">
						                    <div class="layui-zz-box">
						        
						                        <div class="layui-inline" style="display:block;">
						                            <div class="layui-tab layui-tab-card" lay-filter="maintenanceOrder">
						                                <div class="layui-tab-content">
						                                    <div class="layui-tab-item layui-show lay-dapartbox">
						                                        <div class="list" id="range_person" style="overflow: auto;"></div>
						                                    </div>
						                                </div>
						                            </div>
						                        </div>
						                    </div>
						                </div>
						        
						        
						                <div class="layui-col-md5 layui-col-xs5 layui-col-sm5 showdepartbox" style="overflow: auto;height: calc(100vh - 206px);">
						                    <div class="nowdepartbox1">
						                        <table class="layui-table">
						                             <thead>
						                                 <tr>
						                                     <th>团队名称</th>
						                                     <th>人数</th>
						                                     <th>操作</th>
						                                 </tr>
						                             </thead>
						                             <tbody id="nowdepartbox1">
						                             </tbody>
						                        </table>
						                    </div>
						                </div>
										
						            </div>
						        <div class="plr20 mt10" style="margin-top: 20px;">
						            <button class="layui-btn layuiadmin-btn" style="display: flex;align-items: center;" id="team_submit"> 确定
						            </button>
						        </div>
						       
						    </div>
						</div>
						
					</div>
				</div>
			</div>
			
			

			
		</div>
	</div>
		
    
     
    <script src="__STATIC__/layui/layui/layui.js"></script>
    <script src="__STATIC__/layui/layui/lay/modules/xm-select.js" type="text/javascript" charset="utf-8"></script>

    {/block} {block name="js"}
    <script>
        layui.config({
            base: '__LAYUI__/',
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'jquery', 'table', 'tree', 'layer', 'element', 'form', 'laydate'], function () {
            var table = layui.table,
                tree = layui.tree,
                layer = layui.layer,
                $ = layui.jquery,
                element = layui.element,
                laydate = layui.laydate,
                form = layui.form,
                customertable = [],
				aid = '{$activity.id}';
				
            //点击选择人员
            $(document).on('click', '.leftcontentbox li', function (e) {
				if (e.target.localName === 'i') {
				    let o = $(this).next();
				    if (o && o[0] && o[0].localName === 'ul') {
				        if (!o[0].style.display || o[0].style.display == 'block') {
				            o[0].style.display = 'none';
				            e.target.className = "group layui-icon layui-icon-triangle-r"
				        } else {
				            o[0].style.display = 'block';
				            e.target.className = "group layui-icon layui-icon-triangle-d"
				        }
				    }
				}
				if (!(e.target.localName == 'input')) {
				    return;
				}
				var perclass = $(this).data('perclass');
				var c = $('.' + perclass).prop("checked");
				var id = $(this).data('id');
				var title = $(this).data('title');
				var count = $(this).data('count');
				var select = $(this).data('select');
				var datalist=[];
				if (c == true) {
					datalist.push({
						id:id,
						title:title,
						count:count,
						select:select
					})
					customertable.push(datalist[0])
					leftlist(customertable)
				}else{
					 $('.' + perclass).prop("checked", false);
					 for(var i=0;i<customertable.length;i++){
					 	if(customertable.length>0){
					 		if(customertable[i].id==id){
					 			customertable.splice(i,1)
					 		}
					 	}else{
					 		customertable=[];
					 	}
					 }
					 $('#del' + id).remove();
				}
                
            })	
			
			function leftlist(setdatalist){
				var html = '';
				setdatalist.forEach(function (item, index) {
					istrue = item.select?1:0;
				    html += '<tr data-id=' + item.id + ' id=del' + item.id + '>';
				    html += '<td>' + item.title + '</td>';
					html += '<td>' + item.count + '</td>';
				    html += '<td data-id=' + item.id + ' data-detid="per_org_' + item.id + '"  data-select="'+ istrue +'" class="strucinfo">删除</td>';
				    html += '</tr>';
				})
				$('#nowdepartbox1').html(html);
				
				
				for (let i = 0; i < $('#nowdepartbox1 .strucinfo').length; i++) {
				    $($('#nowdepartbox1 .strucinfo')[i]).off('click').on('click', function (e) {
				        let id = e.currentTarget.dataset.id;
						let detid = e.currentTarget.dataset.detid;
						let select = e.currentTarget.dataset.select;
						$('.'+detid).prop("checked", false);
						for(var i=0;i<customertable.length;i++){
							if(customertable.length>0){
								if(customertable[i].id==id){
									customertable.splice(i,1)
								}
							}else{
								customertable=[];
							}
						}
				        $('#del' + id).remove();
						console.log(select)
						if(select==1){
							$.ajax({
								url: '{:url("wechatActivity/del_team")}',
								type: 'post',
								data: {
									tid:id,
									aid:aid
								},
								dataType: 'json',
								success: function (res) {
									if(res.code === 0) {
										layer.msg(res.msg, {
											time: 300,
											anim: 0
										})
									} else {
										layer.msg(res.msg, {
											anim: 6
											,time: 400
										});
									}
									
								}
							});
						}
						
				    })
				}
				
			}
			

            var operate = {
                struct: function (keyword) {
                    var that = this;
                    that.send({ 'keyword': keyword }, '{:url("WechatActivity/get_orgs",array("aid"=>$activity["id"]))}', function (res) {
                        if (res.code == 0) {
                            if(res.data.length!==0){
                                $('.list').html(that.setStruct(res.data, res.checkOrg));
                            }
                        } else {
                            $('.list').html('<span>' + res.msg + '</span>');
                        }
                    });
                },
                send: function (data, url, callback) {
                    return $.ajax({
                        type: 'post',
                        url: url,
                        data: data,
                        success: function (res) {
                            callback(res)
                        }
                    })
                },
                setStruct: function (data, checkOrg) {
                    var that = this;
                    var arr = checkOrg ? checkOrg.split(',') : [];
                    var html = '<ul>';
                    data.forEach(function (elem, index) {

                        var flag = false;
                        html += '<li data-id="' + elem.id + '" data-title="' + elem.title + '" data-type=' + elem.type + ' data-perclass=' + elem.per_class + ' data-orgclass=' + elem.org_class + ' data-count="' + elem.count + '" data-select="'+elem.select+'"><div class="everydepart">';
                        if (elem.children.length !== 0)
                            html += '<i class="group layui-icon layui-icon-triangle-d"></i>';
                        else
                            html += '<i class="layui-icon layui-icon-user"></i>';
                        html += '<span>' + elem.title + '</span>';

                        for (var i in arr) {
                            if (arr[i] == elem.id) {
                                html += '<input data-did="' + elem.id + '" data-title="' + elem.title + '" data-class=' + elem.class + ' class="checkdiv ' + elem.org_class + ' ' + elem.per_class + '" data-type="' + elem.type + '" type="checkbox" checked/></div>';
                                flag = true;
                            }
                        }

                        if (!flag) {
							if(elem.select){
								html += '<input data-did="' + elem.id + '" data-title="' + elem.title + '" data-class=' + elem.class + ' class="checkdiv ' + elem.org_class + ' ' + elem.per_class + '" id="' + elem.class + '" data-type="' + elem.type + '" type="checkbox" checked/></div>';	
								customertable.push({
									id:elem.id,
									title:elem.title,
									count:elem.count,
									select:elem.select
								})
								leftlist(customertable)
							}else{
								html += '<input data-did="' + elem.id + '" data-title="' + elem.title + '" data-class=' + elem.class + ' class="checkdiv ' + elem.org_class + ' ' + elem.per_class + '" id="' + elem.class + '" data-type="' + elem.type + '" type="checkbox" /></div>';
							}
                            
                        }
                        
                        html += '</li>';
                        if (elem.children.length > 0) {
                            html += that.setStruct(elem.children, checkOrg);
                        }
                    });
                    html += '</ul>';
                    return html
                }
            }

            // 结构初始化
            operate.struct();

            $('#team_submit').on('click',function(){
            	let aid = '{$activity.id}';
            	$.ajax({
            		url: '{:url("WechatActivity/add_team")}',
            		type: 'post',
            		data: {
            			team:customertable,aid:aid
            		},
            		dataType: 'json',
            		success: function (res) {
            			if(res.code === 0) {
            				layer.msg(res.msg, {
            					time: 300,
            					anim: 0
            				})
            			} else {
            				layer.msg(res.msg, {
            					anim: 6
            					,time: 400
            				});
            			}
            			
            		}
            	});
            })


            $("#Copy").on('click',function() {
            	var flag = copyText($(this).attr('data-urls')); //传递文本
            	alert(flag ? "复制成功！" : "复制失败！");
            })
            
            function copyText(text) {
            	var textarea = document.createElement("input");//创建input对象
            	var currentFocus = document.activeElement;//当前获得焦点的元素
            	document.body.appendChild(textarea);//添加元素
            	textarea.value = text;
            	textarea.focus();
            	if(textarea.setSelectionRange)
            		textarea.setSelectionRange(0, textarea.value.length);//获取光标起始位置到结束位置
            	else
            		textarea.select();
            	try {
            		var flag = document.execCommand("copy");//执行复制
            	} catch(eo) {
            		var flag = false;
            	}
            	document.body.removeChild(textarea);//删除元素
            	currentFocus.focus();
            	return flag;
            }

            

        });
    </script>
</body>
{/block}