审批管理样式调整

src/assets/img/approve_m/future-icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7" stroke="#C0C4CC" stroke-width="2"/>
+</svg>

src/assets/img/approve_m/passed-icon.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2561_11064)">
+<path d="M0 8C0 3.58179 3.58179 0 8 0C12.4182 0 16 3.58179 16 8C16 12.4182 12.4182 16 8 16C3.58179 16 0 12.4182 0 8ZM6.55172 11.0411C6.65221 11.1447 6.78931 11.2048 6.9336 11.2086C7.0779 11.2123 7.2179 11.1593 7.32359 11.061L12.5661 6.18703C12.6724 6.08722 12.735 5.94935 12.7399 5.80357C12.7449 5.65779 12.692 5.51596 12.5927 5.40911C12.4934 5.30227 12.3558 5.23909 12.2101 5.2334C12.0643 5.22771 11.9222 5.27997 11.8149 5.37876L6.98483 9.9029L4.71724 7.56469C4.66696 7.51198 4.60675 7.46975 4.54006 7.44043C4.47338 7.41111 4.40155 7.39529 4.32872 7.39387C4.25589 7.39246 4.1835 7.40548 4.11573 7.43219C4.04795 7.4589 3.98614 7.49876 3.93386 7.54948C3.88157 7.6002 3.83985 7.66077 3.81109 7.7277C3.78233 7.79463 3.76712 7.86659 3.76632 7.93943C3.76552 8.01227 3.77915 8.08455 3.80642 8.15209C3.8337 8.21964 3.87408 8.28111 3.92524 8.33297L6.552 11.0411H6.55172Z" fill="#0052D9"/>
+</g>
+<defs>
+<clipPath id="clip0_2561_11064">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/img/approve_m/process-icon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7" fill="white" stroke="#0052D9" stroke-width="2"/>
+<circle cx="4" cy="8.5" r="1.5" fill="#0052D9"/>
+<circle cx="8" cy="8.5" r="1.5" fill="#0052D9"/>
+<circle cx="12" cy="8.5" r="1.5" fill="#0052D9"/>
+</svg>

src/assets/img/approve_m/reject-icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 7.93442C0.036889 5.7137 0.851645 3.75612 2.51279 2.18473C4.14539 0.640302 6.11295 -0.0867217 8.35598 0.00822671C10.511 0.0994046 12.3505 0.946285 13.8273 2.5179C15.3632 4.15237 16.0877 6.11726 15.9915 8.35695C15.8993 10.5061 15.0568 12.3422 13.4922 13.8175C11.8572 15.3593 9.89104 16.0873 7.6479 15.9917C5.49497 15.8998 3.6592 15.0518 2.18102 13.4843C0.735039 11.951 0.0268387 10.1078 0 7.93442ZM7.19038 7.98972C7.168 8.01406 7.15441 8.02971 7.1399 8.04434C6.69461 8.48983 6.24909 8.93521 5.80368 9.38081C5.46322 9.72142 5.12266 10.062 4.78278 10.4031C4.62677 10.5596 4.57172 10.747 4.62471 10.962C4.68981 11.2261 4.95203 11.4084 5.21859 11.3856C5.37289 11.3724 5.49612 11.3054 5.60347 11.1979C6.38351 10.4164 7.16423 9.63573 7.94484 8.85489C7.96071 8.839 7.97716 8.82392 8.01348 8.78907C8.02684 8.81352 8.03392 8.83797 8.04968 8.85374C8.82812 9.63401 9.60781 10.413 10.3861 11.1935C10.5262 11.3339 10.6882 11.4011 10.8888 11.3838C11.1686 11.3595 11.4141 11.0681 11.3896 10.7885C11.3755 10.6285 11.31 10.4993 11.1977 10.3872C10.4339 9.62464 9.6712 8.86083 8.90818 8.09747C8.80505 7.99418 8.80493 7.99429 8.90749 7.89169C9.67188 7.12696 10.4359 6.36189 11.201 5.59784C11.3367 5.46233 11.4045 5.30466 11.3859 5.11042C11.3538 4.77553 11.0216 4.53764 10.6937 4.61397C10.5534 4.64653 10.4503 4.73097 10.3522 4.82923C9.58337 5.60013 8.81316 6.36966 8.04454 7.1409C8.00776 7.17781 7.98801 7.17895 7.95055 7.14113C7.57515 6.76271 7.19781 6.38623 6.82104 6.00929C6.41195 5.60002 6.0032 5.19029 5.59353 4.78159C5.41857 4.607 5.2106 4.55181 4.9775 4.63751C4.58931 4.78021 4.47145 5.27975 4.78963 5.59499C5.46014 6.25928 6.12528 6.92918 6.79294 7.59645C6.92291 7.72659 7.0547 7.85558 7.19038 7.98972Z" fill="#AD352F"/>
+</svg>

