forestry-wx/src/tools/select-code-section/index.vue

<template>
    <z-paging ref="paging" safe-area-inset-bottom v-model="list" bottom-bg-color="#fff" paging-class="paging-btm-shadow" @query="query">
        <template #top>
            <ut-navbar title="请选择追溯码" :fixed="false" :breadcrumb="false"></ut-navbar>
            <view class="pd-20">
                <ut-search ref="searchRef" v-model="form.keyword" @search="onRefresh" margin="0" :border="false" placeholder="搜生成批号、操作人" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
            </view>
        </template>
        <view class="base-content pd-20">
            <view :class="{ active: item.id === checkedId, disabled: isDisabled(item) }" v-for="(item, index) in list" :key="item.id" @click="clickItem(item)" class="b-radius bg-#fff pd-20 p-rtv select-item-card mb-20">
                <image v-if="item.id === checkedId" class="w-40 h-40 checked-icon" src="https://yujin-szyy.oss-cn-chengdu.aliyuncs.com/szyy/images-lm/price/checked1.png" mode="widthFix" />
                <view v-if="isDisabled(item)" class="disabled-tag">已选择</view>
                <view class="f-s-28 pd2-5-0">
                    <span class="c-#666">生成批号：</span>
                    <span class="c-#333 f-w-500">{{ item?.batchSn || '-' }}</span>
                </view>
                <view class="f-s-28 pd2-5-0 d-flex">
                    <span class="c-#666">码段：</span>
                    <view class="f-w-500 flex1 c-#333 f-w-500">
                        <view>{{ item?.traceCodeStart || '-' }}<span class="c-#999"> 至 </span></view>
                        <view>{{ item?.traceCodeEnd || '-' }}</view>
                    </view>
                </view>
                <view class="d-flex">
                    <view class="f-s-28 pd2-5-0 hcol-14">
                        <span class="c-#666">生成数量：</span>
                        <span class="c-#333 f-w-500">{{ item?.sumCount || '-' }}个</span>
                    </view>
                    <view class="f-s-28 pd2-5-0 hcol-16">
                        <span class="c-#666">剩余数量：</span>
                        <span class="c-#333 f-w-500">{{ +item?.sumCount - +item?.useCount - +item?.voidCount || '-' }}个</span>
                    </view>
                </view>
                <view class="d-flex">
                    <view class="f-s-24 pd2-5-0 hcol-14 up-line-1">
                        <span class="c-#666">操作人：</span>
                        <span class="c-#666">{{ item?.operatorName || '-' }}</span>
                    </view>
                    <view class="f-s-24 pd2-5-0 hcol-16 up-line-1">
                        <span class="c-#666">生成时间：</span>
                        <span class="c-#666">{{ parseTime(item?.createTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</span>
                    </view>
                </view>
            </view>
        </view>
        <template #bottom>
            <view class="pd-20 d-flex">
                <up-button type="primary" @click="confirmSelect">确认选择</up-button>
            </view>
        </template>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import { parseTime } from '@/utils/ruoyi';
const paging = ref<any>(null);
const list = ref<any[]>([]);
const form = ref({
    keyword: '',
    restFlag: '1',
});
const query = async (pageNum: number, pageSize: number) => {
    const res = await useClientRequest.get('/plt-api/app/traceCodeLog/list', {
        ...form.value,
        pageNum: pageNum,
        pageSize: pageSize,
    });
    if (res.code == 200) {
        paging.value.complete(res.rows || []);
    }
};
const checkedId = ref(null);
const selectedIds = ref<number[]>([]);
const isDisabled = (item: any) => selectedIds.value.includes(item?.id);
const clickItem = (item: any) => {
    if (isDisabled(item)) {
        uni.showToast({
            title: '该追溯码段已被选择',
            icon: 'none',
        });
        return;
    }
    checkedId.value = item.id;
};
// 确认选择
const confirmSelect = () => {
    const selectedItem = list.value.find((item) => item.id === checkedId.value);
    if (selectedItem && !isDisabled(selectedItem)) {
        uni.$emit(opts.value.callback, selectedItem);
        uni.navigateBack();
    } else {
        uni.showToast({
            title: '请选择一项追溯码段信息',
            icon: 'none',
        });
    }
};
const onRefresh = () => {
    try {
        paging.value?.reload();
    } catch (e) {
        console.error('Error refreshing address list:', e);
    }
};
const opts = ref({
    // 监听函数字符串
    callback: 'refreshCodesRange',
});
onLoad((options: any) => {
    console.log(options);
    
    opts.value.callback = options?.callback || 'refreshCodesRange';
    if (!options?.selectedIds) return;
    try {
        const ids = JSON.parse(decodeURIComponent(options.selectedIds));
        selectedIds.value = ids || [];
    } catch (error) {
        selectedIds.value = [];
    }
});
</script>
<style lang="scss" scoped>
.select-item-card {
    position: relative;
    border: 1rpx solid #fff;
    border-radius: 16rpx;
    overflow: hidden;
    .checked-icon {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    &.active {
        border-color: $u-primary;
        background-color: #ebf6ee;
    }
    &.disabled {
        opacity: 0.55;
        background-color: #f5f5f5;
    }
    .disabled-tag {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        padding: 4rpx 12rpx;
        border-radius: 999rpx;
        font-size: 22rpx;
        color: #999;
        background-color: #ececec;
    }
}
</style>