<template>
|
<div class="container" v-loading="loading">
|
<div class="title" v-if="showTitle">
|
<span>项目日志</span> <span class="back" @click="back"> <i class="iconfont icon-fanhui"></i> 返回 </span>
|
</div>
|
|
<el-timeline class="content">
|
<el-timeline-item v-for="log in logs" :key="log.id" :timestamp="log.update_time" placement="top">
|
<el-card>
|
<h4>{{ log.module }}-{{ log.permission }}</h4>
|
<p class="things">{{ log.message }}</p>
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
|
<div v-if="totalCount > count || totalCount === 0">
|
<div v-if="logs?.length">
|
<el-divider></el-divider>
|
<div class="more" :class="{ nothing: finished }">
|
<i v-if="more" class="iconfont icon-loading"></i>
|
<div v-show="!more && !finished" @click="nextPage">
|
<span>查看更多</span> <i class="iconfont icon-gengduo" style="font-size: 14px"></i>
|
</div>
|
<div v-if="finished">
|
<span>{{ totalCount === 0 ? '暂无数据' : '没有更多数据了' }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="nothing" v-else>暂无日志信息</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import logModel from 'lin/model/log'
|
|
import { ref, reactive, onMounted } from 'vue'
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
|
export default {
|
props: {
|
editId: {
|
type: String,
|
default: null,
|
},
|
showTitle: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
setup(props, context) {
|
const form = ref(null)
|
const loading = ref(false)
|
const count = ref(10)
|
const totalCount = ref(0)
|
const logs = ref([])
|
const finished = ref(false)
|
|
const relationId = ref('')
|
|
/**
|
* Part 2
|
* 根据调解筛选查询日志
|
*/
|
const search = reactive({
|
keyword: '',
|
relationId: props.editId,
|
searchUser: '',
|
searchKeyword: '',
|
searchDate: [],
|
totalCount: 0,
|
count: 10,
|
page: 0,
|
})
|
|
const more = ref(false)
|
const nextPage = async () => {
|
more.value = true
|
try {
|
search.page += 1
|
search.relationId = relationId.value
|
const res = await logModel.relationLogs(search)
|
const moreLogs = res.items
|
logs.value = logs.value.concat(moreLogs)
|
more.value = false
|
count.value = logs.value.length
|
} catch (error) {
|
console.error('error', error)
|
if (error.data.code === 10020) {
|
finished.value = true
|
}
|
more.value = false
|
}
|
}
|
|
onMounted(() => {
|
loadDictDitems()
|
})
|
|
// 根据字典类型查询字典
|
const loadDictDitems = async () => {
|
if (props.editId) {
|
relationId.value = props.editId
|
searchPage()
|
}
|
}
|
|
// 条件检索
|
const searchPage = async () => {
|
logs.value = []
|
loading.value = true
|
search.totalCount = 0
|
totalCount.value = 0
|
count.value = 0
|
// finished.value = false
|
|
const res = await logModel.relationLogs({
|
page: 0, // 初始化
|
keyword: search.searchKeyword,
|
relationId: props.editId,
|
start: search.searchDate[0],
|
end: search.searchDate[1],
|
})
|
if (res) {
|
const searchLogs = res.items
|
search.totalCount = res.total
|
logs.value = res.items
|
totalCount.value = res.total
|
count.value = logs.value.length
|
} else {
|
finished.value = true
|
}
|
// isSearch.value = true
|
loading.value = false
|
}
|
|
// 重置表单
|
const resetForm = () => {
|
form.value.resetFields()
|
}
|
|
const back = () => {
|
context.emit('editClose')
|
}
|
|
return {
|
back,
|
totalCount,
|
count,
|
logs,
|
finished,
|
more,
|
nextPage,
|
form,
|
resetForm,
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
.title {
|
height: 59px;
|
line-height: 59px;
|
color: $parent-title-color;
|
font-size: 16px;
|
font-weight: 500;
|
text-indent: 40px;
|
border-bottom: 1px solid #dae1ec;
|
|
.back {
|
float: right;
|
margin-right: 40px;
|
cursor: pointer;
|
}
|
}
|
|
.content {
|
padding: 10px;
|
}
|
|
.wrap {
|
padding: 20px;
|
}
|
|
.submit {
|
float: left;
|
}
|
}
|
|
.things {
|
font-size: 14px;
|
color: #45526b;
|
margin-bottom: 15px;
|
margin-top: 5px;
|
}
|
|
.more {
|
height: 40px;
|
line-height: 40px;
|
color: $theme;
|
font-size: 14px;
|
margin-left: 28px;
|
cursor: pointer;
|
&.nothing {
|
cursor: text;
|
}
|
|
.icon-gengduo {
|
display: inline;
|
margin-left: 6px;
|
}
|
|
.icon-loading {
|
&:before {
|
display: inline-block;
|
animation: spin 1s linear infinite;
|
}
|
}
|
}
|
|
.nothing {
|
color: #45526b;
|
font-size: 14px;
|
}
|
</style>
|
