ipc-app/pages/work/maintenance/listMaintenance.vue

<template>
	<view class="card-group">
		<u-popup :show="showEquip" mode="bottom" :closeable="closeableEquip" @open="openPopupEquip"
			@close="closePopupEquip">
			<ly-tree :tree-data="treeData" :ready="ready" node-key="id" :props="props"
				:expandOnClickNode="expandOnClickNode" @node-click="handleNodeClick"></ly-tree>
		</u-popup>
		<u-button :disabled="isJump" @click="showEquip = true">{{equipName}}</u-button>
		<view class="card-group" v-if="total === 0">
			<leruge-empty text="暂无数据" type="minus"></leruge-empty>
		</view>
		<view class="cu-card dynamic" v-if="total != 0" v-for="(item,index) in maintenanceList" :key="index">
			<view class="cu-item shadow" @click="goItem(item)">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="content flex-sub card-title">
							<view>{{item.equipName}}</view>
							<button class="label-btn" size="mini"
								:style="{'background': item.bgColor,'color':item.color}">{{item.nameStatus}}</button>
						</view>
					</view>
				</view>
				<view class="content-container">
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">保养计划编号: {{item.planNum}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">预期保养部件: {{item.planComponent}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">预期保养内容: {{item.planContent}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">计划开始时间: {{item.planStartTime}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">计划完成时间: {{item.planEndTime}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">保养计划制定人: {{item.creatorName}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">保养计划执行人: {{item.maintainerName}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">保养计划监管人: {{item.supervisorName}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listMaintenance
	} from "@/api/maintenance/maintenance.js"

	import {
		getEquipTree
	} from "@/api/equip/equip.js"

	export default {
		data() {
			return {
				maintenanceList: [],
				isJump: false,
				equipId: null,
				equipName: "选择设备",
				//是否显示弹窗
				showEquip: false,
				//是否显示关闭按钮
				closeableEquip: true,
				ready: false,
				expandOnClickNode: false,
				//树形结构数据
				treeData: [],
				//加载到最后一条
				finished: false,
				total: 0,
				tipText: "正在加载...",
				props: function() {
					return {
						label: 'equipName',
						children: 'childList'
					}
				},
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
			}
		},
		onLoad(opts) {
			if (opts.equipId != null && opts.equipId != '') {
				this.equipId = opts.equipId;
				this.equipName = opts.equipName;
				this.isJump = true;
			}
		},
		onShow() {
			this.partsList = [];
			this.queryParams = {
				pageNum: 1,
				pageSize: 10
			};
			this.getMaintenanceList();
		},
		onReachBottom() {
			const allTotal = this.queryParams.pageNum * this.queryParams.pageSize;
			if (allTotal < this.total) {
				this.queryParams.pageNum += 1;
				this.getMaintenanceList();
			} else {
				this.finished = true;
				this.tipText = "已加载完成";
			}
		},
		methods: {
			goItem(item) {
				this.$tab.navigateTo("/pages/work/maintenance/detailsMaintenance?id=" + item.id + "&planStartTime=" + item
					.planStartTime + "&planEndTime=" + item.planEndTime + "&maintainerName=" + item.maintainerName +
					"&planContent=" + item.planContent + "&planNum=" + item.planNum);
			},
			getMaintenanceList() {
				this.finished = true;
				this.queryParams.equipId = this.equipId;
				listMaintenance(this.queryParams).then((res) => {
					this.finished = false;
					this.maintenanceList = this.maintenanceList.concat(res.rows);
					this.total = res.total;
					this.maintenanceList.forEach((item) => {
						item.color = "#FFF";
						if (item.status === "1") {
							item.bgColor = "#13ce66";
							item.nameStatus = "已完成"
						} else if (item.status === "2") {
							item.bgColor = "#225aa4";
							item.nameStatus = "执行中"
						} else if (item.status === "3") {
							item.bgColor = "#ff4949";
							item.nameStatus = "已超期"
						} else if (item.status === "4") {
							item.bgColor = "#ffba00";
							item.nameStatus = "超期完成"
						} else {
							item.bgColor = "#909399";
							item.nameStatus = "未开始"
						}
					})
				})
			},
			openPopupEquip() {
				this.getEquipList();
			},
			closePopupEquip() {
				this.showEquip = false;
			},
			getEquipList() {
				this.ready = false;
				this.treeData = [{
					"id": null,
					"equipName": "所有设备"
				}];
				getEquipTree().then((res) => {
					this.treeData = this.treeData.concat(res);
					this.ready = true;
				})
			},
			handleNodeClick(obj) {
				this.equipName = obj.label;
				this.equipId = obj.key;
				this.showEquip = false;
				this.maintenanceList = [];
				this.getMaintenanceList();
			},
		}
	}
</script>

<style>
	/* 卡片的样式 start */
	.card-group .cu-card .cu-item {
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	.card-group .card-title {
		left: 20px !important;
		color: #333;
		font-weight: 600;
		display: flex;
		justify-content: space-between;
		width: calc(100% - 20px) !important;
	}

	.card-group .card-title .label-btn {
		margin: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-top-left-radius: 16px;
		border-bottom-left-radius: 16px;
		letter-spacing: 1px;
	}

	.card-group .cu-list.menu-avatar>.cu-item {
		height: 50px;
	}

	.card-group .cu-list.menu-avatar>.cu-item:after {
		border-bottom: none !important;
	}

	.card-group .content-container {
		padding-left: 20px;
		color: #909399;
		margin-bottom: 6px;
	}

	.card-group .content-container .text-content .iconfont {
		font-size: 16px;
		margin-right: 4px;
	}

	.card-group .content-container .text-content .text-description {
		font-size: 14px;
	}

	.card-group .text-bottom {
		margin: 0 20px;
		border-top: 1px dotted #aaa;
		padding: 6px 0;
	}

	/* 卡片的样式 end */

	/* 下拉加载提示字的样式 end */
	.loading-tip {
		font-size: 12px;
		color: #666;
		padding-bottom: 12px;
		text-align: center;
	}
</style>