IDCOL/webConfig/src/views/operationLog/operationLog.vue

<template>
    <!-- 操作日志 -->
    <div class="operationLog_main">
        <div class="main_top_bg">
        </div>
        <div class="wrap">
            <div class="main_top">
                <div class="search_box">
                    <el-input placeholder="- Enter keywords to search" v-model="keyword" class="search" @change = "search">
                        <template slot="prepend" @click="search()">Search</template>
                    </el-input>
                </div>
                <div class="button_box">
                    <el-select v-model="reportType" placeholder="" @change="reportTypeFun">
                        <el-option
                          v-for="item in reportListEN"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button round @click="exportExcel()" v-loading="loading.exportExcel">{{'Export Excel'}}</el-button>
                    <el-button round @click="printing()" v-loading="loading.printing">{{'Print'}}</el-button>
                </div>
            </div>
            <div class="information_box">
                <el-table
                    :data="tableData"
                    ref="elTable"
                    border
                    width="100%"
                    :height="showOverflowTooltip?'calc(100% - 92px)':''">
                    <!-- <el-table-column
                      type="selection"
                      width="48">
                    </el-table-column> -->
                    <el-table-column
                      label="Index"
                      prop="GL_index"
                      align="center"
                      width="80">
                    </el-table-column>
                    <el-table-column 
                        align="center" 
                        :show-overflow-tooltip="showOverflowTooltip"
                        :prop="item.prop" 
                        :label="item.label" 
                        :key="item.id"
                        :width="item.width"
                        :min-width="item.minWidth"
                        v-for="(item) in tableListEN">
                    </el-table-column>
                    <!-- <el-table-column align="left" header-align="center" :show-overflow-tooltip="showOverflowTooltip" :prop="item.prop" :label="item.label" :key="item.id" :min-width="(item.label.length+1)*9+20" v-for="(item,index) in tableListEN" v-if="index == 4">
                    </el-table-column> -->
                </el-table>
                <div class="paging_box">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="currentPage"
                      :page-size="pageSize"
                      :page-sizes="[20, 40, 60, 100]"
                      layout="sizes, prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <button type="button" id="btn2" style="display: none"></button>
    </div>
</template>

<script type="text/javascript">
    import {mapGetters} from 'vuex'
    import baseApi from '../../api/base.js'
    import allUrl from '../../api/allUel.js'
    export default{
        data(){
            return{
                keyword:'',
                reportType:'login',
                reportList:[{label:'登录/登出日志',value:'login'},{label:'添加日志',value:'insert'},{label:'修改日志',value:'update'},{label:'指令日志',value:'cmd'},{label:'删除日志',value:'delete'},{label:'其他日志',value:'other'},],
                reportListEN:[{label:'Sign In/Sign out',value:'login'},{label:'Add',value:'insert'},{label:'Modify',value:'update'},{label:'Commands',value:'cmd'},{label:'Delete',value:'delete'},{label:'Others',value:'other'},],
                /*表格*/
                // tableList:[{prop:'time',label:'操作时间'},{prop:'type',label:'操作类型'},{prop:'username',label:'操作用户ID'},{prop:'realname',label:'操作用户名'},{prop:'content',label:'操作内容'}],
                tableListEN:[{prop:'time',label:'Operation time'},{prop:'type',label:'Operation type'},{prop:'username',label:'User ID'},{prop:'realname',label:'Username'},{prop:'content',label:'Behavior'}],
                tableData: [],
                currentPage:1,
                pageSize:20,
                total:0,
                loading:{
                    exportExcel:false,
                    table:false,
                    printing:false,
                },
                showOverflowTooltip:true,
            }
        },
        computed:{
            ...mapGetters({
                token:'token',
                username:'username',
                client_key:'client_key',
                projectsId:'projectsId',
                version:'version',
                role:'role',
                remRatio:'remRatio',
          })
        },
        mounted(){
            this.getList(1,0);
            this.tableListEN = [
                {prop:'time',label:'Operation time',width:12*this.remRatio},
                {prop:'type',label:'Operation type',width:10*this.remRatio},
                {prop:'username',label:'User ID',width:8*this.remRatio},
                {prop:'realname',label:'Username',width:8*this.remRatio},
                {prop:'content',label:'Behavior',}
            ];
        },
        methods:{
            search(val){
                console.log(val)
                this.getList(1,0)
            },
            printing(){
                this.loading.printing = true;
                baseApi.ajax_post(
                    allUrl.syslog.getList,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        keyword:this.keyword,
                        type:this.reportType,
                        page:(this.currentPage - 1)*this.pageSize,
                        count:200,
                        download:0,
                        print:1,
                    },
                    {},
                    data =>{
                        this.loading.printing = false;
                        this.loading.table = false;
                        // this.total = data.data.total*16;
                        this.tableData = data.data.list;
                        let i = (this.currentPage - 1)*this.pageSize+1;
                        for(let d of this.tableData){
                            d.GL_index = i;
                            i++;
                            for(let key in d){
                                if(d[key] == null || d[key] == ''){
                                    d[key] = ' ';
                                }
                            }
                        }
                        this.showOverflowTooltip = false;
                        $(".el-table").css({width:'1050px',borderBottom:'1px solid #ebeef5'});
                        this.$refs.elTable.doLayout();
                        let this_ = this;
                        this.$nextTick(function(){
                            $(".el-table").print({
                                globalStyles : true,
                                mediaPrint : false,
                                iframe : true,
                                deferred: $.Deferred().done(function() {
                                    $(".el-table").css({width:'100%',borderBottom:''});
                                    this_.showOverflowTooltip = true;
                                    this_.$refs.elTable.doLayout();
                                    this_.getList(this_.currentPage,0);
                                })
                            });
                        })
                    },
                this)
            },
            exportExcel(){
                this.getList(this.currentPage,1)
            },
            reportTypeFun(val){
                console.log(val)
                this.getList(1,0)
            },
            getList(value,type){
                if(type == 0){
                    this.loading.table = true;
                }else{
                    this.loading.exportExcel = true;
                }
                baseApi.ajax_post(
                    allUrl.syslog.getList,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        keyword:this.keyword,
                        type:this.reportType,
                        page:value,
                        count:this.pageSize,
                        download:type,
                    },
                    {},
                    data =>{
                        if(type == 0){
                            this.loading.table = false;
                            this.currentPage = value;
                            this.total = data.data.total*this.pageSize;
                            this.tableData = data.data.list;
                            let i = (this.currentPage - 1)*this.pageSize+1;
                            for(let d of this.tableData){
                                d.GL_index = i;
                                i++;
                                for(let key in d){
                                    if(d[key] == null || d[key] == ''){
                                        d[key] = ' ';
                                    }
                                }
                            }
                            // console.log(data,'日志列表')
                        }else if(type == 1){
                            this.loading.exportExcel = false;
                            // var $eleBtn2 = $("#btn2");
                            var $eleForm = $("<form method='get'></form>");
                            $eleForm.attr("action",data.data.path);
                            $(document.body).append($eleForm);
                            //提交表单，实现下载
                            $eleForm.submit();
                        }
                    },
                this)
            },
            /*表格*/
            /*分页*/
            handleSizeChange(val) {
                this.pageSize = val;
                this.getList(this.currentPage,0);
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.getList(val,0)
            },
        }
    }
