aiot-app/pages/maintenanceWorkorder/sparepart/sparepartList.vue

<template slot-scope="scope">
	<view class="content-box">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="搜索" @clickLeft="back">
			<!--右菜单-->
			<template slot="right">
				<u-button type="success" size="small" class="u-reset-button" @click="openTreePicker"
					text="选择分类"></u-button>
			</template>
		</uni-nav-bar>
		<view class="top-wrapper">
			<uni-section>
				<uni-easyinput prefixIcon="search" style="width: 460rpx" v-model="assetName" placeholder="请输入物品名称">
				</uni-easyinput>
			</uni-section>
		
			<button class="search_btn" @click="search">搜索</button>
		
			<image class="menu_icon" src="~@/static/pda/menu.svg" @click="handleSearch"></image>
		
		
		
		</view>
		<view class="list_box">
			<u-list @scrolltolower="scrolltolower">
				<checkbox-group v-for="(item, index) in tableData" :key="index"
					@change="e => selectVal(e, item, index)">
					<label class="listBox rx-bs">
						<view class="listBox-sel">
							<checkbox :value="item.categoryCode" color="#fff" :disabled="item.disabled"
								:checked="item.checked" />
						</view>

						<view class="listBox-con">
							<view class="listBox-top rx-bc">
								<view>{{ item.categoryName }}</view>
							</view>

							<view class="listBox-bottom rx">
								<view class="items">
									<text>编码</text>
									{{ item.categoryCode }}
								</view>
								<view class="items">
									<text>牌号</text>
									{{ item.brandNum }}
								</view>
								<view class="items">
									<text>型号</text>
									{{ item.categoryModel }}
								</view>

								<view class="items">
									<text>规格</text>
									{{ item.specification }}
								</view>
								<view class="items">
									<text>级别</text>
									{{ item.level }}
								</view>
								<!-- 			<view class="items" style="display: flex;">
									<text>出库数量</text>
									<input style="width: 80px;" v-model="item.outboundNum" type="number"
										@blur="handleInput(item,index)" placeholder="请输入出库数量" />
								</view> -->
								<view class="items">
									<text>计量数量</text>
									{{ item.measureQuantity }}
								</view>
								<view class="items">
									<text>计量单位</text>
									{{ item.measureUnit }}
								</view>
							</view>
						</view>
					</label>
				</checkbox-group>

				<view v-if="tableData.length == 0" style="margin-top: 20vh">
					<u-empty iconSize="150" textSize="32" text="暂无数据"></u-empty>
				</view>
			</u-list>
		</view>

		<view class="bottom-wrapper rx-bc">
			<view>
				<checkbox v-if="!seletedAll" color="#fff" :checked="seletedAll" @tap="_seletedAll">全选</checkbox>
				<checkbox class="select-all" color="#fff" v-else :checked="seletedAll" @tap="_seletedAll">取消全选
				</checkbox>
			</view>
			<view>
				<u-button type="success" size="small" class="u-reset-button" :disabled="!checkListLen" @click="config">
					<view>选择( {{ checkListLen }} )</view>
				</u-button>
			</view>
		</view>
		<ba-tree-picker ref="treePicker" key="verify" :multiple="false" @select-change="confirm" title="选择分类"
			:selectedData="selectedData" :localdata="classificationList" valueKey="id" textKey="name"
			childrenKey="children" />
		<SearchPopup mode="top" v-if="searchShow">
			<template v-slot:list>
				<view class="search_list">
					<u-form labelPosition="left" :model="formData" labelWidth="180" labelAlign="left" class="baseForm">
						<u-form-item label="维度:" class="required-form" borderBottom prop="warehouseId">
							<zxz-uni-data-select :localdata="dimensionList" v-model="dimension" dataValue="id"
								format="{name}" dataKey="name" filterable></zxz-uni-data-select>
						</u-form-item>
					</u-form>
				</view>
			</template>

			<template v-slot:operate>
				<view class="operate_box rx-bc">
					<u-button size="small" class="u-reset-button" @click="searchShow = false">取消</u-button>
					<u-button type="success" size="small" class="u-reset-button" @click="doSearch">确定</u-button>
				</view>
			</template>
		</SearchPopup>

	</view>
