forestry-wx/src/plant/port/port-create/models/baseinfo.vue

<template>
    <view class="border-#AFDDBB pd-26 pb-8 bg-#FBFDFB p-rtv">
        <!-- 关闭按钮 -->
        <view class="c-#F81242 f-s-30 ab2-10-20" @click="handleClose"> × </view>
        <view class="c-#333 f-s-34 f-w-5 pt-8 pb-8 pr-16">{{ modeValue?.baseName }}</view>

        <!-- 标签显示：GAP和三无一全 -->
        <view v-if="modeValue?.gapFlag || modeValue?.swyqRes" class="pt-8 pb-8 d-flex" style="position: absolute; left: 0; top: 0">
            <view v-if="modeValue?.gapFlag && Number(modeValue.gapFlag) === 1" class="label mr-10">GAP</view>
            <view v-if="modeValue?.swyqRes && Number(modeValue.swyqRes) === 1" class="label">三无一全</view>
        </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?.area }}{{ modeValue?.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?.adcodeName }}{{ modeValue?.address }}</text>
        </view>
        <view style="margin-left: -26rpx; margin-right: -26rpx; border-bottom: 1rpx solid #d4ecda"></view>
        <view class="pt-16 pb-8">
            <text v-if="+baseType == 1" class="c-#666 f-s-28">地块信息:</text>
            <text v-if="+baseType == 2" class="c-#666 f-s-28">圈舍信息:</text>
            <text v-if="+baseType == 3" class="c-#666 f-s-28">组培架信息:</text>
            <text v-if="!modeValue?.aloneChecked" class="c-#333 f-s-28 f-w-5">{{ modeValue?.data?.length }}个</text>
            <text v-if="modeValue?.aloneChecked" class="c-#333 f-s-28 f-w-5">该基地所有{{ baseType == '1' ? '地块' : baseType == '2' ? '圈舍' : '组培架' }}</text>
        </view>
        <view v-if="!modeValue?.aloneChecked" class="pt-8 pb-8" v-for="(item, index) in modeValue?.data" :key="index">
            <text class="c-#666 f-s-28">{{ item?.landName }}:</text>
            <text class="c-#333 f-s-28 f-w-5">{{ item?.area }}{{ item?.areaUnit }}</text>
        </view>
    </view>
</template>
<script setup lang="ts">
// 定义props接口
interface ModeValue {
    baseName?: string;
    area?: string | number;
    areaUnit?: string;
    address?: string;
    adcodeName?: string;
    gapFlag?: number | string;
    swyqRes?: number | string;
    aloneChecked?: boolean;
    data?: any[];
    // 保留原有字段以保持向后兼容
    checkBox?: any[];
}

// 接收modeValue对象
const props = defineProps<{
    modeValue?: ModeValue;
    baseType: string;
}>();

// 定义emit事件
const emit = defineEmits<{
    (e: 'update:modeValue', value: ModeValue | null): void;
    (e: 'close'): void;
}>();

// 处理关闭
const handleClose = () => {
    // 触发事件清空modeValue
    console.log('?');

    emit('update:modeValue', null);
    emit('close');
};
</script>

<style scoped lang="scss">
.label {
    font-size: 24rpx;
    color: #37a954;
    border-radius: 100rpx;
    background-color: #e3efe6;
    width: max-content;
    padding-left: 14rpx;
    padding-right: 14rpx;
    padding-top: 6rpx;
    padding-bottom: 6rpx;
}
</style>