<template>
|
<div class="fl-c">
|
<!--<flexbox class="fl-h">
|
<div
|
v-photo="{img: item.userImg, realname: item.realname}"
|
v-lazy:background-image="$options.filters.filterUserLazyImg(item.userImg)"
|
class="div-photo fl-h-img"/>
|
<div class="fl-h-b">
|
<div class="fl-h-name">{{ item.Title }}</div>
|
<div class="fl-h-time">{{ item.FollowTime }}</div>
|
</div>
|
<flexbox class="fl-h-mark">
|
<img
|
class="fl-h-mark-img"
|
src="@/assets/img/person_dot.png" v-if=
|
"crmType === 'customer'">
|
<img
|
class="fl-h-mark-img"
|
src="@/assets/img/follow_record.png" v-if=
|
"crmType === 'contacts'">
|
<img
|
class="fl-h-mark-img"
|
src="@/assets/img/business_dot.png" v-if=
|
"crmType === 'business'">
|
<div class="fl-h-mark-name">跟进记录</div>
|
</flexbox>
|
<el-dropdown
|
trigger="click"
|
@command="handleCommand">
|
<i
|
style="color:#CDCDCD;margin-left: 8px;"
|
class="el-icon-arrow-down el-icon-more"/>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item :command="beforeHandleCommand(item.Id,'edit')">编辑</el-dropdown-item>
|
<el-dropdown-item :command="beforeHandleCommand(item.Id,'delete')">删除</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</flexbox>
|
<div class="fl-b">
|
<div class="fl-b-content">{{ item.Content }}</div>
|
<flexbox
|
v-if="item.img && item.img.length > 0"
|
class="fl-b-images"
|
wrap="wrap">
|
<div
|
v-lazy:background-image="file.filePath"
|
v-for="(file, index) in item.img"
|
:key="file.filePath"
|
class="fl-b-img-item"
|
@click="previewImg(item.img, index)"/>
|
</flexbox>
|
<div
|
v-if="item.file && item.file.length > 0"
|
class="fl-b-files">
|
<flexbox
|
v-for="(file, index) in item.file"
|
:key="index"
|
class="cell">
|
<img
|
class="cell-head"
|
src="@/assets/img/relevance_file.png" >
|
<div class="cell-body">{{ file.name }}<span style="color: #ccc;">（{{ file.size }}）</span></div>
|
<el-button
|
type="primary"
|
icon="el-icon-download"
|
@click="downloadFile(file)">下载</el-button>
|
</flexbox>
|
</div>
|
<div
|
v-if="item.FollowWay || item.FollowTime || item.CompletedTime"
|
class="follow">
|
<span
|
v-if="item.FollowWay"
|
class="follow-info">跟进方式：{{ item.FollowWay | typeFollowWay }}</span>
|
<span
|
v-if="item.FollowTime"
|
class="follow-info">下次跟进时间：{{ item.FollowTime }}</span>
|
<span
|
v-if="item.CompletedTime"
|
class="follow-info">跟进完成时间：{{ item.CompletedTime }}</span>
|
</div>
|
<div
|
v-if="item.contactsList && item.contactsList.length > 0"
|
class="fl-b-other">
|
<div class="fl-b-other-name">关联联系人</div>
|
<div>
|
<flexbox
|
v-for="(item, index) in item.contactsList"
|
:key="index"
|
class="cell"
|
@click.native="checkRelationDetail('contacts', item.contactsId)">
|
<i
|
:style="{'opacity': index === 0 ? 1 : 0}"
|
class="wukong wukong-contacts cell-head crm-type"/>
|
<div
|
class="cell-body"
|
style="color: #6394E5;cursor: pointer;">{{ item.name }}</div>
|
</flexbox>
|
</div>
|
</div>
|
<div
|
v-if="item.businessList && item.businessList.length > 0"
|
class="fl-b-other">
|
<div class="fl-b-other-name">关联商机</div>
|
<div>
|
<flexbox
|
v-for="(item, index) in item.businessList"
|
:key="index"
|
class="cell"
|
@click.native="checkRelationDetail('business', item.businessId)">
|
<i
|
:style="{'opacity': index === 0 ? 1 : 0}"
|
class="wukong wukong-business cell-head crm-type"/>
|
<div
|
class="cell-body"
|
style="color: #6394E5;cursor: pointer;">{{ item.businessName }}</div>
|
</flexbox>
|
</div>
|
</div>
|
<slot/>
|
</div>-->
|
|
<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-for="(item, index) in fieldList"
|
:key="index"
|
:prop="item.prop"
|
:label="item.label"
|
:formatter="fieldFormatter"
|
show-overflow-tooltip/>
|
</el-table>
|
<div class="p-contianer" v-show='item.length>0'>
|
<el-pagination
|
:current-page="currentPage"
|
:page-sizes="pageSizes"
|
:page-size.sync="pageSize"
|
:total="item.length"
|
class="p-bar"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"/>
|
</div>
|
<!--跟进 -->
|
<el-dialog
|
v-loading="followLoading"
|
v-if="isFollowDialog"
|
title="编辑跟进记录"
|
:visible.sync="isFollowDialog"
|
:close-on-click-modal="false"
|
:modal-append-to-body="true"
|
:append-to-body="true"
|
:before-close="followHandleClose"
|
width="60%">
|
<mix-add
|
ref="mixadd"
|
:crm-type="crmType"
|
:id="id"
|
:isEdit='true'
|
:show-relative-business="true"
|
:show-relative-contacts="true"
|
@mixadd-info="submitInfo"/>
|
<span
|
slot="footer"
|
class="dialog-footer">
|
<el-button
|
type="primary"
|
@click="followDialogSubmit">保 存</el-button>
|
<el-button @click="followHandleClose">取 消</el-button>
|
</span>
|
</el-dialog>
|
|
<c-r-m-full-screen-detail
|
:visible.sync="showFullDetail"
|
:crm-type="relationCrmType"
|
:id="relationID"/>
|
</div>
|
</template>
|
|
<script>
|
import MixAdd from '../../../components/MixAdd'
|
import { downloadFile } from '@/utils'
|
// import { crmRecordDelete } from '@/api/clients/common'
|
|
export default {
|
/** 客户管理 的 客户详情 的 跟进记录cell */
|
name: 'FollowRecordCell',
|
components: {
|
MixAdd,
|
CRMFullScreenDetail: () =>
|
import('@/views/clients/components/CRMFullScreenDetail.vue')
|
},
|
filters: {
|
/** 根据type 找到组件 */
|
typeFollowWay (formType) {
|
switch (formType) {
|
case 0:
|
return '暂无'
|
case 1:
|
return '电话'
|
case 2:
|
return '在线沟通'
|
case 3:
|
return '邮件或短信'
|
case 4:
|
return '上门拜访'
|
}
|
}
|
},
|
props: {
|
item: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
},
|
index: [String, Number]
|
},
|
data () {
|
return {
|
showFullDetail: false, // 查看相关客户管理详情
|
relationID: '', // 相关ID参数
|
relationCrmType: '', // 相关类型
|
isFollowDialog: false,
|
followLoading: false,
|
id: '',
|
list: [],
|
fieldList: [],
|
tableHeight: '400px',
|
total: 0,
|
currentPage: 1,
|
pageSize: 10,
|
pageSizes: [10, 30, 60, 100]
|
}
|
},
|
computed: {
|
},
|
mounted () {
|
this.fieldList.push(
|
{ prop: 'SalesChanceName', label: '商机名称', width: '300' },
|
{ prop: 'Contacter', label: '联系人', width: '400' },
|
{ prop: 'FollowTime', label: '下次跟进时间', width: '400' },
|
{ prop: 'CompletedTime', label: '跟进完成时间', width: '400' },
|
{ prop: 'FollowWay', label: '跟进方式', width: '400' },
|
{ prop: 'DocumentType', label: '销售负责人', width: '200' },
|
{ prop: 'Content', label: '跟进内容', width: '100' },
|
{ prop: 'Files', label: '附件', width: '200' }
|
)
|
|
console.log(this.item)
|
},
|
methods: {
|
/** 通过回调控制表头style */
|
headerRowStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
/** 通过回调控制style */
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
// 当某一行被点击时会触发该事件
|
handleRowClick (row, column, event) {},
|
/** 格式化字段 */
|
fieldFormatter (row, column) {
|
// 如果需要格式化
|
if (column.property === 'FileType') {
|
return this.getStatusName(row.FileType)
|
}
|
return row[column.property] || '--'
|
},
|
handleSizeChange (newSize) {
|
this.$emit('on-handle', {size: newSize})
|
// this.queryInfo.pagesize = newSize
|
},
|
handleCurrentChange (newPage) {
|
this.$emit('on-handle', {page: newPage})
|
// this.queryInfo.pagenum = newPage
|
},
|
previewImg (list, index) {
|
this.$bus.emit('preview-image-bus', {
|
index: index,
|
data: list.map(function (item, index, array) {
|
item.url = item.filePath
|
return item
|
})
|
})
|
},
|
downloadFile (file) {
|
downloadFile({ path: file.filePath, name: file.name })
|
},
|
/**
|
* 删除跟进记录
|
*/
|
beforeHandleCommand (id, command) { // index我这里是遍历的角标，即你需要传递的额外参数
|
return {
|
'id': id,
|
'command': command
|
}
|
},
|
|
handleCommand (command) {
|
console.log(command)
|
if (command.command === 'delete') {
|
this.$confirm('确定删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
// crmRecordDelete({
|
// recordId: this.item.recordId
|
// })
|
// .then(res => {
|
// this.$emit('on-handle', {
|
// type: command,
|
// data: { item: this.item, index: this.index }
|
// })
|
// this.$message.success('操作成功')
|
// })
|
// .catch(() => {})
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消操作'
|
})
|
})
|
} else if (command.command === 'edit') {
|
this.id = command.id
|
this.isFollowDialog = true
|
}
|
},
|
followDialogSubmit () {
|
this.isFollowDialog = false
|
this.$refs.mixadd.resetInfo()
|
},
|
followHandleClose () {
|
this.isFollowDialog = false
|
this.$refs.mixadd.resetInfo()
|
},
|
/** 快捷添加框内 返回的数据用于上传 */
|
submitInfo (data) {
|
console.log(data)
|
if (data.isEvent && !data.nextTime) {
|
this.$message.error('请选择下次联系时间')
|
return
|
} else if (!data.content) {
|
this.$message.error('请输入跟进内容')
|
return
|
}
|
|
var params = {}
|
params.SourceId = this.id
|
params.Title = data.title
|
params.Content = data.content
|
params.FollowType = data.followTypeId
|
params.FollowWay = data.wayTypeId
|
// var businessIds = data.business.map(function (element, index, array) {
|
// return element.businessId
|
// })
|
// var contactsIds = data.contacts.map(function (element, index, array) {
|
// return element.contactsId
|
// })
|
|
// params.batchId = data.batchId
|
// params.businessIds = businessIds.join(',')
|
// params.contactsIds = contactsIds.join(',')
|
|
params.IsCompleted = data.isEvent
|
params.FollowTime = data.nextTime || ''
|
|
this.sendLoading = true
|
if (data.isEvent) {
|
// MakeFollowRecordCompleted({'Id': this.id}).then(res => {
|
// this.$message.success('完成跟进')
|
// })
|
}
|
// AddFollowRecord(params)
|
// .then(res => {
|
this.sendLoading = false
|
// this.$message.success('发布成功')
|
// // 重置页面
|
this.$refs.mixadd.resetInfo()
|
// // this.isEvent = false
|
// // this.nextTime = ''
|
// // 刷新数据
|
// this.$bus.emit('follow-log-refresh', { type: 'record-log' })
|
// })
|
// .catch(() => {
|
// this.sendLoading = false
|
// })
|
},
|
/**
|
* 查看相关客户管理详情
|
*/
|
checkRelationDetail (type, id) {
|
// this.relationID = id
|
// this.relationCrmType = type
|
// this.showFullDetail = true
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../styles/followcell.scss';
|
@import '../../../styles/relativecrm.scss';
|
@import '../../../styles/table.scss';
|
.follow {
|
.follow-info {
|
padding: 5px 10px;
|
background-color: #f5f7fa;
|
color: #999;
|
height: 40px;
|
line-height: 40px;
|
border-radius: 28px;
|
font-size: 12px;
|
margin-right: 10px;
|
}
|
}
|
|
.crm-type {
|
color: rgb(99, 148, 229);
|
font-size: 14px;
|
}
|
</style>
|
