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

<template>
    <z-paging ref="paging" v-model="list" paging-class="paging-btm-shadow" bgColor="#f7f7f7" safe-area-inset-bottom>
        <template #top>
            <ut-navbar title="选择个体选择" :fixed="false"></ut-navbar>
        </template>
        <view class="startline-title pl-24 ml-24 mb-16">请选择个体选择</view>
        <view class="pd-24">
            <ut-search ref="searchRef" v-model="keyword" @search="changeSeach" margin="0" :border="false" placeholder="搜索标识号名称" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
            <view class="pd-10"></view>
            <up-checkbox-group v-model="checkboxValue">
                <template v-if="filteredLands.length > 0">
                    <view class="d-flex w-100% j-sb b-radius bg-#fff mb-20 pd-24" v-for="(item, index) in filteredLands" :key="index" :name="item">
                        <view class="flex1 ov-hd">
                            <view class="ov-hd tx-ov d-flex a-c">
                                <view class="c-primary f-s-24 f-w-5 bg-#EBF6EE pd4-4-12-4-6 b-radius" style="font-style: italic">{{ Number(index) + 1 < 10 ? '0' + (Number(index) + 1) : Number(index) + 1 }}</view>
                                <view class="w-10"></view>
                                <view class="c-#333 f-w-5 f-s-34 tx-ov ov-hd">{{ variety }}</view>
                            </view>
                            <view class="d-flex a-c pt-10">
                                <text class="c-#666 f-s-24 tx-ov ov-hd">{{ item }}</text>
                            </view>
                        </view>
                        <view class="d-flex j-c a-c">
                            <view class="">
                                <up-checkbox activeColor="#37A954" label="" :name="item" shape="circle"></up-checkbox>
                            </view>
                        </view>
                    </view>
                </template>
                <template v-else>
                    <view class="d-flex j-c a-c pd-40">
                        <ut-empty :show="true" text="暂无搜索结果" />
                    </view>
                </template>
            </up-checkbox-group>
        </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>{{ checkboxValue.length }}</text>
                        <text>个地块</text>
                    </view>
                    <view class="d-flex a-c">
                        <view class="c-#333 f-s-28 mr-10">全选</view>
                        <up-checkbox usedAlone activeColor="#37A954" :checked="isAllSelected" @change="handleSelectAll" shape="circle"></up-checkbox>
                    </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 lang="ts" setup>
import { ref, computed } from 'vue';
import { useClientRequest } from '@/utils/request';
const paging = ref();
const list = ref([]);
//基地信息
const modeValue = ref();
const keyword = ref('');
// 品种信息
const variety = ref();
//地块信息
const lands = ref<any>([]);
// 过滤后的地块信息
const filteredLands = computed(() => {
    if (!keyword.value) return lands.value;
    checkboxValue.value = [];
    return lands.value.filter((item: any) => item && item.toString().toLowerCase().includes(keyword.value.toLowerCase()));
});
const changeSeach = async () => {
    // 搜索时清空选中状态
    checkboxValue.value = [];
};
const checkboxValue = ref<string[]>([]);
const handleSelectAll = () => {
    if (isAllSelected.value) {
        checkboxValue.value = []; // 全选状态下点击 → 清空
    } else {
        checkboxValue.value = filteredLands.value.map((item: any) => item); // 非全选状态下点击 → 全选
    }
};
const isAllSelected = computed(() => {
    return filteredLands.value.length > 0 && checkboxValue.value.length === filteredLands.value.length;
});
onLoad(async (options: any) => {
    const res = await useClientRequest.get(`/plt-api/app/plantationTask/getInfo/${options?.taskId}`);
    lands.value = res?.data?.animalIds;
    variety.value = res?.data?.variety;
    // 初始选中状态为空
    checkboxValue.value = [];
});
const cancel = () => {
    uni.navigateBack({
        delta: 1,
    });
};
// 确认选择
const save = () => {
    if (checkboxValue.value.length === 0) {
        return uni.showToast({
            title: '请选择个体',
            icon: 'none',
        });
    }
    // 我希望这个能返回 data: { medicineName: string; swyqMedicineName: string; checkBox: any[]; data: any[]; aloneChecked: boolean; baseName: string; area?: string; gapFlag: number; swyqRes: number; areaUnit: string; adcodeName: string; address: string })
    uni.$emit('updateIndividual', {
        variety: variety.value,
        aloneChecked: isAllSelected.value,
        checkBox: checkboxValue.value,
    });
    uni.navigateBack({
        delta: 1,
    });
};

onUnload(() => {
    uni.$off('updateIndividual');
});
</script>