<template>
|
<view class="page-containter page-containter-x">
|
<view class="page-header">
|
<page-header-x ctitle="任务展示" />
|
<user-row></user-row>
|
</view>
|
<view class="page-content">
|
<view class="task">
|
<!-- 任务筛选 -->
|
<u-row class="tesk_search">
|
<!-- 任务类型 -->
|
<u-col span="3" class="">任务类型:</u-col>
|
<!-- 选择框 -->
|
<u-col :span="9">
|
<u-input placeholder="请选择" v-model="task" type="select" :border="true" @click="taskFlag = true"></u-input>
|
<u-action-sheet :list="taskTypeList" v-model="taskFlag" @click="confirm"></u-action-sheet>
|
</u-col>
|
</u-row>
|
<text class="noData" v-show="taskList.length == 0">---没有数据---</text>
|
<!-- 任务列表展示 -->
|
<view class="task_item" v-for="(task,index) in taskList" :key="task.id">
|
<u-read-more ref="uReadMore" :show-height="300" close-text="展开" :toggle="true" text-indent="0">
|
<!-- 来源单号 -->
|
<u-row>
|
<u-col span="6">
|
<u-row>
|
<u-col span="6">来源单号:</u-col>
|
<u-col span="6">{{task.createListCode}}</u-col>
|
</u-row>
|
</u-col>
|
</u-row>
|
<!-- 编号名称 -->
|
<u-row>
|
<!-- 产品编号 -->
|
<u-col span="6">
|
<u-row>
|
<u-col span="6">任务类型:</u-col>
|
<u-col span="6">{{getTaskType(task.taskType)}}</u-col>
|
</u-row>
|
</u-col>
|
<u-col span="6">
|
<!-- 产品名称 -->
|
<u-row>
|
<u-col span="6">状态:</u-col>
|
<u-col span="6">
|
<u-tag :text="getTaskStatus(task.taskStatus)" :type="getTagType(task.taskStatus)" mode="light"/>
|
</u-col>
|
</u-row>
|
</u-col>
|
</u-row>
|
<!-- 位置 -->
|
<u-row>
|
<u-col span="6">
|
<u-row>
|
<u-col span="6">起始位置:</u-col>
|
<u-col span="6">{{task.sourcePlace}}</u-col>
|
</u-row>
|
</u-col>
|
<u-col span="6">
|
<u-row>
|
<u-col span="6">目标位置:</u-col>
|
<u-col span="6">{{task.toPlace}}</u-col>
|
</u-row>
|
</u-col>
|
</u-row>
|
</u-read-more>
|
</view>
|
<text class="reachBottom" v-show="taskList.length != 0 && taskList.length == total">---我也是有底线的---</text>
|
</view>
|
</view>
|
</view>
|
|
</template>
|
|
<script>
|
import {getTaskList} from '../../api/task/task.js'
|
import PageHeaderX from '../../compontents/PageHeaderX.vue'
|
import UserRow from '../../compontents/UserRow.vue'
|
export default {
|
components:{"page-header-x":PageHeaderX,UserRow},
|
data() {
|
return {
|
task:'', //任务类型
|
taskTypeList:[ //任务类型列表数据
|
{
|
text:'请选择',
|
id: 0
|
},
|
{
|
text:'缸体下线',
|
id: 1
|
},
|
{
|
text:'缸盖下线',
|
id: 2
|
},
|
{
|
text:'呼叫空托',
|
id: 3
|
},
|
{
|
text:'缸盖上线',
|
id: 4
|
},
|
{
|
text:'缸体上线',
|
id: 5
|
},
|
{
|
text:'空托回库',
|
id: 6
|
},
|
],
|
taskFlag:false, //任务下拉框列表
|
taskForm: { //任务列表请求参数
|
pagesize:8,
|
pagenum: 1,
|
id: 0
|
},
|
total:0,//任务数据条数
|
taskList:[], //任务列表数据
|
}
|
},
|
//页面加载事件
|
onReady() {
|
//获取用户的权限
|
//const power = uni.getStorageSync('power');
|
this.getTaskList();
|
},
|
//下拉刷新
|
onPullDownRefresh() {
|
//任务列表重置
|
this.taskList = [];
|
this.task = '';
|
//任务参数重置
|
this.taskForm.pagenum = 1;
|
this.taskForm.id = 0;
|
//获取任务列表
|
this.getTaskList(()=>{
|
uni.stopPullDownRefresh()
|
})
|
},
|
//触底事件
|
onReachBottom() {
|
//num++
|
this.taskForm.pagenum ++;
|
//判断当前任务列表的长度是否等于数据总的条数，决定是否继续请求获取任务
|
if(this.taskList.length == this.total) {
|
return;
|
}else {
|
this.getTaskList();
|
}
|
},
|
methods: {
|
//任务下拉框点击事件
|
confirm(index) {
|
this.task = this.taskTypeList[index].text;
|
this.taskForm.id = this.taskTypeList[index].id;
|
this.getTask();
|
},
|
//匹配任务类型
|
getTaskType(type) {
|
return this.taskTypeList.find(task => task.id == type).text;
|
},
|
//查询按钮点击事件
|
getTask(){
|
//当前任务列表数据清空
|
this.taskList = [];
|
//请求参数恢复默认
|
this.taskForm.pagenum = 1;
|
//获取任务列表
|
this.getTaskList();
|
},
|
//获取任务列表
|
getTaskList(callback) {
|
getTaskList(this.taskForm).then(res => {
|
//数据条数
|
this.total = res.total;
|
//任务列表赋值
|
this.taskList.push(...res.data);
|
//回调
|
callback && callback();
|
}).catch(()=>{
|
callback && callback();
|
})
|
},
|
//任务状态
|
getTaskStatus(status) {
|
switch(status) {
|
case 1:
|
return '新建';
|
break;
|
case 2:
|
return '进行中';
|
break;
|
case 3:
|
return '完成';
|
break;
|
}
|
},
|
//获取任务tag的颜色
|
getTagType(status){
|
switch(status) {
|
case 1:
|
return 'primary';
|
break;
|
case 2:
|
return 'warning';
|
break;
|
case 3:
|
return 'success';
|
break;
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.task {
|
width: 100%;
|
.tesk_search {
|
width: 94%;
|
margin: 15rpx auto;
|
.u-col:first-child {
|
font-size: 34rpx;
|
text-align: left;
|
}
|
}
|
.task_item {
|
width: 94%;
|
margin: 20rpx auto;
|
border: 1px solid #eee;
|
padding: 10rpx;
|
box-shadow: 5rpx 5rpx 5rpx #eee;
|
border-radius: 10rpx;
|
.u-row {
|
font-size: 32rpx;
|
margin-bottom: 10rpx;
|
.sendBtn {
|
text-align: center !important;
|
}
|
.u-tag {
|
font-size: 32rpx;
|
}
|
.u-col:first-child {
|
text-align: right !important;
|
}
|
}
|
}
|
.reachBottom,.noData{
|
display: flex;
|
justify-content: center;
|
color: #999;
|
letter-spacing: 5rpx;
|
}
|
}
|
</style>
|
