feat: NZKO-696, NZKO-697 出库信息带出备件库位信息，PDA备件归还归还人员选择增加模糊搜索

3 months ago · 960154e977
3 changed files with 320 additions and 8 deletions
--- a/src/components/user/userSelect.vue
+++ b/src/components/user/userSelect.vue
@ -0,0 +1,236 @@
+<template>
+	<!-- 选择人员 -->
+	<u-popup v-model="props.isShowSelectPerson" mode="center" border-radius="14">
+		<view class="popup-title">选择人员</view>
+		<view class="popup">
+			<u-search placeholder="搜索" v-model="form1.searchName" @change="searchPerson"></u-search>
+			<view class="list">
+				<view class="person" v-for="(person, index) in singleColumnList" :key="index" @click="choosePerson(person)">
+					<u-checkbox v-model="person.checked" shape="circle" style="margin-top: 8rpx;"></u-checkbox>
+					<view class="right">
+						<view class="person-nickname">
+							<span>{{person.nickname}}</span>
+						</view>
+						<!-- <view class="person-name">
+							登录名: <span>{{person.name}}</span>
+						</view> -->
+						<!-- <view class="person-id">
+							ID: <span>{{person.id}}</span>
+						</view> -->
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="popup-footer">
+			<view @click="choosePerson1(0)">取消</view>
+			<view class="sure" @click="choosePerson1(1)">确认</view>
+		</view>
+	</u-popup>
+</template>
+
+<script setup lang="ts">
+	import {
+		ref,
+		defineProps,
+		defineEmits,
+		getCurrentInstance,
+		watch
+	} from 'vue'
+	import {
+		onLoad,
+	} from '@dcloudio/uni-app'
+	const props = defineProps({
+		isShowSelectPerson: {
+			type: Boolean,
+			default: () => { return false },
+			require: true
+		},
+		singleColumnList: {
+			type: Array,
+			default: () => { return [] },
+			require: false
+		}
+	});
+	// 监测isShowSelectPerson的变化
+	watch(() => props.isShowSelectPerson, (newValue, oldValue) => {
+		if (newValue) {
+			console.log('props.isShowSelectPerson', props.isShowSelectPerson);
+			form1.value.searchName = ""
+			form1.value.temporarilyId = null
+			form1.value.temporarilyNickname = null
+			form1.value.temporarilyName = null
+		}
+	});
+	const { proxy } = getCurrentInstance()
+	const personList = ref([])
+	const type = ref('')
+	const isShowSelectPerson = ref(false);
+	const selectVal = ref(null);
+	const emits = defineEmits(['searchPerson', 'choosePerson']);
+	const form1 = ref({
+		id: "",
+		nickname: "",
+		name: "",
+		temporarilyId: "", // 临时选中的ID
+		temporarilyNickname: "", // 临时选中的别名
+		temporarilyName: "", // 临时选中的登录名
+		searchName: "", // 模糊搜索
+	})
+	onLoad((option) => {
+		if (option.type) type.value = option.type;
+		if (option.type) isShowSelectPerson.value = option.isShowSelectPerson; // 是否显示
+		if (option.selectVal) selectVal.value = option.selectVal; // 是否显示
+	})
+	// 取消和确认方法
+	function choosePerson1(type) {
+		if (type == 1) {
+			form1.value.id = form1.value.temporarilyId
+			form1.value.nickname = form1.value.temporarilyNickname
+			form1.value.name = form1.value.temporarilyName
+		}
+		emits('choosePerson', type, form1);
+	}
+	function searchPerson() {
+		emits('searchPerson', form1.value.searchName);
+	}
+	function choosePerson(person) {
+		console.log('props.isShowSelectPerson', props.isShowSelectPerson);
+		console.log('props.singleColumnList', props.singleColumnList);
+		let arr = props.singleColumnList.filter(cur => cur.id != person.id)
+		arr.forEach(person => {
+			person.checked = false
+		})
+		person.checked = !person.checked
+		let arr1 = props.singleColumnList.filter(cur => cur.id == person.id)
+		form1.value.temporarilyId = arr1[0].id;
+		form1.value.temporarilyNickname = arr1[0].nickname;
+		form1.value.temporarilyName = arr1[0].name;
+	}
+</script>
+
+<style lang="scss" scoped>
+	.add-form-container {
+		min-height: calc(100vh - 140rpx);
+		background: white;
+		padding: 0px 30rpx 140rpx;
+	}
+	.footer {
+		position: fixed;
+		bottom: 0px;
+		left: 0px;
+		width: 100%;
+		z-index: 22;
+	}
+	.btns {
+		display: flex;
+		button {
+			flex: 1;
+		}
+		.sure {
+			background: #409eff;
+			color: white;
+			border-radius: 0px;
+			&::after {
+				border: 1px solid #409eff;
+				border-radius: 0px;
+			}
+		}
+		.reset {
+			background: #F5F5F5;
+			border-radius: 0px;
+			&::after {
+				border-radius: 0px;
+			}
+		}
+	}
+	.right-button {
+		background: #409eff;
+		color: white;
+		padding: 0rpx 30rpx;
+		border-radius: 16rpx;
+		text-align: center;
+		font-size: 28rpx;
+	}
+	.select {
+		display: flex;
+		align-items: center;
+		height: 72rpx;
+		width: 100%;
+		.input {
+			flex: 1;
+			font-size: 28rpx;
+			color: #000000;
+		}
+		.placeholder {
+			flex: 1;
+			font-size: 28rpx;
+			color: rgb(192, 196, 204);
+		}
+	}
+	.title {
+		padding: 32rpx 0px;
+		position: relative;
+		span {
+			position: absolute;
+			left: -16rpx;
+			color: #fa3534;
+			padding-top: 6rpx;
+		}
+	}
+	.list {
+		.person {
+			display: flex;
+			margin-bottom: 20rpx;
+			.person-box {
+				background: #F5F5F5;
+				border-radius: 12rpx;
+				flex: 1;
+				width: 0rpx;
+			}
+			.person-title {
+				padding: 20rpx 30rpx;
+				border-bottom: 1px solid #e4e4e4;
+				.title-txt {
+					color: #409eff;
+					font-size: 30rpx;
+					font-weight: bold;
+				}
+			}
+			.dec {
+				color: #9c9c9c;
+				padding: 20rpx 30rpx 20rpx;
+			}
+		}
+	}
+	.add-btn {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+	}
+	.popup-title {
+		text-align: center;
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #409eff;
+		padding: 30rpx 30rpx 0px;
+	}
+	.popup {
+		width: 600rpx;
+		padding: 30rpx 60rpx 30rpx;
+	}
+	.popup-footer {
+		display: flex;
+		border-top: 1px solid #e4e4e4;
+		view {
+			line-height: 100rpx;
+			flex: 1;
+			text-align: center;
+			&.sure {
+				color: #409eff;
+			}
+		}
+	}
+	::v-deep .u-checkbox-group {
+		display: grid !important;
+	}
+</style>
--- a/src/pages/outLocation/addForm.vue
+++ b/src/pages/outLocation/addForm.vue
@ -40,6 +40,26 @@
 								申请数量:{{item.qty}}
 							</view>
 						</u-col>
