445 lines
25 KiB
Vue
445 lines
25 KiB
Vue
<template>
|
||
<div class="layout-content-wrap case-detail">
|
||
<div class="navigation-bar flex-row mb-16">
|
||
<img src="../../../assets/image/Link.png" height="22" alt="">
|
||
<a>/</a>
|
||
<a>案件包列表</a><a>/</a>
|
||
<a>案件列表</a><a>/</a>
|
||
<a>案件详情</a>
|
||
</div>
|
||
<div class="layout-tabs-content-box case-detail-nav flex-row background-color-fff border-radius-4 mb-16 flex-row-center">
|
||
<span :class="navactive == 1 ?'active':''" @click="navactive=1">案件信息</span>
|
||
<span :class="navactive == 2 ?'active':''" @click="navactive=2">案件材料</span>
|
||
<span :class="navactive == 3 ?'active':''" @click="navactive=3">案件日志</span>
|
||
</div>
|
||
<div v-if="navactive == 1 " class="layout-tabs-content-box flex-row padding-0 f14">
|
||
<div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-4 p-16" style="width: calc(100% - 370px);">
|
||
<div class="case-detail-title f18">被申请人：<a v-for="(item,index) in baseInfo.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a></div>
|
||
<div class="flex-column">
|
||
<div class="case-detail-label f-weight500 f16">基本信息</div>
|
||
<div class="case-detail-des">
|
||
<span><a>案件包名称：</a><a>河北幸福消费金融股份有限公司012341</a></span>
|
||
<span><a>委案机构：</a><a>{{baseInfo.AAAAAAAAA}}</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>
|
||
</div>
|
||
<div class="case-detail-label f-weight500 f16">债务信息</div>
|
||
<div class="case-detail-des">
|
||
<!-- <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 class="case-detail-label f-weight500 f16">联系人信息</div>
|
||
<div class="case-detail-des flex-column">
|
||
<div>
|
||
<span><a>联系人：</a><a>李新华</a></span>
|
||
<span><a>与债务人关系：</a><a>本人</a></span>
|
||
<span><a>联系人手机：</a><a>15138026046</a></span>
|
||
</div>
|
||
<div>
|
||
<span><a>联系人：</a><a>秦大伟</a></span>
|
||
<span><a>与债务人关系：</a><a>其他</a></span>
|
||
<span><a>联系人手机：</a><a>15939186663</a></span>
|
||
</div>
|
||
</div>
|
||
<div class="case-detail-label f-weight500 f16">案件办理信息</div>
|
||
<div>
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane>
|
||
<span slot="label">调解记录</span>
|
||
<el-table :data="tableData" :height="300" >
|
||
<el-table-column type="index" label="序号" width="55"></el-table-column>
|
||
<el-table-column prop="A" label="跟进情况" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="B" label="调解进度" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="C" label="沟通对象" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="D" label="备注" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="E" label="预约回款情况" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="F" label="添加时间" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="G" label="添加人" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column label="操作" width="170">
|
||
<template slot-scope="scope">
|
||
<div class="flex-row align-items-center">
|
||
<el-button size="mini" @click="handleCaseAllocation(scope)">查看录音</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
<el-tab-pane>
|
||
<span slot="label"><i class="el-icon-s-flag"></i> 回款计划</span>
|
||
<el-table :data="tableData1" :height="300" >
|
||
<el-table-column type="index" label="序号" width="55"></el-table-column>
|
||
<el-table-column prop="A" label="回款类型" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="B" label="约定还款金额" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="C" label="约定还款时间" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="D" label="备注信息" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column label="操作" width="170">
|
||
<template slot-scope="scope">
|
||
<div class="flex-row align-items-center">
|
||
<el-button size="mini" @click="handleCaseAllocation(scope)">编辑</el-button>
|
||
<el-button size="mini" @click="handleCaseAllocation(scope)">删除</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
<el-tab-pane>
|
||
<span slot="label"><i class="el-icon-s-flag"></i> 回款凭证</span>
|
||
<span class="f16">总计待还金额：14,289.86元，总计已还金额：0元</span>
|
||
<el-table :data="tableData2" :height="300" >
|
||
<el-table-column type="index" label="序号" width="55"></el-table-column>
|
||
<el-table-column prop="A" label="凭证时间" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="B" label="凭证金额" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="C" label="上传者" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="D" label="上传时间" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="E" label="备注信息" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column label="操作" width="170">
|
||
<template slot-scope="scope">
|
||
<div class="flex-row align-items-center">
|
||
<el-button size="mini" @click="handleCaseAllocation(scope)">查看</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- table -->
|
||
<div class="flex-column" style="width: 350px; margin-left: 20px;">
|
||
<div class="background-color-fff border-radius-4 p-16 flex-column">
|
||
<div class="case-detail-right-label f-weight500 f16">备注</div>
|
||
<div class="case-detail-right-des">
|
||
<span>孟利于2024-12-04 10:04:04备注</span>
|
||
<el-input class="mt-8" type="textarea" v-model="Qualitydesc" :rows="4"></el-input>
|
||
</div>
|
||
<div class="case-detail-label f-weight500 f16">质检评语</div>
|
||
<div class="case-detail-right-des">
|
||
<span>孟利于2024-12-04 10:04:04评语</span>
|
||
<el-input class="mt-8" type="textarea" v-model="Qualitydesc" :rows="4"></el-input>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="background-color-fff border-radius-4 p-16 flex-column mt-16">
|
||
<div class="flex-column item-trace">
|
||
<div class="flex-row justify-content-between case-pk-title">
|
||
<span>案件事项追踪</span>
|
||
</div>
|
||
<div class="case-pk-cont">
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:0,title:'短信发送追踪',caseNo:'1'}">
|
||
<span>短信发送追踪</span><span><a>1</a>/<a>2</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:2,title:'视频调解追踪',caseNo:'1'}">
|
||
<span>视频调解追踪</span><span><a>1</a>/<a>2</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:3,title:'文书生成追踪',caseNo:'1'}">
|
||
<span>文书生成追踪</span><span><a>1</a>/<a>2</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:4,title:'文书签字追踪',caseNo:'1'}">
|
||
<span>文书签字追踪</span><span><a>1</a>/<a>2</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:5,title:'文书签章追踪',caseNo:'1'}">
|
||
<span>文书签章追踪</span><span><a>1</a>/<a>2</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:6,title:'文书送达追踪',caseNo:'1'}">
|
||
<span>文书送达追踪</span><span><a>1</a>/<a>2</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:7,title:'还款凭证登记',caseNo:'1'}">
|
||
<span>还款凭证登记</span><span><a>1</a>/<a>2</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div v-if="navactive == 2 " class="layout-tabs-content-box flex-row padding-0 f14">
|
||
<div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-4 p-16 width100" >
|
||
<div class="flex-column">
|
||
<div class="case-detail-label f-weight500 f16">身份证明材料<a><i class="el-icon-plus"></i>上传材料</a></div>
|
||
<div class="case-detail-des">
|
||
<el-table :data="tableData" :height="300" >
|
||
<el-table-column type="index" label="序号" width="55"></el-table-column>
|
||
<el-table-column prop="A" label="材料类型" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="B" label="文件名称" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="F" label="上传时间" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="G" label="上传人" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column label="操作" width="170">
|
||
<template slot-scope="scope">
|
||
<div class="flex-row align-items-center">
|
||
<el-button size="mini" @click="handleCaseAllocation(scope)">删除</el-button>
|
||
<el-button size="mini" @click="handleCaseAllocation(scope)">查看</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="case-detail-label f-weight500 f16">证据材料<a><i class="el-icon-plus"></i>上传材料</a></div>
|
||
<div class="case-detail-des">
|
||
<el-table :data="tableData" :height="300" >
|
||
<el-table-column type="index" label="序号" width="55"></el-table-column>
|
||
<el-table-column prop="A" label="材料类型" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="B" label="文件名称" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="F" label="上传时间" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="G" label="上传人" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column label="操作" width="170">
|
||
<template slot-scope="scope">
|
||
<div class="flex-row align-items-center">
|
||
<el-button size="mini" @click="handleCaseAllocation(scope)">删除</el-button>
|
||
<el-button size="mini" @click="handleCaseAllocation(scope)">查看</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="case-detail-label f-weight500 f16">案件文书</div>
|
||
<div class="case-detail-des">
|
||
<el-table :data="tableData" :height="300" >
|
||
<el-table-column type="index" label="序号" width="55"></el-table-column>
|
||
<el-table-column prop="A" label="文书类型" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="B" label="文书名称" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="B" label="是否签章" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="B" label="是否完成签字" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="B" label="签字人" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="F" label="生成时间" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column prop="G" label="操作人" show-overflow-tooltip ></el-table-column>
|
||
<el-table-column label="操作" width="230">
|
||
<template slot-scope="scope">
|
||
<div class="flex-row align-items-center">
|
||
<el-button size="mini" @click="handleCaseAllocation(scope)">上传</el-button>
|
||
<el-button size="mini" @click="handleCaseAllocation(scope)">删除</el-button>
|
||
<el-button size="mini" @click="handleCaseAllocation(scope)">查看</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="navactive == 3 " class="layout-tabs-content-box flex-row padding-0 f14">
|
||
<div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-4 p-32 width100" >
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<!-- 事项追踪 -->
|
||
<eventTracingDialog v-if="eventTraDialog" :eventTraDialog.sync="eventTraDialog" />
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import api from "@/services/caseManagement";
|
||
import { stubString } from "lodash";
|
||
import { subtract } from "lodash";
|
||
export default {
|
||
components: {
|
||
eventTracingDialog: () => import('../../event-tracing/index.vue'),//事项追踪
|
||
},
|
||
data() {
|
||
return {
|
||
eventTraDialog:null,
|
||
navactive:1,
|
||
Qualitydesc:'结清应还金额：16776.74逾期未还费用：2486.88',
|
||
tableData:[{A:'一次性全部还款',B:'承诺账户',C:'钟华丽-本人-188****2929',D:'CS',E:'回款金额:14289.86,回款时间:2024-12-05',F:'2024-12-05 09:13:29',G:'孟利'}],
|
||
tableData1:[{A:'一次性全部回款',B:'14,289.86元',C:'2024-12-05',D:'无',E:'',F:'',G:'',H:''}],
|
||
tableData2:[{A:'2024-12-05 00:00:00',B:'14,289.86元',C:'孟利',D:'2024-12-05 14:13:56',E:'',F:'',G:'',H:''}],
|
||
caseId:'',
|
||
baseInfo:{},
|
||
|
||
|
||
|
||
}
|
||
},
|
||
computed:{
|
||
// 获取抽屉drawer的内容高度
|
||
drawerContentHeight(){
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh-200
|
||
}
|
||
|
||
},
|
||
async created() {
|
||
|
||
if (this.$route.query.caseId != undefined) {
|
||
this.caseId = this.$route.query.caseId;
|
||
this.getCaseInfoById();//获取详情
|
||
}
|
||
},
|
||
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
|
||
|
||
}
|
||
|
||
})
|
||
},
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.case-detail{
|
||
.case-detail-nav{
|
||
span{ width: 100px;font-size: 18px; color: #86909C;cursor: pointer;}
|
||
span:hover{ color: #C66A5B;}
|
||
span.active{ color: #C66A5B;}
|
||
}
|
||
.case-detail-title{
|
||
border-bottom: solid 2px #C66A5B99;
|
||
}
|
||
.case-detail-label{
|
||
margin: 15px 0;
|
||
a{
|
||
font-size: 14px;
|
||
color: #C66A5B;
|
||
font-weight: 400;
|
||
cursor: pointer;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
.case-detail-des{
|
||
background-color: #F7F8FA;
|
||
padding: 10px 15px;
|
||
color:#86909C;
|
||
span{
|
||
width: 25%;
|
||
display: inline-block;
|
||
margin: 5px 0;
|
||
}
|
||
span a:first-child{width: 160px;display: inline-block;}
|
||
span a:last-child{color:#1D2129;}
|
||
}
|
||
.case-detail-right-label{margin: 0px 0 15px 0;}
|
||
.case-detail-right-des{background-color: #F7F8FA;padding:10px;}
|
||
|
||
.item-trace{
|
||
border-radius: 8px;
|
||
.case-pk-title{
|
||
span:first-child{
|
||
font-size: 18px;
|
||
color:#1D2129;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.case-pk-cont{
|
||
padding: 10px 0 0px 0;
|
||
position: relative;
|
||
.resultplan{
|
||
font-size: 32px;
|
||
position: absolute;
|
||
left: 115px;
|
||
top: 130px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 165px;
|
||
text-align: center;
|
||
}
|
||
div{
|
||
margin-top:5px;
|
||
margin-bottom:10px;
|
||
color: #4E5969;
|
||
background-color:#F7F8FA ;
|
||
padding: 12px;
|
||
border-radius: 2px;
|
||
a{
|
||
font-weight: 600;
|
||
}
|
||
a:first-child{
|
||
color: #E8535A;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-badge{
|
||
top: 3px;
|
||
}
|
||
|
||
|
||
</style>
|
||
<style lang="scss">
|
||
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||
color: #C66A5B;
|
||
}
|
||
.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover{
|
||
color: #C66A5B !important;
|
||
}
|
||
.el-tabs--border-card > .el-tabs__header .el-tabs__item i{
|
||
color:red !important;
|
||
}
|
||
</style>
|