545 lines
12 KiB
Vue
545 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<view class="fixedheader">
|
||
<headers :showBack="true" themeType="white">
|
||
<view class="headerName">
|
||
进度管理系统
|
||
</view>
|
||
</headers>
|
||
<view class="tab flex2" style="background-color: #fff;">
|
||
<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>
|
||
<view class="content" :style="{paddingTop: mobileTopHeight + 80 + 'px'}">
|
||
<!-- <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" :class="item.auditType == 2
|
||
? 'audit-pass':item.auditType == 3
|
||
?'no-pass':'is-pending'">{{
|
||
item.auditType == 2
|
||
? "审核通过"
|
||
: item.auditType == 3
|
||
? "已驳回"
|
||
: "待审核"
|
||
}}</view>
|
||
|
||
<view class="item_title">
|
||
<text>任务名称:</text>
|
||
<text class="item_text">{{ item.taskName }}</text>
|
||
</view>
|
||
<view class="item_content">
|
||
<text>所属承包商:</text>
|
||
<text class="item_text">{{ item.enterpriseName }}</text>
|
||
</view>
|
||
<view class="item_content">
|
||
<text>所属厂区:</text>
|
||
<text class="item_text">{{ item.regionName }}</text>
|
||
</view>
|
||
<view class="item_content">
|
||
<text>上报时间:</text>
|
||
<text class="item_text">{{ item.uploadDate }}</text>
|
||
</view>
|
||
<view class="item_content">
|
||
<text>上报进度:</text>
|
||
<text class="item_text">{{ item.progressRatio }}</text>
|
||
</view>
|
||
<view class="item_content">
|
||
<text>上报人:</text>
|
||
<text class="item_text">{{ item.uploadUserName }}</text>
|
||
</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 @click="footersChangTab(0)">
|
||
<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 }">全部任务</view>
|
||
</li>
|
||
<li @click="footersChangTab(1)">
|
||
<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 }">我的任务</view>
|
||
</li>
|
||
</ul>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
mobileTopHeight: 0,
|
||
tabIndex: 0,
|
||
|
||
//------------
|
||
type: 1,
|
||
listData: [],
|
||
checkedTab: 1,
|
||
condition: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
projectSn: "",
|
||
status: 0, //0未开始 ,1进行中，2已完成，3已逾期 默认未开始
|
||
projectSn: '',
|
||
},
|
||
finishDate: ',',
|
||
actualFinishDate: '',
|
||
teach: true,
|
||
numberTasks: 0,
|
||
dutyUserId: '',
|
||
option: {}
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
console.log(option, 666)
|
||
if (option) {
|
||
this.option = option
|
||
}
|
||
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();
|
||
}
|
||
},
|
||
mounted() {
|
||
var that = this
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
||
uni.setStorageSync('systemInfo', res)
|
||
console.log(res)
|
||
}
|
||
})
|
||
console.log('this.mobileTopHeight', this.mobileTopHeight)
|
||
},
|
||
methods: {
|
||
//点击开始任务
|
||
startTask(item) {
|
||
let itemFromString = JSON.stringify(item)
|
||
uni.navigateTo({
|
||
url: './detail?itemFrom=' + itemFromString + '&type=' + this.checkedTab
|
||
})
|
||
},
|
||
goToDetail(item) {
|
||
// 跳转到记录详情
|
||
uni.navigateTo({
|
||
url: './auditDetail?obj=' + JSON.stringify(item)
|
||
})
|
||
},
|
||
footersChangTab(val) {
|
||
//底部tab切换
|
||
this.tabIndex = val;
|
||
this.listData = [];
|
||
this.condition.pageNo = 1;
|
||
this.condition.pageSize = 10;
|
||
this.condition.dutyUserId = '';
|
||
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;
|
||
let requestData = {
|
||
...that.condition,
|
||
...that.option,
|
||
isApprovalList: 1
|
||
}
|
||
if (this.checkedTab == 1) {
|
||
requestData.isAudit = 0
|
||
} else {
|
||
requestData.isAudit = 1
|
||
}
|
||
this.sendRequest({
|
||
url: 'xmgl/xzTaskProgressContent/page',
|
||
method: 'get',
|
||
data: requestData,
|
||
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" scoped>
|
||
.fixedheader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 2;
|
||
|
||
.headerName {
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.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: 50%;
|
||
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: 500rpx;
|
||
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;
|
||
display: flex;
|
||
|
||
// align-items: center;
|
||
text:nth-child(1) {
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
position: absolute;
|
||
right: 50rpx;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.audit-pass {
|
||
background: #10B12A;
|
||
}
|
||
|
||
.no-pass {
|
||
background: #EB3B43;
|
||
}
|
||
|
||
.is-pending {
|
||
background: #E79538;
|
||
}
|
||
|
||
.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> |