wit-uniapp/pages/index/Workordertodone/Workordertodone.vue

<template>
	<view class="page">
		<u-tabs :list="list" @click="sectionChange" style="background-color: #fff;" :current=current
			:itemStyle="{'width':wid,'padding':'24rpx'}" lineHeight="2px" lineWidth="30px"></u-tabs>
		<!-- 待指派 -->
		<view class="contain" v-show="cdshow==0">
			<view style="padding:16rpx 0 16rpx 32rpx">
				共有 <span style="color: red">{{totalnumber}}</span>条记录
			</view>
			<view class="u-listdata">
				<u-list @scrolltolower="scrolltolower" :pagingEnabled='true' style="height:400px;flex:1;">
					<u-list-item v-for="(item, index) in indexList" :key="index">
						<view class="paisong" @click="Workorderdetails1(item)">
							<view class="title">{{item.repairPosition}}</view>
							<view class="submit" v-if='item.repairType==1'>
								报修类型: 水
							</view>
							<view class="submit" v-if='item.repairType==2'>
								报修类型: 电
							</view>
							<view class="submit" v-if='item.repairType==3'>
								报修类型: 其他
							</view>

							<view class="submit">
								报修时间: {{item.createDate}}
							</view>
						</view>

					</u-list-item>
				</u-list>
			</view>
		</view>
		<!-- 已派送(待维修) -->
		<view class="contain" v-show="cdshow==1">
			<!-- 	列表 -->
			<view class="u-listdata">
				<view style="padding:16rpx 0 16rpx 32rpx">
					共有 <span style="color: red">{{totalnumber}}</span>条记录
				</view>
				<u-list @scrolltolower="scrolltolower" :pagingEnabled='true' style="height:400px;flex:1;">
					<u-list-item v-for="(item, index) in indexList" :key="index">
						<view class="paisong" @click="Workorderdetails2(item)">
							<view class="status bg3" v-if="item.urgency==1">
								非常紧急
							</view>
							<view class="status bg2" v-if="item.urgency==2">
								紧急
							</view>
							<view class="status bg1" v-if="item.urgency==3">
								普通
							</view>
							<view class="title">{{item.repairPosition}}</view>
							<view class="subtit" v-if='item.repairType==1'>
								报修类型: 水
							</view>
							<view class="subtit" v-if='item.repairType==2'>
								报修类型: 电
							</view>
							<view class="subtit" v-if='item.repairType==3'>
								报修类型: 其他
							</view>
							<view class="subtit">
								派送时间:{{ item.updateDate }}
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<!--已维修 -->
		<view class="contain" v-show="cdshow==2">
			<!-- 	列表 -->
			<view class="u-listdata">
				<view style="padding:16rpx 0 16rpx 32rpx">
					共有 <span style="color: red">{{totalnumber}}</span>条记录
				</view>
				<u-list @scrolltolower="scrolltolower" :pagingEnabled='true' style="height:400px;flex:1">
					<u-list-item v-for="(item, index) in indexList" :key="index">

						<view class="paisong" @click="Workorderdetails3(item)">
							<view class="status bg3" v-if="item.urgency==1">
								非常紧急
							</view>
							<view class="status bg2" v-if="item.urgency==2">
								紧急
							</view>
							<view class="status bg1" v-if="item.urgency==3">
								普通
							</view>

							<view class="title">{{item.repairPosition}}</view>
							<view class="subtit" v-if='item.repairType==1'>
								报修类型: 水
							</view>
							<view class="subtit" v-if='item.repairType==2'>
								报修类型: 电
							</view>
							<view class="subtit" v-if='item.repairType==3'>
								报修类型: 其他
							</view>
							<view class="subtit">
								维修完成时间:{{ item.repairFinishTime }}
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
</template>

