2026-01-26

优化生产领退料的领料工单

src/views/modules/production/productionIssueReturnDetail.vue

@@ -54,24 +54,21 @@
       <div class="card-info-row">
         <div class="info-item" style="flex: 0 0 70%;">
           <span class="info-label">领料工单</span>
-          <el-select
+          <el-autocomplete
+            ref="issueOrderInput"
             v-model="issueOrderNo"
-            filterable
-            remote
-            reserve-keyword
-            placeholder="请选择领料工单"
-            :remote-method="searchIssueOrder"
-            :loading="orderSearchLoading"
-            @change="handleIssueOrderChange"
+            :fetch-suggestions="queryIssueOrders"
+            placeholder="请输入领料工单"
+            :trigger-on-focus="false"
+            :debounce="300"
+            @select="handleIssueOrderSelect"
+            @blur="handleIssueOrderBlur"
+            value-key="orderNo"
             style="width: 100%;">
-            <el-option
-              v-for="item in issueOrderOptions"
-              :key="item.orderNo"
-              :label="item.orderNo"
-              :value="item.orderNo">
-              <span style="float: left">{{ item.orderNo }}</span>
-            </el-option>
-          </el-select>
+            <template slot-scope="{ item }">
+              <span>{{ item.orderNo }}</span>
+            </template>
+          </el-autocomplete>
         </div>
         <div class="info-item" style="flex: 0 0 25%;">
           <el-select
@@ -314,43 +311,38 @@ export default {
       })
     },
 
-    // 搜索领料工单（模糊查询，返回top3）
-    searchIssueOrder(query) {
-      if (!query) {
-        this.issueOrderOptions = []
+    // 查询领料工单（el-autocomplete 的 fetch-suggestions）
+    queryIssueOrders(queryString, callback) {
+      if (!queryString || queryString.trim() === '') {
+        callback([])
         return
       }
 
-      this.orderSearchLoading = true
-
       const params = {
         site: localStorage.getItem('site'),
-        buNo: this.buNo, // 使用从路由参数获取的buNo
-        searchKey: query,
-        limit: 3 // top3
+        buNo: this.buNo,
+        searchKey: queryString.trim(),
+        limit: 5
       }
 
       searchIssueOrders(params).then(({ data }) => {
-        this.orderSearchLoading = false
         if (data && data.code === 0) {
           this.issueOrderOptions = data.orders || []
+          callback(this.issueOrderOptions)
         } else {
-          this.issueOrderOptions = []
-          this.$message.error(data.msg || '搜索工单失败')
+          callback([])
         }
       }).catch(error => {
-        this.orderSearchLoading = false
         console.error('搜索工单失败:', error)
-        this.$message.error('搜索工单失败')
+        callback([])
       })
     },
 
-    // 领料工单选择变化
-    handleIssueOrderChange(value) {
+    // 选择领料工单（el-autocomplete 的 select 事件）
+    handleIssueOrderSelect(item) {
       // 校验：领料工单不能等于退库工单
-      if (value === this.returnOrderNo) {
+      if (item.orderNo === this.returnOrderNo) {
         this.$message.error('领料工单不能与退库工单相同')
-        // 清空领料工单选择
         this.issueOrderNo = ''
         this.selectedIssueOrder = null
         this.operationSeq = ''
@@ -359,9 +351,8 @@ export default {
         return
       }
 
-      const selected = this.issueOrderOptions.find(item => item.orderNo === value)
-      if (selected) {
-        this.selectedIssueOrder = selected
+      this.issueOrderNo = item.orderNo
+      this.selectedIssueOrder = item
 
       // 清空工序选择
       this.operationSeq = ''
@@ -369,7 +360,18 @@ export default {
       this.operationOptions = []
 
       // 加载工序列表
-        this.loadOperationList(value)
+      this.loadOperationList(item.orderNo)
+    },
+
+    // 领料工单输入框失焦（验证输入值是否有效）
+    handleIssueOrderBlur() {
+      // 如果用户手动输入了值但没有从列表选择，检查是否有效
+      if (this.issueOrderNo && !this.selectedIssueOrder) {
+        // 检查输入的值是否在选项中
+        const found = this.issueOrderOptions.find(item => item.orderNo === this.issueOrderNo)
+        if (found) {
+          this.handleIssueOrderSelect(found)
+        }
       }
     },
 
@@ -755,5 +757,43 @@ export default {
 .action-btn:active {
   transform: scale(0.98);
 }
+
+/* el-autocomplete 移动端样式优化 */
+.info-item /deep/ .el-autocomplete {
+  width: 100%;
+}
+
+.info-item /deep/ .el-autocomplete .el-input__inner {
+  /* 确保输入框可点击和输入 */
+  pointer-events: auto !important;
+  background-color: #fff !important;
+  cursor: text !important;
+  /* 增大触摸区域 */
+  min-height: 36px;
+  padding: 0 10px;
+  /* 移动端输入优化 */
+  -webkit-user-select: text;
+  user-select: text;
+  /* 确保可以输入 */
+  -webkit-appearance: none;
+  /* 移除 iOS 输入框阴影 */
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.info-item /deep/ .el-autocomplete .el-input__inner:focus {
+  border-color: #17B3A3;
+  outline: none;
+}
+
+/* autocomplete 建议列表样式 */
+.el-autocomplete-suggestion {
+  max-height: 200px;
+}
+
+.el-autocomplete-suggestion li {
+  padding: 10px 15px;
+  line-height: 1.5;
+}
 </style>