aiot-app/pages/home/wt/components/materialRequisition/taskForm.vue

<template>
  <view class="">
    <view class="sticky-subsection" :style="{ top: `${stickyTop}px` }">
      <view class="subsection-wrap">
        <u-subsection
          fontSize="25"
          mode="subsection"
          :list="list"
          :current="curNow"
          @change="sectionChange"
          activeColor="#157A2C"
        ></u-subsection>
      </view>
    </view>
    <view
      class="sticky-subsection-placeholder"
      :style="{ height: `${stickyPlaceholderHeight}px` }"
    ></view>

    <view v-show="curNow === 0" class="out-info-wrap">
      <view class="out-info-title">
        <text class="out-info-title-bar"></text>
        <text class="out-info-title-text">领料信息</text>
      </view>
      <view class="out-info-divider"></view>

      <view class="out-info-card">
        <view
          v-for="(item, index) in pickInfoItems"
          :key="index"
          class="out-info-row"
        >
          <text class="out-info-label">{{ item.label }}</text>
          <text class="out-info-value">{{ item.value || "—" }}</text>
        </view>
      </view>
    </view>
    <view v-show="curNow === 1" class="pick-list-wrap">
      <view class="out-info-title">
        <text class="out-info-title-bar"></text>
        <text class="out-info-title-text">领料清单</text>
      </view>
      <view class="out-info-divider"></view>

      <view
        v-if="!form.detailList || !form.detailList.length"
        class="pick-list-empty"
      >
        暂无领料明细
      </view>

      <view
        v-for="(row, idx) in form.detailList"
        :key="idx"
        class="pick-list-card"
      >
        <view class="pick-list-card-head">
          <text class="pick-list-index">序号 {{ idx + 1 }}</text>
        </view>
        <view class="pick-list-card-body">
          <view
            v-for="(field, fieldIdx) in pickListFieldItems"
            :key="`${idx}-${fieldIdx}`"
            class="pick-list-row"
          >
            <text class="out-info-label">{{ field.label }}</text>
            <text class="out-info-value">{{
              formatPickListField(row, field.key)
            }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-show="curNow === 2" class="out-info-wrap">
      <view class="out-info-title">
        <text class="out-info-title-bar"></text>
        <text class="out-info-title-text">出库信息</text>
      </view>
      <view class="out-info-divider"></view>

      <view class="out-info-card">
        <view
          v-for="(item, index) in outboundInfoItems"
          :key="index"
          class="out-info-row"
        >
          <text class="out-info-label">{{ item.label }}</text>
          <text class="out-info-value">{{ item.value || "—" }}</text>
        </view>
      </view>
    </view>
    <view v-show="curNow === 3" class="outbound-wrap">
      <view class="outbound-title">
        <text class="outbound-title-bar"></text>
        <text class="outbound-title-text">出库物品清单</text>
      </view>

      <view class="out-info-divider"></view>

      <view v-if="!outboundItemRows.length" class="outbound-empty">
        暂无出库物品明细
      </view>

      <view
        v-for="(row, index) in outboundItemRows"
        :key="index"
        class="outbound-card"
      >
        <view class="outbound-card-head">
          <text class="outbound-index">序号 {{ row.seq }}</text>
        </view>

        <view
          v-for="(line, li) in outboundItemGrid"
          :key="li"
          class="outbound-grid"
          :class="{
            'outbound-grid-last': li === outboundItemGrid.length - 1,
            'outbound-grid--full': !line.right,
          }"
        >
          <block v-if="line.right">
            <view class="outbound-col">
              <text class="outbound-label">{{ line.left[0] }}</text>
              <text class="outbound-value">{{ dash(row[line.left[1]]) }}</text>
            </view>
            <view class="outbound-col outbound-col-right">
              <text class="outbound-label">{{ line.right[0] }}</text>
              <text class="outbound-value">{{ dash(row[line.right[1]]) }}</text>
            </view>
          </block>
        </view>
      </view>
    </view>

    <view v-show="curNow === 4" class="outbound-wrap">
      <view class="outbound-title">
        <text class="outbound-title-bar"></text>
        <text class="outbound-title-text">包装清单</text>
      </view>

      <view class="out-info-divider"></view>

      <view v-if="!packingListRows.length" class="outbound-empty">
        暂无包装明细
      </view>

      <view
        v-for="(row, index) in packingListRows"
        :key="index"
        class="outbound-card"
      >
        <view class="outbound-card-head">
          <text class="outbound-index">序号 {{ row.seq }}</text>
        </view>

        <view
          v-for="(line, li) in packingItemGrid"
          :key="li"
          class="outbound-grid"
          :class="{
            'outbound-grid-last': li === packingItemGrid.length - 1,
            'outbound-grid--full': !line.right,
          }"
        >
          <block v-if="line.right">
            <view class="outbound-col">
              <text class="outbound-label">{{ line.left[0] }}</text>
              <text class="outbound-value">{{ dash(row[line.left[1]]) }}</text>
            </view>
            <view class="outbound-col outbound-col-right">
              <text class="outbound-label">{{ line.right[0] }}</text>
              <text class="outbound-value">{{ dash(row[line.right[1]]) }}</text>
            </view>
          </block>
          <!-- <block v-if="line.right">
            <view class="outbound-col">
              <text class="outbound-label">{{ line.left[0] }}</text>
              <text
                class="outbound-value"
                :class="{ 'outbound-value--mono': line.mono }"
                >{{ dash(row[line.left[1]]) }}</text
              >
            </view>
            <view class="outbound-col outbound-col-right">
              <text class="outbound-label">{{ line.right[0] }}</text>
              <text
                class="outbound-value"
                :class="{ 'outbound-value--mono': line.mono }"
                >{{ dash(row[line.right[1]]) }}</text
              >
            </view>
          </block>
          <view v-else class="outbound-col outbound-col--full">
            <text class="outbound-label">{{ line.left[0] }}</text>
            <text class="outbound-value outbound-highlight">{{
              dash(row[line.left[1]])
            }}</text>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getPickOrderById,
  getOutInBySourceBizNo,
  allCategoryLevel,
  getLoginUser,
  getGroupList,
  getUserPageByGroupId,
  getUserById,
} from "@/api/wt/index.js";
import { getHierarchyFifo } from "@/api/warehouseManagement/index.js";

