From 1f48de7a4d04d0c3ecf7d2c677d9a57eca8e494e Mon Sep 17 00:00:00 2001
From: tdg930622 <51816549+tdg930622@users.noreply.github.com>
Date: Wed, 25 Dec 2024 14:06:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A2=84=E7=BA=A6=E3=80=81?=
 =?UTF-8?q?=E6=9D=90=E6=96=99=E4=B8=8A=E4=BC=A0=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/uploadFile.vue                 |    3 +-
 .../components/LayoutContent.vue              | 1638 +++++++++--------
 .../components/VideoReservationDialog.vue     |   52 +-
 .../components/caseFileDialog.vue             |  138 ++
 src/services/caseMaterial.js                  |   26 +
 5 files changed, 1054 insertions(+), 803 deletions(-)
 create mode 100644 src/pages/mediation-page/components/caseFileDialog.vue
 create mode 100644 src/services/caseMaterial.js

diff --git a/src/components/uploadFile.vue b/src/components/uploadFile.vue
index 15b6f65..eb0abb3 100644
--- a/src/components/uploadFile.vue
+++ b/src/components/uploadFile.vue
@@ -255,7 +255,8 @@
                 url: uploadFileRes.url,
                 fileSize: uploadFileRes.size,
                 fileType: this.$util.getFileExtension(uploadFileRes.url),
-                fileName: uploadFileRes.objectName
+                fileName: uploadFileRes.objectName,
+                objectName: uploadFileRes.fileName
             })
             this.$emit('handleUploadFile', fileList)
 
diff --git a/src/pages/mediation-page/components/LayoutContent.vue b/src/pages/mediation-page/components/LayoutContent.vue
index 08d8d62..6356110 100644
--- a/src/pages/mediation-page/components/LayoutContent.vue
+++ b/src/pages/mediation-page/components/LayoutContent.vue
@@ -1,847 +1,923 @@
 <template>
-    <div style=" height: 100%;">
-        <div class="layout-center-wrap flex-column">
-            <!-- 上部数据 -->
-            <div class="layout-center-top-wrap flex-row justify-content-between">
-                <div class="flex-row justify-content-between top-case-btn-left">
-                    <el-button @click="handleBack">退出当前调解</el-button>
-                    <el-button @click="getFrontCaseById">上一个</el-button>
-                    <el-button @click="getNextCaseById">下一个</el-button>
-                    <span class="ipphoneimg"> IP电话</span>
-                    <span class="smsimg">发送短信</span>
-                    <span class="videoimg" @click="VideoDialog={caseId:caseId}">视频预约</span>
+  <div style=" height: 100%;">
+    <div class="layout-center-wrap flex-column">
+      <!-- 上部数据 -->
+      <div class="layout-center-top-wrap flex-row justify-content-between">
+        <div class="flex-row justify-content-between top-case-btn-left">
+          <el-button @click="handleBack">退出当前调解</el-button>
+          <el-button @click="getFrontCaseById">上一个</el-button>
+          <el-button @click="getNextCaseById">下一个</el-button>
+          <span class="ipphoneimg"> IP电话</span>
+          <span class="smsimg">发送短信</span>
+          <span class="videoimg" @click="VideoDialog={caseId:caseId}">视频预约</span>
 
-                    <span class="case-send-btn">发起送达</span>
-                    <span class="case-send-btn">发起签章</span>
-                    <span class="case-send-btn">案件办结</span>
+          <span class="case-send-btn">发起送达</span>
+          <span class="case-send-btn">发起签章</span>
+          <span class="case-send-btn">案件办结</span>
 
-                </div>
-                <div class="flex-row justify-content-between top-case-btn-right">
-                    <span :class="rightActive == 1 ?'active':''" @click="rightActive = 1">沟通记录</span>
-                    <span :class="rightActive == 2 ?'active':''" @click="rightActive = 2">案件文书</span>
-                    <span :class="rightActive == 3 ?'active':''" @click="rightActive = 3">案件材料</span>
-                    <span :class="rightActive == 4 ?'active':''" @click="rightActive = 4">备注</span>
-                    <span :class="rightActive == 5 ?'active':''" @click="rightActive = 5">日志</span>
-                </div>
-            </div>
-            <!-- 中间数据 -->
-            <div class="layout-center-center-wrap flex-row justify-content-between">
-                <!-- 左边数据 -->
-                <div class="layout-center-left-wrap flex-row justify-content-between">
-                    <div class="layout-center-left1-wrap flex-column justify-content-start">
+        </div>
+        <div class="flex-row justify-content-between top-case-btn-right">
+          <span :class="rightActive == 1 ?'active':''" @click="rightActive = 1">沟通记录</span>
+          <span :class="rightActive == 2 ?'active':''" @click="rightActive = 2">案件文书</span>
+          <span :class="rightActive == 3 ?'active':''" @click="rightActive = 3">案件材料</span>
+          <span :class="rightActive == 4 ?'active':''" @click="rightActive = 4">备注</span>
+          <span :class="rightActive == 5 ?'active':''" @click="rightActive = 5">日志</span>
+        </div>
+      </div>
+      <!-- 中间数据 -->
+      <div class="layout-center-center-wrap flex-row justify-content-between">
+        <!-- 左边数据 -->
+        <div class="layout-center-left-wrap flex-row justify-content-between">
+          <div class="layout-center-left1-wrap flex-column justify-content-start">
                         <span class="left-rbobot">
-                            <img src="../../../assets/image/mediate/m-info-robot.png" />
+                            <img src="../../../assets/image/mediate/m-info-robot.png"/>
                         </span>
-                        <span class="separation"></span>
-                        <span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @mouseenter="leftActive = 1">
-                            <img src="../../../assets/image/mediate/m-info1.png" />
+            <span class="separation"></span>
+            <span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @mouseenter="leftActive = 1">
+                            <img src="../../../assets/image/mediate/m-info1.png"/>
                             <a>案件信息</a>
                         </span>
-                        <span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @mouseenter="leftActive = 2">
-                            <img src="../../../assets/image/mediate/m-info2.png" />
+            <span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @mouseenter="leftActive = 2">
+                            <img src="../../../assets/image/mediate/m-info2.png"/>
                             <a>联系人</a>
                         </span>
-                        <span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @mouseenter="leftActive = 3">
-                            <img src="../../../assets/image/mediate/m-info3.png" />
+            <span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @mouseenter="leftActive = 3">
+                            <img src="../../../assets/image/mediate/m-info3.png"/>
                             <a>案件材料</a>
                         </span>
-                        <span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @mouseenter="leftActive = 4">
-                            <img src="../../../assets/image/mediate/m-info4.png" />
+            <span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @mouseenter="leftActive = 4">
+                            <img src="../../../assets/image/mediate/m-info4.png"/>
                             <a>案件文书</a>
                         </span>
-                        <span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @mouseenter="leftActive = 5">
-                            <img src="../../../assets/image/mediate/m-info5.png" />
+            <span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @mouseenter="leftActive = 5">
+                            <img src="../../../assets/image/mediate/m-info5.png"/>
                             <a>还款计划</a>
                         </span>
-                        <span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @mouseenter="leftActive = 6">
-                            <img src="../../../assets/image/mediate/m-info6.png" />
+            <span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @mouseenter="leftActive = 6">
+                            <img src="../../../assets/image/mediate/m-info6.png"/>
                             <a>还款凭证</a>
                         </span>
