<style>
.salesApprovalLayer{position: fixed; z-index: 99; background: rgba(0,0,0,.1); width: 100%; height: 100%; left: 0; top: 0;}
.salesApprovalLayer .rightZero{right: 0px;}
.salesApprovalLayercontentDiv{width: 420px; background: #fff; height: 100%; overflow: auto; top: 0; right:-420px; position: fixed;box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.1);transition: right .5s;}
.salesApprovalLayercontentDiv .title{width:420px; height:48px; line-height: 48px; text-indent: 20px; font-size: 16px; color: #333; background:#EDEEF0;}
.salesApprovalLayercontentDiv .list{}
.salesApprovalLayercontentDiv .list .item{width: 380px;height: auto; overflow: hidden; border:1px solid #E6E6E6; margin: 20px 0 20px 20px; padding: 20px;}
.salesApprovalLayercontentDiv .list .item .topMsg{overflow: hidden;padding-bottom: 20px; border-bottom: 1px solid #E6E6E6;}
.salesApprovalLayercontentDiv .list .item .topMsg>img{float: left; margin-right: 13px;}
.salesApprovalLayercontentDiv .list .item .topMsg .newGuest{width: 50px; height: 18px; text-align: center; font-size: 14px; color: #257BF1; background: #DAE4FF;}
.salesApprovalLayercontentDiv .list .item .bottomMsg{padding: 15px 0;}
.salesApprovalLayercontentDiv .list .itemAnswer{width: 380px;height: auto; margin: 20px 0 20px 20px; padding: 20px; background: #EBF0FF;}
.salesApprovalLayercontentDiv .list .itemAnswer .answerItem{border-bottom: 1px solid #BCC0CC; overflow: hidden; padding: 15px 0;}
.salesApprovalLayercontentDiv .list .itemAnswer .answerItem>img{float: left;width: 24px; height: 24px; border-radius: 12px;margin-right: 10px;}
.salesApprovalDetail .salesApprovalLayercontentBtn{position: fixed; bottom: 0; background: #f5f5f5; width:420px; height:190px; padding: 10px 20px;}
.salesApprovalDetail .salesApprovalLayercontentBtn>div{border-bottom: 1px solid #D9D9D9; height: auto; padding-bottom: 10px; overflow: hidden;}
.salesApprovalDetail .personMsg{width: 320px; height: 70px; padding: 13px 20px 9px 13px; margin: 20px 0; background: #E6E6E6; border-radius: 4px;}
.salesApprovalDetail .personMsg>img{float: left; margin-right: 10px; width: 48px; height: 48px; border-radius: 24px;}
.salesApprovalDetail .personMsg .color{color: #257BF1; margin-right: 20px;}
.salesApprovalDetailTable{width: 100%; font-size:14px; color: #333;}
.salesApprovalDetailTable tr{border-bottom: 2px solid #333;}
.salesApprovalDetailTable tr th{background: #E6E6E6;height:30px; font-size: 12px; text-align: left; text-indent: 25px;}
.salesApprovalDetailTable tr{background: #fff;text-align: left;}
.salesApprovalDetailTable tr td{height: 60px; padding-left:25px; border-bottom:1px solid #f5f5f5;}
.salesApprovalDetail .lastVisitContent{background: #f5f5f5; font-size: 12px; padding: 5px 12px; margin-top: 8px;}
</style>
<template>
<div class="salesApprovalDetail">
<div :class="{salesApprovalLayer:showlayer}" @click="closeLayer">
<div :class="{salesApprovalLayercontentDiv:true,rightZero:isTransition}" class="ownScrollbarStyle" @click.stop>
<div class="title">{{personMsg[0].accountName}}{{titleDate}}工作计划</div>
<div class="list">
<div class="item" v-for="item in visitIdDetailList">
<div class="topMsg">
<img v-if='!item.photo' src="../../assets/img/litheader.png"/>
<img v-if='item.photo' :onerror="defaultImg" :src='item.photo'/>
<p>{{item.customerName}}</p>
<p class="mt5">
<i class="iconfont icon-img_dianhua fz12" style="color: #09d49d;"></i>
<span class="fz14 color333">{{item.contact}}</span>
<span class="fz14 color333">{{item.contactNumber}}</span>
<span class="fr newGuest" v-show="item.createFromType=='2'">新客户</span>
</p>
<p class="fz12 color999 mt5">{{item.expectVisitDateTimeStr}}</p>
</div>
<p v-if="item.isHaveVisit===1" class="fz14 mt10 color666">
<i class="iconfont icon-shijian colorccc" ></i> 历史访问
<span class="fz12">{{item.dataLastVist.timestr}}</span>
</p>
<div v-if="item.isHaveVisit===1" style="border-bottom: 1px solid #ccc; padding-bottom: 10px;">
<p class="fz12 mt10">流程类型：{{item.dataLastVist.salesProcess}}</p>
<p class="fz12 mt10">访问记录：</p>
<p v-if="item.dataLastVist.remark!=''" class="lastVisitContent">{{item.dataLastVist.remark}}</p>
<p class="fz12 mt10">沟通内容：</p>
<p v-if="item.dataLastVist.visitRecord!=''" class="lastVisitContent">{{item.dataLastVist.visitRecord}}</p>
</div>
<div class="bottomMsg">
<p class="fz14 color666">
<i class="iconfont icon-ico-renwuyaoqiu fz12 colorccc" ></i>
访问记录
</p>
<p class="fz12 color333 mt10">
{{item.remark==''?'无':item.remark}}
</p>
<p class="fz14 color666 mt10">
<i class="iconfont icon-ico-renwuyaoqiu fz12 colorccc"></i>
沟通内容
</p>
<p class="fz12 color333 mt10">
{{item.visitRecord==''?'无':item.visitRecord}}
</p>
</div>
</div>
<div class="itemAnswer" v-show="answerDetailList.length>0">
<p class="fz16 color666"><i class="iconfont icon-ico-renwuyaoqiu fz14 color999" ></i> 审批意见</p>
<div class="answerItem" v-for="item in answerDetailList">
<img v-if='!item.emPhoto' src="../../assets/img/litheader.png"/>
<img v-if='item.emPhoto' :onerror="defaultImg" :src='item.emPhoto'/>
<p>
<span class="fz14 color333">{{item.createBy}}</span>
<span class="fz12 color999">{{item.createDate}}</span>
</p>
<p class="fz12 color333 mt10" style="padding-left: 35px;">{{item.adviceContent}}</p>
</div>
</div>
</div>
<div style="height: 190px; width: 100%;"><!--空白暂位,防止下面漂浮按钮遮挡内容--></div>
<div class="salesApprovalLayercontentBtn">
<div>
<span class="fz14 color333">审批意见</span>
<span class="fr cursorpointer colorE95252" @click="closeLayer">取消</span>
</div>
<p class="mt20">
<el-input type="textarea" v-model='ideaMsg.AdviceContent'></el-input>
</p>
<input type="button" class="normalBtn mt20 fr" value="发布" @click="saveIdea"/>
</div>
</div>
</div>
<div class="personMsg">
<img v-if='!personMsg[0].photo' src="../../assets/img/litheader.png"/>
<img v-if='personMsg[0].photo' :onerror="defaultImg" :src='personMsg[0].photo'/>
<p><span class="fz16 color333">{{personMsg[0].accountName}}</span></p>
<p class="mt5"><span class="fz14 color">待审批 {{personMsg[0].waringAudit}}</span><span class="fz14 color666">已审批 {{personMsg[0].audited}}</span></p>
</div>
<table class="salesApprovalDetailTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
<tr>
<th width="20%">工作计划标题</th>
<th width="20%">内容摘要</th>
<th width="20%">提交时间</th>
<th width="20%">状态</th>
<th width="20%">操作</th>
</tr>
<tr v-for="item in list">
<td class="fz16">{{item.title}}</td>
<td class="fz14 color333">
1.新增客户{{item.newClientNum}}名；<br />
2.拜访老客{{item.oldClientNum}}名
</td>
<td>
<i class="iconfont icon-ico-shijianfanwei color999"></i>
{{item.expectVisitDate}}
</td>
<td>
<img v-show="item.isAdvertising=='2'" src="../../assets/img/dsp.png" />
<img v-show="item.isAdvertising=='1'" src="../../assets/img/ysp.png" />
</td>
<td>
<input type="button" value="查看详情" class="normalBtn" style="margin-left: 0;" @click="getDetail(item)"/>
</td>
</tr>
</table>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize
:total=total>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
titleDate:'',
EmpId:0,
loading:true,
isTransition:false,
showlayer:false,
defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
msg:{
pageIndex:1,
pageSize:10,
StartTime:'',
EndTime:'',
EmpId:'',
},
ideaMsg:{
AdviceContent:'',
EmployeeId:0,
VisitDate:'',
},
currentPage:1,
total:0,
list:[],
answerDetailList:[],
visitIdDetailList:[],
personMsg:[],
}
},
methods:{
getPersonMsg(){
this.apipost('app_customer_GetPlanAuditForByEmployeeId',{EmpId:this.$route.query.id},res=>{
if(res.data.resultCode==1){
this.personMsg=res.data.data
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
getList(){
this.loading=true
this.apipost('app_customer_GetWedPlanAuditForEmpInfo',this.msg,res=>{
if(res.data.resultCode==1){
this.list=res.data.data.pageData
this.total=res.data.data.count
this.loading=false
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
saveIdea(){
this.apipost('app_today_visit_SetVisitAdvice',this.ideaMsg,res=>{
if(res.data.resultCode==1){
this.$message.success(res.data.message)
this.getList()
this.closeLayer()
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
closeLayer() {
let _this = this;
setTimeout(function() {
_this.showlayer = false;
}, 300)
this.isTransition = false;
this.ideaMsg.AdviceContent=''
},
getDetail(obj){
this.showlayer = true;
this.isTransition = true;
this.titleDate=this.ideaMsg.VisitDate=obj.expectVisitDate
this.apipost('app_today_visit_GetVisitAdviceList',{EmployeeId:this.EmpId,VisitDate:obj.expectVisitDate},res=>{
if(res.data.resultCode==1){
this.answerDetailList=res.data.data
}else{
this.$message.error(res.data.message)
}
},err=>{})
this.apipost('app_get_my_visit_plan_list',{empId:this.EmpId,visitDate:obj.expectVisitDate},res=>{
if(res.data.resultCode==1){
this.visitIdDetailList=res.data.data
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList()
},
resetPageIndex() {
this.msg.pageIndex = 1;
this.currentPage = 1
},
},
mounted(){
this.getList()
this.getPersonMsg()
this.ideaMsg.EmployeeId=this.msg.EmpId=this.EmpId=this.$route.query.id
}
}
</script>