审批页面

src/pages/administration/myApproval.vue

+<template>
+  <div class="flexOne">
+    <div class="myApprovalMenu">
+      <li :class="{cked:liCkedIndex==1}">发起审批</li>
+      <li :class="{cked:liCkedIndex==2}"  @click="goUrl('forMyApproval')">我的审批</li>
+      <li :class="{cked:liCkedIndex==3}"  @click="goUrl('myApprovalList')">我发起的</li>
+      <li :class="{cked:liCkedIndex==4}"  @click="goUrl('sendToMeApproval')">抄送我的</li>
+    </div>
+    <!--<p>
+            <el-input class='w200' prefix-icon="el-icon-search"   placeholder="请输入内容"></el-input>
+            &nbsp;
+            <input type="button" class="hollowFixedBtn" value="搜索" />
+        </p>-->
+    <p class="myApprovalMenuTitle" v-if='typeLength>0'>{{myTitle}}（{{typeLength}}）</p>
+    <div class="myApprovalTypeList">
+      <li v-for="(item,index) in typeList"  v-if="item.name!='补卡'"   @click="goUrl('leaveApproval',item.cmd,item.submitCmd,item.id)"><img :src="item.icon"> {{item.name}}</li>
+      <li v-for="(item,index) in typeList"  v-if="item.name=='补卡'" @click="outerVisible = true">   <img :src="item.icon"> {{item.name}}</li>
+    </div>
+    <el-dialog custom-class='w500' title="补卡申请" :visible.sync="outerVisible" center>
+      <div style="text-align: center;  padding: 20px 0;">
+        <i class="iconfont icon-buqiashenqing" style="font-size: 50px; color: #666;"></i>
+        <p style="margin-top: 20px; font-size: 16px; color: #666;">暂只支持在手机上申请补卡！</p>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <button class="normalBtn" @click="outerVisible = false">我知道了</button> &nbsp;
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        outerVisible:false,
+        liCkedIndex:1,
+        //请求数据
+        msg:{
+
+        },
+        //返回数据
+        myTitle:'',
+        typeLength:'',
+        typeList:[],
+      }
+    },
+    methods: {
+      getList(){
+        this.apipost('app_user_workflow_auditworkflow_template',this.msg,res=>{
+          if(res.data.resultCode == 1) {
+            this.typeList=res.data.data[0].templateList
+            this.myTitle=res.data.data[0].groupName
+            this.typeLength=res.data.data[0].templateList.length
+          }
+        },err=>{})
+      },
+      goUrl (path,cmd,submitCmd,id) {
+        this.$router.push({ path: path,query:{"cmd":cmd,"submitCmd":submitCmd,'templateId':id}})
+      }
+    },
+    mounted() {
+      this.getList()
+    }
+  }
+</script>
+
+<style>
+  @import "../financial/css/cssReset.css";
+
+  .myApprovalMenu{width: 100%;   height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 4px; margin: 30px 0;}
+  .myApprovalMenu li{float: left; width:25%; font-size: 14px; color: #666; cursor: pointer;}
+  .myApprovalMenu li:hover{border-bottom: 2px solid #E95252;}
+  .myApprovalMenu li.cked{border-bottom: 2px solid #E95252; font-size: 16px; color:#E95252;}
+  .myApprovalMenuTitle{height: 14px; line-height: 14px; font-size: 14px; color: #333; text-indent: 20px; border-left:3px solid #E95252; margin:40px 0 20px 0;}
+  .myApprovalTypeList li{float: left; height:160px; background: #fff; box-shadow: 1px 1px 1px rgba(0,0,0,.1); cursor:pointer;  border-radius: 4px; width: 360px; line-height: 160px;margin: 0 40px 20px 0;}
+  .myApprovalTypeList li>img{float: left; margin: 36px 20px 38px 22px; width: 86px;}
+</style>

src/router/routes.js

@@ -356,6 +356,35 @@ const routes = [{
         component: () =>
           import("pages/administration/updateProcessDesign.vue")
       },
+      {
+        path: "/administration/myApprovalList", //我的审批
+        component: () =>
+          import("pages/administration/myApprovalList.vue")
+      },
+      {
+        path: "/administration/myApproval", //我的发起
+        component: () =>
+          import("pages/administration/myApproval.vue")
+      },{
+        path: "/administration/forMyApproval", //我的审批
+        component: () =>
+          import("pages/administration/forMyApproval.vue")
+      },
+      {
+        path: "/administration/ApprovalStatistical", //审批统计
+        component: () =>
+          import("pages/administration/ApprovalStatistical.vue")
+      },
+      {
+        path: "/administration/sendToMeApproval", //抄送
+        component: () =>
+          import("pages/administration/sendToMeApproval.vue")
+      },
+      {
+        path: "/administration/leaveApproval", //请假
+        component: () =>
+          import("pages/administration/leaveApproval.vue")
+      },
       {
         path: "/sale/japaneseTrain", //日语培训列表
         component: () =>