forestry-wx/src/plant/packaging/select-object/models/select-seed-source-list.vue

<template>
    <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" bottom-bg-color="#fff" safe-area-inset-bottom paging-class="paging-btm-shadow" @query="query">
        <view class="pd3-24-24-0">
            <view class="d-flex a-c">
                <view class="min-w-230 flex1">
                    <ut-action-sheet v-model="form.instoreType" :tabs="[{ label: '全部', value: '' }, ...pt_seed_instore_type]" mode="custom" @change="onRefresh" title="选择入库类型">
                        <view class="d-flex search-select-item a-c">
                            <view class="flex1 ov-hd f-s-28 c-333 text-center f-w-5 w-s-no">{{ selectDictLabel(pt_seed_instore_type, form.instoreType) || '全部' }} </view>
                            <up-icon size="24rpx" color="#333" name="arrow-down-fill" class="mr-5"></up-icon>
                        </view>
                    </ut-action-sheet>
                </view>
                <view class="h-86 pl-20 w-100%">
                    <ut-search ref="searchRef" v-model="form.keyword" @search="changeSeach" margin="0" :border="false" placeholder="搜名称、批号、库房、供应商" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
                </view>
            </view>
            <view></view>
        </view>
        <view class="pd-24 bg-#f7f7f7">
            <template v-for="(item, index) in list" :key="index">
                <view class="b-radius bg-#fff pd-20 p-rtv mb-20 select-item-list" :class="{ 'active': item.id + '-' + item.storageType === checkedId }" @click="emit('clickItem', item)">
                    <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_seed_instore_type, item?.instoreType) }}</view>
                        <view class="f-s-22 c-#666">{{ item?.instoreBizInfo?.instoreDate }}</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?.seedLevel }}{{ selectDictLabel(pt_seed_type, item?.seedType) }}</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>
                    <template v-if="item?.instoreType == '2'">
                        <view class="pd2-4-0 f-s-28">
                            <span class="c-#666">入库批号：</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">菌种/菌株编号：</span>
                            <span class="c-#333 f-w-500">{{ selectDictLabel(pt_fungus_code_type, item?.fungusCodeType) }}/{{ item?.fungusCode }}</span>
                        </view>
                        <view v-if="item?.supplierId" class="pd2-4-0 f-s-28">
                            <span class="c-#666">供应商：</span>
                            <span class="c-#333 f-w-500">{{ item?.supplierInfo?.cusName || '-' }}</span>
                        </view>
                        <view v-if="item?.warehouses?.length" class="pd2-4-0 f-s-28">
                            <span class="c-#666">存放库房：</span>
                            <span class="c-#333 f-w-500">{{ getStorageRoomNames(item?.warehouses) || '-' }}</span>
                        </view>
                    </template>
                    <template v-if="item?.instoreType == '3'">
                        <view class="pd2-4-0 f-s-28">
                            <span class="c-#666">采收批号：</span>
                            <span class="c-#333 f-w-500">{{ item?.harvestInfo?.harvestCode || '-' }}</span>
                        </view>
                        <view class="pd2-4-0 f-s-28">
                            <span class="c-#666">采收基地：</span>
                            <span class="c-#333 f-w-500">
                                {{ item?.harvestInfo?.baseInfo?.baseName || '-' }}
                            </span>
                        </view>
                        <view v-if="['A3', 'A4'].includes(item?.seedType)" class="pd2-4-0 f-s-28">
                            <span class="c-#666">菌种/菌株编号：</span>
                            <span class="c-#333 f-w-500">{{ selectDictLabel(pt_fungus_code_type, item?.fungusCodeType) }}/{{ item?.fungusCode }}</span>
                        </view>
                        <view v-if="item?.warehouses?.length" class="pd2-4-0 f-s-28">
                            <span class="c-#666">存放库房：</span>
                            <span class="c-#333 f-w-500">{{ getStorageRoomNames(item?.warehouses) || '-' }}</span>
                        </view>
                    </template>
                    <view class="pd2-4-0 f-s-28">
                        <span class="c-#666">入库量：</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-danger">剩余量：</span>
                            <span class="c-danger f-w-500">{{ item?.restAmount || '0' }}{{ item?.unit }}</span>
                        </view>
                    </view>
                     <image v-if="item.id + '-' + item.storageType === checkedId" class="w-40 h-40 checked-icon" src="/static/images/common/btn_checked_icon.png" mode="widthFix" />
                </view>
            </template>
        </view>

        <template #empty>
            <view class="d-flex flex-cln a-c" style="margin-top: -200rpx">
                <ut-empty class="mg-at" color="#ccc" size="28rpx">暂无种源信息，点击下方＋号新增吧</ut-empty>
            </view>
        </template>
        <template #bottom>
            <view class="pd-24">
                <up-button @click="emit('confirm')" type="primary">确认选择</up-button>
            </view>
        </template>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';

import { getStorageRoomNames } from '@/utils/common';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_seed_instore_type, pt_seed_type, pt_fungus_code_type } = toRefs<any>(proxy?.useDict('pt_seed_instore_type', 'pt_seed_type', 'pt_fungus_code_type'));
const props = defineProps({
    checkedId: {
        type: String,
        default: '',
    },
});
const emit = defineEmits(['clickItem', 'confirm']);
const list = ref<any[]>();
const form = ref({ keyword: '', restFlag: '1', instoreType: '' });
const paging = ref();
const changeSeach = () => {
    paging.value.reload();
};
const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get('/plt-api/app/storageSeed/page', params);
    if (res) {
        const { rows } = res;
        paging.value.complete(rows);
    }
};

const onRefresh = () => {
    paging.value.reload();
};
onMounted(() => {
    uni.$on('refreshStorageRoomList', () => {
        onRefresh();
    });
});
</script>
<style lang="scss" scoped>
.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-list {
    border: 1rpx solid #fff;
    &.active {
        background-color: #ebf6ee;
        border: 1rpx solid $u-primary;
    }
    .checked-icon {
        position: absolute;
        right: 0rpx;
        bottom: 0rpx;
    }
}
</style>