gaoyixia/application/operate/view/recruit/form2.html

{extend name='admin@main'}
{block name="content"}
{include file='mall@store_goods/form_style'}
<header>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .layui-form-radio{
            margin: 0 !important;
            padding-right:0 !important;
        }
        .layui-form-select{
            margin-right: 10px !important;
        }
        .layui-col-xs9{
            width: 90%;
        }

        .amap-icon img,
        .amap-marker-content img{
            width: 25px;
            height: 34px;
        }

        .marker {
            position: absolute;
            top: -20px;
            right: -118px;
            color: #fff;
            padding: 4px 10px;
            box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
            white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #25A5F7;
            border-radius: 3px;
        }

        .input-card{
            width: 18rem;
            z-index: 170;
        }

        .input-card .btn{
            margin-right: .8rem;
        }

        .input-card .btn:last-child{
            margin-right: 0;
        }

        .input-item-text, input[type=text], input[type=date], select {
            height: calc(3rem + 2px) !important;
        }


    </style>
</header>
<form onsubmit="return false;" id="GoodsForm" data-auto="true" method="post" class='layui-form layui-card' autocomplete="off">
    <div class="layui-card-body think-box-shadow padding-left-40">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">招聘设置</li>
            </ul>
            <div class="layui-tab-content">
                <!--基础设置-->
                <div class="layui-tab-item layui-show">

                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative" style="width: 100%;">
                            <span class="color-green">分类</span>
                        </label>
                        <div style="width: 100%">
                            <div style="width: 15%;float: left;">
                                <select class="layui-select"  id="first_classify" name="first_classify" lay-filter="first_classify" lay-search>
                                    <option selected data-first_key="-1" selected value="0">请选择</option>
                                    {if !empty($cate_tree)}
                                    {foreach $cate_tree as $ck=>$cv}
                                    {if isset_full_check($vo,'first_classify',$cv['id'])}
                                    <option selected data-first_key="{$ck}" value="{$cv['id']}">{$cv['title']}</option>
                                    {else}
                                    <option data-first_key="{$ck}" value="{$cv['id']}">{$cv['title']}</option>
                                    {/if}
                                    {/foreach}
                                    {/if}
                                </select>
                            </div>
                            <div style="width: 15%;float: left">
                                <select class="layui-select"  id="second_classify" name="second_classify" lay-filter="second_classify" lay-search>

                                </select>
                            </div>
                            <div style="width: 15%;float: left">
                                <select class="layui-select"  id="third_classify" name="third_classify" lay-filter="third_classify" lay-search>

                                </select>
                            </div>
                            <input type="hidden" id="first"  value="{$vo.first_classify|default='-1'}"/>
                            <input type="hidden" id="second" value="{$vo.second_classify|default='-1'}"/>
                            <input type="hidden" id="third"  value="{$vo.third_classify|default='-1'}"/>
                        </div>
                    </div>

                    <div class="layui-form-item layui-row layui-col-space15">

                        <label class="layui-col-xs9 relative">
                            <span class="color-green">地址</span>
                        </label>
                        <div class="layui-inline" style="top: -15px;margin-bottom: -25px">
                            <div class="layui-input-inline">
                                <select name="province" lay-filter ="province">
                                    <option value="0">请选择</option>
                                    {foreach $all_area as $ak=>$cv}
                                    {if  isset($vo.province) && $vo.province == $cv['name'] }
                                    <option selected data-al_key="{$ak}" value="{$cv['name']}">{$cv['name']}</option>
                                    {else}
                                    <option data-al_key="{$ak}" value="{$cv['name']}">{$cv['name']}</option>
                                    {/if}
                                    {/foreach}
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="city" lay-filter ="city">
                                    <option value="0">请选择</option>
                                    {foreach $all_area as $ck=>$cv}
                                    {if isset($vo.province) && $vo.province == $cv['name'] }
                                    {foreach $cv['children'] as $clk=>$cln}
                                    {if isset($vo.city) && $vo.city == $cln['name'] }
                                    <option selected data-bl_key="{$clk}" value="{$cln['name']}">{$cln['name']}</option>
                                    {else}
                                    <option data-bl_key="{$clk}" value="{$cln['name']}">{$cln['name']}</option>
                                    {/if}
                                    {/foreach}
                                    {/if}
                                    {/foreach}
                                </select>
                            </div>



                            <div class="layui-input-inline">
                                <select name="county" lay-filter ="county">
                                    <option value="0">请选择</option>
                                    {foreach $all_area as $ck=>$cv}
                                    {if isset($vo.province) && $vo.province == $cv['name']}
                                    {foreach $cv['children'] as $cln}
                                    {if isset($vo.city) && $vo.city == $cln['name']}
                                    {foreach $cln['children'] as $dln}
                                    {if isset($vo.county) && $vo.county == $dln['name'] }
                                    <option selected  value="{$dln['name']}">{$dln['name']}</option>
                                    {else}
                                    <option  value="{$dln['name']}">{$dln['name']}</option>
                                    {/if}
                                    {/foreach}
                                    {/if}
                                    {/foreach}
                                    {/if}
                                    {/foreach}
                                </select>
                            </div>

                            <div class="layui-input-inline">
                                <input name="address" style="width: 400px" required class="layui-input" placeholder="请输入公司地址" value="{$vo.address|default=''}">
                            </div>
                        </div>
                    </div>


                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative">
                            <span class="color-green">地图</span>
                            <div>
                                <div id="container" style="width:100%; height: 500px;"></div>
                                <div id="myPageTop">
                                    <table>
                                        <tr>
                                            <td>
                                                <label>请输入关键字：</label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input id="tipinput"/>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="layui-input-inline">
                                <input type="hidden" id="longitude" name="longitude"  value="{$vo.longitude|default=''}">
                                <input type="hidden" id="latitude" name="latitude"  value="{$vo.latitude|default=''}">
                                <input id='lnglat' type="hidden" value="{$vo.longitude|default=''},{$vo.latitude|default=''}">
                            </div>
                        </label>
                    </div>


                    <div class="layui-form-item text-center">
                        {notempty name='vo.id'}<input type="hidden" name="id" value="{$vo.id}">{/notempty}
                        <button class="layui-btn" type="submit">保存</button>
                        <button class="layui-btn layui-btn-danger" type='button' onclick="history.go(-1)" data-close>返回</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</form>
{/block}

