From 7c2cdcbc7f5585b96fba76a07b0e4417a09c4d7e Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 02 六月 2026 11:06:10 +0800
Subject: [PATCH] 新疆马铃薯 1.过程检验下载添加3个模版
---
src/components/Dialog/FileList.vue | 263 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 263 insertions(+), 0 deletions(-)
diff --git a/src/components/Dialog/FileList.vue b/src/components/Dialog/FileList.vue
new file mode 100644
index 0000000..b0e78cf
--- /dev/null
+++ b/src/components/Dialog/FileList.vue
@@ -0,0 +1,263 @@
+<template>
+ <el-dialog v-model="isShow"
+ :title="title"
+ :width="width"
+ @close="handleClose"
+ class="attachment-dialog">
+ <!-- 宸ュ叿鏍� -->
+ <div v-if="editable"
+ class="toolbar">
+ <el-button type="primary"
+ size="small"
+ @click="handleUpload">
+ 涓婁紶闄勪欢
+ </el-button>
+ </div>
+ <!-- 涓婁紶缁勪欢寮圭獥 -->
+ <el-dialog v-model="uploadDialogVisible"
+ title="涓婁紶闄勪欢"
+ width="50%"
+ @close="closeUpload">
+ <AttachmentUpload v-model:file-list="newFileList" />
+ <template #footer>
+ <el-button @click="saveUpload">淇濆瓨</el-button>
+ <el-button @click="closeUpload">鍏抽棴</el-button>
+ </template>
+ </el-dialog>
+ <!-- 鏂囦欢鍒楄〃琛ㄦ牸 -->
+ <div class="table-container">
+ <el-table :data="tableData"
+ border
+ class="attachment-table"
+ :height="tableData.length > 0 ? 'auto' : '120px'">
+ <el-table-column label="闄勪欢鍚嶇О"
+ prop="originalFilename"
+ show-overflow-tooltip />
+ <el-table-column v-if="showActions"
+ fixed="right"
+ label="鎿嶄綔"
+ :width="150"
+ align="center">
+ <template #default="scope">
+ <el-button link
+ type="primary"
+ size="small"
+ 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-button>
+ </template>
+ </el-table-column>
+ </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 {
+ attachmentList,
+ deleteAttachment,
+ createAttachment,
+ } from "@/api/basicData/storageAttachment.js";
+ import filePreview from '@/components/filePreview/index.vue'
+ const filePreviewRef = ref()
+
+ const props = defineProps({
+ visible: {
+ type: Boolean,
+ required: true,
+ },
+ recordType: {
+ type: String,
+ default: "",
+ required: true,
+ },
+ recordId: {
+ type: Number,
+ default: 0,
+ required: true,
+ },
+ title: {
+ type: String,
+ default: "闄勪欢",
+ },
+ width: {
+ type: String,
+ default: "50%",
+ },
+ showActions: {
+ type: Boolean,
+ default: true,
+ },
+ editable: {
+ type: Boolean,
+ default: true,
+ },
+ });
+
+ const emit = defineEmits(["close", "download", "upload", "delete"]);
+
+ const { proxy } = getCurrentInstance();
+ const tableData = ref([]);
+ const uploadDialogVisible = ref(false);
+ const newFileList = ref([]);
+
+ const isShow = computed({
+ get() {
+ return props.visible;
+ },
+ set(val) {
+ emit("update:visible", val);
+ },
+ });
+
+ const handleClose = () => {
+ isShow.value = false;
+ };
+
+ // 棰勮鏂囦欢
+ const previewFile = (url) => {
+ if (url) {
+ filePreviewRef.value.open(url)
+ } else {
+ ElMessage.warning('鏂囦欢鍦板潃鏃犳晥锛屾棤娉曢瑙�')
+ }
+ }
+
+ const handleUpload = () => {
+ uploadDialogVisible.value = true;
+ };
+
+ const saveUpload = async () => {
+ // 妫�鏌ユ槸鍚︽湁鏂颁笂浼犵殑鏂囦欢
+ if (newFileList.value.length > 0) {
+ 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) => {
+ deleteAttachment([row.storageAttachmentId]).then((res) => {
+ if (res && res.code === 200) {
+ proxy?.$modal?.msgSuccess("鍒犻櫎鎴愬姛");
+ setList();
+ }
+ })
+ };
+
+ const setList = () => {
+ attachmentList({
+ recordType: props.recordType,
+ recordId: props.recordId,
+ }).then(res => {
+ tableData.value = (res && res.data) || [];
+ });
+ };
+
+ const downloadFile = url => {
+ window.open(url, "_blank");
+ };
+ onMounted(() => {
+ setList();
+ });
+</script>
+
+<style scoped>
+ .attachment-dialog {
+ border-radius: 12px;
+ }
+
+ .toolbar {
+ margin-bottom: 16px;
+ text-align: right;
+ }
+
+ .table-container {
+ max-height: 40vh;
+ overflow-y: auto;
+ min-height: 120px;
+ padding-bottom: 16px;
+ box-sizing: border-box;
+ will-change: scroll-position;
+ transform: translateZ(0);
+ -webkit-overflow-scrolling: touch;
+ }
+
+ :deep(.el-table) {
+ margin-bottom: 0;
+ }
+
+ :deep(.el-table__body-wrapper) {
+ overflow-y: auto;
+ will-change: transform;
+ transform: translateZ(0);
+ }
+
+ :deep(.el-table__body tr) {
+ transition: none;
+ }
+
+ :deep(.el-dialog__footer) {
+ padding-top: 12px;
+ border-top: 1px solid #e9ecef;
+ }
+
+ .attachment-table {
+ border-radius: 8px;
+ }
+
+ :deep(.el-dialog__header) {
+ background-color: #f8f9fa;
+ border-bottom: 1px solid #e9ecef;
+ padding: 16px 20px;
+ }
+
+ :deep(.el-dialog__title) {
+ font-size: 16px;
+ font-weight: 600;
+ }
+
+ :deep(.el-dialog__body) {
+ padding: 16px 20px;
+ }
+
+ :deep(.el-table__empty-text) {
+ color: #999;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3