hw-bm-app/pages/workHourReporting/index.vue

<template>
	<view :style="{marginTop:barHeight+'px'}">
		<Top text="出差申请" />
		<scroll-view scroll-y
			:style="{height:`calc(${pageHeight+'px'} - 30rpx - 100rpx)`,paddingBottom:'30rpx',backgroundColor:'#eee9'}">
			<view class="list">
				<view class="item">
					<view class="formItem">
						<view class="title">申请单号</view>
						<view class="inputBg">
							<Input v-model="applicatioData.applyCode" placeholder="自动生成" />
						</view>
					</view>
					<view class="formItem">
						<view class="title">申请人</view>
						<view class="inputBg">
							<Input v-model="applicatioData.applicantName" placeholder="自动填充" />
						</view>
					</view>
					<view class="formItem">
						<view class="title">申请人部门</view>
						<view class="inputBg">
							<Input v-model="applicatioData.deptName" placeholder="自动填充" />
						</view>
					</view>
				</view>

				<view class="item" v-for="(i,k) in list">
					<view class="itemTitle">行程明细 {{k+1}}</view>
					<view class="formItem">
						<view class="title">出差类型</view>
						<view class="inputBg">
							<Picker key="label" :data="trip_type" :value="i.tripType" @change="e=>i.tripType =e" />
						</view>
					</view>
					<view class="formItem">
						<view class="title">项目名称</view>
						<view class="inputBg" @tap="getProject(k)">
							<Input style="pointer-events:none" disabled v-model="i.projectName" placeholder="点击选择" />
							<Input v-show="false" v-model="i.projectId" placeholder="projectId" />
						</view>
					</view>
					<view class="formItem">
						<view class="title">项目号</view>
						<view class="inputBg" @tap="getProject(k)">
							<Input style="pointer-events:none" disabled v-model="i.projectCode" placeholder="点击选择" />
						</view>
					</view>
					<view class="formItem">
						<view class="title">出差事由</view>
						<view class="inputBg">
							<textarea class="textArea" v-model="i.tripReason" placeholder="出差事由" />
						</view>
					</view>
					
					<view class="formItem">
						<view class="title">开始时间</view>
						<view class="inputBg">
							<uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section> 
						</view>
					</view>
				</view>

				<Popup ref="popupRef" v-model="show" position="bottom" :duration="300">
					<view class="search">
						<FormItem :title="'项目名称'">
							<SearchInput @search="getList" v-model="form.projectName" />
						</FormItem>
					</view>
					<scroll-view scroll-y style="height: 600rpx;">
						<view @tap="pitchOnProject(i)" v-for="i in projectList">
							<Card style="pointer-events:none" hideTitle class="projectList">
								<DictTag style="position: absolute;top: 30rpx;right: 30rpx;" :options="project_category"
									:value="i.projectCategory" />
								<view>
									{{i.projectName}}
								</view>
								<view style="font-size: 24rpx;color: #999;margin-right: 24rpx;display: inline-block;">
									{{i.projectCode}}
								</view>
								<view style="font-size: 24rpx;color: #999;display: inline-block;">
									项目经理:{{i.managerName}}
								</view>
							</Card>
						</view>
					</scroll-view>
				</Popup>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		toRefs,
		ref,
		onMounted,
		computed
	} from 'vue'
	import {
		useDict
	} from '@/utils/dict.js'
	const {
		trip_type,
		business_direction,
		project_category,
	} = toRefs(
		useDict(['trip_type', 'business_direction', 'project_category'])
	);
	import {
		listProjectInfo
	} from '@/api/workHourReporting.js' 
	const popupRef = ref()
	const applicatioData = ref({})
	const form = ref({})
	const projectIndex = ref(null)
	const list = ref([{}])
	const projectList = ref([])
	const getProject = (index) => {
		projectIndex.value = index
		popupRef.value.open()
	}
	const getProjectList = async () => {
		const res = await listProjectInfo();
		projectList.value = res.rows;
	}
	const getList = async () => {
		const res = await listProjectInfo(form.value);
		projectList.value = res.rows;
	}
	const pitchOnProject = (e) => {
		list.value[projectIndex.value].projectName = e.projectName
		list.value[projectIndex.value].projectId = e.projectId
		list.value[projectIndex.value].projectCode = e.projectCode
		popupRef.value.close()
	}
	const pageHeight = ref(0)
	const barHeight = ref(0)
	const sys = uni.getSystemInfoSync()
	onMounted(() => {
		setTimeout(() => {
			if ((process.env.UNI_PLATFORM === 'app-plus' || process.env.UNI_PLATFORM === 'app')) {
				const statusBarHeight = plus.navigator.getStatusbarHeight()
				barHeight.value = statusBarHeight
				pageHeight.value = sys.windowHeight - statusBarHeight
			} else {
				pageHeight.value = sys.windowHeight
			}
		}, 100)
	})
</script>

<style lang="scss" scoped>
	.list {
		margin-top: 20rpx;
	}

	.item {
		width: 670rpx;
		margin-left: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.itemTitle {
			font-size: 24rpx;
			margin-bottom: 24rpx;
		}

		.formItem {
			margin-bottom: 24rpx;
		}

		.title {
			font-size: 24rpx;
			margin-bottom: 12rpx;
		}

		.inputBg {
			border-radius: 10rpx;
			font-size: 24rpx;
			padding-left: 10rpx;
			border: 1rpx solid #eee;
			color: #666;
		}
	}

	.projectList {
		background-color: #eee;
		margin-bottom: 20rpx;
	}

	.textArea {
		font-size: 24rpx;
		color: #333;

	}
</style>