</script>

<style type="text/css" lang="less">
    .operationLog_main{
        position: relative;
        min-width: 1260px;
        max-width: 1920px;
        height: 100%;
        min-height: 610px;
        max-height: 920px;
        >.wrap{
            padding: 0px 50px;
            height: 100%;
        }
        >.main_top_bg{
            // width:1920px;
            width: 100%;
            height:246px; 
            position: absolute;
            z-index: -1;
            background:rgba(234,234,234,1);
        }
        .main_top{
            width: 100%;
            // height: 110px;
            margin-bottom: 29px;
            padding-top: 32px;
            position: relative;
            display: flex;
            justify-content: space-between;
            .search_box{
                width:344px;
                height:50px;line-height: 50px;
                background:rgba(255,255,255,1);
                box-shadow: -5px 0px 0px 0px rgba(252,132,64,1);
                .search{
                    font-size:18px;
                    font-family:PingFangSC-Regular;
                    color:rgba(178,186,198,1);
                    .el-input-group__prepend{
                        cursor: pointer;
                    }
                }
                .el-input__inner{
                    height:50px;line-height: 50px;
                    border: 0px;
                }
                .el-input-group__prepend{
                    background: #ffffff;
                    border: 0px;
                    font-size: 18px;
                    font-family:PingFangSC-Medium;
                    color:rgba(26,26,26,1);
                }
            }
            .button_box{
                .el-select .el-input__inner{
                    background: linear-gradient(#3682fb, #38a1f6);
                    border-radius: 20px;
                    color: #fff;
                    text-align: center;
                    border: 0;
                }
                .el-button{
                    background: linear-gradient(140.3deg,rgba(252,132,64,1),rgba(254,113,33,1));
                    color: #fff;
                    margin-left: 18px;
                }
            }
        }
        .information_box{
            height: calc(100% - 113px);
            width:100%;
            border-top: 1px solid #DDE4ED;
            .el-table{
                th,td{
                    padding: 0;
                    >.cell{
                        padding: 0 0.5rem;
                        line-height: inherit;
                    }
                }
                th{
                    height: 3.33rem;line-height: 3.33rem;
                    background:rgba(246,248,250,1);
                    font-size:1rem;
                    font-family:PingFang-SC-Medium,PingFang-SC;
                    font-weight:500;
                    color:rgba(102,102,102,1);
                }
                td{
                    height: 3rem;line-height: 3rem;
                    font-size:1rem;
                    font-family:PingFangSC-Medium,PingFang SC;
                    font-weight:500;
                    color:rgba(51,51,51,1);
                }
            }
            .paging_box{
                text-align: center;
                padding: 30px 0;
                >.report_bottton{
                    background: linear-gradient(#fc8440, #fe7121);
                    border: 0px;
                    color: #ffffff;
                }
                .el-pager li.active {
                    color: #fff;
                    background: #fc8440;
                    border-radius: 20px;
                }
                .el-select .el-input.is-focus .el-input__inner{
                    border-color: #fc8440;
                }
                .el-input.is-active .el-input__inner, .el-input__inner:focus{
                    border-color: #fc8440;
                }
            }
        }
    }
</style>