-                    </div>
-                    <div class="layout-center-left2-wrap">
-                        <el-scrollbar :style="'height:'+`${leftContentHeight}`+'px'">
-                            <!-- 债务信息 -->
-                            <div v-if="leftActive == 1" class="case-debt-info">
-                                <!-- <div>债务信息</div> -->
-                                <div class="case-detail-label f-weight500 f18 mb-8">基本信息</div>
-                                <div class="case-detail-des flex-column">
-                                    <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 f18 mb-8 mt-8">申请人代理人信息</div>
-                                <div class="case-detail-des flex-column">
-                                    <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>{{baseInfo.planStartTime}}</a></span>
-                                </div>
-                                <div class="case-detail-label f-weight500 f18 mb-8 mt-8">债务信息</div>
-                                <div class="case-detail-des flex-column">
-                                    <!-- <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>
-
-                            <!-- 联系人信息 -->
-                            <div v-if="leftActive == 2"  class="case-contact-person">
-                                <div class="mb-16 flex-row justify-content-between">
-                                    <span class="f-weight500 f18">联系人信息</span>
-                                    <span class="cursor-pointer" @click="contactAddFlag = true"><i class="el-icon-plus"></i> 添加联系人</span>
-                                </div>
-                                <div v-if="contactAddFlag" class="case-detail-des flex-column mb-16">
-                                    <div class="flex-row justify-content-between">
-                                        <div class="flex-row mb-8">
-                                            <a class="f16" style="width: 130px;">
-                                                <el-input v-model.trim="contactAddObj.Name"
-                                                        clearable placeholder="请输入姓名" size="small">
-                                                </el-input>
-                                            </a>
-                                            <a  style="width: 140px;margin-left: 5px">
-                                                <el-select v-model="contactAddObj.relation"
-                                                    placeholder="与债务人关系" size="small"
-                                                    class="width100">
-                                                    <el-option
-                                                            v-for="(item,index) in relationOptions"
-                                                            :key="index"
-                                                            :label="item.label"
-                                                            :value="item.value">
-                                                    </el-option>
-                                                </el-select>
-                                            </a>
-                                        </div>
-                                        <div class="flex-row">
-                                            <a class="cursor-pointer pt-6">添加</a>
-                                            <a class="cursor-pointer ml-8 pt-6" @click="contactAddFlag = false;contactAddObj = {}">取消</a>
-                                        </div>
-                                    </div>
-                                    <div class="flex-row">
-                                        <a style="width: 180px;">
-                                            <el-input v-model.trim="contactAddObj.Phone"  size="small"
-                                                        clearable placeholder="请输入手机号码" maxlength="11">
-                                            </el-input>
-                                        </a>
-                                    </div>
-                                </div>
-
-                                <div class="case-detail-des flex-column mb-16">
-                                    <div class="flex-row justify-content-between">
-                                        <div v-if="!contactUpdate" class="flex-row mb-8">
-                                            <a class="f16">张三</a>
-                                            <div class="case-lable">
-                                                <a class="case-status0">本人</a>
-                                                <a class="case-status1">空号</a>
-                                            </div>
-                                        </div>
-                                        <div v-if="contactUpdate" class="flex-row mb-8">
-                                            <a class="f16" style="width: 130px;">
-                                                <el-input v-model.trim="contactObj.Name"
-                                                        clearable placeholder="请输入姓名" size="small">
-                                                </el-input>
-                                            </a>
-                                            <a  style="width: 140px;margin-left: 5px">
-                                                <el-select v-model="contactObj.relation"
-                                                    placeholder="请选择与债务人关系" size="small"
-                                                    class="width100">
-                                                    <el-option
-                                                            v-for="(item,index) in relationOptions"
-                                                            :key="index"
-                                                            :label="item.label"
-                                                            :value="item.value">
-                                                    </el-option>
-                                                </el-select>
-                                            </a>
-                                        </div>
-                                        <div class="flex-row">
-                                            <a v-if="contactUpdate" class="cursor-pointer pt-6">保存</a>
-                                            <a v-if="contactUpdate" @click="contactUpdate = false" class="cursor-pointer ml-8 pt-6">取消</a>
-                                            <a v-if="!contactUpdate" @click="contactUpdate = true" class="cursor-pointer">编辑</a>
-                                            <a v-if="!contactUpdate" class="cursor-pointer ml-8">删除</a>
-                                        </div>
-                                    </div>
-                                    <div v-if="!contactUpdate">
-                                        <a>手机号码:</a><a class="ml-8">13333333333</a>
-                                    </div>
-                                    <div v-if="contactUpdate" class="flex-row">
-                                        <a style="width: 180px;">
-                                            <el-input v-model.trim="contactObj.Phone"  size="small"
-                                                        clearable placeholder="请输入手机号码" maxlength="11">
-                                            </el-input>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 案件材料 -->
-                            <div v-if="leftActive == 3"  class="case-materials-person">
-                                <div class="mb-16 flex-row justify-content-between">
-                                    <span class="f-weight500 f18">案件材料</span>
-                                    <span class="cursor-pointer"><i class="el-icon-plus"></i> 上传案件材料</span>
-                                </div>
-                                <div class="case-detail-des flex-column mb-16">
-                                    <div class="background-color-F5F5F5 p-16 flex-row border-radius-8">
-                                        <a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')" /></a>
-                                        <div class="flex-column">
-                                            <a class="mt-8 f-weight500">起诉状</a>
-                                            <a class="color-86909C">张三 2024-09-09</a>
-                                        </div>
-                                    </div>
-                                    <div class="color-86909C mt-8">
-                                        <a class="mr-16 ml-16 cursor-pointer"><i class="el-icon-view"></i>预览</a>
-                                        <a class="mr-16 cursor-pointer"><i class="el-icon-delete"></i>删除</a>
-                                        <a class="mr-16 cursor-pointer"><i class="el-icon-download"></i>下载</a>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 案件文书 -->
-                            <div v-if="leftActive == 4"  class="case-office-person">
-                                <div class="mb-16 flex-row justify-content-between">
-                                    <span class="f-weight500 f18">案件文书</span>
-                                    <span class="cursor-pointer"><i class="el-icon-tickets"></i> 文书生成</span>
-                                </div>
-                                <div class="case-detail-des flex-column mb-16">
-                                    <div class="background-color-F5F5F5 p-16 flex-row border-radius-8">
-                                        <a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')" /></a>
-                                        <div class="flex-column" style="padding-top:2px">
-                                            <a class="f-weight500">调解申请书</a>
-                                            <a class="color-86909C f12">未签字</a>
-                                            <a class="color-86909C f12">--</a>
-                                        </div>
-                                    </div>
-                                    <div class="color-86909C mt-8">
-                                        <a class="mr-16 ml-16 cursor-pointer"><i class="el-icon-view"></i>预览</a>
-                                        <a class="mr-16 cursor-pointer"><i class="el-icon-download"></i>下载模板</a>
-                                        <a class="mr-16 cursor-pointer"><i class="el-icon-upload2"></i>上传文书</a>
-                                        <a class="mr-16 cursor-pointer"><i class="el-icon-tickets"></i>文书生成</a>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 还款计划 -->
-                            <div v-if="leftActive == 5"  class="case-repayment-schedule">
-                                <RepaymentSchedule :eventDialog.sync="eventDialog" />
-                            </div>
-                            <!-- 还款凭证 -->
-                            <div v-if="leftActive == 6"  class="case-repayment-certificate">
-                                <RepaymentCertificate :eventDialog.sync="eventDialog" />
-                            </div>
-
-                        </el-scrollbar>
-                        
-                    </div>
+          </div>
+          <div class="layout-center-left2-wrap">
+            <el-scrollbar :style="'height:'+`${leftContentHeight}`+'px'">
+              <!-- 债务信息 -->
+              <div v-if="leftActive == 1" class="case-debt-info">
+                <!-- <div>债务信息</div> -->
+                <div class="case-detail-label f-weight500 f18 mb-8">基本信息</div>
+                <div class="case-detail-des flex-column">
+                  <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="layout-center-right-wrap">
-                    <!-- 沟通记录 -->
-                    <div v-if="rightActive == 1" class="case-communication-record flex-column">
-                        <div class="flex-row justify-content-between">
-                            <span class="btn-communication background-color-fff f-weight500"><i class="el-icon-plus"></i>新增沟通记录</span>
-                            <div>
-                                <span class="btn-communication"><i class="el-icon-refresh"></i>刷新</span>
-                                <span class="btn-communication">已视频1</span>
-                                <span class="btn-communication">电话沟通2</span>
-                            </div>
-                        </div>
-                        <el-scrollbar :style="'height:'+`${CommunicationcontentHeight}`+'px'">
-                            <div class="flex-column case-communication-cont background-color-fff">
-                                <div class="flex-row justify-content-between">
-                                    <div>
-                                        <span class="f16 f-weight500">张三 发起电话沟通</span> <span>2023-09-09 12:12:12</span>
-                                    </div>
-                                    <span  class="btn-communication border-E5E6EB"><i class="el-icon-edit-outline"></i> 编辑沟通记录</span>
-                                </div>
-                                <div class="case-lable">
-                                    <a class="case-status0">半失联客户</a><a class="case-status0">半失联客户</a>
-                                </div>
-                                <div class="flex-row justify-content-between mt-16 background-color-F5F5F5 p-16 f16">
-                                    <div>
-                                        <span>被申请人</span>
-                                        <span class="ml-8">李四</span>
-                                        <span class="ml-8">1388888888888</span>
-                                    </div>
-                                    <div>
-                                        <span>通话44秒</span>
-                                        <span class="ml-32 cursor-pointer"><i class="el-icon-video-play"></i> 播放录音</span>
-                                    </div>
-                                </div>
-                                <div class="flex-row pt-16">
-                                    <span>沟通备注：</span>
-                                    <span>李四</span>
-                                </div>
-                            </div>
-                            <div class="flex-column case-communication-cont background-color-fff">
-                                <div class="flex-row justify-content-between">
-                                    <div>
-                                        <span class="f16 f-weight500">张三 发起电话沟通</span> <span>2023-09-09 12:12:12</span>
-                                    </div>
-                                    <span  class="btn-communication border-E5E6EB"><i class="el-icon-edit-outline"></i> 编辑沟通记录</span>
-                                </div>
-                                <div class="case-lable">
-                                    <a class="case-status0">半失联客户</a><a class="case-status0">半失联客户</a>
-                                </div>
-                                <div class="flex-row justify-content-between mt-16 background-color-F5F5F5 p-16 f16">
-                                    <div>
-                                        <span>被申请人</span>
-                                        <span class="ml-8">李四</span>
-                                        <span class="ml-8">1388888888888</span>
-                                    </div>
-                                    <div>
-                                        <span>通话44秒</span>
-                                        <span class="ml-32 cursor-pointer"><i class="el-icon-video-play"></i> 播放录音</span>
-                                    </div>
-                                </div>
-                                <div class="flex-row pt-16">
-                                    <span>沟通备注：</span>
-                                    <span>李四</span>
-                                </div>
-                            </div>
-                        </el-scrollbar>
+                <div class="case-detail-label f-weight500 f18 mb-8 mt-8">申请人代理人信息</div>
+                <div class="case-detail-des flex-column">
+                  <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>{{ baseInfo.planStartTime }}</a></span>
+                </div>
+                <div class="case-detail-label f-weight500 f18 mb-8 mt-8">债务信息</div>
+                <div class="case-detail-des flex-column">
+                  <!-- <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>
+
+              <!-- 联系人信息 -->
+              <div v-if="leftActive == 2" class="case-contact-person">
+                <div class="mb-16 flex-row justify-content-between">
+                  <span class="f-weight500 f18">联系人信息</span>
+                  <span class="cursor-pointer" @click="contactAddFlag = true"><i
+                      class="el-icon-plus"></i> 添加联系人</span>
+                </div>
+                <div v-if="contactAddFlag" class="case-detail-des flex-column mb-16">
+                  <div class="flex-row justify-content-between">
+                    <div class="flex-row mb-8">
+                      <a class="f16" style="width: 130px;">
+                        <el-input v-model.trim="contactAddObj.Name"
+                                  clearable placeholder="请输入姓名" size="small">
+                        </el-input>
+                      </a>
+                      <a style="width: 140px;margin-left: 5px">
+                        <el-select v-model="contactAddObj.relation"
+                                   placeholder="与债务人关系" size="small"
+                                   class="width100">
+                          <el-option
+                              v-for="(item,index) in relationOptions"
+                              :key="index"
+                              :label="item.label"
+                              :value="item.value">
+                          </el-option>
+                        </el-select>
+                      </a>
                     </div>
