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

<template>
  <ifrm>
    <uni-forms ref="wrForm" class="formBox" label-position="top">
      <uni-forms-item label="扫描模式：" label-width="100px" class="label-left">
        <template #label>
          <view class="required-label">
            <text>扫描模式：</text>
          </view>
        </template>
        <view class="mode-switch">
          <view
            class="switch-btn"
            :class="{ active: scanMode === 'bind' }"
            @click="handleModeChange('bind')"
          >
            送料
          </view>
          <view
            class="switch-btn"
            :class="{ active: scanMode === 'unbind' }"
            @click="handleModeChange('unbind')"
          >
            叫料
          </view>
        </view>
      </uni-forms-item>
      <uni-forms-item label="物料箱条码：" label-width="100px">
        <template #label>
          <view class="required-label">
            <text>物料箱条码：</text>
          </view>
        </template>
        <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>
          <!-- <button
            @click="handleSubmit"
            :disabled="!startData || !endCenter"
            class="submit-btn"
            :class="{ 'btn-disabled': !startData || !endCenter }"
          >
            配送
          </button> -->
        </view>
        <!-- <view v-if="boxData" class="box-info">
          <view class="info-section">
            <text class="info-text">
              包含订单:
              <text class="info-value">{{ boxData.quantity }}</text> 单
            </text>
            <text class="info-text">
              对应中心:
              <text class="info-value-center">{{ boxData.wcName }}</text>
            </text>
          </view>
          <button @click="detailsFn()" class="details-btn">
            明细 <text class="arrow">›</text>
          </button>
        </view> -->
      </uni-forms-item>
      <uni-forms-item
        label="起点站点："
        label-width="100px"
        v-if="scanMode === 'bind'"
      >
        <template #label>
          <view class="required-label">
            <text class="required-mark">*</text>
            <text>起点区域：</text>
          </view>
        </template>
        <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="100px" v-else>
        <template #label>
          <view class="required-label">
            <text class="required-mark">*</text>
            <text>起点区域：</text>
          </view>
        </template>
        <picker
          mode="selector"
          :range="startAreas"
          range-key="name"
          :value="startAreaIndex"
          @change="handleStartAreaChange"
          class="uni-input-border"
          disabled
        >
          <view class="picker-input">
            <text :class="startArea ? 'picker-value' : 'picker-placeholder'">
              {{ startArea || "请选择起点区域" }}
            </text>
          </view>
        </picker>
        <picker
          mode="selector"
          :range="startStations"
          range-key="name"
          :value="startStationIndex"
          @change="handleStartStationChange"
          class="uni-input-border"
          :disabled="!startArea"
        >
          <view class="picker-input">
            <text :class="startStation ? 'picker-value' : 'picker-placeholder'">
              {{ startStation || "请选择起点站点" }}
            </text>
          </view>
        </picker>
        <text style="color: red" v-if="startStations.length <= 0"
          >暂无可配送物料</text
        >
      </uni-forms-item>
      <uni-forms-item
        label="终点区域："
        label-width="150px"
        v-if="scanMode === 'bind'"
      >
        <template #label>
          <view class="required-label">
            <text class="required-mark">*</text>
            <text>终点区域：</text>
          </view>
        </template>
        <picker
          mode="selector"
          :range="workCenters"
          range-key="name"
          :value="endCenterIndex"
          @change="handleEndChange"
          class="uni-input-border"
        >
          <view class="picker-input">
            <text :class="endCenter ? 'picker-value' : 'picker-placeholder'">
              {{ endCenter || "请选择作业中心" }}
            </text>
          </view>
        </picker>
        <picker
          v-if="endAreas && endAreas.length > 0"
          mode="selector"
          :range="endAreas"
          range-key="name"
          :value="endAreaIndex"
          @change="handleAreaChange"
          class="uni-input-border"
          :disabled="!endCenter"
        >
          <view class="picker-input">
            <text :class="endArea ? 'picker-value' : 'picker-placeholder'">
              {{ endArea || "请选择终点区域" }}
            </text>
          </view>
        </picker>
        <!-- 终点区域选择 - 无数据时显示提示 -->
        <view v-else class="empty-tip-picker">
          <text class="empty-text">暂无数据</text>
        </view>
      </uni-forms-item>
      <uni-forms-item label="终点区域：" label-width="150px" v-else>
        <template #label>
          <view class="required-label">
            <text class="required-mark">*</text>
            <text>终点区域：</text>
          </view>
          <input
            type="text"
            v-model="endStationCode"
            placeholder="请扫描区域码"
            class="uni-input-border"
            confirm-type="done"
          />
        </template>
      </uni-forms-item>
    </uni-forms>
    <view class="footer-action">
      <button
        @click="handleSubmit"
        :disabled="canSubmit"
        class="submit-btn"
        :class="{ 'btn-disabled': canSubmit }"
      >
        配送
      </button>
    </view>
  </ifrm>
