2024-12-24 11:27:17 +08:00

176 lines
7.0 KiB
Vue

<template>
<div>
<el-dialog :visible="true" width="80%" class="dialog-case-record" append-to-body :close-on-click-modal="false"
@close="handleClose()">
<div class="dialog-content dialog-case-trace">
<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="mt-16 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" />
<!-- 还款凭证 -->
<RepaymentRecordDialog v-if="activeName == '8'" :eventTraDialog.sync="repaymentlogDialog" />
</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'),//事项追踪
RepaymentDialog: () => import('./RepaymentDialog.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;
}
.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>