tanghuan/mediate-manage-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改预约、材料上传部分

Browse Source
This commit is contained in:
tdg930622 2024-12-25 14:06:00 +08:00
parent ba1546b26b
commit 1f48de7a4d
5 changed files with 1054 additions and 803 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/uploadFile.vue
View File

@ -255,7 +255,8 @@
url: uploadFileRes.url, url: uploadFileRes.url,
fileSize: uploadFileRes.size, fileSize: uploadFileRes.size,
fileType: this.$util.getFileExtension(uploadFileRes.url), fileType: this.$util.getFileExtension(uploadFileRes.url),
fileName: uploadFileRes.objectName fileName: uploadFileRes.objectName,
objectName: uploadFileRes.fileName
}) })
this.$emit('handleUploadFile', fileList) this.$emit('handleUploadFile', fileList)

504
src/pages/mediation-page/components/LayoutContent.vue
View File

@ -30,31 +30,31 @@
<div class="layout-center-left-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 class="layout-center-left1-wrap flex-column justify-content-start">
<span class="left-rbobot"> <span class="left-rbobot">
<img src="../../../assets/image/mediate/m-info-robot.png" /> <img src="../../../assets/image/mediate/m-info-robot.png"/>
</span> </span>
<span class="separation"></span> <span class="separation"></span>
<span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @mouseenter="leftActive = 1"> <span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @mouseenter="leftActive = 1">
<img src="../../../assets/image/mediate/m-info1.png" /> <img src="../../../assets/image/mediate/m-info1.png"/>
<a>案件信息</a> <a>案件信息</a>
</span> </span>
<span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @mouseenter="leftActive = 2"> <span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @mouseenter="leftActive = 2">
<img src="../../../assets/image/mediate/m-info2.png" /> <img src="../../../assets/image/mediate/m-info2.png"/>
<a>联系人</a> <a>联系人</a>
</span> </span>
<span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @mouseenter="leftActive = 3"> <span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @mouseenter="leftActive = 3">
<img src="../../../assets/image/mediate/m-info3.png" /> <img src="../../../assets/image/mediate/m-info3.png"/>
<a>案件材料</a> <a>案件材料</a>
</span> </span>
<span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @mouseenter="leftActive = 4"> <span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @mouseenter="leftActive = 4">
<img src="../../../assets/image/mediate/m-info4.png" /> <img src="../../../assets/image/mediate/m-info4.png"/>
<a>案件文书</a> <a>案件文书</a>
</span> </span>
<span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @mouseenter="leftActive = 5"> <span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @mouseenter="leftActive = 5">
<img src="../../../assets/image/mediate/m-info5.png" /> <img src="../../../assets/image/mediate/m-info5.png"/>
<a>还款计划</a> <a>还款计划</a>
</span> </span>
<span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @mouseenter="leftActive = 6"> <span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @mouseenter="leftActive = 6">
<img src="../../../assets/image/mediate/m-info6.png" /> <img src="../../../assets/image/mediate/m-info6.png"/>
<a>还款凭证</a> <a>还款凭证</a>
</span> </span>
</div> </div>
@ -66,47 +66,53 @@
<div class="case-detail-label f-weight500 f18 mb-8">基本信息</div> <div class="case-detail-label f-weight500 f18 mb-8">基本信息</div>
<div class="case-detail-des flex-column"> <div class="case-detail-des flex-column">
<span><a>案件包名称：</a><a>河北幸福消费金融股份有限公司012341</a></span> <span><a>案件包名称：</a><a>河北幸福消费金融股份有限公司012341</a></span>
<span><a>委案机构：</a><a>{{baseInfo.financialOrgName}}</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> <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 v-for="(item,index) in baseInfo.debtorEntityList"
<span><a>债务人手机号码：</a><a>{{ debtorEntityCardNo(baseInfo.debtorEntityList,25).phone }} {{ baseInfo.debtorEntityList.length > 25 ? '...':'' }}</a></span> :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></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> {{
<span><a>户籍地址：</a><a v-for="(item,index) in baseInfo.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a></span> debtorEntityCardNo(baseInfo.debtorEntityList, 25).cardNo
<span><a>案件编号：</a><a>{{baseInfo.caseNo}}</a></span> }} {{ 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>
<div class="case-detail-label f-weight500 f18 mb-8 mt-8">申请人代理人信息</div> <div class="case-detail-label f-weight500 f18 mb-8 mt-8">申请人代理人信息</div>
<div class="case-detail-des flex-column"> <div class="case-detail-des flex-column">
<span><a>姓名：</a><a>河北幸福消费金融股份有限公司012341</a></span> <span><a>姓名：</a><a>河北幸福消费金融股份有限公司012341</a></span>
<span><a>身份证号：</a><a>{{baseInfo.financialOrgName}}</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> <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>
<div class="case-detail-label f-weight500 f18 mb-8 mt-8">债务信息</div> <div class="case-detail-label f-weight500 f18 mb-8 mt-8">债务信息</div>
<div class="case-detail-des flex-column"> <div class="case-detail-des flex-column">
<!-- <span><a>委托机构：</a><a>{{baseInfo.financialOrgName}}</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.AAAAAAAAA}}</a></span> <span><a>金融产品名称：</a><a>{{ baseInfo.AAAAAAAAA }}</a></span>
<span><a>金融机构名称：</a><a>{{baseInfo.financialOrgName}}</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.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.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.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.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.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> <span><a>备注：</a><a>{{ baseInfo.caseDescr }}</a></span>
</div> </div>
</div> </div>
@ -114,7 +120,8 @@
<div v-if="leftActive == 2" class="case-contact-person"> <div v-if="leftActive == 2" class="case-contact-person">
<div class="mb-16 flex-row justify-content-between"> <div class="mb-16 flex-row justify-content-between">
<span class="f-weight500 f18">联系人信息</span> <span class="f-weight500 f18">联系人信息</span>
<span class="cursor-pointer" @click="contactAddFlag = true"><i class="el-icon-plus"></i> 添加联系人</span> <span class="cursor-pointer" @click="contactAddFlag = true"><i
class="el-icon-plus"></i> 添加联系人</span>
</div> </div>
<div v-if="contactAddFlag" class="case-detail-des flex-column mb-16"> <div v-if="contactAddFlag" class="case-detail-des flex-column mb-16">
<div class="flex-row justify-content-between"> <div class="flex-row justify-content-between">
@ -207,7 +214,7 @@
</div> </div>
<div class="case-detail-des flex-column mb-16"> <div class="case-detail-des flex-column mb-16">
<div class="background-color-F5F5F5 p-16 flex-row border-radius-8"> <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> <a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')"/></a>
<div class="flex-column"> <div class="flex-column">
<a class="mt-8 f-weight500">起诉状</a> <a class="mt-8 f-weight500">起诉状</a>
<a class="color-86909C">张三 2024-09-09</a> <a class="color-86909C">张三 2024-09-09</a>
@ -229,7 +236,7 @@
</div> </div>
<div class="case-detail-des flex-column mb-16"> <div class="case-detail-des flex-column mb-16">
<div class="background-color-F5F5F5 p-16 flex-row border-radius-8"> <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> <a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')"/></a>
<div class="flex-column" style="padding-top:2px"> <div class="flex-column" style="padding-top:2px">
<a class="f-weight500">调解申请书</a> <a class="f-weight500">调解申请书</a>
<a class="color-86909C f12">未签字</a> <a class="color-86909C f12">未签字</a>
@ -247,11 +254,11 @@
<!-- 还款计划 --> <!-- 还款计划 -->
<div v-if="leftActive == 5" class="case-repayment-schedule"> <div v-if="leftActive == 5" class="case-repayment-schedule">
<RepaymentSchedule :eventDialog.sync="eventDialog" /> <RepaymentSchedule :eventDialog.sync="eventDialog"/>
</div> </div>
<!-- 还款凭证 --> <!-- 还款凭证 -->
<div v-if="leftActive == 6" class="case-repayment-certificate"> <div v-if="leftActive == 6" class="case-repayment-certificate">
<RepaymentCertificate :eventDialog.sync="eventDialog" /> <RepaymentCertificate :eventDialog.sync="eventDialog"/>
</div> </div>
</el-scrollbar> </el-scrollbar>
@ -355,7 +362,8 @@
<!-- 案件材料 --> <!-- 案件材料 -->
<div v-if="rightActive == 3" class="case-materials-record"> <div v-if="rightActive == 3" class="case-materials-record">
<div class="flex-row justify-content-between"> <div class="flex-row justify-content-between">
<span class="btn-communication background-color-fff f-weight500 p-8 border-radius-8 cursor-pointer"> <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>上传案件材料 <i class="el-icon-plus"></i>上传案件材料
</span> </span>
</div> </div>
@ -384,7 +392,7 @@
<!-- 案件日志 --> <!-- 案件日志 -->
<div v-if="rightActive == 5" class="case-log-record"> <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" > <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-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'">
<el-timeline> <el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top"> <el-timeline-item timestamp="2018/4/12" placement="top">
@ -411,100 +419,116 @@
</div> </div>
<!-- 视频预约 --> <!-- 视频预约 -->
<VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog" /> <VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog"/>
<!-- 案件材料上传 -->
<caseFileDialog v-if="caseFileVisible" :eventDialog.sync="caseFileVisible"/>
</div> </div>
</template> </template>
<script> <script>
import api from "@/services/caseManagement"; import api from "@/services/caseManagement";
export default { import caseMaterial from "@/services/caseMaterial";
export default {
components: { components: {
uploadFile: () => import('@/components/uploadFile.vue'),//上传 uploadFile: () => import('@/components/uploadFile.vue'),//上传
RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划 RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证 RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约 VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约
caseFileDialog: () => import('./caseFileDialog'),//案件材料上传
}, },
data() { data() {
return { return {
VideoDialog:null, VideoDialog: null,
eventDialog:{caseId:this.$route.query.caseId}, eventDialog: {caseId: this.$route.query.caseId},
leftActive:1, caseFileVisible: null,
rightActive:1, leftActive: 1,
fileList:[], rightActive: 1,
mediationRecord:[],//调解记录 fileList: [],
baseInfo:{},//基本信息 mediationRecord: [],//调解记录
obligorInfo:[],//债务人信息 baseInfo: {},//基本信息
caseId:'',//案件id obligorInfo: [],//债务人信息
caseId: '',//案件id
// 联系人 // 联系人
contactAddObj:{}, contactAddObj: {},
contactAddFlag:false, contactAddFlag: false,
contactObj:{}, contactObj: {},
contactUpdate:false, contactUpdate: false,
relationOptions:[{label:'本人',value:'本人'},{label:'父母',value:'父母'},{label:'配偶',value:'配偶'}, relationOptions: [{label: '本人', value: '本人'}, {label: '父母', value: '父母'}, {label: '配偶', value: '配偶'},
{label:'子女',value:'子女'},{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'}], {label: '同事', value: '同事'}, {label: '同学', value: '同学'}],
rulesClientRepayment:{ // 还款计划
repaymentObj: {
type: 'ALL'
},
RepaymentOptions: [{label: '一次性还款', value: 'ALL'}, {
label: '全部分期',
value: 'STAGES'
}, {label: '部分先还加分期', value: 'MIX'}, {label: '其他', value: 'OTHER'}],
rulesClientRepayment: {
type: [ type: [
{ required: true, message: '请选择还款方式', trigger: 'change',}, {required: true, message: '请选择还款方式', trigger: 'change',},
], ],
totalAmount: [ totalAmount: [
{ required: true, message: '请输入还款金额', trigger: 'change',}, {required: true, message: '请输入还款金额', trigger: 'change',},
{ pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']} {
pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
message: '请输入2位小数金额',
trigger: ['blur', 'change']
}
], ],
paybackDate: [ paybackDate: [
{ required: true, message: '请选择还款截止日期', trigger: 'change',}, {required: true, message: '请选择还款截止日期', trigger: 'change',},
], ],
stagesDay: [ stagesDay: [
{ required: true, message: '请选择每期还款日期', trigger: 'change',}, {required: true, message: '请选择每期还款日期', trigger: 'change',},
], ],
partAmount: [ partAmount: [
{ required: true, message: '请输入分期前偿还金额 ', trigger: 'change',}, {required: true, message: '请输入分期前偿还金额 ', trigger: 'change',},
{ pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']} {
pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
message: '请输入2位小数金额',
trigger: ['blur', 'change']
}
], ],
partDate: [ partDate: [
{ required: true, message: '请选择分期前偿还日期', trigger: 'change',}, {required: true, message: '请选择分期前偿还日期', trigger: 'change',},
], ],
stagesNum: [ stagesNum: [
{ required: true, message: '请输入分期期数', trigger: 'change',}, {required: true, message: '请输入分期期数', trigger: 'change',},
{ pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']} {pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
], ],
}, },
}; };
}, },
computed:{ computed: {
// 左侧 // 左侧
leftContentHeight(){ leftContentHeight() {
let oh = document.documentElement.clientHeight; let oh = document.documentElement.clientHeight;
return oh-100 return oh - 100
}, },
// 中间的内容高度 // 中间的内容高度
centerContentHeight(){ centerContentHeight() {
let oh = document.documentElement.clientHeight; let oh = document.documentElement.clientHeight;
return oh-56-112-65-48 return oh - 56 - 112 - 65 - 48
}, },
// 获取右侧滚动高度 // 获取右侧滚动高度
rightContentHeight(){ rightContentHeight() {
let oh = document.documentElement.clientHeight; let oh = document.documentElement.clientHeight;
return oh-56-56-65-20 return oh - 56 - 56 - 65 - 20
}, },
// 获取抽屉drawer的内容高度 // 获取抽屉drawer的内容高度
OfficecontentHeight(){ OfficecontentHeight() {
let oh = document.documentElement.clientHeight; let oh = document.documentElement.clientHeight;
return oh-185 return oh - 185
},
} , CommunicationcontentHeight() {
CommunicationcontentHeight(){
let oh = document.documentElement.clientHeight; let oh = document.documentElement.clientHeight;
return oh-150 return oh - 150
} , },
}, },
async created() { async created() {
this.caseId = this.$route.query.caseId this.caseId = this.$route.query.caseId
@ -517,37 +541,34 @@ import api from "@/services/caseManagement";
// } // }
}, },
methods: { methods: {
debtorEntityCardNo(datalist, len) {
let datacardno = ''
debtorEntityCardNo(datalist,len){ let dataphone = ''
let datacardno='' datalist.forEach((item, index) => {
let dataphone='' if (index == 0) {
datalist.forEach((item,index) =>{
if(index == 0){
datacardno = item.cardNo datacardno = item.cardNo
dataphone = item.phone dataphone = item.phone
} } else {
else{ datacardno += ',' + item.cardNo
datacardno += ','+item.cardNo dataphone += ',' + item.phone
dataphone += ','+item.phone
} }
}) })
return {cardNo:datacardno.substring(0,len),phone:dataphone.substring(0,len)}; return {cardNo: datacardno.substring(0, len), phone: dataphone.substring(0, len)};
}, },
// 获取详情 // 获取详情
getCaseInfoById(){ getCaseInfoById() {
let _that = this let _that = this
api.getCaseInfoById(this.caseId).then(res => { api.getCaseInfoById(this.caseId).then(res => {
console.log(res,'res') console.log(res, 'res')
if(!res.code){ if (!res.code) {
this.baseInfo=res this.baseInfo = res
// 材料 // 材料
// console.log('获取图片',res.caseFileEntityList) // console.log('获取图片',res.caseFileEntityList)
let caseFileEntityList = [] let caseFileEntityList = []
res.caseFileEntityList.forEach((item)=>{ res.caseFileEntityList.forEach((item) => {
caseFileEntityList.push({name:item.name,fileName:item.name,url:item.url}) caseFileEntityList.push({name: item.name, fileName: item.name, url: item.url})
}) })
_that.fileList = caseFileEntityList _that.fileList = caseFileEntityList
@ -556,32 +577,38 @@ import api from "@/services/caseManagement";
}) })
}, },
// 获取上一件案件 // 获取上一件案件
getFrontCaseById(){ getFrontCaseById() {
if(!this.$clickThrottle()) { return }//防止重复点击 if (!this.$clickThrottle()) {
api.getFrontCaseById({id:this.caseId}).then(res => { return
if(!res.code){ }//防止重复点击
api.getFrontCaseById({id: this.caseId}).then(res => {
if (!res.code) {
// let caseChangeData = res // let caseChangeData = res
this.detailData(res) this.detailData(res)
} }
}) })
}, },
// 获取下一件案件 // 获取下一件案件
getNextCaseById(){ getNextCaseById() {
if(!this.$clickThrottle()) { return }//防止重复点击 if (!this.$clickThrottle()) {
api.getNextCaseById({id:this.caseId}).then(res => { return
if(!res.code){ }//防止重复点击
api.getNextCaseById({id: this.caseId}).then(res => {
if (!res.code) {
this.detailData(res) this.detailData(res)
} }
}) })
}, },
// 下载调解模板 // 下载调解模板
handleDownloadMediationTemplate(){ handleDownloadMediationTemplate() {
if(!this.$clickThrottle()) { return }//防止重复点击 if (!this.$clickThrottle()) {
return
}//防止重复点击
// console.log('调解模板url',templateUrl) // console.log('调解模板url',templateUrl)
if(this.templateUrl){ if (this.templateUrl) {
this.handlePreview({previewUrl:"/mediate/minio/preview/"+this.templateUrl,url:this.templateUrl}) this.handlePreview({previewUrl: "/mediate/minio/preview/" + this.templateUrl, url: this.templateUrl})
}else{ } else {
this.$message({message: '当前案件未存在调解模板', type: "warning",customClass:'messageZindex'}) this.$message({message: '当前案件未存在调解模板', type: "warning", customClass: 'messageZindex'})
} }
}, },
@ -589,90 +616,92 @@ import api from "@/services/caseManagement";
try { try {
let res = await this.$fetchApi.getMinioToken({objectName: item.url}) let res = await this.$fetchApi.getMinioToken({objectName: item.url})
window.open(`${item.previewUrl}?token=${res}`, '_target') window.open(`${item.previewUrl}?token=${res}`, '_target')
}catch (e) { } catch (e) {
this.$message.error(e.msg || e) this.$message.error(e.msg || e)
} }
}, },
handleSubmitRepayment(){ handleSubmitRepayment() {
this.$refs.ruleFormRepayment.validate((valid) => { this.$refs.ruleFormRepayment.validate((valid) => {
if (valid){ if (valid) {
console.log(1111) console.log(1111)
} }
}) })
}, },
handleBack(){ handleBack() {
// this.$route.query.sourcePage == 'mediationManagement' // this.$route.query.sourcePage == 'mediationManagement'
this.$router.push('/mediation-management') this.$router.push('/mediation-management')
}, },
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.layout-center-wrap{ .layout-center-wrap {
height: 100%; height: 100%;
font-size:14px; font-size: 14px;
.layout-center-top-wrap{
.layout-center-top-wrap {
font-size: 14px; font-size: 14px;
padding: 10px; padding: 10px;
border-bottom: solid 1px #E5E6EB; border-bottom: solid 1px #E5E6EB;
.ipphoneimg{
background: url('~@/assets/image/mediate/m-phone.png') no-repeat ; .ipphoneimg {
background-size:24px ; background: url('~@/assets/image/mediate/m-phone.png') no-repeat;
background-position:5px 5px ; background-size: 24px;
background-position: 5px 5px;
width: 100px; width: 100px;
height: 35px; height: 35px;
padding:7px 5px 5px 35px; padding: 7px 5px 5px 35px;
} }
.smsimg{
background: url('~@/assets/image/mediate/m-sms.png') no-repeat ; .smsimg {
background-size:24px ; background: url('~@/assets/image/mediate/m-sms.png') no-repeat;
background-position:5px 5px ; background-size: 24px;
background-position: 5px 5px;
width: 110px; width: 110px;
height: 35px; height: 35px;
padding:7px 5px 5px 35px; padding: 7px 5px 5px 35px;
} }
.videoimg{
background: url('~@/assets/image/mediate/m-video.png') no-repeat ; .videoimg {
background-size:24px ; background: url('~@/assets/image/mediate/m-video.png') no-repeat;
background-position:5px 5px ; background-size: 24px;
background-position: 5px 5px;
width: 110px; width: 110px;
height: 35px; height: 35px;
padding:7px 5px 5px 35px; padding: 7px 5px 5px 35px;
} }
.top-case-btn-left{
.top-case-btn-left {
padding-top: 5px; padding-top: 5px;
.el-button{
height:35px; .el-button {
padding:10px 20px; height: 35px;
background-color:#F2F3F5 ; padding: 10px 20px;
background-color: #F2F3F5;
} }
span{
span {
margin-left: 20px; margin-left: 20px;
cursor: pointer; cursor: pointer;
} }
.case-send-btn{
border:solid 1px #E5E6EB; .case-send-btn {
border: solid 1px #E5E6EB;
height: 35px; height: 35px;
padding: 7px 10px 0px 10px; padding: 7px 10px 0px 10px;
border-radius: 8px; border-radius: 8px;
} }
} }
.top-case-btn-right{
background-color:#F2F3F5 ; .top-case-btn-right {
background-color: #F2F3F5;
padding: 7px 20px; padding: 7px 20px;
border-radius: 8px; border-radius: 8px;
span{
span {
padding: 5px 30px; padding: 5px 30px;
border-radius: 8px; border-radius: 8px;
@ -681,124 +710,164 @@ import api from "@/services/caseManagement";
cursor: pointer; cursor: pointer;
} }
.active{ .active {
background-color: #fff; background-color: #fff;
} }
span:hover{
span:hover {
background-color: #fff; background-color: #fff;
} }
} }
} }
.layout-center-center-wrap{ .layout-center-center-wrap {
height: 100%; height: 100%;
// .background-color-fff{ // .background-color-fff{
// background-color: #fff; // background-color: #fff;
// } // }
.background-color-F5F5F5{ .background-color-F5F5F5 {
background-color: #F5F5F5; background-color: #F5F5F5;
} }
.border-E5E6EB{border:solid 1px #E5E6EB;}
.width120px{width: 140px;} .border-E5E6EB {
.width180px{width: 220px;} border: solid 1px #E5E6EB;
.width200px{width: calc(50% - 320px);} }
.layout-center-left-wrap{ .width120px {
background: url('~@/assets/image/mediate/m-left-bg.png') no-repeat ; 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%; background-size: 100% 100%;
width: 540px; width: 540px;
height: 100%; height: 100%;
.layout-center-left1-wrap{ .layout-center-left1-wrap {
width: 80px; width: 80px;
height: 100%; height: 100%;
text-align: center; text-align: center;
.left-rbobot{
.left-rbobot {
width: 100%; width: 100%;
height: 80px; height: 80px;
text-align: center; text-align: center;
margin: 30px 0 0 0; margin: 30px 0 0 0;
img{width:64px;}
img {
width: 64px;
} }
.separation{ }
.separation {
width: 50px; width: 50px;
margin:15px 0 0 15px; margin: 15px 0 0 15px;
border-bottom: solid 1px #dedfe4; border-bottom: solid 1px #dedfe4;
} }
.left-img-info{
.left-img-info {
margin-top: 15px; margin-top: 15px;
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
img{width: 48px;margin-left: 15px;}
a{margin-top: 5px;} img {
width: 48px;
margin-left: 15px;
}
a {
margin-top: 5px;
}
} }
.left-img-info.active { .left-img-info.active {
background: url('~@/assets/image/mediate/m-triangle.png') no-repeat ; background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
background-size: 15px 30px; background-size: 15px 30px;
background-position: 68px 10px; background-position: 68px 10px;
} }
.left-img-info:hover { .left-img-info:hover {
background: url('~@/assets/image/mediate/m-triangle.png') no-repeat ; background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
background-size: 15px 30px; background-size: 15px 30px;
background-position: 68px 10px; background-position: 68px 10px;
} }
} }
.layout-center-left2-wrap{
.layout-center-left2-wrap {
width: 460px; width: 460px;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
border-radius: 25px 0px 0px 25px; border-radius: 25px 0px 0px 25px;
padding: 20px 30px; padding: 20px 30px;
.case-detail-des{
border:solid 1px #E5E6EB; .case-detail-des {
border: solid 1px #E5E6EB;
padding: 10px 15px; padding: 10px 15px;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
span{
margin:3px 0; span {
margin: 3px 0;
padding: 3px 10px; padding: 3px 10px;
// a:first-child{width: 120px;display: inline-block;text-align: right;} // a:first-child{width: 120px;display: inline-block;text-align: right;}
} }
span:nth-child(even) { span:nth-child(even) {
background-color: #F7F8FA; background-color: #F7F8FA;
} }
.case-img{
.case-img {
width: 50px; width: 50px;
height: 50px; height: 50px;
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
img{
img {
max-width: 50px; max-width: 50px;
max-height: 50px; max-height: 50px;
} }
} }
} }
.case-materials-person{
.case-detail-des{
i{margin-right: 4px;}
}
}
.case-office-person{
.case-detail-des{ .case-materials-person {
.case-img{ .case-detail-des {
i {
margin-right: 4px;
}
}
}
.case-office-person {
.case-detail-des {
.case-img {
width: 55px; width: 55px;
height: 55px; height: 55px;
text-align: center; text-align: center;
line-height: 55px; line-height: 55px;
img{
img {
max-width: 55px; max-width: 55px;
max-height: 55px; max-height: 55px;
} }
} }
i{margin-right: 4px;}
i {
margin-right: 4px;
}
} }
} }
@ -807,20 +876,21 @@ import api from "@/services/caseManagement";
} }
.layout-center-right-wrap{ .layout-center-right-wrap {
background: url('~@/assets/image/mediate/m-right-bg.png') no-repeat ; background: url('~@/assets/image/mediate/m-right-bg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: calc(100% - 540px); width: calc(100% - 540px);
height: 100%; height: 100%;
padding: 30px; padding: 30px;
.case-communication-record{ .case-communication-record {
.btn-communication{ .btn-communication {
padding:5px 15px; padding: 5px 15px;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
} }
.case-communication-cont{
.case-communication-cont {
// background: ; // background: ;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
@ -829,12 +899,18 @@ import api from "@/services/caseManagement";
} }
.case-office-record,.case-materials-record{ .case-office-record, .case-materials-record {
span a{color: #C66A5B; margin-right: 13px; cursor: pointer;} span a {
span a:last-child{margin-right: 0;} color: #C66A5B;
margin-right: 13px;
cursor: pointer;
} }
span a:last-child {
margin-right: 0;
}
}
} }

52
src/pages/mediation-page/components/VideoReservationDialog.vue
View File

@ -58,19 +58,35 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" v-for="(item,index) in repaymentObj.members" :key="index"> <el-col :span="24" v-for="(item,index) in repaymentObj.members" :key="index">
<el-form-item label="" prop="" label-width="0"> <el-form-item label="" prop="" label-width="0" style="margin-bottom: 10px;">
<el-row :gutter="10"> <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"> <el-col :span="7">
<div>姓名</div> <div>姓名</div>
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<div>电话</div> <div>电话</div>
</el-col> </el-col>
<el-col :span="8">
<div>身份证</div>
</el-col>
</el-row> </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-col :span="7">
<el-form-item <el-form-item
:prop="`members[${index}].name`" :prop="`members[${index}].name`"
@ -94,20 +110,7 @@
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="3">
<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">
<div class=""> <div class="">
<el-button <el-button
icon="el-icon-delete" icon="el-icon-delete"
@ -170,6 +173,13 @@ export default {
{ label: '120分钟', value: 120 } { label: '120分钟', value: 120 }
], ],
litigantsOptions: [], litigantsOptions: [],
identityOptions: [
{ label: '法官', value: '法官' },
{ label: '调解专家', value: '调解专家' },
{ label: '律师', value: '律师' },
{ label: '民警', value: '民警' },
{ label: '其他', value: '其他' }
],
repaymentObj: { repaymentObj: {
litigants: [], //{name: xx, phone: xx, identity: xx} 当事人 litigants: [], //{name: xx, phone: xx, identity: xx} 当事人
members: [], //{name: xx, phone: xx, identity: xx} 邀请人 members: [], //{name: xx, phone: xx, identity: xx} 邀请人
@ -211,7 +221,7 @@ export default {
}) })
}, },
addForm() { addForm() {
this.repaymentObj.members.push({name: '', phone: '', identity: ''}) this.repaymentObj.members.push({ identity: '', name: '', phone: ''})
}, },
deleteForm(index) { deleteForm(index) {
this.repaymentObj.members.splice(index, 1) this.repaymentObj.members.splice(index, 1)

138
src/pages/mediation-page/components/caseFileDialog.vue Normal file
View File

@ -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>

26
src/services/caseMaterial.js Normal file
View File

@ -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;