<template>
|
<div class='staff-log'>
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
<el-menu-item index="1">员工操作日志</el-menu-item>
|
<el-menu-item index="2">登录日志</el-menu-item>
|
</el-menu>
|
<el-form :inline="true" :model="logCheck" class="selectInline">
|
<el-form-item>
|
<el-date-picker
|
v-model="logCheck.dateValue"
|
style="width: 100%;"
|
type="daterange"
|
class='datePicker'
|
align='center'
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-input v-model="logCheck.user" placeholder="请输入用户名"></el-input>
|
</el-form-item>
|
<el-form-item v-if="selectIndex === '1'">
|
<el-select v-model="logCheck.region" placeholder="请选择">
|
<el-option
|
v-for="(value, index) in operationList"
|
:key="index"
|
:label="value"
|
:value="index"/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
<el-button @click="onSubmit('reset')">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table
|
ref="logTable"
|
v-loading="loading"
|
id="crm-table"
|
:data="tableData"
|
:height="tableHeight"
|
:cell-style="cellStyle"
|
class="n-table--border"
|
border
|
highlight-current-row
|
style="width: 100%">
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
:width="item.width"
|
:prop="item.field"
|
:label="item.value"
|
:formatter="tableFormatter"
|
show-overflow-tooltip>
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">{{ scope.column.label }}</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="p-contianer" v-show='total>0'>
|
<el-pagination
|
:current-page="currentPage"
|
:page-sizes="pageSizes"
|
:page-size.sync="pageSize"
|
:total="total"
|
class="p-bar"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { GetOperationLogList, GetLoginRecordList } from '@/api/systemManagement/log'
|
export default {
|
name: 'staffLog',
|
computed: {
|
fieldList: function () {
|
if (this.selectIndex === '1') {
|
return [
|
{ field: 'RealName', value: '用户姓名' },
|
// { field: 'UserId', value: '用户ID' },
|
{ field: 'Content', value: '操作内容' },
|
{ field: 'OperationTime', value: '操作时间' },
|
{ field: 'BusinessOperationType', value: '业务操作类型' },
|
{ field: 'OperationType', value: '操作类型' }
|
]
|
} else {
|
return [
|
{ field: 'RealName', value: '用户姓名' },
|
// { field: 'UserId', value: '用户ID' },
|
{ field: 'LoginTime', value: '登录时间' },
|
{ field: 'LoginIpLocation', value: '登录IP地址' },
|
{ field: 'LoginIp', value: '登录IP' }
|
]
|
}
|
}
|
},
|
data () {
|
return {
|
operationList: ['默认其他', '客户', '联系人', '商机', '合同管理', '工单', '报价单', '合同', '日程', '开票', '回款'],
|
tableHeight: document.documentElement.clientHeight - 360, // 表的高度
|
tableData: [],
|
total: 0,
|
currentPage: 1,
|
pageSize: 10,
|
pageSizes: [10, 30, 60, 100],
|
logCheck: {
|
user: '',
|
region: 0,
|
dateValue: ''
|
},
|
activeIndex: '1',
|
selectIndex: '1',
|
loading: false // 表的加载动画
|
}
|
},
|
mounted () {
|
var self = this
|
/** 控制table的高度 */
|
window.onresize = function () {
|
self.tableHeight = document.documentElement.clientHeight - 260
|
}
|
this.getTableList()
|
},
|
methods: {
|
/** 通过回调控制style */
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
if (
|
column.property === 'CustomerName' ||
|
column.property === 'businessCheck'
|
) {
|
return { color: '#4D88FF', cursor: 'pointer' }
|
} else {
|
return ''
|
}
|
},
|
// 列表信息格式化
|
tableFormatter (row, column) {
|
if (column.property === 'BusinessOperationType') {
|
return {0: '默认其他',
|
1: '客户',
|
2: '联系人',
|
3: '商机',
|
4: '合同管理',
|
5: '工单',
|
6: '报价单',
|
7: '合同',
|
8: '日程',
|
9: '开票',
|
10: '回款',
|
11: '回款'}[row.BusinessOperationType]
|
} else if (column.property === 'OperationType') {
|
return { 1: '添加', 2: '修改', 3: '删除' }[row.OperationType]
|
} else if (column.property === 'Status') {
|
return { 1: '已激活',
|
2: '已禁用',
|
4: '未激活',
|
5: '退出企业'}[row.Status]
|
}
|
return row[column.property]
|
},
|
onSubmit (val) {
|
console.log(this.logCheck)
|
if (val === 'reset') {
|
this.logCheck = {
|
user: '',
|
region: 0,
|
dateValue: ''
|
}
|
this.getTableList()
|
} else {
|
this.getTableList()
|
}
|
},
|
getTableList () {
|
let request
|
const params = {
|
'PageIndex': this.currentPage,
|
'PageSize': this.pageSize,
|
'StartTime': this.logCheck.dateValue ? this.logCheck.dateValue[0] : '',
|
'EndTime': this.logCheck.dateValue ? this.logCheck.dateValue[1] : '',
|
'RealName': this.logCheck.user
|
}
|
if (this.selectIndex === '1') {
|
params['BusinessOperationType'] = this.logCheck.region
|
request = GetOperationLogList
|
} else {
|
request = GetLoginRecordList
|
}
|
this.loading = true
|
request(params).then(res => {
|
this.loading = false
|
this.tableData = res.data.Result.List
|
this.total = res.data.Result.Count
|
})
|
.catch(data => {
|
this.loading = false
|
})
|
},
|
handleSizeChange (val) {
|
console.log(`每页 ${val} 条`)
|
this.pageSize = val
|
this.getTableList()
|
},
|
handleCurrentChange (val) {
|
console.log(`当前页: ${val}`)
|
this.currentPage = val
|
this.getTableList()
|
},
|
handleSelect (key, keyPath) {
|
this.selectIndex = key
|
this.getTableList()
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
.title {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
margin: 10px 0;
|
color: #333;
|
padding: 0 20px;
|
}
|
.selectInline{
|
background: #fff;
|
padding:20px 20px 0;
|
}
|
.datePicker{
|
margin-top:3px;
|
.el-date-editor .el-range__icon{
|
line-height: 28px;
|
}
|
}
|
/** 分页布局 */
|
.p-contianer {
|
position: relative;
|
background-color: white;
|
height: 44px;
|
.p-bar {
|
float: right;
|
margin: 5px 0 0 0;
|
font-size: 14px !important;
|
}
|
}
|
</style>
|
