327 lines
7.0 KiB
Vue
327 lines
7.0 KiB
Vue
<template>
|
||
<view>
|
||
<headers :showBack="true">
|
||
<view class="headerName">
|
||
进度管理
|
||
</view>
|
||
</headers>
|
||
<view class="tab flex2">
|
||
<view class="tabType" @click="changeTab(0)" :class="checkedTab==0?'checkedTab':'noCheckTab'">未开始</view>
|
||
<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>
|
||
<view class="content">
|
||
<view class="item" v-if="listData.length>0" v-for="(item,index) in listData" :key="index">
|
||
<view class="item_title">{{item.taskName}}</view>
|
||
<view class="item_content">计划时间:{{item.startDate}}-{{item.finishDate}}</view>
|
||
<view class="item_content" v-if="checkedTab==2">实际时间:{{item.actualStartDate}}-{{item.actualFinishDate}}
|
||
</view>
|
||
<view class="item_content" v-if="checkedTab==1">实际开始时间:{{item.actualStartDate}}</view>
|
||
<view class="name">任务工期:{{item.duration}}</view>
|
||
<view class="time">进度比例:{{item.progressRatio}}%</view>
|
||
|
||
<view class="state" :class="item.differDay==0?'stateTextColor3':'stateTextColor1'">
|
||
{{item.status==0?'':item.status==1?'':item.differDay==0?'正常':`提前${item.differDay}天`}}
|
||
</view>
|
||
<!-- <view class="state"
|
||
:class="item.differDay==0?'stateTextColor3':'stateTextColor1'" v-if="checkedTab==2">
|
||
{{item.differDay==0?'正常':`提前${item.differDay}天`}}
|
||
</view> -->
|
||
|
||
<view class="state2" :class="{'state2':item.status==0,'state2':item.status==1,'state3':item.status==2}"
|
||
@click="editStatus(item)">
|
||
{{item.status==0?'开始任务':item.status==1?'结束任务':''}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="noData" v-if="listData.length==0">
|
||
<image class="noDataImg" src="/static/noData.png"></image>
|
||
<view>暂无数据</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
type: 1,
|
||
listData: [],
|
||
checkedTab: 1,
|
||
condition: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
projectSn: "",
|
||
status: 1, //0.未完成。1.进行中，2.已完成
|
||
projectSn: '',
|
||
|
||
},
|
||
finishDate: ',',
|
||
actualFinishDate: '',
|
||
teach: true,
|
||
|
||
|
||
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.condition.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
||
// this.checkedTab = sessionStorage.getItem('currentIndex')
|
||
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: {
|
||
//切换tab
|
||
changeTab(type) {
|
||
console.log('点击tab切换有反应=====================');
|
||
// sessionStorage.setItem('currentIndex', 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.condition.taskName = ''
|
||
this.condition.startDate = ''
|
||
this.condition.duration = ''
|
||
this.condition.progressRatio = ''
|
||
this.status = 0
|
||
|
||
|
||
} else if (this.checkedTab == 1) {
|
||
this.condition.taskName = ''
|
||
this.condition.startDate = ''
|
||
this.condition.duration = ''
|
||
this.condition.progressRatio = ''
|
||
this.status = 1
|
||
} else {
|
||
this.condition.taskName = ''
|
||
this.condition.startDate = ''
|
||
this.condition.duration = ''
|
||
this.condition.progressRatio = ''
|
||
this.status = 2
|
||
}
|
||
|
||
let that = this;
|
||
this.sendRequest({
|
||
url: 'xmgl/progressTask/selectPage',
|
||
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;
|
||
console.log(that.listData)
|
||
} else {
|
||
that.teach = false;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//修改进度数状态
|
||
editStatus(item) {
|
||
console.log('修改的数据内容', item);
|
||
let _this = this
|
||
//年
|
||
let year = new Date().getFullYear();
|
||
//月份是从0月开始获取的，所以要+1;
|
||
let month = new Date().getMonth() + 1;
|
||
//日
|
||
let day = new Date().getDate();
|
||
let time = year + '-' + month + '-' + day
|
||
|
||
|
||
let arr = JSON.parse(JSON.stringify(item));
|
||
console.log('arr================', arr);
|
||
if (item.status == 0) {
|
||
arr.startDate = time
|
||
|
||
arr.actualStartDate = time
|
||
arr.status = 1
|
||
|
||
}
|
||
if (item.status == 1) {
|
||
arr.status = 2
|
||
arr.actualFinishDate = time
|
||
|
||
}
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定提交该操作吗？',
|
||
showCancel: true, // 不显示取消按钮
|
||
success(res) {
|
||
if (res.confirm) {
|
||
_this.sendRequest({
|
||
url: 'xmgl/progressTask/updateProgressTask',
|
||
method: 'post',
|
||
data: arr,
|
||
success: res => {
|
||
uni.showToast({
|
||
title: '状态编辑成功',
|
||
duration: 2000,
|
||
})
|
||
setTimeout(() => {
|
||
_this.$router.go(0)
|
||
}, 500)
|
||
|
||
}
|
||
|
||
})
|
||
|
||
}
|
||
|
||
}
|
||
});
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.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;
|
||
|
||
}
|
||
|
||
.noData {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
margin-top: 240rpx;
|
||
color: #bed0fb;
|
||
}
|
||
|
||
.noDataImg {
|
||
width: 250rpx;
|
||
height: 196rpx;
|
||
}
|
||
|
||
.item_title {
|
||
margin: 20rpx 20rpx;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.item_content {
|
||
margin: 20rpx 20rpx;
|
||
}
|
||
|
||
.name {
|
||
margin: 20rpx 20rpx;
|
||
}
|
||
|
||
.time {
|
||
margin: 20rpx 20rpx;
|
||
}
|
||
|
||
.content {
|
||
/* padding: 40rpx 30rpx 0; */
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
margin-top: 5%;
|
||
}
|
||
|
||
.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; */
|
||
}
|
||
</style>
|