crm/app/sys/view/statistics/office_table_data.html

{extend name="public/layout" /}
{block name="title"}跟进情况统计{/block}
{block name="head"}
{include file="public/head"}
<style>
    html {
        background: #fff;
    }

    .table_body {
        width: 97%;
        margin: 0 auto;
        overflow-y: auto;
        height: 95vh;
    }

    /* 			.table_box{padding:15px;} */
    .table_box thead tr th {
        text-align: center;
        white-space: nowrap;
        outline: 1px solid #000000;
        border: none !important;
        color: #000;
        outline-offset: -0.5px;
    }

    .table_box thead tr {
        border-left: 1px solid #000000;
    }

    .table_box thead tr:nth-child(1) {
        border-top: 1px solid #000000;
    }


    .table_box tbody tr td {
        text-align: center;
        border-top: none;
    }

    .tablebtn {
        margin-top: 10px;
    }

    .pdlr31 {
        padding: 0 31px;
    }

    .bgEEECE1 {
        /* background-color: #EEECE1; */
        background-color: #8db4e2;
    }

    .bgFFFFFF {
        /* background-color: #FFFFFF; */
        background-color: #8db4e2;
    }

    .bgA6A6A6 {
        /* background-color: #A6A6A6; */
        background-color: #8db4e2;
    }

    .bgDCE6F1 {
        /* background-color: #DCE6F1; */
        background-color: #8db4e2;
    }


    .bgF2DCDB {
        /* background-color: #F2DCDB; */
        background-color: #8db4e2;
    }


    .bgFDE9D9 {
        /* background-color: #FDE9D9; */
        background-color: #8db4e2;
    }

    .bgFE3557 {
        color: red;
    }

    .layui-table td,
    .layui-table-col-set,
    .layui-table-fixed-r,
    .layui-table-grid-down,
    .layui-table-header,
    .layui-table-page,
    .layui-table-tips-main,
    .layui-table-tool,
    .layui-table-total,
    .layui-table-view,
    .layui-table[lay-skin=line],
    .layui-table[lay-skin=row] {
        border-width: 1px;
        border-style: solid;
        border-color: #000000;
        color: #000;
    }

    .layui-table td,
    .layui-table th {
        word-break: keep-all;
        word-wrap: break-word;
        padding: 9px !important;
    }

    .tableHeader {
        position: sticky;
        top: 0;
        background-color: #CCC !important;
        table-layout: fixed;
        z-index: 999 !important;
    }

    .line-middle {
        display: inline-block;
        margin: 0 10px;
    }

    .mdt10 {
        margin-top: 10px;
    }

    .line {
        width: 10px;
        height: 2px;
        background-color: #999999;
    }

    .ml10 {
        margin-left: 10px;
    }

    .wright {
        float: right
    }

    .mdr30 {
        margin-right: 30px;
    }

    .layui-form-selected dl {
        z-index: 11111;
    }

    .relative {
        position: relative;
    }

    .selectDateBox {
        position: absolute;
        width: 330px;
        height: 100px;
        box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
        background-color: #fff;
        z-index: 99999 !important;
        top: 45px;
        box-sizing: border-box;
        padding: 5px 8px;
    }

    .selecstDateBox {
        position: absolute;
        width: 330px;
        height: 100px;
        box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
        background-color: #fff;
        z-index: 99999 !important;
        top: 45px;
        right: 0;
        box-sizing: border-box;
        padding: 5px 8px;
    }

    .date-flex,
    .date-flex1 {
        display: flex;
        align-items: center;
    }

    .date-box {
        padding: 15px 0px 10px;
    }

    .export {
        display: inline-block;
        float: left;
        margin-left: 25px;
        margin-top: 10px;
    }

    .export a {
        color: #249efb;
    }

    #rangeDepart {
        width: 260px;
        height: 38px;
    }

    xm-select>.xm-body {
        z-index: 99999 !important;
    }
