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

<template>
  <ifrm>
    <uni-forms ref="wrForm" class="formBox" label-position="top">
      <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="boxCode"
                @confirm="handleBoxConfirm"
                placeholder="物料箱条码"
                class="uni-input-border"
                confirm-type="done"
                :focus="boxInputFocus"
              />
            </view>
          </view>
        </view>
       
      </uni-forms-item>
      <uni-forms-item label="起点站点：" label-width="100px">
        <input
          type="text"
          v-model="startCode"
          @confirm="handleStartConfirm"
          placeholder="站点码"
          class="uni-input-border"
          confirm-type="done"
          :focus="startInputFocus"
        />
        <view v-if="startData" class="start-confirm">
          <text class="check-icon">✓</text>
          <text class="confirm-text">已确认: {{ startData.stationName }}</text>
        </view>
      </uni-forms-item>
      <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";
export default {
  components: {
    ifrm,
  },
  data() {
    return {
      boxCode: "",
      boxInputFocus:true,
      startCode: "", //起点站点
      startInputFocus: true, //起点站点输入框聚焦
      startData: null,
      workCenters: [], //作业中心
      endCenterIndex: null,
      endCenter: "", //
    };
  },
  mounted() {
    this.getWorkCenterList();
  },
  methods: {
    handleBoxConfirm() {
      const code = this.boxCode.trim();
      if (!code) return;
      // this.$u.api
      //   .getQuantityLocation({ boxBarcode: this.boxCode })
      //   .then((res) => {
      //     this.boxData = res.data;
          this.boxInputFocus = false;
          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; // 设置 Picker 索引
          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;

      // 清空终点区域
      this.endArea = "";
      this.endAreaIndex = 0;
    },
    handleStartConfirm() {
      const code = this.startCode.trim();
      if (!code) return;
      this.$u.api
        .getStationName({ stationCode: this.startCode })
        .then((res) => {
          console.log("起点站点", res.data);
          this.startData = res.data;
          this.startInputFocus = false;
        });
    },
    handleSubmit() {
      if (this.startCode == "") {
        uni.showToast({
          title: `请扫描起点区域!`,
          icon: "none",
        });
        return;
      }
      if (this.endCenterIndex == null) {
        uni.showToast({
          title: `无输送线终点站点!`,
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "提交中...",
      });
      let query = {
         boxBarcode: this.boxCode || "", //箱条码
        endWcId: this.endCenterIndex,
        startStationCode: this.startCode,
      };
      this.$u.api
        .boxBindingTesk(query)
        .then((res) => {
          uni.showToast({
            title: `成功配送至 ${this.endCenter}!`,
            icon: "none",
          });
          uni.hideLoading();

          this.startCode = "";
          this.boxCode = ""
          this.startData = null;
          this.startInputFocus = true;
        })
        .catch((err) => {
          uni.hideLoading();
           this.startCode = "";
           this.boxCode = ""
          this.startData = null;
          this.startInputFocus = true;
        });
    },
  },
};
</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>