-                    <!-- 案件文书 -->
-                    <div v-if="rightActive == 2" class="case-office-record">
-                        <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8">
-                            <span class="width120px f-weight500">文书类型</span>
-                            <span class="width200px f-weight500">文书</span>
-                            <span class="width120px f-weight500">是否签章</span>
-                            <span class="width120px f-weight500">是否完成签字</span>
-                            <span class="width200px f-weight500">签字人</span>
-                            <span class="width180px f-weight500">操作</span>
-                        </div>
-                        <el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'"> 
-                            <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
-                                <span class="width120px">调解申请书</span>
-                                <span class="width200px">dsadasdsadada.pdf</span>
-                                <span class="width120px">未签章</span>
-                                <span class="width120px">未签字</span>
-                                <span class="width200px">--</span>
-                                <span class="width180px flex-row">
+                    <div class="flex-row">
+                      <a class="cursor-pointer pt-6">添加</a>
+                      <a class="cursor-pointer ml-8 pt-6" @click="contactAddFlag = false;contactAddObj = {}">取消</a>
+                    </div>
+                  </div>
+                  <div class="flex-row">
+                    <a style="width: 180px;">
+                      <el-input v-model.trim="contactAddObj.Phone" size="small"
+                                clearable placeholder="请输入手机号码" maxlength="11">
+                      </el-input>
+                    </a>
+                  </div>
+                </div>
+
+                <div class="case-detail-des flex-column mb-16">
+                  <div class="flex-row justify-content-between">
+                    <div v-if="!contactUpdate" class="flex-row mb-8">
+                      <a class="f16">张三</a>
+                      <div class="case-lable">
+                        <a class="case-status0">本人</a>
+                        <a class="case-status1">空号</a>
+                      </div>
+                    </div>
+                    <div v-if="contactUpdate" class="flex-row mb-8">
+                      <a class="f16" style="width: 130px;">
+                        <el-input v-model.trim="contactObj.Name"
+                                  clearable placeholder="请输入姓名" size="small">
+                        </el-input>
+                      </a>
+                      <a style="width: 140px;margin-left: 5px">
+                        <el-select v-model="contactObj.relation"
+                                   placeholder="请选择与债务人关系" size="small"
+                                   class="width100">
+                          <el-option
+                              v-for="(item,index) in relationOptions"
+                              :key="index"
+                              :label="item.label"
+                              :value="item.value">
+                          </el-option>
+                        </el-select>
+                      </a>
+                    </div>
+                    <div class="flex-row">
+                      <a v-if="contactUpdate" class="cursor-pointer pt-6">保存</a>
+                      <a v-if="contactUpdate" @click="contactUpdate = false" class="cursor-pointer ml-8 pt-6">取消</a>
+                      <a v-if="!contactUpdate" @click="contactUpdate = true" class="cursor-pointer">编辑</a>
+                      <a v-if="!contactUpdate" class="cursor-pointer ml-8">删除</a>
+                    </div>
+                  </div>
+                  <div v-if="!contactUpdate">
+                    <a>手机号码:</a><a class="ml-8">13333333333</a>
+                  </div>
+                  <div v-if="contactUpdate" class="flex-row">
+                    <a style="width: 180px;">
+                      <el-input v-model.trim="contactObj.Phone" size="small"
+                                clearable placeholder="请输入手机号码" maxlength="11">
+                      </el-input>
+                    </a>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 案件材料 -->
+              <div v-if="leftActive == 3" class="case-materials-person">
+                <div class="mb-16 flex-row justify-content-between">
+                  <span class="f-weight500 f18">案件材料</span>
+                  <span class="cursor-pointer"><i class="el-icon-plus"></i> 上传案件材料</span>
+                </div>
+                <div class="case-detail-des flex-column mb-16">
+                  <div class="background-color-F5F5F5 p-16 flex-row border-radius-8">
+                    <a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')"/></a>
+                    <div class="flex-column">
+                      <a class="mt-8 f-weight500">起诉状</a>
+                      <a class="color-86909C">张三 2024-09-09</a>
+                    </div>
+                  </div>
+                  <div class="color-86909C mt-8">
+                    <a class="mr-16 ml-16 cursor-pointer"><i class="el-icon-view"></i>预览</a>
+                    <a class="mr-16 cursor-pointer"><i class="el-icon-delete"></i>删除</a>
+                    <a class="mr-16 cursor-pointer"><i class="el-icon-download"></i>下载</a>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 案件文书 -->
+              <div v-if="leftActive == 4" class="case-office-person">
+                <div class="mb-16 flex-row justify-content-between">
+                  <span class="f-weight500 f18">案件文书</span>
+                  <span class="cursor-pointer"><i class="el-icon-tickets"></i> 文书生成</span>
+                </div>
+                <div class="case-detail-des flex-column mb-16">
+                  <div class="background-color-F5F5F5 p-16 flex-row border-radius-8">
+                    <a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')"/></a>
+                    <div class="flex-column" style="padding-top:2px">
+                      <a class="f-weight500">调解申请书</a>
+                      <a class="color-86909C f12">未签字</a>
+                      <a class="color-86909C f12">--</a>
+                    </div>
+                  </div>
+                  <div class="color-86909C mt-8">
+                    <a class="mr-16 ml-16 cursor-pointer"><i class="el-icon-view"></i>预览</a>
+                    <a class="mr-16 cursor-pointer"><i class="el-icon-download"></i>下载模板</a>
+                    <a class="mr-16 cursor-pointer"><i class="el-icon-upload2"></i>上传文书</a>
+                    <a class="mr-16 cursor-pointer"><i class="el-icon-tickets"></i>文书生成</a>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 还款计划 -->
+              <div v-if="leftActive == 5" class="case-repayment-schedule">
+                <RepaymentSchedule :eventDialog.sync="eventDialog"/>
+              </div>
+              <!-- 还款凭证 -->
+              <div v-if="leftActive == 6" class="case-repayment-certificate">
+                <RepaymentCertificate :eventDialog.sync="eventDialog"/>
+              </div>
+
+            </el-scrollbar>
+
+          </div>
+        </div>
+        <!-- 右边 -->
+        <div class="layout-center-right-wrap">
+          <!-- 沟通记录 -->
+          <div v-if="rightActive == 1" class="case-communication-record flex-column">
+            <div class="flex-row justify-content-between">
+              <span class="btn-communication background-color-fff f-weight500"><i class="el-icon-plus"></i>新增沟通记录</span>
+              <div>
+                <span class="btn-communication"><i class="el-icon-refresh"></i>刷新</span>
+                <span class="btn-communication">已视频1</span>
+                <span class="btn-communication">电话沟通2</span>
+              </div>
+            </div>
+            <el-scrollbar :style="'height:'+`${CommunicationcontentHeight}`+'px'">
+              <div class="flex-column case-communication-cont background-color-fff">
+                <div class="flex-row justify-content-between">
+                  <div>
+                    <span class="f16 f-weight500">张三 发起电话沟通</span> <span>2023-09-09 12:12:12</span>
+                  </div>
+                  <span class="btn-communication border-E5E6EB"><i class="el-icon-edit-outline"></i> 编辑沟通记录</span>
+                </div>
+                <div class="case-lable">
+                  <a class="case-status0">半失联客户</a><a class="case-status0">半失联客户</a>
+                </div>
+                <div class="flex-row justify-content-between mt-16 background-color-F5F5F5 p-16 f16">
+                  <div>
+                    <span>被申请人</span>
+                    <span class="ml-8">李四</span>
+                    <span class="ml-8">1388888888888</span>
+                  </div>
+                  <div>
+                    <span>通话44秒</span>
+                    <span class="ml-32 cursor-pointer"><i class="el-icon-video-play"></i> 播放录音</span>
+                  </div>
+                </div>
+                <div class="flex-row pt-16">
+                  <span>沟通备注：</span>
+                  <span>李四</span>
+                </div>
+              </div>
+              <div class="flex-column case-communication-cont background-color-fff">
+                <div class="flex-row justify-content-between">
+                  <div>
+                    <span class="f16 f-weight500">张三 发起电话沟通</span> <span>2023-09-09 12:12:12</span>
+                  </div>
+                  <span class="btn-communication border-E5E6EB"><i class="el-icon-edit-outline"></i> 编辑沟通记录</span>
+                </div>
+                <div class="case-lable">
+                  <a class="case-status0">半失联客户</a><a class="case-status0">半失联客户</a>
+                </div>
+                <div class="flex-row justify-content-between mt-16 background-color-F5F5F5 p-16 f16">
+                  <div>
+                    <span>被申请人</span>
+                    <span class="ml-8">李四</span>
+                    <span class="ml-8">1388888888888</span>
+                  </div>
+                  <div>
+                    <span>通话44秒</span>
+                    <span class="ml-32 cursor-pointer"><i class="el-icon-video-play"></i> 播放录音</span>
+                  </div>
+                </div>
+                <div class="flex-row pt-16">
+                  <span>沟通备注：</span>
+                  <span>李四</span>
+                </div>
+              </div>
+            </el-scrollbar>
+          </div>
+          <!-- 案件文书 -->
+          <div v-if="rightActive == 2" class="case-office-record">
+            <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8">
+              <span class="width120px f-weight500">文书类型</span>
+              <span class="width200px f-weight500">文书</span>
+              <span class="width120px f-weight500">是否签章</span>
+              <span class="width120px f-weight500">是否完成签字</span>
+              <span class="width200px f-weight500">签字人</span>
+              <span class="width180px f-weight500">操作</span>
+            </div>
+            <el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'">
+              <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
+                <span class="width120px">调解申请书</span>
+                <span class="width200px">dsadasdsadada.pdf</span>
+                <span class="width120px">未签章</span>
+                <span class="width120px">未签字</span>
+                <span class="width200px">--</span>
+                <span class="width180px flex-row">
                                     <a>预览</a>
                                     <a>下载模板</a>
                                     <a>上传</a>
                                     <a>文书生成</a>
                                 </span>
