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

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>