const OUTPUT_SCENE_STATE = [
  { code: 1, label: "退供出库" },
  { code: 2, label: "调拨出库" },
  { code: 3, label: "销售出库" },
  { code: 4, label: "领用出库" },
  { code: 5, label: "报废出库" },
  { code: 6, label: "外协出库" },
  { code: 7, label: "委外出库" },
  { code: 8, label: "受托退货出库" },
  { code: 9, label: "仓库委外出库" },
  { code: 10, label: "采购退货出库" },
  { code: 11, label: "自选领用出库" },
  { code: 12, label: "配料出库" },
  { code: 13, label: "质检出库" },
  { code: 14, label: "物料需求清单出库" },
  { code: 99, label: "其他出库" },
];

const qualityResults = {
  0: "无",
  1: "合格",
  2: "不合格",
  3: "让步接收",
};

const qualityStatus = {
  0: "未质检",
  1: "待检",
  2: "已质检",
};

/** 出库物品卡片：每行左右两列的字段 key（与 outboundItemRows 一致） */
const OUTBOUND_ITEM_GRID = [
  { left: ["名称", "name"], right: ["编码", "code"] },
  { left: ["批次号", "batchNo"], right: ["型号", "categoryModel"] },
  { left: ["规格", "specification"], right: ["包装数量", "packQtyDisplay"] },
  { left: ["计量数量", "countDisplay"], right: ["重量", "weightDisplay"] },
  { left: ["库存数量", "stockDisplay"], right: ["锁库数", "lockDisplay"] },
  { left: ["仓库", "warehouse"], right: ["包装规格", "packingSpecification"] },
  { left: ["供应商", "supplierName"], right: ["供应商编号", "supplierCode"] },
];

/** 包装清单卡片：字段 key 与 packingListRows 一致 */
const PACKING_ITEM_GRID = [
  { left: ["名称", "name"], right: ["编码", "code"] },
  {
    left: ["批次号", "batchNo"],
    right: ["发货条码", "shipBarcode"],
    mono: true,
  },
  {
    left: ["包装编码", "packageCode"],
    right: ["客户代号", "customerCode"],
    mono: true,
  },
  {
    left: ["包装数量", "packageQtyDisplay"],
    right: ["计量数量", "measureQtyDisplay"],
  },
  { left: ["重量", "weightDisplay"], right: ["刻码", "engrave"] },
  { left: ["质检结果", "resultLabel"], right: ["质检状态", "statusLabel"] },
  { left: ["生产日期", "productionDate"], right: ["采购日期", "purchaseDate"] },
  { left: ["供应商", "supplierName"], right: ["供应商代号", "supplierCode"] },
  // { left: ["物料代号", "materialAlias"], right: ["客户代号", "customerCode"] },
];

