aiot-app/pages/pda/picking/details.vue

<template>
  <view class="page-container">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="领料"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="refresh-bar" v-if="clientEnvironmentId == 21">
      <u-button
        type="success"
        size="small"
        class="refresh-btn"
        @click="undatePicking()"
        text="刷新库存"
      ></u-button>
    </view>

    <view class="scroll-area">
      <u-list @scrolltolower="scrolltolower">
        <view v-for="(item, index) in List" :key="index" class="order-card">
          <!-- 卡片头部 -->
          <view class="card-header">
            <view class="header-left">
              <view class="serial-num">{{ index + 1 }}</view>
              <text class="order-code">工单编号:{{ item.code }}</text>
            </view>
            <view
              class="header-right"
              v-if="clientEnvironmentId !== 9 && isOutsource == 0"
              @click.stop="addPicking(item.workOrderId, item)"
            >
              <view class="add-btn-native">添加物料</view>
            </view>
          </view>

          <!-- 操作栏 -->
          <view class="action-bar">
            <view class="select-all-btn" @click="selectAll(item.pickList)">
              全选/取消
            </view>
          </view>

          <!-- 物料列表 -->
          <view
            class="material-item"
            v-for="(mate, idx) in item.pickList"
            :key="idx"
          >
            <view class="check-col" @click="mate.checked = !mate.checked">
              <view
                class="checkbox"
                :class="{ 'checkbox--active': mate.checked }"
              >
                <u-icon
                  size="28"
                  v-if="mate.checked"
                  name="checkbox-mark"
                ></u-icon>
              </view>
            </view>

            <view class="material-detail">
              <view class="detail-row">
                <view class="detail-label">物料编码</view>
                <view class="detail-value text-ellipsis">
                  {{ mate.categoryCode }}
                </view>
                <view class="delete-btn" @click.stop="deletePick(index, idx)">
                  <u-icon name="close" size="28" color="#F56C6C"></u-icon>
                </view>
              </view>

              <view class="detail-row">
                <view class="detail-label">名称</view>
                <view class="detail-value text-ellipsis">
                  {{ mate.categoryName }}
                </view>
              </view>

              <view class="detail-row detail-row--split">
                <view class="split-cell split-cell--left">
                  <view class="detail-label">型号</view>
                  <view class="detail-value text-ellipsis">
                    {{ mate.modelType }}
                  </view>
                </view>
                <view class="split-cell split-cell--right">
                  <view class="detail-label detail-label--sm">规格</view>
                  <view class="detail-value text-ellipsis">
                    {{ mate.specification }}
                  </view>
                </view>
              </view>

              <view class="detail-row detail-row--split">
                <view class="split-cell split-cell--left">
                  <view class="detail-label">类型</view>
                  <view class="detail-value">
                    {{ typeName[Number(mate.rootCategoryLevelId)] }}
                  </view>
                </view>
                <view class="split-cell split-cell--right">
                  <view class="detail-label detail-label--sm">数量</view>
                  <view class="detail-value detail-value--input">
                    <input
                      class="qty-input"
                      v-model="mate.demandQuantity"
                      type="digit"
                      :disabled="clientEnvironmentId == 9"
                      @input="changeInput(mate, idx, index)"
                    />
                    <text class="qty-unit">{{ mate.unit }}</text>
                  </view>
                </view>
              </view>

              <view class="detail-row">
                <view class="detail-label">计量库存数量</view>
                <view class="detail-value detail-value--stock">
                  <view
                    v-for="it of mate.warehouseList"
                    :key="it.warehouse_id || it.id"
                  >
                    <view
                      v-if="it.availableCountBase != '0'"
                      class="stock-item"
                      @click="chooseInventoryData(mate, it, idx)"
                    >
                      {{ it.name ? it.name : it.warehouse_name }}库存数：
                      <text class="stock-num">{{ it.availableCountBase }}</text>
                      {{ mate.measuringUnit }}，
                      <text v-if="it.lockQuantity || it.lockQuantity == 0">
                        锁库数：<text class="stock-lock-num">{{ it.lockQuantity }}</text>{{ mate.measuringUnit }}
                      </text>
                    </view>
                  </view>
                </view>
              </view>

              <view class="detail-row">
                <view class="detail-label">领料仓库</view>
                <view class="detail-value detail-value--select">
                  <zxz-uni-data-select
                    :localdata="mate.warehouseList"
                    v-model="mate.warehouseIdList"
                    dataValue="warehouse_id"
                    format="{warehouse_name}"
                    dataKey="warehouse_name"
                    :clear="false"
                    multiple
                  ></zxz-uni-data-select>
                </view>
              </view>

              <view class="detail-row" v-if="clientEnvironmentId == 21">
                <view class="detail-label">库存可用量</view>
                <view class="detail-value">{{ mate.waitOutInWeight }}</view>
              </view>
            </view>
          </view>

          <!-- 子组件区域 -->
          <view class="sub-components">
            <instanceBom
              :list="item.instanceList2"
              :warehouseList="warehouseList"
            ></instanceBom>

            <modelBom
              :workOrderId="item.workOrderId"
              :modelList="item.modelList"
              :warehouseList="warehouseList"
              :modelList2="item.modelList2"
              :code="item.code"
              @hendDel="hendDel"
            ></modelBom>

            <boatBom
              :palletList="item.palletList"
              :palletList2="item.palletList2"
              :code="item.code"
              :warehouseList="warehouseList"
              :resObj="item"
              @hendDel="hendDel"
            ></boatBom>

            <packingBom
              :list="item.packingList2"
              :warehouseList="warehouseList"
            ></packingBom>

            <semiProductBom
              :warehouseList="warehouseList"
              :list="[
                ...item.semiProductList2,
                ...item.productList2,
                ...item.junkProductList2,
              ]"
            ></semiProductBom>

            <view style="height: 80rpx"></view>

            <view class="exist-pick-btn" v-if="isPick" @click="openDetails">
              已有领料单
            </view>
          </view>
        </view>

        <view class="outsource-bar" v-if="isOutsource == 1">
          <view class="outsource-link" @click="getListOutsource()">
            重新获取委外领料单
          </view>
        </view>
      </u-list>
    </view>

    <!-- 弹窗 -->
    <u-popup
      :show="warehouseShow"
      mode="center"
      v-if="warehouseShow"
      :closeOnClickOverlay="false"
    >
      <view class="popup-content">
        <view class="popup-title">选择领料仓库</view>
        <view class="popup-body">
          <zxz-uni-data-select
            :localdata="warehouseList"
            v-model="warehouseId"
            dataValue="id"
            format="{name}"
            dataKey="name"
            filterable
            :clear="false"
          ></zxz-uni-data-select>
        </view>
        <view class="popup-footer">
          <u-button
            size="small"
            class="popup-btn"
            @click="warehouseShow = fasle"
          >
            取消
          </u-button>
          <u-button
            type="success"
            size="small"
            class="popup-btn"
            @click="handOK"
          >
            确认
          </u-button>
        </view>
      </view>
    </u-popup>

    <!-- 底部提交按钮 -->
    <view class="footer-bar">
      <view class="submit-btn" @click="save">{{ submitText }}</view>
    </view>

    <outsourceOrder
      ref="outsourceRef"
      @outsourceEmit="outsourceFn"
    ></outsourceOrder>
  </view>
