feat : 文件组件抽象封装

src/components/DetailComponent/ApprovalDetail.vue

@@ -2,18 +2,15 @@
   <div  v-loading="loading">
     <fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>
     <!-- <AttachmentUpload></AttachmentUpload> -->
-    <el-form :model="formData" label-width="auto">
+    <el-form :model="formData" label-width="auto" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
       <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>
+        <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
+        <fvTable style="width: 100%;max-height: 400px;" v-if="processViewer" :tableConfig="tableConfig"
+                 :data="localFormData.fileList" :isSettingCol="false" :pagination="false">
+          <template #empty>
+            <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+          </template>
+        </fvTable>
       </el-form-item>
     </el-form>
     <div class="approval-record">

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>

src/components/DetailComponent/SummaryDetail.vue

@@ -54,22 +54,26 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="预期技术标准制定" prop="technicalStandard">
-            <span>{{ filterDict(cacheStore.getDict('technical_standard'), localFormData.technicalStandard)}}</span>
+            <span>{{ filterDict(cacheStore.getDict('technical_standard'), localFormData.technicalStandard) }}</span>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="产学研联合" prop="industryUniversityResearch">
-            <span>{{ filterDict(cacheStore.getDict('industry_university'), localFormData.industryUniversityResearch) }}</span>
+            <span>{{
+                filterDict(cacheStore.getDict('industry_university'), localFormData.industryUniversityResearch)
+              }}</span>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="开展政府申报" prop="governmentDeclaration">
-            <span>{{ filterDict(cacheStore.getDict('government_declaration'), localFormData.governmentDeclaration) }}</span>
+            <span>{{
+                filterDict(cacheStore.getDict('government_declaration'), localFormData.governmentDeclaration)
+              }}</span>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="知识产权状况" prop="intellectualProperty">
-            <span>{{ filterDict(cacheStore.getDict('intellectual_property'), localFormData.intellectualProperty)}}</span>
+            <span>{{ filterDict(cacheStore.getDict('intellectual_property'), localFormData.intellectualProperty) }}</span>
           </el-form-item>
         </el-col>
         <el-col :span="6">
@@ -103,7 +107,8 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="其中申请公司总部科技创新专项资金(元)" prop="specialFundAmount" v-if="localFormData.isSpecialFund!==null||localFormData.isSpecialFund">
+          <el-form-item label="其中申请公司总部科技创新专项资金(元)" prop="specialFundAmount"
+                        v-if="localFormData.isSpecialFund!==null||localFormData.isSpecialFund">
             <span>{{ localFormData.specialFundAmount }}</span>
           </el-form-item>
         </el-col>
@@ -124,16 +129,19 @@
             </el-button>
           </el-form-item>
         </el-col>
-        <el-col :span="24" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
-          <el-form-item label="需求上报附件">
-            <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
-            <fvTable style="width: 100%;max-height: 400px;" v-if="processViewer" :tableConfig="tableConfig"
-                     :data="localFormData.fileList" :isSettingCol="false" :pagination="false">
-              <template #empty>
-                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
-              </template>
-            </fvTable>
-          </el-form-item>
+        <el-col :span="24" >
+          <file-component title="需求上报附件" tag="需求上报"
+                          :file-list="localFormData.fileList"
+                          :file-list-show="fileListShow"/>
+<!--          <el-form-item label="需求上报附件">-->
+<!--            <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>-->
+<!--            <fvTable style="width: 100%;max-height: 400px;" v-if="processViewer" :tableConfig="tableConfig"-->
+<!--                     :data="localFormData.fileList" :isSettingCol="false" :pagination="false">-->
+<!--              <template #empty>-->
+<!--                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>-->
+<!--              </template>-->
+<!--            </fvTable>-->
+<!--          </el-form-item>-->
         </el-col>
         <!--        <el-col :span="24">-->
         <!--          <div v-if="data.taskId">-->
@@ -149,7 +157,7 @@
         <!--          </div>-->
         <!--        </el-col>-->
       </el-row>
-      <div class="approval-record" >
+      <div class="approval-record">
         <baseTitle title="审批记录"></baseTitle>
         <div class="process">
           <operation-render v-if="processViewer" :operation-list="data.operationList"
@@ -166,14 +174,14 @@
 </template>
 
 <script setup lang="jsx">
-import {downloadFile,deleteFile} from "@/api/project-demand";
+import {downloadFile, deleteFile} from "@/api/project-demand";
 import OperationRender from '@/views/workflow/common/OperationRender.vue'
 import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
 import {useTagsView} from '@/stores/tagsview.js'
 import {getFundOption} from "@/api/special-fund";
 import {useCacheStore} from '@/stores/cache.js'
 import {getSubCompOpt} from "@/api/user/user";
-import {ElMessage, ElMessageBox} from "element-plus";
+import FileComponent from "./FileComponent.vue";
 
 const tagsViewStore = useTagsView()
 const cacheStore = useCacheStore()
@@ -190,7 +198,7 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  fileListShow:{
+  fileListShow: {
     type: String,
     default: 'READ'
   },
@@ -200,60 +208,6 @@ const props = defineProps({
   }
 })
 const localFormData = 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}) => {
-        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 router = useRouter()
 const fundOption = ref([])
 const companyOption = ref([])
@@ -263,11 +217,11 @@ const rules = reactive({
 })
 const filterDict = (data, value) => {
   if (data === undefined || value === undefined) return;
-  let label=''
+  let label = ''
   if (data instanceof Array) {
-    data.find(item =>{
-      if( item.value == value){
-        label= item.label
+    data.find(item => {
+      if (item.value == value) {
+        label = item.label
       }
     })
   }
@@ -297,45 +251,8 @@ const handleDownload = (row) => {
     a.click()
   })
 }
-const getOtherFile = (val) => {
-  props.processViewer = false
-  let fileObj = compositeParam(val)
-  localFormData.value.fileList.push(fileObj)
-  nextTick(() => {
-    props.processViewer = 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("删除成功");
-        formData.value.fileList.splice(formData.value.fileList.findIndex((item) => item.id === row.fileId), 1);
-      }
-    });
-  }).catch(() => {
-    ElMessage.warning("用户取消删除! ");
-  })
-}
-
 
 watch(() => props.processViewer, (newVal) => {
   props.processViewer = newVal