crm/app/sys/view/daily_tasks/index.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: #fff;
        margin: 17px;
        box-shadow: 0 0 4px 0 #b6cade;
        border-radius: 5px;
        padding: 16px; 
        width: 45%;  
		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: 45px;
    	margin-top: 4px;
    }
    .box-img img {
    	width:40px;
    	height: 40px;
    	margin-right: 10px;
    }
    .box-tips {
    	font-size: 12px;
    }
    .box-operate {
    	width: 150px;
    	height: 100%;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    .box-del {
    	width: 200px;
    	height: 100px;
    	border-left: 1px solid #cccccc;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	color: red;
		padding-left: 10px;
    }
    .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;}
</style>

<body>
    <div class="layui-fluid" style="box-shadow: none;">
		<div class="flex-row">
			<div class="flex-item">  
				<span class="font-weight font24 mt10">{$data.count}</span>
				<span class="">任务总量</span>
			</div>
			<div class="flex-item">
				<span class="font-weight font24 mt10">{$data.ing_count}</span>
				<span class="">任务进行中</span>
			</div>
			<div class="flex-item">
				<span class="font-weight font24 mt10">{$data.pass_count}</span>
				<span class="">已完成</span>
			</div>
			<div class="flex-item">
				<span class="font-weight font24 mt10">{$data.no_count}</span>
				<span class="">逾期任务</span>
			</div>
			<div class="flex-item">
				<span class="font-weight font24 mt10">{$data.grawth}</span>
				<span class="">任务完成率</span>
			</div>
		</div>
        <div class="layui-card" style="margin-top:30px;">
            <div class="layui-card-body">
                <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>
                                <li lay-id="5">视频素材</li>
                                <li lay-id="6">朋友圈</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>
    {/block}
    {block name="js"}
    <script>
        layui.config({
            base: '__LAYUI__/',
            urlbase: '/sys'
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table','laypage','element'], function () {
            var $ = layui.$,
                table = layui.table,
                laypage = layui.laypage,
                element = layui.element,
                form = layui.form;

                var page = 1;//当前页

			//选项卡切换
			  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,'material_case');
			    } else if (index==2) {
			    	active.list(page,'evidencelist');
			    } else if (index==3) {
			    	active.list(page,'article');
			    } else if (index==4) {
			    	active.list(page,'video');
			    } else if (index==5) {
                    active.list(page,'wxshowlist');
                }
			  });
            // table.render({
            //     elem: '#operater',
            //     url: '{:url("dailyTasks/list")}',
            //     page: true,
            //     height: 'full-180',
            //     cols: [
            //         [{
            //             type: 'numbers',
            //             field: 'id',
            //             fixed: 'left',
            //             title: '序号',
            //         }, {
            //             field: 'title',
            //             title: '标题',
            //         }, {
            //             field: 'con',
            //             title: '描述',
            //         }, {
            //             field: 'end_date',
            //             title: '最迟结束时间',
            //         }, {
            //             title: '操作',
            //             width: 240,
            //             align: 'center',
            //             fixed: 'right',
            //             toolbar: '#op'
            //         }]
            //     ],
            //     text: '对不起，加载出现异常！'
            // });

            var active = {
            	list:function(page,type=''){
					$.ajax({
						url: '{:url("dailyTasks/list")}?page='+page+'&type='+type,
						type: 'get',
						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-title'>"+elem.type_name+"</div>";
										html += 	  "<span class='box-little'>"+elem.title+"</span>";
										html += 	  "<div class='box-content'>"+elem.con+"</div>";
										html +=		  "<div class='box-img'>";
											for(var i=0;i<elem.img.length;i++){
										html +=			"<img src="+elem.img[i]+" />";	 
											}
										html +=		  "</div>";
										html +=       "<div class='box-tips'>";
										html +=		    "<span>最晚完成时间："+elem.end_date+"</span>";
										html +=		    "<span class='ml10'>状态："+elem.state+"</span>";
										html +=		    "<span class='ml10'>执行人员："+elem.all_count+"人</span>";
										html +=		    "<span class='ml10'>执行情况：<a class='color249EFB' data-type="+elem.type+"  data-id="+elem.id+">"+elem.count+"/"+elem.all_count+"</a></span>";
										html +=		"</div>";
										html +=   "</div>";
										html +=   "<div class='box-operate'>";
										if (elem.state=='已结束') {
											html +=     "<div class='box-del' >已过期无法删除</div>";
										} else{
											html +=     "<div class='box-del del_task' data-id="+elem.id+">删除</div>";
										}
										
										html +=	  "</div>";
										html += "</div>";
											
									});
									$('#con').empty();
									$('#con').html(html);
									active.page(res.count);
								}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("dailyTasks/del_task")}?eid='+id,
					data: {
						// select_id:id,type:type,res:res
					},
					type: 'get',
					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}