{block name='script'}
<textarea class="layui-hide" id="goods-specs">{$vo.specs|raw|default=''}</textarea>
<textarea class="layui-hide" id="goods-value">{$defaultValues|raw|default=''}</textarea>
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=5295cbb966c063bde1ed33c1de7ed6bd"></script>


<script>
    layui.config({}).extend({}).use(['index', 'form'], function(){ var $ = layui.$,form = layui.form;})
    var  longitude = "{$vo.longitude|default='118.356655'}";
    var  latitude = "{$vo.latitude|default='35.102929'}";
    window.init = function(){
        var marker, map = new AMap.Map('container', {
            center:[longitude,latitude],
            resizeEnable: true,
            zoom:13
        });

        addMark(longitude,latitude)
        map.on( 'click',  function (e) {
            lnglatInput.value = e.lnglat.toString();
            var inputVal = lnglatInput.value.split(',');
            clearMarker();
            addMark(inputVal[0], inputVal[1])
            $("longitude").value =inputVal[0] ;
            $("latitude").value = inputVal[1];
        });
        var $ = function(elementId){
            return document.getElementById(elementId);
        };
        var lnglatInput = $('lnglat');
        var pixelInput = $('pixel');
        lnglat2container();
        // 经纬度坐标转成容器像素坐标
        function lnglat2container() {
            if(!lnglatInput.value) return
            var inputVal = lnglatInput.value.split(',');
            var lnglat = new AMap.LngLat(inputVal[0], inputVal[1]);
            var pixel = map.lngLatToContainer(lnglat);
            pixelInput.value = pixel.round();
        }
        // 添加mark
        function addMark(lng,pix) {
            console.log(lng,pix)
            if(!lng || !pix) return ;
            marker = new AMap.Marker({
                icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                position: [lng, pix],
                offset: new AMap.Pixel(-13, -30)
            });
            marker.setMap(map);
        }
        // 清除 marker
        function clearMarker() {
            if (marker) {
                marker.setMap(null);
                marker = null;
            }
        }


        AMap.service(["AMap.PlaceSearch"], function() {
            //构造地点查询类
            var placeSearch = new AMap.PlaceSearch({
                pageSize: 5, // 单页显示结果条数
                pageIndex: 1, // 页码
                city: "010", // 兴趣点城市
                citylimit: true,  //是否强制限制在设置的城市内搜索
                map: map, // 展现结果的地图实例
                panel: "panel", // 结果列表将在此容器中进行展示。
                autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            });
            //关键字查询
            placeSearch.search('北京');
        });


    }


