feat : 新增需求征集组件

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

@@ -1,48 +1,92 @@
 <template>
-<div class="detail-block">
-  <el-tabs
-      v-model="activeName"
-      type="card"
-      class="demo-tabs"
-      @tab-click="handleClick"
-  >
-    <el-tab-pane label="需求征集" name="first">
-
-    </el-tab-pane>
-    <el-tab-pane label="需求上报" name="second"></el-tab-pane>
-    <el-tab-pane label="项目立项" name="third" :disabled="true"></el-tab-pane>
-  </el-tabs>
-</div>
+  <div class="detail-block">
+    <el-tabs
+        v-model="activeName"
+        type="card"
+        class="demo-tabs"
+        @tab-click="handleClick"
+    >
+      <el-tab-pane label="需求征集" name="first">
+        <CollectionDetail :formData="collectionData.formData" :data="collectionData" :processViewer="processViewer" :companyOption="companyOption" @getInfo="getDemandCollectionInfo"/>
+      </el-tab-pane>
+      <el-tab-pane label="需求上报" name="second"></el-tab-pane>
+      <el-tab-pane label="项目立项" name="third" :disabled="true"></el-tab-pane>
+    </el-tabs>
+  </div>
 </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';
+
+const route = useRoute()
 const activeName = ref('first')
+const collectionData = ref({})
+const processViewer = ref(false)
+const processStore = useProcessStore()
+const companyOption = ref([])
+
+const getCompanyOption = async () => {
+  const res = await getSubCompOpt()
+  companyOption.value = res.data
+}
+
+const getDemandCollectionInfo =async () => {
+  if (!route.query.id) return
+  await getCompanyOption()
+  getInfo(route.query.id).then(res => {
+    let data = res.data
+    collectionData.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(() => {
+      processViewer.value = true
+    })
+  })
+}
 const handleClick = (tab, event) => {
   console.log(tab, event)
-  if(tab.index.value === 0){
-
+  if (tab.index.value === 0) {
+    getDemandCollectionInfo()
   }
 }
+getDemandCollectionInfo()
 </script>
 
 <style scoped lang="scss">
-.detail-block{
+.detail-block {
   padding-top: 15px;
-  :deep(.el-tabs__nav-scroll){
+
+  :deep(.el-tabs__nav-scroll) {
     width: 100%;
     display: flex;
-    .el-tabs__nav{
+
+    .el-tabs__nav {
       display: flex;
       flex: 1;
-      .el-tabs__item{
+
+      .el-tabs__item {
         flex: 1;
         font-size: 16px;
       }
-      .is-active{
+
+      .is-active {
         color: black;
         background-color: #DED0B2;
       }
     }
   }
 }
+.approval-record {
+  padding-bottom: 30px;
+
+  .process {
+    position: relative;
+  }
+}
 </style>