aiot-app/pages/maintenanceWorkorder/components/PopSparePart.vue

<template>
	<!-- 备品备件弹窗 -->
	<u-popup :show="popShow" @close="close" mode="center" class="u-popup">
		<view class="bpbj">
			<view class="title">
				{{ title }}
			</view>
			<view class="detail-content">
				<template v-if="InfoList.length > 0">
					<view class="col" v-for="item in InfoList" :key="item.id">
						<view class="tt">备件物品编码: {{ item.code }}</view>
						<view class="tt">备件名称: {{ item.name }}</view>
						<view class="tt">所属分类: 备品备件</view>
						<view class="tt">型号: {{ item.modelType }}</view>
						<view class="tt">使用数量: {{ item.packingCountBase }}</view>
						<!-- <view class="tt">{{ item.assetCode }}</view>
						{{ item.informationName }}（{{ (item.specification ? item.specification : '-') + '/' + item.modelType }})

						<text v-if="title == '备件使用明细'">{{ item.isUnpack ? 1 : item.num }}{{ item.unit || item.measuringUnit }}</text> -->
					</view>
				</template>
				<view class="nodata" v-else>暂无数据</view>
			</view>
			<view class="close" @click="close">
				<u-button text="关闭"></u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import { post, postJ, get } from '@/utils/api.js'
	export default {
		props: {
			workOrderCode: {
				type: String,
				default() {
					return ''
				}
			},
			sparePartsJson: {
				type: Array,
				default() {
					return [null]
				}
			},
			noRequest: {
				type: Boolean,
				default: false
			},
			equipmentCode: {
				type: String,
				default() {
					return ''
				}
			}
		},
		data() {
			return {
				popShow: false,
				workOrderId: '',
				InfoList: [],
				title: ''
			}
		},
		methods: {
			open(value, list) {
				this.popShow = true
				this.title = value
				if (this.noRequest) {
					this.InfoList = list
				} else {
					if (value == '备件使用明细') {
						this.getList(workOrderCode)
					} else {
						this.getInfo(code)
					}
				}
			},
			close() {
				this.popShow = false
				this.$emit('close')
			},
			// 获取备品备件
			getList(workOrderCode) {
				let par = {
					sourceCode: workOrderCode || this.workOrderCode
				}

				if (this.equipmentCode) {
					par.equipmentCode = this.equipmentCode
				}
				postJ(this.apiUrl + `/sparePartsApply/getSparePartsExpendList`, par).then(res => {
					if (res?.success) {
						this.InfoList = res.data
						this.InfoList.map(item => {
							if (item.isUnpack) {
								item.num = item.unusedNum
							} else {
								item.num = item.measurementUnit - item.unusedNum
							}
						})
					}
				})
			},
			getInfo(code) {
				get(this.apiUrl + `/sparePartsApply/detail/${code}`).then(res => {
					if (res?.success) {
						this.InfoList = res.data.sparePartsApplyDetailList
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nodata {
		text-align: center;
		padding: 30rpx 0;
	}
	.bpbj {
		width: 600rpx;
		.title {
			margin-bottom: 7px;
			background-color: #333333;
			text-align: center;
			color: #fff;
			padding: 10rpx 0;
		}

		.detail-content {
			border: 1rpx solid rgba(242, 242, 242, 1);
			max-height: 60vh;
			overflow: auto;
			.col {
				font-size: 28rpx;
				border-bottom: 1rpx solid rgba(242, 242, 242, 1);
				display: flex;
				padding: 10rpx;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				background-color: rgba(242, 242, 242, 0.372549019607843);
				.tt {
					width: 100%;
				}
			}

			.plus {
				width: 40rpx;
				height: 40rpx;
				line-height: 38rpx;
				text-align: center;
				background-color: $j-primary-border-green;
				color: #fff;
				margin: 16rpx 0 0 16rpx;
			}
		}

		/deep/.u-number-box {
			.u-number-box__minus,
			.u-number-box__plus,
			.u-number-box__input {
				font-size: 30rpx;
				height: 1.6em !important;
			}

			.u-number-box__input {
				width: 2em !important;
			}

			.u-number-box__minus,
			.u-number-box__plus {
				background-color: $j-primary-border-green !important;

				.u-icon__icon {
					color: #fff !important;
				}
			}
		}
	}
</style>