fix : 修复所属公司及详情loading

src/components/DetailComponent/CollectionDetail.vue

@@ -1,69 +1,71 @@
 <template>
-  <el-form :model="formData" ref="form" label-width="auto">
-    <el-row>
-      <el-col :span="12">
-        <el-form-item label="名称">
-          <span>{{ formData.requirementName }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="所属公司">
-          <span>{{ formData.companyIds }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="征集类型">
-          <span>{{ formData.collectType }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="截止时间">
-          <span>{{ formData.deadline }}</span>
-        </el-form-item>
-      </el-col>
-      <baseTitle title="征集说明"></baseTitle>
-      <el-col :span="24">
-        <el-form-item>
-          <el-card style="width: 100%">
-            <div v-html="formData.collectExplain">
-            </div>
-          </el-card>
-        </el-form-item>
-      </el-col>
-      <baseTitle title="附件列表"></baseTitle>
-      <el-col :span="24">
-        <el-form-item>
-          <fvTable style="width: 100%;max-height: 200px" v-if="processViewer" :tableConfig="tableConfig"
-                   :data="formData.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="formData.taskId">
-          <baseTitle title="审核意见"></baseTitle>
-          <el-form-item prop="auditOpinion">
-            <el-input
-                v-model="formData.auditOpinion"
-                :rows="3"
-                type="textarea"
-                placeholder="请输入审核意见"
-            />
+  <div v-loading="loading">
+    <el-form :model="formData" ref="form" label-width="auto">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="名称">
+            <span>{{ formData.requirementName }}</span>
           </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所属公司">
+            <span>{{ formData.companyIds }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="征集类型">
+            <span>{{ formData.collectType }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="截止时间">
+            <span>{{ formData.deadline }}</span>
+          </el-form-item>
+        </el-col>
+        <baseTitle title="征集说明"></baseTitle>
+        <el-col :span="24">
+          <el-form-item>
+            <el-card style="width: 100%">
+              <div v-html="formData.collectExplain">
+              </div>
+            </el-card>
+          </el-form-item>
+        </el-col>
+        <baseTitle title="附件列表"></baseTitle>
+        <el-col :span="24">
+          <el-form-item>
+            <fvTable style="width: 100%;max-height: 200px" v-if="processViewer" :tableConfig="tableConfig"
+                     :data="formData.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="formData.taskId">
+            <baseTitle title="审核意见"></baseTitle>
+            <el-form-item prop="auditOpinion">
+              <el-input
+                  v-model="formData.auditOpinion"
+                  :rows="3"
+                  type="textarea"
+                  placeholder="请输入审核意见"
+              />
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <div class="approval-record">
+        <baseTitle title="审批记录"></baseTitle>
+        <div class="process">
+          <operation-render v-if="processViewer" :operation-list="data.operationList"
+                            :state="data.state"/>
+          <process-diagram-viewer v-if="processViewer"/>
         </div>
-      </el-col>
-    </el-row>
-    <div class="approval-record">
-      <baseTitle title="审批记录"></baseTitle>
-      <div class="process">
-        <operation-render v-if="processViewer" :operation-list="data.operationList"
-                          :state="data.state"/>
-        <process-diagram-viewer v-if="processViewer"/>
       </div>
-    </div>
-  </el-form>
+    </el-form>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -72,10 +74,8 @@ import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.v
 import {matterTree} from '@/utils/matterTree.js';
 import {downloadFile} from "@/api/project-demand";
 
-const emit = defineEmits(['getInfo'])
+const emit = defineEmits(['getInfo',"update:formData"])
 const form = ref()
-const showForm = ref(true)
-const loading = ref(false)
 const showTable = ref(false)
 const companyNameArray = ref([])
 
@@ -95,7 +95,10 @@ const props = defineProps({
   companyOption: {
     type: Array,
     default: []
-  },
+  }, loading: {
+    type: Boolean,
+    default: false
+  }
 })
 const tableConfig = reactive({
   columns: [
@@ -134,7 +137,6 @@ const tableConfig = reactive({
     }
   ]
 })
-
 const handleDownload = (row) => {
   downloadFile(row.fileId).then(res => {
     const blob = new Blob([res])
@@ -150,16 +152,19 @@ const getDataSourceOptionItem = (val) => {
       matterTree(companyNameArray.value, props.companyOption, item)
     })
   }
-  return companyNameArray.value.join('，');
+  let uniqueArr = Array.from(new Set(companyNameArray.value));
+  return uniqueArr.join('，');
 }
+
+watch(() => props.loading, (newVal) => {
+  props.loading = newVal
+}, {deep: true})
+
 watch(() => props.companyOption, (newVal) => {
   props.companyOption = newVal
 }, {deep: true})
-watch(() => props.formData, (newVal) => {
-  if (newVal) {
-    newVal.companyIds = getDataSourceOptionItem(newVal.companyIds)
-    props.formData = newVal
-  }
+watch(() => props.formData.companyIds, (newVal) => {
+  props.formData.companyIds = getDataSourceOptionItem(newVal)
 }, {deep: true})
 watch(() => props.processViewer, (newVal) => {
   props.processViewer = newVal