zhangwencui
2026-04-30 54274cf2cb44da9b7eac1f324cee9ad653936aef
src/components/Dialog/FileList.vue
@@ -1,73 +1,55 @@
<template>
  <el-dialog
      v-model="isShow"
      :title="title"
      :width="width"
      @close="handleClose"
      class="attachment-dialog"
  >
  <el-dialog v-model="isShow"
             :title="title"
             :width="width"
             @close="handleClose"
             class="attachment-dialog">
    <!-- 工具栏 -->
    <div class="toolbar">
      <el-button
          type="primary"
          size="small"
          @click="handleUpload"
      >
      <el-button type="primary"
                 size="small"
                 @click="handleUpload">
        上传附件
      </el-button>
    </div>
    <!-- 上传组件弹窗 -->
    <el-dialog
        v-model="uploadDialogVisible"
        title="上传附件"
        width="50%"
        @close="handleUploadClose"
    >
      <AttachmentUpload
          v-model:file-list="newFileList"
      />
        @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>
    <!-- 文件列表表格 -->
    <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="120"
            align="center"
        >
      <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="120"
                         align="center">
          <template #default="scope">
            <el-button
                link
                type="primary"
                size="small"
                :href="scope.row.downloadURL"
                class="download-link"
            >
            <el-button link
                       type="primary"
                       size="small"
                       class="download-link"
                       @click="downloadFile(scope.row.downloadURL)">
              下载
            </el-button>
            <el-button
                link
                type="danger"
                size="small"
                @click="handleDelete(scope.row)"
            >
            <el-button link
                       type="danger"
                       size="small"
                       @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
@@ -78,9 +60,13 @@
</template>
<script setup>
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 {ref, computed, getCurrentInstance, onMounted, watch} from "vue";
import AttachmentUpload from "@/components/AttachmentUpload/file/index.vue";
import {
  attachmentList,
  deleteAttachment,
  createAttachment,
} from "@/api/basicData/storageAttachment.js";
const props = defineProps({
  visible: {
@@ -89,39 +75,34 @@
  },
  recordType: {
    type: String,
    default: '',
    required: true
    default: "",
    required: true,
  },
  recordId: {
    type: Number,
    default: 0,
    required: true
    required: true,
  },
  title: {
    type: String,
    default: '附件'
    default: "附件",
  },
  width: {
    type: String,
    default: '50%'
    default: "50%",
  },
  showActions: {
    type: Boolean,
    default: true
  }
})
    default: true,
  },
});
const emit = defineEmits([
  'close',
  'download',
  'upload',
  'delete'
])
const emit = defineEmits(["close", "download", "upload", "delete"]);
const { proxy } = getCurrentInstance()
const tableData = ref([])
const uploadDialogVisible = ref(false)
const newFileList = ref([])
const {proxy} = getCurrentInstance();
const tableData = ref([]);
const uploadDialogVisible = ref(false);
const newFileList = ref([]);
const isShow = computed({
  get() {
@@ -133,44 +114,47 @@
});
const handleClose = () => {
  isShow.value = false
}
  isShow.value = false;
};
const handleUpload = () => {
  uploadDialogVisible.value = true
}
  uploadDialogVisible.value = true;
};
const handleUploadClose = async () => {
const saveUpload = async () => {
  // 检查是否有新上传的文件
  if (newFileList.value.length > 0) {
    try {
      await createAttachment({
        application: 'file',
        application: "file",
        recordType: props.recordType,
        recordId: props.recordId,
        storageBlobDTOs: [...newFileList.value, ...tableData.value]
      })
      newFileList.value = []
        storageBlobDTOs: [...newFileList.value, ...tableData.value],
      });
      newFileList.value = [];
      // 刷新列表
      setList()
      setList();
    } catch (error) {
      proxy?.$modal?.msgError('上传失败')
      proxy?.$modal?.msgError("上传失败");
    }
  }
  uploadDialogVisible.value = false
  uploadDialogVisible.value = false;
};
const closeUpload = () => {
  newFileList.value = [];
  uploadDialogVisible.value = false;
}
const handleDelete = async (row, index) => {
  try {
    await deleteAttachment([row.storageAttachmentId])
    proxy?.$modal?.msgSuccess('删除成功')
    setList()
    await deleteAttachment([row.storageAttachmentId]);
    proxy?.$modal?.msgSuccess("删除成功");
    setList();
  } catch (error) {
    proxy?.$modal?.msgError('删除失败')
    proxy?.$modal?.msgError("删除失败");
  }
}
};
const setList = () => {
  attachmentList({
@@ -178,14 +162,17 @@
    recordId: props.recordId,
  }).then(res => {
    if (res && res.data) {
      tableData.value = res.data || []
      tableData.value = res.data || [];
    }
  })
}
  });
};
const downloadFile = (url) => {
  window.open(url, "_blank");
};
onMounted(() => {
  setList()
})
  setList();
});
</script>
<style scoped>