<template>
|
<slide-view
|
v-empty="!canShowDetail"
|
:listener-ids="listenerIDs"
|
:no-listener-ids="noListenerIDs"
|
:no-listener-class="noListenerClass"
|
:body-style="{padding: 0, height: '100%'}"
|
xs-empty-icon="nopermission"
|
xs-empty-text="暂无权限"
|
@side-close="hideView">
|
<flexbox
|
v-loading="loading"
|
v-if="canShowDetail"
|
direction="column"
|
align="stretch"
|
class="d-container">
|
<c-r-m-detail-head
|
:is-seas="isSeasDetail"
|
:detail="detailData"
|
:head-details="headDetails"
|
:id="id"
|
crm-type="customer"
|
@handle="detailHeadHandle"
|
@close="hideView"/>
|
<div class="tabs">
|
<el-tabs
|
v-model="tabCurrentName"
|
@tab-click="handleClick">
|
<el-tab-pane
|
v-for="(item, index) in tabnames"
|
:key="index"
|
:label="item.label"
|
:name="item.name"/>
|
</el-tabs>
|
</div>
|
<div
|
id="follow-log-content"
|
class="t-loading-content"
|
:style="'height:' + contentStyleObj.height">
|
<!-- @scroll="onScroll" @tab-click="jump"
|
<c-r-m-base-info
|
:ref="tabnames[0].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
:is-seas="isSeasDetail"
|
crm-type="customer" />
|
<relative-contacts
|
:ref="tabnames[1].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
:is-seas="isSeasDetail"
|
crm-type="customer" />
|
<relative-business
|
:ref="tabnames[2].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
:is-seas="isSeasDetail"
|
crm-type="customer"/>
|
<customer-follow
|
:ref="tabnames[3].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
:is-seas="isSeasDetail"
|
crm-type="customer" />
|
<relative-contract
|
:ref="tabnames[4].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
:is-seas="isSeasDetail"
|
crm-type="customer" />
|
<relative-return-money
|
:ref="tabnames[5].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
:is-seas="isSeasDetail"
|
crm-type="customer"/>
|
<relative-files
|
:ref="tabnames[6].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
:is-seas="isSeasDetail"
|
crm-type="customer" />
|
<relative-handle
|
:ref="tabnames[7].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
:is-seas="isSeasDetail"
|
crm-type="customer" />-->
|
<keep-alive>
|
<component
|
class="scroll-item"
|
:is="tabName"
|
:detail="detailData"
|
:id="id"
|
:is-seas="isSeasDetail"
|
crm-type="customer"/>
|
</keep-alive>
|
</div>
|
</flexbox>
|
<c-r-m-create-view
|
v-if="isCreate"
|
:action="{type: 'update', id: id, batchId: detailData.batchId}"
|
crm-type="customer"
|
@save-success="editSaveSuccess"
|
@hiden-view="isCreate=false"/>
|
</slide-view>
|
</template>
|
|
<script>
|
import { GetCustomerDetail } from '@/api/customermanagement/customerManage'
|
|
import SlideView from '@/components/SlideView'
|
import CRMDetailHead from '../components/CRMDetailHead'
|
import CustomerFollow from './components/CustomerFollow' // 跟进记录
|
import CRMBaseInfo from '../components/CRMBaseInfo' // 基本信息
|
import RelativeContacts from '../components/RelativeContacts' // 相关联系人
|
import RelativeBusiness from '../components/RelativeBusiness' // 相关商机
|
import RelativeContract from '../components/RelativeContract' // 相关合同
|
import RelativeReturnMoney from '../components/RelativeReturnMoney' // 相关回款
|
import RelativeFiles from '../components/RelativeFiles' // 相关附件
|
import RelativeHandle from '../components/RelativeHandle' // 相关操作
|
import RelativeTeam from '../components/RelativeTeam' // 相关团队
|
|
import CRMCreateView from '../components/CRMCreateView' // 新建页面
|
|
import detail from '../mixins/detail'
|
// import test from './test'
|
|
export default {
|
/** 客户管理 的 客户详情 */
|
name: 'CustomerDetail',
|
components: {
|
SlideView,
|
CustomerFollow,
|
CRMDetailHead,
|
CRMBaseInfo,
|
RelativeContacts,
|
RelativeBusiness,
|
RelativeContract,
|
RelativeReturnMoney,
|
RelativeFiles,
|
RelativeHandle,
|
RelativeTeam,
|
CRMCreateView
|
},
|
mixins: [detail],
|
props: {
|
// 详情信息id
|
id: [String, Number],
|
// 监听的dom 进行隐藏详情
|
listenerIDs: {
|
type: Array,
|
default: () => {
|
return ['crm-main-container']
|
}
|
},
|
// 不监听
|
noListenerIDs: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
noListenerClass: {
|
type: Array,
|
default: () => {
|
return ['el-table__body']
|
}
|
}
|
},
|
data () {
|
return {
|
loading: false, // 展示加载loading
|
crmType: 'customer',
|
detailData: {}, // read 详情
|
headDetails: [
|
{ title: '客户状态', value: '' },
|
{ title: '负责人', value: '' },
|
{ title: '更新时间', value: '' }
|
],
|
tabCurrentName: 'basicinfo',
|
isCreate: false, // 编辑操作
|
contentStyleObj: {
|
height: '100px'
|
}
|
}
|
},
|
computed: {
|
tabName () {
|
if (this.tabCurrentName === 'followlog') {
|
return 'customer-follow'
|
} else if (this.tabCurrentName === 'basicinfo') {
|
return 'c-r-m-base-info'
|
} else if (this.tabCurrentName === 'contacts') {
|
return 'relative-contacts'
|
} else if (this.tabCurrentName === 'team') {
|
return 'relative-team'
|
} else if (this.tabCurrentName === 'business') {
|
return 'relative-business'
|
} else if (this.tabCurrentName === 'contract') {
|
return 'relative-contract'
|
} else if (this.tabCurrentName === 'returnedmoney') {
|
return 'relative-return-money'
|
} else if (this.tabCurrentName === 'file') {
|
return 'relative-files'
|
} else if (this.tabCurrentName === 'operationlog') {
|
return 'relative-handle'
|
}
|
return ''
|
},
|
tabnames () {
|
var tempsTabs = []
|
// if (this.crm.customer && this.crm.customer.read) {
|
tempsTabs.push({ label: '基本信息', name: 'basicinfo' })
|
// }
|
tempsTabs.push({ label: '联系人', name: 'contacts' })
|
tempsTabs.push({ label: '商机', name: 'business' })
|
|
tempsTabs.push({ label: '跟进记录', name: 'followlog' })
|
|
// if (this.crm.contacts && this.crm.contacts.index) {
|
// }
|
// tempsTabs.push({ label: '相关团队', name: 'team' })
|
// if (this.crm.business && this.crm.business.index) {
|
// }
|
// if (this.crm.contract && this.crm.contract.index) {
|
tempsTabs.push({ label: '合同', name: 'contract' })
|
// }
|
// if (this.crm.receivables && this.crm.receivables.index) {
|
tempsTabs.push({ label: '回款信息', name: 'returnedmoney' })
|
// }
|
// tempsTabs.push({ label: '附件', name: 'file' })
|
tempsTabs.push({ label: '操作记录', name: 'operationlog' })
|
return tempsTabs
|
},
|
/**
|
* isSeas 是从公海模块传入的 配合详情is_pool字段确定
|
*/
|
isSeasDetail () {
|
// if (this.detailData && this.detailData.hasOwnProperty('isPool')) {
|
// return this.detailData.isPool === 1
|
// }
|
// return this.isSeas
|
return false
|
}
|
},
|
created () {
|
this.getHight()
|
window.addEventListener('resize', this.getHight)
|
},
|
mounted () {},
|
destroyed () {
|
window.removeEventListener('resize', this.getHight)
|
},
|
methods: {
|
getHight () {
|
// this.contentStyleObj.height = (window.innerHeight - 600) + 'px'
|
},
|
getDetial () {
|
this.loading = true
|
console.log(this.id)
|
GetCustomerDetail({
|
Id: this.id
|
})
|
.then(res => {
|
console.log(res.data)
|
this.loading = false
|
this.detailData = res.data.Result
|
// 负责人
|
// this.headDetails[0].value = res.data.Result.客户级别
|
switch (res.data.Result.CustomerStatus) {
|
case 0:
|
this.headDetails[0].value = '暂无'
|
break
|
case 1:
|
this.headDetails[0].value = '潜在客户'
|
break
|
case 2:
|
this.headDetails[0].value = '高意向潜在客户'
|
break
|
case 3:
|
this.headDetails[0].value = '试用客户'
|
break
|
case 4:
|
this.headDetails[0].value = '成交客户'
|
break
|
case 5:
|
this.headDetails[0].value = '失败关闭'
|
break
|
case 6:
|
this.headDetails[0].value = '销售线索'
|
break
|
case 7:
|
this.headDetails[0].value = '在谈客户'
|
break
|
case 8:
|
this.headDetails[0].value = '在谈休眠客户'
|
break
|
}
|
this.headDetails[1].value = res.data.Result.SaleName || '暂无'
|
this.headDetails[2].value = res.data.Result.NextFollowTime
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
},
|
//* * 点击关闭按钮隐藏视图 */
|
hideView () {
|
this.$emit('hide-view')
|
},
|
editSaveSuccess () {
|
this.$emit('handle', { type: 'save-success' })
|
this.getDetial()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../styles/crmdetail.scss';
|
</style>
|
