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

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="title" @clickLeft="back">
			<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" v-if="dataSources == '0'">
				<uni-data-select @change="(e)=>onchange(e)" v-model="dimension" :clear="false"
					:localdata="dimensionList">
				</uni-data-select>
			</uni-section>
			<uni-section v-if="dataSources == '1'">
				<uni-easyinput prefixIcon="search" style="width: 460rpx" v-model="searchKey" placeholder="关键字">
				</uni-easyinput>
			</uni-section>
			<button class="search_btn" @click="getData({})">搜索</button>
			<image class="menu_icon" @click="handleSearch" src="~@/static/pda/menu.svg"></image>
		</view>
		<!-- 		<view class="nav_box rx-sc">
			<view class="nav_item " :class="{active: current == 0}" @click="handNav(0)">
				库存台账</view>
			<view class="nav_item" :class="{active: current == 1}" @click="handNav(1)">
				主数据</view>
			<view class="add btn" v-show="current == 0" @click="add">
				添加
			</view>
			<view class="remove btn" v-show="current == 1" @click="remove">
				移除
			</view>
		</view> -->
		<view class="wrapper">
			<!-- v-show="current == 0" -->
			<u-list @scrolltolower="scrolltolower" class="listContent">
				<checkbox-group v-for="(item, index) in accessoriesList" :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>{{!fieldShow?'编码':'物品编码'}}：</text>
										<text class="value">{{ item.code }}</text>
									</view>
									<view>
										<text>{{!fieldShow?'名称':'物品名称'}}：</text>
										<text class="value">{{ item.name }}</text>
									</view>
									<view class="label-s">
										<text>牌号：</text>
										<text class="value">{{ item.brandNum }}</text>
									</view>
									<view class="label-s">
										<text>型号：</text>
										<text class="value">{{ item.categoryModel }}</text>
									</view>
									<view>
										<text>规格：</text>
										<text class="value">{{ item.specification }}</text>
									</view>
									<view class="label-s" v-if="dimension == 3">
										<text>批次号：</text>
										<text class="value">{{ item.batchNo }}</text>
									</view>
									<view class="label-s">
										<text>级别：</text>
										<text class="value">{{ item.level }}</text>
									</view>
									<view class="label-s" v-if="fieldShow">
										<text>计量数量：</text>
										<text class="value">{{ item.measureQuantity }}</text>
									</view>
									<view class="label-s" v-if="fieldShow">
										<text>计量单位：</text>
										<text class="value">{{ item.measureUnit }}</text>
									</view>
									<view class="label-s">
										<text>重量：</text>
										<text class="value">{{ item.weight }}</text>
									</view>
									<view class="label-s">
										<text>重量单位：</text>
										<text class="value">{{ item.weightUnit }}</text>
									</view>
									<view v-if="dimension == 3">
										<text>包装编码：</text>
										<text class="value">{{ item.packageNo }}</text>
									</view>
									<view class="label-s" v-if="dimension == 3">
										<text>包装数量：</text>
										<text class="value">{{ item.packingQuantity }}</text>
									</view>
									<view class="label-s" v-if="dimension == 3">
										<text>包装单位：</text>
										<text class="value">{{ item.packingUnit }}</text>
									</view>
									<view v-if="dimension == 3 || dimension == 4">
										<text>发货条码：</text>
										<text class="value">{{ item.barcodes }}</text>
									</view>
									<view v-if="dimension == 4">
										<text>物料编码：</text>
										<text class="value">{{ item.no }}</text>
									</view>
									<view v-if="dimension == 3 || dimension == 4">
										<text>物料代号：</text>
										<text class="value">{{ item.materielDesignation }}</text>
									</view>
									<view v-if="dimension == 3 || dimension == 4">
										<text>客户代号：</text>
										<text class="value">{{ item.clientCode }}</text>
									</view>
									<view v-if="dimension == 3 || dimension == 4">
										<text>刻码：</text>
										<text class="value">{{ item.engrave }}</text>
									</view>
									<view v-if="dimension == 3 || dimension == 4">
										<text>仓库：</text>
										<text class="value">{{ item.warehouseName }}</text>
									</view>
								</view>
							</view>
						</view>
					</label>
				</checkbox-group>
				<u-empty class="noDate" style="margin-top: 20vh" v-if="!accessoriesList.length"></u-empty>
			</u-list>
			<!-- 	<u-list class="listContent" v-show="current == 1">
				<checkbox-group v-for="(item, index) in addList" :key="index"
					@change="e => selectAddVal(e, 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>{{!fieldShow ? '编码' : '物品编码'}}：{{ item.categoryCode }}</view>
									<view>{{!fieldShow ? '名称' : '物品名称'}}：{{ item.categoryName }}</view>
									<view>型号：{{ item.categoryModel }}</view>
									<view>规格：{{ item.specification }}</view>
									<view class="label-s">级别：{{ item.level }}</view>
									<view class="label-s">库存：{{ item.measureQuantity }}</view>
									<view v-if="dataSources == '0'">计量单位：{{ item.measureUnit }}</view>
									<view>仓库：{{ item.warehouseName }}</view>
								</view>
							</view>
						</view>
					</label>
				</checkbox-group>
				<u-empty class="noDate" style="margin-top: 20vh" v-if="!addList.length"></u-empty>
			</u-list> -->
		</view>
		<view class="footer">
			<u-button type="success" size="small" class="u-reset-button" @click="jumpAdd">
				<view class="selBtn">选择({{ addList.length }})</view>
			</u-button>
		</view>
		<screenAccess :dataSources="dataSources" ref="screen" @succeed="getData" />
		<ba-tree-picker ref="treePicker" key="verify" :multiple="false" @select-change="confirm" title="选择分类"
			:selectedData="selectedData" :localdata="classificationList" valueKey="id" textKey="name"
			childrenKey="children" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import screenAccess from './screenAccess.vue'
	import {
		getProductList,
		getBatchDetails,
		getInventoryDetails,
		getMaterielDetails,
	} from '@/api/repair';
	import {
		treeByPid
	} from '@/api/pda/workOrder.js';
	import {
		getList
	} from '@/api/classifyManage/itemInformation.js'
	export default {
		components: {
			screenAccess
		},
		data() {
			return {
				title: '新增配件',
				dataSources: '0', // 0 仓库 1 主数据
				accessoriesList: [], // 配件列表
				addList: [], // 添加列表
				classificationList: [],
				categoryLevelId: 6, // 分类id(默认6 查询备品备件)
				selectedData: ['6'],
				isEnd: false,
				pageNum: 1,
				dimensionList: [{
						value: '4',
						text: '物料维度'
					},
					{
						value: '3',
						text: '包装维度'
					},
					{
						value: '2',
						text: '批次维度'
					},
					{
						value: '1',
						text: '物品维度'
					},
				],
				dimension: '1', // 列表维度
				current: 0,
				searchKey: ''
			}
		},
		onLoad(params) {
			this.dataSources = params.dataSources || '0';
		},
		computed: {
			// 物品字段
			fieldShow() {
				return this.dataSources == '0';
			},
		},
		onShow() {
			this.getTreeList();
		},
		methods: {
			handleSearch() {
				this.$refs.screen.open();
			},
			confirm(id, name) {
				this.categoryLevelId = id;
				this.accessoriesList = [];
				this.getData();
			},
			onchange(e) {
				this.dimension = e;
				this.getData({});
			},
			// 获取页面数据
			getData(parameter = {}) {
				let data = parameter;
				if (!data.scroll) {
					this.isEnd = false;
					this.pageNum = 1;
					this.accessoriesList = [];
				} else {
					delete data.scroll;
				}
				if (this.dataSources == '0') {
					this.changeDimension(this.dimension, data);
				} else {
					let obj = this.$refs.screen.mainForm;
					// 查询主数据
					this.warehouseData(obj);
				}
			},
			// 主数据
			warehouseData(data = {}) {
				let form = {
					...data,
					searchKey: this.searchKey,
					pageNum: this.pageNum,
					size: 15,
					categoryLevelId: this.categoryLevelId
				}
				uni.showLoading({
					title: '加载中'
				})
				getList(form).then((res) => {
					let list = res.list.map((el) => {
						el.categoryModel = el.modelType;
						el.categoryName = el.name;
						el.categoryCode = el.code;
						return el;
					});
					if (this.pageNum == 1) {
						this.accessoriesList = list;
					} else {
						this.accessoriesList.push(...list);
					}
					this.pageNum += 1
					this.isEnd = this.accessoriesList.length >= res.count;
					uni.hideLoading();
				}).then((e) => {
					uni.hideLoading();
				})

			},
			// 仓库数据
			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.accessoriesList = list;
						} else {
							this.accessoriesList.push(...list);
						}
						this.pageNum += 1
						this.isEnd = this.accessoriesList.length >= res.count;
						uni.hideLoading();
						resolve();
					} catch (error) {
						uni.hideLoading();
						reject();
					}
				})
			},
			scrolltolower() {
				if (this.isEnd) {
					return;
				}
				this.getData({
					scroll: true
				});
			},
			classification() {
				this.$refs.treePicker._show();
			},
			// 查部门
			getTreeList() {
				treeByPid({
					ids: [6]
				}).then(res => {
					this.classificationList = res;
					this.confirm(res[0].id, res[0].name);
				})
			},
			handNav(index) {
				this.current = index;
			},
			// remove() {
			// 	this.addList = this.addList.filter(item => !item.checked);
			// },
			// add() {
			// 	let checkedList = this.accessoriesList.filter(item => item.checked);
			// 	if (checkedList.length == 0) {
			// 		this.$refs.uToast.show({
			// 			type: "warning",
			// 			message: "请至少选择一条配件数据",
			// 		})
			// 	}
			// 	let obj = {};
			// 	this.addList.map(el => {
			// 		obj[el.id] = true;
			// 	})
			// 	checkedList.map((el) => {
			// 		if (!obj[el.id]) {
			// 			let data = JSON.parse(JSON.stringify(el));
			// 			delete data.checked;
			// 			this.addList.push(data);
			// 		}
			// 	})
			// 	this.current = 1;
			// },
			// 选择配件列表
			selectVal(e, val, index) {
				this.$set(this.accessoriesList[index], 'checked', !this.accessoriesList[index].checked);
				this.addList = this.accessoriesList.filter(item => item.checked)
			},
			// selectAddVal(e, val, index) {
			// 	this.$set(this.addList[index], 'checked', !this.addList[index].checked);
			// },
			jumpAdd() {
				let list = JSON.parse(JSON.stringify(this.addList));
				if (list.length == 0) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请至少添加一条物品数据",
					})
					return;
				}
				list.forEach((el) => delete el.checked);
				uni.$emit('updateAddessory', list);
				this.back();
			}
		}
	}
