jonhon-mes-PDA/pages/logistics/intoStock.vue

<template>
  <ifrm>
    <uni-forms ref="wrForm" class="formBox" label-position="top">
      <!-- 1. 物料箱条码 (使用 oneInput) -->
      <uni-forms-item label="物料箱条码：" label-width="100px">
        <view class="bottom-input-row">
          <view class="weight-input-wrapper">
            <view class="input-box">
              <input
                type="text"
                v-model="oneInput"
                @input="oneInputBlur"
                placeholder="物料箱条码"
                class="uni-input-border"
                confirm-type="done"
                :focus="boxInputFocus"
                :key="'box-' + boxInputFocus"
              />
            </view>
          </view>
        </view>
      </uni-forms-item>

      <!-- 2. 起点站点 (使用 twoInput) -->
      <uni-forms-item label="起点站点：" label-width="100px">
        <input
          type="text"
          v-model="twoInput"
          @input="twoInputBlur"
          placeholder="站点码"
          class="uni-input-border"
          confirm-type="done"
          :focus="startInputFocus"
          :key="'start-' + startInputFocus"
        />
        <view v-if="startData" class="start-confirm">
          <text class="check-icon">✓</text>
          <text class="confirm-text">已确认: {{ startData.stationName }}</text>
        </view>
      </uni-forms-item>

      <!-- 3. 终点区域 (保持 Picker 不变) -->
      <uni-forms-item label="终点区域：" label-width="150px">
        <picker
          mode="selector"
          :range="workCenters"
          range-key="name"
          :value="endCenterIndex"
          @change="handleEndChange"
          class="uni-input-border"
          disabled
        >
          <view class="picker-input">
            <text :class="endCenter ? 'picker-value' : 'picker-placeholder'">
              {{ endCenter || "请选择终点" }}
            </text>
          </view>
        </picker>
      </uni-forms-item>
    </uni-forms>

    <view class="footer-action">
      <button @click="handleSubmit" class="submit-btn">回库</button>
    </view>
  </ifrm>
</template>

<script>
import ifrm from "@/pages/index/ifrm";
import inputBlur from '@/mixin/inputBlur.js'; // 引入 mixin