</template>

<script>
import ifrm from "@/pages/index/ifrm";

export default {
  components: {
    ifrm,
  },
  data() {
    return {
      boxCode: "",
      startCode: "",
      boxData: null,
      startData: null,
      showDetails: false,
      boxInputFocus: true,
      startInputFocus: false,
      mockBoxes: {},
      workCenters: [],
      yieldOrderList: [], //订单明细
      scanMode: "bind",
      hasData: false,
      workCenters: [], // 作业中心列表
      endAreas: [], // 终点区域列表
      endCenter: "", // 选中的作业中心
      endArea: "", // 选中的终点区域
      endCenterIndex: 0, // 作业中心选中索引
      endAreaIndex: 0, // 终点区域选中索引
      startAreas: [], // 起点区域列表
      startStations: [], // 起点站点列表
      startArea: "蓝色周转盒放置区", // 选中的起点区域
      startStation: "", // 选中的起点站点
      startAreaIndex: 0, // 起点区域选中索引
      startStationIndex: 0, // 起点站点选中索引
      endStationCode: "", //叫料终点
    };
  },
  computed: {
    canSubmit() {
      if (this.scanMode == "bind") {
        return !this.startData || !this.endCenter;
      }
      if (this.scanMode == "unbind") {
        return !this.endStationCode || !this.startStation;
      }
      // // 必须填写物料箱条码和终点作业中心
      // if (!this.endCenterIndex) {
      //   return false;
      // }

      // // 根据模式校验起点
      // if (this.scanMode == "bind") {
      //   console.log(4444444, !this.startData);
      //   // 送料模式：需要 startData
      //   return !this.startData;
      // } else if (this.scanMode == "unbind") {
      //   console.log(3333333333, !this.startStationIndex);
      //   // 叫料模式：需要 startStation
      //   return !this.startStationIndex;
      // }

      // return false;
    },
  },
  mounted() {
    this.getWorkCenterList();
  },
  onNavigationBarButtonTap(btn) {
    this.$refs.ifrm.topMenuClick(btn);
  },
  methods: {
    // 起点区域选择变化
    handleStartAreaChange(e) {
      const index = e.detail.value;
      this.startArea = this.startAreas[index].name;
      this.startAreaIndex = index;

      // 清空起点站点
      this.startStation = "";
      this.startStationIndex = 0;

      // 获取对应站点列表（从 stationCodeList 读取）
      this.getStartStationsList(this.startAreas[index].id);
    },

    // 起点站点选择变化
    handleStartStationChange(e) {
      const index = e.detail.value;
      this.startStation = this.startStations[index].name;
      this.startStationIndex = index;
    },

    // 获取起点区域列表
    getStartAreasList() {
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });

      this.$u.api
        .getStationRegion()
        .then((res) => {
          uni.hideLoading();
          const list = res.data || [];

          this.startAreas = list.map((area) => ({
            id: area.stationRegion,
            name: area.stationRegion,
            stationCodeList: area.stationCodeList || [],
          }));

          // 查找"镀前周转盒放置区"
          const targetRegion = this.startAreas.find(
            (item) => item.name == "蓝色周转盒放置区"
          );

          if (targetRegion) {
            // 默认选中该区域
            const targetIndex = this.startAreas.findIndex(
              (item) => item.id === targetRegion.id
            );

            if (targetIndex !== -1) {
              this.startArea = targetRegion.name;
              this.startAreaIndex = targetRegion.id;

              // 获取对应站点列表并默认选中第一个
              const stationCodeList = targetRegion.stationCodeList || [];
              if (stationCodeList && stationCodeList.length > 0) {
                this.startStations = stationCodeList.map((code) => ({
                  id: code,
                  name: code,
                }));
                // 站点列表默认选中第一个数据
                this.startStation = stationCodeList[0];
                this.startStationIndex = 0;
              }
            }
          } else {
            this.startArea = "蓝色周转盒放置区";
            this.startAreaIndex = "蓝色周转盒放置区";
            this.startStation = null
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: "加载区域列表失败",
            icon: "none",
          });
        });
    },

    // 获取起点站点列表（根据区域 ID）
    getStartStationsList(areaId) {
      if (!areaId) {
        this.startStations = [];
        return;
      }

      // 从 startAreas 中找到对应区域，获取 stationCodeList
      const area = this.startAreas.find((item) => item.id === areaId);

      if (area && area.stationCodeList && area.stationCodeList.length > 0) {
        // 将 stationCodeList 转换为 picker 需要的格式
        this.startStations = area.stationCodeList.map((code, index) => ({
          id: code,
          name: code,
        }));

        // 默认选中第一个站点
        if (this.startStations.length > 0) {
          this.startStation = this.startStations[0].name;
          this.startStationIndex = 0;
        }
      } else {
        this.startStations = [];
        this.startStation = "";
        this.startStationIndex = 0;
      }
    },
    // 作业中心选择变化
    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;

      // 从作业中心获取 stationRegionList 作为区域列表
      if (
        selectedWorkCenter.stationRegionList &&
        selectedWorkCenter.stationRegionList.length > 0
      ) {
        // 判断 stationRegionList 是对象数组还是字符串数组
        const firstItem = selectedWorkCenter.stationRegionList[0];

        if (typeof firstItem === "object") {
          // 对象数组
          this.endAreas = selectedWorkCenter.stationRegionList.map(
            (region) => ({
              id: region.id,
              name: region.regionName || region.name || region.areaName,
            })
          );
        } else {
          // 字符串数组
          this.endAreas = selectedWorkCenter.stationRegionList.map(
            (region, idx) => ({
              id: idx,
              name: region,
            })
          );
        }

        // 默认选中第一个区域
        if (this.endAreas.length > 0) {
          this.endArea = this.endAreas[0].name;
          this.endAreaIndex = this.endAreas[0].id;
        }
      } else {
        this.endAreas = [];
      }
    },

    // 终点区域选择变化
    handleAreaChange(e) {
      const index = e.detail.value;
      this.endArea = this.endAreas[index].name;
      this.endAreaIndex = index;
    },
    handleModeChange(mode) {
      this.scanMode = mode;
      this.hasData = false;

      // 清空物料箱数据
      this.boxCode = "";
      this.boxData = null;
      this.boxInputFocus = true;

      // 清空送料模式数据
      this.startCode = "";
      this.startData = null;
      this.startInputFocus = false;

      // 清空叫料模式数据
      this.startArea = "";
      this.startStation = "";
      this.startAreaIndex = 0;
      this.startStationIndex = 0;
      this.startAreas = [];
      this.startStations = [];

      // 清空终点数据
      this.endCenter = "";
      this.endArea = "";
      this.endCenterIndex = 0;
      this.endAreaIndex = 0;
      this.endAreas = [];

      // 叫料模式时加载起点区域列表
      if (mode === "unbind") {
        this.getStartAreasList();
      }
      uni.showToast({
        title: `已切换到${mode === "bind" ? "送料" : "叫料"}模式`,
        icon: "none",
      });
    },
    // 获取订单明细
    detailsFn() {
      this.showDetails = true;
      this.$u.api
        .boxbarcodeDetails({ boxBarcode: this.boxData.boxBarcode })
        .then((res) => {
          this.yieldOrderList = res.data.yieldOrderList;
        });
    },
    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;
        });
    },

    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;
        });
    },

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

    handleSubmit() {
      uni.showLoading({
        title: "提交中...",
      });
      let startStationCode = "";
      let query_ = {
        boxBarcode: this.boxBarcode || "", //箱条码
        // startStationCode: startStationCode, //开始站点
        // endWcId: this.endCenterIndex, //终点作业中心
        // endStationCode: this.endStationCode, //终点区域
        // stationRegion: this.endArea,
      };

      if (this.scanMode === "bind") {
        // 送料模式：从 startData 获取
        query_.startStationCode = this.startData.stationCode;
        query_.endWcId = this.endCenterIndex;
        query_.stationRegion = this.endArea;
      } else if (this.scanMode === "unbind") {
        // 叫料模式：从选中的站点获取
        query_.startStationCode = this.startStation;
        query_.endStationCode = this.endStationCode;
      }
      if (this.scanMode == "unbind" && this.endStationCode == "") {
        uni.showToast({
          title: `请选择终点区域!`,
          icon: "none",
        });
        return;
      }

      this.$u.api
        .boxBindingTesk(query_)
        .then((res) => {
          uni.showToast({
            title: `成功配送至 ${this.endCenter}!`,
            icon: "none",
          });
          uni.hideLoading();

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