<template>
|
<div class="detail-view">
|
<el-drawer
|
:visible.sync="detailConfig.visible"
|
size="80%"
|
:before-close="handleClose"
|
:wrapperClosable="false"
|
:append-to-body="true"
|
>
|
<template slot="title">
|
<div class="header">
|
<span class="header-label">机会名称</span>
|
<span class="header-title">{{ detailConfig.infomation.name }}</span>
|
</div>
|
</template>
|
<div class="content">
|
<div class="tab-view">
|
<el-tabs v-model="activeName" @tab-click="tabsClick">
|
<el-tab-pane label="详情" name="first"></el-tab-pane>
|
<el-tab-pane label="跟进记录" name="second">
|
<!-- <template slot="label">
|
<div>跟进记录<el-badge type="primary" :value="2"> </el-badge></div>
|
</template> -->
|
</el-tab-pane>
|
<el-tab-pane label="收款预测" name="collectionForecast"></el-tab-pane>
|
<el-tab-pane label="报价单" name="quotation"></el-tab-pane>
|
<el-tab-pane label="销售明细单" name="detail"></el-tab-pane>
|
<el-tab-pane label="服务合同" name="serviceContract"></el-tab-pane>
|
</el-tabs>
|
</div>
|
<div v-if="activeName === 'first'" class="detail">
|
<!-- 进度追踪 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('schdule')">
|
<i v-if="isSchduleExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">进度追踪</span>
|
</div>
|
<div v-show="isSchduleExpand" class="basic-info-content">
|
<div class="step-view">
|
<el-steps :active="active" align-center>
|
<el-step :active-color="'#fff'" :title="item.title" :key="index" v-for="(item, index) in stepsList">
|
<template slot="title">
|
<div class="step-title-view">
|
<div class="step-label">{{ item.title }}</div>
|
<div v-show="index === active" class="step-btn" @click="advanceClick(item)">推进</div>
|
<div class="step-desc">{{ item.desc }}</div>
|
</div>
|
</template>
|
</el-step>
|
</el-steps>
|
</div>
|
</div>
|
</div>
|
<!-- 机会基本信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('basic')">
|
<i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">机会基本信息</span>
|
</div>
|
<div v-show="isBasicExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in basicInfoList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue }}</div>
|
</div>
|
<div class="right">
|
<div class="content-title">{{ item.rightStr }}</div>
|
<div class="content-data">{{ item.rightValue }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 销售预测 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('forecast')">
|
<i v-if="isForecastExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">销售预测</span>
|
</div>
|
<div v-show="isForecastExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in forecastList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue }}</div>
|
</div>
|
<div class="right">
|
<div class="content-title">{{ item.rightStr }}</div>
|
<div class="content-data">{{ item.rightValue }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 动态信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('dynamic')">
|
<i v-if="isDynamicExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">动态信息</span>
|
</div>
|
<div v-show="isDynamicExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in dynamicInfoList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue }}</div>
|
</div>
|
<div class="right">
|
<div class="content-title">{{ item.rightStr }}</div>
|
<div class="content-data">{{ item.rightValue }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 商机七要素 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('business')">
|
<i v-if="isBusinessExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">商机七要素(5W2P)</span>
|
</div>
|
<div v-show="isBusinessExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in businessInfoList" :key="i">
|
<div class="all">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- SWOT分析 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('swot')">
|
<i v-if="isSwotExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">SWOT分析</span>
|
</div>
|
<div v-show="isSwotExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in swotInfoList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue }}</div>
|
</div>
|
<div class="right">
|
<div class="content-title">{{ item.rightStr }}</div>
|
<div class="content-data">{{ item.rightValue }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 地址信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('address')">
|
<i v-if="isAddressExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">地址信息</span>
|
</div>
|
<div v-show="isAddressExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in addressInfoList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue }}</div>
|
</div>
|
<div class="right">
|
<div class="content-title">{{ item.rightStr }}</div>
|
<div class="content-data">{{ item.rightValue }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 备注信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('remark')">
|
<i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">备注信息</span>
|
</div>
|
<div v-show="isRemarkExpand" class="basic-info-content">
|
<ul>
|
<li>
|
<div class="left remark">
|
<div class="content-title">{{ "备注：" }}</div>
|
<div class="content-data">{{ "备注内容" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 附件信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('annex')">
|
<i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">附件信息</span>
|
</div>
|
<div v-show="isAnnexExpand" class="basic-info-content">
|
<ul>
|
<li>
|
<div class="left remark">
|
<div class="content-title">{{ "附件：" }}</div>
|
<div class="content-data">{{ "" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 销售机会阶段推进历史 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('history')">
|
<i v-if="isHistoryExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">销售机会阶段推进历史</span>
|
</div>
|
<div v-show="isHistoryExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in historyList" :key="i">
|
<div class="left remark history">
|
<div class="content-title">{{ "日期：" + "2023-08-04 13:33:36" }}</div>
|
<div class="content-data">{{ "销售阶段：" + "成功结案" }}</div>
|
<div class="content-data">{{ "修改人：" + "系统管理员" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div v-if="activeName === 'second'" class="second">
|
<FollowupRecords :isDetail="true" />
|
</div>
|
<div v-if="activeName === 'collectionForecast'" class="second">
|
<!-- <SalesOpportunity :isDetail="true" /> -->
|
</div>
|
<div v-if="activeName === 'quotation'" class="second">
|
<Quotation :isDetail="true" />
|
</div>
|
<div v-if="activeName === 'detail'" class="second">
|
<SalesDetails :isDetail="true" />
|
</div>
|
<div v-if="activeName === 'serviceContract'" class="second">
|
<ServiceContract :isDetail="true" />
|
</div>
|
</div>
|
<!-- 推进 -->
|
<DetailAdvanceDialog v-if="advanceConfig.visible" :advance-config="advanceConfig" />
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import FollowupRecords from "@/views/client/followupRecords"
|
import Quotation from "@/views/sales/quotation"
|
import SalesDetails from "@/views/sales/salesDetails"
|
import ServiceContract from "@/views/service/serviceContract"
|
import DetailAdvanceDialog from "@/views/sales/salesOpportunity/DetailAdvanceDialog"
|
export default {
|
name: "DetailClientManage",
|
props: {
|
opportunityDetail: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
infomation: {}
|
}
|
}
|
}
|
},
|
components: { FollowupRecords, Quotation, SalesDetails, DetailAdvanceDialog, ServiceContract },
|
computed: {},
|
data() {
|
return {
|
detailConfig: this.opportunityDetail,
|
activeName: "first",
|
isSchduleExpand: true, // 进度追踪
|
stepsList: [
|
{ title: "初期沟通", desc: "停留: 1月8天20小时" },
|
{ title: "需求分析", desc: "" },
|
{ title: "方案报价", desc: "" },
|
{ title: "商务谈判", desc: "" },
|
{ title: "成功结案", desc: "" },
|
{ title: "失败结案", desc: "" }
|
],
|
isBasicExpand: true, // 基本信息展开
|
basicInfoList: [],
|
isForecastExpand: true, // 销售预测
|
forecastList: [],
|
isDynamicExpand: true, // 动态信息
|
dynamicInfoList: [],
|
isBusinessExpand: true, // 商机七要素
|
businessInfoList: [],
|
isSwotExpand: true, // SWOT分析
|
swotInfoList: [],
|
isAddressExpand: true, // 地址信息
|
addressInfoList: [],
|
isRemarkExpand: true, // 备注信息
|
isAnnexExpand: true, // 附件信息
|
isHistoryExpand: true, // 推进历史
|
historyList: [],
|
active: 2,
|
advanceConfig: {
|
visible: false,
|
active: ""
|
}
|
}
|
},
|
created() {
|
this.setData()
|
},
|
mounted() {},
|
methods: {
|
setData() {
|
this.basicInfoList = [
|
{
|
leftStr: "客户名称",
|
leftValue: "",
|
rightStr: "销售机会编号",
|
rightValue: ""
|
},
|
{
|
leftStr: "机会名称",
|
leftValue: "",
|
rightStr: "联系人姓名",
|
rightValue: ""
|
},
|
{
|
leftStr: "商机来源",
|
leftValue: "",
|
rightStr: "商机类型",
|
rightValue: ""
|
},
|
{
|
leftStr: "销售阶段",
|
leftValue: "",
|
rightStr: "销售负责人",
|
rightValue: ""
|
},
|
{
|
leftStr: "老客户营销",
|
leftValue: "",
|
rightStr: "签到",
|
rightValue: ""
|
},
|
{
|
leftStr: "审批状态",
|
leftValue: "",
|
rightStr: "竞争对手",
|
rightValue: ""
|
},
|
{
|
leftStr: "创建人",
|
leftValue: "",
|
rightStr: "创建时间",
|
rightValue: ""
|
}
|
]
|
this.forecastList = [
|
{
|
leftStr: "可能性(%)",
|
leftValue: "",
|
rightStr: "币种",
|
rightValue: ""
|
},
|
{
|
leftStr: "预算绝对值",
|
leftValue: "",
|
rightStr: "预计成交日期",
|
rightValue: ""
|
},
|
{
|
leftStr: "预计合同金额",
|
leftValue: "",
|
rightStr: "当前状态",
|
rightValue: ""
|
}
|
]
|
this.dynamicInfoList = [
|
{
|
leftStr: "未联系天数",
|
leftValue: "",
|
rightStr: "最新联系日期",
|
rightValue: ""
|
},
|
{
|
leftStr: "未推荐天数",
|
leftValue: "",
|
rightStr: "最新推进时间",
|
rightValue: ""
|
},
|
{
|
leftStr: "最新联系人",
|
leftValue: "",
|
rightStr: "最新更新时间",
|
rightValue: ""
|
}
|
]
|
this.businessInfoList = [
|
{
|
leftStr: "客户需求或痛点（why）",
|
leftValue: ""
|
},
|
{
|
leftStr: "是否已经立项（plan）",
|
leftValue: ""
|
},
|
{
|
leftStr: "资金预算是多少（plan）",
|
leftValue: ""
|
},
|
{
|
leftStr: "关键决策人是谁（who）",
|
leftValue: ""
|
},
|
{
|
leftStr: "关键决策因素有哪些（what）",
|
leftValue: ""
|
},
|
{
|
leftStr: "决策流程是怎样的（what）",
|
leftValue: ""
|
},
|
{
|
leftStr: "竞争对手提供的方案（what）",
|
leftValue: ""
|
}
|
]
|
this.swotInfoList = [
|
{
|
leftStr: "优势(S)",
|
leftValue: "",
|
rightStr: "劣势(W)",
|
rightValue: ""
|
},
|
{
|
leftStr: "机会(O)",
|
leftValue: "",
|
rightStr: "威胁(T)",
|
rightValue: ""
|
}
|
]
|
this.addressInfoList = [
|
{
|
leftStr: "国家",
|
leftValue: "",
|
rightStr: "省份",
|
rightValue: ""
|
},
|
{
|
leftStr: "城市",
|
leftValue: "",
|
rightStr: "区域",
|
rightValue: ""
|
},
|
{
|
leftStr: "详细地址",
|
leftValue: "",
|
rightStr: "",
|
rightValue: ""
|
}
|
]
|
this.historyList = [
|
{
|
date: "2023-08-04 13:22:36",
|
stage: "成功结案",
|
modify: "系统管理员"
|
},
|
{
|
date: "2023-08-04 13:22:36",
|
stage: "成功结案",
|
modify: "系统管理员"
|
}
|
]
|
},
|
handleClose() {
|
this.detailConfig.visible = false
|
},
|
// tab切换
|
tabsClick(tab, event) {
|
console.log(tab, event)
|
},
|
// 展开收起点击事件
|
expandClick(value) {
|
console.log(value)
|
if (value === "schdule") {
|
this.isSchduleExpand = !this.isSchduleExpand
|
} else if (value === "basic") {
|
this.isBasicExpand = !this.isBasicExpand
|
} else if (value === "forecast") {
|
this.isForecastExpand = !this.isForecastExpand
|
} else if (value === "dynamic") {
|
this.isDynamicExpand = !this.isDynamicExpand
|
} else if (value === "business") {
|
this.isBusinessExpand = !this.isBusinessExpand
|
} else if (value === "swot") {
|
this.isSwotExpand = !this.isSwotExpand
|
} else if (value === "address") {
|
this.isAddressExpand = !this.isAddressExpand
|
} else if (value === "remark") {
|
this.isRemarkExpand = !this.isRemarkExpand
|
} else if (value === "annex") {
|
this.isAnnexExpand = !this.isAnnexExpand
|
} else if (value === "history") {
|
this.isHistoryExpand = !this.isHistoryExpand
|
}
|
},
|
// 推进
|
advanceClick(item) {
|
console.log(item)
|
this.advanceConfig.visible = true
|
this.advanceConfig.active = item.title
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-drawer__header {
|
padding: 0;
|
margin-bottom: 0px;
|
.header {
|
height: 56px;
|
display: flex;
|
align-items: center;
|
padding-left: 10px;
|
.header-label {
|
padding: 5px;
|
border-radius: 4px;
|
background-color: #ff6600;
|
color: #fff;
|
font-size: 12px;
|
}
|
.header-title {
|
color: #323232;
|
font-size: 15px;
|
margin-left: 10px;
|
font-weight: inherit;
|
}
|
}
|
}
|
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
padding-left: 20px;
|
}
|
.el-tabs__item.is-active,
|
.el-tabs__item:hover,
|
.el-tabs__active-bar {
|
color: $color-primary;
|
}
|
.el-tabs__header {
|
margin: 0;
|
}
|
.el-drawer__body {
|
.content {
|
background-color: rgb(230, 233, 240);
|
padding: 8px;
|
.tab-view {
|
background: #fff;
|
.item {
|
position: absolute;
|
top: 0px;
|
right: 0px;
|
}
|
}
|
.detail {
|
.basic-info {
|
.basic-info-label {
|
padding-left: 10px;
|
height: 42px;
|
line-height: 42px;
|
background: #f4f8fe;
|
color: #333;
|
font-size: 14px;
|
}
|
.basic-info-content {
|
background: #fff;
|
ul {
|
padding-inline-start: 0;
|
}
|
li {
|
display: flex;
|
font-size: 14px;
|
font-family: PingFangSC;
|
border-bottom: 1px solid #f9f9fb;
|
.left,
|
.right,
|
.all {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
height: 40px;
|
.content-title {
|
width: 320px;
|
text-align: right;
|
color: #555;
|
}
|
.content-data {
|
text-align: left;
|
margin-left: 25px;
|
color: #333;
|
}
|
}
|
.all {
|
width: 100%;
|
}
|
.remark {
|
width: 100%;
|
}
|
.history {
|
.content-title {
|
width: 200px;
|
color: #8b0000;
|
}
|
.content-data {
|
color: #8b0000;
|
}
|
}
|
}
|
.step-view {
|
padding: 30px 60px 5px;
|
height: 100px;
|
.step-title-view {
|
margin-top: 10px;
|
font-size: 12px;
|
color: #555;
|
position: relative;
|
.step-label {
|
margin-top: -65px;
|
height: 60px;
|
}
|
.step-btn {
|
position: absolute;
|
bottom: -25px;
|
left: 50%;
|
margin-left: -28px;
|
width: 56px;
|
height: 24px;
|
line-height: 24px;
|
text-align: center;
|
color: #2d82f4;
|
border: 1px solid #2d82f4;
|
border-radius: 15px;
|
cursor: pointer;
|
}
|
.step-desc {
|
margin-top: 15px;
|
}
|
}
|
.el-step__head.is-process {
|
color: #ff8707;
|
border-color: #ff8707;
|
}
|
.el-step__head.is-finish .el-step__line {
|
background-color: #409eff;
|
}
|
}
|
}
|
}
|
}
|
.second {
|
background: #fff;
|
.followup-records {
|
.table-view {
|
margin-top: 0 !important;
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
