mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 19:35:50 +00:00
feat：工作流 - 前端进度 60%
This commit is contained in:
weifs
parent
18758421fd
commit
6abfc7a2e2
@ -25,8 +25,8 @@
|
|||||||
<p>{{data.var?.end_time}}</p>
|
<p>{{data.var?.end_time}}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="review-details-text">
|
<div class="review-details-text">
|
||||||
<h4>{{$L('时长')}}（小时）</h4>
|
<h4>{{ $L('时长') }}（小时）</h4>
|
||||||
<p>{{$L('1天')}}</p>
|
<p>{{ $L('1天') }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="review-details-text">
|
<div class="review-details-text">
|
||||||
<h4>{{$L('请假事由')}}</h4>
|
<h4>{{$L('请假事由')}}</h4>
|
||||||
|
|||||||
@ -12,113 +12,86 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Tabs :value="tabsValue" @on-click="tabsClick" style="margin: 0 20px;height: 100%;">
|
<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 class="review-main-search">
|
||||||
<div>
|
<div style="display: flex;gap: 10px;">
|
||||||
<Dropdown @on-click="changeTime" trigger="click">
|
<Select v-model="approvalType" style="width: 150px;">
|
||||||
<a href="javascript:void(0)">
|
<Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
{{ timeChose }}<Icon type="ios-arrow-down"></Icon>
|
</Select>
|
||||||
</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>
|
</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>
|
||||||
<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-left">
|
||||||
<div class="review-main-list">
|
<div class="review-main-list">
|
||||||
<list></list>
|
<div @click.stop="clickList(item,key)" v-for="(item,key) in backlogList">
|
||||||
<list></list>
|
<list :class="{ 'review-list-active': item._active }" :data="item"></list>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="review-main-right">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane label="已办" name="name2">2</TabPane>
|
|
||||||
<TabPane label="抄送我" name="name3">3</TabPane>
|
|
||||||
<TabPane :label="$L('已发起')" name="initiated">
|
<TabPane :label="$L('已发起')" name="initiated">
|
||||||
<div class="review-main-search">
|
<div class="review-main-search">
|
||||||
<div>
|
<div style="display: flex;gap: 10px;">
|
||||||
<Dropdown @on-click="changeTime" trigger="click">
|
<Select v-model="approvalType" style="width: 150px;">
|
||||||
<a href="javascript:void(0)">
|
<Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
{{ timeChose }}<Icon type="ios-arrow-down"></Icon>
|
</Select>
|
||||||
</a>
|
<Select v-model="searchState" style="width: 150px;">
|
||||||
<template #list>
|
<Option v-for="item in searchStateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
<DropdownMenu>
|
</Select>
|
||||||
<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>
|
</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>
|
||||||
<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 v-else class="review-mains">
|
||||||
<div class="review-main-left">
|
<div class="review-main-left">
|
||||||
<div class="review-main-list">
|
<div class="review-main-list">
|
||||||
@ -157,7 +130,26 @@ export default {
|
|||||||
loadIng:false,
|
loadIng:false,
|
||||||
|
|
||||||
tabsValue:"",
|
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: [],
|
backlogList: [],
|
||||||
|
doneList:[],
|
||||||
|
notifyList:[],
|
||||||
initiatedList: [],
|
initiatedList: [],
|
||||||
details:{}
|
details:{}
|
||||||
}
|
}
|
||||||
@ -168,15 +160,6 @@ export default {
|
|||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
|
||||||
tabsClick(){
|
|
||||||
if(this.tabsValue == 'backlog'){
|
|
||||||
this.getBacklogList();
|
|
||||||
}
|
|
||||||
if(this.tabsValue == 'initiated'){
|
|
||||||
this.getInitiatedList();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
changeTime(e){
|
changeTime(e){
|
||||||
switch (e) {
|
switch (e) {
|
||||||
case 'all':
|
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){
|
clickList(item){
|
||||||
this.initiatedList.map(h=>{
|
this.backlogList.map(h=>{ h._active = false; })
|
||||||
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;
|
item._active = true;
|
||||||
this.details = item
|
this.details = item
|
||||||
},
|
},
|
||||||
@ -210,13 +211,73 @@ export default {
|
|||||||
getBacklogList(){
|
getBacklogList(){
|
||||||
this.$store.dispatch("call", {
|
this.$store.dispatch("call", {
|
||||||
method: 'get',
|
method: 'get',
|
||||||
url: 'workflow/process/startByMyself',
|
url: 'workflow/process/findTask',
|
||||||
data: {
|
data: {
|
||||||
page:this.page,
|
page:this.page,
|
||||||
page_size: this.pageSize,
|
page_size: this.pageSize,
|
||||||
}
|
}
|
||||||
}).then(({data}) => {
|
}).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}) => {
|
}).catch(({msg}) => {
|
||||||
$A.modalError(msg);
|
$A.modalError(msg);
|
||||||
}).finally(_ => {
|
}).finally(_ => {
|
||||||
@ -238,7 +299,11 @@ export default {
|
|||||||
h._active = index == 0;
|
h._active = index == 0;
|
||||||
return h;
|
return h;
|
||||||
})
|
})
|
||||||
this.details = this.initiatedList[0]
|
if(this.tabsValue == 'initiated'){
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.details = this.initiatedList[0] || {}
|
||||||
|
})
|
||||||
|
}
|
||||||
}).catch(({msg}) => {
|
}).catch(({msg}) => {
|
||||||
$A.modalError(msg);
|
$A.modalError(msg);
|
||||||
}).finally(_ => {
|
}).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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
margin: 32px 32px 16px;
|
margin: 32px 20px 16px;
|
||||||
|
margin-bottom: 5px;
|
||||||
border-bottom: 1px solid #F4F4F5;
|
border-bottom: 1px solid #F4F4F5;
|
||||||
.review-nav{
|
.review-nav{
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -29,7 +30,7 @@
|
|||||||
.review-main-search{
|
.review-main-search{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 0 10px;
|
margin:0 5px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
> div{
|
> div{
|
||||||
.ivu-dropdown{
|
.ivu-dropdown{
|
||||||
@ -37,6 +38,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.noData{
|
||||||
|
text-align: center;
|
||||||
|
line-height: 150px;
|
||||||
|
}
|
||||||
.review-mains{
|
.review-mains{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
@ -46,7 +51,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 360px;
|
max-width: 360px;
|
||||||
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -78,7 +84,7 @@
|
|||||||
}
|
}
|
||||||
> p{
|
> p{
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-top: 8px;
|
margin-top: 5px;
|
||||||
> span{
|
> span{
|
||||||
color: #303133;
|
color: #303133;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user