Flex 4.5 Form组件

博客内容提及了Flex,但具体信息较少,仅给出数字123 。Flex是前端开发中用于布局的重要技术。

123

<template> <view class="container"> <view class="header-section"> <cu-button v-if = "process =='下料'" class="btn-add" @click="addMore">添加</cu-button> </view> <view class="data-list"> <view v-for="(item, index) in dataList" :key="index" class="data-item"> <!-- 标签行 --> <view class="info-row"> <text>{{ item.userName }}({{ item.userCode }})</text> <text>{{ item.teamName }}</text> </view> <!-- 管号和版本号 --> <view class="info-row"> <text>参考工时: {{ item.referenceWorkHours }}</text> <text>累计工时: {{ item.cumulativeWorkHours }}</text> </view> <view class="form-item"> <text class="label">项目:</text> <input v-model="item.projectNo" placeholder="请选择项目" class="input" @click="selectProject"/> </view> <view class="form-item"> <text class="label">实动工时:</text> <input v-model="item.workHours" placeholder="请输入实动工时" class="input"/> </view> </view> <view class="bottom-btn-group"> <cu-button style="margin-left: 145px;" @click="confirm">确认</cu-button> </view> </view> </view> <view class="uni-container"> <cu-search v-if="isProjectVisible" dataSourceType="project" @select="handleProjectSelect" @cancel="handleProjectCancel" /> </view> </template> <script setup> import {onMounted, ref, onUnmounted} from 'vue' import {useRoute} from 'vue-router' import {user} from "@/utils"; const route = useRoute() const dataList = ref([]) const orderNo = ref('') const process = ref('') const isProjectVisible = ref(false) const currentUser = ref(null) onMounted(() => { currentUser.value = user() console.log('当前用户:', currentUser.value) uni.$on('preAddPersons', (data) => { const newItems = data.map(p => ({ ...p, referenceWorkHours: p.referenceWorkHours || '0', cumulativeWorkHours: p.cumulativeWorkHours || '0', workHours: p.workHours || '' })) dataList.value.push(...newItems) uni.removeStorageSync('preAddPersons') }) orderNo.value = route.query.orderNo process.value = route.query.process const initialPersonnels = [{ userName: currentUser.value.nickname, userCode: currentUser.value.number, teamName: currentUser.value.organization.name }] dataList.value = initialPersonnels }) // 清理事件监听 onUnmounted(() => { uni.$off('preAddPersons') }) // 删除条目 // const deleteRow = (index) => { // dataList.value.splice(index, 1) // } const confirm = () => { let hasWorkhour = false dataList.value.forEach((item) => { if (!item.workHours) { hasWorkhour = true } }) if (hasWorkhour) { uni.showToast({ title: '请输入作业工时', icon: 'none' }) return } uni.$emit('preSelectedPersons', dataList.value) uni.navigateBack() } const selectProject = () => { isProjectVisible.value = true } // const addMore = () => { // // 打开选择弹窗 // uni.navigateTo({ // url: '/pages/piping/pre/selectPerson' // }) // } </script> <style scoped lang="scss"> .btn-group { display: flex; } .data-list { background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 8rpx; padding: 10rpx; margin-bottom: 40rpx; } .data-item { margin-bottom: 20rpx; background-color: white; border-radius: 6rpx; padding: 20rpx; position: relative; /* 确保相对定位,使绝对定位的叉号正确显示 */ } .info-row { display: flex; gap: 20rpx; font-size: 24rpx; color: #333; margin-bottom: 10rpx; margin-top: 10rpx; } .form-item { display: flex; align-items: center; margin-bottom: 20rpx; } .label { width: 4.5rem; color: #333; } .input { flex: 1; height: 60rpx; border: 1px solid #ccc; border-radius: 6rpx; padding: 0 20rpx; font-size: 28rpx; } .bottom-btn-group { bottom: 40rpx; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 20rpx; box-sizing: border-box; } .header-section { display: flex; justify-content: flex-end; padding: 20rpx; width: 100%; box-sizing: border-box; } .btn-add { width: auto; height: 60rpx; font-size: 28rpx; display: flex; align-items: center; justify-content: center; } .btn-confirm { background-color: #007aff; color: white; border: none; border-radius: 6rpx; padding: 16rpx 30rpx; font-size: 28rpx; flex: 1; margin-right: 20rpx; } .btn-close { position: absolute; top: 0; right: 0; width: 36rpx; height: 36rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #999; border: none; margin: 10rpx; } .icon { font-size: 28rpx; color: #999; } </style> 让uni-container弹出来的时候可以占满整个屏幕,目前他在container的下方
10-23
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值