export default {
  props: {
    businessId: {
      default: "",
    },
    taskDefinitionKey: {
      default: "",
    },
  },
  data() {
    return {
      form: {},
      list: ["领料信息", "领料清单", "出库信息", "出库物品", "包装清单"],
      curNow: 0,
      isStorage: false,
      outFormData: {
        bizType: "",
        sourceBizNo: "",
        fromId: "",
        fromUser: "",
        fromUserPhone: "",
        storageTime: "",
        type: 2,
        createUserId: "",
        remark: "",
        clientName: "",
        outInDetailList: [],
        extInfo: {
          assetType: [],
          assetTypeName: "",
          deptCode: "",
          deptName: "",
          verifyDeptCode: "",
          verifyDeptName: "",
          createUserName: "",
          createUserId: "",
          fromUserPhone: "",
          sourceBizNo: "",
        },
      },
      warehousingMaterialList: [],
      batchDetailsVOList: [],
      assetTypeMapping: {},
      extractedList: [],
      productList: [],
      packingList: [],
      wwType: null,
      outboundItemGrid: OUTBOUND_ITEM_GRID,
      packingItemGrid: PACKING_ITEM_GRID,
      stickyPlaceholderHeight: 0,
      stickyTop: 44,
    };
  },
  computed: {
    typeOptions() {
      return [
        { label: "自建领料", value: 1 },
        { label: "工单领料", value: 2 },
        { label: "委外领料", value: 3 },
      ];
    },
    typeLabel() {
      const current = this.typeOptions.find(
        (item) => item.value === Number(this.form.type),
      );
      return current ? current.label : "";
    },
    typeIndex() {
      const index = this.typeOptions.findIndex(
        (item) => item.value === Number(this.form.type),
      );
      return index > -1 ? index : 0;
    },
    pickInfoItems() {
      return [
        { label: "领料单名称", value: this.form.name || "" },
        { label: "领料单号", value: this.form.code || "" },
        { label: "物品编码", value: this.form.categoryCode || "" },
        { label: "物品名称", value: this.form.categoryName || "" },
        { label: "型号", value: this.form.modelType || "" },
        { label: "规格", value: this.form.specification || "" },
        { label: "数量", value: this.form.formingNum || "" },
        { label: "计量单位", value: this.form.unit || "" },
        { label: "机型", value: this.form.modelKey || "" },
        { label: "颜色", value: this.form.colorKey || "" },
        { label: "领料时间", value: this.form.createTime || "" },
        { label: "领料部门", value: this.form.executorDeptName || "" },
        { label: "领料人", value: this.form.executorName || "" },
        { label: "类型", value: this.typeLabel || "" },
      ];
    },
    pickListFieldItems() {
      return [
        { label: "工单编号", key: "workOrderCode" },
        { label: "物品编码", key: "categoryCode" },
        { label: "物品名称", key: "categoryName" },
        { label: "数量", key: "demandQuantity" },
        { label: "领料仓库", key: "warehouseName" },
      ];
    },
    outboundSceneLabel() {
      const code = Number(this.outFormData.bizType);
      const item = OUTPUT_SCENE_STATE.find((s) => s.code === code);
      return item ? item.label : "";
    },
    assetTypeLabel() {
      const assetType = this.outFormData.extInfo.assetType;
      if (Array.isArray(assetType)) {
        return assetType
          .map((id) => this.assetTypeMapping[id] || "")
          .filter(Boolean)
          .join("、");
      }
      if (typeof assetType === "string" && assetType.includes(",")) {
        return assetType
          .split(",")
          .map((id) => this.assetTypeMapping[id.trim()] || "")
          .filter(Boolean)
          .join("、");
      }
      return this.assetTypeMapping[assetType] || "";
    },
    outboundInfoItems() {
      const fd = this.outFormData;
      const ext = fd.extInfo || {};
      return [
        { label: "出库场景", value: this.outboundSceneLabel },
        { label: "领料单", value: fd.sourceBizNo || this.form.code || "" },
        { label: "出库物品类型", value: this.assetTypeLabel },
        { label: "出库时间", value: fd.storageTime || "" },
        { label: "出库登记人", value: ext.createUserName || "" },
        { label: "领料人部门", value: ext.verifyDeptName || "" },
        { label: "领料人", value: fd.fromUser || "" },
        { label: "客户名称", value: fd.clientName || "" },
        { label: "备注", value: fd.remark || "" },
      ];
    },
    outboundItemRows() {
      return this.warehousingMaterialList.map((item, i) => {
        const countUnit = item.measuringUnit || "";
        const wu = item.weightUnit || "";
        const packUnit = item.packingUnit || item.minUnit || "";
        const pb = item.packingCountBase;
        return {
          seq: i + 1,
          code: item.assetCode || item.categoryCode || item.code || "",
          name: item.assetName || item.name || "",
          manualBatchNo: item.manualBatchNo || "",
          batchNo: item.batchNo || "",
          minPacking:
            item.minPackingCount != null
              ? `${item.minPackingCount}${countUnit}/${item.minUnit || ""}`
              : "",
          packQtyDisplay: pb != null && pb !== "" ? `${pb}${packUnit}` : "",
          countDisplay:
            item.availableCountBase !== "" && item.availableCountBase != null
              ? `${item.availableCountBase}${countUnit}`
              : "",
          weightDisplay:
            item.weight !== "" && item.weight != null
              ? `${item.weight}${wu}`
              : "",
          stockDisplay:
            item.stockNum !== "" && item.stockNum != null
              ? `${item.stockNum}${countUnit}`
              : "",
          lockDisplay:
            item.lockQuantity !== "" && item.lockQuantity != null
              ? `${item.lockQuantity}${countUnit}`
              : "",
          warehouse: item.warehouseName || item.position || "",
          supplierName: item.supplierName || "",
          supplierCode: item.supplierCode || "",
          stockNum: item.stockNum ?? "",
          categoryModel: item.categoryModel || "",
          specification: item.specification || "",
          brandNum: item.brandNum || "",
          lockQuantity: item.lockQuantity ?? "",
          packingSpecification: item.packingSpecification || "",
        };
      });
    },
    packingListRows() {
      return this.batchDetailsVOList.map((item, i) => {
        const packUnit = item.packingUnit || item.minUnit || "";
        const measureUnit = item.measuringUnit || "";
        const weightUnit = item.weightUnit || "";
        return {
          seq: i + 1,
          code: item.categoryCode || item.onlyCode || "",
          name: item.name || item.assetName || "",
          manualBatchNo: item.manualBatchNo || "",
          batchNo: item.batchNo || "",
          shipBarcode: item.barcodes || "",
          packageCode:
            item.packageNo ||
            item.code ||
            item.onlyCode ||
            item.packageCode ||
            "",
          packageQtyDisplay:
            item.packingCountBase !== "" && item.packingCountBase != null
              ? `${item.packingCountBase}${packUnit}`
              : "",
          measureQtyDisplay:
            item.availableCountBase !== "" && item.availableCountBase != null
              ? `${item.availableCountBase}${measureUnit}`
              : "",
          materialAlias: item.materielCode || "",
          customerCode: item.clientCode || "",
          weightDisplay:
            item.weight !== "" && item.weight != null
              ? `${item.weight}${weightUnit}`
              : "",
          engrave: item.engrave || "",
          resultLabel: qualityResults[item.result] || "无",
          statusLabel: qualityStatus[item.status] || "未质检",
          productionDate: item.productionDate || "",
          purchaseDate: item.purchaseDate || "",
          supplierName: item.supplierName || "",
          supplierCode: item.supplierCode || "",
        };
      });
    },
  },
  async mounted() {
    this.initStickyTop();
    await this.loadAssetTypeMapping();
    await this.getDetailData(this.businessId);
    await this.getLoginUserData();
    this.updateStickyPlaceholderHeight();
  },
  methods: {
    initStickyTop() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        const statusBarHeight = Number(systemInfo.statusBarHeight || 0);
        // `uni-nav-bar` 开启 statusBar 后，内容区高度默认约为 44px。
        this.stickyTop = statusBarHeight + 44;
      } catch (error) {
        this.stickyTop = 50;
      }
    },
    updateStickyPlaceholderHeight() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select(".sticky-subsection")
          .boundingClientRect((rect) => {
            if (rect && rect.height) {
              this.stickyPlaceholderHeight = rect.height;
            }
          })
          .exec();
      });
    },
    dash(val) {
      if (val === null || val === undefined) return "—";
      if (typeof val === "string" && val.trim() === "") return "—";
      return val;
    },
    formatPickListField(row, key) {
      if (key === "demandQuantity") {
        const qty = row?.demandQuantity ?? "";
        const unit = row?.unit ?? "";
        return qty !== "" || unit !== "" ? `${qty}${unit}` : "";
      }
      return row?.[key] ?? "";
    },
    async loadAssetTypeMapping() {
      try {
        const data = await allCategoryLevel();
        const list = Array.isArray(data) ? data : data?.data || [];
        const obj = {};
        list.forEach((item) => {
          obj[item.id] = item.name;
        });
        this.assetTypeMapping = obj;
      } catch (e) {
        console.warn("加载物品分类失败", e);
      }
    },
    async getDetailData(id) {
      const data = await getPickOrderById(id);
      this.form = data;
      this.extractedList = this.form.detailList.map((item) => {
        return {
          taskId: item.taskId,
          workOrderId: item.workOrderId,
        };
      });
      console.log(this.extractedList, "this.extractedList");
      await this.loadOutboundData(data);
    },
    async loadOutboundData(pickData) {
      const code = pickData.code;
      if (!code) return;
      const categoryLevelTopIds = (pickData.detailList || [])
        .map((item) => item.rootCategoryLevelId)
        .filter(Boolean);
      const uniqueAssetTypes = [...new Set(categoryLevelTopIds)];
      const rootCategoryLevelId =
        Array.isArray(this.form.detailList) && this.form.detailList[0]
          ? this.form.detailList[0].rootCategoryLevelId
          : "";
      try {
        const outData = await getOutInBySourceBizNo(code);
        if (!outData || !outData.id) {
          throw new Error("No outbound data");
        }
        this.isStorage = true;
        this.outFormData = {
          bizType: outData.bizType || "11",
          sourceBizNo:
            outData.sourceBizNo || outData.extInfo?.sourceBizNo || code,
          fromId: outData.fromId || "",
          fromUser: outData.fromUser || "",
          fromUserPhone: outData.fromUserPhone || "",
          storageTime: outData.storageTime || "",
          type: outData.type || 2,
          createUserId: outData.createUserId || "",
          clientName: outData.clientName || "",
          remark: outData.remark || "",
          outInDetailList: outData.outInDetailVOList || [],
          extInfo: {
            ...(outData.extInfo || {}),
            createUserName:
              outData.extInfo?.createUserName ||
              this.outFormData.extInfo?.createUserName ||
              "",
            assetType:
              uniqueAssetTypes.length > 0
                ? uniqueAssetTypes
                : rootCategoryLevelId || outData.extInfo?.assetType || "",
          },
        };
        this.parseOutInDetailList(outData.outInDetailVOList || []);
      } catch (e) {
        this.isStorage = false;
        const savedCreateUserName =
          this.outFormData.extInfo?.createUserName || "";
        this.outFormData = {
          bizType: "11",
          sourceBizNo: code,
          fromId: "",
          fromUser: "",
          fromUserPhone: "",
          storageTime: "",
          type: 2,
          createUserId: "",
          clientName: "",
          remark: "",
          outInDetailList: [],
          extInfo: {
            assetType:
              uniqueAssetTypes.length > 0
                ? uniqueAssetTypes
                : rootCategoryLevelId || "",
            assetTypeName: "",
            deptCode: "",
            deptName: "",
            verifyDeptCode: "",
            verifyDeptName: "",
            createUserName: savedCreateUserName,
            createUserId: "",
            fromUserPhone: "",
            sourceBizNo: "",
          },
        };
        this.warehousingMaterialList = [];
        this.batchDetailsVOList = [];

        if (
          this.taskDefinitionKey === "storeman" ||
          this.taskDefinitionKey === "storemanAudit"
        ) {
          await this.initOutboundFromHierarchy(pickData);
        }
      }
    },
    parseOutInDetailList(list) {
      const materials = [];
      const packages = [];
      list.forEach((goodsItem) => {
        materials.push({
          ...goodsItem,
          assetName: goodsItem.name || goodsItem.assetName,
          assetCode: goodsItem.categoryCode || goodsItem.assetCode,
          outInNum: goodsItem.packingCount,
        });
        const records = goodsItem.outInDetailRecordVOList || [];
        records.forEach((wrapItem) => {
          packages.push({
            ...wrapItem,
            assetName: goodsItem.name || goodsItem.assetName,
            assetCode: goodsItem.categoryCode || goodsItem.assetCode,
          });
        });
      });
      this.warehousingMaterialList = materials;
      this.batchDetailsVOList = packages;
    },
    onTypeChange(e) {
      const index = e?.detail?.value;
      const selected = this.typeOptions[index];
      this.form.type = selected ? selected.value : this.form.type;
    },

    async getLoginUserData() {
      try {
        const data = await getLoginUser();
        if (!this.outFormData.extInfo) {
          this.$set(this.outFormData, "extInfo", {});
        }
        this.$set(this.outFormData.extInfo, "createUserName", data.name || "");
      } catch (e) {
        console.warn("获取登录用户数据失败", e);
      }
    },
    getNowFormatDate() {
      const now = new Date();
      const pad = (n) => String(n).padStart(2, "0");
      this.outFormData.storageTime = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
    },
    async getStaffList(groupId) {
      try {
        const res = await getUserPageByGroupId({
          groupId,
          size: 9999,
          page: 1,
        });
        return res.list || [];
      } catch (e) {
        console.warn("获取员工列表失败", e);
        return [];
      }
    },
    async initOutboundFromHierarchy(pickData) {
      const code = pickData.code;
      this.wwType = pickData.type;

      const categoryLevelTopIds = (pickData.detailList || [])
        .map((item) => item.rootCategoryLevelId)
        .filter(Boolean);
      const uniqueAssetTypes = [...new Set(categoryLevelTopIds)];

      this.outFormData.bizType = 11;
      this.outFormData.sourceBizNo = code;
      this.outFormData.type = 2;
      this.outFormData.extInfo.assetType = uniqueAssetTypes;
      this.outFormData.extInfo.sourceBizNo = code;

      this.getNowFormatDate();

      try {
        const userData = await getLoginUser();
        this.outFormData.extInfo.createUserName = userData.name || "";
        this.outFormData.extInfo.createUserId = userData.userId || "";
        this.outFormData.createUserId = userData.userId || "";
      } catch (e) {
        console.warn("获取登录用户失败", e);
      }

      if (pickData.executorDeptId) {
        try {
          const staffList = await this.getStaffList(pickData.executorDeptId);
          this.outFormData.fromId = pickData.executorId || "";
          this.outFormData.fromUser = pickData.executorName || "";
          this.outFormData.extInfo.verifyDeptCode =
            pickData.executorDeptId || "";
          this.outFormData.extInfo.verifyDeptName =
            pickData.executorDeptName || "";
        } catch (e) {
          console.warn("设置领料人信息失败", e);
        }
      } else if (pickData.createUserId) {
        this.outFormData.fromId = pickData.createUserId;
        try {
          const userInfo = await getUserById(pickData.createUserId);
          this.outFormData.fromUser = userInfo.name || "";
          this.outFormData.extInfo.verifyDeptCode = userInfo.groupId || "";
          this.outFormData.extInfo.verifyDeptName = userInfo.groupName || "";
        } catch (e) {
          console.warn("获取领料人部门信息失败", e);
        }
      }

      if (pickData.makerId) {
        try {
          const makerInfo = await getUserById(pickData.makerId);
          this.outFormData.extInfo.verifyDeptCode =
            this.outFormData.extInfo.verifyDeptCode || makerInfo.groupId || "";
          this.outFormData.extInfo.verifyDeptName =
            this.outFormData.extInfo.verifyDeptName ||
            makerInfo.groupName ||
            "";
        } catch (e) {
          console.warn("获取makerId部门失败", e);
        }
      }

      const detailList = pickData.detailList || [];
      if (!detailList.length) return;

      let requestData;
      if (Number(this.wwType) === 3) {
        requestData = {
          type: this.wwType,
          deliveryNo: code,
          taskIds: this.extractedList.map((item) => item.taskId),
          workOrderIds: this.extractedList.map((item) => item.workOrderId),
        };
      } else {
        requestData = {
          type: "1",
          deliveryNo: code,
          builders: detailList.map((item) => ({
            categoryId:
              item.categoryId || item.instanceId || item.productId || "",
            num: item.demandQuantity || item.measurementCount || 0,
            warehouseId: item.warehouseId || "",
            batchNo: item.batchNo || "",
          })),
        };
      }

      try {
        const data = await getHierarchyFifo(requestData);
        this.processHierarchyData(data, pickData);
      } catch (err) {
        console.warn("获取出库物品数据失败", err);
      }
    },
    processHierarchyData(data, pickData) {
      if (!Array.isArray(data) || !data.length) return;

      const firstDetail =
        Array.isArray(pickData?.detailList) && pickData.detailList[0]
          ? pickData.detailList[0]
          : {};

      this.productList = data.map((productItem) => ({
        ...productItem,
        suspendBatchNo: productItem.batchNo || "",
        outInDetailRecordRequestList: (
          productItem.outInDetailRecordRequestList || []
        ).map((packingItem) => ({
          ...packingItem,
          workOrderId: firstDetail.workOrderId || "",
          pickOrderId: firstDetail.pickOrderId || "",
          taskId: firstDetail.taskId || "",
          categoryName: productItem.categoryName || packingItem.categoryName,
          categoryCode: productItem.categoryCode || packingItem.categoryCode,
          supplierCode:
            productItem.supplierCode || packingItem.supplierCode || "",
          supplierName:
            productItem.supplierName || packingItem.supplierName || "",
          materialDetailList: (packingItem.materialDetailList || []).map(
            (materialItem) => ({
              ...materialItem,
              categoryName:
                productItem.categoryName || materialItem.categoryName,
              categoryCode:
                productItem.categoryCode || materialItem.categoryCode,
              supplierCode:
                productItem.supplierCode ||
                packingItem.supplierCode ||
                materialItem.supplierCode ||
                "",
              supplierName:
                productItem.supplierName ||
                packingItem.supplierName ||
                materialItem.supplierName ||
                "",
            }),
          ),
        })),
      }));

      console.log(this.productList, "productList");
      this.productList.sort((a, b) =>
        (a.categoryCode || "").localeCompare(b.categoryCode || ""),
      );

      const materials = [];
      const packages = [];

      console.log(this.productList, "productList1111");

      this.productList.forEach((item) => {
        materials.push({
          assetCode: item.categoryCode,
          assetName: item.categoryName,
          categoryCode: item.categoryCode,
          categoryName: item.categoryName,
          name: item.categoryName,
          manualBatchNo: item.manualBatchNo || "",
          batchNo: item.batchNo || "",
          packingCountBase: item.packingQuantity,
          minPackingCount: item.minPackingCount,
          minUnit: item.packingUnit,
          availableCountBase: item.measureQuantity,
          measuringUnit: item.measureUnit,
          weight: item.weight,
          weightUnit: item.weightUnit,
          warehouseName: item.warehouseName,
          warehouseId: item.warehouseId,
          outInNum: item.packingQuantity,
          stockNum: item.stockNum,
          categoryModel: item.categoryModel,
          specification: item.specification,
          brandNum: item.brandNum,
          lockQuantity: item.lockQuantity,
          packingSpecification: item.extField?.packingSpecification || "",
          supplierName:
            item.supplierName ||
            (item.outInDetailRecordRequestList &&
              item.outInDetailRecordRequestList[0] &&
              item.outInDetailRecordRequestList[0].supplierName) ||
            "",
          supplierCode:
            item.supplierCode ||
            (item.outInDetailRecordRequestList &&
              item.outInDetailRecordRequestList[0] &&
              item.outInDetailRecordRequestList[0].supplierCode) ||
            "",
        });

        console.log(materials, "materialsmaterialsmaterials");

        const records = item.outInDetailRecordRequestList || [];
        records.forEach((record) => {
          packages.push({
            code: record.packageNo,
            onlyCode: record.packageNo,
            assetName: item.categoryName,
            name: item.categoryName,
            categoryCode: item.categoryCode,
            categoryName: item.categoryName,
            manualBatchNo: record.manualBatchNo || "",
            batchNo: record.batchNo || "",
            barcodes: record.barcodes || "",
            packingCountBase: record.packingQuantity,
            packingUnit: record.packingUnit,
            minUnit: record.packingUnit,
            availableCountBase: record.measureQuantity,
            measuringUnit: record.measureUnit,
            materielCode: record.materielDesignation || "",
            clientCode: record.clientCode || "",
            weight: record.weight,
            weightUnit: record.weightUnit,
            supplierCode: item.supplierCode || record.supplierCode || "",
            supplierName: item.supplierName || record.supplierName || "",
            modelKey: record.modelKey || "",
            colorKey: record.colorKey || "",
            result: record.result,
            status: record.status,
            productionDate: record.productionDate || "",
            purchaseDate: record.purchaseDate || "",
            engrave: record.engrave || "",
          });
        });
      });

      this.warehousingMaterialList = materials;
      this.batchDetailsVOList = packages;
      this.packingList = packages;

      this.outFormData.outInDetailList = this.productList;
    },
    async getReturnStorage() {
      if (!this.productList || !this.productList.length) {
        uni.showToast({ title: "请添加出库明细！", icon: "none" });
        return null;
      }

      const obj = JSON.parse(JSON.stringify({ ...this.outFormData, type: 2 }));
      obj.extInfo.sourceBizNo = obj.sourceBizNo;
      obj.fromType = obj.type;

      if (Array.isArray(obj.extInfo.assetType)) {
        obj.extInfo.assetType = obj.extInfo.assetType.join(",");
      }

      const warehouseId = [];
      const warehouseName = [];
      this.productList.forEach((item) => {
        if (item.warehouseId && !warehouseId.includes(item.warehouseId)) {
          warehouseId.push(item.warehouseId);
          warehouseName.push(item.warehouseName || "");
        }
      });
      obj.warehouseIds = warehouseId;
      obj.warehouseNames = warehouseName;
      obj.outInDetailList = this.productList;

      return obj;
    },
    async getTableValue() {
      const outboundData = {
        // 原始数据（接口/提交更稳定）
        warehousingMaterialList: this.warehousingMaterialList || [],
        batchDetailsVOList: this.batchDetailsVOList || [],
        // 展示映射数据（便于前端直接渲染）
        outboundItemRows: this.outboundItemRows || [],
        packingListRows: this.packingListRows || [],
      };
      if (!this.isStorage && this.productList.length > 0) {
        const returnStorageData = await this.getReturnStorage();
        return {
          form: this.form,
          returnStorageData: returnStorageData || {},
          ...outboundData,
        };
      }
      return {
        form: this.form,
        returnStorageData: {},
        ...outboundData,
      };
    },
    sectionChange(index) {
      this.curNow = index;
    },
  },
};
</script>

