huangxiaoqiang
17 小时以前 960b33fa24c47a330e51a2c24859d681ae62caeb
Code Management/PDA-FG/pages/Outbound/Outbound.vue
@@ -2,74 +2,214 @@
   <view>
      <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem">
      </uni-segmented-control>
      <view v-show="current === 0">
         <view style="padding: 5%;">
            <uni-forms label-width="120">
               <uni-forms-item label="出库区域">
                  <uni-data-select :focus="!istrue" v-model="AreaId" :localdata="range"
                     placeholder="请输选择终点区域"></uni-data-select>
            <uni-forms label-width="120">
               <!-- <uni-forms-item label="出库区域">
                  <picker mode="selector" :range="areaNames" @change="onAreaChange">
                     <view style="padding: 10px; background-color: #fff; border: 1px solid #dcdfe6; border-radius: 4px; min-height: 16px; line-height: 16px;">
                        {{ selectedAreaName || '请选择出库区域' }}
                     </view>
                  </picker>
               </uni-forms-item> -->
               <uni-forms-item label="出库起点">
                  <uni-easyinput type="text" v-model="SourceAddress" placeholder="请输入出库起点"
                     ref="targetInput" />
               </uni-forms-item>
               <uni-forms-item label="出库终点">
                  <uni-easyinput type="text" :focus="addressFocus" v-model="TargetAddress" placeholder="请输入起点"
                     ref='midInput' />
                  <uni-easyinput type="text" v-model="TargetAddress" placeholder="请输入出库终点"
                     ref="targetInput" />
               </uni-forms-item>
            </uni-forms>
            <button @click="InboundTask" type="primary" size="default" style="margin-top: 2%;">出库</button>
            <button @click="outboundTask" type="primary" size="default" style="margin-top: 2%;" :disabled="isLoading">
               {{ isLoading ? '处理中...' : '出库' }}
            </button>
         </view>
      </view>
      <u-toast ref="luToast" />
   </view>
</template>
<script>
   const innerAudioContext = uni.createInnerAudioContext();
   export default {
      data() {
         return {
            barcodeFocus:true,
            PalletCode: "",
            // 表单数据
            SourceAddress:"",
            TargetAddress: "",
            AreaId: "",
            selectedAreaName: "",
            // 区域数据
            areaList: [],      // 原始区域数据 [{id, name}]
            areaNames: [],     // 区域名称数组(用于picker显示)
            // UI控制
            items: ['出库'],
            current: 0
            current: 0,
            barcodeFocus: true,
            addressFocus: false,
            isLoading: false,   // 加载状态
         }
      },
      onLoad() {
         this.QueryAreaInfo();
         // 自动聚焦到托盘条码输入框
         setTimeout(() => {
            this.barcodeFocus = true;
         }, 100);
      },
      methods: {
         // 分段选择器点击事件
         onClickItem(e) {
            if (this.current != e.currentIndex) {
            if (this.current !== e.currentIndex) {
               this.current = e.currentIndex;
            }
         },
         // 播放语音提示
         voiceSpeech(src) {
            innerAudioContext.src = src; // '../../static/success.mp3';
            innerAudioContext.src = src;
            innerAudioContext.play();
         },
         InboundTask() {
            if (this.PalletCode.length <= 0) {
               this.$refs.luToast.show({
                  title: "托盘条码不能为空",
                  type: "error"
               })
               return;
            }
            this.$u.post('/api/Task/OutBoundTaskAsync?palletCode='+this.PalletCode+'&remark=""').then(res => {
               if (res.status) {
                  this.$refs.luToast.show({
                     title: res.message,
                     type: "success"
                  })
                  this.PalletCode = "";
                  this.barcodeFocus=true;
         // 查询区域信息
         QueryAreaInfo() {
            this.$u.post('/api/Dt_AreaInfo/QueryAreaInfo').then(res => {
               if (res.status && res.data && Array.isArray(res.data)) {
                  this.areaList = res.data;
                  this.areaNames = this.areaList.map(item => item.name);
                  // 可选:显示加载成功提示(静默加载,不弹toast)
                  console.log('区域数据加载成功', this.areaList);
               } else {
                  this.$refs.luToast.show({
                     title: res.message,
                     title: res.message || "加载区域数据失败",
                     type: "error"
                  })
                  });
               }
            })
            }).catch(err => {
               console.error('QueryAreaInfo error:', err);
               this.$refs.luToast.show({
                  title: "网络请求失败,请检查网络",
                  type: "error"
               });
            });
         },
         // 区域选择事件
         onAreaChange(e) {
            const index = e.detail.value;
            if (this.areaList[index]) {
               this.selectedAreaName = this.areaList[index].name;
               this.AreaId = this.areaList[index].id;
            }
         },
         // 出库任务
         outboundTask() {
            // 1. 表单验证
            if (!this.TargetAddress || this.TargetAddress.trim() === "") {
               this.$refs.luToast.show({
                  title: "出库终点点不能为空",
                  type: "error"
               });
               // 重新聚焦
               this.barcodeFocus = true;
               return;
            }
            if (!this.SourceAddress || this.SourceAddress.trim() === "") {
               this.$refs.luToast.show({
                  title: "出库起点不能为空",
                  type: "error"
               });
               // 重新聚焦
               this.barcodeFocus = true;
               return;
            }
            // 可选:验证出库区域
            // if (!this.AreaId) {
            //    this.$refs.luToast.show({
            //       title: "请选择出库区域",
            //       type: "error"
            //    });
            //    return;
            // }
            // 防止重复提交
            if (this.isLoading) return;
            this.isLoading = true;
            // 构建请求参数
            const params = {
               Position: this.SourceAddress.trim(),
               TargetAddress: this.TargetAddress,
               // AreaId: this.AreaId,
            };
            // 发送请求
            this.$u.post('/api/Task/RequestOutboundTaskAsync', params).then(res => {
               this.isLoading = false;
               if (res.status) {
                  this.$refs.luToast.show({
                     title: res.message || "出库任务创建成功",
                     type: "success"
                  });
                  // 播放成功提示音
                  this.voiceSpeech('../../static/success.mp3');
                  // 重置表单
                  this.SourceAddress = "";
                  this.TargetAddress = "";
                  // 保留区域选择,不清空
                  // this.AreaId = "";
                  // this.selectedAreaName = "";
                  // 重新聚焦到托盘条码输入框
                  this.barcodeFocus = false;
                  this.$nextTick(() => {
                     this.barcodeFocus = true;
                  });
               } else {
                  this.$refs.luToast.show({
                     title: res.message || "出库任务创建失败",
                     type: "error"
                  });
                  // 失败时重新聚焦
                  this.barcodeFocus = true;
               }
            }).catch(err => {
               this.isLoading = false;
               console.error('OutboundTask error:', err);
               this.$refs.luToast.show({
                  title: "网络请求失败,请重试",
                  type: "error"
               });
               this.barcodeFocus = true;
            });
         },
         // 重置表单(如需手动重置)
         resetForm() {
            this.PalletCode = "";
            this.TargetAddress = "";
            this.barcodeFocus = true;
         }
      },
      // 页面卸载时销毁音频
      onUnload() {
         innerAudioContext.destroy();
      }
   }
</script>