+						<u-col :span="24" v-if="item.outSite">
+							<view class="dec">
+								账外库位:{{item.outSite}}
+							</view>
+						</u-col>
+						<u-col :span="24" v-if="item.outSite">
+							<view class="dec">
+								账外数量:{{item.outQty}}
+							</view>
+						</u-col>
+						<u-col :span="24" v-if="item.inSite">
+							<view class="dec">
+								账内库位:{{item.inSite}}
+							</view>
+						</u-col>
+						<u-col :span="24" v-if="item.inSite">
+							<view class="dec">
+								账内数量:{{item.inQty}}
+							</view>
+						</u-col>
 					</u-row>
 				</view>
 			</view>
--- a/src/pages/sparePartsReturn/addForm.vue
+++ b/src/pages/sparePartsReturn/addForm.vue
@ -7,9 +7,9 @@
 			</u-form-item> -->
 			
 			<u-form-item label="归还人员" prop="reverterName" required>
-				<view class="select" @click="openSingleColumn('reverterId',form.reverterId,reverterUser)">
+				<view class="select" @click="openSingleNewColumn('reverterId',form.reverterId,reverterUser)">
 					<view class="input" v-if='form.reverterId'>
-						{{selectFormat(form.reverterId,reverterUser)}}
+						{{form.nickname}}
 					</view>
 					<view class="placeholder" v-else>
 						{{`请选择归还人员`}}
