138 lines
3.8 KiB
Vue
138 lines
3.8 KiB
Vue
<template>
|
|
<layout-content :header="$t('log.title')">
|
|
<complex-table
|
|
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
|
:data="data"
|
|
:columns="columns"
|
|
local-key="logGrid"
|
|
:search-config="searchConfig"
|
|
:pagination-config="paginationConfig"
|
|
@select="select"
|
|
@search="search"
|
|
@sort-change="sortChange"
|
|
>
|
|
<template #toolbar>
|
|
<el-button v-permission="['log:export']" icon="el-icon-download" size="mini" @click="exportData">{{ $t('log.export') }}</el-button>
|
|
</template>
|
|
|
|
<el-table-column prop="opType" :label="$t('log.optype')" width="120">
|
|
<template v-slot:default="{row}">
|
|
<span>{{ row.opType + row.sourceType }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :show-overflow-tooltip="true" prop="detail" :label="$t('log.detail')" />
|
|
<el-table-column prop="user" :label="$t('log.user')" width="80" />
|
|
<el-table-column :show-overflow-tooltip="true" prop="time" sortable="custom" :label="$t('log.time')" width="180">
|
|
<template v-slot:default="scope">
|
|
<span>{{ scope.row.time | timestampFormatDate }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</complex-table>
|
|
</layout-content>
|
|
</template>
|
|
|
|
<script>
|
|
import LayoutContent from '@/components/business/LayoutContent'
|
|
import ComplexTable from '@/components/business/complex-table'
|
|
import { formatCondition, formatQuickCondition, addOrder, formatOrders } from '@/utils/index'
|
|
import { logGrid, opTypes, exportExcel } from '@/api/system/log'
|
|
export default {
|
|
|
|
components: { ComplexTable, LayoutContent },
|
|
data() {
|
|
return {
|
|
columns: [],
|
|
|
|
searchConfig: {
|
|
useQuickSearch: true,
|
|
useComplexSearch: true,
|
|
quickPlaceholder: this.$t('log.search_by_key'),
|
|
components: [
|
|
{
|
|
field: 'optype',
|
|
label: this.$t('log.optype'),
|
|
component: 'FuComplexMixSelect',
|
|
options: [],
|
|
multiple: true,
|
|
class: 'de-log-filter',
|
|
defaultOperator: 'in'
|
|
},
|
|
{ field: 'nick_name', label: this.$t('log.user'), component: 'DeComplexInput', class: 'de-log-filter' },
|
|
|
|
{ field: 'time', label: this.$t('log.time'), component: 'FuComplexDateTime', defaultOperator: 'between', class: 'de-log-filter' }
|
|
|
|
]
|
|
},
|
|
|
|
paginationConfig: {
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
},
|
|
data: [],
|
|
types: [],
|
|
|
|
orderConditions: [],
|
|
last_condition: null
|
|
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.types = []
|
|
opTypes().then(res => {
|
|
const datas = res.data
|
|
datas.forEach(item => {
|
|
this.types.push({ 'label': item.name, 'value': item.id })
|
|
})
|
|
this.searchConfig.components[0].options = this.types
|
|
})
|
|
},
|
|
mounted() {
|
|
this.search()
|
|
},
|
|
|
|
methods: {
|
|
exportData() {
|
|
console.log('exportting...')
|
|
exportExcel().then(res => {
|
|
|
|
})
|
|
},
|
|
|
|
sortChange({ column, prop, order }) {
|
|
this.orderConditions = []
|
|
if (!order) {
|
|
this.search(this.last_condition)
|
|
return
|
|
}
|
|
|
|
this.orderConditions = []
|
|
addOrder({ field: prop, value: order }, this.orderConditions)
|
|
this.search(this.last_condition)
|
|
},
|
|
select(selection) {
|
|
|
|
},
|
|
|
|
search(condition) {
|
|
this.last_condition = condition
|
|
condition = formatQuickCondition(condition, 'key')
|
|
const temp = formatCondition(condition)
|
|
const param = temp || {}
|
|
param['orders'] = formatOrders(this.orderConditions)
|
|
const { currentPage, pageSize } = this.paginationConfig
|
|
logGrid(currentPage, pageSize, param).then(response => {
|
|
this.data = response.data.listObject
|
|
this.paginationConfig.total = response.data.itemCount
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|