aiot-app/pages/salesServiceManagement/workOrder/components/selectProduct.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="选择产品" @clickLeft="backAdd">
			<!--右菜单-->
			<template slot="right">
				<u-button type="success" size="small" class="u-reset-button" @click="classification"
					text="选择分类"></u-button>
			</template>
		</uni-nav-bar>
		<view class="top-wrapper">
			<uni-section class="dimension">
				<uni-data-select v-model="dimension" :clear="false" :localdata="dimensionList"></uni-data-select>
			</uni-section>
			<button class="search_btn" @click="getData({})">搜索</button>
			<image class="menu_icon" @click="handleSearch" src="~@/static/pda/menu.svg"></image>
		</view>
		<view class="wrapper">
			<u-list @scrolltolower="scrolltolower" class="listContent">
				<checkbox-group v-for="(item, index) in tableList" :key="index"
					@change="e => selectVal(e, item, index)">
					<label>
						<view class="listBox">
							<view class="listBox-sel">
								<checkbox :value="item.id" color="#fff" :disabled="item.disabled"
									: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.name }}</text> </view>
									<view> <text>型号：</text> <text class="value">{{ item.modelType }}</text> </view>
									<view> <text>规格：</text> <text class="value">{{ item.specification }}</text> </view>
									<view> <text>计量单位：</text> <text class="value">{{ item.measuringUnit }}</text>
									</view>
									<view> <text>重量单位：</text> <text class="value">{{ item.weightUnit }}</text> </view>
									<view> <text>分类：</text> <text class="value">{{ item.categoryLevelPath }}</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>
		<ba-tree-picker ref="treePicker" key="verify" :multiple="false" @select-change="confirm" title="选择分类"
			:selectedData="selectedData" :localdata="classificationList" valueKey="id" textKey="name"
			childrenKey="children" />
		<view class="footer">
			<u-button type="success" size="small" class="u-reset-button" @click="jumpAdd">
				<view class="selBtn">选择( {{ checkListLen }} )</view>
			</u-button>
		</view>
		<prodctScreen ref="screen" @succeed="getData" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import prodctScreen from './productScreen.vue'
	import {
		getInventoryTotalAPI
	} from '@/api/wms/index.js'
	import {
		treeByPid
	} from '@/api/pda/workOrder.js'
	import {
		getProductList,
		getBatchDetails,
		getInventoryDetails,
		getMaterielDetails,
	} from '@/api/repair'
	export default {
		data() {
			return {
				tableList: [],
				obtain: '主数据',
				dimension: '1', // 列表维度
				categoryLevelId: 6, // 分类id(默认6 查询备品备件)
				selectedData: ['6'],
				classificationList: [],
				pageNum: 1,
				isEnd: false,
				detailsData: {},
				checkedkList: [],
				searchVal: '',
				selectType: '1', // 1 单选 2 多选
				dimensionList: [{
						value: '4',
						text: '物料维度'
					},
					{
						value: '3',
						text: '包装维度'
					},
					{
						value: '2',
						text: '批次维度'
					},
					{
						value: '1',
						text: '物品维度'
					},
				]
			}
		},
		components: {
			prodctScreen
		},
		computed: {
			checkListLen() {
				return this.checkedkList.length;
			},
		},
		onLoad(params) {
			this.obtain = params.obtain || '主数据';
			this.selectType = params.selectType || '1'
		},
		onShow() {
			this.getTreeList();
			// this.getData();
		},
		methods: {
			// 获取页面数据
			getData(parameter = {}) {
				// this.isEnd = false
				// this.pageNum = 1
				let data = parameter;
				if (!data.scroll) {
					this.isEnd = false;
					this.pageNum = 1;
					this.accessoriesList = [];
				} else {
					delete data.scroll;
				}
				if (this.obtain == '仓库') {
					this.changeDimension(this.dimension, parameter);
				} else {

				}
			},
			handleSearch() {
				this.$refs.screen.open();
			},
			//返回添加页
			backAdd() {
				uni.navigateBack();
			},
			// 仓库数据
			changeDimension(dimension, parameter = {}) {
				if (this.isEnd) {
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				return new Promise(async (resolve, reject) => {
					try {
						let params = {
							// assetName: this.assetName,
							// dimension: this.dimension,
							...parameter,
							pageNum: this.pageNum,
							size: 15,
							categoryLevelId: this.categoryLevelId
						}
						const api = dimension == 1 ? getProductList : dimension == 2 ?
							getBatchDetails : dimension == 3 ? getInventoryDetails : getMaterielDetails;
						let res = await api(params);
						let list = res.list.map((el) => {
							el.modelType = el.categoryModel;
							el.name = el.categoryName;
							el.code = el.categoryCode;
							return el;
						});
						if (this.pageNum == 1) {
							this.tableList = list;
						} else {
							this.tableList.push(...list);
						}
						this.pageNum += 1
						this.isEnd = this.tableList.length >= res.count;
						uni.hideLoading();
						resolve();
					} catch (error) {
						uni.hideLoading()
						reject()
					}
				})
			},
			classification() {
				this.$refs.treePicker._show();
			},
			scrolltolower() {
				if (this.isEnd) {
					return
				}
				this.getData({
					scroll: true
				});
			},
			// 选择
			selectVal(e, 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)
					}
				})
				this.checkedkList = this.tableList.filter(item => item.checked)
			},
			getTreeList() {
				treeByPid({
					ids: [6]
				}).then(res => {
					this.classificationList = res;
					this.confirm(res[0].id, res[0].name, res[0].rootCategoryLevelId)
				})
			},
			confirm(id, name, rootCategoryLevelId) {
				// this.rootCategoryLevelId = rootCategoryLevelId
				this.categoryLevelId = id;
				this.tableList = [];
				this.getData();
			},
			async jumpAdd() {
				let list = this.checkedkList;
				if (list.length == 0) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请至少选择一条产品数据",
					})
					return;
				}
				//获取仓库库存
				// if (this.obtain == '仓库') {
				// 	let codeList = list.map((item) => item.code);
				// 	let inventoryTotalList = await getInventoryTotalAPI(codeList);
				// 	list.forEach((item) => {
				// 		let find =
				// 			inventoryTotalList.find((key) => key.code == item.code) || {};
				// 		item.availableCountBase = find.availableCountBase;
				// 	});
				// }

				// 单选
				if (this.selectType == '1') {
					uni.$emit('updateScheme', list[0]);
				}
				this.back();
			}
		}
	}
</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 - 250rpx);
			overflow: hidden;
		}

		//底部按钮
		.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;
			}
		}

		.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;
			}
		}

		.dimension {
			width: calc(100% - 270rpx);
		}
	}
</style>