@ -89,6 +89,12 @@
 		</u-popup>
 		<u-select v-model="singleColumnShow" mode="single-column" :default-value='singleColumnDefaultValue'
 			:list="singleColumnList" @confirm="chooseSingleColumn"></u-select>
+		<SelectUserList 
+		  :isShowSelectPerson="isShowSelectPerson" 
+		  :singleColumnList="singleColumnList" 
+		  @searchPerson="searchPerson" 
+		  @choosePerson="choosePerson" 
+		/>
 	</view>
 </template>

@ -104,6 +110,7 @@
 	import * as sparePartsReturnApi from "@/api/sparePartsReturn"
 	import * as sparePartsApi from "@/api/spareParts"
 	import * as locationApi from "@/api/location"
+	import SelectUserList from "../../components/user/userSelect.vue"
 	
 	const { proxy } = getCurrentInstance()
 const loading = ref(false)
@ -129,7 +136,7 @@ const singleColumnShow = ref(false)
 	const locationList = ref([])//备件的库位列表
 	const locationItem = ref('')//备件账内库
 	const isFocus = ref(false)
-	
+	const isShowSelectPerson = ref(false)
 	const choosesingleColumnItem = ref()
 	const itemNumber = ref()
 	const msg = ref()
@ -178,10 +185,10 @@ const singleColumnShow = ref(false)
 		}
 	}
 	
-	function selectFormat(val, array) {
-		let str = array.filter(item => item.value == val)[0].label
-		return str
-	}
+	// function selectFormat(val, array) {
+	// 	let str = array.filter(item => item.value == val)[0].label
+	// 	return str
+	// }
 	// 单列模式
 	function openSingleColumn(fieldName, val, list) {
 		singleColumnList.value = list
@ -218,7 +225,7 @@ const singleColumnShow = ref(false)
 			itemNumber: "",
 			itemName: '',
 			locationNumber: '',
-			qty: ''
+			qty: '',
 		}
 		isPopupShow.value = true
 		isShow.value=  false
@ -357,6 +364,55 @@ const singleColumnShow = ref(false)
 	function handelScanMsg1() {
 		getSparePartsInfo()
 	}
+	
+	// 单列模式
+	function openSingleNewColumn(fieldName, val, list) {
+		singleColumnList.value = list
+		field.value = fieldName
+		if (val) {
+			singleColumnDefaultValue.value = [list.findIndex(item => item.value == val)]
+		} else {
+			singleColumnDefaultValue.value = []
+		}
+		isShowSelectPerson.value = true;
+		singleColumnList.value = list
+	}
+	
+	async function searchPerson(name){
+		await getUserList(name);
+	}
+	
+	async function choosePerson(type,forms){
+		if(!forms.value.id&&type==1){
+			proxy.$modal.showToast('请选择用户')
+			return
+		}
+		if(type==1){
+			form.value.nickname = forms.value.temporarilyNickname
+			form.value.name =forms.value.temporarilyName
+			form.value.reverterId = forms.value.temporarilyId
+		}
+		await getUserList(null);
+		isShowSelectPerson.value = false;
+	}
+	
+	// 获取用户列表
+	async function getUserList(name) {
+	    await userApi.getReverterUser().then(res => {
+	        // 如果入参为 null 或空字符串，则不过滤
+	        let filteredData = name ? res.data.filter(item => item.nickname.includes(name)) : res.data;
+	        
+	        // 处理匹配到的数据
+	        filteredData.map(item => {
+	            item.value = item.id;
+	            item.label = item.nickname;
+	        });
+	
+	        reverterUser.value = filteredData;
+	        singleColumnList.value = reverterUser.value;
+	    }).catch(() => {});
+	}
+	
 	 onLoad(async(option) => {
 		getReverterUser()
 	})