github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-15 05:12:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix:审批流程静态页

Browse Source
This commit is contained in:
HEXIANG 2023-04-12 16:41:11 +08:00
parent 7181652f01
commit d14d5a5942
10 changed files with 588 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/assets/js/pages/manage.vue
View File

@ -546,6 +546,7 @@ export default {
{path: 'archivedProject', name: '已归档的项目'},
{path: 'team', name: '团队管理', divided: true},
{path: 'review', name: '审批中心'},
])
} else {
array.push(...[

95
resources/assets/js/pages/manage/review/details.vue Normal file
View File

@ -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>

119
resources/assets/js/pages/manage/review/index.vue Normal file
View File

@ -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>

24
resources/assets/js/pages/manage/review/list.vue Normal file
View File

@ -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>

58
resources/assets/js/pages/manage/setting/approve.vue Normal file
View File

@ -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>

1
resources/assets/js/pages/manage/setting/index.vue
View File

@ -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: '密码设置'},

10
resources/assets/js/routes.js vendored
View File

@ -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',

1
resources/assets/sass/pages/_.scss vendored
View File

@ -9,3 +9,4 @@
@import "page-setting";
@import "page-index";
@import "components/_";
@import "page-review";

231
resources/assets/sass/pages/page-review.scss vendored Normal file
View File

@ -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;
}
}
}
}
}
}

48
resources/assets/sass/pages/page-setting.scss vendored
View File

@ -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);
}
}
}
}
}
}
}
}
}