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>
</div>
<div class="show-file">
<img v-if="fileType == 'image'" :src="`/mediate/minio/preview/${fileObj.url}`" />
<iframe v-else :src="`/mediate/minio/preview/${fileObj.url}`" frameborder="0" width="100%" height="100%"></iframe>
<img v-if="fileType == 'image'" :src="`${fileObj.fullUrl}`" />
<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 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>
@ -20,13 +23,15 @@
<el-button @click="handleClose()">关闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import api from "@/services/caseManagement";
export default {
components: {
videoPreview: () => import('@/components/videoPreview.vue'),//查看视频文件
},
props: {
fileDialog: {
@ -45,13 +50,15 @@ import api from "@/services/caseManagement";
};
},
mounted () {
if(this.fileDialog.showfile.fullUrl == undefined){
this.fileDialog.showfile.fullUrl = this.fileDialog.showfile.url
}
this.fileObj = this.fileDialog.showfile
this.fileDialog.filelist.forEach((item,index) =>{
if(item.url == this.fileDialog.showfile){
if(item.url == this.fileDialog.showfile.url){
this.CurrentPosition = index
}
})
this.getShowFileType(this.fileObj.url)
},
@ -61,6 +68,14 @@ import api from "@/services/caseManagement";
// 如果是图片，直接显示图片
this.fileType = 'image'
}
if(this.$util.getFileType(url) === 'video') {
// 如果是图片，直接显示图片
this.fileType = 'video'
}
else
{
this.fileType = 'other'
}
},
previousClick(){
let nextCurrent = this.CurrentPosition-1;
@ -91,8 +106,6 @@ import api from "@/services/caseManagement";
this.$message.warning(`已经是最后一个了！`)
return
}
// console.log(this.fileDialog.filelist[this.CurrentPosition+1],11)
},
handleClose() {
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=""
@click.stop.prevent="handleDelete(item, i)">
<div class="upload-file">
<!-- svg展示 -->
<svgViewer :src="item.iconFrontSrc" class="el-image-upload" v-if="item.fileType==='svg'"> </svgViewer>
<!-- svg展示 -->
<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>
@ -163,6 +163,7 @@
editMp4Flag:false,
editImgFlag: false,
previewPath:'',
testList:[]
}
},
computed: {
@ -182,33 +183,67 @@
},
methods: {
formatFileList() {
async formatFileList() {
let fileList = this.fileList || []
fileList = JSON.parse(JSON.stringify(fileList))
// console.log('upload===========formatFileList()方法==========fileList：', fileList)
const lists = fileList.map(item => {
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)
// const lists = fileList.map(item => {
// 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)
// let previewUrl = `${projectConfig.fileHost}${obj.url}`
let previewUrl = `/mediate/minio/preview/${obj.url}`
if(obj.url.includes('http')){
previewUrl = obj.url
}
obj.previewUrl = previewUrl
if(this.$util.getFileType(text) === 'image') {
// 如果是图片，直接显示图片
obj.iconFrontSrc = obj.previewUrl
}
// // console.log(obj.url,'obj.urlobj.urlobj.urlobj.url')
// // let previewUrl = `${projectConfig.fileHost}${obj.url}`
// let previewUrl = `/mediate/minio/preview/${obj.url}`
// if(obj.url.includes('http')){
// previewUrl = obj.url
// }
// else
// {
// previewUrl = this.$fetchApi.viewFullFile({path: obj.url})
// }
return obj
});
this.lists = lists
// obj.previewUrl = previewUrl
// if(this.$util.getFileType(text) === 'image') {
// // 如果是图片，直接显示图片
// 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)
},
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) {
console.log(this.accept,'httpRequest上传文件：', param)
let fileType = this.$util.getFileExtension(param.file.name)
@ -265,7 +300,6 @@
}
},
async handlePreview(item) {
// try {
// let res = await this.$fetchApi.getMinioToken({objectName: item.url})
// 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) {
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 {
// this.fileDialog = {showfile: {url: scope.row.url}, 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">
<!-- 此处的label是复选框右边显示的值，也是选中后的值。如果要一行的数据，直接使用row即可 -->
<!-- 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>
</span>
<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 class="case-lable">
<a class="case-status0">承诺客户</a>
<a class="case-status1">疑难客户</a>
<a class="case-status2">分期客户</a>
<a class="case-status3">已签署协议</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 class="case-status0" v-if="scope.row.assistMediatorId">协办</a>
</span>
</div>
<div class="flex-row justify-content-between table-span-one">
@ -287,7 +286,7 @@
</span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'3',title:'视频调解记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<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 class="cursor-pointer" @click="CaseTraceDialog = {activeName:'4',title:'文书生成记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>文书</p>

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

@ -257,10 +257,8 @@
</span>
<span class="case-lable">
<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 class="case-status1">疑难客户</a>
<a class="case-status2">分期客户</a> -->
<a class="case-status0">协办</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-status0" v-if="scope.row.assistMediatorId">协办</a>
</span>
</div>
<div class="flex-row justify-content-between table-span-one">
@ -303,7 +301,7 @@
</span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'3',title:'视频调解记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<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 class="cursor-pointer" @click="CaseTraceDialog = {activeName:'4',title:'文书生成记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<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.linkedType == 1">通话{{itemrecord.linkedDuration}}秒</div>
<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 v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6">
<div v-if="itemrecord.linkedType == 1">视频{{itemrecord.linkedDuration}}秒</div>
<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 v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6">
<!-- <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>
@ -266,6 +274,9 @@
</div>
<MediationRecordDialog v-if="visiblemediatRecord" :visiblemediatRecordObj="visiblemediatRecordObj" :caseId="caseId" :visiblemediatRecord.sync="visiblemediatRecord" />
<!-- 文件预览 -->
<showFile v-if="fileDialog" :fileDialog.sync="fileDialog"/>
</div>
</template>
@ -273,6 +284,7 @@
import api from "@/services/caseManagement";
export default {
components: {
showFile: () => import('../../../components/showFile.vue'),//
RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
caseMaterial: () => import('./caseMaterial'),//
@ -287,6 +299,7 @@ export default {
},
data() {
return {
fileDialog:null,
singlesmsvisible:false,
visiblemediatRecord:false,
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>

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

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

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

@ -61,8 +61,8 @@
<div class="flex-row certImagecont">
<span class="color-86909C certImage">
<el-image
:src="`/mediate/minio/preview/${proofitem.proofUrl}`"
:preview-src-list="[`/mediate/minio/preview/${proofitem.proofUrl}`]">
:src="proofitem.previewUrl"
:preview-src-list="[proofitem.previewUrl]">
</el-image>
</span>
<div class="flex-column ml-16">
@ -232,15 +232,35 @@ import api from "@/services/caseManagement";
})
},
getProofList(){
api.gettraceProof_list({caseId:this.eventDialog.caseId}).then(res => {
api.gettraceProof_list({caseId:this.eventDialog.caseId}).then(async res => {
if(!res.code){
this.ProofList = res
this.ProofList.forEach(item =>{
item.mediaPath = [item.proofUrl]
})
// this.ProofList = res
// this.ProofList.forEach(item =>{
// 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){
this.updateRow = index;
this.repaymentObj = proofitem

4
src/services/fetchApi.js
View File

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

2
src/utils/util.js
View File

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