data_validation/src/web/templates/project/project_list.html

{{include "com/inc.html"}}
<!-- Main Header -->
{{include "com/header.html"}}
<!-- Left side column. 权限菜单 -->
{{include "com/menu.html"}}
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            <small></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/front/project"><i class="fa fa-dashboard"></i> 项目列表</a></li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">

                        <div class="form-group" style="margin-left: 20px">
                            <a class="btn btn-sm btn-success h4" onclick="createPro()"><i
                                    class="fa fa-fw fa-plus fa-lg"></i>新建项目</a>
                        </div>
                        <div id="status-div" class="col-xs-1" style="width: auto;float: right">
                            <label for="statusSelect">状态：
                            <select class="form-control selectpicker" id="statusSelect">
                                <option value="-1">全部</option>
                                <option value="未开始">未开始</option>
                                <option value="进行中">进行中</option>
                                <option value="已完成">已完成</option>
                                <option value="已关闭">已关闭</option>
                            </select></label>
                        </div>
                        <table id="dataTable" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>项目名称</th>
                                <th>公司名称</th>
                                <th>部门名称</th>
                                <th>规则名称</th>
                                <th>售后人员</th>
                                <th>数据量</th>
                                <th>项目状态</th>
                                <th>项目时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>
</div>

<div class="modal fade" id="modal-create-project" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width: 50%">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="edit-info">
                        <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
                        <span class="h4">新建项目</span>
                    </div>
                    <div class="edit-form">
                        <hr>
                        <div class="form-group">
                            <label class="radio-inline">
                                <input type="radio" name="stype" value="coll" checked>数据库导入
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="stype" value="excel">Excel表导入
                            </label>
                        </div>
                        <form id="model-form-project" class="form-horizontal" enctype="multipart/form-data">
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label"><span style="color:red;">* </span>项目名称</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" id="project-name" placeholder="项目名称" onblur="checkProName()">
                                    </div>
                                </div>
                                <div id="import-coll">
                                    <h5><i class="glyphicon glyphicon-bookmark"
                                           style="color: #00c4ff;margin-right: 6px"></i>数据来源</h5>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span
                                                style="color:red;">* </span>数据库名</label>
                                        <div class="col-sm-5">
                                            <input type="text" class="form-control" id="db-name" value="jyqyfw"
                                                   readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span
                                                style="color:red;">* </span>数据表名</label>
                                        <div class="col-sm-5">
                                            <input type="text" class="form-control" id="coll-name"
                                                   value="usermail_history" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span
                                                style="color:red;">* </span>数据导出ID</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="data-id" placeholder="数据导出ID">
                                        </div>
                                    </div>
                                </div>

                                <div id="import-excel" style="display: none">
                                    <h5><i class="glyphicon glyphicon-bookmark"
                                           style="color: #00c4ff;margin-right: 6px"></i>数据信息</h5>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"><span style="color:red;">* </span>公司名称</label>
                                        <ul class="dropdown-menu"> </ul>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="company-name" autocomplete="off"
                                                   data-provide="typeahead" placeholder="公司名称">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">部门名称</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="dpart-name" placeholder="部门名称">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">规则名称</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="rule-name" placeholder="规则名称">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">选择文件</label>
                                        <div class="col-sm-6">
                                            <input type="file" name="file" id="uploadfile">
                                        </div>
                                    </div>
                                </div>
                                <h5><i class="glyphicon glyphicon-bookmark"
                                       style="color: #00c4ff;margin-right: 6px"></i>数据存储</h5>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label"><span style="color:red;">* </span>数据库名</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" value="jyqykhfw" readonly>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label"><span style="color:red;">* </span>数据表名</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="coll-save-name" placeholder="数据表名">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="button" onclick="importData()" class="btn btn-primary" value="导入">
                <input type="button" onclick="cancelModel()" class="btn btn-default" value="取消">
            </div>
        </div>
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="modal-edit-project" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width: 50%">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="edit-info">
                        <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
                        <span class="h4">编辑项目</span>
                    </div>
                    <div class="edit-form">
                        <hr>
                        <form class="form-horizontal" enctype="multipart/form-data">
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">公司名称</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" id="company-edit-name" readonly>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">部门名称</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" id="dpart-edit-name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">规则名称</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" id="rule-edit-name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">售后人员</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" id="edit-person">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">选择标注字段</label>
                                    <div class="col-sm-5">
                                        <select class="form-control selectpicker" multiple
                                                id="markFieldSelect"></select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="button" onclick="saveData()" class="btn btn-primary saveBtn" value="保存">
                <input type="button" onclick="cancelModel()" class="btn btn-default" value="取消">
            </div>
        </div>
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
    <div style="width: 200px;height:100px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
        <div class="progress progress-striped active"
             style="margin-bottom: 0;height:50px; text-align:center;line-height: 50px;font-size:large;">
            数据加载中,请稍候......　　　　
        </div>
    </div>
