odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : 文件预览,项目详情文件表格展示

Browse Source
This commit is contained in:
odjbin
2024-07-24 18:17:55 +08:00
parent 9506d3e0f6
commit 6cc409d744
23 changed files with 722 additions and 786 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/components/AttachmentUpload.vue
View File

@@ -6,13 +6,14 @@
<template v-if="preview">
<file-upload @getFile="getAttachment" :multiple="false"
:disabled="singleFileArray?.length>0?true:false" title="如需修改需求申请书附件，请先删除文件再上传！"/>
<fvTable style="width: 100%;max-height: 80px;" height="80" v-if="singleFileArray?.length>0" :tableConfig="editSingleTableConfig"
<fvTable style="width: 100%;max-height: 80px;" height="80" v-if="singleFileArray?.length>0"
:tableConfig="editSingleTableConfig"
:data="singleFileArray" :isSettingCol="false" :pagination="false">
</fvTable>
</template>
<template v-else-if="!preview">
<file-upload @getFile="getAttachment" :multiple="false"
:disabled="isSingleFile" />
:disabled="isSingleFile"/>
<fvTable style="width: 100%;max-height: 80px;" v-if="showSingleTable" height="80"
:tableConfig="singleTableConfig"
:data="_singleFileValue" :isSettingCol="false" :pagination="false">
@@ -33,6 +34,8 @@
</el-col>
</el-row>
</el-form>
<file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
:fileType="filePreviewParam.fileType"/>
</template>
<script setup lang="jsx">
@@ -84,32 +87,40 @@ const props = defineProps({
}
})
const emit = defineEmits(["getAttachment", "getOtherFile", "update:singleList"])
const baseTableConf = reactive(
[
{
prop: 'index',
type: 'index',
label: '序号',
align: 'center',
width: '80',
},
{
prop: 'originalFileName',
label: '文件名',
align: 'center',
width: 400,
currentRender: ({row, index}) => (
<div style="color: #2a99ff;cursor: pointer;" onClick={() => clickToPreview(row)}>{row.originalFileName}</div>)
},
{
prop: 'tag',
label: '标签',
align: 'center'
},
{
prop: 'size',
label: '文件大小',
align: 'center',
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
},
]
)
const tableConfig = reactive({
columns: [
{
prop: 'index',
type: 'index',
label: '序号',
align: 'center',
width: '80',
},
{
prop: 'originalFileName',
label: '文件名',
align: 'center',
width: 400,
},
{
prop: 'tag',
label: '标签',
align: 'center'
},
{
prop: 'size',
label: '文件大小',
align: 'center',
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
},
...baseTableConf,
{
prop: 'oper',
label: '操作',
@@ -149,30 +160,7 @@ const tableConfig = reactive({
})
const singleTableConfig = reactive({
columns: [
{
prop: 'index',
type: 'index',
label: '序号',
align: 'center',
width: '80',
},
{
prop: 'originalFileName',
label: '文件名',
align: 'center',
width: 400,
},
{
prop: 'tag',
label: '标签',
align: 'center'
},
{
prop: 'size',
label: '文件大小',
align: 'center',
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
},
...baseTableConf,
{
prop: 'oper',
label: '操作',
@@ -212,30 +200,7 @@ const singleTableConfig = reactive({
})
const editSingleTableConfig = reactive({
columns: [
{
prop: 'index',
type: 'index',
label: '序号',
align: 'center',
width: '80',
},
{
prop: 'originalFileName',
label: '文件名',
align: 'center',
width: 400,
},
{
prop: 'tag',
label: '标签',
align: 'center'
},
{
prop: 'size',
label: '文件大小',
align: 'center',
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
},
...baseTableConf,
{
prop: 'oper',
label: '操作',
@@ -285,6 +250,15 @@ if (localStorage.getItem('singleFile')) {
singleFileArray.value.push(JSON.parse(localStorage.getItem('singleFile')))
singleFile.value =JSON.parse(localStorage.getItem('singleFile'))
}
const filePreviewParam = ref({
fileUrl: '',
fileName: '',
fileType: 'pdf'
})
const filePreviewRef = ref()
const filePreviewShow = ref(false)
const _singleFileValue = computed({
get() {
return props.singleList;
@@ -316,6 +290,18 @@ watch(() => props.formData.fileList, (newVal) => {
})
}
}, {immediate: true})
watch(() => props.formData.singleFile, (newVal) => {
props.formData.singleFile = newVal
if (newVal != null) {
singleFileArray.value.push(newVal)
} else {
singleFileArray.value = []
}
singleFile.value = newVal
}, {immediate: true})
// watch(() => props.otherFileList, (newVal) => {
// props.otherFileList=newVal
// if (props.preview) {
@@ -339,21 +325,33 @@ watch(() => props.showTable, (newVal) => {
// console.log('singleFile', newVal)
// singleFileList.value = newVal
// }, {deep: true})
watch(() => props.formData.singleFile, (newVal) => {
props.formData.singleFile = newVal
if(newVal!=null){
singleFileArray.value.push(newVal)
}else{
singleFileArray.value=[]
}
singleFile.value = newVal
}, {deep: true})
watch(() => isSingleFile.value, (newVal) => {
isSingleFile.value = newVal
}, {deep: true})
// watch(() => singleFile.value, (newVal) => {
// singleFile.value = newVal
// }, {deep: true})
const clickToPreview = (row) => {
filePreviewShow.value = false
console.log('clickToPreview', row, row.fileType)
filePreviewParam.value = {
fileUrl: row.url,
fileName: row.originalFileName,
fileType: row.fileType
}
nextTick(()=>{
filePreviewShow.value = true
})
// filePreviewRef.value.show()
}
const handleDelete = (row, type) => {
deleteFile(row.fileId).then(res => {
ElNotification({
@@ -408,7 +406,7 @@ const deleteAttachment = (val) => {
})
isSingleFile.value = false
singleFile.value = null
singleFileArray.value= []
singleFileArray.value = []
}
});
}
@@ -427,8 +425,8 @@ const deleteSingleFile = (row, type) => {
if (res.code === 1000) {
isSingleFile.value = false
if (type === 1) {
singleFile.value =null
singleFileArray.value= []
singleFile.value = null
singleFileArray.value = []
} else {
props.otherFileList.splice(props.otherFileList.findIndex((item) => item.fileId === row.fileId), 1);
}