<template>
|
<view class="home">
|
<!-- 轮播图 -->
|
<view class="home_swipe"><u-swiper :list="list3" indicator indicatorMode="line" circular></u-swiper></view>
|
<!-- 我的申请 -->
|
<combined-title title="我的申请" detailsPath="/pages/my-application/my-application"></combined-title>
|
<combination-card v-for="(item, index) in shenqingData" index="index">
|
<template v-slot:top>
|
<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.id)" v-if="item.status == 1">
|
<image src="@/static/home/cehui.png" mode=""></image>
|
<view>撤回</view>
|
</view>
|
<view @click="checkTheScheduleClick" v-if="item.status == 1">
|
<image src="@/static/home/jindu.png" mode=""></image>
|
<view>查看进度</view>
|
</view>
|
<view @click="theFormDataClick" v-if="item.status == 1 || item.status == 2 ">
|
<image src="@/static/home/biaodan.png" mode=""></image>
|
<view>表单数据</view>
|
</view>
|
<view v-if="item.status == 3">
|
<image src="@/static/home/history.png" mode="" ></image>
|
<view>重新申请</view>
|
</view>
|
<view v-if="item.status == 3">
|
<image src="@/static/home/history.png" mode="" ></image>
|
<view>编辑</view>
|
</view>
|
<view @click="approvalHistoryClick" v-if="item.status == 2 || item.status == 3">
|
<image src="@/static/home/history.png" mode=""></image>
|
<view>审批历史</view>
|
</view>
|
|
</view>
|
<!-- 已结束小组按钮 -->
|
<!-- <view class="bottom-content__chulizhong bottom-content__item" v-if="item.status == 2">
|
<view @click="theFormDataClick">
|
<image src="@/static/home/biaodan.png" mode=""></image>
|
<view>表单数据</view>
|
</view>
|
|
</view> -->
|
</view>
|
</template>
|
</combination-card>
|
|
<!-- 我的待办 -->
|
<combined-title title="我的待办" detailsPath="/pages/my-todo/my-todo"></combined-title>
|
<combination-card v-for="(item, index) in daibanData" index="index">
|
<template v-slot:top>
|
<view>
|
<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">
|
<image src="@/static/home/jindu.png" mode=""></image>
|
<view>申请详情</view>
|
</view>
|
<view @click="adoptModalShow = true">
|
<image src="@/static/home/tongguo.png" mode=""></image>
|
<view>通过</view>
|
</view>
|
<view @click="rejectModalShow = true">
|
<image src="@/static/home/bohui.png" mode=""></image>
|
<view>驳回</view>
|
</view>
|
<view @click="approvalHistoryClick">
|
<image src="@/static/home/history.png" mode=""></image>
|
<view>历史</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</combination-card>
|
|
<!-- 我的已办 -->
|
<combined-title title="我的已办 " detailsPath="/pages/my-have-todo/my-have-todo"></combined-title>
|
<combination-card v-for="(item, index) in yibanData" index="index">
|
<template v-slot:top>
|
<view>
|
<text>{{ item.actBusiness.title }}</text>
|
</view>
|
</template>
|
<template v-slot:center>
|
<view class="center-container">
|
<view class="center-content__one center-margin">
|
<view>
|
<text>任务名称：{{ item.name }}</text>
|
</view>
|
<view>
|
<text>所属流程：{{ item.processName }}</text>
|
</view>
|
</view>
|
<view class="center-content__two center-margin">
|
<view>
|
<text>发起人：{{ item.actBusiness.createByName }}</text>
|
</view>
|
<view>
|
<text>审批操作：{{ item.deleteReason }}</text>
|
</view>
|
</view>
|
<view class="center-content__three center-margin">
|
<view class="">
|
<text>审批意见：{{ item.comment }}</text>
|
</view>
|
<view class="">
|
<text>
|
耗时：{{
|
item.duration >= 86400000
|
? parseInt(item.duration / 86400000 + '天' + parseInt(item.duration % 86400000) / 3600000 + '时' + parseInt(item.duration % 3600000) / 60000 + '分')
|
: item.duration >= 3600000
|
? parseInt(item.duration / 3600000) + '时' + parseInt(item.duration / 3600000 % 3600000) + '分'
|
: parseInt(item.duration / 60000) + '分'
|
}}
|
</text>
|
</view>
|
</view>
|
<view class="center-content__four">
|
<text>创建时间：{{ item.createTime }}</text>
|
</view>
|
</view>
|
</template>
|
<template v-slot:bottom>
|
<view class="bottom-container">
|
<!-- 已办按钮 -->
|
<view class="bottom-content__item">
|
<view @click="theFormDataClick">
|
<image src="@/static/home/biaodan.png" mode=""></image>
|
<view>表单数据</view>
|
</view>
|
<view @click="approvalHistoryClick">
|
<image src="@/static/home/history.png" mode=""></image>
|
<view>审批历史</view>
|
</view>
|
<view @click="deleteApplicationClick(item.id)">
|
<image src="@/static/home/delete.png" mode=""></image>
|
<view>删除</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</combination-card>
|
|
<!-- 撤回模态框 -->
|
<view class="wodeshenqingMotai">
|
<u-modal width="684rpx" :show="withDrawShow" title="撤回原因" :showCancelButton="true" @confirm="withDrawConfirm" @cancel="withDrawCancel">
|
<view class="slot-content"><u--textarea v-model="withDrawContent" placeholder="请输入撤回原因"></u--textarea></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="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="deleteApplicationModal">
|
<u-modal
|
:show="deleteApplicationModalShow"
|
title="提示"
|
content="确定删除该申请？"
|
:showCancelButton="true"
|
@confirm="deleteApplicationModalConfirm"
|
@cancel="deleteApplicationModalCancel"
|
></u-modal>
|
</view>
|
|
<!-- 选择器 -->
|
<u-picker @cancel="statusSeletShow = false" @confirm="statusConfirm" :show="statusSeletShow" :columns="statusList"></u-picker>
|
|
<!-- 菜单栏 -->
|
<popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
|
</view>
|
</template>
|
|
<script>
|
import { timeConsuming } from '@/utils/nowDate.js';
|
import popupMenu from '@/components/common/popup-menu/popup-menu.vue';
|
import combinedTitle from '@/components/common/combined-title/combined-title.vue';
|
import combinationCard from '@/components/common/combination-card/combination-card.vue';
|
import {setAccessToken} from '@/utils/status.js'
|
export default {
|
name: 'home',
|
data() {
|
return {
|
// menuShow:false,// 菜单显示
|
status: ['草稿', '处理中', '已结束', '已撤回'],
|
statusColor: ['#DDDDDD', '#FF9900', '#007AFF', '#06BE00'],
|
result: ['未提交', '处理中', '通过', '驳回'],
|
resultColor: ['#DDDDDD', '#FF9900', '#06BE00', '#be2b2d'],
|
list3: ['https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png'],
|
// 撤回模态框
|
withDrawShow: false,
|
withDrawContent: '',
|
withDrawId: 0, // 撤回申请ID
|
// 通过模态框
|
adoptModalShow: false,
|
adoptModalContent: '',
|
// 驳回模态框
|
rejectModalShow: false,
|
rejectModalContent: '',
|
dataSeletText: '请选择状态',
|
// 删除申请模态框
|
deleteApplicationModalShow: false,
|
// 选择器
|
statusSeletShow: false,
|
statusList: [['中国', '美国', '日本']],
|
// data
|
shenqingData: [],
|
daibanData: [],
|
daibanData: [],
|
yibanData: [],
|
menuShow: false,
|
// 申请
|
myApplicationParams: {
|
status: '',
|
result: '',
|
pageNumber: 1,
|
pageSize: 2,
|
sort: 'createTime',
|
order: 'desc'
|
},
|
// 待办
|
todoParams: {
|
pageNumber: 1,
|
pageSize: 2
|
},
|
haveTodoParams: {
|
pageNumber: 1,
|
pageSize: 2,
|
sort: 'createTime',
|
order: 'desc'
|
}
|
};
|
},
|
// 点击导航栏菜单后
|
onNavigationBarButtonTap(e) {
|
console.log(e);
|
this.$refs.menuRef.menuClick();
|
},
|
onShow() {
|
if (this.menuShow == true) {
|
this.$refs.menuRef.menuClick();
|
}
|
this.init();
|
},
|
components: {
|
combinedTitle,
|
combinationCard,
|
popupMenu
|
},
|
methods: {
|
getUserInfo() {
|
this.$reqGet('getUserInfo').then(res => {
|
if(res.code == 0) {
|
uni.setStorageSync('userInfo',res.data.sysUser)
|
}
|
})
|
},
|
init() {
|
this.getUserInfo()
|
this.getProcessDataList(); // 申请列表
|
this.todoList(); // 我的待办
|
this.doneList(); // 我的已办
|
},
|
getProcessDataList() {
|
this.$reqGet('getProcessDataList', this.myApplicationParams).then(res => {
|
if (res.code === 0) {
|
// console.log('申请', res);
|
this.shenqingData = res.data.records;
|
}
|
});
|
},
|
todoList() {
|
this.$reqGet('todoList', this.todoParams).then(res => {
|
if (res.code === 0) {
|
// console.log('待办', res);
|
this.daibanData = res.data.content;
|
}
|
});
|
},
|
doneList() {
|
this.$reqGet('doneList', this.haveTodoParams).then(res => {
|
if (res.code === 0) {
|
// console.log('已办', res);
|
this.yibanData = res.data.content;
|
}
|
});
|
},
|
menushow(e) {
|
this.menuShow = e;
|
},
|
// 撤回模态框
|
withDrawClick(id) {
|
this.withDrawShow = true;
|
this.withDrawId = id;
|
},
|
withDrawConfirm() {
|
console.log(this.withDrawId);
|
if (this.withDrawContent.length >= 2) {
|
console.log(this.withDrawContent);
|
} else {
|
uni.showToast({
|
title: '请规范输入',
|
duration: 2000
|
});
|
}
|
},
|
// 通过模态框
|
adoptModalConfirm() {
|
this.adoptModalShow = false;
|
},
|
adoptModalCancel() {
|
this.adoptModalShow = false;
|
},
|
// 驳回模态框
|
rejectModalConfirm() {
|
this.rejectModalShow = false;
|
},
|
rejectModalCancel() {
|
this.rejectModalShow = false;
|
},
|
withDrawCancel() {
|
this.withDrawShow = false;
|
},
|
// 删除申请模态框
|
deleteApplicationModalConfirm() {
|
this.deleteApplicationModalShow = false;
|
},
|
deleteApplicationModalCancel() {
|
this.deleteApplicationModalShow = false;
|
},
|
// 查看进度
|
checkTheScheduleClick() {
|
uni.navigateTo({
|
url: '/pages/check-the-schedule/check-the-schedule'
|
});
|
},
|
// 表单数据
|
theFormDataClick() {
|
uni.navigateTo({
|
url: '/pages/the-form-data/the-form-data'
|
});
|
},
|
// 审批历史
|
approvalHistoryClick() {
|
uni.navigateTo({
|
url: '/pages/approval-history/approval-history'
|
});
|
},
|
// 删除申请
|
deleteApplicationClick(id) {
|
this.deleteApplicationModalShow = true;
|
console.log(id);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep.home {
|
height: 100%;
|
width: 100%;
|
padding-bottom: vww(24);
|
.home_swipe {
|
width: 100%;
|
height: vww(160);
|
.u-swiper {
|
height: vww(160) !important;
|
.u-swiper__wrapper {
|
height: vww(160) !important;
|
.uni-swiper-slides {
|
.u-swiper__wrapper__item {
|
.u-swiper__wrapper__item__wrapper {
|
.u-swiper__wrapper__item__wrapper__image {
|
height: vww(160) !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
// 卡片中间
|
.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() {
|
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;
|
}
|
}
|
}
|
}
|
|
// 通过模态框
|
.adoptModal {
|
// width:100%;
|
// height:vww(244);
|
.slot-content {
|
.u-textarea {
|
width: vww(280);
|
height: vww(90) !important;
|
.uni-textarea-wrapper {
|
height: vww(90) !important;
|
}
|
}
|
}
|
}
|
|
// 驳回模态框
|
.rejectModal {
|
.slot-content {
|
display: inline-block;
|
.u-textarea {
|
width: vww(280);
|
height: vww(90) !important;
|
.uni-textarea-wrapper {
|
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>
|
