849 lines
44 KiB
Vue
849 lines
44 KiB
Vue
<template>
|
||
<div style=" height: 100%;">
|
||
<div class="layout-center-wrap flex-column">
|
||
<!-- 上部数据 -->
|
||
<div class="layout-center-top-wrap flex-row justify-content-between">
|
||
<div class="flex-row justify-content-between top-case-btn-left">
|
||
<el-button @click="handleBack">退出当前调解</el-button>
|
||
<el-button @click="getFrontCaseById">上一个</el-button>
|
||
<el-button @click="getNextCaseById">下一个</el-button>
|
||
<span class="ipphoneimg"> IP电话</span>
|
||
<span class="smsimg">发送短信</span>
|
||
<span class="videoimg" @click="VideoDialog={caseId:caseId}">视频预约</span>
|
||
|
||
<span class="case-send-btn">发起送达</span>
|
||
<span class="case-send-btn">发起签章</span>
|
||
<span class="case-send-btn">案件办结</span>
|
||
|
||
</div>
|
||
<div class="flex-row justify-content-between top-case-btn-right">
|
||
<span :class="rightActive == 1 ?'active':''" @click="rightActive = 1">沟通记录</span>
|
||
<span :class="rightActive == 2 ?'active':''" @click="rightActive = 2">案件文书</span>
|
||
<span :class="rightActive == 3 ?'active':''" @click="rightActive = 3">案件材料</span>
|
||
<span :class="rightActive == 4 ?'active':''" @click="rightActive = 4">备注</span>
|
||
<span :class="rightActive == 5 ?'active':''" @click="rightActive = 5">日志</span>
|
||
</div>
|
||
</div>
|
||
<!-- 中间数据 -->
|
||
<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="leftActive = 1">
|
||
<img src="../../../assets/image/mediate/m-info1.png" />
|
||
<a>案件信息</a>
|
||
</span>
|
||
<span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @mouseenter="leftActive = 2">
|
||
<img src="../../../assets/image/mediate/m-info2.png" />
|
||
<a>联系人</a>
|
||
</span>
|
||
<span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @mouseenter="leftActive = 3">
|
||
<img src="../../../assets/image/mediate/m-info3.png" />
|
||
<a>案件材料</a>
|
||
</span>
|
||
<span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @mouseenter="leftActive = 4">
|
||
<img src="../../../assets/image/mediate/m-info4.png" />
|
||
<a>案件文书</a>
|
||
</span>
|
||
<span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @mouseenter="leftActive = 5">
|
||
<img src="../../../assets/image/mediate/m-info5.png" />
|
||
<a>还款计划</a>
|
||
</span>
|
||
<span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @mouseenter="leftActive = 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>债务信息</div> -->
|
||
<div class="case-detail-label f-weight500 f18 mb-8">基本信息</div>
|
||
<div class="case-detail-des flex-column">
|
||
<span><a>案件包名称：</a><a>河北幸福消费金融股份有限公司012341</a></span>
|
||
<span><a>委案机构：</a><a>{{baseInfo.financialOrgName}}</a></span>
|
||
<span><a>委案开始日期：</a><a>{{baseInfo.planStartTime}}</a></span>
|
||
<span><a>委案到期日期：</a><a>{{baseInfo.planStartTime}}</a></span>
|
||
<span><a>债务人姓名：</a><a v-for="(item,index) in baseInfo.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a></span>
|
||
<span><a>债务人手机号码：</a><a>{{ debtorEntityCardNo(baseInfo.debtorEntityList,25).phone }} {{ baseInfo.debtorEntityList.length > 25 ? '...':'' }}</a></span>
|
||
<span><a>委案期限：</a><a></a></span>
|
||
<span><a>委案渠道：</a><a></a></span>
|
||
<span><a>身份证号：</a><a> {{ debtorEntityCardNo(baseInfo.debtorEntityList,25).cardNo }} {{ baseInfo.debtorEntityList.length > 25 ? '...':'' }}</a></span>
|
||
<span><a>户籍地址：</a><a v-for="(item,index) in baseInfo.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a></span>
|
||
<span><a>案件编号：</a><a>{{baseInfo.caseNo}}</a></span>
|
||
</div>
|
||
<div class="case-detail-label f-weight500 f18 mb-8 mt-8">申请人代理人信息</div>
|
||
<div class="case-detail-des flex-column">
|
||
<span><a>姓名：</a><a>河北幸福消费金融股份有限公司012341</a></span>
|
||
<span><a>身份证号：</a><a>{{baseInfo.financialOrgName}}</a></span>
|
||
<span><a>手机号码：</a><a>{{baseInfo.planStartTime}}</a></span>
|
||
<span><a>电子邮箱：</a><a>{{baseInfo.planStartTime}}</a></span>
|
||
<span><a>代理人类型：</a><a>{{baseInfo.planStartTime}}</a></span>
|
||
</div>
|
||
<div class="case-detail-label f-weight500 f18 mb-8 mt-8">债务信息</div>
|
||
<div class="case-detail-des flex-column">
|
||
<!-- <span><a>委托机构：</a><a>{{baseInfo.financialOrgName}}</a></span> -->
|
||
<span><a>合同编号：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>业务流水号：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>金融产品名称：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>金融机构名称：</a><a>{{baseInfo.financialOrgName}}</a></span>
|
||
<span><a>合同名称：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>委托时逾期天数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>借款合同签署时间：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>贷款笔数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>当前逾期金额：</a><a>{{baseInfo.moneyAmount}}</a></span>
|
||
<span><a>最低还款额(减免底线)：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>账龄：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>放款金额/借款本金：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>欠款本金：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>总分期数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>逾期期数：</a><a>{{baseInfo.overdueTimes}}</a></span>
|
||
<span><a>未结清期数：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>逾期开始时间：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>还款日：</a><a>{{baseInfo.AAAAAAAAA}}</a></span>
|
||
<span><a>备注：</a><a>{{baseInfo.caseDescr}}</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 联系人信息 -->
|
||
<div v-if="leftActive == 2" class="case-contact-person">
|
||
<div class="mb-16 flex-row justify-content-between">
|
||
<span class="f-weight500 f18">联系人信息</span>
|
||
<span class="cursor-pointer" @click="contactAddFlag = true"><i class="el-icon-plus"></i> 添加联系人</span>
|
||
</div>
|
||
<div v-if="contactAddFlag" class="case-detail-des flex-column mb-16">
|
||
<div class="flex-row justify-content-between">
|
||
<div class="flex-row mb-8">
|
||
<a class="f16" style="width: 130px;">
|
||
<el-input v-model.trim="contactAddObj.Name"
|
||
clearable placeholder="请输入姓名" size="small">
|
||
</el-input>
|
||
</a>
|
||
<a style="width: 140px;margin-left: 5px">
|
||
<el-select v-model="contactAddObj.relation"
|
||
placeholder="与债务人关系" size="small"
|
||
class="width100">
|
||
<el-option
|
||
v-for="(item,index) in relationOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</a>
|
||
</div>
|
||
<div class="flex-row">
|
||
<a class="cursor-pointer pt-6">添加</a>
|
||
<a class="cursor-pointer ml-8 pt-6" @click="contactAddFlag = false;contactAddObj = {}">取消</a>
|
||
</div>
|
||
</div>
|
||
<div class="flex-row">
|
||
<a style="width: 180px;">
|
||
<el-input v-model.trim="contactAddObj.Phone" size="small"
|
||
clearable placeholder="请输入手机号码" maxlength="11">
|
||
</el-input>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="case-detail-des flex-column mb-16">
|
||
<div class="flex-row justify-content-between">
|
||
<div v-if="!contactUpdate" class="flex-row mb-8">
|
||
<a class="f16">张三</a>
|
||
<div class="case-lable">
|
||
<a class="case-status0">本人</a>
|
||
<a class="case-status1">空号</a>
|
||
</div>
|
||
</div>
|
||
<div v-if="contactUpdate" class="flex-row mb-8">
|
||
<a class="f16" style="width: 130px;">
|
||
<el-input v-model.trim="contactObj.Name"
|
||
clearable placeholder="请输入姓名" size="small">
|
||
</el-input>
|
||
</a>
|
||
<a style="width: 140px;margin-left: 5px">
|
||
<el-select v-model="contactObj.relation"
|
||
placeholder="请选择与债务人关系" size="small"
|
||
class="width100">
|
||
<el-option
|
||
v-for="(item,index) in relationOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</a>
|
||
</div>
|
||
<div class="flex-row">
|
||
<a v-if="contactUpdate" class="cursor-pointer pt-6">保存</a>
|
||
<a v-if="contactUpdate" @click="contactUpdate = false" class="cursor-pointer ml-8 pt-6">取消</a>
|
||
<a v-if="!contactUpdate" @click="contactUpdate = true" class="cursor-pointer">编辑</a>
|
||
<a v-if="!contactUpdate" class="cursor-pointer ml-8">删除</a>
|
||
</div>
|
||
</div>
|
||
<div v-if="!contactUpdate">
|
||
<a>手机号码:</a><a class="ml-8">13333333333</a>
|
||
</div>
|
||
<div v-if="contactUpdate" class="flex-row">
|
||
<a style="width: 180px;">
|
||
<el-input v-model.trim="contactObj.Phone" size="small"
|
||
clearable placeholder="请输入手机号码" maxlength="11">
|
||
</el-input>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案件材料 -->
|
||
<div v-if="leftActive == 3" class="case-materials-person">
|
||
<div class="mb-16 flex-row justify-content-between">
|
||
<span class="f-weight500 f18">案件材料</span>
|
||
<span class="cursor-pointer"><i class="el-icon-plus"></i> 上传案件材料</span>
|
||
</div>
|
||
<div class="case-detail-des flex-column mb-16">
|
||
<div class="background-color-F5F5F5 p-16 flex-row border-radius-8">
|
||
<a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')" /></a>
|
||
<div class="flex-column">
|
||
<a class="mt-8 f-weight500">起诉状</a>
|
||
<a class="color-86909C">张三 2024-09-09</a>
|
||
</div>
|
||
</div>
|
||
<div class="color-86909C mt-8">
|
||
<a class="mr-16 ml-16 cursor-pointer"><i class="el-icon-view"></i>预览</a>
|
||
<a class="mr-16 cursor-pointer"><i class="el-icon-delete"></i>删除</a>
|
||
<a class="mr-16 cursor-pointer"><i class="el-icon-download"></i>下载</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案件文书 -->
|
||
<div v-if="leftActive == 4" class="case-office-person">
|
||
<div class="mb-16 flex-row justify-content-between">
|
||
<span class="f-weight500 f18">案件文书</span>
|
||
<span class="cursor-pointer"><i class="el-icon-tickets"></i> 文书生成</span>
|
||
</div>
|
||
<div class="case-detail-des flex-column mb-16">
|
||
<div class="background-color-F5F5F5 p-16 flex-row border-radius-8">
|
||
<a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')" /></a>
|
||
<div class="flex-column" style="padding-top:2px">
|
||
<a class="f-weight500">调解申请书</a>
|
||
<a class="color-86909C f12">未签字</a>
|
||
<a class="color-86909C f12">--</a>
|
||
</div>
|
||
</div>
|
||
<div class="color-86909C mt-8">
|
||
<a class="mr-16 ml-16 cursor-pointer"><i class="el-icon-view"></i>预览</a>
|
||
<a class="mr-16 cursor-pointer"><i class="el-icon-download"></i>下载模板</a>
|
||
<a class="mr-16 cursor-pointer"><i class="el-icon-upload2"></i>上传文书</a>
|
||
<a class="mr-16 cursor-pointer"><i class="el-icon-tickets"></i>文书生成</a>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<!-- 沟通记录 -->
|
||
<div v-if="rightActive == 1" class="case-communication-record flex-column">
|
||
<div class="flex-row justify-content-between">
|
||
<span class="btn-communication background-color-fff f-weight500"><i class="el-icon-plus"></i>新增沟通记录</span>
|
||
<div>
|
||
<span class="btn-communication"><i class="el-icon-refresh"></i>刷新</span>
|
||
<span class="btn-communication">已视频1</span>
|
||
<span class="btn-communication">电话沟通2</span>
|
||
</div>
|
||
</div>
|
||
<el-scrollbar :style="'height:'+`${CommunicationcontentHeight}`+'px'">
|
||
<div class="flex-column case-communication-cont background-color-fff">
|
||
<div class="flex-row justify-content-between">
|
||
<div>
|
||
<span class="f16 f-weight500">张三 发起电话沟通</span> <span>2023-09-09 12:12:12</span>
|
||
</div>
|
||
<span class="btn-communication border-E5E6EB"><i class="el-icon-edit-outline"></i> 编辑沟通记录</span>
|
||
</div>
|
||
<div class="case-lable">
|
||
<a class="case-status0">半失联客户</a><a class="case-status0">半失联客户</a>
|
||
</div>
|
||
<div class="flex-row justify-content-between mt-16 background-color-F5F5F5 p-16 f16">
|
||
<div>
|
||
<span>被申请人</span>
|
||
<span class="ml-8">李四</span>
|
||
<span class="ml-8">1388888888888</span>
|
||
</div>
|
||
<div>
|
||
<span>通话44秒</span>
|
||
<span class="ml-32 cursor-pointer"><i class="el-icon-video-play"></i> 播放录音</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-row pt-16">
|
||
<span>沟通备注：</span>
|
||
<span>李四</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-column case-communication-cont background-color-fff">
|
||
<div class="flex-row justify-content-between">
|
||
<div>
|
||
<span class="f16 f-weight500">张三 发起电话沟通</span> <span>2023-09-09 12:12:12</span>
|
||
</div>
|
||
<span class="btn-communication border-E5E6EB"><i class="el-icon-edit-outline"></i> 编辑沟通记录</span>
|
||
</div>
|
||
<div class="case-lable">
|
||
<a class="case-status0">半失联客户</a><a class="case-status0">半失联客户</a>
|
||
</div>
|
||
<div class="flex-row justify-content-between mt-16 background-color-F5F5F5 p-16 f16">
|
||
<div>
|
||
<span>被申请人</span>
|
||
<span class="ml-8">李四</span>
|
||
<span class="ml-8">1388888888888</span>
|
||
</div>
|
||
<div>
|
||
<span>通话44秒</span>
|
||
<span class="ml-32 cursor-pointer"><i class="el-icon-video-play"></i> 播放录音</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-row pt-16">
|
||
<span>沟通备注：</span>
|
||
<span>李四</span>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
<!-- 案件文书 -->
|
||
<div v-if="rightActive == 2" class="case-office-record">
|
||
<div class="flex-row justify-content-between background-color-fff p-16 border-radius-8">
|
||
<span class="width120px f-weight500">文书类型</span>
|
||
<span class="width200px f-weight500">文书</span>
|
||
<span class="width120px f-weight500">是否签章</span>
|
||
<span class="width120px f-weight500">是否完成签字</span>
|
||
<span class="width200px f-weight500">签字人</span>
|
||
<span class="width180px f-weight500">操作</span>
|
||
</div>
|
||
<el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'">
|
||
<div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
|
||
<span class="width120px">调解申请书</span>
|
||
<span class="width200px">dsadasdsadada.pdf</span>
|
||
<span class="width120px">未签章</span>
|
||
<span class="width120px">未签字</span>
|
||
<span class="width200px">--</span>
|
||
<span class="width180px flex-row">
|
||
<a>预览</a>
|
||
<a>下载模板</a>
|
||
<a>上传</a>
|
||
<a>文书生成</a>
|
||
</span>
|
||
</div>
|
||
|
||
</el-scrollbar>
|
||
</div>
|
||
<!-- 案件材料 -->
|
||
<div v-if="rightActive == 3" class="case-materials-record">
|
||
<div class="flex-row justify-content-between">
|
||
<span class="btn-communication background-color-fff f-weight500 p-8 border-radius-8 cursor-pointer">
|
||
<i class="el-icon-plus"></i>上传案件材料
|
||
</span>
|
||
</div>
|
||
<div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
|
||
<span class="width120px f-weight500">材料类型</span>
|
||
<span class="width200px f-weight500">文件</span>
|
||
<span class="width120px f-weight500">操作人</span>
|
||
<span class="width120px f-weight500">操作时间</span>
|
||
<span class="width180px f-weight500">操作</span>
|
||
</div>
|
||
<el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'">
|
||
<div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
|
||
<span class="width120px">起诉状</span>
|
||
<span class="width200px">dsadasdsadada.pdf</span>
|
||
<span class="width120px">张三</span>
|
||
<span class="width120px">2024-09-09 12:12:12</span>
|
||
<span class="width180px flex-row">
|
||
<a>预览</a>
|
||
<a>删除</a>
|
||
<a>文件下载</a>
|
||
</span>
|
||
</div>
|
||
|
||
</el-scrollbar>
|
||
</div>
|
||
<!-- 案件日志 -->
|
||
<div v-if="rightActive == 5" class="case-log-record">
|
||
|
||
<div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-8 p-32 width100" >
|
||
<el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'">
|
||
<el-timeline>
|
||
<el-timeline-item timestamp="2018/4/12" placement="top">
|
||
<el-card>
|
||
<p>王小虎 提交于 2018/4/12 20:46</p>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
<el-timeline-item timestamp="2018/4/3" placement="top">
|
||
<el-card>
|
||
<p>王小虎 提交于 2018/4/3 20:46</p>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
<el-timeline-item timestamp="2018/4/2" placement="top">
|
||
<el-card>
|
||
<p>王小虎 提交于 2018/4/2 20:46</p>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</el-scrollbar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 视频预约 -->
|
||
<VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog" />
|
||
</div>
|
||
|
||
</template>
|
||
<script>
|
||
import api from "@/services/caseManagement";
|
||
export default {
|
||
components: {
|
||
uploadFile: () => import('@/components/uploadFile.vue'),//上传
|
||
RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
|
||
RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
|
||
VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约
|
||
},
|
||
data() {
|
||
return {
|
||
VideoDialog:null,
|
||
eventDialog:{caseId:this.$route.query.caseId},
|
||
leftActive:1,
|
||
rightActive:1,
|
||
fileList:[],
|
||
mediationRecord:[],//调解记录
|
||
baseInfo:{},//基本信息
|
||
obligorInfo:[],//债务人信息
|
||
caseId:'',//案件id
|
||
// 联系人
|
||
contactAddObj:{},
|
||
contactAddFlag:false,
|
||
contactObj:{},
|
||
contactUpdate:false,
|
||
relationOptions:[{label:'本人',value:'本人'},{label:'父母',value:'父母'},{label:'配偶',value:'配偶'},
|
||
{label:'子女',value:'子女'},{label:'其他',value:'其他'},{label:'朋友',value:'朋友'},{label:'兄弟',value:'兄弟'},
|
||
{label:'同事',value:'同事'},{label:'同学',value:'同学'}],
|
||
// 还款计划
|
||
repaymentObj:{
|
||
type:'ALL'
|
||
},
|
||
RepaymentOptions:[{label:'一次性还款',value:'ALL'},{label:'全部分期',value:'STAGES'},{label:'部分先还加分期',value:'MIX'},{label:'其他',value:'OTHER'}],
|
||
rulesClientRepayment:{
|
||
type: [
|
||
{ required: true, message: '请选择还款方式', trigger: 'change',},
|
||
],
|
||
totalAmount: [
|
||
{ required: true, message: '请输入还款金额', trigger: 'change',},
|
||
{ pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']}
|
||
],
|
||
paybackDate: [
|
||
{ required: true, message: '请选择还款截止日期', trigger: 'change',},
|
||
],
|
||
stagesDay: [
|
||
{ required: true, message: '请选择每期还款日期', trigger: 'change',},
|
||
],
|
||
partAmount: [
|
||
{ required: true, message: '请输入分期前偿还金额 ', trigger: 'change',},
|
||
{ pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']}
|
||
],
|
||
partDate: [
|
||
{ required: true, message: '请选择分期前偿还日期', trigger: 'change',},
|
||
],
|
||
stagesNum: [
|
||
{ required: true, message: '请输入分期期数', trigger: 'change',},
|
||
{ pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
|
||
],
|
||
},
|
||
|
||
};
|
||
},
|
||
computed:{
|
||
// 左侧
|
||
leftContentHeight(){
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh-100
|
||
},
|
||
|
||
// 中间的内容高度
|
||
centerContentHeight(){
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh-56-112-65-48
|
||
},
|
||
// 获取右侧滚动高度
|
||
rightContentHeight(){
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh-56-56-65-20
|
||
},
|
||
// 获取抽屉drawer的内容高度
|
||
OfficecontentHeight(){
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh-185
|
||
|
||
} ,
|
||
CommunicationcontentHeight(){
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh-150
|
||
} ,
|
||
|
||
},
|
||
async created() {
|
||
this.caseId = this.$route.query.caseId
|
||
await this.getCaseInfoById();//获取详情
|
||
|
||
},
|
||
beforeDestroy() {
|
||
// if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
|
||
// clearInterval(this.timer); //关闭
|
||
// }
|
||
},
|
||
methods: {
|
||
|
||
|
||
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 => {
|
||
console.log(res,'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)
|
||
}
|
||
})
|
||
},
|
||
// 下载调解模板
|
||
handleDownloadMediationTemplate(){
|
||
if(!this.$clickThrottle()) { return }//防止重复点击
|
||
// console.log('调解模板url',templateUrl)
|
||
if(this.templateUrl){
|
||
this.handlePreview({previewUrl:"/manage-center/minio/preview/"+this.templateUrl,url:this.templateUrl})
|
||
}else{
|
||
this.$message({message: '当前案件未存在调解模板', type: "warning",customClass:'messageZindex'})
|
||
}
|
||
|
||
},
|
||
async handlePreview(item) {
|
||
try {
|
||
let res = await this.$fetchApi.getMinioToken({objectName: item.url})
|
||
window.open(`${item.previewUrl}?token=${res}`, '_target')
|
||
}catch (e) {
|
||
this.$message.error(e.msg || e)
|
||
}
|
||
},
|
||
handleSubmitRepayment(){
|
||
this.$refs.ruleFormRepayment.validate((valid) => {
|
||
if (valid){
|
||
console.log(1111)
|
||
|
||
}
|
||
})
|
||
},
|
||
handleBack(){
|
||
// this.$route.query.sourcePage == 'mediationManagement'
|
||
this.$router.push('/mediation-management')
|
||
|
||
},
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.layout-center-wrap{
|
||
height: 100%;
|
||
font-size:14px;
|
||
.layout-center-top-wrap{
|
||
font-size: 14px;
|
||
padding: 10px;
|
||
border-bottom: solid 1px #E5E6EB;
|
||
.ipphoneimg{
|
||
background: url('~@/assets/image/mediate/m-phone.png') no-repeat ;
|
||
background-size:24px ;
|
||
background-position:5px 5px ;
|
||
width: 100px;
|
||
height: 35px;
|
||
padding:7px 5px 5px 35px;
|
||
}
|
||
.smsimg{
|
||
background: url('~@/assets/image/mediate/m-sms.png') no-repeat ;
|
||
background-size:24px ;
|
||
background-position:5px 5px ;
|
||
width: 110px;
|
||
height: 35px;
|
||
padding:7px 5px 5px 35px;
|
||
}
|
||
.videoimg{
|
||
background: url('~@/assets/image/mediate/m-video.png') no-repeat ;
|
||
background-size:24px ;
|
||
background-position:5px 5px ;
|
||
width: 110px;
|
||
height: 35px;
|
||
padding:7px 5px 5px 35px;
|
||
}
|
||
.top-case-btn-left{
|
||
padding-top: 5px;
|
||
.el-button{
|
||
height:35px;
|
||
padding:10px 20px;
|
||
background-color:#F2F3F5 ;
|
||
}
|
||
span{
|
||
margin-left: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.case-send-btn{
|
||
border:solid 1px #E5E6EB;
|
||
height: 35px;
|
||
padding: 7px 10px 0px 10px;
|
||
border-radius: 8px;
|
||
|
||
}
|
||
}
|
||
.top-case-btn-right{
|
||
background-color:#F2F3F5 ;
|
||
padding: 7px 20px;
|
||
border-radius: 8px;
|
||
span{
|
||
|
||
padding: 5px 30px;
|
||
border-radius: 8px;
|
||
margin: 0 3px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active{
|
||
background-color: #fff;
|
||
}
|
||
span:hover{
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.layout-center-center-wrap{
|
||
|
||
height: 100%;
|
||
|
||
// .background-color-fff{
|
||
// background-color: #fff;
|
||
// }
|
||
.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%;
|
||
|
||
.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-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: url('~@/assets/image/mediate/m-right-bg.png') no-repeat ;
|
||
background-size: 100% 100%;
|
||
width: calc(100% - 540px);
|
||
height: 100%;
|
||
padding: 30px;
|
||
|
||
.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>
|