</template>

<script>
import instanceBom from "./components/instanceBom.vue";
import modelBom from "./components/modelBom.vue";
import boatBom from "./components/boatBom.vue";
import packingBom from "./components/packingBom";
import semiProductBom from "./components/semiProductBom";
import outsourceOrder from "./components/outsourceOrder";
import { typeName } from "./components/common.js";
import {
  znPdaPage,
  workorderList,
  listOutsourceInWarehouse,
  listOutsource,
  currentStockQuery,
  getInventoryTotal,
} from "@/api/pda/workOrder.js";
import { VirtualPagination } from "@/utils/pages.js";

import {
  batchSave,
  pickDetails,
  findVoucherList,
  batchPcSave,
  getCode,
} from "@/api/pda/picking.js";
import { getWarehouseList } from "@/api/warehouseManagement";
import { forIn } from "lodash";
export default {
  components: {
    instanceBom,
    modelBom,
    boatBom,
    packingBom,
    semiProductBom,
    outsourceOrder,
  },
  data() {
    return {
      isType: true,
      warehouseShow: false,
      warehouseId: "",
      warehouseList: [],
      idsList: [],
      List: [],
      currentId: "",
      pagination: null,
      classificationList: [], //分类数据
      newListOne: [],
      taskId: null,
      isPick: false,
      isOutsource: 0,
      clientEnvironmentId:
        uni.getStorageSync("userInfo") &&
        uni.getStorageSync("userInfo").clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境
      submitText: "提交",
      pickName: "",
      pickCode: "",
      typeName,
    };
  },
  onLoad(options) {
    console.log(options, "1111111111");

    let queryArray = decodeURIComponent(options.arr);
    getWarehouseList().then((res) => {
      this.warehouseList = res.data;
    });

    this.idsList = JSON.parse(queryArray);
    this.isOutsource = Number(options.isOutsource) || 0;

    this.taskId = options.taskId;

    console.log(this.clientEnvironmentId, "this.clientEnvironmentId");

    if (this.clientEnvironmentId == 21) {
      this.getZnList();
    } else {
      this.getList();
    }

    if (this.idsList.length == 1) {
      this.getPick();
    }

    if (this.isOutsource == 1) {
      this.getListOutsource();
    }
  },
  onShow() {
    uni.$off("setSelectList");

    uni.$on("setSelectList", (selectList, id) => {
      selectList.forEach((item) => {
        item.code = item.categoryCode;
        item.name = item.categoryName;
        item.modelType = item.modelType ? item.modelType : item.categoryModel;
        item.measuringUnit = item.measuringUnit
          ? item.measuringUnit
          : item.measureUnit;
        item.unit = item.unit ? item.unit : item.measureUnit;
        // item.categoryCode = item.categoryCode ? item.categoryCode : item.code;
        // item.categoryName = item.categoryName ? item.categoryName : item.name;
        // item.modelType = item.modelType ? item.modelType : item.categoryModel;
        // item.unit = item.unit ? item.unit : item.measureUnit;
        // item.measuringUnit = item.measuringUnit
        //   ? item.measuringUnit
        //   : item.measureUnit;
        // item.warehouseList = item.warehouseList
        //   ? item.warehouseList
        //   : item.warehouseLists;
      });

      this.List.forEach((e) => {
        if (e.id == id) {
          e.pickList = [...e.pickList, ...selectList];
          this.$forceUpdate();
        }
      });
    });
  },

  methods: {
    deletePick(orderIndex, pickIndex) {
      this.List[orderIndex].pickList.splice(pickIndex, 1);
      this.$forceUpdate();
    },

    selectAll(list) {
      if (Array.isArray(list) && list.length) {
        // let a = list.some(v=>v.checked = true)
        // ture 就是取消 false 就是选中
        if (this.isType) {
          list.map((d) => {
            d.checked = false;
          });
          this.isType = false;
        } else {
          list.map((d) => {
            d.checked = true;
          });
          this.isType = true;
        }
      }

      console.log(list, "list");
    },

    //刷新库存

    async undatePicking() {
      uni.showLoading({
        title: "加载中...",
      });
      const res = await currentStockQuery(this.idsList[0]);
      uni.hideLoading();

      this.getZnList();
    },

    warehouseShowFn(tiemId) {
      this.warehouseShow = true;
      this.currentId = tiemId;
    },
    handOK() {
      let index = this.List.findIndex((item) => item.id == this.currentId);
      // this.$set(this.List[index], 'warehouseId', this.warehouseId)
      console.log(this.List[index], "this.List[index]");
      for (let key in this.List[index]) {
        if (
          [
            "instanceList2",
            "modelList2",
            "palletList2",
            "packingList2",
            "semiProductList2",
            "productList2",
            "junkProductList2",
            "bomList",
            "pickList",
          ].includes(key)
        ) {
          this.List[index][key].forEach((item, i) => {
            this.$set(
              this.List[index][key][i],
              "warehouseId",
              this.warehouseId,
            );
          });
        }
      }
      this.warehouseShow = false;
      this.currentId = "";
    },

    scrolltolower() {
      let arr = this.pagination ? this.pagination.nextPage() : [];
      if (arr && arr.length) {
        this.List[0].bomList = [...this.List[0].bomList, ...arr];
      }
    },

    save() {
      if (this.List.length > 0) {
        let bol;
        let _i;
        bol = this.List.every((e, i) => {
          _i = i;
          return (
            Object.prototype.hasOwnProperty.call(e, "pickList") &&
            e.pickList.length > 0
          );
        });

        if (!bol) {
          // this.$message.warning(
          //   `生成工单${this.workList[_i].code}领料不能为空`
          // );
          uni.showToast({
            title: `生成工单${this.List[_i].code}领料不能为空`,
            icon: "none",
          });
          return false;
        }
      }

      if (this.List.length > 0) {
        let name;
        let bol2;
        let _i;

        this.List.forEach((e, i) => {
          _i = i;
          console.log(e.pickList);
          bol2 = e.pickList.every((y) => {
            name = y.name;
            return (
              Object.prototype.hasOwnProperty.call(y, "demandQuantity") &&
              Number(y.demandQuantity) > 0
            );
          });
        });

        if (!bol2) {
          // this.$message.warning(
          //   `${this.workList[_i].code}的${name}数量不能为空`
          // );
          uni.showToast({
            title: `${this.List[_i].code}的${name}数量不能为空`,
            icon: "none",
          });
          return false;
        }
      }

      let _arr = [];
      _arr = this.List.map((m) => {
        m.instanceList = [];
        m.bomDetailDTOSList = [];
        m.pickList.forEach((e) => {
          if (
            Object.prototype.hasOwnProperty.call(e, "isBom") &&
            e.isBom == 1
          ) {
            m.bomDetailDTOSList.push(e);
          } else {
            m.instanceList.push(e);
          }
        });

        m.workOrderId = m.id;

        return {
          ...m,
        };
      });

      let param = {
        allPickList: _arr,
        pickName: this.pickName,
        pickCode: this.pickCode,
      };
      batchPcSave(param)
        .then((res) => {
          uni.navigateTo({
            url: `/pages/pda/picking/index/index?pickStatus=1`,
          });
          // this.loadingBtn = false;
          // this.$message.success("领料成功");
          // this.$emit("close", true);
        })
        .catch((err) => {
          // this.loadingBtn = false;
        });

      // batchPcSave
    },
    // 中赢保存
    getZnList() {
      znPdaPage({
        // ids: ,
        workId: this.idsList[0],
      }).then((res) => {
        if (res?.length) {
          let List = res.map((m) => {
            m.workOrderId = m.id;
            let modelList = [];
            let palletList = [];
            // let bomList = []

            // m.bomDetailDTOS.forEach((f, i) => {

            // 	if (f.rootCategoryLevelId == 5) {
            // 		f.automatic = 2
            // 		modelList = modelList.concat(f)
            // 	}

            // 	if (f.rootCategoryLevelId == 8) {
            // 		f.automatic = 2
            // 		palletList = palletList.concat(f)
            // 	}
            // 	if (f.rootCategoryLevelId != 5 && f.rootCategoryLevelId != 8) {
            // 		f.automatic = 2
            // 		bomList = bomList.concat(f)
            // 	}

            // })

            m["modelList"] = modelList;
            m["palletList"] = palletList;
            // m['bomList'] = bomList

            m["modelList2"] = [];
            m["instanceList2"] = [];
            m["palletList2"] = [];
            m["packingList2"] = [];
            m["semiProductList2"] = [];
            m["productList2"] = [];
            m["junkProductList2"] = [];

            delete m.id;
            return {
              ...m,
            };
          });

          this.newListOne = JSON.parse(JSON.stringify(List));

          this.pagination = new VirtualPagination(List[0].bomList, 10);

          List[0].bomList = this.pagination.getCurrentPageData();

          this.List = List;
        }
      });
    },

    deepCopy(obj, hash = new WeakMap()) {
      if (obj === null) return null;
      if (obj instanceof Date) return new Date(obj);
      if (obj instanceof RegExp) return new RegExp(obj);
      if (typeof obj !== "object" && typeof obj !== "function") return obj;
      if (hash.has(obj)) return hash.get(obj);

      const result = Array.isArray(obj) ? [] : {};
      hash.set(obj, result);

      return Object.keys(obj).reduce((acc, key) => {
        acc[key] = this.deepCopy(obj[key], hash);
        return acc;
      }, result);
    },

    changeInput(item, idx, index) {
      if (Number(item.demandQuantity) >= Number(item.availableCountBase)) {
        this.$set(
          this.List[index].pickList[idx],
          "demandQuantity",
          Number(item.availableCountBase),
        );
        const idsList = [];
        item.warehouseList.forEach((it) => {
          idsList.push(it.warehouse_id);
        });
        this.$set(this.List[index].pickList[idx], "warehouseIdList", idsList);
        this.$forceUpdate();
      } else if (!Number(item.demandQuantity)) {
        this.$set(this.List[index].pickList[idx], "warehouseIdList", []);
        this.$forceUpdate();
      } else {
        const idsList = [];
        let totalNum = 0;
        for (let i = 0; i < item.warehouseList.length; i++) {
          totalNum += Number(item.warehouseList[i].availableCountBase);
          if (Number(item.demandQuantity) > totalNum) {
            idsList.push(item.warehouseList[i].warehouse_id);
          } else {
            idsList.push(item.warehouseList[i].warehouse_id);
            break;
          }
        }
        this.$set(this.List[index].pickList[idx], "warehouseIdList", idsList);
        this.$forceUpdate();
      }
    },

    getList() {
      workorderList({
        ids: this.idsList,
        taskId: this.taskId,
      }).then((res) => {
        this.List = res.map((m) => {
          m.workOrderId = m.id;
          let modelList = [];
          let palletList = [];
          let bomList = [];

          m.bomDetailDTOS.forEach((f, i) => {
            if (f.rootCategoryLevelId == 5) {
              f.automatic = 2;
              modelList = modelList.concat(f);
            }

            if (f.rootCategoryLevelId == 8) {
              f.automatic = 2;
              palletList = palletList.concat(f);
            }
            if (f.rootCategoryLevelId != 5 && f.rootCategoryLevelId != 8) {
              f.automatic = 2;
              bomList = bomList.concat(f);
            }
          });

          m.bomDetailDTOS = [];

          m["modelList"] = modelList;
          m["palletList"] = palletList;
          m["pickList"] = bomList;

          m["modelList2"] = [];
          m["instanceList2"] = [];
          m["palletList2"] = [];
          m["packingList2"] = [];
          m["semiProductList2"] = [];
          m["productList2"] = [];
          m["junkProductList2"] = [];

          m.pickList.forEach((it) => {
            it.warehouseIdList = [];
            it.warehouseIdList.push(it.warehouseId);

            it.warehouseList.forEach((i) => {
              i.warehouse_name = i.name;
              i.warehouse_id = i.id;
            });
          });

          console.log(m, "mmmm");

          return {
            ...m,
          };
        });
        this.pickName = res[0].productName + "领料";
        this.getOrderCode();
        // this.getInventoryTotalFn();
      });
    },
    //计量库存数量
    getInventoryTotalFn() {
      let ids = [];
      this.List.map((item) => {
        item.bomList.map((pitem) => {
          ids.push(pitem.categoryCode);
        });
      });
      if (ids.length == 0) {
        return;
      }
      getInventoryTotal(ids).then((res) => {
        res.map((ritem) => {
          this.List.map((item) => {
            item.bomList.map((pitem) => {
              if (pitem.categoryCode == ritem.code) {
                pitem.availableCountBase = ritem.availableCountBase;
              }
            });
          });
        });
      });
    },

    async getOrderCode() {
      this.pickCode = await getCode("pick_order_code");
    },

    hendDel(type, code, list) {
      if (type == "modelBom") {
        console.log(list.length);
        if (list.length == 0) {
        }
        this.List.forEach((f) => {
          if (f.code == code) {
            if (list.length == 0) {
              f.modelList2 = [];
              f.modelList = [];
              return false;
            }
            f.modelList2 = list.filter((t) => t.automatic == 1);
            f.modelList = list.filter((t) => t.automatic == 2);
          }
        });
      }
      if (type == "boatBom") {
        this.List.forEach((f) => {
          if (f.code == code) {
            if (list.length == 0) {
              f.palletList2 = [];
              f.palletList = [];
              return false;
            }
            f.palletList2 = list.filter((t) => t.automatic == 1);
            f.palletList = list.filter((t) => t.automatic == 2);
          }
        });
      }

      this.$forceUpdate();
    },

    getListOutsource(list) {
      let param = {
        workOrderId: this.idsList,
        taskId: this.taskId,
      };

      listOutsource(param).then((res) => {
        if (res) {
          this.$refs.outsourceRef.open(res);
        } else {
          uni.showToast({
            title: "暂无委外申请单",
            icon: "none",
          });
        }
      });
    },

    outsourceFn(list) {
      this.outsourceInWarehouseFn(list);
    },

    addPicking(id, item) {
      const storageKey = Date.now() + "";
      let arr = [
        ...item.instanceList2,
        ...item.modelList2,
        ...item.palletList2,
        ...item.packingList2,
        ...item.semiProductList2,
        ...item.productList2,
        ...item.junkProductList2,
      ];
      uni.setStorageSync(storageKey, arr);
      uni.navigateTo({
        url: `/pages/pda/workOrder/search/newIndex?id=${id}&storageKey=${storageKey}&isType=pick&taskId=${this.taskId}`,
      });
    },

    getPick() {
      pickDetails(this.idsList).then((res) => {
        if (res && res.length > 0) {
          this.isPick = true;
        }
      });
    },

    outsourceInWarehouseFn(list) {
      let param = {
        outsourceOrder: list || [],
        workOrderId: this.idsList[0],
        taskId: this.taskId,
      };

      listOutsourceInWarehouse(param).then((res) => {
        res.list.map((m) => {
          m.isOut = 1;
          return {
            ...m,
          };
        });
        let _arr = [...this.List[0].instanceList2, ...res.list];
        this.$set(this.List[0], "instanceList2", _arr);
        this.$forceUpdate();
      });
    },

    openDetails() {
      let url = `/pages/pda/picking/bill/index?id=${this.idsList[0]}`;
      uni.navigateTo({
        url,
      });
    },
  },

  beforeDestroy() {
    uni.hideLoading();
  },
};
</script>

