<template>
|
<div class='customer'>
|
<c-r-m-list-head
|
ref="listHead"
|
title="商机管理"
|
main-title="客户管理" />
|
|
<c-r-m-table-head
|
ref="crmTableHead"
|
:crm-type="crmType"
|
:fieldList='fieldList'
|
@exportFile="exportFile"
|
@importFile='importFile'
|
@filter="handleFilter"
|
@handle="handleHandle"
|
@on-handle="listHeadHandle"
|
@scene="handleScene"
|
@queryList='queryList'/>
|
|
<el-card class="el-card">
|
<el-table
|
v-loading="loading"
|
id="crm-table"
|
:data="list"
|
:height="tableHeight"
|
:cell-style="cellStyle"
|
class="n-table--border"
|
border
|
highlight-current-row
|
style="width: 100%; z-index: 0;"
|
@row-click="handleRowClick"
|
@sort-change="sortChange"
|
@header-dragend="handleHeaderDragend"
|
@selection-change="handleSelectionChange">
|
<el-table-column
|
show-overflow-tooltip
|
type="selection"
|
:selectable="selectable"
|
align="center"
|
width="55"/>
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
:fixed="index==0"
|
:prop="item.field"
|
:label="item.value"
|
:width="item.width"
|
:formatter="fieldFormatter"
|
sortable="custom"
|
show-overflow-tooltip>
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">
|
{{ scope.column.label }}
|
<c-r-m-table-filter
|
:show="scope.column.label==='项目属性'||scope.column.label==='提交'||scope.column.label==='审批'"
|
:tableType="scope.column.label"
|
@queryList="queryList">
|
</c-r-m-table-filter>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="BusinessStatusString" label="上报状态">
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">{{ scope.column.label }}</div>
|
</template>
|
<template slot-scope="scope">
|
<el-tooltip class="item" effect="dark" :content="scope.row.BusinessStatusReason?scope.row.BusinessStatusReason:scope.row.BusinessStatusString" placement="top">
|
<span >{{scope.row.BusinessStatusString}}</span>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="operation"
|
width="150">
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">操作</div>
|
</template>
|
<template slot-scope="scope">
|
<el-button type="text" size="small" :disabled="!scope.row.IsCanEdit" @click='editList(scope.row)'>编辑 |</el-button>
|
<el-button type="text" size="small" :disabled="!scope.row.IsCanDelete" @click='deleteSingleModule(scope.row.Id)'>删除 |</el-button>
|
<el-button type="text" size="small" @click='goFollow(scope.row.Id)'>跟进</el-button>
|
</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>
|
|
</el-card>
|
|
<!-- 编辑页面 -->
|
<c-r-m-create-view
|
v-if="isCreate"
|
:action="{type: 'update', id: editData.Id, data: editData}"
|
:crm-type="crmType"
|
@save-success="listHeadHandle"
|
@hiden-view="hiddenView"/>
|
<c-r-m-import
|
:show="showCRMImport"
|
:crm-type="crmType"
|
@close="showCRMImport=false"
|
@queryList='queryList'/>
|
<c-r-m-export
|
:show="showCRMExport"
|
:crm-type="crmType"
|
:search="search"
|
:filter-obj="filterObj"
|
:head-obj="headObj"
|
:is-seas="false"
|
:export-params="exportParams"
|
@close="showCRMExport=false"
|
@queryList='queryList'/>
|
<!-- 相关详情页面 -->
|
<c-r-m-all-detail
|
:key='timer'
|
:visible.sync="showDview"
|
:crm-type="rowType"
|
:id="rowID"
|
:isFollow="isFollow"
|
class="d-view"
|
@handle="handleHandle"/>
|
<fields-set
|
:crm-type="crmType"
|
:dialog-visible.sync="showFieldSet"
|
@set-success="setSave"/>
|
</div>
|
</template>
|
|
<script>
|
import table from '../mixins/table'
|
import CRMCreateView from '../components/CRMCreateView'
|
import CRMImport from '../components/CRMImport'
|
import CRMExport from '../components/CRMExport'
|
import CRMAllDetail from '@/views/clients/components/CRMAllDetail'
|
import CRMTableFilter from '../components/CRMTableFilter'
|
import { DeleteSalesChance } from '@/api/customermanagement/business'
|
|
export default {
|
/** 客户管理 的 商机列表 */
|
name: 'BusinessIndex',
|
components: {
|
CRMAllDetail,
|
CRMCreateView,
|
CRMImport,
|
CRMExport,
|
CRMTableFilter
|
},
|
filters: {
|
},
|
mixins: [table],
|
computed: {
|
},
|
data () {
|
return {
|
timer: '',
|
choosedScene: '2',
|
fieldList: [{ field: 'ChanceNumber', value: '编号' },
|
{ field: 'ChanceName', value: '商机名称', width: '150' },
|
{ field: 'CustomerName', value: '客户名称', width: '150' },
|
{ field: 'ContacterName', value: '联系人' },
|
{ field: 'ProjectProperty', value: '项目属性' },
|
{ field: 'ChanceRequestTypeString', value: '商机类型' },
|
{ field: 'SalesChanceStage', value: '销售阶段' },
|
{ field: 'UploadStatusName', value: '提交' },
|
{ field: 'ReportStatusName', value: '审批' },
|
{ field: 'TrackStatus', value: '报备' },
|
// { field: 'BusinessStatusString', value: '上报状态' },
|
{ field: 'SubmitTimeString', value: '上报时间' },
|
{ field: 'InvalidTimeString', value: '过期时间' },
|
{ field: 'ExpectedDate', value: '预期成交日期' },
|
{ field: 'ExpectedAmount', value: '商机金额/元' },
|
{ field: 'CreateUserName', value: '创建人' },
|
{ field: 'OwerName', value: '销售负责人' }
|
],
|
isDialogVisible: false, // 是创建
|
isCreate: false,
|
// 导入
|
showCRMImport: false,
|
// 导出
|
showCRMExport: false,
|
// 导出选中参数
|
exportParams: {},
|
crmType: 'business',
|
loading: false,
|
addLoading: false,
|
popSearch: '',
|
isFollow: false
|
}
|
},
|
mounted () {
|
},
|
methods: {
|
hiddenView () {
|
this.isCreate = false
|
this.getList()
|
},
|
// 选择文件
|
selectFile () {
|
document.getElementById('importInputFile').click()
|
},
|
// 获取左边padding
|
getPaddingLeft (item, index) {
|
if (item.showblock && item.showblock === true) {
|
return '25px'
|
}
|
return item.styleIndex % 2 === 0 ? '0' : '25px'
|
},
|
// 获取右边padding
|
getPaddingRight (item, index) {
|
if (item.showblock && item.showblock === true) {
|
return '0'
|
}
|
|
return item.styleIndex % 2 === 0 ? '25px' : '0'
|
},
|
/** 通过回调控制style */
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
if (
|
column.property === 'ChanceName' ||
|
column.property === 'CustomerName'
|
) {
|
return { color: '#4D88FF', cursor: 'pointer' }
|
} else if (column.property === 'ReportStatusName') {
|
if (row[column.property] === '审批中') {
|
return { color: '#FF8800' }
|
} else if (row[column.property] === '通过') {
|
return { color: '#2DB300' }
|
} else if (row[column.property] === '驳回') {
|
return { color: '#FF4D4D' }
|
} else {
|
return { color: '#333' }
|
}
|
} else if (column.property === 'TrackStatus') {
|
if (row[column.property]) {
|
if (row['IsAutoPassed'] === true) {
|
return { color: '#2DB300' }
|
} else {
|
return { color: '#FF4D4D' }
|
}
|
} else {
|
return { color: '#333' }
|
}
|
} else if (column.property === 'BusinessStatusString') {
|
if (row[column.property] === '待上报') {
|
return { color: '#FF8800' }
|
} else if (row[column.property] === '已上报') {
|
return { color: '#2DB300' }
|
} else if (row[column.property] === '已拒绝') {
|
return { color: '#FF4D4D' }
|
} else {
|
return { color: '#333' }
|
}
|
} else {
|
return ''
|
}
|
},
|
selectable (row, index) {
|
if (row.IsCanDelete) {
|
return true
|
} else {
|
return false
|
}
|
},
|
goFollow (id) {
|
this.rowID = id
|
this.isFollow = true
|
this.rowType = 'business'
|
this.showDview = true
|
this.timer = new Date().getTime()
|
this.$forceUpdate()
|
},
|
deleteSingleModule (id) {
|
this.$confirm('确定删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
DeleteSalesChance([{'Id': 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: '已取消删除'
|
})
|
})
|
},
|
exportFile () {
|
this.showCRMExport = true
|
},
|
importFile () {
|
this.showCRMImport = true
|
},
|
queryList (data) {
|
this.headObj = data
|
this.getList(data)
|
},
|
/** 筛选操作 */
|
handleFilter (data) {
|
console.log(data)
|
this.filterObj = data
|
var offsetHei = document.documentElement.clientHeight
|
var removeHeight = Object.keys(this.filterObj).length > 0 ? 310 : 240
|
this.tableHeight = offsetHei - removeHeight
|
this.currentPage = 1
|
this.getList()
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../styles/table.scss';
|
#importInputFile {
|
display: none;
|
}
|
.customer{
|
// .xr-btn--orange{
|
// background-color: #ff6a00;
|
// border-color: #ff6a00;
|
// }
|
.customerName{
|
cursor:pointer;
|
// color: #ff6a00
|
}
|
}
|
.container {
|
position: relative;
|
}
|
|
.header {
|
height: 40px;
|
padding: 0 10px;
|
flex-shrink: 0;
|
.name {
|
font-size: 13px;
|
padding: 0 10px;
|
color: #333;
|
}
|
.detail {
|
font-size: 12px;
|
padding: 0 10px;
|
color: #aaaaaa;
|
border-left: 1px solid #aaaaaa;
|
}
|
.close {
|
position: absolute;
|
width: 40px;
|
height: 40px;
|
top: 0;
|
right: 10px;
|
padding: 10px;
|
}
|
}
|
.content{
|
.cropper-box{
|
display:flex;
|
flex-direction: row;
|
align-items: center;
|
padding: 0 20px;
|
.searchTitle{
|
font-size: 14px;
|
width: 124px;
|
color: #333;
|
}
|
.searchInput{
|
margin-right: 20px;
|
}
|
}
|
}
|
.p-contianer .p-bar{
|
margin: 5px 0 0 14px;
|
}
|
</style>
|
<style lang="scss">
|
.customer{
|
/deep/.el-input .el-input-group__append{
|
// background-color: #ff7d00;
|
// border-color: #ff7d00;
|
// color: #fff;
|
}
|
}
|
/* 新建和编辑 */
|
.new-dialog-title {
|
padding-left: 10px;
|
margin-bottom: 3px;
|
border-left: 2px solid #4D88FF;
|
}
|
.new-busDialog-form {
|
height: 47vh;
|
overflow-y: auto;
|
padding: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.new-busDialog-form /deep/ .el-form-item {
|
// width: 50%;
|
margin: 0;
|
padding-bottom: 10px;
|
}
|
.new-busDialog-form /deep/ .el-form-item .el-form-item__label {
|
line-height: normal;
|
font-size: 13px;
|
color: #333333;
|
position: relative;
|
padding-bottom: 8px;
|
}
|
.new-busDialog-form /deep/ .crm-create-item.el-form-item .el-form-item__content {
|
width: 70%;
|
}
|
.new-busDialog-form /deep/ .crm-create-block-item.el-form-item .el-form-item__content {
|
width: 90%;
|
}
|
.new-busDialog-form /deep/ .crm-create-block-item.el-form-item .el-form-item__label{
|
width: 10% !important;
|
}
|
.doubleSelect{
|
display: flex;
|
flex-direction: row;
|
width: 100%;
|
.leftSelect{
|
margin-right: 10px;
|
}
|
}
|
.radioList{
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
.el-radio{
|
flex: 0 0 40%;
|
line-height: 24px;
|
.el-radio__label{
|
color: #666;
|
font-size: 16px;
|
margin-bottom: 12px;
|
}
|
}
|
}
|
.crm-create-item {
|
flex: 0 0 45%;
|
flex-shrink: 0;
|
// overflow: hidden;
|
padding-bottom: 10px;
|
}
|
|
// 占用一整行
|
.crm-create-block-item {
|
flex: 0 0 100%;
|
flex-shrink: 0;
|
padding-bottom: 10px;
|
}
|
.nav-dialog-div {
|
margin-bottom: 20px;
|
}
|
.nav-dialog-div /deep/ .el-input {
|
width: auto;
|
}
|
.el-table /deep/ .el-button+.el-button{
|
margin-left: 3px;
|
}
|
</style>
|