<style scoped>
.btnConcel {
  margin-top: 20rpx;
}

.sticky-subsection {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99;
  width: 100%;
  box-sizing: border-box;
  background: #f5f7fa;
}

.sticky-subsection-placeholder {
  width: 100%;
}

.subsection-wrap {
  background: #f5f7fa;
  padding: 0 16rpx 12rpx;
  width: 100%;
  box-sizing: border-box;
}

.pick-info-wrap {
  padding: 0 0 24rpx;
}

.pick-info-title {
  display: flex;
  align-items: center;
  margin: 20rpx 24rpx 12rpx;
}

.pick-info-title-bar {
  width: 8rpx;
  height: 30rpx;
  background: #157a2c;
  border-radius: 4rpx;
  margin-right: 14rpx;
  flex-shrink: 0;
}

.pick-info-title-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #303133;
}

.pick-info-form {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 6rpx 20rpx;
  box-sizing: border-box;
  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
}

.pick-info-form :deep(.u-form-item) {
  padding: 8rpx 0;
}

.pick-info-form :deep(.u-form-item__body) {
  min-height: 88rpx;
}

.pick-info-form :deep(.u-form-item__body__left__content__label) {
  font-size: 28rpx;
  color: #303133;
}

.pick-info-form :deep(.u-border-bottom::after) {
  border-color: #ebeef5 !important;
}

