fix : 完善详情页面细节

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home-bg">
     <el-row gutter="20">
-      <el-col :xs="24" :sm="16" :md="18" :lg="20" :xl="20">
+      <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
         <div class="left">
           <h3>我的科创工作</h3>
           <el-row :gutter="20" class="statistics">
@@ -16,14 +16,14 @@
             </el-col>
           </el-row>
           <h4>待办 ({{ todoNum }})</h4>
-          <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick">
+          <fvTable ref="tableIns" class="home-table" :tableConfig="tableConfig" @headBtnClick="headBtnClick">
             <template #empty>
               <el-empty description="暂无待办"/>
             </template>
           </fvTable>
         </div>
       </el-col>
-      <el-col :xs="24" :sm="8" :md="6" :lg="4" :xl="4">
+      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
         <div class="right">
           <!--          <div class="right-top">-->
           <!--            <h3>欢迎回来， Sunshine</h3>-->
@@ -161,13 +161,31 @@ const headBtnClick = (key) => {
   .right {
     margin-top: 10px;
   }
-}
+  :deep(.el-table) {
+    height: 300px!important;
+  }
 
+
+}
+@media only screen and (max-width: 1000px) {
+  .right {
+    margin-top: 10px;
+  }
+  :deep(.el-table) {
+    height: 300px!important;
+  }
+
+}
 //.right-gap {
 //  background-color: #EFEFEF;
 //  width: 20px;
 //  //margin-right: -10px;
 //}
+:deep(.el-table) {
+  //height: 200px;
+  //max-height: 400px;
+}
+
 .home-bg {
   height: calc(100vh - 130px);
   max-height: calc(100vh - 96px);
@@ -201,6 +219,7 @@ const headBtnClick = (key) => {
     border-radius: 10px;
     background-color: #ffffff;
 
+
     .el-table__empty-block {
       .el-empty {
         padding: 10px 0;
@@ -276,7 +295,7 @@ const headBtnClick = (key) => {
       background-color: #ffffff;
     }
 
-     .right-top {
+    .right-top {
       flex: 0.48;
 
       > div:first-child {

src/views/projectdemand/demandcollection/detail.vue

@@ -1,30 +1,39 @@
 <template>
   <div class="detail-block">
-    <div class="left-info">
-      <baseTitle title="需求征集详情"></baseTitle>
-      <div class="info">
-        <div v-for="item in list">
-          <span>{{ item.title }}：</span>
-          <span>{{ item.text }}</span>
+    <el-row gutter="20">
+      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="14">
+        <div class="left-info">
+          <baseTitle title="需求征集详情"></baseTitle>
+          <div class="info">
+            <div v-for="item in list">
+              <span>{{ item.title }}：</span>
+              <span>{{ item.text }}</span>
+            </div>
+          </div>
+          <baseTitle title="征集说明"></baseTitle>
+          <el-card>
+            {{ instructions }}
+          </el-card>
+          <baseTitle title="申请文件"></baseTitle>
+          <fvTable ref="tableIns" style="max-height: 200px" :tableConfig="tableConfig" @headBtnClick="headBtnClick" :pagination="false"></fvTable>
+          <baseTitle title="审核意见"></baseTitle>
+          <el-input
+              v-model="auditOpinion"
+              :rows="3"
+              type="textarea"
+              placeholder="请输入审核意见"
+          />
         </div>
-      </div>
-      <baseTitle title="征集说明"></baseTitle>
-      <el-card>
-        {{ instructions }}
-      </el-card>
-      <baseTitle title="申请文件"></baseTitle>
-      <fvTable ref="tableIns" style="max-height: 200px" :tableConfig="tableConfig" @headBtnClick="headBtnClick" :pagination="false"></fvTable>
-      <baseTitle title="审核意见"></baseTitle>
-      <el-input
-          v-model="auditOpinion"
-          :rows="3"
-          type="textarea"
-          placeholder="请输入审核意见"
-      />
-    </div>
-    <div class="approval-record">
-      <baseTitle title="审批记录"></baseTitle>
-    </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="10">
+        <div class="approval-record" >
+          <baseTitle title="审批记录"></baseTitle>
+          <div class="process" id="approvalRecord">
+            <process-tree ref="processTree" mode="view" id-name="approvalRecord"/>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
     <div class="oper-page-btn">
       <el-button  @click="handleSubmit">驳回</el-button>
       <el-button color="#DED0B2" @click="handleBack">同意</el-button>
@@ -33,7 +42,11 @@
 </template>
 
 <script setup lang="jsx">
-
+import {getInitiateInfo} from "@/api/workflow/process-definition.js";
+import ProcessTree from '@/views/workflow/process/ProcessTree.vue';
+import {useProcessStore} from '@/stores/processStore.js';
+import {ElMessage} from "element-plus";
+const processStore = useProcessStore()
 const list = ref([
   {
     title: '名称',
@@ -49,6 +62,7 @@ const list = ref([
     text: '名称名称名称名称'
   },
 ])
+const processTree = ref()
 const instructions = ref('ds')
 const auditOpinion = ref('')
 const tableConfig = reactive({
@@ -79,19 +93,33 @@ const tableConfig = reactive({
       }
     }
   ],
-  api: '/admin/role'
+  api: ''
 })
-
+const getTree=async()=>{
+   getInitiateInfo('pronode_46c5e446-b4d1-495e-a97d-40667fa6aa9f').then(res => {
+    console.log('res11',res)
+    // processDefinition.value = res.data;
+    //构建表单及校验规则
+    processStore.setDesign(res.data)
+    nextTick(() => {
+      processTree.value.init()
+    })
+  }).catch(err => {
+    ElMessage.error(err);
+  });
+}
+getTree()
 </script>
 
 <style lang="scss" scoped>
 .detail-block {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
+  overflow-x: hidden;
+  overflow-y: auto;
 
   .left-info {
     flex: 0.6;
-    margin-right: 30px;
 
     .info {
       display: flex;
@@ -113,6 +141,31 @@ const tableConfig = reactive({
 
   .approval-record {
     flex: 0.4;
+
+
+    .process{
+      //max-height: calc(100vh - 96px);
+      height: calc(100vh - 250px);
+      overflow: auto;
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      // 滚动条轨道
+      &::-webkit-scrollbar-track {
+        background: rgb(239, 239, 239);
+        border-radius: 2px;
+      }
+
+      // 小滑块
+      &::-webkit-scrollbar-thumb {
+        background: rgba(80, 81, 82, 0.29);
+        border-radius: 10px;
+      }
+    }
+
+
   }
 }