excel_handle/app/view/task/index.html

{extend name="public/layout" /}
{block name="header"}
{/block}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-header layui-card-header-auto layui-form">
        <div id="task-model-add" class="layui-form">
            <div class="layui-form-item active">
                <label class="layui-form-label" style="width: 140px;">任务类型</label>
                <div class="layui-input-block">
                    <input type="radio" lay-filter="task_type" name="task_type" value="1" title="导入处理" checked>
                    <input type="radio" lay-filter="task_type" name="task_type" value="2" title="导出处理">
                    <input type="radio" lay-filter="task_type" name="task_type" value="3" title="重复电话处理">
                    <input type="radio" lay-filter="task_type" name="task_type" value="4" title="重复车架处理">
                    <input type="radio" lay-filter="task_type" name="task_type" value="5" title="更新数据">
                </div>
            </div>
            <div class="layui-form-item task-param active" id="task-import">
                <label class="layui-form-label" style="width: 140px;">上传文件</label>
                <div class="layui-input-inline" style="width: 405px;">
                    <input type="text" name="original_filename" id="original_filename" class="layui-input" readonly>
                    <input type="hidden" name="filename" id="filename" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <button type="button" class="layui-btn" id="upload">
                        <i class="layui-icon">&#xe67c;</i>上传CSV文件
                    </button>
                </div>
                <a href="/static/tpl.csv" download="车辆信息导入模板.csv" style="color: #009688;">[下载车辆信息导入模板]</a>
            </div>
            <div class="task-param" id="task-export" style="display: none;">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 140px;">初登日期</label>
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="export_date1" class="layui-input export-date1">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="export_date2" class="layui-input export-date2">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 140px;">保险日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="insurer_month1" class="layui-input" style="display: inline-block; width: 60px;"> 月
                            <input type="text" name="insurer_day1" class="layui-input" style="display: inline-block; width: 60px;"> 日
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" name="insurer_month2" class="layui-input" style="display: inline-block; width: 60px;"> 月
                            <input type="text" name="insurer_day2" class="layui-input" style="display: inline-block; width: 60px;"> 日
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 140px;">导出类型</label>
                        <div class="layui-input-inline" style="width: 580px;">
                            <input type="radio" lay-filter="export_type" name="export_type" value="bhx" class="layui-input" title="导出清洗" checked>
                            <input type="radio" lay-filter="export_type" name="export_type" value="failed" class="layui-input" title="导出清洗失败">
                            <input type="radio" lay-filter="export_type" name="export_type" value="bmc" class="layui-input" title="导出清洗成功至上传">
                            <input type="radio" lay-filter="export_type" name="export_type" value="success_bmc" class="layui-input" title="导出清洗成功再次清洗">
                            <!-- <input type="radio" lay-filter="export_type" name="export_type" value="failed_bmc" class="layui-input" title="导出清洗失败至上传">
                            <input type="radio" lay-filter="export_type" name="export_type" value="none_bmc" class="layui-input" title="导出未处理至上传">
                            --> 
                       </div>
                    </div>
                    <div class="layui-inline" id="sub_export_type">
                        <label class="layui-form-label" style="width: 60px;">导出字段</label>
                        <div class="layui-input-inline" style="width: 210px;">
                            <input type="checkbox" name="export_field[]" lay-filter="export_field" value="car_no" title="车牌号">
                            <input type="checkbox" name="export_field[]" lay-filter="export_field" value="car_frame_no" title="车架号" checked>
                        </div>
          	            <label class="layui-form-label" style="width: 60px;">保险日期</label>
                        <div class="layui-inline">
                            <div class="layui-input-inline" style="width:auto;">
                                <input type="text" name="insurer_date1" class="layui-input  export-date1" style="display: inline-block; width: 100px;"> 
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width:auto;">
                                <input type="text" name="insurer_date2" class="layui-input  export-date2" style="display: inline-block; width: 100px;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 140px;">导出数量</label>
                        <div class="layui-input-inline">
                            <input type="text" name="export_limit" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 100px;">导出文件名</label>
                        <div class="layui-input-inline" style="width: 450px;">
                            <input type="text" name="queue" id="queue-name" class="layui-input" style="display:inline-block; width: 325px;">
                            <button type="button" class="layui-btn" onclick="getExportName(event)">生成文件名</button>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">导出总计：</label>
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="text" name="num" id="count" class="layui-input" disabled>
                        </div>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" onclick="export_num(event)">获取总数</button>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 140px;">新车购置价</label>
                        <div class="layui-input-inline" style="width: auto;">
                            <input type="text" name="price1" class="layui-input" style="display: inline-block; width: 60px;"> 万
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: auto;">
                            <input type="text" name="price2" class="layui-input" style="display: inline-block; width: 60px;"> 万
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 140px;">空电话检测</label>
                        <div class="layui-input-inline" style="width: 80px;">
                            <input type="checkbox" name="empty_phone_check" lay-skin="switch" lay-filter="empty_phone_check" value="yes" lay-text="开启|关闭" checked>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 140px;">是否EXCEL</label>
                        <div class="layui-input-inline" style="width: 80px;">
                            <input type="checkbox" name="is_excel" lay-skin="switch" value="yes" lay-text="开启|关闭" checked>
                        </div>
                    </div>
                </div>
            </div>
            <div class="task-param" id="task-peer-phone" style="display: none;">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 140px;">初登日期</label>
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="export_date1" class="layui-input export-date1">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="export_date2" class="layui-input export-date2">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 140px;">个人电话重复次数</label>
                        <div class="layui-input-inline">
                            <input type="number" name="peer_phone_number" required lay-verify="required" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="task-param" id="task-repeat_frame" style="display: none;">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 140px;">初登日期</label>
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="export_date1" class="layui-input export-date1">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="export_date2" class="layui-input export-date2">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin:24px 0 -15px;">
            <div class="layui-inline" style="float: left;position: relative;z-index: 999;">
                <label class="layui-form-label" style="width: 65px;"></label>
                <div class="layui-input-inline" style="width: 405px">
                    <input type="text" name="queue" id="queue" class="layui-input">
                </div>
                <div class="layui-input-inline" style="">
                    <button type="button" class="layui-btn" onclick="search(event)">查询</button>
                </div>
            </div>
            <div class="layui-input-block layui-text-right">
                <button type="button" class="layui-btn" onclick="task_add()">立即提交</button>
                <button type="button" class="layui-btn layui-btn-danger" id="clear-btn">清空数据</button>
            </div>
        </div>
    </div>
    <div class="layui-card-body layui-form">
        <table class="layui-hide" id="task-info" lay-filter="task-info"></table>
    </div>
