crm/app/sys/view/construction/edit.html

{extend name="public/layout"/} {block name="title"}在施工地{/block} {block name="body"}
<link rel="stylesheet" href="__STATIC__/css/font.css">
<style>
    html {
        background: #fff;
        height: 100%;
    }

    .mdt30 {
        margin-top: 30px;
    }

    .mdt20 {
        margin-top: 20px;
    }

    .kgsjinput {
        width: 80px;
        height: 38px;
    }

    .ids {
        display: inline-block;
    }

    .mdlr10 {
        margin: 0 10px;
    }

    .layui-input-block input, .layui-upload-drag, .sjsselect, .layui-input:hover, .layui-textarea:hover {
        border: 1px solid #d8d8d8 !important;
    }

    .layui-form-label, .input::placeholder, input::-webkit-input-placeholder {
        color: #333;
    }

    .sjsselect {
        width: 100%;
        height: 38px;
    }

    .layui-form-box {
        width: 94%;
        margin: 0 auto;
        display: block;
    }

    .layuiSubmit {
        margin-left: 110px;
        padding: 0 30px !important;
        display: block;
    }

    .layui-input:focus, .layui-textarea:focus {
        border: 1px solid #333 !important;
    }

    .mdl10 {
        margin-left: 10px;
    }

    .layui-upload-drag {
        height: 32px;
        padding: 30px 18px;
        line-height: 32px;
    }

    .addImages {
        display: inline-block;
        width: 92px !important;
        height: 88px !important;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px dashed darkgray;
        background: #f8f8f8;
        position: relative;
        overflow: hidden;
    }

    .imageDiv div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        background-color: #e6e6e600;
    }

    .imageDiv > img {
        height: 88px;
    }

    .imageDiv div i {
        display: none;
        font-size: 31px;
        position: absolute;
        top: 37%;
        left: 40%;
    }

    .imageDiv div:hover {
        background-color: #e6e6e680;
    }

    .imageDiv div:hover i {
        display: block;
        cursor: pointer;
    }

    .text-detail {
        text-align: center;
        line-height: 88px;
    }

    .text-detail > img {
        height: 88px;
    }

    .imageDiv div i {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

    .itmes-ico {
        right: 5%;
        top: 36%;
        position: absolute;
    }

    body {
        padding-bottom: 40px;
    }

    .relative {
        position: relative;
    }

    .li_active {
        font-weight: 700;
        background-color: #249EFB;
        color: #fff;
    }

    .noneClass {
        display: none !important;
    }

    .c_wordlist {
        width: 20px;
        position: absolute;
        right: 1px;
        display: flex;
        flex-direction: column;
        z-index: 99999;
        height: auto;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 4px 0px;
        overflow: hidden;
        max-height: 297px;
        -ms-overflow-style: none;
        /* IE 10+ */
        scrollbar-width: none;
        /* Firefox */
        overflow-y: scroll;
        background-color: #f5f5f5;
    }

    .c_wordlist::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .c_wordlist > li {
        width: 20px;
        height: 37px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0px;
        line-height: 37px;
    }

    .wordlist {
        width: 20px;
        position: absolute;
        right: 1px;
        display: flex;
        flex-direction: column;
        z-index: 99999;
        height: auto;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 4px 0px;
        overflow: hidden;
        max-height: 297px;
        -ms-overflow-style: none;
        /* IE 10+ */
        scrollbar-width: none;
        /* Firefox */
        overflow-y: scroll;
        background-color: #f5f5f5;
    }

    .wordlist::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .wordlist > li {
        width: 20px;
        height: 37px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0px;
        line-height: 37px;
    }

    .top50 {
        top: 43px !important;
    }

    .bottom50 {
        bottom: 43px !important;
    }

    dd {
        border-bottom: 1px solid #EFEFEF;
    }

    .layui-anim-upbit {
        -ms-overflow-style: none;
        /* IE 10+ */
        scrollbar-width: none;
        /* Firefox */
        overflow-y: scroll;
        background-color: #fff;
    }

    .layui-anim-upbit::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }
	input::placeholder{color:#b9b9b9 !important;}
    .layui-unselect i{
		font-size: 12px !important;
		line-height: 38px;
		color: #4e8bfd;
		float: right;
	}
</style>
<body>
<form class="layui-form layui-form-box">
    <input type="hidden" name="id" value="{$id}">
    <div class="layui-form-item col-md5 mdt30">
        <label class="layui-form-label"><i style="color:red;">*</i>标题：</label>
        <div class="layui-input-block" style="max-width: 30%;">
            <input type="text" name="name" required lay-verify="required" value="{$data.name}" placeholder="请输入标题"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item col-md5 mdt20">
        <label for="title" class="layui-form-label"><i style="color:red;">*</i>封面：</label>
        <div class="layui-input-block">
            <div class="layui-input-inline addImages" id="anlicoverimg">
                <div class="text-detail" style="width: 100%;">
                    {if condition="empty($data.cover)"}
                    <p>上传封面</p>
                    {else/}
                    <img style="width: 100%;" src="{$data.cover}" alt="">
                    {/if}
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item col-md5 mdt20">
        <label for="title" class="layui-form-label"></label>
        <div><i style="color:red;margin-right: 5px;">*</i>建议上传封面图片宽高比例5:3，图片大小不超过1M</div>
    </div>
    <div class="layui-form-item col-md5 mdt20">
        <label for="title" class="layui-form-label">分享封面：</label>
        <div class="layui-input-block">
            <div class="layui-input-inline addImages" id="cover-share-img">
                <div class="text-detail" style="width: 100%;">
                    {if $data.cover_share_img}
                    <img style="width: 100%;" src="{$data.cover_share_img}" alt="">
                    {else/}
                    <p>上传封面</p>
                    {/if}
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item col-md5 mdt20">
        <label for="title" class="layui-form-label"></label>
        <div><i style="color:red;margin-right: 5px;">*</i>建议上传封面图片宽高比例5:4，图片大小不超过1M</div>
    </div>
    <div class="layui-form-item col-md5 mdt20">
        <label class="layui-form-label"><i style="color:red;">*</i>小区名称：</label>
        <div class="layui-input-block relative" id="box212" style="max-width: 30%;">
            <select name="community_id"  lay-filter="community" id="community_id" class="sjsselect" lay-search>
                <option value="">请选择小区</option>
                {notempty name="communities"}
                {volist name='communities.arr' id='vo'}
                <option data-py="{$vo.s}" value="{$vo.id}" {if condition="$data.community_id eq $vo.id"}selected{/if}>{$vo.name}</option>
                {/volist}
                {/notempty}
            </select>
            <ul class="c_wordlist noneClass">
                {notempty name="communities"}
                {volist name="communities.sort" id="vo"}
                <li data-py="{$vo}">{$vo}</li>
                {/volist}
                {/notempty}
            </ul>
        </div>
    </div>
    <div class="layui-form-item col-md5 mdt20">
        <label class="layui-form-label"><i style="color:red;">*</i>开工时间：</label>
        <div class="layui-input-block" style="max-width: 30%;position: relative;">
            <input type="text" name="start_time" class="layui-input" value="{$data.start_time}" required
                   autocomplete="off" id="test11" placeholder="请选择开工时间">
            <i class="fa fa-clock-o itmes-ico" aria-hidden="true"></i>
        </div>
    </div>
    <div class="layui-form-item col-md5 mdt20">
        <label class="layui-form-label"><i style="color:red;">*</i>房屋户型：</label>
        <div class="layui-input-block" style="max-width: 30%;">
            <select name="housetype_id" lay-filter="type" id="housetype_id" class="sjsselect">
                <option value="" class="none">请选择房屋户型</option>
                {volist name='housetype' id='vo'}
                <option value="{$vo.id}" {if condition="$data.housetype_id eq $vo.id"}selected{/if}>{$vo.name}</option>
                {/volist}
            </select>
        </div>
        <input type="hidden" name="housetype_type" value="{$data.housetype_type}" id="housetype_type">
    </div>
    <div class="layui-form-item col-md5 mdt20">
        <label class="layui-form-label">面积：</label>
        <div class="layui-input-block" style="max-width: 30%;">
            <input type="text" name="area" value="{$data.area}" maxlength="5"
                   placeholder="请输入面积" autocomplete="off" class="layui-input" onkeyup="value=zhzs(this.value)">
        </div>
    </div>
    <div class="layui-form-item col-md5 mdt20">
        <label class="layui-form-label">设计师：</label>
        <div class="layui-input-block relative" id="box313" style="max-width: 30%;">
            <select name="designer_id" lay-verify="" id="designer" class="sjsselect" lay-search>
                <option value=''>请选择设计师</option>
                {notempty name="designer"}
                {volist name='designer.arr' id='vo'}
                <option data-py="{$vo.s}" value="{$vo.id}" {if condition="$data.designer_id eq $vo.id"}selected{/if}>{$vo.name}</option>
                {/volist}
                {/notempty}
            </select>
            <ul class="wordlist noneClass">
                {notempty name="designer"}
                {volist name="designer.sort" id="vo"}
                <li data-py="{$vo}">{$vo}</li>
                {/volist}
                {/notempty}
            </ul>
        </div>
    </div>
    <div class="layui-form-item col-md5 mdt20">
        <label class="layui-form-label">装修风格：</label>
        <div class="layui-input-block" style="max-width: 30%;">
            <select name="style_id" lay-verify="style" id="style" class="sjsselect">
                <option value=''>请选择装修风格</option>
                {volist name='style' id='vo'}
                <option value="{$vo.id}" {if condition="$data.style_id eq $vo.id"}selected{/if}>{$vo.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="clear:both;">
        <label class="layui-form-label">推荐</label>
        <div class="layui-input-block">
            <input type="checkbox" name="recommend" title="" lay-skin="primary" {if condition="$data.recommend"}checked{/if}>
        </div>
    </div>
    <button class="layui-btn mdt20 layui-btn-normal layuiSubmit" lay-submit lay-filter="layuiadmin-anli-submit"
            id="layuiadmin-anli-submit">保存
    </button>
</form>
</body>
{/block} {block name="js"}
<script type="text/javascript" src="__STATIC__/js/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/plupload/ossupload.js"></script>
<script type="text/javascript">
    //转化正整数
    function zhzs(value) {

        value = value.replace(/[^\d]/g, '');
        if ('' != value) {
            value = parseInt(value);
        }
        return value;
    }
</script>
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table', 'laydate', 'upload'], function () {
        var $ = layui.$,
            form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload,
            table = layui.table;
        laydate.render({
            elem: '#test11'
            , format: 'yyyy-MM-dd',
            trigger: 'click'
        });
        // for (var i = 0; i < $('#style').find("option").length; i++) {
        //     if ($('#style').find("option").eq(i).val() == "{$data.style_id}") {
        //         $('#style').find('option').eq(i).attr("selected", "true");

        //     }
        // }
        // for (var j = 0; j < $('#designer').find("option").length; j++) {
        //     if ($('#designer').find("option").eq(j).val() == "{$data.designer_id}") {
        //         $('#designer').find('option').eq(j).attr("selected", "true");
        //     }
        // }
        // for (var i = 0; i < $('#community_id').find("option").length; i++) {
        //     if ($('#community_id').find("option").eq(i).val() == "{$data.community_id}") {
        //         $('#community_id').find('option').eq(i).attr("selected", "true");

        //     }
        // }
        // for (var j = 0; j < $('#housetype_id').find("option").length; j++) {
        //     if ($('#housetype_id').find("option").eq(j).val() == "{$data.housetype_id}") {
        //         $('#housetype_id').find('option').eq(j).attr("selected", "true");
        //     }
        // }
        // form.render("select");
        //封面图
        upload.render({
            elem: '#anlicoverimg',
            accept: 'images',
            url: '/upload/',
            exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
            field: 'cover',
            size: 1 * 1024,
            auto: false,
            choose: function (obj) {
                files = obj.pushFile();
                length = $('.imageDiv').length;
                obj.preview(function (index, file, result) {
                    length++;
                    if (length > 9) {
                        if (length == 10) layer.msg('限制九张图片以下', {time: 1000});
                        delete files[index];
                    } else {
                        $('#anlicoverimg').html('<div class="imageDiv" data-id="' + index + '"><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="100%" height="88px"><div class="iconwrapper"></div></div>');
                        var idom = document.createElement('i');
                        idom.classList.add("layui-icon", "layui-icon-delete");
                        idom.addEventListener("click", function (e) {
                            e.stopPropagation();
                            var that = this;
                            layer.confirm('确定删除该图片么？', function (index) {
                                var imgDiv = $(that).closest('.imageDiv');
                                if (id = imgDiv.data('id')) {
                                    delete files[id];
                                }
                                imgDiv.remove();
                                $('#anlicoverimg').html('<div class="text-detail"><p>上传封面</p></div>');
                                layer.close(index);
                            });
                        });
                        $('.iconwrapper').append(idom);
                    }
                });
            }
        });
        
		//封面图
		upload.render({
			elem: '#cover-share-img',
			accept: 'images',
			url: '{:url("fileupload")}',
			exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
			field: 'cover_share_img',
			size: 1 * 1024,
			auto: false,
			choose: function (obj) {
				files = obj.pushFile();
				obj.preview(function (index, file, result) {
						$('#cover-share-img').html('<div class="imageDiv" data-id="' + index + '"><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="100%" height="88px"><div class="iconwrapper"></div></div>');
						var idom = document.createElement('i');
						idom.classList.add("layui-icon", "layui-icon-delete");
						idom.addEventListener("click", function (e) {
							e.stopPropagation();
							var that = this;
							layer.confirm('确定删除该图片么？', function (index) {
								var imgDiv = $(that).closest('.imageDiv');
								if (id = imgDiv.data('id')) {
									delete files[id];
								}
								imgDiv.remove();
								$('#cover-share-img').html('<div class="text-detail"><p>上传封面</p></div>');
								layer.close(index);
							});
						});
						$('.iconwrapper').append(idom);
						imgurls = file.name;
				});
			}
		});


        /*-------------------------------------------*/
        $(document).click((e) => {
            let c_element = $('#community_id').next();
            if (c_element[0].className.indexOf('layui-form-selected') < 0) {
                $('.c_wordlist').addClass('noneClass');
            }

            let designer = $('#designer').next();
            if (designer[0].className.indexOf('layui-form-selected') < 0) {
                $('.wordlist').addClass('noneClass');
            }
        })

        $('dd').click(() => {
            $('.c_wordlist').addClass('noneClass');
            $('.wordlist').addClass('noneClass');
        })

        $('#box212').click(() => {
            let selectUp = $('.layui-form-selectup');
            $('.c_wordlist').toggleClass('noneClass');
            if (selectUp.length) {
                $('.c_wordlist').removeClass('top50');
                $('.c_wordlist').addClass('bottom50');
                return;
            } else {
                $('.c_wordlist').removeClass('bottom50');
                $('.c_wordlist').addClass('top50');
            }
        })

        let xqElement = $('.layui-anim-upbit')[0];
        xqElement.classList.add('xqElement');

        let options = [];
        let xqDatalist = $('#community_id').children();
        for (let i = 0; i < xqDatalist.length; i++) {
            if (xqDatalist[i].dataset.py) {
                options.push(xqDatalist[i].dataset.py)
            }
        }

        $('.c_wordlist').click((e) => {
            if (e.target.localName != 'li') {
                e.stopPropagation();
                return;
            }
            let index = 0;
            let curWord = e.target.dataset.py;
            let lilist = $('.c_wordlist').children();
            for (let i = 0; i < lilist.length; i++) {
                lilist[i].className = '';
            }
            if (parseInt(curWord) != NaN) {
                let word1 = curWord.toLowerCase();
                index = options.indexOf(word1)
            } else {
                index = options.indexOf(curWord)
            }
            setTimeout(() => {
                e.target.className = 'li_active';
                let num = index * 37 + 37;
                $('.xqElement').scrollTop(num);
            }, 50)
            e.stopPropagation();
        })

        $('#box313').click(() => {
            let selectUp = $('.layui-form-selectup');
            $('.wordlist').toggleClass('noneClass');
            if (selectUp.length) {
                $('.wordlist').removeClass('top50');
                $('.wordlist').addClass('bottom50');
                return;
            } else {
                $('.wordlist').removeClass('bottom50');
                $('.wordlist').addClass('top50');
            }
        })

        let sjsElement = $('.layui-anim-upbit')[2];
        sjsElement.classList.add('sjsElement');

        let sjsOptions = [];
        let sjsDatalist = $('#designer').children();
        for (let i = 0; i < sjsDatalist.length; i++) {
            if (sjsDatalist[i].dataset.py) {
				sjsOptions.push(sjsDatalist[i].dataset.py.toLowerCase())
            }
        }

        $('.wordlist').click((e) => {
            if (e.target.localName != 'li') {
                e.stopPropagation();
                return;
            }
            let index = 0;
            let curWord = e.target.dataset.py;
            let lilist = $('.wordlist').children();
            for (let i = 0; i < lilist.length; i++) {
                lilist[i].className = '';
            }
            if (parseInt(curWord) != NaN) {
                let word1 = curWord.toLowerCase();
                index = sjsOptions.indexOf(word1)
            } else {
                index = sjsOptions.indexOf(curWord)
            }
            setTimeout(() => {
                e.target.className = 'li_active';
                let num = index * 37 + 37;
                $('.sjsElement').scrollTop(num);
            }, 50)
            e.stopPropagation();
        })

        $('.layui-select-title input').on('input',function(e) {
			if (e.target.placeholder == '请选择小区') {
				let val = $(this).val();
				if (!val) {
					$('.c_wordlist').removeClass('noneClass');
					return;
				}
				$('.c_wordlist').addClass('noneClass');
			}
		})
        /*------------------------------------------*/

        //添加保存
        form.on('submit(layuiadmin-anli-submit)', function (data) {
            if ($('#anlicoverimg img').attr('src') == "" || $('#anlicoverimg img').attr('src') == null || $('#anlicoverimg img').attr('src') == undefined) {
                layer.msg('请选择封面图', {anim: 0, time: 1000, icon: 5});
                return false;
            }
            if (data.field.community_id == '') {
				layer.msg('请选择 小区名称', { anim: 0, time: 1000, icon: 5 });
				return false;
			}
			if (data.field.start_time == "" || data.field.start_time == null || data.field.start_time == undefined) {
				layer.msg('请选择 开工时间', { anim: 0, time: 1000, icon: 5 });
				return false;
			}
			if (data.field.housetype_id == '') {
				layer.msg('请选择 房屋户型', { anim: 0, time: 1000, icon: 5 });
				return false;
			}
            var formData = new FormData(data.form);
            //单击之后提交按钮不可选,防止重复提交
            var DISABLED = 'layui-btn-disabled';
            var target = '#layuiadmin-anli-submit';
            $(target).addClass(DISABLED);
            $(target).attr('disabled', 'disabled');

            $.ajax({
                url: '{:url("construction/edit")}',
                type: 'post',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    $(target).removeClass(DISABLED);
                    $(target).removeAttr('disabled');
                    if (res.code === 0) {
                        layer.msg(res.msg, {
                            anim: 0, time: 1000, icon: 6,
                        }, function () {
                            var adding = $("input[name='adding']").is(":checked");
                            if (adding) {
                                location.href = "{:url('construction/index')}";
                            } else {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layui.table.reload('company-activity'); //重载表格
                                parent.layer.close(index); //再执行关闭
                            }
                        });
                    } else {
                        layer.msg(res.msg, {anim: 0, time: 1000, icon: 5});
                    }
                },
                error: function (e) {
                    $(target).removeClass(DISABLED);
                    $(target).removeAttr('disabled');
                }
            });

            return false;
        });

        
        function getHousetype(community_id){
			$.post('{:url("building/housetype")}', {community_id}, function(res){
				if(res.code == 1) return;

				let btn = $('#housetype_id').find('.none');
				$('#housetype_id').find('option').each(function(i, v){
					if($(v).data('type') == 'housetype') $(v).remove();
				});
				let a = [];
                console.log('{$data.housetype_type}');
                console.log(Number('{$data.housetype_id}'));
				$.each(res.data, function(i,item){console.log(item.id);
					a.push(item.id);
                    if ('building_housetype' == '{$data.housetype_type}' && Number('{$data.housetype_id}') == item.id) {
                        btn.after('<option value="'+item.id+'" data-type="housetype" selected>'+item.housetype+'</option>');
                    } else {
                        btn.after('<option value="'+item.id+'" data-type="housetype">'+item.housetype+'</option>');
                    }
				});
				form.render('select');

				let d = $('#housetype_id').next();
				d.find('dd').each(function(i, v){
					let val =  Number($(v).attr('lay-value'));
					if (a.indexOf(Number(val)) != -1) {
						$(v).append('<i class="layui-icon layui-icon-link"></i>');
					}
				});
			})
		}

		form.on('select(community)', function (data) {
			getHousetype(data.value);
		})
		form.on('select(type)',function(data){
			let v = data.value;
			$(data.elem).find('option').each(function(i,item){
				if($(item).val() == v){
					let t = $(item).data('type');
					if(t == 'housetype') {
						$('#housetype_type').val('building_housetype');
					}else{
						$('#housetype_type').val('housetype');
					}
				}
			});
		})
        getHousetype('{$data.community_id}');
    });
</script>
{/block}