还款凭证效验和编辑

This commit is contained in:
liuxi 2024-12-25 15:27:18 +08:00
parent 1f48de7a4d
commit b19630bc7a
14 changed files with 3692 additions and 7 deletions

View File

@ -78,8 +78,48 @@
</span> </span>
</div> </div>
<div> <div>
<el-button type="primary" size="small">效验</el-button> <el-popover v-if="proofitem.status.code == 1"
<el-button size="small" @click="updateClick(index,proofitem)">编辑</el-button> placement="left"
width="400"
title="凭证效验"
trigger="click">
<el-form :ref="`ruleFormEffect${index}`"
:model="proofitem"
:rules="rulesClientRepayment"
label-width="130px">
<el-form-item label="凭证金额" prop="amount" style="margin-bottom: 10px;">
<el-input class="inputpaddingtop2"
size="small"
placeholder="请输入凭证金额"
v-model="proofitem.amount">
<template slot="append"></template>
</el-input>
</el-form-item>
<el-form-item label="还款日期" prop="paybackTime" style="margin-bottom: 10px;">
<el-date-picker class="width100" size="small"
v-model="proofitem.paybackTime"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="备注说明" prop="remark" style="margin-bottom: 10px;">
<el-input
size="small"
clearable
placeholder="请输入备注说明"
v-model="proofitem.remark">
</el-input>
</el-form-item>
<el-form-item label="">
<el-button type="primary" @click="handleSubmitEffect(proofitem,('ruleFormEffect'+index))" size="small">保存</el-button>
</el-form-item>
</el-form>
<el-button type="primary" size="small" slot="reference">效验</el-button>
</el-popover>
<el-button v-if="proofitem.status.code != 1" size="small" @click="updateClick(index,proofitem)">编辑</el-button>
<el-button v-if="proofitem.status.code != 1" size="small" @click="DeleteClick(proofitem)">删除</el-button>
</div> </div>
</div> </div>
</el-form> </el-form>
@ -168,7 +208,24 @@ import api from "@/services/caseManagement";
}, },
ProofList:[], ProofList:[],
fileList:[] fileList:[],
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}; };
@ -210,10 +267,41 @@ import api from "@/services/caseManagement";
this.repaymentObj = proofitem this.repaymentObj = proofitem
this.fileList = [{url: proofitem.proofUrl,fileName:'上传'}] this.fileList = [{url: proofitem.proofUrl,fileName:'上传'}]
}, },
//
handleSubmitEffect(proofitem,formName){
this.$refs[formName][0].validate((valid) => {
if (valid){
api.gettraceProof_valid(proofitem).then(res => {
if(!res.code){
this.getProofList()
}
})
}
})
},
//
DeleteClick(proofitem){
this.$confirm("请确定是否删除这些数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
if(!this.$clickThrottle()) { return }//
let data = {
id:proofitem.id
}
api.gettraceProof_delete(data).then((res) => {
this.$message.success("删除成功");
this.getProofList(1)
});
}).catch(() => {});
},
handleSubmitUpdate(){ handleSubmitUpdate(){
this.$refs.ruleFormRepaymentUpdate[0].validate((valid) => { this.$refs.ruleFormRepaymentUpdate[0].validate((valid) => {
if (valid){ if (valid){
api.gettraceProof_create(this.repaymentObj).then(res => { api.gettraceProof_create(this.repaymentObj).then(res => {
if(!res.code){ if(!res.code){
this.updateRow = -1 this.updateRow = -1

View File

@ -0,0 +1,90 @@
<template>
<div>
<!-- table -->
<div class="pt-8">
<div class="height-56 flex-row align-items-center justify-content-between">
<div class="f18 color-text-primary">电话呼叫列表</div>
<div class="flex-row">
</div>
</div>
<div class="case-table">
<el-table :data="tableData" height="370" >
<el-table-column type="index" label="序号" width="55"></el-table-column>
<el-table-column prop="pkgName" label="外呼/呼入类型" show-overflow-tooltip ></el-table-column>
<el-table-column prop="planStartTime" label="外呼/呼入时间" show-overflow-tooltip >
<template slot-scope="scope">
<span >{{ scope.row.planStartTime | formaDate("yyyy-MM-dd hh:mm:ss") }}</span>
</template>
</el-table-column>
<el-table-column prop="entrustingAgencyName" 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="channel" label="操作人" show-overflow-tooltip ></el-table-column>
<el-table-column prop="planStartTime" label="操作时间" show-overflow-tooltip >
<template slot-scope="scope">
<span >{{ scope.row.planStartTime | formaDate("yyyy-MM-dd hh:mm:ss") }}</span>
</template>
</el-table-column>
<el-table-column prop="channel" label="录音文件" show-overflow-tooltip ></el-table-column>
</el-table>
</div>
<div class="text-center pt-16">
<el-pagination
@size-change="getCaseInfoList"
@current-change="getCaseInfoList"
:current-page="queryParam.current"
:page-size="queryParam.size"
layout="total, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import api from "@/services/caseManagement";
export default {
components: {
},
props: {
eventTraDialog: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {
queryParam:{},
tableData:[],
total:0,
};
},
mounted () {
console.log(this.eventTraDialog,'eventTraDialog')
},
methods: {
handleClose() {
this.$emit('update:eventTraDialog', null)
},
}
};
</script>
<style scoped lang="scss">
.dialog-trace{
padding: 16px 20px;
max-height:500px
}
</style>

View File

@ -0,0 +1,179 @@
<template>
<div>
<el-dialog :visible="true" width="1300px" class="dialog-case-record" append-to-body :close-on-click-modal="false"
@close="handleClose()">
<div class="dialog-content dialog-case-trace">
<el-tabs class="zd-el-tabs-custom zd-el-tabs-custom__left_padding" v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane name="1">
<span slot="label"><span>短信发送记录</span></span>
</el-tab-pane>
<el-tab-pane name="2">
<span slot="label"><span>电话呼叫记录</span></span>
</el-tab-pane>
<el-tab-pane name="3">
<span slot="label"><span>视频调解记录</span></span>
</el-tab-pane>
<el-tab-pane name="4">
<span slot="label"><span>文书生成记录</span></span>
</el-tab-pane>
<el-tab-pane name="5">
<span slot="label"><span>文书签字记录</span></span>
</el-tab-pane>
<el-tab-pane name="6">
<span slot="label"><span>文书送达记录</span></span>
</el-tab-pane>
<el-tab-pane name="7">
<span slot="label"><span>还款计划</span></span>
</el-tab-pane>
<el-tab-pane name="8">
<span slot="label"><span>还款凭证</span></span>
</el-tab-pane>
</el-tabs>
<div class=" case-trace-cont">
<!-- 短信发送追踪明细 -->
<smsDialogDetail v-if="activeName == '1'" :DialogDetail="eventTraDialog" />
<!-- 呼叫记录 -->
<CalllogDialog v-if="activeName == '2'" :eventTraDialog.sync="eventTraDialog" />
<!-- 视频调解追踪 -->
<voideDialog v-if="activeName == '3'" :eventTraDialog="eventTraDialog" />
<!-- 文书生成追踪明细 -->
<officeDialogDetail v-if="activeName == '4'" :DialogDetail="eventTraDialog" />
<!-- 文书签字追踪明细 -->
<officeWDialogDetail v-if="activeName == '5'" :DialogDetail="eventTraDialog" />
<!-- 文书送达追踪明细 -->
<officeDeliveryDialogDetail v-if="activeName == '6'" :DialogDetail="eventTraDialog" />
<!-- 还款计划 -->
<!-- <RepaymentDialog v-if="activeName == '7'" :eventTraDialog.sync="repaymentDialog" /> -->
<!-- eventDialog:{caseId:this.$route.query.caseId}, -->
<RepaymentSchedule v-if="activeName == '7'" :eventDialog.sync="eventTraDialog" class="mt-16" />
<!-- 还款凭证 -->
<RepaymentRecordDialog v-if="activeName == '8'" :eventTraDialog.sync="eventTraDialog" />
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()">关闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import api from "@/services/caseManagement";
export default {
components: {
eventTracingDialog: () => import('../../event-tracing/index.vue'),//
RepaymentSchedule: () => import('../../mediation-page/components/RepaymentSchedule.vue'),//
RepaymentRecordDialog: () => import('./RepaymentRecordDialog.vue'),//
smsDialogDetail: () => import('../../event-tracing/dtraceDetail/smsDialogDetail.vue'),//
CalllogDialog: () => import('./CalllogDialog.vue'),//
voideDialog: () => import('../../event-tracing/components/voideDialog.vue'),//
smsDialogDetail: () => import('../../event-tracing/dtraceDetail/smsDialogDetail.vue'),//
officeDeliveryDialogDetail: () => import('../../event-tracing/dtraceDetail/officeDeliveryDialogDetail.vue'),//
officeDialogDetail: () => import('../../event-tracing/dtraceDetail/officeDialogDetail.vue'),//
officeWDialogDetail: () => import('../../event-tracing/dtraceDetail/officeWDialogDetail.vue'),//
},
props: {
eventTraDialog: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {
calllogDialog:null,//
activeName:'1',
queryParam:{},
tableData:[],
total:0,
};
},
mounted () {
this.activeName = this.eventTraDialog.activeName
},
methods: {
// tab
handleTabClick(tab){
if(tab.name == '1'){
eventTraDialog = {caseNo:'123'}
}else if(tab.name == '2'){
calllogDialog = {title:'电话呼叫记录',caseNo:'123'}
}else if(tab.name == '3'){
eventTraDialog = {title:'视频调解记录',caseNo:'123'}
}else if(tab.name == '4'){
eventTraDialog = {title:'文书生成记录',caseNo:'123'}
}else if(tab.name == '5'){
eventTraDialog = {title:'文书签字记录',caseNo:'123'}
}else if(tab.name == '6'){
eventTraDialog = {title:'文书送达记录',caseNo:'123'}
}else if(tab.name == '7'){
repaymentDialog = {title:'还款计划',caseNo:'123'}
}else if(tab.name == '8'){
repaymentlogDialog = {title:'还款凭证',caseNo:'123'}
}else {
}
// this.getCaseInfoList(1)
},
handleClose() {
this.$emit('update:eventTraDialog', null)
},
}
};
</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;
min-height:500px
}
.dialog-case-trace .zd-el-tabs-custom{
margin-top: -61px ;
margin-right: 25px;
}
.dialog-case-trace .zd-el-tabs-custom span{
font-size: 16px;
font-weight: 400;
}
.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>

View File

@ -0,0 +1,93 @@
<template>
<div>
<!-- table -->
<div class="pt-8">
<div class="height-56 flex-row align-items-center justify-content-between">
<div class="f18 color-text-primary">还款凭证列表</div>
<div class="flex-row">
</div>
</div>
<div class="case-table">
<el-table :data="tableData" height="390" >
<el-table-column prop="amount" label="凭证金额" show-overflow-tooltip >
<template slot-scope="scope">
<span >{{ scope.row.amount }}</span>
</template>
</el-table-column>
<el-table-column prop="paybackTime" label="还款日期" show-overflow-tooltip ></el-table-column>
<el-table-column prop="remark" label="备注说明" show-overflow-tooltip ></el-table-column>
<el-table-column prop="uploaderName" label="上传者" show-overflow-tooltip ></el-table-column>
<el-table-column prop="createAt" label="操作时间" show-overflow-tooltip >
<template slot-scope="scope">
<span >{{ scope.row.createAt | formaDate("yyyy-MM-dd hh:mm:ss") }}</span>
</template>
</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="handleCaseShow(scope)">查看凭证</el-button>
<el-button size="mini" @click="handleBackCase(scope)">效验</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 文件预览 -->
<showFile v-if="fileDialog" :fileDialog.sync="fileDialog" />
</div>
</template>
<script>
import api from "@/services/caseManagement";
export default {
components: {
showFile: () => import('../../../components/showFile.vue'),//
},
props: {
eventTraDialog: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {
fileDialog:null,
queryParam:{},
tableData:[],
total:0,
};
},
mounted () {
console.log(this.eventTraDialog,'this.eventTraDialog')
this.getProofList()
},
methods: {
getProofList(){
api.gettraceProof_list({caseId:this.eventTraDialog.caseId}).then(res => {
if(!res.code){
this.tableData = res
}
})
},
handleCaseShow(scope){
this.fileDialog = {showfile:{url:scope.row.proofUrl},filelist:[]}
},
handleClose() {
this.$emit('update:eventTraDialog', null)
},
}
};
</script>
<style scoped lang="scss">
.dialog-trace{
padding: 16px 20px;
max-height:500px
}
</style>

View File

@ -0,0 +1,750 @@
<template>
<div>
<el-dialog
:title="addCaseDialog.title"
:visible="true"
width="880px"
append-to-body
:close-on-click-modal="false"
@close="handleClose"
>
<div >
<el-steps :active="presentStep" align-center>
<el-step v-for="(item,inx) in transferStep" :key="inx" :title="item.title" :description="item.description"></el-step>
</el-steps>
<!-- 基本信息 -->
<div v-if="presentStep === 1">
<div>
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">基本信息</div>
<div class="p-h-24">
<el-form ref="ruleFormBase"
:model="baseInfo"
:rules="rulesClient"
label-width="150px"
class="demo-ruleForm">
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="金融机构名称" prop="financialOrgName">
<el-input
v-model.trim="baseInfo.financialOrgName"
placeholder="请输入金融机构名称"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="社会统一信用代码" prop="financialOrgCode">
<el-input
v-model.trim="baseInfo.financialOrgCode"
placeholder="请输入社会统一信用代码"
clearable
maxlength="18"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="案件名称" prop="caseName">
<el-input
clearable
placeholder="请输入案件名称"
v-model="baseInfo.caseName">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="案件编号" prop="caseNo">
<el-input
clearable
placeholder="请输入案件编号"
v-model="baseInfo.caseNo">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="金融产品类型" prop="productTypeId">
<el-select v-model="baseInfo.productTypeId"
clearable placeholder="请选择金融产品类型"
class="width100">
<el-option
v-for="item in financialProductsTypeOptions"
:key="item.code"
:label="item.codeName"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标的金额" prop="moneyAmount">
<el-input
clearable
placeholder="请输入内容"
v-model="baseInfo.moneyAmount">
<template slot="append"></template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="逾期次数" prop="overdueTimes">
<!-- <el-select v-model="baseInfo.overdueTimes"
clearable placeholder="请选择逾期次数"
class="width100">
<el-option
v-for="item in operateMethodOptions"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select> -->
<el-input-number v-model="baseInfo.overdueTimes" :min="0" :max="100" class="width100"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="案件描述" prop="caseDescr">
<el-input
clearable
placeholder="请输入内容"
v-model="baseInfo.caseDescr">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
<!-- 当事人信息 -->
<div v-else-if="presentStep === 2">
<div>
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">案件当事人</div>
<div class="p-h-24">
<div class="border-solid-lighter-1 p-h-24 mb-16">
<div class="flex-row justify-content-between height-48 line-height-48 f14 border-b-solid-lighter-1 mb-16">
<div class="color-000">债权人</div>
<div class="color-text-regular cursor-pointer" @click="handleReset">清空<i class="el-icon-close"></i></div>
</div>
<el-form ref="ruleFormCreditor"
:model="creditorInfo"
:rules="rulesClientCreditor"
label-width="150px"
class="demo-ruleForm">
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="债权人" prop="creditorName">
<el-input
v-model.trim="creditorInfo.creditorName"
placeholder="请输入债权人"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="社会统一信用代码" prop="creditorOrgCode">
<el-input
v-model.trim="creditorInfo.creditorOrgCode"
placeholder="请输入社会统一信用代码"
clearable
maxlength="18"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="法人姓名" prop="creditorLegal">
<el-input
clearable
placeholder="请输入法人姓名"
v-model="creditorInfo.creditorLegal">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="法人身份证号" prop="creditorIdcard">
<el-input
clearable
placeholder="请输入法人身份证号"
v-model="creditorInfo.creditorIdcard"
maxlength="18">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="法人手机号" prop="creditorPhone">
<el-input
clearable
placeholder="请输入法人手机号"
v-model="creditorInfo.creditorPhone"
maxlength="11"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公司地址" prop="creditorAddr">
<el-input
clearable
placeholder="请输入公司地址"
v-model="creditorInfo.creditorAddr">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="邮编" prop="creditorMail">
<el-input
clearable
placeholder="请输入邮编"
v-model="creditorInfo.creditorMail"
maxlength="6"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="代理人" prop="creditorAgent">
<el-input
clearable
placeholder="请输入代理人"
v-model="creditorInfo.creditorAgent">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="border-solid-lighter-1 p-h-24">
<div class="flex-row justify-content-between f14 border-b-solid-lighter-1 mb-8 p-v-8 align-items-center">
<div class="color-000">债务人</div>
<el-button size="small" type="primary" @click="handleAdd">新增债务人<i class="el-icon-plus"></i></el-button>
</div>
<div>
<el-form ref="ruleFormObligor"
:model="obligorInfoForm"
label-width="150px"
class="demo-ruleForm">
<div v-for="(item,inx) in obligorInfoForm.debtorEntityList" :key="inx">
<div class="flex-row justify-content-between align-items-center height-40 f14 mb-16">
<div class="color-text-primary">债务人{{inx+1}}</div>
<div class="color-text-regular cursor-pointer" @click="handleRemoveDomain(item)">删除<i class="el-icon-close"></i></div>
</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="债务人姓名" :prop="'debtorEntityList.' + inx + '.name'" :rules="{required: true, message: '请输入债权人姓名', trigger: 'blur'}">
<el-input
v-model.trim="obligorInfoForm.debtorEntityList[inx].name"
placeholder="请输入债务人姓名"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="证件类型" :prop="'debtorEntityList.' + inx + '.cardTypeId'" :rules="{required: true, message: '请选择证件类型', trigger: 'blur'}">
<el-select v-model="obligorInfoForm.debtorEntityList[inx].cardTypeId"
clearable placeholder="请选择证件类型"
class="width100">
<el-option
v-for="item in idTypeOptions"
:key="item.code"
:label="item.codeName"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="证件号码" :prop="'debtorEntityList.' + inx + '.cardNo'"
:rules=" [
{ required: true, message: '请输入证件号', trigger: 'change',},
{ pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '请输入正确的身份证号', trigger: ['blur', 'change']}
]">
<el-input
clearable
placeholder="请输入证件号码"
v-model="obligorInfoForm.debtorEntityList[inx].cardNo"
maxlength="18"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号码" :prop="'debtorEntityList.' + inx + '.phone'" :rules="[
{ required: true, message: '请输入法人手机号', trigger: 'change',},
{ pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
]">
<el-input
clearable
placeholder="请输入手机号码"
v-model="obligorInfoForm.debtorEntityList[inx].phone"
maxlength="11"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="地址" :prop="'debtorEntityList.' + inx + '.addr'" :rules="{ required: true, message: '请输入地址', trigger: 'change',}">
<el-input
clearable
placeholder="请输入地址"
v-model="obligorInfoForm.debtorEntityList[inx].addr">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮编" :prop="'debtorEntityList.' + inx + '.mail'" :rules="{ required: true, message: '请输入邮编', trigger: 'change',}">
<el-input
clearable
placeholder="请输入邮编"
v-model="obligorInfoForm.debtorEntityList[inx].mail"
maxlength="6">
</el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
</div>
</div>
</div>
</div>
<!-- 模板选择 -->
<div v-else-if="presentStep === 3">
<el-form ref="ruleFormTemplate"
:model="queryParam"
:rules="rulesClientTemplate"
label-width="150px"
class="demo-ruleForm">
<div>
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">模板话术</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="话术模板" prop="tpSpeechcraftId">
<el-select v-model="queryParam.tpSpeechcraftId"
clearable placeholder="请选择模板话术"
class="width100">
<el-option
v-for="item in speechcraftTemplateOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
<div>
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">调解模板</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="调解模板" prop="tpMediateId">
<el-select v-model="queryParam.tpMediateId"
clearable placeholder="请选择调解模板"
class="width100">
<el-option
v-for="item in mediationTemplateOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<!-- 材料上传 -->
<div v-else-if="presentStep === 4">
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">证据材料</div>
<div class="p-h-24">
<upload-file-name :file-list="fileList" :max-count="20"
:show-file-name="true"
@handleUploadFile="handleUploadFile">
</upload-file-name>
</div>
</div>
<!-- 完成 -->
<div v-else-if="presentStep === 5">
<el-result icon="success" title="案件创建完成" subTitle="案件创建完成,继续处理其他案件">
<template slot="extra">
<el-button type="primary" size="medium" @click="handleClose">好的</el-button>
</template>
</el-result>
</div>
</div>
<span slot="footer" class="dialog-footer" v-if="presentStep<5">
<el-button @click="handleClose">取消</el-button>
<el-button
v-if="presentStep > 1 "
type="primary"
@click="presentStep--">上一步</el-button>
<el-button
type="primary"
v-show="presentStep<4"
@click="handleNextStep">下一步</el-button>
<el-button
type="primary"
v-show="presentStep === 4"
@click="handleSubmit">确认
</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import api from "@/services/caseManagement";
export default {
components: {
uploadFileName: () => import('@/components/uploadFileName.vue'),//
},
props: {
addCaseDialog: {
type: Object,
default: () => {
return {}
},
},
},
data() {
const moneyAmountValidate = (rule,value,callback)=>{
if (!value){
callback(new Error('请输入标的金额'));
}else if (!/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/.test(value)){
callback(new Error('只能输入两位小数的金额!'));
}else if(!(0<parseInt(value)&&parseInt(value)<100000000)){
callback(new Error('只能输入大于1小于1亿的金额!'));
}else{
callback()
}
};
return {
transferStep:[
{id:1,title:'基本信息',description:'录入案件基本信息'},
{id:2,title:'当事人信息',description:'录入当事人信息'},
{id:3,title:'模板选择',description:'选择模板'},
{id:4,title:'材料上传',description:'上传案件材料'},
{id:5,title:'完成',description:'完成案件创建'},
],
presentStep:1,
//------------------------------------------------------
baseInfo:{
financialOrgName:'',//
financialOrgCode:'',//
caseName:'',//
caseNo:'',//
productTypeId:'',//
moneyAmount:'',//
overdueTimes:0,//
caseDescr:'',//
},
rulesClient: {
financialOrgName: [
{ required: true, message: '请输入机构名称', trigger: 'change',},
],
financialOrgCode: [
{ required: true, message: '请输入社会统一信用代码', trigger: 'change',},
],
caseName: [
{ required: true, message: '请输入案件名称', trigger: 'change',},
],
caseNo: [
{ required: true, message: '请输入案件编号', trigger: 'change',},
],
productTypeId: [
{ required: true, message: '请选择金融产品类型', trigger: 'change',},
],
moneyAmount: [
{ required: true, validator: moneyAmountValidate, trigger: 'change',},
],
caseDescr:[
{ required: true, message: '请输入案件描述', trigger: 'change',},
]
},
financialProductsTypeOptions:[],//
//-----------------------------------------------
//
creditorInfo:{
creditorName:'',//
creditorOrgCode:'',//
creditorLegal:'',//
creditorIdcard:'',//
creditorPhone:'',//
creditorAddr:'',//
creditorMail:'',//
creditorAgent:'',//
},
rulesClientCreditor: {
creditorName: [
{ required: true, message: '请输入债权人', trigger: 'change',},
],
creditorOrgCode: [
{ required: true, message: '请输入债权人机构代码', trigger: 'change',},
],
creditorLegal: [
{ required: true, message: '请输入法人', trigger: 'change',},
],
creditorIdcard: [
{ required: true, message: '请输入法人身份证号', trigger: 'change',},
{ pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '请输入正确的身份证号', trigger: ['blur', 'change']}
],
creditorPhone: [
{ required: true, message: '请输入法人手机号', trigger: 'change',},
{ pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
],
creditorAddr: [
{ required: true, message: '请输入公司地址', trigger: 'change',},
],
// creditorAgent: [
// { required: true, message: '', trigger: 'change',},
// ],
},
//
idTypeOptions:[],
obligorInfoForm:{
debtorEntityList:[
{
name:'',//
phone:'',//
cardTypeId:'',//
addr:'',//
cardNo:'',//
mail:'',//
}
],
},
obligorRulesClient:{
name: [
{ required: true, message: '请输入债务人姓名', trigger: 'change',},
],
phone: [
{ required: true, message: '请输入法人手机号', trigger: 'change',},
{ pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
],
cardTypeId: [
{ required: true, message: '请选择证件类型', trigger: 'change',},
],
addr: [
{ required: true, message: '请输入地址', trigger: 'change',},
],
cardNo: [
{ required: true, message: '请输入证件号', trigger: 'change',},
{ pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '请输入正确的身份证号', trigger: ['blur', 'change']}
],
mail: [
{ required: true, message: '请输入邮编', trigger: 'change',},
{ pattern: /^\d{6}$/, message: '请输入正确的邮编', trigger: ['blur', 'change']}
],
},
//------------------------------------------------------------
queryParam:{
tpMediateId:'',//id
tpSpeechcraftId:'',//
},
rulesClientTemplate:{
tpMediateId: [
{ required: true, message: '请选择调解模板', trigger: 'change',},
],
tpSpeechcraftId: [
{ required: true, message: '请选择话术模板', trigger: 'change',},
],
},
fileList:[],//
speechcraftTemplateOptions:[],//
mediationTemplateOptions:[],//
};
},
mounted () {
this.getDict();//
this.getDictIdType();
this.getSpeechcraftTemplateList(),//
this.getTemplateList();//
},
methods: {
//
getDict(){
let data = {
type:'financial'
}
api.getDict(data).then(res => {
if (!res.code) {
this.financialProductsTypeOptions = res;
}
})
},
//
getDictIdType(){
let data = {
type:'certificates'
}
api.getDict(data).then(res => {
if (!res.code) {
this.idTypeOptions = res;
}
})
},
//
handleAdd(){
this.obligorInfoForm.debtorEntityList.push({
name:'',//
phone:'',//
cardTypeId:'',//
addr:'',//
cardNo:'',//
mail:'',//
});
},
//
handleRemoveDomain(item) {
var index = this.obligorInfoForm.debtorEntityList.indexOf(item)
if (index !== -1) {
this.obligorInfoForm.debtorEntityList.splice(index, 1)
}
},
//
handleReset(){
for (let key in this.creditorInfo) {
this.creditorInfo[key] = ''
}
},
//
getSpeechcraftTemplateList(){
let data = {
current: 1,
name: "",
size: 300,
type: 2,
}
api.getTemplateList(data).then(res => {
if (!res.code) {
this.speechcraftTemplateOptions = res.records;
}
})
},
//
getTemplateList(){
let data = {
current: 1,
name: "",
size: 300,
type: 1,
}
api.getTemplateList(data).then(res => {
if (!res.code) {
this.mediationTemplateOptions = res.records;
}
})
},
//
handleNextStep(){
if(this.presentStep === 1){
this.$refs.ruleFormBase.validate((valid) => {
if (valid){this.presentStep++}
})
}else if(this.presentStep === 2){
this.$refs.ruleFormCreditor.validate((valid) => {
if (valid){
this.$refs.ruleFormObligor.validate((valid) => {
if (valid){this.presentStep++}
})
}
})
}else if(this.presentStep === 3){
this.$refs.ruleFormTemplate.validate((valid) => {
if (valid){this.presentStep++}
})
}else{
this.presentStep++
}
},
handleSubmit(){
if(!this.$clickThrottle()) { return }//
let data = {
...this.baseInfo,//
...this.creditorInfo,//
...this.obligorInfoForm,//
...this.queryParam,//
caseFileEntityList:this.fileList//
}
console.log('获取传给后台的信息',data)
api.addCaseInfo(data).then(res => {
this.presentStep++
this.$parent.getCaseInfoList(1)
this.$parent.getCaseCount()
})
},
//
handleUploadFile(fileList){
console.log('获取上传文件信息',fileList)
fileList = JSON.parse(JSON.stringify(fileList))
this.fileList = fileList.map((item,i) => {
return {
url: item.url,
fileName:item.fileName,
name:item.fileName
}
})
},
handleClose() {
this.$emit('update:addCaseDialog', null)
},
}
};
</script>
<style scoped lang="scss">
.dialog-content{
padding: 16px 24px;
// max-height:500px
}
</style>

View File

@ -0,0 +1,393 @@
<template>
<div>
<el-dialog
:title="caseAllocationDialog.title"
:visible="true"
width="880px"
append-to-body
:close-on-click-modal="false"
@close="handleClose"
>
<div class="dialog-content">
<div class="pb-16">
<el-row :gutter="20" type="flex" align="middle">
<el-col :span="24">
<div class="flex-row align-items-center">
<div class="mr-8 flex-shrink-0">区域</div>
<div class="width100">
<el-select v-model="deptId"
size="medium"
clearable placeholder="请选择区域"
@change="handleChangeDept"
class="width100">
<el-option
v-for="item in departmentOptions"
:key="item.id"
:label="item.name"
:value="item.id"
class="width100"
>
</el-option>
</el-select>
</div>
</div>
</el-col>
</el-row>
</div>
<el-scrollbar class="bor bg-color-light min-height350">
<div class="department-wrap">
<div v-for="(item,inx) in peopleList" :key="inx" class="department-wrap-list">
<div class="department-dept">
<el-checkbox v-model="checkedAll" :label="item.deptId" @change="handleCheckChange(1,inx,item,item.deptId,$event)">{{item.name}}({{item.count}})</el-checkbox>
</div>
<div class="flex-row justify-content-start flex-flow-wrap ">
<div v-for="(v,i) in item.values" :key="i" class="pt-16" style="flex:0 0 25%">
<el-checkbox v-model="checkedAll" :label="v.id" @change="handleCheckChange(2,inx,v,item.deptId,$event)">{{v.realName}}</el-checkbox>
</div>
</div>
</div>
</div>
</el-scrollbar>
<div class="p-v-24">
<el-form ref="ruleForm"
:model="queryParam"
:rules="rulesClient"
label-width="120px"
class="demo-ruleForm">
<el-row :gutter="20" type="flex" align="middle">
<el-col :span="24">
<el-form-item label="分配方式" prop="dispatchType" label-width="80px">
<template>
<el-radio v-model="queryParam.dispatchType" :label="1">平均分配</el-radio>
<el-radio v-model="queryParam.dispatchType" :label="2">调解中案件量最少</el-radio>
<el-radio v-model="queryParam.dispatchType" :label="3">当天分案量最少</el-radio>
<el-radio v-model="queryParam.dispatchType" :label="4">当月分案量最少</el-radio>
<el-radio v-model="queryParam.dispatchType" :label="5">同案由调解成功率最高</el-radio>
</template>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()">取消</el-button>
<el-button type="primary" @click="handleSubmit()">确认</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import api from "@/services/caseManagement";
import apipack from "@/services/casePackageManagement";
export default {
components: {
},
props: {
caseAllocationDialog: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {
deptId:[],//id
queryParam:{
id:'',//ID
dispatchType:1,//12345
},
userList:[],
rulesClient: {
dispatchType: [
{ required: true, message: '请选择分案方式', trigger: 'change',},
],
},
peopleList:[
{deptId:1,name:'调解一部',count:10,
values:[
{id:1,deptId:1,realName:'张三' },
{id:2,deptId:1,realName:'张三' },
{id:3,deptId:1,realName:'张三' },
{id:4,deptId:1,realName:'张三' },
{id:5,deptId:1,realName:'里面' },
]
}
],
departmentOptions:[],//
checkedAll:[],
chooseChecked:[],
};
},
mounted () {
// console.log(this.caseAllocationDialog.choosecaseIds,'choosecaseIds')
this.getDeptList();//
},
methods: {
//
getDeptList(){
let data = {
companyId: this.$store.state.userinfo.companyId,
current: 1,
size: 500,
pid:0
}
api.getDeptList(data).then(res => {
if (!res.code) {
this.departmentOptions = res.records;
this.deptId = this.departmentOptions[0].id
this.getByDeptList()
}
})
},
handleChangeDept(e){
this.checkedAll=[]
this.chooseChecked=[]
this.getByDeptList()
this.peopleList=[]
},
// id
getByDeptList(){
api.getDeptList({companyId:this.$store.state.userinfo.companyId,current:1,size:500,pid:this.deptId}).then(res => {
if (!res.code)
{
let deptList = []
res.records.forEach(item =>{
let userlist = []
api.getUserByDeptList({ids:[item.id]}).then(res => {
res.forEach(item =>{
userlist.push({
id:item.id,
realName:item.realName,
checked:false
})
})
})
deptList.push({
deptId:item.id,
name:item.name,
count:item.count,
checked:false,
values:userlist
})
})
this.peopleList = deptList
}
})
},
handleCheckChange(type,a=0,chooseItem,deptId,event){
// console.log(chooseItem,event,a,'this.peopleList')
let self = this
if(type==2){//
let index = 0;
self.peopleList[a].values.map((item)=>{
if(self.checkedAll.indexOf(item.id)>-1){
index+=1
}
})
if(index>0){
if(self.checkedAll.indexOf(self.peopleList[a].deptId)<0){
self.checkedAll.push(self.peopleList[a].deptId)
}
}else{
if(self.checkedAll.indexOf(self.peopleList[a].deptId)>0){
self.checkedAll.splice(self.checkedAll.indexOf(self.peopleList[a].deptId),1)
}
}
if(event)
{
if(this.chooseChecked.length==0){self.chooseChecked.push({deptId:deptId,child:[]})}
this.chooseChecked.forEach((item,index) => {
let haveDeptId = self.chooseChecked.find(citem=>{
return citem.deptId===deptId
})
if(haveDeptId != undefined)
{
if(item.deptId==deptId)
{
item.child.push({deptId:deptId,id:chooseItem.id,realName:chooseItem.realName})
}
}
else
{
self.chooseChecked.push({deptId:deptId,child:[{deptId:deptId,id:chooseItem.id,realName:chooseItem.realName}]})
}
});
}
else
{
this.chooseChecked.forEach((item,index) => {
item.child.forEach((itemchild,index) => {
if(itemchild.id==chooseItem.id)
{
item.child.splice(index,1)
}
});
});
}
let childnum = this.chooseChecked.find(item=>{
return item.deptId === deptId
}).child.length;
let allchildnum = this.peopleList.find(item=>{
return item.deptId === deptId
}).values.length;
if(childnum != allchildnum)
{
if(self.checkedAll.indexOf(deptId)>-1){
self.checkedAll.splice(self.checkedAll.indexOf(deptId),1)
}
}
else
{
if(self.checkedAll.indexOf(deptId)<0){
self.checkedAll.push(deptId)
}
}
}else{
if(self.checkedAll.indexOf(self.peopleList[a].deptId)>-1){
self.peopleList[a].values.map((item)=>{
if(self.checkedAll.findIndex((n)=> n==item.id)<0){
self.checkedAll.push(item.id)
// self.checkedAll.push({id:item.id,realName:item.realName,deptId:self.peopleList[a].deptId})
}
})
}else{
self.peopleList[a].values.map((item)=>{
if(self.checkedAll.findIndex((n)=> n==item.id)>-1){
self.checkedAll.splice(self.checkedAll.findIndex((n)=> n==item.id),1)
}
})
}
let haveDeptId=self.chooseChecked.find(citem=>{
return citem.deptId === deptId
})
if(event)
{
if(haveDeptId == undefined)
{
let addchild=[]
self.peopleList.forEach((item,index) => {
if(item.deptId==deptId)
{
item.values.forEach((item,index) => {
addchild.push({deptId:deptId,id:item.id,realName:item.realName})
});
}
});
self.chooseChecked.push({deptId:deptId,child:addchild})
}
}
else
{
if(haveDeptId != undefined)
{
self.chooseChecked.forEach((item,index) => {
if(item.deptId==deptId)
{
self.chooseChecked.splice(index,1)
}
});
}
}
}
// console.log(this.checkedAll,self.chooseChecked,'checkedAll')
},
handleSubmit(){
if(!this.$clickThrottle()) { return }//
let chooseUser=[]
this.chooseChecked.forEach((item,index) => {
item.child.forEach((item,index) => {
chooseUser.push({deptId:item.deptId,id:item.id,realName:item.realName})
});
});
if(chooseUser.length == 0)
{
this.$message({
showClose: true,
message: '请先选择调解员!',
type: 'warning'
});
return false
}
this.$refs.ruleForm.validate((valid) => {
if(valid) {
let data = {
id:this.caseAllocationDialog.ObjectInfo.id,
dispatchType:this.queryParam.dispatchType,
userList:chooseUser
}
apipack.postpkgdispatchCase(data).then(res => {
this.$message({
showClose: true,
message: '调解案件分配成功!',
type: 'success'
});
this.$parent.getCaseInfoList()
this.handleClose()
})
}
})
},
handleSearch(){
},
handleChangeDate(){
let planStart = new Date(this.queryParam.planStartTime);
let planEnd = new Date(this.queryParam.planEndTime);
if (planEnd < planStart) {
this.$message({
showClose: true,
message: '开始日期不能大于结束日期!',
type: 'warning'
});
this.queryParam.planEndTime=''
}
},
handleClose() {
this.$emit('update:caseAllocationDialog', null)
},
}
};
</script>
<style scoped lang="scss">
.dialog-content{
padding: 16px 24px;
max-height:500px
}
.department-wrap{
padding: 16px 24px;
max-height: 250px;
.department-wrap-list{
margin-bottom:32px;
}
.department-wrap-list:last-child{
margin-bottom:0;
}
}
.min-height350{min-height: 350px;}
.department-dept ::v-deep .el-checkbox__label {color: $color-000000}
</style>

View File

@ -0,0 +1,836 @@
<template>
<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>
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">基本信息</div>
<div class="p-h-24">
<el-form ref="ruleFormBase"
:model="baseInfo"
:rules="rulesClient"
label-width="150px"
class="demo-ruleForm">
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="金融机构名称" prop="financialOrgName">
<el-input
v-model.trim="baseInfo.financialOrgName"
placeholder="请输入金融机构名称"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="社会统一信用代码" prop="financialOrgCode">
<el-input
v-model.trim="baseInfo.financialOrgCode"
placeholder="请输入社会统一信用代码"
clearable
maxlength="18"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="案件名称" prop="caseName">
<el-input
clearable
placeholder="请输入案件名称"
v-model="baseInfo.caseName" :disabled="caseStatus != 0">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="案件编号" prop="caseNo">
<el-input
clearable
placeholder="请输入案件编号"
:disabled="caseStatus != 0"
v-model="baseInfo.caseNo">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="金融产品类型" prop="productTypeId">
<el-select v-model="baseInfo.productTypeId"
clearable placeholder="请选择金融产品类型"
class="width100">
<el-option
v-for="item in financialProductsTypeOptions"
:key="item.code"
:label="item.codeName"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标的金额" prop="moneyAmount">
<el-input
clearable
placeholder="请输入内容"
v-model="baseInfo.moneyAmount">
<template slot="append"></template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="逾期次数" prop="overdueTimes">
<!-- <el-select v-model="baseInfo.overdueTimes"
clearable placeholder="请选择逾期次数"
class="width100">
<el-option
v-for="item in operateMethodOptions"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select> -->
<el-input-number v-model="baseInfo.overdueTimes" :min="0" :max="100" class="width100"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="案件描述" prop="caseDescr">
<el-input
clearable
placeholder="请输入内容"
v-model="baseInfo.caseDescr">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</el-scrollbar>
</el-tab-pane>
<el-tab-pane label="案件当事人" name="caseParty">
<el-scrollbar class="bor">
<div :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 class="border-solid-lighter-1 p-h-24 mb-16">
<div class="flex-row justify-content-between height-48 line-height-48 f14 border-b-solid-lighter-1 mb-16">
<div class="color-000">债权人</div>
<div class="color-text-regular cursor-pointer" @click="handleReset">清空<i class="el-icon-close"></i></div>
</div>
<el-form ref="ruleFormCreditor"
:model="creditorInfo"
:rules="rulesClientCreditor"
label-width="150px"
class="demo-ruleForm">
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="债权人" prop="creditorName">
<el-input
v-model.trim="creditorInfo.creditorName"
placeholder="请输入债权人"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="社会统一信用代码" prop="creditorOrgCode">
<el-input
v-model.trim="creditorInfo.creditorOrgCode"
placeholder="请输入社会统一信用代码"
clearable
maxlength="18"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="法人姓名" prop="creditorLegal">
<el-input
clearable
placeholder="请输入法人姓名"
v-model="creditorInfo.creditorLegal">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="法人身份证号" prop="creditorIdcard">
<el-input
clearable
placeholder="请输入法人身份证号"
v-model="creditorInfo.creditorIdcard"
maxlength="18">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="法人手机号" prop="creditorPhone">
<el-input
clearable
placeholder="请输入法人手机号"
v-model="creditorInfo.creditorPhone"
maxlength="11"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公司地址" prop="creditorAddr">
<el-input
clearable
placeholder="请输入公司地址"
v-model="creditorInfo.creditorAddr">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="邮编" prop="creditorMail">
<el-input
clearable
placeholder="请输入邮编"
v-model="creditorInfo.creditorMail"
maxlength="6"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="代理人" prop="creditorAgent">
<el-input
clearable
placeholder="请输入代理人"
v-model="creditorInfo.creditorAgent">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="border-solid-lighter-1 p-h-24">
<div class="flex-row justify-content-between f14 border-b-solid-lighter-1 mb-8 p-v-8 align-items-center">
<div class="color-000">债务人</div>
<el-button size="small" type="primary" @click="handleAdd">新增债务人<i class="el-icon-plus"></i></el-button>
</div>
<div>
<el-form ref="ruleFormObligor"
:model="obligorInfoForm"
label-width="150px"
class="demo-ruleForm">
<div v-for="(item,inx) in obligorInfoForm.debtorEntityList" :key="inx">
<div class="flex-row justify-content-between align-items-center height-40 f14 mb-16">
<div class="color-text-primary">债务人{{inx+1}}</div>
<div class="color-text-regular cursor-pointer" @click="handleRemoveDomain(item)">删除<i class="el-icon-close"></i></div>
</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="债务人姓名" :prop="'debtorEntityList.' + inx + '.name'" :rules="{required: true, message: '请输入债权人姓名', trigger: 'blur'}">
<el-input
v-model.trim="obligorInfoForm.debtorEntityList[inx].name"
placeholder="请输入债务人姓名"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="证件类型" :prop="'debtorEntityList.' + inx + '.cardTypeId'" :rules="{required: true, message: '请选择证件类型', trigger: 'change'}">
<el-select v-model="obligorInfoForm.debtorEntityList[inx].cardTypeId"
clearable placeholder="请选择证件类型"
class="width100">
<el-option
v-for="item in idTypeOptions"
:key="item.code"
:label="item.codeName"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="证件号码" :prop="'debtorEntityList.' + inx + '.cardNo'"
:rules=" [
{ required: true, message: '请输入证件号', trigger: 'change',},
{ pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '请输入正确的证件号', trigger: ['blur', 'change']}
]">
<el-input
clearable
placeholder="请输入证件号码"
v-model="obligorInfoForm.debtorEntityList[inx].cardNo"
maxlength="18"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号码" :prop="'debtorEntityList.' + inx + '.phone'" :rules="[
{ required: true, message: '请输入法人手机号', trigger: 'change',},
{ pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
]">
<el-input
clearable
placeholder="请输入手机号码"
v-model="obligorInfoForm.debtorEntityList[inx].phone"
maxlength="11"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="地址" :prop="'debtorEntityList.' + inx + '.addr'" :rules="{ required: true, message: '请输入地址', trigger: 'change',}">
<el-input
clearable
placeholder="请输入地址"
v-model="obligorInfoForm.debtorEntityList[inx].addr">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮编" :prop="'debtorEntityList.' + inx + '.mail'" :rules="{ required: true, message: '请输入邮编', trigger: 'change',}">
<el-input
clearable
placeholder="请输入邮编"
v-model="obligorInfoForm.debtorEntityList[inx].mail"
maxlength="6">
</el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
</div>
</div>
</div>
</div>
</el-scrollbar>
</el-tab-pane>
<el-tab-pane label="模板选择" name="templateSelection">
<div :style="{'height': `${drawerContentHeight}px`}">
<el-form ref="ruleFormTemplate"
:model="queryParam"
:rules="rulesClientTemplate"
label-width="150px"
class="demo-ruleForm">
<div>
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">模板话术</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="话术模板" prop="tpSpeechcraftId">
<el-select v-model="queryParam.tpSpeechcraftId"
clearable placeholder="请选择模板话术"
class="width100">
<el-option
v-for="item in speechcraftTemplateOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
<div>
<div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">调解模板</div>
<el-row type="flex" align="middle">
<el-col :span="12">
<el-form-item label="调解模板" prop="tpMediateId">
<el-select v-model="queryParam.tpMediateId"
clearable placeholder="请选择调解模板"
class="width100">
<el-option
v-for="item in mediationTemplateOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</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">
<upload-file-name :file-list="fileList" :max-count="20"
:show-file-name="true"
@handleUploadFile="handleUploadFile">
</upload-file-name>
</div>
</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="handleSubmit">保存</el-button>
</div>
</div>
</div>
</el-drawer>
</template>
<script>
import api from "@/services/caseManagement";
export default {
components: {
uploadFileName: () => import('@/components/uploadFileName.vue'),//
},
props: {
editCaseDrawer: {
type: Object,
default: () => {
return {}
},
},
},
data() {
const moneyAmountValidate = (rule,value,callback)=>{
if (!value){
callback(new Error('请输入标的金额'));
}else if (!/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/.test(value)){
callback(new Error('只能输入两位小数的金额!'));
}else if(!(0<parseInt(value)&&parseInt(value)<100000000)){
callback(new Error('只能输入大于1小于1亿的金额!'));
}else{
callback()
}
};
return {
caseStatus:0,
activeName:'baseInfo',
//------------------------------------------------------
baseInfo:{
financialOrgName:'',//
financialOrgCode:'',//
caseName:'',//
caseNo:'',//
productTypeId:'',//
moneyAmount:'',//
overdueTimes:0,//
caseDescr:'',//
},
rulesClient: {
financialOrgName: [
{ required: true, message: '请输入机构名称', trigger: 'change',},
],
financialOrgCode: [
{ required: true, message: '请输入社会统一信用代码', trigger: 'change',},
],
caseName: [
{ required: true, message: '请输入案件名称', trigger: 'change',},
],
caseNo: [
{ required: true, message: '请输入案件编号', trigger: 'change',},
],
productTypeId: [
{ required: true, message: '请选择金融产品类型', trigger: 'change',},
],
moneyAmount: [
{ required: true, validator: moneyAmountValidate, trigger: 'change',},
],
caseDescr:[
{ required: true, message: '请输入案件描述', trigger: 'change',},
]
},
financialProductsTypeOptions:[],//
//-----------------------------------------------
//
creditorInfo:{
creditorName:'',//
creditorOrgCode:'',//
creditorLegal:'',//
creditorIdcard:'',//
creditorPhone:'',//
creditorAddr:'',//
creditorMail:'',//
creditorAgent:'',//
},
rulesClientCreditor: {
creditorName: [
{ required: true, message: '请输入债权人', trigger: 'change',},
],
creditorOrgCode: [
{ required: true, message: '请输入债权人机构代码', trigger: 'change',},
],
creditorLegal: [
{ required: true, message: '请输入法人', trigger: 'change',},
],
creditorIdcard: [
{ required: true, message: '请输入法人身份证号', trigger: 'change',},
{ pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '请输入正确的身份证号', trigger: ['blur', 'change']}
],
creditorPhone: [
{ required: true, message: '请输入法人手机号', trigger: 'change',},
{ pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
],
creditorAddr: [
{ required: true, message: '请输入公司地址', trigger: 'change',},
],
// creditorAgent: [
// { required: true, message: '', trigger: 'change',},
// ],
},
//
idTypeOptions:[],
obligorInfoForm:{
debtorEntityList:[
{
name:'',//
phone:'',//
cardTypeId:'',//
addr:'',//
cardNo:'',//
mail:'',//
}
],
},
obligorRulesClient:{
name: [
{ required: true, message: '请输入债务人姓名', trigger: 'change',},
],
phone: [
{ required: true, message: '请输入法人手机号', trigger: 'change',},
{ pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
],
cardTypeId: [
{ required: true, message: '请选择证件类型', trigger: 'change',},
],
addr: [
{ required: true, message: '请输入地址', trigger: 'change',},
],
cardNo: [
{ required: true, message: '请输入证件号', trigger: 'change',},
{ pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '请输入正确的身份证号', trigger: ['blur', 'change']}
],
mail: [
{ required: true, message: '请输入邮编', trigger: 'change',},
{ pattern: /^\d{6}$/, message: '请输入正确的邮编', trigger: ['blur', 'change']}
],
},
fileList:[],//
//------------------------------------------------------
speechcraftTemplateOptions:[],//
mediationTemplateOptions:[],//
queryParam:{
tpMediateId:'',//id
tpSpeechcraftId:'',//
},
rulesClientTemplate:{
tpMediateId: [
{ required: true, message: '请选择调解模板', trigger: 'change',},
],
tpSpeechcraftId: [
{ required: true, message: '请选择话术模板', trigger: 'change',},
],
},
caseId:'',//id
mediationRecord:[],//
currentPage:'',//
};
},
async created() {
this.getDict();//
this.getDictIdType();//
this.getTemplateList();//
this.getSpeechcraftTemplateList(),//
this.currentPage = this.editCaseDrawer.currentPage
console.log('父级页面当前页数',this.currentPage)
this.caseId = this.editCaseDrawer.data.id
this.getCaseInfoById();//
console.log('获取基本信息',this.baseInfo)
},
computed:{
// drawer
drawerContentHeight(){
let oh = document.documentElement.clientHeight;
return oh-200
}
},
methods: {
//
getDict(){
let data = {
type:'financial'
}
api.getDict(data).then(res => {
if (!res.code) {
this.financialProductsTypeOptions = res;
}
})
},
//
getDictIdType(){
let data = {
type:'certificates'
}
api.getDict(data).then(res => {
if (!res.code) {
this.idTypeOptions = res;
}
})
},
//
handleAdd(){
this.obligorInfoForm.debtorEntityList.push({
name:'',//
phone:'',//
cardTypeId:'',//
addr:'',//
cardNo:'',//
mail:'',//
});
},
//
handleRemoveDomain(item) {
var index = this.obligorInfoForm.debtorEntityList.indexOf(item)
if (index !== -1) {
this.obligorInfoForm.debtorEntityList.splice(index, 1)
}
},
//
handleReset(){
for (let key in this.creditorInfo) {
this.creditorInfo[key] = ''
}
},
// tab
handleClick(tab, event) {
// console.log(tab, event);
//
// if(tab.name ==='mediationRecord'){
// this.showButton = false
// }else{
// this.showButton = true
// }
},
//
getSpeechcraftTemplateList(){
let data = {
current: 1,
name: "",
size: 300,
type: 2,
}
api.getTemplateList(data).then(res => {
if (!res.code) {
this.speechcraftTemplateOptions = res.records;
}
})
},
//
getTemplateList(){
let data = {
current: 1,
name: "",
size: 300,
type: 1,
}
api.getTemplateList(data).then(res => {
if (!res.code) {
this.mediationTemplateOptions = res.records;
// console.log('1111',this.mediationTemplateOptions)
}
})
},
submitFormData(type){
},
handleUploadFile(fileList){
fileList = JSON.parse(JSON.stringify(fileList))
this.fileList = fileList.map((item,i) => {
return {
url: item.url,
fileName:item.fileName,
name:item.fileName
}
})
// console.log('',this.fileList)
},
//
getCaseInfoById(){
let _that = this
api.getCaseInfoById(this.caseId).then(res => {
if(!res.code){
_that.caseStatus=res.caseStatus
//
_that.baseInfo = {
financialOrgName:res.financialOrgName,//
financialOrgCode:res.financialOrgCode,//
caseName:res.caseName,//
caseNo:res.caseNo,//
productTypeId:res.productTypeId,//
moneyAmount:res.moneyAmount,//
overdueTimes:res.overdueTimes,//
caseDescr:res.caseDescr,//
};
console.log('基本信息',_that.baseInfo)
//
//
_that.obligorInfoForm ={
debtorEntityList:res.debtorEntityList
}
// this.obligorInfo = res.debtorEntityList
console.log('债务人',_that.obligorInfoForm)
//
_that.creditorInfo = {
creditorName:res.creditorName,//
creditorOrgCode:res.creditorOrgCode,//
creditorLegal:res.creditorLegal,//
creditorIdcard:res.creditorIdcard,//
creditorPhone:res.creditorPhone,//
creditorAddr:res.creditorAddr,//
creditorMail:res.creditorMail,//
creditorAgent:res.creditorAgent,//
};
//
this.mediationRecord = res.logEntityList
//
_that.queryParam = {
tpMediateId:String(res.tpMediateId),//id
tpSpeechcraftId:String(res.tpSpeechcraftId),//
};
//
// console.log('',res.caseFileEntityList)
let caseFileEntityList = []
res.caseFileEntityList.forEach((item)=>{
caseFileEntityList.push({name:item.name,fileName:item.name,url:item.url})
})
_that.fileList = caseFileEntityList
}
})
},
//
handleSubmit(){
let data = {
id:this.caseId,
...this.baseInfo,//
...this.creditorInfo,//
...this.obligorInfoForm,//
...this.queryParam,//
caseFileEntityList:this.fileList//
}
let formValidates = [
this.$refs["ruleFormBase"].validate(),
this.$refs["ruleFormCreditor"].validate(),
this.$refs["ruleFormObligor"].validate(),
this.$refs["ruleFormTemplate"].validate(),
]
if(!this.$clickThrottle()) { return }//
Promise.all(formValidates).then(()=>{
api.updateCaseInfoById(data).then(res => {
this.$message.success("编辑成功");
this.$parent.getCaseInfoList(this.currentPage)
this.handleClose()
})
}).catch(()=>{
this.$message({ message: '请检查必填项是否填完', type: "warning",customClass:'messageZindex'});
// console.log('')
})
},
checkForm(formName) {
return new Promise((resolve, reject) => {
this.$refs[formName].validate(valid => {
if (valid) {
resolve();
} else reject();
});
});
},
handleClose() {
this.$emit('update:editCaseDrawer', null)
},
}
};
</script>
<style scoped lang="scss">
.audio_wrap{
width: 330px;
height: 40px;
.audio{
width: 100%;
height: 100%;
}
}
</style>

View File

@ -0,0 +1,101 @@
<template>
<div>
<el-dialog
:title="importCaseDialog.title"
:visible="true"
width="480px"
append-to-body
:close-on-click-modal="false"
@close="handleClose"
>
<div class="dialog-content">
<upload-import :file-list="fileList" :max-count="1"
:show-file-name="true"
accept=".xls,.xlsx"
@handleUploadFile="handleUploadFile"
@handleImport="handleImport">
</upload-import>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()">取消</el-button>
<el-button @click="handleDownload()">下载</el-button>
<el-button type="primary" @click="handleSubmit()">确认</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import api from "@/services/caseManagement";
export default {
components: {
uploadImport:() => import('@/components/uploadImport.vue'),//
},
props: {
importCaseDialog: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {
fileList:[],
};
},
mounted () {
},
methods: {
handleUploadFile(fileList){
console.log('获取上传文件信息',fileList)
fileList = JSON.parse(JSON.stringify(fileList))
this.fileList = fileList.map((item,i) => {
let time = this.$util.getTimestamp()
let fileType = this.$util.getFileExtension(item.url)
let fileName = `${time}.${fileType}`
return {
url: item.url,
fileName:fileName,
}
})
},
handleImport(file){
let formdata = new FormData();
formdata.append("file", file)
console.log(formdata)
api.getImportCase(formdata).then(res => {
this.$parent.getCaseInfoList(1)
this.$message.success("导入成功");
})
},
handleSubmit(){
if(!this.$clickThrottle()) { return }//
this.handleClose()
},
//
handleDownload(){
if(!this.$clickThrottle()) { return }//
api.getExportTemplate({}).then(res => {
this.$util.downloadFileByBlob(res.data, '案件.xlsx')
})
},
handleClose() {
this.$emit('update:importCaseDialog', null)
},
}
};
</script>
<style scoped lang="scss">
.dialog-content{
padding: 16px 64px;
max-height:500px
}
</style>

View File

@ -0,0 +1,610 @@
<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.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 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="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>
<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 v-if="repaymentObj.type != undefined" class="el-icon-s-flag"></i> 还款计划</span>
<div class="case-repayment-des flex-column mb-16 p-16 border-radius-8" style="min-height: 200px;">
<div v-if="repaymentObj.type != undefined" class="flex-column justify-content-between">
<el-form ref="ruleFormRepayment"
label-width="130px">
<el-form-item label="还款方式" prop="type">
<el-select v-model="repaymentObj.type" class="width100" disabled
placeholder="请选择还款方式" size="small">
<el-option
v-for="(item,index) in RepaymentOptions"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="还款金额" prop="totalAmount">
<el-input class="inputpaddingtop2" disabled
size="small"
placeholder="请输入还款金额"
v-model="repaymentObj.totalAmount"
@input="inputChange($event)">
<template slot="append"></template>
</el-input>
</el-form-item>
<!-- 枚举备注: ALL :一次性全部回款 STAGES :全部分期 MIX :混合部分先还加分期 OTHER :其他 -->
<el-form-item v-if="repaymentObj.type == 'MIX'" label="分期前偿还金额" prop="partAmount">
<el-input class="inputpaddingtop2" disabled
size="small"
placeholder="请输入分期前偿还金额"
v-model="repaymentObj.partAmount"
@input="inputChange($event)">
<template slot="append"></template>
</el-input>
</el-form-item>
<el-form-item v-if="repaymentObj.type == 'MIX'" label="先还日期" prop="partDate">
<el-date-picker class="width100" size="small" disabled
v-model="repaymentObj.partDate"
type="date"
placeholder="选择先还日期"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item v-if="repaymentObj.type == 'MIX'" label="分期部分金额" prop="productTypeId">
<el-input class="inputpaddingtop2"
size="small"
disabled
placeholder="分期部分金额"
v-model="repaymentObj.moneyAmount">
<template slot="append"></template>
</el-input>
</el-form-item>
<el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="分期期数" prop="stagesNum">
<el-input
size="small" disabled
placeholder="请输入分期期数"
v-model="repaymentObj.stagesNum"
@input="inputChange($event)">
</el-input>
</el-form-item>
<el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="每期还款金额" prop="stagesAmount">
<el-input class="inputpaddingtop2"
size="small"
disabled
placeholder="每期还款金额"
v-model="repaymentObj.stagesAmount">
<template slot="append"></template>
</el-input>
</el-form-item>
<el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="每期还款日期" prop="stagesDay">
<el-select v-model="repaymentObj.stagesDay" class="width100" disabled
placeholder="请选择每期还款日期" size="small">
<el-option
v-for="(item, index) in 31"
:key="index"
:label="(index+1)+'日'"
:value="(index+1)">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-if="repaymentObj.type == 'ALL' || repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="还款截止日期" prop="paybackDate">
<el-date-picker class="width100" size="small" disabled
v-model="repaymentObj.paybackDate"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="备注说明" prop="remark">
<el-input disabled
size="small"
clearable
placeholder="请输入备注说明"
v-model="repaymentObj.remark">
</el-input>
</el-form-item>
</el-form>
</div>
</div>
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i v-if="ProofList.length > 0" class="el-icon-s-flag"></i> 回款凭证</span>
<span class="f16">总计待还金额{{ProofStatistics.total}}总计已还金额{{ProofStatistics.payback}}</span>
<el-table :data="ProofList" :height="300" >
<el-table-column type="index" label="序号" width="55"></el-table-column>
<el-table-column prop="paybackTime" label="凭证时间" show-overflow-tooltip ></el-table-column>
<el-table-column prop="amount" label="凭证金额" show-overflow-tooltip ></el-table-column>
<el-table-column prop="uploaderName" label="上传者" show-overflow-tooltip ></el-table-column>
<el-table-column prop="createAt" label="上传时间" show-overflow-tooltip ></el-table-column>
<el-table-column prop="remark" 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="handleCaseShow(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="CaseTraceDialog = {activeName:'1',title:'短信发送记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
<span>短信发送追踪</span><span></span>
</div>
<div class="flex-row justify-content-between cursor-pointer" @click="CaseTraceDialog = {activeName:'2',title:'电话呼叫记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
<span>电话呼叫追踪</span><span></span>
</div>
<div class="flex-row justify-content-between cursor-pointer" @click="CaseTraceDialog = {activeName:'3',title:'视频调解记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
<span>视频调解追踪</span><span></span>
</div>
<div class="flex-row justify-content-between cursor-pointer" @click="CaseTraceDialog = {activeName:'4',title:'文书生成记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
<span>文书生成追踪</span><span></span>
</div>
<div class="flex-row justify-content-between cursor-pointer" @click="CaseTraceDialog = {activeName:'5',title:'文书签字记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
<span>文书签字追踪</span><span></span>
</div>
<div class="flex-row justify-content-between cursor-pointer" @click="CaseTraceDialog = {activeName:'6',title:'文书送达记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
<span>文书送达追踪</span><span></span>
</div>
<div class="flex-row justify-content-between cursor-pointer" @click="CaseTraceDialog = {activeName:'7',title:'还款计划',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
<span>还款计划追踪</span><span></span>
</div>
<div class="flex-row justify-content-between cursor-pointer" @click="CaseTraceDialog = {activeName:'8',title:'还款凭证',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
<span>还款凭证追踪</span><span></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="fileList" :height="300" >
<el-table-column type="index" label="序号" width="55"></el-table-column>
<el-table-column label="材料类型" width="170">
<template slot-scope="scope">
<div class="flex-row align-items-center">
{{ getfileType(scope.row) }}
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="文件名称" show-overflow-tooltip ></el-table-column>
<el-table-column prop="createAt" label="上传时间" show-overflow-tooltip ></el-table-column>
<!-- <el-table-column prop="url" 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="handleCaseShow(scope,fileList)">查看</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>
</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>
<!-- 各种案件追踪记录 -->
<CaseTraceDialog v-if="CaseTraceDialog" :eventTraDialog.sync="CaseTraceDialog" />
<!-- 文件预览 -->
<showFile v-if="fileDialog" :fileDialog.sync="fileDialog" />
</div>
</template>
<script>
import api from "@/services/caseManagement";
import { stubString } from "lodash";
import { subtract } from "lodash";
export default {
components: {
showFile: () => import('../../../components/showFile.vue'),//
CaseTraceDialog: () => import('../components/CaseTraceDialog.vue'),//
},
data() {
return {
CaseTraceDialog:null,
fileDialog:null,
eventTraDialog:null,
navactive:1,
Qualitydesc:'结清应还金额16776.74逾期未还费用2486.88',
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:'',
baseInfo:{},
fileList:[],
fileType:[{label:'身份证件',value:1},{label:'金融许可证',value:2},{label:'营业执照',value:3},{label:'法定代表人身份证明',value:4},
{label:'起诉状',value:5},{label:'证据清单',value:6},{label:'合约',value:7},{label:'申领表',value:8},{label:'交易明细',value:9}
,{label:'其他证据',value:10}],
//
repaymentObj:{},
RepaymentOptions:[{label:'一次性还款',value:'ALL'},{label:'全部分期',value:'STAGES'},{label:'部分先还加分期',value:'MIX'},{label:'其他',value:'OTHER'}],
//
ProofList:[],
}
},
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: {
getfileType(row){
let item = this.fileType.find(item =>{
return item.code === row.materialType
})
if(item != undefined) return item.label
return '-'
},
handleCaseShow(scope,filelist){
if(filelist == undefined){
this.fileDialog = {showfile:{url:scope.row.proofUrl},filelist:[]}
}
else
{
this.fileDialog = {showfile:scope.row,filelist:filelist}
}
},
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 = res.caseFileEntityList
}
})
this.getplanlist()
this.getProofList()
},
//
getplanlist(){
console.log(111,{caseId:this.caseId})
api.getcase_payback_planlist({caseId:this.caseId}).then(res => {
if(!res.code){
if(res.length > 0 ){this.repaymentObj = res[0]}
}
})
},
//
getProofList(){
api.gettraceProof_list({caseId:this.caseId}).then(res => {
if(!res.code){
this.ProofList = res
}
})
api.gettraceProof_statistics({caseId:this.caseId}).then(res => {
if(!res.code){
this.ProofStatistics = res
}
})
},
//
inputChange(){
if(this.repaymentObj.type == 'STAGES')
{
if(this.repaymentObj.totalAmount !='' &&this.repaymentObj.stagesNum !='' && this.repaymentObj.totalAmount !=undefined &&this.repaymentObj.stagesNum !=undefined)
{
this.repaymentObj.stagesAmount = ((this.repaymentObj.totalAmount*1)/(this.repaymentObj.stagesNum*1)).toFixed(2)
}
}
if(this.repaymentObj.type == 'MIX')
{
if(this.repaymentObj.totalAmount !='' &&this.repaymentObj.stagesNum !='' && this.repaymentObj.totalAmount !=undefined &&this.repaymentObj.stagesNum !=undefined)
{
this.repaymentObj.stagesAmount = ((this.repaymentObj.totalAmount*1 - this.repaymentObj.partAmount*1)/(this.repaymentObj.stagesNum*1)).toFixed(2)
}
}
},
}
}
</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;}
.el-form-item{ margin-bottom: 2px;}
.inputpaddingtop2{padding-top:3px}
}
.case-repayment-des{
padding: 10px 15px;
color:#86909C;
.el-form-item{ margin-bottom: 2px;}
.inputpaddingtop2{padding-top:3px}
}
.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>

View File

@ -0,0 +1,513 @@
<template>
<div class="layout-content-wrap">
<div class="navigation-bar flex-row mb-16">
<img src="../../assets/image/Link.png" height="22" alt="">
<a>/</a>
<a>回款凭证</a>
</div>
<div class="layout-tabs-content-box background-color-fff border-radius-4">
<div class="pt-8 border-b-solid-lighter-1">
<div class="height-30 flex-row align-items-center justify-content-between mb-24">
<div class="f22 color-text-primary">筛选</div>
<div class="flex-row align-items-center color-text-regular cursor-pointer"
@click="handleToggleSearch">
<span class="f14 pr-8">{{showSearch?'展开':'收起'}}</span>
<i :class="['f14 el-icon-arrow-down transform-time-default', {
'rotate--180': showSearch
}]"></i>
</div>
</div>
<el-collapse-transition>
<div v-show="showSearch">
<el-row :gutter="56">
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">案件包名称</span>
<el-input v-model.trim="queryParam.pkgName"
clearable placeholder="请输入案件包名称"
@keydown.enter.native="handleSearch">
</el-input>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">金融机构名称</span>
<el-input v-model.trim="queryParam.financialOrgName"
clearable placeholder="请输入金融机构名称"
@keydown.enter.native="handleSearch">
</el-input>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">所属调解员</span>
<el-select v-model="queryParam.mediatorId"
clearable placeholder="请选择所属调解员"
@keydown.enter.native="handleSearch"
class="width100">
<el-option
v-for="item in caseStatusData"
:key="item.code"
:label="item.desc"
:value="item.code">
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">被申请人姓名</span>
<el-input v-model.trim="queryParam.creditorName"
clearable placeholder="请输入被申请人姓名"
@keydown.enter.native="handleSearch">
</el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">被申请人电话</span>
<el-input v-model.trim="queryParam.creditorPhone"
clearable placeholder="请输入被申请人电话"
@keydown.enter.native="handleSearch"
maxlength="11"
>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">被申请人证件号</span>
<el-input v-model.trim="queryParam.creditorCode"
clearable placeholder="请输入被申请人证件号"
@keydown.enter.native="handleSearch"
maxlength="11"
>
</el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="18">
<div class="flex-row align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">回款时间</span>
<span :class="['f14 pr-24 cursor-pointer', i === 0 ? 'pl-8' : '',
activeUsage === item ?'color-primary' : 'color-text-regular']"
v-for="(item, i) in usageOption" :key="i"
@click="handleClickUsage(item)">{{item}}</span>
<el-date-picker
v-model="queryDate"
type="daterange"
clearable
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="handleChangeDate">
</el-date-picker>
</div>
</el-col>
<el-col :span="4" :offset="2">
<div class="flex-row align-items-center justify-content-end">
<el-button @click="hanldeReset">重置</el-button>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</div>
</el-col>
</el-row>
</div>
</el-collapse-transition>
</div>
<!-- table -->
<div class="pt-8">
<div class="height-56 flex-row align-items-center justify-content-between">
<div class="f22 color-text-primary">凭证列表</div>
<div class="flex-row">
<!-- <el-button size="small" @click="handleImport">导入</el-button>
<el-button size="small" @click="handleBatchDelete">删除</el-button>-->
<el-button size="small" @click="handleAddForm">案件办结</el-button>
<el-button size="small" type="primary" @click="handleCaseAllocation">案件分配</el-button>
</div>
</div>
<div class="case-table">
<el-table :data="tableData" :height="`${contentHeight}`" >
<el-table-column type="index" label="序号" width="55"></el-table-column>
<el-table-column prop="entrustingAgencyName" label="金融机构名称" show-overflow-tooltip ></el-table-column>
<el-table-column prop="pkgName" label="案件包名称" show-overflow-tooltip ></el-table-column>
<el-table-column prop="pkgName" label="被申请人姓名" show-overflow-tooltip ></el-table-column>
<el-table-column prop="pkgName" label="案件编号" show-overflow-tooltip ></el-table-column>
<el-table-column prop="pkgName" label="逾期天数" show-overflow-tooltip ></el-table-column>
<el-table-column prop="pkgName" label="回款金额" show-overflow-tooltip ></el-table-column>
<el-table-column prop="pkgName" label="回款时间" show-overflow-tooltip ></el-table-column>
<el-table-column prop="pkgName" label="上传回款凭证时间" show-overflow-tooltip ></el-table-column>
<el-table-column prop="pkgName" label="所属调解员" show-overflow-tooltip ></el-table-column>
<el-table-column prop="pkgName" label="操作" width="240" >
<template slot-scope="scope">
<div class="flex-row align-items-center">
<el-button size="mini" class="case-btn" @click="handleEdit(scope)">查看凭证</el-button>
<el-button size="mini" v-if="scope.row.status == 1" class="case-btn" @click="handleDelete(scope)">效验</el-button>
<el-button size="mini" class="case-btn" @click="handleDelete(scope)">修改</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="text-center pt-16">
<el-pagination
@size-change="getCaseInfoList"
@current-change="getCaseInfoList"
:current-page="queryParam.current"
:page-size="queryParam.size"
layout="total, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</div>
<!-- 导入 -->
<!-- <importCaseDialog v-if="importCaseDialog" :importCaseDialog.sync="importCaseDialog" /> -->
<!-- 新增 -->
<!-- <addCaseDialog v-if="addCaseDialog" :addCaseDialog.sync="addCaseDialog" /> -->
<!-- 编辑 -->
<!-- <editCaseDrawer v-if="editCaseDrawer" :editCaseDrawer.sync="editCaseDrawer"/> -->
<!-- 案件分配-->
<caseAllocationDialog v-if="caseAllocationDialog" :caseAllocationDialog.sync="caseAllocationDialog" />
<!-- 各种案件追踪记录 -->
<CaseTraceDialog v-if="CaseTraceDialog" :eventTraDialog.sync="CaseTraceDialog" />
</div>
</template>
<script>
import api from "@/services/caseManagement";
import { values } from "lodash";
export default {
components: {
// importCaseDialog: () => import('./components/importCaseDialog'),//
// addCaseDialog: () => import('./components/addCaseDialog'),//
// editCaseDrawer: () => import('./components/editCaseDrawer'),//
CaseTraceDialog: () => import('./components/CaseTraceDialog.vue'),//
caseAllocationDialog: () => import('./components/caseAllocationDialog'),//
},
data() {
return {
CaseTraceDialog:null,//
isCheck: false,//
indeterminate: false,//selectionDatalength 0 < selectionData.length < enabledDataList.length true
selectionData: [],//
enabledDataList: [],//
//
CaseStatusEnum:[{label:'在办',value:1},{label:'办结',value:2}],
//
PartCaseStatusEnum:[{label:'待分案',value:false},{label:'已分案',value:true}],
//
MediateProgEnum:[{label:'承诺账户',value:'承诺账户'},{label:'重点账户',value:'重点账户'},{label:'已结清客户',value:'已结清客户'},
{label:'疑难账户',value:'疑难账户'},{label:'失联账户',value:'失联账户'},{label:'半失联账户',value:'半失联账户'},{label:'部分还款账户',value:'部分还款账户'},
{label:'适诉案件',value:'适诉案件'},{label:'可联账户',value:'可联账户'},{label:'投诉倾向客户',value:'投诉倾向客户'},{label:'分期客户',value:'分期客户'},
{label:'其他/无标签',value:'其他/无标签'}
],
//
MediateStatusEnum:[{label:'未触达',value:0},{label:'调解中',value:1},{label:'已达成方案',value:2},
{label:'已签署协议',value:3},{label:'调解失败',value:4},{label:'调解成功',value:5}],
showSearch: true,
queryDate: '',
activeUsage: '',
queryParam: {
pkgId:'',
financialOrgName:'',//
caseNo: '',//
productTypeId: '',//id
caseStatus: '',//
creditorName:'',//
creditorPhone:'',//
creditorCode:'',
endTime: '',//
beginTime:'',//
deptId:'',//id
current:1,
size:10,
dataAuthUserId:'',//id
dataAuthDeptId:'',//id
mediatorId:'',//id
caseStatus:null,//
mediateStatus:null,//
dispatch:null,//
labels:null,//
},
usageOption: ['今日','昨日', '近一周', '近一月', '近半年', '近一年'],
tableData: [],
total:0,
uniqueSelection:[],
caseAllocationDialog:null,//
importCaseDialog:null,//
addCaseDialog:null,//
editCaseDrawer:null,//
caseStatusData:[],
}
},
watch: {
//
selectionData: {
handler(v) {
if (this.enabledDataList.length) {
let checkedCount = v.length;
this.isCheck = checkedCount === this.enabledDataList.length;
this.indeterminate = checkedCount > 0 && checkedCount < this.enabledDataList.length;
}
},
immediate: true
}
},
created() {
if (this.$route.query.dataKey != undefined) {
this.queryParam.pkgId = this.$route.query.pkgId;
}
this.getCaseInfoList(1)
},
computed:{
// drawer
contentHeight(){
let oh = document.documentElement.clientHeight;
if(this.showSearch){
return oh-56-48-366-85
}else{
return oh-56-48-175-65
}
}
},
methods: {
jumpUrl (url) {
this.$router.push(url);
},
//
handleCheckAllChange(value){
this.selectionData = value ? this.enabledDataList.map(el=>el.id) : [];
this.indeterminate = false;
},
//
handleImport(){
this.importCaseDialog={
title:'导入案件',
}
},
//
handleBatchDelete(){
if(this.uniqueSelection.length==0){
this.$message.warning("请先选择你要删除的列表数据");
return
}
this.$confirm("请确定是否删除这些数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
if(!this.$clickThrottle()) { return }//
let data = {
ids:this.uniqueSelection
}
api.deleteCaseBatch(data).then((res) => {
this.$message.success("成功");
this.getCaseInfoList(1)
});
}).catch(() => {});
},
//
handleDelete(scope){
this.$confirm("请确定是否删除此条数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
if(!this.$clickThrottle()) { return }//
api.deleteCaseInfoById(scope.row.id).then((res) => {
this.$message.success("成功");
this.getCaseInfoList(1)
});
}).catch(() => {});
},
//
handleAddForm(){
this.addCaseDialog={
title:'新增案件',
}
},
//
handleCaseAllocation(){
if(this.selectionData.length > 0){
this.caseAllocationDialog={
title:'案件分配',
choosecaseIds:this.selectionData
}
}
else
{
this.$message({
showClose: true,
message: '请选择需要分案的案件!',
type: 'warning'
});
return false
}
},
//
handleEdit(scope){
this.editCaseDrawer={
title:'编辑案件',
data:scope.row,
currentPage:this.queryParam.current
}
},
//
getCaseInfoList(val){
this.queryParam.current = val
api.getCaseInfoList(this.queryParam).then(res => {
if (!res.code) {
this.tableData = res.records;
this.total = res.total;
// enabledDataList
this.enabledDataList = this.tableData.filter(v=>!v.disabled)
}
})
},
handleToggleSearch() {
this.showSearch = !this.showSearch
},
//
hanldeReset() {
for (let key in this.queryParam) {
this.queryParam[key] = ''
}
this.queryParam.current = 1
this.queryParam.size = 10
},
handleSearch() {
this.queryParam.size = 10;
this.queryParam.current = 1;
this.getCaseInfoList(1)
},
handleClickUsage(item) {
this.activeUsage = item
this.setDateFast()
},
handleChangeDate() {
this.activeUsage = ''
if(this.queryDate === null) {
this.setDateFast()
}else {
this.queryParam.beginTime = this.$util.getDayStart(this.queryDate[0])
this.queryParam.endTime = this.$util.getDayEnd(this.queryDate[1])
}
},
setDateFast() {
switch (this.activeUsage) {
case "今日":
let todayObj = this.$util.getToday()
this.queryParam.beginTime = todayObj.todayStart
this.queryParam.endTime = todayObj.todayEnd
break
case "昨日":
let yesterdayObj = this.$util.getYesterday()
this.queryParam.beginTime = yesterdayObj.beginTime
this.queryParam.endTime = yesterdayObj.endTime
break
case "近一周":
let rangeWeek = this.$util.getRecentWeeks()
this.queryParam.beginTime = rangeWeek.recentWeekStart
this.queryParam.endTime = rangeWeek.todayEnd
break
case "近一月":
let rangeMonth = this.$util.getRecentMonths()
this.queryParam.beginTime = rangeMonth.recentMonthStart
this.queryParam.endTime = rangeMonth.todayEnd
break
case "近半年":
let rangeMonths = this.$util.getRecentMonths(6)
console.log('近半年:', rangeMonths)
this.queryParam.beginTime = rangeMonths.recentMonthStart
this.queryParam.endTime = rangeMonths.todayEnd
break
case "近一年":
let rangeYear = this.$util.getRecentYears()
this.queryParam.beginTime = rangeYear.recentYearStart
this.queryParam.endTime = rangeYear.todayEnd
break
default:
this.queryParam.beginTime = ''
this.queryParam.endTime = ''
this.queryDate = ''
break
}
if(this.queryParam.beginTime && this.queryParam.endTime) {
this.queryDate = [this.queryParam.beginTime, this.queryParam.endTime]
}
},
handleSelectionChange(val){
console.log('获取val',val)
this.uniqueSelection = []
val.forEach((row)=>{
this.uniqueSelection.push(row.id)
})
console.log('uniqueSelection',this.uniqueSelection)
},
}
}
</script>
<style scoped lang="scss">
.el-badge{
top: 3px;
}
.case-table{
.table-row{
color: #86909C;
p{padding: 0;margin: 0;}
.case-bg{
background-color: #eceef1d1;
padding: 10px 20px;
margin: 5px 0 10px 0;
}
.table-span-one span{width: 180px;}
.case-btn{
color: #C66A5B;
border-color: #C66A5B;
margin: 0 5px;
}
}
}
</style>
<style lang="scss">
.case-table{
.el-table tr {
background-color: #f7f8fa63 !important;
}
.el-checkbox{line-height: 10px;margin-top: -3px;}
.el-checkbox .el-checkbox__label{width: 0px;overflow: hidden;}
}
</style>

View File

@ -138,7 +138,8 @@ import systemManageApi from "@/services/systemManage";
if(Object.keys(this.addOrEditAreaConfig.data).length>0) if(Object.keys(this.addOrEditAreaConfig.data).length>0)
{ {
_this.deptInfo.id = this.addOrEditAreaConfig.data.id _this.deptInfo.id = this.addOrEditAreaConfig.data.id
_this.deptInfo.directorId ='['+ this.deptInfo.directorIds.toString()+']' if(this.deptInfo.directorIds.length == 0){_this.deptInfo.directorId =''}
else{_this.deptInfo.directorId ='['+ this.deptInfo.directorIds.toString()+']'}
systemManageApi.updateDeptById(_this.deptInfo).then(res => { systemManageApi.updateDeptById(_this.deptInfo).then(res => {
this.$message({ this.$message({
showClose: true, showClose: true,

View File

@ -38,6 +38,20 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row type="flex" align="middle">
<el-col :span="24">
<el-form-item label="区域负责人" prop="remark">
<el-select v-model="deptInfo.directorIds" multiple placeholder="请选择" class="width100" :multiple-limit="5">
<el-option
v-for="item in usersOptions"
:key="item.id"
:label="item.showName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
</div> </div>
@ -103,7 +117,8 @@ import systemManageApi from "@/services/systemManage";
this.deptInfo = { this.deptInfo = {
name:res.name, name:res.name,
remark:res.remark, remark:res.remark,
companyId:res.companyId companyId:res.companyId,
directorIds:res.directorId
} }
} }
}) })
@ -124,6 +139,8 @@ import systemManageApi from "@/services/systemManage";
if(Object.keys(this.addOrEditDeptConfig.data).length>0 && this.addOrEditDeptConfig.data.pid != 0) if(Object.keys(this.addOrEditDeptConfig.data).length>0 && this.addOrEditDeptConfig.data.pid != 0)
{ {
_this.deptInfo.id = this.addOrEditDeptConfig.data.id _this.deptInfo.id = this.addOrEditDeptConfig.data.id
if(this.deptInfo.directorIds.length == 0){_this.deptInfo.directorId =''}
else{_this.deptInfo.directorId ='['+ this.deptInfo.directorIds.toString()+']'}
systemManageApi.updateDeptById(_this.deptInfo).then(res => { systemManageApi.updateDeptById(_this.deptInfo).then(res => {
this.$message({ this.$message({
showClose: true, showClose: true,

View File

@ -114,13 +114,18 @@ const routes = [
component: () => import("@/pages/mediation-package"), component: () => import("@/pages/mediation-package"),
meta: { title: "调解管理", icon: 'menu-mediat-management' }, meta: { title: "调解管理", icon: 'menu-mediat-management' },
}, },
{ {
path: "/event-tracing", path: "/event-tracing",
name: "/event-tracing", name: "/event-tracing",
component: () => import("@/pages/event-tracing"), component: () => import("@/pages/event-tracing"),
meta: { title: "事项追踪", icon: 'menu-mediat-management' }, meta: { title: "事项追踪", icon: 'menu-mediat-management' },
}, },
{
path: "/payment-receipt",
name: "/payment-receipt",
component: () => import("@/pages/payment-receipt"),
meta: { title: "回款凭证", icon: 'menu-mediat-management' },
},
], ],

View File

@ -120,6 +120,15 @@ const caseManagementApi = {
gettraceProof_statistics: data => { gettraceProof_statistics: data => {
return service.service.post(`${apiAdmin}api/trace/traceProof/statistics`, data) return service.service.post(`${apiAdmin}api/trace/traceProof/statistics`, data)
}, },
// 校验
gettraceProof_valid: data => {
return service.service.post(`${apiAdmin}api/trace/traceProof/valid`, data)
},
// 删除
gettraceProof_delete: data => {
return service.service.post(`${apiAdmin}api/trace/traceProof/delete`, data)
},