.pick-info-form :deep(.u-input) {
  background: #f6f8fc !important;
  border: 1rpx solid #e7ebf1 !important;
  border-radius: 12rpx !important;
  padding: 12rpx 16rpx !important;
}

.pick-info-form :deep(.u-input__content__field-wrapper__field) {
  font-size: 28rpx !important;
  color: #4a4f57 !important;
}

.pick-list-wrap {
  padding: 0 24rpx 32rpx;
  box-sizing: border-box;
}

.pick-list-section-title {
  display: flex;
  align-items: center;
  padding: 24rpx 0 16rpx;
}

.pick-list-section-bar {
  width: 8rpx;
  height: 32rpx;
  background: #1890ff;
  border-radius: 4rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.pick-list-section-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
}

.pick-list-divider {
  height: 2rpx;
  background: linear-gradient(
    90deg,
    rgba(24, 144, 255, 0.35) 0%,
    rgba(24, 144, 255, 0.08) 100%
  );
  margin-bottom: 8rpx;
}

.pick-list-empty {
  text-align: center;
  color: #909399;
  font-size: 28rpx;
  padding: 80rpx 0;
}

.pick-list-card {
  background: #fff;
  border-radius: 16rpx;
  margin-top: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #eef0f4;
  overflow: hidden;
}

