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>
|