crm/app/sys/view/customer_new_portrait/index.html

{extend name="public/layout" /} {block name="title"}装修案例列表{/block} {block name="body"}

<style type="text/css">
    html,
    body {
        display: block;
        min-width: 1000px;
        overflow: hidden;
    }

    .layui-fluid {
        display: block;
        box-shadow: 0 0 4px 0 #B6CADE;
        border-radius: 5px;
        margin: 15px;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .wzh-header-tab {
        width: 97.5%;
        height: 50px;
        background-color: #fff;
        margin: 20px auto 20px;
        border-radius: 6px;
    }

    .wzh-header-ul {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0px 10px;
    }

    .wzh-header-ul>li {
        width: 100px;
        float: left;
        text-align: center;
        cursor: pointer;
    }

    .wzh-header-ul>li>a {
        display: block;
    }

    .wzh-active {
        color: #249EFB;
        position: relative;
    }

    .wzh-active::after {
        content: ' ';
        width: 50px;
        height: 4px;
        background-color: #249EFB;
        border-radius: 2px;
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .wzh-remind {
        width: 97.5%;
        height: auto;
        overflow: hidden;
        margin: 20px auto 20px;
    }

    .wzh-remind>div {
        width: 100%;
        height: 46px;
        background-color: #F0F8FF;
        color: #0567B4;
        font-size: 14px;
        line-height: 46px;
        box-sizing: border-box;
        padding: 0px 10px;
    }

    .layui-card-box {
        width: 100%;
        min-height: 85vh;
        margin: 0px auto 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .layui-left-box {
        width: 180px;
        height: 100vh;
        background-color: #fff;
        box-sizing: border-box;
        padding: 10px 15px;
    }

    .layui-right-box {
        flex: 1;
        height: 100vh;
        background-color: #fff;
        margin-left: 20px;
        box-sizing: border-box;
        padding: 20px 30px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .layui-left-add-plan {
        width: 100%;
        height: 35px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .add-plan-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #B0C4D4;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        margin-right: 6px;
    }

    .plan-item-box {
        width: 100%;
        height: 35px;
        line-height: 35px;
        cursor: pointer;
        box-sizing: border-box;
        padding-left: 10px;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .right-tips {
        width: 100%;
        height: 20px;
        line-height: 20px;
        display: flex;
        align-items: center;
    }

    .right-tips>span {
        display: inline-block;
        width: 5px;
        height: 20px;
        background-color: #249EFB;
        border-radius: 2px;
        margin-right: 8px;
    }

    .choose-chat {
        box-sizing: border-box;
        padding: 10px 15px;
        margin: 10px 0px;
    }

    .right-btn {
        box-sizing: border-box;
        padding: 10px 0px 10px 0px;
        margin-top: 10px;
    }

    .set-action {
        box-sizing: border-box;
        width: 90%;
        min-height: 320px;
        background-color: #F8F8F8;
        margin: 20px 0px 0px;
        padding: 10px 20px;
        display: flex;
    }

    .action-remind {
        width: 300px;
    }

    .action-remind>div {
        width: 100%;
        height: 32px;
        line-height: 32px;
        display: flex;
        align-items: center;
    }

    .action-remind>div>label {
        margin-left: 6px;
    }

    .chat-check>div {
        width: 100%;
        height: 32px;
        line-height: 32px;
        display: flex;
        align-items: center;
    }

    .chat-check>div>label {
        margin-left: 6px;
    }

    .field_box_style {
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 10px 0px;
    }

    .field_title_box {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .field_label {
        display: inline-block;
        border-left: 4px solid #249EFB;
        padding-left: 7px;
        height: 16px;
        line-height: 16px;
    }

    .flex {
        display: flex;
    }

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

    .mr10 {
        margin-right: 10px;
    }

    .ml0 {
        margin-left: 0px !important;
    }

    .p10 {
        margin-top: 15px;
        padding: 20px 15px 10px 15px;
        background-color: #F8F8F8;
    }

    .red-font {
        color: red;
    }

    .mlr10 {
        margin: 0px 10px;
    }

    .layui-form-switch {
        margin-top: 0px !important;
    }

    .field_edit {
        color: #249EFB;
        cursor: pointer;
    }

    .layui-form-onswitch {
        border-color: #249EFB;
        background-color: #249EFB;
    }

    .layui-form-radio>i:hover,
    .layui-form-radioed>i {
        color: #249EFB;
    }

    .field_delete {
        color: red;
        cursor: pointer;
    }

    .mt10 {
        margin-top: 10px;
    }

    .active_style {
        background-color: #f5f5f5;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .mtbr10 {
        margin: 5px 10px 5px 0px;
    }

    .p-operate-box {
        position: absolute;
        top: 0px;
        right: -5px;
        padding: 2px;
        display: none;
        background-color: #fff;
    }

    .plan-item-box:hover .p-operate-box {
        display: flex;
    }

    .mt20 {
        margin-top: 20px;
    }

    .layui-form-switch {
        transform: scale(0.8, 0.8);
    }

    .ml50 {
        margin-left: 47px;
    }
</style>

<body>
    <!-- <div class="wzh-header-tab">
        <ul class="wzh-header-ul">
            <li class="wzh-active">客户画像</li>
        </ul>
    </div> -->
    <div class="layui-card-box">
        <div class="layui-left-box">
            <div class="layui-left-add-plan">
                <span class="add-plan-icon">
                    <i class="layui-icon layui-icon-addition" style="color:#fff;"></i>
                </span>
                <span>添加画像</span>
            </div>
            <div class="h_tab_box">
                {volist name="list" id="vo"}
                <div class="plan-item-box" title="{$vo.name}" data-id="{$vo.id}">
                    {$vo.name}
                    <span class="p-operate-box">
                        {if $vo.isedit == 0}
                        <i data-id="{$vo.id}" data-name="{$vo.name}" class="layui-icon layui-icon-edit"
                            style="color: #249EFB;"></i>
                        {/if}
                        {if $vo.isdel == 0}
                        <i data-id="{$vo.id}" class="layui-icon layui-icon-delete lay-del-p" style="color: red;"></i>
                        {/if}
                    </span>
                </div>
                {/volist}
            </div>
        </div>
        <div class="layui-right-box">
            <div class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" id="add_field_btn">
                <i class="layui-icon layui-icon-addition"></i>
                添加
            </div>
            <div class="field_box_style">

            </div>
        </div>
    </div>
</body>
{/block} {block name="js"}
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'element', 'laydate'], function () {
        var $ = layui.$,
            form = layui.form,
            element = layui.element,
            laydate = layui.laydate,
            table = layui.table,
            curId = '',
            editId = null,
            fieldlist = [];

        $('.h_tab_box div').click(function () {
            $(this).addClass('active_style').siblings().removeClass("active_style");
            curId = $(this).prop('dataset').id;
            localStorage.setItem('CUR_FIELD_VAL',curId);
            requestListApi(curId);
        })

        let c_show_id = localStorage.getItem('CUR_FIELD_VAL');
        if (c_show_id) {
            $('.plan-item-box').each(function() {
                if ($(this).prop('dataset').id == c_show_id) {
                    curId = c_show_id;
                    $(this).addClass('active_style').siblings().removeClass("active_style");
                    requestListApi(curId);
                }
            })
        } else {
            $('.plan-item-box').eq(0).addClass('active_style')
            curId = $('.plan-item-box').eq(0).prop('dataset').id;
            requestListApi(curId);
        }

        $('.layui-icon-edit').click(function () {
            let props = $(this).prop('dataset');
            if (!props.name) {
                return false;
            }
            layer.prompt({ value: props.name, title: ['编辑画像', 'color:#333333;background-color:#D8E6F1;'], }, function (value, index, elem) {
                editClientContentApi(value, props.id);
                layer.close(index);
            });
        })

        $('.lay-del-p').click(function (e) {
            let props = $(this).prop('dataset');
            layer.confirm('确定删除当前客户画像？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
                deleteFirstLevel(props.id);
            });
            return false;
        })

        function requestListApi(id) {
            $.ajax({
                url: "{:url('customer_new_portrait/index')}",
                data: {
                    pid: id
                },
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        fieldlist = res.data;
                        renderlistHtml(res.data);
                    } else {
                        layer.msg(res.msg)
                    }
                }
            });
        }

        function deleteFiledApi(id) {
            $.ajax({
                url: "{:url('customer_new_portrait/del_field')}",
                data: {
                    id: id
                },
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            anim: 0
                        }, function () {
                            requestListApi(curId);
                        })
                    } else {
                        layer.msg(res.msg)
                    }
                }
            });
        }

        function deleteFirstLevel(id) {
            $.ajax({
                url: "{:url('customer_new_portrait/del_field')}",
                data: {
                    id: id
                },
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            anim: 0
                        }, function () {
                            location.reload();
                        })
                    } else {
                        layer.msg(res.msg)
                    }
                }
            });
        }


        function addClientContentApi(name) {
            $.ajax({
                url: "{:url('customer_new_portrait/add_top_field')}",
                data: {
                    name: name
                },
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            anim: 0
                        }, function () {
                            location.reload();
                        })
                    } else {
                        layer.msg(res.msg)
                    }
                }
            });
        }

        function editClientContentApi(name, id) {
            $.ajax({
                url: "{:url('customer_new_portrait/edit_top_field')}",
                data: {
                    name: name,
                    id: id
                },
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            anim: 0
                        }, function () {
                            location.reload();
                        })
                    } else {
                        layer.msg(res.msg)
                    }
                }
            });
        }

        function setFieldStatusApi(status, id,field='status',refresh) {
            $.ajax({
                url: "{:url('customer_new_portrait/set_show')}",
                data: {
                    status: status,
                    id: id,
                    field: field
                },
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        if (!refresh) {
                            layer.msg(res.msg, {
                                anim: 0
                            })
                        }
                    } else {
                        layer.msg(res.msg);
                        setTimeout(() => {
                            location.reload();
                        },1000)
                    }
                }
            });
        }

        function renderlistHtml(list) {
            let liveVal = list.filter(g => g.name == '直播情况')[0];
            let htmls = list.map((item, index) => {
                return `<form class="layui-form mt20" action="">
                            <div class="field_title_box">
                                <span class="field_label">${item.name}</span>
                                <span data-id="${item.id}" data-index="${index}" class="mlr10 field_edit ${item.isedit == 1 ? 'layui-hide' : ''}">
                                    <i class="layui-icon layui-icon-edit"></i>
                                    <span>编辑</span>
                                </span>
                                <span data-id="${item.id}" class="mr10 field_delete ${item.isdel == 1 ? 'layui-hide' : ''}">
                                    <i data-id="${item.id}" class="layui-icon layui-icon-delete red-font"></i>
                                    <span data-id="${item.id}">删除</span>
                                </span>
                                <span style="${(item.isdel == 1 && item.isedit == 1) ? "margin-left:10px;" : ''}" class="${item.is_status == 1 ? 'layui-hide' : ''}">
                                    <input data-id="${item.id}" data-name="${item.name}" id="lay-switch-${item.id}" type="checkbox" lay-filter="status" name="status" value="${item.status}" ${item.status == 0 ? 'checked' : ''} lay-skin="switch" lay-text="开启|关闭">
                                </span>
                                <span class="${(item.keyname == 'name' || item.keyname == 'phone' || item.keyname == 'sex'||((item.keyname=='live_broadcast_business'||item.keyname=='live_broadcast_design')||item.keyname=='live_broadcast_personnel')&&liveVal.isadd == 0)? 'layui-hide' : ''}">
                                    <!-- <input data-id="${item.id}" data-must="${item.is_must}" data-name="${item.name}" id="lay-switch-${item.id}" type="checkbox" lay-filter="isadd" name="isadd" value="${item.isadd}" ${item.isadd == 1 ? 'checked' : ''} lay-skin="switch" lay-text="客户报备|客户报备"> -->
                                </span>
                                <span class="${(item.keyname == 'phone')? 'layui-hide' : ''}">
                                    <input data-id="${item.id}" data-name="${item.name}" id="lay-switch-${item.id}" type="checkbox" lay-filter="is_must" name="is_must" value="${item.is_must}" ${item.is_must == 0 ? 'checked' : ''} lay-skin="switch" lay-text="必填|必填">
                                </span>
                            </div>
                            <input type="hidden" name="id" value="${item.id}" />
                            <div class="p10 edit_content_box ${item.id == editId ? '' : 'layui-hide'}">
                                <div class="layui-form-item">
                                    <div class="layui-input-block ml0">
                                        <input type="text" value="${item.name}" name="name" placeholder="请输入标题"
                                            autocomplete="off" class="layui-input" style="width:260px;" required  lay-verify="required">
                                    </div>
                                </div>
                                <div class="layui-form-item flex align-center">
                                    <span class="mr10">填写方式</span>
                                    <div class="layui-input-block ml0">
                                        <input data-index="${index}" data-id="${item.id}" disabled="${item.isedit_type==1}" type="radio" name="type" lay-filter="type" value="1" title="输入框" ${item.type == 1 ? 'checked' : ''}>
                                        <input data-index="${index}" data-id="${item.id}" disabled="${item.isedit_type==1}" type="radio" name="type" lay-filter="type" value="2" title="数字框" ${item.type == 2 ? 'checked' : ''}>
                                        <input data-index="${index}" data-id="${item.id}" disabled="${item.isedit_type==1}" type="radio" name="type" lay-filter="type" value="3" title="单选框" ${item.type == 3 ? 'checked' : ''}>
                                        <input data-index="${index}" data-id="${item.id}" disabled="${item.isedit_type==1}" type="radio" name="type" lay-filter="type" value="4" title="多选框" ${item.type == 4 ? 'checked' : ''}>
                                        <input data-index="${index}" data-id="${item.id}" disabled="${item.isedit_type==1}" type="radio" name="type" lay-filter="type" value="5" title="日期" ${item.type == 5 ? 'checked' : ''}>
                                        <input data-index="${index}" data-id="${item.id}" disabled="${item.isedit_type==1}" type="radio" name="type" lay-filter="type" value="6" title="图片上传" ${item.type == 6 ? 'checked' : ''}>
                                    </div>
                                    <input type="hidden" name="oldType" value="${item.type}" />
                                </div>
                                <div class="layui-form-item ${item.type == 2 ? '' : 'layui-hide'} flex align-center unity_box_${item.id}">
                                    <span class="mr10">单位&nbsp;&nbsp;</span>
                                    <div class="layui-input-block ml0">
                                        <input type="text" value="${item.unity || ''}" name="unity" placeholder="请输入单位"
                                            autocomplete="off" class="layui-input" style="width:260px;">
                                    </div>
                                </div>
                                <div class="layui-form-item select-list-box-${item.id} flex flex-wrap align-center ${item.type == 3 || item.type == 4 ? '' : 'layui-hide'}">
                                    ${!!item.select ? item.select.map((sItem, sIndex) => {
                    return `<div class="flex align-center mtbr10 select-item-box-${item.id}">
                                                <span class="mr10">选项${sIndex + 1}</span>
                                                <input data-type="input" data-idx="${index}" data-index="${sIndex}" type="text" name="select[${sIndex}][name]" required  lay-verify="required" value="${sItem.name}" placeholder="请输入标题" autocomplete="off"
                                                    class="layui-input select_input_content mr10" style="width:150px;">
                                                <input type="hidden" name="select[${sIndex}][id]" value="${sItem.id}" />
                                                <i data-id="${item.id}" data-curid="${sItem.id}" data-idx="${index}" data-index="${sIndex}" class="layui-icon layui-icon-delete red-font"></i>
                                            </div>`
                }).join('') : ''
                    }
                                    <div data-id="${item.id}" data-index="${index}" class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue add-select-btn add-select-btn-${item.id}">
                                        +添加
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block ml50">
                                        <div type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="layuiadmin-field-submit-${item.id}">保存</div>
                                    </div>
                                </div>
                            </div>
                        </form>`
            }).join('')
            $('.field_box_style').html(htmls);

            setTimeout(() => {
                $('.field_delete').click(function () {
                    let id = $(this).prop('dataset').id;
                    layer.confirm('确定删除当前字段？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
                        deleteFiledApi(id);
                    });
                })
                $('.field_edit').click(function () {
                    let index = $(this).prop('dataset').index;
                    editId = $(this).prop('dataset').id;
                    $('.edit_content_box').eq(parseInt(index)).toggleClass('layui-hide');
                    $('.edit_content_box').each(function (item) {
                        if (item != index) {
                            $(this).addClass('layui-hide');
                        }
                    })
                })
                form.on('switch(status)', function (e) {
                    let id = $(this).prop('dataset').id;
                    let name = $(this).prop('dataset').name;
                    var switchVal = $(`#lay-switch-${id}`).val();
                    let val = switchVal ? '0' : '1';
                    setFieldStatusApi(val, id);
                    if (name == '直播情况') {
                        let liveBroadcast = fieldlist.filter(v => v.keyname=='live_broadcast_business'||v.keyname=='live_broadcast_design'||v.keyname=='live_broadcast_personnel'||v.keyname=='live_broadcast_date');
                        if (switchVal==1) {
                            let ids = liveBroadcast.filter(v=>v.status==1).map(v=>v.id).join(',');
                            setFieldStatusApi(0, ids);
                        }
                        if (switchVal==0) {
                            let ids = liveBroadcast.filter(v=>v.status==0).map(v=>v.id).join(',');
                            setFieldStatusApi(1, ids);
                        }
                    }
                })
                form.on('switch(isadd)', function (e) {
                    let id = $(this).prop('dataset').id;
                    let name = $(this).prop('dataset').name;
                    let must = $(this).prop('dataset').must;
                    var switchVal = $(this).val();
                    let val = switchVal == 0 ? 1 : 0;
                    if (name == '直播情况') {
                        let liveBroadcast = fieldlist.filter(v => v.name=='业务直播人员'||v.name=='设计直播人员'||v.name=='直播人员');
                        liveBroadcast.forEach(k => {
                            setFieldStatusApi(val, k.id,'isadd', true);
                        });
                    }
                    if (switchVal == 1 && must == 0) {
                        setFieldStatusApi(val, id,'is_must');
                    }
                    setFieldStatusApi(val, id,'isadd');
                })
                form.on('switch(is_must)', function (e) {
                    let id = $(this).prop('dataset').id;
                    let name = $(this).prop('dataset').name;
                    var switchVal = $(this).val();
                    let val = switchVal == 0 ? 1 : 0;
                    setFieldStatusApi(val, id,'is_must');
                })
                form.on('radio(type)', function (e) {
                    let id = $(this).prop('dataset').id;
                    let index = parseInt($(this).prop('dataset').index);
                    if (e.value == 2) {
                        $(`.unity_box_${id}`).removeClass('layui-hide');
                        $(`.select-list-box-${id}`).html('');
                    } else if (e.value == 3 || e.value == 4) {
                        $(`.unity_box_${id}`).addClass('layui-hide');
                        $(`.select-list-box-${id}`).removeClass('layui-hide');
                        renderSelectItemHtml(fieldlist[index].select || [], `select-list-box-${id}`, id, index);
                    } else {
                        $(`.select-list-box-${id}`).html('');
                        $(`.select-list-box-${id}`).addClass('layui-hide');
                        $(`.unity_box_${id}`).addClass('layui-hide');
                    }
                })
                $('.add-select-btn').click(function () {
                    let id = $(this).prop('dataset').id;
                    let idx = $(this).prop('dataset').index;
                    let index = $(`.select-item-box-${id}`).length;
                    if (index > 0) {
                        fieldlist[parseInt(idx)].select.push({ name: '', id: '', pid: id });
                    } else {
                        fieldlist[parseInt(idx)].select = [];
                        fieldlist[parseInt(idx)].select.push({ name: '', id: '', pid: id });
                    }
                    renderSelectItemHtml(fieldlist[parseInt(idx)].select, `select-list-box-${id}`, id, idx);
                })
                $('.layui-icon-delete').click(function () {
                    let id = $(this).prop('dataset').id;
                    let index = $(this).prop('dataset').index;
                    let idx = $(this).prop('dataset').idx;
                    let curid = $(this).prop('dataset').curid;
                    layer.confirm('确定删除当前选项？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (cdx) {
                        layer.close(cdx)
                        if (id && index && idx) {
                            if (curid) {
                                let = loadingIndex = layer.load('Loading...', {
                                    shade: [0.6,'#000'] //0.1透明度的白色背景
                                });
                                $.ajax({
                                    url: "{:url('customer_new_portrait/del_select_opt')}",
                                    data: {
                                        id: curid,
                                        pid: id
                                    },
                                    type: 'post',
                                    dataType: 'json',
                                    success: function (res) {
                                        layer.close(loadingIndex);
                                        if (res.code == 0) {
                                            layer.msg('删除成功，当前选项未使用');
                                            fieldlist[parseInt(idx)].select.splice(parseInt(index), 1);
                                            renderSelectItemHtml(fieldlist[parseInt(idx)].select, `select-list-box-${id}`, id, idx);
                                        } else {
                                            layer.msg(res.msg)
                                        }
                                    }
                                });
                            } else {
                                fieldlist[parseInt(idx)].select.splice(parseInt(index), 1);
                                renderSelectItemHtml(fieldlist[parseInt(idx)].select, `select-list-box-${id}`, id, idx);
                            }
                        }
                    })
                })
                $('.select_input_content').change(function () {
                    let props = $(this).prop('dataset');
                    if (props.type && (props.type == 'input')) {
                        fieldlist[parseInt(props.idx)].select[parseInt(props.index)].name = $(this).val();
                    }
                })
                /* 监听提交 */
                list.forEach(item => {
                    form.on(`submit(layuiadmin-field-submit-${item.id})`, function (obj) {
                        var formData = new FormData(obj.form);
                        if (obj.field.oldType != obj.field.type) {
                            layer.confirm('更改填写方式，会导致之前填写的信息丢失，您确认更改吗？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
                                formData.delete('oldType');
                                formData.set('type', obj.field.type);
                                if (obj.field.type != 3 && obj.field.type != 4) {
                                    formData.append('select', '');
                                    if (obj.field.type != 2) {
                                        formData.set('unity', '');
                                    }
                                } else {
                                    formData.set('unity', '');
                                    let isSubmit = false;
                                    Object.keys(obj.field).forEach(v => {
                                        if (!obj.field[v] && (v.indexOf('id') < 0) && v != 'unity') {
                                            isSubmit = true;
                                        }
                                    })
                                    if (isSubmit || Object.keys(obj.field).indexOf('select[0][name]') < 0) {
                                        layer.msg('请填写选项', {
                                            icon: 5,
                                            anim: 6,
                                            time: 2000
                                        });
                                        return false;
                                    }
                                }
                                $.ajax({
                                    url: '{:url("customer_new_portrait/edit_field")}',
                                    type: 'post',
                                    data: formData,
                                    dataType: 'json',
                                    processData: false,
                                    contentType: false,
                                    success: function (res) {
                                        if (res.code == 0) {
                                            layer.msg(res.msg, {
                                                anim: 0,
                                            }, function () {
                                                location.reload();
                                            });
                                        } else {
                                            layer.msg(res.msg, {
                                                icon: 5,
                                                anim: 6,
                                                time: 2000
                                            });
                                        }
                                    }
                                });
                            });
                        } else {
                            formData.delete('oldType');
                            formData.set('type', obj.field.type);
                            if (obj.field.type != 3 && obj.field.type != 4) {
                                formData.append('select', '');
                                if (obj.field.type != 2) {
                                    formData.set('unity', '');
                                }
                            } else {
                                formData.set('unity', '');
                                let isSubmit = false;
                                Object.keys(obj.field).forEach(v => {
                                    if (!obj.field[v] && (v.indexOf('id') < 0) && v != 'unity') {
                                        isSubmit = true;
                                    }
                                })
                                if (isSubmit || Object.keys(obj.field).indexOf('select[0][name]') < 0) {
                                    layer.msg('请填写选项', {
                                        icon: 5,
                                        anim: 6,
                                        time: 2000
                                    });
                                    return false;
                                }
                            }
                            $.ajax({
                                url: '{:url("customer_new_portrait/edit_field")}',
                                type: 'post',
                                data: formData,
                                dataType: 'json',
                                processData: false,
                                contentType: false,
                                success: function (res) {
                                    if (res.code == 0) {
                                        layer.msg(res.msg, {
                                            anim: 0,
                                        }, function () {
                                            location.reload();
                                        });
                                    } else {
                                        layer.msg(res.msg, {
                                            icon: 5,
                                            anim: 6,
                                            time: 2000
                                        });
                                    }
                                }
                            });
                        }

                    });
                });
                form.render();
            }, 500)
        }

        function renderSelectItemHtml(arry = [], dom, id, idx) {
            let htmls = arry.map((item, index) => {
                return `<div class="flex align-center mtbr10 select-item-box-${id}">
                            <span class="mr10">选项${index + 1}</span>
                            <input data-type="input" data-idx="${idx}" data-index="${index}" type="text" name="select[${index}][name]" value="${item.name}" placeholder="请输入标题" autocomplete="off"
                                class="layui-input select_input_content mr10" style="width:150px;">
                            <input type="hidden" name="select[${index}][id]" value="${item.id || ''}" />
                            <i data-id="${id}" data-curid="${item.id}" data-idx="${idx}" data-index="${index}" class="layui-icon layui-icon-delete red-font"></i>
                        </div>`;
            }).join('');
            let htmls1 = `${htmls}
                            <div data-id="${id}" data-index="${idx}" class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue add-select-btn add-select-btn-${id}">
                                +添加
                            </div>`
            $(`.${dom}`).html(htmls1);
            setTimeout(() => {
                $('.select_input_content').change(function () {
                    let props = $(this).prop('dataset');
                    if (props.type && (props.type == 'input')) {
                        fieldlist[parseInt(props.idx)].select[parseInt(props.index)].name = $(this).val();
                    }
                })
                $('.add-select-btn').click(function () {
                    let id = $(this).prop('dataset').id;
                    let idx = $(this).prop('dataset').index;
                    let index = $(`.select-item-box-${id}`).length;
                    if (index > 0) {
                        fieldlist[parseInt(idx)].select.push({ name: '', id: '', pid: id });
                    } else {
                        fieldlist[parseInt(idx)].select = [];
                        fieldlist[parseInt(idx)].select.push({ name: '', id: '', pid: id });
                    }
                    renderSelectItemHtml(fieldlist[parseInt(idx)].select, `select-list-box-${id}`, id, idx);
                })
                $('.layui-icon-delete').click(function () {
                    let id = $(this).prop('dataset').id;
                    let index = $(this).prop('dataset').index;
                    let idx = $(this).prop('dataset').idx;
                    let curid = $(this).prop('dataset').curid;
                    layer.confirm('确定删除当前选项？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (cdx) {
                        layer.close(cdx);
                        if (id && index && idx) {
                            if (curid) {
                                let loadingIndex = layer.load('Loading...', {
                                    shade: [0.6,'#000'] //0.1透明度的白色背景
                                });
                                $.ajax({
                                    url: "{:url('customer_new_portrait/del_select_opt')}",
                                    data: {
                                        id: curid,
                                        pid: id
                                    },
                                    type: 'post',
                                    dataType: 'json',
                                    success: function (res) {
                                        layer.close(loadingIndex);
                                        if (res.code == 0) {
                                            layer.msg('删除成功，当前选项未使用');
                                            fieldlist[parseInt(idx)].select.splice(parseInt(index), 1);
                                            renderSelectItemHtml(fieldlist[parseInt(idx)].select, `select-list-box-${id}`, id, idx);
                                        } else {
                                            layer.msg(res.msg)
                                        }
                                    }
                                });
                            } else {
                                fieldlist[parseInt(idx)].select.splice(parseInt(index), 1);
                                renderSelectItemHtml(fieldlist[parseInt(idx)].select, `select-list-box-${id}`, id, idx);
                            }
                        }
                    })
                })
            }, 300)
        }

        $('.layui-left-add-plan').click(function () {
            layer.prompt({ title: ['添加画像', 'color:#333333;background-color:#D8E6F1;'], }, function (value, index, elem) {
                addClientContentApi(value);
                layer.close(index);
            });
        })

        $('#add_field_btn').click(function () {
            layer.open({
                type: 2,
                title: ['添加客户画像字段', 'color:#333333;background-color:#D8E6F1;'],
                content: '{:url("customer_new_portrait/add_field")}?pid=' + curId,
                resize: false,
                area: ['60%', '70%'],
                // btn: ['确认提交', '取消'],
                yes: function (index, layero) {
                    //点击确认触发 iframe 内容中的按钮提交
                    // var submit = layero.find('iframe').contents().find("#layuiadmin-field-submit");
                    // submit.click();
                },
                end: function () {
                    requestListApi(curId);
                }
            });
        })
    });
</script>
{/block}