<style lang="scss" scoped>
/* ========== 页面容器 ========== */
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $uni-bg-color-grey;
  overflow: hidden;
}

/* ========== 刷新库存按钮栏 ========== */
.refresh-bar {
  display: flex;
  justify-content: flex-end;
  padding: 16rpx 24rpx 0;

  .refresh-btn {
    min-width: 180rpx;
    border-radius: 32rpx;
  }
}

/* ========== 滚动区域 ========== */
.scroll-area {
  flex: 1;
  overflow: hidden;

  .u-list {
    height: 100% !important;
  }
}

/* ========== 工单卡片 ========== */
.order-card {
  margin: 20rpx 24rpx;
  padding: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

/* ========== 卡片头部 ========== */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid $border-color;

  .header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
  }

  .serial-num {
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 50%;
    background: $theme-color;
    color: #fff;
    text-align: center;
    font-size: 24rpx;
    flex-shrink: 0;
  }

  .order-code {
    margin-left: 16rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: $theme-color;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-right {
    flex-shrink: 0;
    margin-left: 16rpx;
  }

  .add-btn-native {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180rpx;
    height: 64rpx;
    padding: 0 28rpx;
    background-color: $theme-color;
    color: #fff;
    font-size: 26rpx;
    border-radius: 32rpx;
    white-space: nowrap;
  }
}