.pick-list-card-head {
  background: #f5f7fa;
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid #eef0f4;
}

.pick-list-index {
  font-size: 26rpx;
  font-weight: 600;
  color: #606266;
}

.pick-list-card-body {
  padding: 8rpx 24rpx 20rpx;
}

.pick-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18rpx 0;
  border-bottom: 1rpx solid #f0f2f5;
}

.pick-list-row:last-child {
  border-bottom: none;
}

.pick-list-row--highlight .pick-list-value {
  color: #157a2c;
  font-weight: 600;
}

.pick-list-row--two {
  display: flex;
  gap: 24rpx;
  align-items: flex-start;
}

.pick-list-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.pick-list-cell--right {
  align-items: flex-end;
  text-align: right;
}

.pick-list-cell--right .pick-list-label,
.pick-list-cell--right .pick-list-value {
  text-align: right;
}

.pick-list-label {
  font-size: 24rpx;
  color: #909399;
  flex-shrink: 0;
  margin-right: 16rpx;
  min-width: 140rpx;
}

.pick-list-row--two .pick-list-label {
  margin-right: 0;
  min-width: 0;
}

.pick-list-value {
  font-size: 28rpx;
  color: #303133;
  word-break: break-all;
  flex: 1;
  text-align: right;
}

.pick-list-row--two .pick-list-value {
  text-align: left;
}

