UI相关
This commit is contained in:
parent
62d8f48287
commit
91c31f2fbc
@ -663,12 +663,13 @@ html{
|
||||
transform:translate(-50%, -50%);
|
||||
|
||||
.el-dialog__header{
|
||||
height: $height64 !important;
|
||||
line-height: $height64 !important;
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
margin: 0;
|
||||
font-size:$f16;
|
||||
color: $color-text-primary;
|
||||
padding: 0 $size24;
|
||||
border-bottom: solid 1px #E5E6EB;
|
||||
}
|
||||
.el-dialog__body{
|
||||
// padding: $size16 $size72 $size16 $size72;
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
:rules="rulesClient"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm">
|
||||
<el-row type="flex" align="middle">
|
||||
<el-row type="flex" align="middle" class="mt-16">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="案件包名" prop="pkgName">
|
||||
<el-input
|
||||
@ -93,7 +93,7 @@
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSubmit">确认保存
|
||||
@click="handleSubmit">确认导入
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
@ -69,6 +69,7 @@
|
||||
<el-table-column prop="channel" label="应还金额" show-overflow-tooltip ></el-table-column>
|
||||
<el-table-column prop="channel" label="实际还款日期" show-overflow-tooltip ></el-table-column>
|
||||
<el-table-column prop="channel" label="实际还款金额" show-overflow-tooltip ></el-table-column>
|
||||
<el-table-column prop="channel" label="状态" show-overflow-tooltip ></el-table-column>
|
||||
<el-table-column prop="channel" label="操作人" show-overflow-tooltip ></el-table-column>
|
||||
<el-table-column prop="planStartTime" label="操作时间" show-overflow-tooltip >
|
||||
<template slot-scope="scope">
|
||||
@ -79,8 +80,8 @@
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<div class="flex-row align-items-center">
|
||||
<el-button size="mini" @click="handleDelete(scope)">查看</el-button>
|
||||
<el-button size="mini" @click="handleBackCase(scope)">效验</el-button>
|
||||
<el-button size="mini" @click="handleBackCase(scope)">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -33,74 +33,80 @@
|
||||
<img src="../../../assets/image/mediate/m-info-robot.png" />
|
||||
</span>
|
||||
<span class="separation"></span>
|
||||
<span class="left-img-info flex-column active">
|
||||
<span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @click="leftActive = 1">
|
||||
<img src="../../../assets/image/mediate/m-info1.png" />
|
||||
<a>案件信息</a>
|
||||
</span>
|
||||
<span class="left-img-info flex-column">
|
||||
<span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @click="leftActive = 2">
|
||||
<img src="../../../assets/image/mediate/m-info2.png" />
|
||||
<a>联系人</a>
|
||||
</span>
|
||||
<span class="left-img-info flex-column">
|
||||
<span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @click="leftActive = 3">
|
||||
<img src="../../../assets/image/mediate/m-info3.png" />
|
||||
<a>案件材料</a>
|
||||
</span>
|
||||
<span class="left-img-info flex-column">
|
||||
<span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @click="leftActive = 4">
|
||||
<img src="../../../assets/image/mediate/m-info4.png" />
|
||||
<a>还款方案</a>
|
||||
</span>
|
||||
<span class="left-img-info flex-column">
|
||||
<span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @click="leftActive = 5">
|
||||
<img src="../../../assets/image/mediate/m-info5.png" />
|
||||
<a>还款计划</a>
|
||||
</span>
|
||||
<span class="left-img-info flex-column">
|
||||
<span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @click="leftActive = 6">
|
||||
<img src="../../../assets/image/mediate/m-info6.png" />
|
||||
<a>还款凭证</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="layout-center-left2-wrap">
|
||||
<!-- 债务信息 -->
|
||||
<div 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>
|
||||
|
||||
<el-scrollbar :style="'height:'+`${leftContentHeight}`+'px'">
|
||||
<!-- 债务信息 -->
|
||||
<div 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>{{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 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>
|
||||
|
||||
<!-- 联系人信息 -->
|
||||
|
||||
<!-- 债务信息 -->
|
||||
</el-scrollbar>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -116,32 +122,60 @@
|
||||
<span class="btn-communication">电话沟通2</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>
|
||||
<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>
|
||||
<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 class="case-lable">
|
||||
<a class="case-status0">半失联客户</a><a class="case-status0">半失联客户</a>
|
||||
</div>
|
||||
<div>
|
||||
<span>通话44秒</span>
|
||||
<span class="ml-32 cursor-pointer"><i class="el-icon-video-play"></i> 播放录音</span>
|
||||
<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-row pt-16">
|
||||
<span>沟通备注：</span>
|
||||
<span>李四</span>
|
||||
<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>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<!-- 案件文书 -->
|
||||
<div v-if="rightActive == 2" class="case-office-record">
|
||||
@ -172,11 +206,57 @@
|
||||
</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>
|
||||
@ -194,6 +274,7 @@ import api from "@/services/caseManagement";
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
leftActive:1,
|
||||
rightActive:1,
|
||||
fileList:[],
|
||||
mediationRecord:[],//调解记录
|
||||
@ -206,7 +287,7 @@ import api from "@/services/caseManagement";
|
||||
// 左侧
|
||||
leftContentHeight(){
|
||||
let oh = document.documentElement.clientHeight;
|
||||
return oh-56-65-184-12
|
||||
return oh-100
|
||||
},
|
||||
|
||||
// 中间的内容高度
|
||||
@ -225,6 +306,10 @@ import api from "@/services/caseManagement";
|
||||
return oh-185
|
||||
|
||||
} ,
|
||||
CommunicationcontentHeight(){
|
||||
let oh = document.documentElement.clientHeight;
|
||||
return oh-150
|
||||
} ,
|
||||
|
||||
},
|
||||
async created() {
|
||||
@ -408,14 +493,18 @@ import api from "@/services/caseManagement";
|
||||
|
||||
height: 100%;
|
||||
|
||||
.background-color-fff{
|
||||
background-color: #fff;
|
||||
}
|
||||
// .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%;
|
||||
@ -452,12 +541,17 @@ import api from "@/services/caseManagement";
|
||||
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: 15px 0px 0px 0px;
|
||||
border-radius: 25px 0px 0px 25px;
|
||||
padding: 20px 30px;
|
||||
.case-detail-des{
|
||||
border:solid 1px #E5E6EB;
|
||||
@ -504,14 +598,14 @@ import api from "@/services/caseManagement";
|
||||
}
|
||||
}
|
||||
|
||||
.case-office-record{
|
||||
.width120px{width: 140px;}
|
||||
.width180px{width: 220px;}
|
||||
.width200px{width: calc(50% - 320px);}
|
||||
span a{color: #C66A5B; margin-right: 13px;}
|
||||
.case-office-record,.case-materials-record{
|
||||
|
||||
span a{color: #C66A5B; margin-right: 13px; cursor: pointer;}
|
||||
span a:last-child{margin-right: 0;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user