scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
							{extend name="public/layout" /} {block name="title"}客户画像字段-添加{/block} {block name="body"}
<style type="text/css">
    html,
    body {
        height: 100%;
        background: #fff;
    }

    .layui-fluid {
        box-sizing: border-box;
        overflow-y: auto;
        padding-bottom: 100px;
    }

    .lay-footer {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 99;
        background-color: #fff;
        box-sizing: border-box;
        padding: 10px 20px;
    }

    .layui-border-blue,
    .layui-border-blue:hover {
        color: #fff;
        background-color: #249EFB;
        border-color: #249EFB;
    }

    .lay-add-tag {
        width: 120px;
        cursor: pointer;
        margin-left: 110px;
        color: #249EFB;
    }

    .flexBox {
        display: flex;
        align-items: center;
    }

    .flexSub {
        flex: 1;
        margin-left: 0px;
    }

    .tagNameLabel {
        width: 100%;
    }

    .ly-delete {
        font-size: 20px !important;
        color: red;
        margin-left: 10px;
        cursor: pointer;
    }

    .flex {
        display: flex;
    }

    .align-center {
        align-items: center;
    }

    .mbr10 {
        margin-right: 10px;
        padding: 3px 0px;
    }

    .ml0 {
        margin-left: 0px !important;
    }
    .flex-wrap {
        flex-wrap: wrap;
    }
    .mt30 {
        margin-top: 30px;
    }
    .requiredStyle {
        font-style: normal;
        color: red;
        margin-right: 5px;
    }
    .red-font {
        color: red;
        margin-left: 5px;
        cursor: pointer;
    }
    .mlr10 {
        margin: 0px 10px;
    }
    .fixed_submit {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
        padding: 10px 15px;
        background-color: #fff;
        z-index: 999;
        margin-bottom: 0px;
    }
    .mb0 {
        margin-bottom: 0px;
    }
</style>

<body>
    <div class="layui-fluid">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="requiredStyle">*</i>标题</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                        class="layui-input" style="width: 50%;">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="requiredStyle">*</i>填写方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" lay-filter="type" value="1" title="输入框" checked>
                    <input type="radio" name="type" lay-filter="type" value="2" title="数字框">
                    <input type="radio" name="type" lay-filter="type" value="3" title="单选框">
                    <input type="radio" name="type" lay-filter="type" value="4" title="多选框">
                    <input type="radio" name="type" lay-filter="type" value="5" title="日期">
                    <input type="radio" name="type" lay-filter="type" value="6" title="图片上传">
                </div>
            </div>
            <div class="layui-form-item layui-hide unity_box">
                <label class="layui-form-label">单位</label>
                <div class="layui-input-block">
                    <input type="text" name="unity" placeholder="请输入单位" autocomplete="off"
                        class="layui-input" style="width: 50%;">
                </div>
            </div>
            <div class="layui-form-item layui-hide select_box_list">
                <label class="layui-form-label"><i class="requiredStyle">*</i>添加选项</label>
                <div class="layui-input-block flex flex-wrap align-center select_content"> 
                </div>
            </div>
            <div class="layui-form-item fixed_submit">
                <div class="layui-input-block mb0">
                    <div class="layui-btn layui-btn-primary layui-border-black cancel">取消</div>
                    <button class="layui-btn" type="button" lay-submit lay-filter="layuiadmin-field-submit">确认提交</button>
                </div>
            </div>
        </form>
    </div>
</body>
{/block}
{block name="js"}
<script>
    layui.config({
        base: '__LAYUI__/' //静态资源所在路径
        ,
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'layedit', 'element', 'upload'], function () {
        var form = layui.form,
            admin = layui.admin,
            $ = layui.jquery,
            select_list = [{ name: '' }];

        form.render();

        form.on('radio(type)',function(e) {
            if (e.value == 2) {
                $('.unity_box').removeClass('layui-hide');
                $('.select_box_list').addClass('layui-hide');
            } else if (e.value == 3 || e.value == 4) {
                $('.select_box_list').removeClass('layui-hide');
                $('.unity_box').addClass('layui-hide');
            } else {
                $('.select_box_list').addClass('layui-hide');
                $('.unity_box').addClass('layui-hide');
            }
        })

        renderSelectHtml(select_list)
        function renderSelectHtml(array) {
            let htmls = array.map((item,index) => {
                return `<div class="flex align-center mbr10">
                        <span class="mbr10">选项${index+1}</span>
                        <input data-index="${index}" type="text" placeholder="请输入标题" value="${item.name}" autocomplete="off" class="layui-input s_input_item mr10"
                            style="width:150px;">
                        <i data-index="${index}" class="layui-icon layui-icon-delete red-font ${array.length < 2 ? 'layui-hide':''}"></i>
                    </div>`;
            }).join('')
            let htmls1 = `${htmls}<div class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue l-add-select">+添加</div>`;
            $('.select_content').html(htmls1);
            setTimeout(() => {
                $('.l-add-select').click(function() {
                    select_list.push({ name: '' });
                    renderSelectHtml(select_list);
                })
                $('.layui-icon-delete').click(function() {
                    let index = $(this).prop('dataset').index;
                    select_list.splice(parseInt(index),1);
                    renderSelectHtml(select_list);
                })
                $('.s_input_item').change(function() {
                    let index = $(this).prop('dataset').index;
                    select_list[parseInt(index)].name = $(this).val();
                })
            })
        }

        $('.cancel').click(function(){
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		})

        /* 监听提交 */
        form.on('submit(layuiadmin-field-submit)', function (obj) {
            var formData = new FormData(obj.form);
            formData.append('pid',"{$pid}")
            if (obj.field.type == '3' || obj.field.type == '4') {
                let select_arr = select_list.filter(v => v.name);
                if (!select_arr.length) {
                    layer.msg('请添加选项', {
                        icon: 5,
                        anim: 6,
                        time: 2000
                    });
                    return false;
                }
                select_arr.forEach((v, i) => {
                    formData.append(`select[${i}][name]`, v.name);
                })
            } else {
                formData.append('select','');
            } 
            if (obj.field.type != '2') {
                formData.set('unity','');
            }
            $.ajax({
                url: '{:url("customer_new_portrait/add_field")}',
                type: 'post',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            icon: 5,
                            anim: 6,
                            time: 2000
                        });
                        var index = parent.layer.getFrameIndex(window.name);
			            parent.layer.close(index);
                    } else {
                        layer.msg(res.msg, {
                            icon: 5,
                            anim: 6,
                            time: 2000
                        });
                    }
                }
            });
        });
    });
</script>
{/block}