src/assets/img/approve_m/return-icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="#999999"/>
+<path d="M6.21355 4.34426C6.26948 4.28793 6.34477 4.255 6.42411 4.25215C6.50345 4.24931 6.5809 4.27677 6.64072 4.32896C6.70055 4.38115 6.73827 4.45416 6.74622 4.53315C6.75418 4.61214 6.73177 4.6912 6.68355 4.75426L6.65563 4.78635L5.10855 6.33301L6.65563 7.87968C6.70906 7.9331 6.74133 8.00407 6.74646 8.07945C6.75159 8.15483 6.72924 8.22951 6.68355 8.28968L6.65563 8.32176C6.60221 8.3752 6.53124 8.40746 6.45586 8.4126C6.38048 8.41773 6.3058 8.39538 6.24563 8.34968L6.21355 8.32176L4.44605 6.55385C4.39262 6.50043 4.36035 6.42946 4.35521 6.35408C4.35008 6.2787 4.37243 6.20402 4.41813 6.14385L4.44605 6.11218L6.21355 4.34426Z" fill="white" stroke="white" stroke-width="0.3"/>
+<path d="M9.25023 6.02051C9.87811 6.01989 10.4811 6.26579 10.9296 6.70528C11.378 7.14477 11.636 7.74273 11.648 8.3705C11.66 8.99827 11.4251 9.60566 10.9938 10.062C10.5625 10.5183 9.96934 10.7871 9.3419 10.8105L9.25023 10.8122H4.6669C4.58772 10.8122 4.5115 10.7821 4.45365 10.728C4.3958 10.674 4.36062 10.6 4.35522 10.521C4.34982 10.442 4.37461 10.3639 4.42458 10.3025C4.47454 10.241 4.54596 10.2009 4.6244 10.1901L4.6669 10.1872H9.25023C9.71244 10.1872 10.1563 10.0064 10.4871 9.68358C10.8179 9.36073 11.0093 8.92135 11.0205 8.45927C11.0317 7.99719 10.8618 7.54905 10.5471 7.21054C10.2323 6.87204 9.79773 6.67001 9.33606 6.64759L9.25023 6.64551H4.6669C4.58772 6.64548 4.5115 6.61541 4.45365 6.56135C4.3958 6.5073 4.36062 6.4333 4.35522 6.35431C4.34982 6.27532 4.37461 6.19722 4.42458 6.1358C4.47454 6.07438 4.54596 6.03422 4.6244 6.02343L4.6669 6.02051H9.25023Z" fill="white" stroke="white" stroke-width="0.3"/>
+</svg>

src/views/approve_manage/approveDetail.vue

@@ -3,23 +3,23 @@
     <div class="approve-detail-wrap">
         <div class="approve-detail">
             <div class="approve-info">
-                <span>研报名称:123</span>
-                <span>研报分类:456</span>
-                <span>发起人:789</span>
+                <span>研报名称:国内碰上了疫情，美国碰上了倒挂(1234)国内碰上了疫情，美国碰上了倒挂(1234)</span>
+                <span>研报分类:中文研报/日度点评/知白守黑日评</span>
+                <span style="min-width: 100px;">发起人:789</span>
             </div>
             <div class="approve-content">
-                <ReportDetail 
+                <!-- <ReportDetail 
                     :reportId="107"
                     :isPreview="true"
-                />
+                /> -->
                 <!-- <Reportdtl 
                     :reportId="3517"
                     :isEn="false"
                 /> -->
-                <!-- <Reportdtl 
+                <Reportdtl 
                     :reportId="3749"
                     :isEn="true"
-                /> -->
+                />
                 
             </div>
         </div>
@@ -27,15 +27,17 @@
             <div class="tool-btn">
                 <el-button>驳回</el-button>
                 <el-button>通过</el-button>
+                <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>
+                <p>审批流程</p>
                 <div class="timeline">
                     <TimeLine />
                 </div>
+                <div class="approve-status">
+                    <img src="~@/assets/img/approve_m/pending.png" alt="">
+                </div>
             </div>
         </div>
     </div>
