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

文件预览及调解记录修改

Browse Source
This commit is contained in:
liuxi 2025-01-14 17:57:03 +08:00
parent 2bfd65f93b
commit aa221ee87d
11 changed files with 148 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/util/video_img.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

27
src/components/showFile.vue
View File

@ -8,8 +8,11 @@
<span><i class="el-icon-arrow-left f48 f-weight600 "></i></span> <span><i class="el-icon-arrow-left f48 f-weight600 "></i></span>
</div> </div>
<div class="show-file"> <div class="show-file">
<img v-if="fileType == 'image'" :src="`/mediate/minio/preview/${fileObj.url}`" /> <img v-if="fileType == 'image'" :src="`${fileObj.fullUrl}`" />
<iframe v-else :src="`/mediate/minio/preview/${fileObj.url}`" frameborder="0" width="100%" height="100%"></iframe> <video v-else-if="fileType == 'video'" width="100%" height="100%" :src="`${fileObj.fullUrl}`" preload="auto" autoplay="autoplay"
controls="" controlsList="nodownload noremote footbar"></video>
<iframe v-else :src="`${fileObj.fullUrl}`" frameborder="0" width="100%" height="100%"></iframe>
</div> </div>
<div v-if="this.fileDialog.filelist.length > 1" class="next-file text-center" @click="nextClick"> <div v-if="this.fileDialog.filelist.length > 1" class="next-file text-center" @click="nextClick">
<span><i class="el-icon-arrow-right f48 f-weight600"></i></span> <span><i class="el-icon-arrow-right f48 f-weight600"></i></span>
@ -20,13 +23,15 @@
<el-button @click="handleClose()">关闭</el-button> <el-button @click="handleClose()">关闭</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import api from "@/services/caseManagement"; import api from "@/services/caseManagement";
export default { export default {
components: { components: {
videoPreview: () => import('@/components/videoPreview.vue'),//查看视频文件
}, },
props: { props: {
fileDialog: { fileDialog: {
@ -45,13 +50,15 @@ import api from "@/services/caseManagement";
}; };
}, },
mounted () { mounted () {
if(this.fileDialog.showfile.fullUrl == undefined){
this.fileDialog.showfile.fullUrl = this.fileDialog.showfile.url
}
this.fileObj = this.fileDialog.showfile this.fileObj = this.fileDialog.showfile
this.fileDialog.filelist.forEach((item,index) =>{ this.fileDialog.filelist.forEach((item,index) =>{
if(item.url == this.fileDialog.showfile){ if(item.url == this.fileDialog.showfile.url){
this.CurrentPosition = index this.CurrentPosition = index
} }
}) })
this.getShowFileType(this.fileObj.url) this.getShowFileType(this.fileObj.url)
}, },
@ -61,6 +68,14 @@ import api from "@/services/caseManagement";
// 如果是图片，直接显示图片 // 如果是图片，直接显示图片
this.fileType = 'image' this.fileType = 'image'
} }
if(this.$util.getFileType(url) === 'video') {
// 如果是图片，直接显示图片
this.fileType = 'video'
}
else
{
this.fileType = 'other'
}
}, },
previousClick(){ previousClick(){
let nextCurrent = this.CurrentPosition-1; let nextCurrent = this.CurrentPosition-1;
@ -91,8 +106,6 @@ import api from "@/services/caseManagement";
this.$message.warning(`已经是最后一个了！`) this.$message.warning(`已经是最后一个了！`)
return return
} }
// console.log(this.fileDialog.filelist[this.CurrentPosition+1],11)
}, },
handleClose() { handleClose() {
this.$emit('update:fileDialog', null) this.$emit('update:fileDialog', null)

82
src/components/uploadFile.vue
View File

@ -32,10 +32,10 @@
class="upload-delete-icon" src="../assets/image/icon_close.png" alt="" class="upload-delete-icon" src="../assets/image/icon_close.png" alt=""
@click.stop.prevent="handleDelete(item, i)"> @click.stop.prevent="handleDelete(item, i)">
<div class="upload-file"> <div class="upload-file">
<!-- svg展示 --> <!-- svg展示 -->
<svgViewer :src="item.iconFrontSrc" class="el-image-upload" v-if="item.fileType==='svg'"> </svgViewer> <svgViewer v-if="item.fileType == 'svg'" :src="item.iconFrontSrc" class="el-image-upload"></svgViewer>
<!-- 其他展示 --> <!-- 其他展示 -->
<el-image class="el-image-upload" :src="item.iconFrontSrc" fit="scale-down" v-else></el-image> <el-image v-else class="el-image-upload" :src="item.iconFrontSrc" fit="scale-down"></el-image>
</div> </div>
</div> </div>
@ -163,6 +163,7 @@
editMp4Flag:false, editMp4Flag:false,
editImgFlag: false, editImgFlag: false,
previewPath:'', previewPath:'',
testList:[]
} }
}, },
computed: { computed: {
@ -182,33 +183,67 @@
}, },
methods: { methods: {
formatFileList() { async formatFileList() {
let fileList = this.fileList || [] let fileList = this.fileList || []
fileList = JSON.parse(JSON.stringify(fileList)) fileList = JSON.parse(JSON.stringify(fileList))
// console.log('upload===========formatFileList()方法==========fileList：', fileList) // console.log('upload===========formatFileList()方法==========fileList：', fileList)
const lists = fileList.map(item => { // const lists = fileList.map(item => {
let obj = Object.assign(item) // let obj = Object.assign(item)
obj.deletable = typeof (obj.deletable) === 'boolean' ? obj.deletable : true // obj.deletable = typeof (obj.deletable) === 'boolean' ? obj.deletable : true
let text = obj.url || obj.fileName // let text = obj.url || obj.fileName
obj.fileType = this.$util.getFileExtension(text) // obj.fileType = this.$util.getFileExtension(text)
obj.iconFrontSrc = this.$util.getIcon(obj) // obj.iconFrontSrc = this.$util.getIcon(obj)
// let previewUrl = `${projectConfig.fileHost}${obj.url}` // // console.log(obj.url,'obj.urlobj.urlobj.urlobj.url')
let previewUrl = `/mediate/minio/preview/${obj.url}` // // let previewUrl = `${projectConfig.fileHost}${obj.url}`
if(obj.url.includes('http')){ // let previewUrl = `/mediate/minio/preview/${obj.url}`
previewUrl = obj.url // if(obj.url.includes('http')){
} // previewUrl = obj.url
obj.previewUrl = previewUrl // }
if(this.$util.getFileType(text) === 'image') { // else
// 如果是图片，直接显示图片 // {
obj.iconFrontSrc = obj.previewUrl // previewUrl = this.$fetchApi.viewFullFile({path: obj.url})
} // }
return obj // obj.previewUrl = previewUrl
}); // if(this.$util.getFileType(text) === 'image') {
this.lists = lists // // 如果是图片，直接显示图片
// obj.iconFrontSrc = obj.previewUrl
// }
// console.log(obj,'urlurlurlurlurlurlurl')
// return obj
// });
// this.lists = lists
await this.getpreviewfull()
this.lists = this.testList
// console.log('uploadFile----:', this.lists) // console.log('uploadFile----:', this.lists)
}, },
async getpreviewfull() {
for (const item of this.fileList) {
try {
let obj = Object.assign(item)
obj.deletable = typeof (obj.deletable) === 'boolean' ? obj.deletable : true
let text = obj.url || obj.fileName
obj.fileType = this.$util.getFileExtension(text)
obj.iconFrontSrc = this.$util.getIcon(obj)
if(obj.url.includes('http')){
obj.previewUrl = obj.url
}
else
{
obj.previewUrl = await this.$fetchApi.viewFullFile({path: item.url})
}
if(this.$util.getFileType(text) === 'image') {
// 如果是图片，直接显示图片
obj.iconFrontSrc = obj.previewUrl
}
this.testList.push(obj);
} catch (error) {
console.error(`调用接口失败，错误:`, error);
// 可以在这里添加重试逻辑
}
}
},
async httpRequest(param) { async httpRequest(param) {
console.log(this.accept,'httpRequest上传文件：', param) console.log(this.accept,'httpRequest上传文件：', param)
let fileType = this.$util.getFileExtension(param.file.name) let fileType = this.$util.getFileExtension(param.file.name)
@ -265,7 +300,6 @@
} }
}, },
async handlePreview(item) { async handlePreview(item) {
// 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')

6
src/pages/case-management/detail/index.vue
View File

@ -491,7 +491,11 @@ export default {
}, },
handleCaseShow(scope, filelist) { handleCaseShow(scope, filelist) {
if (filelist == undefined) { if (filelist == undefined) {
this.fileDialog = {showfile: {url: scope.row.proofUrl}, filelist: []} //还款凭证相关
this.$fetchApi.viewFullFile({path: scope.row.proofUrl}).then((res) => {
this.fileDialog = {showfile: {url: res}, filelist: []}
});
} else { } else {
// this.fileDialog = {showfile: {url: scope.row.url}, filelist: []} // this.fileDialog = {showfile: {url: scope.row.url}, filelist: []}
this.fileDialog = {showfile: scope.row, filelist: filelist} this.fileDialog = {showfile: scope.row, filelist: filelist}

13
src/pages/case-management/index.vue
View File

@ -233,17 +233,16 @@
<el-checkbox-group v-model="selectionData"> <el-checkbox-group v-model="selectionData">
<!-- 此处的label是复选框右边显示的值，也是选中后的值。如果要一行的数据，直接使用row即可 --> <!-- 此处的label是复选框右边显示的值，也是选中后的值。如果要一行的数据，直接使用row即可 -->
<!-- label的内容会显示在页面上，需要配合css把label的内容隐藏掉 --> <!-- label的内容会显示在页面上，需要配合css把label的内容隐藏掉 -->
<el-checkbox :disabled="scope.row.disabled" :key="scope.row.id" :label="scope.row.id"></el-checkbox> <el-checkbox :disabled="scope.row.caseStatus == 1 ? true :false" :key="scope.row.id" :label="scope.row.id"></el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</span> </span>
<span class="f-weight500 color-000 f16">被申请人： <span class="f-weight500 color-000 f16">被申请人：
<a v-for="(item,index) in scope.row.debtorEntityList" :key="index">{{index == 0 ?'':','}}{{item.name}}</a> <a v-for="(item,index) in scope.row.debtorEntityList.filter(item => item.role == 'DEBTOR' && item.type == '本人')" :key="index">{{index == 0 ?'':','}}{{item.name}}</a>
</span> </span>
<span class="case-lable"> <span class="case-lable">
<a class="case-status0">承诺客户</a> <a :class="'case-status'+ $util.getMediationTypeData(scope.row.mediateStatus).key">{{$util.getMediationTypeData(scope.row.mediateStatus).label}}</a>
<a class="case-status1">疑难客户</a> <a v-if="scope.row.mediateRecordStatus != undefined && scope.row.mediateRecordStatus != null" :class="'case-status'+ $util.getMediationprogressData(scope.row.mediateRecordStatus).key">{{$util.getMediationprogressData(scope.row.mediateRecordStatus).label}}</a>
<a class="case-status2">分期客户</a> <a class="case-status0" v-if="scope.row.assistMediatorId">协办</a>
<a class="case-status3">已签署协议</a>
</span> </span>
</div> </div>
<div class="flex-row justify-content-between table-span-one"> <div class="flex-row justify-content-between table-span-one">
@ -287,7 +286,7 @@
</span> </span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'3',title:'视频调解记录',caseNo:scope.row.caseNo,caseId:scope.row.id}"> <span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'3',title:'视频调解记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>调解视频</p> <p>调解视频</p>
<p class="color-000"><a class="color-274ea4">结束{{scope.row.statistics.vido.finish}}</a>/预约{{scope.row.statistics.vido.booking}}</p> <p class="color-000"><a class="color-274ea4">结束{{scope.row.statistics.vido.finish}}</a>/预约{{scope.row.statistics.vido.total}}</p>
</span> </span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'4',title:'文书生成记录',caseNo:scope.row.caseNo,caseId:scope.row.id}"> <span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'4',title:'文书生成记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>文书</p> <p>文书</p>

8
src/pages/mediation-management/index.vue
View File

@ -257,10 +257,8 @@
</span> </span>
<span class="case-lable"> <span class="case-lable">
<a :class="'case-status'+ $util.getMediationTypeData(scope.row.mediateStatus).key">{{$util.getMediationTypeData(scope.row.mediateStatus).label}}</a> <a :class="'case-status'+ $util.getMediationTypeData(scope.row.mediateStatus).key">{{$util.getMediationTypeData(scope.row.mediateStatus).label}}</a>
<a v-if="scope.row.mediateRecordstatus != undefined && scope.row.mediateRecordstatus != null" :class="'case-status'+ $util.getMediationprogressData(scope.row.mediateRecordstatus).key">{{$util.getMediationprogressData(scope.row.mediateRecordstatus).label}}</a> <a v-if="scope.row.mediateRecordStatus != undefined && scope.row.mediateRecordStatus != null" :class="'case-status'+ $util.getMediationprogressData(scope.row.mediateRecordStatus).key">{{$util.getMediationprogressData(scope.row.mediateRecordStatus).label}}</a>
<!-- <a class="case-status1">疑难客户</a> <a class="case-status0" v-if="scope.row.assistMediatorId">协办</a>
<a class="case-status2">分期客户</a> -->
<a class="case-status0">协办</a>
</span> </span>
</div> </div>
<div class="flex-row justify-content-between table-span-one"> <div class="flex-row justify-content-between table-span-one">
@ -303,7 +301,7 @@
</span> </span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'3',title:'视频调解记录',caseNo:scope.row.caseNo,caseId:scope.row.id}"> <span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'3',title:'视频调解记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>调解视频</p> <p>调解视频</p>
<p class="color-000"><a class="color-274ea4">结束{{scope.row.statistics.vido.finish}}</a>/预约{{scope.row.statistics.vido.booking}}</p> <p class="color-000"><a class="color-274ea4">结束{{scope.row.statistics.vido.finish}}</a>/预约{{scope.row.statistics.vido.total}}</p>
</span> </span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'4',title:'文书生成记录',caseNo:scope.row.caseNo,caseId:scope.row.id}"> <span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'4',title:'文书生成记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>文书</p> <p>文书</p>

25
src/pages/mediation-page/components/LayoutContentNew.vue
View File

@ -221,18 +221,26 @@
<div v-if="itemrecord.linkedWay == 1" class="flex-row align-items-center pt-6"> <div v-if="itemrecord.linkedWay == 1" class="flex-row align-items-center pt-6">
<div v-if="itemrecord.linkedType == 1">通话{{itemrecord.linkedDuration}}秒</div> <div v-if="itemrecord.linkedType == 1">通话{{itemrecord.linkedDuration}}秒</div>
<el-divider v-if="itemrecord.linkedType == 1" direction="vertical"></el-divider> <el-divider v-if="itemrecord.linkedType == 1" direction="vertical"></el-divider>
<div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>
<div class="text-center cursor-pointer" v-for="(item,index) in itemrecord.files" :key="index" @click="handleCaseShowFile(item)">
<i class="f14 el-icon-video-play"></i> 播放录音 {{index > 0 ? index : ''}}
</div>
</div> </div>
<!-- 视频 --> <!-- 视频 -->
<div v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6"> <div v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6">
<div v-if="itemrecord.linkedType == 1">视频{{itemrecord.linkedDuration}}秒</div> <div v-if="itemrecord.linkedType == 1">视频{{itemrecord.linkedDuration}}秒</div>
<el-divider v-if="itemrecord.linkedType == 1" direction="vertical"></el-divider> <el-divider v-if="itemrecord.linkedType == 1" direction="vertical"></el-divider>
<div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放视频</div> <!-- <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放视频</div> -->
<div class="text-center cursor-pointer" v-for="(item,index) in itemrecord.files" :key="index" @click="handleCaseShowFile(item)">
<i class="f14 el-icon-video-play"></i> 播放视频 {{index > 0 ? index : ''}}
</div>
</div> </div>
<!-- 微信 --> <!-- 微信 -->
<div v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6"> <div v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6">
<!-- <div>通话44秒</div> --> <!-- <div>通话44秒</div> -->
<div class="text-center cursor-pointer">查看文件</div> <div class="text-center cursor-pointer" v-for="(item,index) in itemrecord.files" :key="index" @click="handleCaseShowFile(item)">
查看文件 {{index > 0 ? index : ''}}
</div>
</div> </div>
</div> </div>
@ -266,6 +274,9 @@
</div> </div>
<MediationRecordDialog v-if="visiblemediatRecord" :visiblemediatRecordObj="visiblemediatRecordObj" :caseId="caseId" :visiblemediatRecord.sync="visiblemediatRecord" /> <MediationRecordDialog v-if="visiblemediatRecord" :visiblemediatRecordObj="visiblemediatRecordObj" :caseId="caseId" :visiblemediatRecord.sync="visiblemediatRecord" />
<!-- 文件预览 -->
<showFile v-if="fileDialog" :fileDialog.sync="fileDialog"/>
</div> </div>
</template> </template>
@ -273,6 +284,7 @@
import api from "@/services/caseManagement"; import api from "@/services/caseManagement";
export default { export default {
components: { components: {
showFile: () => import('../../../components/showFile.vue'),//
RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划 RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证 RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
caseMaterial: () => import('./caseMaterial'),// caseMaterial: () => import('./caseMaterial'),//
@ -287,6 +299,7 @@ export default {
}, },
data() { data() {
return { return {
fileDialog:null,
singlesmsvisible:false, singlesmsvisible:false,
visiblemediatRecord:false, visiblemediatRecord:false,
visiblemediatRecordObj:null, visiblemediatRecordObj:null,
@ -395,6 +408,12 @@ export default {
} }
}) })
}, },
handleCaseShowFile(item) {
//还款凭证相关
this.$fetchApi.viewFullFile({path: item}).then((res) => {
this.fileDialog = {showfile: {url: item,fullUrl: res}, filelist: []}
});
},
} }
}; };
</script> </script>