</style>
{/block}
{block name="body"}
<div class="">
    <div class="export">
        <button type="button" id="tablebtn" class="layui-btn layui-btn-primary tablebtn" style="margin: 0;">导出</button>
        <a href="javascript:void(0)" id="export-list">查看</a>
    </div>
    <div class="wright">
        <form>
            <div class="layui-input-inline layui-form mdt10" style="display:inline-block">
                <!-- <select name="type_id" class="type_id" id="org_id" lay-search>
                    <option value="">请选择部门</option>
                    {volist name="org" id="i"}
                    <option value="{$i.id}">{$i.name}</option>
                    {/volist}
                </select> -->
                <div id="rangeDepart"></div>
            </div>
            <div class="layui-input-inline layui-form mdt10" style="display:inline-block">
                <label class="layui-form-label" style="width: 60px;">加微时间</label>
                <div class="layui-input-inline select-date relative">
                    <input data-type="" type="text" name="add_wechat_time" id="addWechatTime" readonly
                        placeholder="开始时间 - 结束时间" autocomplete="off" class="layui-input">
                    <div data-type="" class="selectDateBox layui-hide">
                        <div data-type="" class="date-flex">
                            <div data-type="today" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">今日
                            </div>
                            <div data-type="yesterday"
                                class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">昨日</div>
                            <div data-type="week" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">本周
                            </div>
                            <div data-type="lastWeek"
                                class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">上周</div>
                            <div data-type="month" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">本月
                            </div>
                            <div data-type="lastMonth"
                                class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">上月</div>
                            <div data-type="all" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
                                累计</div>
                        </div>
                        <div data-type="" class="date-box">
                            <input data-type="" type="text" id="select_date" placeholder="选择开始时间 - 结束时间" readonly
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-input-inline layui-form mdt10" style="display:inline-block">
                <label class="layui-form-label" style="width: 60px;">跟进时间</label>
                <div class="layui-input-inline select-date relative">
                    <!-- 注意：这一层元素并不是必须的 -->
                    <input type="text" class="layui-input" id="sDate" name="start_date" placeholder="开始日期 - 结束日期"
                        autocomplete="off">
                    <div data-type="" class="selecstDateBox layui-hide">
                        <div data-type="" class="date-flex1">
                            <div data-type="today" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">今日
                            </div>
                            <div data-type="yesterday"
                                class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">昨日</div>
                            <div data-type="week" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">本周
                            </div>
                            <div data-type="lastWeek"
                                class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">上周</div>
                            <div data-type="month" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">本月
                            </div>
                            <div data-type="lastMonth"
                                class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">上月</div>
                            <div data-type="all" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
                                累计</div>
                        </div>
                        <div data-type="" class="date-box">
                            <input data-type="" type="text" id="select_sDate" placeholder="选择开始时间 - 结束时间" readonly
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-inline mdt10" style="margin-right: 25px;">
                <button type="button" class="layui-btn sBtn ml10 table-search submitbtn">筛选</button>
            </div>
        </form>
    </div>
</div>
<div class="table_body">
    <table class="layui-table table_box"
        style="display: block;overflow: auto;height: 80vh;position: relative;border-collapse:collapse;">
        <thead class="tableHeader">
            <tr>
                {volist name="header1" id="h1"}
                <th rowspan="{$h1.rowspan??1}" colspan="{$h1.colspan??1}" class="{$h1.class}">{$h1.title|raw}</th>
                {/volist}
            </tr>
            <tr>
                {volist name="header2" id="h2"}
                <th class="{$h2.class}">{$h2.title|raw}</th>
                {/volist}
            </tr>
        </thead>
        <tbody class="table_tbodys">

        </tbody>
    </table>
    <div id="demo7"></div>
</div>

