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

<template>
	<view :style="{marginTop:barHeight+'px'}">
		<Top text="合同查询" />
		<scroll-view scroll-y="" style="background-color: #F2F3F5;"
			:style="{height:`calc(${pageHeight+'px'} - 30rpx - 100rpx)`,paddingBottom:'30rpx'}"
			@scrolltolower="onScrollToLower">
			<view id="contain" ref="containRef">
				<Card class="searchForm" :hideTitle="true">
					<form @submit="getList" @reset="searchFormReset">
						<FormItem :title="'合同编号'" v-if="!moreFormItem">
							<SearchInput v-model="searchForm.contractCode" @search="getList" />
						</FormItem>
						<FormItem :title="'合同编号'" width="180rpx" v-if="moreFormItem">
							<input class="uni-input" v-model="searchForm.contractCode" />
						</FormItem>
						<transition name="moreFormItem">
							<view v-show="moreFormItem">
								<FormItem :title="'客户合同编号'" width="201rpx">
									<input class="uni-input" v-model="searchForm.customerContractCode" />
								</FormItem>
								<FormItem :title="'合同名称'" width="180rpx">
									<input class="uni-input" v-model="searchForm.contractName" />
								</FormItem>
								<FormItem :title="'业务方向'" width="180rpx">
									<Pickera key="label" :data="business_direction" :value="searchForm.businessDirection"
										@change="e=>searchForm.businessDirection =e" />
								</FormItem>
								<FormItem :title="'合同状态'" width="180rpx">
									<Pickera key="label" :data="contract_status" :value="searchForm.contractStatus"
										@change="e=>searchForm.contractStatus =e" />
								</FormItem>
							</view>
						</transition>
						<view style="text-align: center;">
							<button style="height:60rpx;width: 150rpx;line-height: 60rpx;display: inline-block;" v-if="moreFormItem"
								form-type="submit" type="primary">搜索</button>
							<button style="height:60rpx;width: 150rpx;line-height: 60rpx;display: inline-block;margin-left: 20rpx;"
								v-if="moreFormItem" form-type="reset" plain="true" type="primary">重置</button>
						</view>
						<view class="toggle" @tap="toggleForm">
							<view class="icon" :style="{transform: `rotate(${moreFormItem ? 180 : 0}deg)`}"></view>
						</view>
					</form>
				</Card>
				<Picker key="label" :data="business_direction" :value="searchForm.businessDirection"
					@change="e=>searchForm.businessDirection =e" />
				<Card class="table" :hideTitle="true">
					<uni-collapse>
						<uni-collapse-item v-for="i in list">
							<template v-slot:title>
								<view class="list-item-title">
									<view class="leftText">
										{{i.contractName}}
									</view>
									<view class="rightText">
										<DictTag :options="contract_category" :value="i.contractCategory" />
									</view>
								</view>
							</template>
							<view style="padding:20rpx 0 " @tap="itemOperation(i)">
								<view class="is-open-text">有无合同：{{i.contractFlag}}
								</view>
								<view class="is-open-text">合同编号：{{i.contractCode}}
								</view>
								<view class="is-open-text">业务方向：
									<DictTag :options="business_direction" :value="i.businessDirection" type="text" />
								</view>
								<view class="is-open-text">部门：{{i.deptName}}</view>
								<view class="is-open-text">合同签订日期：{{i.contractDate}}
								</view>
								<view class="is-open-text">合同总价：{{i.totalPrice}}
								</view>
								<view class="is-open-text">
									甲方公司：{{i.oneCustomerName}}
								</view>
								<view class="is-open-text">
									乙方公司：{{i.twoCustomerName}}
								</view>
								<view class="is-open-text">合同状态：
									<DictTag :options="contract_status" :value="i.contractStatus" type="text" />
								</view>
								<view class="is-open-text">流程状态：{{i.flowStatus}}
								</view>
								<view class="is-open-text">
									内部合同号：{{i.internalContractCode}}</view>
								<view class="is-open-text">
									外部合同号：{{i.externalContractCode}}</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</Card>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		toRefs,
		onMounted,
		nextTick,
	} from 'vue';
	import {
		useDict
	} from '@/utils/dict.js'
	import {
		listContractInfo
	} from '@/api/contractInfo';
	import {
		getHeight
	} from '@/utils/index.js'

	const {
		contract_category,
		business_direction,
		active_flag,
		contract_flag,
		contract_type,
		contract_status
	} = toRefs(
		useDict(['contract_category', 'business_direction', 'active_flag', 'contract_flag', 'contract_type',
			'contract_status'
		])
	);
	const containRef = ref(null)
	const moreFormItem = ref(false)
	const toggleForm = () => {
		moreFormItem.value = !moreFormItem.value
	}
	const searchForm = ref({
		pageNum: 1,
		pageSize: 10,
	})
	const list = ref([])
	const total = ref(0)

	const checkFull = () => {
		let res = false
		return new Promise(resolve => {
			uni.createSelectorQuery()
				.select('#contain') // 页面级查询，不用 .in(proxy)
				.boundingClientRect(rect => {
					resolve(rect?.height < pageHeight.value)
				})
				.exec()
		})
	}
	const search = async () => {
		const res = await listContractInfo(searchForm.value);
		list.value = list.value.concat(res.rows);
		total.value = res.total;
		await nextTick()
		if (await checkFull()) {
			if (searchForm.value.pageNum * searchForm.value.pageSize < total.value) {
				searchForm.value.pageNum += 1
				search()
			}
		}
	}
	const getList = () => {
		searchForm.value.pageNum = 1
		list.value = []
		search()
	}
	const searchFormReset = () => {
		searchForm.value = {
			pageNum: 1,
			pageSize: 10,
		}
	}
	const onScrollToLower = () => {
		if (searchForm.value.pageNum * searchForm.value.pageSize < total.value) {
			searchForm.value.pageNum += 1
			search()
		}
	}
	const itemOperation = (e) => {
		if (e.contractStatus !== '1') {
			uni.navigateTo({
				url: '/pages/contract/info?type=1&id=' + e.contractId
			})
		}
		if (e.contractStatus === '1') {
			uni.navigateTo({
				url: '/pages/contract/info?type=2&id=' + e.contractId
			})
		}
	}
	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
			}
			search()
		}, 100)
	})
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";

	.searchForm {
		margin-top: 30rpx;
		padding-top: 0 !important;
		display: inline-block;

		:deep(.content) {
			margin-top: 0 !important;
		}

		.toggle {
			width: 100%;
			height: 30rpx;
			text-align: center;
			padding: 10rpx 0;

			.icon {
				display: inline-block;
				background-image: url(#{$img-url}/icon/toggle.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 30rpx;
				height: 30rpx;
				transition: transform 0.3s;
			}
		}
	}

	.table {
		margin-top: 30rpx;
		padding-top: 0 !important;
		display: inline-block;

		:deep(.content) {
			margin-top: 0 !important;
		}
	}

	.list-item-title {
		padding: 30rpx 0;
		display: flex;

		.leftText {
			display: inline-block;
		}

		.rightText {
			margin-left: auto;
		}

	}

	.is-open-text {
		padding-right: 20rpx;
		display: inline-block;
		min-width: calc(45% - 20rpx);
		color: #999
	}
</style>