</script>

<style scoped lang="scss">
	// @import url('@/pages/salesServiceManagement/demandList/components/invoice.scss');
	
	
	
	.listContent {
		height: 100% !important;
	
		.listBox {
			display: flex;
			// height: 180rpx;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #e5e5e5;
	
			.listBox-sel {
				height: 90rpx;
				width: 80rpx;
				// line-height: 90rpx;
				text-align: center;
	
				checkbox {
					transform: scale(1.2);
				}
			}
		}
		
		.listBox-con {
			width: 100%;
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
			align-items: center;
			padding: 0 18rpx 0 0;
		
			.listBox-top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding-bottom: 10rpx;
		
				.listBox-name,
				.listBox-code {
					display: inline-block;
					font-size: $uni-font-size-sm;
					font-weight: bold;
				}
			}
		
			.listBox-bottom {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: $uni-font-size-sm;
				flex-wrap: wrap;
		
				>view {
					width: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
		
				.half {
					width: 50%;
				}
				
				.label-s{
					width: 50%;
					display: inline-block !important;
				}
			}
		}
	
		.noDate {
			height: 100%;
		}
	}
	
	
	
	.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);
			}
	
			.nav_box {
				padding: 6rpx 32rpx;
				position: relative;
	
				.btn {
					width: 68rpx;
					text-align: center;
					background: #1890ff;
					color: #fff;
					border: 2rpx solid;
					border-color: #1890ff;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					margin-right: 10rpx;
				}
	
				.remove {
					color: #606266;
					border-color: #dddddd;
					background: #fff;
				}
	
				.nav_item {
					font-size: 28rpx;
					font-weight: 400;
					color: $theme-color;
					background: #F0F8F2;
					margin-right: 16rpx;
					padding: 4rpx 16rpx;
					border-radius: 8rpx;
					border: 2rpx solid #ACD4B5;
	
				}
	
				.menu_box {
					position: absolute;
					right: 20rpx;
					top: 10rpx;
	
					.menu_icon {
						width: 44rpx;
						height: 44rpx;
					}
	
				}
	
				.active {
					background: $theme-color;
					border: 2rpx solid $theme-color;
					color: #FFF;
				}
			}
		}
	
	// @import './accessory.scss';
</style>