<template> <div> <van-form @submit="onSubmitData"> <div class="topSelect"> <van-field label="污水厂" placeholder="请选择污水厂" show-word-limit required @click="AllData.showPicker = true" :rules="[{ required: true, message: '请选择污水厂' }]" v-model="AllData.userId" is-link /> <van-popup v-model:show="AllData.showPicker" round position="bottom"> <van-picker :columns="sewageCodeList" @confirm="onConfirmOne" @cancel="AllData.showPicker = false"> </van-picker> </van-popup> <div class="submitRecord" @click="patrolFilling(false)">提交记录</div> </div> <van-field label-width="150px" v-model="AllData.patrolTargetIdText" label="一月进水BOD(mg/L)" type="number" placeholder="请输入一月进水BOD(mg/L)" /> <van-field label-width="150px" v-model="AllData.patrolTargetIdText" label="二月进水BOD(mg/L)" type="number" placeholder="请输入二月进水BOD(mg/L)" /> <van-field label-width="150px" v-model="AllData.patrolTargetIdText" label="三月进水BOD(mg/L)" type="number" placeholder="请输入三月进水BOD(mg/L)" /> <van-field label-width="150px" v-model="AllData.patrolTargetIdText" label="四月进水BOD(mg/L)" type="number" placeholder="请输入四月进水BOD(mg/L)" /> <van-field label-width="150px" v-model="AllData.patrolTargetIdText" label="五月进水BOD(mg/L)" type="number" placeholder="请输入五月进水BOD(mg/L)" /> <van-field label-width="150px" v-model="AllData.patrolTargetIdText" label="六月进水BOD(mg/L)" type="number" placeholder="请输入六月进水BOD(mg/L)" /> <van-field label-width="150px" v-model="AllData.patrolTargetIdText" label="七月进水BOD(mg/L)" type="number" placeholder="请输入七月进水BOD(mg/L)" /> <van-field label-width="150px" v-model="AllData.patrolTargetIdText" label="八月进水BOD(mg/L)" type="number" placeholder="请输入八月进水BOD(mg/L)" /> <van-field label-width="150px" v-model="AllData.patrolTargetIdText" label="九月进水BOD(mg/L)" type="number" placeholder="请输入九月进水BOD(mg/L)" /> <van-field label-width="150px" v-model="AllData.patrolTargetIdText" label="十月进水BOD(mg/L)" type="number" placeholder="请输入十月进水BOD(mg/L)" /> <van-field label-width="145px" v-model="AllData.patrolTargetIdText" label="十一月进水BOD(mg/L)" type="number" placeholder="请输入十一月进水BOD(mg/L)" /> <van-field label-width="145px" v-model="AllData.patrolTargetIdText" label="十二月进水BOD(mg/L)" type="number" placeholder="请输入十二月进水BOD(mg/L)" /> <div class="BottomView"> <van-button native-type="submit" class="BotBtn" type="primary">提交</van-button> </div> </van-form> </div> </template> <script setup> import { facilitySewagelist } from '@/api/SewageReporting.js'; const AllData = reactive({ showPicker: false, userId: '', formData: { checkItem: '', }, }); // 选着 const onConfirmOne = ({ selectedOptions }) => { AllData.showPicker = false; AllData.userId = selectedOptions[0].text; AllData.formData.checkItem = selectedOptions[0].value; }; //下拉框列表 const sewageCodeList = ref([]); function getUserList() { facilitySewagelist().then((res) => { sewageCodeList.value = res.data.map((v) => { return { value: v.sewageCode, text: v.sewageName, }; }); console.log(sewageCodeList.value, 'sewageCodeList.value'); AllData.userId = sewageCodeList.value[0].text; AllData.formData.checkItem = sewageCodeList.value[0].value; }); } // 提交上报 const onSubmitData = async () => { console.log(AllData.formData, 'AllData.formData'); }; onMounted(() => { getUserList(); }); </script> <style lang="less"> .topSelect { width: 100%; display: flex; // background: red; .submitRecord { font-size: 30px; width: 300px; color: #2470ff; display: flex; align-items: center; /* 这会使容器内的所有子元素垂直居中 */ justify-content: center; /* 这会使容器内的所有子元素水平居中 */ } } .BottomView { width: 100%; height: 120px; display: flex; justify-content: space-around; margin-top: 20px; .BotBtn { width: 45%; height: 65px; border-radius: 20px; } } </style>