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

src/components/DetailComponent/SummaryDetail.vue

@@ -1,169 +1,171 @@
 <template>
-  <div class="detail-block">
-  <el-form :model="localFormData" ref="summaryForm" :rules="rules">
-    <el-row gutter="50">
-      <el-col :span="12">
-        <el-form-item label="名称" prop="projectName">
-          <span>{{ localFormData.projectName }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="专项资金" prop="specialFund">
-          <span>{{ localFormData.specialFund }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="开始时间" prop="startTime">
-          <span>{{ localFormData.startTime }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="结束时间" prop="endTime">
-          <span>{{ formData.endTime }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="所属公司" prop="companyName">
-          <span>{{ localFormData.companyName }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="项目类型" prop="projectType">
-          <span>{{ localFormData.projectType }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="研发主体" prop="rdSubject">
-          <span>{{ localFormData.rdSubject }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="出资类型" prop="investmentType">
-          <span>{{ localFormData.investmentType }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="项目影响" prop="projectImpact">
-          <span>{{ localFormData.projectImpact }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="所属业务板块" prop="businessSegment">
-          <span>{{ localFormData.businessSegment }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="预期成果形式" prop="resultForm">
-          <span>{{ localFormData.resultForm }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="预期技术标准制定" prop="technicalStandard">
-          <span>{{ localFormData.technicalStandard }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="产学研联合" prop="industryUniversityResearch">
-          <span>{{ localFormData.industryUniversityResearch }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="开展政府申报" prop="governmentDeclaration">
-          <span>{{ localFormData.governmentDeclaration }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="知识产权状况" prop="intellectualProperty">
-          <span>{{ localFormData.intellectualProperty }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="6">
-        <el-form-item label="发明专利(项)" prop="inventionPatent">
-          <span>{{ localFormData.inventionPatent }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="6">
-        <el-form-item label="实用性新型专利(项)" prop="newPatent">
-          <span>{{ localFormData.newPatent }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="6">
-        <el-form-item label="软件著作权(项)" prop="softwareCopyright">
-          <span>{{ localFormData.softwareCopyright }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="6">
-        <el-form-item label="著作权(项)" prop="copyright">
-          <span>{{ localFormData.copyright }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="6">
-        <el-form-item label="其他(项)" prop="other">
-          <span>{{ localFormData.other }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="6">
-        <el-form-item label="经济概算(万元)" prop="economicEstimate">
-          <span>{{ localFormData.economicEstimate }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="6">
-        <el-form-item label="其中申请公司总部科技创新专项资金(万元)" prop="specialFundAmount">
-          <span>{{ localFormData.specialFundAmount }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="24">
-        <el-form-item label="现有业务描述" prop="serviceDescription">
-          <span>{{ localFormData.serviceDescription }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="24">
-        <el-form-item label="研发项目关键内容描述" prop="contentDescription">
-          <span>{{ localFormData.contentDescription }}</span>
-        </el-form-item>
-      </el-col>
-      <el-col :span="24">
-        <el-form-item label="需求上报申请书">
-          <el-button type="primary" link @click="handleDownload(localFormData.singleFile)">{{localFormData.singleFile?.originalFileName}}</el-button>
-        </el-form-item>
-      </el-col>
-      <el-col :span="24">
-        <el-form-item label="需求上报附件">
-          <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">
-          <baseTitle title="审核意见"></baseTitle>
-          <el-form-item prop="auditOpinion">
-            <el-input
-                v-model="localFormData.auditOpinion"
-                :rows="3"
-                type="textarea"
-                placeholder="请输入审核意见"
-            />
+  <div class="detail-block" v-loading="loading">
+    <el-form :model="localFormData" ref="summaryForm" :rules="rules">
+      <el-row gutter="50">
+        <el-col :span="12">
+          <el-form-item label="名称" prop="projectName">
+            <span>{{ localFormData.projectName }}</span>
           </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="专项资金" prop="specialFund">
+            <span>{{ localFormData.specialFund }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="开始时间" prop="startTime">
+            <span>{{ localFormData.startTime }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="结束时间" prop="endTime">
+            <span>{{ formData.endTime }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所属公司" prop="companyName">
+            <span>{{ localFormData.companyName }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="项目类型" prop="projectType">
+            <span>{{ localFormData.projectType }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="研发主体" prop="rdSubject">
+            <span>{{ localFormData.rdSubject }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出资类型" prop="investmentType">
+            <span>{{ localFormData.investmentType }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="项目影响" prop="projectImpact">
+            <span>{{ localFormData.projectImpact }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所属业务板块" prop="businessSegment">
+            <span>{{ localFormData.businessSegment }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="预期成果形式" prop="resultForm">
+            <span>{{ localFormData.resultForm }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="预期技术标准制定" prop="technicalStandard">
+            <span>{{ localFormData.technicalStandard }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产学研联合" prop="industryUniversityResearch">
+            <span>{{ localFormData.industryUniversityResearch }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="开展政府申报" prop="governmentDeclaration">
+            <span>{{ localFormData.governmentDeclaration }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="知识产权状况" prop="intellectualProperty">
+            <span>{{ localFormData.intellectualProperty }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="发明专利(项)" prop="inventionPatent">
+            <span>{{ localFormData.inventionPatent }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="实用性新型专利(项)" prop="newPatent">
+            <span>{{ localFormData.newPatent }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="软件著作权(项)" prop="softwareCopyright">
+            <span>{{ localFormData.softwareCopyright }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="著作权(项)" prop="copyright">
+            <span>{{ localFormData.copyright }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="其他(项)" prop="other">
+            <span>{{ localFormData.other }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="经济概算(万元)" prop="economicEstimate">
+            <span>{{ localFormData.economicEstimate }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="其中申请公司总部科技创新专项资金(万元)" prop="specialFundAmount">
+            <span>{{ localFormData.specialFundAmount }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="现有业务描述" prop="serviceDescription">
+            <span>{{ localFormData.serviceDescription }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="研发项目关键内容描述" prop="contentDescription">
+            <span>{{ localFormData.contentDescription }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="需求上报申请书">
+            <el-button type="primary" link @click="handleDownload(localFormData.singleFile)">
+              {{ localFormData.singleFile?.originalFileName }}
+            </el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="需求上报附件">
+            <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">
+            <baseTitle title="审核意见"></baseTitle>
+            <el-form-item prop="auditOpinion">
+              <el-input
+                  v-model="localFormData.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"/>
         </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"/>
       </div>
-    </div>
 
-    <div class="oper-page-btn" v-if="data.state === '1' && data.taskId">
-      <el-button @click="handleReject(summaryForm)" >驳回</el-button>
-      <el-button color="#DED0B2" @click="handleAgree">同意</el-button>
-    </div>
-  </el-form>
+      <div class="oper-page-btn" v-if="data.state === '1' && data.taskId">
+        <el-button @click="handleReject(summaryForm)">驳回</el-button>
+        <el-button color="#DED0B2" @click="handleAgree">同意</el-button>
+      </div>
+    </el-form>
   </div>
 </template>
 
@@ -174,6 +176,7 @@ import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.v
 import {ElMessage, ElNotification} from "element-plus";
 import {agreeTask, rejectTask} from "@/api/project-demand";
 import {useTagsView} from '@/stores/tagsview.js'
+
 const tagsViewStore = useTagsView()
 const props = defineProps({
   formData: {
@@ -187,7 +190,10 @@ const props = defineProps({
   processViewer: {
     type: Boolean,
     default: false
-  },
+  }, loading: {
+    type: Boolean,
+    default: false
+  }
 })
 const localFormData = ref({})
 const tableConfig = reactive({
@@ -228,7 +234,7 @@ const tableConfig = reactive({
   ]
 })
 const router = useRouter()
-const summaryForm=ref()
+const summaryForm = ref()
 const rules = reactive({
   auditOpinion: [{required: true, message: '请输入审核意见', trigger: 'blur'}],
 })
@@ -279,23 +285,26 @@ const handleDownload = (row) => {
   downloadFile(row.fileId).then(res => {
     const blob = new Blob([res])
     let a = document.createElement('a')
-    a.href=URL.createObjectURL(blob)
+    a.href = URL.createObjectURL(blob)
     a.download = row.originalFileName
     a.click()
   })
 }
 
 watch(
-  ()=>props.formData,
-  (val)=>{
-    console.log(val, 'ssss');
-  }
+    () => props.formData,
+    (val) => {
+      console.log(val, 'ssss');
+    }
 )
 watch(() => props.processViewer, (newVal) => {
   props.processViewer = newVal
 }, {deep: true})
+watch(() => props.loading, (newVal) => {
+  props.loading = newVal
+}, {deep: true})
 
-watchEffect(()=>{
+watchEffect(() => {
   Object.keys(props.formData).length && (localFormData.value = props.formData)
 })
 </script>
@@ -304,7 +313,8 @@ watchEffect(()=>{
 :deep(.el-table--fit) {
   height: auto !important;
 }
-.detail-block{
+
+.detail-block {
   overflow-x: hidden;
   overflow-y: auto;
   padding-bottom: 20px;

src/views/project-demand/summary/add.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="detail-block">
+  <div class="detail-block" v-loading="loading">
     <baseTitle title="需求上报"></baseTitle>
     <el-form :model="formData" ref="summaryForm" :rules="rules">
       <el-row gutter="50">
@@ -251,6 +251,7 @@ const processStore = useProcessStore()
 const router = useRouter()
 const route = useRoute()
 const name=ref(router.currentRoute.value.name)
+const loading = ref(false)
 const processDiagramViewer = ref(false)
 const tagsViewStore = useTagsView()
 const companyOption = ref([])
@@ -440,6 +441,7 @@ const getDetailInfo = async () => {
     })
     if (res.code === 1000) {
       formData.value = res.data.formData
+      loading.value=false
     }
   })
 }
@@ -468,16 +470,17 @@ const init = async () => {
   })
 }
 onMounted(async () => {
+  loading.value=true
   await init()
   if (route.query.projectId) {
     await getDetailInfo()
   }
+
 })
 const staging = async () => {
 }
 </script>
 <style lang="scss" scoped>
-
 .detail-block {
   overflow: hidden;
   padding-bottom: 30px;

src/views/project-demand/summary/detail.vue

@@ -2,9 +2,9 @@
   <steps :active="active" @setDetail="setDetail" @stepChange="stepChange">
     <template #content>
       <collection-detail v-show="showActive == '00'" :formData="summaryData.formData" :data="summaryData"
-                         :processViewer="summaryProcessViewer" :companyOption="companyOption" />
+                         :processViewer="summaryProcessViewer" :companyOption="companyOption" :loading="loading"/>
       <summary-detail v-show="showActive == '10'" :formData="summaryData.formData" :data="summaryData"
-                      :processViewer="summaryProcessViewer"/>
+                      :processViewer="summaryProcessViewer" :loading="loading"/>
     </template>
   </steps>
 </template>
@@ -20,6 +20,7 @@ const route = useRoute()
 const companyOption = ref([])
 const summaryData = ref({})
 const summaryProcessViewer = ref(true)
+const loading = ref(false)
 const processStore = useProcessStore()
 const active = ref(route.query.state)
 const showActive = ref()
@@ -31,9 +32,10 @@ const getInfo = async (state) => {
   const projectId = route.query.projectId
   await getCompanyOption()
   summaryProcessViewer.value = false
+  loading.value = true
   const {code, data} = await getMapProjectStateInfo(projectId, state)
   summaryData.value = data;
-  console.log('data',data)
+  loading.value = false
   processStore.setDesign(data)
   processStore.runningList.value = data.runningList;
   processStore.endList.value = data.endList;