moin_app/pages/sub/executionRecord/executionRecord.vue

<template>
	<view class="main">
		<view class="searchBox">
			<searchRow placeholder="请输入机器" @searchFn="searchFn"/>
		</view>
		<view class="tabs">
			<myTab :tabList="tabList" @tabClick="tabClick"></myTab>
		</view>
		<view class="ul">
			<view class="total"><text v-if="total">共{{ total }}条</text> </view>
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="row">
					<view class="lab">执行机器</view>
					<view class="val">{{item.machineName}}</view>
				</view>
				<view class="row">
					<view class="lab">执行命令</view>
					<view class="val ">{{item.command}}</view>
				</view>
				<view class="row">
					<view class="lab">退出码</view>
					<view class="val blue">{{item.exitCode}}</view>
				</view>
				<view class="row">
					<view class="lab">持续时间</view>
					<view class="val ">{{item.keepTime}}</view>
				</view>
				<view class="row">
					<view class="lab">执行用户</view>
					<view class="val ">{{item.username}}</view>
				</view>
				<view class="row">
					<view class="lab">创建时间</view>
					<view class="val ">{{item.createTimeAgo}}</view>
				</view>
				<view class="row">
					<view class="lab">描述</view>
					<view class="val ">{{item.description}}</view>
				</view>
				<view class="row">
					<view class="lab">状态</view>
					<view class="val" v-if="item.status==10">未开始</view>
					<view class="val green" v-if="item.status==20">执行中</view>
					<view class="val blue" v-if="item.status==30">已完成</view>
					<view class="val red" v-if="item.status==40">异常</view>
					<view class="val yellow" v-if="item.status==50">已停止</view>
				</view>
				<view class="status_row">
					<view class="blueTxt">日志</view>
					<view class="blueTxt">再次执行</view>
					<view class="blueTxt" style="color: #ff2222;">删除</view>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 20rpx;" v-if="list.length">
			<u-loadmore :status="status" />
		</view>
		<nodata v-if="!list.length&&status=='nomore'"></nodata>
	</view>
</template>

<script>
	import {
		batchExecRecord
	} from '@/config/api.js'
	export default {
		data() {
			return {
				tabList: [{
					name: '全部',
					id: 0
				}, {
					name: '未开始',
				}, {
					name: '执行中'
				}, {
					name: '已完成'
				}, {
					name: '异常'
				}, {
					name: '已停止'
				}, ],
				params: {
					// command: "",
					// description: "描述",
					// machineName: "主机",
					limit: 10,
					page: 2,
					
				},
				current: 0,
				total: 0,
				list: [],
				name: '',
				status: 'loadmore'
			}
		},
		onLoad() {
			
			this.initList()
		},
		onPullDownRefresh() {
			this.initList()
		},
		onReachBottom() {
			if(this.total>this.list.length) {
				this.batchExecRecordFn()
			}
		},
		methods: {
			searchFn(val) {
				this.params.machineName = val
				this.initList()
			},
			tabClick(item) {
				console.log('item', item);
				this.current = item.index
				this.initList()
			},
			initList() {
				this.list = []
				this.params.pageNum = 1
				this.status = 'loadmore'
				this.batchExecRecordFn()
			},
			async batchExecRecordFn() {
				if(this.current==0) {
					 delete this.params.status
				}else {
					this.params.status = this.current + '0'
				}
				const {
					data: res
				} = await batchExecRecord(this.params)
				this.list.push(...res.rows)
				this.total = res.total
				if(res.total<=this.list.length) {
					this.status = 'nomore'
				}else {
					this.status = 'loadmore'
				}
				uni.stopPullDownRefresh()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 16rpx 30rpx;
		background-color: #fff;
	}

	.tabs {
		background-color: #fff;
		margin-top: 8rpx;
		padding: 16rpx 0;
	}

	.ul {
		width: 100%;
		padding: 0 30rpx 40rpx 30rpx;

		.total {
			height: 66rpx;
			line-height: 66rpx;
			font-size: 24rpx;
			color: #999;
			text-align: right;
		}

		.card {
			padding: 10rpx 28rpx;
			margin-bottom: 24rpx;
			.row {
				align-items: center;
				display: flex;
				justify-content: space-between;
				padding: 16rpx 0;
				font-size: 26rpx;
				color: #333;

				.lab {}

				.val {
					&.blue {
						color: $themC;
					}

					&.hui {
						color: #999;
					}

					&.yellow {
						color: #fc7710;
					}
					&.red {
						color: red;
					}
					&.green {
						color: green;
					}
				}

				.flex {
					display: flex;
					justify-content: flex-end;

					.icon {
						width: 28rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
				}
			}

			.status_row {
				color: $themC;
				font-size: 28rpx;
				font-weight: 600;
				display: flex;
				padding: 20rpx 0;

				.blueTxt {
					flex: 1;
				}
			}
		}
	}
</style>