|
@@ -5,13 +5,13 @@
|
|
|
|
|
|
|
|
<van-sticky offset-top="1.22667rem">
|
|
<van-sticky offset-top="1.22667rem">
|
|
|
<!-- 全部任务/我执行的/我创建的 -->
|
|
<!-- 全部任务/我执行的/我创建的 -->
|
|
|
- <van-tabs v-model="active" @click="activeClick" class="dateSelectCell">
|
|
|
|
|
|
|
+ <van-tabs v-model="active" @click="activeClick">
|
|
|
<van-tab title="全部任务" :name="0"></van-tab>
|
|
<van-tab title="全部任务" :name="0"></van-tab>
|
|
|
<van-tab title="我执行的" :name="1"></van-tab>
|
|
<van-tab title="我执行的" :name="1"></van-tab>
|
|
|
<van-tab title="我创建的" :name="2"></van-tab>
|
|
<van-tab title="我创建的" :name="2"></van-tab>
|
|
|
</van-tabs>
|
|
</van-tabs>
|
|
|
<!-- 任务状态 -->
|
|
<!-- 任务状态 -->
|
|
|
- <van-cell title="任务状态" :value="select_state" @click="select_state_show = true" class="dateSelectCell"></van-cell>
|
|
|
|
|
|
|
+ <van-cell title="任务状态" :value="select_state" @click="select_state_show = true"></van-cell>
|
|
|
<van-popup v-model="select_state_show" position="bottom">
|
|
<van-popup v-model="select_state_show" position="bottom">
|
|
|
<van-picker
|
|
<van-picker
|
|
|
show-toolbar
|
|
show-toolbar
|
|
@@ -20,7 +20,7 @@
|
|
|
@cancel="select_state_show = false;$forceUpdate();"/>
|
|
@cancel="select_state_show = false;$forceUpdate();"/>
|
|
|
</van-popup>
|
|
</van-popup>
|
|
|
<!-- 任务类型 -->
|
|
<!-- 任务类型 -->
|
|
|
- <van-cell title="任务类型" :value="select_type" @click="select_type_show = true" class="dateSelectCell"></van-cell>
|
|
|
|
|
|
|
+ <van-cell title="任务类型" :value="select_type" @click="select_type_show = true"></van-cell>
|
|
|
<van-popup v-model="select_type_show" position="bottom">
|
|
<van-popup v-model="select_type_show" position="bottom">
|
|
|
<van-picker
|
|
<van-picker
|
|
|
show-toolbar
|
|
show-toolbar
|
|
@@ -53,20 +53,25 @@
|
|
|
</van-sticky>
|
|
</van-sticky>
|
|
|
|
|
|
|
|
<div class="taskList" v-if="taskList.length != 0">
|
|
<div class="taskList" v-if="taskList.length != 0">
|
|
|
- <van-cell v-for="item in taskList" :key="item.id">
|
|
|
|
|
- <div style="line-height:0.8rem">任务名称：{{item.name}}</div>
|
|
|
|
|
- <div style="line-height:0.8rem">项目名称：{{item.projectName}}</div>
|
|
|
|
|
- <div style="line-height:0.8rem">起止时间：
|
|
|
|
|
- <span v-if="item.startDate && item.endDate">{{(item.startDate ? item.startDate : ' - ') + '\u3000至\u3000' + (item.endDate ? item.endDate : ' - ')}}</span>
|
|
|
|
|
- <span v-else></span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="task_button">
|
|
|
|
|
- <van-button size="small" type="info" @click="toEditask(item.id)">编辑</van-button>
|
|
|
|
|
- <van-button size="small" type="primary" @click="taskStatus(item.id,0)" v-if="select_state == '进行中'">完成</van-button>
|
|
|
|
|
- <van-button size="small" color="#e6a23c" @click="taskStatus(item.id,1)" v-else>重启</van-button>
|
|
|
|
|
-
|
|
|
|
|
- </div>
|
|
|
|
|
- </van-cell>
|
|
|
|
|
|
|
+ <van-pull-refresh v-model="downLoading" @refresh="onDownRefresh">
|
|
|
|
|
+ <!-- 任务列表 -->
|
|
|
|
|
+ <van-list v-model="upLoading" :finished="upFinished" :immediate-check="false" :offset="100" finished-text="没有更多了" @load="onLoadList">
|
|
|
|
|
+ <van-cell v-for="item in taskList" :key="item.id">
|
|
|
|
|
+ <div style="line-height:0.8rem">任务名称：{{item.name}}</div>
|
|
|
|
|
+ <div style="line-height:0.8rem">项目名称：{{item.projectName}}</div>
|
|
|
|
|
+ <div style="line-height:0.8rem">起止时间：
|
|
|
|
|
+ <span v-if="item.startDate && item.endDate">{{(item.startDate ? item.startDate : ' - ') + '\u3000至\u3000' + (item.endDate ? item.endDate : ' - ')}}</span>
|
|
|
|
|
+ <span v-else></span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="task_button">
|
|
|
|
|
+ <van-button size="small" type="info" @click="toEditask(item.id)">编辑</van-button>
|
|
|
|
|
+ <van-button size="small" type="primary" @click="taskStatus(item.id,0)" v-if="select_state == '进行中'">完成</van-button>
|
|
|
|
|
+ <van-button size="small" color="#e6a23c" @click="taskStatus(item.id,1)" v-else>重启</van-button>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </van-cell>
|
|
|
|
|
+ </van-list>
|
|
|
|
|
+ </van-pull-refresh>
|
|
|
</div>
|
|
</div>
|
|
|
<div v-else style="text-align:center;font-size:16px;font-weight:500;color:#999;width:100%;margin-top:16px">暂无数据</div>
|
|
<div v-else style="text-align:center;font-size:16px;font-weight:500;color:#999;width:100%;margin-top:16px">暂无数据</div>
|
|
|
|
|
|
|
@@ -95,6 +100,14 @@ export default {
|
|
|
select_date_show: false,
|
|
select_date_show: false,
|
|
|
|
|
|
|
|
taskList: [],
|
|
taskList: [],
|
|
|
|
|
+ total: 0, // 列表总数据长度
|
|
|
|
|
+ pageIndex: 1, // 页码，每页数据固定为20
|
|
|
|
|
+ upLoading: false, // 上拉加载
|
|
|
|
|
+ upFinished: false, // 上拉加载完毕
|
|
|
|
|
+ downLoading: false, // 下拉刷新
|
|
|
|
|
+ listReLoading: false, // 是否重新加载列表数据
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
@@ -105,6 +118,25 @@ export default {
|
|
|
back() {
|
|
back() {
|
|
|
history.back();
|
|
history.back();
|
|
|
},
|
|
},
|
|
|
|
|
+ onDownRefresh() {
|
|
|
|
|
+ this.pageIndex = 1
|
|
|
|
|
+ this.listReLoading = true
|
|
|
|
|
+ this.upLoading = true
|
|
|
|
|
+ this.upFinished = false // 不写这句会导致你上拉到底过后在下拉刷新将不能触发下拉加载事件
|
|
|
|
|
+ this.getList()
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoadList(){
|
|
|
|
|
+ if(this.total <= this.taskList.length) {
|
|
|
|
|
+ this.upFinished = true
|
|
|
|
|
+ this.upLoading = false
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.pageIndex += 1
|
|
|
|
|
+ this.listReLoading = false
|
|
|
|
|
+ this.getList()
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
toEditask(taskid){ // 跳转编辑任务
|
|
toEditask(taskid){ // 跳转编辑任务
|
|
|
sessionStorage.setItem('taskId',JSON.stringify({
|
|
sessionStorage.setItem('taskId',JSON.stringify({
|
|
|
addNew: false,
|
|
addNew: false,
|
|
@@ -121,36 +153,42 @@ export default {
|
|
|
}).then(res => {
|
|
}).then(res => {
|
|
|
if(res.code == "ok") {
|
|
if(res.code == "ok") {
|
|
|
this.$toast.success('操作成功');
|
|
this.$toast.success('操作成功');
|
|
|
- this.getList()
|
|
|
|
|
|
|
+ this.listReLoading = true
|
|
|
|
|
+ this.onDownRefresh()
|
|
|
} else {
|
|
} else {
|
|
|
this.$toast.fail('获取失败');
|
|
this.$toast.fail('获取失败');
|
|
|
}
|
|
}
|
|
|
}).catch(err=> {this.$toast.clear();console.log(err)});
|
|
}).catch(err=> {this.$toast.clear();console.log(err)});
|
|
|
},
|
|
},
|
|
|
|
|
+
|
|
|
formatDate(date) {
|
|
formatDate(date) {
|
|
|
let mon = date.getMonth() + 1
|
|
let mon = date.getMonth() + 1
|
|
|
return `${date.getFullYear()}-${mon<10?'0'+mon:mon}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
|
|
return `${date.getFullYear()}-${mon<10?'0'+mon:mon}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
|
|
|
},
|
|
},
|
|
|
activeClick(){ // 导航点击
|
|
activeClick(){ // 导航点击
|
|
|
// console.log(this.active);
|
|
// console.log(this.active);
|
|
|
- this.getList()
|
|
|
|
|
|
|
+ this.listReLoading = true
|
|
|
|
|
+ this.onDownRefresh()
|
|
|
},
|
|
},
|
|
|
stateChange(value,key){ // 任务状态筛选
|
|
stateChange(value,key){ // 任务状态筛选
|
|
|
this.select_state = value
|
|
this.select_state = value
|
|
|
this.select_state_show = false
|
|
this.select_state_show = false
|
|
|
- this.getList()
|
|
|
|
|
|
|
+ this.listReLoading = true
|
|
|
|
|
+ this.onDownRefresh()
|
|
|
},
|
|
},
|
|
|
typeChange(value,key){ // 任务类型筛选
|
|
typeChange(value,key){ // 任务类型筛选
|
|
|
// console.log(value,key);
|
|
// console.log(value,key);
|
|
|
this.select_type = value
|
|
this.select_type = value
|
|
|
this.select_type_show = false
|
|
this.select_type_show = false
|
|
|
- this.getList()
|
|
|
|
|
|
|
+ this.listReLoading = true
|
|
|
|
|
+ this.onDownRefresh()
|
|
|
},
|
|
},
|
|
|
dateTypeChange(action,index){ // 开始时间/截止时间 切换
|
|
dateTypeChange(action,index){ // 开始时间/截止时间 切换
|
|
|
// console.log(action,index);
|
|
// console.log(action,index);
|
|
|
this.select_date_type = action.text
|
|
this.select_date_type = action.text
|
|
|
if(this.select_date.length != 0){
|
|
if(this.select_date.length != 0){
|
|
|
- this.getList()
|
|
|
|
|
|
|
+ this.listReLoading = true
|
|
|
|
|
+ this.onDownRefresh()
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
dateChange(date){ // 时间区间筛选
|
|
dateChange(date){ // 时间区间筛选
|
|
@@ -158,19 +196,21 @@ export default {
|
|
|
this.select_date_show = false;
|
|
this.select_date_show = false;
|
|
|
this.select_date = [this.formatDate(start),this.formatDate(end)];
|
|
this.select_date = [this.formatDate(start),this.formatDate(end)];
|
|
|
// console.log(this.select_date,date);
|
|
// console.log(this.select_date,date);
|
|
|
- this.getList()
|
|
|
|
|
|
|
+ this.listReLoading = true
|
|
|
|
|
+ this.onDownRefresh()
|
|
|
},
|
|
},
|
|
|
dateClear(){
|
|
dateClear(){
|
|
|
this.select_date = []
|
|
this.select_date = []
|
|
|
- this.getList()
|
|
|
|
|
|
|
+ this.listReLoading = true
|
|
|
|
|
+ this.onDownRefresh()
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
getList(){ // 获取任务列表
|
|
getList(){ // 获取任务列表
|
|
|
let parameter = {
|
|
let parameter = {
|
|
|
viewId: this.active,
|
|
viewId: this.active,
|
|
|
status: this.select_state == '进行中' ? 0 : 1,
|
|
status: this.select_state == '进行中' ? 0 : 1,
|
|
|
- pageIndex: 1,
|
|
|
|
|
- pageSize: 999
|
|
|
|
|
|
|
+ pageIndex: this.pageIndex,
|
|
|
|
|
+ pageSize: 20
|
|
|
}
|
|
}
|
|
|
if(this.select_type != '全部'){
|
|
if(this.select_type != '全部'){
|
|
|
if(this.select_type == '任务'){ parameter.type = 0 }
|
|
if(this.select_type == '任务'){ parameter.type = 0 }
|
|
@@ -186,11 +226,29 @@ export default {
|
|
|
this.$axios.post("/task/listByPage", parameter)
|
|
this.$axios.post("/task/listByPage", parameter)
|
|
|
.then(res => {
|
|
.then(res => {
|
|
|
if(res.code == "ok") {
|
|
if(res.code == "ok") {
|
|
|
- this.taskList = res.data.records
|
|
|
|
|
|
|
+ this.total = res.data.total
|
|
|
|
|
+ this.downLoading = false
|
|
|
|
|
+ this.upLoading = false
|
|
|
|
|
+ if(this.listReLoading){
|
|
|
|
|
+ this.taskList = res.data.records
|
|
|
|
|
+ document.documentElement.scrollTop = 0
|
|
|
|
|
+ }else{
|
|
|
|
|
+ for(let i in res.data.records){
|
|
|
|
|
+ this.taskList.push(res.data.records[i])
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
} else {
|
|
} else {
|
|
|
this.$toast.fail('获取失败');
|
|
this.$toast.fail('获取失败');
|
|
|
|
|
+ this.downLoading = false
|
|
|
|
|
+ this.upLoading = false
|
|
|
}
|
|
}
|
|
|
- }).catch(err=> {this.$toast.clear();console.log(err)});
|
|
|
|
|
|
|
+ }).catch(err=> {
|
|
|
|
|
+ this.$toast.clear();
|
|
|
|
|
+ console.log(err)
|
|
|
|
|
+ this.downLoading = false
|
|
|
|
|
+ this.upLoading = false
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
},
|
|
},
|
|
@@ -209,7 +267,4 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-// .dateSelectCell{
|
|
|
|
|
-// height: 1.2rem;
|
|
|
|
|
-// }
|
|
|
|
|
</style>
|
|
</style>
|
ggooalice