tanghuan/mediate-manage-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI方面

Browse Source
This commit is contained in:
liuxi 2024-12-23 14:38:48 +08:00
parent 514d5ed605
commit ca3980f307
5 changed files with 149 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/dialogPreview.vue
View File

@ -8,7 +8,7 @@
<div slot="title">
<TitleBar title="预览"></TitleBar>
</div>
<div style="min-height:600px; " class="c-flex-center">
<div style="min-height:600px;text-align: center; " class="c-flex-center">
<!-- svg -->
<svgViewer :src="previewUrl" v-if="isSvg"></svgViewer>
<!-- 其他图片 -->

23
src/pages/case-management/detail/index.vue
View File

@ -74,6 +74,7 @@
<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="H" label="调解类型" show-overflow-tooltip ></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>
@ -184,25 +185,7 @@
<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-label f-weight500 f16">案件材料<a><i class="el-icon-plus"></i>上传材料</a></div>
<div class="case-detail-des">
<el-table :data="fileList" :height="300" >
<el-table-column type="index" label="序号" width="55"></el-table-column>
@ -288,7 +271,7 @@ import { subtract } from "lodash";
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:'孟利'}],
tableData:[{H:'电话调解',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:'',

88
src/pages/mediation-page/components/LayoutContent.vue
View File

@ -76,7 +76,14 @@
<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">
@ -192,6 +199,52 @@
</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" />
@ -707,14 +760,44 @@ import api from "@/services/caseManagement";
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;}
}
}
}
@ -741,6 +824,7 @@ import api from "@/services/caseManagement";
margin-top: 15px;
}
}
.case-office-record,.case-materials-record{

96
src/pages/mediation-page/components/RepaymentCertificate.vue
View File

@ -2,7 +2,7 @@
<div class="case-repayment-certificate">
<div class="mb-16 flex-row justify-content-between">
<span class="f-weight500 f18">还款凭证</span>
<span class="cursor-pointer" @click="AddFlag = true"><i class="el-icon-plus"></i> 添加还款凭证</span>
<span class="cursor-pointer" @click="AddFlag = true;repaymentObj = {mediaPath:[]}"><i class="el-icon-plus"></i> 添加还款凭证</span>
</div>
<div v-if="AddFlag" class="case-detail-des flex-column mb-16 p-16 border-radius-8">
<div class="flex-column justify-content-between">
@ -55,31 +55,49 @@
<div class="case-detail-des flex-column mb-16 p-16 border-radius-8" v-for="(proofitem,index) in ProofList" :key="index">
<div class="flex-column justify-content-between">
<el-form ref="ruleFormRepaymentUpdate"
:model="proofitem"
:rules="rulesClientRepayment"
label-width="130px">
<el-form v-if="updateRow != index" label-width="130px">
<div class="flex-row justify-content-between mb-8">
<div class="pt-8 flex-column">
<span class="color-86909C">上传者：<a></a></span>
<span class="color-86909C">上传时间：<a>{{ proofitem.createAt }}</a></span>
<span class="color-86909C mt-8">上传时间：<a>{{ proofitem.createAt }}</a></span>
<span class="color-86909C mt-8">凭证金额：<a>{{ proofitem.amount }}</a>元</span>
<span class="color-86909C mt-8">还款日期：<a>{{ proofitem.paybackTime | formaDate('yyyy-MM-dd hh:mm:ss') }}</a></span>
<span class="color-86909C mt-8">备注说明：<a>{{ proofitem.remark }}</a></span>
<span class="color-86909C flex-row mt-8">还款凭证：
<a>
<upload-file :file-list="[{url: proofitem.proofUrl}]" :max-count="1"
:readOnly="true"
:show-file-name="true"
uploadName="支持图片大小不超过10M"
accept=".jpg,.png,.jpeg"
:span="6"
:fileSize="10"
@handleUploadFile="handleUploadFile">
</upload-file>
</a>
</span>
</div>
<div>
<el-button type="primary" size="small">效验</el-button>
<el-button size="small" @click="updateRow = index">编辑</el-button>
<el-button size="small" @click="updateClick(index,proofitem)">编辑</el-button>
</div>
</div>
</el-form>
<el-form v-if="updateRow > -1 && index == updateRow" ref="ruleFormRepaymentUpdate"
:model="repaymentObj"
:rules="rulesClientRepayment"
label-width="130px">
<el-form-item label="凭证金额" prop="amount">
<el-input class="inputpaddingtop2" disabled
<el-input class="inputpaddingtop2"
size="small"
placeholder="请输入凭证金额"
v-model="proofitem.amount">
v-model="repaymentObj.amount">
<template slot="append">元</template>
</el-input>
</el-form-item>
<el-form-item label="还款日期" prop="paybackTime">
<el-date-picker class="width100" size="small" disabled
v-model="proofitem.paybackTime"
<el-date-picker class="width100" size="small"
v-model="repaymentObj.paybackTime"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
@ -87,17 +105,16 @@
</el-date-picker>
</el-form-item>
<el-form-item label="备注说明" prop="remark">
<el-input disabled
<el-input
size="small"
clearable
placeholder="请输入备注说明"
v-model="proofitem.remark">
v-model="repaymentObj.remark">
</el-input>
</el-form-item>
<el-form-item label="凭证" prop="mediaPath">
<upload-file :file-list="[{url: proofitem.proofUrl}]" :max-count="1"
:readOnly="true"
:show-file-name="true"
<upload-file :file-list="fileList" :max-count="1"
:show-file-name="false"
uploadName="支持图片大小不超过10M"
accept=".jpg,.png,.jpeg"
:span="6"
@ -105,8 +122,8 @@
@handleUploadFile="handleUploadFile">
</upload-file>
</el-form-item>
<el-form-item label="" v-if="updateRow > 0 && index == updateRow">
<el-button @click="updateRow = 0" size="small">取消</el-button>
<el-form-item label="" v-if="updateRow > -1 && index == updateRow">
<el-button @click="updateRow = -1" size="small">取消</el-button>
<el-button type="primary" @click="handleSubmitUpdate()" size="small">保存</el-button>
</el-form-item>
</el-form>
@ -132,7 +149,7 @@ import api from "@/services/caseManagement";
data() {
return {
AddFlag:false,
updateRow:0,
updateRow:-1,
repaymentObj:{
mediaPath:[]
},
@ -161,21 +178,7 @@ import api from "@/services/caseManagement";
this.getProofList()
},
methods: {
handleSubmitUpdate(){
this.$refs.ruleFormRepayment.validate((valid) => {
if (valid){
this.repaymentObj.caseId = this.eventDialog.caseId
this.repaymentObj.proofUrl = this.repaymentObj.mediaPath[0]
api.gettraceProof_create(this.repaymentObj).then(res => {
if(!res.code){
this.updateRow = 0
this.getProofList()
}
})
}
})
},
handleSubmitRepayment(){
this.$refs.ruleFormRepayment.validate((valid) => {
if (valid){
@ -185,6 +188,8 @@ import api from "@/services/caseManagement";
api.gettraceProof_create(this.repaymentObj).then(res => {
if(!res.code){
this.AddFlag = false
this.updateRow = -1
this.fileList = []
this.getProofList()
}
})
@ -196,15 +201,30 @@ import api from "@/services/caseManagement";
if(!res.code){
this.ProofList = res
this.ProofList.forEach(item =>{
this.fileList.push({
url: item.proofUrl,
})
item.mediaPath = [item.proofUrl]
})
}
})
},
updateClick(index,proofitem){
this.updateRow = index;
this.repaymentObj = proofitem
this.fileList = [{url: proofitem.proofUrl,fileName:'上传'}]
},
handleSubmitUpdate(){
this.$refs.ruleFormRepaymentUpdate[0].validate((valid) => {
if (valid){
api.gettraceProof_create(this.repaymentObj).then(res => {
if(!res.code){
this.updateRow = -1
this.fileList = []
this.getProofList()
}
})
}
})
},
handleUploadFile(fileList){
// console.log('获取上传文件信息',fileList)

2
src/utils/util.js
View File

@ -172,7 +172,7 @@ const util = {
if(fileUrl==null||fileUrl=='') {
return fileUrl
}
console.log(/.(pdf)$/.test(fileUrl.toLowerCase()),'111')
if(/.(pdf)$/.test(fileUrl.toLowerCase())) {
return require('../assets/image/util/pdf_img.jpg')
}