<template>
|
<!-- 我的申请 -->
|
<view class="my-application">
|
<!-- 搜索区域 -->
|
<view class="searchBox">
|
<u-collapse :border="true"
|
@change="searchChange"
|
@close="searchClose"
|
@open="searchOpen"
|
>
|
<u-collapse-item :border="false"
|
title="搜索框"
|
name="Docs guide"
|
>
|
<view class="topRow">
|
<view class="search">
|
<u-search
|
@clickIcon="searchIconClick"
|
:clearabled="true"
|
:showAction="false"
|
placeholder="请输入标题"
|
v-model="myApplication.title"
|
shape="square"
|
searchIconColor="#cccccc"
|
></u-search>
|
</view>
|
|
<data-select-box ref="dataSelectBox" class="data-select-box" placeholder="请选择条件" v-model="selectText"
|
:clearabled="true" @click="dataSelectClick"></data-select-box>
|
</view>
|
<!-- 时间选择器 -->
|
<view class="example-body">
|
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick"/>
|
</view>
|
<view class="searchBtn">
|
<u-button type="primary" text="搜索" @click="searchClick"></u-button>
|
<u-button type="primary" :plain="true" text="清空" @click="emptyButtonClick"></u-button>
|
</view>
|
</u-collapse-item>
|
</u-collapse>
|
</view>
|
|
|
<!-- 选择器 -->
|
<u-picker @cancel="dataSelectCancel" @confirm="selectConfirm" :show="selectPickerShow"
|
:columns="selectList"></u-picker>
|
|
<!-- 我的申请卡片区域 -->
|
<!-- <u-checkbox-group v-model="checkBoxValue" placement="column" @change="checkboxChange" style="margin-bottom:150px"> -->
|
<combination-card v-for="(item, index) in shenqingData" index="index">
|
<template v-slot:top>
|
<!-- <u-checkbox size="35" :key="item.id" :name="item.id"></u-checkbox> -->
|
<view>
|
<text>{{ item.title }}</text>
|
</view>
|
</template>
|
<template v-slot:center>
|
<view class="center-container">
|
<view class="center-content__one center-margin">
|
<view class="">
|
<text>所属流程：{{ item.processName }}</text>
|
</view>
|
<view class="">
|
<text>审批环节：{{ item.currTaskName ||'' }}</text>
|
</view>
|
</view>
|
<view class="center-content__two center-margin">
|
<view class="">
|
状态：
|
<text :style="{ color: statusColor[item.status] }">{{ status[item.status] }}</text>
|
</view>
|
<view class="">
|
结果：
|
<text :style="{ color: resultColor[item.result] }">{{ result[item.result] }}</text>
|
</view>
|
</view>
|
<view class="center-content__three center-margin">
|
<text>创建时间：{{ item.createTime }}</text>
|
</view>
|
<view class="center-content__four">
|
<text>提交申请时间：{{ item.applyTime }}</text>
|
</view>
|
</view>
|
</template>
|
<template v-slot:bottom>
|
<view class="bottom-container">
|
<!-- 按钮区域 -->
|
<view class="bottom-content__chulizhong bottom-content__item">
|
<view @click="withDrawClick(item.procInstId)" v-if="item.status == 1">
|
<image src="@/static/home/cehui.png" mode=""></image>
|
<view>撤回</view>
|
</view>
|
<view @click="checkTheScheduleClick(item.procInstId)" v-if="item.status == 1">
|
<image src="@/static/home/jindu.png" mode=""></image>
|
<view>查看进度</view>
|
</view>
|
<view @click="theFormDataClick(item.tableId)" v-if="(item.status == 1 || item.status == 2 || item.status == 3 ) && (item.processName == '发运通知单')">
|
<image src="@/static/home/biaodan.png" mode=""></image>
|
<view>申请详情</view>
|
</view>
|
<!-- <view v-if="item.status == 3" @click="apply(item)">
|
<image src="@/static/home/history.png" mode=""></image>
|
<view>重新申请</view>
|
</view> -->
|
<view @click="editMyApplication(item)" v-if="item.status == 1 && item.processName == '发运通知单'">
|
<image src="@/static/home/history.png" mode=""></image>
|
<view>编辑</view>
|
</view>
|
<view @click="approvalHistoryClick(item.procInstId)" v-if="item.status == 2 || item.status == 3">
|
<image src="@/static/home/history.png" mode=""></image>
|
<view>审批历史</view>
|
</view>
|
<view @click="deleteWithDrawApplication(item.tableId)" v-if="item.status == 3">
|
<image src="@/static/home/delete.png" mode=""></image>
|
<view>删除</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</combination-card>
|
<!-- </u-checkbox-group> -->
|
|
<!-- 撤回模态框 -->
|
<view class="wodeshenqingMotai">
|
<u-modal width="684rpx" :show="withDrawShow" title="提示" :showCancelButton="true" @confirm="withDrawConfirm"
|
@cancel="withDrawCancel">
|
<view class="slot-content">
|
<!-- <u--textarea v-model="withDrawData.reason" placeholder="请输入撤回原因"></u--textarea> -->
|
<text>确认撤回该申请吗？</text>
|
</view>
|
</u-modal>
|
</view>
|
|
<!-- 批量删除模态框 -->
|
<view class="batchDeleteModal">
|
<u-modal
|
:show="batchDeleteModalShow"
|
title="提示"
|
content="确定删除申请？"
|
:showCancelButton="true"
|
@confirm="batchDeleteModalConfirm"
|
@cancel="batchDeleteModalCancel"
|
></u-modal>
|
</view>
|
|
<!--返回顶部-->
|
<view class="back-top-container">
|
<u-back-top :scroll-top="scrollTop" style="position:fixed;bottom:100px;right:100px;"></u-back-top>
|
</view>
|
|
<view class="empty-placeH">
|
|
</view>
|
|
<!-- 底部全选 -->
|
<view class="bottomTabbar">
|
<view class="bottomTabbar_checkBox">
|
<!-- <u-checkbox-group size="35" 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="batchDeleteClick"></u-button> -->
|
<u-button type="primary" text="新增申请" @click="newApplicationClick"></u-button>
|
</view>
|
</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 dataSelectBox from '@/components/common/data-select-box/data-select-box.vue';
|
|
export default {
|
name: 'MyApplication',
|
data() {
|
return {
|
scrollTop: 0,
|
status: ['草稿', '处理中', '已结束', '已撤回'],
|
statusColor: ['#dd8b8c', '#FF9900', '#007AFF', '#06BE00'],
|
result: ['未提交', '处理中', '通过', '驳回'],
|
resultColor: ['#dd8b8c', '#FF9900', '#06BE00', '#be2b2d'],
|
// 搜索区域
|
selectText: '',
|
// 选择器
|
selectPickerShow: false,
|
selectList: [['草稿', '处理中', '已结束', '已撤回'], ['未提交', '处理中', '通过', '驳回']],
|
activeColor: '#cccccc',
|
isActive: false,
|
// 时间选择器
|
range: [],
|
// 撤回模态框
|
withDrawShow: false,
|
withDrawData: {
|
// reason: '',
|
// id: '', // 撤回申请ID
|
procInstId: ''
|
},
|
// 重新申请
|
form: {
|
sendMessage: true,
|
sendSms: true,
|
sendEmail: true,
|
procDefId: '',
|
assignees: [],
|
priority: '0'
|
},
|
assigneeList: [],
|
showAssign: false,
|
isGateway: false,
|
isCustom: false,
|
// 批量删除申请
|
batchDeleteModalShow: false,
|
// 复选框
|
checkBoxValue: [],
|
totalSelectValue: [],
|
menuShow: false,
|
shenqingData: [], // 容器
|
// 请求参数
|
myApplication: {
|
title: '',
|
status: '',
|
result: '',
|
pageNumber: 1,
|
pageSize: 10,
|
startTime: '',
|
endTime: '',
|
sort: 'createTime',
|
order: 'desc'
|
},
|
// 上拉加载更多
|
timer: {},
|
load: 0,
|
loadingText: '加载中...',
|
loadingType: 0,
|
contentText: {
|
contentDown: '上拉显示更多',
|
contentRefresh: '正在加载...',
|
contentNomore: '没有更多数据了'
|
}
|
};
|
},
|
// 返回顶部
|
onPageScroll(e) {
|
// console.log('页面滑动', this.scrollTop);
|
this.scrollTop = e.scrollTop;
|
},
|
onShow() {
|
if (this.menuShow == true) {
|
this.$refs.menuRef.menuClick();
|
}
|
this.init();
|
},
|
// 点击导航栏菜单后
|
onNavigationBarButtonTap(e) {
|
// console.log(e);
|
this.$refs.menuRef.menuClick();
|
},
|
watch: {
|
// 时间绑定日期
|
range(nVal) {
|
console.log('范围选:', this.range);
|
this.myApplication.startTime = this.range[0];
|
this.myApplication.endTime = this.range[1];
|
},
|
// 监听输入框的内容
|
selectText(nVal) {
|
if (nVal == '') {
|
this.myApplication.status = '';
|
this.myApplication.result = '';
|
}
|
},
|
scrollTop(nVal){
|
if(nVal){
|
// console.log('页面滑动变化');
|
}
|
}
|
},
|
components: {
|
combinationCard,
|
popupMenu,
|
dataSelectBox
|
},
|
// 上拉加载更多
|
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.myApplication.pageNumber = 1;
|
this.loadingType = 0;
|
this.shenqingData = [];
|
this.getMoreNews();
|
},
|
// getProcessDataList() {
|
// this.$reqGet('getProcessDataList', this.myApplication).then(res => {
|
// if (res.code === 0) {
|
// console.log('申请', res);
|
// this.shenqingData = res.data.records;
|
// }
|
// });
|
// },
|
getMoreNews() {
|
if (this.loadingType !== 0) {
|
//loadingType!=0;直接返回
|
return false;
|
}
|
uni.showLoading({
|
title: '加载中...'
|
})
|
this.loadingType = 1;
|
uni.showNavigationBarLoading(); //显示加载动画
|
this.$reqGet('getProcessDataList', this.myApplication).then(response => {
|
uni.hideLoading();
|
console.log('response', response);
|
this.myApplication.pageNumber++; // 得到数据之后 page+1
|
if (response.data.records.length < 1) {
|
// 没有数据
|
this.loadingType = 2;
|
uni.hideNavigationBarLoading(); // 关闭加载动画
|
uni.showToast({
|
title: '没有更多数据了！',
|
icon: 'error'
|
});
|
return;
|
}
|
// this.myApplication.pageNumber++; // 每触底一次 page +1
|
if (this.myApplication.title || this.myApplication.status || this.myApplication.result || this.myApplication.startTime || this.myApplication.endTime) {
|
if(this.myApplication.pageNumber == 1){
|
this.shenqingData = response.data.records;
|
}else{
|
this.shenqingData = this.shenqingData.concat(response.data.records);
|
}
|
} else {
|
if(this.myApplication.pageNumber == 1){
|
this.shenqingData = [];
|
}
|
this.shenqingData = this.shenqingData.concat(response.data.records);
|
}
|
//将数据拼接在一起
|
this.loadingType = 0; // 将loadingType归0重置
|
uni.hideNavigationBarLoading(); // 关闭加载动画
|
});
|
},
|
// 条件选择器
|
selectConfirm(v) {
|
this.selectText = v.value.toString();
|
this.myApplication.status = v.indexs[0];
|
this.myApplication.result = v.indexs[1];
|
this.selectPickerShow = false;
|
},
|
dataSelectCancel() {
|
this.selectPickerShow = false;
|
this.$refs.dataSelectBox.isActive = false;
|
},
|
dataSelectClick() {
|
this.selectPickerShow = true;
|
},
|
// 菜单
|
menushow(e) {
|
this.menuShow = e;
|
},
|
// 时间选择器
|
maskClick(e) {
|
console.log('maskClick事件:', e);
|
},
|
searchChange(e){
|
console.log('e', e);
|
},
|
searchClose(e){
|
console.log('e', e);
|
},
|
searchOpen(e){
|
console.log('e', e);
|
},
|
searchClick() {
|
console.log('this.myApplication', this.myApplication);
|
this.myApplication.pageNumber = 1;
|
this.loadingType = 0;
|
this.getMoreNews();
|
},
|
emptyButtonClick() {
|
this.loadingType == 0;
|
this.myApplication.pageNumber = 1;
|
this.myApplication.title = '';
|
this.selectText = '';
|
this.range = [];
|
this.init();
|
},
|
// 撤回模态框
|
withDrawClick(procInstId) {
|
this.withDrawShow = true;
|
this.withDrawData.procInstId = procInstId;
|
},
|
withDrawConfirm() {
|
this.$reqPost('cancel', this.withDrawData).then(res => {
|
console.log('res', res);
|
if (res.code == 0) {
|
uni.showToast({
|
title: res.data,
|
duration: 2000
|
});
|
}
|
this.withDrawShow = false;
|
// 初始化申请列表
|
this.myApplication.pageNumber = 1;
|
this.shenqingData = [];
|
this.getMoreNews();
|
});
|
|
},
|
withDrawCancel() {
|
this.withDrawShow = false;
|
},
|
// apply(v) {
|
// if (!v.procDefId || v.procDefId == 'null') {
|
// this.$u.toast('流程定义为空');
|
// return;
|
// }
|
// this.form.id = v.id;
|
// this.form.procDefId = v.procDefId;
|
// this.form.title = v.title;
|
// // 加载审批人
|
// // this.userLoading = true;
|
// uni.showLoading({
|
// title: '审批人加载中'
|
// });
|
// // getFirstNode(v.procDefId).then((res) => {
|
// this.$reqGet('getFirstNode', {}, v.procDefId).then(res => {
|
// // this.userLoading = false;
|
// console.log('审批人', res);
|
// uni.hideLoading();
|
// if (res.data) {
|
// this.error = '';
|
// if (res.data.type == 3 || res.data.type == 4) {
|
// this.isGateway = true;
|
// this.form.firstGateway = true;
|
// this.showAssign = false;
|
// this.isCustom = false;
|
// return;
|
// }
|
// if (res.data.type == 5) {
|
// this.isCustom = true;
|
// this.isGateway = false;
|
// this.form.firstGateway = false;
|
// this.showAssign = false;
|
// return;
|
// }
|
// if (res.data.type == 1) {
|
// this.showAssign = true;
|
// this.isGateway = false;
|
// this.form.firstGateway = false;
|
// this.isCustom = false;
|
// if (res.data.users && res.data.users.length > 0) {
|
// this.assigneeList = res.data.users;
|
// // 默认勾选
|
// let ids = [];
|
// res.data.users.forEach(e => {
|
// ids.push(e.userId);
|
// });
|
// this.form.assignees = ids;
|
// this.showAssign = true;
|
// // 获取表单内容，重新创建申请
|
// this.$reqPost('apply', this.form, 'form').then(res => {
|
// console.log('重新提交申请', res);
|
// if (res.code == 0) {
|
// uni.showToast({
|
// title: res.data,
|
// icon: 'success',
|
// duration: 2000
|
// });
|
// }
|
// // 初始化申请列表
|
// this.myApplication.pageNumber = 1;
|
// this.shenqingData = [];
|
// this.getMoreNews();
|
// })
|
// } else {
|
// this.form.assignees = [];
|
// this.showAssign = true;
|
// this.error = '请进入"流程管理"为审批节点分配候选审批人员';
|
// }
|
// }
|
// }
|
// console.log(this.form);
|
// });
|
|
// this.modalVisible = true;
|
// // }
|
// },
|
// 修改申请
|
editMyApplication(v) {
|
console.log('修改申请');
|
uni.navigateTo({
|
url: `/pages/edit-my-application/edit-my-application?index=${v.tableId}`
|
});
|
},
|
// 批量删除模态框
|
batchDeleteClick() {
|
this.batchDeleteModalShow = true;
|
},
|
batchDeleteModalConfirm() {
|
this.batchDeleteModalShow = false;
|
},
|
batchDeleteModalCancel() {
|
this.batchDeleteModalShow = false;
|
},
|
// 搜索
|
searchIconClick() {
|
console.log(1111, this.myApplication.title);
|
},
|
|
checkboxChange(n) {
|
console.log('change', n);
|
},
|
totalSelectChange(n) {
|
if (n[0] == 'tatalSelect') {
|
this.shenqingData.forEach(item => {
|
this.totalSelectValue.push(item.id);
|
});
|
this.checkBoxValue = this.totalSelectValue;
|
} else {
|
this.checkBoxValue = [];
|
}
|
console.log('totalChange', n);
|
},
|
// 查看进度
|
checkTheScheduleClick(v) {
|
uni.navigateTo({
|
url: `/pages/check-the-schedule/check-the-schedule?index=${v}`
|
});
|
},
|
// 表单数据
|
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}`
|
});
|
},
|
// 新增申请
|
newApplicationClick() {
|
uni.navigateTo({
|
url: '/pages/new-application/new-application'
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep.my-application {
|
width: 100%;
|
height: 100%;
|
|
.searchBox {
|
width: 94%;
|
margin: vww(16) auto;
|
|
.u-collapse{
|
.u-collapse-item{
|
.u-collapse-item__content{
|
.topRow {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: nowrap;
|
|
.search {
|
// width: vww(160);
|
width: 48%;
|
|
.u-search {
|
border: 1px solid #d1d1d1;
|
border-radius: vww(4);
|
|
.u-search__content {
|
height: vww(38);
|
background-color: #ffffff !important;
|
|
.u-search__content__icon {
|
width: 10px;
|
height: 5.5px;
|
|
.u-icon {
|
.u-icon__icon {
|
font-size: 20px !important;
|
}
|
}
|
}
|
|
.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 {
|
margin-left: vww(10);
|
background-color: #ffffff !important;
|
|
.uni-input-placeholder {
|
color: #cccccc !important;
|
}
|
|
.u-search__content__input--placeholder {
|
// color:#CCCCCC;
|
}
|
}
|
}
|
}
|
}
|
|
.data-select-box {
|
width: 48%;
|
}
|
|
// 下拉菜单
|
// .data-selet {
|
// border: 1px solid #d1d1d1;
|
// border-radius: 4px;
|
// // width: vww(160);
|
// width:48%;
|
// 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(150);
|
// }
|
// }
|
}
|
|
// 时间选择器
|
.example-body {
|
margin-top: vww(16);
|
width: 100%;
|
}
|
|
// 搜索按钮
|
.searchBtn {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
|
.u-button {
|
width: vww(90);
|
height: vww(32);
|
margin: vww(16) auto 0;
|
}
|
}
|
}
|
}
|
}
|
|
|
}
|
|
// 卡片中间
|
.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);
|
}
|
}
|
}
|
}
|
|
// 模态框
|
.wodeshenqingMotai {
|
// width:100%;
|
// height:vww(244);
|
.slot-content {
|
.u-textarea {
|
width: vww(280);
|
height: vww(90) !important;
|
|
.uni-textarea-wrapper {
|
height: vww(90) !important;
|
}
|
}
|
}
|
}
|
|
// 返回顶部
|
.back-top-container{
|
.u-transition{
|
position:fixed;
|
bottom:vww(80)!important;
|
right:vww(20)!important;
|
}
|
}
|
|
// 底部占位
|
.empty-placeH{
|
height:vww(50);
|
}
|
|
|
// 底部
|
.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);
|
}
|
}
|
}
|
}
|
</style>
|
