<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"
|
align="center"/>-->
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
: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==='行业细分'"
|
:tableType="scope.column.label"
|
@queryList="queryList">
|
</c-r-m-table-filter>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="operation">
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">操作</div>
|
</template>
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click='editList(scope.row)'>编辑</el-button>
|
<!--<el-button type="text" size="small" @click='deleteCustomer(scope.row.Id)'>删除</el-button>
|
<el-button type="text" size="small" @click='followCustomer(scope.row)'>跟进</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>
|
|
<!--跟进 -->
|
<create-view
|
v-if="isFollowDialog"
|
:loading="followLoading"
|
:body-style="{ height: '100%'}">
|
<flexbox
|
direction="column"
|
align="stretch"
|
class="crm-create-container">
|
<flexbox class="crm-create-header">
|
<div style="flex:1;font-size:18px;color:#333;font-weight: 700;">跟进记录</div>
|
<img
|
class="close"
|
src="@/assets/img/task_close.png"
|
@click="followHandleClose" >
|
</flexbox>
|
<div class="crm-create-flex">
|
<create-sections title="基本信息">
|
<flexbox
|
direction="column"
|
align="stretch">
|
<div class="crm-create-body">
|
<el-form
|
ref="followDialogRef"
|
label-position="left"
|
label-width="auto"
|
class="crm-create-box"
|
:model="followForm"
|
:rules="followFormRules">
|
<el-form-item
|
v-for="(item, index) in followList"
|
:label="item.value"
|
:prop="item.field"
|
:class="{ 'crm-create-block-item': item.showblock, 'crm-create-item': !item.showblock }"
|
:style="{'padding-left': getPaddingLeft(item, index), 'padding-right': getPaddingRight(item, index)}"
|
:key="index">
|
<span slot="label">{{ item.value }}:</span>
|
<template v-if="item.type === 'select'">
|
<el-select
|
style="width: 100%;"
|
v-model="followForm[item.field]"
|
filterable
|
placeholder="请选择"
|
@change='getSelectVal(item.field)'>
|
<el-option
|
v-for="(optionItem, index) in optionsList[item.field].list"
|
:key="index"
|
:label="optionItem"
|
:value="index"/>
|
</el-select>
|
</template>
|
<template v-else-if="item.type === 'datetime'">
|
<el-date-picker
|
v-model="followForm[item.field]"
|
style="width: 100%;"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择日期"/>
|
</template>
|
<el-input placeholder="请输入内容" type="textarea" v-model="followForm[item.field]" v-else-if="item.type === 'textarea'">
|
</el-input>
|
<el-tooltip effect="light" :disabled='!item.tips' :content="item.tips" placement="right" v-else>
|
<el-input
|
v-model="followForm[item.field]"
|
:disabled="item.disabled "/>
|
</el-tooltip>
|
</el-form-item>
|
</el-form>
|
</div>
|
</flexbox>
|
</create-sections>
|
<div class="handle-bar">
|
<el-button
|
class="handle-button"
|
@click.native="followHandleClose">取消</el-button>
|
<el-button
|
class="handle-button"
|
type="primary"
|
@click.native="followDialogSubmit">保存</el-button>
|
</div>
|
</div>
|
</flexbox>
|
</create-view>
|
<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"
|
class="d-view"
|
@handle="handleHandle"/>
|
<!-- 编辑页面 -->
|
<c-r-m-create-view
|
v-if="isCreate"
|
:action="{type: 'update', id: editData.Id, data: editData}"
|
:crm-type="crmType"
|
@save-success="listHeadHandle"
|
@hiden-view="isCreate=false"/>
|
<fields-set
|
:crm-type="crmType"
|
:dialog-visible.sync="showFieldSet"
|
@set-success="setSave"/>
|
</div>
|
</template>
|
|
<script>
|
import table from '../mixins/table'
|
import CreateView from '@/components/CreateView'
|
import CreateSections from '@/components/CreateSections'
|
import CRMCreateView from '../components/CRMCreateView'
|
import CRMImport from '../components/CRMImport'
|
import CRMExport from '../components/CRMExport'
|
import CRMTableFilter from '../components/CRMTableFilter'
|
import CRMAllDetail from '@/views/clients/components/CRMAllDetail'
|
import BusinessCheck from './components/BusinessCheck' // 相关商机
|
import { DeleteCustomer } from '@/api/customermanagement/customerManage'
|
// import moment from 'moment'
|
// import { getDateFromTimestamp } from '@/utils'
|
import {
|
XhCustomerAddress
|
} from '@/components/CreateCom'
|
export default {
|
name: 'ClientManage',
|
components: {
|
CRMAllDetail,
|
CRMCreateView,
|
BusinessCheck,
|
CRMImport,
|
CRMExport,
|
XhCustomerAddress,
|
CreateView,
|
CreateSections,
|
CRMTableFilter
|
},
|
filters: {
|
/** 根据type 找到组件 */
|
typeToComponentName (formType) {
|
if (formType === 'map_address') {
|
return 'XhCustomerAddress'
|
}
|
}
|
},
|
mixins: [table],
|
computed: {
|
followList: function () {
|
return [
|
{ field: 'CustomerName', value: '客户名称', showblock: false },
|
{ field: 'ChanceName', value: '关联商机', showblock: false },
|
{ field: 'SalesChanceStage', value: '销售进度', showblock: false, type: 'select' },
|
{ field: 'NextFollowTime', value: '下次联系时间', showblock: false, type: 'datetime' },
|
{ field: 'RealName', value: '联系人姓名', showblock: false },
|
{ field: 'ContacterMobile', value: '联系方式', showblock: false, type: 'select' },
|
{ field: 'Command', value: '描述', showblock: false, type: 'textarea' }
|
]
|
}
|
},
|
data () {
|
return {
|
timer: '',
|
fieldList: [
|
{ field: 'CustomerNumber', value: '客户编号' },
|
{ field: 'CustomerName', value: '客户名称' },
|
{ field: 'Contacter', value: '联系人' },
|
{ field: 'ContactMobile', value: '手机号' },
|
{ field: 'OfficePhone', value: '座机号' },
|
{ field: 'CompanyType', value: '企业性质' },
|
{ field: 'ProvinceCode', value: '所属地区' },
|
{ field: 'FirmSize', value: '设计人员数' },
|
{ field: 'Industry', value: '行业细分' },
|
// { field: 'BusinessScope', value: '业务范围' },
|
{ field: 'Address', value: '通信地址' },
|
{ field: 'PostNumber', value: '邮政编码' },
|
{ field: 'SaleName', value: '销售负责人' },
|
// { field: 'Comment', value: '备注' }
|
{ field: 'CreateUserName', value: '创建人' }
|
],
|
formInline: {},
|
optionsList: {
|
SalesChanceStage: {
|
field: 'SalesChanceStage',
|
list: ['初期沟通', '需求分析', '方案报价', '商务谈判', '成功', '成功', '搁置']
|
},
|
ContacterMobile: {
|
field: 'ContacterMobile',
|
list: ['电话', '微信', '信息', '其他']
|
}
|
},
|
// 导入
|
showCRMImport: false,
|
// 导出
|
showCRMExport: false,
|
// 导出选中参数
|
exportParams: {},
|
crmType: 'customer',
|
loading: false,
|
addLoading: false,
|
rightsList: [],
|
radioInput: '',
|
otherInput: '',
|
isOtherOpt: false,
|
// 跟进弹窗
|
isFollowDialog: false,
|
followLoading: false,
|
followFormRules: {
|
CustomerName: [
|
{ required: true, message: '联系人不能为空', trigger: 'blur' }
|
]
|
},
|
followForm: {}
|
}
|
},
|
mounted () {
|
},
|
methods: {
|
// 获取左边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 === 'CustomerName' ||
|
column.property === 'businessCheck'
|
) {
|
return { color: '#4D88FF', cursor: 'pointer' }
|
} else {
|
return ''
|
}
|
},
|
// ----delete
|
deleteCustomer (id) {
|
this.$confirm('确定删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
DeleteCustomer([{'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: '已取消删除'
|
})
|
})
|
},
|
followCustomer (row) {
|
// this.isFollowDialog = true
|
this.rowID = row.Id
|
this.rowType = 'customer'
|
this.showDview = true
|
this.timer = new Date().getTime()
|
},
|
followHandleClose () {
|
this.isFollowDialog = false
|
this.$refs.followDialogRef.resetFields()
|
},
|
followDialogSubmit () {
|
this.isFollowDialog = false
|
this.$refs.followDialogRef.resetFields()
|
},
|
/**
|
* 新建客户同时新建联系人
|
*/
|
relativeBusinessClick (data) {
|
this.rowID = data.businessId
|
this.rowType = 'business'
|
this.showDview = true
|
},
|
// 商机信息查看
|
businessCheckClick (e, scope) {
|
if (scope.row.businessCount === 0) {
|
return
|
}
|
this.$set(scope.row, 'show', !scope.row.show)
|
// const popoverEl = e.target.parentNode
|
// popoverEl.__vue__.showPopper = !scope.row.show
|
},
|
businessClose (e, scope) {
|
// const popoverEl = e.parentNode
|
// popoverEl.__vue__.showPopper = false
|
this.$set(scope.row, 'show', false)
|
},
|
exportFile () {
|
this.showCRMExport = true
|
},
|
importFile () {
|
this.showCRMImport = true
|
},
|
queryList (data) {
|
console.log(data)
|
this.headObj = data
|
this.getList(data)
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../styles/table.scss';
|
.crm-create-container {
|
position: relative;
|
height: 100%;
|
}
|
|
.crm-create-flex {
|
position: relative;
|
overflow-x: hidden;
|
overflow-y: auto;
|
flex: 1;
|
}
|
|
.crm-create-header {
|
height: 40px;
|
margin-bottom: 20px;
|
padding: 0 10px;
|
flex-shrink: 0;
|
display: flex;
|
.close {
|
display: block;
|
// width: 15px;
|
// height: 15px;
|
margin-right: -10px;
|
padding: 10px;
|
cursor: pointer;
|
}
|
}
|
|
.crm-create-body {
|
flex: 1;
|
// overflow-x: hidden;
|
// overflow-y: auto;
|
max-height: 500px;
|
}
|
|
/** 将其改变为flex布局 */
|
.crm-create-box {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0 10px;
|
}
|
|
.crm-create-item {
|
flex: 0 0 45%;
|
flex-shrink: 0;
|
// overflow: hidden;
|
padding-bottom: 30px;
|
}
|
|
// 占用一整行
|
.crm-create-block-item {
|
flex: 0 0 100%;
|
flex-shrink: 0;
|
padding-bottom: 10px;
|
}
|
|
.el-form-item /deep/ .el-form-item__label {
|
// line-height: 32px;
|
font-size: 13px;
|
color: #333333;
|
position: relative;
|
padding-left: 8px;
|
padding-bottom: 0;
|
}
|
|
.el-form /deep/ .el-form-item {
|
margin-bottom: 0px;
|
}
|
|
.el-form /deep/ .el-form-item.is-required .el-form-item__label:before {
|
content: '*';
|
color: #f56c6c;
|
margin-right: 4px;
|
position: absolute;
|
left: 0;
|
top: 8px;
|
}
|
|
.handle-bar {
|
position: relative;
|
.handle-button {
|
float: right;
|
margin-top: 5px;
|
margin-right: 20px;
|
}
|
}
|
|
.el-button + .el-button {
|
margin-left: 0;
|
}
|
.container{
|
position: relative;
|
.popover-foot{
|
position: relative;
|
left: 38%;
|
width: 100%;
|
margin-bottom: 30px;
|
}
|
}
|
.content {
|
position: relative;
|
padding: 32px 40px;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 40px;
|
height: 355px;
|
overflow: hidden;
|
overflow-y: auto;
|
border-bottom: 1px solid #f1f1f1;
|
.content-wrap{
|
width: 100%;
|
}
|
.otherOpt{
|
margin-bottom: 15px;
|
width: 100%;
|
}
|
p{
|
margin-bottom: 36px;
|
font-size: 14px;
|
font-weight: 550;
|
color: #333;
|
|
}
|
.con-group{
|
margin-bottom: 28px;
|
}
|
.content-wrap /deep/.el-radio-group .el-radio{
|
margin-right: 64px;
|
margin-bottom: 12px;
|
}
|
.content-wrap /deep/.el-radio-group .el-radio .el-radio__label{
|
font-weight: 400;
|
color: #666666;
|
font-size: 14px;
|
}
|
}
|
.header {
|
padding: 16px 30px;
|
flex-shrink: 0;
|
border-bottom: 1px solid #F1F1F1;
|
.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: 5px;
|
right: 10px;
|
padding: 10px;
|
}
|
}
|
.customer{
|
// .xr-btn--orange{
|
// background-color: #ff6a00;
|
// border-color: #ff6a00;
|
// }
|
.customerName{
|
cursor:pointer;
|
// color: #ff6a00
|
}
|
}
|
</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;
|
}
|
.user-dialog{
|
height: 20vh;
|
}
|
.base-dialog{
|
height: 35vh;
|
}
|
.followDialog{
|
height: 35vh;
|
}
|
.new-cusDialog-form {
|
overflow-y: auto;
|
padding: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.new-cusDialog-form /deep/ .el-form-item {
|
// width: 50%;
|
margin: 0;
|
padding-bottom: 10px;
|
}
|
.new-cusDialog-form /deep/ .el-form-item .el-form-item__label {
|
line-height: normal;
|
font-size: 13px;
|
color: #333333;
|
position: relative;
|
padding-bottom: 8px;
|
}
|
.new-cusDialog-form /deep/ .crm-create-item.el-form-item .el-form-item__content {
|
width: 70%;
|
}
|
.new-cusDialog-form /deep/ .crm-create-block-item.el-form-item .el-form-item__content {
|
width: 90%;
|
}
|
.new-cusDialog-form /deep/ .crm-create-item.el-form-item .el-form-item__content .el-input.is-disabled .el-input__inner{
|
cursor: pointer;
|
}
|
.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;
|
}
|
</style>
|
