126 lines
2.6 KiB
Vue
126 lines
2.6 KiB
Vue
<template>
|
||
<div class="related-business-list">
|
||
<div
|
||
v-for="(item, index) in options"
|
||
v-if="data[item.type].length > 0"
|
||
:key="index"
|
||
class="list-item">
|
||
<div class="left">
|
||
<span :class="item.icon" class="wk icon" />
|
||
<span>相关{{ item.label }}：</span>
|
||
</div>
|
||
<div class="content">
|
||
<div
|
||
v-for="(child, childIndex) in data[item.type]"
|
||
:key="childIndex"
|
||
class="content-item"
|
||
@click="handlerToDetail(item.type, childIndex)">
|
||
{{ child[item.key] || child.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--<c-r-m-all-detail
|
||
:visible.sync="showRelatedDetail"
|
||
:crm-type="relatedCRMType"
|
||
:listener-ids="['workbench-main-container']"
|
||
:no-listener-ids="['journal-list-box']"
|
||
:id="relatedID"
|
||
class="d-view"/>-->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 相关信息列表
|
||
* @props data {Object}
|
||
*/
|
||
import CRMAllDetail from '@/views/crm/components/CRMAllDetail'
|
||
|
||
export default {
|
||
name: 'RelatedBusinessList',
|
||
components: {
|
||
CRMAllDetail
|
||
},
|
||
props: {
|
||
data: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
options: {
|
||
customer: {
|
||
label: '客户',
|
||
type: 'customer',
|
||
key: 'customerName',
|
||
icon: 'wk-customer'
|
||
},
|
||
contacts: {
|
||
label: '联系人',
|
||
type: 'contacts',
|
||
key: 'contactsName',
|
||
icon: 'wk-contacts'
|
||
},
|
||
business: {
|
||
label: '商机',
|
||
type: 'business',
|
||
key: 'businessName',
|
||
icon: 'wk-business'
|
||
},
|
||
contract: {
|
||
label: '合同',
|
||
type: 'contract',
|
||
key: 'name',
|
||
icon: 'wk-contract'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 详情
|
||
* @param type
|
||
* @param index
|
||
*/
|
||
handlerToDetail(type, index) {
|
||
this.$emit('select', type, this.data[type][index])
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.related-business-list {
|
||
width: 100%;
|
||
.list-item {
|
||
font-size: 12px;
|
||
padding: 3px 0;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
.left {
|
||
color: #666;
|
||
.icon {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.content {
|
||
.content-item {
|
||
line-height: 1.5;
|
||
color: $xr-color-primary;
|
||
margin-bottom: 3px;
|
||
cursor: pointer;
|
||
&:hover {
|
||
text-decoration: underline;
|
||
}
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|