You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
11 KiB
327 lines
11 KiB
<template> |
|
<el-button @click="show = true" |
|
>上传 |
|
<template #icon> |
|
<icon name="el-icon-upload-filled" /> |
|
</template> |
|
</el-button> |
|
|
|
<el-dialog |
|
title="上传佐证材料" |
|
v-model="show" |
|
width="60vw" |
|
:close-on-click-modal="false" |
|
top="2vh" |
|
> |
|
<el-upload |
|
drag |
|
multiple |
|
:action="`${BASE_PATH}/file/upload`" |
|
:headers="{ Authorization: getToken() }" |
|
:before-upload="beforeUpload" |
|
@progress="uploadProgress" |
|
@success="handleSuccess" |
|
@error="handleError" |
|
:show-file-list="false" |
|
> |
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
|
<div class="el-upload__text"> |
|
<div>将文件拖拽到此处或<em>点击上传</em></div> |
|
<div class="text-small">文件类型支持图片/录音/MP4/PDF/WORD/EXCEL/压缩文件，文件大小限制为 100MB</div> |
|
<div class="text-small">如遇到无法正常上传的情况，请将文件压缩之后再上传</div> |
|
</div> |
|
</el-upload> |
|
<h4>未分类文件</h4> |
|
<div style="min-height: 60px"> |
|
<div |
|
class="flex between mb-10" |
|
v-for="(item, index) in fileList.filter( |
|
(item) => !item.fileClassId |
|
)" |
|
:key="index" |
|
> |
|
<div class="flex gap v-center"> |
|
<div v-if="!item.loading"> |
|
<template |
|
v-if="getFileType(item.fileName) === FileType.IMG" |
|
> |
|
<div |
|
class="img-box" |
|
:style="{ |
|
backgroundImage: `url(${BASE_PATH}/file/stream/${item.filePath})`, |
|
}" |
|
@click="filePreview(item)" |
|
></div> |
|
</template> |
|
<template v-else> |
|
<icon |
|
:name="getIconName(item.fileName)" |
|
:size="40" |
|
/> |
|
</template> |
|
</div> |
|
<el-progress |
|
type="circle" |
|
:percentage="item.percent" |
|
:width="40" |
|
color="var(--primary-color)" |
|
v-else |
|
></el-progress> |
|
<span>{{ item.fileName }}</span> |
|
</div> |
|
<div class="flex gap v-center"> |
|
<el-select |
|
style="width: 200px" |
|
v-model="item.classId" |
|
clearable |
|
v-if="fileClasss.length" |
|
> |
|
<el-option |
|
v-for="item in fileClasss" |
|
:value="item.id" |
|
:label="item.classTitle" |
|
:key="item" |
|
/> |
|
</el-select> |
|
<el-button |
|
type="primary" |
|
plain |
|
@click="handleUpdateFileClass(item)" |
|
:disabled="!item.classId" |
|
v-if="fileClasss.length" |
|
|
|
>修改文件分类</el-button |
|
> |
|
<el-button type="danger" @click="remove(item)" |
|
>删除文件</el-button |
|
> |
|
</div> |
|
</div> |
|
</div> |
|
<div v-if="fileClasss.length"> |
|
<h4>已分类文件</h4> |
|
<el-scrollbar max-height="400px"> |
|
<el-row :gutter="20"> |
|
<el-col |
|
:span="12" |
|
v-for="item in fileClasss" |
|
:key="item" |
|
class="file-class-item" |
|
> |
|
<header class="text-primary"> |
|
{{ item.classTitle }} |
|
</header> |
|
<div style="min-height: 60px"> |
|
<div |
|
class="flex between mb-8 file-list-item file-list-item_active" |
|
v-for="(item, index) in fileList.filter( |
|
(file) => file.fileClassId === item.id |
|
)" |
|
:key="index" |
|
> |
|
<div class="flex gap v-center"> |
|
<div v-if="!item.loading"> |
|
<template |
|
v-if=" |
|
getFileType(item.fileName) === |
|
FileType.IMG |
|
" |
|
> |
|
<div |
|
class="img-box" |
|
:style="{ |
|
backgroundImage: `url(${BASE_PATH}/file/stream/${item.filePath})`, |
|
}" |
|
@click="filePreview(item)" |
|
></div> |
|
</template> |
|
<template v-else> |
|
<icon |
|
:name=" |
|
getIconName(item.fileName) |
|
" |
|
:size="40" |
|
/> |
|
</template> |
|
</div> |
|
<el-progress |
|
type="circle" |
|
:percentage="item.percent" |
|
:width="40" |
|
color="var(--primary-color)" |
|
v-else |
|
></el-progress> |
|
<span>{{ item.fileName }}</span> |
|
</div> |
|
<div class="flex gap v-center"> |
|
<el-button |
|
type="info" |
|
plain |
|
@click="cancelFileClass(item)" |
|
size="small" |
|
>取消分类</el-button |
|
> |
|
<el-button |
|
type="danger" |
|
@click="remove(item)" |
|
size="small" |
|
>删除文件</el-button |
|
> |
|
</div> |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
</el-scrollbar> |
|
</div> |
|
<footer class="flex end mt-20"> |
|
<el-button type="primary" size="large" @click="handleSubmit" |
|
>确认佐证材料</el-button |
|
> |
|
</footer> |
|
</el-dialog> |
|
</template> |
|
<script setup> |
|
import { getToken } from "@/utils/token"; |
|
import { BASE_PATH } from "@/api/request"; |
|
import feedback from "@/utils/feedback"; |
|
import { getIconName, getFileType } from "@/utils/util"; |
|
import { ProblemSources } from "@/enums/dictEnums"; |
|
import { FileType } from "@/enums/fileEnums"; |
|
|
|
const props = defineProps({ |
|
files: { |
|
type: Array, |
|
default: () => [], |
|
}, |
|
problemSourcesCode: { |
|
type: String, |
|
default: "", |
|
}, |
|
}); |
|
|
|
const emit = defineEmits(["update:files"]); |
|
|
|
const show = ref(false); |
|
const fileList = ref(props.files); |
|
watch(() => props.files, (val => { |
|
fileList.value = val |
|
})) |
|
|
|
const fileClasss = ref([]); |
|
if (props.problemSourcesCode === ProblemSources.JWDC) { |
|
fileClasss.value = [ |
|
{ |
|
id: 6, |
|
classTitle: "处理反馈表", |
|
classRemarks: "", |
|
}, |
|
{ |
|
id: 1, |
|
classTitle: "容错免责样本申请表", |
|
classRemarks: "", |
|
}, |
|
{ |
|
id: 2, |
|
classTitle: |
|
"针对群众不满意原因，提供无过错的音视频、微信或短信截图等证明资料", |
|
classRemarks: "", |
|
}, |
|
{ |
|
id: 3, |
|
classTitle: "110、122接处警开始、结束及处置过程中的视频截图", |
|
classRemarks: "", |
|
}, |
|
{ |
|
id: 4, |
|
classTitle: "自动回访不满意后所对的回访录音", |
|
classRemarks: "", |
|
}, |
|
{ |
|
id: 5, |
|
classTitle: "单位/个人所做其他工作", |
|
classRemarks: "", |
|
}, |
|
]; |
|
} |
|
|
|
function beforeUpload(file) { |
|
fileList.value.push({ |
|
uid: file.uid, |
|
percent: 0, |
|
loading: true, |
|
fileName: file.name, |
|
}); |
|
} |
|
|
|
function uploadProgress(progressEvent, file) { |
|
const filterFiles = fileList.value.filter((item) => file.uid === item.uid); |
|
if (filterFiles.length) { |
|
filterFiles[0].percent = parseInt(progressEvent.percent); |
|
} |
|
} |
|
|
|
function handleSuccess(data, file) { |
|
if (data.code !== 200) { |
|
feedback.msgError("上传失败！若重复上传失败请联系系统管理员"); |
|
fileList.value.splice(fileList.value.findIndex((item) => file.uid === item.uid), 1) |
|
return; |
|
} |
|
const filterFiles = fileList.value.filter((item) => file.uid === item.uid); |
|
if (filterFiles.length) { |
|
filterFiles[0].fileName = data.data.fileName; |
|
filterFiles[0].filePath = data.data.filePath; |
|
filterFiles[0].loading = false; |
|
} |
|
} |
|
|
|
function handleError(e) { |
|
console.log(e); |
|
feedback.msgError("上传失败！若重复上传失败请联系系统管理员"); |
|
} |
|
|
|
function handleUpdateFileClass(item) { |
|
item.fileClassId = item.classId; |
|
} |
|
|
|
function cancelFileClass(item) { |
|
item.fileClassId = null; |
|
} |
|
|
|
function handleSubmit() { |
|
emit( |
|
"update:files", |
|
fileList.value.filter((item) => item.filePath) |
|
); |
|
show.value = false; |
|
} |
|
|
|
function remove(item) { |
|
fileList.value.splice(fileList.value.indexOf(item), 1); |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
h4 { |
|
margin-top: 20px; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.file-class-item { |
|
margin-bottom: 20px; |
|
header { |
|
padding: 4px 0; |
|
} |
|
} |
|
.file-list-item { |
|
padding: 10px; |
|
} |
|
.file-list-item_active { |
|
background: #f1f3ff; |
|
} |
|
.img-box { |
|
width: 40px; |
|
height: 40px; |
|
background-position: center; |
|
background-size: cover; |
|
} |
|
</style> |