<template>
|
<!-- 我的待办 -->
|
<view class="my-todo">
|
<!-- 搜索区域 -->
|
|
<view class="searchContainer">
|
<u-collapse :border="true"
|
@change="searchChange"
|
@close="searchChange"
|
@open="searchOpen"
|
>
|
<u-collapse-item :border="false"
|
title="搜索框"
|
name="Docs guide"
|
>
|
<view class="searchBox">
|
<view class="search">
|
<u-search @clickIcon="searchIconClick" :clearabled="true" :showAction="false" placeholder="请输入标题"
|
v-model="todoParams.title" shape="square"></u-search>
|
</view>
|
<!-- 状态选择器 -->
|
<!-- <view class="data-selet" @click="statusSeletShow = true">
|
<view class="content">
|
<text>{{ dataSeletText }}</text>
|
</view>
|
<view class="uni-select__icon"><image src="@/static/icon/select.png" mode="加载失败"></image></view>
|
</view> -->
|
<view class="search">
|
<u-search @clickIcon="searchIconClick" :clearabled="true" :showAction="false" placeholder="请输入任务名称"
|
v-model="todoParams.name" shape="square"></u-search>
|
</view>
|
</view>
|
|
<!-- 时间搜索区域 -->
|
<view class="timeContiner">
|
<uni-datetime-picker class="time-picker" type="date" :clear-icon="true" v-model="todoParams.startDate"
|
@change="startDateChange" placeholder="开始时间"/>
|
<uni-datetime-picker class="time-picker" type="date" :clear-icon="true" v-model="todoParams.endDate"
|
@change="endDateChange" placeholder="结束时间"/>
|
</view>
|
|
<view class="searchButton">
|
<u-button type="primary" text="搜索" @click="searchButtonClick"></u-button>
|
<u-button type="primary" text="清空" :plain="true" @click="emptyButtonClick"></u-button>
|
</view>
|
</u-collapse-item>
|
</u-collapse>
|
</view>
|
|
|
<!-- 我的待办卡片区域 -->
|
<view class="cardCheckGroup">
|
<u-checkbox-group v-model="checkBoxValue" placement="column" @change="checkboxChange" style="margin-bottom:50px">
|
<combination-card v-for="(item, index) in daibanData" index="index">
|
<template v-slot:top>
|
<view class="daibanTop">
|
<u-checkbox size="30" iconSize="18" :key="item.id" :name="item.id+item.procInstId"></u-checkbox>
|
<text>{{ item.actBusiness.title }}</text>
|
</view>
|
</template>
|
<template v-slot:center>
|
<view class="center-container">
|
<view class="center-content__one center-margin">
|
<view class="">
|
<text>任务名称：{{ item.name }}</text>
|
</view>
|
<view class="">
|
<text>所属流程：{{ item.processName }}</text>
|
</view>
|
</view>
|
<view class="center-content__two center-margin">
|
<text>发起人：{{ item.actBusiness.createByName }}</text>
|
</view>
|
|
<view class="center-content__three">
|
<text>创建时间：{{ item.createTime }}</text>
|
</view>
|
</view>
|
</template>
|
<template v-slot:bottom>
|
<view class="bottom-container">
|
<!-- 待办按钮 -->
|
<view class="bottom-content__item">
|
<view @click="theFormDataClick(item.tableId)" v-if="item.processName == '发运通知单'">
|
<image src="@/static/home/jindu.png" mode=""></image>
|
<view>申请详情</view>
|
</view>
|
<view @click="adopClick(item)">
|
<image src="@/static/home/tongguo.png" mode=""></image>
|
<view>通过</view>
|
</view>
|
<view @click="rejectClick(item)">
|
<image src="@/static/home/bohui.png" mode=""></image>
|
<view>驳回</view>
|
</view>
|
<view @click="approvalHistoryClick(item.procInstId)">
|
<image src="@/static/home/history.png" mode=""></image>
|
<view>历史</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</combination-card>
|
</u-checkbox-group>
|
</view>
|
|
<!-- 底部全选 -->
|
<view class="bottomTabbar">
|
<view class="bottomTabbar_checkBox">
|
<u-checkbox-group size="35" iconSize="18" v-model="totalSelectValue" placement="column" @change="totalSelectChange">
|
<u-checkbox labelSize="13px" label="全选" name="tatalSelect"></u-checkbox>
|
</u-checkbox-group>
|
</view>
|
<view class="bottomTabbar_button">
|
<u-button :plain="true" type="primary" text="批量驳回" @click="batchRejectClick"></u-button>
|
<u-button type="primary" text="批量通过" @click="batchAdoptClick"></u-button>
|
</view>
|
</view>
|
|
<!-- 通过模态框 -->
|
<view class="adoptModal">
|
<u-modal width="684rpx" :show="adoptModalShow" title="审批通过" :showCancelButton="true" @confirm="adoptModalConfirm"
|
@cancel="adoptModalCancel">
|
<view class="slot-content">
|
<view class="rejectMesaage">
|
<u-icon name="info-circle-fill" color="#0307ff"></u-icon>
|
<text>{{ modalType == 0 ? '注意：将默认分配给节点设定的所有可审批用户' : '注意：所有流程将驳回至发起人' }}</text>
|
</view>
|
<u--textarea v-model="adoptForm.comment" placeholder="请输入审批意见"></u--textarea>
|
</view>
|
</u-modal>
|
</view>
|
|
<!-- 驳回模态框 -->
|
<view class="rejectModal">
|
<u-modal width="684rpx" :show="rejectModalShow" title="驳回" :showCancelButton="true" @confirm="rejectModalConfirm"
|
@cancel="rejectModalCancel">
|
<view class="slot-content">
|
<view class="rejectMesaage">
|
<u-icon name="info-circle-fill" color="#0307ff"></u-icon>
|
<text>{{ modalType == 0 ? '注意：将默认分配给节点设定的所有可审批用户' : '注意：所有流程将驳回至发起人' }}</text>
|
</view>
|
<u--textarea v-model="rejectForm.comment" placeholder="请输入审批意见"></u--textarea>
|
<!-- <view class="rejectBack">
|
<view class="rejectBack-title"><text>驳回至</text></view>
|
<view class="data-selet" @click="statusSeletShow = true">
|
<view class="content">
|
<text>{{ dataSeletText }}</text>
|
</view>
|
<view class="uni-select__icon"><image src="@/static/icon/select.png" mode="加载失败"></image></view>
|
</view>
|
</view> -->
|
</view>
|
</u-modal>
|
</view>
|
|
<!-- 批量驳回模态框 -->
|
<!-- <view class="rejectModal">
|
<u-modal width="684rpx" :show="rejectModalShow" title="驳回" :showCancelButton="true" @confirm="rejectModalConfirm" @cancel="rejectModalCancel">
|
<view class="slot-content">
|
<u--textarea v-model="rejectModalContent" placeholder="请输入审批意见"></u--textarea>
|
<view class="rejectBack">
|
<view class="rejectBack-title"><text>驳回至</text></view>
|
<view class="data-selet" @click="statusSeletShow = true">
|
<view class="content">
|
<text>{{ dataSeletText }}</text>
|
</view>
|
<view class="uni-select__icon"><image src="@/static/icon/select.png" mode="加载失败"></image></view>
|
</view>
|
</view>
|
</view>
|
</u-modal>
|
</view> -->
|
|
<!-- 批量通过模态框 -->
|
<!-- <view class="adoptModal">
|
<u-modal width="684rpx" :show="adoptModalShow" title="审批通过" :showCancelButton="true" @confirm="adoptModalConfirm" @cancel="adoptModalCancel">
|
<view class="slot-content"><u--textarea v-model="adoptModalContent" placeholder="请输入审批意见"></u--textarea></view>
|
</u-modal>
|
</view> -->
|
|
<!--返回顶部-->
|
<view class="back-top-container">
|
<u-back-top :scroll-top="scrollTop"></u-back-top>
|
</view>
|
|
<!-- 菜单栏 -->
|
<popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
|
</view>
|
</template>
|
|
<script>
|
import popupMenu from '@/components/common/popup-menu/popup-menu.vue';
|
import combinationCard from '@/components/common/combination-card/combination-card.vue';
|
import { callWithErrorHandling } from "vue";
|
|
export default {
|
data() {
|
return {
|
scrollTop: 0,
|
// 复选框
|
checkBoxValue: [],
|
totalSelectValue: [],
|
// 通过模态框
|
adoptModalShow: false,
|
adoptModalContent: '',
|
adoptDataBox: [],
|
// 通过请求
|
adoptForm: {
|
ids: '',
|
comment: ''
|
},
|
// 驳回模态框
|
rejectModalShow: false,
|
rejectModalContent: '',
|
menuShow: false,
|
rejectDataBox: [],
|
// 驳回请求
|
rejectForm: {
|
procInstIds: '',
|
comment: ''
|
},
|
modalType: 0,
|
// data
|
daibanData: [],
|
// 待办
|
todoParams: {
|
name: '',
|
pageNumber: 1,
|
pageSize: 10,
|
title: '',
|
startDate: '',
|
endDate: '',
|
},
|
// 上拉加载更多
|
timer: {},
|
load: 0,
|
loadingText: '加载中...',
|
loadingType: 0,
|
contentText: {
|
contentDown: '上拉显示更多',
|
contentRefresh: '正在加载...',
|
contentNomore: '没有更多数据了'
|
}
|
};
|
},
|
// 返回顶部
|
onPageScroll(e) {
|
this.scrollTop = e.scrollTop;
|
},
|
onShow() {
|
if (this.menuShow == true) {
|
this.$refs.menuRef.menuClick()
|
}
|
this.todoParams.pageNumber = 1;
|
this.init();
|
},
|
// 点击导航栏菜单后
|
onNavigationBarButtonTap(e) {
|
// console.log(e);
|
this.$refs.menuRef.menuClick()
|
},
|
components: {
|
combinationCard,
|
popupMenu
|
},
|
// 上拉加载更多
|
onReachBottom() {
|
if (this.timer != null) {
|
clearTimeout(this.timer);
|
}
|
this.timer = setTimeout(() => {
|
this.getMoreNews();
|
}, 1000);
|
},
|
// 下拉加载
|
onPullDownRefresh() {
|
console.log('refresh');
|
setTimeout(() => {
|
uni.stopPullDownRefresh();
|
}, 1000);
|
this.init();
|
},
|
methods: {
|
init() {
|
this.todoParams.pageNumber = 1;
|
this.loadingType = 0;
|
this.daibanData = [];
|
// this.todoList();
|
this.getMoreNews();
|
},
|
// 待办列表
|
// todoList(){
|
// this.$reqGet('todoList', this.todoParams).then(res => {
|
// if (res.code === 0) {
|
// this.daibanData = res.data.content;
|
// }
|
// });
|
// },
|
getMoreNews() {
|
if (this.loadingType != 0) {
|
//loadingType!=0;直接返回
|
return false;
|
}
|
uni.showLoading({
|
title: "加载中..."
|
})
|
this.loadingType = 1;
|
uni.showNavigationBarLoading(); //显示加载动画
|
this.$reqGet('todoList', this.todoParams).then(res => {
|
uni.hideLoading();
|
// if (res.code === 0) {
|
// this.daibanData = res.data.content;
|
// }
|
this.todoParams.pageNumber++; // 得到数据之后 page+1
|
if (res.data.content.length < 1) {
|
// 没有数据
|
this.loadingType = 2;
|
uni.hideNavigationBarLoading(); // 关闭加载动画
|
uni.showToast({
|
title: '没有更多数据了！',
|
icon: 'error'
|
});
|
return;
|
}
|
|
if (this.todoParams.name != '' || this.todoParams.startDate != '' || this.todoParams.endDate != '' || this.todoParams.title != '') {
|
if(this.todoParams.pageNumber == 1){
|
this.daibanData = res.data.content;
|
}else{
|
this.daibanData = this.daibanData.concat(res.data.content);
|
}
|
} else {
|
if(this.todoParams.pageNumber == 1){
|
this.daibanData = [];
|
}
|
this.daibanData = this.daibanData.concat(res.data.content);
|
}
|
//将数据拼接在一起
|
this.loadingType = 0; // 将loadingType归0重置
|
uni.hideNavigationBarLoading(); // 关闭加载动画
|
});
|
},
|
// 搜索点击
|
searchButtonClick() {
|
this.loadingType == 0;
|
this.todoParams.pageNumber = 1;
|
this.init();
|
},
|
// 清空
|
emptyButtonClick() {
|
this.loadingType == 0;
|
this.todoParams.pageNumber = 1;
|
this.todoParams.name = '';
|
this.todoParams.title = '';
|
this.todoParams.startDate = '';
|
this.todoParams.endDate = '';
|
this.init();
|
},
|
menushow(e) {
|
this.menuShow = e;
|
},
|
// 时间选择器
|
startDateChange() {
|
// this.queryRealTimeShippingData.startDate = '';
|
// this.$nextTick(() => {
|
// console.log(this.queryRealTimeShippingData);
|
// this.realTimeShipping();
|
// });
|
},
|
endDateChange() {
|
// this.queryRealTimeShippingData.endDate = '';
|
// this.$nextTick(() => {
|
// console.log(this.queryRealTimeShippingData);
|
// this.realTimeShipping();
|
// });
|
},
|
searchChange(e){
|
console.log('e', e);
|
},
|
searchClose(e){
|
console.log('e', e);
|
},
|
searchOpen(e){
|
console.log('e', e);
|
},
|
// 搜索
|
searchIconClick() {
|
console.log(1111, this.searchData);
|
},
|
|
// 状态
|
statusConfirm(a) {
|
this.statusSeletShow = false;
|
console.log(a);
|
},
|
// 复选框
|
checkboxChange(n) {
|
console.log('checkbox', n);
|
},
|
totalSelectChange(n) {
|
if (n[0] == 'tatalSelect') {
|
this.daibanData.forEach(item => {
|
this.totalSelectValue.push(item.id + item.procInstId)
|
})
|
this.checkBoxValue = this.totalSelectValue
|
} else {
|
this.checkBoxValue = []
|
}
|
console.log('totalSelect', n);
|
},
|
// 表单数据
|
theFormDataClick(v) {
|
uni.navigateTo({
|
url: `/pages/the-form-data/the-form-data?index=${v}`
|
});
|
},
|
// 审批历史
|
approvalHistoryClick(v) {
|
uni.navigateTo({
|
url: `/pages/approval-history/approval-history?index=${v}`
|
});
|
},
|
// 通过
|
adopClick(v) {
|
console.log('通过',v);
|
this.adoptModalShow = true;
|
this.adoptForm.ids = v.id;
|
this.modalType = 0;
|
},
|
batchAdoptClick() {
|
if (this.checkBoxValue.length != 0) {
|
this.adoptModalShow = true;
|
} else {
|
this.$u.toast('未选择申请！')
|
}
|
},
|
// 通过模态框
|
adoptModalConfirm() {
|
this.adoptModalShow = false;
|
if(this.checkBoxValue.length >= 1){
|
this.checkBoxValue.forEach(item => {
|
this.adoptDataBox.push(item.slice(0, 6))
|
})
|
this.adoptForm.ids = this.adoptDataBox.toString();
|
}
|
this.$reqPost('passAll', this.adoptForm).then(res => {
|
console.log('是否还原', this.adoptForm.ids, this.rejectForm.procInstIds);
|
if (res.code == 0) {
|
this.$u.toast('操作成功!');
|
} else {
|
this.$u.toast('添加失败!!');
|
}
|
// 初始化
|
this.checkBoxValue = []
|
this.adoptForm.ids = '';
|
this.adoptForm.comment = '';
|
this.init();
|
});
|
},
|
adoptModalCancel() {
|
this.adoptModalShow = false;
|
},
|
// 驳回点击
|
rejectClick(v) {
|
this.modalType = 1;
|
this.rejectModalShow = true;
|
this.rejectForm.procInstIds = v.procInstId;
|
},
|
// 驳回模态框
|
rejectModalConfirm() {
|
this.rejectModalShow = false;
|
if(this.checkBoxValue.length >= 1){
|
this.checkBoxValue.forEach(item => {
|
this.rejectDataBox.push(item.slice(6, 12))
|
})
|
this.rejectForm.procInstIds = this.rejectDataBox.toString();
|
}
|
this.$reqPost('backAll', this.rejectForm).then(res => {
|
if (res.code == 0) {
|
this.$u.toast('操作成功！');
|
} else {
|
this.$u.toast('操作失败！！！');
|
}
|
// 初始化
|
this.rejectForm.procInstIds = '';
|
this.rejectForm.comment = '';
|
this.checkBoxValue = []
|
this.init();
|
});
|
},
|
rejectModalCancel() {
|
this.rejectModalShow = false;
|
},
|
|
batchRejectClick() {
|
if (this.checkBoxValue.length != 0) {
|
this.rejectModalShow = true;
|
|
console.log(this.rejectDataBox);
|
} else {
|
this.$u.toast('未选中申请！')
|
}
|
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep.my-todo {
|
// 搜索区域
|
.searchContainer {
|
width:94%;
|
margin:vww(16) auto;
|
.u-collapse {
|
.u-collapse-item {
|
.u-collapse-item__content {
|
.searchButton {
|
width: 100%;
|
margin: 0 auto;
|
display: flex;
|
|
.u-button {
|
width: 30%;
|
}
|
}
|
|
// 条件搜索
|
.searchBox {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
margin: 0 auto vww(16);
|
|
.search {
|
width: vww(158);
|
border: 1px solid #d1d1d1;
|
border-radius: vww(4);
|
|
.u-search {
|
.u-search__content {
|
height: 38px;
|
background-color: #ffffff !important;
|
|
.u-search__content__icon {
|
width: 10px;
|
height: 5.5px;
|
}
|
|
.u-search__content__close {
|
width: 16px !important;
|
height: 16px !important;
|
background-color: #cccccc !important;
|
|
.u-icon {
|
.u-icon__icon {
|
font-size: 10px !important;
|
}
|
}
|
}
|
|
.u-search__content__input {
|
background-color: #ffffff !important;
|
|
.uni-input-placeholder {
|
color: #CCCCCC !important;
|
}
|
}
|
}
|
}
|
}
|
|
// 下拉菜单
|
.data-selet {
|
border: 1px solid #d1d1d1;
|
border-radius: 4px;
|
width: vww(160);
|
// width: 100%;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
font-size: 13px;
|
color: #CCCCCC;
|
|
.uni-select__icon {
|
display: flex;
|
align-content: center;
|
margin: 0 10px;
|
|
image {
|
width: 10px;
|
height: 5.5px;
|
}
|
}
|
|
.content {
|
margin-left: vww(8);
|
width: vww(160);
|
}
|
}
|
}
|
|
// 时间搜索
|
.timeContiner {
|
width: 100%;
|
margin: 0 auto vww(16);
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
|
.uni-date {
|
width: vww(160);
|
|
.uni-date-editor {
|
.uni-date-editor--x {
|
.uni-date-x {
|
.uni-date__x-input {
|
.uni-input-wrapper {
|
.uni-input-placeholder {
|
color: #CCCCCC;
|
font-size: vww(13);
|
}
|
}
|
}
|
}
|
}
|
|
.uni-date-x--border {
|
border: 1px solid #d1d1d1 !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
|
}
|
|
// 卡片头部
|
.cardCheckGroup{
|
margin-bottom: vww(48);
|
}
|
.daibanTop{
|
.u-checkbox{
|
display:inline-block;
|
}
|
}
|
|
// 卡片中间
|
.center-container {
|
display: flex;
|
flex-direction: column;
|
|
.center-content__one {
|
display: flex;
|
|
view {
|
width: 50%;
|
}
|
}
|
|
.center-content__two {
|
display: flex;
|
// margin: vww(10) 0;
|
view {
|
width: 50%;
|
}
|
}
|
|
.center-content__three {
|
display: flex;
|
|
view {
|
width: 50%;
|
}
|
}
|
|
.center-content__four {
|
}
|
}
|
|
// 中间部分样式
|
.center-margin {
|
margin-bottom: vww(16);
|
}
|
|
// 卡片底部
|
.bottom-container {
|
.bottom-content__item {
|
display: flex;
|
justify-content: space-around;
|
|
view {
|
display: flex;
|
justify-content: center;
|
align-content: center;
|
margin-right: vww(10);
|
|
&:nth-last-child(1) {
|
margin-right: 0;
|
}
|
|
view {
|
display: inline-block;
|
}
|
|
image {
|
width: vww(16);
|
height: vww(16);
|
margin-right: vww(4);
|
}
|
}
|
}
|
}
|
|
// 返回顶部
|
.back-top-container{
|
.u-transition{
|
position:fixed;
|
bottom:vww(80)!important;
|
right:vww(20)!important;
|
}
|
}
|
|
// 底部
|
.bottomTabbar {
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
height: vww(48);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background-color: #f5f5f5;
|
|
.bottomTabbar_checkBox {
|
margin-left: vww(16);
|
|
.u-checkbox-group {
|
.u-checkbox {
|
}
|
}
|
}
|
|
.bottomTabbar_button {
|
display: flex;
|
|
.u-button {
|
font-size: 13px;
|
margin-right: vww(14);
|
width: vww(90);
|
height: vww(32);
|
}
|
}
|
}
|
|
// 通过模态框
|
.adoptModal {
|
// width:100%;
|
// height:vww(244);
|
.slot-content {
|
.rejectMesaage {
|
display: flex;
|
padding: vww(3);
|
border: 1px solid #0307ff;
|
border-radius: vww(4);
|
font-size: 13px;
|
|
text {
|
margin-left: vww(5);
|
}
|
}
|
|
.u-textarea {
|
margin-top: vww(10);
|
width: vww(280);
|
height: vww(90) !important;
|
|
.u-textarea__field {
|
height: vww(90) !important;
|
}
|
}
|
}
|
}
|
|
// 驳回模态框
|
.rejectModal {
|
.slot-content {
|
display: inline-block;
|
|
.rejectMesaage {
|
display: flex;
|
padding: vww(3);
|
border: 1px solid #0307ff;
|
border-radius: vww(4);
|
font-size: 13px;
|
|
text {
|
margin-left: vww(5);
|
}
|
}
|
|
.u-textarea {
|
margin-top: vww(10);
|
width: vww(280);
|
height: vww(90) !important;
|
|
.u-textarea__field {
|
height: vww(90) !important;
|
}
|
}
|
|
.rejectBack {
|
margin-top: vww(24);
|
|
.rejectBack-title {
|
font-size: vww(13);
|
}
|
|
// 下拉菜单
|
.data-selet {
|
border: 1px solid #d1d1d1;
|
border-radius: 4px;
|
width: vww(300);
|
height: 40px;
|
display: flex;
|
align-items: center;
|
font-size: 13px;
|
color: #666;
|
margin-top: vww(8);
|
|
.uni-select__icon {
|
display: flex;
|
align-content: center;
|
margin: 0 10px;
|
|
image {
|
width: 10px;
|
height: 5.5px;
|
}
|
}
|
|
.content {
|
margin-left: vww(8);
|
width: vww(280);
|
}
|
}
|
}
|
}
|
}
|
|
|
}
|
</style>
|
