forestry-wx/src/tools/species-info-process/models/info-card.vue

<template>
    <view class="pd-24 pb-10 select-item" @click="$emit('click')">
        <view class="b-radius bg-#fff pd-20 p-rtv noactive" :class="{ active: selected }">
            <view class="d-flex j-sb a-c li-item-head mb-16">
                <view class="li-left-tag" :class="{ [`bg-instore-${item?.instoreType}`]: true }">{{
                    selectDictLabel(pt_fresh_instore_type, item?.instoreType) }}</view>
                <view class="f-s-22 c-#666 pt-10">{{ item?.updateTime || item?.createTime }}</view>
            </view>
            <view class="d-flex flex1 mb-10">
                <view class="flex1">
                    <span class="f-s-34 c-#333 f-w-500 mr-10">{{ item?.variety }}</span>
                    <span class="f-s-24 c-#666">{{ item?.partName }}</span>
                </view>
                <view>
                    <view v-if="item?.examinReport?.length" class="tag-span c-primary bg-#EBF6EE">已检验</view>
                    <view v-else class="tag-span c-danger bg-#F9ECEA">未检验</view>
                </view>
            </view>
            <view class="pd2-4-0 f-s-28">
                <span class="c-#666 w-s-no">入库批号：</span>
                <span class="c-#333 f-w-500">{{ item?.batchCode }}</span>
            </view>
            <!-- <view class="pd2-4-0 f-s-28">
                            <span class="c-#666">溯源批号：</span>
                            <span class="c-#333 f-w-500">暂无</span>
                        </view> -->
            <view v-if="['A3', 'A4'].includes(item?.seedType)" class="pd2-4-0 f-s-28">
                <span class="c-#666 w-s-no">菌种/菌株编号：</span>
                <span class="c-#333 f-w-500">{{ selectDictLabel(pt_fungus_code_type, item?.fungusCodeType) }}/{{
                    item?.fungusCode }}</span>
            </view>
            <view class="pd2-4-0 f-s-28">
                <span class="c-#666 w-s-no">供应商：</span>
                <span class="c-#333 f-w-500">{{ item?.supplierInfo?.cusName || '-' }}</span>
            </view>
            <view class="pd2-4-0 f-s-28">
                <span class="c-#666 w-s-no">存放库房：</span>
                <span class="c-#333 f-w-500">{{ getStorageRoomNames(item?.warehouses) || '-' }}</span>
            </view>
            <view class="pd2-4-0 f-s-28">
                <span class="c-#666 w-s-no">入库量：</span>
                <span class="c-#333 f-w-500">{{ item?.capacity }}{{ item?.unit }}</span>
            </view>
            <view class="d-flex">
                <view v-if="item?.inputAmount" class="pd2-4-0 f-s-28 flex1">
                    <span class="c-#666">出库量：</span>
                    <span class="c-#333 f-w-500">{{ item?.inputAmount || '0' }}{{ item?.unit }}</span>
                </view>
                <view v-if="item?.restAmount" class="pd2-4-0 f-s-28 flex1">
                    <span class="c-primary">剩余量：</span>
                    <span class="c-primary f-w-500">{{ item?.restAmount || '0' }}{{ item?.unit }}</span>
                </view>
            </view>
            <!-- 选中图标 -->
            <image v-if="selected" class="w-40 h-40 checked-icon"
                src="https://yujin-szyy.oss-cn-chengdu.aliyuncs.com/szyy/images-plt/common/btn_checked_icon.png"
                mode="widthFix" />
        </view>
    </view>
</template>
<script setup lang="ts">
import { selectDictListClass } from '@/utils/ruoyi';
import { getStorageRoomNames } from '@/utils/common';
const props = defineProps<{
    item: any;
    selected?: boolean;
}>();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_fresh_instore_type, pt_seed_type, pt_fungus_code_type } = toRefs<any>(proxy?.useDict('pt_fresh_instore_type', 'pt_seed_type', 'pt_fungus_code_type'));
</script>
<style lang="scss">
.search-select-item {
    height: 86rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 12rpx;
}

.tag-span {
    padding: 4rpx 12rpx;
    font-size: 20rpx;
    border-radius: 18rpx;
}

.li-item-head {
    margin-left: -24rpx;
    margin-top: -24rpx;
}

.li-left-tag {
    padding: 6rpx 16rpx;
    color: #fff;
    border-radius: 16rpx 0 16rpx 0;
    font-size: 20rpx;
    font-weight: 500;
}

.select-item {
    .noactive {
        border: 1rpx solid transparent;
    }

    .active {
        background-color: #ebf6ee;
        position: relative;
        border: 1rpx solid #37a954;
    }

    .checked-icon {
        position: absolute;
        right: 0rpx;
        bottom: 0rpx;
    }
}
</style>