<template>
|
<div class="main" v-if="visible">
|
<div class="bgColor" @click.self="hiddenView"></div>
|
<div class="content">
|
<component
|
v-if="id&&visible"
|
:is="tabName"
|
:crm-type="crmType"
|
:id="id"
|
:isFollow="isFollow"
|
:listener-ids="listenerIDs"
|
:no-listener-ids="noListenerIDs"
|
class="d-view"
|
@handle="detailHandle"
|
@hide-view="hiddenView"/>
|
</div>
|
</div>
|
</template>
|
|
<script type="text/javascript">
|
import { getMaxIndex } from '@/utils/index'
|
import ClueDetail from '../clue/ClueDetail'
|
import CustomerDetail from '../customer/CustomerDetail'
|
import ContactsDetail from '../contacts/ContactsDetail'
|
import BusinessDetail from '../business/BusinessDetail'
|
import BusinessCustomerDetail from '../businessCustomer/BusinessCustomerDetail'
|
import BusinessChancesDetail from '../businessChances/BusinessChancesDetail'
|
// import ContractDetail from '../contract/ContractDetail'
|
// import ProductDetail from '../product/ProductDetail'
|
// import MoneyDetail from '../money/MoneyDetail'
|
|
export default {
|
name: 'CRMAllDetail', // 详情
|
components: {
|
ClueDetail,
|
CustomerDetail,
|
ContactsDetail,
|
BusinessDetail,
|
BusinessCustomerDetail,
|
BusinessChancesDetail
|
// ContractDetail,
|
// ProductDetail,
|
// MoneyDetail
|
},
|
props: {
|
/** 模块ID */
|
id: [String, Number],
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
},
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
// 监听的dom 进行隐藏详情
|
listenerIDs: {
|
type: Array,
|
default: () => {
|
return ['crm-main-container']
|
}
|
},
|
isFollow: {
|
type: Boolean,
|
default: false
|
},
|
// 不监听
|
noListenerIDs: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
noListenerClass: {
|
type: Array,
|
default: () => {
|
return ['el-table__body']
|
}
|
}
|
},
|
data () {
|
return {
|
// tabName: '' // 组件名
|
}
|
},
|
computed: {
|
tabName: function () {
|
let name = ''
|
if (this.crmType === 'leads') {
|
name = 'clue-detail'
|
} else if (this.crmType === 'customer') {
|
name = 'customer-detail'
|
} else if (this.crmType === 'contacts') {
|
name = 'contacts-detail'
|
} else if (this.crmType === 'business') {
|
name = 'business-detail'
|
} else if (this.crmType === 'contract') {
|
name = 'contract-detail'
|
} else if (this.crmType === 'product') {
|
name = 'product-detail'
|
} else if (this.crmType === 'receivables') {
|
name = 'money-detail'
|
} else if (this.crmType === 'businessCustomer') {
|
name = 'business-customer-detail'
|
} else if (this.crmType === 'businessChances') {
|
name = 'business-chances-detail'
|
}
|
return name
|
}
|
},
|
watch: {
|
},
|
mounted () {
|
console.log(this.crmType, this.visible, this.id)
|
if (this.visible) {
|
document.body.appendChild(this.$el)
|
this.$el.style.zIndex = getMaxIndex()
|
}
|
},
|
destroyed () {
|
// remove DOM node after destroy
|
if (this.$el && this.$el.parentNode) {
|
this.$el.parentNode.removeChild(this.$el)
|
}
|
},
|
methods: {
|
hiddenView () {
|
this.$emit('update:visible', false)
|
},
|
|
/**
|
* 详情操作
|
*/
|
detailHandle (data) {
|
this.$emit('handle', data)
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.full-container {
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
overflow: auto;
|
margin: 0;
|
background-color: rgba(0, 0, 0, 0.3);
|
}
|
|
.d-view {
|
position: fixed;
|
width: 1200px;
|
top: 0px;
|
// width: 100%;
|
// top: 500px;
|
bottom: 0px;
|
right: 0px;
|
// background: #FFFFFF;
|
box-shadow: 0px -4px 12px 0px rgba(61, 121, 204, 0.2);
|
border-radius: 24px 0px 0px 0px;
|
}
|
.bgColor {
|
width: 100%;
|
height: 100%;
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
overflow: hidden;
|
outline: 0;
|
filter: alpha(opacity=60);
|
background-color: rgba(51, 51, 51, 0.2);
|
z-index: 100;
|
}
|
</style>
|
