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

<template>
	<view>
		<view class="good-item">
			<view class="" @click="toDetail">
			<view class="good-msg">
				<u-image
					:src="item.imgNameArr[0] || ''"
					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 ? (item.inventory * 1).toFixed(0) : '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>
			</view>
			<slot></slot>
			<view class="action-btn-box" v-if="showPrint">
				<view class="print-btn" @click="clickPrint">
					打印条码
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object,
				default:()=>{}
			},
			showPrint:{
				type:Boolean,
				default: false
			}
		},
		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)
			},
			clickPrint(){
				this.$emit('print',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: 25% 45% 30%;
			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;
				}
			}
		}
	}
	.action-btn-box{
		text-align: right;
		padding: 30rpx 48rpx 0 26rpx;
		
		.print-btn{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #0256FF;
		}
	}
</style>