| | |
| | | @close="handleClose" |
| | | class="attachment-dialog"> |
| | | <!-- 工具栏 --> |
| | | <div class="toolbar"> |
| | | <div v-if="editable" |
| | | class="toolbar"> |
| | | <el-button type="primary" |
| | | size="small" |
| | | @click="handleUpload"> |
| | |
| | | <el-dialog v-model="uploadDialogVisible" |
| | | title="上传附件" |
| | | width="50%" |
| | | @close="handleUploadClose"> |
| | | @close="closeUpload"> |
| | | <AttachmentUpload v-model:file-list="newFileList" /> |
| | | <template #footer> |
| | | <el-button @click="handleUploadClose">关闭</el-button> |
| | | <el-button @click="saveUpload">保存</el-button> |
| | | <el-button @click="closeUpload">关闭</el-button> |
| | | </template> |
| | | </el-dialog> |
| | | <!-- 文件列表表格 --> |
| | |
| | | <el-table-column v-if="showActions" |
| | | fixed="right" |
| | | label="操作" |
| | | :width="120" |
| | | :width="150" |
| | | align="center"> |
| | | <template #default="scope"> |
| | | <el-button link |
| | | type="primary" |
| | | size="small" |
| | | :href="scope.row.downloadURL" |
| | | class="download-link"> |
| | | 下载 |
| | | class="download-link" |
| | | @click="previewFile(scope.row.previewURL)"> |
| | | 预览 |
| | | </el-button> |
| | | <el-button link |
| | | type="primary" |
| | | size="small" |
| | | class="download-link" |
| | | @click="downloadFile(scope.row.downloadURL)"> |
| | | 下载 |
| | | </el-button> |
| | | <el-button v-if="editable" |
| | | link |
| | | type="danger" |
| | | size="small" |
| | | @click="handleDelete(scope.row)"> |
| | |
| | | </el-table> |
| | | </div> |
| | | </el-dialog> |
| | | <filePreview ref="filePreviewRef" /> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ElMessage } from 'element-plus' |
| | | import { ref, computed, getCurrentInstance, onMounted, watch } from "vue"; |
| | | import AttachmentUpload from "@/components/AttachmentUpload/file/index.vue"; |
| | | import { |
| | |
| | | deleteAttachment, |
| | | createAttachment, |
| | | } from "@/api/basicData/storageAttachment.js"; |
| | | import filePreview from '@/components/filePreview/index.vue' |
| | | const filePreviewRef = ref() |
| | | |
| | | const props = defineProps({ |
| | | visible: { |
| | |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | editable: { |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | }); |
| | | |
| | | const emit = defineEmits(["close", "download", "upload", "delete"]); |
| | |
| | | isShow.value = false; |
| | | }; |
| | | |
| | | // 预览文件 |
| | | const previewFile = (url) => { |
| | | if (url) { |
| | | filePreviewRef.value.open(url) |
| | | } else { |
| | | ElMessage.warning('文件地址无效,无法预览') |
| | | } |
| | | } |
| | | |
| | | const handleUpload = () => { |
| | | uploadDialogVisible.value = true; |
| | | }; |
| | | |
| | | const handleUploadClose = async () => { |
| | | const saveUpload = async () => { |
| | | // 检查是否有新上传的文件 |
| | | if (newFileList.value.length > 0) { |
| | | try { |
| | | await createAttachment({ |
| | | application: "file", |
| | | recordType: props.recordType, |
| | | recordId: props.recordId, |
| | | storageBlobDTOs: [...newFileList.value, ...tableData.value], |
| | | }); |
| | | newFileList.value = []; |
| | | // 刷新列表 |
| | | setList(); |
| | | } catch (error) { |
| | | proxy?.$modal?.msgError("上传失败"); |
| | | } |
| | | createAttachment({ |
| | | application: "file", |
| | | recordType: props.recordType, |
| | | recordId: props.recordId, |
| | | storageBlobDTOs: [...newFileList.value, ...tableData.value], |
| | | }).then((res) => { |
| | | if (res && res.code === 200) { |
| | | proxy?.$modal?.msgSuccess("上传成功"); |
| | | newFileList.value = []; |
| | | // 刷新列表 |
| | | setList(); |
| | | } |
| | | }).finally(() => { |
| | | uploadDialogVisible.value = false; |
| | | }) |
| | | } |
| | | } |
| | | |
| | | const closeUpload = () => { |
| | | newFileList.value = []; |
| | | uploadDialogVisible.value = false; |
| | | }; |
| | | |
| | | const handleDelete = async (row, index) => { |
| | | try { |
| | | await deleteAttachment([row.storageAttachmentId]); |
| | | proxy?.$modal?.msgSuccess("删除成功"); |
| | | setList(); |
| | | } catch (error) { |
| | | proxy?.$modal?.msgError("删除失败"); |
| | | } |
| | | deleteAttachment([row.storageAttachmentId]).then((res) => { |
| | | if (res && res.code === 200) { |
| | | proxy?.$modal?.msgSuccess("删除成功"); |
| | | setList(); |
| | | } |
| | | }) |
| | | }; |
| | | |
| | | const setList = () => { |
| | |
| | | recordType: props.recordType, |
| | | recordId: props.recordId, |
| | | }).then(res => { |
| | | if (res && res.data) { |
| | | tableData.value = res.data || []; |
| | | } |
| | | tableData.value = (res && res.data) || []; |
| | | }); |
| | | }; |
| | | |
| | | const downloadFile = url => { |
| | | window.open(url, "_blank"); |
| | | }; |
| | | onMounted(() => { |
| | | setList(); |
| | | }); |