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

<template>
	<view class="approve-container">
		<view class="approve-search">
			<u-search
			:placeholder="type==='myLaunch'?'单号模糊搜索':'请输入关键字搜索'"
			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-cell-group class="approve-search-options" v-if="type==='myLaunch'">
                <u-cell-item title="申请时间" @click="calendarShow=true" :value="applyTimeName"></u-cell-item>
                <u-cell-item title="所属流程" @click="processInstanceShow=true" :value="processDefinitionName"></u-cell-item>
                <u-cell-item title="流程状态" @click="processStatusShow=true" :value="processStatusName"></u-cell-item>
            </u-cell-group>
            <u-calendar v-model="calendarShow" mode="range" @change="calendarChange"></u-calendar>
            <u-select v-model="processInstanceShow" :list="processInstancelist" @confirm="processInstanceConfirm"></u-select>
            <u-select v-model="processStatusShow" :list="processStatusList" @confirm="processStatusConfirm"></u-select>
            <!-- <u-button type="primary" size="mini" style="width: 100%;margin: 2px;">重置</u-button> -->
        </view>
		<view class="approve-list">
			<todo-list :approve-list-height="approveListHeight" :search-key-word="searchKeyWord" :type="type" v-if="type === 'todo'"/>
			<done-list :approve-list-height="approveListHeight" :search-key-word="searchKeyWord" :type="type" v-else-if="type === 'done'"/>
			<cc-list :approve-list-height="approveListHeight" :search-key-word="searchKeyWord" :type="type" v-else-if="type === 'cc'"/>
			<manager-list :approve-list-height="approveListHeight" :search-key-word="searchKeyWord" :type="type" v-else-if="type === 'manager'"/>
			<launch-list :processStatus="processStatus" :processDefinitionName="processDefinitionName" :applyTime="applyTime" :approve-list-height="approveListHeight" :search-key-word="searchKeyWord" :type="type" v-else/>
		</view>
	</view>
</template>

<script>
    import {dibootApi} from '@/utils/dibootApi'
	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,

                calendarShow: false,
                processInstanceShow:false,
                processStatusShow:false,
                
                applyTime:[],//申请时间
                applyTimeName:'',
                processDefinitionName:'',//流程实例
                processInstancelist:[],//流程列表
                processStatus:'',//流程状态
                processStatusName:'',//流程状态名称
                // 流程状态：1.进行中、2.已完成、3.已撤销、4.不通过
                processStatusList:[
                    { label: '全部', value: undefined },
                    { label: '进行中', value: 1 },
                    { label: '已完成', value: 2 },
                    { label: '已撤销', value: 3 },
                    { label: '不通过', value: 4 },
                ]
			};
		},
        created() {
			this.computedHeight()
            //获取列表
                  dibootApi.get('/workflow/processDefinition/list', {
                      noPage: true
                    }).then((result) => {
                        this.processInstancelist=result.data.map(e=>{
                            return {
                                label:e.name,
                                value:e.name
                            }
                        })
                        this.processInstancelist.unshift({ label: '全部', value: undefined })
                    })
		},
		computed: {
			approveListHeight() {
				return this.approveContainerHeight - this.searchHeight
			}
		},
		props: {
			type: {
				type: String,
				required: true
			}
		},
		methods: {
            processStatusConfirm(e){
                console.log('e',e)
                this.processStatus=e[0].value
                this.processStatusName=e[0].label
            },
            processInstanceConfirm(e){
                console.log('e',e)
                this.processDefinitionName=e[0].value
            },
            calendarChange(e){
                console.log(e);
                this.applyTime=[e.startDate,e.endDate]
                this.applyTimeName=e.startDate+'至'+e.endDate
            },
			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;
		}
	}
    .approve-search-options{
        ::v-deep {
            .u-cell{
                padding: 6px 16px;
            }
        }
    }
</style>