export default {
  mixins: [inputBlur], // 注册 mixin
  components: {
    ifrm,
  },
  data() {
    return {
      // 移除 boxCode, startCode，改用 mixin 的 oneInput, twoInput
      
      boxInputFocus: true,
      startInputFocus: false,
      
      startData: null,
      workCenters: [], 
      endCenterIndex: null,
      endCenter: "",
    };
  },
  mounted() {
    this.getWorkCenterList();
  },
  methods: {
    // 【核心】实现 mixin 回调：处理物料箱扫码
    oneInputData(val) {
      if (!val) return;
      const code = val.trim();
      this.handleBoxConfirmLogic(code);
    },

    // 【核心】实现 mixin 回调：处理起点站点扫码
    twoInputData(val) {
      if (!val) return;
      const code = val.trim();
      this.handleStartConfirmLogic(code);
    },

    // 原 handleBoxConfirm 逻辑抽取
    handleBoxConfirmLogic(code) {
      if (!code) return;
      
      // 这里可以保留 API 调用，如果不需要校验可以直接跳转焦点
      // this.$u.api.getQuantityLocation({ boxBarcode: code }).then((res) => { ... });
      
      uni.showToast({ title: '物料箱已扫描', icon: 'none' });
      
      // 焦点跳转：跳到起点站点
      this.boxInputFocus = false;
      this.startInputFocus = true;
    },

    // 原 handleStartConfirm 逻辑抽取
    handleStartConfirmLogic(code) {
      if (!code) return;
      
      this.$u.api
        .getStationName({ stationCode: code })
        .then((res) => {
          console.log("起点站点", res.data);
          this.startData = res.data;
          uni.showToast({ title: '起点确认成功', icon: 'none' });
          
          // 焦点处理：起点确认后，通常不需要再聚焦输入框，或者可以跳回物料箱准备下一次任务
          this.startInputFocus = false;
          // 如果想连续作业，可以跳回物料箱：
          // this.clearTwoInput();
          // this.startInputFocus = false;
          // this.boxInputFocus = true;
        })
        .catch(err => {
           uni.showToast({ title: err || '站点查询失败', icon: 'none' });
           this.clearTwoInput();
           this.startInputFocus = false;
           this.$nextTick(() => { this.startInputFocus = true; });
        });
    },

    // 获取作业中心列表
    getWorkCenterList() {
      this.$u.api.getWorkCenter().then((res) => {
        this.workCenters = res.data.map((c) => ({
          id: c.id,
          name: c.wcName,
          stationRegionList: c.stationRegionList,
        }));

        // 默认选择逻辑
        const defaultItemIndex = this.workCenters.findIndex(
          (item) => item.name && item.name.includes("输送线终点")
        );
        if (defaultItemIndex !== -1) {
          this.endCenterIndex = this.workCenters[defaultItemIndex].id; 
          this.endCenter = this.workCenters[defaultItemIndex].name;
        }
      });
    },

    handleEndChange(e) {
      const index = e.detail.value;
      const selectedWorkCenter = this.workCenters[index];
      this.endCenter = selectedWorkCenter.name;
      this.endCenterIndex = selectedWorkCenter.id;
    },

    handleSubmit() {
      // 使用 mixin 变量 oneInput 和 twoInput 进行校验
      if (!this.twoInput) {
        uni.showToast({
          title: `请扫描起点区域!`,
          icon: "none",
        });
        return;
      }
      if (this.endCenterIndex == null) {
        uni.showToast({
          title: `无输送线终点站点!`,
          icon: "none",
        });
        return;
      }
      
      uni.showLoading({
        title: "提交中...",
      });
      
      let query = {
         boxBarcode: this.oneInput || "", // 使用 mixin 变量
         endWcId: this.endCenterIndex,
         startStationCode: this.twoInput, // 使用 mixin 变量
      };
      
      this.$u.api
        .boxBindingTesk(query)
        .then((res) => {
          uni.showToast({
            title: `成功配送至 ${this.endCenter}!`,
            icon: "none",
          });
          uni.hideLoading();

          // 提交成功后清空所有输入并重置焦点
          this.clearInput(); // 调用 mixin 的清空方法
          this.startData = null;
          this.boxInputFocus = true;
          this.startInputFocus = false;
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({ title: err || '提交失败', icon: 'none' });
          
          // 失败时也清空并重置焦点，方便重试
          this.clearInput();
          this.startData = null;
          this.boxInputFocus = true;
          this.startInputFocus = false;
        });
    },
  },
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;
  user-select: none;
  font-size: 26rpx;
  position: relative;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rpx 16rpx;
  background-color: #1d4ed8;
  color: #ffffff;
  flex-shrink: 0;
  z-index: 20;
}

.header-title {
  font-weight: bold;
  font-size: 28rpx;
  letter-spacing: 1rpx;
}

.content-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.module {
  padding: 16rpx;
  border-bottom: 4rpx solid #e2e8f0;
}

.module-header {
  display: flex;
  align-items: center;
  color: #1e293b;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.module-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}

.module-title {
  font-size: 26rpx;
}

.scan-input {
  width: 100%;
  padding: 16rpx;
  background-color: #ffffff;
  border: 4rpx solid #94a3b8;
  border-radius: 4rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #0f172a;
}

.scan-input::placeholder {
  color: #94a3b8;
  font-weight: normal;
}

.box-info {
  margin-top: 12rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8fafc;
  padding: 12rpx;
  border-radius: 4rpx;
  border: 2rpx solid #e2e8f0;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  flex: 1;
}

.info-text {
  color: #475569;
  font-size: 26rpx;
}

.info-value {
  font-weight: bold;
  color: #0f172a;
  margin-left: 4rpx;
}

.info-value-center {
  font-weight: bold;
  color: #1d4ed8;
  margin-left: 4rpx;
}

.details-btn {
  color: #1d4ed8;
  background-color: #dbeafe;
  font-weight: bold;
  border: 2rpx solid #bfdbfe;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}

.details-btn:active {
  background-color: #bfdbfe;
}

.arrow {
  margin-left: 4rpx;
  font-size: 24rpx;
}

.start-confirm {
  margin-top: 8rpx;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #059669;
}

.check-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}

.confirm-text {
  font-size: 26rpx;
}

.picker-input {
  width: 100%;
  padding: 16rpx;
}

.picker-disabled {
  opacity: 0.5;
}

.picker-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #0f172a;
}

.picker-placeholder {
  font-size: 28rpx;
  color: #94a3b8;
}

.footer {
  padding: 16rpx;
  background-color: #f1f5f9;
  border-top: 2rpx solid #cbd5e1;
  flex-shrink: 0;
}