/* ========== 操作栏 ========== */
.action-bar {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
}

.select-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx 24rpx;
  background-color: $theme-color;
  color: #fff;
  font-size: 24rpx;
  border-radius: 32rpx;
  line-height: 1.4;
}

/* ========== 物料项 ========== */
.material-item {
  display: flex;
  align-items: flex-start;
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx dashed $border-color;

  &:first-of-type {
    border-top: none;
    padding-top: 0;
  }
}

/* 复选框列 */
.check-col {
  width: 56rpx;
  padding-top: 12rpx;
  flex-shrink: 0;
}

.checkbox {
  width: 36rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #c8c9cc;
  border-radius: 6rpx;
  transition: all 0.2s;

  &--active {
    background: $theme-color;
    border-color: $theme-color;

    /deep/ .u-icon__icon {
      color: #fff !important;
    }
  }
}

/* ========== 物料详情表格 ========== */
.material-detail {
  flex: 1;
  min-width: 0;
  border: 1rpx solid $border-color;
  border-radius: 8rpx;
}

.detail-row {
  display: flex;
  border-bottom: 1rpx solid $border-color;

  &:last-child {
    border-bottom: none;
  }

  &--split {
    .split-cell {
      display: flex;
      flex: 1;
      min-width: 0;

      &--left {
        border-right: 1rpx solid $border-color;
      }
    }
  }
}

