feat : 封装带有附件及其他文件上传的组件

src/components/AttachmentUpload.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-form :model="formData" ref="applyForm" label-width="auto" :rules="rules">
+    <el-row>
+      <el-col :span="24">
+        <el-form-item :label="label" prop="attachment">
+          <file-upload @getFile="getAttachment" :showFileList="showFileList" @delete="deleteFile"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="其他文件">
+          <el-card style="width: 100%">
+            <file-upload @getFile="getOtherFile" :showFileList="false"/>
+            <fvTable style="width: 100%;max-height: 250px" v-if="showTable" :tableConfig="tableConfig"
+                     :data="otherFileList" :isSettingCol="false" :pagination="false">
+              <template #empty>
+                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+              </template>
+            </fvTable>
+          </el-card>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="jsx">
+import FileUpload from '@/components/FileUpload.vue'
+const emit = defineEmits(["getAttachment", "getOtherFile", "deleteFile","deleteOtherFile","download"])
+const formData = ref({})
+const tableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: '80',
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      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>
+        )
+      }
+    }
+  ]
+})
+const rules = reactive({
+  attachment: [{required: true, message: '请上传附件', trigger: 'blur'}],
+})
+const props = defineProps({
+  showFileList: {
+    type: Boolean,
+    default:false
+  },label: {
+    type: String,
+    default:'项目附件'
+  },otherFileList: {
+    type: Array,
+    default:[]
+  },showTable: {
+    type: Boolean,
+    default:true
+  }
+})
+watch(() => props.showTable, (newVal) => {
+  props.showTable=newVal
+}, {deep: true})
+watch(() => props.otherFileList, (newVal) => {
+  props.otherFileList=newVal
+}, {deep: true})
+
+const getAttachment = (val) => {
+  emit('getAttachment',val)
+}
+const getOtherFile = (val) => {
+  emit('getOtherFile',val)
+}
+const deleteFile = (val) => {
+  emit('deleteFile',val)
+}
+const deleteOtherFile = (row) => {
+  emit('deleteOtherFile',row)
+}
+const handleDownload = (row) => {
+  emit('download',row)
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/DetailComponent/CollectionDetail.vue

@@ -39,7 +39,7 @@ import OperationRender from '@/views/workflow/common/OperationRender.vue'
 import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
 import {matterTree} from '@/utils/matterTree.js';
 
-const emit = defineEmits(['getInfo'])
+const emit = defineEmits(['getInfo','download'])
 const form = ref()
 const showForm = ref(true)
 const loading = ref(false)
@@ -139,6 +139,9 @@ const init = (newVal) => {
 const getInfo = () => {
   emit('getInfo')
 }
+const handleDownload = (row) => {
+  emit('download',row)
+}
 const getDataSourceOptionItem = (val) => {
   if (val instanceof Array) {
     val.forEach(item => {