workflow-mobile/pages/workflowTask/startWorkflow/startWorkflow.vue

<template>
	<view class="start-workflow">
		<view class="start-workflow-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"
			/>
			
			<u-tabs
			font-size="30"
			:active-color="variables.mainColor"
			inactive-color="#606266"
			:current="current"
			:list="tabList"
			@change="handleChange"/>
			<!-- 移动端只分两级， -->
			<u-tabs
			font-size="30"
			:active-color="variables.mainColor"
			inactive-color="#606266"
			:current="childCurrent"
			:list="tabChildrenList"
			@change="handleChildChange"/>
		</view>
		<view class="process-definition-list" >
			<process-definition-list :search-key-word="searchKeyWord" :category="category" :process-definition-height='processDefinitionHeight'/>
		</view>
	</view>
</template>

<script>
	import processDefinitionList from './processDefinitionList.vue'
	import variables from '@/styles/variables.scss'
	export default {
		components: {
			processDefinitionList
		},
		computed: {
			processDefinitionHeight() {
				return this.startWorkflowHeight - this.searchHeight
			}
		},
		data() {
			return {
				category: '',
				parentCategoryInfo: {},
				current:0,
				childrenCurrent: '',
				keyword: '',
				categoryList: [],
				tabList: [],
				childCurrent: 0,
				tabChildrenList: [],
				childCartegoryList: [],
				startWorkflowHeight: 0,
				searchHeight: 0,
				variables,
				searchKeyWord: ''
			};
		},
		created() {
			this.loadCategory()
		},
		methods: {
			async loadCategory() {
				try{
					uni.showLoading({
						title: '加载中'
					})
					const res = await this.$dibootApi.get('/mobile/workflow/processDefinition/getAuthorizedCategoryTree')
					if(res.code === 0 && res.data ) {
						this.categoryList = res.data
						this.tabList = [{
							name: '全部'
						}, ...this.categoryList.map(item => {
							return {
								name: item.name
							}
						})]
						this.handleChange(0)
					}
				} catch(e){
					//TODO handle the exception
				} finally {
					uni.hideLoading()
				}
				
			},
			/**
			 * 切换一级分类
			 * @param {Object} index
			 */
			handleChange(index) {
				this.keyword = ''
				this.searchKeyWord = ''
				this.current = index
				this.tabChildrenList = []
				this.childCartegoryList = []
				this.childrenCurrent = 0
				this.resetHeight()
				if(this.tabList[index].name === '全部') {
					this.parentCategoryInfo = {}
					this.category = ''
					return
				}
				this.parentCategoryInfo = this.categoryList[index - 1]
				this.category = this.parentCategoryInfo.id
				this.childCartegoryList = this.parentCategoryInfo.children || []
				if(this.childCartegoryList && this.childCartegoryList.length > 0) {
					this.tabChildrenList = [{
						name: '全部' 
					}, ...this.childCartegoryList.map(item => {
						return {
							name: item.name
						}
					})]
				}
			},
			/**
			 * 切换二级分类
			 * @param {Object} index
			 */
			handleChildChange(index) {
				this.keyword = ''
				this.searchKeyWord = ''
				this.childCurrent = index
				if(this.tabChildrenList[index].name === '全部') {
					this.category = this.parentCategoryInfo.id
					return
				}
				const categoryInfo =  this.childCartegoryList[index - 1]
				this.category = categoryInfo.id
				this.resetHeight()
			},
			async resetHeight() {
				await this.$nextTick()
				const query = uni.createSelectorQuery().in(this)
				query.select(".start-workflow")
				.boundingClientRect(data => {
					this.startWorkflowHeight = data && data.height || 0
				}).exec()
				
				query.select(".start-workflow-search")
				.boundingClientRect(data => {
					this.searchHeight = data && data.height || 0
				}).exec()
			}
		}
	}
</script>

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