-                            </div>
-                            
-                        </el-scrollbar>
-                    </div>
-                    <!-- 案件材料 -->
-                    <div v-if="rightActive == 3" class="case-materials-record">
-                        <div class="flex-row justify-content-between">
-                            <span class="btn-communication background-color-fff f-weight500 p-8 border-radius-8 cursor-pointer">
-                                <i class="el-icon-plus"></i>上传案件材料
-                            </span>
-                        </div>
-                        <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
-                            <span class="width120px f-weight500">材料类型</span>
-                            <span class="width200px f-weight500">文件</span>
-                            <span class="width120px f-weight500">操作人</span>
-                            <span class="width120px f-weight500">操作时间</span>
-                            <span class="width180px f-weight500">操作</span>
-                        </div>
-                        <el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'"> 
-                            <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
-                                <span class="width120px">起诉状</span>
-                                <span class="width200px">dsadasdsadada.pdf</span>
-                                <span class="width120px">张三</span>
-                                <span class="width120px">2024-09-09 12:12:12</span>
-                                <span class="width180px flex-row">
+              </div>
+
+            </el-scrollbar>
+          </div>
+          <!-- 案件材料 -->
+          <div v-if="rightActive == 3" class="case-materials-record">
+            <div class="flex-row justify-content-between">
+              <span class="btn-communication background-color-fff f-weight500 p-8 border-radius-8 cursor-pointer"
+                  @click="caseFileVisible={caseId:caseId}">
+                  <i class="el-icon-plus"></i>上传案件材料
+              </span>
+            </div>
+            <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
+              <span class="width120px f-weight500">材料类型</span>
+              <span class="width200px f-weight500">文件</span>
+              <span class="width120px f-weight500">操作人</span>
+              <span class="width120px f-weight500">操作时间</span>
+              <span class="width180px f-weight500">操作</span>
+            </div>
+            <el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'">
+              <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
+                <span class="width120px">起诉状</span>
+                <span class="width200px">dsadasdsadada.pdf</span>
+                <span class="width120px">张三</span>
+                <span class="width120px">2024-09-09 12:12:12</span>
+                <span class="width180px flex-row">
                                     <a>预览</a>
                                     <a>删除</a>
                                     <a>文件下载</a>
                                 </span>
