feat: 主流程详情组件基本完成

src/views/project-management/filing/detail.vue

@@ -1,23 +1,33 @@
 <template>
-  <div class="detail-block">
-    <el-tabs
-        v-model="activeName"
-        type="card"
-        class="demo-tabs"
-        @tab-click="handleClick"
-    >
-      <el-tab-pane label="需求征集" name="first">
+  <steps :active="'0'" @setDetail="setDetail" @stepChange="stepChange">
+    <template #content>
+      <collection-detail 
+        :formData="collectionData.formData" 
+        :data="collectionData"
+        :processViewer="commonProvessViewer"
+        :companyOption="companyOption"
+        @getInfo="getDemandCollectionInfo"
+        v-show="showActive == '00'"
+      />
+      <summary-detail v-show="showActive == '10'" :formData="summaryData.formData" :data="summaryData" :processViewer="commonProvessViewer"/>
+      <ApprovalDetail type="approval" v-show="showActive == '20'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer"></ApprovalDetail>
+      <ApprovalDetail type="execute" v-show="showActive == '40'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer"></ApprovalDetail>
+      <ApprovalDetail type="archivist" v-show="showActive == '50'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer"></ApprovalDetail>
 
-      </el-tab-pane>
-      <el-tab-pane label="需求上报" name="second"></el-tab-pane>
-      <el-tab-pane label="项目立项" name="third" ></el-tab-pane>
-      <el-tab-pane label="项目实施" name="third"></el-tab-pane>
-      <el-tab-pane label="项目归档" name="third" :disabled="true"></el-tab-pane>
-    </el-tabs>
-  </div>
+    </template>
+  </steps>
 </template>
 
 <script setup lang="jsx">
+import {getInfo} from "@/api/project-demand/index.js";
+import {getSubCompOpt} from '@/api/user/user.js'
+import {useProcessStore} from '@/stores/processStore.js';
+import CollectionDetail from "@/components/DetailComponent/CollectionDetail.vue";
+import SummaryDetail from "@/components/DetailComponent/SummaryDetail.vue";
+import ApprovalDetail from "@/components/DetailComponent/ApprovalDetail.vue";
+import { getMapProjectStateInfo } from '@/components/steps/api';
+import { ElLoading } from "element-plus";
+
 const activeName = ref('first')
 const handleClick = (tab, event) => {
   console.log(tab, event)
@@ -25,6 +35,58 @@ const handleClick = (tab, event) => {
 
   }
 }
+
+
+
+const getCompanyOption = async () => {
+  const res = await getSubCompOpt()
+  companyOption.value = res.data
+}
+
+
+const commonForm = ref({})
+const commonProvessViewer = ref(true)
+
+const getAllInfo = async (state) => {
+  const loading = ElLoading.service({fullscreen: true})
+  try {
+    state == '00' && ( await getCompanyOption() )
+    commonProvessViewer.value = false
+    const { data, code } = await getMapProjectStateInfo(route.query.projectId, state)
+    if(state == '00') {
+      collectionData.value = data;
+    } else if(state == '10') {
+      summaryData.value = data;
+    }
+    commonForm.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(() => {
+      // summaryProcessViewer.value = true
+      commonProvessViewer.value = true
+    })
+    loading.close()
+  } catch {
+    loading.close()
+  }
+  
+}
+
+const showActive = ref()
+
+const setDetail = (active) => {
+  showActive.value = active
+  getAllInfo(active)
+}
+
+const stepChange = (data) => {
+  showActive.value = data.active
+  getAllInfo(data.active)
+}
 </script>
 
 <style scoped lang="scss">

src/views/project-management/implementation/detail.vue

@@ -1,29 +1,101 @@
 <template>
