forestry-wx/src/tools/supervise-material/index.vue

<template>
    <z-paging ref="paging" v-model="list" paging-class="paging-btm-shadow" bgColor="#f7f7f7" @query="query" safe-area-inset-bottom>
        <template #top>
            <ut-navbar title="请选择使用农资信息" :fixed="false"></ut-navbar>
        </template>
        <view class="pd-24 pb-0">
            <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 class="pd-24">
            <view v-for="(item, index) in list" :key="index" class="b-radius pd-24 mb-20" :style="{ backgroundColor: isSelected(item) ? '#FBFDFB' : '#fff', border: isSelected(item) ? '2rpx solid #37a954' : '2rpx solid transparent' }" @click="toggleSelect(item)">
                <view class="d-flex a-c">
                    <view class="d-flex" style="align-items: flex-end">
                        <view class="f-w-5 f-s-34 c-#333">{{ item?.materialName }}</view>
                        <view class="f-s-24 c-#666 ml-10">化肥</view>
                    </view>
                    <view class="flex1"></view>
                    <view v-if="item?.examinReport.length > 0" class="c-primary bg-#EBF6EE radius-34 pd4-4-12-4-12 f-s-24">已检验</view>
                    <view v-else class="c-#F74C30 bg-#F9ECEA radius-34 pd4-4-12-4-12 f-s-24">未检验</view>
                </view>
                <view class="d-flex a-c pt-10 pb-10">
                    <text class="c-#666 f-s-30 w-s-no">入库批号：</text>
                    <text class="c-#333 f-w-5 f-s-30 ov-hd tx-ov w-s-no">{{ item?.batchCode }}</text>
                </view>
                <view class="d-flex a-c pt-10 pb-10">
                    <text class="c-#666 f-s-30 w-s-no">供应商：</text>
                    <text class="c-#333 f-w-5 f-s-30 ov-hd tx-ov w-s-no">{{ item?.supplier }}</text>
                </view>
                <view class="d-flex a-c pt-10 pb-10">
                    <text class="c-#666 f-s-30 w-s-no">存放库房：</text>
                    <text class="c-#333 f-w-5 f-s-30 ov-hd tx-ov w-s-no">{{ item?.warehouses }}</text>
                </view>
                <view class="d-flex a-c pt-10 pb-10">
                    <text class="c-#666 f-s-30 w-s-no">入库量：</text>
                    <text class="c-#333 f-w-5 f-s-30 ov-hd tx-ov w-s-no">{{ item?.capacity }}{{ item?.unit }}</text>
                </view>
                <view class="d-flex a-c pt-10 pb-10">
                    <view class="d-flex ov-hd w-50%">
                        <text class="c-#666 f-s-30 w-s-no">出库量：</text>
                        <text class="c-#333 f-w-5 f-s-30 ov-hd tx-ov w-s-no">{{ item?.inputAmount }}{{ item?.unit }}</text>
                    </view>
                    <view class="d-flex ov-hd w-50%">
                        <text class="c-primary f-s-30 w-s-no">剩余量：</text>
                        <text class="c-primary f-w-5 f-s-30 ov-hd tx-ov w-s-no">{{ item?.restAmount }}{{ item?.unit }}</text>
                    </view>
                </view>
            </view>
        </view>
        <template #bottom>
            <view class="pd-24 bg-#fff">
                <view class="b-radius bg-#fff d-flex a-c j-sb">
                    <view class="d-flex c-primary f-s-26">
                        <text>已选择：</text>
                        <text>{{ selectedMaterials.length }}</text>
                        <text>个物料</text>
                    </view>
                </view>
                <view class="d-flex gap-20">
                    <up-button @click="cancel()">取消</up-button>
                    <up-button type="primary" @click="save()">确认选择</up-button>
                </view>
            </view>
        </template>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
const list = ref<any>([]);
const paging = ref();
const form = ref({
    keyword: '',
});
// 选中的物料数组
const selectedMaterials = ref<any[]>([]);

// 检查物料是否已选中
const isSelected = (item: any) => {
    // 使用 id 作为唯一标识符
    return selectedMaterials.value.some((m) => m.id === item.id);
};

// 切换选择状态
const toggleSelect = (item: any) => {
    const index = selectedMaterials.value.findIndex((m) => m.id === item.id);

    if (index > -1) {
        // 已选中，取消选择
        selectedMaterials.value.splice(index, 1);
    } else {
        // 未选中，添加选择
        selectedMaterials.value.push(item);
    }
};

// 搜索变化
const changeSeach = () => {
    paging.value.reload();
};

const query = async (pageNo: number, pageSize: number) => {
    const params = {
        pageNo,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get('/plt-api/app/material/list', params);
    const { rows } = res;
    paging.value.complete(rows);
};

// 取消
const cancel = () => {
    uni.navigateBack({
        delta: 1,
    });
};

// 确认选择
const save = () => {
    if (selectedMaterials.value.length === 0) {
        return uni.showToast({
            title: '请选择农资',
            icon: 'none',
        });
    }
    uni.$emit('updateMaterial', {
        checkBox: selectedMaterials.value.map((m) => m.id), // 发送batchCode数组
        data: selectedMaterials.value, // 发送完整的物料对象
    });
    uni.navigateBack({
        delta: 1,
    });
};
onUnload(() => {
    uni.$off('updateMaterial');
});
</script>