-                            </div>
-                            
-                        </el-scrollbar>
-                    </div>
-                    <!-- 案件日志 -->
-                    <div v-if="rightActive == 5" class="case-log-record">
-                        
-                        <div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-8 p-32 width100" >
-                            <el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'">
-                                <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>
-                            </el-scrollbar>
-                        </div>
-                    </div>
-                </div>
+              </div>
+
+            </el-scrollbar>
+          </div>
+          <!-- 案件日志 -->
+          <div v-if="rightActive == 5" class="case-log-record">
+
+            <div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-8 p-32 width100">
+              <el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'">
+                <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>
+              </el-scrollbar>
             </div>
-            
+          </div>
         </div>
-        <!-- 视频预约 -->
-        <VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog" />
+      </div>
+
     </div>
+    <!-- 视频预约 -->
+    <VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog"/>
+    <!-- 案件材料上传 -->
+    <caseFileDialog v-if="caseFileVisible" :eventDialog.sync="caseFileVisible"/>
+  </div>
 
 </template>
 <script>
 import api from "@/services/caseManagement";
-    export default {
-        components: {
-            uploadFile: () => import('@/components/uploadFile.vue'),//上传
-            RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
-            RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
-            VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约
+import caseMaterial from "@/services/caseMaterial";
+export default {
+  components: {
+    uploadFile: () => import('@/components/uploadFile.vue'),//上传
+    RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
+    RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
+    VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约
+    caseFileDialog: () => import('./caseFileDialog'),//案件材料上传
+  },
+  data() {
+    return {
+      VideoDialog: null,
+      eventDialog: {caseId: this.$route.query.caseId},
+      caseFileVisible: null,
+      leftActive: 1,
+      rightActive: 1,
+      fileList: [],
+      mediationRecord: [],//调解记录
+      baseInfo: {},//基本信息
+      obligorInfo: [],//债务人信息
+      caseId: '',//案件id
+      // 联系人
+      contactAddObj: {},
+      contactAddFlag: false,
+      contactObj: {},
+      contactUpdate: false,
+      relationOptions: [{label: '本人', value: '本人'}, {label: '父母', value: '父母'}, {label: '配偶', value: '配偶'},
+        {label: '子女', value: '子女'}, {label: '其他', value: '其他'}, {label: '朋友', value: '朋友'}, {
+          label: '兄弟',
+          value: '兄弟'
         },
-        data() {
-            return {
-                VideoDialog:null,
-                eventDialog:{caseId:this.$route.query.caseId},
-                leftActive:1,
-                rightActive:1,
-                fileList:[],
-                mediationRecord:[],//调解记录
-                baseInfo:{},//基本信息
-                obligorInfo:[],//债务人信息
-                caseId:'',//案件id
-                // 联系人
-                contactAddObj:{},
-                contactAddFlag:false,
-                contactObj:{},
-                contactUpdate:false,
-                relationOptions:[{label:'本人',value:'本人'},{label:'父母',value:'父母'},{label:'配偶',value:'配偶'},
-                {label:'子女',value:'子女'},{label:'其他',value:'其他'},{label:'朋友',value:'朋友'},{label:'兄弟',value:'兄弟'},
-                {label:'同事',value:'同事'},{label:'同学',value:'同学'}],
-                // 还款计划
-                repaymentObj:{
-                    type:'ALL'
-                },
-                RepaymentOptions:[{label:'一次性还款',value:'ALL'},{label:'全部分期',value:'STAGES'},{label:'部分先还加分期',value:'MIX'},{label:'其他',value:'OTHER'}],
-                rulesClientRepayment:{
-                    type: [
-                        { required: true, message: '请选择还款方式', trigger: 'change',},
-                    ], 
-                    totalAmount: [
-                        { required: true, message: '请输入还款金额', trigger: 'change',},
-                        { pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']}
-                    ], 
-                    paybackDate: [
-                        { required: true, message: '请选择还款截止日期', trigger: 'change',},
-                    ], 
-                    stagesDay: [
-                        { required: true, message: '请选择每期还款日期', trigger: 'change',},
-                    ], 
-                    partAmount: [
-                        { required: true, message: '请输入分期前偿还金额	', trigger: 'change',},
-                        { pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']}
-                    ], 
-                    partDate: [
-                        { required: true, message: '请选择分期前偿还日期', trigger: 'change',},
-                    ], 
-                    stagesNum: [
-                        { required: true, message: '请输入分期期数', trigger: 'change',},
-                        { pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
-                    ], 
-                },
-               
-            };
-        },
-        computed:{
-            // 左侧
-            leftContentHeight(){
-                let oh = document.documentElement.clientHeight;
-                return oh-100
-            },
-
-            // 中间的内容高度
-            centerContentHeight(){
-                let oh = document.documentElement.clientHeight;
-                return oh-56-112-65-48
-            },
-            // 获取右侧滚动高度
-            rightContentHeight(){
-                let oh = document.documentElement.clientHeight;
-                return oh-56-56-65-20
-            },
-            // 获取抽屉drawer的内容高度
-            OfficecontentHeight(){
-                let oh = document.documentElement.clientHeight;
-                return oh-185
-                
-            } ,
-            CommunicationcontentHeight(){
-                let oh = document.documentElement.clientHeight;
-                return oh-150
-            } ,
-            
-        },
-        async created() {
-            this.caseId = this.$route.query.caseId
-            await this.getCaseInfoById();//获取详情
-            
-        },
-        beforeDestroy() {
-            // if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
-            //     clearInterval(this.timer); //关闭
-            // }
-        },
-        methods: {
-            
-           
-            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 = caseFileEntityList
-
-                    }
-                    
-                })
-            },
-            // 获取上一件案件
-            getFrontCaseById(){
-                if(!this.$clickThrottle()) { return }//防止重复点击 
-                api.getFrontCaseById({id:this.caseId}).then(res => {
-                     if(!res.code){
-                        // let caseChangeData = res
-                        this.detailData(res)
-                     }
-                })
-            },
-            // 获取下一件案件
-            getNextCaseById(){
-                if(!this.$clickThrottle()) { return }//防止重复点击 
-                api.getNextCaseById({id:this.caseId}).then(res => {
-                     if(!res.code){
-                        this.detailData(res)
-                     }
-                })
-            },
-            // 下载调解模板
-            handleDownloadMediationTemplate(){
-                if(!this.$clickThrottle()) { return }//防止重复点击 
-                // console.log('调解模板url',templateUrl)
-                if(this.templateUrl){
-                    this.handlePreview({previewUrl:"/mediate/minio/preview/"+this.templateUrl,url:this.templateUrl})
-                }else{
-                    this.$message({message: '当前案件未存在调解模板', type: "warning",customClass:'messageZindex'})
-                }
-                
-            },
-            async handlePreview(item) {
-                try {
-                    let res = await this.$fetchApi.getMinioToken({objectName: item.url})
-                    window.open(`${item.previewUrl}?token=${res}`, '_target')
-                }catch (e) {
-                    this.$message.error(e.msg || e)
-                }
-            },
-            handleSubmitRepayment(){
-                this.$refs.ruleFormRepayment.validate((valid) => {
-                    if (valid){
-                        console.log(1111)
-                        
-                    }
-                })
-            },
-            handleBack(){
-                // this.$route.query.sourcePage == 'mediationManagement'
-                this.$router.push('/mediation-management')
-                
-            },
-            
-           
-
+        {label: '同事', value: '同事'}, {label: '同学', value: '同学'}],
+      // 还款计划
+      repaymentObj: {
+        type: 'ALL'
+      },
+      RepaymentOptions: [{label: '一次性还款', value: 'ALL'}, {
+        label: '全部分期',
+        value: 'STAGES'
+      }, {label: '部分先还加分期', value: 'MIX'}, {label: '其他', value: 'OTHER'}],
+      rulesClientRepayment: {
+        type: [
+          {required: true, message: '请选择还款方式', trigger: 'change',},
+        ],
+        totalAmount: [
+          {required: true, message: '请输入还款金额', trigger: 'change',},
+          {
+            pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
+            message: '请输入2位小数金额',
+            trigger: ['blur', 'change']
+          }
+        ],
+        paybackDate: [
+          {required: true, message: '请选择还款截止日期', trigger: 'change',},
+        ],
+        stagesDay: [
+          {required: true, message: '请选择每期还款日期', trigger: 'change',},
+        ],
+        partAmount: [
+          {required: true, message: '请输入分期前偿还金额	', trigger: 'change',},
+          {
+            pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
+            message: '请输入2位小数金额',
+            trigger: ['blur', 'change']
+          }
+        ],
+        partDate: [
+          {required: true, message: '请选择分期前偿还日期', trigger: 'change',},
+        ],
+        stagesNum: [
+          {required: true, message: '请输入分期期数', trigger: 'change',},
+          {pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
+        ],
+      },
 
+    };
+  },
+  computed: {
+    // 左侧
+    leftContentHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 100
+    },
+    // 中间的内容高度
+    centerContentHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 56 - 112 - 65 - 48
+    },
+    // 获取右侧滚动高度
+    rightContentHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 56 - 56 - 65 - 20
+    },
+    // 获取抽屉drawer的内容高度
+    OfficecontentHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 185
+    },
+    CommunicationcontentHeight() {
+      let oh = document.documentElement.clientHeight;
+      return oh - 150
+    },
+  },
+  async created() {
+    this.caseId = this.$route.query.caseId
+    await this.getCaseInfoById();//获取详情
 
+  },
+  beforeDestroy() {
+    // if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
+    //     clearInterval(this.timer); //关闭
+    // }
+  },
+  methods: {
+    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 = caseFileEntityList
 
         }
