jucai/resources/views/admin/jobfair/jobfair.blade.php

<link rel="stylesheet" href="{{ theme_asset('app/css/jobfair/DrawingManager_min.css') }}"/>
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="row">
    <div class="col-md-12">
        {{--<div class="box box-info">--}}
           {{--<div class="box-header with-border">--}}
                {{--招聘会--}}
            {{--</div>--}}
            {{--<div class="box-body">--}}
                {!! $content !!}
            {{--</div>--}}
        {{--</div>--}}
    </div>
</div>
<style type="text/css">
    .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
    .clearfix{zoom:1;  /*为了兼容IE*/}
	.content .jobfair-item{width: 190px;height: 227px;border:1px solid #ddd;padding: 10px;float: left;text-align: center;margin-left: 20px;margin-bottom: 20px;}
	.content .jobfair-item .imgbox{width: 170px;height: 140px;margin-bottom: 10px;border: 1px solid #ddd;padding: 2px;}
	.content .jobfair-item img{width: 170px;height: 140px;}
	.content .jobfair-item .jobfair-name{margin-bottom: 5px;}
    .content .jobfair-item .jobfair-name input{height: 30px;line-height: 30px;width:170px;border:1px solid #ddd;color: #2282D9;}
    .content .jobfair-item .edit{color: #2282D9;cursor:pointer;margin-right: 30px;}
    .content .jobfair-item .delete{color: #666666;cursor:pointer;}
    .modal-dialog{width: 1030px !important;}
    .modal-dialog .modal-footer{text-align: center;}
    .modal-dialog .modal-title{text-align: center;color: #2282D9;}
    .batch-operation .tips{float: left; color: #999999;line-height: 34px;margin-left: 10px;}
    .jobfairbox{width: 1002px;height: auto;min-height: 800px;border: 1px solid #ccc;background-color: #fff;position: relative;}
	.jobfairbox .floorplanImg{max-width: 1000px;}
	.jobfairbox .del{background:#ffffff url("{{ theme_asset('app/images/252.png') }}")no-repeat center;width: 18px;height: 18px;border-radius: 10px;display: inline-block;background-size: 16px;position: absolute;left: 22px; top: -12px;cursor: default;display: none;}
    .jobfairbox .sign{position: absolute;left: 6px;bottom: -15px;width: 20px;text-align: center;font-size: 12px;color: #3c8dbc;}
    .jobfairbox .status-edit{background:#ffffff url("{{ theme_asset('app/images/253.png') }}")no-repeat center;width: 18px;height: 18px;border-radius: 10px;display: inline-block;background-size: 16px;position: absolute;left: -8px; top: -12px;cursor: default;display: none;}
    .jobfairbox .zw-box:hover .del,.jobfairbox .zw-box:hover .status-edit{display: block;}
	.jobfairbox .zw-box{display:inline-block;width: 30px;height: 30px;position: absolute;}
    .jobfairbox .zw-box.zw-lock{background: url("{{ theme_asset('app/images/jobfair/zw-stayLock.png') }}")no-repeat;}
    .jobfairbox .zw-box.zw-order{background: url("{{ theme_asset('app/images/jobfair/zw-order.png') }}")no-repeat;}
    .jobfairbox .zw-box.zw-audit{background: url("{{ theme_asset('app/images/jobfair/zw-audit.png') }}")no-repeat;}
    .jobfairbox .zw-box.zw-success{background: url("{{ theme_asset('app/images/jobfair/zw-success.png') }}")no-repeat;}
    .jobfairbox .zw-box .zw-num{position: absolute;left: 0px;top: 5px;width: 30px;height: 16px;background: transparent;border: none;text-align: center;}
	.jobfairbox .zw-box.zw-lock .zw-num{color: #fff;}
	.jobfairbox .zw-box.zw-order .zw-num{color: #333;}
    .jobfairbox .zw-box.zw-audit .zw-num{color: #333;}
    .jobfairbox .zw-box.zw-success .zw-num{color: #333;}
</style>

<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
          <div class="clearfix batch-operation">
              <label class="col-sm-2  control-label" style="width: 158px;line-height: 34px;">批量修改展位状态：</label>
              <div class="input-group" style="float: left;width: 400px;">
                  <span class="input-group-addon"><i class="fa fa-pencil fa-fw"></i></span>
                  <input type="text" class="form-control" id="batch_reserved" placeholder="请用 - 分隔输入展位区间">
              </div>
              <div class="btn-group pull-left">
                  <button type="button" class="btn btn-primary batch_order_btn">改为预定</button>
              </div>
              <div class="btn-group pull-left" style="margin-left: 20px;">
                  <button type="button" class="btn btn-primary batch_lock_btn">改为锁定</button>
              </div>
              <div class="tips">请输入展位图下方编号，用"-"分隔，例如 5-20 ，则修改 5 到 20 的所有展位状态</div>
          </div>
          <div class="jobfairbox" id="jobfairShow" oncontextmenu="return false" data-jobfairmanage="true">
          </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary save">保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <input type="hidden"  value="" />
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="{{ theme_asset('app/js/drag.js') }}"></script>
<script type="text/javascript" src="{{ theme_asset('app/js/jobfair.js') }}"></script>
<script type="text/javascript" src="{{ theme_asset('app/js/jobfair/DrawingManager_min.js') }}"></script>
<script>

    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }
    var map = new BMap.Map("container");
    var map_x = $("#x").val();
    var map_y = $("#y").val();
    var map_zoom = $("#zoom").val();
    var address_id = $("#address").val();
    var mPoint = new BMap.Point(map_x,map_y);
    map.centerAndZoom(mPoint,map_zoom);
    map.enableScrollWheelZoom(true);
    map.addControl(new BMap.NavigationControl());

    if(address_id){
        sear(address_id);
        $("#address").focus(function () {
            var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                {"input" : "address"
                    ,"location" : map
                });
            var myValue;
            ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                console.log(_value);
                myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                $("#address").val(myValue);
                G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                sear(myValue);
            });
        })
    } else {
        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {"input" : "address"
                ,"location" : map
            });
        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

            sear(myValue);
        });
    }


    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, map_zoom);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

    function sear(result){//地图搜索
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        local.search(result);
    }

    $(document).ready(function() {
        $('.is_commonweal').on('ifCreated', function(){
            if(true == $(this).is(':checked')){
                var commonweal = $(this).val();
                if(commonweal == 3){
                    $('#predetermined_point').closest(".form-group").css('display','none');
                    $('#jobsfair_num').closest(".form-group").css('display','none');
                    $('#nosign_point').closest(".form-group").css('display','none');
                    $('#late_point').closest(".form-group").css('display','none');
                }else{
                    $('#predetermined_point').closest(".form-group").css('display','block');
                    $('#jobsfair_num').closest(".form-group").css('display','block');
                    $('#nosign_point').closest(".form-group").css('display','block');
                    $('#late_point').closest(".form-group").css('display','block');
                }
            }
        });
        $('.is_commonweal').on('ifChecked', function(){
            var commonweal = $(this).val();
            if(commonweal == 3){
                $('#predetermined_point').closest(".form-group").css('display','none');
                $('#jobsfair_num').closest(".form-group").css('display','none');
                $('#nosign_point').closest(".form-group").css('display','none');
                $('#late_point').closest(".form-group").css('display','none');
            }else{
                $('#predetermined_point').closest(".form-group").css('display','block');
                $('#jobsfair_num').closest(".form-group").css('display','block');
                $('#nosign_point').closest(".form-group").css('display','block');
                $('#late_point').closest(".form-group").css('display','block');
            }
        });
    });

    $(function () {
   		var tpl = document.getElementById('thumbnailTpl');
       	$("select[name='areaid']").change(function () {
           var id = $(this).val();
           $.ajax({
               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
               url:"{{route('jobfair.add')}}",
               type:'post',
               data:{
                 id:id,
               },
               dataType: 'json',
               success:function(result){
                   console.log(result);
                   if(result.code==0){
                       swal(result.info, '', 'error');
                   }else{
                   	tpl.content.querySelector('[name="jobfairName[]"]').value=result.data.name;
                   	tpl.content.querySelector('img').src='/storage/'+result.data.images;
                    tpl.content.querySelector('strong').setAttribute("ls",result.data.id);
                    tpl.content.querySelector('.jobfair-item').setAttribute("data-id",result.data.unique_id);
                    tpl.content.querySelector('[name="thumbnailId[]"]').value=result.data.value;
                    tpl.content.querySelector('[name="thumbnailImg[]"]').value=result.data.images;
                   	var clone = document.importNode(tpl.content, true);
                   	document.getElementById("position_id").appendChild(clone);
                   }
               }
           });
       	})
       	//举办场地平面图编辑
       	$("#position_id").on("click",".edit",function(){
       		var $parent = $(this).closest(".jobfair-item");
       		var thisId = $parent.data("id");
       		//console.log(thisId)
       		var positionArr = $parent.find('[name="thumbnailId[]"]').val();
       		var imageUrl = $parent.find("img").attr("src");
       		var name = $parent.find(".jobfair-name input").val();
	       	positionArr =JSON.parse(positionArr); 
	       	//console.log(positionArr);
           	for(var i = 0;i<positionArr.length;i++){
           	    var type = positionArr[i].type;
           	    var status = positionArr[i].status;
                var zwClass="";
                if(status ==undefined){
                    status=0;
                }
                //type  1可预定，2预留
                //status  1可预定，2审核中，3预定成功，4预留
           	    if((type ==1 &&status ==1)||(type ==1 &&status ==0)){
                    zwClass = "zw-order";
                }else if((type ==2 &&status ==4)||(type ==2 &&status ==0)){
                    zwClass = "zw-lock";
                }else if(status ==2){
                    zwClass = "zw-audit";
                }else if(status ==3){
                    zwClass = "zw-success";
                }
	            //var zwClass = positionArr[i].type==1?"zw-order":"zw-lock";
	            var id = positionArr[i].id!=undefined?positionArr[i].id:0;
	            var jobfairHtml= '<a class="zw-box '+zwClass+'" data-id="'+id+'" data-status="'+status+'" data-type="'+positionArr[i].type+'" data-index="'+positionArr[i].sortindex+'" data-equipment="'+positionArr[i].equipment_id+'" style="left:'+positionArr[i].left+';top:'+positionArr[i].top+';">'+
                    '<span class="status-edit"><\/span>'+
                    '<span class="del"><\/span>'+
                    '<span class="sign">'+(i+1)+'<\/span>'+
	                '<input type="text" class="zw-num" value="'+positionArr[i].name+'"\/><\/a>';
	            $('.jobfairbox').append(jobfairHtml);
	        }
           	var bgImg = '<img class="floorplanImg" src="'+imageUrl+'" />';
		    $('.jobfairbox').append(bgImg);;
		    $("#myModalLabel").html(name);
		    $(".modal-footer input:hidden").val(thisId);
        
       	})
        //展位批量修改为预定
        $(".batch_order_btn").click(function () {
            batchOperation(2);
        })
        //展位批量修改为预留
        $(".batch_lock_btn").click(function () {
            batchOperation(1);
        })
        //批量操作
        function batchOperation(operaType) {
            var reservedValue = $("#batch_reserved").val();
            var reservedArr =reservedValue.split("-");
            var  tempArr = [];
            for(var i=parseInt(reservedArr[0]) ;i<=parseInt(reservedArr[1]);i++){
                tempArr.push(i);
            }
            for(var i=0;i<$(".zw-box").length;i++){
                var parentZwbox= $(".zw-box").eq(i);
                var status = parentZwbox.data("status");
                var zwNum =parseInt(parentZwbox.find(".sign").text());
                for(var k= 0;k<tempArr.length;k++){
                    if(zwNum ==tempArr[k]){
                        if(status ==2||status ==3){
                            swal('请重新输入', '审核中或已预定展位不能修改展位状态！', 'warning');
                            return false;
                        }else{
                            if(operaType==1){
                                parentZwbox.removeClass("zw-order").addClass("zw-lock");
                                parentZwbox.data("type",2);
                                parentZwbox.data("status",4);
                            }else if(operaType==2){
                                parentZwbox.removeClass("zw-lock").addClass("zw-order");
                                parentZwbox.data("type",1);
                                parentZwbox.data("status",1);
                            }
                        }
                    }
                }
            }
        }

        //修改展位状态
        $(document).off("click",".status-edit").on("click",".status-edit",function(){
            var parentZwbox =$(this).closest(".zw-box");
            var type = parentZwbox.data("type");
            var status = parentZwbox.data("status");
            //type  1可预定，2已预留
            //status  1可预定，2审核中，3预定成功，4预留
            if(status ==2||status ==3){
                swal('审核中或已预定展位不能修改展位状态！', '', 'warning');
                return false;
            }
            if(type==1){
                swal({
                    title:'确定修改为预留吗？',
                    text:'',
                    type:'warning',
                    showCancelButton:true,
                    confirmButtonText:'确定',
                    cancelButtonText:'取消'
                }).then(function(isConfirm){
                    if(isConfirm.value){
                        parentZwbox.removeClass("zw-order").addClass("zw-lock");
                        parentZwbox.data("type",2);
                        parentZwbox.data("status",4);
                    }
                })
            }
            if(type==2){
                swal({
                    title:'确定修改为可预订吗？',
                    text:'',
                    type:'warning',
                    showCancelButton:true,
                    confirmButtonText:'确定',
                    cancelButtonText:'取消'
                }).then(function(isConfirm){
                    if(isConfirm.value){
                        parentZwbox.removeClass("zw-lock").addClass("zw-order");
                        parentZwbox.data("type",1);
                        parentZwbox.data("status",1);
                    }
                })
            }

        })
       	//举办场地平面图删除
       	$("#position_id").on("click",".delete",function(){
       		$(this).closest(".jobfair-item").remove();
       	})
       	//模态框隐藏时清除数据
       	$('#myModal').off('hidden.bs.modal').on("hidden.bs.modal", function() { 
		    $('#myModal .jobfairbox').html('');
		    $('#myModal .modal-title').html('');
		    $(this).removeData("bs.modal"); 
		})
		//模态框保存
       $(".modal .save").click(function(){
       	var modalId = $(this).parent().find("input:hidden").val();
       	var zwArr = [];
		$("#jobfairShow .zw-box").each(function(){
			var left = $(this).css("left");
			var top = $(this).css("top");
			var name = $.trim($(this).find(".zw-num").val());
			var type = $(this).data("type");
            var status = $(this).data("status");
			var id = $(this).data("id");
            var equipmentId = $(this).data("equipment");
            var sortindex = $(this).data("index");
			var  positionObj = {
				id:id,
				name:name,
				type:type,
                status:status,
				left:left,
				top:top,
                equipment_id:equipmentId,
                sortindex:sortindex,
			}
			zwArr.push(positionObj);
		})

        $('.jobfair-item[data-id="'+modalId+'"]').find('[name="thumbnailId[]"]').val(JSON.stringify(zwArr));
        $('#myModal').modal('hide');
       })
    })

</script>