eam-uniapp/src/pages/overhaulOrder/reqairOrderList.vue

<template>
	<!-- 维修工单 -->
	<view class="container">
		<view class="list">
			<view class="item" v-for="(item,index) in repairOrderList" :key="index" @click="chooseItem(item)">
				<u-checkbox v-model="item.checked" shape="circle" style="margin-top: 8rpx;"></u-checkbox>
				<view class="right">
					<view class="title">
						<view class="title-txt">
							{{item.describes}}
						</view>
						<u-tag text="待接单" v-if="item.status == 'PENDING'" bg-color='rgba(255,255,255,0)' color='#fe8463'
							border-color='#fe8463' type="primary" shape='circle' />
						<u-tag text="已撤回" v-else-if="item.status=='REJECTED'" bg-color='rgba(255,255,255,0)'
							color='#d7d7d7' border-color='#d7d7d7 ' type="warning" shape='circle' />
						<u-tag text="已转办" v-else-if="item.status=='TRANSFERRED'" bg-color='rgba(255,255,255,0)'
							color='#e01f54' border-color='#e01f54' type="success" shape='circle' />
						<u-tag text="已接单" v-else-if="item.status=='PECEIVED'" bg-color='rgba(255,255,255,0)'
							color='#005eaa' border-color='#005eaa ' type="error" shape='circle' />
						<u-tag text="已验证" v-else-if="item.status=='VERIFIED'" bg-color='rgba(255,255,255,0)'
							color='#2EC7C9' border-color='#2EC7C9' type="info" shape='circle' />
						<u-tag text="已完成" v-else-if="item.status=='COMPLETED'" bg-color='rgba(255,255,255,0)'
							color='#2ba471' border-color='#2ba471' type="info" shape='circle' />
					</view>
					<view class="dec">
						工单单号:<span>{{item.number}}</span>
					</view>
					<view class="dec">
						类型:<span>{{item.type=='DEVICE'?'设备':item.type=='TECH'?'工艺':'模具'}}</span>
					</view>
					<view class="dec">
						{{`${type=='DEVICE'?'设备' : '模具'}`}}编号:<span>{{item.deviceNumber}}</span>
					</view>
					<view class="dec">
						{{`${type=='DEVICE'?'设备' : '模具'}`}}名称:<span>{{item.name}}</span>
					</view>
					<view class="dec">
						所属厂区:<span>{{item.factoryAreaName}}</span>
					</view>
					<view class="dec">
						班次:<span>{{item.classesName}}</span>
					</view>
					<view class="dec">
						故障类型:<span>{{item.faultTypeName}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btns">
				<button class="sure" @click="sure"> 确定</button>
			</view>
			<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
		</view>
		<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
	</view>
</template>

<script setup lang="ts">
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	
	import * as repairOrderApi from "@/api/repairOrder.js"
	const { proxy } = getCurrentInstance()
	
	const repairOrderList = ref([])
	const type = ref('')
	
	// 获取设备保修列表
	function getList() {
		proxy.$modal.loading('加载中')
		repairOrderApi.repairOrderList({
			type: type.value,
			result: 'TEMPORARILY'
		}).then((res) => {
			proxy.$modal.closeLoading()
			 res.data.forEach(item=>{
				 item.checked = false
			 })
			repairOrderList.value = res.data
		})
	}
	function chooseItem(item){
		let arr = repairOrderList.value.filter(cur=>cur.id != item.id)
		arr.forEach(item=>{
			item.checked = false
		})
		item.checked = !item.checked
	}
	function sure(){
		let data =repairOrderList.value.filter(cur=>cur.checked)[0]
		uni.$emit('chooseOrder',data)
		proxy.$tab.navigateBack()
	}
	onLoad((option) => {
		if (option.type) type.value = option.type;
		getList()
	})
</script>

<style lang="scss" scoped>
	.container{
		background: #f5f5f5;
		min-height: 100vh;
	}
	.list {
		background: #f5f5f5;
		margin-top: 20rpx;
		padding-bottom: 120rpx;
		.item {
			padding: 30rpx 30rpx 0px 30rpx;
			margin-top: 20rpx;
			background: white;
			display: flex;
			align-items: flex-start;
			.right{
				flex: 1;
			}
			.title {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;

				.title-txt {
					color: #409eff;
					font-weight: bold;
					font-size: 36rpx;
					width: 0px;
					flex: 1;
					word-wrap: break-word;
				}

				.time {
					color: #919191;

				}
			}

			.dec {
				padding-bottom: 20rpx;

				span {
					color: #999999;
				}
			}

			.last {
				padding-bottom: 30rpx;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1px solid #E4E4E4;
				padding: 20rpx 0px;

			}
		}
	}

	.list {
		background: #f5f5f5;
		margin-top: 20rpx;

		.item {
			padding: 30rpx 30rpx 0px 30rpx;
			margin-top: 20rpx;
			background: white;

			.title {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;

				.title-txt {
					color: #409eff;
					font-weight: bold;
					font-size: 36rpx;
					width: 0px;
					flex: 1;
				}

				.time {
					color: #919191;

				}
			}

			.dec {
				padding-bottom: 20rpx;

				span {
					color: #999999;
				}
			}

			.last {
				padding-bottom: 30rpx;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1px solid #E4E4E4;
				padding: 20rpx 0px;
				position: relative;


				.button {
					position: absolute;
					right: 0rpx;
				}

			}
		}
	}
	.footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
	}
	
	.btns {
		display: flex;
	
	
		button {
			flex: 1;
		}
	
		.sure {
			background: #409eff;
			color: white;
			border-radius: 0px;
	
			&::after {
				border: 1px solid #409eff;
				border-radius: 0px;
			}
		}
	
		.reset {
			background: #F5F5F5;
			border-radius: 0px;
	
			&::after {
				border-radius: 0px;
			}
		}
	}
	
</style>