</div>

{{include "com/footer.html"}}
<script>
    menuActive("project");

    let stype = "coll";
    let fields = {{ .T.fields }}
    let projectmap = {}

    //展示loading框
    showLoading = function (){
        $('#loadingModal').modal({backdrop: 'static', keyboard: false});
    }
    //隐藏掉loading框
    hideLoading = function (){
        $('#loadingModal').modal('hide');
    }

    $(function () {
        ttable = $('#dataTable').dataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "serverSide": true,
            "ajax": {
                "url": "/front/project",
                "type": "post"
            },
            "language": {
                "url": "/dist/js/dataTables.chinese.lang"
            },
            "fnDrawCallback": function () {
                $("ul.pagination").prepend("&nbsp;&nbsp;&nbsp;转到第 <input type='text' id='changePage'   style='width:20px;'> 页    <a type='text' href='javascript:void(0);' id='dataTable-btn' style='text-align:center'>GO</a>");
                $('#dataTable-btn').click(function (e) {
                    var redirectpage = 0
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    }
                    ttable.api().page(redirectpage).draw(false);
                });
                this.api().column(0).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            },
            "columns": [
                {"data": null, width: "1%"},
                {"data": "s_name", width: "4%"},
                {"data": "s_entname", width: "5%"},
                {"data": "s_departname", width: "4%"},
                {"data": "s_rulename", width: "4%"},
                {"data": "s_personname", width: "3%", "defaultContent": ""},
                {"data": "i_importnum", width: "2%"},
                {"data": "s_status", width: "3%"},
                {
                    "data": "_id", width: "5%", render: function (val, a, row) {
                        let str = ""
                        if (row['i_starttime'] === undefined) {
                            str = "未开始"
                        }else if (row['i_starttime'] && row['i_completetime'] === undefined) {
                            let dt = new Date()
                            dt.setTime(parseInt(row['i_starttime']) * 1000);
                            str = dt.format("yyyy-MM-dd hh:mm:ss") + " - 未结束"
                        }else {
                            let dt = new Date()
                            let ds = new Date()
                            dt.setTime(parseInt(row['i_starttime']) * 1000);
                            ds.setTime(parseInt(row["i_completetime"]) * 1000)
                            str = dt.format("yyyy-MM-dd hh:mm:ss") + " - " + ds.format("yyyy-MM-dd hh:mm:ss")
                        }
                        return str
                    }
                },
                {
                    "data": "_id", width: "11%", render: function (val, a, row, pos) {
                        tmp = '<div>' +
                            '<a class="btn btn-sm btn-primary" onclick="editPro(\'' + pos.row + '\')">编辑</a>&nbsp;&nbsp;' +
                            '<a class="btn btn-sm btn-primary" onclick="clearPro(\''+ pos.row +'\')">清洗</a>&nbsp;&nbsp;' +
                            '<a class="btn btn-sm btn-primary" onclick="checkMethod(\'' + val + '\',\''+row.s_sourceinfo+'\',\'' + row.s_status + '\')">质检</a>&nbsp;&nbsp;' +
                            // '<a class="btn btn-sm btn-primary" href="">质检结果</a>&nbsp;&nbsp;' +
                            '<a class="btn btn-sm btn-primary" onclick="completePro(\'' + val + '\',\''+row.s_sourceinfo+'\',\'' + row.s_status + '\')">完成</a>&nbsp;&nbsp;' +
                            '</div>';
                        return tmp
                    }
                }
            ],
            "initComplete": function () {
                $("#dataTable_filter").prepend($('#status-div'))
            },
            "fnServerParams": function (e) {
                e.s_status = $("#statusSelect option:selected").val()
            }
        })

        $('input[type=radio][name=stype]').change(function () {
            if (this.value === 'coll') {
                stype = "coll"
                $("#import-coll").attr("style", "display:block;")
                $("#import-excel").attr("style", "display:none;")
            } else if (this.value === 'excel') {
                stype = "excel"
                $("#import-coll").attr("style", "display:none;")
                $("#import-excel").attr("style", "display:block;")
            }
        });

        for (let i in fields) {
            let opt = document.createElement('option');
            opt.innerText = fields[i]["s_name"];
            opt.value = fields[i]["s_code"];
            $('#markFieldSelect')[0].appendChild(opt)
        }
        $("#markFieldSelect").selectpicker("refresh");

        $("#company-name").typeahead({
            source: function (query, process) {
                return $.ajax({
                    url: '/front/project/getEntnameList',
                    type: 'post',
                    data: {'entname': query},
                    success: function (result) {
                        return process(result.entname);
                    },
                });
            }
        });
        $('#statusSelect').on('changed.bs.select', function () {
            ttable.api().ajax.reload();
        })
    });

    function createPro() {
       $("#modal-create-project").modal('show')
    }

    function cancelModel() {
        document.getElementById("model-form-project").reset();
        $("#modal-create-project").modal('hide')
        $("#modal-edit-project").modal('hide')
    }

    function importData() {
        let sname = $('#project-name').val()
        let coll = $('#coll-save-name').val()
        if (sname === "") {
            alert("项目名称为必填项")
            return
        }
        if (coll === "") {
            alert("数据表名为必填项")
            return;
        }
        if (stype === "coll") {
            let dataid = $('#data-id').val()
            if (dataid === "") {
                alert("数据导出ID为必填项")
                return;
            }
            projectmap["s_name"] = sname
            projectmap["s_historyid"] = dataid
            projectmap["s_sourceinfo"] = coll
            if (projectmap["s_sourceinfo"] === "") {
                alert("数据表名为必填项")
                return;
            }
            projectmap["s_type"] = stype
            showLoading()
            $.ajax({
                url: "/front/project/save",
                type: 'POST',
                data: projectmap,
                success: function (r) {
                    hideLoading()
                    if (r.success) {
                        $("#modal-create-project").modal('hide')
                        let msg = r.msg + "<br>"+"导入数据："+r.importnum+"条；成功："+r.successnum+"条；失败："+r.failnum+"条。"
                        showMsg(msg, 1500);
                        ttable.api().ajax.reload();
                    } else {
                        showMsg(r.msg, 2000)
                    }
                }
            })
        } else if (stype === "excel") {
            let formData = new FormData();
            formData.append("s_name", sname)
            formData.append("s_sourceinfo", coll)
            formData.append("s_entname", $('#company-name').val())
            formData.append("s_departname", $('#dpart-name').val())
            formData.append("s_rulename", $('#rule-name').val())
            formData.append("s_type", stype)
            let file = $('#uploadfile')[0].files[0]
            if (file) {
                formData.append("xlsx", file)
                showLoading()
                $.ajax({
                    url: "/front/project/save",
                    type: 'POST',
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (r) {
                        hideLoading()
                        if (r.success) {
                            $("#modal-create-project").modal('hide')
                            let msg = r.msg + "<br>"+"导入数据："+r.importnum+"条；成功："+r.successnum+"条；失败："+r.failnum+"条。"
                            showMsg(msg, 1500);
                            ttable.api().ajax.reload();
                        } else {
                            showMsg(r.msg, 2000);
                        }
                    }
                })
            } else {
                showTip("请选择上传文件");
            }
        }
    }

    function editPro(index) {
        projectmap = ttable.fnGetData()[index]
        console.log(projectmap.v_fields)
        $('#modal-edit-project').modal('show')
        $('#company-edit-name').val(projectmap["s_entname"])
        $('#rule-edit-name').val(projectmap["s_rulename"])
        $('#dpart-edit-name').val(projectmap["s_departname"])
        $('#edit-person').val(projectmap["s_personname"])
        $("#markFieldSelect").selectpicker("deselectAll");
        if (projectmap.v_fields !== undefined) {
            $('#markFieldSelect option').each(function(){
                let v = $(this).val()
                if (projectmap.v_fields[v] !== undefined) {
                    $(this)[0].selected = true
                }
            })
            $("#markFieldSelect").selectpicker("refresh");
        }else {
            $("#markFieldSelect").selectpicker("deselectAll");
        }
    }

    function saveData() {
        stype = "edit"
        let s1 = JSON.stringify(projectmap)
        let tmp = projectmap
        tmp["s_departname"] = $('#dpart-edit-name').val()
        tmp["s_rulename"] = $('#rule-edit-name').val()
        tmp["s_personname"] = $('#edit-person').val()

        let fieldArr = $('#markFieldSelect').val();
        let m = {}
        if (fieldArr.length > 0) {
            for (const i in fields) {
                if (fieldArr.indexOf(fields[i]["s_code"]) > -1) {
                    m[fields[i]["s_code"]] = fields[i]["s_name"]
                }
            }
        }
        tmp["v_fields"] = JSON.stringify(m)
        if (s1 === JSON.stringify(tmp)) {
            showTip("未做修改");
        } else {
            $.ajax({
                url: "/front/project/save",
                type: 'POST',
                data: {"s_type": stype, "s_departname": tmp["s_departname"], "s_personname": tmp["s_personname"],
                    "s_rulename": tmp["s_rulename"], "v_fields": tmp["v_fields"], "s_name": tmp["s_name"]},
                success: function (r) {
                    if (r.success) {
                        showTip("保存成功", 500)
                        cancelModel()
                        ttable.api().ajax.reload();
                    } else {
                        showTip(r.msg);
                    }
                }
            })
        }
    }

    function clearPro(val) {
        let tmp = ttable.fnGetData()[val]
        if (tmp["v_fields"] === undefined) {
            showTip("请设置标注字段")
        }else {
            showLoading()
            $.ajax({
                url: "/front/project/qualityAssessment",
                type: 'POST',
                data: {"pid": tmp["_id"]},
                success: function (r) {
                    if (r.success) {
                        hideLoading()
                        window.location.href="/front/project/task/list?pid=" + tmp["_id"]
                    } else {
                        showTip(r.msg);
                    }
                }
            })
        }
    }

    function completePro(pid, sourceinfo, status) {
        if (status === "进行中") {
           showConfirm("确认已经完成该项目任务？", function () {
               $.ajax({
                   url: "/front/project/complete",
                   type: 'POST',
                   data: {"s_projectid": pid, "s_sourceinfo": sourceinfo, "s_status": status},
                   success: function (r) {
                       if (r.rep) {
                           ttable.api().ajax.reload();
                       } else {
                           showMsg(r.msg);
                       }
                   }
               })
           })
        }else {
            showTip("操作不允许")
        }
    }

    function checkMethod(pid, sourceinfo, status) {
        if (status === "进行中") {
            window.location.href = "/front/user/check/data?pid=" + pid + "&s_sourceinfo" + sourceinfo
        }else {
            showTip("项目未分发任务")
        }
    }

    function checkProName() {
        let pname = $('#project-name').val()
        if (pname !== "") {
            $.ajax({
                url: "/front/project/isExists",
                type: "POST",
                data: {"s_name": pname},
                success: function (r) {
                    if (r.exists) {
                        alert("项目名称已经存在")
                    }
                }
            })
        }
    }
</script>