462 lines
9.9 KiB
Vue
462 lines
9.9 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<headers :showBack="true">
|
|||
|
|
<view class="headerName">
|
|||
|
|
进度管理系统
|
|||
|
|
</view>
|
|||
|
|
</headers>
|
|||
|
|
<view class="tab flex2">
|
|||
|
|
<view class="tabType" @click="changeTab(1)" :class="checkedTab==1?'checkedTab':'noCheckTab'">进行中</view>
|
|||
|
|
<view class="tabType" @click="changeTab(2)" :class="checkedTab==2?'checkedTab':'noCheckTab'">已完成</view>
|
|||
|
|
<view class="tabType" @click="changeTab(0)" :class="checkedTab==0?'checkedTab':'noCheckTab'">未开始</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="title_list">
|
|||
|
|
<view>任务列表</view>
|
|||
|
|
<view class="title_right">任务数 <span>{{numberTasks}}</span> </view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item" v-if="listData.length>0" v-for="(item,index) in listData" :key="index" @click="goToDetail(item)">
|
|||
|
|
<view class="leftTopNum">
|
|||
|
|
<image class="img" src="/static/listIcon1.png"></image>
|
|||
|
|
<view class="num">{{index+1}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="rightTopStatus" v-if="item.beginWarning==3 ||item.endWarning==3">逾期</view>
|
|||
|
|
<view class="item_title">任务名称: <span class="item_text">{{item.taskName}}</span> </view>
|
|||
|
|
<view class="item_content">计划日期: <span class="item_text">{{item.startDate}} 至 {{item.finishDate}}</span>
|
|||
|
|
</view>
|
|||
|
|
<view class="item_content"> 实际日期:<span class="item_text">{{item.actualStartDate}}</span> </view>
|
|||
|
|
<view class="item_content">负责人: <span class="item_text"
|
|||
|
|
style="margin-left: 70rpx;">{{item.dutyUserName}}</span></view>
|
|||
|
|
<view class="rightBottomStatus" @click="startTask(item)" v-if="item.status==0 && item.dutyUserId === dutyUserId">
|
|||
|
|
开始任务
|
|||
|
|
</view>
|
|||
|
|
<view class="rightBottomStatus" style="background: #f7f8fa;color: #9f9f9f;" v-if="item.status==0 && item.dutyUserId !== dutyUserId">
|
|||
|
|
开始任务
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="rightBottomStatus" @click="startTask(item)" v-if="item.status==1 && condition.dutyUserId === dutyUserId">
|
|||
|
|
继续任务
|
|||
|
|
</view>
|
|||
|
|
<view class="rightBottomStatus" @click="startTask(item)"v-if="item.status==2">
|
|||
|
|
查看详情
|
|||
|
|
</view> -->
|
|||
|
|
<!-- <view class="textColor rightBottomStatus">
|
|||
|
|
开始任务
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="noData" v-if="listData.length==0">
|
|||
|
|
<image class="noDataImg" src="/static/noData.png"></image>
|
|||
|
|
<view>暂无数据</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="footers_box">
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<view class="icon_box">
|
|||
|
|
<image v-if="tabIndex == 0" class="tabIcon" src="/static/footerIcon2.png"></image>
|
|||
|
|
<image v-else class="tabIcon" src="/static//footerIcon1.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="icon_box" :class="{ active: tabIndex == 0 }" @click="footersChangTab(0)">全部任务</view>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<view class="icon_box">
|
|||
|
|
<image v-if="tabIndex == 1" class="tabIcon" src="/static/footerIcon4.png"></image>
|
|||
|
|
<image v-else class="tabIcon" src="/static/footerIcon3.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="icon_box" :class="{ active: tabIndex == 1 }" @click="footersChangTab(1)">我的任务</view>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</view>
|
|||
|
|
<levitatedsphere :x="100" :y="80"></levitatedsphere>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
tabIndex: 0,
|
|||
|
|
|
|||
|
|
//------------
|
|||
|
|
type: 1,
|
|||
|
|
listData: [],
|
|||
|
|
checkedTab: 0,
|
|||
|
|
condition: {
|
|||
|
|
pageNo: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
projectSn: "",
|
|||
|
|
status: 0, //0未开始 ,1进行中，2已完成，3已逾期 默认未开始
|
|||
|
|
projectSn: '',
|
|||
|
|
},
|
|||
|
|
finishDate: ',',
|
|||
|
|
actualFinishDate: '',
|
|||
|
|
teach: true,
|
|||
|
|
numberTasks: 0,
|
|||
|
|
dutyUserId: '',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.dutyUserId = JSON.parse(uni.getStorageSync('userInfo')).userId
|
|||
|
|
this.condition.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
|||
|
|
this.getListData();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.listData = [];
|
|||
|
|
this.condition.pageNo = 1;
|
|||
|
|
this.condition.pageSize = 10;
|
|||
|
|
this.getListData();
|
|||
|
|
},
|
|||
|
|
//上拉触底时间
|
|||
|
|
onReachBottom() {
|
|||
|
|
if (this.teach) {
|
|||
|
|
this.condition.pageNo = this.condition.pageNo + 1;
|
|||
|
|
this.getListData();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//点击开始任务
|
|||
|
|
startTask(item) {
|
|||
|
|
let itemFromString= JSON.stringify(item)
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'./detail?itemFrom='+ itemFromString + '&type=' + this.checkedTab
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
goToDetail(item) {
|
|||
|
|
if (this.status === 0) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
let itemFromString= JSON.stringify(item)
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'./detail?itemFrom='+ itemFromString + '&type=' + this.checkedTab
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//底部tab切换
|
|||
|
|
footersChangTab(val) {
|
|||
|
|
this.listData = [];
|
|||
|
|
this.condition.pageNo = 1;
|
|||
|
|
this.condition.pageSize = 10;
|
|||
|
|
this.condition.dutyUserId = '';
|
|||
|
|
this.tabIndex = val
|
|||
|
|
if (val == 1) {
|
|||
|
|
this.condition.dutyUserId = this.dutyUserId
|
|||
|
|
} else {
|
|||
|
|
this.condition.dutyUserId = ''
|
|||
|
|
}
|
|||
|
|
this.getListData();
|
|||
|
|
},
|
|||
|
|
//切换顶部状态tab
|
|||
|
|
changeTab(type) {
|
|||
|
|
console.log('点击tab切换有反应=====================', type);
|
|||
|
|
this.checkedTab = type;
|
|||
|
|
this.condition.status = type;
|
|||
|
|
this.condition.pageNo = 1;
|
|||
|
|
this.condition.pageSize = 10;
|
|||
|
|
this.listData = [];
|
|||
|
|
this.getListData();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//获取进度数据
|
|||
|
|
getListData() {
|
|||
|
|
if (this.checkedTab == 0) {
|
|||
|
|
this.numberTasks = 0
|
|||
|
|
this.condition.taskName = ''
|
|||
|
|
this.condition.startDate = ''
|
|||
|
|
this.condition.actualStartDate = ''
|
|||
|
|
this.condition.dutyUserName = ''
|
|||
|
|
this.status = 0
|
|||
|
|
} else if (this.checkedTab == 1) {
|
|||
|
|
this.numberTasks = 0
|
|||
|
|
this.condition.taskName = ''
|
|||
|
|
this.condition.startDate = ''
|
|||
|
|
this.condition.actualStartDate = ''
|
|||
|
|
this.condition.dutyUserName = ''
|
|||
|
|
this.status = 1
|
|||
|
|
} else {
|
|||
|
|
this.numberTasks = 0
|
|||
|
|
this.condition.taskName = ''
|
|||
|
|
this.condition.startDate = ''
|
|||
|
|
this.condition.actualStartDate = ''
|
|||
|
|
this.condition.dutyUserName = ''
|
|||
|
|
this.status = 2
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let that = this;
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: 'xmgl/taskProgress/page',
|
|||
|
|
method: 'get',
|
|||
|
|
data: that.condition,
|
|||
|
|
success: res => {
|
|||
|
|
let arr = JSON.parse(JSON.stringify(this.listData));
|
|||
|
|
if (res.result.records.length > 0) {
|
|||
|
|
let newArr = arr.concat(res.result.records);
|
|||
|
|
if (res.result.records.length < 10) {
|
|||
|
|
that.teach = false;
|
|||
|
|
} else {
|
|||
|
|
that.teach = true;
|
|||
|
|
}
|
|||
|
|
that.listData = newArr;
|
|||
|
|
that.numberTasks = newArr.length
|
|||
|
|
console.log('进度数据', that.listData)
|
|||
|
|
} else {
|
|||
|
|
that.teach = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.flex2 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 90rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
box-shadow: 0 0 20rpx rgba(194, 194, 194, 0.5);
|
|||
|
|
/* position: fixed; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabType {
|
|||
|
|
width: 33%;
|
|||
|
|
line-height: 43px;
|
|||
|
|
border-bottom: 1px solid rgba(194, 194, 194, 0.2);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkedTab {
|
|||
|
|
color: #4181FE;
|
|||
|
|
border-bottom: 4rpx solid #4181FE;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
height: 175px;
|
|||
|
|
width: 92%;
|
|||
|
|
margin: 30rpx 20rpx;
|
|||
|
|
padding: 20rpx 0px 0px 20rpx;
|
|||
|
|
// position: relative;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.noData {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
margin-top: 240rpx;
|
|||
|
|
color: #bed0fb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.noDataImg {
|
|||
|
|
width: 250rpx;
|
|||
|
|
height: 196rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_title {
|
|||
|
|
margin: 50rpx 0 0 30rpx;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_content {
|
|||
|
|
margin: 30rpx;
|
|||
|
|
color: #8c8c8c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_text {
|
|||
|
|
margin-left: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time {
|
|||
|
|
margin: 20rpx 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
/* padding: 40rpx 30rpx 0; */
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 3%;
|
|||
|
|
padding-bottom: 15%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.state {
|
|||
|
|
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-top: -40%;
|
|||
|
|
margin-left: 85%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.state2 {
|
|||
|
|
background: #3579ff;
|
|||
|
|
width: 89px;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 28px;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
margin-left: 230px;
|
|||
|
|
margin-top: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.state3 {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stateTextColor1 {
|
|||
|
|
color: #ff9900;
|
|||
|
|
margin-left: 78%;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stateTextColor2 {
|
|||
|
|
color: #0085ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stateTextColor3 {
|
|||
|
|
color: #28d061;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.headerName {
|
|||
|
|
/* width: calc(113% - 100rpx);
|
|||
|
|
background: #4181fe;
|
|||
|
|
color: #fff;
|
|||
|
|
padding-left: 0 !important; */
|
|||
|
|
/* position: fixed; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footers_box {
|
|||
|
|
background-color: white;
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
height: 120rpx;
|
|||
|
|
z-index: 9999;
|
|||
|
|
border-top: 1px solid rgba(151, 151, 151, 0.15);
|
|||
|
|
|
|||
|
|
ul {
|
|||
|
|
display: flex;
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
|
|||
|
|
li {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #9495ad;
|
|||
|
|
height: 100rpx;
|
|||
|
|
position: relative;
|
|||
|
|
list-style: none;
|
|||
|
|
|
|||
|
|
.tabIcon {
|
|||
|
|
width: 50rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon_box {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabIcon_more {
|
|||
|
|
width: 50rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
margin-top: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
color: #107eee;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title_list {
|
|||
|
|
background: #f7f8fa;
|
|||
|
|
height: 80rpx;
|
|||
|
|
display: flex;
|
|||
|
|
margin: 0 20rpx;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
|
|||
|
|
.title_right {
|
|||
|
|
margin-left: 400rpx;
|
|||
|
|
color: #a4a4a5;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
color: #5680fa;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.leftTopNum {
|
|||
|
|
position: absolute;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 70rpx;
|
|||
|
|
height: 50rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.num {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 10rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rightTopStatus {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: red;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 50rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rightBottomStatus {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 50rpx;
|
|||
|
|
width: 150rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
background: #4179f6;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
border-radius: 25rpx;
|
|||
|
|
margin-top: -76rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textColor {
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
color: #a4a4a5;
|
|||
|
|
}
|
|||
|
|
</style>
|