</template>
<script>
	import {
		treeByPid
	} from '@/api/pda/workOrder.js'
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	import SearchPopup from '@/pages/pda/components/searchPopup.vue'
	import {
		getDetailById,
		getBatchDetails,
		applySpareParts,
		saveNew,
		getInventoryDetails,
		getMaterielDetails,
		getProductList,
		getHierarchyList,
		getHierarchyFifo
	} from '@/api/repair'
	export default {
		components: {
			baTreePicker,
			SearchPopup
		},
		data() {
			return {
				assetName: '',
				searchShow: false,
				formData: {},
				checkboxList: [],
				tableData: [],
				dimension: 1,
				show: false,
				categoryLevelId: 6,
				rootCategoryLevelId: '',
				classificationList: [],
				selectedData: ['6'],
				stateList: {
					0: '未质检',
					1: '已质检'
				},
				dimensionList: [
					{
						name: '包装维度',
						id: 3
					},
					{
						name: '批次维度',
						id: 2
					},
					{
						name: '物品维度',
						id: 1
					}
				],
				searchForm: {
					assetName: ''
				},
				searchStyle: {
					background: '#F62F33',
					width: '105rpx',
					height: '50rpx',
					borderRadius: '30rpx',
					fontSize: '28rpx',
					color: '#FFFFFF',
					lineHeight: '50rpx',
					textAlign: 'center'
				},
				pageNum: 1,
				warehousingMaterialList: [],
				batchDetailsVOList: [],
				materialCodeReqList: [],
				selectionList: [],
				wlParams: {},
				materialObj: {},
				total: 0,
				seletedAll: false,
				codeS:[]
			}
		},
		onLoad(options) {
			this.id = options.id
			if(options.codeS){
				this.codeS=JSON.parse(options.codeS)
				
			}
		},
		onShow() {

			this.getTreeList()
		},
		//选择的列表长度
		computed: {
			checkListLen() {
				return this.checkboxList.length
			}
		},
		methods: {
		
			doSearch() {
				this.searchShow = false
				this.search()
			},
			handleSearch() {
				this.searchShow = true
			},
			getTreeList() {
				treeByPid({
					ids: [6]
				}).then(res => {
					this.classificationList = res
					this.confirm(res[0].id, res[0].name, res[0].rootCategoryLevelId)
				})
			},
			_seletedAll() {
				if (!this.seletedAll) {
					this.seletedAll = true
					this.tableData.map(item => {
						this.$set(item, 'checked', true)
						const idx = this.checkboxList.findIndex(itm => itm.id === item.id)
						if (idx === -1) {
							this.checkboxList.push(item)
						}
					})
				} else {
					this.seletedAll = false
					this.tableData.map(item => {
						this.$set(item, 'checked', false)
						const idx = this.checkboxList.findIndex(itm => itm.id === item.id)
						if (idx > -1) {
							this.checkboxList.splice(idx, 1)
						}
					})
				}
			},
			//勾选
			selectVal(e, val, index) {
				this.tableData[index].checked = !this.tableData[index].checked
				this.seletedAll = !this.tableData.some(item => !item.checked)
				const idx = this.checkboxList.findIndex(item => item.id === this.tableData[index].id)

				if (this.tableData[index].checked) {
					if (idx === -1) {
						this.checkboxList.push(this.tableData[index])
					}
				} else {
					if (idx > -1) {
						this.checkboxList.splice(idx, 1)
					}
				}
			},
			//回显
			selectValInit(codeS, list) {
				this.checkboxList = []
				list.forEach((item, index) => {
					if (codeS.includes(item.categoryCode)) {
						item['checked'] = true
						this.checkboxList.push(item)
					}
				})
				return list

			},
			openTreePicker() {
				this.$refs.treePicker._show()
			},
			search() {
				this.pageNum = 1
				this.tableData = []
				this.getList()
			},
			scrolltolower() {
				if (this.isEnd) return
				this.pageNum++
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				return new Promise(async (resolve, reject) => {
					try {
						let params = {
							assetName: this.assetName,
							dimension: this.dimension,
							pageNum: this.pageNum,
							size: 30,
							categoryLevelId: this.categoryLevelId
						}
						const api = this.dimension == 1 ? getProductList : this.dimension == 2 ?
							getBatchDetails : this.dimension == 3 ? getInventoryDetails : getMaterielDetails
						let res = await api(params)
						this.total = res.count
				
						this.tableData = this.selectValInit(this.codeS, res.list)
						console.log(this.tableData, 'this.selectValInit(codeS, res.list)')
						this.isEnd = this.tableData.length >= this.total
						uni.hideLoading()
						resolve()
					} catch (error) {
						console.log(error)
						uni.hideLoading()
						reject()
					}
				})
			},
			confirm(id, name, rootCategoryLevelId) {
				this.rootCategoryLevelId = rootCategoryLevelId
				this.categoryLevelId = id
				this.tableData = []
				this.getList()
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			async config() {

				this.checkboxList.forEach((item) => {
					if (item.warehouseList.length > 0) {
						item['warehouseId'] = item.warehouseList[0].warehouse_id
						item['warehouseName'] = item.warehouseList[0].warehouse_name
					}

				});
				uni.$emit('sparePartsApply', this.checkboxList)
				this.back()
				// console.log(this.checkboxList, 'data')
			},




		}
	}
</script>
<style lang="scss" scoped>
	.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;
		}
	}
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: $page-bg;
	}

	.searchBox {
		background-color: #dedede;
		height: 90rpx;
		padding: 0 20rpx;

		.menu_icon {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}

		input {
			height: 70rpx;
			width: 480rpx;
			background: #f9f9f9 !important;
			padding-left: 10rpx;
			border-radius: 5rpx;
		}
	}

	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 6rpx 0;

		.u-list {
			height: 100% !important;
		}
	}

	.bottom-wrapper {
		height: 80rpx;
		background: #fff;
		padding: 0 32rpx;

		/deep/ .uni-checkbox-input-checked {
			background-color: $theme-color !important;
			border-color: $theme-color !important;
		}
	}

	.listBox {
		margin-top: 8rpx;
		padding: 8rpx 24rpx;
		background: #fff;

		/deep/ .uni-checkbox-input-checked {
			background-color: $theme-color !important;
			border-color: $theme-color !important;
		}

		.listBox-con {
			width: 650rpx;
			font-weight: 400;
		}

		.listBox-top {
			margin-top: 6rpx;
			color: #090a0a;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 800;
		}

		.listBox-bottom {
			color: #090a0a;
			font-size: 24rpx;
			font-style: normal;
			flex-wrap: wrap;

			.items {
				width: calc(50% - 1px);
				border-left: 1rpx solid #e3e5e5;
				border-right: 1rpx solid #e3e5e5;
				border-bottom: 1rpx solid #e3e5e5;
				box-sizing: border-box;
				word-break: break-all;

				text {
					display: inline-block;
					background: #f7f9fa;
					padding: 8rpx 10rpx;
					color: #157a2c;
				}

				&:nth-child(1),
				&:nth-child(2) {
					border-top: 1rpx solid #e3e5e5;
					margin-top: 8rpx;
				}
			}
		}
	}

	.search_list {
		min-height: 100rpx;

		/deep/ .baseForm {
			padding: 0 20rpx;
		}
	}
</style>