359 lines
8.0 KiB
Vue
359 lines
8.0 KiB
Vue
<template>
|
|
<view class="all_box">
|
|
<!-- 任务搜索框 -->
|
|
<view class="task_box">
|
|
<u-search shape="round" placeholder="搜索任务状态、优先级、部门等"></u-search>
|
|
<!-- 筛选按钮 -->
|
|
<view>
|
|
<u-popup :show="show" @close="close" @open="open" mode="top" overlayStyle="position: fixed;top:100rpx">
|
|
<view class="search_box">
|
|
<view class="">
|
|
<view class="first_order" v-for="item in orderData" :key="item.id" :class="item.id==typeid?'choose':''">
|
|
<text>{{item.first_order}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="second_order">
|
|
<view class="second" v-for="item in orderList" :key="item.id" @click="getInfo(item.info,item.id)">
|
|
{{item.info}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<view @click="show = true" class="screening" :class="show?'choose_style':''">筛选</view>
|
|
</view>
|
|
</view>
|
|
<!-- 新建任务 -->
|
|
<view class="new_task" @click="goNewTask">+新建任务</view>
|
|
<!-- 事件列表 -->
|
|
<view class="task_list">
|
|
<taskCard class="task_card" v-for="item in 10" :key="item"></taskCard>
|
|
</view>
|
|
<!-- <view class="eventList_box" v-for="item in eventData" :key="item.id">
|
|
<view class="head_box">
|
|
<text class="title">{{item.title}}</text>
|
|
<text class="status" :class="item.status=='驳回'?'another_color':''">{{item.flow_name}}</text>
|
|
</view>
|
|
<view class="line"></view>
|
|
<view class="responsible">
|
|
<text>负责人:{{item.director_name}}</text>
|
|
<text class="department">{{item.did_name ? item.did_name :'' }}</text>
|
|
</view>
|
|
<view class="responsible">
|
|
<text>协办人:{{item.assist_admin_names}}</text>
|
|
</view>
|
|
<view class="responsible">
|
|
<text>发布人:{{item.admin_name}}</text>
|
|
</view>
|
|
<view class="responsible">
|
|
<text v-if="item.is_bug==0">任务性质:部门工作</text>
|
|
<text v-if="item.is_bug==1">任务性质:部门协助</text>
|
|
<text v-if="item.is_bug==2">任务性质:临时任务</text>
|
|
</view>
|
|
<view class="end_time">预计结束时间:{{item.end_time}}</view>
|
|
</view> -->
|
|
<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
|
|
<!-- <tabbar></tabbar> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getTaskListApi } from '@/api/oa'
|
|
// import tabbar from '../components/tabbar'
|
|
export default {
|
|
components: {
|
|
// tabbar
|
|
},
|
|
data() {
|
|
return {
|
|
status: 'loadmore',
|
|
params: {
|
|
page: '1',
|
|
limit: '10',
|
|
flow_status: "1",
|
|
},
|
|
lastpage: '',
|
|
loadingText: '努力加载中',
|
|
loadmoreText: '轻轻上拉',
|
|
nomoreText: '我也是有底线的~~',
|
|
orderList: [{
|
|
id: 1,
|
|
info: '未开始'
|
|
}, {
|
|
id: 2,
|
|
info: '进行中'
|
|
}, {
|
|
id: 3,
|
|
info: '待验收'
|
|
}, {
|
|
id: 5,
|
|
info: '已关闭'
|
|
}, {
|
|
id: 6,
|
|
info: '已验收'
|
|
}, ],
|
|
orderData: [{
|
|
id: 1,
|
|
first_order: '任务状态',
|
|
}, ],
|
|
show: false,
|
|
typeid: 1,
|
|
eventData: [],
|
|
}
|
|
},
|
|
onReady() {
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#ffffff',
|
|
backgroundColor: '#3175f9'
|
|
})
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.params.page = '1'
|
|
this.eventData = []
|
|
//获取任务列表
|
|
this.getTaskList(this.params)
|
|
},
|
|
onPageScroll() {
|
|
//页面滚动关闭筛选
|
|
this.close()
|
|
},
|
|
methods: {
|
|
//获取任务列表
|
|
async getTaskList(data) {
|
|
const res = await getTaskListApi(data)
|
|
this.eventData = [...this.eventData, ...res.data]
|
|
if (this.eventData.length < this.params.limit) {
|
|
this.status = 'nomore'
|
|
}
|
|
this.lastpage = res.last_page
|
|
},
|
|
open() {
|
|
|
|
},
|
|
close() {
|
|
this.show = false
|
|
},
|
|
//选中筛选字段
|
|
getInfo(val, status) {
|
|
this.eventData = []
|
|
this.params = {
|
|
page: '1',
|
|
limit: '10',
|
|
flow_status: status
|
|
}
|
|
this.params.flow_status = status + ''
|
|
this.getTaskList(this.params)
|
|
this.close()
|
|
},
|
|
//跳转到新建任务列表
|
|
goNewTask() {
|
|
uni.navigateTo({
|
|
url: "/pages/views/new_task"
|
|
})
|
|
}
|
|
|
|
},
|
|
onPullDownRefresh() {
|
|
this.close()
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
onReachBottom() {
|
|
if (this.params.page < this.lastpage) {
|
|
this.params.page++
|
|
this.getTaskList(this.params)
|
|
// this.status = 'loading'
|
|
} else {
|
|
this.status = 'nomore'
|
|
return
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/.u-search__content {
|
|
width: 527rpx;
|
|
height: 63rpx;
|
|
|
|
}
|
|
|
|
/deep/.u-search__action--active {
|
|
display: none;
|
|
}
|
|
|
|
/deep/.u-search {
|
|
width: 527rpx;
|
|
height: 63rpx;
|
|
display: flex;
|
|
flex: none;
|
|
}
|
|
|
|
/deep/.u-popup__content {
|
|
|
|
top: 100rpx;
|
|
}
|
|
|
|
.all_box {
|
|
padding-bottom: 21rpx;
|
|
}
|
|
|
|
.task_box {
|
|
margin: 0 auto;
|
|
width: 750rpx;
|
|
height: 98rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 28rpx;
|
|
|
|
.screening {
|
|
margin-left: 10px;
|
|
width: 149rpx;
|
|
height: 63rpx;
|
|
line-height: 63rpx;
|
|
text-align: center;
|
|
background: #FFFFFF;
|
|
border-radius: 35rpx;
|
|
border: 2rpx solid #E6E5E5;
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.choose_style {
|
|
background-color: #3274F9;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
// 筛选按钮
|
|
.search_box {
|
|
width: 750rpx;
|
|
// height: 368rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
|
|
.first_order {
|
|
width: 250rpx;
|
|
height: 73rpx;
|
|
text-align: center;
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
line-height: 73rpx;
|
|
background-color: #f5f5f5;
|
|
|
|
}
|
|
|
|
.choose {
|
|
background-color: #fff;
|
|
color: #3274F9;
|
|
}
|
|
|
|
.second_order {
|
|
text-align: center;
|
|
width: 500rpx;
|
|
|
|
.second {
|
|
line-height: 73rpx;
|
|
height: 73rpx;
|
|
border-bottom: 2rpx solid #E6E6E6;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 新建任务
|
|
.new_task {
|
|
margin: 0 auto;
|
|
margin-top: 21rpx;
|
|
width: 500rpx;
|
|
height: 66rpx;
|
|
line-height: 66rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 30rpx;
|
|
background-color: $theme-oa-color;
|
|
}
|
|
|
|
.task_list{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding-top: 21rpx;
|
|
.task_card{
|
|
margin-bottom: 21rpx;
|
|
}
|
|
}
|
|
|
|
.eventList_box {
|
|
margin: 0 auto;
|
|
margin-top: 21rpx;
|
|
width: 694rpx;
|
|
height: 345rpx;
|
|
background: #FFFFFF;
|
|
padding: 0 24.5rpx;
|
|
border-radius: 7rpx;
|
|
|
|
.head_box {
|
|
width: 100%;
|
|
height: 82rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
text-overflow: ellipsis;
|
|
/* 溢出显示省略号 */
|
|
overflow: hidden;
|
|
/* 溢出隐藏 */
|
|
white-space: nowrap;
|
|
/* 强制不换行 */
|
|
color: #333333;
|
|
width: 445rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.status {
|
|
font-size: 32rpx;
|
|
color: #34A853;
|
|
}
|
|
|
|
.another_color {
|
|
color: #F9AA32;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 646rpx;
|
|
height: 0rpx;
|
|
border-bottom: 1rpx solid #CCCCCC;
|
|
margin-bottom: 14.02rpx;
|
|
}
|
|
|
|
.responsible {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 39rpx;
|
|
font-size: 28rpx;
|
|
margin-bottom: 7.01rpx;
|
|
|
|
.department {
|
|
font-size: 25rpx;
|
|
color: $theme-oa-color;
|
|
}
|
|
}
|
|
|
|
.end_time {
|
|
margin-top: 14rpx;
|
|
font-size: 25rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
</style>
|