UI部分
This commit is contained in:
parent
4e9ccd4943
commit
62d8f48287
BIN
src/assets/image/mediate/m-info-robot.png
Normal file
BIN
src/assets/image/mediate/m-info-robot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/image/mediate/m-info1.png
Normal file
BIN
src/assets/image/mediate/m-info1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/image/mediate/m-info2.png
Normal file
BIN
src/assets/image/mediate/m-info2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/image/mediate/m-info3.png
Normal file
BIN
src/assets/image/mediate/m-info3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/image/mediate/m-info4.png
Normal file
BIN
src/assets/image/mediate/m-info4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/image/mediate/m-info5.png
Normal file
BIN
src/assets/image/mediate/m-info5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/image/mediate/m-info6.png
Normal file
BIN
src/assets/image/mediate/m-info6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/image/mediate/m-info7.png
Normal file
BIN
src/assets/image/mediate/m-info7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/image/mediate/m-left-bg.png
Normal file
BIN
src/assets/image/mediate/m-left-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 325 KiB |
BIN
src/assets/image/mediate/m-phone.png
Normal file
BIN
src/assets/image/mediate/m-phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 836 B |
BIN
src/assets/image/mediate/m-right-bg.png
Normal file
BIN
src/assets/image/mediate/m-right-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/image/mediate/m-sms.png
Normal file
BIN
src/assets/image/mediate/m-sms.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 717 B |
BIN
src/assets/image/mediate/m-triangle.png
Normal file
BIN
src/assets/image/mediate/m-triangle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 342 B |
BIN
src/assets/image/mediate/m-video.png
Normal file
BIN
src/assets/image/mediate/m-video.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 493 B |
@ -8,8 +8,8 @@
|
||||
<span><i class="el-icon-arrow-left f48 f-weight600 "></i></span>
|
||||
</div>
|
||||
<div class="show-file">
|
||||
<img :src="`/manage-center/minio/preview/${fileObj.url}`" />
|
||||
<!-- <iframe :src="`/manage-center/minio/preview/${fileObj.url}`" frameborder="0" width="100%" height="100%"></iframe> -->
|
||||
<img v-if="fileType == 'image'" :src="`/manage-center/minio/preview/${fileObj.url}`" />
|
||||
<iframe v-else :src="`/manage-center/minio/preview/${fileObj.url}`" frameborder="0" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
<div class="next-file text-center" @click="nextClick">
|
||||
<span><i class="el-icon-arrow-right f48 f-weight600"></i></span>
|
||||
@ -40,6 +40,7 @@ import api from "@/services/caseManagement";
|
||||
return {
|
||||
CurrentPosition:0,//当前位置
|
||||
fileObj:{},
|
||||
fileType:''
|
||||
|
||||
};
|
||||
},
|
||||
@ -51,18 +52,25 @@ import api from "@/services/caseManagement";
|
||||
}
|
||||
})
|
||||
|
||||
// if(this.$util.getFileType(text) === 'image') {
|
||||
// // 如果是图片，直接显示图片
|
||||
// obj.iconFrontSrc = obj.previewUrl
|
||||
// }
|
||||
this.getShowFileType(this.fileObj.url)
|
||||
|
||||
},
|
||||
methods: {
|
||||
getShowFileType(url){
|
||||
console.log(this.$util.getFileType(url),'v')
|
||||
if(this.$util.getFileType(url) === 'image') {
|
||||
// 如果是图片，直接显示图片
|
||||
this.fileType = 'image'
|
||||
}
|
||||
},
|
||||
previousClick(){
|
||||
let nextCurrent = this.CurrentPosition-1;
|
||||
if(this.fileDialog.filelist[nextCurrent]!=undefined)
|
||||
{
|
||||
this.fileObj = this.fileDialog.filelist[nextCurrent]
|
||||
this.CurrentPosition = nextCurrent
|
||||
|
||||
this.getShowFileType(this.fileObj.url)
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -76,6 +84,8 @@ import api from "@/services/caseManagement";
|
||||
{
|
||||
this.fileObj = this.fileDialog.filelist[nextCurrent]
|
||||
this.CurrentPosition = nextCurrent
|
||||
|
||||
this.getShowFileType(this.fileObj.url)
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -97,7 +107,12 @@ import api from "@/services/caseManagement";
|
||||
min-height: 500px;
|
||||
.previous-file{width: 50px;margin-right: 10px; background-color: #F7F8FA;line-height: 650px;}
|
||||
.next-file{width: 50px;margin-left: 10px; background-color: #F7F8FA;line-height: 650px;}
|
||||
.show-file{width: calc(100% - 120px);height: 700px;}
|
||||
.show-file{
|
||||
width: calc(100% - 120px);height: 700px;
|
||||
text-align: center;
|
||||
line-height: 650px;
|
||||
img{max-height: 100%; max-width: 100%;}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :visible="true" width="80%" append-to-body :close-on-click-modal="false"
|
||||
<el-dialog :visible="true" width="80%" class="dialog-case-record" append-to-body :close-on-click-modal="false"
|
||||
@close="handleClose()">
|
||||
|
||||
<div class="dialog-content dialog-case-trace">
|
||||
@ -130,19 +130,46 @@ import api from "@/services/caseManagement";
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.dialog-case-record{
|
||||
.el-dialog .el-dialog__header{background-color: #C66A5B;}
|
||||
.el-dialog__header{background-color: #C66A5B;}
|
||||
}
|
||||
.dialog-case-trace{
|
||||
padding: 16px 20px;
|
||||
max-height:500px
|
||||
}
|
||||
.dialog-case-trace .zd-el-tabs-custom{
|
||||
margin-top: -75px ;
|
||||
margin-top: -61px ;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.dialog-case-trace .zd-el-tabs-custom span{
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.dialog-case-trace .case-trace-cont
|
||||
{
|
||||
min-height: 500px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.dialog-case-record{
|
||||
.el-dialog .el-dialog__header {
|
||||
background-color: #C66A5B;
|
||||
height: 43px !important;
|
||||
line-height: 50px !important;
|
||||
}
|
||||
.el-tabs__item{color: #FFFFFFB2;}
|
||||
.zd-el-tabs-custom .el-tabs__item.is-active {
|
||||
color: #fff !important;
|
||||
}
|
||||
.zd-el-tabs-custom .el-tabs__active-bar{
|
||||
background-color: #fff !important;
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
.el-dialog__headerbtn .el-dialog__close{
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<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.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>
|
||||
@ -28,6 +28,8 @@
|
||||
<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 f16">债务信息</div>
|
||||
<div class="case-detail-des">
|
||||
|
||||
@ -307,7 +307,7 @@
|
||||
<p class="color-000">{{ scope.row.mediatorName }}</p>
|
||||
</span>
|
||||
<span style=" text-align: right;">
|
||||
<el-button size="mini" class="case-btn" @click="jumpUrl(`/case-detail?dataKey=casepack&caseId=${scope.row.id}`)">立即调解</el-button>
|
||||
<el-button size="mini" class="case-btn" @click="jumpUrl(`/mediation-page?sourcePage=sourcePage&caseId=${scope.row.id}`)">立即调解</el-button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-row justify-content-between case-bg">
|
||||
|
||||
695
src/pages/mediation-page-old/components/LayoutContent.vue
Normal file
695
src/pages/mediation-page-old/components/LayoutContent.vue
Normal file
@ -0,0 +1,695 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="layout-center-wrap">
|
||||
<!-- 左边数据 -->
|
||||
<div class="layout-center-left-wrap">
|
||||
<div class="layout-center-left-top">
|
||||
<div class="top-bg">
|
||||
<div class="flex-row ">
|
||||
<img src="@/assets/image/mediate/add.png" alt="" class="add-img">
|
||||
<img src="@/assets/image/mediate/text.png" alt="" class="top-bg-text">
|
||||
</div>
|
||||
<div class="flex-row justify-content-center align-items-center m-v-8">
|
||||
<i class="el-icon-arrow-left cursor-pointer color-fff" @click="handleChangeImg('left')"></i>
|
||||
<!-- <div class="" style="margin:0 65px">
|
||||
<img src="@/assets/image/mediate/group-img-1.png" alt="" class="group-img">
|
||||
<img src="@/assets/image/mediate/group-text-1.png" alt="" class="group-text">
|
||||
</div> -->
|
||||
<div class="" style="margin:0 65px">
|
||||
<div v-for="(item,inx) in imgArr" :key="inx" v-show="item.id === currentIndex">
|
||||
<img :src="item.imgUrl" alt="" class="group-img">
|
||||
<img :src="item.imgText" alt="" class="group-text">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<i class="el-icon-arrow-right cursor-pointer color-fff" @click="handleChangeImg('right')"></i>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="@/assets/image/mediate/decript.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-scrollbar class="bor">
|
||||
<div :style="{'height': `${leftContentHeight}px`}">
|
||||
<div class="left-base-info p-24" >
|
||||
<div class="mb-16">
|
||||
<div class="f16 color-text-primary mb-8">{{baseInfo.financialOrgName || '-'}}</div>
|
||||
<div class="f14 color-text-secondary">{{baseInfo.financialOrgCode || '-'}}</div>
|
||||
</div>
|
||||
<div class="mb-16">
|
||||
<div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/case-name.png" alt="" class="icon-small">案件名称</div>
|
||||
<div class="f14 color-text-primary">{{baseInfo.caseName ||'-'}}</div>
|
||||
</div>
|
||||
<div class="mb-16">
|
||||
<div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/case-number.png" alt="" class="icon-small">案件编号</div>
|
||||
<div class="f14 color-text-primary">{{baseInfo.caseNo ||'-'}}</div>
|
||||
</div>
|
||||
<div class="mb-16">
|
||||
<div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">金融产品类型</div>
|
||||
<div class="f14 color-text-primary">{{productType ||'-'}}</div>
|
||||
</div>
|
||||
<div class="mb-16">
|
||||
<div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">逾期次数</div>
|
||||
<div class="f14 color-text-primary">{{baseInfo.overdueTimes}}</div>
|
||||
</div>
|
||||
<div class="mb-16">
|
||||
<div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">标的金额</div>
|
||||
<div class="f14 color-text-primary">{{baseInfo.moneyAmount ||'-'}}</div>
|
||||
</div>
|
||||
<div class="mb-16">
|
||||
<div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/start-time.png" alt="" class="icon-small">计划开始时间</div>
|
||||
<div class="f14 color-text-primary">{{baseInfo.planStartTime ||'-'}}</div>
|
||||
</div>
|
||||
<div class="mb-16">
|
||||
<div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/end-time.png" alt="" class="icon-small">计划结束时间</div>
|
||||
<div class="f14 color-text-primary">{{baseInfo.planEndTime ||'-'}}</div>
|
||||
</div>
|
||||
<div class="mb-16">
|
||||
<div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/schedule.png" alt="" class="icon-small">案件描述</div>
|
||||
<div class="f14 color-text-primary">{{baseInfo.caseDescr ||'-'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layout-center-right-wrap">
|
||||
<!-- 中间 -->
|
||||
<div class="layout-center-right-center">
|
||||
<el-tabs class="zd-el-tabs-custom zd-el-tabs-custom__left_padding" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="当事人" name="caseParty">
|
||||
<el-scrollbar class="bor">
|
||||
<div class="p-h-16" :style="{'height': `${centerContentHeight}px`}">
|
||||
<div class="pt-24">
|
||||
<div class="f14">债权人</div>
|
||||
<div class="center-list">
|
||||
<div class="center-list-left pink-color">
|
||||
<el-avatar :size="77" :src="defaultHeadUrl" class="el-avatar"></el-avatar>
|
||||
<div class="f18 color-text-primary mt-16">{{baseInfo.creditorName ||'-'}}</div>
|
||||
<div class="f14 color-text-primary mt-8">债权人</div>
|
||||
</div>
|
||||
<div class="center-list-right">
|
||||
<el-row :gutter="16" class="el-row mb-16">
|
||||
<el-col :span="8">
|
||||
<div class="f14">
|
||||
<div class="color-text-regular">社会统一信用代码</div>
|
||||
<div class="color-text-primary mt-8">{{baseInfo.creditorOrgCode ||'-'}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="f14">
|
||||
<div class="color-text-regular">法人姓名</div>
|
||||
<div class="color-text-primary mt-8">{{baseInfo.creditorLegal ||'-'}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="f14">
|
||||
<div class="color-text-regular">法人手机号</div>
|
||||
<div class="color-text-primary mt-8">{{baseInfo.creditorPhone ||'-'}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" class="el-row">
|
||||
<el-col :span="8">
|
||||
<div class="f14">
|
||||
<div class="color-text-regular">法人身份证号</div>
|
||||
<div class="color-text-primary mt-8">{{baseInfo.creditorIdcard ||'-'}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="f14">
|
||||
<div class="color-text-regular">公司地址</div>
|
||||
<div class="color-text-primary mt-8">{{baseInfo.creditorAddr ||'-'}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="f14">
|
||||
<div class="color-text-regular">邮编</div>
|
||||
<div class="color-text-primary mt-8">{{baseInfo.creditorMail ||'-'}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pt-24">
|
||||
<div class="f14">债务人</div>
|
||||
<div v-if="obligorInfo.length>0">
|
||||
<div class="center-list" v-for="(item,inx) in obligorInfo" :key="inx">
|
||||
<div class="center-list-left blue-color">
|
||||
<el-avatar :size="77" :src="defaultHeadUrl" class="el-avatar"></el-avatar>
|
||||
<div class="f18 color-text-primary mt-16">{{item.name ||'-'}}</div>
|
||||
<div class="f14 color-text-primary mt-8">债务人</div>
|
||||
</div>
|
||||
<div class="center-list-right">
|
||||
<el-row :gutter="16" class="el-row mb-16">
|
||||
<el-col :span="12">
|
||||
<div class="f14">
|
||||
<div class="color-text-regular">身份证号码</div>
|
||||
<div class="color-text-primary mt-8">{{item.cardNo ||'-'}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="f14">
|
||||
<div class="color-text-regular">手机号码</div>
|
||||
<div class="color-text-primary mt-8">{{item.phone ||'-'}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" class="el-row">
|
||||
<el-col :span="12">
|
||||
<div class="f14">
|
||||
<div class="color-text-regular">公司地址</div>
|
||||
<div class="color-text-primary mt-8">{{item.addr ||'-'}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="f14">
|
||||
<div class="color-text-regular">邮编</div>
|
||||
<div class="color-text-primary mt-8">{{item.mail ||'-'}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty description="暂无债务人数据" v-else></el-empty>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="证据材料" name="materialUpload">
|
||||
<el-scrollbar class="bor">
|
||||
<div :style="{'height': `${centerContentHeight}px`}" class="p-h-16 ">
|
||||
<div class="p-v-16" v-if="fileList.length>0">
|
||||
<upload-file :file-list="fileList" :max-count="200"
|
||||
:show-file-name="true"
|
||||
uploadName="材料名称"
|
||||
:readOnly="true"
|
||||
@handleUploadFile="handleUploadFile">
|
||||
</upload-file>
|
||||
</div>
|
||||
<el-empty description="暂无证据材料" v-else></el-empty>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="调解记录" name="mediationRecord">
|
||||
<el-scrollbar class="bor">
|
||||
<div :style="{'height': `${centerContentHeight}px`}" class="p-h-16 ">
|
||||
<div v-if="mediationRecord.length>0" class="p-v-16">
|
||||
<div class="bg-color-light border-radius-4 p-24 mb-16" v-for="(item,inx) in mediationRecord" :key="inx">
|
||||
<div class="f16 color-text-primary">{{item.createAt}}</div>
|
||||
<div class="m-v-16" v-if="item.type==1">
|
||||
{{item.content}}
|
||||
</div>
|
||||
<div class="audio_wrap m-v-16" v-else>
|
||||
<audio :src="item.content.url" controls="controls" class="audio"></audio>
|
||||
</div>
|
||||
|
||||
<!-- <div class="color-text-primary f14"><span class="color-text-regular">备注：</span>继任人</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<el-empty description="暂无调解记录" v-else></el-empty>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div class="layout-center-right-bottom">
|
||||
<div class="f18 color-000">调解笔记</div>
|
||||
<el-input type="textarea" v-model="mediateNote" placeholder="请在这里输入调解笔记..." @change="handleChangeTextarea" class="mediate-note">
|
||||
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="layout-center-right">
|
||||
<div class="layout-center-right-open " v-if="!isShow">
|
||||
<div class="f18 color-text-primary p-16">调解话术</div>
|
||||
<el-scrollbar class="bor">
|
||||
<div :style="{'height': `${rightContentHeight}px`}">
|
||||
<div v-html="speechContent" class="f14 color-text-regular p-h-16" v-if="speechContent">{{speechContent}}</div>
|
||||
<el-empty description="暂无话术内容" v-else></el-empty>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="layout-center-right-stow f16 color-text-regular" v-else>
|
||||
<div class="layout-center-right-stow-text">
|
||||
展开调解话术
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-icon-wrap" @click="handleToggleShow" :class="isShow?'right-40':'right-350'">
|
||||
<!-- <i :class="['f18 el-icon-arrow-right transform-time-default', {
|
||||
'rotate--180': isShow
|
||||
}]"></i> -->
|
||||
<img src="@/assets/image/mediate/left.png" alt="" v-if="isShow">
|
||||
<img src="@/assets/image/mediate/right.png" alt="" v-else>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="layout-bottom">
|
||||
<div>
|
||||
<el-button @click="handleDownloadMediationTemplate">下载调解模板</el-button>
|
||||
<el-button type="danger" @click="updateCaseLog(0)">调解失败</el-button>
|
||||
<el-button type="success" @click="updateCaseLog(1)">调解成功</el-button>
|
||||
<el-button type="primary" @click="updateCaseLog(2)">暂存</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button @click="getFrontCaseById">上一个案件</el-button>
|
||||
<el-button @click="getNextCaseById">下一个案件</el-button>
|
||||
<el-button @click="handleBack">退出当前调解</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import api from "@/services/caseManagement";
|
||||
export default {
|
||||
components: {
|
||||
uploadFile: () => import('@/components/uploadFile.vue'),//上传
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex:0,
|
||||
imgArr:[
|
||||
{id:0,imgUrl:require('@/assets/image/mediate/group-img-1.png'),imgText:require('@/assets/image/mediate/group-text-1.png')},
|
||||
{id:1,imgUrl:require('@/assets/image/mediate/group-img-2.png'),imgText:require('@/assets/image/mediate/group-text-2.png')},
|
||||
{id:2,imgUrl:require('@/assets/image/mediate/group-img-3.png'),imgText:require('@/assets/image/mediate/group-text-3.png')},
|
||||
{id:3,imgUrl:require('@/assets/image/mediate/group-img-4.png'),imgText:require('@/assets/image/mediate/group-text-4.png')},
|
||||
],
|
||||
timer:null,
|
||||
activeName:'caseParty',
|
||||
isShow:true,
|
||||
defaultHeadUrl:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',//默认图片
|
||||
fileList:[],
|
||||
mediateNote:'',//调解笔记
|
||||
mediationRecord:[],//调解记录
|
||||
baseInfo:{},//基本信息
|
||||
obligorInfo:[],//债务人信息
|
||||
caseId:'',//案件id
|
||||
speechId:'',//话术模板id
|
||||
speechContent:'',//话术内容
|
||||
templateUrl:'',//调解模板url
|
||||
financialProductsTypeOptions:[],//金融产品类型
|
||||
productType:'',
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
// 左侧
|
||||
leftContentHeight(){
|
||||
let oh = document.documentElement.clientHeight;
|
||||
return oh-56-65-184-12
|
||||
},
|
||||
|
||||
// 中间的内容高度
|
||||
centerContentHeight(){
|
||||
let oh = document.documentElement.clientHeight;
|
||||
return oh-56-112-65-48
|
||||
},
|
||||
// 获取右侧滚动高度
|
||||
rightContentHeight(){
|
||||
let oh = document.documentElement.clientHeight;
|
||||
return oh-56-56-65-20
|
||||
},
|
||||
|
||||
},
|
||||
async created() {
|
||||
await this.getDict()
|
||||
this.startInterval()
|
||||
this.caseId = this.$route.query.caseId
|
||||
await this.getCaseInfoById();//获取详情
|
||||
console.log('this.getDict()===',this.getDict())
|
||||
},
|
||||
beforeDestroy() {
|
||||
if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
|
||||
clearInterval(this.timer); //关闭
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取金融产品类型
|
||||
getDict(){
|
||||
let data = {
|
||||
type:'financial'
|
||||
}
|
||||
return api.getDict(data).then(res => {
|
||||
if (!res.code) {
|
||||
this.financialProductsTypeOptions = res;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 定时器
|
||||
startInterval(){
|
||||
clearInterval(this.timer);
|
||||
this.timer = setInterval(()=>{
|
||||
this.currentIndex++
|
||||
if(this.currentIndex>this.imgArr.length-1){
|
||||
this.currentIndex=0
|
||||
}
|
||||
},3000)
|
||||
},
|
||||
handleChangeImg(val){
|
||||
if(val=='right'){
|
||||
this.currentIndex++
|
||||
if(this.currentIndex == this.imgArr.length){
|
||||
this.currentIndex =0
|
||||
}
|
||||
}else{
|
||||
if(this.currentIndex == 0){
|
||||
this.currentIndex = this.imgArr.length
|
||||
}
|
||||
this.currentIndex--
|
||||
}
|
||||
},
|
||||
handleChangeTextarea(){
|
||||
// console.log('内容',this.mediateNote)
|
||||
// sessionStorage.setItem('mediateNote', this.mediateNote)
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
|
||||
},
|
||||
handleToggleShow(){
|
||||
this.isShow = !this.isShow
|
||||
},
|
||||
// 获取详情
|
||||
getCaseInfoById(){
|
||||
const _that = this
|
||||
return api.getCaseInfoById(_that.caseId).then(res => {
|
||||
if(!res.code){
|
||||
_that.detailData(res)
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
// 详情展示内容
|
||||
detailData(res){
|
||||
// 证据材料
|
||||
let caseFileEntityList = []
|
||||
res.caseFileEntityList.forEach((item)=>{
|
||||
caseFileEntityList.push({name:item.name,fileName:item.name,url:item.url})
|
||||
})
|
||||
this.fileList = caseFileEntityList
|
||||
// 调解记录
|
||||
this.mediationRecord = res.logEntityList
|
||||
// 基本信息
|
||||
this.baseInfo = res
|
||||
// 债务人
|
||||
this.obligorInfo = res.debtorEntityList
|
||||
|
||||
// 获取话术模板id
|
||||
this.speechId = res.tpSpeechcraftId
|
||||
if(this.speechId){
|
||||
this.getTemplateById()
|
||||
}
|
||||
|
||||
// 获取调解模板url
|
||||
if(res.caseAgreement){
|
||||
this.templateUrl = res.caseAgreement.url
|
||||
}
|
||||
|
||||
this.caseId = res.id
|
||||
// 获取金融产品类型
|
||||
console.log('financialProductsTypeOptions',this.financialProductsTypeOptions)
|
||||
let obj = this.financialProductsTypeOptions.find((item)=>{
|
||||
return item.code == res.productTypeId
|
||||
})
|
||||
this.productType = obj.codeName||'-'//获取金融产品名称
|
||||
console.log('this.productType====',this.productType)
|
||||
},
|
||||
handleUploadFile(fileList){
|
||||
console.log('fileList===',fileList)
|
||||
fileList = JSON.parse(JSON.stringify(fileList))
|
||||
|
||||
this.fileList = fileList.map((item,i) => {
|
||||
return {
|
||||
url: item.url,
|
||||
fileName:item.name,
|
||||
name:item.name
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取话术内容
|
||||
getTemplateById(){
|
||||
let data={
|
||||
id:this.speechId
|
||||
}
|
||||
api.getTemplateById(data).then(res => {
|
||||
if (!res.code) {
|
||||
this.speechContent = res.content;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
//-------------------------------------------------------------底部按钮接口-------------------------------------------------
|
||||
// // 调解成功或者失败
|
||||
// handleChangeMediation(resultStatus){
|
||||
// if(!this.$clickThrottle()) { return }//防止重复点击
|
||||
// let data={
|
||||
// id:this.caseId,
|
||||
// resultStatus:resultStatus
|
||||
// }
|
||||
// api.updateResultStatus(data).then(res => {
|
||||
|
||||
// if(resultStatus==1){
|
||||
// this.$message({message: '调解成功', type: "success",customClass:'messageZindex'})
|
||||
// }else{
|
||||
// this.$message({message: '调解失败', type: "error",customClass:'messageZindex'})
|
||||
// }
|
||||
|
||||
// })
|
||||
// },
|
||||
// 暂存2 调解成功1 失败0
|
||||
updateCaseLog(status){
|
||||
if(!this.$clickThrottle()) { return }//防止重复点击
|
||||
let data = {
|
||||
caseId:this.caseId,
|
||||
content:this.mediateNote,
|
||||
status:status
|
||||
}
|
||||
if(this.mediateNote){
|
||||
api.updateCaseLog(data).then(res => {
|
||||
|
||||
if(status==0){
|
||||
this.$message({message: '调解失败', type: "success",customClass:'messageZindex'})
|
||||
}else if(status==1){
|
||||
this.$message({message: '调解成功', type: "success",customClass:'messageZindex'})
|
||||
}else{
|
||||
this.$message({message: '暂存成功', type: "success",customClass:'messageZindex'})
|
||||
}
|
||||
this.mediateNote = ''
|
||||
this.getCaseInfoById()
|
||||
})
|
||||
}else{
|
||||
this.$message({message: '请先输入调解笔记内容', type: "warning",customClass:'messageZindex'})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
// 获取上一件案件
|
||||
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)
|
||||
}
|
||||
},
|
||||
handleBack(){
|
||||
// console.log('页面来源',this.$route.query.sourcePage)
|
||||
if(this.$route.query.sourcePage == 'mediationManagement'){
|
||||
this.$router.push('/mediation-management')
|
||||
}else{
|
||||
this.$router.push('/workbench')
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.layout-center-wrap{
|
||||
display: flex;
|
||||
height: calc(100% - 65px);
|
||||
}
|
||||
// 左侧
|
||||
.layout-center-left-wrap{
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.layout-center-left-top{
|
||||
height: 184px;
|
||||
.top-bg{
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
background: url('~@//assets/image/mediate/bg.png') no-repeat ;
|
||||
padding: 12px 16px;
|
||||
.top-bg-text{
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.add-img{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.group-img{
|
||||
position: relative;
|
||||
}
|
||||
.group-text{
|
||||
position: absolute;
|
||||
top:80px;
|
||||
left:180px;
|
||||
}
|
||||
.left-base-info{
|
||||
height: calc(100%);
|
||||
border-right: 1px solid #E4E7ED;
|
||||
}
|
||||
.icon-small{
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// 底部
|
||||
.layout-bottom{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #E4E7ED;
|
||||
}
|
||||
|
||||
// 中间
|
||||
.layout-center-right-wrap{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.layout-center-right-center{
|
||||
flex:1;
|
||||
}
|
||||
.center-list{
|
||||
display: flex;
|
||||
height: 204px;
|
||||
border: 1px solid #E4E7ED;
|
||||
border-radius: 5px;
|
||||
margin-top: 12px;
|
||||
.center-list-left {
|
||||
width: 180px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
padding: 24px 0 33px 0;
|
||||
}
|
||||
.center-list-right{
|
||||
height: 100%;
|
||||
padding: 24px 16px;
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
.pink-color{
|
||||
// background:linear-gradient(101.33deg, #9170FF 0.46%, #604DFA 100%);
|
||||
// opacity: 0.1;
|
||||
background-color: rgba(#604DFA, 0.1);
|
||||
|
||||
}
|
||||
.blue-color{
|
||||
// background: linear-gradient(101.33deg, #3CA0FA 0.46%, #2F6AF5 100%);
|
||||
background-color: rgba(#2F6AF5, 0.1);;
|
||||
// opacity: 0.2;
|
||||
}
|
||||
.el-row{
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.layout-center-right-bottom{
|
||||
height: 112px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #E4E7ED;
|
||||
}
|
||||
|
||||
|
||||
// 最右侧
|
||||
.layout-center-right{
|
||||
border-left: 1px solid #E4E7ED;
|
||||
height: calc(100%);
|
||||
.layout-center-right-open{
|
||||
width: 350px;
|
||||
}
|
||||
.layout-center-right-stow{
|
||||
width: 40px;
|
||||
.layout-center-right-stow-text{
|
||||
height: 400px;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
writing-mode: vertical-lr;
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
}
|
||||
.left-icon-wrap{
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #E4E7ED;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.right-40{
|
||||
right: 40px;
|
||||
}
|
||||
.right-350{
|
||||
right: 350px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
28
src/pages/mediation-page-old/index.vue
Normal file
28
src/pages/mediation-page-old/index.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="layout-wrap">
|
||||
<LayoutHeader />
|
||||
<LayoutContent />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
LayoutHeader: () => import('@/pages/layout/components/LayoutHeader'),
|
||||
LayoutContent: () => import('./components/LayoutContent.vue'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="layout-wrap">
|
||||
<LayoutHeader />
|
||||
<!-- <LayoutHeader /> -->
|
||||
<LayoutContent />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -107,7 +107,7 @@ const routes = [
|
||||
path: "/event-tracing",
|
||||
name: "/event-tracing",
|
||||
component: () => import("@/pages/event-tracing"),
|
||||
meta: { title: "调解管理", icon: 'menu-mediat-management' },
|
||||
meta: { title: "事项追踪", icon: 'menu-mediat-management' },
|
||||
},
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user