330 lines
9.1 KiB
Vue
330 lines
9.1 KiB
Vue
<template>
|
|
<el-card shadow="never" class="aui-card--fill">
|
|
<div class="mod-sys__log-operation">
|
|
<el-form
|
|
:inline="true"
|
|
:model="dataForm"
|
|
@keyup.enter.native="getDataList()"
|
|
>
|
|
<el-form-item>
|
|
<el-select
|
|
v-model="dataForm.status"
|
|
:placeholder="$t('logOperation.status')"
|
|
clearable
|
|
>
|
|
<el-option
|
|
:label="$t('logOperation.status0')"
|
|
:value="0"
|
|
></el-option>
|
|
<el-option
|
|
:label="$t('logOperation.status1')"
|
|
:value="1"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input
|
|
v-model="dataForm.creatorName"
|
|
placeholder="请输入操作人"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-date-picker
|
|
v-model="value1"
|
|
type="datetimerange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input
|
|
v-model="dataForm.operation"
|
|
placeholder="请输入操作名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select
|
|
v-model="operationType"
|
|
placeholder="请选择操作类型"
|
|
clearable
|
|
>
|
|
<el-option
|
|
label="增加"
|
|
value="/renren-admin/resource%/insert"
|
|
></el-option>
|
|
<el-option
|
|
label="更新"
|
|
value="/renren-admin/resource%/update"
|
|
></el-option>
|
|
<el-option
|
|
label="删除"
|
|
value="/renren-admin/resource%/delete"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="resetFunction()"> 重置 </el-button>
|
|
</el-form-item>
|
|
<!-- <el-form-item>
|
|
<el-button type="info" @click="exportHandle()">{{
|
|
$t('export')
|
|
}}</el-button>
|
|
</el-form-item> -->
|
|
</el-form>
|
|
<el-table
|
|
v-loading="dataListLoading"
|
|
:data="dataList"
|
|
border
|
|
@sort-change="dataListSortChangeHandle"
|
|
style="width: 100%"
|
|
:row-class-name="rowClassName"
|
|
>
|
|
<el-table-column
|
|
label="序号"
|
|
align="center"
|
|
prop="xh"
|
|
width="50"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="operation"
|
|
label="操作名称"
|
|
header-align="center"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="creatorName"
|
|
label="操作人"
|
|
header-align="center"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="requestUriCharacters"
|
|
label="操作类型"
|
|
header-align="center"
|
|
width="100"
|
|
align="center"
|
|
:show-overflow-tooltip="true"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="operationTable"
|
|
label="操作数据表"
|
|
header-align="center"
|
|
align="center"
|
|
width="120"
|
|
:show-overflow-tooltip="true"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="status"
|
|
label="操作结果"
|
|
sortable="custom"
|
|
header-align="center"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-tag v-if="scope.row.status === 0" size="small" type="danger">{{
|
|
$t('logOperation.status0')
|
|
}}</el-tag>
|
|
<el-tag v-else size="small" type="success">{{
|
|
$t('logOperation.status1')
|
|
}}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="createDate"
|
|
label="操作时间"
|
|
sortable="custom"
|
|
header-align="center"
|
|
align="center"
|
|
width="180"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="requestMethod"
|
|
label="操作方法"
|
|
header-align="center"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="requestParams"
|
|
label="传递参数"
|
|
header-align="center"
|
|
align="center"
|
|
width="120"
|
|
:show-overflow-tooltip="true"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="resultData"
|
|
label="返回结果"
|
|
header-align="center"
|
|
width="150"
|
|
align="center"
|
|
:show-overflow-tooltip="true"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="blue-font-color" @click="copyFunction(scope.row)">
|
|
复制
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
:current-page="page"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:page-size="limit"
|
|
:total="total"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="pageSizeChangeHandle"
|
|
@current-change="pageCurrentChangeHandle"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import mixinViewModule from '@/mixins/view-module'
|
|
export default {
|
|
mixins: [mixinViewModule],
|
|
data () {
|
|
return {
|
|
mixinViewModuleOptions: {
|
|
getDataListURL: '/sys/log/operation/page',
|
|
getDataListIsPage: true,
|
|
exportURL: '/sys/log/operation/export'
|
|
},
|
|
dataForm: {
|
|
status: '',
|
|
creatorName: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
operation: '',
|
|
operationType: 'all'
|
|
},
|
|
operationType: '',
|
|
value1: ''
|
|
}
|
|
},
|
|
watch: {
|
|
value1 (val) {
|
|
val[0] = this.handleTime(val[0], 'yyyy-MM-dd HH:mm:ss')
|
|
this.dataForm.startDate = val[0]
|
|
val[1] = this.handleTime(val[1], 'yyyy-MM-dd HH:mm:ss')
|
|
this.dataForm.endDate = val[1]
|
|
},
|
|
dataList (val) {
|
|
if (val[0].requestUri) {
|
|
this.requestUriFunction()
|
|
}
|
|
},
|
|
operationType (val) {
|
|
if (val !== 'all') {
|
|
this.dataForm.operationType = val
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 复制方法
|
|
copyFunction (row) {
|
|
var data = row.resultData
|
|
var oInput = document.createElement('input')
|
|
oInput.value = data
|
|
document.body.appendChild(oInput)
|
|
oInput.select()
|
|
document.execCommand('Copy')
|
|
oInput.className = 'oInput'
|
|
oInput.style.display = 'none'
|
|
this.$message({
|
|
type: 'success',
|
|
message: this.$t('复制成功')
|
|
})
|
|
},
|
|
|
|
// 重置按钮
|
|
resetFunction () {
|
|
const params = {
|
|
status: '',
|
|
creatorName: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
operation: '',
|
|
operationType: 'all'
|
|
}
|
|
this.value1 = '' // 格式化日期
|
|
this.operationType = '' // 操作类型转化
|
|
this.page = 1
|
|
this.limit = 10
|
|
this.dataForm = params
|
|
this.getDataList() // 重置完调用查询方法
|
|
},
|
|
// 序号
|
|
rowClassName ({ row, rowIndex }) {
|
|
row.xh = rowIndex + 1 + (this.page - 1) * this.limit
|
|
},
|
|
// 操作类型字段
|
|
requestUriFunction () {
|
|
this.dataList.map((item, index) => {
|
|
const name = item.requestUri.substring(
|
|
item.requestUri.lastIndexOf('/') + 1
|
|
)
|
|
switch (name) {
|
|
case 'delete':
|
|
this.dataList[index].requestUriCharacters = '删除'
|
|
break
|
|
case 'update':
|
|
this.dataList[index].requestUriCharacters = '更新'
|
|
break
|
|
case 'insert':
|
|
this.dataList[index].requestUriCharacters = '增加'
|
|
break
|
|
}
|
|
})
|
|
},
|
|
// 定义格式化函数：
|
|
handleTime (time, format) {
|
|
if (time == null || time == undefined || time == '') {
|
|
return ''
|
|
}
|
|
var t = new Date(time)
|
|
var tf = function (i) {
|
|
return (i < 10 ? '0' : '') + i
|
|
}
|
|
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
|
|
switch (a) {
|
|
case 'yyyy':
|
|
return tf(t.getFullYear())
|
|
break
|
|
case 'MM':
|
|
return tf(t.getMonth() + 1)
|
|
break
|
|
case 'mm':
|
|
return tf(t.getMinutes())
|
|
break
|
|
case 'dd':
|
|
return tf(t.getDate())
|
|
break
|
|
case 'HH':
|
|
return tf(t.getHours())
|
|
break
|
|
case 'ss':
|
|
return tf(t.getSeconds())
|
|
break
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted () {
|
|
this.$nextTick(() => {})
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.blue-font-color {
|
|
color: #0058e1;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|