ipc-app/pages/work/parts/listParts.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 partsList" :key="index">
			<view class="cu-item shadow" @click="goItem(item.id)">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="content flex-sub card-title">
							<view>{{item.partsName}}</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.partsNum}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">备件规格型号: {{item.partsSpecifications}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">库存: {{item.quantity}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">安全库存: {{item.safeQuantity}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">单位: {{item.unit}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">使用设备: {{item.equip}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStockList
	} from "@/api/parts/parts.js"

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

	export default {
		data() {
			return {
				isJump: false,
				equipId: null,
				equipName: "选择设备",
				//是否显示弹窗
				showEquip: false,
				//是否显示关闭按钮
				closeableEquip: true,
				ready: false,
				expandOnClickNode: false,
				//树形结构数据
				treeData: [],
				//加载到最后一条
				finished: false,
				total: 0,
				tipText: "正在加载...",
				partsList: [],
				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.getPartsList();
		},
		onReachBottom() {
			const allTotal = this.queryParams.pageNum * this.queryParams.pageSize;
			if (allTotal < this.total) {
				this.queryParams.pageNum += 1;
				this.getPartsList();
			} else {
				this.finished = true;
				this.tipText = "已加载完成";
			}
		},
		methods: {
			goItem(id){
				this.$tab.navigateTo("/pages/work/parts/detailsParts?partsId=" + id);
			},
			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.partsList = [];
				this.getPartsList();
			},
			getPartsList() {
				this.finished = true;
				this.queryParams.equipId = this.equipId;
				getStockList(this.queryParams).then((res) => {
					this.finished = false;
					this.partsList = this.partsList.concat(res.rows);
					this.total = res.total;
					this.partsList.forEach((item) => {
						item.color = "#FFF";
						if (item.type === 1) {
							item.bgColor = "#1771f7";
							item.nameStatus = "关键备件"
						} else if (item.type === 2) {
							item.bgColor = "#1771f7";
							item.nameStatus = "特殊备件"
						} else{
							item.bgColor = "#1771f7";
							item.nameStatus = "普通备件"
						}
					})
				})
			}
		}
	}
</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>