mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 11:19:56 +00:00
feat：工作流 - 前端进度 60%
This commit is contained in:
weifs
parent
18758421fd
commit
6abfc7a2e2
@ -25,8 +25,8 @@
|
||||
<p>{{data.var?.end_time}}</p>
|
||||
</div>
|
||||
<div class="review-details-text">
|
||||
<h4>{{$L('时长')}}（小时）</h4>
|
||||
<p>{{$L('1天')}}</p>
|
||||
<h4>{{ $L('时长') }}（小时）</h4>
|
||||
<p>{{ $L('1天') }}</p>
|
||||
</div>
|
||||
<div class="review-details-text">
|
||||
<h4>{{$L('请假事由')}}</h4>
|
||||
|
||||
@ -12,113 +12,86 @@
|
||||
</div>
|
||||
|
||||
<Tabs :value="tabsValue" @on-click="tabsClick" style="margin: 0 20px;height: 100%;">
|
||||
<TabPane :label="$L('待办')" name="backlog" style="height: 100%;">
|
||||
<TabPane :label="$L('待办') + (backlogList.length > 0 ? ('('+backlogList.length+')') : '')" name="backlog" style="height: 100%;">
|
||||
<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 style="display: flex;gap: 10px;">
|
||||
<Select v-model="approvalType" style="width: 150px;">
|
||||
<Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</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-mains">
|
||||
<div class="noData" v-if="backlogList.length==0">{{$L('暂无数据')}}</div>
|
||||
<div v-else class="review-mains">
|
||||
<div class="review-main-left">
|
||||
<div class="review-main-list">
|
||||
<list></list>
|
||||
<list></list>
|
||||
<div @click.stop="clickList(item,key)" v-for="(item,key) in backlogList">
|
||||
<list :class="{ 'review-list-active': item._active }" :data="item"></list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-main-right">
|
||||
<listDetails></listDetails>
|
||||
<listDetails :data="details" @approve="tabsClick" @revocation="tabsClick"></listDetails>
|
||||
</div>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane label="已办" name="done">
|
||||
<div class="review-main-search">
|
||||
<div style="display: flex;gap: 10px;">
|
||||
<Select v-model="approvalType" style="width: 150px;">
|
||||
<Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="doneList.length==0" class="noData">{{$L('暂无数据')}}</div>
|
||||
<div v-else class="review-mains">
|
||||
<div class="review-main-left">
|
||||
<div class="review-main-list">
|
||||
<div @click.stop="clickList(item,key)" v-for="(item,key) in doneList">
|
||||
<list :class="{ 'review-list-active': item._active }" :data="item"></list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-main-right">
|
||||
<listDetails :data="details" @approve="tabsClick" @revocation="tabsClick"></listDetails>
|
||||
</div>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane label="抄送我" name="notify">
|
||||
<div class="review-main-search">
|
||||
<div class="review-main-search">
|
||||
<div style="display: flex;gap: 10px;">
|
||||
<Select v-model="approvalType" style="width: 150px;">
|
||||
<Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="noData" v-if="notifyList.length==0">{{$L('暂无数据')}}</div>
|
||||
<div v-else class="review-mains">
|
||||
<div class="review-main-left">
|
||||
<div class="review-main-list">
|
||||
<div @click.stop="clickList(item,key)" v-for="(item,key) in notifyList">
|
||||
<list :class="{ 'review-list-active': item._active }" :data="item"></list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-main-right">
|
||||
<listDetails :data="details" @approve="tabsClick" @revocation="tabsClick"></listDetails>
|
||||
</div>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane label="已办" name="name2">2</TabPane>
|
||||
<TabPane label="抄送我" name="name3">3</TabPane>
|
||||
<TabPane :label="$L('已发起')" name="initiated">
|
||||
<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 style="display: flex;gap: 10px;">
|
||||
<Select v-model="approvalType" style="width: 150px;">
|
||||
<Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
<Select v-model="searchState" style="width: 150px;">
|
||||
<Option v-for="item in searchStateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</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 v-if="initiatedList.length==0" style="text-align: center;line-height: 150px;">{{$L('暂无数据')}}</div>
|
||||
<div class="noData" v-if="initiatedList.length==0">{{$L('暂无数据')}}</div>
|
||||
<div v-else class="review-mains">
|
||||
<div class="review-main-left">
|
||||
<div class="review-main-list">
|
||||
@ -157,7 +130,26 @@ export default {
|
||||
loadIng:false,
|
||||
|
||||
tabsValue:"",
|
||||
//
|
||||
approvalType:"all",
|
||||
approvalList:[
|
||||
{value:"all",label:"全部审批"},
|
||||
{value:"请假",label:"请假"},
|
||||
{value:"加班",label:"加班"},
|
||||
],
|
||||
searchState:"all",
|
||||
searchStateList:[
|
||||
{value:"all",label:"全部状态"},
|
||||
{value:0,label:"待审批"},
|
||||
{value:1,label:"审批中"},
|
||||
{value:2,label:"已通过"},
|
||||
{value:3,label:"已拒绝"},
|
||||
{value:4,label:"已撤回"}
|
||||
],
|
||||
//
|
||||
backlogList: [],
|
||||
doneList:[],
|
||||
notifyList:[],
|
||||
initiatedList: [],
|
||||
details:{}
|
||||
}
|
||||
@ -168,15 +160,6 @@ export default {
|
||||
},
|
||||
methods:{
|
||||
|
||||
tabsClick(){
|
||||
if(this.tabsValue == 'backlog'){
|
||||
this.getBacklogList();
|
||||
}
|
||||
if(this.tabsValue == 'initiated'){
|
||||
this.getInitiatedList();
|
||||
}
|
||||
},
|
||||
|
||||
changeTime(e){
|
||||
switch (e) {
|
||||
case 'all':
|
||||
@ -197,11 +180,29 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// tab切换事件
|
||||
tabsClick(val){
|
||||
this.tabsValue = val || this.tabsValue
|
||||
// if(this.tabsValue == 'backlog'){
|
||||
this.getBacklogList();
|
||||
// }
|
||||
if(this.tabsValue == 'done'){
|
||||
this.getDoneList();
|
||||
}
|
||||
if(this.tabsValue == 'notify'){
|
||||
this.getNotifyList();
|
||||
}
|
||||
if(this.tabsValue == 'initiated'){
|
||||
this.getInitiatedList();
|
||||
}
|
||||
},
|
||||
|
||||
// 列表点击事件
|
||||
clickList(item){
|
||||
this.initiatedList.map(h=>{
|
||||
h._active = false;
|
||||
})
|
||||
this.backlogList.map(h=>{ h._active = false; })
|
||||
this.doneList.map(h=>{ h._active = false; })
|
||||
this.notifyList.map(h=>{ h._active = false; })
|
||||
this.initiatedList.map(h=>{ h._active = false; })
|
||||
item._active = true;
|
||||
this.details = item
|
||||
},
|
||||
@ -210,13 +211,73 @@ export default {
|
||||
getBacklogList(){
|
||||
this.$store.dispatch("call", {
|
||||
method: 'get',
|
||||
url: 'workflow/process/startByMyself',
|
||||
url: 'workflow/process/findTask',
|
||||
data: {
|
||||
page:this.page,
|
||||
page_size: this.pageSize,
|
||||
}
|
||||
}).then(({data}) => {
|
||||
this.backlogList = []
|
||||
this.backlogList = data.rows.map((h,index)=>{
|
||||
h._active = index == 0;
|
||||
return h;
|
||||
})
|
||||
if(this.tabsValue == 'backlog'){
|
||||
this.$nextTick(()=>{
|
||||
this.details = this.backlogList[0] || {}
|
||||
})
|
||||
}
|
||||
}).catch(({msg}) => {
|
||||
$A.modalError(msg);
|
||||
}).finally(_ => {
|
||||
this.loadIng--;
|
||||
});
|
||||
},
|
||||
|
||||
// 获取已办列表
|
||||
getDoneList(){
|
||||
this.$store.dispatch("call", {
|
||||
method: 'get',
|
||||
url: 'workflow/procHistory/findTask',
|
||||
data: {
|
||||
page:this.page,
|
||||
page_size: this.pageSize,
|
||||
}
|
||||
}).then(({data}) => {
|
||||
this.doneList = data.rows.map((h,index)=>{
|
||||
h._active = index == 0;
|
||||
return h;
|
||||
})
|
||||
if(this.tabsValue == 'done'){
|
||||
this.$nextTick(()=>{
|
||||
this.details = this.doneList[0] || {}
|
||||
})
|
||||
}
|
||||
}).catch(({msg}) => {
|
||||
$A.modalError(msg);
|
||||
}).finally(_ => {
|
||||
this.loadIng--;
|
||||
});
|
||||
},
|
||||
|
||||
// 获取抄送列表
|
||||
getNotifyList(){
|
||||
this.$store.dispatch("call", {
|
||||
method: 'get',
|
||||
url: 'workflow/procHistory/findProcNotify',
|
||||
data: {
|
||||
page:this.page,
|
||||
page_size: this.pageSize,
|
||||
}
|
||||
}).then(({data}) => {
|
||||
this.notifyList = data.rows.map((h,index)=>{
|
||||
h._active = index == 0;
|
||||
return h;
|
||||
})
|
||||
if(this.tabsValue == 'notify'){
|
||||
this.$nextTick(()=>{
|
||||
this.details = this.notifyList[0] || {}
|
||||
})
|
||||
}
|
||||
}).catch(({msg}) => {
|
||||
$A.modalError(msg);
|
||||
}).finally(_ => {
|
||||
@ -238,7 +299,11 @@ export default {
|
||||
h._active = index == 0;
|
||||
return h;
|
||||
})
|
||||
this.details = this.initiatedList[0]
|
||||
if(this.tabsValue == 'initiated'){
|
||||
this.$nextTick(()=>{
|
||||
this.details = this.initiatedList[0] || {}
|
||||
})
|
||||
}
|
||||
}).catch(({msg}) => {
|
||||
$A.modalError(msg);
|
||||
}).finally(_ => {
|
||||
|
||||
14
resources/assets/sass/pages/page-review.scss
vendored
14
resources/assets/sass/pages/page-review.scss
vendored
@ -13,7 +13,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
margin: 32px 32px 16px;
|
||||
margin: 32px 20px 16px;
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 1px solid #F4F4F5;
|
||||
.review-nav{
|
||||
flex: 1;
|
||||
@ -29,7 +30,7 @@
|
||||
.review-main-search{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 10px;
|
||||
margin:0 5px;
|
||||
margin-bottom: 10px;
|
||||
> div{
|
||||
.ivu-dropdown{
|
||||
@ -37,6 +38,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.noData{
|
||||
text-align: center;
|
||||
line-height: 150px;
|
||||
}
|
||||
.review-mains{
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
@ -46,7 +51,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 auto;
|
||||
width: 360px;
|
||||
max-width: 360px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -78,7 +84,7 @@
|
||||
}
|
||||
> p{
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
margin-top: 5px;
|
||||
> span{
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user