workflow-mobile/pages/workflowTask/approveCenter/index.vue

<template>
	<view class="approve-container">
		<view class="approve-search">
			<u-search
			placeholder="查询流程"
			v-model="keyword"
			bg-color="#fff"
			margin="16rpx 24rpx"
			:input-style="{
				fontSize: variables.mainFontSize,
				padding: '0rpx 40rpx',
			}"
			:action-style="{fontSize: variables.mainFontSize}"
			:border-color="'#F2F2F2'"
			:bg-color="'#F2F2F2'"
			:height="74"
			@search="() => searchKeyWord = keyword"
			@custom="() => searchKeyWord = keyword"
			:show-action="false"
			input-align="center"
			/>
		</view>
		<view class="approve-list">
			<todo-list :approve-list-height="approveListHeight" :search-key-word="searchKeyWord" v-if="type === 'todo'"/>
			<done-list :approve-list-height="approveListHeight" :search-key-word="searchKeyWord" v-else-if="type === 'done'"/>
			<cc-list :approve-list-height="approveListHeight" :search-key-word="searchKeyWord" v-else-if="type === 'cc'"/>
			<manager-list :approve-list-height="approveListHeight" :search-key-word="searchKeyWord" v-else-if="type === 'manager'"/>
			<launch-list :approve-list-height="approveListHeight" :search-key-word="searchKeyWord" v-else/>
		</view>
	</view>
</template>

<script>
	import variables from '@/styles/variables.scss'
	import doneList from './doneList'
	import launchList from './launchList'
	import todoList from './todoList'
	import ccList from './ccList'
	import managerList from './managerList'
	
	export default {
		components: {
				todoList,
				launchList,
				doneList,
				ccList,
				managerList,
		},
		data() {
			return {
				keyword: '',
				searchKeyWord: '',
				current: 0,
				variables,
				searchHeight: 0,
				approveContainerHeight: 0
			};
		},
		created() {
			this.computedHeight()
		},
		computed: {
			approveListHeight() {
				return this.approveContainerHeight - this.searchHeight
			}
		},
		props: {
			type: {
				type: String,
				required: true
			}
		},
		methods: {
			handleChange(index) {
				this.current = index
				this.keyword = ''
				this.searchKeyWord = ''
			},
			async computedHeight() {
				await this.$nextTick()
				const query = uni.createSelectorQuery().in(this)
				query.select(".approve-container")
				.boundingClientRect(data => {
					  
					this.approveContainerHeight = data.height
				}).exec()
				
				query.select(".approve-search")
				.boundingClientRect(data => {
					this.searchHeight = data.height
				}).exec()
			}
		}
	}
</script>

<style lang="scss">
	.approve-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		// background-color: #fff;
		// padding: 10rpx;
		
		.approve-search{
			background-color: #fff;
				padding: 0 10rpx;
		}
	}
	
	::v-deep {
		.u-content {
			background-color: #F2F2F2 !important;
		}
	}
</style>