github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-02-01 18:38:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat：审批中心列表 - 添加上拉加载功能，以及一些loadIng效果

Browse Source
This commit is contained in:
weifashi 2023-08-04 17:14:46 +08:00
parent e26d75c894
commit 77d3ba0c3b
3 changed files with 189 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/assets/js/pages/manage/approve/details.vue
View File

@ -293,6 +293,7 @@ export default {
}, },
// 获取详情 // 获取详情
getInfo(isScrollToBottom = false) { getInfo(isScrollToBottom = false) {
this.loadIng++;
this.$store.dispatch("call", { this.$store.dispatch("call", {
method: 'get', method: 'get',
url: 'approve/process/detail', url: 'approve/process/detail',
@ -388,7 +389,7 @@ export default {
}, },
// 提交评论 // 提交评论
confirmComment(){ confirmComment(){
this.loadIng++; this.loadIng = 1;
this.$store.dispatch("call", { this.$store.dispatch("call", {
method: 'post', method: 'post',
url: 'approve/process/addGlobalComment', url: 'approve/process/addGlobalComment',

224
resources/assets/js/pages/manage/approve/index.vue
View File

@ -13,41 +13,55 @@
<Tabs :value="tabsValue" @on-click="tabsClick" style="margin: 0 20px;height: 100%;" size="small"> <Tabs :value="tabsValue" @on-click="tabsClick" style="margin: 0 20px;height: 100%;" size="small">
<TabPane :label="$L('待办') + (unreadTotal > 0 ? ('('+unreadTotal+')') : '')" name="unread" style="height: 100%;"> <TabPane :label="$L('待办') + (unreadTotal > 0 ? ('('+unreadTotal+')') : '')" name="unread" style="height: 100%;">
<div class="approve-main-search"> <div class="approve-main-search">
<div style="display: flex;gap: 10px;"> <div>
<Select v-model="approvalType" @on-change="tabsClick('',0)" style="width: 150px;"> <Select v-model="approvalType" @on-change="tabsClick(false,0)">
<Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option> <Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </Select>
</div> <div v-if="this.loadIng" class="load">
</div> <Loading/>
<div v-if="unreadList.length==0" class="noData" >{{$L('暂无数据')}}</div>
<div v-else class="approve-mains">
<div class="approve-main-left">
<div class="approve-main-list">
<div @click.stop="clickList(item,key)" v-for="(item,key) in unreadList">
<list :class="{ 'approve-list-active': item._active }" :data="item"></list>
</div>
</div> </div>
</div> </div>
<div class="approve-main-right"> </div>
<listDetails v-if="!detailsShow && tabsValue=='unread'" :data="details" @approve="tabsClick" @revocation="tabsClick"></listDetails> <div>
<div v-if="unreadList.length==0" class="noData" >{{$L('暂无数据')}}</div>
<div v-else class="approve-mains">
<div class="approve-main-left">
<div class="approve-main-list" @scroll="handleScroll">
<div @click.stop="clickList(item,key)" v-for="(item,key) in unreadList">
<list :class="{ 'approve-list-active': item._active }" :data="item"></list>
</div>
<div class="load" v-if="unreadList.length < unreadTotal">
<Loading/>
</div>
</div>
</div>
<div class="approve-main-right">
<listDetails v-if="!detailsShow && tabsValue=='unread'" :data="details" @approve="tabsClick" @revocation="tabsClick"></listDetails>
</div>
</div> </div>
</div> </div>
</TabPane> </TabPane>
<TabPane :label="$L('已办')" name="done"> <TabPane :label="$L('已办')" name="done">
<div class="approve-main-search"> <div class="approve-main-search">
<div style="display: flex;gap: 10px;"> <div>
<Select v-model="approvalType" @on-change="tabsClick('',0)" style="width: 150px;"> <Select v-model="approvalType" @on-change="tabsClick(false,0)">
<Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option> <Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </Select>
<div v-if="this.loadIng" class="load">
<Loading/>
</div>
</div> </div>
</div> </div>
<div v-if="doneList.length==0" class="noData">{{$L('暂无数据')}}</div> <div v-if="doneList.length==0" class="noData">{{$L('暂无数据')}}</div>
<div v-else class="approve-mains"> <div v-else class="approve-mains">
<div class="approve-main-left"> <div class="approve-main-left">
<div class="approve-main-list"> <div class="approve-main-list" @scroll="handleScroll">
<div @click.stop="clickList(item,key)" v-for="(item,key) in doneList" > <div @click.stop="clickList(item,key)" v-for="(item,key) in doneList" >
<list :class="{ 'approve-list-active': item._active }" :data="item"></list> <list :class="{ 'approve-list-active': item._active }" :data="item"></list>
</div> </div>
<div class="load" v-if="doneList.length < doneTotal">
<Loading/>
</div>
</div> </div>
</div> </div>
<div class="approve-main-right"> <div class="approve-main-right">
@ -58,20 +72,26 @@
<TabPane :label="$L('抄送我')" name="notify"> <TabPane :label="$L('抄送我')" name="notify">
<div class="approve-main-search"> <div class="approve-main-search">
<div class="approve-main-search"> <div class="approve-main-search">
<div style="display: flex;gap: 10px;"> <div>
<Select v-model="approvalType" @on-change="tabsClick('',0)" style="width: 150px;"> <Select v-model="approvalType" @on-change="tabsClick(false,0)">
<Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option> <Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </Select>
<div v-if="this.loadIng" class="load">
<Loading/>
</div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="notifyList.length==0" class="noData">{{$L('暂无数据')}}</div> <div v-if="notifyList.length==0" class="noData">{{$L('暂无数据')}}</div>
<div v-else class="approve-mains"> <div v-else class="approve-mains">
<div class="approve-main-left"> <div class="approve-main-left">
<div class="approve-main-list"> <div class="approve-main-list" @scroll="handleScroll">
<div @click.stop="clickList(item,key)" v-for="(item,key) in notifyList"> <div @click.stop="clickList(item,key)" v-for="(item,key) in notifyList">
<list :class="{ 'approve-list-active': item._active }" :data="item"></list> <list :class="{ 'approve-list-active': item._active }" :data="item"></list>
</div> </div>
<div class="load" v-if="notifyList.length < notifyTotal">
<Loading/>
</div>
</div> </div>
</div> </div>
<div class="approve-main-right"> <div class="approve-main-right">
@ -81,22 +101,28 @@
</TabPane> </TabPane>
<TabPane :label="$L('已发起')" name="initiated"> <TabPane :label="$L('已发起')" name="initiated">
<div class="approve-main-search"> <div class="approve-main-search">
<div style="display: flex;gap: 10px;"> <div>
<Select v-model="approvalType" @on-change="tabsClick('',0)" style="width: 150px;"> <Select v-model="approvalType" @on-change="tabsClick(false,0)">
<Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option> <Option v-for="item in approvalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </Select>
<Select v-model="searchState" @on-change="tabsClick('',0)" style="width: 150px;"> <Select v-model="searchState" @on-change="tabsClick(false,0)">
<Option v-for="item in searchStateList" :value="item.value" :key="item.value">{{ item.label }}</Option> <Option v-for="item in searchStateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </Select>
<div v-if="this.loadIng" class="load">
<Loading/>
</div>
</div> </div>
</div> </div>
<div v-if="notifyList.length==0" class="noData">{{$L('暂无数据')}}</div> <div v-if="initiatedList.length==0" class="noData">{{$L('暂无数据')}}</div>
<div v-else class="approve-mains"> <div v-else class="approve-mains">
<div class="approve-main-left"> <div class="approve-main-left">
<div class="approve-main-list"> <div class="approve-main-list" @scroll="handleScroll">
<div @click.stop="clickList(item,key)" v-for="(item,key) in initiatedList"> <div @click.stop="clickList(item,key)" v-for="(item,key) in initiatedList">
<list :class="{ 'approve-list-active': item._active }" :data="item"></list> <list :class="{ 'approve-list-active': item._active }" :data="item"></list>
</div> </div>
<div class="load" v-if="initiatedList.length < initiatedTotal">
<Loading/>
</div>
</div> </div>
</div> </div>
<div class="approve-main-right"> <div class="approve-main-right">
@ -195,13 +221,15 @@ export default {
name: "approve", name: "approve",
data() { data() {
return { return {
modalTransferIndex: window.modalTransferIndex,
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
currentDate: new Date(2021, 0, 17), currentDate: new Date(2021, 0, 17),
procdefList: [], procdefList: [],
page: 1, page: 1,
pageSize: 250, pageSize: 10,
total: 0, total: 0,
noText: '', noText: '',
loadIng: false, loadIng: false,
@ -224,11 +252,25 @@ export default {
{ value: 4, label: this.$L("已撤回") } { value: 4, label: this.$L("已撤回") }
], ],
// //
unreadTotal: 0,
unreadList: [], unreadList: [],
unreadPage: 1,
unreadTotal: 0,
unreadLoad: false,
//
doneList: [], doneList: [],
donePage: 1,
doneLoad: false,
doneTotal: 0,
//
notifyList: [], notifyList: [],
notifyPage: 1,
notifyLoad: false,
notifyTotal: 0,
//
initiatedList: [], initiatedList: [],
initiatedPage: 1,
initiatedLoad: false,
initiatedTotal: 0,
// //
details: {}, details: {},
detailsShow: false, detailsShow: false,
@ -276,7 +318,7 @@ export default {
} }
}, },
watch: { watch: {
'$route' (to, from) { '$route' (to) {
if(to.name == 'manage-approve'){ if(to.name == 'manage-approve'){
this.tabsClick() this.tabsClick()
} }
@ -308,6 +350,7 @@ export default {
this.addData.startTime = this.addData.endTime = this.getCurrentDate(); this.addData.startTime = this.addData.endTime = this.getCurrentDate();
}, },
methods:{ methods:{
// 获取当前时间
getCurrentDate() { getCurrentDate() {
const today = new Date(); const today = new Date();
const year = today.getFullYear(); const year = today.getFullYear();
@ -315,6 +358,7 @@ export default {
const date = String(today.getDate()).padStart(2, '0'); const date = String(today.getDate()).padStart(2, '0');
return `${year}-${month}-${date}`; return `${year}-${month}-${date}`;
}, },
// tab切换事件 // tab切换事件
tabsClick(val,time= 1000){ tabsClick(val,time= 1000){
if(!val && this.__tabsClick && time>0){ if(!val && this.__tabsClick && time>0){
@ -325,19 +369,35 @@ export default {
this.loadIng = true; this.loadIng = true;
} }
this.tabsValue = val || this.tabsValue this.tabsValue = val || this.tabsValue
if(val!=""){ if(val){
this.approvalType = this.searchState = "all" this.approvalType = this.searchState = "all"
} }
if(this.tabsValue == 'unread'){ if(this.tabsValue == 'unread'){
if(val === false){
this.unreadPage = 1;
this.unreadList = [];
}
this.getUnreadList(); this.getUnreadList();
} }
if(this.tabsValue == 'done'){ if(this.tabsValue == 'done'){
if(val === false){
this.donePage = 1;
this.doneList = [];
}
this.getDoneList(); this.getDoneList();
} }
if(this.tabsValue == 'notify'){ if(this.tabsValue == 'notify'){
if(val === false){
this.notifyPage = 1;
this.notifyList = [];
}
this.getNotifyList(); this.getNotifyList();
} }
if(this.tabsValue == 'initiated'){ if(this.tabsValue == 'initiated'){
if(val === false){
this.initiatedPage = 1;
this.initiatedList = [];
}
this.getInitiatedList(); this.getInitiatedList();
} }
}, },
@ -363,29 +423,59 @@ export default {
}) })
}, },
// 下拉加载
handleScroll(e){
if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
if(this.tabsValue == 'unread' && !this.unreadLoad && this.unreadList.length < this.unreadTotal){
this.unreadLoad = true;
this.unreadPage = this.unreadPage + 1;
this.getUnreadList('scroll');
}
if(this.tabsValue == 'done' && !this.doneLoad && this.doneList.length < this.doneTotal){
this.doneLoad = true;
this.donePage = this.donePage + 1;
this.getDoneList('scroll');
}
if(this.tabsValue == 'notify' && !this.notifyLoad && this.notifyList.length < this.notifyTotal){
this.notifyLoad = true;
this.notifyPage = this.notifyPage + 1;
this.getNotifyList('scroll');
}
if(this.tabsValue == 'initiated' && !this.initiatedLoad && this.initiatedList.length < this.initiatedTotal){
this.initiatedLoad = true;
this.initiatedPage = this.initiatedPage + 1;
this.getInitiatedList('scroll');
}
}
},
// 获取待办列表 // 获取待办列表
getUnreadList(){ getUnreadList(type='init'){
this.$store.dispatch("call", { this.$store.dispatch("call", {
method: 'get', method: 'get',
url: 'approve/process/findTask', url: 'approve/process/findTask',
data: { data: {
page:this.page, page: type == 'scroll' ? this.unreadPage : 1,
page_size: this.pageSize, page_size: type == 'scroll' ? this.pageSize : this.unreadPage * this.pageSize,
proc_def_name: this.approvalType == 'all' ? '' : this.approvalType, proc_def_name: this.approvalType == 'all' ? '' : this.approvalType,
} }
}).then(({data}) => { }).then(({data}) => {
let activeId = 0; let activeId = 0;
let activeIndex = 0; let activeIndex = 0;
this.unreadTotal = data.total;
if( this.unreadList.length == 0 || this.unreadList.length == data.rows.length){ if( this.unreadList.length == 0 || this.unreadList.length == data.rows.length){
this.unreadList?.map((res)=>{ if(res._active) activeId = res.id }) this.unreadList?.map((res)=>{ if(res._active) activeId = res.id })
} }
this.unreadList = data.rows.map((h,index)=>{ let lists = data.rows.map((h,index)=>{
h._active = activeId > 0 ? h.id == activeId : index == 0; h._active = activeId > 0 ? h.id == activeId : index == 0;
if(h._active) activeIndex = index if(h._active) activeIndex = index
if(type == 'scroll' && this.unreadList.map(item=>{return item.id}).indexOf(h.id) == -1 ){
this.unreadList.push(h)
}
return h; return h;
}) })
if(this.approvalType == 'all'){ if(type != 'scroll'){
this.unreadTotal = this.unreadList.length this.unreadList = lists;
} }
if(this.tabsValue == 'unread'){ if(this.tabsValue == 'unread'){
this.$nextTick(()=>{ this.$nextTick(()=>{
@ -396,30 +486,38 @@ export default {
$A.modalError(msg); $A.modalError(msg);
}).finally(_ => { }).finally(_ => {
this.loadIng = false; this.loadIng = false;
this.unreadLoad = false;
}); });
}, },
// 获取已办列表 // 获取已办列表
getDoneList(){ getDoneList(type='init'){
this.$store.dispatch("call", { this.$store.dispatch("call", {
method: 'get', method: 'get',
url: 'approve/procHistory/findTask', url: 'approve/procHistory/findTask',
data: { data: {
page:this.page, page: type == 'scroll' ? this.donePage : 1,
page_size: this.pageSize, page_size: type == 'scroll' ? this.pageSize : this.donePage * this.pageSize,
proc_def_name: this.approvalType == 'all' ? '' : this.approvalType, proc_def_name: this.approvalType == 'all' ? '' : this.approvalType,
} }
}).then(({data}) => { }).then(({data}) => {
let activeId = 0; let activeId = 0;
let activeIndex = 0; let activeIndex = 0;
if( this.doneList.length == 0 || this.doneList.length == data.rows.length){ this.doneTotal = data.total;
this.doneList?.map((res)=>{ if(res._active) activeId = res.id }) if( this.doneList.length == 0 || this.doneList.length == data.total){
this.doneList?.map((res)=>{ if(res._active) activeId = res.id })
} }
this.doneList = data.rows.map((h,index)=>{ let lists = data.rows.map((h,index)=>{
h._active = activeId > 0 ? h.id == activeId : index == 0; h._active = activeId > 0 ? h.id == activeId : index == 0;
if(h._active) activeIndex = index if(h._active) activeIndex = index
if(type == 'scroll' && this.doneList.map(item=>{return item.id}).indexOf(h.id) == -1 ){
this.doneList.push(h)
}
return h; return h;
}) })
if(type != 'scroll'){
this.doneList = lists;
}
if(this.tabsValue == 'done'){ if(this.tabsValue == 'done'){
this.$nextTick(()=>{ this.$nextTick(()=>{
this.details = this.doneList[activeIndex] || {} this.details = this.doneList[activeIndex] || {}
@ -429,30 +527,38 @@ export default {
$A.modalError(msg); $A.modalError(msg);
}).finally(_ => { }).finally(_ => {
this.loadIng = false; this.loadIng = false;
this.doneLoad = false;
}); });
}, },
// 获取抄送列表 // 获取抄送列表
getNotifyList(){ getNotifyList(type){
this.$store.dispatch("call", { this.$store.dispatch("call", {
method: 'get', method: 'get',
url: 'approve/procHistory/findProcNotify', url: 'approve/procHistory/findProcNotify',
data: { data: {
page:this.page, page: type == 'scroll' ? this.notifyPage : 1,
page_size: this.pageSize, page_size: type == 'scroll' ? this.pageSize : this.notifyPage * this.pageSize,
proc_def_name: this.approvalType == 'all' ? '' : this.approvalType, proc_def_name: this.approvalType == 'all' ? '' : this.approvalType,
} }
}).then(({data}) => { }).then(({data}) => {
let activeId = 0; let activeId = 0;
let activeIndex = 0; let activeIndex = 0;
this.notifyTotal = data.total;
if( this.notifyList.length == 0 || this.notifyList.length == data.rows.length){ if( this.notifyList.length == 0 || this.notifyList.length == data.rows.length){
this.notifyList?.map((res)=>{ if(res._active) activeId = res.id }) this.notifyList?.map((res)=>{ if(res._active) activeId = res.id })
} }
this.notifyList = data.rows.map((h,index)=>{ let lists = data.rows.map((h,index)=>{
h._active = activeId > 0 ? h.id == activeId : index == 0; h._active = activeId > 0 ? h.id == activeId : index == 0;
if(h._active) activeIndex = index if(h._active) activeIndex = index
if(type == 'scroll' && this.notifyList.map(item=>{return item.id}).indexOf(h.id) == -1 ){
this.notifyList.push(h)
}
return h; return h;
}) })
if(type != 'scroll'){
this.notifyList = lists;
}
if(this.tabsValue == 'notify'){ if(this.tabsValue == 'notify'){
this.$nextTick(()=>{ this.$nextTick(()=>{
this.details = this.notifyList[activeIndex] || {} this.details = this.notifyList[activeIndex] || {}
@ -462,31 +568,39 @@ export default {
$A.modalError(msg); $A.modalError(msg);
}).finally(_ => { }).finally(_ => {
this.loadIng = false; this.loadIng = false;
this.notifyLoad = false;
}); });
}, },
// 获取我发起的 // 获取我发起的
getInitiatedList(){ getInitiatedList(type){
this.$store.dispatch("call", { this.$store.dispatch("call", {
method: 'post', method: 'post',
url: 'approve/process/startByMyselfAll', url: 'approve/process/startByMyselfAll',
data: { data: {
page: this.page, page: type == 'scroll' ? this.initiatedPage : 1,
page_size: this.pageSize, page_size: type == 'scroll' ? this.pageSize : this.initiatedPage * this.pageSize,
proc_def_name: this.approvalType == 'all' ? '' : this.approvalType, proc_def_name: this.approvalType == 'all' ? '' : this.approvalType,
state: this.searchState == 'all' ? '' : this.searchState state: this.searchState == 'all' ? '' : this.searchState
} }
}).then(({data}) => { }).then(({data}) => {
let activeId = 0; let activeId = 0;
let activeIndex = 0; let activeIndex = 0;
this.initiatedTotal = data.total;
if( this.initiatedList.length == 0 || this.initiatedList.length == data.rows.length){ if( this.initiatedList.length == 0 || this.initiatedList.length == data.rows.length){
this.initiatedList?.map((res)=>{ if(res._active) activeId = res.id }) this.initiatedList?.map((res)=>{ if(res._active) activeId = res.id })
} }
this.initiatedList = data.rows.map((h,index)=>{ let lists = data.rows.map((h,index)=>{
h._active = activeId > 0 ? h.id == activeId : index == 0; h._active = activeId > 0 ? h.id == activeId : index == 0;
if(h._active) activeIndex = index if(h._active) activeIndex = index
if(type == 'scroll' && this.initiatedList.map(item=>{return item.id}).indexOf(h.id) == -1 ){
this.initiatedList.push(h)
}
return h; return h;
}) })
if(type != 'scroll'){
this.initiatedList = lists;
}
if(this.tabsValue == 'initiated'){ if(this.tabsValue == 'initiated'){
this.$nextTick(()=>{ this.$nextTick(()=>{
this.details = this.initiatedList[activeIndex] || {} this.details = this.initiatedList[activeIndex] || {}
@ -496,6 +610,7 @@ export default {
$A.modalError(msg); $A.modalError(msg);
}).finally(_ => { }).finally(_ => {
this.loadIng = false; this.loadIng = false;
this.initiatedLoad = false;
}); });
}, },
@ -556,7 +671,10 @@ export default {
$A.messageSuccess(msg); $A.messageSuccess(msg);
this.addShow = false; this.addShow = false;
this.$refs.initiateRef.resetFields(); this.$refs.initiateRef.resetFields();
this.tabsClick(); this.tabsValue = 'initiated';
this.$nextTick(()=>{
this.tabsClick();
})
}).catch(({msg}) => { }).catch(({msg}) => {
$A.modalError(msg); $A.modalError(msg);
}).finally(_ => { }).finally(_ => {

16
resources/assets/sass/pages/page-approve.scss vendored
View File

@ -39,9 +39,21 @@
margin-bottom: 10px; margin-bottom: 10px;
> div { > div {
display: flex;
gap: 10px;
overflow: hidden;
.ivu-select {
width: 150px;
}
.ivu-dropdown { .ivu-dropdown {
margin-right: 8px; margin-right: 8px;
} }
.load{
font-size: 12px;
width: 20px;
height: 32px;
overflow: hidden;
}
} }
} }
@ -70,6 +82,10 @@
max-width: 100%; max-width: 100%;
} }
.load{
text-align: center;
}
.approve-main-list { .approve-main-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;