</div>
{/block}
{block name="script"}
<!--Core Javascript -->
<script type="text/html" id="table-bar">
    {{#
        var payload = JSON.parse(d.payload);
        var export_date1 = payload['data']['params']['export_date1'];
        var export_date2 = payload['data']['params']['export_date2'];
        var ext = d.remark.split('.')[1];
    }}
    {{#  if(d.type == 2){ }}
        {{#  if(payload['data']['params']['export_limit'] > 0){ }}
            {{#
                var arrParam = [];
                var exportUrlParam = '';
                exportUrlParam += 'export_date1=' + export_date1 + '&';
                exportUrlParam += 'export_date2=' + export_date2 + '&';
                exportUrlParam += 'insurer_month1=' + payload['data']['params']['insurer_month1'] + '&';
                exportUrlParam += 'insurer_day1=' + payload['data']['params']['insurer_day1'] + '&';
                exportUrlParam += 'insurer_month2=' + payload['data']['params']['insurer_month2'] + '&';
                exportUrlParam += 'insurer_day2=' + payload['data']['params']['insurer_day2'] + '&';
                exportUrlParam += 'is_export_' + payload['data']['params']['export_type'] + '=' + d.id;
            }}
            <a class="layui-btn layui-btn-xs" href="/index/index.html?{{exportUrlParam}}">查看</a>
        {{#  } }}
        {{#  if(d.download_times > 0){ }}
            <buton class="layui-btn layui-btn-xs" onclick="layer.confirm('已下载过，是否继续',function(index){layer.close(index);window.open('{:url(\'task/download\')}?id={{d.id}}');window.location.reload();});">下载文件</buton>
        {{#  }else { }}
            <buton class="layui-btn layui-btn-xs" onclick="window.open('{:url(\'task/download\')}?id={{d.id}}');window.location.reload();">下载文件</buton>
        {{#  } }}
    {{#  }else if(d.type == 3){ }}
        <a class="layui-btn layui-btn-xs" href="/index/index.html?is_check_peer_phone={{d.id}}">查看</a>
        {{#  if(d.info_num > 0){ }}
            <button type="button" class="layui-btn layui-btn-xs" onclick="task_create(2,{{d.id}})">导出</button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="task_create(6,{{d.id}})">清除重复</button>
        {{#  } }}
    {{#  }else if(d.type == 4){ }}
        <a class="layui-btn layui-btn-xs" href="/index/index.html?is_check_repeat_frame={{d.id}}">查看</a>
        {{#  if(d.info_num > 0){ }}
            <button type="button" class="layui-btn layui-btn-xs" onclick="task_create(2,{{d.id}})">导出</button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="task_create(7,{{d.id}})">删除重复</button>
        {{#  } }}
    {{#  }else if(d.type == 5){ }}
        <a class="layui-btn layui-btn-xs" href="/index/index.html?is_update_bhx={{d.id}}">查看</a>
    {{#  }else if(d.type == 7){ }}
        <a class="layui-btn layui-btn-xs" href="/index/index.html?is_delete_frame={{d.id}}">查看</a>
    {{#  }else if(d.type == 1){ }}
        <a class="layui-btn layui-btn-xs" href="/index/index.html?source={{d.id}}">查看</a>
    {{#  } }}
</script>
<script type="text/html" id="process-tpl">
    <div class="layui-progress layui-progress-big" lay-filter="process-{{d.id}}" lay-showPercent="yes">
        <div class="layui-progress-bar layui-bg-green" lay-percent="{{d.process}}%"></div>
    </div>
</script>
<script>
    layui.form.on('radio(task_type)', function(data){
        $('#task-model-add').find('.task-param').removeClass('active').hide();
        switch (+data.value) {
            case 1:
                $('#task-import').addClass('active').show();
                break;
            case 2:
                $('#task-export').addClass('active').show();
                break;
            case 3:
                $('#task-peer-phone').addClass('active').show();
                break;
            case 4:
                $('#task-repeat_frame').addClass('active').show();
                break;
            case 5:
                $('#task-import').addClass('active').show();
                break;
        }
    });

    layui.form.on('radio(export_type)', function(data){
        if(['bmc','failed_bmc','none_bmc','success_bmc'].indexOf(data.value) != -1){
            $('#sub_export_type').hide();
            $('#sub_export_type').find(':input').attr('disabled',true);
        }else {
            $('#sub_export_type').show();
            $('#sub_export_type').find(':input').removeAttr('disabled');
        }
    });

    var tableIns = layui.table.render({
        id: 'taskInfo',
        elem: '#task-info',
        title:'车辆信息',
        url: '{:url("/task/taskInfo/")}', //数据接口
        page: true, //开启分页
        limit: 20,
        loading: true,
        cols: [[ //表头
            // {type: 'checkbox', fixed: 'left'},
            {field: 'id', title: '序号', fixed: 'left', width: 100},
            {field: 'type_txt', title: '任务名称', sort: true, width: 400},
            {field: 'process', title: '处理进度', templet: '#process-tpl'},
            {field: 'remark', title: '任务结果', sort: true},
            {field: 'create_timestamp', title: '创建时间', sort: true, width: 200},
            {field: 'status', title: '任务状态', sort: true, width: 100},
            {field: 'download_times', title: '下载次数', sort: true, width: 100},
            {fixed: 'right', width: 240, align:'center', toolbar: '#table-bar'}
        ]],
        done: function (res, curr, count) {
            layui.element.render();
            var timer = setInterval(function(){
                $.get('{:url("task/process")}', function (ret) {
                    if(!ret.data || ret.data.length == 0 ){
                        clearInterval(timer);
                        delete timer;
                    }else {
                        $.each(ret.data,function(i,d){
                            d.process = d.process > 100 ? 100 : d.process;
                            layui.element.progress('process-' + d.id, +d.process + '%');
                            if(d.process >= 100){
                                layui.table.reload('taskInfo');
                            }
                        })
                    }
                });
            },3000)
        }
    });

    //监听行工具事件
    layui.table.on('tool(task-info)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data, //获得当前行数据
            layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'detail'){
            layer.confirm('确定要清楚此项手机吗', function(index){
                layer.close(index);
                index = layer.load();
                $.post('{:url("index/clearPhone")}', {id: data.id}, function (res) {
                    layer.close(index);
                    layer.msg(res.msg,function () {
                        layui.table.reload('taskInfo');
                    });
                })
            });
        }
    });

    layui.upload.render({
        elem: '#upload', //绑定元素
        accept: 'file',
        url: '{:url("task/upload")}', //上传接口
        data: {
            task_type: function () {
                return $("input[name='task_type']:checked").val();
            }
        },
        done: function (res) {
            if (res.code == -1) {
                $('#lock-screen').css('display', 'flex');
            } else if (res.code == 0) {
                layer.alert(res.msg);
            } else if (res.code == 1) {
                $('#original_filename').val(res.original_filename);
                $('#filename').val(res.filename);
                return true;
            }
        },
        error: function (res) {
            //请求异常回调
            layer.alert(res.msg);
        }
    });

    $(function(){
        $('.export-date1,.export-date2').each(function (i, d) {
            layui.laydate.render({
                elem: d,
            });
        });
        $('#clear-btn').on('click', function () {
            layer.confirm('清空数据将不能恢复，确认清空附属表吗？', function(index){
                layer.close(index);
                index = layer.load();
                //向服务端发送删除指令
                $.post('{:url("task/clearSubTable/")}', function (ret) {
                    layer.close(index);
                    layer.msg(ret.msg, function () {
                        layui.table.reload('taskInfo');
                    });
                });
            });
        });
    });

    function export_num(){
        if($('[name="export_date1"]').val() == '' && $('[name="export_date1"]').val() == ''){
            layer.msg('请先填写初登日期');
            return false;
        }
        $.post('{:url("task/exportNum")}', $('#task-export').find(':input').serialize(), function (ret) {
            layer.msg(ret['msg']);
            $('#count').val(ret.data);
        });
    }

    function task_create(type,id = 0){
        $.post('{:url("task/save")}', {task_type: type,source_id: id}, function (ret) {
            layer.msg(ret['msg'],function(){
                layui.table.reload('taskInfo');
            });
        });
    }

    function task_add() {
        var task_type = $('[name="task_type"]:checked').val();
        if (task_type == 5 || task_type == 2) {
            var name = task_type == 5 ? $('#original_filename').val() : $('#queue-name').val();
            var type = task_type == 5 ? 'update' : 'export';
            $.get('{:url("task/checkIsExistName")}?name=' + name + '&type=' + type, function (ret) {
                if (ret.code == 1) {
                    layer.confirm(ret.msg, function (index) {
                        layer.close(index);
                        submitForm();
                    });
                }else if (ret.code == 0) {
                    layer.alert(ret.msg);
                }else if (ret.code == 2) {
                    submitForm();
                }
            });
        }else {
            submitForm();
        }
    }

    function submitForm(){
        $.post('{:url("task/save")}', $('#task-model-add').find('.active :input').serialize(), function (ret) {
            if(ret.code == 0){
                layer.alert(ret.msg);
            }else {
                layer.msg(ret['msg'],function(){
                    layui.table.reload('taskInfo');
                });
            }
        });
    }

    function search(event){
        tableIns.reload({
            page: {
                curr: 1 //重新从第 1 页开始
            },
            where: {queue: $('#queue').val()},
        }, 'data');
    }

    function getExportName(event) {
        var target = event.target;
        $.get('{:url("task/exportName")}', $('#task-export').find(':input').serialize(), function (ret) {
            if(ret.code == 0){
                layer.alert(ret.msg);
            }else {
                $(target).prev('input[name="queue"]').val(ret.name);
            }
        });
    }
</script>
{/block}