.

src/router.js

@@ -276,6 +276,12 @@ const router = new Router({
             name: 'about',
             component: () => import(/* webpackChunkName: "about" */ '@/views/about.vue'),
             meta: { statusBar: 'dark' }
+        },
+        {
+            path: '/approvalList',
+            name: 'approvalList',
+            component: () => import(/* webpackChunkName: "approvalList" */ '@/views/approvalList.vue'),
+            meta: { statusBar: 'dark' }
         }
     ]
 });

src/views/approvalList.vue

@@ -0,0 +1,196 @@
+<template>
+    <div class="approval-root">
+        <nav-bar @click-left="$router.go(-1)">
+            <div slot="title" class="nav-tabs">
+                <div class="nav-tab-item" :class="{ active: tab === 0 }" @click="tab = 0">待办</div>
+                <div class="nav-tab-item" :class="{ active: tab === 1 }" @click="tab = 1">已办</div>
+                <div class="nav-tab-item" :class="{ active: tab === 2 }" @click="tab = 2">完成</div>
+            </div>
+        </nav-bar>
+        <div v-for="item in list" :key="item.id" class="list-item">
+            <div class="strip" :class="getStatusClass(item)"></div>
+            <div class="content-wrapper">
+                <div class="info">
+                    <div class="title">{{ item.approval.name }}</div>
+                    <div class="status" :class="getStatusClass(item)">
+                        {{ getStatus(item) }}
+                        <div class="dot"></div>
+                    </div>
+                </div>
+                <div class="detail">
+                    <div class="creator">{{ item.approval.creator }}</div>
+                    <div class="time">{{ item.approval.createdAt.substring(0, 16).substring(5) }}</div>
+                    <div class="approver">当前审批人：{{ item.approval.currentApprover }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            tab: 0,
+            list: []
+        };
+    },
+    created() {
+        this.getData();
+    },
+    methods: {
+        getData() {
+            this.$http.get('/approvalProcess/my', { status: this.tab, size: 10000 }).then(res => {
+                this.list = res.content;
+            });
+        },
+        getStatus(item) {
+            if (item.approval.status === 'FINISH') {
+                return '完成';
+            } else if (item.status === 'PENDING') {
+                return '待办';
+            } else if (item.status === 'PASS') {
+                return '已通过';
+            } else {
+                return '不通过';
+            }
+        },
+        getStatusClass(item) {
+            if (item.approval.status === 'FINISH') {
+                return 'finish';
+            } else if (item.status === 'PENDING') {
+                return 'pending';
+            } else if (item.status === 'PASS') {
+                return 'pass';
+            } else {
+                return 'deny';
+            }
+        }
+    },
+    watch: {
+        tab() {
+            this.getData();
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.approval-root {
+    background: #f5f7fa !important;
+}
+.nav-tabs {
+    .flex();
+    .nav-tab-item {
+        width: 76px;
+        font-size: 16px;
+        color: black;
+        .flex();
+        justify-content: center;
+        transition: all 0.2s;
+        &.active {
+            color: @prim;
+            font-weight: bold;
+            transform: scale(1.1);
+        }
+    }
+}
+.list-item {
+    .flex();
+    height: 80px;
+    margin: 16px 15px 0 15px;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    &:last-child {
+        margin-bottom: 16px;
+    }
+    .strip {
+        height: 100%;
+        width: 6px;
+        min-width: 6px;
+        &.pending {
+            background: @prim;
+        }
+        &.pass {
+            background: #34b918;
+        }
+        &.deny {
+            background: #ff8833;
+        }
+        &.finish {
+            background: #34b918;
+        }
+    }
+    .content-wrapper {
+        height: 100%;
+        padding: 12px 12px 14px 6px;
+        flex-grow: 1;
+        .flex-col();
+        justify-content: space-between;
+        .info {
+            .flex();
+            .title {
+                font-size: 16px;
+                color: black;
+                flex-grow: 1;
+                .ellipsisLn(1);
+            }
+            .status {
+                font-size: 13px;
+                .flex();
+                .dot {
+                    width: 8px;
+                    min-width: 8px;
+                    border-radius: 4px;
+                    margin-left: 6px;
+                    height: 8px;
+                }
+                &.pending {
+                    color: @prim;
+                    .dot {
+                        background: @prim;
+                    }
+                }
+                &.pass {
+                    color: #34b918;
+                    .dot {
+                        background: #34b918;
+                    }
+                }
+                &.deny {
+                    color: #ff8833;
+                    .dot {
+                        background: #ff8833;
+                    }
+                }
+                &.finish {
+                    color: #34b918;
+                    .dot {
+                        background: #34b918;
+                    }
+                }
+            }
+        }
+        .detail {
+            color: @text3;
+            font-size: 13px;
+            .flex();
+            .creator {
+                .ellipsisLn(1);
+                width: 80px;
+                min-width: 80px;
+            }
+            .time {
+                color: @text4;
+                margin-left: 10px;
+                width: 85px;
+                min-width: 85px;
+            }
+            .approver {
+                flex-grow: 1;
+                text-align: right;
+                .ellipsisLn(1);
+            }
+        }
+    }
+}
+</style>

src/views/index/my.vue

@@ -43,6 +43,11 @@
                 <div class="text">关于我们</div>
                 <img src="../../assets/icon_into.png" class="into" />
             </div>
+            <div class="item" v-if="canApproval" @click="to('/approvalList')">
+                <img src="../../assets/info_icon_shenpi.png" class="icon" />
+                <div class="text">办公审批</div>
+                <img src="../../assets/icon_into.png" class="into" />
+            </div>
             <div class="item" @click="to('/settings')">
                 <img src="../../assets/my_menu_icon_5.png" class="icon" />
                 <div class="text">系统设置</div>
@@ -56,7 +61,8 @@ import { mapState } from 'vuex';
 export default {
     data() {
         return {
-            showBadge: false
+            showBadge: false,
+            canApproval: false
         };
     },
     computed: {
@@ -68,8 +74,22 @@ export default {
                 this.showBadge = true;
             }
         });
+        this.getCanApproval();
     },
     methods: {
+        getCanApproval() {
+            if (this.userInfo && this.userInfo.id) {
+                this.$http.get('/approver/all', { query: { userId: this.userInfo.id } }).then(res => {
+                    if (res.content.length) {
+                        this.canApproval = true;
+                    } else {
+                        this.canApproval = false;
+                    }
+                });
+            } else {
+                this.canApproval = false;
+            }
+        },
         to(to, login = true) {
             if (login) {
                 if (this.checkLogin()) {
@@ -79,6 +99,11 @@ export default {
                 this.$router.push(to);
             }
         }
+    },
+    watch: {
+        userInfo() {
+            this.getCanApproval();
+        }
     }
 };
 </script>

src/views/login.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <nav-bar title="登录" @click-left="$router.go(-1)"></nav-bar>
-        <div class="cell" style="margin-top:40px;">
+        <!-- <div class="cell" style="margin-top:40px;">
             <img class="icon" src="../assets/login_icon_phone.png" />
             <input placeholder="请输入手机号" type="tel" v-model="phone" />
         </div>
@@ -12,6 +12,19 @@
             <div class="btn-code" v-else @click="sendCode">发送验证码</div>
         </div>
         <div class="btn-lg btn-login" @click="login">登录</div>
+        <router-link tag="div" to="/register" replace class="btn-lg-o btn-register">
+            暂无账号，立即注册
+        </router-link> -->
+
+        <div class="cell" style="margin-top:40px;">
+            <img class="icon" src="../assets/login_icon_phone.png" />
+            <input placeholder="请输入用户名" v-model="username" />
+        </div>
+        <div class="cell">
+            <img class="icon" src="../assets/login_icon_code.png" />
+            <input placeholder="请输入密码" v-model="password" type="password" />
+        </div>
+        <div class="btn-lg btn-login" @click="loginPwd">登录</div>
         <router-link tag="div" to="/register" replace class="btn-lg-o btn-register">
             暂无账号，立即注册
         </router-link>
@@ -23,7 +36,9 @@ export default {
         return {
             phone: '',
             code: '',
-            time: 0
+            time: 0,
+            username: '',
+            password: ''
         };
     },
     methods: {
@@ -65,6 +80,31 @@ export default {
                 .catch(e => {
                     this.$toast(e.error || '登录失败，请稍后再试');
                 });
+        },
+        loginPwd() {
+            if (!this.username) {
+                this.$toast('请输入用户名');
+                return;
+            }
+            if (!this.password) {
+                this.$toast('请输入密码');
+                return;
+            }
+            this.$toast.loading();
+            this.$http
+                .post('/auth/loginApp', {
+                    username: this.username,
+                    password: this.password
+                })
+                .then(res => {
+                    localStorage.setItem('token', res);
+                    this.$store.dispatch('updateUserInfo');
+                    this.$router.go(-1);
+                    this.$toast.success('登录成功');
+                })
+                .catch(e => {
+                    this.$toast(e.error || '登录失败，请稍后再试');
+                });
         }
     }
 };