ipc-app/pages/work/parts/detailsParts.vue

<template>
	<view class="detail-container">
		<uni-section title="备件基本信息" type="line">
			<view style="background: white;padding: 0px 20px 20px 20px;">
				<u--form labelPosition="left" :model="partsInfo" label-width="100px">
					<u-form-item label="备件名称:" prop="" borderBottom>
						{{partsInfo.partsName}}
					</u-form-item>
					<u-form-item label="备件编号:" prop="" borderBottom>
						{{partsInfo.partsNum}}
					</u-form-item>
					<u-form-item label="备件规格型号:" prop="" borderBottom>
						{{partsInfo.partsSpecifications}}
					</u-form-item>
					<u-form-item label="供应商:" prop="" borderBottom>
						{{partsInfo.supplier}}
					</u-form-item>
					<u-form-item label="供应商编号:" prop="" borderBottom>
						{{partsInfo.supplierCode}}
					</u-form-item>
					<u-form-item label="备件类型:" prop="" borderBottom>
						{{partsInfo.typeName}}
					</u-form-item>
					<u-form-item label="备件单价:" prop="" borderBottom>
						{{partsInfo.price}}
					</u-form-item>
					<u-form-item label="单位:" prop="" borderBottom>
						{{partsInfo.unit}}
					</u-form-item>
					<u-form-item label="存储位置:" prop="" borderBottom>
						{{partsInfo.storageLocation}}
					</u-form-item>
					<u-form-item label="使用设备:" prop="" borderBottom>
						{{partsInfo.equip}}
					</u-form-item>
				</u--form>
			</view>
		</uni-section>
	</view>
</template>

<script>
	
	import {
		getPartsDetailsByPartsId
	} from "@/api/parts/parts.js"
	
	export default {
		data() {
			return {
				partsId: null,
				partsInfo: {},
			}
		},
		onLoad(opts) {
			this.partsId = opts.partsId;
		},
		created() {
			this.getPartInfo();
		},
		methods: {
			getPartInfo(){
				getPartsDetailsByPartsId(this.partsId).then((res)=>{
					this.partsInfo = res.data;
					if(this.partsInfo.type === 1){
						this.partsInfo.typeName = "关键备件"
					}else if(this.partsInfo.type === 2){
						this.partsInfo.typeName = "特殊备件"
					}else{
						this.partsInfo.typeName = "普通备件"
					}
				})
			}
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.detail-container {
		padding: 12px;
		background: #f1f1f1;

		//设置按钮的样式，靠右
		.worker-button {
			float: right;
			/* margin-right: 24px; */
			margin-top: 10px;
		}
	}
</style>