<%inherit file="/base_index.html"/>           
<%block name='content'>
<div class="tab-box" id="myTab3">
    <!-- <ul class="nav nav-tabs king-nav-tabs2">
        <li class="active">
            <a href="#tab3_1" data-toggle="tab" aria-expanded="true">执行任务列表</a>
        </li>
        <li class="">
            <a href="#tab3_2" data-toggle="tab" aria-expanded="false">执行历史</a>
        </li>
    </ul> -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="执行任务列表" name="first">执行任务列表</el-tab-pane>
            <el-tab-pane label="执行历史" name="second">执行历史</el-tab-pane>
           
          </el-tabs>
    <div class="tab-content mb20">
        <div class="tab-pane fade active in" id="tab3_1">
                <div class="panel panel-default table7_demo king-table7-demo3">
                        <div class="panel-body">
                            <div class="king-wrapper clearfix">
                                <div class="row data-panel">                                 
                                    <div class="col-lg-3 col-md-6">
                                        <div class="form-group">
                                            <div class="input-group king-input-group">
                                                <input type="text" class="form-control pl30 king-form-control" placeholder="请输入关键字">
                                                <span class="glyphicon glyphicon-search form-control-feedback king-form-control-feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">  
                                    </div>
                                    <div class="col-lg-3 col-md-6">
                                        <a class="king-btn king-btn-new" title="新增" href="/createSafety1">新增</a>
                                        <a class="king-btn-demo king-btn king-success" title="编辑">编辑</a>
                                        <a class="king-btn-demo king-btn king-danger" title="删除">删除</a>     
                                    </div> 
                                </div>             
                            </div>
                        </div>
                        <div>
                            <table class="table table-hover mb0" id="table_demo2">
                                <thead>
                                    <tr class="active">
                                        <th style="width:45px"><input type="checkbox" name="checkall" value=""></th>·
                                        <th style="width:150px">任务名称</th>
                                        <th style="width:150px">脚本</th>
                                        <th style="width:150px">创建人</th>
                                        <th style="width:150px">创建时间</th>
                                        <th style="width:150px">描述</th>
                                    </tr>
                                </thead>
                                <tbody id="datas">
                                    <tr style="display: table-row; opacity: 1;">
                                        <td><input type="checkbox" value=""></td>
                                        <td>lance</td>
                                        <td>redhat</td>
                                        <td>2016-05-27 14:33:00</td>
                                        <td>gutinl</td>
                                        <td>
                                            <button class="king-btn king-default">预览</button>
                                        </td>
                                    </tr>
                                    <tr style="display: table-row; opacity: 1;">
                                        <td><input type="checkbox" value=""></td>
                                        <td>Elliott</td>
                                        <td>redhat</td>
                                        <td>2016-05-27 14:33:00</td>
                                        <td>gutinl</td>
                                        <td>
                                            <button class="king-btn king-default">预览</button>
                                        </td>
                                    </tr>
                                    <tr style="display: table-row; opacity: 1;">
                                        <td><input type="checkbox" value=""></td>
                                        <td>Kevin</td>
                                        <td>redhat</td>
                                        <td>2016-05-27 14:33:00</td>
                                        <td>gutinl</td>
                                        <td>
                                            <button class="king-btn king-default">预览</button>
                                        </td>
                                    </tr>
                                    <tr style="display: table-row; opacity: 1;">
                                        <td><input type="checkbox" value=""></td>
                                        <td>Todd</td>
                                        <td>redhat</td>
                                        <td>2016-05-27 14:33:00</td>
                                        <td>gutinl</td>
                                        <td>
                                            <button class="king-btn king-default">预览</button>
                                        </td>
                                    </tr>
                                    <tr style="display: table-row; opacity: 1;">
                                        <td><input type="checkbox" value=""></td>
                                        <td>Jackson</td>
                                        <td>redhat</td>
                                        <td>2016-05-27 14:33:00</td>
                                        <td>gutinl</td>
                                        <td>
                                            <button class="king-btn king-default">预览</button>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="6">
                                            <div class="pull-right king-page-box">
                                                <p class="pull-left mt15 mr15">
                                                    共<span id="total">25</span>条记录，当前第<span id="cur_page">1</span>/<span id="total_page">5</span>页
                                                </p>
                                                <ul class="pagination pagination-sm pull-left mt10">
                                                    <li class="disabled">
                                                        <a href="javascript:;" aria-label="Previous">
                                                            <span aria-hidden="true">«</span>
                                                        </a>
                                                    </li>
                                                    <li class="active"><a href="javascript:;">1</a></li>
                                                    <li><a href="javascript:;">2</a></li>
                                                    <li><a href="javascript:;">3</a></li>
                                                    <li><a href="javascript:;">4</a></li>
                                                    <li><a href="javascript:;">5</a></li>
                                                    <li>
                                                        <a href="javascript:;" aria-label="Next">
                                                            <span aria-hidden="true">»</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
        </div>
        <div class="tab-pane fade" id="tab3_2">
            <div class="panel panel-default table7_demo king-table7-demo3">
                <div class="panel-body">
                    <div class="king-wrapper clearfix">
                        <div class="form-group">
                            <div class="input-group king-input-group">
                                <input type="text" class="form-control pl30 king-form-control" placeholder="请输入关键字">
                                <span class="glyphicon glyphicon-search form-control-feedback king-form-control-feedback"></span>
                            </div>
                        </div>               
                    </div>
                </div>
                <div>
                    <table class="table table-hover mb0">
                        <thead>
                            <tr class="active">
                                <th style="width:150px">任务名称</th>·
                                <th style="width:150px">执行状态</th>
                                <th style="width:150px">开始时间</th>
                                <th style="width:150px">结束时间</th>
                                <th style="width:150px">执行耗时</th>
                                <th style="width:150px">执行用户</th>
                                <th style="width:150px">详情</th>
                            </tr>
                        </thead>
                        <tbody id="datas">
                            <tr style="display: table-row; opacity: 1;">
                                <td>1</td>
                                <td>lance</td>
                                <td>redhat</td>
                                <td>2016-05-27 14:33:00</td>
                                <td>gutinl</td>
                                <td>gutinl</td>
                                <td>
                                    <button class="king-btn king-default">预览</button>
                                </td>
                            </tr>
                            <tr style="display: table-row; opacity: 1;">
                                <td>2</td>
                                <td>Elliott</td>
                                <td>redhat</td>
                                <td>2016-05-27 14:33:00</td>
                                <td>gutinl</td>
                                <td>gutinl</td>
                                <td>
                                    <button class="king-btn king-default">预览</button>
                                </td>
                            </tr>
                            <tr style="display: table-row; opacity: 1;">
                                <td>3</td>
                                <td>Kevin</td>
                                <td>redhat</td>
                                <td>2016-05-27 14:33:00</td>
                                <td>gutinl</td>
                                <td>gutinl</td>
                                <td>
                                    <button class="king-btn king-default">预览</button>
                                </td>
                            </tr>
                            <tr style="display: table-row; opacity: 1;">
                                <td>4</td>
                                <td>Todd</td>
                                <td>redhat</td>
                                <td>2016-05-27 14:33:00</td>
                                <td>gutinl</td>
                                <td>gutinl</td>
                                <td>
                                    <button class="king-btn king-default">预览</button>
                                </td>
                            </tr>
                            <tr style="display: table-row; opacity: 1;">
                                <td>5</td>
                                <td>Jackson</td>
                                <td>redhat</td>
                                <td>2016-05-27 14:33:00</td>
                                <td>gutinl</td>
                                <td>gutinl</td>
                                <td>
                                    <button class="king-btn king-default">预览</button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="7">
                                    <div class="pull-right king-page-box">
                                        <p class="pull-left mt15 mr15">
                                            共<span id="total">25</span>条记录，当前第<span id="cur_page">1</span>/<span id="total_page">5</span>页
                                        </p>
                                        <ul class="pagination pagination-sm pull-left mt10">
                                            <li class="disabled">
                                                <a href="javascript:;" aria-label="Previous">
                                                    <span aria-hidden="true">«</span>
                                                </a>
                                            </li>
                                            <li class="active"><a href="javascript:;">1</a></li>
                                            <li><a href="javascript:;">2</a></li>
                                            <li><a href="javascript:;">3</a></li>
                                            <li><a href="javascript:;">4</a></li>
                                            <li><a href="javascript:;">5</a></li>
                                            <li>
                                                <a href="javascript:;" aria-label="Next">
                                                    <span aria-hidden="true">»</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div> 
<script type="text/javascript">
    // select2 通过ajax数据生成
    // 数据格式：{"results":[{ "id": 0, "text": "奥迪" }, { "id": 1, "text": "奔驰" }, { "id": 2, "text": "宝马" }]}
    // alert(2)

// var vm = new Vue({
//     el:"#myTab3",
//     data:{
//         activeName:'first'
//     },
//     methods:{}
// })
    $("#plugin3_demo3 .select2_box").select2({
        ajax: {
            url: "select2.json",
            cache: false,
            //对返回的数据进行处理
            results: function(data){
                return data;
            }
        }

    });
    $('#table_demo2').find('input[name="checkall"]').click(function(){
        var checked = $(this).prop('checked');
        $('#table_demo2>tbody input').prop('checked', checked);
    });
    $('#table_demo2').find(':checkbox').on('click', function(){
        if(!this.checked){
            $('#table_demo2').find('input[name="checkall"]').prop('checked',false);
        }
    });
</script>       
</%block>
