forestry-wx/src/tools/supervise-plot/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-26 bg-#fff mb-20">
            <view class="border-#AFDDBB pd-26 pb-10 pt-10 bg-#FBFDFB p-rtv">
                <!-- 标签显示：GAP和三无一全 -->
                <view v-if="+modeValue?.gapFlag || +modeValue?.swyqRes" class="pt-8 pb-8 d-flex pr-20 pl-20" style="width: max-content; margin-top: -10rpx; margin-left: -26rpx; background: linear-gradient(90deg, #5eba75, #c6e391); border-bottom-right-radius: 88rpx">
                    <view v-if="+modeValue?.gapFlag && !+modeValue?.swyqRes" class="c-#fff f-s-24 f-w-6">获评{{ modeValue?.medicineName }}GAP基地</view>
                    <view v-if="+modeValue?.swyqRes && !+modeValue?.gapFlag" class="c-#fff f-s-24 f-w-6">获评{{ modeValue?.swyqMedicineName }}三无一全基地</view>
                    <view v-if="+modeValue?.gapFlag && +modeValue?.swyqRes" class="c-#fff f-s-24 f-w-6">获评{{ modeValue?.medicineName }}GAP基地和{{ modeValue?.swyqMedicineName }}三无一全基地</view>
                </view>
                <view class="c-#333 f-s-34 f-w-5 pt-8 pb-8 pr-16">{{ modeValue?.baseName }}</view>
                <view class="pt-8 pb-8">
                    <text class="c-#666 f-s-28">基地面积:</text>
                    <text class="c-#333 f-s-28 f-w-5">{{ modeValue?.gapInfo?.area }}{{ modeValue?.gapInfo?.areaUnit }}</text>
                </view>
                <view class="pt-8 pb-8">
                    <text class="c-#666 f-s-28">基地地址:</text>
                    <text class="c-#333 f-s-28 f-w-5">{{ modeValue?.gapInfo?.adcodeName }}{{ modeValue?.gapInfo?.address }}</text>
                </view>
            </view>
        </view>
        <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-20"></view>
            <up-checkbox-group v-model="checkboxValue">
                <view class="d-flex w-100% j-sb b-radius bg-#fff mb-20 pd-24" v-for="(item, index) in lands" :key="index" :name="item?.id">
                    <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 mr-10 bg-#EBF6EE pd4-4-6-4-6 b-radius" style="font-style: italic">{{ Number(index) + 1 < 10 ? '0' + (Number(index) + 1) : Number(index) + 1 }}</view>
                            <view class="c-#333 f-w-5 f-s-34 tx-ov ov-hd">{{ item?.landName }}</view>
                        </view>
                        <view class="d-flex a-c">
                            <view class="w-50%">
                                <text class="c-#666 f-s-28 mr-5">{{ item?.area }}</text>
                                <text class="c-#666 f-s-24 tx-ov ov-hd">{{ item?.areaUnit }}</text>
                            </view>
                            <view class="w-50%">
                                <text class="c-#666 f-s-28 f-w-5 mr-5">负责人：</text>
                                <text class="c-#666 f-s-24 tx-ov ov-hd">{{ item?.contactName }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="d-flex j-c a-c">
                        <view class="">
                            <up-checkbox activeColor="#37A954" label="" :name="item?.id" shape="circle"></up-checkbox>
                        </view>
                    </view>
                </view>
            </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"></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 lands = ref<any>([]);
const changeSeach = async () => {
    const res = await useClientRequest.get('/plt-api/app/baseLandInfo/pageList', { baseId: modeValue.value?.id, keyword: keyword.value });
    lands.value = res?.rows;
    // 搜索时清空选中状态
    checkboxValue.value = [];
};
const checkboxValue = ref<string[]>([]);
const handleSelectAll = () => {
    if (isAllSelected.value) {
        checkboxValue.value = []; // 全选状态下点击 → 清空
    } else {
        checkboxValue.value = lands.value.map((item: any) => item.id); // 非全选状态下点击 → 全选
    }
};
const isAllSelected = computed(() => {
    console.log(checkboxValue.value.length === lands.value.length);
    return lands.value.length > 0 && checkboxValue.value.length === lands.value.length;
});
onLoad(async (options: any) => {
    const res = await useClientRequest.get(`/plt-api/app/base/getInfoAllById/${options?.baseId}`);
    modeValue.value = res?.data?.baseInfo;
    lands.value = res?.data?.landInfoList;
    // 初始选中状态为空
    checkboxValue.value = [];
});
const cancel = () => {
    uni.navigateBack({
        delta: 1,
    });
};
// 确认选择
const save = () => {
    if (checkboxValue.value.length === 0) {
        return uni.showToast({
            title: '请选择地块',
            icon: 'none',
        });
    }
    const data = checkboxValue.value.map((id) => lands.value.find((item) => item.id === id));
    // 我希望这个能返回 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('updatelands', {
        baseName: modeValue.value?.baseName,
        area: modeValue.value?.gapInfo?.area,
        gapFlag: modeValue.value?.gapFlag,
        swyqRes: modeValue.value?.swyqRes,
        areaUnit: modeValue.value?.gapInfo?.areaUnit,
        adcodeName: modeValue.value?.gapInfo?.adcodeName,
        address: modeValue.value?.gapInfo?.address,
        aloneChecked: isAllSelected.value,
        swyqMedicineName: modeValue.value?.swyqMedicineName,
        medicineName: modeValue.value?.medicineName,
        checkBox: checkboxValue.value,
        data: data,
    });
    uni.navigateBack({
        delta: 1,
    });
};

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