<script>
	//	import { isEmpty, getDictDataList } from "@/utils/index";

	export default {
		name: 'Workordertodone',
		data() {
			return {
				wid:'250rpx',
				totalnumber: 0,
				jfnodata: false,
				showtype: false,
				cdshow: 0,
				fatherparameter: {},
				expensedata: '全部',
				list: [],
				gly: true,
				current: 0,
				dataForm: {
					status: "1",
					page: 1,
					limit: 10,
				},
				indexList: [],
				payStatusList: [],
				nodata: true,
				pd: true,
				columnstype: [],
				repairTypeList: [],
				UrgencyTypelist: [],
			}
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
		onLoad: function(options) { //option为object类型，会序列化上个页面传递的参数
			let permissions = uni.getStorageSync('ButtonPermissions');
			let isHave = permissions.includes('app:Tobeassigned');
			this.gly = permissions.includes('app:Tobeassigned');
			if (isHave) {
				this.list = [{
					name: '待指派'
				}, {
					name: '已指派(待维修)'
				}, {
					name: '已维修'
				}];
				this.cdshow = 0;
				this.indexList = [];
				this.dataForm.page = 1;
				this.dataForm.status = 1;
				this.getpaisongdata();
			} else {
				this.wid="375rpx";
				this.list = [{
					name: '已指派(待维修)'
				}, {
					name: '已维修'
				}];
				this.cdshow = 1;
				this.indexList = [];
				this.dataForm.page = 1;
				this.dataForm.status = 2;
				this.getpaisongdata();
			}
		},
		methods: {
			Workorderdetails1(e) {
				uni.navigateTo({
					url: `/pages/index/Workordertodone/Workorderdetails/Workorderdetails?id=${e.id}`
				});
			},
			Workorderdetails2(e) {
				uni.navigateTo({
					url: `/pages/index/Workordertodone/Toberepaired/Toberepaired?id=${e.id}`
				});
			},
			Workorderdetails3(e) {
				uni.navigateTo({
					url: `/pages/index/Workordertodone/hasrepaired/hasrepaired?id=${e.id}`
				});
			},
			sectionChange(val) {
				if (this.gly) {
					this.current = val.index;
					if (val.index == 0) {
						this.cdshow = 0;
						this.indexList = [];
						this.dataForm.page = 1;
						this.dataForm.status = 1;
						this.getpaisongdata();
					} else if (val.index == 1) {
						this.cdshow = 1;
						this.indexList = [];
						this.dataForm.page = 1;
						this.dataForm.status = 2;
						this.getpaisongdata();
					} else if (val.index == 2) {
						this.cdshow = 2;
						this.indexList = [];
						this.dataForm.page = 1;
						this.dataForm.status = 3;
						this.getpaisongdata();
					}
				} else {
					this.current = val.index;
					if (val.index == 0) {
						this.cdshow = 1;
						this.indexList = [];
						this.dataForm.page = 1;
						this.dataForm.status = 2;
						this.getpaisongdata();
					} else if (val.index == 1) {
						this.cdshow = 2;
						this.indexList = [];
						this.dataForm.page = 1;
						this.dataForm.status = 3;
						this.getpaisongdata();
					}

				}
			},
			scrolltolower() {
				if (this.pd) {
					this.getpaisongdata();
				} else {
					return
				}
			},
			getpaisongdata() {
				this.$api.get('/repairorder/page', this.dataForm)
					.then(res => {
						this.totalnumber = res.data.data.total;
						if (res.data.data.list.length != 0) {
							this.indexList.push(...res.data.data.list);
							this.dataForm.page = this.dataForm.page + 1;
							this.pd = true;
							this.jfnodata = false;
						} else {
							uni.showToast({
								title: '暂无更多数据了',
								icon: 'none',
								duration: 1500
							})
							this.pd = false;
						}

					})
			},
		}
	}
</script>

<style lang="scss">
	.nodata {
		text-align: center;
		padding-top: 400rpx;

	}

	.page {
		height: 100%;
		overflow: hidden;

		.contain {
			height: calc(100% - 44px);
			padding: 0;
			display: flex;
			flex-direction: column;

			.u-listdata {
				height: 400px;
				flex: 1;
				display: flex;
				flex-direction: column;

			}
		}
	}

	.paisong {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		margin: 0 16px 24rpx;
		padding: 12px 16px;
		border-radius: 4px;
		position: relative;

		.title {
			font-size: 32rpx;
			color: #0C1935;
			margin-bottom: 16rpx;

			span {
				color: #FA5555;
				font-weight: 600;
			}
		}

		.subtit {
			color: #9DA0AC;
			margin-bottom: 6rpx;
		}

		.status {
			position: absolute;
			padding: 1px 5px;
			border-radius: 0 8rpx 0 24rpx;
			right: 0;
			line-height: 48rpx;
			text-align: center;
			top: 0;
			z-index: 1;
			font-size: 22rpx;
			background-color: rgba(48, 211, 162, .16);
			color: rgba(48, 211, 162, 1);

			&.bg2 {
				background-color: rgba(255, 156, 39, .16);
				color: rgba(255, 156, 39, 1);
			}

			&.bg3 {
				background-color: rgba(237, 58, 37, .16);
				color: rgba(237, 58, 37, 1);
			}
		}
	}
</style>