WZC2/fe/PDA/mycomponents/comItem/comTopItem.vue

<!-- 零件基础信息卡片包括:
ERP料号、名称、描述、数量和单位
箱码、批次、库位、状态
可以通过属性控制库位和状态是否显示 -->
<template>
	<view class="common_card">
		<view class="ljh_box">
			<view class="ljh_info">
				<view class="tit_ljh">{{ dataContent.itemCode }}</view>
				<view class="label_xm font_xs fr">{{ dataContent.packingCode }}</view>
			</view>
			<view class="uni-flex space-between desc_card">
				<view class="ljh_left">
					<view class="text_lightblue font_xs">{{dataContent.itemName }}</view>
				</view>
				<view class="ljh_right">
					<text class="tnum">{{dataContent.qty}}</text>
					<text class="tunit">{{dataContent.uom}}</text>
				</view>
			</view>
		</view>
		<view class="uni-flex uni-row bot_card" v-if="displayBottomInfo">
			<!-- 库位 -->
			<view class="bot_card_item" v-if="displayLocation">
				<label class="icon_bg icon_bg_kw">
					<image class="icon_normal" src="@/static/icons_ui/icon_kw.svg">
					</image>
				</label>
				<text>{{ dataContent.locationCode }}</text>
			</view>
			<!-- 批次 -->
			<view class="bot_card_item">
				<label class="icon_bg icon_bg_pc">
					<image class="icon_normal" src="@/static/icons_ui/icon_pc.svg">
					</image>
				</label>
				<text>{{dataContent.lot}}</text>
			</view>
			<!-- 状态 -->
			<view class="bot_card_item item_short" v-if="displayStatus">
				<!-- <label class="icon_state" :class="dataContent.status | statusStyle"></label> -->
				<text class="state_point" :class="dataContent.status | statusStyle">
					{{ dataContent.status | statusColor}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInventoryTypeStyle,
		getInventoryStatusDesc,
	} from '@/common/basic.js';

	export default {
		name: 'comBaseItem',
		components: {},
		props: {
			dataContent: {
				type: Object,
				default: {}
			},
			displayLocation: {
				type: Boolean,
				default: true
			},
			displayStatus: {
				type: Boolean,
				default: true
			},
			displayBottomInfo: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {}
		},
		filters: {
			statusStyle: function(val) {
				return getInventoryTypeStyle(val);
			},
			statusColor: function(val) {
				return getInventoryStatusDesc(val);
			},
		},
		created() {

		},
		methods: {

		}
	}
</script>

<style>
</style>