<template lang='pug'>
el-container(style="padding:0px;height:77.6vh;")
el-header(style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;')
span.title-bold.title-left-color() 系统日志
el-popover( placement="bottom" width="150" )
el-button(slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px);') 筛选
el-checkbox-group( v-model="checkList")
el-col( :span="24" )
el-checkbox( v-for="item in checkGroup" :label="item.label" :key="item.id" @change='changeCheck(item.id)') {{item.label}}
el-main.box_main
el-card()
div.tableCard()
el-form( :inline="true" :model="dataForm" size="mini" @keyup.enter.native="getDataList()" )
el-form-item( label="操作员:")
el-input( v-model="dataForm.username" placeholder="操作员" clearable)
el-form-item( label="操作类型:")
el-select( v-model="dataForm.operation" placeholder="请选择" clearable)
el-option( v-for="(item,index) in operationList" :key="index" :label="item" :value="item")
el-form-item( label="操作时间:")
el-date-picker(type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width:175px;" v-model="dataForm.startTime" placeholder="选择开始时间" clearable)
el-form-item( label="至")
el-date-picker( type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width:175px;" v-model="dataForm.endTime" placeholder="选择结束时间" clearable)
el-button( type="primary" size='mini' icon="el-icon-search" @click="getDataList()") 查询
el-button(@click="reSet()" size='mini' type="primary" icon="el-icon-refresh-right") 重置
el-table(:data="dataList" class='myTable' row-key="id" ref='tables' @sort-change='sortChange' style="width: 100%;" v-loading="dataListLoading" :stripe="true" :header-cell-style="{background:'#EEF8FF',color:'#333333'}")
el-table-column(v-if='checkList.includes("序号")' class='tablesItem' type="index" header-align="center" align="center" label="序号" width="100")
template(scope="scope")
span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
el-table-column(v-if='checkList.includes("操作员")' class='tablesItem' prop="username" header-align="center" align="center" label="操作员" sortable='custom')
el-table-column(v-if='checkList.includes("操作时间")' prop="createDate" columnKey='create_date' header-align="center" align="center" label="操作时间" sortable='custom')
el-table-column(v-if='checkList.includes("主机ip")' prop="ip" header-align="center" align="center" label="主机ip" sortable='custom')
el-table-column(v-if='checkList.includes("模块名称")' prop="blockName" columnKey='block_name' header-align="center" align="center" label="模块名称" sortable='custom')
el-table-column(v-if='checkList.includes("操作类型")' prop="operation" header-align="center" align="center" label="操作类型" sortable='custom')
el-table-column(v-if='checkList.includes("描述")' prop="detail" header-align="center" align="center" label="描述" width='360' sortable='custom')
div(slot-scope='scope')
span(:title='scope.row.detail') {{scope.row.detail |ellipsis}}
el-footer.box_footer
el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
</template>
<script>
import Sortable from "sortablejs";
export default {
filters: {
ellipsis (value) {
if (!value) return ''
if (value.length > 12) {
return value.slice(0, 12) + '...'
}
return value
}
},
data () {
return {
isShow:true,
checkList:["序号", "操作员", "操作时间", "主机ip", "模块名称", "操作类型"],
checkGroup:[],
dataForm: {
username: '',
operation: '',
startTime: '',
endTime: ''
},
operationList: ['登录', '注销', '新增', '修改', '删除'],
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false
}
},
created () {
this.pageIndex = 1
this.getDataList()
},
mounted() {
this.getTableList()
this.columnDrop();
},
methods: {
getTableList(){
this.checkGroup=this.$refs.tables.$children.map(obj=>{
if(obj.label){
return {label:obj.label,id:obj._uid}
}
})
this.checkGroup=this.checkGroup.filter(e=>e!==undefined)
// console.log(this.checkGroup);
this.checkList=this.checkGroup.map(e=>e.label)
},
changeCheck(id){
// console.log(this.checkList)
// console.log(id);
},
// 列拖拽
columnDrop() {
const wrapperTr = document.querySelector(".myTable .el-table__header-wrapper tr");
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: (evt) => {
console.log(evt)
const oldItem = this.$refs.tables.$children[evt.oldIndex];
// console.log(oldItem,1111111)
this.$nextTick(()=>{
this.$refs.tables.$children.splice(evt.oldIndex, 1);
this.$refs.tables.$children.splice(evt.newIndex, 0, oldItem);
})
},
});
},
//重置
reSet() {
this.dataForm = {}
this.pageIndex = 1
this.getDataList()
},
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/log/list'),
method: 'get',
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
username: this.dataForm.username,
operation: this.dataForm.operation,
startTime: this.dataForm.startTime,
endTime: this.dataForm.endTime,
sort: this.sort,
order: this.order,
stationId: localStorage.getItem('stationId')
})
}).then(data => {
//console.log('data', data)
if (data && data.code === 0) {
this.dataList = data.page.records
console.log(this.dataList)
this.totalPage = data.page.total
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
//排序
sortChange (column) {
if (column.order === 'descending') {
this.order = 'desc'
} else {
this.order = 'asc'
}
if (column.column.columnKey) {
this.sort = column.column.columnKey
} else {
this.sort = column.prop
}
this.getDataList()
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
}
}
}
</script>