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

<template>
    <z-paging ref="paging" v-model="list" 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>
            <!-- 全选行 -->
            <view class="b-radius bg-#fff mb-20 pd-24 d-flex a-c j-sb">
                <view class="c-#333 f-s-34 f-w-5">全选</view>
                <up-checkbox usedAlone activeColor="#37A954" :checked="isAllSelected" @change="handleSelectAll"></up-checkbox>
            </view>
            <view class="b-radius bg-#fff mb-20 pd-24" v-for="(item, index) in lands" :key="index">
                <up-checkbox-group v-model="checkboxValue">
                    <view class="d-flex w-100% j-sb">
                        <view class="flex1 ov-hd">
                            <view class="mb-20 ov-hd tx-ov d-flex a-c">
                                <view class="c-primary f-s-24 f-w-5 mr-5 bg-#EBF6EE pd4-6-10-6-10 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-#333 f-s-28 f-w-5 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-#333 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 @click.stop class="">
                                <up-checkbox activeColor="#37A954" label="" :name="item?.id"> </up-checkbox>
                            </view>
                        </view>
                    </view>
                </up-checkbox-group>
            </view>
        </view>
    </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 = [];
});
</script>