@@ -55,36 +57,69 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.approve-detail-wrap{
+    .approve-content{
+        .smart-report-detail{
+            .main-box{
+                width: auto;
+                box-sizing: border-box;
+                margin:0;
+                padding:10px;
+                border:1px solid #C8CDD9;
+                border-radius: 4px;
+            }
+        }
+        #reportdtl{
+            margin:0;
+            padding:10px;
+            border:1px solid #C8CDD9;
+            border-radius: 4px;
+        }
+    }
+}
+</style>
 <style scoped lang="scss">
 .approve-detail-wrap{
     height: calc(100vh - 120px);
-    overflow: hidden;
+    /* overflow-y: hidden; */
     display: flex;
     .approve-detail,.approve-tool{
         height: 100%;
         box-sizing: border-box;
-        padding:30px;
+        /* padding:30px; */
     }
     .approve-tool{
         width:400px;
+        min-width: 360px;
         background-color: #fff;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
         .tool-btn{
+            padding:20px;
             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
-                }
-            }
+            position: relative;
+            margin-left:20px;
+            flex:1;
+            overflow-y: auto;
             .timeline{
-                margin-top:20px;
+                padding:20px;
+                padding-left: 0;
+            }
+            .approve-status{
+                position:absolute;
+                width:200px;
+                height:200px;
+                right:0;
+                bottom:0;
+                overflow: hidden;
+                img{
+                    width:100%;
+                    height:100%;
+                }
             }
         }
     }
@@ -96,16 +131,21 @@ export default {
         flex-direction: column;
         .approve-info{
             display: flex;
-            span{
-                flex: 1;
-                min-width: 30%;
-                word-break: break-all;
-            }
+            gap:60px;
+            padding:15px 20px;
+            border-bottom: 1px solid #C8CDD9;
         }
         .approve-content{
             flex: 1;
+            min-width: 800px;
+            padding:20px;
             overflow-y: auto;
             position:relative;
+            .smart-report-detail{
+                .main-box{
+                    width: auto;
+                }
+            }
         }
     }
 }

src/views/approve_manage/approveList.vue

@@ -16,18 +16,23 @@
                     :props="{value:'ClassifyId',label:'ClassifyName',children:'Children'}"
                     @change="handleSearchChange">
                 </el-cascader>
-                <el-select v-show="activeTab!=='pending'" v-model="timeType" placeholder="时间类型" style="width:120px;">
-                    <el-option label="提交时间" :value="1" />
-                    <el-option label="处理时间" :value="2" v-if="activeTab==='processed'"/>
-                    <el-option label="审批时间" :value="3" v-if="activeTab==='originate'"/>
-                </el-select>
-                <el-date-picker v-model="timeDate"
-                    type="daterange"
-                    range-separator="至"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期">
-                </el-date-picker>
-                <el-select placeholder="请选择处理状态" v-model="statusType">
+                <div class="select-time-box">
+                    <el-select v-show="activeTab!=='pending'" v-model="timeType" 
+                        placeholder="时间类型" style="max-width:120px;" class="custom-select">
+                        <el-option label="提交时间" :value="1" />
+                        <el-option label="处理时间" :value="2" v-if="activeTab==='processed'"/>
+                        <el-option label="审批时间" :value="3" v-if="activeTab==='originate'"/>
+                    </el-select>
+                    <div class="line" v-show="activeTab!=='pending'"></div>
+                    <el-date-picker v-model="timeDate"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">
+                    </el-date-picker>
+                </div>
+                
+                <el-select placeholder="请选择处理状态" v-model="statusType" clearable v-show="activeTab!=='pending'">
                     <template v-if="activeTab==='processed'">
                         <el-option label="已同意" :value="1" />
                         <el-option label="已驳回" :value="2" />
@@ -41,7 +46,7 @@
                     
                 </el-select>
 
-                <el-input v-model="keyword"
+                <el-input v-model="keyword" prefix-icon="el-icon-search" clearable
                     placeholder="请输入报告标题" style="width:260px;margin-left: auto;"></el-input>
             </div>
             <div class="list-box">
@@ -57,14 +62,14 @@
                 <el-table-column label="操作" align="center">
                     <template slot-scope="{row}">
                         <template v-if="activeTab==='pending'">
-                            <el-button type="text" style="padding:0;">审批</el-button>
+                            <el-button type="text" style="padding:0;" @click="toApproveDetail(row,'approve')">审批</el-button>
                         </template>
                         <template v-if="activeTab==='processed'">
-                            <el-button type="text" style="padding:0;">详情</el-button>
+                            <el-button type="text" style="padding:0;" @click="toApproveDetail(row,'detail')">详情</el-button>
                             <el-button type="text" style="padding:0" @click="handleShowDetail(row)">驳回理由</el-button>
                         </template>
                         <template v-if="activeTab==='originate'">
