<template>
|
<slide-view
|
v-empty="!canShowDetail"
|
:listener-ids="listenerIDs"
|
:no-listener-ids="noListenerIDs"
|
:no-listener-class="noListenerClass"
|
:body-style="{padding: 0, height: '100%'}"
|
xs-empty-icon="nopermission"
|
xs-empty-text="暂无权限"
|
@side-close="hideView">
|
<flexbox
|
v-loading="loading"
|
v-if="canShowDetail"
|
direction="column"
|
align="stretch"
|
class="d-container">
|
<c-r-m-detail-head
|
:detail="detailData"
|
:head-details="headDetails"
|
:id="id"
|
crm-type="business"
|
@handle="detailHeadHandle"
|
@close="hideView">
|
<!--<div class="busi-line"/>-->
|
</c-r-m-detail-head>
|
|
<div class="tabs" style="margin-bottom:24px;">
|
<el-tabs
|
v-model="tabCurrentName"
|
@tab-click="handleClick">
|
<el-tab-pane
|
v-for="(item, index) in tabnames"
|
:key="index"
|
:label="item.label"
|
:name="item.name"/>
|
</el-tabs>
|
</div>
|
|
<!--:style="{'opacity' : detailData.isEnd !== 0 ? 1 : 1}"-->
|
<div
|
style="padding:10px 50px;margin-bottom:24px;">
|
<flexbox
|
class="busi-state">
|
<a
|
v-for="(item, index) in status"
|
:key="index">
|
<div
|
v-if="status.length -1 !=index"
|
slot="reference"
|
:class="item.class"
|
class="busi-state-item"
|
@click="handleStatuChange(item, index)">
|
{{ item.name }}
|
<div class="state-circle"/>
|
<div class="state-line"/>
|
<div class='state-info'>
|
<el-button type="primary" @click="pushState" v-if="item.isPushing" style='margin-left:36px;'>推进</el-button>
|
<div v-if="item.class === 'state-suc'" class='state-name'>{{item.UserName}}</div>
|
<div v-if="item.class === 'state-suc'" class='state-name'>{{item.CreateTime}}</div>
|
</div>
|
</div>
|
|
<div
|
v-if="status.length -1 ==index"
|
:class="item.class"
|
class="busi-state-item"
|
style="margin-left:8px;">
|
<i
|
:class="item.overIcon"
|
style="margin-right:8px;"/>
|
{{ item.name }}
|
<div class="state-circle"/>
|
<div class='state-info'>
|
<el-button type="primary" @click="pushState" v-if="item.isPushing" style='margin-left:36px;'>推进</el-button>
|
<div v-if="item.class === 'state-suc'" class='state-name'>{{item.UserName}}</div>
|
<div v-if="item.class === 'state-suc'" class='state-name'>{{item.CreateTime}}</div>
|
</div>
|
</div>
|
</a>
|
</flexbox>
|
</div>
|
<el-dialog
|
title="推进"
|
:visible.sync="isPushed"
|
width="20%"
|
append-to-body
|
:before-close="handleClose">
|
<div class='pushBody'>
|
<i class="el-icon-warning" style="color: #e6a23c;"></i>
|
<span>确定推进商机到</span>
|
<el-select v-model="pushStatus" placeholder="请选择">
|
<el-option
|
v-for="item in pushOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<span>阶段</span>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleClose" class='closePushBtn'>取 消</el-button>
|
<el-button type="primary" @click="surePush" class='surePushBtn'>确 定</el-button>
|
</span>
|
</el-dialog>
|
<div style="width:100%; height:8px; background: #F5F6FA;margin-bottom:48px;"></div>
|
<div
|
id="follow-log-content"
|
class="t-loading-content"
|
:style="'height:' + contentStyleObj.height">
|
<!--<c-r-m-base-info
|
:ref="tabnames[0].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="business" />
|
<business-follow
|
:ref="tabnames[1].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="business" />
|
<relative-offers
|
:ref="tabnames[2].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="business"/>
|
<relative-contract
|
:ref="tabnames[3].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="business" />
|
<relative-product
|
:ref="tabnames[4].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="business"/>
|
<relative-files
|
:ref="tabnames[5].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="business" />
|
<relative-handle
|
:ref="tabnames[6].name"
|
class="scroll-item"
|
:detail="detailData"
|
:id="id"
|
crm-type="customer" />-->
|
<keep-alive>
|
<component
|
:is="tabName"
|
:detail="detailData"
|
:id="id"
|
crm-type="business"/>
|
</keep-alive>
|
</div>
|
</flexbox>
|
<c-r-m-create-view
|
v-if="isCreate"
|
:action="{type: 'update', id: id, batchId: detailData.batchId}"
|
crm-type="business"
|
@save-success="editSaveSuccess"
|
@hiden-view="isCreate=false"/>
|
</slide-view>
|
</template>
|
|
<script>
|
import {
|
GetSalesChanceDetail,
|
ChangeSalesChanceStage
|
} from '@/api/customermanagement/business'
|
|
import SlideView from '@/components/SlideView'
|
import CRMDetailHead from '../components/CRMDetailHead'
|
import BusinessFollow from './components/BusinessFollow' // 跟进记录
|
import CRMBaseInfo from '../components/CRMBaseInfo' // 商机基本信息
|
import RelativeContract from '../components/RelativeContract' // 相关合同
|
import RelativeContacts from '../components/RelativeContacts' // 相关联系人
|
import RelativeHandle from '../components/RelativeHandle' // 相关操作
|
import RelativeTeam from '../components/RelativeTeam' // 相关团队
|
import RelativeProduct from '../components/RelativeProduct' // 相关团队
|
import RelativeFiles from '../components/RelativeFiles' // 相关附件
|
import RelativeOffers from '../components/RelativeOffers' // 相关报价
|
import RelativeSchedule from '../components/RelativeSchedule' // 相关待办事项
|
import CRMCreateView from '../components/CRMCreateView' // 新建页面
|
import RelativeApproval from '../components/RelativeApproval' // 相关商机流转跟踪记录
|
|
import detail from '../mixins/detail'
|
|
export default {
|
/** 客户管理 的 商机详情 */
|
name: 'BusinessDetail',
|
components: {
|
SlideView,
|
CRMDetailHead,
|
BusinessFollow,
|
CRMBaseInfo,
|
RelativeContract,
|
RelativeContacts,
|
RelativeHandle,
|
RelativeTeam,
|
RelativeProduct,
|
RelativeFiles,
|
CRMCreateView,
|
RelativeOffers,
|
RelativeSchedule,
|
RelativeApproval
|
},
|
mixins: [detail],
|
props: {
|
// 详情信息id
|
id: [String, Number],
|
// 监听的dom 进行隐藏详情
|
listenerIDs: {
|
type: Array,
|
default: () => {
|
return ['crm-main-container']
|
}
|
},
|
isFollow: {
|
type: Boolean,
|
default: false
|
},
|
// 不监听
|
noListenerIDs: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
noListenerClass: {
|
type: Array,
|
default: () => {
|
return ['el-table__body']
|
}
|
}
|
},
|
data () {
|
return {
|
loading: false, // 展示加载loading
|
crmType: 'business',
|
detailData: {}, // read 详情
|
headDetails: [
|
{ title: '客户名称', value: '' },
|
{ title: '预计成交金额（元）', value: '' },
|
{ title: '商机状态', value: '' },
|
{ title: '负责人', value: '' },
|
{ title: '创建时间', value: '' }
|
],
|
tabCurrentName: 'basicinfo',
|
/** 商机状态数据 */
|
status: [],
|
/** 完结状态 */
|
statuHandleItems: [
|
{
|
name: '赢单',
|
type: 1,
|
value: '100%',
|
img: require('@/assets/img/check_suc.png')
|
},
|
{
|
name: '输单',
|
type: 2,
|
value: '0%',
|
img: require('@/assets/img/check_fail.png')
|
},
|
{
|
name: '无效',
|
type: 3,
|
value: '0%',
|
img: require('@/assets/img/check_cancel.png')
|
}
|
],
|
isCreate: false, // 编辑操作
|
contentStyleObj: {
|
height: '100px'
|
},
|
isPushed: false,
|
pushStatus: 1,
|
pushOptions: [{value: 1, label: '初期沟通'}, {value: 2, label: '需求分析'}, {value: 3, label: '方案报价'}, {value: 4, label: '商务谈判'}, {value: 5, label: '成功'}, {value: 6, label: '搁置'}]
|
}
|
},
|
computed: {
|
tabName () {
|
if (this.tabCurrentName === 'followlog') {
|
return 'business-follow'
|
} else if (this.tabCurrentName === 'basicinfo') {
|
return 'c-r-m-base-info'
|
} else if (this.tabCurrentName === 'team') {
|
return 'relative-team'
|
} else if (this.tabCurrentName === 'contract') {
|
return 'relative-contract'
|
} else if (this.tabCurrentName === 'operationlog') {
|
return 'relative-handle'
|
} else if (this.tabCurrentName === 'product') {
|
return 'relative-product'
|
} else if (this.tabCurrentName === 'file') {
|
return 'relative-files'
|
} else if (this.tabCurrentName === 'contacts') {
|
return 'relative-contacts'
|
} else if (this.tabCurrentName === 'offers') {
|
return 'relative-offers'
|
} else if (this.tabCurrentName === 'approval') {
|
return 'relative-approval'
|
} else if (this.tabCurrentName === 'schedule') {
|
return 'relative-schedule'
|
}
|
return ''
|
},
|
tabnames () {
|
let tempsTabs = []
|
// if (this.crm.business && this.crm.business.read) {
|
tempsTabs.push({ label: '基本信息', name: 'basicinfo' })
|
// }
|
tempsTabs.push({ label: '跟进记录', name: 'followlog' })
|
// if (this.crm.contacts && this.crm.contacts.index) {
|
// tempsTabs.push({ label: '联系人', name: 'contacts' })
|
// }
|
tempsTabs.push({ label: '报价', name: 'offers' })
|
|
// if (this.crm.contract && this.crm.contract.index) {
|
tempsTabs.push({ label: '合同', name: 'contract' })
|
// }
|
// if (this.crm.product && this.crm.product.index) {
|
tempsTabs.push({ label: '产品', name: 'product' })
|
tempsTabs.push({ label: '商机流转跟踪', name: 'approval' })
|
// }
|
// tempsTabs.push({ label: '待办事项', name: 'schedule' })
|
// tempsTabs.push({ label: '相关团队', name: 'team' })
|
// tempsTabs.push({ label: '附件', name: 'file' })
|
tempsTabs.push({ label: '操作记录', name: 'operationlog' })
|
return tempsTabs
|
}
|
},
|
created () {
|
this.getHight()
|
this.getDetial()
|
console.log(this.isFollow)
|
if (this.isFollow) {
|
this.tabCurrentName = 'followlog'
|
}
|
window.addEventListener('resize', this.getHight)
|
},
|
mounted () {},
|
destroyed () {
|
window.removeEventListener('resize', this.getHight)
|
},
|
methods: {
|
getHight () {
|
// this.contentStyleObj.height = (window.innerHeight - 600) + 'px'
|
},
|
getDetial () {
|
this.loading = true
|
GetSalesChanceDetail({
|
Id: this.id
|
})
|
.then(res => {
|
this.loading = false
|
this.detailData = res.data.Result
|
|
let statusList = [{statusId: 1, name: '初期沟通'}, {statusId: 2, name: '需求分析'}, {statusId: 3, name: '方案报价'}, {statusId: 4, name: '商务谈判'}, {statusId: 5, name: '商机成功'}, {statusId: 6, name: '商机搁置'}]
|
let statusId = this.detailData.SalesChanceStage
|
this.pushStatus = statusId
|
this.handleBusinessStatus(0, statusId, statusList, '100%')
|
|
this.headDetails[0].value = res.data.Result.CustomerName || '暂无'
|
this.headDetails[1].value = res.data.Result.ExpectedAmount || 0
|
this.headDetails[2].value = res.data.Result.ReportStatus || '暂无'
|
// 负责人
|
this.headDetails[3].value = res.data.Result.OwerUserName || '暂无'
|
this.headDetails[4].value = res.data.Result.CreateTime || '暂无'
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
},
|
pushState () {
|
this.isPushed = true
|
},
|
handleClose () {
|
// this.pushStatus = 1
|
this.isPushed = false
|
},
|
surePush () {
|
console.log(this.pushStatus)
|
let params = {
|
'Id': this.id,
|
'SalesChanceStage': this.pushStatus
|
}
|
ChangeSalesChanceStage(params).then(res => {
|
if (res.data.ErrorCode === 200) {
|
this.$message.success(res.data.Message)
|
this.getDetial()
|
} else {
|
this.$message.error(res.data.Message)
|
}
|
})
|
this.handleClose()
|
},
|
//* * 点击关闭按钮隐藏视图 */
|
hideView () {
|
this.$emit('hide-view')
|
},
|
/** 处理商机状态数据 */
|
handleBusinessStatus (isEnd, statusId, statusList, statusRemark) {
|
this.status = []
|
let info = this.detailData.SalesChanceForwards
|
if (statusList && statusList.length > 0) {
|
let isdoingIndex = -1
|
for (let index = 0; index < statusList.length; index++) {
|
const item = statusList[index]
|
if (item.statusId === statusId) {
|
isdoingIndex = index
|
item['class'] = 'state-suc'
|
} else {
|
item['class'] = isdoingIndex >= 0 ? 'state-undo' : 'state-suc'
|
}
|
if (info && info.length > 0) {
|
for (let j = 0; j < info.length; j++) {
|
if (item.statusId === info[j].SalesChanceStage) {
|
item['CreateTime'] = info[j].CreateTime
|
item['UserName'] = info[j].UserName
|
} else {
|
if (item.statusId === info[j].SalesChanceStage) {
|
item['CreateTime'] = info[j].CreateTime
|
item['UserName'] = info[j].UserName
|
}
|
}
|
}
|
}
|
this.status.push(item)
|
}
|
// const overItem = { type: isEnd }
|
if (isEnd === 0) {
|
// overItem.name = '结束'
|
if (isdoingIndex === statusList.length - 1) {
|
this.status[isdoingIndex].class = 'state-suc'
|
// overItem['class'] = 'state-doing'
|
} else {
|
if (this.status.length > 0 && statusId !== 0) {
|
// 有推进状态 才会有下一阶段
|
this.status[isdoingIndex + 1].class = 'state-doing'
|
this.status[isdoingIndex + 1]['isPushing'] = true
|
}
|
// overItem['class'] = 'state-undo'
|
}
|
}
|
// this.status.push(overItem)
|
this.status = [...this.status]
|
}
|
},
|
/** 操作状态改变 */
|
handleStatuChange (item, index) {
|
if (this.detailData.isEnd !== 0) {
|
// 非完结状态下 可推进
|
return
|
}
|
if (!item.isdoing) {
|
let message = '确定进入' + item.name + '阶段'
|
this.$confirm(message, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
this.loading = true
|
// crmBusinessAdvance({
|
// businessId: this.id,
|
// statusId: item.statusId
|
// })
|
// .then(res => {
|
// this.loading = false
|
// this.$message.success('操作成功')
|
// this.getDetial()
|
// })
|
// .catch(() => {
|
// this.loading = false
|
// })
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消操作'
|
})
|
})
|
}
|
},
|
/** 完结状态结果 */
|
handleStatuResult (item, index) {
|
if (this.detailData.isEnd !== 0) {
|
// 非完结状态下 可推进
|
return
|
}
|
/** 输单 和 无效 */
|
if (item.type === 2 || item.type === 3) {
|
let message = '请填写' + item.name + '原因：'
|
let title = item.name + '原因'
|
this.$prompt(message, title, {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消'
|
})
|
.then(({ value }) => {
|
this.loading = true
|
// crmBusinessAdvance({
|
// businessId: this.id,
|
// statusId: item.statusId,
|
// isEnd: item.type,
|
// statusRemark: value
|
// })
|
// .then(res => {
|
// this.loading = false
|
// this.$message.success('操作成功')
|
// this.getDetial()
|
// })
|
// .catch(() => {
|
// this.loading = false
|
// })
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '取消输入'
|
})
|
})
|
} else {
|
let message = '确定将当前商机设为' + item.name + '吗?'
|
this.$confirm(message, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
this.loading = true
|
// crmBusinessAdvance({
|
// businessId: this.id,
|
// statusId: item.statusId,
|
// isEnd: item.type
|
// })
|
// .then(res => {
|
// this.loading = false
|
// this.$message.success('操作成功')
|
// this.getDetial()
|
// })
|
// .catch(() => {
|
// this.loading = false
|
// })
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消操作'
|
})
|
})
|
}
|
},
|
editSaveSuccess () {
|
this.$emit('handle', { type: 'save-success' })
|
this.getDetial()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../styles/crmdetail.scss';
|
.busi-line {
|
position: absolute;
|
bottom: 0;
|
left: 17px;
|
right: 17px;
|
height: 1px;
|
background-color: #e6e6e6;
|
}
|
|
.busi-state {
|
position: relative;
|
padding-left: 20px;
|
overflow-x: auto;
|
overflow-y: hidden;
|
padding-bottom: 80px;
|
a {
|
flex-shrink: 0;
|
}
|
}
|
|
.busi-state-item {
|
padding: 10px 35px;
|
margin: 5px 0;
|
position: relative;
|
margin-right: 20px;
|
font-size: 14px;
|
font-weight: 500;
|
color: #333333;
|
width: 148px;
|
.state-circle {
|
width: 30px;
|
height: 30px;
|
background-size: 100% 100%;
|
background: url('../../../assets/img/step_wait.png') no-repeat;
|
top: 42px;
|
left: 42%;
|
position: absolute;
|
z-index: -1;
|
}
|
.state-line{
|
width:174px;
|
height: 2px;
|
background: #F1F1F1;
|
position: absolute;
|
top: 50px;
|
left: 65px;
|
z-index: -2;
|
}
|
.state-info{
|
position: absolute;
|
top: 72px;
|
left: 0;
|
text-align: center;
|
}
|
.state-name{
|
margin-left: 10px;
|
}
|
}
|
|
.state-undo {
|
.state-circle {
|
background: url('../../../assets/img/step_wait.png') no-repeat;
|
}
|
.state-line {
|
background: #F1F1F1;
|
}
|
}
|
|
.state-doing {
|
.state-circle {
|
background: url('../../../assets/img/step_wait.png') no-repeat;
|
}
|
.state-line {
|
background: #F1F1F1;
|
}
|
}
|
|
.state-suc {
|
.state-circle {
|
background: url('../../../assets/img/step_success.png') no-repeat;
|
}
|
.state-line {
|
background: #4D88FF;
|
}
|
}
|
|
.state-fail {
|
.state-circle {
|
background: url('../../../assets/img/step_wait.png') no-repeat;
|
}
|
.state-line {
|
background: red;
|
}
|
}
|
|
.state-invalid {
|
.state-circle {
|
background: url('../../../assets/img/step_wait.png') no-repeat;
|
}
|
.state-line {
|
background: #F1F1F1;
|
}
|
}
|
|
/** 状态操作布局 */
|
.state-handel-cont {
|
font-size: 13px;
|
color: #333;
|
.state-handel-item {
|
padding: 10px 0;
|
cursor: pointer;
|
.state-handel-item-img {
|
width: 16px;
|
height: 16px;
|
border-radius: 8px;
|
margin-right: 8px;
|
flex-shrink: 0;
|
display: block;
|
}
|
.state-handel-item-name {
|
flex: 1;
|
}
|
.state-handel-item-value {
|
flex-shrink: 0;
|
}
|
}
|
.state-handel-item:hover {
|
background-color: #f7f8fa;
|
}
|
}
|
.closePushBtn{
|
width: 58px;
|
height: 32px;
|
background: #FFFFFF;
|
border-radius: 3px;
|
border: 1px solid #999999;
|
font-size: 12px;
|
font-weight: 400;
|
color: #333333;
|
&:hover{
|
border-color:#4D88FF;
|
color: #4D88FF;
|
}
|
&:active{
|
border-color:#4D88FF;
|
color: #4D88FF;
|
}
|
}
|
.surePushBtn{
|
width: 58px;
|
height: 32px;
|
background: #4D88FF;
|
border-radius: 3px;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
</style>
|