.pick-list-cell--right .pick-list-value {
  text-align: right;
}

.pick-list-value--mono {
  font-family: ui-monospace, monospace;
  font-size: 26rpx;
}

.out-info-wrap {
  padding: 0 24rpx 32rpx;
  box-sizing: border-box;
}

.out-info-title {
  display: flex;
  align-items: center;
  padding: 24rpx 0 12rpx;
}

.out-info-title-bar {
  width: 8rpx;
  height: 32rpx;
  background: #1890ff;
  border-radius: 4rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.out-info-title-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
}

.out-info-divider {
  height: 2rpx;
  background: linear-gradient(
    90deg,
    rgba(24, 144, 255, 0.35) 0%,
    rgba(24, 144, 255, 0.08) 100%
  );
  margin-bottom: 8rpx;
}

.out-info-card {
  margin-top: 20rpx;
  background: #fff;
  border: 1rpx solid #eef0f4;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.out-info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22rpx;
  border-bottom: 1rpx solid #f0f2f5;
  gap: 16rpx;
}

.out-info-row:last-child {
  border-bottom: none;
}

.out-info-label {
  font-size: 28rpx;
  color: #303133;
  min-width: 160rpx;
  word-break: break-all;
}

.out-info-value {
  flex: 1;
  text-align: right;
  color: #303133;
  font-size: 28rpx;
  word-break: break-all;
}

