页面前端切换tab风格

1.html页面的源码

@layout("/common/_container.html",{js:["/assets/js/jbrTradeorder/jbrTradeorder.js"]}){

<div class="layui-body-header">
    <span class="layui-body-header-title">运单表配载管理</span>
</div>

<div class="layui-fluid">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form">
                        <div class="layui-form-item layui-col-sm12 layui-col-md12 layui-col-lg12">
                            <div class="layui-inline">
                                <label class="layui-form-label">关键字</label>
                                <div class="layui-input-inline">
                                    <input id="keywords" class="layui-input" style="width: auto" type="text" placeholder="收,寄件人信息"/>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">创建时间范围</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" id="queryCreatTime">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">车辆</label>
                                <div class="layui-input-inline" style="width:100px">
                                    <select name="queryCar" >
                                        <option value=""></option>
                                        @if(isNotEmpty(carList)){
                                        @for( car in carList ){
                                        <option value="${car.id}">${car.carDriver!}</option>
                                        @}
                                        @}
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">线路</label>
                                <div class="layui-input-inline" style="width:100px">
                                    <select name="queryRoad" >
                                        <option value=""></option>
                                        @if(isNotEmpty(xgRoadList)){
                                        @for( xgRoad in xgRoadList ){
                                        <option value="${xgRoad.id}">${xgRoad.rTitle!}</option>
                                        @}
                                        @}
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">开单员</label>
                                <div class="layui-input-inline" style="width:120px">
                                    <select class="layui-col-md1" id="queryUser" name="queryUser" >
                                        <option value=""></option>
                                        @if(isNotEmpty(userList)){
                                        @for( user in userList ){
                                        <option value="${user.userId}">${user.name!}</option>
                                        @}
                                        @}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
                                <button id="btnExp" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>导出</button>
                                <button id="orderStatistics" class="layui-btn icon-btn"><i class="layui-icon">&#xe62c;</i>运单统计</button>
                                <button id="deploy" class="layui-btn icon-btn"><i class="layui-icon">&#xe631;</i>配载</button>
                                <button id="feidan" class="layui-btn icon-btn"><i class="layui-icon">&#xe631;</i>废单</button>
                            </div>
                        </div>
                        <div class="layui-form-item layui-col-sm12 layui-col-md12 layui-col-lg12">
                            <div class="layui-tab layui-tab-brief" lay-filter="tradeorder">
                                <input type="hidden" id="transitStatus">
                                <ul class="layui-tab-title">
                                    <li class="layui-this" lay-id="0">全部</li>
                                    <li  lay-id="1">待配载</li>
                                    <li  lay-id="2">已配载</li>
                                    <li  lay-id="3">已发车</li>
                                    <li  lay-id="4">已到货</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <table class="layui-table" id="jbrTradeorderTable" lay-filter="jbrTradeorderTable"></table>
                    <input type="hidden" id="data">
                    <table class="layui-table" id="jbrTradeorderTable1" lay-filter="jbrTradeorderTable1"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tableBar">
    {{#  if(d.transitStatus ==1 || d.transitStatus ==2){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    {{#  if(d.delStatus ==0){ }}
    {{#  if(d.transitStatus ==1){ }}
    @if(shiro.hasRole("administrator")){
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">废单</a>
    @}
    {{#  } }}
    {{#  } }}
    {{#  } }}
</script>
@}

2.js文件

layui.use(['table', 'laydate','laytpl','admin', 'ax', 'func',"element"], function () {
    var $ = layui.$;
    var table = layui.table;
    var $ax = layui.ax;
    var admin = layui.admin;
    var func = layui.func;
    var element =layui.element;
    var laydate = layui.laydate;
    var laytpl = layui.laytpl;

    laydate.render({
        elem: '#queryCreatTime'
        ,type: 'date'
        ,range: '~'
    });
    /**
     * 运单表管理
     */
    var JbrTradeorder = {
        tableId: "jbrTradeorderTable"
    };
    element.on('tab(tradeorder)', function(data){
        var tradeorder= this.getAttribute('lay-id');
        $("#transitStatus").val(tradeorder);
        var queryData = {};
        if(tradeorder!=0){
            queryData['transitStatus'] = tradeorder;
        }else{
            queryData['transitStatus'] = null;
        }
        if(tradeorder==1 || tradeorder==0){
            $('#deploy').show();
            $('#feidan').show();
        }else{
            $('#deploy').hide();
            $('#feidan').hide();
        }
        table.reload(JbrTradeorder.tableId, {
            where: queryData, page: {curr: 1}
        });
    });
    /**
     * 初始化表格的列
     */
    JbrTradeorder.initColumn = function () {
        return [[
            {type: 'checkbox',field:'id'},
            {field: 'id', hide: true, title: ''},
            {align: 'center', toolbar: '#tableBar', title: '操作',width:150},
            {field: 'number', sort: true, title: '运单号',width:180},
            {field: 'ctmsNumber', sort: true, title: '3TMS受理单号',width:180},
            {field: 'transitStatusName', sort: true, title: '运输状态',width:120},
            {field: 'consignerName', sort: true, title: '寄件人姓名',width:180},
            {field: 'consignerPhone', sort: true, title: '寄件人电话',width:180},
            {field: 'consignerAddress', sort: true, title: '寄件人地址',width:180},
            {field: 'consigneeName', sort: true, title: '收件人姓名',width:180},
            {field: 'consigneePhone', sort: true, title: '收件人电话',width:180},
            {field: 'consigneeAddress', sort: true, title: '收件人地址',width:180},
            {field: 'cargoName', sort: true, title: '货物名称',width:180},
            {field: 'userName', sort: true, title: '开单员',width:180},
            {field: 'createTime', sort: true, title: '开单时间',width:180},
            {field: 'sourceStation', sort: true, title: '发站'},
            {field: 'targetStation', sort: true, title: '到站'},
            {field: 'quantity', sort: true, title: '件数'},
            {field: 'deliveryTypeName', sort: true, title: '送货方式',width:120},
            {field: 'paymentTypeName', sort: true, title: '支付方式',width:120},
            {field: 'freight', sort: true, title: '运费'},
            {field: 'statusName', sort: true, title: '运单状态',width:120},
            {field: 'tradetypeName', sort: true, title: '物流单种类',width:180},
            {field: 'payStatusName', sort: true, title: '支付状态',width:120}
        ]];
    };


    /**
     * 点击查询按钮
     */
    JbrTradeorder.search = function () {
        var tradeorder=  $("#transitStatus").val();
        var keywords=  $("#keywords").val();
        var queryCreatTime=$("#queryCreatTime").val();
        var queryRoad=  $("#queryRoad").val();
        var queryUser=  $("#queryUser").val();
        var queryData = {};
        if(queryCreatTime!=null && queryCreatTime!='' && queryCreatTime!='undefined' ){
            var dateArray=queryCreatTime.split('~');
            queryData['startDate'] = dateArray[0];
            queryData['endDate'] =  dateArray[1];
        }else{
            queryData['startDate'] = null;
            queryData['endDate'] =  null;
        }
        if(keywords!=null && keywords!='' && keywords!='undefined'){
            queryData['keywords'] = keywords;
        }else{
            queryData['keywords'] = null;
        }

        if(tradeorder!=0){
            queryData['transitStatus'] = tradeorder;
        }else{
            queryData['transitStatus'] = null;
        }
        if(queryRoad!=null && queryRoad!='' && queryRoad!='undefined'){
            queryData['rodeId'] = queryRoad;
        }else{
            queryData['rodeId'] = null;
        }
        if(queryUser!=null && queryUser!='' && queryUser!='undefined'){
            queryData['userId'] = queryUser;
        }else{
            queryData['userId'] = null;
        }
        console.log(queryData);
        table.reload(JbrTradeorder.tableId, {
            where: queryData, page: {curr: 1}
        });
    };

    /**
     * 弹出添加对话框
     */
    JbrTradeorder.openAddDlg = function () {
        func.open({
            title: '添加运单表',
            content: Feng.ctxPath + '/jbrTradeorder/add',
            tableId: JbrTradeorder.tableId
        });
    };

    /**
    * 点击编辑
    *
    * @param data 点击按钮时候的行数据
    */
    JbrTradeorder.openEditDlg = function (data) {
        func.open({
            title: '修改运单表',
            content: Feng.ctxPath + '/jbrTradeorder/edit?id=' + data.id,
            tableId: JbrTradeorder.tableId
        });
    };

    /**
     * 导出excel按钮
     */
    JbrTradeorder.exportExcel = function () {
        var checkRows = table.checkStatus(JbrTradeorder.tableId);
        if (checkRows.data.length === 0) {
            Feng.error("请选择要导出的数据");
        } else {
            table.exportFile(tableResult.config.id, checkRows.data, 'xls');
        }
    };

    /**
     * 处理废单
     *
     * @param data 点击按钮时候的行数据
     */
    JbrTradeorder.onDeleteItem = function (data) {
        var operation = function () {
           // var ajax = new $ax(Feng.ctxPath + "/jbrTradeorder/delete", function (data) {
            var ajax = new $ax(Feng.ctxPath + "/jbrTradeorder/delStatus", function (data) {
                Feng.success("处理成功!");
                table.reload(JbrTradeorder.tableId);
            }, function (data) {
                Feng.error("处理失败!" + data.responseJSON.message + "!");
            });
            ajax.set("id", data.id);
            ajax.start();
        };
        Feng.confirm("是否处理?", operation);
    };

    // 渲染表格
    var tableResult = table.render({
        elem: '#' + JbrTradeorder.tableId,
        url: Feng.ctxPath + '/jbrTradeorder/list',
        page: true,
        height: "full-98",
        cellMinWidth: 100,
        cols: JbrTradeorder.initColumn()
    });

    // 搜索按钮点击事件
    $('#btnSearch').click(function () {
        JbrTradeorder.search();
    });

    // 添加按钮点击事件
    $('#btnAdd').click(function () {
        JbrTradeorder.openAddDlg();
    });

    // 导出excel
    $('#btnExp').click(function () {
        JbrTradeorder.exportExcel();
    });

    //配载按钮
    $('#deploy').click(function () {
        var flag=true;
        var data=table.checkStatus('jbrTradeorderTable').data;
        $.each(data, function(i, val) {
            if(val.transitStatus!=1){
                flag=false;
                Feng.error("被选中的数据运输状态必须都为待配载");
            }
        });
        if(flag && data.length>0){
            var index =func.open({
                    title: '配载运单',
                    content: Feng.ctxPath + '/jbrTradeorder/deploy',
                    offset: 'lt',
                    type: 2,
                    tableId: JbrTradeorder.tableId,
                    shade: false,
                    zIndex: layer.zIndex, //重点1
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        var w = $(layero).find("iframe")[0].contentWindow;
                        //body.find("#pdata").val(data);
                        w.child(data);
                    }
                });
           // layer.full(index);
        }else if(data.length==0){
            Feng.error("请选择需要配载的数据");
        }
    });

    // 点击运单统计按钮
    $('#orderStatistics').click(function () {
        var index = layer.open({
            type: 2,
            title: '运单统计',
            offset: 'lt',
            shade: false,
            tableId: JbrTradeorder.tableId,
            area: ["1100px", "580px"],
            content: '/jbrTradeorder/toOrderStatisticsPage',
            zIndex: layer.zIndex, //重点1
        });
        layer.full(index);
    });



    // 点击废单列表
    $('#feidan').click(function () {
      /*  var queryData = {};
            queryData['delStatus'] = 1;
        table.reload(JbrTradeorder.tableId, {
            where: queryData, page: {curr: 1}
        });*/
        var index = layer.open({
            type: 2,
            title: '废单列表',
            offset: 'lt',
            shade: false,
            tableId: JbrTradeorder.tableId,
            area: ["1100px", "580px"],
            content: '/jbrTradeorder/toOrderStatisticsPage',
            zIndex: layer.zIndex, //重点1
        });
        layer.full(index);
    });






    // 工具条点击事件
    table.on('tool(' + JbrTradeorder.tableId + ')', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;

        if (layEvent === 'edit') {
            JbrTradeorder.openEditDlg(data);
        } else if (layEvent === 'delete') {
            JbrTradeorder.onDeleteItem(data);
        }
    });
});