feat : 文件组件抽象封装

src/components/DetailComponent/FileComponent.vue

@@ -0,0 +1,150 @@
+<template>
+  <el-form-item label="需求上报附件" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
+    <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
+    <fvTable style="width: 100%;max-height: 400px;" v-if="processViewer" :tableConfig="tableConfig"
+             :data="fileList" :isSettingCol="false" :pagination="false">
+      <template #empty>
+        <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+      </template>
+    </fvTable>
+  </el-form-item>
+</template>
+
+<script setup lang="jsx">
+
+import {downloadFile, deleteFile} from "@/api/project-demand";
+import {ElMessage, ElMessageBox} from "element-plus";
+
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  tag: {
+    type: String,
+    default: ''
+  },
+  fileListShow: {
+    type: String,
+    default: 'READ'
+  },
+  fileList: {
+    type: Array,
+    default: []
+  },
+})
+
+
+const processViewer = ref(false)
+
+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}) => {
+        let btn = []
+        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
+        if (row.newFile) {
+          btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
+        }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        onClick={() => item.func()}
+                        link>
+                      {item.label}
+                    </el-button>
+                ))
+              }
+            </div>
+        )
+      }
+    }
+  ]
+})
+
+
+const getOtherFile = (val) => {
+  processViewer.value = false
+  let fileObj = compositeParam(val)
+  props.fileList.push(fileObj)
+  nextTick(() => {
+    processViewer.value = true
+  })
+}
+
+
+const compositeParam = (item, type) => {
+  return {
+    fileId: item.id,
+    size: item.size,
+    originalFileName: item.originalFilename,
+    fileType: item.fileType,
+    url: item.url,
+    newFile: true,
+    tag: '需求上报'
+  }
+}
+
+
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`确认删除名称为${row.originalFileName}的表格吗?`, '系统提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deleteFile(row.fileId).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success("删除成功");
+        props.fileList.splice(props.fileList.findIndex((item) => item.id === row.fileId), 1);
+      }
+    });
+  }).catch(() => {
+    ElMessage.warning("用户取消删除! ");
+  })
+}
+
+const init = () => {
+  nextTick(() => {
+    processViewer.value = true
+  })
+}
+
+init()
+
+
+</script>
+
+<style scoped>
+
+</style>