批次改下拉+输入

pages/General/warehouse-box.vue

@@ -50,8 +50,29 @@
 					<view class="zd-col-6">
 						<span class="filter_label">批次</span>
 					</view>
-					<view class="zd-col-18">
-						<input type="text" v-model="pcsn" class="filter_input">
+					<view class="zd-col-18 filter_select">
+						<!-- <zxz-uni-data-select v-model="index1" filterable :localdata="options1"></zxz-uni-data-select> -->
+						<view class="input-wrapper">
+							<input 
+							class="input-field" 
+							v-model="pcsn" 
+							placeholder="请输入或选择" 
+							placeholder-class="placeholder"
+							@input="onInput"
+							/>
+							<picker 
+							class="picker" 
+							mode="selector" 
+							:range="pcOptions" 
+							:value="selectedIndex"
+							@change="onPickerChange"
+							>
+							<view class="picker-trigger">
+								<!-- <text class="picker-text">></text> -->
+								<text class="uni-icons zd_icon_wraper uniui-bottom" style="color: rgb(153, 153, 153); font-size: 14px;"></text>
+							</view>
+							</picker>
+						</view>
 					</view>
 				</view>
 				<view class="zd-row border-bottom">
@@ -115,7 +136,7 @@
 	import {getDate} from '@/utils/utils.js'
 	const currentDate = getDate({format: true})
 	// import {queryGroupQuality, queryNowVehicle} from '@/utils/mork2.js'
-	import {queryGroupQuality, queryNowVehicle, confirmBox, printDelete} from '@/utils/getData2.js'
+	import {queryGroupQuality, queryNowVehicle, confirmBox, printDelete, queryPcsn} from '@/utils/getData2.js'
 	export default {
 		components: {
 			NavBar,
@@ -132,11 +153,18 @@
 				boxType: null,
 				materialData: {},
 				suppData: {},
-				pcsn: null,
 				qty: null,
 				num: 0,
 				disabled: false,
-				disabled1: false
+				disabled1: false,
+				pcsn: '',
+				selectedIndex: 0,
+				pcOptions: []
+				// pcOptions: [
+				// 	'TB-001',
+				// 	'TB-002',
+				// 	'TB-003'
+				// ],
 			};
 		},
 		computed: {
@@ -150,6 +178,7 @@
 		onLoad (options) {
 			this.title = options.title
 			this._queryGroupQuality()
+			this._queryPcsn()
 		},
 		onShow () {
 			if (this.$store.getters.publicObj !== '') {
@@ -162,6 +191,14 @@
 			}
 		},
 		methods: {
+			onInput(e) {
+				// console.log('输入内容:', e.detail.value)
+			},
+			onPickerChange(e) {
+				const index = e.detail.value
+				this.selectedIndex = index
+				this.pcsn = this.pcOptions[index]
+			},
 			handleChange (e) {
 				if (e) {
 					this._queryNowVehicle(e)
@@ -170,6 +207,19 @@
 			handleDel () {
 				this.boxType = ''
 			},
+			/** 批次下拉框*/
+			async _queryPcsn () {
+				try {
+					let res = await queryPcsn()
+					if (res) {
+						this.pcOptions = res.data.map(item => item.value);
+					} else {
+						this.pcOptions = []
+					}
+				} catch (e) {
+					this.pcOptions = []
+				}
+			},
 			async _queryNowVehicle (e) {
 				try {
 					let res = await queryNowVehicle(e)
@@ -228,7 +278,9 @@
 							icon: 'none'
 						})
 					}
-					this.toEmpty()
+					this.vehicleCode = ''
+					this.qty = ''
+					this._queryPcsn()
 					this.disabled = false
 				} catch (e) {
 					this.disabled = false
@@ -306,4 +358,63 @@
 			}
 		}
 	}
-</script>
+</script>
+<style lang="stylus">
+.input-container {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+  margin-bottom: 40rpx;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+//   border: 2rpx solid #e0e0e0;
+  border-radius: 12rpx;
+  overflow: hidden;
+  transition: border-color 0.3s;
+}
+
+.input-wrapper:focus-within {
+  border-color: #007AFF;
+}
+
+.input-field {
+  flex: 1;
+  height: 80rpx;
+//   padding: 0 24rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.placeholder {
+  color: #999;
+  font-size: 28rpx;
+}
+
+.picker {
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8f8f8;
+  border-left: 2rpx solid #e0e0e0;
+}
+
+.picker-trigger {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.picker-text {
+  font-size: 24rpx;
+  color: #666;
+}
+</style>

utils/getData2.js

@@ -86,6 +86,11 @@ export const confirmBox = (scode, id, mcode, mname, spcode, spname, pcsn, time,
 		bake_num: num
 	}
 })
+// 批次下拉框
+export const queryPcsn = () => request({
+	url:'api/pdaInGroupBox/queryPcsn',
+	data: {}
+})
 // 确认组箱(组箱配送)
 export const deliveryBox = (code, id, bcode, info, qty, rows) => request({
 	url:'api/pdaInGroupBox/deliveryBox',