<template>
|
<div class="b-cont">
|
<div>
|
<sections
|
class="b-cells"
|
title="基本信息"
|
m-color="#4D88FF"
|
content-height="auto">
|
<flexbox
|
:gutter="0"
|
wrap="wrap"
|
style="padding: 10px 8px 0;">
|
<flexbox-item
|
v-for="(item, index) in fifterList"
|
:span="0.5"
|
:key="index"
|
class="b-cell">
|
<flexbox
|
v-if="item.formType === 'file'"
|
align="stretch"
|
class="b-cell-b">
|
<div class="b-cell-name">{{ item.name }}</div>
|
<div class="b-cell-value">
|
<flexbox
|
v-for="(file, index) in item.value"
|
:key="index"
|
class="f-item">
|
<img
|
class="f-img"
|
src="@/assets/img/relevance_file.png" >
|
<div class="f-name">{{ file | fileName }}</div>
|
<el-button
|
type="text"
|
@click.native="handleFile('preview', item, index)">预览</el-button>
|
<el-button
|
type="text"
|
@click.native="handleFile('download', file, index)">下载</el-button>
|
</flexbox>
|
</div>
|
</flexbox>
|
|
<flexbox
|
v-else
|
align="stretch"
|
class="b-cell-b">
|
<div class="b-cell-name">{{ item.name }}：</div>
|
<div class="b-cell-value">{{ item.value || '暂无'}}</div>
|
</flexbox>
|
</flexbox-item>
|
|
<!--<flexbox
|
v-if="crmType === 'customer' && address "
|
:gutter="0"
|
wrap="wrap">
|
<flexbox-item
|
:span="0.5"
|
class="b-cell"
|
@click.native="checkMapView(address)">
|
<flexbox
|
class="b-cell-b"
|
align="stretch">
|
<div class="b-cell-name">定位</div>
|
<div
|
class="b-cell-value"
|
style="color: #4D88FF;cursor: pointer;">{{ address.value.location }}</div>
|
</flexbox>
|
</flexbox-item>
|
<flexbox-item
|
:span="0.5"
|
class="b-cell">
|
<flexbox
|
class="b-cell-b"
|
align="stretch">
|
<div class="b-cell-name">区域</div>
|
<div class="b-cell-value">{{ address.value.address | addressShow }}</div>
|
</flexbox>
|
</flexbox-item>
|
<flexbox-item
|
:span="0.5"
|
class="b-cell">
|
<flexbox
|
class="b-cell-b"
|
align="stretch">
|
<div class="b-cell-name">详细地址</div>
|
<div class="b-cell-value">{{ address.value.detailAddress }}</div>
|
</flexbox>
|
</flexbox-item>
|
</flexbox>-->
|
</flexbox>
|
|
</sections>
|
<div style='height: 100px;'></div>
|
</div>
|
<map-view
|
v-if="showMapView"
|
:title="mapViewInfo.title"
|
:lat="mapViewInfo.lat"
|
:lng="mapViewInfo.lng"
|
@hidden="showMapView=false"/>
|
</div>
|
</template>
|
|
<script>
|
import loading from '../mixins/loading'
|
// import crmTypeModel from '@/views/clients/model/crmTypeModel'
|
import Sections from '../components/Sections'
|
// import { filedGetInformation } from '@/api/clients/common' moneyFormat
|
import { fileSize, downloadFile } from '@/utils'
|
import MapView from '@/components/MapView' // 地图详情
|
|
export default {
|
/** 客户管理 的 基本信息 */
|
name: 'CRMBaseInfo',
|
components: {
|
Sections,
|
MapView
|
},
|
filters: {
|
addressShow: function (list) {
|
// return list ? list.join(' ') : ''
|
return list.replace(/,/g, ' ')
|
},
|
fileName (file) {
|
const name = file.name && file.name.length > 10 ? (file.name.substring(0, 10) + '...') : file.name
|
return name + '(' + fileSize(file.size) + ')'
|
}
|
},
|
mixins: [loading],
|
props: {
|
/** 模块ID */
|
id: [String, Number],
|
detail: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
}
|
},
|
data () {
|
return {
|
list: [],
|
fifterList: [],
|
showMapView: false, // 控制展示地图详情
|
mapViewInfo: {}, // 地图详情信息
|
address: {
|
value: {
|
location: '',
|
address: '',
|
detailAddress: ''
|
}
|
}
|
}
|
},
|
computed: {},
|
watch: {
|
detail: function (val) {
|
this.filtersData(val)
|
}
|
},
|
mounted () {
|
this.filtersData(this.detail)
|
},
|
activated: function () {},
|
deactivated: function () {},
|
methods: {
|
/**
|
* 附件查看
|
*/
|
handleFile (type, item, index) {
|
if (type === 'preview') {
|
var previewList = item.value.map(element => {
|
element.url = element.filePath
|
return element
|
})
|
this.$bus.emit('preview-image-bus', {
|
index: index,
|
data: previewList
|
})
|
} else if (type === 'download') {
|
downloadFile({ path: item.filePath, name: item.name })
|
}
|
},
|
/**
|
* 查看地图详情
|
*/
|
checkMapView (item) {
|
if (item.value && item.value !== '') {
|
this.mapViewInfo = {
|
title: item.address,
|
lat: Number(item.lat),
|
lng: Number(item.lng)
|
}
|
this.showMapView = true
|
}
|
},
|
/** 处理数据 */
|
filtersData (item) {
|
console.log(item, this.crmType)
|
this.fifterList = []
|
switch (item.CompanyType) {
|
case 1:
|
item.CompanyType = '国企'
|
break
|
case 2:
|
item.CompanyType = '外企'
|
break
|
case 3:
|
item.CompanyType = '民营'
|
break
|
case 4:
|
item.CompanyType = '其他'
|
break
|
}
|
switch (item.ReportStatus) {
|
case 0:
|
item.ReportStatus = '--'
|
break
|
case 1:
|
item.ReportStatus = '待提交'
|
break
|
case 2:
|
item.ReportStatus = '已提交'
|
break
|
case 3:
|
item.ReportStatus = '报备成功'
|
break
|
case 4:
|
item.ReportStatus = '报备失败'
|
break
|
}
|
switch (item.SalesChanceStage) {
|
case 0:
|
item.SalesChanceStage = '--'
|
break
|
case 1:
|
item.SalesChanceStage = '初期沟通'
|
break
|
case 2:
|
item.SalesChanceStage = '需求分析'
|
break
|
case 3:
|
item.SalesChanceStage = '方案报价'
|
break
|
case 4:
|
item.SalesChanceStage = '商务谈判'
|
break
|
|
case 5:
|
item.SalesChanceStage = '成功'
|
break
|
case 6:
|
item.SalesChanceStage = '搁置'
|
break
|
}
|
switch (item.UploadStatus) {
|
case 0:
|
item.UploadStatus = '--'
|
break
|
case 1:
|
item.UploadStatus = '待上传'
|
break
|
case 2:
|
item.UploadStatus = '审核中'
|
break
|
case 3:
|
item.UploadStatus = '已上传'
|
break
|
}
|
switch (item.CompanyType) {
|
case 1:
|
item.CompanyType = '国企'
|
break
|
case 2:
|
item.CompanyType = '外企'
|
break
|
case 3:
|
item.CompanyType = '民营'
|
break
|
case 4:
|
item.CompanyType = '其他'
|
break
|
}
|
switch (item.ChancePercent) {
|
case 1:
|
item.ChancePercent = 'Failed: 0%'
|
break
|
case 2:
|
item.ChancePercent = 'pipeline: 10%'
|
break
|
case 3:
|
item.ChancePercent = 'BusinessOpporutnity: 30%'
|
break
|
case 4:
|
item.ChancePercent = 'Upside: 40%'
|
break
|
case 5:
|
item.ChancePercent = 'Forecast: 60%'
|
break
|
case 6:
|
item.ChancePercent = 'LPIOrdered: 80%'
|
break
|
}
|
switch (item.ChanceRequestType) {
|
case 0:
|
item.ChanceRequestType = 'Other'
|
break
|
case 1:
|
item.ChanceRequestType = 'LC'
|
break
|
case 2:
|
item.ChanceRequestType = 'ACAD'
|
break
|
case 3:
|
item.ChanceRequestType = 'AEC'
|
break
|
case 4:
|
item.ChanceRequestType = 'MFG'
|
break
|
case 5:
|
item.ChanceRequestType = 'MNE'
|
break
|
}
|
if (this.crmType === 'customer' || this.crmType === 'businessCustomer') {
|
this.fifterList.push(
|
{ value: item.CustomerNumber, name: '客户编号' },
|
{ value: item.CustomerName, name: '客户名称' },
|
{ value: item.CompanyType, name: '企业性质' },
|
{ value: item.SaleName, name: '销售负责人' },
|
{ value: item.SalesChanceStage, name: '商机阶段' },
|
{ value: item.ProvinceCode, name: '所属地区' },
|
{ value: item.NextFollowTimeString, name: '最新跟进时间' },
|
{ value: item.Industry, name: '行业细分' },
|
{ value: item.FirmSize, name: '设计人员数' },
|
{ value: item.Industry, name: '所属行业' },
|
{ value: item.Address, name: '通信地址' },
|
{ value: item.PostNumber, name: '邮政编码' },
|
{ value: item.Comment, name: '备注' }
|
)
|
} else if (this.crmType === 'contacts') {
|
this.fifterList.push(
|
{ value: item.RealName, name: '联系人姓名' },
|
{ value: item.Sex ? (item.Sex === 1 ? '男' : '女') : '暂无', name: '性别' },
|
{ value: item.CustomerName, name: '客户名称' },
|
{ value: item.DepartmentName, name: '部门' },
|
{ value: item.JobPosition, name: '职务' },
|
// { value: item.BirthDay, name: '生日' },
|
{ value: item.IsCustomerDefault ? '是' : '否', name: '是否为默认联系客户' },
|
{ value: item.MobilePhone, name: '联系电话' },
|
// { value: item.OfficePhone, name: '办公电话' },
|
{ value: item.Email, name: '邮箱' },
|
// { value: item.QQNumber, name: 'QQ' },
|
// { value: item.WeixinNumber, name: '微信号' },
|
{ value: item.Comment, name: '备注' },
|
{ value: item.OwerName, name: '销售负责人' }
|
// { value: item.DocumentFiles, name: '关联附件' }
|
)
|
} else if (this.crmType === 'business') {
|
this.fifterList.push(
|
{ value: item.ChanceName, name: '商机名称' },
|
{ value: item.OwerUserName, name: '销售负责人' },
|
{ value: item.ChanceNumber, name: '商机编号' },
|
{ value: item.ExpectedAmount, name: '商机金额/元' },
|
{ value: item.CustomerName, name: '客户名称' },
|
{ value: item.ExpectedDate, name: '预期成交日期' },
|
{ value: item.SalesChanceStageString, name: '商机阶段' },
|
{ value: item.ContacterName, name: '联系人' },
|
{ value: item.ChancePercent, name: '成功几率(%)' },
|
{ value: item.ProvinceCode + item.CityCode, name: '所属地区' },
|
{ value: item.ContacterName, name: '联系人' },
|
{ value: item.ContacterMobilePhone, name: '联系人方式' },
|
{ value: item.ProjectProperty, name: '项目属性' },
|
{ value: item.ChanceRequestTypeString, name: '商机类型' },
|
// { value: item.ReportStatus, name: '报备状态' },
|
// { value: item.UploadStatus, name: '商机上传状态' },
|
{ value: item.Comment, name: '说明' },
|
{ value: item.CreateTime, name: '创建时间' },
|
{ value: item.InvalidTimeString, name: '过期时间' },
|
{ value: item.ApprovalTimeString, name: '确认时间' },
|
{ value: item.SubmitTimeString, name: '上报时间' },
|
{ value: item.BusinessStatusString, name: '上报状态' },
|
{ value: item.BusinessStatusReason, name: '上报拒绝理由' },
|
{ value: item.CreateUserName, name: '创建人' },
|
{ value: item.AutoSalesChanceId, name: '欧特克商机编号' }
|
)
|
} else if (this.crmType === 'businessChances') {
|
this.fifterList.push(
|
{ value: item.ChanceName, name: '商机名称' },
|
{ value: item.OwerUserName, name: '销售负责人' },
|
{ value: item.ChanceNumber, name: '商机编号' },
|
{ value: item.ExpectedAmount, name: '商机金额/元' },
|
{ value: item.CustomerName, name: '客户名称' },
|
{ value: item.ExpectedDate, name: '预期成交日期' },
|
{ value: item.SalesChanceStageString, name: '商机阶段' },
|
{ value: item.ContacterName, name: '联系人' },
|
{ value: item.ChancePercent, name: '成功几率(%)' },
|
{ value: item.ProvinceCode + item.CityCode, name: '所属地区' },
|
{ value: item.ContacterName, name: '联系人' },
|
{ value: item.ContacterMobilePhone, name: '联系人方式' },
|
{ value: item.ProjectProperty, name: '项目属性' },
|
{ value: item.ChanceRequestTypeString, name: '商机类型' },
|
// { value: item.ReportStatus, name: '报备状态' },
|
// { value: item.UploadStatus, name: '商机上传状态' },
|
{ value: item.Comment, name: '说明' },
|
{ value: item.CreateTime, name: '创建时间' },
|
{ value: item.ApprovalTimeString, name: '确认时间' },
|
{ value: item.InvalidTimeString, name: '过期时间' },
|
{ value: item.SubmitTimeString, name: '上报时间' },
|
{ value: item.BusinessStatusString, name: '上报状态' },
|
{ value: item.BusinessStatusReason, name: '上报拒绝理由' },
|
{ value: item.CreateUserName, name: '创建人' },
|
{ value: item.AutoSalesChanceId, name: '欧特克商机编号' }
|
)
|
} else {
|
this.fifterList = []
|
}
|
// console.log(this.fifterList)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.b-cont {
|
position: relative;
|
padding: 0 80px 20px;
|
}
|
|
.b-cells {
|
margin-top: 25px;
|
}
|
|
.b-cell {
|
padding: 0 10px;
|
.b-cell-b {
|
width: auto;
|
padding: 8px;
|
.b-cell-name {
|
width: 100px;
|
margin-right: 10px;
|
font-size: 14px;
|
flex-shrink: 0;
|
color: #777;
|
}
|
.b-cell-value {
|
font-size: 13px;
|
color: #333;
|
white-space: pre-wrap;
|
word-wrap: break-word;
|
}
|
.b-cell-foot {
|
flex-shrink: 0;
|
display: block;
|
width: 15px;
|
height: 15px;
|
margin-left: 8px;
|
}
|
}
|
}
|
|
.f-item {
|
padding: 3px 0;
|
height: 25px;
|
.f-img {
|
position: block;
|
width: 15px;
|
height: 15px;
|
padding: 0 1px;
|
margin-right: 8px;
|
}
|
.f-name {
|
color: #666;
|
font-size: 12px;
|
margin-right: 10px;
|
}
|
}
|
</style>
|
