<template>
|
<a-drawer :title="title" placement="right" :width="600" :closable="false" :visible="visible" @close="onClose">
|
<a-spin :spinning="spinning">
|
<a-skeleton :title="false" :paragraph="{ rows: 30}" v-if="spinning&&dataSource.length===0"/>
|
|
<template v-if="dataSource.length>0">
|
<a-timeline mode="alternate">
|
<a-timeline-item v-for="item in dataSource" :key="item.id">
|
<span>操作人：{{item.operator_dictText}}</span><br/>
|
<span>操作：{{item.operationTag_dictText}}</span><br/>
|
<!--<span>描述：{{item.description}}</span>-->
|
<span>操作时间：{{item.createTime}}</span>
|
</a-timeline-item>
|
</a-timeline>
|
|
<div style="text-align: center">
|
<a v-if="dataSource.length>0&&pageConfig.pageNo===1&&pageConfig.pageNo!==pageConfig.totalPage"
|
@click="loadNextPageData">
|
点击加载更多
|
<a-icon type="down"/>
|
</a>
|
|
<span v-if="isNoMoreData">- 已经到底了 -</span>
|
|
<a-empty v-if="dataSource.length===0"/>
|
</div>
|
</template>
|
</a-spin>
|
</a-drawer>
|
</template>
|
|
<script>
|
import { getAction } from '@/api/manage'
|
|
export default {
|
name: 'ResumeDrawer',
|
props: {
|
currentTableRowRecord: {
|
type: Object
|
}
|
},
|
data() {
|
return {
|
title: '设备履历',
|
visible: false,
|
spinning: false,
|
dataSource: [],
|
url: {
|
list: '/eam/equipmentHistoryLog/list'
|
},
|
pageConfig: {
|
pageNo: 1,
|
pageSize: 10,
|
totalPage: 0
|
},
|
drawerBodyElement: null,
|
isNoMoreData: false
|
}
|
},
|
methods: {
|
getEquipmentResumeByApi(pageNo = 1) {
|
this.pageConfig.pageNo = pageNo
|
const params = Object.assign({}, this.pageConfig, { equipmentId: this.currentTableRowRecord.id })
|
const that = this
|
this.spinning = true
|
getAction(this.url.list, params)
|
.then(res => {
|
if (res.success) {
|
console.log('res.result', res.result)
|
if (!this.pageConfig.totalPage) this.pageConfig.totalPage = res.result.pages
|
res.result.records.forEach(item => that.dataSource.push(item))
|
if (this.pageConfig.totalPage !== this.pageConfig.pageNo) {
|
if (res.result.current === 2) {
|
if (!this.drawerBodyElement) this.drawerBodyElement = document.querySelector('.ant-drawer-body')
|
this.drawerBodyElement.addEventListener('scroll', this.handleDrawerBodyScroll)
|
}
|
} else this.isNoMoreData = true
|
}
|
})
|
.finally(() => {
|
that.spinning = false
|
})
|
},
|
|
// 加载下一页数据
|
loadNextPageData() {
|
const current = this.pageConfig.pageNo + 1
|
this.getEquipmentResumeByApi(current)
|
},
|
|
// 抽屉元素滚动事件
|
handleDrawerBodyScroll() {
|
if (this.pageConfig.totalPage === this.pageConfig.pageNo) return
|
const { scrollTop, clientHeight, scrollHeight } = this.drawerBodyElement
|
if (scrollTop + clientHeight + 1 >= scrollHeight) this.loadNextPageData()
|
},
|
|
onClose() {
|
this.visible = false
|
this.pageConfig.totalPage = 0
|
this.isNoMoreData = false
|
if (this.drawerBodyElement) this.drawerBodyElement.removeEventListener('scroll', this.handleDrawerBodyScroll)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
/deep/ .ant-drawer-wrapper-body {
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
|
::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
|
.ant-drawer-body {
|
flex: 1;
|
overflow: auto;
|
}
|
}
|
</style>
|