-<div class="detail-block">
-  <el-tabs
-      v-model="activeName"
-      type="card"
-      class="demo-tabs"
-      @tab-click="handleClick"
-  >
-    <el-tab-pane label="需求征集" name="first">
+  <steps :active="'0'" @setDetail="setDetail" @stepChange="stepChange">
+    <template #content>
+      <collection-detail 
+        :formData="collectionData.formData" 
+        :data="collectionData"
+        :processViewer="commonProvessViewer"
+        :companyOption="companyOption"
+        @getInfo="getDemandCollectionInfo"
+        v-show="showActive == '00'"
+      />
+      <summary-detail v-show="showActive == '10'" :formData="summaryData.formData" :data="summaryData" :processViewer="commonProvessViewer"/>
+      <ApprovalDetail type="approval" v-show="showActive == '20'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer"></ApprovalDetail>
+      <ApprovalDetail type="execute" v-show="showActive == '40'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer"></ApprovalDetail>
 
-    </el-tab-pane>
-    <el-tab-pane label="需求上报" name="second"></el-tab-pane>
-    <el-tab-pane label="项目立项" name="third" ></el-tab-pane>
-    <el-tab-pane label="项目实施" name="third" :disabled="true"></el-tab-pane>
-  </el-tabs>
-</div>
+    </template>
+  </steps>
 </template>
 
 <script setup lang="jsx">
-const activeName = ref('first')
+import {getInfo} from "@/api/project-demand/index.js";
+import {getSubCompOpt} from '@/api/user/user.js'
+import {useProcessStore} from '@/stores/processStore.js';
+import CollectionDetail from "@/components/DetailComponent/CollectionDetail.vue";
+import SummaryDetail from "@/components/DetailComponent/SummaryDetail.vue";
+import ApprovalDetail from "@/components/DetailComponent/ApprovalDetail.vue";
+import { getMapProjectStateInfo } from '@/components/steps/api';
+import { ElLoading } from "element-plus";
+
+// const activeName = ref('first')
 const handleClick = (tab, event) => {
   console.log(tab, event)
   if(tab.index.value === 0){
 
   }
 }
+
+
+const route = useRoute()
+const activeName = ref('first')
+const collectionData = ref({})
+const summaryData = ref({})
+const collectionProcessViewer = ref(true)
+const summaryProcessViewer = ref(true)
+const processStore = useProcessStore()
+const companyOption = ref([])
+const rules = reactive({
+  auditOpinion: [{required: true, message: '请输入审核意见', trigger: 'blur'}],
+})
+const getCompanyOption = async () => {
+  const res = await getSubCompOpt()
+  companyOption.value = res.data
+}
+
+
+const commonForm = ref({})
+const commonProvessViewer = ref(true)
+
+const getAllInfo = async (state) => {
+  const loading = ElLoading.service({fullscreen: true})
+  try {
+    state == '00' && ( await getCompanyOption() )
+    commonProvessViewer.value = false
+    const { data, code } = await getMapProjectStateInfo(route.query.projectId, state)
+    if(state == '00') {
+      collectionData.value = data;
+    } else if(state == '10') {
+      summaryData.value = data;
+    }
+    commonForm.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(() => {
+      // summaryProcessViewer.value = true
+      commonProvessViewer.value = true
+    })
+    loading.close()
+  } catch {
+    loading.close()
+  }
+  
+}
+
+const showActive = ref()
+
+const setDetail = (active) => {
+  showActive.value = active
+  getAllInfo(active)
+}
+
+const stepChange = (data) => {
+  showActive.value = data.active
+  getAllInfo(data.active)
+}
 </script>
 
 <style scoped lang="scss">

src/views/project-management/implementation/index.vue

@@ -195,7 +195,8 @@ const handleDetail = (row) => {
   router.push({
     name: 'Implementation/detail',
     query: {
-      id: row.requirementId
+      id: row.requirementId,
+      projectId: row.projectId
     }
   })
 }

src/views/project-management/initiation/detail.vue

@@ -122,6 +122,7 @@ const getAllInfo = async (state) => {
     } else if(state == '10') {
       summaryData.value = data;
     }
+    console.log(data, 'data--22');
     commonForm.value = data
     processStore.setDesign(data)
     processStore.runningList.value = data.runningList;