sqlworkflow.html

{% extends "base.html" %}

{% block content %}
    <!-- 自定义操作按钮-->
    <div id="toolbar" class="form-inline ">
        <div class="form-group bootstrap-select ">
            <select id="navStatus" class="dropdown-menu-right selectpicker ">
                <option value="all" selected="selected">全部工单</option>
                <option value="manreviewing">待审核</option>
                <option value="pass">审核通过</option>
                <option value="timingtask">定时执行</option>
                <option value="executing">执行中</option>
                <option value="finish">已执行完毕</option>
                <option value="exception">执行有异常</option>
                <option value="abort">人工终止流程</option>
                <option value="autoreviewwrong">自动审核不通过</option>
            </select>
        </div>
        <div class="form-group">
            <button id="btn_add" type="button" class="btn btn-default"
                    onclick="window.location.href='/submitsql/'">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                提交SQL
            </button>
        </div>
    </div>
    <!-- 审核列表的表格-->
    <div class="table-responsive">
        <table id="sqlaudit-list" data-toggle="table" class="table table-striped table-hover"
               style="table-layout:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
        </table>
    </div>
{% endblock content %}
{% block js %}
    {% load staticfiles %}
    <script src="{% static 'bootstrap-table/js/bootstrap-table-export.min.js' %}"></script>
    <script src="{% static 'bootstrap-table/js/tableExport.min.js' %}"></script>
    <script src="{% static 'dist/js/sql-formatter.min.js' %}"></script>
    <script>
        //获取申请列表
        function get_sqlauditlist() {
            //采取异步请求
            //初始化table
            $('#sqlaudit-list').bootstrapTable('destroy').bootstrapTable({
                method: 'post',
                contentType: "application/x-www-form-urlencoded",
                url: "/sqlworkflow/",
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: true,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: 14,                     //每页的记录行数（*）
                pageList: [20, 30, 50, 100],       //可供选择的每页的行数（*）
                showExport: true,                   //是否显示导出按钮
                exportOptions: {
                    fileName: 'allworkflow'  //文件名称设置
                },
                search: true,                      //是否显示表格搜索
                strictSearch: false,                //是否全匹配搜索
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                  //是否显示父子表
                locale: 'zh-CN',                    //本地化
                toolbar: "#toolbar",               //指明自定义的toolbar
                queryParamsType: 'limit',
                //请求服务数据时所传参数
                queryParams:
                    function (params) {
                        return {
                            limit: params.limit,
                            offset: params.offset,
                            navStatus: $("#navStatus").val(),
                            search: params.search
                        }
                    },
                columns: [{
                    title: '工单ID',
                    field: 'id'
                }, {
                    title: '工单名称',
                    field: 'workflow_name',
                    formatter: function (value, row, index) {
                        return "<a href=\"/detail/" + row.id + "/\">" + value + "</a>"
                    }
                }, {
                    title: '发起人',
                    field: 'engineer'
                }, {
                    title: '工单状态',
                    field: 'status',
                    formatter: function (value, row, index) {
                        return sqlworkflowStatus_formatter(value)
                    }
                }, {
                    title: '发起时间',
                    field: 'create_time'
                }, {
                    title: '目标集群',
                    field: 'cluster_name'
                }],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    alert("数据加载失败！");
                },
                onSearch: function (e) {
                    //传搜索参数给服务器
                    queryParams(e)
                },
                responseHandler: function (res) {
                    //在ajax获取到数据，渲染表格之前，修改数据源
                    return res;
                }
            });

        }

        //状态筛选变动自动刷新
        $("#navStatus").change(function () {
            get_sqlauditlist();
        });

        //初始化数据
        $(document).ready(function () {
            get_sqlauditlist();
        });
    </script>
{% endblock %}