Selaa lähdekoodia

feat(photography): 优化货号输入流程

- 为货号输入框添加 ref 属性,便于后续操作
- 在货号验证失败时,自动聚焦输入框,提升用户体验
- 完善错误提示信息,明确告知用户需在左侧第一步输入货号
panqiuyao 4 kuukautta sitten
vanhempi
commit
36283d39ac
1 muutettua tiedostoa jossa 6 lisäystä ja 3 poistoa
  1. 6 3
      frontend/src/views/Photography/shot.vue

+ 6 - 3
frontend/src/views/Photography/shot.vue

@@ -25,7 +25,7 @@
             <div class="step-content flex-row justify-between">
               <div class="method-container flex-col">
                 <div class="input-container flex-row">
-                  <el-input class="input-item" v-model="goods_art_no" placeholder="请输入货号"> </el-input>
+                  <el-input class="input-item" ref="goodsArtNo" v-model="goods_art_no" placeholder="请输入货号"> </el-input>
 
                 </div>
                 <div class="auto-method flex-row justify-between">
@@ -600,6 +600,7 @@ const oneClickStop = ()=>{
     })
   }
 }
+const goodsArtNo = ref()
 /**
  * 页面挂载时初始化事件监听器并获取初始数据。
  */
@@ -611,7 +612,8 @@ onMounted(async () => {
     if (result.code === 0 && result.data?.data) {
       console.log(goods_art_no.value);
       if(!goods_art_no.value){
-          ElMessage.error('请先扫描货号或者手动输入货号!')
+          ElMessage.error('请在左侧第一步中,先扫描货号或者手动输入货号!')
+          goodsArtNo.value?.focus() // 聚焦输入框
           return;
       }
       runGoods({
@@ -732,7 +734,8 @@ const onRemoteControl = (type)=>{
 
 
   if(!goods_art_no.value){
-    ElMessage.error('请先扫描货号或者手动输入货号!')
+    ElMessage.error('请在左侧第一步中,先扫描货号或者手动输入货号!')
+    goodsArtNo.value?.focus() // 聚焦输入框
     return;
   }
   let action = '执行左脚程序'