<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
|
:detail="detailData"
|
:head-details="headDetails"
|
:id="id"
|
crm-type="contacts"
|
@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">
|
<!--<c-r-m-base-info
|
:ref="tabnames[0].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="contacts" />
|
<contacts-follow
|
:ref="tabnames[1].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="contacts" />
|
<relative-business
|
:ref="tabnames[2].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="contacts" />
|
<relative-files
|
:ref="tabnames[3].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="contacts" />
|
<relative-handle
|
:ref="tabnames[4].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="contacts" />-->
|
<keep-alive>
|
<component
|
:is="tabName"
|
:detail="detailData"
|
:id="id"
|
crm-type="contacts"/>
|
</keep-alive>
|
</div>
|
</flexbox>
|
<c-r-m-create-view
|
v-if="isCreate"
|
:action="{type: 'update', id: id, batchId: detailData.batchId}"
|
crm-type="contacts"
|
@save-success="editSaveSuccess"
|
@hiden-view="isCreate=false"/>
|
</slide-view>
|
</template>
|
|
<script>
|
import { GetContacterDetail } from '@/api/customermanagement/contacts'
|
|
import SlideView from '@/components/SlideView'
|
import CRMDetailHead from '../components/CRMDetailHead'
|
import ContactsFollow from './components/ContactsFollow' // 跟进记录
|
import CRMBaseInfo from '../components/CRMBaseInfo' // 联系人基本信息
|
|
import RelativeBusiness from '../components/RelativeBusiness' // 相关商机
|
import RelativeHandle from '../components/RelativeHandle' // 相关操作
|
import RelativeFiles from '../components/RelativeFiles' // 相关附件
|
import CRMCreateView from '../components/CRMCreateView' // 新建页面
|
|
import detail from '../mixins/detail'
|
|
export default {
|
/** 联系人管理 的 联系人详情 */
|
name: 'ContactsDetail',
|
components: {
|
SlideView,
|
CRMDetailHead,
|
ContactsFollow,
|
CRMBaseInfo,
|
RelativeBusiness,
|
RelativeHandle,
|
RelativeFiles,
|
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: 'contacts',
|
detailData: {}, // 详情的完整信息
|
headDetails: [
|
{ title: '联系人', value: '' },
|
{ title: '客户名称', value: '' },
|
{ title: '职务', value: '' },
|
{ title: '手机', value: '' },
|
{ title: '创建时间', value: '' }
|
],
|
tabCurrentName: 'basicinfo',
|
isCreate: false, // 编辑操作
|
contentStyleObj: {
|
height: '100px'
|
}
|
}
|
},
|
computed: {
|
tabName () {
|
if (this.tabCurrentName === 'followlog') {
|
return 'contacts-follow'
|
} else if (this.tabCurrentName === 'basicinfo') {
|
return 'c-r-m-base-info'
|
} else if (this.tabCurrentName === 'business') {
|
return 'relative-business'
|
} else if (this.tabCurrentName === 'file') {
|
return 'relative-files'
|
} else if (this.tabCurrentName === 'operationlog') {
|
return 'relative-handle'
|
}
|
return ''
|
},
|
tabnames () {
|
var tempsTabs = []
|
// if (this.crm.contacts && this.crm.contacts.read) {
|
tempsTabs.push({ label: '基本信息', name: 'basicinfo' })
|
// }
|
tempsTabs.push({ label: '跟进记录', name: 'followlog' })
|
// if (this.crm.business && this.crm.business.index) {
|
// tempsTabs.push({ label: '商机', name: 'business' })
|
// }
|
// tempsTabs.push({ label: '附件', name: 'file' })
|
tempsTabs.push({ label: '操作记录', name: 'operationlog' })
|
return tempsTabs
|
}
|
},
|
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
|
GetContacterDetail({
|
Id: this.id
|
})
|
.then(res => {
|
if (res.data.ErrorCode === 500) {
|
this.loading = false
|
this.$message.error(res.data.Message)
|
} else {
|
this.loading = false
|
this.detailData = res.data.Result
|
// 负责人
|
this.headDetails[0].value = res.data.Result.RealName
|
this.headDetails[1].value = res.data.Result.CoustomerName
|
this.headDetails[2].value = res.data.Result.JobPosition || '暂无'
|
this.headDetails[3].value = res.data.Result.MobilePhone || '暂无'
|
this.headDetails[4].value = res.data.Result.CreateTime || '暂无'
|
}
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
},
|
//* * 点击关闭按钮隐藏视图 */
|
hideView () {
|
this.$emit('hide-view')
|
},
|
//* * tab标签点击 */
|
handleClick (tab, event) {},
|
editSaveSuccess () {
|
this.$emit('handle', { type: 'save-success' })
|
this.getDetial()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../styles/crmdetail.scss';
|
</style>
|
