<template>
|
<div
|
v-empty="nopermission"
|
class="rc-cont"
|
xs-empty-icon="nopermission"
|
xs-empty-text="暂无权限">
|
<flexbox
|
v-if="!isSeas"
|
class="rc-head"
|
direction="row-reverse">
|
<!--<el-button
|
class="rc-head-item"
|
type="primary"
|
@click.native="createClick">新建联系人</el-button>-->
|
<el-button
|
v-if="canRelation"
|
class="rc-head-item"
|
type="primary"
|
@click.native="unRelevanceHandleClick">解除关联</el-button>
|
<el-popover
|
v-if="canRelation"
|
v-model="showRelativeView"
|
placement="bottom"
|
width="700"
|
popper-class="no-padding-popover"
|
trigger="click"
|
style="margin-right: 20px;">
|
<crm-relative
|
ref="crmrelative"
|
v-model="showRelativeView"
|
:show="showRelativeView"
|
:radio="false"
|
:action="{ type: 'condition', data: { moduleType: 'customer', customerId: customerId } }"
|
:selected-data="{ 'contacts': list }"
|
crm-type="contacts"
|
@close="showRelativeView = false"
|
@changeCheckout="checkRelativeInfos"/>
|
<el-button
|
slot="reference"
|
class="rc-head-item"
|
style="margin-right: 0;"
|
type="primary"
|
@click.native="showRelativeView = true">关联</el-button>
|
</el-popover>
|
|
</flexbox>
|
<el-table
|
:data="list"
|
:height="tableHeight"
|
:header-cell-style="headerRowStyle"
|
:cell-style="cellStyle"
|
style="width: 100%;border: 1px solid #E6E6E6;"
|
@row-click="handleRowClick"
|
@selection-change="selectionList = $event">
|
<el-table-column
|
v-if="canRelation && fieldList.length > 0"
|
show-overflow-tooltip
|
type="selection"
|
align="center"
|
width="55"/>
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
:prop="item.prop"
|
:formatter="fieldFormatter"
|
:label="item.label"
|
show-overflow-tooltip>
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">{{ scope.column.label }}</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="p-contianer" v-show='total>0'>
|
<el-pagination
|
:current-page="currentPage"
|
:page-sizes="pageSizes"
|
:page-size.sync="pageSize"
|
:total="total"
|
class="p-bar"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"/>
|
</div>
|
<c-r-m-full-screen-detail
|
:visible.sync="showFullDetail"
|
:id="contactsId"
|
crm-type="contacts"/>
|
<c-r-m-create-view
|
v-if="isCreate"
|
:action="createActionInfo"
|
crm-type="contacts"
|
@save-success="createSaveSuccess"
|
@hiden-view="isCreate=false"/>
|
</div>
|
</template>
|
|
<script type="text/javascript">
|
import loading from '../mixins/loading'
|
import CRMCreateView from './CRMCreateView'
|
import { GetCustomerContacterList } from '@/api/customermanagement/customerManage'
|
// import {
|
// crmBusinessQueryContactsAPI,
|
// crmBusinessRelateContactsAPI,
|
// crmBusinessUnrelateContactsAPI
|
// } from '@/api/clients/business'
|
import CrmRelative from '@/components/CreateCom/CrmRelative'
|
|
export default {
|
name: 'RelativeContacts', // 相关联系人列表 可能再很多地方展示 放到客户管理目录下
|
components: {
|
CRMFullScreenDetail: () => import('./CRMFullScreenDetail.vue'),
|
CRMCreateView,
|
CrmRelative
|
},
|
mixins: [loading],
|
props: {
|
/** 模块ID */
|
id: [String, Number],
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
},
|
/** 是公海 默认是客户 */
|
isSeas: {
|
type: Boolean,
|
default: false
|
},
|
/** 联系人人下 新建商机 需要联系人里的客户信息 合同下需要客户和商机信息 */
|
detail: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
data () {
|
return {
|
nopermission: false,
|
list: [],
|
fieldList: [],
|
tableHeight: '400px',
|
showFullDetail: false,
|
isCreate: false, // 控制新建
|
contactsId: '', // 查看全屏联系人详情的 ID
|
// 创建的相关信息
|
createActionInfo: { type: 'relative', crmType: this.crmType, data: {} },
|
/**
|
* 关联的逻辑
|
*/
|
showRelativeView: false, // 控制关联信息视图
|
selectionList: [], // 取消关联勾选的数据
|
total: 0,
|
currentPage: 1,
|
pageSize: 10,
|
pageSizes: [10, 30, 60, 100]
|
}
|
},
|
computed: {
|
// 联系人下客户id获取关联商机
|
customerId () {
|
return this.detail.customerId
|
},
|
// 是否能关联
|
canRelation () {
|
return this.crmType === 'business'
|
}
|
},
|
watch: {
|
id: function (val) {
|
this.list = []
|
this.getDetail()
|
}
|
},
|
mounted () {
|
this.getDetail()
|
},
|
activated: function () {},
|
deactivated: function () {},
|
methods: {
|
handleSizeChange (newSize) {
|
this.pageSize = newSize
|
this.getDetail()
|
},
|
handleCurrentChange (newPage) {
|
this.currentPage = newPage
|
this.getDetail()
|
},
|
/** 格式化字段 */
|
fieldFormatter (row, column) {
|
if (column.property === 'Sex') {
|
return { 1: '男', 2: '女' }[row.Sex]
|
} else if (column.property === 'IsCustomerDefault') {
|
return { true: '是', false: '否' }[row.IsCustomerDefault]
|
} else if (column.property === 'CompanyType') {
|
return {0: '暂无', 1: '国企', 2: '外企', 3: '民营', 4: '其他'}[row.CompanyType]
|
}
|
// 如果需要格式化
|
return row[column.property] || '--'
|
},
|
/**
|
* 关联的数据
|
*/
|
checkRelativeInfos (data) {
|
if (data.data.length > 0) {
|
const params = { businessId: this.id }
|
params.contactsIds = data.data
|
.map(item => {
|
return item.contactsId
|
})
|
.join(',')
|
// crmBusinessRelateContactsAPI(params)
|
// .then(res => {
|
// this.getDetail()
|
// this.$message.success('操作成功')
|
// })
|
// .catch(() => {})
|
}
|
},
|
|
/**
|
* 取消关联
|
*/
|
unRelevanceHandleClick () {
|
if (this.selectionList.length === 0) {
|
this.$message.error('请先勾选数据')
|
} else {
|
this.$confirm('确认取消关联?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
const params = { businessId: this.id }
|
params.contactsIds = this.selectionList
|
.map(item => {
|
return item.contactsId
|
})
|
.join(',')
|
// crmBusinessUnrelateContactsAPI(params)
|
// .then(res => {
|
// this.getDetail()
|
// this.$message.success('操作成功')
|
// })
|
// .catch(() => {})
|
})
|
.catch(() => {
|
this.$message.info('已取消操作')
|
})
|
}
|
},
|
|
/**
|
* 表头数据
|
*/
|
getFieldList () {
|
this.fieldList.push(
|
{ prop: 'RealName', label: '联系人姓名', width: '100' },
|
{ prop: 'DepartmentName', label: '所属部门', width: '50' },
|
{ prop: 'JobPosition', label: '职位', width: '80' },
|
{ prop: 'MobilePhone', label: '联系电话', width: '120' },
|
{ prop: 'OwerUserName', label: '销售负责人', width: '80' },
|
{ prop: 'Email', label: '联系人邮箱', width: '80' }
|
|
// { prop: 'ContacterNumber', label: '客户联系人编码', width: '100' },
|
// { prop: 'Sex', label: '性别', width: '150' },
|
// { prop: 'BirthDay', label: '生日', width: '100' },
|
// { prop: 'IsCustomerDefault', label: '是否为默认联系客户', width: '100' },
|
// { prop: 'QQNumber', label: 'QQ', width: '150' },
|
// { prop: 'WeixinNumber', label: '微信号', width: '150' },
|
// { prop: 'CreateTime', label: '创建时间', width: '150' },
|
// { prop: 'OwerUserName', label: '负责人', width: '150' },
|
// { prop: 'DocumentFiles', label: '关联附件', width: '150' }
|
)
|
},
|
|
/**
|
* 获取数据
|
*/
|
getDetail () {
|
this.loading = true
|
const request = {
|
customer: GetCustomerContacterList,
|
businessCustomer: GetCustomerContacterList
|
// business: crmBusinessQueryContactsAPI
|
}[this.crmType]
|
const params = {}
|
params['Id'] = this.id
|
params['PageSize'] = this.pageSize
|
params['PageIndex'] = this.currentPage
|
request(params)
|
.then(res => {
|
if (this.fieldList.length === 0) {
|
this.getFieldList()
|
}
|
this.nopermission = false
|
this.loading = false
|
this.list = res.data.Result.List || []
|
this.total = res.data.Result.Count || 0
|
console.log(this.list)
|
})
|
.catch(data => {
|
if (data.code === 102) {
|
this.nopermission = true
|
}
|
this.loading = false
|
})
|
},
|
// 当某一行被点击时会触发该事件
|
handleRowClick (row, column, event) {
|
// this.contactsId = row.contactsId
|
// this.showFullDetail = true
|
},
|
/** 通过回调控制表头style */
|
headerRowStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
/** 通过回调控制style */
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
/** 新建 */
|
createClick () {
|
/** 客户 下新建联系人 */
|
if (this.crmType === 'customer') {
|
this.createActionInfo.data['customer'] = this.detail
|
} else if (this.crmType === 'business') {
|
this.createActionInfo.data['customer'] = this.detail
|
this.createActionInfo.relativeData = {
|
businessId: this.detail.businessId
|
}
|
}
|
this.isCreate = true
|
},
|
createSaveSuccess () {
|
if (this.canRelation) {
|
this.$refs.crmrelative.refreshList()
|
} else {
|
this.getDetail()
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import '../styles/relativecrm.scss';
|
</style>
|
