ylrz_scrm_companyUI/src/views/qw/externalContact/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=" getDetails" >主客户</el-button>
            </div>
            <div>
                <el-button size="mini"   @click="handleBindMiniCustomer()">绑定小程序客户</el-button>
                <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,null,null)">拨号</el-button>-->
<!--                 <el-button type="text" v-if="isReceive" size="mini" @click="handleSms(item.mobile)">短信</el-button>-->
                    <el-button type="text"  size="mini" @click="callNumber(item.customerId,null,null,null)">拨号</el-button>
                    <el-button type="text"  size="mini" @click="handleSms(item.mobile)">短信</el-button>
                 <el-button icon="el-icon-search" size="mini" @click="handleMobile" style="margin-left: 20px;" circle v-hasPermi="['crm:customer:query2']"></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="绑定小程序客户" label-class-name="my-label">
                <div v-if="item!=null">
                       <el-tag
                         v-if="item.userId!=null"
                         type="success"
                         size="mini"
                         plain>
                          已绑定
                        </el-tag >
                        <el-tag
                          v-else
                          type="info"
                          size="mini"
                          plain>
                          暂未绑定
                        </el-tag >
                </div>
          </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-tab-pane label="课程记录" name="courseRecord">
              <div v-if="item!=null">
                <div v-if="item.userId!=null">
                  <courseStudyList ref="courseStudyList"></courseStudyList>
                </div>
                <div v-else>暂没有绑定小程序客户噢，请先
                  <el-button size="small"  type="warning"  @click="handleBindMiniCustomer()">绑定小程序客户</el-button>
                </div>
              </div>
            </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="MiniDialog.title" :visible.sync="MiniDialog.open" width="800px" append-to-body>
          <miniCustomer ref="miniCustomer" @bindMiniCustomerId="bindMiniCustomerId"></miniCustomer>
        </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 '@/views/crm/components/customerVisitList.vue';
    import customerLogsList from '@/views/crm/components/customerLogsList.vue';
    import customerSmsLogsList from '@/views/crm/components/customerSmsLogsList.vue';
    import customerVoiceLogsList from '@/views/crm/components/customerVoiceLogsList.vue';
    import customerStoreOrderList from '@/views/crm/components/customerStoreOrderList.vue';
    import duplicateCustomer from '@/views/crm/components/duplicateCustomer.vue';
    import customerContacts from '@/views/crm/components/customerContacts.vue';
    import customerHisOrderList from '@/views/crm/components/customerHisOrderList.vue';
    import { getCustomerDetails1,updateCustomer,getCustomer1 } from "@/api/crm/customer";
    import addTag from '@/views/crm/components/addTag.vue';
    import addRemark from '@/views/crm/components/addRemark.vue';
    import addSms from '@/views/crm/components/addSms.vue';
    import addOrEditCustomer from '@/views/crm/components/addOrEditCustomer.vue';
    import  miniCustomer  from "@/views/qw/externalContact/miniCustomer.vue";
    import  courseStudyList  from "@/views/qw/externalContact/courseStudyList.vue";
    export default {
        name: "customer",
        components: {customerHisOrderList,addOrEditCustomer,addSms,addTag,addRemark, customerContacts,customerVisitList,customerLogsList,customerVoiceLogsList,customerStoreOrderList,customerSmsLogsList,duplicateCustomer,miniCustomer,courseStudyList},
        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,

                //小程序客户列表
                MiniCustomerList:[],
                MiniDialog:{
                  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("sys_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: {
            handleMobile(){
                const customerId = this.item.customerId;
                getCustomer1(customerId).then(response =>{
                    this.item.mobile = response.mobile;
                })
            },
            handleBindMiniCustomer(){

                this.MiniDialog.title='绑定小程序客户'
                this.MiniDialog.open=true;
            },
            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,1);
                }, 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);
                }
                if(tab.name=="courseRecord"){
                    this.$refs.courseStudyList.getData(this.item.userId);
                }
            },

            //CRM绑定小程序客户
            bindMiniCustomerId(row){

              var data={customerId:this.item.customerId,userId:row}
              updateCustomer(data).then(res=>{

                 if (res.code==200){
                   this.$message.success('绑定成功')
                 }else {
                   this.$message.error('绑定失败:',res.msg)
                 }
                 this.getDetails(this.customerId)
                 this.MiniDialog.open=false;
                 this.$emit("refreshList")
              })
            },

            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)
                    });
                });
                getCustomerDetails1(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>