aiot-app/pages/salesServiceManagement/accessory/components/selectWork.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="选择工单" @clickLeft="backAdd">
		</uni-nav-bar>
		<view class="wapper-top">

		</view>
		<view class="top-wrapper">
			<uni-section>
				<uni-easyinput @clear="clearSearch" prefixIcon="search" style="width: 460rpx" v-model="searchVal"
					placeholder="名称">
				</uni-easyinput>
			</uni-section>
			<button class="search_btn" @click="doSearch">搜索</button>
			<image class="menu_icon" src="~@/static/pda/menu.svg" @click="showSearch"></image>
		</view>
		<view class="wrapper">
			<u-list @scrolltolower="scrolltolower" class="listContent">
				<checkbox-group v-for="(item, index) in tableList" :key="index" @change="selectVal(item, index)">
					<label>
						<view class="listBox">
							<view class="listBox-sel">
								<checkbox :value="item.id" color="#fff" :checked="item.checked" />
							</view>
							<view class="listBox-con">
								<view class="listBox-bottom">
									<view>
										<text>工单编号：</text>
										<text class="value">{{ item.code }}</text>
									</view>
									<view>
										<text>计划单号：</text>
										<text class="value">{{ item.planCode }}</text>
									</view>
									<view>
										<text>计划名称：</text>
										<text class="value">{{ item.planName }}</text>
									</view>
									<view class="label-s">
										<text>报工人：</text>
										<text class="value">{{ item.executeUserName }}</text>
									</view>
									<view class="label-s">
										<text>验收人：</text>
										<text class="value">{{ item.accepterUserName }}</text>
									</view>
									<view>
										<text>验收时间：</text>
										<text class="value">{{ item.accepterTime }}</text>
									</view>
									<view>
										<text>开始时间：</text>
										<text class="value">{{ item.acceptTime }}</text>
									</view>
									<view>
										<text>结束时间：</text>
										<text class="value">{{ item.finishTime }}</text>
									</view>
									<view>
										<text>计划完成时间：</text>
										<text class="value">{{ item.planFinishTime }}</text>
									</view>
									<view>
										<text>状态：</text>
										<text class="value">{{ workerData(item) }}</text>
									</view>
								</view>
							</view>
						</view>
					</label>
				</checkbox-group>
				<u-empty class="noDate" style="margin-top: 20vh" v-if="!tableList.length"></u-empty>
			</u-list>
		</view>
		<view class="footer">
			<u-button type="success" size="small" class="u-reset-button" @click="jumpAdd">
				<view class="selBtn">选择( {{ checkListLen }} )</view>
			</u-button>
		</view>
		<MySearch :show.sync="searchShow" :formItems="formItems" @search="confirmSearch"></MySearch>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getSalesWorkOrder
	} from '@/api/salesServiceManagement/workOrder/index.js'
	let workOrderStatus = {
		0: '待接收',
		1: '已接收',
		2: '执行中',
		3: '待验收',
		4: '待评价',
		5: '已完成',
		6: '验收不通过',
	}

	export default {
		data() {
			return {
				tableList: [],
				checkData: {},
				pageNum: 1,
				isEnd: false,
				orderStatusList: '',
				isPieCar: '',
				searchForm: {},
				searchVal: '',
				searchShow: false,
				formItems: [{
						label: '工单编号：',
						prop: 'code',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '客户名称：',
						prop: 'contactName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '设备名称：',
						prop: 'deviceName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '故障等级：',
						prop: 'faultLevel',
						component: 'MySelect',
						props: {
							localdata: [],
							dataKey: 'label',
							dataValue: 'value'
						}
					},
					{
						label: '计划单号：',
						prop: 'planCode',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
				
				
					{
						label: '计划名称：',
						prop: 'planName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '报工人：',
						prop: 'executeUserName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '验收人：',
						prop: 'accepterUserName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
				],
			}
		},
		computed: {
			checkListLen() {
				if (this.checkData.id) {
					return 1;
				}
				return 0;
			},
			workerData() {
				return (row) => {
					return workOrderStatus[row.orderStatus]
				}
			}
		},
		onLoad(data) {
			this.orderStatusList = data.orderStatusList
			this.isPieCar = data.isPieCar
			this.doSearch();
		},
		methods: {
			doSearch() {
				this.isEnd = false;
				this.page = 1;
				this.getList();
			},
			//获取列表信息
			getList() {
				if (this.isEnd) {
					return;
				}
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					pageNum: this.page,
					size: 10,
					keyWord: this.searchVal,
					...this.searchForm
				}
				if (this.orderStatusList) {
					data.orderStatusList = this.orderStatusList
				}
				if (this.isPieCar) {
					data.isPieCar = this.isPieCar
				}

				getSalesWorkOrder(data).then(res => {
					if (this.page === 1) {
						this.tableList = res.list;
					} else {
						this.tableList.push(...res.list);
					}
					this.page += 1
					this.isEnd = this.tableList.length >= res.count;
					uni.hideLoading();
				}).catch((e) => {
					uni.hideLoading();
				})
			},
			selectVal(val, index) {
				this.$set(this.tableList[index], 'checked', !this.tableList[index].checked);
				this.tableList.forEach((item, i) => {
					if (item.id != val.id) {
						this.$set(this.tableList[i], 'checked', false)
					}
				})
				if (val.checked) {
					this.checkData = val;
				} else {
					this.checkData = {};
				}
			},
			scrolltolower() {
				if (this.isEnd) {
					return;
				}
				this.getList();
			},
			backAdd() {
				this.back();
			},
			clearSearch() {
				this.searchVal = ''
				this.doSearch()
			},
			showSearch() {
				this.searchShow = true
			},
			doSearch() {
				this.isEnd = false;
				this.page = 1;
				this.getList();
			},
			confirmSearch(e) {
				console.log(e);
				let data = JSON.parse(JSON.stringify(e))
				this.searchForm = data
				this.doSearch()
			},
			jumpAdd() {
				if (!this.checkData.id) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择一条工单数据",
					})
					return;
				}
				uni.$emit('updateWorkData', {
					data: this.checkData,
				})
				this.backAdd();
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url('@/pages/salesServiceManagement/demandList/components/invoice.scss');

	.mainBox {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.wrapper {
			// flex: 1;
			height: calc(100vh - 196rpx);
			overflow: hidden;
		}
	}

	.top-wrapper {
		background-color: #fff;
		display: flex;
		width: 750rpx;
		height: 88rpx;
		padding: 16rpx 32rpx;
		align-items: center;
		gap: 16rpx;

		/deep/.uni-section {
			margin-top: 0px;
		}

		/deep/.uni-section-header {
			padding: 0px;

		}

		.search_btn {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 24rpx;
			background: $theme-color;
			font-size: 32rpx;
			color: #fff;
			margin: 0;
			margin-left: 26rpx;
		}

		.menu_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 14rpx;
		}
	}

	//底部按钮
	.footer {
		height: 45px;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		width: 100%;
		height: 50px;
		border-top: 1px solid #eeecec;
		background-color: #ffffff;
		z-index: 999;

		.bottom {
			margin-left: 10rpx;
		}

		.u-reset-button {
			position: absolute;
			right: 10rpx;
			top: 20rpx;
			width: 150rpx;
		}
	}

	.listBox {
		display: flex;
		padding: 10px 0;
		border-bottom: 1px solid #e5e5e5;
	}

	.listBox-con {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 9px 0 0;
	}

	.listBox-sel {
		height: 45px;
		width: 40px;
		text-align: center;
	}
</style>