几个页面布局

src/routes/modules/approveRoutes.js

@@ -12,7 +12,7 @@ export default [
             component:()=>import('@/views/approve_manage/approveList.vue'),
             hidden:false
         },{
-            path:'approveList',
+            path:'approveDetail',
             name:'审批详情',
             component:()=>import('@/views/approve_manage/approveDetail.vue'),
             hidden:false

src/routes/modules/oldRoutes.js

@@ -326,7 +326,13 @@ export default [
       {
         path: "approveSetting",
         component: () => import("@/views/approve_manage/approveSetting.vue"),
-        name: "审批流设置",
+        name: "审批流配置",
+        hidden: true,
+      },
+      {
+        path: "approveEdit",
+        component: () => import("@/views/approve_manage/approveEdit.vue"),
+        name: "编辑审批流",
         hidden: true,
       },
     ],

src/views/approve_manage/approveEdit.vue

@@ -1,23 +1,58 @@
 <template>
     <!-- 添加编辑审批流 -->
-    <div>
-        添加编辑审批流
+    <div class="approve-edit-wrap page-wrap">
+        <div class="head-box">
+            <el-form :inline="true" :model="approveForm" class="demo-form-inline">
+                <el-form-item label="审批流名称">
+                    <el-input v-model="approveForm.name" placeholder="请输入审批流名称"></el-input>
+                </el-form-item>
+                <el-form-item label="关联报告">
+                    <el-select v-model="approveForm.region" placeholder="活动区域">
+                    <el-option label="区域一" value="shanghai"></el-option>
+                    <el-option label="区域二" value="beijing"></el-option>
+                    </el-select>
+                </el-form-item>
+                </el-form>
+            <div class="btn">
+                <el-button>取消</el-button>
+                <el-button>保存</el-button>
+            </div>
+        </div>
+        <!-- 审批流画布 -->
+        <div class="flow-editor-wrap">
+            <FlowEdiotr></FlowEdiotr>
+        </div>
     </div>
 </template>
 
 <script>
+import FlowEdiotr from './components/flowEdiotr.vue';
+
 export default {
     data() {
         return {
-
+            approveForm:{}
         };
     },
-    methods: {
-
-    },
+    methods: {},
+    components: { FlowEdiotr }
 };
 </script>
 
 <style scoped lang="scss">
-
+@import url('./css/pageStyle.scss');
+.approve-edit-wrap{
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 120px);
+    .head-box{
+        display: flex;
+        justify-content: space-between;
+    }
+    .flow-editor-wrap{
+        flex:1;
+        overflow: hidden;
+        background-color: aqua;
+    }
+}
 </style>

src/views/approve_manage/approveList.vue

@@ -1,7 +1,57 @@
 <template>
     <!-- 审批管理列表页 -->