.submit-btn {
  width: 100%;
  background-color: #1d4ed8;
  color: #ffffff;
  padding: 20rpx;
  border-radius: 4rpx;
  font-weight: bold;
  font-size: 30rpx;
  border: none;
}

.submit-btn:active {
  background-color: #1e40af;
}

.btn-disabled {
  opacity: 0.5;
  background-color: rgba(29, 78, 216, 0.5);
}

/* Popup Styles */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: flex-end;
}

.popup-content {
  background-color: #ffffff;
  border-radius: 16rpx 16rpx 0 0;
  max-height: 70vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 4rpx solid #94a3b8;
}

.popup-header {
  padding: 24rpx;
  background-color: #ffffff;
  border-bottom: 4rpx solid #e2e8f0;
  flex-shrink: 0;
  text-align: center;
}

.popup-title {
  font-weight: bold;
  font-size: 30rpx;
  color: #0f172a;
  text-align: center;
}

.popup-scroll {
  flex: 1;
  padding: 24rpx;
  overflow-y: auto;
  width: auto;
}

.popup-orders {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.popup-order-item {
  background-color: #f8fafc;
  padding: 16rpx;
  border: 2rpx solid #cbd5e1;
  border-radius: 4rpx;
}

.popup-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.popup-order-no {
  font-weight: bold;
  color: #0f172a;
  font-size: 26rpx;
}

.popup-order-qty {
  color: #1d4ed8;
  font-weight: bold;
  font-size: 26rpx;
}

.popup-order-name {
  color: #475569;
  font-size: 24rpx;
}

.popup-footer {
  padding: 16rpx;
  background-color: #f1f5f9;
  border-top: 2rpx solid #cbd5e1;
  flex-shrink: 0;
}

.popup-close-btn {
  width: 100%;
  background-color: #ffffff;
  border: 4rpx solid #94a3b8;
  color: #1e293b;
  padding: 16rpx;
  border-radius: 4rpx;
  font-weight: bold;
  font-size: 28rpx;
}

.popup-close-btn:active {
  background-color: #e2e8f0;
}

.help-tip {
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0.5;
  z-index: 10;
}

.tip-content {
  background-color: #1e293b;
  color: #ffffff;
  font-size: 20rpx;
  padding: 8rpx 16rpx;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
}

.tip-icon {
  margin-right: 8rpx;
  font-size: 24rpx;
}

.tip-text {
  font-size: 20rpx;
}

.bottom-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.weight-input-wrapper {
  flex: 1;
}

.submit-btn {
  width: 88px;
  height: 50px;
  background-color: #155dfc;
  border-radius: 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border: none;
  padding: 0;
  line-height: 50px;
}

.submit-btn.disabled {
  opacity: 0.5;
}
.mode-switch {
  display: flex;
  width: 140px;
  height: 34px;
  border-radius: 4px;
  border: 1px solid rgba(21, 93, 252, 1);
  overflow: hidden;
  margin-left: auto;
}

.switch-btn {
  flex: 1;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: rgba(21, 93, 252, 1);
  background-color: #fff;
  transition: all 0.2s;
}

.switch-btn.active {
  background-color: rgba(21, 93, 252, 1);
  color: #fff;
}
.label-left {
  flex-direction: row !important;
  margin-top: 20rpx;
}
/* 底部固定按钮区域 */
.footer-action {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 32rpx;
  background-color: #ffffff;
  border-top: 2rpx solid #e2e8f0;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
  z-index: 50;
}
.picker-input {
  width: 100%;
  padding: 16rpx;
}

.picker-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #0f172a;
}

.picker-placeholder {
  font-size: 28rpx;
  color: #94a3b8;
}

/* 禁用状态 */
.picker-input.disabled {
  opacity: 0.5;
  background-color: #f1f5f9;
}
.uni-input-border {
  margin-bottom: 20rpx;
}
.required-label {
  display: flex;
  align-items: center;
}

.required-mark {
  color: #ff0000;
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 4rpx;
}
/* 空数据提示样式 */
.empty-tip-picker {
  width: 100%;
  padding: 16rpx;
  background-color: #f8fafc;
  border: 2rpx solid #e2e8f0;
  border-radius: 4rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  color: #94a3b8;
  font-size: 28rpx;
  text-align: center;
  display: block;
}

.uni-input-border {
  margin-bottom: 20rpx;
}
</style>