aiot-app/pages/repair/sparepart/index.vue

<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" leftText="选择备品备件" @clickLeft="back"></uni-nav-bar>
		<SparePart @submitList="submit" :list="list" v-if="list && list.length!==0"></SparePart>
		<view class="" v-else>
			<view class="no_data">
				<view class="center">
					<uni-icons type="chat-filled" size="36"></uni-icons>
				</view>
				<view class="center">
					暂无数据
				</view>
			
			</view>
			
			<view class="footer footer-right">
			
				<view class="center">
					<text class="footer-span-btn" @click="resetEqui">选择备品备件</text>
				</view>
			
			</view>
		</view>
		<uni-data-picker ref="pickerDeptName" :localdata="treeList" @change="handleChange"
			:map="{text:'name','value':'id'}" v-show="pickerDeptShow">
		</uni-data-picker>
	</view>
</template>

<script>
	import SparePart from '@/components/SparePart.vue'
	import {
		get,
		postJ,
		post
	} from "@/utils/api.js"
	let [page, size, isEnd] = [1, 10, true];
	export default {
		components: {
			SparePart
		},
		data() {
			return {
				pageId: '',
				pickerDeptShow: false,
				list: [],
				treeList: [],
				classificationId:""
			}
		},
		onShow() {
			this.getTreeList()
		},
		onLoad(options) {
		},
		onReachBottom: function() {
			if (isEnd) {
				return;
			}
			// 显示加载图标
			uni.showLoading({
				title: "数据加载中"
			});
			this.getMoreLists();
		},
		methods: {
			resetEqui(){
				this.pickerDeptShow = true
				this.$refs.pickerDeptName.show()
			},
			handleChange(e) {
				let data = e.detail.value[e.detail.value.length - 1]
				this.classificationId = data.value
				page = 1;
				isEnd = true;
				uni.showLoading({
					title: "数据加载中"
				});
				this.getList();
			},
			getTreeList() {
				postJ(this.apiUrl + "/classificationTree/list", [4]).then(res => {
					// console.log(res)
					if (res.success) {
						this.treeList = res.data
						this.pickerDeptShow = true
						this.$refs.pickerDeptName.show()
					}
				})
			},
			getFirstList: function() {
				page = 1;
				isEnd = true;
				uni.showLoading({
					title: "数据加载中"
				});
				this.getList();
			},
			getMoreLists: function() {
				//获取更多数据
				page++;
				this.getList();
			},
			//获取列表数据
			getList() {
				post(this.apiUrl + "/classificationSpareParts/classificationSpare/list",{
					page,
					size,
					code:"",
					classificationId:this.classificationId
				}).then(res => {
					// console.log(res)
					let data = res.data.records;
					let pageTotal = res.data.pages;
					if (page === 1) {
						data.forEach(el => {
							el.num = 0
						})
						this.list = data;
					} else {
						data.forEach(element => {
							element.num = 0;
							this.list.push(element);
						});
					}
					page < pageTotal ? (isEnd = false) : (isEnd = true);
				}).then(() => {
					uni.hideLoading()
				})
			},
			submit(data) {
				let list = data;
				let pickData = list.filter((item) => {
					return item.checked && !item.disabled && (item.num > 0)
				})

				if (pickData.length == 0) {
					uni.showToast({
						title: "请选择备品备件数量",
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.$store.dispatch("repair/setSelectSparepart", pickData);
				this.back()
				// console.log(pickData)
				// pickData.forEach(el => {
				// 	el.goodsName = el.sparepartTypeCode.name
				// 	el.goodsBatch = el.batchNo
				// 	if (el.type) {
				// 		el.goodsTypeCode = el.sparepartTypeCode?.id;
				// 	}
				// 	// el.manageType = el.manageType.id;
				// 	delete el.type;
				// 	delete el.status;
				// })

				// let form = {
				// 	"goodsType": 3,
				// 	"supplier": {
				// 		"id": "7",
				// 		"name": "回到家撒卡卡"
				// 	},
				// 	"executor": {   
				// 		"id": 4,
				// 		"name": "欧阳峰"
				// 	},
				// 	"warehouse": {
				// 		"id": "5",
				// 		"name": "凯凯仓库"
				// 	},
				// 	"attaments": [],
				// 	"outType": 2,
				// 	"receiveName": "黄凯",
				// 	"receiveTime": "2023-05-26 00:00:00",
				// 	"receivePhone": "15512341234",
				// 	"remark": "出库备注",
				// 	"details": pickData
				// }
				//this.$store.dispatch("tour_tally/setSparepart", sparepartInfo);
				// postJ(this.apiWebUrl + "/api/feature/worksheet/applyspare?id=" + this.pageId, form).then(res => {
				// 	// console.log(res)
				// 	this.back()
				// }).catch(err => {
				// 	uni.showToast({
				// 		title: '操作失败',
				// 		icon: 'none'
				// 	})
				// })
				//this.$store.dispatch("tour_tally/setSparepart", sparepartInfo);



			},


		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-data-tree-input {
		display: none;
	}
	.no_data {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	
		.center {
			text-align: center;
			color: #555;
			font-size: $uni-font-size-base;
		}
	}
	.footer {
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		text-align: center;
		border-top: 1rpx solid #eeecec;
		background-color: #FFFFFF;
	
		.bottom {
			font-size: $uni-font-size-lg;
			margin-left: 20rpx;
	
			.select-all {
				color: $j-primary-green;
			}
		}
	
		.footer-span-btn {
			height: 30rpx;
			line-height: 30rpx;
			font-size: $uni-font-size-lg;
			color: #ffffff;
			margin-right: 20rpx;
			padding: 10rpx 20rpx;
			text-align: center;
			background-color: $j-primary-green;
			border-radius: 40rpx;
		}
	}
	
	.footer-right {
		justify-content: flex-end;
	}
</style>