<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.client_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="contact"></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="salesOpportunity"></el-tab-pane>
|
<el-tab-pane label="报价单" name="quotation"></el-tab-pane>
|
<el-tab-pane label="销售总单" name="master"></el-tab-pane>
|
<el-tab-pane label="销售子单" name="sub"></el-tab-pane>
|
<el-tab-pane label="销售明细单" name="detail"></el-tab-pane>
|
<el-tab-pane label="收款单" name="receipt"></el-tab-pane>
|
</el-tabs>
|
</div>
|
<div v-if="activeName === 'first'" class="detail">
|
<!-- 基本信息 -->
|
<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 ? item.leftValue : "--" }}</div>
|
</div>
|
<div v-if="item.rightStr" class="right">
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">{{ item.rightValue ? item.rightValue : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 客户首要联系人 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('contact')">
|
<i v-if="isContactExpand" 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="isContactExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in contactList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue ? item.leftValue : "--" }}</div>
|
</div>
|
<div v-if="item.rightStr" class="right">
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">{{ item.rightValue ? 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 ? item.leftValue : "--" }}</div>
|
</div>
|
<div v-if="item.rightStr" class="right">
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">{{ item.rightValue ? 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">工商信息</span>
|
</div>
|
<div v-show="isBusinessExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in businessInfoList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue ? item.leftValue : "--" }}</div>
|
</div>
|
<div v-if="item.rightStr" class="right">
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">{{ item.rightValue ? item.rightValue : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
<div class="business_scope">
|
<div class="content-title">{{ "经营范围：" }}</div>
|
<div class="content-data">{{ detailConfig.infomation.business_scope }}</div>
|
</div>
|
</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 ? item.leftValue : "--" }}</div>
|
</div>
|
<div v-if="item.rightStr" class="right">
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">{{ item.rightValue ? item.rightValue : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
<div class="business_scope">
|
<div class="content-title">{{ "地址信息" }}</div>
|
<div class="content-data">{{ detailConfig.infomation.detail_address }}</div>
|
</div>
|
</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">{{ detailConfig.infomation.remark }}</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>
|
<div v-if="activeName === 'contact'" class="second">
|
<Contacts :isDetail="true" :add-config="addConfig" />
|
</div>
|
<div v-if="activeName === 'second'" class="second">
|
<FollowupRecords :isDetail="true" :add-config="addConfig" />
|
</div>
|
<div v-if="activeName === 'salesOpportunity'" class="second">
|
<SalesOpportunity :isDetail="true" :add-config="addConfig" />
|
</div>
|
<div v-if="activeName === 'quotation'" class="second">
|
<Quotation :isDetail="true" :add-config="addConfig" />
|
</div>
|
<div v-if="activeName === 'master'" class="second">
|
<MasterOrder :isDetail="true" :add-config="addConfig" />
|
</div>
|
<div v-if="activeName === 'sub'" class="second">
|
<SubOrder :isDetail="true" :add-config="addConfig" />
|
</div>
|
<div v-if="activeName === 'detail'" class="second">
|
<SalesDetails :isDetail="true" :add-config="addConfig" />
|
</div>
|
<div v-if="activeName === 'receipt'" class="second">
|
<Receipt :isDetail="true" :add-config="addConfig" :source-type="1" />
|
</div>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import FollowupRecords from "@/views/client/followupRecords"
|
import Contacts from "@/views/client/contacts"
|
import SalesOpportunity from "@/views/sales/salesOpportunity"
|
import Quotation from "@/views/sales/quotation"
|
import MasterOrder from "@/views/sales/masterOrder"
|
import SubOrder from "@/views/sales/subOrder"
|
import SalesDetails from "@/views/sales/salesDetails"
|
import Receipt from "@/views/other/payment/receipt"
|
import { getContactList } from "@/api/client/contacts"
|
export default {
|
name: "DetailClientManage",
|
props: {
|
clientManageDetail: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
infomation: {}
|
}
|
}
|
}
|
},
|
components: { FollowupRecords, Contacts, SalesOpportunity, Quotation, MasterOrder, SubOrder, SalesDetails, Receipt },
|
computed: {},
|
data() {
|
return {
|
detailConfig: this.clientManageDetail,
|
activeName: "first",
|
isBasicExpand: true, // 基本信息展开
|
basicInfoList: [],
|
isContactExpand: true, // 首要联系人
|
contactList: [],
|
isDynamicExpand: true, // 动态信息
|
dynamicInfoList: [],
|
isBusinessExpand: true, // 工商信息
|
businessInfoList: [],
|
isAddressExpand: true, // 地址信息
|
addressInfoList: [],
|
isRemarkExpand: true, // 备注信息
|
isAnnexExpand: true, // 附件信息
|
addConfig: {},
|
contact_name: "",
|
contact_phone: "",
|
contact_position: "",
|
contact_wechat: "",
|
contact_email: ""
|
}
|
},
|
created() {
|
this.getContactList()
|
this.setData(this.detailConfig.infomation)
|
this.addConfig = {
|
id_name: "client_id",
|
keywordType: "客户名称",
|
keyword: this.detailConfig.infomation.name,
|
id: this.detailConfig.infomation.id,
|
common_name: this.detailConfig.infomation.name,
|
client_name: this.detailConfig.infomation.name,
|
contact_name: this.detailConfig.infomation.contact_name,
|
client_status_id: this.detailConfig.infomation.client_status_id,
|
client_id: this.detailConfig.infomation.id,
|
contact_id: this.detailConfig.infomation.contact_id
|
}
|
},
|
mounted() {},
|
methods: {
|
setData(item) {
|
this.basicInfoList = [
|
{
|
leftStr: "客户名称",
|
leftValue: item.client_name,
|
rightStr: "客户编号",
|
rightValue: item.number
|
},
|
{
|
leftStr: "客户状态",
|
leftValue: item.client_status,
|
rightStr: "销售负责人",
|
rightValue: item.member.username
|
},
|
{
|
leftStr: "客户类型",
|
leftValue: item.client_type.name,
|
rightStr: "客户来源",
|
rightValue: item.client_origin.name
|
},
|
{
|
leftStr: "重要级别",
|
leftValue: item.client_level,
|
rightStr: "公海状态",
|
rightValue: ""
|
},
|
{
|
leftStr: "所属公海",
|
leftValue: "",
|
rightStr: "下次回访日期",
|
rightValue: item.next_visit_time
|
},
|
{
|
leftStr: "最晚服务到期日",
|
leftValue: item.latest_service_time,
|
rightStr: "创建时间",
|
rightValue: ""
|
},
|
{
|
leftStr: "创建人",
|
leftValue: "",
|
rightStr: "",
|
rightValue: ""
|
}
|
]
|
this.contactList = [
|
{
|
leftStr: "联系人姓名",
|
leftValue: this.contact_name,
|
rightStr: "联系人手机",
|
rightValue: this.contact_phone
|
},
|
{
|
leftStr: "联系人职务",
|
leftValue: this.contact_position,
|
rightStr: "联系人微信",
|
rightValue: this.contact_wechat
|
},
|
{
|
leftStr: "联系人Email",
|
leftValue: this.contact_email,
|
rightStr: "",
|
rightValue: ""
|
}
|
]
|
this.dynamicInfoList = [
|
{
|
leftStr: "最新联系日期",
|
leftValue: "",
|
rightStr: "未联系天数",
|
rightValue: ""
|
},
|
{
|
leftStr: "最新推进时间",
|
leftValue: "",
|
rightStr: "",
|
rightValue: ""
|
}
|
]
|
this.businessInfoList = [
|
{
|
leftStr: "所属行业",
|
leftValue: item.Industry.name,
|
rightStr: "法定代表人",
|
rightValue: item.representative
|
},
|
{
|
leftStr: "注册时间",
|
leftValue: item.registration_time,
|
rightStr: "注册资金",
|
rightValue: item.RegisteredCapital.name
|
},
|
{
|
leftStr: "公司性质",
|
leftValue: item.EnterpriseNature.name,
|
rightStr: "客户规模",
|
rightValue: item.EnterpriseScale.name
|
}
|
]
|
this.addressInfoList = [
|
{
|
leftStr: "国家",
|
leftValue: "中国",
|
rightStr: "省份",
|
rightValue: item.Province.name
|
},
|
{
|
leftStr: "城市",
|
leftValue: item.City.name,
|
rightStr: "",
|
rightValue: ""
|
}
|
// {
|
// leftStr: "详细地址",
|
// leftValue: item.detail_address,
|
// rightStr: "",
|
// rightValue: ""
|
// }
|
]
|
},
|
handleClose() {
|
this.detailConfig.visible = false
|
},
|
// tab切换
|
tabsClick(tab, event) {
|
console.log(tab, event)
|
},
|
// 展开收起点击事件
|
expandClick(value) {
|
console.log(value)
|
if (value === "basic") {
|
this.isBasicExpand = !this.isBasicExpand
|
} else if (value === "contact") {
|
this.isContactExpand = !this.isContactExpand
|
} else if (value === "business") {
|
this.isBusinessExpand = !this.isBusinessExpand
|
} else if (value === "dynamic") {
|
this.isDynamicExpand = !this.isDynamicExpand
|
} else if (value === "address") {
|
this.isAddressExpand = !this.isAddressExpand
|
} else if (value === "remark") {
|
this.isRemarkExpand = !this.isRemarkExpand
|
} else if (value === "annex") {
|
this.isAnnexExpand = !this.isAnnexExpand
|
}
|
},
|
// 时间显示
|
dateFormat(fmt, date) {
|
let ret = ""
|
date = new Date(date)
|
const opt = {
|
"Y+": date.getFullYear().toString(), // 年
|
"m+": (date.getMonth() + 1).toString(), // 月
|
"d+": date.getDate().toString(), // 日
|
"H+": date.getHours().toString(), // 时
|
"M+": date.getMinutes().toString(), // 分
|
"S+": date.getSeconds().toString() // 秒
|
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
}
|
for (let k in opt) {
|
ret = new RegExp("(" + k + ")").exec(fmt)
|
if (ret) {
|
fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"))
|
}
|
}
|
return fmt
|
},
|
getContactList() {
|
getContactList({
|
search_map: {
|
client_id: this.clientManageDetail.infomation.id
|
},
|
page: 0,
|
pageSize: 0
|
}).then((res) => {
|
if (res.code === 200) {
|
console.log(res.data.list)
|
if (res.data.list && res.data.list.length > 0) {
|
let data = res.data.list[0]
|
console.log(data)
|
this.contact_name = data.name
|
this.contact_phone = data.phone
|
this.contact_position = data.position
|
this.contact_wechat = data.wechat
|
this.contact_email = data.email
|
}
|
}
|
this.setData(this.detailConfig.infomation)
|
})
|
}
|
}
|
}
|
</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 {
|
color: $color-primary;
|
}
|
.el-tabs__item:hover {
|
color: $color-primary;
|
}
|
.el-tabs__active-bar {
|
background-color: $color-primary;
|
}
|
.el-tabs__header {
|
margin: 0;
|
}
|
.el-drawer__body {
|
.content {
|
background-color: rgb(230, 233, 240);
|
padding: 8px;
|
.tab-view {
|
background: #fff;
|
// .tab-view-pane {
|
// position: relative;
|
.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 {
|
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;
|
}
|
}
|
.remark,
|
.all {
|
width: 100%;
|
}
|
}
|
.business_scope {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
min-height: 40px;
|
.content-title {
|
width: 320px;
|
text-align: right;
|
color: #555;
|
}
|
.content-data {
|
flex: 1;
|
padding: 5px;
|
text-align: left;
|
margin-left: 25px;
|
color: #333;
|
}
|
}
|
}
|
}
|
}
|
.second {
|
height: calc(100vh - 111px);
|
background: #fff;
|
.followup-records {
|
.table-view {
|
margin-top: 0 !important;
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
