<template>
|
<div
|
v-empty="nopermission"
|
class="rc-cont"
|
xs-empty-icon="nopermission"
|
xs-empty-text="暂无权限">
|
|
<el-table
|
v-loading="loading"
|
id="crm-table"
|
:data="list"
|
class="n-table--border"
|
border
|
highlight-current-row
|
:height="tableHeight"
|
:header-cell-style="headerRowStyle"
|
:cell-style="cellStyle"
|
style="width: 100%; z-index: 0;border: 1px solid #E6E6E6;"
|
@row-click="handleRowClick">
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
:prop="item.prop"
|
:label="item.label"
|
:width="item.width"
|
:formatter="fieldFormatter"
|
show-overflow-tooltip>
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">
|
{{ scope.column.label }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="Files">
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">
|
附件
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<el-popover
|
:offset="250"
|
placement="right"
|
popper-class="no-padding-popover"
|
width="200"
|
trigger="click">
|
<div class="pop-container">
|
<flexbox class="pop-header">
|
<div class="pop-name">附件</div>
|
<!--<div class="detail"></div>-->
|
<img
|
class="pop-close"
|
src="@/assets/img/task_close.png"
|
@click="hidenRelationInput" >
|
</flexbox>
|
<flexbox class="pop-content">
|
<div style="height: 200px;">
|
<div class='el-scrollbar' style="height: 100%; width: 160px;">
|
<div class='el-select-dropdown__wrap el-scrollbar__wrap' style="margin-bottom: -7px; margin-right: -7px;">
|
<ul class="el-scrollbar__view el-select-dropdown__list">
|
<li class='el-select-dropdown__item'
|
:class="item.DocumentName === proValue?'selected':''"
|
v-for="(item, index) in scope.row.Files"
|
:key="index"
|
@click="handleFile(item, index)"
|
>{{item.DocumentName}}
|
<!--<a :disabled="item.DocumentName === 'srting'" :href="headUrl + item.DocumentFileName" :download="item.DocumentName">{{item.DocumentName}}</a>-->
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div
|
v-if="scope.row.Files&&scope.row.Files.length<1"
|
class="no-data-container">
|
<img
|
class="no-data"
|
src="@/assets/img/no_data.png" >
|
<div class="no-data-name">暂无数据</div>
|
</div>
|
</flexbox>
|
</div>
|
<div slot="reference">查看附件</div>
|
</el-popover>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="operation"
|
v-if="crmType!=='businessChances' && crmType!=='businessCustomer'">
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">操作</div>
|
</template>
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click='deleteLog(scope.row)'>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="p-contianer" v-show='total'>
|
<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>
|
<!--跟进 -->
|
<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>
|
|
</div>
|
</template>
|
|
<script>
|
import MixAdd from '../../../components/MixAdd'
|
import { GetBusinessFollowRecordList, DeleteFollowRecord } from '@/api/common'
|
import { ResouceUrl } from '@/utils/baseconfig'
|
import { downloadFile } from '@/utils'
|
// import { crmRecordDelete } from '@/api/clients/common'
|
|
export default {
|
/** 客户管理 的 客户详情 的 跟进记录cell */
|
name: 'FollowRecordTable',
|
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: {
|
/** 模块ID */
|
id: [String, Number],
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
}
|
},
|
data () {
|
return {
|
loading: false,
|
isFollowDialog: false,
|
followLoading: false,
|
nopermission: false,
|
list: [],
|
fieldList: [
|
// { prop: 'SalesChanceName', label: '商机名称', width: '180' },
|
{ prop: 'Contacter', label: '联系人' },
|
{ prop: 'FollowTime', label: '跟进时间' },
|
// { prop: 'CompletedTime', label: '跟进完成时间' },
|
{ prop: 'FollowWayString', label: '跟进方式' },
|
{ prop: 'CreateUserName', label: '跟进人' },
|
{ prop: 'Content', label: '跟进内容' }
|
],
|
tableHeight: '400px',
|
total: 0,
|
currentPage: 1,
|
pageSize: 10,
|
pageSizes: [10, 30, 60, 100],
|
proValue: ''
|
}
|
},
|
computed: {
|
},
|
watch: {
|
},
|
mounted () {
|
this.headUrl = ResouceUrl
|
this.$bus.on('follow-log-refresh', data => {
|
if (data.type === 'follow-record-table') {
|
this.getFieldList()
|
}
|
})
|
this.getFieldList()
|
},
|
methods: {
|
getFieldList () {
|
if (this.crmType === 'customer' || this.crmType === 'businessCustomer') {
|
this.fieldList = [
|
{ prop: 'SalesChanceName', label: '商机名称' },
|
{ prop: 'Contacter', label: '联系人' },
|
// { prop: 'FollowTime', label: '本次跟进时间' },
|
{ prop: 'CompletedTime', label: '跟进完成时间' },
|
{ prop: 'FollowWayString', label: '跟进方式' },
|
{ prop: 'CreateUserName', label: '跟进人' },
|
{ prop: 'Content', label: '跟进内容' }
|
]
|
} else if (this.crmType === 'contacts') {
|
this.fieldList = [
|
{ prop: 'SalesChanceName', label: '商机名称', width: '180' },
|
// { prop: 'Contacter', label: '联系人' },
|
// { prop: 'FollowTime', label: '本次跟进时间' },
|
{ prop: 'CompletedTime', label: '跟进完成时间' },
|
{ prop: 'FollowWayString', label: '跟进方式' },
|
{ prop: 'CreateUserName', label: '跟进人' },
|
{ prop: 'Content', label: '跟进内容' }
|
]
|
}
|
this.getList()
|
},
|
getList () {
|
this.loading = true
|
let request = {
|
customer: GetBusinessFollowRecordList,
|
businessCustomer: GetBusinessFollowRecordList,
|
// leads: crmLeadsRecordIndex,
|
contacts: GetBusinessFollowRecordList,
|
business: GetBusinessFollowRecordList,
|
businessChances: GetBusinessFollowRecordList
|
// contract: crmContractRecordIndex
|
}[this.crmType]
|
|
const params = {
|
PageIndex: this.currentPage,
|
PageSize: this.pageSize
|
}
|
params['BusinessOperationType'] = {
|
customer: 1,
|
businessCustomer: 1,
|
contacts: 2,
|
business: 3,
|
businessChances: 3
|
}[this.crmType]
|
params['SourceId'] = this.id
|
// if (request === 'GetBusinessFollowRecordList') {
|
// } else {
|
// params['Id'] = this.id
|
// }
|
request(params)
|
.then(res => {
|
this.loading = false
|
if (res.data.ErrorCode === 200) {
|
this.list = res.data.Result.List
|
this.total = res.data.Result.Count
|
} else {
|
this.list = []
|
this.total = 0
|
}
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
},
|
handleFile (data, index) {
|
this.proValue = data
|
downloadFile({ path: data.DocumentFileName, name: data.DocumentName })
|
},
|
hidenRelationInput () {
|
this.proValue = ''
|
document.querySelector('#app').click()
|
},
|
deleteLog (row) {
|
console.log(row)
|
this.$confirm('确定删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
DeleteFollowRecord([{'Id': row.Id}]).then(res => {
|
if (res.data.ErrorCode === 200) {
|
this.$message.success(res.data.Message)
|
this.getList()
|
} else {
|
this.$message.error(res.data.Message)
|
}
|
})
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
},
|
/** 通过回调控制表头style */
|
headerRowStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
/** 通过回调控制style */
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
if (
|
column.property === 'Files'
|
) {
|
return { color: '#4D88FF', cursor: 'pointer', textAlign: 'left' }
|
} else {
|
return { textAlign: 'left' }
|
}
|
},
|
// 当某一行被点击时会触发该事件
|
handleRowClick (row, column, event) {
|
if (column.property === 'Files') {
|
console.log('yesss')
|
}
|
},
|
/** 格式化字段 */
|
fieldFormatter (row, column) {
|
// 如果需要格式化
|
if (column.property === 'Files') {
|
return row[column.property].DocumentName || '--'
|
}
|
return row[column.property] || '--'
|
},
|
handleSizeChange (newSize) {
|
this.pageSize = newSize
|
this.currentPage = 1
|
this.getList()
|
// this.queryInfo.pagesize = newSize
|
},
|
handleCurrentChange (newPage) {
|
this.currentPage = newPage
|
this.getList()
|
// this.queryInfo.pagenum = newPage
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../../styles/relativecrm.scss';
|
.rc-cont{
|
padding: 0;
|
}
|
.el-table /deep/ thead th:nth-last-child(2), thead td {
|
border-right: 0;
|
font-weight: 600;
|
}
|
.el-scrollbar__wrap{
|
overflow-x:hidden;
|
}
|
.pop-container {
|
position: relative;
|
}
|
|
.pop-header {
|
padding: 16px 30px;
|
flex-shrink: 0;
|
border-bottom: 1px solid #F1F1F1;
|
margin-bottom: 13px;
|
.pop-name {
|
font-size: 16px;
|
font-weight: 550;
|
padding: 0 10px;
|
color: #333;
|
}
|
.pop-detail {
|
font-size: 12px;
|
padding: 0 10px;
|
color: #aaaaaa;
|
border-left: 1px solid #aaaaaa;
|
}
|
.pop-close {
|
position: absolute;
|
top: 16px;
|
right: 10px;
|
width: 25px;
|
height: 25px;
|
}
|
}
|
.pop-content{
|
padding: 0 30px;
|
.pop-cropper-box{
|
display:flex;
|
flex-direction: row;
|
align-items: center;
|
margin-bottom: 30px;
|
.pop-searchTitle{
|
font-size: 14px;
|
width: 124px;
|
color: #333;
|
}
|
.pop-searchInput{
|
margin-right: 20px;
|
}
|
}
|
.no-data-container {
|
position: absolute;
|
top: 40px;
|
left: 50px;
|
text-align: center;
|
.no-data {
|
margin-top: 30px;
|
width: 100px;
|
}
|
.no-data-name {
|
font-size: 12px;
|
margin-top: 8px;
|
color: #666;
|
}
|
}
|
}
|
.el-select-dropdown__item{
|
padding: 0 3px;
|
}
|
.crm-type {
|
color: rgb(99, 148, 229);
|
font-size: 14px;
|
}
|
</style>
|