-    };
+
+      })
+    },
+    // 获取上一件案件
+    getFrontCaseById() {
+      if (!this.$clickThrottle()) {
+        return
+      }//防止重复点击
+      api.getFrontCaseById({id: this.caseId}).then(res => {
+        if (!res.code) {
+          // let caseChangeData = res
+          this.detailData(res)
+        }
+      })
+    },
+    // 获取下一件案件
+    getNextCaseById() {
+      if (!this.$clickThrottle()) {
+        return
+      }//防止重复点击
+      api.getNextCaseById({id: this.caseId}).then(res => {
+        if (!res.code) {
+          this.detailData(res)
+        }
+      })
+    },
+    // 下载调解模板
+    handleDownloadMediationTemplate() {
+      if (!this.$clickThrottle()) {
+        return
+      }//防止重复点击
+      // console.log('调解模板url',templateUrl)
+      if (this.templateUrl) {
+        this.handlePreview({previewUrl: "/mediate/minio/preview/" + this.templateUrl, url: this.templateUrl})
+      } else {
+        this.$message({message: '当前案件未存在调解模板', type: "warning", customClass: 'messageZindex'})
+      }
+
+    },
+    async handlePreview(item) {
+      try {
+        let res = await this.$fetchApi.getMinioToken({objectName: item.url})
+        window.open(`${item.previewUrl}?token=${res}`, '_target')
+      } catch (e) {
+        this.$message.error(e.msg || e)
+      }
+    },
+    handleSubmitRepayment() {
+      this.$refs.ruleFormRepayment.validate((valid) => {
+        if (valid) {
+          console.log(1111)
+
+        }
+      })
+    },
+    handleBack() {
+      // this.$route.query.sourcePage == 'mediationManagement'
+      this.$router.push('/mediation-management')
+    },
+
+  }
+};
 </script>
 <style lang="scss" scoped>
