<template> <view class="pageInfo"> <!-- 任务列表 --> <view v-for="item in list" :key="item.id" class="itemInfo"> <view class="itemName"> <view class="name">{{ item.name }}</view> <view> <switch style="transform:scale(0.9)" v-if="$hasPermissions('B_spotConfig_enable_mobile')" :checked="item.status == 1" @change="changeItem(item)" /> </view> </view> <view class="itemName"> <view class="date">{{ item.startDate }} 至 {{ item.endDate }}</view> <view> <u-button v-if="$hasPermissions('B_spotConfig_view_mobile')" type="success" size="mini" @click="handetail(item)">查看</u-button> <u-button v-if="item.status == 0 && item.taskGenerateFlag == 0 && $hasPermissions('B_spotConfig_edit_mobile')" type="primary" size="mini" style="margin-left: 15upx;" @click="handedit(item)">编辑</u-button> <u-button v-if="item.status == 0 && item.taskGenerateFlag == 0 && $hasPermissions('B_spotConfig_del_mobile')" type="error" size="mini" style="margin-left: 15upx;" @click="handelete(item)">删除</u-button> </view> </view> </view> <u-empty style="padding-top: 10vh;" :text="noDataText" v-if="list.length == 0 && status != 'loading'" mode="list"></u-empty> <view style="padding: 20upx;" v-if="pageSize < total || status == 'loading'"> <u-loadmore :status="status" /> </view> </view> </template> <script> import { clzConfirm } from '@/libs/tools.js'; import { getCheckTaskConfigList, delCheckTaskConfig, enableCheckTaskConfig } from '@/api/checkTaskConfig.js'; export default { data() { return { status: 'loading', noDataText: '暂无数据', list: [], pageNo: 1, pageSize: 10, total: 0 }; }, onLoad() { if(this.$hasPermissions("B_spotConfig_new_mobile")){ // #ifdef APP-PLUS // 设置标题栏按钮 let currentWebview = this.$scope.$getAppWebview(); currentWebview.setTitleNViewButtonStyle(0, { text: '\ue610 新增', fontSize: 16, color: '#eee', width: '80px', fontSrc: '/static/iconfont/iconfont.ttf' }); // #endif } // 首次加载列表 this.getList(); // 刷新列表 uni.$on('updateCheckTaskConfigList', () => { this.getList(1); }); }, // 新增 onNavigationBarButtonTap() { uni.navigateTo({ url: '/pages/spotCheckConfigure/addSpotCheck' }); }, // 上拉分页 onReachBottom() { console.log('onReachBottom'); if (this.list.length < this.total) { this.getList(); } else { uni.showToast({ title: '已经到底了', icon: 'none' }); this.status = 'nomore'; } }, methods: { // 获取列表 getList(pageNo) { let _this = this; if(pageNo==1){ this.pageNo = 1 this.list = [] } let params = { pageNo: this.pageNo, pageSize: this.pageSize }; this.status = 'loading'; getCheckTaskConfigList(params).then(res => { console.log(res) if (res.status == 200) { let list = res.data.list; if (_this.pageNo > 1) { _this.list = _this.list.concat(list); } else { _this.list = list; } _this.total = res.data.count; _this.pageNo++; } else { uni.showToast({ title: res.message, icon: 'none' }); _this.noDataText = res.message; } _this.status = 'loadmore'; }); }, // 启用禁用 changeItem(item) { console.log(item) let _this = this; let status = item.status == 1 ? 0 : 1; enableCheckTaskConfig({ id: item.id, flag: status }).then(res => { if (res.status == 200) { let i = _this.list.findIndex(a => a.id == item.id); _this.list[i].status = status; _this.list.splice(); } uni.showToast({ title: res.message, icon: 'none' }); }); }, // 查看详情 handetail(item) { uni.navigateTo({ url: '/pages/spotCheckConfigure/spotCheckDetail/spotCheckDetail?id=' + item.id }); }, // 编辑 handedit(item) { uni.navigateTo({ url: '/pages/spotCheckConfigure/addSpotCheck?id=' + item.id }); }, // 删除 handelete(item) { const _this = this; clzConfirm({ title: '提示', content: '确认删除,删除后数据将无法恢复?', success: function(res) { if (res.confirm || res.index == 0) { delCheckTaskConfig({ id: item.id }).then(ret => { if (ret.status == 200) { let i = _this.list.findIndex(a => a.id == item.id); _this.list.splice(i, 1); } uni.showToast({ title: ret.message, icon: 'none' }); }); } } }); } } }; </script> <style lang="scss"> page { background: #f8f8f8; height: auto; } .itemInfo { margin: 20upx; background-color: #fff; border-radius: 3px; box-shadow: 1px 1px 3px #eeeeee; .itemName { padding: 25upx; display: flex; align-items: center; .date { color: #666; } > view{ &:first-child{ flex-grow: 1; } } } .itemName:first-child { border-bottom: 1px solid #f8f8f8; padding: 15upx 15upx 15upx 25upx; } } </style>