447 lines
21 KiB
Vue
447 lines
21 KiB
Vue
<template>
|
||
<div>
|
||
<el-drawer
|
||
:title="editCaseDrawer.title"
|
||
:visible="true"
|
||
direction="rtl"
|
||
size="50%"
|
||
:before-close="handleClose"
|
||
>
|
||
<div class="">
|
||
<el-tabs v-model="activeName" @tab-click="handleClick" class="zd-el-tabs-custom zd-el-tabs-custom__left_padding">
|
||
<el-tab-pane label="基本信息" name="baseInfo">
|
||
<el-scrollbar class="bor">
|
||
<div class="" :style="{'height': `${drawerContentHeight}px`}">
|
||
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">基本信息</div>
|
||
<div class="p-h-24">
|
||
<el-row :gutter="20" class="mb-24">
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">金融机构：</span>{{baseInfo.financialOrgName ||'-'}}</div>
|
||
</el-col>
|
||
<el-col :span="12" >
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">社会统一信用代码：</span>{{baseInfo.financialOrgCode ||'-'}}</div>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
<el-row :gutter="20" class="mb-24">
|
||
<el-col :span="12" >
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">案件名称：</span>{{baseInfo.caseName ||'-'}}</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">案件编号：</span>{{baseInfo.caseNo ||'-'}}</div>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
<el-row :gutter="20" class="mb-24">
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">金融产品类型：</span>{{productType ||'-'}}</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">标的金额：</span>{{baseInfo.moneyAmount ||'-'}}</div>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
<el-row :gutter="20" class="mb-24">
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">逾期次数：</span>{{baseInfo.overdueTimes}}</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">案件描述：</span>{{baseInfo.caseDescr ||'-'}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="案件当事人" name="caseParty">
|
||
<el-scrollbar class="bor">
|
||
<div class="" :style="{'height': `${drawerContentHeight}px`}">
|
||
<div>
|
||
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">案件当事人</div>
|
||
<div class="p-h-24">
|
||
<div>
|
||
<div class="color-text-primary pb-16 f14">债权人</div>
|
||
<el-row :gutter="20" class="mb-24">
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">债权人：</span>{{baseInfo.creditorName ||'-'}}</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">社会统一信用代码：</span>{{baseInfo.creditorOrgCode ||'-'}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="mb-24">
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">法人姓名：</span>{{baseInfo.creditorLegal ||'-'}}</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">法人身份证号：</span>{{baseInfo.creditorIdcard ||'-'}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="mb-24">
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">法人手机号：</span>{{baseInfo.creditorPhone ||'-'}}</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">公司地址：</span>{{baseInfo.creditorAddr ||'-'}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="mb-24">
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">邮编：</span>{{baseInfo.creditorMail ||'-'}}</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">代理人：</span>{{baseInfo.creditorAgent ||'-'}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div>
|
||
<div class="color-text-primary pb-16 f14">债务人</div>
|
||
<div v-for="(item,inx) in obligorInfo" :key="inx">
|
||
<div class="f14 mb-16">债务人{{inx+1}}</div>
|
||
<div>
|
||
<el-row :gutter="20" class="mb-24">
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">债务人：</span>{{item.name ||'-'}}</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">证件类型：</span>{{item.cardType ||'-'}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="mb-24">
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">证件号码：</span>{{item.cardNo ||'-'}}</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">手机号：</span>{{item.phone ||'-'}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="mb-24">
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">公司地址：</span>{{item.addr ||'-'}}</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="f14 color-text-primary"><span class="color-text-regular">邮编：</span>{{item.mail ||'-'}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="模板话术" name="templateSelection">
|
||
<div :style="{'height': `${drawerContentHeight}px`}">
|
||
<div class="flex-row justify-content-between align-items-center f18 color-000 m-v-16 p-h-24">
|
||
<div class="line-height-48">调解模板</div>
|
||
<el-button type="primary" @click="handleDownloadMediationTemplate">下载调解模板</el-button>
|
||
</div>
|
||
<div class="p-h-24" >
|
||
<upload-file :file-list="fileListTemplate" :max-count="1"
|
||
:show-file-name="true"
|
||
accept=".doc,.docx"
|
||
uploadName="调解协议模板"
|
||
@handleUploadFile="handleUploadFileTemplate">
|
||
</upload-file>
|
||
</div>
|
||
<!-- <el-empty description="暂无调解模板" v-if="fileListTemplate.length==0"></el-empty> -->
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="证据材料" name="materialUpload">
|
||
<div :style="{'height': `${drawerContentHeight}px`}">
|
||
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">证据材料</div>
|
||
<div class="p-h-24" 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-tab-pane>
|
||
<el-tab-pane label="调解记录" name="mediationRecord">
|
||
<el-scrollbar class="bor">
|
||
<div :style="{'height': `${drawerContentHeight}px`}">
|
||
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">调解记录</div>
|
||
<div class="p-h-24">
|
||
<div v-if="mediationRecord.length>0">
|
||
<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>
|
||
|
||
</div>
|
||
</el-scrollbar>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<div class="flex-row justify-content-end p-16 border-t-solid-lighter-1">
|
||
<div>
|
||
<el-button @click="handleClose">取 消</el-button>
|
||
<el-button type="primary" @click="handleSavetTemplate" v-if="savetTemplateBtnShow">保存模板</el-button>
|
||
<el-button type="primary" v-if="baseInfo.caseStatus != 2" @click="handleSubmit">去调解</el-button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</el-drawer>
|
||
<el-dialog
|
||
title="调解操作"
|
||
:visible.sync="dialogVisible"
|
||
width="30%"
|
||
:modal-append-to-body='false'
|
||
:before-close="handleCloseMediationRecord">
|
||
<span class="p-24">请确定当前记录成功或者失败？</span>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="handleChangeMediation(0)">失败</el-button>
|
||
<el-button type="primary" @click="handleChangeMediation(1)">成功</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import api from "@/services/caseManagement";
|
||
export default {
|
||
components: {
|
||
uploadFile: () => import('@/components/uploadFile.vue'),//上传
|
||
},
|
||
props: {
|
||
editCaseDrawer: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
},
|
||
},
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
activeName:'baseInfo',
|
||
baseInfo:{},//基本信息
|
||
obligorInfo:[],//债务人信息
|
||
financialProductsTypeOptions:[],
|
||
productType:'',//金融产品类型
|
||
idTypeOptions:[],
|
||
fileListTemplate:[],//调解模板
|
||
fileList:[],//证据材料
|
||
caseId:'',//案件id
|
||
mediationRecord:[],//调解记录
|
||
dialogVisible:false,
|
||
savetTemplateBtnShow:false,//是否显示保存模板按钮
|
||
sourcePage:'',//页面来源
|
||
};
|
||
},
|
||
async created() {
|
||
await this.getDict()
|
||
await this.getDictIdType()
|
||
this.caseId = this.editCaseDrawer.data.id
|
||
this.sourcePage = this.editCaseDrawer.sourcePage
|
||
await this.getCaseInfoById();//获取详情
|
||
|
||
|
||
},
|
||
computed:{
|
||
// 获取抽屉drawer的内容高度
|
||
drawerContentHeight(){
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh-200
|
||
}
|
||
|
||
},
|
||
methods: {
|
||
|
||
// 切换tab
|
||
handleClick(tab, event) {
|
||
// console.log(tab, event);
|
||
|
||
if(tab.name ==='templateSelection'){
|
||
this.savetTemplateBtnShow = true
|
||
}else{
|
||
this.savetTemplateBtnShow = false
|
||
}
|
||
},
|
||
// 获取金融产品类型
|
||
getDict(){
|
||
let data = {
|
||
type:'financial'
|
||
}
|
||
return api.getDict(data).then(res => {
|
||
if (!res.code) {
|
||
this.financialProductsTypeOptions = res;
|
||
}
|
||
})
|
||
},
|
||
// 获取证件类型
|
||
getDictIdType(){
|
||
let data = {
|
||
type:'certificates'
|
||
}
|
||
return api.getDict(data).then(res => {
|
||
if (!res.code) {
|
||
this.idTypeOptions = res;
|
||
}
|
||
})
|
||
},
|
||
// 获取详情
|
||
getCaseInfoById(){
|
||
const _that = this
|
||
return api.getCaseInfoById(_that.caseId).then(res => {
|
||
if(!res.code){
|
||
|
||
// 模板选择
|
||
// console.log('调解模板',res.caseAgreement)
|
||
if(res.caseAgreement){
|
||
_that.fileListTemplate = [
|
||
{url:res.caseAgreement.url,fileName:'调解协议模板'}
|
||
]
|
||
}
|
||
// 材料
|
||
let caseFileEntityList = []
|
||
res.caseFileEntityList.forEach((item)=>{
|
||
caseFileEntityList.push({name:item.name,fileName:item.name,url:item.url})
|
||
})
|
||
_that.fileList = caseFileEntityList
|
||
|
||
// 调解记录
|
||
this.mediationRecord = res.logEntityList
|
||
// 基本信息
|
||
_that.baseInfo = res
|
||
let obj = _that.financialProductsTypeOptions.find((item)=>{
|
||
return item.code == res.productTypeId
|
||
})
|
||
_that.productType = obj.codeName//获取金融产品名称
|
||
// 债务人
|
||
_that.obligorInfo = res.debtorEntityList
|
||
// console.log('债务人',_that.obligorInfo)
|
||
|
||
// 匹配证件
|
||
// console.log('证件类型',_that.idTypeOptions)
|
||
_that.obligorInfo.forEach((opt)=>{
|
||
let objData = _that.idTypeOptions.find((item)=>{
|
||
return item.code == opt.cardTypeId
|
||
})
|
||
opt.cardType = objData.codeName
|
||
})
|
||
|
||
|
||
|
||
}
|
||
|
||
})
|
||
},
|
||
// 下载调解模板
|
||
handleDownloadMediationTemplate(){
|
||
if(!this.$clickThrottle()) { return }//防止重复点击
|
||
if(this.fileListTemplate[0].url){
|
||
this.handlePreview({previewUrl:"/mediate/minio/preview/"+this.fileListTemplate[0].url,url:this.fileListTemplate[0].url})
|
||
}
|
||
|
||
},
|
||
async handlePreview(item) {
|
||
try {
|
||
let res = await this.$fetchApi.getMinioToken({objectName: item.url})
|
||
console.log(res)
|
||
window.open(`${item.previewUrl}?token=${res}`, '_target')
|
||
}catch (e) {
|
||
this.$message.error(e.msg || e)
|
||
}
|
||
},
|
||
// 调解模板
|
||
handleUploadFileTemplate(fileList){
|
||
fileList = JSON.parse(JSON.stringify(fileList))
|
||
this.fileListTemplate = fileList.map((item,i) => {
|
||
return {
|
||
url: item.url,
|
||
fileName:'调解协议模板'
|
||
}
|
||
})
|
||
},
|
||
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
|
||
}
|
||
})
|
||
},
|
||
// 保存模板
|
||
handleSavetTemplate(){
|
||
let data={
|
||
id:this.caseId,
|
||
url:this.fileListTemplate[0].url
|
||
}
|
||
api.updateCaseAgreement(data).then(res => {
|
||
|
||
this.$message({message: '更新模板成功', type: "success",customClass:'messageZindex'})
|
||
|
||
})
|
||
},
|
||
// 保存
|
||
handleSubmit(){
|
||
// this.dialogVisible = true
|
||
// this.$router.push('/mediation-page')
|
||
|
||
this.$router.push({path:'/mediation-page?caseId='+this.caseId+'&sourcePage='+this.sourcePage})
|
||
},
|
||
|
||
// 调解成功或者失败
|
||
handleChangeMediation(resultStatus){
|
||
let data={
|
||
id:this.caseId,
|
||
resultStatus:resultStatus
|
||
}
|
||
api.updateResultStatus(data).then(res => {
|
||
|
||
this.$parent.getCaseInfoList(1)
|
||
this.handleCloseMediationRecord()
|
||
this.handleClose()
|
||
if(resultStatus==1){
|
||
this.$message({message: '调解成功', type: "success",customClass:'messageZindex'})
|
||
}else{
|
||
this.$message({message: '调解失败', type: "error",customClass:'messageZindex'})
|
||
}
|
||
|
||
})
|
||
},
|
||
|
||
handleCloseMediationRecord(){
|
||
// this.$emit('update:dialogVisible', null)
|
||
this.dialogVisible = false
|
||
},
|
||
|
||
handleClose() {
|
||
this.$emit('update:editCaseDrawer', null)
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.audio_wrap{
|
||
width: 330px;
|
||
height: 40px;
|
||
.audio{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
</style> |