501 lines
12 KiB
Vue
501 lines
12 KiB
Vue
<template>
|
||
<view class="approval">
|
||
<!-- 选项卡切换 -->
|
||
<view class="tab-bar">
|
||
<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab == index }"
|
||
@tap="handleChange(index)">
|
||
{{ tab }}
|
||
</view>
|
||
</view>
|
||
<view class="content" v-if="processes.length!==0">
|
||
<view class="search-bar">
|
||
<input class="input" placeholder="姓名" v-model="searchName" @confirm="doSearch" />
|
||
<picker mode="date" :value="searchDate" @change="onDateChange">
|
||
<view class="picker-text">{{ searchDate || '时间' }}</view>
|
||
</picker>
|
||
<button class="primary" @tap="doSearch">搜索</button>
|
||
<button class="reset" @tap="resetSearch">重置</button>
|
||
</view>
|
||
<view class="list">
|
||
<view class="item" v-for="(process,index) in processes" :key="index">
|
||
<view class="top">
|
||
<view>
|
||
流程名称: {{process.procDefName}}
|
||
</view>
|
||
<view>
|
||
当前节点: {{process.taskName}}
|
||
</view>
|
||
<view>
|
||
<text v-if="currentTab==0">
|
||
办理人: {{process.assigneeName}}
|
||
<text class="dept">{{process.assigneeDeptName}}</text>
|
||
</text>
|
||
<text v-else>
|
||
流程发起人: {{process.startUserName}}
|
||
<text class="dept">{{process.startDeptName}}</text>
|
||
</text>
|
||
</view>
|
||
<view>
|
||
流程状态: <text
|
||
:class="process.finishTime==null?'proceed-status':'finish-status'">{{process.finishTime==null?'进行中':'已完成'}}</text>
|
||
</view>
|
||
<view>
|
||
提交时间: {{process.createTime}}
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<button class="primary" @click="toDetails(process)"
|
||
v-show="currentTab==0||currentTab==2">详情</button>
|
||
<button class="warn" v-if="currentTab==1" @tap="toDetails(process)">处理任务</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="loading-more" v-if="currentPage<totalPages">
|
||
<uni-load-more status="loading" />
|
||
</view>
|
||
<view class="loading-more" v-else>
|
||
没有更多数据了~~~
|
||
</view>
|
||
</view>
|
||
<view class="empty" v-else-if="processes.length==0&&topLoading==false">
|
||
<image src="@/static/empty.png" mode="widthFix"></image>
|
||
暂时没有数据
|
||
</view>
|
||
<view class="loading-more-top" v-if="topLoading">
|
||
<uni-load-more style="padding-top: 90px;" status="loading" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {
|
||
myProcess,
|
||
todoList,
|
||
finishedList,
|
||
stopProcess
|
||
} from "@/api/task.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentTab: 1, // 默认选中的标签索引
|
||
tabs: ['我发起的', '待办任务', '已办任务'], // 标签列表
|
||
processes: [],
|
||
totalPages: 0,
|
||
currentPage: 1,
|
||
loading: false, // 加载状态标志
|
||
topLoading: true,
|
||
role: uni.getStorageSync("roles"),
|
||
searchName: '',
|
||
searchDate: ''
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
if (option.tab) {
|
||
this.currentTab = option.tab;
|
||
}
|
||
this.getList();
|
||
},
|
||
onPageScroll(e) {
|
||
if (this.loading) {
|
||
return;
|
||
}
|
||
const scrollTop = e.scrollTop;
|
||
let windowHeight;
|
||
if (uni.getSystemInfoSync) {
|
||
windowHeight = uni.getSystemInfoSync().windowHeight;
|
||
} else {
|
||
windowHeight = window.innerHeight;
|
||
}
|
||
let scrollHeight;
|
||
if (uni.getSystemInfoSync) {
|
||
scrollHeight = windowHeight * 2;
|
||
} else {
|
||
scrollHeight = Math.max(
|
||
document.body.scrollHeight,
|
||
document.documentElement.scrollHeight,
|
||
document.documentElement.offsetHeight
|
||
);
|
||
}
|
||
if (scrollHeight - scrollTop - windowHeight <= 0) {
|
||
if (this.currentPage == this.totalPages) {
|
||
|
||
} else {
|
||
this.currentPage++;
|
||
this.getList();
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
//销假
|
||
toComplete(procInsId, taskId) {
|
||
uni.navigateTo({
|
||
url: "/pages/applyleave/cancellationLeave?procInsId=" + procInsId + "&taskId=" + taskId
|
||
})
|
||
},
|
||
// 标签切换时触发
|
||
handleChange(index) {
|
||
if (this.topLoading) return; // 如果正在加载数据，则不执行任何操作
|
||
this.processes = [];
|
||
this.currentTab = index;
|
||
this.currentPage = 1;
|
||
this.topLoading = true;
|
||
this.getList();
|
||
},
|
||
doSearch() {
|
||
this.currentPage = 1;
|
||
this.processes = [];
|
||
this.topLoading = true;
|
||
this.getList();
|
||
},
|
||
resetSearch() {
|
||
this.searchName = '';
|
||
this.searchDate = '';
|
||
this.currentPage = 1;
|
||
this.processes = [];
|
||
this.topLoading = true;
|
||
this.getList();
|
||
},
|
||
onDateChange(e) {
|
||
this.searchDate = e.detail.value;
|
||
},
|
||
getList() {
|
||
this.loading = true;
|
||
let sdata = {
|
||
pageNum: this.currentPage,
|
||
pageSize: 10,
|
||
};
|
||
if (this.searchName) {
|
||
sdata.startUserName = this.searchName;
|
||
}
|
||
if (this.searchDate) {
|
||
if (this.currentTab === 2) {
|
||
// 已办任务：PC端使用 startTime/endTime；时间对应“提交时间”
|
||
sdata.startTime = this.searchDate;
|
||
sdata.endTime = this.searchDate;
|
||
} else {
|
||
// 我发起的、待办任务：PC端使用 deployTime；时间对应“提交时间”
|
||
sdata.deployTime = this.searchDate;
|
||
}
|
||
}
|
||
console.log(this.processes);
|
||
if (this.currentTab == 0) {
|
||
myProcess(sdata).then(res => {
|
||
if (this.currentPage == 1) {
|
||
this.processes = res.data.records; // 如果是第一页，直接显示新数据
|
||
} else {
|
||
this.processes = this.processes.concat(res.data.records); // 否则追加新数据到列表中
|
||
}
|
||
// this.processes = this.processes.concat(res.data.records);
|
||
this.totalPages = res.data.pages;
|
||
this.loading = false;
|
||
this.topLoading = false;
|
||
})
|
||
} else if (this.currentTab == 1) {
|
||
console.log(1);
|
||
todoList(sdata).then(res => {
|
||
// this.processes = res.data.records
|
||
// this.processes = this.processes.concat(res.data.records);
|
||
if (this.currentPage == 1) {
|
||
this.processes = res.data.records; // 如果是第一页，直接显示新数据
|
||
} else {
|
||
this.processes = this.processes.concat(res.data.records); // 否则追加新数据到列表中
|
||
}
|
||
this.totalPages = res.data.pages;
|
||
this.loading = false;
|
||
this.topLoading = false;
|
||
})
|
||
} else {
|
||
console.log(2);
|
||
finishedList(sdata).then(res => {
|
||
// this.processes = res.data.records;
|
||
// this.processes = this.processes.concat(res.data.records);
|
||
if (this.currentPage == 1) {
|
||
this.processes = res.data.records; // 如果是第一页，直接显示新数据
|
||
} else {
|
||
this.processes = this.processes.concat(res.data.records); // 否则追加新数据到列表中
|
||
}
|
||
this.totalPages = res.data.pages;
|
||
this.loading = false;
|
||
this.topLoading = false;
|
||
})
|
||
}
|
||
},
|
||
cancelApply(procInsId) {
|
||
let sdata = {
|
||
instanceId: procInsId
|
||
}
|
||
uni.showModal({
|
||
confirmText: "确定",
|
||
cancelText: "放弃",
|
||
confirmColor: "#aa0000",
|
||
title: "确定取消吗?",
|
||
success: res => {
|
||
if (res.confirm) {
|
||
stopProcess(sdata).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '取消成功',
|
||
duration: 2000,
|
||
success: res => {
|
||
this.getList();
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
toDetails(process) {
|
||
let query = {
|
||
procInsId: process.procInsId,
|
||
executionId: process.executionId,
|
||
deployId: process.deployId,
|
||
taskId: process.taskId,
|
||
taskName: process.taskName,
|
||
startUser: process.startUserName + '-' + process.startDeptName,
|
||
category: process.category,
|
||
tag: this.currentTab
|
||
}
|
||
console.log(process);
|
||
//休学申请
|
||
if (process.category == 'quitSchool') {
|
||
uni.navigateTo({
|
||
url: `/pages/Approval/handleTask/rtStuQuitSchool/detail?query=${JSON.stringify(query)}`
|
||
})
|
||
}
|
||
//退学申请
|
||
else if (process.category == 'dropOut') {
|
||
uni.navigateTo({
|
||
url: `/pages/Approval/handleTask/rtStuDropOutSchool/detail?query=${JSON.stringify(query)}`
|
||
})
|
||
}
|
||
// 给予退学申请
|
||
else if (process.category == 'disqualification') {
|
||
uni.navigateTo({
|
||
url: `/pages/Approval/handleTask/disqualifiCationIndex/detail?query=${JSON.stringify(query)}`,
|
||
})
|
||
}
|
||
//复学申请
|
||
else if (process.category == 'reentry') {
|
||
console.log(this.currentTab);
|
||
uni.navigateTo({
|
||
url: `/pages/Approval/handleTask/rtStuReentrySchool/detail?query=${JSON.stringify(query)}`,
|
||
})
|
||
}
|
||
else if (process.category == 'leave' && process.taskName == '提交请假申请'&&this.currentTab==1) {
|
||
console.log(this.currentTab);
|
||
uni.navigateTo({
|
||
url: `/pages/applyleave/editLeave?id=${process.procInsId}&type=task&taskId=${process.taskId}`,
|
||
})
|
||
}
|
||
else {
|
||
uni.navigateTo({
|
||
url: `/pages/details/details?query=${JSON.stringify(query)}`,
|
||
})
|
||
}
|
||
// if (this.currentTab == 0 || this.currentTab == 2) {
|
||
|
||
// } else {
|
||
// if (process.category == 'quitSchool') {
|
||
// uni.navigateTo({
|
||
// url: `/pages/Approval/handleTask/rtStuQuitSchool/detail??query=${JSON.stringify(query)}`
|
||
// })
|
||
// return;
|
||
// } else if (process.category == 'dropOut') {
|
||
// uni.navigateTo({
|
||
// url: `/pages/Approval/handleTask/rtStuDropOutSchool/detail??query=${JSON.stringify(query)}`
|
||
// })
|
||
// return;
|
||
// }
|
||
// uni.navigateTo({
|
||
// url: `/pages/details/details?query=${JSON.stringify(query)}`,
|
||
// })
|
||
// }
|
||
},
|
||
editLeave(procInsId, taskId) {
|
||
uni.navigateTo({
|
||
url: "/pages/applyleave/editLeave?id=" + procInsId + "&type=task" + "&taskId=" + taskId
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.loading-more-top {
|
||
/* #ifdef MP-WEIXIN */
|
||
padding-top: 80px;
|
||
/* #endif */
|
||
}
|
||
|
||
.approval {
|
||
.tab-bar {
|
||
position: fixed;
|
||
z-index: 999;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background-color: #ffffff;
|
||
padding: 10px 10px;
|
||
background-color: white;
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
color: #333;
|
||
padding: 10px;
|
||
|
||
&.active {
|
||
color: #007aff;
|
||
border-bottom: 2px solid #007aff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 10px;
|
||
background-color: #ffffff;
|
||
border-bottom: 1px solid #EDEDED;
|
||
position: sticky;
|
||
top: 58px;
|
||
z-index: 998;
|
||
.input {
|
||
flex: 1;
|
||
border: 1px solid #EDEDED;
|
||
border-radius: 4px;
|
||
padding: 6px 8px;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
box-sizing: border-box;
|
||
}
|
||
.picker-text {
|
||
border: 1px solid #EDEDED;
|
||
border-radius: 4px;
|
||
padding: 6px 8px;
|
||
color: #555555;
|
||
}
|
||
button.primary {
|
||
border: 1px solid #007aff;
|
||
color: #007aff;
|
||
}
|
||
button.reset {
|
||
border: 1px solid #909399;
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
.empty {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: 200rpx;
|
||
color: #9E9E9E;
|
||
font-size: 36rpx;
|
||
|
||
image {
|
||
width: 250rpx;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding-top: 58px;
|
||
|
||
|
||
.list {
|
||
.item {
|
||
padding: 20px 10px;
|
||
border-bottom: 1px solid #EDEDED;
|
||
|
||
.top {
|
||
view {
|
||
margin-bottom: 10px;
|
||
|
||
.dept {
|
||
background-color: #f4f4f5;
|
||
padding: 3px;
|
||
border-radius: 4px;
|
||
color: #909399;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.proceed-status {
|
||
background-color: #1890ff;
|
||
color: white;
|
||
padding: 2px 3px;
|
||
border-radius: 5px;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.finish-status {
|
||
background-color: #4CD964;
|
||
color: white;
|
||
padding: 2px 3px;
|
||
border-radius: 5px;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
|
||
view:first-child {
|
||
font-size: 40rpx;
|
||
color: black;
|
||
}
|
||
|
||
view:not(:first-child) {
|
||
color: #555555;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 25px;
|
||
|
||
button {
|
||
margin: 0;
|
||
background-color: transparent;
|
||
margin-right: 10px;
|
||
padding: 0px 10px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
font-size: 28rpx;
|
||
|
||
&.primary {
|
||
border: 1px solid #007aff;
|
||
color: #007aff;
|
||
}
|
||
|
||
&.warn {
|
||
border: 1px solid #ff0000;
|
||
color: #ff0000;
|
||
}
|
||
|
||
&.success {
|
||
border: 1px solid #4CD964;
|
||
color: #4CD964;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.loading-more {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
</style> |