forestry-wx/src/plant/models/pack-card.vue

<template>
    <view v-if="item" @click="emit('click')">
        <view class="d-flex j-sb a-c pr-24">
            <view class="f-s-20 f-w-5 item-left-tag" :class="{[`bg-pack-${ item?.refType }`]: true }">{{ selectDictLabel(pt_pack_ref_type, item?.refType) }}</view>
            <view class="f-s-22 c-#666">
                {{ getDateRangeFrt(item?.packagingDateStart, item?.packagingDateStart) }}
                <span>包装</span>
            </view>
        </view>
        <view class="pd-20">
            <view class="d-flex a-c">
                <view class="flex1 ov-hd">
                    <span class="f-s-34 c-#333 f-w-5 mr-10">{{ item?.proName || '-' }}</span>
                    <span class="f-s-24 c-#666">{{ item?.proLevel || '-' }}</span>
                </view>
                <up-icon v-if="isArrow" name="arrow-right" color="#999" size="24rpx"></up-icon>
            </view>
            <view class="f-s-24 c-#666">{{ item?.proSpenc }}</view>
            <view class="pd-6"></view>
            <view class="f-s-28 pd2-4-0">
                <span class="c-#666">成品批号：</span>
                <span class="c-#333 f-w-5">{{ item?.batchSn }}</span>
            </view>
            <view class="f-s-28 pd2-4-0">
                <span class="c-#666">包装批号：</span>
                <span class="c-#333 f-w-5">{{ item?.packSn }}</span>
            </view>
            <view class="d-flex flex-wrap">
                <view class="f-s-28 pd2-4-0 hcol-15">
                    <span class="c-#666">包装规格：</span>
                    <span class="c-#333 f-w-5">{{ item?.capacity }}{{ item?.storageUseUnit }}/{{ item?.unit }}</span>
                </view>
                <view class="f-s-28 pd2-4-0 hcol-15">
                    <span class="c-#666">包装总总量：</span>
                    <span class="c-#333 f-w-5">{{ item?.storageUseAmount }}{{ item?.storageUseUnit }}</span>
                </view>
                <view class="f-s-28 pd2-4-0 hcol-15">
                    <span class="c-#666">分包数量：</span>
                    <span class="c-#333 f-w-5">{{ item?.planCount }}{{ item?.unit }}</span>
                </view>
                <view v-if="item.refType == '1'" class="f-s-28 pd2-4-0 hcol-15">
                    <span class="c-#666">待关联数量：</span>
                    <span class="c-#333 f-w-5">{{ item?.planCount - item?.actualCount }}{{ item?.unit }}</span>
                </view>
                <view v-if="item.refType == '2'" class="f-s-28 pd2-4-0 hcol-15">
                    <span class="c-#666">待打印数量：</span>
                    <span class="c-#333 f-w-5">{{ item?.actualCount - item?.printCount }}{{ item?.unit }}</span>
                </view>
            </view>
            <slot></slot>
        </view>
    </view>
</template>
<script lang="ts" setup>
const props = defineProps({
    item: {
        type: Object,
        default: () => null,
    },
    dict: {
        type: Object,
        default: () => null,
    },
    isArrow: {
        type: Boolean,
        default: false,
    },
});
const { pt_pack_ref_type } = toRefs(props?.dict);
const emit = defineEmits(['click']);
</script>
<style lang="scss" scoped>
.item-left-tag {
   padding: 6rpx 18rpx;
   border-radius: 0 0 18rpx 0;
   color: #fff;
}
.bg-pack-1 {
    background-color: #2289E0;
}
.bg-pack-2 {
    background-color: #37A954;
}
</style>