feat: 需求上报详情

src/components/DetailComponent/SummaryDetail.vue

@@ -1,130 +1,130 @@
 <template>
-  <el-form :model="formData" ref="summaryForm">
+  <el-form :model="localFormData" ref="summaryForm">
     <el-row gutter="50">
       <el-col :span="12">
         <el-form-item label="名称" prop="requirementName">
-          <span>{{ formData.requirementName }}</span>
+          <span>{{ localFormData.requirementId }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="专项资金" prop="specialFund">
-          <span>{{ formData.specialFund }}</span>
+          <span>{{ localFormData.specialFund }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="开始时间" prop="startTime">
-          <span>{{ formData.startTime }}</span>
+          <span>{{ localFormData.startTime }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="所属公司" prop="companyName">
-          <span>{{ formData.companyName }}</span>
+          <span>{{ localFormData.companyName }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="项目类型" prop="projectType">
-          <span>{{ formData.projectType }}</span>
+          <span>{{ localFormData.projectType }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="结束时间" prop="endTime">
-          <span>{{ formData.endTime }}</span>
+          <span>{{ localFormData.endTime }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="出资类型" prop="investmentType">
-          <span>{{ formData.investmentType }}</span>
+          <span>{{ localFormData.investmentType }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="项目影响" prop="projectImpact">
-          <span>{{ formData.projectImpact }}</span>
+          <span>{{ localFormData.projectImpact }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="所属业务板块" prop="businessSegment">
-          <span>{{ formData.businessSegment }}</span>
+          <span>{{ localFormData.businessSegment }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="预期成果形式" prop="resultForm">
-          <span>{{ formData.resultForm }}</span>
+          <span>{{ localFormData.resultForm }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="预期技术标准制定" prop="technicalStandard">
-          <span>{{ formData.technicalStandard }}</span>
+          <span>{{ localFormData.technicalStandard }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="产学研联合" prop="industryUniversityResearch">
-          <span>{{ formData.industryUniversityResearch }}</span>
+          <span>{{ localFormData.industryUniversityResearch }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="开展政府申报" prop="governmentDeclaration">
-          <span>{{ formData.governmentDeclaration }}</span>
+          <span>{{ localFormData.governmentDeclaration }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="知识产权状况" prop="intellectualProperty">
-          <span>{{ formData.intellectualProperty }}</span>
+          <span>{{ localFormData.intellectualProperty }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="发明专利(项)" prop="inventionPatent">
-          <span>{{ formData.inventionPatent }}</span>
+          <span>{{ localFormData.inventionPatent }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="实用性新型专利(项)" prop="newPatent">
-          <span>{{ formData.newPatent }}</span>
+          <span>{{ localFormData.newPatent }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="软件著作权(项)" prop="softwareCopyright">
-          <span>{{ formData.softwareCopyright }}</span>
+          <span>{{ localFormData.softwareCopyright }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="著作权(项)" prop="copyright">
-          <span>{{ formData.copyright }}</span>
+          <span>{{ localFormData.copyright }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="其他(项)" prop="other">
-          <span>{{ formData.other }}</span>
+          <span>{{ localFormData.other }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="经济概算(万元)" prop="economicEstimate">
-          <span>{{ formData.economicEstimate }}</span>
+          <span>{{ localFormData.economicEstimate }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="其中申请公司总部科技创新专项资金(万元)" prop="specialFundAmount">
-          <span>{{ formData.specialFundAmount }}</span>
+          <span>{{ localFormData.specialFundAmount }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="24">
         <el-form-item label="现有业务描述" prop="serviceDescription">
-          <span>{{ formData.serviceDescription }}</span>
+          <span>{{ localFormData.serviceDescription }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="24">
         <el-form-item label="研发项目关键内容描述" prop="contentDescription">
-          <span>{{ formData.contentDescription }}</span>
+          <span>{{ localFormData.contentDescription }}</span>
         </el-form-item>
       </el-col>
       <el-col :span="24">
         <el-form-item label="需求上报申请书">
-          <el-button type="primary" link @click="handleDownload(formData.fileList)">{{formData.fileList}}</el-button>
+          <el-button type="primary" link @click="handleDownload(localFormData.fileList)">{{localFormData.fileList}}</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="formData.fileList" :isSettingCol="false" :pagination="false">
+                   :data="localFormData.fileList" :isSettingCol="false" :pagination="false">
             <template #empty>
               <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
             </template>
@@ -138,21 +138,25 @@
 
 <script setup lang="jsx">
 import {downloadFile} from "@/api/project-demand";
+import { watch, watchEffect } from "vue";
 
 const props = defineProps({
   formData: {
-    type: Array,
-    default: []
+    type: Object,
+    default: {}
   },
   data: {
-    type: Array,
-    default: []
+    type: Object,
+    default: {}
   },
   processViewer: {
     type: Boolean,
     default: false
   },
 })
+const localFormData = ref({})
+const summaryForm = ref()
+
 const tableConfig = reactive({
   columns: [
     {
@@ -200,6 +204,17 @@ const handleDownload = (fileList) => {
   //   a.click()
   // })
 }
+
+watch(
+  ()=>props.formData,
+  (val)=>{
+    console.log(val, 'ssss');
+  }
+)
+
+watchEffect(()=>{
+  Object.keys(props.formData).length && (localFormData.value = props.formData)
+})
 </script>
 
 <style scoped>

src/components/steps/api/index.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export const getBaseInfoApi = (projectId) => {
+  return request({
+    url: '/workflow/details/info/'+projectId,
+    method: 'get',
+  })
+}
+
+export const getMapProjectStateInfo = (projectId, state) => {
+  return request({
+    url: `/workflow/details/${projectId}/${state}`,
+    method: 'get'
+  })
+}

src/components/steps/index.vue

@@ -1,27 +1,34 @@
 <template>
+  <baseTitle title="基础信息"></baseTitle>
+  <fvForm :schema="schema" @getInstance="(e)=>baseForm = e"></fvForm>
+  <baseTitle title="各流程信息"></baseTitle>
   <div class="steps-box">
-    <el-steps :active="localActive">
+    <el-steps :active="localActive" finish-status="success">
       <el-step 
-        v-for="(item, index) in localSteps"
-        :key="item.key"
-        :title="item.title"
+        v-for="(item, index) in localSteps" 
+        :key="item.key" 
+        :title="item.title" 
         :class="stepClass(index)"
-        @click="handleStep(item.key, index)"
-      ></el-step>
+        @click="handleStep(item.key, index)" 
+        
+      />
     </el-steps>
   </div>
 
   <!-- 步骤内容 -->
   <div>
-    <template v-for="(item, index) in stepList" :key="item.key" >
-      <component v-show="localActive == index" :is="item.component"/>
-    </template>
+    <slot name="content" :localActive="localActive"></slot>
+    <!-- <template v-for="(item, index) in stepList" :key="item.key">
+      <component v-if="localActive == index" v-bind="item.props || {}" :is="item.component" />
+    </template> -->
   </div>
 </template>
 
 <script setup lang="jsx">
-import { ElNotification } from 'element-plus';
-import { computed, ref, watchEffect } from 'vue';
+import { ElLoading, ElNotification } from 'element-plus';
+import { computed, reactive, ref, watchEffect } from 'vue';
+import { useRoute } from 'vue-router';
+import { getBaseInfoApi } from './api';
 
 const props = defineProps({
   // 步骤对应内容list
@@ -37,13 +44,20 @@ const props = defineProps({
   // 已完成的工作流步骤
   stepSuccess: {
     type: Array,
-    default: [0]
+    default: ['00']
   }
 })
 
-const emits = defineEmits(['stepChange'])
+const route = useRoute()
+
+const emits = defineEmits(['stepChange', 'setDetail'])
+
+const localData = reactive({
+
+})
 
 const localActive = ref(0) // 当前激活步骤
+
 const localSteps = ref([
   {
     title: '需求征集',
@@ -67,17 +81,133 @@ const localSteps = ref([
   },
 ])
 
+const baseForm = ref()
+
+const schema = computed(()=>{
+  return [
+    {
+      label: '所属公司',
+      prop: 'affiliatedCompany',
+      colProps: {
+        span: 12
+      }
+      // component: 
+    },
+    {
+      label: '征集类型',
+      prop: 'collectType',
+      colProps: {
+        span: 12
+      }
+      // component: 
+    },
+    {
+      label: '截止时间',
+      prop: 'deadline',
+      colProps: {
+        span: 12
+      }
+      // component: 
+    },
+    {
+      label: '需求名称',
+      prop: 'requirementName',
+      colProps: {
+        span: 12
+      }
+      // component: 
+    },
+  ]
+})
+
+const localStepSuccess = ref([])
+
+// 格式化详情步骤条
+const formatProcedure = (data) => {
+  let arr = []
+  if(data instanceof Array) {
+    data.forEach(item=>{
+      switch (item) {
+        case '00': arr.push(0)
+          break
+        case '10': arr.push(1)
+          break
+        case '20': arr.push(2)
+          break
+        case '30': arr.push(3)
+          break
+        case '40': arr.push(4)
+          break
+      }
+    })
+  }
+  return arr
+}
+
+// 反向格式化
+const formatReProcedure = (data) => {
+  let arr = []
+  if(data instanceof Array) {
+    data.forEach(item=>{
+      switch (item) {
+        case 0: arr.push('00')
+          break
+        case 1: arr.push('10')
+          break
+        case 2: arr.push('20')
+          break
+        case 3: arr.push('30')
+          break
+        case 4: arr.push('40')
+          break
+      }
+    })
+  }
+}
+
+const formatActive = (val) => {
+  console.log(val, 'val');
+  let active = ''
+  switch(val) {
+    case '0' || 0 : active = '00'
+      break
+    case '1' || 1 : active = '10'
+      break
+    case '2' || 2 : active = '20'
+      break
+    case '3' || 3 : active = '30'
+      break
+    case '4' || 4 : active = '40'
+      break
+  }
+  console.log(active, 'active--');
+  return active
+}
+
 const stepClass = (val) => {
-  if(props.stepSuccess.includes(val)) {
+  if (localStepSuccess.value.includes(val)) {
     return 'step-success'
   }
   return 'step-error'
 }
 
 const handleStep = (key, index) => {
-  if(props.stepSuccess.includes(index)) {
+  if (localStepSuccess.value.includes(index)) {
+    let active = ''
     localActive.value = index
-    emits('stepChange', {key, active: index})
+    switch(index) {
+      case 0: active = '00'
+        break
+      case 1: active = '10'
+        break
+      case 2: active = '20'
+        break
+      case 3: active = '30'
+        break
+      case 4: active = '40'
+        break
+    }
+    emits('stepChange', { key, active })
     return
   }
   ElNotification({
@@ -87,18 +217,37 @@ const handleStep = (key, index) => {
   })
 }
 
-watchEffect(()=>{
+const getBaseInfo = async () => {
+  const loading = ElLoading.service({fullscreen: true})
+  try {
+    const { code, data } = await getBaseInfoApi(route.query.projectId)
+    localStepSuccess.value = formatProcedure(data.procedure)
+    baseForm.value.setValues(data)
+    console.log(formatActive(localActive.value), 'formatActive(localActive.value)');
+    emits('setDetail', formatActive(localActive.value))
+    loading.close()
+  } catch {
+    loading.close()
+  }
+}
+
+getBaseInfo()
+
+watchEffect(() => {
+  console.log(props.active, 'props.active');
   localActive.value = props.active
 })
 </script>
 
 <style lang="scss" scoped>
-.steps-box{
+.steps-box {
   padding: 10px 0;
 }
+
 .step-success {
   cursor: pointer;
 }
+
 .step-error {
   cursor: not-allowed;
 }

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

@@ -1,14 +1,24 @@
 <template>
-  <summary-detail :formData="summaryData.formData" :data="summaryData" :processViewer="summaryProcessViewer"/>
+  <steps :active="active" @setDetail="setDetail" @stepChange="stepChange">
+    <template #content>
+      <span v-show="showActive == '00'">需求征集</span>
+      <summary-detail v-show="showActive == '10'" :formData="summaryData.formData" :data="summaryData" :processViewer="summaryProcessViewer"/>
+    </template>
+  </steps>
 </template>
 
 <script setup lang="jsx">
+import SummaryDetail from '../../../components/DetailComponent/SummaryDetail.vue';
 import {useProcessStore} from '@/stores/processStore.js';
 import {getDetail} from "./api";
+import { markRaw, reactive, ref, shallowRef } from 'vue';
+import { getMapProjectStateInfo } from '../../../components/steps/api';
 const route = useRoute()
 const summaryData = ref({})
 const summaryProcessViewer = ref(true)
 const processStore = useProcessStore()
+const active = route.query.state
+const showActive = ref()
 const getDemandSummaryInfo = async () => {
   if (!route.query.id) return
   // await getCompanyOption()
@@ -27,7 +37,54 @@ const getDemandSummaryInfo = async () => {
     })
   })
 }
-getDemandSummaryInfo()
+// getDemandSummaryInfo()
+
+const getInfo = async (state) => {
+  const projectId = route.query.projectId
+  const { code, data } = await getMapProjectStateInfo(projectId, state)
+  summaryData.value = data;
+  processStore.setDesign(data)
+  processStore.runningList.value = data.runningList;
+  processStore.endList.value = data.endList;
+  processStore.noTakeList.value = data.noTakeList;
+  processStore.refuseList.value = data.refuseList;
+  processStore.passList.value = data.passList;
+  nextTick(() => {
+    // stepList[1].props.formData = data.formData
+    // stepList[1].props.data = data
+    // stepList[1].props.processViewer = true
+    summaryProcessViewer.value = true
+  })
+}
+
+const setDetail = (active) => {
+  showActive.value = active
+  getInfo(active)
+}
+
+const stepChange = (data) => {
+  console.log(data)
+  showActive.value = data.active
+}
+
+const summaryDetailRef = ref()
+
+// const stepList = reactive([
+//   {
+//     key: 'collect',
+//     component: ()=>(<span>需求征集</span>)
+//   },
+//   {
+//     key: 'report',
+//     component: ()=>(<SummaryDetail ref={summaryDetailRef.value}></SummaryDetail>),
+//     props: {
+//       formData: summaryData.value.formData,
+//       data: summaryData.value,
+//       processViewer: summaryProcessViewer.value
+//     }
+//   }
+// ])
+
 </script>
 
 <style scoped>

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

@@ -174,7 +174,9 @@ const handleDetail = (row) => {
   router.push({
     name: 'Summary/detail',
     query: {
-      id:row.requirementId
+      id:row.requirementId,
+      projectId: row.projectId,
+      state: row.state
     }
   })
 }