{extend name="public/layout" /} {block name="title"}客户报备设置{/block} {block name="body"}
<style type="text/css">
    html,
    body {
        display: block;
        width: 100%;
        height: 100%;
    }

    .lay-main {
        background-color: #EEEEEE;
        width: 100%;
        height: 100%;
    }

    .lay-leftBox {
        height: 100%;
    }

    .lay-leftBox form {
        height: 100%
    }

    .flex {
        display: flex;
    }

    .lay-rightBox {
        background-color: #fff;
        margin: 10px;
        box-sizing: border-box;
        padding: 10px;
        overflow-y: auto;
        height: 96%;
    }

    .lay-rightTips {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
    }

    .labelIcon {
        width: 5px;
        height: 18px;
        border-radius: 2px;
        background-color: #249EFB;
    }

    .valid {
        color: #249EFB;
        font-weight: 700;
    }

    .ml6 {
        margin-left: 6px;
    }

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

    .visitlistBox {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
    }

    .visitItemBox {
        flex: 1;
    }

    .layui-border-black {
        margin: 0px 5px 6px !important;
        position: relative;
    }

    .lay-close {
        position: absolute;
        top: -15px;
        right: -10px;
        z-index: 99 !important;
    }

    .fieldBox {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        padding: 10px 0px;
        height: 90%;
    }

    .fieldLeftBox {
        width: 60%;
        box-sizing: border-box;
    }

    .fieldRightBox {
        margin-left: 10px;
        box-sizing: border-box;
        flex:1;
    }

    .fieldTitle {
        font-size: 13px;
        color: #333333;
        font-weight: 600;
        line-height: 25px;
    }

    .fieldViewBox {
        border: 1px solid #EEEEEE;
        padding: 5px;
        border-radius: 4px;
        box-sizing: border-box;
        height: 92%;
        overflow: auto;
    }

    /*里面的代码可以根据自己需求去进行更改*/
    /* 设置滚动条的样式 */
    .fieldViewBox::-webkit-scrollbar {
        width: 4px;
    }

    /* 滚动槽 */
    .fieldViewBox::-webkit-scrollbar-track {
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
        border-radius: 0px;
    }

    /* 滚动条滑块 */
    .fieldViewBox::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #cccccc;
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }

    .searchBox {
        width: 100%;
        height: 40px;
        border: 1px solid #EEEEEE;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 0px 10px;
        display: flex;
        align-items: center;
    }

    .searchBox>input {
        flex: 1;
        height: 100%;
        margin-left: 10px;
        outline: none;
        border: none;
    }

    .selectFieldBox {
        width: 100%;
        height: auto;
        overflow: hidden;
        box-sizing: border-box;
        padding: 10px 0px 10px;
        display: flex;
        flex-wrap: wrap;
    }

    .layui-icon-ok:before {
        font-size: 12px !important;
    }

    .layui-form-checkbox {
        margin-bottom: 5px;
    }

    .sortItemBox {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
    }

    .sortLeft>img {
        width: 16px;
    }

    .sortRight>img {
        width: 16px;
    }

    .moveElement {
        cursor: move;
    }

    .fixed-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 10px;
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #cccccc;
        margin-top: 120px;
    }

    .fieldItem {
        width: 50%;
    }

    .checkedDel {
        cursor: pointer;
    }

    .layui-icon-search {
        cursor: pointer;
    }

    .allCheckedField {
        padding-top: 10px;
    }

    .layinputtext {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #DEEAF1;
        display: flex;
    }

    .textlabel {
        width: 120px;
        height: 100%;
        line-height: 40px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 13px;
    }

    .textinput {
        width: calc(100% - 120px);
        height: 100%;
        line-height: 40px;
        font-size: 13px;
    }

    .radiocontent {
        width: calc(100% - 150px);
        height: 100%;
        display: flex;
        font-size: 13px;
    }

    .radiocontent>div {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 13px;
        white-space: nowrap;
    }

    .gradecontent {
        width: calc(100% - 150px);
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 13px;
    }

    .gradecontent>span {
        flex: none;
        display: inline-block;
        padding: 2px 8px;
        height: 18px;
        border: 1px solid #9DB6CF;
        font-size: 13px;
        margin-right: 5px;
        font-size: 13px;
    }

    .selectContent {
        width: calc(100% - 150px);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
    }

    .selectContent>img {
        width: 8px;
    }

    .dateContent {
        width: calc(100% - 150px);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
    }

    .dateContent>img {
        width: 14px;
    }

    .lay-default {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .layui-form-checked[lay-skin=primary] i {
        border-color: #249EFB;
        background-color: #249EFB;
    }
</style>

<body>
    <div class="lay-main flex">
        <div class="lay-leftBox">
            <div class="lay-rightBox">
                <form class="layui-form">
                    <div class="lay-rightTips">
                        <div class="labelIcon"></div>
                        <span class="ml6">PC报备字段设置</span>
                    </div>
                    <div class="fieldBox">
                        <div class="fieldLeftBox">
                            <div class="fieldTitle" id="visitAllField"></div>
                            <div class="fieldViewBox">
                                <!-- <div class="searchBox">
                                    <i class="layui-icon layui-icon-search"></i>
                                    <input type="text" id="allFieldInput" autocomplete="off">
                                </div> -->
                                <div class="allCheckedField">
                                    <input lay-filter="checkedAll" name="all" title="全选" type="checkbox"
                                        lay-skin="primary">
                                </div>
                                <div class="selectFieldBox">
                                </div>
                            </div>
                        </div>
                        <div class="fieldRightBox">
                            <div class="fieldTitle" id="checkedFieldEl"></div>
                            <div class="fieldViewBox" id="scrollTargetEl">
                                <!-- <div class="searchBox">
                                    <i class="layui-icon layui-icon-search"></i>
                                    <input type="text" id="checkedSearchEl" autocomplete="off">
                                </div> -->
                                <div class="checkedFieldBox">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lay-default">
                        <div class="layui-btn layui-btn-primary" id="recoveryDefault">恢复默认</div>
                        <div>
                            <div class="layui-btn layui-btn-primary">取消</div>
                            <div class="layui-btn layui-btn-normal" lay-submit
                                lay-filter="layuiadmin-report-form-submit">确认</div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
</body>
{/block} {block name="js"}
<script type="text/javascript" src="__STATIC__/js/Sortable.js"></script>
<script>
    layui.config({
        base: '__LAYUI__/' //静态资源所在路径
        ,
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'layedit', 'element', 'upload'], function () {
        var $ = layui.$,
            table = layui.table,
            element = layui.element,
            upload = layui.upload,
            form = layui.form,
            visitFieldAll = [],
            checkedArr = [],
            defaultArr = [];

        form.render();

        getVisitFiled();
        function getVisitFiled() {
            $.ajax({
                type: "get",
                url: "{:url('customerSetting/report')}",
                data: {},
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        visitFieldAll = res.all;
                        checkedArr = res.checked;
                        defaultArr = res.default;
                        renderVisitFieldHtmls(visitFieldAll);
                        renderCheckedFieldHtmls(checkedArr);
                    }
                }
            })
        }

        function renderVisitFieldHtmls(fields) {
            $('#visitAllField').text(`可选择字段(共${fields.length}个）`);
            let htmls = fields.map((item, index) => {
                return `<div class="fieldItem"><input lay-filter="checkboxs" data-keyname="${item.keyname}" data-type="${item.type}" ${item.keyname == 'phone' ? 'disabled' : ''} class="visitFieldElement${item.id}" type="checkbox" ${(returnCheckedStatus(item.id)) ? 'checked' : ''} name="visit" value="${item.id}" title="${item.name}" lay-skin="primary"></div>`;
            }).join('');
            $('.selectFieldBox').html(htmls);
            setTimeout(() => {
                form.render();
                form.on('checkbox(checkboxs)', function (data) {
                    if (data.elem.checked) {
                        let OneValue = [];
                        $(`input:checkbox[name='visit']:checked`).each(function (i) {
                            let key = $(this).prop('dataset').keyname;
                            let type = $(this).prop('dataset').type;
                            OneValue.push({ id: $(this).val(), name: $(this).prop('title'), keyname: key, type: type });
                        });
                        let name = data.elem.title;
                        if (data.elem.dataset.keyname == 'name') {
                            checkedArr.unshift({ name: name, id: data.value, keyname: data.elem.dataset.keyname, type: data.elem.dataset.type });
                            renderCheckedFieldHtmls(checkedArr);
                        } else {
                            let itemArr = [];
                            OneValue.forEach(k => {
                                let item = checkedArr.filter(o => o.id == k.id);
                                if (!item.length) {
                                    itemArr.push(k)
                                }
                            })
                            checkedArr.push(...itemArr);
                            renderCheckedFieldHtmls(checkedArr);
                        }
                    } else {
                        checkedArr.forEach((y, i) => {
                            if (data.value == y.id) {
                                checkedArr.splice(i, 1);
                                renderCheckedFieldHtmls(checkedArr);
                                return;
                            }
                        })
                    }
                })

                form.on('checkbox(checkedAll)', function (data) {
                    if (data.elem.checked) {
                        $(`input:checkbox[name='visit']`).each(function (i) {
                            if ($(this).prop('dataset').keyname != 'phone') {
                                $(this).prop('checked', true);
                            }
                        });
                        checkedArr = visitFieldAll;
                        renderCheckedFieldHtmls(checkedArr);
                        form.render();
                    } else {
                        checkedArr = visitFieldAll.filter(v => v.keyname == 'phone');
                        renderCheckedFieldHtmls(checkedArr);
                        $(`input:checkbox[name='visit']:checked`).each(function (i) {
                            if ($(this).prop('dataset').keyname != 'phone') {
                                $(this).prop('checked', false);
                            }
                        });
                        form.render();
                    }
                })
            }, 600);
        }

        function renderCheckedFieldHtmls(checkedFields) {
            $('#checkedFieldEl').text(`已选择字段(共${checkedFields.length}个）`);
            let firstArr = checkedFields.filter(v => v.keyname == 'name' || v.keyname == 'phone');
            let htmls1 = '';
            if (firstArr.length == 1) {
                htmls1 = firstArr.map((item, index) => {
                    return `<div data-id="${item.id}" data-type="${item.type}" data-keyname="${item.keyname}" data-name="${item.name}" class="sortItemBox">
                  <div data-id="${item.id}" class="sortLeft">
                    ${item.keyname != 'phone' && item.keyname != 'name' ? `<img data-id="${item.id}" class="moveElement" src="/static/img/move.png" alt="">` : ''}
                    <span data-id="${item.id}" class="getSortName">${item.name}</span>
                  </div>
                  <div data-id="${item.id}" class="sortRight">
                    <img data-id="${item.id}" src="/static/img/sTop.png" alt="">
                    ${item.keyname != 'phone' ? `<img data-id="${item.id}" src="/static/img/sDel.png" class="checkedDel" alt="">` : ''}
                  </div>
                </div>`;
                }).join('');
            }
            if (firstArr.length == 2) {
                htmls1 = firstArr.map((item, index) => {
                    return `<div data-id="${item.id}" data-type="${item.type}" data-keyname="${item.keyname}" data-name="${item.name}" class="sortItemBox">
                  <div data-id="${item.id}" class="sortLeft">
                    ${item.keyname != 'phone' && item.keyname != 'name' ? `<img data-id="${item.id}" class="moveElement" src="/static/img/move.png" alt="">` : ''}
                    <span data-id="${item.id}" class="getSortName">${item.name}</span>
                  </div>
                  <div data-id="${item.id}" class="sortRight">
                    <img data-id="${item.id}" src="/static/img/sTop.png" alt="">
                    ${item.keyname != 'phone' ? `<img data-id="${item.id}" src="/static/img/sDel.png" class="checkedDel" alt="">` : ''}
                  </div>
                </div>`;
                }).join('');
            }
            let htmls = checkedFields.map((item, index) => {
                if (item.keyname != 'name' && item.keyname != 'phone') {
                    return `<div data-id="${item.id}" data-type="${item.type}" data-keyname="${item.keyname}" data-name="${item.name}" class="sortItemBox">
                  <div data-id="${item.id}" class="sortLeft">
                    ${item.keyname != 'phone' && item.keyname != 'name' ? `<img data-id="${item.id}" class="moveElement" src="/static/img/move.png" alt="">` : ''}
                    <span data-id="${item.id}" class="getSortName">${item.name}</span>
                  </div>
                  <div data-id="${item.id}" class="sortRight">
                    <img data-id="${item.id}" class="topping" src="/static/img/sTop.png" alt="">
                    ${item.keyname != 'phone' ? `<img data-id="${item.id}" src="/static/img/sDel.png" class="checkedDel" alt="">` : ''}
                  </div>
                </div>`;
                } else {
                    return null;
                }
            }).join('');
            let aHtmls = `${htmls1}<div class="draggleableBox" id="draggleableBox">${htmls}</div>`
            $('.checkedFieldBox').html(aHtmls);
            setTimeout(() => {
                new Sortable($('.draggleableBox')[0], {
                    handle: '.moveElement', // handle's class
                    filter: ".ignore-elements",
                    animation: 150
                });

                $('.checkedDel').click(function () {
                    let id = $(this).prop('dataset').id;
                    $(this).parent().parent().remove();
                    checkedArr.forEach((item, index) => {
                        if (item.id == id) {
                            $(`.visitFieldElement${id}`).removeAttr('checked');
                            checkedArr.splice(index, 1);
                            form.render();
                            return;
                        }
                    })
                })

                $('.sortRight').click(function () {
                    var ops1 = {
                        draggable: ".sortItemBox",
                        onChoose: function (evt) {
                            var index = evt.oldIndex;
                            $("#draggleableBox .sortItemBox").eq(index).insertBefore($("#draggleableBox .sortItemBox").eq(0));
                        }
                    };
                    var sortable1 = Sortable.create($('#draggleableBox')[0], ops1);
                })
            }, 600);
        }

        function returnCheckedStatus(vid) {
            let ids = checkedArr.map(v => parseInt(v.id));
            return ids.includes(parseInt(vid));
        }

        $('#checkedSearchEl').on('keyup', function (e) {
            let val = $(this).val();
            if (e.keyCode == 13 && val) {
                let eleArr = $('.getSortName');
                eleArr.each(function (index) {
                    let name = $(this).text();
                    if (name === val || name.indexOf(val) > -1) {
                        $('#scrollTargetEl').scrollTop((parseInt(index) + 1) * 40);
                        return;
                    }
                })
            }
        });

        $('#allFieldInput').on('keyup', function (e) {
            let val = $(this).val();
            if (e.keyCode == 13) {
                if (val) {
                    let itemArr = visitFieldAll.filter(item => {
                        if (val == item.name || item.name.search(val) > -1) {
                            return item;
                        }
                    })
                    renderVisitFieldHtmls(itemArr);
                } else {
                    renderVisitFieldHtmls(visitFieldAll);
                }
            }
        })

        $('#recoveryDefault').click(function () {
            layer.confirm('确定要恢复默认设置吗?', { title: '提示' }, function (index) {
                checkedArr = defaultArr;
                renderVisitFieldHtmls(visitFieldAll);
                renderCheckedFieldHtmls(checkedArr);
                layer.close(index);
            });
        })

        /* 监听提交 */
        form.on('submit(layuiadmin-report-form-submit)', function (obj) {
            let getCheckedField = $('.sortItemBox');
            let itemArr = [];
            getCheckedField.each(function (i) {
                let obj = $(this).prop('dataset');
                itemArr.push({ id: obj.id, name: obj.name, keyname: obj.keyname, sort: i + 1, type: obj.type });
            })
            $.ajax({
                url: '{:url("customerSetting/report_save")}',
                type: 'post',
                data: {
                    content: itemArr
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, { anim: 0 });
                        setTimeout(() => {
                            window.parent.reloadFunc();
                        }, 1000)
                    } else {
                        layer.msg(res.msg, { anim: 6 });
                    }
                }
            });
            return false;
        });
    });
</script>
{/block}