tqApp-webView/workflow/eventRecord/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-row>
				<u-col :span="12" style="padding: 16rpx 24rpx;">
					<view>
						<view class="input-wapper">
							<u--input
								v-model="params.queryName"
								:disabled="false"
								:clearable="true"
								placeholder="请输入单号或事件标题"
								prefixIcon="search"
								shape="circle"
								prefixIconStyle="font-size: 22px;color: #909399"
								inputAlign="center"
								fontSize="28rpx"
								disabledColor="#F2F2F2"
								border="none"
								:customStyle="{
									height: '62rpx',
									padding: '4rpx 28rpx',
									background: '#F2F2F2'
								}"
								@confirm="handleQuery"
							>
							</u--input>
						</view>
					</view>
				</u-col>
			</u-row>
			
			<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.exStsRef.show()">
					        <view slot="value">
					            <u-form-item>
					                <template v-if="params.flowStatusName">
					                    {{ params.flowStatusName }}
									</template>
					                <template v-else></template>
					            </u-form-item>
					        </view>
							
							<view v-if="params.flowStatusName" slot="right-icon"
								@click.stop="() => {
									params.flowStatus = ''
									params.flowStatusName = ''
									handleQuery()
								}"
							>
							  <u-icon size="16" name="close-circle"></u-icon>
							</view>
					    </u-cell>
						
						<tq-select ref="exStsRef"
							:columns = "exStsList"
							@confirm="(e) => {
								params.flowStatus = e.value
								params.flowStatusName = 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"
							:key="index"
							:queryType="queryType"
						>
						</item>
					</template>
					
					<view class="nodata-warp" v-if="!tableList.length">
					  <image :src="$getImages('/assetsMobile/images/no-data.png')" class="nodata-image"></image>
					</view>
					
					<u-loadmore :status="loadStatus" height="40" style="margin-top: 0;"/>
					<!-- <u-empty mode="data" v-if="tableList.length === 0" marginTop="200"></u-empty> -->
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
import {eventList} from '@/api/system/event.js'
import listMixin from '@/utils/mixins/list.js'
import item from './module/item'

export default {
	mixins: [listMixin],
	components: {
		item,
	},
	data() {
		return {
			params: {
				queryName: '',
				flowStatus: '',
				flowStatusName: '',
			},
			list: [
				/* { name: '我的记录'},
				{ name: '全部记录'}, */
			],	
			current: 0,
			
			exStsList: [
				{label: '进行中',value: 1},
				{label: '已完成',value: 2},
				{label: '已撤销',value: 3},
				{label: '不通过',value: 4},
			],
			
		}
	},
	computed: {
		queryType() {
			if(this.list.length>0) {
				if(this.list[this.current].name == '我的记录') {
					return 1
				} else {
					return 2
				}
			} else {
				return ''
			}
 			
		}
	},
	onLoad() {
		if(this.$hasPermi('mobile:index:eventRecord:list:my')) {
			this.list.push({ name: '我的记录'})
		}
			
		if(this.$hasPermi('mobile:index:eventRecord:list:all')) {
			this.list.push({ name: '全部记录'})
		}
		
		this.handleQuery()
		
		
	},
	onShow() {
	
	},
	methods: {
		async handleTableList() {
			
			if(this.list.length == 0) return
			
			this.loadStatus = 'loading'
			let ajaxData = {
				...this.params,
				queryType: this.queryType,
				pageIndex: this.page,
				pageSize: this.pageSize
			}
			
			let {code,data,page} = await eventList(ajaxData)
			
			if (code == "0" ) {
				
				data.map((e) => {
					this.tableList.push({
					    ...e,
					});
				})
				
				this.loadStatus = 'loadmore'
				this.total = page.totalCount;
				if (this.page * this.pageSize >= this.total)  {
					this.loadStatus = 'nomore'
				}
				this.refresher = false;
			}
		},
		
	}
}
</script>

<style lang="scss" scoped>

.disflex {
	display: flex;
	justify-content: center;
	align-items: center;
}

.input-wapper {
	padding: 0 0rpx;
	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% - 240rpx - 20rpx);
		overflow: hidden;
	}
}	


.nodata-warp{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  .nodata-image{
    width: 218rpx;
    height: 150rpx;
  }
}

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