feat: 主流程详情组件基本完成

src/components/DetailComponent/ApprovalDetail.vue

@@ -2,7 +2,20 @@
   <div>
     <fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>
     <!-- <AttachmentUpload></AttachmentUpload> -->
-
+    <el-form :model="formData" label-width="auto">
+      <el-form-item label="其他文件">
+        <el-table :data="formData.fileList" style="width: 100%">
+          <el-table-column label="序号" type="index" width="80"></el-table-column>
+          <el-table-column label="文件名称" prop="originalFileName"></el-table-column>
+          <el-table-column label="标签" prop="tag"></el-table-column>
+          <el-table-column label="文件大小" prop="size">
+            <template #default="{row}">
+              {{ parseInt(row.size / 1024) + 'KB' }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </el-form>
     <div class="approval-record">
         <baseTitle title="审批记录"></baseTitle>
         <div class="process">
@@ -22,6 +35,8 @@ import OperationRender from '@/views/workflow/common/OperationRender.vue'
 import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
 import Opinion from './Opinion.vue';
 import fvTable from '@/fvcomponents/fvTable/index.vue'
+import { ElLoading } from 'element-plus';
+import {deleteFile, downloadFile} from "@/api/project-demand";
 
 const props = defineProps({
   formData: {
@@ -40,37 +55,99 @@ const props = defineProps({
     type: Array,
     default: []
   },
+
+  // approval 立项, execute 实施, 归档 archivist
+  type: {
+    type: String,
+    default: 'approval'
+  }
 })
 
 const form = ref()
 
 const localData = reactive({
-  fileList: props.formData.fileList
+  fileList: props.formData.fileList,
+  singleFile: props.formData.singleFile
 })
 
 const schema = computed(()=>{
-  return [
-    {
-      label: '前置流程',
-      prop: 'preProcess',
-      colProps: {
-        span: 24
-      }
-    },
-    {
-      label: '项目立项附件',
-      prop: 'singleFile',
-      colProps: {
-        span: 24
-      }
-    },
-    {
-      label: '其他文件',
-      prop: 'fileList',
-    }
-  ]
+  let arr
+
+  if(props.type == 'approval') {
+    arr = [
+      {
+        label: '前置流程',
+        prop: 'preProcess',
+        colProps: {
+          span: 24
+        }
+      },
+      {
+        label: '项目立项附件',
+        prop: 'singleFile',
+        colProps: {
+          span: 24
+        },
+        component: ()=>(
+          <div>
+            {
+              props.formData.singleFile?.originalFileName ? 
+              <span 
+                style={{color: '#409EFF', cursor: 'pointer'}}
+                onClick={()=>handleDownload(props.formData.singleFile)}
+              >
+                {props.formData.singleFile?.originalFileName}
+              </span> :
+              <span>{'--'}</span>
+            }
+          </div>
+          
+        )
+      },
+    ]
+  } else if(props.type == 'execute') {
+    arr = [
+      {
+        label: '前置流程',
+        prop: 'preProcess',
+        colProps: {
+          span: 24
+        }
+      },
+      {
+        label: '项目验收附件',
+        prop: 'singleFile',
+        colProps: {
+          span: 24
+        }
+      },
+    ]
+  } else {
+    arr = [
+      {
+        label: '项目归档附件',
+        prop: 'singleFile',
+        colProps: {
+          span: 24
+        }
+      },
+    ]
+  }
+  return arr
 })
 
+const handleDownload = (row) => {
+  const loading = ElLoading.service({fullscreen: true})
+  downloadFile(row.fileId).then(res => {
+    const blob = new Blob([res])
+    let a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = row.originalFileName
+    a.click()
+    loading.close()
+  })
+}
+
 watchEffect(()=>{
   Object.keys(props.formData).length && (form.value.setValues(props.formData))
 })