tqApp-webView/pagesMine/driverTask/index.vue

<template>
	<view class="page-container">
		<!-- 头部筛选 -->
		<view class="page-head">
			 
			<u-tabs :list="list" 
				:itemStyle="{
					width: '330rpx',
					height: '80rpx'
				}"
        :activeStyle="{
          color:'#4573FC'
        }"
        lineWidth="40"
        lineColor="#4573FC"
				@click="({index}) => {
					current = index
					handleQuery()
				}"
			>
			</u-tabs>
			
			<u--form label-width="auto" ref="uForm" :model="params" labelAlign="right">
				<u-cell-group customStyle="margin-top: 2px">
				    <template>
				        <u-cell title="任务开始时间" :border="true" :isLink="true"
				            @click="$refs.calendarRef.show()">
				            <view slot="value">
				                <u-form-item>
				                    <template v-if="params.startDate">
				                        {{ params.startDate }} - {{ params.endDate }}
									</template>
				                    <template v-else></template>
				                </u-form-item>
				            </view>
							
							<view v-if="params.startDate" slot="right-icon"
								@click.stop="() => {
									params.startDate = ''
									params.endDate = ''
									handleQuery()
								}"
							>
							  <u-icon size="16" name="close-circle"></u-icon>
							</view>
							
				        </u-cell>
						
						<tq-calendar ref="calendarRef"
							type="daterange"
							@confirm="(e) => {
								params.startDate = e[0]
								params.endDate = e[1]
								handleQuery()
							}"
						>	
						</tq-calendar>		
				    </template>
					
					<template>
					    <u-cell title="车牌号" :border="true" :isLink="true"
					        @click="$refs.carChooseRef.show()">
					        <view slot="value">
					            <u-form-item>
					                <template v-if="params.plate">
					                    {{ params.plate }}
									</template>
					                <template v-else></template>
					            </u-form-item>
					        </view>
							<view v-if="params.plate" slot="right-icon" 
								@click.stop="() => {
									params.vehicleId = ''
									params.plate = ''
									handleQuery()
								}"
							>
							  <u-icon size="16" name="close-circle"></u-icon>
							</view>
					    </u-cell>
							
						<tq-car-user ref="carChooseRef"
							@confirm="(data) => {
								params.vehicleId = data.id
								params.plate = data.label
								handleQuery()
							}"
						>
						</tq-car-user>
					</template>
					
					<template>
					    <u-cell title="任务状态" :border="true" :isLink="true"
					        @click="$refs.exStsRef.show()">
					        <view slot="value">
					            <u-form-item>
					                <template v-if="params.taskName">
					                    {{ params.taskName }}
									</template>
					                <template v-else></template>
					            </u-form-item>
					        </view>
							
							<view v-if="params.taskName" slot="right-icon"
								@click.stop="() => {
									params.taskSts = ''
									params.taskName = ''
									handleQuery()
								}"
							>
							  <u-icon size="16" name="close-circle"></u-icon>
							</view>
					    </u-cell>
						
						<tq-select ref="exStsRef"
							:columns = "exStsList"
							@confirm="(e) => {
								params.taskSts = e.value
								params.taskName = e.label
								handleQuery()
							}"
						>
						</tq-select>		
					</template>
					
				</u-cell-group>
			</u--form>
		
		</view>
		<!-- 内容 -->
		<view class="page-body">
			<scroll-view scroll-y style="height: 100%" enable-back-to-top refresher-enabled
				refresher-background="#F6F6F6" :refresher-triggered="refresher" @refresherrefresh="handleRefresher"
				@scrolltolower="handleScrollLower">
					<template v-for="(e,index) in tableList">

						<item :item="e" @getList="handleQuery"
							@handleOper="(e,type) => {
								$refs.operFormRef.show(e,type)
							}" 
							:key="index"
							:current="current"
						>
						</item>
					</template>
					
					<u-empty mode="data" v-if="tableList.length === 0" marginTop="200"></u-empty>
			</scroll-view>
		</view>
		
		<operForm ref="operFormRef" @getList="handleQuery"></operForm>
	</view>
</template>

<script>
import {myTaskList ,driverTaskList} from '@/api/mine/driverTask.js'
import listMixin from '@/utils/mixins/list.js'
import item from './module/item'
import operForm from './module/operForm.vue'

export default {
	mixins: [listMixin],
	components: {
		item,
		operForm,
	},
	data() {
		return {
			params: {
				startDate: '',
				endDate: '',
				vehicleId: '',
				plate: '',
				taskSts: '',
				taskName: '',
			},
			list: [
				{ name: '我的任务'},
				{ name: '所有任务'},
			],		
			
			exStsList: [
				// {label: '全部',value: ''},
				{label: '未执行',value: '0'},
				{label: '执行中',value: '1'},
				{label: '已完结',value: '2'},
			],
			
			current: 0,
			
		}
	},
	onLoad() {
		this.setDefalutTime()
		this.handleQuery()
	},
	onShow() {
	
	},
	methods: {
		setDefalutTime() {
			let today = this.dayjs().format('YYYY-MM-DD')
			this.params.startDate = today
			this.params.endDate = today
		},
		async handleTableList() {
	
			let ajaxData = {
				...this.params,
				page: this.page,
				size: this.pageSize
			}
			let {code,data} = this.current ==0? await myTaskList(ajaxData):await driverTaskList(ajaxData)
			
			if (code == "0" ) {
				data.list.map((e) => {
					this.tableList.push({
					    ...e,
					});
				})

				this.total = data.total;
				this.refresher = false;
			}
		},
		
	}
}
</script>

<style lang="scss" scoped>

.disflex {
	display: flex;
	justify-content: center;
	align-items: center;
}
.input-wapper {
	padding: 0 20rpx;
	position: relative;
	
	.prefix {
		position: absolute;
		left: 42rpx;
		bottom: 12rpx;
	}
	.suffix {
		position: absolute;
		right: 42rpx;
		bottom: 12rpx;
	}
}

.page-container {
	font-size: 28rpx;
	min-height: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	.page-head {
		background: #fff;
	}
	.page-body {
		width: 100%;
		height: calc(100% - 344rpx - 10rpx);
		overflow: hidden;
	}
}	


::v-deep {
	
	.u-form-item__body {
		padding: 0;
	}
}
</style>