920 lines
34 KiB
Vue
920 lines
34 KiB
Vue
<template>
|
||
|
||
<!-- 中间数据 -->
|
||
<div class="layout-center-center-wrap flex-row justify-content-between">
|
||
<!-- 左边数据 -->
|
||
<div class="layout-center-left-wrap flex-row justify-content-between">
|
||
<div class="layout-center-left1-wrap flex-column justify-content-start">
|
||
<span class="left-rbobot">
|
||
<img src="../../../assets/image/mediate/m-info-robot.png"/>
|
||
</span>
|
||
<span class="separation"></span>
|
||
|
||
<span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @mouseenter="handlerMouseenter(1)">
|
||
<img src="../../../assets/image/mediate/m-info1.png"/>
|
||
<a>基本信息</a>
|
||
</span>
|
||
<span class="left-img-info flex-column" v-if="baseInfo.jointDebt == 1" :class="leftActive == 8 ?'active':''" @mouseenter="handlerMouseenter(8)">
|
||
<img src="../../../assets/image/mediate/m-info8.png"/>
|
||
<a>共债</a>
|
||
</span>
|
||
<span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @mouseenter="handlerMouseenter(2)">
|
||
<img src="../../../assets/image/mediate/m-info2.png"/>
|
||
<a>联系人</a>
|
||
</span>
|
||
<span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @mouseenter="handlerMouseenter(3)">
|
||
<img src="../../../assets/image/mediate/m-info3.png"/>
|
||
<a>案件材料</a>
|
||
</span>
|
||
<span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @mouseenter="handlerMouseenter(4)">
|
||
<img src="../../../assets/image/mediate/m-info4.png"/>
|
||
<a>案件文书</a>
|
||
</span>
|
||
<span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @mouseenter="handlerMouseenter(5)">
|
||
<img src="../../../assets/image/mediate/m-info5.png"/>
|
||
<a>还款计划</a>
|
||
</span>
|
||
<span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @mouseenter="handlerMouseenter(6)">
|
||
<img src="../../../assets/image/mediate/m-info6.png"/>
|
||
<a>还款凭证</a>
|
||
</span>
|
||
</div>
|
||
<div class="layout-center-left2-wrap">
|
||
<el-scrollbar :style="'height:'+`${leftContentHeight}`+'px'">
|
||
<!-- 债务信息 -->
|
||
<div v-if="leftActive == 1" class="case-debt-info">
|
||
<div class="descriptions-t" style="position: relative;">
|
||
<div class="mediate-status-log">
|
||
<img v-if="baseInfo.mediateStatus == 4" src="../../../assets/image/mediate/mediatefail.png" />
|
||
<img v-if="baseInfo.mediateStatus == 5" src="../../../assets/image/mediate/mediatesuccess.png" />
|
||
</div>
|
||
<div class="f16 f-weight600 descriptions-t-title">基本信息</div>
|
||
<div class="flex-row descriptions-t-item">
|
||
<div class="descriptions-t-item-l color-86909C">案件包名称:</div>
|
||
<div class="descriptions-t-item-r">{{thisCaseInfo.casePkg.pkgName}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item bgColor-F7F8FA">
|
||
<div class="descriptions-t-item-l color-86909C">金融产品名称:</div>
|
||
<div class="descriptions-t-item-r">{{thisCaseInfo.productTypeId}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item">
|
||
<div class="descriptions-t-item-l color-86909C">金融机构名称:</div>
|
||
<div class="descriptions-t-item-r">{{thisCaseInfo.financialOrgName}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item bgColor-F7F8FA">
|
||
<div class="descriptions-t-item-l color-86909C">案件编号:</div>
|
||
<div class="descriptions-t-item-r">{{thisCaseInfo.caseNo}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item">
|
||
<div class="descriptions-t-item-l color-86909C">合同名称:</div>
|
||
<div class="descriptions-t-item-r">{{thisCaseInfo.fields.find(item => item.fieldKey == 'contactName').fieldValue}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item bgColor-F7F8FA">
|
||
<div class="descriptions-t-item-l color-86909C">被申请人姓名:</div>
|
||
<div class="descriptions-t-item-r color-1960F4">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR' && item.type == '本人').name}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item ">
|
||
<div class="descriptions-t-item-l color-86909C">被申请人身份证:</div>
|
||
<div class="descriptions-t-item-r">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR' && item.type == '本人').cardNo}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item bgColor-F7F8FA">
|
||
<div class="descriptions-t-item-l color-86909C">被申请人手机号码:</div>
|
||
<div class="descriptions-t-item-r">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR' && item.type == '本人').phone}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="case-debt-info-call flex-row justify-content-between align-items-center">
|
||
<div class="flex-row align-items-center cursor-pointer" @click="startOutboundCall">
|
||
<div class="f32 color-1960F4 mr-8"><i class="el-icon-phone"></i></div>
|
||
<div>呼叫被申请人</div>
|
||
</div>
|
||
<el-divider direction="vertical"></el-divider>
|
||
|
||
<el-popover
|
||
placement="top"
|
||
width="500"
|
||
v-model="singlesmsvisible"
|
||
title="发送短信"
|
||
trigger="click">
|
||
<singlesmsPopover :caseId="caseId" :sendPhone="[(baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR' && item.type == '本人')).phone]" :singlesmsvisible.sync="singlesmsvisible"/>
|
||
<span slot="reference" class="flex-row align-items-center cursor-pointer">
|
||
<div class="f32 color-FF7D00 mr-8"><i class="el-icon-message"></i></div>
|
||
<div>发送短信</div>
|
||
</span>
|
||
</el-popover>
|
||
|
||
<!-- <div class="flex-row align-items-center cursor-pointer">
|
||
<div class="f32 color-FF7D00 mr-8"><i class="el-icon-message"></i></div>
|
||
<div>发送短信</div>
|
||
</div> -->
|
||
</div>
|
||
|
||
<div class="descriptions-t mt-16">
|
||
<div class="f16 f-weight600 descriptions-t-title">债务信息</div>
|
||
<div class="flex-row descriptions-t-item">
|
||
<div class="descriptions-t-item-l color-86909C">当前逾期金额:</div>
|
||
<div class="descriptions-t-item-r color-F53F3F">{{thisCaseInfo.fields.find(item => item.fieldKey == 'moneyAmount').fieldValue}}</div>
|
||
</div>
|
||
|
||
<div v-for="(item,index) in thisCaseInfo.fields.filter(item => item.fieldGroup == 'DEBTINFO')"
|
||
:key="index" class="flex-row descriptions-t-item " :class="index % 2 === 0 ? 'bgColor-F7F8FA':''">
|
||
<div class="descriptions-t-item-l color-86909C">{{item.name}}:</div>
|
||
<div class="descriptions-t-item-r">{{item.fieldValue}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="descriptions-t mt-16">
|
||
<div class="f16 f-weight600 descriptions-t-title">案件信息</div>
|
||
<div class="flex-row descriptions-t-item">
|
||
<div class="descriptions-t-item-l color-86909C">案件包名称:</div>
|
||
<div class="descriptions-t-item-r">{{thisCaseInfo.casePkg.pkgName}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item bgColor-F7F8FA">
|
||
<div class="descriptions-t-item-l color-86909C">金融机构:</div>
|
||
<div class="descriptions-t-item-r">{{thisCaseInfo.casePkg.entrustingAgencyName}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item">
|
||
<div class="descriptions-t-item-l color-86909C">委案开始日期:</div>
|
||
<div class="descriptions-t-item-r">{{thisCaseInfo.casePkg.planStartTime | formaDate('yyyy-MM-dd')}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item bgColor-F7F8FA">
|
||
<div class="descriptions-t-item-l color-86909C">委案结束日期:</div>
|
||
<div class="descriptions-t-item-r">{{thisCaseInfo.casePkg.planEndTime | formaDate('yyyy-MM-dd')}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item">
|
||
<div class="descriptions-t-item-l color-86909C">委案渠道:</div>
|
||
<div class="descriptions-t-item-r">{{thisCaseInfo.casePkg.channel}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="descriptions-t mt-16">
|
||
<div class="f16 f-weight600 descriptions-t-title">代理人信息</div>
|
||
<div v-for="(item,index) in AgentData" :key="index">
|
||
<div class="flex-row descriptions-t-item">
|
||
<div class="descriptions-t-item-l color-86909C">姓名:</div>
|
||
<div class="descriptions-t-item-r">{{item.name}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item bgColor-F7F8FA">
|
||
<div class="descriptions-t-item-l color-86909C">身份证号:</div>
|
||
<div class="descriptions-t-item-r">{{item.cardNo}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item">
|
||
<div class="descriptions-t-item-l color-86909C">手机号码:</div>
|
||
<div class="descriptions-t-item-r">{{item.phone}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item bgColor-F7F8FA">
|
||
<div class="descriptions-t-item-l color-86909C">电子邮箱:</div>
|
||
<div class="descriptions-t-item-r">{{item.mail}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item">
|
||
<div class="descriptions-t-item-l color-86909C">地址:</div>
|
||
<div class="descriptions-t-item-r">{{item.addr}}</div>
|
||
</div>
|
||
<div class="flex-row descriptions-t-item bgColor-F7F8FA">
|
||
<div class="descriptions-t-item-l color-86909C">代理人类型:</div>
|
||
<div class="descriptions-t-item-r">{{item.type}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 共债 -->
|
||
<div v-if="leftActive == 8" class="case-coobligation-person">
|
||
<coobligationInfo :caseId="caseId" />
|
||
</div>
|
||
|
||
<!-- 联系人信息 -->
|
||
<div v-if="leftActive == 2" class="case-contact-person">
|
||
<contactPerson :caseId="caseId" @startOutboundCall="startOutboundCall" @updateCaseInfoById="updateCaseInfoById" />
|
||
|
||
</div>
|
||
|
||
<!-- 案件材料 -->
|
||
<div v-if="leftActive == 3" class="case-materials-person">
|
||
<caseMaterialLeft :caseId="caseId" />
|
||
|
||
</div>
|
||
|
||
<!-- 案件文书 -->
|
||
<div v-if="leftActive == 4" class="case-office-person">
|
||
<cassWrit :caseId="caseId" :updateUnm="updateUnmU" />
|
||
|
||
</div>
|
||
|
||
<!-- 还款计划 -->
|
||
<div v-if="leftActive == 5" class="case-repayment-schedule">
|
||
<RepaymentSchedule :eventDialog.sync="eventDialog"/>
|
||
</div>
|
||
<!-- 还款凭证 -->
|
||
<div v-if="leftActive == 6" class="case-repayment-certificate">
|
||
<RepaymentCertificate :eventDialog.sync="eventDialog"/>
|
||
</div>
|
||
|
||
</el-scrollbar>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- 右边 -->
|
||
<div class="layout-center-right-wrap flex-row">
|
||
<div class="right-wrap-left">
|
||
<!-- 人物画像 -->
|
||
<portraitPerson :caseId="caseId" />
|
||
</div>
|
||
<div class="right-wrap-right p-16">
|
||
<div class="line-height-30 f22 f-weight600">沟通记录</div>
|
||
|
||
<div class="flex-row justify-content-between align-items-center pt-16 pb-16">
|
||
<el-select v-model="mediaterecordpm.linkedWay" placeholder="请选择" @change="getmediate_record">
|
||
<el-option label="全部沟通" value=""></el-option>
|
||
<el-option label="电话沟通" value="1"></el-option>
|
||
<el-option label="视频沟通" value="2"></el-option>
|
||
</el-select>
|
||
<span>
|
||
<el-button plain icon="el-icon-plus" @click="visiblemediatRecord = true;visiblemediatRecordObj = null">新增沟通记录</el-button>
|
||
|
||
<el-popover
|
||
placement="top"
|
||
width="400"
|
||
v-model="singleremarkvisible"
|
||
title="个人调解备注"
|
||
trigger="hover">
|
||
<singleRemarkPopover :caseId="caseId" :singleremarkvisible.sync="singleremarkvisible" :caseRemark="baseInfo.mediateRemark" @handleSubmit="getCaseInfoById()"/>
|
||
<span slot="reference" class="ml-8">
|
||
<el-button plain icon="el-icon-edit">个人调解备注</el-button>
|
||
</span>
|
||
</el-popover>
|
||
</span>
|
||
|
||
</div>
|
||
|
||
<el-scrollbar :style="'height:'+`${MediationrecordHeight}`+'px;padding:2px 2px 25px 2px'">
|
||
<el-timeline class="padding-0">
|
||
<el-timeline-item v-for="(item,index) in communicationRecord" :key="index" :timestamp="item.recordDate" placement="top" type="primary">
|
||
<el-card shadow="never" class="mt-8" v-for="(itemrecord,index) in item.records" :key="index">
|
||
<div class="flex-row justify-content-between timeline-layout">
|
||
<div class="timeline-layout-w">
|
||
<div class="flex-row justify-content-between">
|
||
<div class="flex-row">
|
||
<div>{{ itemrecord.createAt | formaDate('hh:mm:ss') }}</div>
|
||
<div class="pl-8 pr-8">
|
||
{{itemrecord.mediator}}
|
||
</div>
|
||
<!-- 电话 -->
|
||
<div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 1">
|
||
<i v-if="itemrecord.callWay == 1 || itemrecord.callWay == null" class="callphone-icon"></i>
|
||
<i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation != 1" class="callbackphone-icon"></i>
|
||
<i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation == 1" class="nocallphone-icon"></i>
|
||
</div>
|
||
<span v-if="itemrecord.linkedWay == 1 && itemrecord.linkedSituation != null" class="case-lable">
|
||
<a :class="'case-status'+ $util.getTelephoneTypeData(itemrecord.linkedSituation).key">{{$util.getTelephoneTypeData(itemrecord.linkedSituation).label}}</a>
|
||
</span>
|
||
<!-- 视频 -->
|
||
<div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 2">
|
||
<i class="callvideo-icon"></i>
|
||
</div>
|
||
<!-- 微信 -->
|
||
<div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 3">
|
||
<i class="callwechat-icon"></i>
|
||
</div>
|
||
</div>
|
||
<div class="">
|
||
<span class="cursor-pointer mr-8" @click="visiblemediatRecord = true;visiblemediatRecordObj = itemrecord"><i class="ml-8 f14 el-icon-edit"></i></span>
|
||
<span class="cursor-pointer" v-if="itemrecord.linkedType == 2" @click="mediatRecordDelete(itemrecord)"><i class="ml-8 f14 el-icon-delete"></i></span>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-layout-w-records mt-8 mb-8">
|
||
<div class="flex-row align-items-center">
|
||
<div>
|
||
<span class="pr-8" v-for="(itemperson,index) in itemrecord.linkedPersonInfo" :key="index">
|
||
{{ itemperson.name}}
|
||
{{ itemrecord.linkedWay == 1 ? itemperson.phone :''}}
|
||
<el-tag class="mr-8" size="small" effect="plain" style="height: 22px;">{{itemperson.type}}</el-tag>
|
||
</span>
|
||
</div>
|
||
|
||
<el-tag size="small" effect="plain" style="height: 22px;" v-if="itemrecord.mediateStatus != null">{{ materialTypeOptions.find(item => item.value == itemrecord.mediateStatus).label }}</el-tag>
|
||
</div>
|
||
<!-- 电话 --><!-- 微信 --> <!-- 视频 -->
|
||
<div class="flex-row align-items-center pt-6">
|
||
<div v-if="itemrecord.linkedType == 1&&itemrecord.linkedWay == 1">通话{{itemrecord.linkedDuration}}秒</div>
|
||
<div v-if="itemrecord.linkedType == 1&&itemrecord.linkedWay == 2">视频{{itemrecord.linkedDuration}}秒</div>
|
||
<el-divider v-if="itemrecord.linkedType == 1 && (itemrecord.linkedWay == 1 || itemrecord.linkedWay == 2)" direction="vertical"></el-divider>
|
||
<div class="text-center cursor-pointer mr-8" v-for="(item,index) in itemrecord.files" :key="index" @click="handleCaseShowFile(item)">
|
||
<i v-if="$util.getFileType(item) != 'image' " class="f14 el-icon-video-play"></i>
|
||
{{ $util.getFileType(item) === 'video' ? '播放录像':''}}
|
||
{{ $util.getFileType(item) === 'audio' ? '播放录音':''}}
|
||
{{ $util.getFileType(item) === 'image' ? '查看文件':''}}
|
||
</div>
|
||
</div>
|
||
<!-- 视频 -->
|
||
<!-- <div v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6">
|
||
<div v-if="itemrecord.linkedType == 1">视频{{itemrecord.linkedDuration}}秒</div>
|
||
<el-divider v-if="itemrecord.linkedType == 1" direction="vertical"></el-divider>
|
||
<div class="text-center cursor-pointer" v-for="(item,index) in itemrecord.files" :key="index" @click="handleCaseShowFile(item)">
|
||
<i class="f14 el-icon-video-play"></i> 播放视频 {{index > 0 ? index : ''}}
|
||
</div>
|
||
</div> -->
|
||
<!-- 微信 -->
|
||
<!-- <div v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6">
|
||
<div class="text-center cursor-pointer" v-for="(item,index) in itemrecord.files" :key="index" @click="handleCaseShowFile(item)">
|
||
查看文件
|
||
</div>
|
||
</div> -->
|
||
|
||
</div>
|
||
|
||
<div>
|
||
沟通备注：
|
||
<span class="color-FF7D00">{{itemrecord.communicationRemarks}}</span>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="timeline-layout-w timeline-layout-ai">
|
||
<div class="flex-row align-items-center">
|
||
<div class="mr-8 ai-logo-img"></div>
|
||
<div>调解小助手帮你总结：<i class="f14 el-icon-warning-outline cursor-pointer"></i></div>
|
||
</div>
|
||
<div class="pt-8">
|
||
由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</el-scrollbar>
|
||
|
||
|
||
</div>
|
||
<div class="right-wrap-side">
|
||
<SidebarTool :caseId="caseId" />
|
||
</div>
|
||
</div>
|
||
|
||
<MediationRecordDialog v-if="visiblemediatRecord" :visiblemediatRecordObj="visiblemediatRecordObj" :caseId="caseId" :visiblemediatRecord.sync="visiblemediatRecord" />
|
||
<!-- 文件预览 -->
|
||
<showFile v-if="fileDialog" :fileDialog.sync="fileDialog"/>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
<script>
|
||
import api from "@/services/caseManagement";
|
||
import contactPerson from "@/services/contactPerson";
|
||
import { number } from "echarts";
|
||
export default {
|
||
components: {
|
||
showFile: () => import('../../../components/showFile.vue'),//
|
||
RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
|
||
RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
|
||
caseMaterial: () => import('./caseMaterial'),//
|
||
caseMaterialLeft: () => import('./caseMaterialLeft'),//案件材料左
|
||
contactPerson: () => import('./contactPerson'),//联系人左
|
||
cassWrit: () => import('./cassWrit'),//案件文书
|
||
portraitPerson: () => import('./portraitPerson.vue'),//人物画像
|
||
SidebarTool: () => import('./SidebarTool'),
|
||
singlesmsPopover: () => import('./singlesmsPopover.vue'),//发送短信
|
||
MediationRecordDialog: () => import('./MediationRecordDialog.vue'),//调解记录
|
||
coobligationInfo: () => import('./coobligationInfo.vue'),//共债
|
||
singleRemarkPopover: () => import('./singleRemarkPopover.vue'),//个人调解备注
|
||
},
|
||
props: {
|
||
caseId: {
|
||
type: String,
|
||
default: () => {
|
||
return ''
|
||
},
|
||
},
|
||
thisCaseInfo: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
},
|
||
},
|
||
updateUnm: {
|
||
type: number,
|
||
default: () => {
|
||
return 0
|
||
},
|
||
},
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
updateUnmU:1,
|
||
singleremarkvisible:false,
|
||
fileDialog:null,
|
||
singlesmsvisible:false,
|
||
visiblemediatRecord:false,
|
||
visiblemediatRecordObj:null,
|
||
eventDialog: {caseId: ''},
|
||
leftActive: 1,
|
||
AgentData:[],
|
||
fileList: [],
|
||
mediationRecord: [],//调解记录
|
||
baseInfo: {casePkg:{}},//基本信息
|
||
obligorInfo: [],//债务人信息
|
||
communicationRecord: [],
|
||
|
||
mediaterecordpm:{
|
||
caseId:'',
|
||
linkedWay:''
|
||
},
|
||
materialTypeOptions: this.$util.getMediationprogress(),
|
||
};
|
||
},
|
||
computed: {
|
||
// 左侧
|
||
leftContentHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 100
|
||
},
|
||
|
||
MediationrecordHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 57 - 128
|
||
},
|
||
},
|
||
watch: {
|
||
caseId: {
|
||
handler(val) {
|
||
this.mediaterecordpm.caseId = val
|
||
this.getCaseInfoById();//获取详情
|
||
this.getmediate_record()
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
updateUnm: {
|
||
handler(val) {
|
||
this.updateUnmU ++;
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
},
|
||
},
|
||
async created() {
|
||
this.mediaterecordpm.caseId = this.caseId
|
||
this.eventDialog.caseId = this.caseId
|
||
|
||
this.getCaseInfoById();//获取详情
|
||
this.getAgentList()
|
||
this.getmediate_record()
|
||
},
|
||
beforeDestroy() {
|
||
console.log('销毁')
|
||
this.singlesmsvisible = false
|
||
// if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
|
||
// clearInterval(this.timer); //关闭
|
||
// }
|
||
},
|
||
methods: {
|
||
updateCaseInfoById(){
|
||
this.$emit('updateCaseInfoById');
|
||
},
|
||
handlerMouseenter(val) {
|
||
this.leftActive = val
|
||
if (val !== 1) this.singlesmsvisible = false
|
||
},
|
||
// 代理人列表数据
|
||
getAgentList() {
|
||
let dataJson = {
|
||
size: 9999,
|
||
current: 1,
|
||
caseId: this.caseId
|
||
}
|
||
|
||
contactPerson.agentPage(dataJson).then(res => {
|
||
if (!res.code) {
|
||
this.AgentData = res.records
|
||
}
|
||
})
|
||
},
|
||
|
||
debtorEntityCardNo(datalist, len) {
|
||
let datacardno = ''
|
||
let dataphone = ''
|
||
datalist.forEach((item, index) => {
|
||
if (index == 0) {
|
||
datacardno = item.cardNo
|
||
dataphone = item.phone
|
||
} else {
|
||
datacardno += ',' + item.cardNo
|
||
dataphone += ',' + item.phone
|
||
}
|
||
})
|
||
|
||
return {cardNo: datacardno.substring(0, len), phone: dataphone.substring(0, len)};
|
||
},
|
||
// 获取详情
|
||
getCaseInfoById() {
|
||
let _that = this
|
||
api.getCaseInfoById(this.caseId).then(res => {
|
||
if (!res.code) {
|
||
this.baseInfo = res
|
||
// 材料
|
||
// console.log('获取图片',res.caseFileEntityList)
|
||
let caseFileEntityList = []
|
||
res.caseFileEntityList.forEach((item) => {
|
||
caseFileEntityList.push({name: item.name, fileName: item.name, url: item.url})
|
||
})
|
||
_that.fileList = caseFileEntityList
|
||
}
|
||
})
|
||
},
|
||
// 获取上一件案件
|
||
getFrontCaseById() {
|
||
if (!this.$clickThrottle()) {
|
||
return
|
||
}//防止重复点击
|
||
api.getFrontCaseById({id: this.caseId}).then(res => {
|
||
if (!res.code) {
|
||
// let caseChangeData = res
|
||
this.detailData(res)
|
||
}
|
||
})
|
||
},
|
||
// 获取下一件案件
|
||
getNextCaseById() {
|
||
if (!this.$clickThrottle()) {
|
||
return
|
||
}//防止重复点击
|
||
api.getNextCaseById({id: this.caseId}).then(res => {
|
||
if (!res.code) {
|
||
this.detailData(res)
|
||
}
|
||
})
|
||
},
|
||
handleBack() {
|
||
// this.$route.query.sourcePage == 'mediationManagement'
|
||
this.$router.push('/mediation-management')
|
||
},
|
||
// 获取调解记录
|
||
getmediate_record() {
|
||
api.mediate_record_list(this.mediaterecordpm).then(res => {
|
||
if (!res.code) {
|
||
this.communicationRecord = res
|
||
} else {
|
||
this.communicationRecord = []
|
||
}
|
||
})
|
||
},
|
||
handleCaseShowFile(item) {
|
||
//查看录音录像文件相关
|
||
this.$fetchApi.viewFullFile({path: item}).then((res) => {
|
||
this.fileDialog = {showfile: {url: item,fullUrl: res}, filelist: []}
|
||
});
|
||
},
|
||
// 删除调解记录
|
||
mediatRecordDelete(item){
|
||
this.$confirm("请确定是否删除此条数据?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
}).then(() => {
|
||
if(!this.$clickThrottle()) { return }//防止重复点击
|
||
api.mediate_record_delete({id:item.id}).then((res) => {
|
||
this.$message.success("删除调解记录成功");
|
||
this.getmediate_record(1)
|
||
});
|
||
}).catch(() => {});
|
||
},
|
||
openRecordDialog(obj) {
|
||
this.visiblemediatRecord = true;
|
||
this.visiblemediatRecordObj = obj;
|
||
},
|
||
startOutboundCall(phone, contactId) {
|
||
let params = {
|
||
phone: phone || null,
|
||
contactId: contactId || null
|
||
}
|
||
this.$emit('startOutboundCall', params)
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.ai-logo-img{
|
||
width: 29px;
|
||
height: 29px;
|
||
background: url('~@/assets/image/ai-logo.png') no-repeat;
|
||
background-size: 100%,100%;
|
||
}
|
||
|
||
|
||
|
||
.layout-center-center-wrap {
|
||
|
||
height: 100%;
|
||
|
||
.background-color-F5F5F5 {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.border-E5E6EB {
|
||
border: solid 1px #E5E6EB;
|
||
}
|
||
|
||
.width120px {
|
||
width: 140px;
|
||
}
|
||
|
||
.width180px {
|
||
width: 220px;
|
||
}
|
||
|
||
.width200px {
|
||
width: calc(50% - 320px);
|
||
}
|
||
|
||
.layout-center-left-wrap {
|
||
background: url('~@/assets/image/mediate/m-left-bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 540px;
|
||
height: 100%;
|
||
border-right: 1px solid var(--fill-3, #E5E6EB);
|
||
|
||
.layout-center-left1-wrap {
|
||
width: 80px;
|
||
height: 100%;
|
||
text-align: center;
|
||
|
||
.left-rbobot {
|
||
width: 100%;
|
||
height: 80px;
|
||
text-align: center;
|
||
margin: 30px 0 0 0;
|
||
|
||
img {
|
||
width: 64px;
|
||
}
|
||
}
|
||
|
||
.separation {
|
||
width: 50px;
|
||
margin: 15px 0 0 15px;
|
||
border-bottom: solid 1px #dedfe4;
|
||
}
|
||
|
||
.left-img-info {
|
||
margin-top: 15px;
|
||
width: 100%;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
|
||
img {
|
||
width: 48px;
|
||
margin-left: 15px;
|
||
}
|
||
|
||
a {
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.left-img-info.active {
|
||
background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
|
||
background-size: 15px 30px;
|
||
background-position: 68px 10px;
|
||
}
|
||
|
||
.left-img-info:hover {
|
||
background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
|
||
background-size: 15px 30px;
|
||
background-position: 68px 10px;
|
||
}
|
||
}
|
||
|
||
.layout-center-left2-wrap {
|
||
width: 460px;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
// border-radius: 25px 0px 0px 25px;
|
||
padding: 20px 30px;
|
||
|
||
|
||
.case-debt-info{
|
||
.mediate-status-log{
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 270px;
|
||
img{width: 130px;}
|
||
}
|
||
.descriptions-t{
|
||
.descriptions-t-title{
|
||
//margin-bottom: 5px;
|
||
}
|
||
.descriptions-t-item-l{
|
||
padding: 12px 10px;
|
||
text-align: right;
|
||
width: 40%;
|
||
}
|
||
.descriptions-t-item-r{
|
||
padding: 12px 10px;
|
||
text-align: left;
|
||
width: 60%;
|
||
}
|
||
.bgColor-F7F8FA{
|
||
background-color: #F7F8FA;
|
||
}
|
||
}
|
||
|
||
.case-debt-info-call{
|
||
padding: 12px 42px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.case-contact-person{
|
||
.contact-person-type{
|
||
background-color: #F2F3F5;
|
||
padding:5px 15px;
|
||
border-radius: 8px;
|
||
margin: 0 5px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.case-detail-des {
|
||
border: solid 1px #E5E6EB;
|
||
padding: 10px 15px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
|
||
span {
|
||
margin: 3px 0;
|
||
padding: 3px 10px;
|
||
// a:first-child{width: 120px;display: inline-block;text-align: right;}
|
||
}
|
||
|
||
span:nth-child(even) {
|
||
background-color: #F7F8FA;
|
||
}
|
||
|
||
.case-img {
|
||
width: 50px;
|
||
height: 50px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
|
||
img {
|
||
max-width: 50px;
|
||
max-height: 50px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.case-materials-person {
|
||
.case-detail-des {
|
||
i {
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.case-office-person {
|
||
|
||
.case-detail-des {
|
||
.case-img {
|
||
width: 55px;
|
||
height: 55px;
|
||
text-align: center;
|
||
line-height: 55px;
|
||
|
||
img {
|
||
max-width: 55px;
|
||
max-height: 55px;
|
||
}
|
||
}
|
||
|
||
i {
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.layout-center-right-wrap {
|
||
background: #F2F3FA;
|
||
// background: url('~@/assets/image/mediate/m-right-bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
width: calc(100% - 540px);
|
||
height: 100%;
|
||
.right-wrap-left{
|
||
width: 367px;
|
||
height: 100%;
|
||
}
|
||
|
||
.right-wrap-right{
|
||
width: calc(100% - 367px - 40px);
|
||
.timeline-layout{
|
||
.timeline-layout-w{
|
||
width: calc(50% - 8px);
|
||
.icon-bg{
|
||
width: 20px;
|
||
height: 20px;
|
||
// border-radius: 4px;
|
||
// color: #FFFFFF;
|
||
|
||
.callphone-icon{
|
||
background: url('~@/assets/image/mediate/callphone.png') no-repeat;
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-size: 100% 100%;
|
||
}
|
||
.callbackphone-icon{
|
||
background: url('~@/assets/image/mediate/callbackphone.png') no-repeat;
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-size: 100% 100%;
|
||
}
|
||
.nocallphone-icon{
|
||
background: url('~@/assets/image/mediate/nocallbackphone.png') no-repeat;
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.callvideo-icon{
|
||
background: url('~@/assets/image/mediate/callvideo.png') no-repeat;
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-size: 100% 100%;
|
||
}
|
||
.callwechat-icon{
|
||
background: url('~@/assets/image/mediate/WeChat.png') no-repeat;
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
// .icon-phone{
|
||
// background-color: #52ABF2;
|
||
// }
|
||
.icon-video{
|
||
background-color: #FF7D00;
|
||
}
|
||
.timeline-layout-w-records{
|
||
background-color: #F5F5F5;
|
||
border-radius: 4px;
|
||
padding: 8px 12px 12px 12px;
|
||
}
|
||
}
|
||
.timeline-layout-ai{
|
||
padding: 6px 16px;
|
||
border-radius: 4px;
|
||
background: linear-gradient(270deg, #F1F4FE 0%, #FFF2F8 100%);
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-wrap-side{
|
||
width: 40px;
|
||
height: 100%;
|
||
background-color: #F7F8FA;
|
||
}
|
||
|
||
//.case-communication-record {
|
||
// .btn-communication {
|
||
// padding: 5px 15px;
|
||
// border-radius: 8px;
|
||
// cursor: pointer;
|
||
// }
|
||
//
|
||
// .case-communication-cont {
|
||
// // background: ;
|
||
// padding: 20px;
|
||
// border-radius: 8px;
|
||
// margin-top: 15px;
|
||
// }
|
||
//}
|
||
//.case-office-record, .case-materials-record {
|
||
//
|
||
// span a {
|
||
// color: #C66A5B;
|
||
// margin-right: 13px;
|
||
// cursor: pointer;
|
||
// }
|
||
//
|
||
// span a:last-child {
|
||
// margin-right: 0;
|
||
// }
|
||
//}
|
||
}
|
||
|
||
}
|
||
|
||
</style>
|