forestry-wx/src/plant/base/mark-swyq-base/index.vue

<template>
    <view class="ksqulc">
        <z-paging ref="paging" bgColor="#F7F7F7" safe-area-inset-bottom paging-class="paging-btm-shadow" refresher-only @onRefresh="onRefresh" scroll-with-animation>
            <template #top>
                <ut-navbar title="标记为三无一全基地" :fixed="false" border></ut-navbar>
            </template>
            <view class="p-rtv">
                <view ref="baseRef" class="pd-24" id="base12345">
                    <view class="startline-title">证明材料</view>
                </view>
                <view class="pd-24 bg-#fff mb-10">
                    <up-form class="p-rtv" labelPosition="top" :model="formSwyq" :rules="rulesSwyq" labelWidth="auto" ref="upFormRef">
                        <!-- 校验定位：基地类型 -->
                        <!-- 基地信息部分 -->
                        <view>
                            <!-- 选择获评品种 -->
                            <view class="h-1" id="swyqMedicineCodepppp"></view>
                            <up-form-item @click="selectMedicine" borderBottom label="获评品种" required prop="swyqMedicineCode">
                                <view v-if="formSwyq.swyqMedicineCode" class="f-s-30 c-333 f-w-5 flex1">{{ formSwyq.swyqMedicineName }}</view>
                                <view v-else class="f-s-30 c-ccc f-w-4 flex1">请选择获评品种</view>
                                <template #right>
                                    <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                                </template>
                            </up-form-item>
                            <!-- 校验定位：建设时间 -->
                            <view class="h-1" id="swyqRatedDatepppp"></view>
                            <ut-datetime-picker v-model="formSwyq.swyqRatedDate" mode="date" dateFields="day">
                                <up-form-item borderBottom label="获评三无一全基地时间" required prop="swyqRatedDate">
                                    <up-input v-model="formSwyq.swyqRatedDate" placeholder="请选择获评三无一全基地时间" border="none" clearable></up-input>
                                    <template #right>
                                        <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
                                    </template>
                                </up-form-item>
                            </ut-datetime-picker>
                            <!-- 官方公示证明材料 -->
                            <view class="h-1" id="swyqCertFilepppp"></view>
                            <up-form-item borderBottom required prop="swyqCertFile">
                                <view class="flex1">
                                    <view style="margin-bottom: 10rpx">
                                        <span class="c-666 f-s-30">官方公示证明材料</span>
                                        <span class="f-s-26 c-999">（可上传9张）</span>
                                    </view>
                                    <ut-upload v-model="formSwyq.swyqCertFile" :max-count="9"></ut-upload>
                                </view>
                            </up-form-item>
                            <!-- 官方公示网址 -->
                            <view class="h-1" id="swyqUrlpppp"></view>
                            <up-form-item borderBottom label="官方公示网址" prop="swyqUrl" required>
                                <up-input v-model="formSwyq.swyqUrl" placeholder="请输入官方公示网址" border="none" clearable></up-input>
                            </up-form-item>
                        </view>
                    </up-form>
                </view>
                <view ref="baseRef" class="pd-24" id="base12345">
                    <view class="startline-title">所标记的基本信息如下，请核对</view>
                </view>
                <view class="pd-24 bg-#fff mb-10">
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地名称：</span>
                        <span class="c-#333">{{ form?.baseInfo?.baseName || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地类型：</span>
                        <span class="c-#333">{{ selectDictLabel(pt_base_type, form?.baseInfo?.baseType) || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <view class="f-s-30 c-#666 mb-10">基地范围：</view>
                        <view class="bg-#f7f7f7 d-flex ov-hd p-rtv">
                            <image @click="previewImage([form?.baseInfo?.gapInfo?.basePic])" class="w-full" v-if="form?.baseInfo?.gapInfo?.basePic" preview :src="form?.baseInfo?.gapInfo?.basePic" mode="'widthFix'"></image>
                            <view v-else class="w-full h-120 d-flex a-c j-c c-999">暂无基地范围</view>
                        </view>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地面积：</span>
                        <span class="c-#333">{{ form?.baseInfo?.gapInfo?.area || '-' }}{{ form?.baseInfo?.gapInfo?.areaUnit || mapUnitByBaseType[form?.baseInfo?.baseType || '1'] }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地所在地区：</span>
                        <span class="c-#333">{{ form?.baseInfo?.gapInfo?.adcodeName || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">详细地址：</span>
                        <span class="c-#333">{{ form?.baseInfo?.gapInfo?.address || '-' }}</span>
                    </view>
                    <view class="f-s-30 pd2-16-0 info-border-bottom">
                        <span class="c-#666">基地经纬度：</span>
                        <span class="c-#333">E{{ form?.baseInfo?.gapInfo?.lng || '-' }}, N{{ form?.baseInfo?.gapInfo?.lat || '-' }}</span>
                    </view>
                </view>
            </view>
            <template #bottom>
                <view class="pd-20 d-flex">
                    <up-button type="primary" @click="submitForm">确认并提交</up-button>
                </view>
            </template>
        </z-paging>
    </view>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import { getUrlParams, recursiveDecodeURIComponent } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { yes_no, pt_org_type, pt_base_type, pt_water_type, pt_soil_type, pt_soil_texture, pt_light_type, pt_capacity_unit } = toRefs<any>(proxy?.useDict('yes_no', 'pt_org_type', 'pt_base_type', 'pt_water_type', 'pt_soil_type', 'pt_soil_texture', 'pt_light_type', 'pt_capacity_unit'));
const tabs = reactive([
    { label: '基本信息', value: 'base' },
    { label: '地块信息', value: 'plot' },
    { label: '选址依据及环境信息', value: 'environment' },
]);
const activeTab = ref('base');
const paging = ref<any>(null);
const mapUnitByBaseType: any = {
    '1': '亩',
    '2': '平方米',
    '3': '平方米',
};
const form = ref<any>({});
const formSwyq = ref<any>({
    swyqVarietyId: undefined,
    swyqMedicineName: '',
    swyqRatedDate: '',
    swyqCertFile: '',
    swyqUrl: '',
});
const rulesSwyq = reactive<any>({
    swyqVarietyId: [{ type: 'number', required: true, message: '请选择获评品种', trigger: 'change' }],
    swyqRatedDate: [{ required: true, message: '请选择获评三无一全基地时间', trigger: 'change' }],
    swyqCertFile: [{ required: true, message: '请上传官方公示证明材料', trigger: 'change' }],
    swyqUrl: [{ required: true, message: '请输入官方公示网址', trigger: 'change' }],
});
// 改成去选择获评品种页面
const selectMedicine = () => {
    uni.$on('medicineSelected', (medicine: any) => {
        console.log(medicine);
        
        formSwyq.value.swyqMedicineCode = medicine.medicineCode;
        formSwyq.value.swyqMedicineName = medicine.medicineName;
        uni.$off('medicineSelected');
    });
    uni.$u.route({
        type: 'navigateTo',
        url: '/tools/select-medicine/index',
        params: {
            singleSelect: true,
        },
    });
};
const did = ref('');
// 根据id获取基地详情
const getDetailById = async (id: string) => {
    const res = await useClientRequest.get(`/plt-api/app/base/getInfoAllById/${id}`);
    if (res && res.code === 200) {
        form.value = res.data || {};
        formSwyq.value.swyqMedicineCode = res.data?.baseInfo?.swyqMedicineCode || undefined;
        formSwyq.value.swyqMedicineName = res.data?.baseInfo?.swyqMedicineName || '';
        formSwyq.value.swyqRatedDate = res.data?.baseInfo?.swyqRatedDate || '';
        formSwyq.value.swyqCertFile = res.data?.baseInfo?.swyqCertFile || '';
        formSwyq.value.swyqUrl = res.data?.baseInfo?.swyqUrl || '';
    }
};
const onRefresh = () => {
    getDetailById(did.value);
    paging.value?.complete();
};
const upFormRef = ref<any>(null);
const submitForm = async () => {
    uni.$u.debounce(
        async () => {
            try {
                await upFormRef.value?.validate();
            } catch (error: any) {
                // 滚动到第一个错误字段
                const firstErrorField = error && error[0].prop + 'pppp';
                paging.value?.scrollIntoViewById(firstErrorField, 30, true);
                return;
            }
            // 提交表单
            uni.showLoading({
                title: '提交中...',
            });
            try {
                const res = did.value ?  await useClientRequest.post('/plt-api/app/base/updateSwyqBase', {
                    ...formSwyq.value,
                    id: did.value,
                }) : await useClientRequest.post('/plt-api/app/base/addSwyqBase', {
                    ...formSwyq.value,
                });
                if (!res || res.code !== 200) return;
                uni.hideLoading();
                uni.showToast({
                    title: '提交成功',
                    icon: 'success',
                });

                uni.$emit('refreshBase');
                uni.$emit('refreshBaseList');
                // 返回上一页
                uni.$u.route({
                    type: 'redirect',
                    url: '/plant/base/mark-swyq-base-detail/index',
                    params: {
                        id: did.value,
                    },
                });
            } catch (error) {
                
            }
        },
        500,
        true
    );
};
// 判断节点是否在可视区域内如果在则切换tab createIntersectionObserver

onLoad((options: any) => {
    did.value = options?.id || getUrlParams(recursiveDecodeURIComponent(options?.q))?.id || '';
    getDetailById(did.value);
});
</script>
<style lang="scss" scoped>
.z-paging-wrap {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
}

.btn-aree-center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.plot-item {
    border: 1rpx solid rgba($u-primary, 0.4);
    border-radius: 10rpx;
}
.gap-info-card {
    border: 1rpx solid rgba($u-primary, 0.4);
}
.ksqulc {
    position: relative;
    height: 100vh;
}
</style>