{/block}
{block name="js"}
<script src="__STATIC__/layui/layui/lay/modules/xm-select.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="__STATIC__/js/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/FileSaver.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/tableExport.min.js"></script>
<script>
    layui.use(['table', 'laypage', 'laydate'], function () {
        var table = layui.table;
        laypage = layui.laypage;
        laydate = layui.laydate;
        $ = layui.$;
        var pagePre = 1;
        var limit = 10;
        var row = eval('{$row|raw}');
        var where = {};
        var msgindex;
        let date = $('#sDate').val();
        if (date) {
            where.sdate = date.split(' - ')[0];
            where.edate = date.split(' - ')[1];
        }
        where.page = pagePre;
        where.limit = limit;
        where.org_id = $('#org_id').val();
        //where.add_wechat_time = '2022-10-10 - 2022-10-10';
        where.add_wechat_time = $('#select_date').val();
        //日期范围
        laydate.render({
            elem: '#select_date'
            , type: 'date'
            , range: true
            , format: 'yyyy/MM/dd'
            , trigger: 'click',//呼出事件改成click
            done: function (value, date, endDate) {
                $('.selectDateBox').addClass('layui-hide');
                $('#addWechatTime').val(value);
            }
        });
        laydate.render({
            elem: '#select_sDate' //指定元素
            , type: 'date'
            , format: 'yyyy/MM/dd'
            , range: true
            , trigger: 'click',//呼出事件改成click
            done: function (value, date, endDate) {
                $('.selecstDateBox').addClass('layui-hide');
                $('#sDate').val(value);
            }
        });

        $('#addWechatTime').click(function () {
            $('.selectDateBox').toggleClass('layui-hide');
            $('.selecstDateBox').addClass('layui-hide');
        })
        $('#sDate').click(function () {
            $('.selecstDateBox').toggleClass('layui-hide');
            $('.selectDateBox').addClass('layui-hide');
        })

        var dateObj = {};
        setDate();
        function setDate() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let lastDate = new Date(new Date().getTime() - (1 * 24 * 60 * 60 * 1000));
            let lastYear = lastDate.getFullYear();
            let lastMonth = lastDate.getMonth() + 1;
            let lastDay = lastDate.getDate();

            let weekObj = getMondayAndSunday();
            let monthObj = getMonthFirstDayAndLastDay();
            dateObj = {
                today: `${year}/${month}/${day}`,
                yesterday: `${lastYear}/${lastMonth}/${lastDay}`,
                ...weekObj,
                ...monthObj
            }
        }

        var departTree = xmSelect.render({
            el: "#rangeDepart",
            name: 'type_id',
            autoRow: true,
            filterable: true,
            tips: '请选择',
            radio: true,
            tree: {
                show: true,
                showFolderIcon: true,
                showLine: true,
                indent: 20,
                expandedKeys: [-3],
                //是否严格遵守父子模式
                strict: false,
            },
            height: "200px",
            data: [],
            //文本显示模式
            //处理方式
        });

        $.ajax({
            url: '{:url("statistics/get_person")}',
            type: "post",
            data: {},
            success: function (res) {
                departTree.update({ data: res })
            }
        })

        $('.date-flex div').click(function () {
            let type = $(this).prop('dataset').type;
            if (type == 'today') {
                itmesss = dateToYYYYMMDD(dateObj.today);
                itmesss2 = dateToYYYYMMDD(dateObj.today);
                $('#select_date').val(itmesss + ' - ' + itmesss2);
                $('#addWechatTime').val(itmesss + ' - ' + itmesss2);
            } else if (type == 'yesterday') {
                itmesss = dateToYYYYMMDD(dateObj.yesterday);
                itmesss2 = dateToYYYYMMDD(dateObj.yesterday);
                $('#select_date').val(itmesss + ' - ' + itmesss2);
                $('#addWechatTime').val(itmesss + ' - ' + itmesss2);
            } else if (type == 'week') {
                $('#select_date').val(`${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`);
                $('#addWechatTime').val(`${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`);
            } else if (type == 'lastWeek') {
                $('#select_date').val(`${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`);
                $('#addWechatTime').val(`${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`);
            } else if (type == 'month') {
                $('#select_date').val(`${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`);
                $('#addWechatTime').val(`${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`);
            } else if (type == 'lastMonth') {
                $('#select_date').val(`${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`);
                $('#addWechatTime').val(`${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`);
            } else {
                $('#select_date').val('');
                $('#addWechatTime').val('');
            }
            $('.selectDateBox').addClass('layui-hide');
        })

        document.onkeydown = function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 13) {
                $(".submitbtn").trigger("click");
            }
        };

        $('.date-flex1 div').click(function () {
            let type = $(this).prop('dataset').type;
            if (type == 'today') {
                itmesss = dateToYYYYMMDD(dateObj.today);
                itmesss2 = dateToYYYYMMDD(dateObj.today);
                $('#select_sDate').val(itmesss + ' - ' + itmesss2);
                $('#sDate').val(itmesss + ' - ' + itmesss2);
            } else if (type == 'yesterday') {
                itmesss = dateToYYYYMMDD(dateObj.yesterday);
                itmesss2 = dateToYYYYMMDD(dateObj.yesterday);
                $('#select_sDate').val(itmesss + ' - ' + itmesss2);
                $('#sDate').val(itmesss + ' - ' + itmesss2);
            } else if (type == 'week') {
                $('#select_sDate').val(`${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`);
                $('#sDate').val(`${dateObj.thisWeekMonday} - ${dateObj.thisWeekSunday}`);
            } else if (type == 'lastWeek') {
                $('#select_sDate').val(`${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`);
                $('#sDate').val(`${dateObj.lastWeekMonday} - ${dateObj.lastWeekSunday}`);
            } else if (type == 'month') {
                $('#select_sDate').val(`${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`);
                $('#sDate').val(`${dateObj.thisMonthFirstDay} - ${dateObj.thisMonthLastDay}`);
            } else if (type == 'lastMonth') {
                $('#select_sDate').val(`${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`);
                $('#sDate').val(`${dateObj.lastMonthFirstDay} - ${dateObj.lastMonthLastDay}`);
            } else {
                $('#select_sDate').val('');
                $('#sDate').val('');
            }
            $('.selecstDateBox').addClass('layui-hide');
        })

        function getMondayAndSunday() {
            var today = new Date();

            //构建当前日期,格式：2022-08-22 00:00:00
            var year = today.getFullYear(); //本年 
            var month = today.getMonth() + 1; //本月
            var day = today.getDate(); //本日
            var newDate = new Date(year + "/" + month + "/" + day + " 00:00:00"); //年月日拼接

            var nowTime = newDate.getTime(); //当前的时间戳
            var weekDay = newDate.getDay(); //当前星期 0.1.2.3.4.5.6 【0 = 周日】

            var oneDayTime = 24 * 60 * 60 * 1000; //一天的总ms

            // 当前星期减去天数，如今天为周五，则本周一为周五的时间戳减去4天的时间戳。但周日特殊，周一至周六是周几的到的weekDay就是几，但是周日的到的为0，需特殊处理
            var thisWeekMondayTime = (1 - weekDay) * oneDayTime + nowTime; //本周一的时间戳
            if (weekDay == 0) {
                // weekDay = 0 为周日，此时本周一时间为周日减去6天的时间
                thisWeekMondayTime = nowTime - 6 * oneDayTime
            }

            var thisWeekSundayTime = thisWeekMondayTime + 6 * 24 * 60 * 60 * 1000 // 本周日

            var lastWeekMondayTime = thisWeekMondayTime - 7 * oneDayTime // 上周一
            var lastWeekSundayTime = thisWeekMondayTime - oneDayTime // 上周日

            var res = {
                thisWeekMonday: dateToYYYYMMDD(thisWeekMondayTime),
                thisWeekSunday: dateToYYYYMMDD(thisWeekSundayTime),
                lastWeekMonday: dateToYYYYMMDD(lastWeekMondayTime),
                lastWeekSunday: dateToYYYYMMDD(lastWeekSundayTime),
            }
            return res;
        }

        function getMonthFirstDayAndLastDay() {
            var date = new Date()
            // 值得注意的是，如果day取值为0，意味着取的是date时间的上一个月的最后一天，简单理解：date当前月的第一天，再减去一天
            var thisMonthFirstDay = date.setDate(1) // 本月第一天
            var thisMonthLastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0) // 本月最后一天

            var lastMonthFirstDay = new Date(date.getFullYear(), date.getMonth() - 1, 1) // 上月第一天

            var lastMonthLastDay = date.setDate(0) // 上月最后一天
            // var day = new Date(date.getFullYear(), date.getMonth(), 0).getDate()
            // var lastMonthLastDay = new Date(date.getFullYear(), date.getMonth() - 1, day) // 上月最后一天
            var res = {
                thisMonthFirstDay: dateToYYYYMMDD(thisMonthFirstDay),
                thisMonthLastDay: dateToYYYYMMDD(thisMonthLastDay),
                lastMonthFirstDay: dateToYYYYMMDD(lastMonthFirstDay),
                lastMonthLastDay: dateToYYYYMMDD(lastMonthLastDay),
            }
            return res
        }

        function dateToYYYYMMDD(date) {
            var time = new Date(date);
            var y = time.getFullYear();
            var m = (time.getMonth() + 1);
            m = m > 9 ? m : '0' + m;
            var d = time.getDate();
            d = d > 9 ? d : '0' + d;

            return y + "/" + m + "/" + d;
        }


        ajaxurls(where)
        function ajaxurls(where) {
            msgindex = layer.msg('加载中...', {
                icon: 16, time: -1
            })
            $.ajax({
                url: '{:url("statistics/officeStatistics")}',
                type: 'post',
                data: where,
                success: function (res) {
                    setTimeout(function () {
                        layer.close(msgindex);
                    }, 500)
                    let htmls = res.data.map((v, i) => {
                        let a = '<tr>';
                        row.forEach(function (k) {
                            if (v[k]) {
                                a += '<td>' + v[k] + '</td>';
                            } else {
                                a += '<td></td>';
                            }
                        })
                        a += '</tr>';
                        return a;
                    }).join('');
                    $('.table_tbodys')[0].innerHTML = htmls;

                    pages(where, res.count);

                }
            });
        }


        function pages(where, count) {
            laypage.render({
                elem: 'demo7'
                , count: count
                , curr: where.page
                , limit: where.limit
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                , jump: function (obj, first) {
                    limit = obj.limit
                    where.page = obj.curr
                    where.limit = obj.limit
                    if (!first) {
                        ajaxurls(where);
                    }
                }
            });
        }

        $('#tablebtn').click(function () {
            let sdate = '';
            let edate = '';
            let date = $('#sDate').val();
            if (date) {
                sdate = date.split(' - ')[0];
                edate = date.split(' - ')[1];
            }
            let org_id = departTree.getValue('valueStr');
            let add_wechat_time = $('#select_date').val();


            let url = "{:url('statistics/export',['m'=>'officeStatisticsExport'])}";
            layer.confirm('确定要导出该查询结果么？', function () {
                $.post(url, { sdate: sdate, edate: edate, org_id: org_id, add_wechat_time }, function (rs) {
                    if (typeof rs == 'string') rs = JSON.parse(rs);
                    layer.msg(rs.msg);
                })
            })
        })



        $('.table-search').on('click', function (data) {
            $('.selectDateBox').addClass('layui-hide');
            $('.selecstDateBox').addClass('layui-hide');
            let date = $('#sDate').val();
            if (date) {
                where.sdate = date.split(' - ')[0];
                where.edate = date.split(' - ')[1];
            } else {
                where.sdate = '';
                where.edate = '';
            }
            where.org_id = departTree.getValue('valueStr');
            where.add_wechat_time = $('#select_date').val();
            //执行重载
            ajaxurls(where)
        });

        $('#export-list').click(function () {
            layer.open({
                type: 2,
                area: ['600px', '600px'],
                content: '{:url("statistics/exportList2",array("type"=>"officeStatisticsExport"))}'
            });
        });
    });



</script>
{/block}