3
src/pages/mediation-page/components/MediationRecordDialog.vue
View File

@ -179,9 +179,10 @@ export default {
this.mrObj.callEndTime = this.visiblemediatRecordObj.callEndTime this.mrObj.callEndTime = this.visiblemediatRecordObj.callEndTime
this.mrObj.nextFollowDate = this.visiblemediatRecordObj.nextFollowDate this.mrObj.nextFollowDate = this.visiblemediatRecordObj.nextFollowDate
this.mrObj.linkedPerson = this.visiblemediatRecordObj.linkedPerson this.mrObj.linkedPerson = this.visiblemediatRecordObj.linkedPerson
console.log(this.visiblemediatRecordObj,'this.visiblemediatRecordObj')
this.visiblemediatRecordObj.files.forEach(item =>{ this.visiblemediatRecordObj.files.forEach(item =>{
this.fileList.push({ this.fileList.push({
url: item.url, url: item,
fileName: '文件', fileName: '文件',
}) })
}) })

34
src/pages/mediation-page/components/RepaymentCertificate.vue
View File

@ -61,8 +61,8 @@
<div class="flex-row certImagecont"> <div class="flex-row certImagecont">
<span class="color-86909C certImage"> <span class="color-86909C certImage">
<el-image <el-image
:src="`/mediate/minio/preview/${proofitem.proofUrl}`" :src="proofitem.previewUrl"
:preview-src-list="[`/mediate/minio/preview/${proofitem.proofUrl}`]"> :preview-src-list="[proofitem.previewUrl]">
</el-image> </el-image>
</span> </span>
<div class="flex-column ml-16"> <div class="flex-column ml-16">
@ -232,15 +232,35 @@ import api from "@/services/caseManagement";
}) })
}, },
getProofList(){ getProofList(){
api.gettraceProof_list({caseId:this.eventDialog.caseId}).then(res => { api.gettraceProof_list({caseId:this.eventDialog.caseId}).then(async res => {
if(!res.code){ if(!res.code){
this.ProofList = res // this.ProofList = res
this.ProofList.forEach(item =>{ // this.ProofList.forEach(item =>{
item.mediaPath = [item.proofUrl] // item.mediaPath = [item.proofUrl]
}) // })
await this.getpreviewfull(res)
console.log(this.ProofList,'this.ProofList')
} }
}) })
}, },
async getpreviewfull(fileList) {
for (const item of fileList) {
try {
item.previewUrl = await this.$fetchApi.viewFullFile({path: item.proofUrl})
item.mediaPath = [item.proofUrl]
this.ProofList.push(item);
} catch (error) {
console.error(`调用接口失败，错误:`, error);
// 可以在这里添加重试逻辑
}
}
},
async getProofFile(url){
let previewUrl = await this.$fetchApi.viewFullFile({path: url})
return previewUrl
},
updateClick(index,proofitem){ updateClick(index,proofitem){
this.updateRow = index; this.updateRow = index;
this.repaymentObj = proofitem this.repaymentObj = proofitem

4
src/services/fetchApi.js
View File

@ -43,5 +43,9 @@ const fetchApi = {
viewFile: data => { viewFile: data => {
return service.postFile(`${apiAdmin}upload/view`, data) return service.postFile(`${apiAdmin}upload/view`, data)
}, },
// 文件预览绝对地址
viewFullFile: data => {
return service.service.post(`${apiAdmin}upload/full`, data,{hideLoading:true})
},
} }
export default fetchApi; export default fetchApi;

2
src/utils/util.js
View File

@ -212,7 +212,7 @@ const util = {
return require('../assets/image/util/excel_img.jpg'); return require('../assets/image/util/excel_img.jpg');
case 'm3u8': case 'm3u8':
case 'mp4': case 'mp4':
return require('../assets/image/util/pdf_img.jpg'); return require('../assets/image/util/video_img.jpg');
default: default:
return require('../assets/image/util/pdf_img.jpg') return require('../assets/image/util/pdf_img.jpg')
} }