forestry-wx/src/plant/code/code-list/models/code-item.vue

<template>
    <view class="bg-#fff b-radius-16 pd-24 mb-16 p-rtv b-radius">
        <!-- 状态标签 -->
        <view class="d-flex a-c j-ed" style="position: absolute; right: 0; top: 0">
            <view class="bg-#FAECE9 c-#F74C30 f-w-5 pd-10 pt-4 pb-4 f-s-20" style="border-radius: 0 16rpx 0 16rpx" v-if="item.status === '0'">追溯码生成中...</view>
            <view class="bg-#EBF6EE c-primary f-w-5 pd-10 pt-4 pb-4 f-s-20" style="border-radius: 0 16rpx 0 16rpx" v-else-if="item.downloadFlag === '0' && item.status !== '0'">未下载</view>
            <view class="bg-#E8F0F7 c-#2289E0 f-w-5 pd-10 pt-4 pb-4 f-s-20" style="border-radius: 0 16rpx 0 16rpx" v-else-if="item.downloadFlag === '1' && item.status !== '0'">已下载</view>
        </view>
        <!-- 主要内容 -->
        <view class="" @click="handleItemClick">
            <view class="d-flex a-c pb-10">
                <span class="f-s-28 c-#666">生成批号：</span>
                <span class="f-s-28 c-#333 f-w-500">{{ item.batchSn || '-' }}</span>
            </view>
            <view class="d-flex pb-10">
                <span class="f-s-28 c-#666">码段：</span>
                <span class="f-s-28 c-#333 f-w-500 flex1">{{ formatCodeRange }}</span>
                <up-icon v-if="showButtons" name="arrow-right" size="26rpx" color="#999"></up-icon>
            </view>
            <view class="d-flex a-c pb-10">
                <view class="w-50%">
                    <span class="f-s-28 c-#666">生成数量：</span>
                    <span class="f-s-28 c-#333 f-w-500">{{ item.sumCount }}个</span>
                </view>
                <view class="w-50%">
                    <span class="f-s-28 c-#666">剩余数量：</span>
                    <span class="f-s-28 c-#333 f-w-500">{{ getRemainingCount }}个</span>
                </view>
            </view>
            <view class="d-flex a-c pb-10">
                <span class="f-s-28 c-#666">备注：</span>
                <span class="f-s-28 c-#333 f-w-500">{{ item.remark || '-' }}</span>
            </view>
            <view class="d-flex a-c pb-20" style="flex-wrap: nowrap; border-bottom: 1rpx solid #f7f7f7">
                <view class="flex1 ov-hd d-flex a-c" style="min-width: 0">
                    <span class="f-s-24 c-#666 w-s-no">操作人：</span>
                    <span class="f-s-24 c-#999 f-w-500 ov-hd w-s-no tx-ov" style="display: inline-block">{{ item?.createByName }}</span>
                </view>
                <view class="ml-20" style="flex-shrink: 0">
                    <span class="f-s-24 c-#666 w-s-no">生成时间：</span>
                    <span class="f-s-24 c-#999 f-w-500" style="white-space: nowrap">{{ parseTime(item?.createTime) }}</span>
                </view>
            </view>
        </view>

        <!-- 底部按钮 -->
        <view class="d-flex a-c j-ed mt-24" v-if="showButtons">
            <!-- 追溯码生成中状态 -->
            <template v-if="item.status === '0'">
                <up-button type="primary" customStyle="height: 64rpx; font-size: 28rpx; border-radius: 8rpx; background-color: #37A954; color: #fff;width: 160rpx;" @click="handleRefresh"> 刷新 </up-button>
            </template>
            <!-- 未下载状态 -->
            <view class="d-flex j-ed a-c" v-else-if="item.downloadFlag === '0' && item.status !== '0'">
                <!-- <up-button class="mr-16"
                    customStyle="height: 64rpx; font-size: 28rpx; border-radius: 8rpx; background-color: #18BECA; color: #fff; width: 200rpx;"
                    @click="handleFindAgent">
                    找人代制作
                </up-button> -->
                <up-button type="primary" customStyle="height: 64rpx; font-size: 28rpx; border-radius: 8rpx; background-color: #37A954; color: #fff; width: 160rpx;" @click="handleDownload"> 下载 </up-button>
            </view>
            <!-- 已下载状态 -->
            <view v-else-if="item.downloadFlag === '1' && item.status !== '0'" class="d-flex j-ed a-c">
                <!-- <up-button class="mr-16"
                    customStyle="height: 64rpx; font-size: 28rpx; border-radius: 8rpx; background-color: #2289E0; color: #fff;"
                    @click="handleViewOrder">
                    查看代做订单
                </up-button> -->
                <up-button customStyle="height: 64rpx; font-size: 28rpx; border-radius: 8rpx; background-color: #91C747; color: #fff;" @click="handleReDownload"> 重新下载 </up-button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { parseTime } from '@/utils/ruoyi';

const props = withDefaults(
    defineProps<{
        item: any;
        showButtons?: boolean;
    }>(),
    {
        item: () => ({}),
        showButtons: true,
    },
);
const emit = defineEmits<{
    refresh: [id: number];
    download: [item: any];
    findAgent: [item: any];
    viewOrder: [item: any];
    reDownload: [item: any];
    itemClick: [item: any];
}>();

// 格式化码段范围
const formatCodeRange = computed(() => {
    const start = props.item.startSn || 0;
    const end = props.item.endSn || 0;
    const prefix = props.item.prefix || '';
    if (start && end) {
        return `${prefix}${start} 至 ${prefix}${end}`;
    }
    return '-';
});

// 计算剩余数量
const getRemainingCount = computed(() => {
    const sum = props.item.sumCount || 0;
    const use = props.item.useCount || 0;
    const voidCount = props.item.voidCount || 0;
    return sum - use - voidCount;
});

// 格式化时间

// 处理刷新按钮点击
const handleRefresh = () => {
    if (props.item.id) {
        emit('refresh', props.item.id);
    }
};

// 处理下载按钮点击
const handleDownload = () => {
    emit('download', props.item);
};

// 处理找人代制作按钮点击
const handleFindAgent = () => {
    emit('findAgent', props.item);
};

// 处理查看代做订单按钮点击
const handleViewOrder = () => {
    emit('viewOrder', props.item);
};

// 处理重新下载按钮点击
const handleReDownload = () => {
    emit('reDownload', props.item);
};

// 处理 item 点击
const handleItemClick = () => {
    // 跳转到码详情页面
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/code/code-detail-list/index',
        params: { id: props.item.id },
    });
    emit('itemClick', props.item);
};

// 监听 item 变化，内部可以修改数据
watch(
    () => props.item,
    (newVal) => {
        // 可以在这里处理 item 变化后的逻辑
        console.log('item 变化:', newVal);
    },
    { deep: true },
);
</script>

<style scoped lang="scss"></style>