审批详情,研报预览,时间线,布局,基础样式

src/views/approve_manage/approveDetail.vue

@@ -1,23 +1,112 @@
 <template>
     <!-- 审批详情：查看、进行审批操作 -->
-    <div>
-        审批详情
+    <div class="approve-detail-wrap">
+        <div class="approve-detail">
+            <div class="approve-info">
+                <span>研报名称:123</span>
+                <span>研报分类:456</span>
+                <span>发起人:789</span>
+            </div>
+            <div class="approve-content">
+                <ReportDetail 
+                    :reportId="107"
+                    :isPreview="true"
+                />
+                <!-- <Reportdtl 
+                    :reportId="3517"
+                    :isEn="false"
+                /> -->
+                <!-- <Reportdtl 
+                    :reportId="3749"
+                    :isEn="true"
+                /> -->
+                
+            </div>
+        </div>
+        <div class="approve-tool">
+            <div class="tool-btn">
+                <el-button>驳回</el-button>
+                <el-button>通过</el-button>
+            </div>
+            <div class="approve-timeline-wrap">
+                <div class="timelint-head">
+                    <span>审批流程</span>
+                    <span class="status">待审批</span>
+                </div>
+                <div class="timeline">
+                    <TimeLine />
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+import ReportDetail from '@/views/smartReport/reportDetail.vue';
+import Reportdtl from '@/views/report_manage/reportdtl.vue'
+import TimeLine from './components/timeLine.vue';
+
 export default {
     data() {
-        return {
-
-        };
-    },
-    methods: {
-
+        return {};
     },
+    methods: {},
+    components: { TimeLine, ReportDetail ,Reportdtl }
 };
 </script>
 
 <style scoped lang="scss">
-
+.approve-detail-wrap{
+    height: calc(100vh - 120px);
+    overflow: hidden;
+    display: flex;
+    .approve-detail,.approve-tool{
+        height: 100%;
+        box-sizing: border-box;
+        padding:30px;
+    }
+    .approve-tool{
+        width:400px;
+        background-color: #fff;
+        .tool-btn{
+            text-align: right;
+            margin-bottom: 20px;
+        }
+        .approve-timeline-wrap{
+            .timelint-head{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .status{
+                    padding:5px;
+                    background-color:#FF8D0063;
+                    color:#FF8D00
+                }
+            }
+            .timeline{
+                margin-top:20px;
+            }
+        }
+    }
+    .approve-detail{
+        flex: 1;
+        margin-right:20px;
+        background-color: #fff;
+        display: flex;
+        flex-direction: column;
+        .approve-info{
+            display: flex;
+            span{
+                flex: 1;
+                min-width: 30%;
+                word-break: break-all;
+            }
+        }
+        .approve-content{
+            flex: 1;
+            overflow-y: auto;
+            position:relative;
+        }
+    }
+}
 </style>

