<template>
|
<div
|
:style="{'margin-left': marginLeft}"
|
class="related-business">
|
<!-- 新建- 关联业务 -->
|
<el-popover
|
v-if="!isTask && alterable"
|
v-model="showPopover"
|
placement="bottom"
|
width="800"
|
popper-class="no-padding-popover"
|
trigger="click">
|
<crm-relative
|
v-if="showRelative"
|
ref="crmrelative"
|
:show="showPopover"
|
:radio="false"
|
:selected-data="relatedListData"
|
:show-types="showTypes"
|
@close="crmrelativeClose"
|
@changeCheckout="checkInfos"/>
|
<p
|
v-if="showCRMPermission"
|
slot="reference"
|
class="add-file"
|
@click="showRelative = true">
|
<img
|
src="@/assets/img/relevance_business.png"
|
alt="">
|
关联业务
|
</p>
|
</el-popover>
|
<p
|
v-if="!alterable"
|
:style="{color: alterableColor}"
|
class="alterable-p">关联业务</p>
|
<div
|
v-for="(items, key) in relatedListData"
|
:key="key">
|
<related-business-cell
|
v-for="(item, itemIndex) in items"
|
:data="item"
|
:cell-index="itemIndex"
|
:type="key"
|
:key="itemIndex"
|
:show-foot="isTask"
|
@unbind="delRelevance"
|
@detail="checkRelatedDetail(key, item)"/>
|
</div>
|
<!-- 任务页面显示格式 -->
|
<el-popover
|
v-if="isTask"
|
v-model="showPopover"
|
placement="bottom"
|
width="800"
|
popper-class="no-padding-popover"
|
trigger="click">
|
<crm-relative
|
v-if="showTaskRelative"
|
ref="crmrelative"
|
:radio="false"
|
:show="showPopover"
|
:selected-data="relatedListData"
|
:show-types="showTypes"
|
@close="crmrelativeClose"
|
@changeCheckout="checkInfos"/>
|
<p
|
v-if="showCRMPermission"
|
slot="reference"
|
class="add-file"
|
@click="showTaskRelative = true">
|
<img
|
src="@/assets/img/relevance_business.png"
|
alt="">
|
关联业务
|
</p>
|
</el-popover>
|
</div>
|
</template>
|
|
<script>
|
// 关联业务 - 弹出框
|
// import { editTaskRelation } from '@/api/oamanagement/task'
|
import CrmRelative from '@/components/CreateCom/CrmRelative'
|
import RelatedBusinessCell from '@/views/OAManagement/components/relatedBusinessCell'
|
import { objDeepCopy } from '@/utils'
|
import { mapGetters } from 'vuex'
|
|
export default {
|
components: {
|
CrmRelative,
|
RelatedBusinessCell
|
},
|
props: {
|
marginLeft: {
|
type: String,
|
default: '20px'
|
},
|
// 编辑时传递所有关联数据 关联联系人-contacts 关联客户-customer 商机-business 合同-contract
|
allData: {
|
type: Object,
|
default: () => {
|
return {
|
contacts: [],
|
customer: [],
|
business: [],
|
contract: []
|
}
|
}
|
},
|
// 是否是任务页面
|
isTask: {
|
type: Boolean,
|
default: false
|
},
|
taskID: Number,
|
alterable: {
|
type: Boolean,
|
default: true
|
},
|
alterableColor: {
|
type: String,
|
default: '#999'
|
}
|
},
|
data () {
|
return {
|
showTypes: ['customer', 'contacts', 'business', 'contract'],
|
showPopover: false,
|
relevanceAll: {
|
customerIds: [],
|
contractIds: [],
|
contactsIds: [],
|
businessIds: []
|
},
|
// 关联业务信息
|
relatedListData: {},
|
showRelative: false,
|
// 展示任务相关
|
showTaskRelative: false
|
}
|
},
|
computed: {
|
...mapGetters(['crm']),
|
showCRMPermission () {
|
return this.crm
|
}
|
},
|
watch: {
|
allData: function () {
|
this.relatedListData = this.allData
|
}
|
},
|
mounted () {
|
// 编辑时勾选
|
this.relatedListData = this.allData
|
},
|
methods: {
|
crmrelativeClose () {
|
this.showPopover = false
|
},
|
checkInfos (val) {
|
this.showPopover = false
|
this.relatedListData = val.data
|
for (const key in val.data) {
|
const list = val.data[key]
|
this.relevanceAll[key + 'Ids'] = list.map(function (
|
item,
|
index,
|
array
|
) {
|
return item[key + 'Id']
|
})
|
}
|
this.$emit('checkInfos', this.relevanceAll)
|
},
|
// 任务页面取消关联
|
delRelevance (field, index, item) {
|
this.$confirm('确认取消关联?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
customClass: 'is-particulars'
|
})
|
.then(() => {
|
const params = { taskId: this.taskID }
|
const tempRelatedListData = objDeepCopy(this.relatedListData)
|
tempRelatedListData[field].splice(index, 1)
|
for (let index = 0; index < this.showTypes.length; index++) {
|
const typeItem = this.showTypes[index]
|
const typeArray = tempRelatedListData[typeItem] || []
|
params[typeItem + 'Ids'] = typeArray
|
.map(aItem => {
|
return aItem[typeItem + 'Id']
|
})
|
.join(',')
|
}
|
// editTaskRelation(params)
|
// .then(res => {
|
// this.relatedListData[field].splice(index, 1)
|
// this.relatedListData = objDeepCopy(this.relatedListData)
|
// this.$message.success('关联取消成功')
|
// })
|
// .catch(() => {})
|
})
|
.catch(() => {
|
this.$message.info('已取消操作')
|
})
|
},
|
checkRelatedDetail (field, val) {
|
val.key = val[field + 'Id']
|
this.$emit('checkRelatedDetail', field, val)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.related-business {
|
color: #777;
|
font-size: 12px;
|
margin: 10px 0;
|
.alterable-p {
|
padding-bottom: 10px;
|
font-size: 13px;
|
}
|
.add-file {
|
margin: 10px 0;
|
font-size: 13px;
|
color: #4D88FF;
|
cursor: pointer;
|
display: inline-block;
|
img {
|
vertical-align: middle;
|
width: 15px;
|
margin-right: 5px;
|
}
|
}
|
}
|
</style>
|