-.layout-center-wrap{
+.layout-center-wrap {
+  height: 100%;
+  font-size: 14px;
+
+  .layout-center-top-wrap {
+    font-size: 14px;
+    padding: 10px;
+    border-bottom: solid 1px #E5E6EB;
+
+    .ipphoneimg {
+      background: url('~@/assets/image/mediate/m-phone.png') no-repeat;
+      background-size: 24px;
+      background-position: 5px 5px;
+      width: 100px;
+      height: 35px;
+      padding: 7px 5px 5px 35px;
+    }
+
+    .smsimg {
+      background: url('~@/assets/image/mediate/m-sms.png') no-repeat;
+      background-size: 24px;
+      background-position: 5px 5px;
+      width: 110px;
+      height: 35px;
+      padding: 7px 5px 5px 35px;
+    }
+
+    .videoimg {
+      background: url('~@/assets/image/mediate/m-video.png') no-repeat;
+      background-size: 24px;
+      background-position: 5px 5px;
+      width: 110px;
+      height: 35px;
+      padding: 7px 5px 5px 35px;
+    }
+
+    .top-case-btn-left {
+      padding-top: 5px;
+
+      .el-button {
+        height: 35px;
+        padding: 10px 20px;
+        background-color: #F2F3F5;
+      }
+
+      span {
+        margin-left: 20px;
+        cursor: pointer;
+      }
+
+      .case-send-btn {
+        border: solid 1px #E5E6EB;
+        height: 35px;
+        padding: 7px 10px 0px 10px;
+        border-radius: 8px;
+
+      }
+    }
+
+    .top-case-btn-right {
+      background-color: #F2F3F5;
+      padding: 7px 20px;
+      border-radius: 8px;
+
+      span {
+
+        padding: 5px 30px;
+        border-radius: 8px;
+        margin: 0 3px;
+        font-weight: 500;
+        cursor: pointer;
+      }
+
+      .active {
+        background-color: #fff;
+      }
+
+      span:hover {
+        background-color: #fff;
+      }
+    }
+
+  }
+
+  .layout-center-center-wrap {
+
     height: 100%;
-    font-size:14px;
-    .layout-center-top-wrap{
-        font-size: 14px;
-        padding: 10px;
-        border-bottom: solid 1px #E5E6EB;
-        .ipphoneimg{
-            background: url('~@/assets/image/mediate/m-phone.png') no-repeat ;
-            background-size:24px  ;
-            background-position:5px 5px ;
-            width: 100px;
-            height: 35px;
-            padding:7px 5px 5px 35px;
-        }
-        .smsimg{
-            background: url('~@/assets/image/mediate/m-sms.png') no-repeat ;
-            background-size:24px  ;
-            background-position:5px 5px ;
-            width: 110px;
-            height: 35px;
-            padding:7px 5px 5px 35px;
-        }
-        .videoimg{
-            background: url('~@/assets/image/mediate/m-video.png') no-repeat ;
-            background-size:24px  ;
-            background-position:5px 5px ;
-            width: 110px;
-            height: 35px;
-            padding:7px 5px 5px 35px;
-        }
-        .top-case-btn-left{
-            padding-top: 5px;
-            .el-button{
-                height:35px;
-                padding:10px 20px;
-                background-color:#F2F3F5 ;
-            }
-            span{
-                margin-left: 20px;
-                cursor: pointer;
-            }
-            .case-send-btn{
-                border:solid 1px #E5E6EB;
-                height: 35px;
-                padding: 7px 10px 0px 10px;
-                border-radius: 8px;
-                
-            }
-        }
-        .top-case-btn-right{
-            background-color:#F2F3F5 ;
-            padding: 7px 20px;
-            border-radius: 8px;
-            span{
-                
-                padding: 5px 30px;
-                border-radius: 8px;
-                margin: 0 3px;
-                font-weight: 500;
-                cursor: pointer;
-            }
 
-            .active{
-                background-color: #fff;
-            }
-            span:hover{
-                background-color: #fff;
-            }
-        }
-        
+    // .background-color-fff{
+    //     background-color: #fff;
+    // }
+    .background-color-F5F5F5 {
+      background-color: #F5F5F5;
     }
 
-    .layout-center-center-wrap{
+    .border-E5E6EB {
+      border: solid 1px #E5E6EB;
+    }
 
+    .width120px {
+      width: 140px;
+    }
+
+    .width180px {
+      width: 220px;
+    }
+
+    .width200px {
+      width: calc(50% - 320px);
+    }
+
+    .layout-center-left-wrap {
+      background: url('~@/assets/image/mediate/m-left-bg.png') no-repeat;
+      background-size: 100% 100%;
+      width: 540px;
+      height: 100%;
+
+      .layout-center-left1-wrap {
+        width: 80px;
         height: 100%;
-        
-        // .background-color-fff{
-        //     background-color: #fff;
-        // }
-        .background-color-F5F5F5{
-            background-color: #F5F5F5;
+        text-align: center;
+
+        .left-rbobot {
+          width: 100%;
+          height: 80px;
+          text-align: center;
+          margin: 30px 0 0 0;
+
+          img {
+            width: 64px;
+          }
         }
-        .border-E5E6EB{border:solid 1px #E5E6EB;}
 
-        .width120px{width: 140px;}
-        .width180px{width: 220px;}
-        .width200px{width: calc(50% - 320px);}
+        .separation {
+          width: 50px;
+          margin: 15px 0 0 15px;
+          border-bottom: solid 1px #dedfe4;
+        }
 
-        .layout-center-left-wrap{
-            background: url('~@/assets/image/mediate/m-left-bg.png') no-repeat ;
-            background-size: 100% 100%;
-            width: 540px;
-            height: 100%;
+        .left-img-info {
+          margin-top: 15px;
+          width: 100%;
+          font-size: 12px;
+          cursor: pointer;
 
-            .layout-center-left1-wrap{
-                width: 80px;
-                height: 100%;
-                text-align: center;
-                .left-rbobot{
-                    width: 100%;
-                    height: 80px;
-                    text-align: center;
-                    margin: 30px 0 0 0;
-                    img{width:64px;}
-                }
-                .separation{
-                    width: 50px;
-                    margin:15px 0 0 15px;
-                    border-bottom: solid 1px #dedfe4;
-                }
-                .left-img-info{
-                    margin-top: 15px;
-                    width: 100%;
-                    font-size: 12px;
-                    cursor: pointer;
-                    img{width: 48px;margin-left: 15px;}
-                    a{margin-top: 5px;}
-                }
+          img {
+            width: 48px;
+            margin-left: 15px;
+          }
 
-                .left-img-info.active {
-                    background: url('~@/assets/image/mediate/m-triangle.png') no-repeat ;
-                    background-size: 15px 30px;
-                    background-position: 68px 10px;
-                }
-                .left-img-info:hover {
-                    background: url('~@/assets/image/mediate/m-triangle.png') no-repeat ;
-                    background-size: 15px 30px;
-                    background-position: 68px 10px;
-                }
+          a {
+            margin-top: 5px;
+          }
+        }
+
+        .left-img-info.active {
+          background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
+          background-size: 15px 30px;
+          background-position: 68px 10px;
+        }
+
+        .left-img-info:hover {
+          background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
+          background-size: 15px 30px;
+          background-position: 68px 10px;
+        }
+      }
+
+      .layout-center-left2-wrap {
+        width: 460px;
+        height: 100%;
+        background-color: #fff;
+        border-radius: 25px 0px 0px 25px;
+        padding: 20px 30px;
+
+        .case-detail-des {
+          border: solid 1px #E5E6EB;
+          padding: 10px 15px;
+          border-radius: 8px;
+          font-size: 14px;
+
+          span {
+            margin: 3px 0;
+            padding: 3px 10px;
+            // a:first-child{width: 120px;display: inline-block;text-align: right;}
+          }
+
+          span:nth-child(even) {
+            background-color: #F7F8FA;
+          }
+
+          .case-img {
+            width: 50px;
+            height: 50px;
+            text-align: center;
+            line-height: 50px;
+
+            img {
+              max-width: 50px;
+              max-height: 50px;
             }
-            .layout-center-left2-wrap{
-                width: 460px;
-                height: 100%;
-                background-color: #fff;
-                border-radius: 25px 0px 0px 25px;
-                padding: 20px 30px;
-                .case-detail-des{
-                    border:solid 1px #E5E6EB;
-                    padding: 10px 15px;
-                    border-radius: 8px;
-                    font-size: 14px;
-                    span{
-                        margin:3px 0;
-                        padding: 3px 10px;
-                        // a:first-child{width: 120px;display: inline-block;text-align: right;}
-                    }
-                    span:nth-child(even) {
-                        background-color: #F7F8FA;
-                    }
-                    .case-img{
-                        width: 50px;
-                        height: 50px;
-                        text-align: center;
-                        line-height: 50px;
-                        img{
-                            max-width: 50px;
-                            max-height: 50px;
-                        }
-                    }
-                    
-                }
-                .case-materials-person{
-                    .case-detail-des{
-                        i{margin-right: 4px;}
-                    }
-                }
-                .case-office-person{
-                    
-                    .case-detail-des{
-                        .case-img{
-                            width: 55px;
-                            height: 55px;
-                            text-align: center;
-                            line-height: 55px;
-                            img{
-                                max-width: 55px;
-                                max-height: 55px;
-                            }
-                        }
-                        i{margin-right: 4px;}
-                    }
-                }
-                
-            }
-
+          }
 
         }
 
-        .layout-center-right-wrap{
-            background: url('~@/assets/image/mediate/m-right-bg.png') no-repeat ;
-            background-size: 100% 100%;
-            width: calc(100% - 540px);
-            height: 100%;
-            padding: 30px;
-
-            .case-communication-record{
-                .btn-communication{
-                    padding:5px 15px;
-                    border-radius: 8px;
-                    cursor: pointer;
-                }
-                .case-communication-cont{
-                    // background: ;
-                    padding: 20px;
-                    border-radius: 8px;
-                    margin-top: 15px;
-                }
+        .case-materials-person {
+          .case-detail-des {
+            i {
+              margin-right: 4px;
             }
-            
-
-            .case-office-record,.case-materials-record{
-                
-                span a{color: #C66A5B; margin-right: 13px; cursor: pointer;}
-                span a:last-child{margin-right: 0;}
-            }
-
-            
-
+          }
         }
 
+        .case-office-person {
+
+          .case-detail-des {
+            .case-img {
+              width: 55px;
+              height: 55px;
+              text-align: center;
+              line-height: 55px;
+
+              img {
+                max-width: 55px;
+                max-height: 55px;
+              }
+            }
+
+            i {
+              margin-right: 4px;
+            }
+          }
+        }
+
+      }
+
+
     }
-    
-    
+
+    .layout-center-right-wrap {
+      background: url('~@/assets/image/mediate/m-right-bg.png') no-repeat;
+      background-size: 100% 100%;
+      width: calc(100% - 540px);
+      height: 100%;
+      padding: 30px;
+
+      .case-communication-record {
+        .btn-communication {
+          padding: 5px 15px;
+          border-radius: 8px;
+          cursor: pointer;
+        }
+
+        .case-communication-cont {
+          // background: ;
+          padding: 20px;
+          border-radius: 8px;
+          margin-top: 15px;
+        }
+      }
+
+
+      .case-office-record, .case-materials-record {
+
+        span a {
+          color: #C66A5B;
+          margin-right: 13px;
+          cursor: pointer;
+        }
+
+        span a:last-child {
+          margin-right: 0;
+        }
+      }
+
+
+    }
+
+  }
+
+
 }
 
 
diff --git a/src/pages/mediation-page/components/VideoReservationDialog.vue b/src/pages/mediation-page/components/VideoReservationDialog.vue
index dbe8c3e..a86f27a 100644
--- a/src/pages/mediation-page/components/VideoReservationDialog.vue
+++ b/src/pages/mediation-page/components/VideoReservationDialog.vue
@@ -58,19 +58,35 @@
                 </el-form-item>
               </el-col>
               <el-col :span="24" v-for="(item,index) in repaymentObj.members" :key="index">
-                <el-form-item label="" prop="" label-width="0">
-                  <el-row :gutter="10">
+                <el-form-item label="" prop="" label-width="0" style="margin-bottom: 10px;">
+                  <el-row :gutter="20" style="background-color: rgb(245, 246, 250);margin-bottom: 5px;">
+                    <el-col :span="7">
+                      <div>身份证</div>
+                    </el-col>
                     <el-col :span="7">
                       <div>姓名</div>
                     </el-col>
                     <el-col :span="7">
                       <div>电话</div>
                     </el-col>
-                    <el-col :span="8">
-                      <div>身份证</div>
-                    </el-col>
                   </el-row>
-                  <el-row :gutter="10">
+                  <el-row :gutter="20">
+                    <el-col :span="7">
+                      <el-form-item
+                          :prop="`members[${index}].identity`"
+                          :rules="[
+                          { required: true, message: '请选择', trigger: ['blur','change'],},
+                          ]">
+                        <el-select v-model="item.identity" placeholder="请选择">
+                          <el-option
+                              v-for="(item,index) in identityOptions"
+                              :key="index"
+                              :label="item.label"
+                              :value="item.value">
+                          </el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
                     <el-col :span="7">
                       <el-form-item
                           :prop="`members[${index}].name`"
@@ -94,20 +110,7 @@
                         ></el-input>
                       </el-form-item>
                     </el-col>
-                    <el-col :span="8">
-                      <el-form-item
-                          :prop="`members[${index}].identity`"
-                          :rules="[
-                          { required: true, message: '请输入', trigger: ['blur','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
-                            v-model="item.identity"
-                            placeholder="请输入"
-                        ></el-input>
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="2">
+                    <el-col :span="3">
                       <div class="">
                         <el-button
                             icon="el-icon-delete"
@@ -170,6 +173,13 @@ export default {
         { label: '120分钟', value: 120 }
       ],
       litigantsOptions: [],
+      identityOptions: [
+        { label: '法官', value: '法官' },
+        { label: '调解专家', value: '调解专家' },
+        { label: '律师', value: '律师' },
+        { label: '民警', value: '民警' },
+        { label: '其他', value: '其他' }
+      ],
       repaymentObj: {
         litigants: [], //{name: xx, phone: xx, identity: xx}  当事人
         members: [], //{name: xx, phone: xx, identity: xx}  邀请人
@@ -211,7 +221,7 @@ export default {
       })
     },
     addForm() {
-      this.repaymentObj.members.push({name: '', phone: '', identity: ''})
+      this.repaymentObj.members.push({ identity: '', name: '', phone: ''})
     },
     deleteForm(index) {
       this.repaymentObj.members.splice(index, 1)
diff --git a/src/pages/mediation-page/components/caseFileDialog.vue b/src/pages/mediation-page/components/caseFileDialog.vue
new file mode 100644
index 0000000..b297ea6
--- /dev/null
+++ b/src/pages/mediation-page/components/caseFileDialog.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <el-dialog title="视频预约" :visible="true" width="500px" append-to-body :close-on-click-modal="false"
+               @close="handleClose">
+      <div class="dialog-content dialog-office-batch">
+        <div class="p-16 pr-40">
+          <el-form ref="ruleFormRepayment"
+                   :model="repaymentObj"
+                   :rules="rulesClientRule"
+                   label-width="100px">
+            <el-form-item label="材料分类:" prop="materialType">
+              <el-select v-model="repaymentObj.materialType" placeholder="请选择" class="width100">
+                <el-option
+                    v-for="(item,index) in materialTypeOptions"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="文件上传:" prop="url">
+              <upload-file :file-list="fileList" :max-count="1"
+                           :show-file-name="false"
+                           uploadName=""
+                           accept=".jpg,.png,.jpeg,.pdf,.docx"
+                           :span="6"
+                           :fileSize="50"
+                           @handleUploadFile="handleUploadFile">
+              </upload-file>
+            </el-form-item>
+            <el-form-item label="上传要求:">
+              <div style="line-height: 20px;padding-top: 10px">
+                <div>请知悉！</div>
+                <div>请上传图片或pdf或word格式材料，单个文件需要在0KB以上，50MB以内;文件名称中请勿包含换行符、空格、tab#&V:?"#*|&"<>%+'等特色字符。</div>
+                <div>文件名称不超过45个字</div>
+              </div>
+            </el-form-item>
+          </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 videoTelephone from "@/services/videoTelephone";
+import caseMaterial from "@/services/caseMaterial";
+export default {
+  components: {
+    uploadFile: () => import('@/components/uploadFile.vue'),//上传
+  },
+  props: {
+    eventDialog: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      materialTypeOptions: [
+        { label: '身份证件', value: 'IDENTITY' },
+        { label: '金融许可证', value: 'FINANCIAL_LICENSES' },
+        { label: '营业执照', value: 'BUSINESS_LICENSES' },
+        { label: '法定代表人身份证明', value: 'IDENTITY_LEGAL' },
+        { label: '起诉状', value: 'COMPLAINTS' },
+        { label: '证据清单', value: 'EVIDENCE' },
+        { label: '合约', value: 'CONTRACTS' },
+        { label: '申领表', value: 'APPLICATION_FORMS' },
+        { label: '交易明细', value: 'TRANSACTION_DETAILS' },
+        { label: '其他证据', value: 'OTHER' },
+      ],
+      repaymentObj: {
+        caseId: '',
+        materialType: '',
+        category: 'EVIDENTIAL',
+        name: '',
+        url: '',
+      },
+      rulesClientRule: {
+        materialType: [
+          {required: true, message: '请选择', trigger: 'change',},
+        ],
+        url: [
+          { required: true, message: '请上传', trigger: 'change',},
+        ],
+      },
+      fileList: [],
+    };
+  },
+  mounted() {
+    // console.log(1231)
+  },
+  methods: {
+    handleUploadFile(fileList){
+      // console.log('获取上传文件信息',fileList)
+      fileList = JSON.parse(JSON.stringify(fileList))
+      this.fileList = fileList.map((item,i) => {
+        return {
+          url: item.url,
+          fileName: item.fileName,
+          previewUrl:item.previewUrl,
+          objectName: item.objectName
+        }
+      })
+      this.repaymentObj.url = this.fileList.length?this.fileList[0].url : '';
+      this.repaymentObj.name = this.fileList.length?this.fileList[0].objectName : '';
+      console.log(this.repaymentObj, '---this.repaymentObj', this.fileList)
+    },
+    handleClose() {
+      this.$emit('update:eventDialog', null)
+    },
+    handleSubmit() {
+      if(!this.$clickThrottle()) { return }//防止重复点击
+      this.$refs.ruleFormRepayment.validate((valid) => {
+        if (valid) {
+          this.repaymentObj.caseId = this.eventDialog.caseId;
+          caseMaterial.addCaseFile(this.repaymentObj).then(res => {
+            // this.$parent.getDataList(1)
+            this.handleClose()
+            this.$message.success("操作成功");
+          })
+        }
+      })
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/services/caseMaterial.js b/src/services/caseMaterial.js
new file mode 100644
index 0000000..0fe3ffa
--- /dev/null
+++ b/src/services/caseMaterial.js
@@ -0,0 +1,26 @@
+import service from "./index";
+const api = '/mediate/cases/caseFile/'
+// caseMaterial
+const apiCaseMaterial = {
+    // 列表
+    getCaseFileList: data => {
+        return service.service.post(`${api}getCaseFileList`, data)
+    },
+    // 查询材料
+    getCaseFileById: data => {
+        return service.service.post(`${api}getCaseFileById`, data)
+    },
+    // 删除
+    deleteCaseFileById: data => {
+        return service.service.post(`${api}deleteCaseFileById`, data)
+    },
+    // 更新
+    updateCaseFileById: data => {
+        return service.service.post(`${api}updateCaseFileById`, data)
+    },
+    // 新增
+    addCaseFile: data => {
+        return service.service.post(`${api}addCaseFile`, data)
+    },
+}
+export default apiCaseMaterial;
\ No newline at end of file