|
|
@@ -0,0 +1,456 @@
|
|
|
+<template>
|
|
|
+ <div class="contents" v-if="item!=null">
|
|
|
+ <div class="customer-title" >
|
|
|
+ <div class="customer-name">
|
|
|
+ {{ showDuplicate?item.customerName+"[从]":item.customerName}}
|
|
|
+ <el-button size="mini" v-if="showDuplicate" v-hasPermi="['crm:customer:lookDuplicate']" @click=" getDetails" >主客户</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-if="repetition !== null" style="margin-left:10px">
|
|
|
+ <el-link @click="handleShow(repetition)" :underline="false" type="primary" >重客户编码: {{ repetition.customerCode }}</el-link>
|
|
|
+ <!-- <span class="font-small" >重客户编码: {{ repetition.customerCode }}</span> -->
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button size="mini" v-hasPermi="['crm:customer:edit']" @click=" handleEdit()">修改客户</el-button>
|
|
|
+ <el-button size="mini" v-hasPermi="['crm:customer:addTag']" @click=" handleAddTag()" >打标签</el-button>
|
|
|
+ <el-button size="mini" v-hasPermi="['crm:customer:addRemark']" @click=" handleAddRemark()" >修改备注</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-descriptions title="" :column="3" border>
|
|
|
+ <el-descriptions-item label="客户编号" >
|
|
|
+ <span v-if="item!=null">{{item.customerCode}}</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="客户名称" >
|
|
|
+ <span v-if="item!=null">{{item.customerName}}</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="手机号" >
|
|
|
+ <span v-if="item!=null">{{item.mobile}}</span>
|
|
|
+ <el-button type="text" v-if="isReceive" size="mini" @click="callNumber(item.customerId,null)">拨号</el-button>
|
|
|
+ <el-button type="text" v-if="isReceive" size="mini" @click="handleSms(item.mobile)">短信</el-button>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="性别" >
|
|
|
+ <span v-if="item!=null">
|
|
|
+ <el-tag v-for="(dict, index) in sexOptions" v-if="item.sex==dict.dictValue">{{dict.dictLabel}}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="微信号" >
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.weixin}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="所在地">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.address}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="客户来源" >
|
|
|
+ <span v-if="item!=null">
|
|
|
+ <el-tag v-for="(dict, index) in sourceOptions" v-if="item.source==dict.dictValue">{{dict.dictLabel}}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="客户类型" >
|
|
|
+ <span v-if="item!=null">
|
|
|
+ <el-tag v-for="(dict, index) in typeOptions" v-if="item.customerType==dict.dictValue">{{dict.dictLabel}}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="客户状态" >
|
|
|
+ <span v-if="item!=null">
|
|
|
+ <el-tag v-for="(dict, index) in statusOptions" v-if="item.status==dict.dictValue">{{dict.dictLabel}}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="创建时间" >
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.createTime}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="最后一次跟进时间" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.visitTime}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="入公海时间" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.poolTime}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+
|
|
|
+ <el-descriptions-item label="标签" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.tags}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+
|
|
|
+ <el-descriptions-item label="进线日期" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.registerDate}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="进线链接" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.registerLinkUrl}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="进线客户详情" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.registerDesc}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="进线客户填写时间" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.registerSubmitTime}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="进线方式" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.registerType}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="消费金额" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.payMoney}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="购买次数" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.buyCount}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="来源渠道编码" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.sourceCode}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="推荐编码" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.pushCode}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="推荐时间" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.pushTime}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+
|
|
|
+ <el-descriptions-item :label="ext.name" v-for="ext in exts" label-class-name="my-label">
|
|
|
+ <span >
|
|
|
+ {{ext.value}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="备注" label-class-name="my-label">
|
|
|
+ <span v-if="item!=null">
|
|
|
+ {{item.remark}}
|
|
|
+ </span>
|
|
|
+ <!-- <el-button size="mini" icon="el-icon-edit"></el-button> -->
|
|
|
+ </el-descriptions-item>
|
|
|
+
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <el-tabs style="margin-top:15px;" z-index = "99" type="border-card" v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="跟进记录" name="visit">
|
|
|
+ <customer-visit-list ref="visit"></customer-visit-list>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="联系人" name="contacts">
|
|
|
+ <customer-contacts ref="contacts"></customer-contacts>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="订单记录" name="storeOrder">
|
|
|
+ <customer-store-order-list ref="storeOrder"></customer-store-order-list>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="通话记录" name="voiceLogs">
|
|
|
+ <customer-voice-logs-list ref="voiceLogs"></customer-voice-logs-list>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="短信记录" name="smsLogs">
|
|
|
+ <customer-sms-logs-list ref="smsLogs"></customer-sms-logs-list>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="客户日志" name="logs">
|
|
|
+ <customer-logs-list ref="logs"></customer-logs-list>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="历史订单" name="hisOrder">
|
|
|
+ <customer-his-order-list ref="hisOrder"></customer-his-order-list>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <el-dialog :title="addTag.title" :visible.sync="addTag.open" width="600px" append-to-body>
|
|
|
+ <add-tag ref="tag" @close="closeTag()"></add-tag>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="addRemark.title" :visible.sync="addRemark.open" width="600px" append-to-body>
|
|
|
+ <add-remark ref="remark" @close="closeRemark()"></add-remark>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="addSms.title" :visible.sync="addSms.open" width="800px" append-to-body>
|
|
|
+ <add-sms ref="sms" @close="closeSms()"></add-sms>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog :title="customer.title" :visible.sync="customer.open" width="1000px" append-to-body>
|
|
|
+ <add-or-edit-customer ref="customer" @close="closeCustomer()"></add-or-edit-customer>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- <el-dialog :title="duplicate.title" :visible.sync="duplicate.open" width="800px" append-to-body>
|
|
|
+ <duplicate-customer ref="duplicateCustomer" @close="closeDuplicate()"></duplicate-customer>
|
|
|
+ </el-dialog> -->
|
|
|
+
|
|
|
+ <el-drawer size="75%" :modal="false" :title="duplicate.title" :visible.sync="duplicate.open">
|
|
|
+ <duplicate-customer ref="duplicateCustomer" />
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { listCustomerExt } from "@/api/crm/customerExt";
|
|
|
+ import customerVisitList from '../components/customerVisitList.vue';
|
|
|
+ import customerLogsList from '../components/customerLogsList.vue';
|
|
|
+ import customerSmsLogsList from '../components/customerSmsLogsList.vue';
|
|
|
+ import customerVoiceLogsList from '../components/customerVoiceLogsList.vue';
|
|
|
+ import customerStoreOrderList from '../components/customerStoreOrderList.vue';
|
|
|
+ import duplicateCustomer from '../components/duplicateCustomer.vue';
|
|
|
+ import customerContacts from './customerContacts.vue';
|
|
|
+ import customerHisOrderList from '../components/customerHisOrderList.vue';
|
|
|
+ import { getLineCustomerDetails,updateCustomer } from "@/api/crm/customer";
|
|
|
+ import addTag from './addTag.vue';
|
|
|
+ import addRemark from './addRemark.vue';
|
|
|
+ import addSms from './addSms.vue';
|
|
|
+ import addOrEditCustomer from '../components/addOrEditCustomer.vue';
|
|
|
+ export default {
|
|
|
+ name: "customer",
|
|
|
+ components: {customerHisOrderList,addOrEditCustomer,addSms,addTag,addRemark, customerContacts,customerVisitList,customerLogsList,customerVoiceLogsList,customerStoreOrderList,customerSmsLogsList,duplicateCustomer },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ customer:{
|
|
|
+ open:false,
|
|
|
+ title:"修改客户"
|
|
|
+ },
|
|
|
+ isReceive:false,
|
|
|
+ tagId:null,
|
|
|
+ tagsOptions:[],
|
|
|
+ addSms:{
|
|
|
+ open:false,
|
|
|
+ title:"发短信"
|
|
|
+ },
|
|
|
+ addTag:{
|
|
|
+ open:false,
|
|
|
+ title:"打标签"
|
|
|
+ },
|
|
|
+ addRemark:{
|
|
|
+ open:false,
|
|
|
+ title:"客户备注"
|
|
|
+ },
|
|
|
+ duplicate:{
|
|
|
+ open:false,
|
|
|
+ title:"客户详情"
|
|
|
+ },
|
|
|
+ customerId:null,
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ cityIds:[],
|
|
|
+ citys:[],
|
|
|
+ tags:[],
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: '',
|
|
|
+ receiveOptions:[],
|
|
|
+ statusOptions:[],
|
|
|
+ typeOptions:[],
|
|
|
+ sourceOptions:[],
|
|
|
+ sexOptions:[],
|
|
|
+ customerExts:[],
|
|
|
+ activeName:"",
|
|
|
+ item:null,
|
|
|
+ repetition:null,
|
|
|
+ showDuplicate:false,
|
|
|
+ dCustomerId:null,
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDicts("crm_customer_source").then((response) => {
|
|
|
+ this.sourceOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("common_sex").then((response) => {
|
|
|
+ this.sexOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("crm_customer_tag").then((response) => {
|
|
|
+ this.tagsOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("crm_customer_status").then((response) => {
|
|
|
+ this.statusOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("crm_customer_type").then((response) => {
|
|
|
+ this.typeOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("crm_customer_is_receive").then((response) => {
|
|
|
+ this.receiveOptions = response.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleShow(repetition){
|
|
|
+ this.getDetails(repetition.customerId);
|
|
|
+ },
|
|
|
+ handleEdit() {
|
|
|
+ this.customer.open = true;
|
|
|
+ var that=this;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.customer.handleUpdate(that.customerId);
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+ closeCustomer(){
|
|
|
+ this.customer.open=false;
|
|
|
+ this.getDetails(this.customerId)
|
|
|
+ },
|
|
|
+ tagsChange(e){
|
|
|
+ var item=this.tagsOptions.find(val => val.dictValue === e);
|
|
|
+ console.log(item);
|
|
|
+ this.tags.push(item.dictLabel);
|
|
|
+ this.form.tags=this.tags.toString();
|
|
|
+ },
|
|
|
+ closeSms(){
|
|
|
+ this.addSms.open=false;
|
|
|
+ this.getDetails(this.customerId)
|
|
|
+ },
|
|
|
+ handleSms(mobile){
|
|
|
+ this.addSms.open=true;
|
|
|
+ var that=this;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.sms.reset(this.item.customerId,mobile);
|
|
|
+ }, 500);
|
|
|
+
|
|
|
+ },
|
|
|
+ closeRemark(){
|
|
|
+ this.addRemark.open=false;
|
|
|
+ this.getDetails(this.customerId)
|
|
|
+ },
|
|
|
+ handleAddRemark(){
|
|
|
+ this.addRemark.open=true;
|
|
|
+ var that=this;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.remark.reset(this.item);
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ closeTag(){
|
|
|
+ this.addTag.open=false;
|
|
|
+ this.getDetails(this.customerId)
|
|
|
+ },
|
|
|
+ handleAddTag(){
|
|
|
+ this.addTag.open=true;
|
|
|
+ var that=this;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.tag.reset(this.item);
|
|
|
+ }, 500);
|
|
|
+
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ if(tab.name=="contacts"){
|
|
|
+ this.$refs.contacts.getData(this.item.customerId);
|
|
|
+ }
|
|
|
+ if(tab.name=="visit"){
|
|
|
+ this.$refs.visit.getData(this.item.customerId,this.isReceive);
|
|
|
+ }
|
|
|
+ if(tab.name=="logs"){
|
|
|
+ this.$refs.logs.getData(this.item.customerId);
|
|
|
+ }
|
|
|
+ if(tab.name=="voiceLogs"){
|
|
|
+ this.$refs.voiceLogs.getData(this.item.customerId);
|
|
|
+ }
|
|
|
+ if(tab.name=="storeOrder"){
|
|
|
+ this.$refs.storeOrder.getData(this.item.customerId);
|
|
|
+ }
|
|
|
+ if(tab.name=="smsLogs"){
|
|
|
+ this.$refs.smsLogs.getData(this.item.customerId);
|
|
|
+ }
|
|
|
+ if(tab.name=="hisOrder"){
|
|
|
+ this.$refs.hisOrder.getData(this.item.customerId);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDetails(customerId) {
|
|
|
+ var data={customerId:customerId}
|
|
|
+ this.customerId=customerId;
|
|
|
+ var that=this;
|
|
|
+ this.exts=[];
|
|
|
+ listCustomerExt(data).then(response => {
|
|
|
+ this.customerExts = response.data;
|
|
|
+ this.customerExts.forEach(element => {
|
|
|
+ var data={extId:element.extId,name:element.name,value:""};
|
|
|
+ this.exts.push(data)
|
|
|
+ });
|
|
|
+ });
|
|
|
+ getLineCustomerDetails(data).then(response => {
|
|
|
+ this.repetition = response.repetition;
|
|
|
+ this.item = response.customer;
|
|
|
+ this.isReceive=response.isReceive;
|
|
|
+ if(this.item.extJson!=null){
|
|
|
+ var extList=JSON.parse(this.item.extJson);
|
|
|
+ that.exts.forEach(item => {
|
|
|
+ extList.forEach(element => {
|
|
|
+ if(item.extId==element.extId){
|
|
|
+ item.value=element.value
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.activeName="visit"
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.visit.getData(customerId);
|
|
|
+ }, 500);
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initDuplicate(isDuplicate,dCustomerId){
|
|
|
+
|
|
|
+ this.showDuplicate=isDuplicate;
|
|
|
+ this.dCustomerId=dCustomerId;
|
|
|
+ },
|
|
|
+ handleDuplicate(){
|
|
|
+ this.duplicate.open=true;
|
|
|
+ var that=this;
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.duplicateCustomer.getDetails(that.dCustomerId);
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+ closeDuplicate(){
|
|
|
+ this.duplicate.open=false;
|
|
|
+ this.getDetails(this.customerId)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.contents{
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0px 20px;
|
|
|
+
|
|
|
+}
|
|
|
+.customer-title{
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .customer-name{
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+ .el-descriptions-item__label.is-bordered-label{
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
阿拉蕾