Merge pull request 'fix : 修复附件上传组件bug' (#198) from dj into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/198
This commit is contained in:
2024-05-18 14:10:06 +00:00
3 changed files with 67 additions and 76 deletions

View File

@@ -3,7 +3,7 @@
<el-row>
<el-col :span="24">
<el-form-item :label="label" prop="attachment">
<file-upload @getFile="getAttachment" :showFileList="showFileList" @delete="deleteFile"/>
<file-upload @getFile="getAttachment" :showFileList="showFileList" @delete="deleteAttachment"/>
</el-form-item>
</el-col>
<el-col :span="24">
@@ -25,7 +25,10 @@
<script setup lang="jsx">
import FileUpload from '@/components/FileUpload.vue'
const emit = defineEmits(["getAttachment", "getOtherFile", "deleteFile","deleteOtherFile","download"])
import {deleteFile, downloadFile} from "../api/project-demand";
import {ElMessage, ElMessageBox} from "element-plus";
const emit = defineEmits(["getAttachment", "getOtherFile"])
const formData = ref({})
const tableConfig = reactive({
columns: [
@@ -52,20 +55,20 @@ const tableConfig = reactive({
align: 'center',
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
},
{
prop: 'oper',
label: '操作',
align: 'center',
showOverflowTooltip: false,
currentRender: ({row, index}) => {
return (
<div>
<el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
<el-button type="primary" size="large" link onClick={() => deleteOtherFile(row)}>删除</el-button>
</div>
)
}
}
// {
// prop: 'oper',
// label: '操作',
// align: 'center',
// showOverflowTooltip: false,
// currentRender: ({row, index}) => {
// return (
// <div>
// <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
// <el-button type="primary" size="large" link onClick={() => deleteOtherFile(row)}>删除</el-button>
// </div>
// )
// }
// }
]
})
const rules = reactive({
@@ -74,39 +77,61 @@ const rules = reactive({
const props = defineProps({
showFileList: {
type: Boolean,
default:false
},label: {
default: false
}, label: {
type: String,
default:'项目附件'
default: '项目附件'
}, showTable: {
type: Boolean,
default: true
},otherFileList: {
type: Array,
default:[]
},showTable: {
type: Boolean,
default:true
default: []
}
})
watch(() => props.showTable, (newVal) => {
props.showTable=newVal
props.showTable = newVal
}, {deep: true})
watch(() => props.otherFileList, (newVal) => {
props.otherFileList=newVal
props.otherFileList = newVal
}, {deep: true})
const getAttachment = (val) => {
emit('getAttachment',val)
emit('getAttachment', val)
}
const getOtherFile = (val) => {
emit('getOtherFile',val)
emit('getOtherFile', val)
}
const deleteFile = (val) => {
emit('deleteFile',val)
const deleteAttachment = (val) => {
deleteFile(val).then(res => {
if (res.code === 1000) {
ElMessage.success("删除成功");
}
});
}
const deleteOtherFile = (row) => {
emit('deleteOtherFile',row)
ElMessageBox.confirm(`确认删除名称为${row.originalFileName}的表格吗?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteFile(row.fileId).then(res => {
if (res.code === 1000) {
ElMessage.success("删除成功");
otherFileList.value.splice(otherFileList.value.findIndex((item) => item.id === row.fileId), 1);
}
});
}).catch(() => {
ElMessage.warning("用户取消删除! ");
})
}
const handleDownload = (row) => {
emit('download',row)
downloadFile(row.fileId).then(res => {
const blob = new Blob([res])
let a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = row.originalFileName
a.click()
})
}
</script>

View File

@@ -11,8 +11,8 @@
</el-row>
</el-form>
<AttachmentUpload label="项目验收附件" :showTable="showTable" :otherFileList="otherFileList"
@deleteOtherFile="deleteOtherFile" @download="downloadOtherFile" @getAttachment="getAttachment"
@getOtherFile="getOtherFile" :showFileList="true" @deleteFile="deleteAttachment"/>
@getAttachment="getAttachment"
@getOtherFile="getOtherFile" :showFileList="true"/>
<div class="oper-page-btn">
<el-button color="#DED0B2" @click="handleSubmit(applyForm)">提交</el-button>
</div>
@@ -20,15 +20,16 @@
</template>
<script setup lang="jsx">
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteFile,downloadFile} from "@/api/project-demand";
const formData = ref({})
const fileList = ref(null)
const applyForm = ref()
const showTable = ref(true)
const otherFileList = ref([])
const compositeParam = (item) => {
let tag=''
if(!formData.value.collectType&&router.currentRoute.value.name==='Implementation/check'){
tag='项目实施'
}
return {
fileId: item.id,
size: item.size,
@@ -36,17 +37,13 @@ const compositeParam = (item) => {
fileType: item.fileType,
url: item.url,
processNodeTag: null,
tag: formData.value.collectType
tag: tag
}
}
const getAttachment = (val) => {
console.log('上传文件getAttachment', val)
showTable.value = false
let fileObj = compositeParam(val)
fileList.value.push(fileObj)
nextTick(() => {
showTable.value = true
})
// fileList.value.push(fileObj)
}
const getOtherFile = (val) => {
console.log('上传文件getOtherFile', val)
@@ -57,39 +54,8 @@ const getOtherFile = (val) => {
showTable.value = true
})
}
const deleteAttachment = (val) => {
deleteFile(val).then(res => {
if (res.code === 1000) {
ElMessage.success("删除成功");
}
});
}
const deleteOtherFile = (row) => {
ElMessageBox.confirm(`确认删除名称为${row.originalFileName}的表格吗?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteFile(row.fileId).then(res => {
if (res.code === 1000) {
ElMessage.success("删除成功");
otherFileList.value.splice(otherFileList.value.findIndex((item) => item.id === row.fileId), 1);
}
});
}).catch(() => {
ElMessage.warning("用户取消删除! ");
})
}
const downloadOtherFile = (row) => {
downloadFile(row.fileId).then(res => {
const blob = new Blob([res])
let a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = row.originalFileName
a.click()
})
}
const handleSubmit = (instance) => {
if (!instance) return
instance.validate(async (valid) => {

View File

@@ -150,7 +150,7 @@ const tableConfig = reactive({
} else if (row.state === '4') {
btn.push({label: '台账', func: () => handleStandingBook(row), type: 'primary'})
btn.push({label: '附件', func: () => handleAttachment(row), type: 'primary'})
btn.push({label: '分摊', func: () => handleShare(row), type: 'primary'})
btn.push({label: '查看分摊', func: () => handleShare(row), type: 'primary'})
}
return (
<div style={{width: '100%'}}>