jsh_erp_app/components/good-item/good-item.vue

<template>
	<view>
		<view class="good-item" @click="toDetail">
			<view class="good-msg">
				<u-image
					:src="item.src"
					width="128rpx"
					height="128rpx"
				></u-image>
				<view class="ss-m-l-16">
					<view class="good-msg-name">{{item.materialName}}</view>
					<view class="good-msg-txm">条形码：{{item.barCode}}</view>
				</view>
			</view>
			<view class="good-cont">
				<view class="good-cont-item">
					<view class="item-label">规格</view>
					<view class="item-value">{{item.materialStandard || '-'}}</view>
				</view>
				<view class="good-cont-item">
					<view class="item-label">批次号</view>
					<view class="item-value">{{item.batchNumber || '-'}}</view>
				</view>
				<view class="good-cont-item" @click.stop="calendarClick">
					<view class="item-label">生产日期</view>
					<view class="item-value">{{item.productionDate ? $u.timeFormat(item.productionDate, 'yyyy-mm-dd') : '-'}}</view>
				</view>
				<view class="good-cont-item">
					<view class="item-label">库存</view>
					<view class="item-value">{{item.inventory || '0'}}{{item.commodityUnit || ''}}</view>
				</view>
				<view class="good-cont-item">
					<view class="item-label">库位</view>
					<view class="item-value">{{item.position || '-'}}</view>
				</view>
				<view class="good-cont-item">
					<view class="item-label">订单数量</view>
					<view class="item-value">{{item.operNumber || '0'}}{{item.materialUnit || ''}}</view>
				</view>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object,
				default:()=>{}
			}
		},
		data() {
			return {
				calendarShow:false,
				value1: Number(new Date()),
				maxDate:Number(new Date()),
			}
		},
		methods:{
			toDetail() {
				this.$emit('toDetail',this.item)
			},
			calendarClick() {
				this.$emit('calendarClick',this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.good-item {
		padding: 24rpx 0;
		border-bottom: 4rpx solid #F0F6FB;
		.good-msg {
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			&-name {
				color: #333;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 16rpx;
			}
			&-txm {
				color: #999;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-weight: 400;
			}
		}
		.good-cont {
			display: grid;
			grid-template-columns: 20% 40% 40%;
			margin-top: 16rpx;
			padding: 0 24rpx;
			&-item {
				font-family: "PingFang SC";
				font-weight: 400;
				margin-bottom: 24rpx;
				.item-label {
					color: #999;
					font-size: 24rpx;
					margin-bottom: 16rpx;
				}
				.item-value {
					color: #000;
					font-size: 28rpx;
				}
			}
		}
	}
	
</style>