-    <div>
-
+    <div class="approve-list-wrap page-wrap">
+        <div class="head-tab">
+            <el-tabs v-model="activeTabs" @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"></el-tab-pane>
+            </el-tabs>
+        </div>
+        <div class="approve-list">
+            <div class="select-box">
+                <div class="box">
+                    <el-select placeholder="请选择关联报告" style="margin-right: 20px;"></el-select>
+                    <el-select v-show="activeTabs!=='first'" placeholder="时间类型" style="width:120px;"></el-select>
+                    <el-date-picker type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">
+                    </el-date-picker>
+                    <el-select placeholder="请选择处理状态" style="margin-left: 20px;"></el-select>
+                </div>
+                <el-input placeholder="请输入报告标题" style="width:260px;"></el-input>
+            </div>
+            <div class="list-box">
+                <el-table :data="tableData" border>
+                <el-table-column
+                    v-for="item in tableColumns"
+                    :key="item.key"
+                    :label="item.label"
+                    :prop="item.key"
+                    align="center"
+                ></el-table-column>
+                <el-table-column label="操作" align="center">
+                    <template slot-scope="{row}">
+                        <el-button type="text" style="padding:0;">详情</el-button>
+                        <el-button type="text" style="padding:0">驳回理由</el-button>
+                    </template>
+                    
+                </el-table-column>
+            </el-table>
+            <div style="text-align:right;margin-top:20px">
+                <el-pagination 
+                        layout="total,prev,pager,next,jumper" 
+                        background 
+                        :current-page="page"
+                        @current-change="handleCurrentChange"
+                        :page-size="pageSize"
+                        :total="total"
+                        style="display: inline-block"
+                    />
+            </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -9,15 +59,54 @@
 export default {
     data() {
         return {
-
+            activeTabs:'first',
+            tableData:[{name:1}],
+            tableColumns:[{
+                label:'报告标题',
+                key:'name'
+            },{
+                label:'关联报告',
+                key:'catalog'
+            },{
+                label:'提交人',
+                key:'approve'
+            },{
+                label:'提交时间',
+                key:'time'
+            },{
+                label:'处理时间',
+                key:'time2'
+            },{
+                label:'处理结果',
+                key:'result'
+            }],
+            page:1,
+            pageSize:10,
+            total:0,
         };
     },
     methods: {
-
+        handleCurrentChange(page){
+            this.page = page
+        }
     },
 };
 </script>
 
 <style scoped lang="scss">
-
+@import url('./css/pageStyle.scss');
+.approve-list-wrap{
+    .head-tab{
+        margin-bottom: 5px;
+    }
+    .approve-list{
+        .select-box{
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+    .list-box{
+        margin-top:20px;
+    }
+}
 </style>

src/views/approve_manage/approveSetting.vue

@@ -1,8 +1,8 @@
 <template>
     <!-- 审批流配置 -->
-    <div class="approve-setting-wrap">
+    <div class="approve-setting-wrap page-wrap">
         <div class="head-box">
-            <el-button>添加审批流</el-button>
+            <el-button type="primary" @click="$router.push('/approveEdit')">添加审批流</el-button>
             <el-select placeholder="请选择关联报告" style="margin-right: auto;margin-left: 15px;"></el-select>
             <el-input placeholder="请输入审批名称" style="width:260px;"></el-input>
         </div>
@@ -17,8 +17,8 @@
                 ></el-table-column>
                 <el-table-column label="操作" align="center">
                     <template slot-scope="{row}">
-                        <el-button type="text">编辑</el-button>
-                        <el-button type="text">删除</el-button>
+                        <el-button type="text" style="padding:0;">编辑</el-button>
+                        <el-button type="text" style="padding:0">删除</el-button>
                     </template>
                     
                 </el-table-column>
@@ -67,11 +67,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import url('./css/pageStyle.scss');
 .approve-setting-wrap{
-    min-height: calc(100vh - 120px);
-    background-color: #fff;
-    box-sizing: border-box;
-    padding:30px;
     .head-box{
         display: flex;
         justify-content: space-between;

src/views/approve_manage/components/flowEdiotr.vue

@@ -0,0 +1,40 @@
+<template>
+    <!-- 审批流内容 -->
+    <div class="flow-editor">
+        <div class="node">发起人</div>
+        <div class="node">发起人</div>
+        <div class="node">发起人</div>
+        <div class="node">发起人</div>
+        <div class="node">发起人</div>
+        <div class="node">发起人</div>
+        <div class="node">发起人</div>
+        <div class="node">发起人</div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.flow-editor{
+    width:100%;
+    height: 100%;
+    overflow:auto;
+    background-color: gray;
+    .node{
+        width:200px;
+        height:300px;
+        background-color: white;
+    }
+}
+</style>

src/views/approve_manage/css/pageStyle.scss

@@ -0,0 +1,6 @@
+.page-wrap{
+    min-height: calc(100vh - 120px);
+    background-color: #fff;
+    box-sizing: border-box;
+    padding:30px;
+}