forestry-wx/src/plant/processing/processing-detail-list/models/processing-output-item.vue

<template>
    <view class="relative b-radius pd-24 d-flex a-c bg-#fff select-item" :class="{ actives: selected && selectable }"
        @click="handleClick">
        <!-- 序号标签 -->
        <view v-if="showIndex" class="absolute top-0 left-0 w-60 h-60 c-#fff f-s-20 f-w-5 pd-4 pt-4 pb-4 z-index-10"
            style="border-radius: 16rpx 0 0rpx 0; background: linear-gradient(135deg, #22c55e 50%, transparent 50%)">
            <span class="w-30 h-30 f-s-24 f-w-5" style="transform: rotate(-45deg); display: block">{{ String(index +
                1).padStart(2, '0') }}</span>
        </view>
        <!-- 图片 -->
        <view class="w-100 h-100 radius-8 ov-hd mr-24" style="flex-shrink: 0">
            <up-image :src="item?.imgs?.split(',')?.[0]" mode="aspectFill" width="100%" height="100%"></up-image>
        </view>
        <!-- 信息区域 -->
        <view class="flex-1 flex a-c j-sb">
            <!-- 左侧：品名和规格 -->
            <view class="flex flex-cln">
                <view class="f-s-34 f-w-5 c-#333 mb-4">{{ item?.specnLevel }}</view>
                <view class="f-s-24 c-#999">{{ item?.finalSpecn }}{{ item?.finalUnit }}{{
                    selectDictLabel(pt_final_form_type, item?.finalFormType) }}</view>
            </view>
            <!-- 中间：重量和检验状态 -->
            <view class="flex flex-cln a-c">
                <view class="f-s-34 f-w-5 c-#333">{{ item?.capacity }}{{ item?.unit }}</view>
                <view v-if="item?.examinReport?.length > 0" class="f-s-24 mt-8 c-#37a954">已检验</view>
                <view v-else class="f-s-24 mt-8 c-#f74c30">未检验</view>
            </view>
            <!-- 右侧：入库状态 -->
            <view class="flex a-c">
                <view v-if="+item?.status !== 0" class="f-s-24 c-#37a954" style="text-decoration: underline">已入种源库
                </view>
                <view v-else class="f-s-24 c-#999">未入库</view>
            </view>
        </view>
        <!-- 选中对勾图标 -->
        <image v-if="selected && selectable" 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 class="h-16"></view>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_final_form_type } = toRefs<any>(proxy?.useDict('pt_final_form_type'));
const props = defineProps({
    // 单个产出项数据
    item: {
        type: Object,
        default: () => ({}),
    },
    // 序号（用于显示）
    index: {
        type: Number,
        default: 0,
    },
    // 是否支持点击选中
    selectable: {
        type: Boolean,
        default: false,
    },
    // 是否已选中
    selected: {
        type: Boolean,
        default: false,
    },
    // 是否显示序号标签
    showIndex: {
        type: Boolean,
        default: true,
    },
});

const emit = defineEmits<{
    click: [item: any];
    'update:selected': [value: boolean];
}>();

// 处理点击事件
const handleClick = () => {
    if (props.selectable) {
        emit('update:selected', !props.selected);
    }
    emit('click', props.item);
};
</script>

<style scoped lang="scss">
.select-item {
    border: 1rpx solid transparent;

    .checked-icon {
        position: absolute;
        right: 0rpx;
        bottom: 0rpx;
    }
}

.actives {
    background-color: #ebf6ee;
    border: 1rpx solid #37a954;
}
</style>