src/views/approve_manage/components/timeLine.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="time-line-wrap">
+        <ul>
+            <li v-for="(node,index) in mockTimeLine" :key="index">
+                <TimeLineItem :node="node" :isLast="index===mockTimeLine.length-1"/>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import TimeLineItem from './timeLineItem.vue';
+export default {
+    components:{TimeLineItem},
+    data() {
+        return {
+            mockTimeLine:[
+                {
+                    nodeType:1,
+                    nodeText:'发起人:',
+                    approveList:[{
+                        approverName:'张三',
+                        approveTime:'2023-10-10 10:10:10'
+                    }],
+                    nodeStatus:'passed',//节点已通过,withdraw:节点已撤回
+                },{
+                    nodeType:2,
+                    nodeText:'审批人:', //需要拼接成 审批人:2人(会签)
+                    nodeStatus:'process',//节点正在进行中
+                    approveType:'会签',
+                    approveList:[
+                        {
+                            approverName:'李四',
+                            approveTime:'2023-10-10 10:15:10',
+                            approveStatus:'已同意'
+                        },{
+                            approverName:'王五',
+                            approveTime:'2023-10-10 10:22:00',
+                            approveStatus:'已驳回',
+                            approveReason:'就是驳回'
+                        }
+                    ]
+                },
+                {
+                    nodeType:2,
+                    nodeText:'审批人:', //需要拼接
+                    nodeStatus:'future',//节点未进行到
+                    approveType:'依次审批',
+                    approveList:[
+                        {
+                            approverName:'李四',
+                            approveTime:'',
+                            approveStatus:'待处理'
+                        },{
+                            approverName:'王五',
+                            approveTime:'',
+                            approveStatus:'待处理'
+                        }
+                    ]
+                }
+            ]
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/approve_manage/components/timeLineItem.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="item-wrap">
+        <div class="icon-wrap">
+            <div :class="['icon',node.nodeStatus]"></div>
+            <div :class="['line',isLast?'last':'',node.nodeStatus]"></div>
+        </div>
+        <div class="info-wrap">
+            <!-- 发起人或审批人 -->
+            <div class="normal-text">
+                <p>{{node.nodeText}}</p>
+            </div>
+            <ul class="approve-list">
+                <li v-for="(item,itemIndex) in node.approveList" :key="itemIndex">
+                    <div class="approve-item-wrap">
+                        <!-- 审批人(审批状态) 审批时间-->
+                        <div class="normal-text">
+                            <p>{{item.approverName}} <span v-if="item.approveStatus">{{'('+item.approveStatus+')'}}</span> </p>
+                            <span class="time">{{item.approveTime||''}}</span>
+                        </div>
+                        <!-- 驳回理由 -->
+                        <div class="approve-reason" v-if="item.approveReason">
+                            驳回理由:{{item.approveReason}}
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props:{
+        node:{
+            type:Object,
+            default:{}
+        },
+        isLast:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.item-wrap{
+    display: flex;
+    width:100%;
+    .icon-wrap{
+        width:25px;
+        /* border:1px solid black; */
+        position:relative;
+        .icon,.line{
+            position:absolute;
+            left:50%;
+            transform: translateX(-50%);
+        }
+        .icon{
+            width:20px;
+            height:20px;
+            border-radius: 50%;
+            background-color: aquamarine;
+            &.process{
+                background-color: orange;
+            }
+            &.future{
+                background-color: gray;
+            }
+        }
+        .line{
+            top:20px;
+            width:1px;
+            height:calc(100% - 20px);
+            background-color: aquamarine;
+            &.process,&.future{
+                background-color: gray;
+            }
+            &.last{
+                background-color: transparent;
+            }
+        }
+    }
+    .info-wrap{
+        flex:1;
+        margin-left: 15px;
+        margin-bottom: 20px;
+        .approve-list{
+            .approve-item-wrap{
+                .normal-text{
+                    display: flex;
+                    justify-content: space-between;
+                    .time{
+                        color:gray;
+                    }
+                }
+                .approve-reason{
+                    padding-top:5px;
+                    color:gray;
+                }
+            }
+        }
+        
+    }
+}
+</style>

src/views/report_manage/reportdtl.vue

@@ -7,7 +7,7 @@
 		</div>
 		
 		<!-- 英文版摘要+overview -->
-		<div id="abstract-en" v-if="$route.query.fromPage=='en'">
+		<div id="abstract-en" v-if="$route.query.fromPage=='en'||isEn">
 			<div 
 				class="abstract" 
 				:style="{borderBottom:reportInfo.Overview?'1px solid #C1C1C1':'none',paddingBottom:reportInfo.Overview?'20px':'0'}"
@@ -31,7 +31,7 @@
 			</div>
 		</div>
 		<div id="abstract" v-else>
-		  <div>{{$route.query.fromPage=='en'?'Abstract':'摘要'}}：{{reportInfo.Abstract}}</div>
+		  <div>{{($route.query.fromPage=='en'||isEn)?'Abstract':'摘要'}}：{{reportInfo.Abstract}}</div>
 		</div>
 		<div id="resetsty" style="padding:30px; box-sizing:border-box; overflow:hidden;">
 			<block v-if="reportInfo.ChapterType=='day'||reportInfo.ChapterType=='week'">
@@ -95,6 +95,16 @@
 				return str
 			}
 		},
+		props:{
+			reportId:{ //审批详情-预览报告
+				type:Number,
+				default:0
+			},
+			isEn:{
+				type:Boolean,
+				default:false
+			}
+		},
 		data() {
 			return {
 				id:parseInt(this.$route.query.id),
@@ -110,7 +120,7 @@
 			vueQr
 		},
 		mounted() {
-			if(this.$route.query.id) {
+			if(this.$route.query.id||this.reportId) {
 				this.getreportdetail();
 			}else {
 				let reportdtl=sessionStorage.getItem('reportdtl') || false;
@@ -136,12 +146,13 @@
 			},
 			async getreportdetail(){
 				let res
-				if(this.$route.query.fromPage == 'en'){
-					res=await reportEnInterface.reportDetail({ReportId:parseInt(this.id)})
+				let reportId = this.id||this.reportId
+				if((this.$route.query.fromPage == 'en'||this.isEn)){
+					res=await reportEnInterface.reportDetail({ReportId:parseInt(reportId)})
 				}else if(this.$route.query.fromPage == 'strategyReport'){
-					res=await strategyReportInterence.getReportDetail({Id:parseInt(this.id)})
+					res=await strategyReportInterence.getReportDetail({Id:parseInt(reportId)})
 				}else{
-					res=await reportdetail({ReportId:parseInt(this.id)})
+					res=await reportdetail({ReportId:parseInt(reportId)})
 				}
 
 				if( res.Ret!==200 )return

src/views/smartReport/reportDetail.vue

@@ -10,7 +10,7 @@
             </div> -->
             <div class="html-wrap" v-html="content"></div>
         </div>
-        <div class="right-opt-box" v-if="$route.query.type!=='preview'">
+        <div class="right-opt-box" v-if="$route.query.type!=='preview'&&!reportId">
             <div 
                 class="item copy" 
                 v-if="linkUrl" 
@@ -73,6 +73,12 @@ export default {
             return ['2','3'].includes(type)
         }
     },
+    props:{
+        reportId:{//审批详情-预览报告
+            type:Number,
+            default:0
+        }
+    },
     data() {
         return {
             reportInfo:null,
@@ -87,7 +93,7 @@ export default {
     methods: {
         // 获取报告详情
         getReportDetail(){
-            const id=this.$route.query.id||0
+            const id=this.$route.query.id||this.reportId||0
             if(!id) return
             apiSmartReport.reportDetail({
                 SmartReportId:Number(id)