renkang_companyui/src/views/crm/components/customerDetails.vue

<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=" handleDuplicate()" >主客户</el-button>
            </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-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="600px" 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 { getCustomerDetails,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: {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,
                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: {
            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);
                }
            },
            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)
                    });
                });
                getCustomerDetails(data).then(response => {
                    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>