<template>
|
<div v-loading="loading">
|
<div v-empty="list.length === 0">
|
<div class="log-items">
|
<follow-record-cell
|
v-for="(item, index) in list"
|
:item="item"
|
:index="index"
|
:crm-type="crmType"
|
:key="index"
|
@on-handle="cellHandle"/>
|
<div class="load">
|
<el-button
|
:loading="loadMoreLoading"
|
type="text">{{ loadMoreLoading ? '加载更多' : '没有更多了' }}</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import FollowRecordCell from './components/FollowRecordCell' // 跟进记录
|
// import { crmLeadsRecordIndex } from '@/api/customermanagement/clue'
|
import { GetBusinessFollowRecordList } from '@/api/common'
|
// import { GetCustomerFollowRecordList } from '@/api/customermanagement/customerManage'
|
// import { crmContactsRecordIndex } from '@/api/customermanagement/contacts'
|
// import { GetSalesChanceFollowList } from '@/api/customermanagement/business'
|
// import { crmContractRecordIndex } from '@/api/customermanagement/contract'
|
export default {
|
/** 线索管理 的 线索详情 的 跟进记录 */
|
name: 'RecordLog',
|
components: {
|
FollowRecordCell
|
},
|
props: {
|
/** 模块ID */
|
id: [String, Number],
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
}
|
},
|
data () {
|
return {
|
loading: false,
|
loadMoreLoading: true,
|
isPost: false,
|
page: 1,
|
list: [] // 跟进记录列表
|
}
|
},
|
computed: {},
|
watch: {
|
id: function (val) {
|
console.log(val)
|
this.refreshList()
|
}
|
},
|
mounted () {
|
this.$bus.on('follow-log-refresh', data => {
|
if (data.type === 'record-log') {
|
this.refreshList()
|
}
|
})
|
|
// 分批次加载
|
const dom = document.getElementById('follow-log-content')
|
dom.onscroll = () => {
|
const scrollOff = dom.scrollTop + dom.clientHeight - dom.scrollHeight
|
// 滚动条到底部的条件
|
if (Math.abs(scrollOff) < 10 && this.loadMoreLoading === true) {
|
if (!this.isPost) {
|
this.isPost = true
|
this.page++
|
this.getList()
|
} else {
|
this.loadMoreLoading = false
|
}
|
}
|
}
|
|
this.getList()
|
},
|
activated: function () {},
|
deactivated: function () {},
|
|
beforeDestroy () {
|
this.$bus.off('follow-log-refresh')
|
},
|
methods: {
|
getList () {
|
this.loading = true
|
let request = {
|
customer: GetBusinessFollowRecordList,
|
// leads: crmLeadsRecordIndex,
|
contacts: GetBusinessFollowRecordList,
|
business: GetBusinessFollowRecordList
|
// contract: crmContractRecordIndex
|
}[this.crmType]
|
|
const params = {
|
PageIndex: this.page,
|
PageSize: 10
|
}
|
params['BusinessOperationType'] = {
|
customer: 1,
|
contacts: 2,
|
business: 3
|
}[this.crmType]
|
params['SourceId'] = this.id
|
// if (request === 'GetBusinessFollowRecordList') {
|
// } else {
|
// params['Id'] = this.id
|
// }
|
console.log(params)
|
request(params)
|
.then(res => {
|
this.list = this.list.concat(res.data.Result.List)
|
if (res.data.Result.length < 10) {
|
this.loadMoreLoading = false
|
} else {
|
this.loadMoreLoading = true
|
}
|
this.loading = false
|
this.isPost = false
|
})
|
.catch(() => {
|
this.isPost = false
|
this.loading = false
|
})
|
},
|
refreshList () {
|
this.page = 1
|
this.list = []
|
this.getList()
|
},
|
/**
|
* 行布局删除
|
*/
|
cellHandle (data) {
|
console.log(data)
|
if (data.type === 'delete') {
|
this.list.splice(data.data.index, 1)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.log-items {
|
min-height: 400px;
|
position: relative;
|
}
|
|
.load {
|
color: #999;
|
font-size: 13px;
|
margin: 0 auto 15px;
|
text-align: center;
|
.el-button,
|
.el-button:focus {
|
color: #ccc;
|
cursor: auto;
|
}
|
}
|
</style>
|
