wydy/wy-mobile/pages/test/mobile/TestMobileList.vue

<template>
	<view>
	    <!--查询只能指定一个字段,请自行指定，生成时并未生成，以xxx代替-->
		<u-search  :show-action="false" v-model="searchForm.xxx" @change="inputWord" margin="20rpx 50rpx"></u-search>
		<u-swipe-action>
				<view
					v-for="(row, index) in dataList"
					:key="index">
						<u-swipe-action-item @click="del(row.id)"  :key="row.id" :threshold="60" duration="500" 
						:options="options">
						  <u-cell-group>
							  <u-cell @click="edit(row.id)">
							  <view slot="title" class="content">
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
						            姓名：{{row.name}}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
						            年龄：{{row.age}}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
						            地区：{{row.area}}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
					    	        公司：{{ row.company && row.company.name }}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
					    	        部门：{{ row.office && row.office.name }}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
					                性别：{{ $dictUtils.getDictLabel("sex", row.sex, '-') }}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
                                    头像：<view class="cu-avatar lg margin-left-sm"   :style="{backgroundImage: 'url(' + row.teImage + ')' }"></view>
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
						            单选框：{{ $dictUtils.getDictLabel("yes_no", row.isSingle, '-') }}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
						            多选框：{{row.cks.split(",").map( (item)=> { return $dictUtils.getDictLabel("interface_type", item, '-')}).join(",")  }}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
						            多行文本框：{{row.textArea}}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
						            数字输入框：{{row.textNumber}}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
						            日期选择框：{{row.teDate}}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
						            邮箱：{{row.email}}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
						            手机号：{{row.phone}}
									</view>
								</view>
							    <view class="text-bold text-grey">
									<view class="ellipsis-description">
						            电话：{{row.tel}}
									</view>
								</view>
						  	</view>
                            </u-cell>
						  </u-cell-group>
					</u-swipe-action-item>
				</view>
			</u-swipe-action>
			<uni-fab
				horizontal="right"
				vertical="bottom"
				@fabClick="add"
			></uni-fab>
		<u-loadmore :status="status"  @loadmore="loadmore" :line="true" />
		<u-gap height="20" bgColor="#fff"></u-gap>
	</view>
</template>

<script>
  import testMobileService from '@/api/test/mobile/testMobileService'
  export default {
    data () {
      return {
		status: 'loadmore',
		searchForm: {
		    name: ''
		},
		dataList: [],
		tablePage: {
			pages: 0,
			currentPage: 0,
			pageSize: 10,
			orders: [{ column: "a.create_time", asc: false }]
		},
		loading: false,
		options: [ {
			text: '删除',
			style: {
				backgroundColor: '#f56c6c'
			}
		}]
      }
    },
	onLoad() {
		this.loadmore()
	},
    methods: {
	  // 新增
	  add (){
	  	uni.navigateTo({
	  	  url: '/pages/test/mobile/TestMobileForm'
	  	})
	  },
	  // 修改
	  edit (id) {
	  	uni.navigateTo({
	  	  url: '/pages/test/mobile/TestMobileForm?id='+id
	  	})
	  },
      // 删除
	  del (id) {
	  	uni.showModal({
	  		title: '提示',
	  		content: '您确认要删除数据吗',
	  		showCancel: true,
	  		success: (res) => {
	  			if (res.confirm) {
	  				testMobileService.delete(id).then((data)=>{
	  					uni.showToast({
	  						title: data,
	  						icon:"success"
	  					})
	  					this.doSearch()
	  				})
	  			}
	  		}
	  	});
	  },
  		// 输入监听
	  inputWord(e){
			this.searchTimer && clearTimeout(this.searchTimer)
			this.searchTimer = setTimeout(()=>{
				this.doSearch()
			},300)
	  },
		// 搜索
	  doSearch(){
			this.dataList = []; 
			this.tablePage.currentPage = 0;
			this.tablePage.pageSize = 10;
			this.tablePage.pages = 0;
			this.loadmore()
	  },
	  onReachBottom() {
			this.loadmore()
	  },
	  /*获取数据列表 */
	  loadmore() {
		if(this.tablePage.currentPage!==0 && this.tablePage.pages <= this.tablePage.currentPage ) {
			this.status = 'nomore';
			return;
		}
		this.tablePage.currentPage = ++ this.tablePage.currentPage;
		//联网加载数据
		this.status = 'loading';
	    testMobileService.list({
	  	  'current': this.tablePage.currentPage,
	  	  'size': this.tablePage.pageSize,
	  	  'orders': this.tablePage.orders,
	  	  ...this.searchForm
	  	}).then((data) => {
	  	  //追加新数据
    		this.dataList=this.dataList.concat(data.records);
    		this.tablePage.pages = data.pages;
    		if(this.tablePage.pages <= this.tablePage.currentPage){
    			this.status = 'nomore'
    		} else {
    			this.status = 'loadmore'
    		}
	  	})
	  	
	  }
    }
  }
</script>