-                            <el-button type="text" style="padding:0;">详情</el-button>
+                            <el-button type="text" style="padding:0;" @click="toApproveDetail(row,'myself')">详情</el-button>
                             <el-button type="text" style="padding:0;">撤销</el-button>
                             <el-button type="text" style="padding:0" @click="handleShowDetail(row)">驳回理由</el-button>
                         </template>
@@ -145,6 +150,15 @@ export default {
             this.isDetailDialogShow = true;
         },
         handleSearchChange(){},
+        toApproveDetail(data,type){
+            this.$router.push({
+                path:'/approveDetail',
+                query:{
+                    type,
+                    approveId:data.id
+                }
+            })
+        }
     },
     mounted(){
         this.getClassifyTree()
@@ -153,6 +167,24 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.approve-list-wrap{
+    .custom-select{
+        .el-input__inner{
+            border-color: #0052D9;
+            background-color: #ECF2FE;
+            color:#0052D9;
+        }
+        .el-input__suffix{
+            color:#0052D9;
+            .el-select__caret{
+                color:#0052D9;
+            }
+        }
+        
+    }
+}
+</style>
 <style scoped lang="scss">
 @import url('./css/pageStyle.scss');
 .approve-list-wrap{
@@ -164,6 +196,16 @@ export default {
             display: flex;
             justify-content: space-between;
             gap:10px;
+            .select-time-box{
+                display: flex;
+                align-items: center;
+                max-width: 380px;
+                .line{
+                    width:10px;
+                    height:1px;
+                    background-color: #C8CDD9;
+                }
+            }
         }
     }
     .list-box{

src/views/approve_manage/components/timeLine.vue

@@ -41,6 +41,40 @@ export default {
                         }
                     ]
                 },
+                {
+                    nodeType:2,
+                    nodeText:'审批人:', //需要拼接
+                    nodeStatus:'reject',//节点未进行到
+                    approveType:'依次审批',
+                    approveList:[
+                        {
+                            approverName:'李四',
+                            approveTime:'',
+                            approveStatus:'待处理'
+                        },{
+                            approverName:'王五',
+                            approveTime:'',
+                            approveStatus:'待处理'
+                        }
+                    ]
+                },
+                {
+                    nodeType:2,
+                    nodeText:'审批人:', //需要拼接
+                    nodeStatus:'return',//节点未进行到
+                    approveType:'依次审批',
+                    approveList:[
+                        {
+                            approverName:'李四',
+                            approveTime:'',
+                            approveStatus:'待处理'
+                        },{
+                            approverName:'王五',
+                            approveTime:'',
+                            approveStatus:'待处理'
+                        }
+                    ]
+                },
                 {
                     nodeType:2,
                     nodeText:'审批人:', //需要拼接

src/views/approve_manage/components/timeLineItem.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="item-wrap">
         <div class="icon-wrap">
-            <div :class="['icon',node.nodeStatus]"></div>
+            <div :class="['icon',node.nodeStatus]">
+                <img :src="require(`@/assets/img/approve_m/${node.nodeStatus}-icon.svg`)" alt="" srcset="">
+            </div>
             <div :class="['line',isLast?'last':'',node.nodeStatus]"></div>
         </div>
         <div class="info-wrap">
@@ -65,24 +67,23 @@ export default {
             transform: translateX(-50%);
         }
         .icon{
-            width:20px;
-            height:20px;
+            width:16px;
+            height:16px;
             border-radius: 50%;
-            background-color: aquamarine;
-            &.process{
-                background-color: orange;
-            }
-            &.future{
-                background-color: gray;
+            background-color: #fff;
+            overflow: hidden;
+            img{
+                width:100%;
+                height:100%;
             }
         }
         .line{
-            top:20px;
+            top:16px;
             width:1px;
-            height:calc(100% - 20px);
-            background-color: aquamarine;
-            &.process,&.future{
-                background-color: gray;
+            height:calc(100% - 16px);
+            background-color: gray;
+            &.passed{
+                background-color: #0052D9;
             }
             &.last{
                 background-color: transparent;
@@ -98,13 +99,15 @@ export default {
                 .normal-text{
                     display: flex;
                     justify-content: space-between;
-                    .time{
-                        color:gray;
-                    }
+                    margin-bottom: 10px;
+                    color:gray;
                 }
                 .approve-reason{
-                    padding-top:5px;
-                    color:gray;
+                    margin-left: -40px;
+                    padding:10px;
+                    padding-left: 40px;
+                    color:#AD352F;
+                    background-color: #FFF0ED;
                 }
             }
         }