.detail-label {
  width: 140rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f9fa;
  font-size: 24rpx;
  color: $uni-text-regular-color;
  border-right: 1rpx solid $border-color;
  flex-shrink: 0;
  padding: 12rpx 8rpx;
  text-align: center;
  word-break: keep-all;

  &--sm {
    width: 100rpx;
  }
}

.detail-value {
  flex: 1;
  min-width: 0;
  min-height: 64rpx;
  font-size: 26rpx;
  line-height: 1.5;
  color: $uni-text-color;
  padding: 12rpx 16rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  word-break: break-all;

  &--input {
    display: flex;
    align-items: center;
    padding: 6rpx 8rpx;
  }

  &--stock {
    flex-direction: column;
    align-items: flex-start;
    padding: 8rpx 16rpx;
  }

  &--select {
    padding: 4rpx 8rpx;
  }
}

.delete-btn {
  width: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-left: 1rpx solid #e3e5e5;
  background-color: #fff5f5;
  cursor: pointer;

  &:active {
    background-color: #fee;
  }
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* 数量输入 */
.qty-input {
  flex: 1;
  height: 52rpx;
  border: 2rpx solid #e8f5e9;
  background: #f0f8f2;
  border-radius: 8rpx;
  padding: 0 12rpx;
  font-size: 26rpx;
  color: $theme-color;
  text-align: center;
}

.qty-unit {
  width: 80rpx;
  text-align: center;
  font-size: 24rpx;
  color: $uni-text-color-grey;
  flex-shrink: 0;
}

/* 库存信息 */
.stock-item {
  font-size: 24rpx;
  color: $uni-text-color;
  padding: 4rpx 0;
  line-height: 1.6;
}

.stock-num {
  color: $theme-color;
  font-weight: 600;
}

.stock-lock-num {
  color: #F56C6C;
  font-weight: 600;
}

/* ========== 子组件区域 ========== */
.sub-components {
  margin-top: 20rpx;
}

/* ========== 已有领料单按钮 ========== */
.exist-pick-btn {
  position: fixed;
  right: 0;
  bottom: 180rpx;
  padding: 14rpx 24rpx;
  border-radius: 32rpx 0 0 32rpx;
  background: $theme-color;
  color: #fff;
  font-size: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(21, 122, 44, 0.3);
  z-index: 10;
}

/* ========== 委外领料 ========== */
.outsource-bar {
  padding: 30rpx 0;
  display: flex;
  justify-content: center;
}

.outsource-link {
  color: $theme-color;
  font-size: 28rpx;
  text-decoration: underline;
}

/* ========== 弹窗 ========== */
.popup-content {
  width: 600rpx;
  padding: 40rpx 32rpx 32rpx;
  background: #fff;
  border-radius: 16rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: $uni-text-color;
  text-align: center;
  margin-bottom: 32rpx;
}

.popup-body {
  margin-bottom: 40rpx;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
  gap: 24rpx;

  .popup-btn {
    flex: 1;
    border-radius: 32rpx;
  }
}

/* ========== 底部提交栏 ========== */
.footer-bar {
  flex-shrink: 0;

  .submit-btn {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    background: $theme-color;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
    color: #fff;
    letter-spacing: 4rpx;

    &:active {
      opacity: 0.85;
    }
  }
}
</style>