144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="filter-container">
|
|
<div class="filter-item">
|
|
<account-input v-model="listQuery.userId" placeholder="用户ID" />
|
|
</div>
|
|
<el-select
|
|
v-model="listQuery.logoutType"
|
|
placeholder="注销类型"
|
|
style="width: 120px"
|
|
class="filter-item"
|
|
clearable
|
|
@change="handleSearch"
|
|
>
|
|
<el-option
|
|
label="注销账号"
|
|
:value="'LOGOUT_ACCOUNT'"
|
|
/>
|
|
<el-option
|
|
label="删除数据"
|
|
:value="'DELETE_DATA'"
|
|
/>
|
|
</el-select>
|
|
<div class="filter-item">
|
|
<el-date-picker
|
|
v-model="rangeDate"
|
|
value-format="timestamp"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
</div>
|
|
<el-button
|
|
class="filter-item"
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
:disabled="searchDisabled"
|
|
@click="handleSearch"
|
|
>
|
|
搜索
|
|
</el-button>
|
|
</div>
|
|
<el-table
|
|
v-loading="listLoading"
|
|
:data="list"
|
|
element-loading-text="Loading"
|
|
fit
|
|
highlight-current-row
|
|
>
|
|
<el-table-column label="用户" align="center" min-width="200">
|
|
<template slot-scope="scope">
|
|
<user-table-exhibit :user-profile="scope.row.userProfile" :query-details="true" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="类型" width="400" align="center">
|
|
<template slot-scope="scope">
|
|
<div>
|
|
<el-tag v-if="scope.row.logoutType === 'LOGOUT_ACCOUNT'">注销账号</el-tag>
|
|
<el-tag v-else-if="scope.row.logoutType === 'DELETE_DATA'">删除数据</el-tag>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="创建时间" width="400" align="center">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.createTime | dateFormat }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
:page.sync="listQuery.cursor"
|
|
:limit.sync="listQuery.limit"
|
|
@pagination="renderData"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { logoutLogPage } from '@/api/sys'
|
|
import Pagination from '@/components/Pagination'
|
|
export default {
|
|
name: 'LogoutLog',
|
|
components: { Pagination },
|
|
data() {
|
|
return {
|
|
list: [],
|
|
total: 0,
|
|
rangeDate: [],
|
|
listQuery: {
|
|
cursor: 1,
|
|
limit: 20,
|
|
userId: '',
|
|
logoutType: '',
|
|
startTime: '',
|
|
endTime: ''
|
|
},
|
|
listLoading: true,
|
|
searchDisabled: false
|
|
}
|
|
},
|
|
watch: {
|
|
rangeDate: {
|
|
immediate: true,
|
|
deep: true,
|
|
handler(newVal) {
|
|
if (newVal && newVal.length > 0) {
|
|
this.listQuery.startTime = newVal[0]
|
|
this.listQuery.endTime = newVal[1]
|
|
return
|
|
}
|
|
this.listQuery.startTime = ''
|
|
this.listQuery.endTime = ''
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.renderData()
|
|
},
|
|
methods: {
|
|
renderData(isClean) {
|
|
const that = this
|
|
if (isClean === true) {
|
|
that.list = []
|
|
that.listQuery.cursor = 1
|
|
}
|
|
that.listLoading = true
|
|
logoutLogPage(that.listQuery).then(res => {
|
|
const { body } = res
|
|
that.total = body.total || 0
|
|
that.list = body.records
|
|
that.listLoading = false
|
|
})
|
|
},
|
|
handleSearch() {
|
|
this.renderData(true)
|
|
}
|
|
}
|
|
}
|
|
</script>
|