crm/app/sys/view/material/personal_case_list.html

{extend name="public/layout" /} {block name="title"}个人案例{/block} {block name="body"}

<link rel="stylesheet" href="__LAYUI__/common.css" media="all">
<style type="text/css">
    html,
    body {
        display: block;
        min-width: 1100px;
        font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
    }

    .layui-table thead tr,
    .layui-table-header {
        background-color: #D8E6F1 !important;
    }

    .layui-tab {
        padding: 15px;
        height: 100%;
        box-sizing: border-box;
    }

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

    .layui-form-label {
        width: auto;
    }

    .layui-laydate-range {
        width: 581px;
    }

    .layui-table-page>div {
        display: flex;
        justify-content: flex-start;
    }

    .layui-btn-primary,
    .layui-btn-primary:hover {
        border: 1px solid #249EFB;
        background-color: #fff;
        color: #249EFB;
    }

    .layui-form-item .layui-inline {
        margin-right: 0px;
    }

    .layui-btn-normal,
    .layui-btn-normal:hover {
        border: 1px solid #249EFB;
        background-color: #fff;
        color: #249EFB;
    }

    .layui-btn-danger,
    .layui-btn-danger:hover {
        color: #FF5722;
        border: 1px solid #FF5722;
        background-color: #fff;
    }

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

    .relative {
        position: relative;
    }

    .noneClass {
        display: none !important;
    }

    .c_wordlist {
        width: 20px;
        position: absolute;
        top: 43px;
        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;
    }

    .s_wordlist {
        width: 20px;
        position: absolute;
        top: 43px;
        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;
    }

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

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

    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 */
    }

    .layui-form-select dl {
        width: 100% !important;
    }

    .layui-tab {
        width: 98%;
        background-color: #fff;
        margin: 15px auto;
        box-shadow: 0 0 4px 0 #B6CADE;
        border-radius: 5px;
    }

    .layui-tab-title .layui-this {
        color: #249EFB;
    }

    .layui-tab-title .layui-this:after {
        width: 50px;
        height: 4px;
        background-color: #249EFB;
        top: 36px !important;
        left: 50%;
        transform: translateX(-50%);
        border: none;
    }

    .layui-tab-title li {
        margin: 0px 5px;
    }

    .layui-tab-title {
        box-sizing: border-box;
        border-bottom: 1px solid #f5f5f5;
        padding: 0px 5px;
    }

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

    .ablock {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    .ml5 {
        margin-left: 14px !important;
    }
</style>


<body>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class=""><a class="ablock" href="{:url('material/caselisting')}">公司上传</a></li>
            <li class="layui-this ml5">案例审核</li>
            <li id="details"><a class="ablock" href="{:url('material/case_data_statistics')}">数据统计</a></li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-card">
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                        <div class="layui-form-item">
                            <div style="float:right;">
                                <div class="layui-inline" style="margin-right: 0px;">
                                    <label class="layui-form-label">员工筛选</label>
                                    <div class="layui-input-inline relative">
                                        <select name="employee_id" lay-filter="employee" id="employee" lay-search>
                                            <option value="">请选择员工</option>
                                            {volist name="employee" id="t"}
                                            <option data-py="{$t.s}" value="{$t.id}">{$t.name}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline" style="margin-right: 0px;">
                                    <label class="layui-form-label">小区筛选</label>
                                    <div class="layui-input-inline relative" id="box212">
                                        <select name="community" lay-filter="community" id="community" lay-search>
                                            <option value="">请选择小区</option>
                                            {notempty name="communityList"}
                                            {volist name="communityList.arr" id="t"}
                                            <option data-py="{$t.s}" value="{$t.id}">{$t.name}</option>
                                            {/volist}
                                            {/notempty}
                                        </select>
                                        <ul class="c_wordlist noneClass">
                                            {notempty name="communityList"}
                                            {volist name="communityList.sort" id="vo"}
                                            <li data-py="{$vo}">{$vo}</li>
                                            {/volist}
                                            {/notempty}
                                        </ul>
                                    </div>
                                </div>
                                <div class="layui-inline" style="margin-right: 0px;">
                                    <label class="layui-form-label">设计师筛选</label>
                                    <div class="layui-input-inline relative" id="box616">
                                        <select name="designer_id" lay-filter="designer" id="designer" lay-search>
                                            <option value="">请选择设计师</option>
                                            {notempty name="designers"}
                                            {volist name="designers.arr" id="t"}
                                            <option data-py="{$t.s}" value="{$t.id}">{$t.name}</option>
                                            {/volist}
                                            {/notempty}
                                        </select>
                                        <ul class="s_wordlist noneClass">
                                            {notempty name="designers"}
                                            {volist name="designers.sort" id="vo"}
                                            <li data-py="{$vo}">{$vo}</li>
                                            {/volist}
                                            {/notempty}
                                        </ul>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn layuiadmin-btn-course searchBtn submitbtn" lay-submit
                                        lay-filter="LAY-user-front-search">
                                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body" style="text-align: center;">
                        <table id="personal_approval" lay-filter="personal_approval"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/html" id="cover">
    {{# if(d.cover){ }}
        <img style="display: inline-block; width: 25%; height: 100%;" src="{{d.cover}}?x-oss-process=image/resize,w_50">
    {{# }else{ }}
        <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="community_name">
    {{# if(d.community){ }}
        <span>{{d.community.name}}</span>
    {{# }else{ }}
        <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="squaretpl">
    {{# if(d.square){ }}
        <span>{{d.square}}㎡</span>
    {{# }else{ }}
        <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="housetype_name">
    {{# if(d.decostyle){ }}
        <span>{{d.decostyle.name}}</span>
    {{# }else{ }}
        <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="designer_name">
    {{# if(d.designer){ }}
    <span>{{d.designer.name}}</span>
    {{# }else{ }}
    <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="employee_name">
    {{# if(d.employee){ }}
    <span>{{d.employee.name}}</span>
    {{# }else{ }}
    <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="viewQr">
    {{# if(d.qrcode){ }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="viewQrcode">查看</a>
    {{# }else{ }}
        <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="table-user-bind">
    {{# if(d.publish != 1){ }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="pass">
            通过
        </a>
    {{# }else{ }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="pass">
            下架
        </a>
    {{# } }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        修改
    </a>
    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger" lay-event="del">
        删除
    </a>
</script>
{/block} {block name="js"}
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table', 'laydate'], function () {
        var $ = layui.$,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table,
            scrollTopNum = 0;
        //日期范围
        laydate.render({
            elem: '#select_date',
            range: true
        });
        //监听搜索
        form.on('submit(LAY-user-front-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('personal_approval', {
                where: field
            });
        });
        //事件
        var active = {
            add: function () {
                layer.open({
                    type: 2,
                    title: ['活动添加', 'color:#333333;background-color:#D8E6F1;'],
                    content: '{:url("activity/add")}',
                    resize: false,
                    area: ['80%', '80%'],
                    // btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        // var submit = layero.find('iframe').contents().find("#activity-submit");
                        // submit.click();
                    }
                });
            }
        };

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

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

        $('#box212').click(() => {
            $('.c_wordlist').toggleClass('noneClass');
        })
        $('#box616').click(() => {
            $('.s_wordlist').toggleClass('noneClass');
        })

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

        let options = [];
        let xqDatalist = $('#community').children();
        for (let i = 0; i < xqDatalist.length; i++) {
            if (xqDatalist[i].dataset.py) {
                options.push(xqDatalist[i].dataset.py)
            }
        }
        let options2 = [];
        let dsDatalist = $('#designer').children();
        for (let i = 0; i < dsDatalist.length; i++) {
            if (dsDatalist[i].dataset.py) {
                options2.push(dsDatalist[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(curWord)
            } else {
                index = options.indexOf(curWord)
            }
            setTimeout(() => {
                e.target.className = 'li_active';
                let num = index * 37 + 37;
                $('.xqElement').scrollTop(num);
            }, 50)
            e.stopPropagation();
        })

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

        let filterData = { from: '1' };
        //活动列表
        table.render({
            elem: '#personal_approval',
            url: "{:url('material/caselist')}",
            where: filterData,
            height: 'full-160',
            cols: [
                [{
                    align: 'center',
                    field: 'title',
                    title: '案例标题',
                    minWidth: 100,
                    templet: '#titletpl'
                }, {
                    align: 'center',
                    title: '小区名称',
                    templet: '#community_name'
                }, {
                    align: 'center',
                    title: '房屋面积',
                    templet: '#squaretpl'
                }, {
                    align: 'center',
                    title: '装修报价',
                    field: 'money'
                }, {
                    align: 'center',
                    title: '装修风格',
                    templet: '#housetype_name'
                },
                {
                    align: 'center',
                    title: '设计师',
                    minWidth: 100,
                    templet: '#designer_name'
                }
                    , {
                    align: 'center',
                    title: '上传员工',
                    minWidth: 100,
                    templet: '#employee_name'
                },
                {
                    align: 'center',
                    field: 'addtime',
                    title: '上传时间',
                    minWidth: 100
                }, /*{
                    align: 'center',
                    title: '扫码预览',
                    minWidth: 100,
                    templet: '#viewQr'
                },*/ {
                    align: 'center',
                    title: '操作',
                    width: 200,
                    align: 'center',
                    fixed: 'right',
                    templet: "#table-user-bind"
                }]
            ],
            page: true,
            height: 'full-240',
            text: '对不起，加载出现异常！'
        });

        setTimeout(() => {
            $('.layui-table-main').scroll(function (e) {
                scrollTopNum = $(this).scrollTop();
            })
        }, 800)

        function scrollPostion(num) {
            $('.layui-table-main').scrollTop(num)
        }

        //监听审核
        table.on('tool(personal_approval)', function (obj) {
            var data = obj.data;
            if (obj.event === 'pass') {
                let msg = data.publish == 1 ? '确定下架当前案例？' : '确定通过审核？';
                layer.confirm(msg, { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
                    $.ajax({
                        type: "post",
                        url: '{:url("material/apipublish")}',
                        data: {
                            id: data.id,
                            cate: 'case'
                        },
                        success: function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {
                                    anim: 0
                                }, function () {
                                    //执行重载
                                    table.reload('personal_approval');
                                    // obj.del();
                                    layer.close(index);
                                });
                            } else {
                                layer.msg(res.msg, {
                                    anim: 6
                                });
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: ['个人案例修改', 'color:#333333;background-color:#D8E6F1;'],
                    content: "{:url('material/casedetail')}?id=" + data.id,
                    // content: layui.setter.urlbase + "/activity/edit/id/" + data.id,
                    resize: false,
                    area: ['90%', '90%'],
                    // btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        // var submit = layero.find('iframe').contents().find("#activity-submit");
                        // submit.click();
                    },
                    end: function () {
                        scrollPostion(scrollTopNum)
                        setTimeout(() => {
                            $('.layui-table-main').scroll(function (e) {
                                scrollTopNum = $(this).scrollTop();
                                console.log(scrollTopNum, '<<<记录位置');
                            })
                        }, 800)
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('确定删除此案例？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
                    $.get("{:url('material/apicasedelete')}?id=" + data.id, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {
                                anim: 0
                            }, function () {
                                //执行重载
                                table.reload('personal_approval');
                                // obj.del();
                                layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg, {
                                anim: 6
                            });
                        }
                    });
                });
            } else if (obj.event === 'viewQrcode') {
                layer.photos({ photos: { "data": [{ "src": data.qrcode }] }, closeBtn: true });
            }
        });

        form.on('switch(show)', function (obj) {
            var id = obj.value;
            $.ajax({
                type: "post",
                url: '{:url("activity/show")}',
                data: {
                    id: id
                },
                success: function (res) {
                    layer.msg(res.msg);
                }
            });
        });

        $('.layui-btn.layuiadmin-btn-course').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //发布
        form.on('switch(show)', function (obj) {
            // console.log(obj)
            // return false;
            var id = obj.value;
            $.ajax({
                type: "post",
                url: '{:url("activity/show")}',
                data: {
                    id: id,
                    cate: 'case'
                },
                success: function (res) {
                    layer.msg(res.msg, { time: 2000 });
                }
            });
        });

    });
</script>
{/block}