fix : 修复直接上报的详情组件渲染

src/components/DetailComponent/ApprovalDetail.vue

@@ -1,17 +1,10 @@
 <template>
   <div  v-loading="loading">
     <fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>
-    <!-- <AttachmentUpload></AttachmentUpload> -->
-    <el-form :model="formData" label-width="auto" 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-form :model="formData" label-width="auto" >
+      <file-component title="需求上报附件" tag="需求上报"
+                      v-model:value="formData.fileList" :processViewer="processViewer"
+                      :file-list-show="fileListShow"/>
     </el-form>
     <div class="approval-record">
         <baseTitle title="审批记录"></baseTitle>
@@ -21,19 +14,15 @@
           <process-diagram-viewer v-if="processViewer" :id-name="type"/>
         </div>
     </div>
-<!--    <Opinion: v-if="data.taskId" :formData="formData" :taskId="formData.taskId"></Opinion:>-->
   </div>
 </template>
 
 <script setup lang="jsx">
 import { computed, markRaw, reactive, ref, watchEffect } from 'vue';
-import AttachmentUpload from '../AttachmentUpload.vue';
 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";
+import {downloadFile} from "@/api/project-demand";
 
 const props = defineProps({
   formData: {
@@ -52,12 +41,16 @@ const props = defineProps({
     type: Array,
     default: []
   },
-
+  fileListShow: {
+    type: String,
+    default: 'READ'
+  },
   // approval 立项, execute 实施, 归档 archivist
   type: {
     type: String,
     default: 'approval'
-  }, loading: {
+  },
+  loading: {
     type: Boolean,
     default: false
   }

src/components/DetailComponent/FileComponent.vue

@@ -1,8 +1,8 @@
 <template>
   <el-form-item label="需求上报附件" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
-    <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>{{fileList}}
+    <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">
+             :data="_value" :isSettingCol="false" :pagination="false">
       <template #empty>
         <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
       </template>
@@ -29,14 +29,17 @@ const props = defineProps({
     type: String,
     default: 'READ'
   },
-  fileList: {
+  value: {
     type: Array,
     default: []
   },
+  processViewer: {
+    type: Boolean,
+    default: false
+  },
 })
 
 
-const processViewer = ref(false)
 
 const tableConfig = reactive({
   columns: [
@@ -93,13 +96,21 @@ const tableConfig = reactive({
   ]
 })
 
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit("update:value", val);
+  }
+})
 
 const getOtherFile = (val) => {
-  processViewer.value = false
+  props.processViewer = false
   let fileObj = compositeParam(val)
-  props.fileList.push(fileObj)
+  _value.value.push(fileObj)
   nextTick(() => {
-    processViewer.value = true
+    props.processViewer = true
   })
 }
 
@@ -126,7 +137,7 @@ const handleDelete = (row) => {
     deleteFile(row.fileId).then(res => {
       if (res.code === 1000) {
         ElMessage.success("删除成功");
-        props.fileList.splice(props.fileList.findIndex((item) => item.id === row.fileId), 1);
+        _value.splice(_value.findIndex((item) => item.id === row.fileId), 1);
       }
     });
   }).catch(() => {
@@ -134,15 +145,9 @@ const handleDelete = (row) => {
   })
 }
 
-const init = () => {
-  nextTick(() => {
-    processViewer.value = true
-  })
-}
-
-init()
-
-
+watch(() => props.processViewer, (newVal) => {
+  props.processViewer = newVal
+}, {deep: true})
 </script>
 
 <style scoped>

src/components/DetailComponent/SummaryDetail.vue

@@ -133,7 +133,7 @@
         </el-col>
         <el-col :span="24">
           <file-component title="需求上报附件" tag="需求上报"
-                          :file-list="localFormData.fileList"
+                          v-model:value="localFormData.fileList" :processViewer="processViewer"
                           :file-list-show="fileListShow"/>
         </el-col>
       </el-row>