From 60b862fc231ad6c9111bb8369e488265c396615a Mon Sep 17 00:00:00 2001
From: tdg930622 <51816549+tdg930622@users.noreply.github.com>
Date: Fri, 27 Dec 2024 17:49:05 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=94=E7=B3=BB=E4=BA=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/case-management/detail/index.vue | 1273 +++++++++++---------
 1 file changed, 688 insertions(+), 585 deletions(-)

diff --git a/src/pages/case-management/detail/index.vue b/src/pages/case-management/detail/index.vue
index 49675be..df33a19 100644
--- a/src/pages/case-management/detail/index.vue
+++ b/src/pages/case-management/detail/index.vue
@@ -1,614 +1,717 @@
 <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 || 0}}元，总计已还金额：{{ProofStatistics.payback || 0}}元</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 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 v-for="(item, index) in contactPersonList" :key="index">
+              <span><a>姓名：</a><a>{{item.name}}</a></span>
+              <span><a>与债务人关系：</a><a>{{item.type}}</a></span>
+              <span><a>联系人手机：</a><a>{{item.phone}}</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 || 0 }}元，总计已还金额：{{ ProofStatistics.payback || 0 }}元</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}],
+import contactPerson from "@/services/contactPerson";
+import {stubString} from "lodash";
+import {subtract} from "lodash";
 
-                // 还款计划
-                repaymentObj:{},
-                RepaymentOptions:[{label:'一次性还款',value:'ALL'},{label:'全部分期',value:'STAGES'},{label:'部分先还加分期',value:'MIX'},{label:'其他',value:'OTHER'}],
-                // 还款凭证
-                ProofList:[],
-                ProofStatistics: {
-                  total: 0,
-                  payback: 0
-                }
-            }
-        },
-        computed:{
-            // 获取抽屉drawer的内容高度
-            drawerContentHeight(){
-                let oh = document.documentElement.clientHeight;
-                return oh-200
-            }
-            
-        },
-        async created() {
+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}],
+      contactPersonList: [],
+      // 还款计划
+      repaymentObj: {},
+      RepaymentOptions: [{label: '一次性还款', value: 'ALL'}, {
+        label: '全部分期',
+        value: 'STAGES'
+      }, {label: '部分先还加分期', value: 'MIX'}, {label: '其他', value: 'OTHER'}],
+      // 还款凭证
+      ProofList: [],
+      ProofStatistics: {
+        total: 0,
+        payback: 0
+      }
+    }
+  },
+  computed: {
+    // 获取抽屉drawer的内容高度
+    drawerContentHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 200
+    }
 
-            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
+  },
+  async created() {
 
-                    }
-                    
-                })
-                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){
-                       console.log(res, '---ProofStatistics')
-                        this.ProofStatistics = res
-                     }
-                })
+    if (this.$route.query.caseId != undefined) {
+      this.caseId = this.$route.query.caseId;
+      this.getCaseInfoById();//获取详情
+    }
+  },
+  methods: {
+    getfileType(row) {
 
-                
-            },
-            // 输入还款金额 输入分期期数
-            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)
-                    }
-                }
+      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
 
-                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)
-                    }
-                }
-            },
         }
 
-    }
+      })
+      this.getLitigantByCaseId()
+      this.getplanlist()
+      this.getProofList()
+    },
+    getLitigantByCaseId() {
+      let dataJson = {
+        size: 9999,
+        current: 1,
+        caseId: this.caseId
+      }
+      contactPerson.debtorPage(dataJson).then(res => {
+        if (!res.code) {
+          // console.log(res, '---getLitigantByCaseId')
+          this.contactPersonList = res.records;
+        }
+      })
+    },
+    // 还款计划
+    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) {
+          console.log(res, '---ProofStatistics')
+          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 {
+  .case-detail-nav {
+    span {
+      width: 100px;
+      font-size: 18px;
+      color: #86909C;
+      cursor: pointer;
     }
-    .case-detail-title{
-        border-bottom: solid 2px #C66A5B99;
+
+    span:hover {
+      color: #C66A5B;
     }
-    .case-detail-label{
-        margin: 15px 0;
-        a{
-            font-size: 14px;
-            color: #C66A5B;
-            font-weight: 400;
-            cursor: pointer;
-            margin-left: 20px;
-        }
+
+    span.active {
+      color: #C66A5B;
     }
-    
-    .case-detail-des{
+  }
+
+  .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: 10px 15px;
-        color:#86909C;
-        span{
-            width: 25%;
-            display: inline-block;
-            margin: 5px 0;
+        padding: 12px;
+        border-radius: 2px;
+
+        a {
+          font-weight: 600;
         }
-        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;
-                }
-            }
+        a:first-child {
+          color: #E8535A;
         }
+      }
     }
+  }
 }
 
-.el-badge{
-    top: 3px;
+.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 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>