From d14d5a59427e7ec65de1b172bb4a38025b08ace2 Mon Sep 17 00:00:00 2001
From: HEXIANG <869411657@qq.com>
Date: Wed, 12 Apr 2023 16:41:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=AE=A1=E6=89=B9=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/pages/manage.vue          |   1 +
 .../assets/js/pages/manage/review/details.vue |  95 +++++++
 .../assets/js/pages/manage/review/index.vue   | 119 +++++++++
 .../assets/js/pages/manage/review/list.vue    |  24 ++
 .../js/pages/manage/setting/approve.vue       |  58 +++++
 .../assets/js/pages/manage/setting/index.vue  |   1 +
 resources/assets/js/routes.js                 |  10 +
 resources/assets/sass/pages/_.scss            |   1 +
 resources/assets/sass/pages/page-review.scss  | 231 ++++++++++++++++++
 resources/assets/sass/pages/page-setting.scss |  48 ++++
 10 files changed, 588 insertions(+)
 create mode 100644 resources/assets/js/pages/manage/review/details.vue
 create mode 100644 resources/assets/js/pages/manage/review/index.vue
 create mode 100644 resources/assets/js/pages/manage/review/list.vue
 create mode 100644 resources/assets/js/pages/manage/setting/approve.vue
 create mode 100644 resources/assets/sass/pages/page-review.scss

diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index 48c7969b7..53f459a8b 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -546,6 +546,7 @@ export default {
                     {path: 'archivedProject', name: '已归档的项目'},
 
                     {path: 'team', name: '团队管理', divided: true},
+                    {path: 'review', name: '审批中心'},
                 ])
             } else {
                 array.push(...[
diff --git a/resources/assets/js/pages/manage/review/details.vue b/resources/assets/js/pages/manage/review/details.vue
new file mode 100644
index 000000000..a69622eac
--- /dev/null
+++ b/resources/assets/js/pages/manage/review/details.vue
@@ -0,0 +1,95 @@
+<template>
+    <div class="review-details">
+        <div class="review-details-box">
+            <h2 class="review-details-title">请假<Tag color="success">已通过</Tag></h2>
+            <h3 class="review-details-subtitle"><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="24"/><span>请假名字</span></h3>
+            <Divider/>
+            <div class="review-details-text">
+                <h4>{{$L('假期类型')}}</h4>
+                <p>{{$L('事假')}}</p>
+            </div>
+            <div class="review-details-text">
+                <h4>{{$L('开始时间')}}</h4>
+                <p>{{$L('2023年1月1日')}}</p>
+            </div>
+            <div class="review-details-text">
+                <h4>{{$L('结束时间')}}</h4>
+                <p>{{$L('2023年1月2日')}}</p>
+            </div>
+            <div class="review-details-text">
+                <h4>{{$L('时长')}}（小时）</h4>
+                <p>{{$L('1天')}}</p>
+            </div>
+            <div class="review-details-text">
+                <h4>{{$L('请假事由')}}</h4>
+                <p>{{$L('什么什么什么的')}}</p>
+            </div>
+            <Divider/>
+            <h3 class="review-details-subtitle">{{$L('审批进程')}}</h3>
+            <div class="review-details-process">
+                <div class="review-details-line"></div>
+
+                <div class="review-process">
+                    <div class="review-process-left">
+                        <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="48"/>
+                        <div class="review-process-text">
+                            <p class="review-process-name">审核人名字</p>
+                            <p class="review-process-state">已通过</p>
+                        </div>
+                    </div>
+                    <div class="review-process-right">
+                        2023-1-1 12:32:32
+                    </div>
+                </div>
+
+                <div class="review-process">
+                    <div class="review-process-left">
+                        <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="48"/>
+                        <div class="review-process-text">
+                            <p class="review-process-name">审核人名字</p>
+                            <p class="review-process-state">已通过</p>
+                        </div>
+                    </div>
+                    <div class="review-process-right">
+                        2023-1-1 12:32:32
+                    </div>
+                </div>
+
+                <div class="review-process">
+                    <div class="review-process-left">
+                        <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="48"/>
+                        <div class="review-process-text">
+                            <p class="review-process-name">抄送人</p>
+                            <p class="review-process-state">已抄送</p>
+                        </div>
+                    </div>
+                    <div class="review-process-right">
+                        2023-1-1 12:32:32
+                    </div>
+                </div>
+            </div>
+            <div class="review-copy">
+                <div class="review-copy-member">
+                    <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="24"/>抄送人
+                </div>
+            </div>
+        </div>
+
+        <div class="review-operation">
+            <Button type="text">通过</Button>
+            <Button type="text">拒绝</Button>
+            <Button type="text">撤销</Button>
+            <Button type="text">删除</Button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "details"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/assets/js/pages/manage/review/index.vue b/resources/assets/js/pages/manage/review/index.vue
new file mode 100644
index 000000000..7350225c5
--- /dev/null
+++ b/resources/assets/js/pages/manage/review/index.vue
@@ -0,0 +1,119 @@
+<template>
+    <div class="page-review">
+        <PageTitle :title="$L('审批中心')"/>
+        <div class="review-wrapper" ref="fileWrapper">
+            <div class="review-head">
+                <div class="review-nav">
+                    <h1>{{$L('审批中心')}}</h1>
+                </div>
+            </div>
+            <div class="review-main">
+                <div class="review-main-left">
+                    <div class="review-main-search">
+                        <div>
+                            <Dropdown @on-click="changeTime" trigger="click">
+                                <a href="javascript:void(0)">
+                                    {{ timeChose }}<Icon type="ios-arrow-down"></Icon>
+                                </a>
+                                <template #list>
+                                    <DropdownMenu>
+                                        <DropdownItem name="all">{{$L('所有时间')}}</DropdownItem>
+                                        <DropdownItem name="24">{{$L('最近24小时')}}</DropdownItem>
+                                        <DropdownItem name="7">{{$L('最近7天')}}</DropdownItem>
+                                        <DropdownItem name="30">{{$L('最近30天')}}</DropdownItem>
+                                        <DropdownItem name="customize">{{$L('自定义时间')}}</DropdownItem>
+                                    </DropdownMenu>
+                                </template>
+                            </Dropdown>
+
+                            <Dropdown @on-click="" trigger="click">
+                                <a href="javascript:void(0)">
+                                    {{ timeChose }}<Icon type="ios-arrow-down"></Icon>
+                                </a>
+                                <template #list>
+                                    <DropdownMenu>
+                                        <DropdownItem name="all">{{$L('全部状态')}}</DropdownItem>
+                                        <DropdownItem name="0">{{$L('审批中')}}</DropdownItem>
+                                        <DropdownItem name="1">{{$L('已通过')}}</DropdownItem>
+                                        <DropdownItem name="-1">{{$L('已拒绝')}}</DropdownItem>
+                                        <DropdownItem name="-2">{{$L('已撤回')}}</DropdownItem>
+                                        <DropdownItem name="-3">{{$L('已删除')}}</DropdownItem>
+                                    </DropdownMenu>
+                                </template>
+                            </Dropdown>
+                        </div>
+                        <Dropdown @on-click="" trigger="click">
+                            <a href="javascript:void(0)">
+                                <Icon type="ios-arrow-down" />
+                            </a>
+                            <template #list>
+                                <DropdownMenu>
+                                    <DropdownItem name="all">{{$L('最新发起优先')}}</DropdownItem>
+                                    <DropdownItem name="24">{{$L('最早发起优先')}}</DropdownItem>
+                                </DropdownMenu>
+                            </template>
+                        </Dropdown>
+
+                    </div>
+                    <div class="review-main-list">
+                        <list></list>
+                        <list></list>
+                        <list></list>
+                        <list></list>
+                        <list></list>
+                        <list></list>
+                        <list></list>
+                        <list></list>
+                        <list></list>
+                        <list></list>
+                        <list></list>
+                        <list></list>
+                        <list></list>
+                    </div>
+                </div>
+                <div class="review-main-right">
+                    <listDetails></listDetails>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import list from "./list";
+import listDetails from "./details";
+export default {
+    components:{list,listDetails},
+    name: "review",
+    data(){
+        return{
+            timeChose:this.$L('所有时间'),
+        }
+    },
+    methods:{
+        changeTime(e){
+            switch (e) {
+                case 'all':
+                    this.timeChose = this.$L('所有时间');
+                    return;
+                case '24':
+                    this.timeChose = this.$L('最近24小时');
+                    return;
+                case '7':
+                    this.timeChose = this.$L('最近7天');
+                    return;
+                case '30':
+                    this.timeChose = this.$L('最近30天');
+                    return;
+                case 'customize':
+                    this.timeChose = this.$L('自定义时间');
+                    return;
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/assets/js/pages/manage/review/list.vue b/resources/assets/js/pages/manage/review/list.vue
new file mode 100644
index 000000000..e2d382bd8
--- /dev/null
+++ b/resources/assets/js/pages/manage/review/list.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="review-list review-list-active">
+        <h2><span class="list-name">请假类型</span> <Tag color="success">已通过</Tag></h2>
+        <p>{{$L('假期类型：')}}<span>{{$L('事假')}}</span></p>
+        <p>{{$L('开始时间：')}}<span>{{$L('2023年1月1日')}}</span></p>
+        <p>{{$L('结束时间：')}}<span>{{$L('2023年1月2日')}}</span></p>
+        <div class="list-member">
+            <span>
+                  <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="18"/>
+                请假名字
+            </span>
+            <span>
+                发起时间：2023年1月2日
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "list"
+}
+</script>
+
diff --git a/resources/assets/js/pages/manage/setting/approve.vue b/resources/assets/js/pages/manage/setting/approve.vue
new file mode 100644
index 000000000..680b0f762
--- /dev/null
+++ b/resources/assets/js/pages/manage/setting/approve.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="setting-item submit">
+        <Row class="approve-row" :gutter="8">
+            <Col :xxl="{ span: 6 }" :xl="{ span: 8 }" :lg="{ span: 12 }" :sm="{ span: 24 }" :xs="{ span: 24 }" >
+                <div class="approve-col-box approve-col-add">
+                    <Icon type="md-add" />
+                </div>
+
+            </Col>
+            <Col :xxl="{ span: 6 }" :xl="{ span: 8 }" :lg="{ span: 12 }" :sm="{ span: 24 }" :xs="{ span: 24 }" >
+                <div class="approve-col-box approve-col-for">
+                    <p>{{$L('流程名称：')}}<span>{{$L('加班')}}</span></p>
+
+                    <Divider style="margin: 12px 0;"/>
+                    <div class="approve-button-box">
+                        <p>{{$L('是否启用：')}} <i-switch v-model="value"  /></p>
+                        <p>
+                            <Icon type="md-create" />
+                            <Icon type="md-trash" />
+                        </p>
+
+                    </div>
+                </div>
+            </Col>
+            <Col :xxl="{ span: 6 }" :xl="{ span: 8 }" :lg="{ span: 12 }" :sm="{ span: 24 }" :xs="{ span: 24 }" >
+                <div class="approve-col-box approve-col-for">
+                    <p>{{$L('流程名称：')}}<span>{{$L('加班')}}</span></p>
+
+                    <Divider style="margin: 12px 0;"/>
+                    <div class="approve-button-box">
+                        <p>{{$L('是否启用：')}} <i-switch v-model="value"  /></p>
+                        <p>
+                            <Icon type="md-create" />
+                            <Icon type="md-trash" />
+                        </p>
+
+                    </div>
+                </div>
+            </Col>
+        </Row>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "approve",
+    data(){
+        return{
+            value:true,
+            loadIng:0,
+        }
+    },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/assets/js/pages/manage/setting/index.vue b/resources/assets/js/pages/manage/setting/index.vue
index 5130f310b..c2bf36a07 100644
--- a/resources/assets/js/pages/manage/setting/index.vue
+++ b/resources/assets/js/pages/manage/setting/index.vue
@@ -73,6 +73,7 @@ export default {
             const menu = [
                 {path: 'personal', name: '个人设置'},
                 {path: 'checkin', name: '签到设置', desc: ' (Beta)'},
+                {path: 'approve', name: '审批设置', desc: ' (Beta)'},
                 {path: 'language', name: '语言设置'},
                 {path: 'theme', name: '主题设置'},
                 {path: 'password', name: '密码设置'},
diff --git a/resources/assets/js/routes.js b/resources/assets/js/routes.js
index 230cf1324..6cebb01af 100755
--- a/resources/assets/js/routes.js
+++ b/resources/assets/js/routes.js
@@ -29,6 +29,11 @@ export default [
                 path: 'messenger/:dialogAction?',
                 component: () => import('./pages/manage/messenger.vue'),
             },
+            {
+                name: 'manage-review',
+                path: 'review',
+                component: () => import('./pages/manage/review'),
+            },
             {
                 name: 'manage-setting',
                 path: 'setting',
@@ -44,6 +49,11 @@ export default [
                         path: 'checkin',
                         component: () => import('./pages/manage/setting/checkin.vue'),
                     },
+                    {
+                        name: 'manage-setting-approve',
+                        path: 'approve',
+                        component: () => import('./pages/manage/setting/approve.vue'),
+                    },
                     {
                         name: 'manage-setting-language',
                         path: 'language',
diff --git a/resources/assets/sass/pages/_.scss b/resources/assets/sass/pages/_.scss
index 7cb1e7953..1b18835c7 100755
--- a/resources/assets/sass/pages/_.scss
+++ b/resources/assets/sass/pages/_.scss
@@ -9,3 +9,4 @@
 @import "page-setting";
 @import "page-index";
 @import "components/_";
+@import "page-review";
diff --git a/resources/assets/sass/pages/page-review.scss b/resources/assets/sass/pages/page-review.scss
new file mode 100644
index 000000000..154215599
--- /dev/null
+++ b/resources/assets/sass/pages/page-review.scss
@@ -0,0 +1,231 @@
+.page-review{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .review-wrapper {
+        flex: 1;
+        height: 0;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        .review-head {
+            display: flex;
+            align-items: center;
+            padding-bottom: 16px;
+            margin: 32px 32px 16px;
+            border-bottom: 1px solid #F4F4F5;
+            .review-nav{
+                flex: 1;
+                display: flex;
+                align-items: center;
+                > h1 {
+                    color: $primary-title-color;
+                    font-size: 28px;
+                    font-weight: 600;
+                }
+            }
+        }
+        .review-main{
+            display: flex;
+            flex: 1 1 auto;
+            margin: 0 32px;
+            position: relative;
+            .review-main-left{
+                display: flex;
+                flex-direction: column;
+                flex: 0 0 auto;
+                width: 360px;
+                position: absolute;
+                left: 0;
+                top: 0;
+                bottom: 12px;
+                .review-main-search{
+                    display: flex;
+                    justify-content: space-between;
+                    > div{
+                        .ivu-dropdown{
+                            margin-right: 8px;
+                        }
+                    }
+                }
+                .review-main-list{
+                    display: flex;
+                    flex-direction: column;
+                    flex: 1 1 auto;
+                    overflow: scroll;
+                    .review-list{
+                        margin-top: 8px;
+                        padding: 12px;
+                        border-radius: 8px;
+                        border: 1px solid #eeeeee;
+                        transition: box-shadow 0.3s;
+                        cursor: pointer;
+                        &:hover{
+                            box-shadow: 0 0 10px #e6ecfa;
+                        }
+                        > h2{
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            > .list-name{
+                                font-size: 16px;
+                                font-weight: bold;
+                            }
+                        }
+                        > p{
+                            font-size: 14px;
+                            margin-top: 8px;
+                            > span{
+                                color: #303133;
+                            }
+                        }
+                        .list-member{
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            margin-top: 8px;
+                            > span {
+                                display: flex;
+                                align-items: center;
+                                font-size: 12px;
+                                .ivu-avatar {
+                                    margin-right: 8px;
+                                }
+                            }
+                        }
+                    }
+                    .review-list-active{
+                        border: 1px solid #8bcf70;
+                    }
+                }
+                .review-main-list::-webkit-scrollbar {
+                    display: none;
+                }
+            }
+            .review-main-right{
+                position: absolute;
+                left: 360px;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                flex: 1 1 auto;
+                display: flex;
+                margin: 0 0 12px 12px;
+                .review-details{
+                    flex: 1 1 auto;
+                    display: flex;
+                    flex-direction: column;
+                    border-radius: 8px;
+                    border: 1px solid #eeeeee;
+                    .review-details-box{
+                        flex: 1 1 auto;
+                        padding: 24px;
+                        overflow-y: scroll;
+                        .review-details-title{
+                            display: flex;
+                            align-items: center;
+                            .ivu-tag{
+                                margin-left: 8px;
+                            }
+                        }
+                        .review-details-subtitle{
+                            margin-top: 16px;
+                            display: flex;
+                            .ivu-avatar{
+                                margin-right: 8px;
+                            }
+                            > span{
+                                font-size: 14px;
+                            }
+                        }
+                        .review-details-text{
+                            margin-bottom: 16px;
+                            > h4{
+                                color: #999;
+                            }
+                            > p{
+                                font-size: 16px;
+                                margin-top: 4px;
+                                font-weight: 500;
+                            }
+                        }
+                        .review-details-text:nth-last-child(1){
+                            margin-bottom: 0;
+                        }
+                        .review-details-process{
+                            display: flex;
+                            flex-direction: column;
+                            margin-top: 16px;
+                            position: relative;
+                            .review-details-line{
+                                position: absolute;
+                                left: 23px;
+                                top: 5px;
+                                bottom: 5px;
+                                width: 3px;
+                                background: #19be6b;
+                                z-index: 1;
+                            }
+                            .review-process{
+                                display: flex;
+                                justify-content: space-between;
+                                position: relative;
+                                z-index: 2;
+                                margin-bottom: 32px;
+                                .review-process-left{
+                                    display: flex;
+                                    align-items: center;
+                                    .review-process-text{
+                                        display: flex;
+                                        flex-direction: column;
+                                        margin-left: 8px;
+                                        .review-process-name{
+                                            margin-bottom: 4px;
+                                        }
+                                        .review-process-state{
+                                            font-size: 16px;
+                                            color: #19be6b;
+                                            font-weight: 500;
+                                        }
+                                    }
+                                }
+                            }
+                            .review-process:nth-last-child(1){
+                                margin-bottom: 0;
+                            }
+                        }
+                        .review-copy{
+                            margin-top: 8px;
+                            padding-left: 56px;
+                            display: flex;
+                            .review-copy-member{
+                                display: flex;
+                                align-items: center;
+                                background: #F4F4F5;
+                                padding:4px 8px;
+                                border-radius: 20px;
+                                .ivu-avatar{
+                                    margin-right: 4px;
+                                }
+                            }
+                        }
+                    }
+                    .review-details-box::-webkit-scrollbar {
+                        display: none;
+                    }
+                    .review-operation{
+                        flex: 0 0 auto;
+                        height: 60px;
+                        padding: 0 24px;
+                        border-top: 1px solid #F4F4F5;
+                        display: flex;
+                        align-items: center;
+                    }
+                }
+
+            }
+        }
+    }
+
+}
diff --git a/resources/assets/sass/pages/page-setting.scss b/resources/assets/sass/pages/page-setting.scss
index ca290d85d..f6e79047c 100755
--- a/resources/assets/sass/pages/page-setting.scss
+++ b/resources/assets/sass/pages/page-setting.scss
@@ -349,6 +349,54 @@
             .setting-button {
                 margin-left: 8px;
             }
+            .approve-row{
+                padding: 24px 40px;
+                overflow: auto;
+                .ivu-col{
+                    margin-bottom: 8px;
+                    .approve-col-box{
+                        border-radius: 8px;
+                        border: 1px solid #eeeeee;
+                        transition: box-shadow 0.3s;
+                        cursor: pointer;
+                        &:hover{
+                            box-shadow: 0 0 10px #e6ecfa;
+                        }
+                    }
+                    .approve-col-add{
+                        height: 100%;
+                        font-size: 48px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        color: #ededed;
+                    }
+                    .approve-col-for{
+                        padding:16px;
+                        display: flex;
+                        flex-direction: column;
+                        > p{
+                            display: flex;
+                            align-items: center;
+                        }
+                        .approve-button-box{
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            > p {
+                                display: flex;
+                                align-items: center;
+                                > i {
+                                    font-size: 16px;
+                                    margin-left: 8px;
+                                    color: rgb(96, 98, 102);
+                                }
+                            }
+                        }
+                    }
+                }
+
+            }
         }
     }
 }