</script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=5295cbb966c063bde1ed33c1de7ed6bd&callback=init"></script>
<script src="https://webapi.amap.com/js/require.js" data-main="./require-init"></script>
<script src="https://webapi.amap.com/loader.js"></script>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=5295cbb966c063bde1ed33c1de7ed6bd&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>




<script>
    window.form.render();

    layui.use('form', function () {
        var form = layui.form;
        //日期时间范围
        laydate.render({
            elem: '#start_time'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#end_time'
            ,type: 'datetime'
        });
    })

    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element;
        var active = {
            tabAdd: function(){
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0)
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime()
                })
            }
            ,tabDelete: function(othis){
                element.tabDelete('demo', '44');
                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                element.tabChange('demo', '22');
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });
    require(['ckeditor', 'angular'], function () {
        window.createEditor('[name="content"]', {
            height: 500,

        });
    })


    // 添加设置
    $(document).on('click',".add_goods_no",function () {
        var knum = $('.no_html tr').length;
        var no_html = get_ht(knum);
        $(".no_html").append(no_html);
        form.render();
        console.log(a);// 别删这个！！！
    })
    // 删除设置
    $(document).on('click',".del_no",function (){
        var knum = $('.no_html tr').length;
        if(knum == 1) {
            layer.msg('不能全部删除！')
            form.render();
            console.log(a);// 别删这个！！！
        }
        var index= $(".del_no").index(this);
        $(".no_detail").eq(index).remove();
        form.render();
        console.log(a);// 别删这个！！！
    })
    var is_add = parseInt('{$isAddMode|default=0}');
    if(is_add){
        $(".no_html").html(get_ht(0));
    }else{
        var ladder = {:json_encode($ladder)};
        if(ladder && ladder.length > 0) {
            var no_html = '';
            $.each(ladder,function (lk,lv) {
                no_html  += ' <tr  class="no_detail change_del" data-dh ="'+lk+'">';
                no_html  +=     "<td class='text-left nowrap'>" +
                    "<input type='text'  class='layui-input' name='ladder_title[]' value='"+lv.ladder_title+"'/>" +
                    "</td>";
                no_html  +=     "<td class='text-left nowrap'>" +
                    "<input type=''  class='layui-input' name='ladder_num[]' value='"+lv.ladder_num+"'/>" +
                    "</td>";
                no_html  +=     "<td class='text-left nowrap'>" +
                    "<input type=''  class='layui-input' name='ladder_price[]' value='"+lv.ladder_price+"'/>" +
                    "</td>";
                no_html  +=     "<td class='text-left nowrap'>" +
                    "<a class=\"layui-btn layui-btn-sm layui-btn-danger del_no\">删 除</a>" +
                    "<a class=\"layui-btn layui-btn-sm layui-btn-sm add_goods_no\">添 加</a>" +
                    "</td>"
                no_html  += "</tr>";
            })
            $(".no_html").html(no_html);
        }else{
            $(".no_html").html(get_ht(0));
        }
        window.form.render();
    }
    function  get_ht(k) {
        var award_length = $(".no_detail").length;
        var no_html = '';
        no_html  += ' <tr  class="no_detail change_del" data-dh ="'+k+'">';
        no_html  +=     "<td class='text-left nowrap'>" +
            "<input type='text'  class='layui-input' name='ladder_title[]' value=''/>" +
            "</td>";
        no_html  +=     "<td class='text-left nowrap'>" +
            "<input type=''  class='layui-input' name='ladder_num[]' value=''/>" +
            "</td>";
        no_html  +=     "<td class='text-left nowrap'>" +
            "<input type=''  class='layui-input' name='ladder_price[]' value=''/>" +
            "</td>";
        no_html  +=     "<td class='text-left nowrap'>" +
            "<a class=\"layui-btn layui-btn-sm layui-btn-danger del_no\">删 除</a>" +
            "<a class=\"layui-btn layui-btn-sm layui-btn-sm add_goods_no\">添 加</a>" +
            "</td>"
        no_html  += "</tr>";
        return   no_html;
    }

    //地址监听
    var goods_spec  = {:json_encode($all_area)};
    form.on('select(province)', function(data){
        var cl_html = '<option value="0">请选择</option>';
        if(data.value == 0) {
            $("select[name='city']").html(cl_html);
            $("select[name='county']").html(cl_html);
        }else{
            var cl_key =  data.elem[data.elem.selectedIndex].dataset.al_key;
            $.each(goods_spec[cl_key]['children'],function (ck,cv) {
                cl_html +='<option data-bl_key="'+ck+'" value="'+cv.name+'">'+cv.name+'</option>';
            })
            $("select[name='city']").html(cl_html);
        }
        $("select[name='county']").html('');
        window.form.render();
    });

    form.on('select(city)', function(data){
        second()
    })

    function  second() {
        var cl_html = '<option value="0">请选择</option>';
        var first_key  = $("select[name='province']").find("option:selected").data("al_key");
        var second_key  = $("select[name='city']").find("option:selected").data("bl_key");

        console.log(first_key,second_key)
        var to_each = goods_spec[first_key]['children'][second_key]['children'];
        console.log(to_each);
        $.each(to_each,function (ck,cv) {
            cl_html +='<option value="'+cv.name+'">'+cv.name+'</option>';
        })
        $("select[name='county']").html(cl_html);
        window.form.render();

    }


    // 三级分类联动 start
    var sel_second  = {:isset($vo['second_classify']) ? $vo['second_classify']:0};
    var sel_third   = {:isset($vo['third_classify']) ? $vo['third_classify']:0};
    var goods_spec  = {:json_encode($cate_tree)};
    first_c(1);
    function first_c(source){
        // 将其他选择框置空
        var first_key = $("select[name='first_classify']").find("option:selected").data("first_key")
        $("#first").val(first_key);
        $("select[name='second_classify']").html('');
        $("select[name='third_classify']").html('');
        $("select[name='fourth_classify']").html('');
        // 没有下级不继续
        if(first_key == -1 || !("children" in goods_spec[first_key])){
            $("#second").val(-1);
            $("#third").val(-1);
            window.form.render();
            return true;
        }else{
            var second_html = '<option data-second_key="-1" selected value="0">请选择分类</option>';
            var to_each =  goods_spec[first_key]['children'];
            $.each(to_each,function (ck,cv) {
                if(source == 1 && sel_second == cv.id){
                    second_html +='<option selected data-second_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
                    $("#second").val(ck);
                }else{
                    second_html +='<option data-second_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
                }
            })
            $("select[name='second_classify']").html(second_html);
            window.form.render();
            second_c(source);
        }
    }
    function second_c(source){
        var first_key  = $("select[name='first_classify']").find("option:selected").data("first_key");
        var second_key  = $("select[name='second_classify']").find("option:selected").data("second_key");
        // 将其他选择框置空
        $("#second").val(second_key);
        $("select[name='third_classify']").html('');
        $("select[name='fourth_classify']").html('');
        // 没有下级不继续
        if(second_key == -1 ||  !("children" in  goods_spec[first_key]['children'][second_key])){
            $("#third").val(-1);
            window.form.render();
            return true;
        }
        var to_each = goods_spec[first_key]['children'][second_key]['children'];
        var third_html = '<option data-third_key="-1" selected value="0">请选择分类</option>';
        $.each(to_each,function (ck,cv) {
            if(source == 1 && sel_third == cv.id){
                third_html +='<option selected data-third_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
                $("#third").val(ck);
            }else{
                third_html +='<option data-third_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
            }

        })
        $("select[name='third_classify']").html(third_html);
        $("select[name='fourth_classify']").html('');
        window.form.render();
    }
    // 一级分类监听
    form.on('select(first_classify)', function(data){
        var first_key =  data.elem[data.elem.selectedIndex].dataset.first_key;
        //与之前选择的一样不处理
        if($("#first").val() == first_key){
            return true;
        }
        first_c(2);
    })
    // 二级分类监听
    form.on('select(second_classify)', function(data){
        var second_key  = data.elem[data.elem.selectedIndex].dataset.second_key;
        //与之前选择的一样不处理
        if($("#second").val() == second_key){
            return true;
        }
        second_c(2)
    })
    // 三级分类end



</script>
{/block}