.outbound-wrap {
  padding: 0 24rpx 32rpx;
}

.outbound-title {
  display: flex;
  align-items: center;
  padding: 24rpx 0 14rpx;
}

.outbound-title-bar {
  width: 8rpx;
  height: 32rpx;
  background: #1890ff;
  border-radius: 4rpx;
  margin-right: 14rpx;
}

.outbound-title-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
}

.outbound-empty {
  text-align: center;
  color: #909399;
  font-size: 28rpx;
  padding: 80rpx 0;
}

.outbound-card {
  margin-top: 20rpx;
  background: #fff;
  border: 1rpx solid #eef0f4;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.outbound-card-head {
  background: #f7f9fc;
  border-bottom: 1rpx solid #eef0f4;
  padding: 18rpx 22rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.outbound-index {
  font-size: 25rpx;
  color: #606266;
  font-weight: 600;
}

.outbound-code {
  font-size: 25rpx;
  color: #303133;
  font-family: ui-monospace, monospace;
}

.outbound-grid {
  padding: 18rpx 22rpx;
  border-bottom: 1rpx solid #f0f2f5;
  display: flex;
  gap: 20rpx;
}

.outbound-grid-last {
  border-bottom: none;
}

.outbound-grid--full {
  flex-wrap: wrap;
}

.outbound-col--full {
  flex: 1;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.outbound-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.outbound-col-right {
  align-items: flex-end;
  text-align: right;
}

.outbound-label {
  font-size: 24rpx;
  color: #303133;
}

.outbound-value {
  font-size: 28rpx;
  color: #205dd9;
  word-break: break-all;
}

.outbound-col-right .outbound-value {
  text-align: right;
}

.outbound-value--mono {
  font-family: ui-monospace, monospace;
  font-size: 26rpx;
}

.outbound-highlight {
  color: #157a2c;
  font-weight: 600;
}
</style>