绞线报工：二维码领用单丝，一层领完之后就自动切换层（从里到外），PDA：领用时需要选中层数，然后进行领用。PC端需要分层展示各层单丝领用情况。

spring

2025-09-29 da583971227d237848ea28d54641dd20428f3da6

 src/pages/production/twist/receive/monofil.vue

@@ -1,77 +1,264 @@
<template>
  <view class="page">
    <CardTitle title="单丝领用" :hideAction="false">
      <template #action>
        <wd-button type="icon" icon="scan" color="#0D867F" @click="openScan"></wd-button>
  <view class="list_box">
    <z-paging
      ref="pagingRef"
      :fixed="false"
      :auto-show-back-to-top="true"
      :loading-more-enabled="false"
      @query="getList"
    >
      <template #top>
        <CardTitle title="单丝领用" :hideAction="false">
          <template #action>
            <wd-button type="icon" icon="scan" color="#0D867F" @click="openScan"></wd-button>
          </template>
        </CardTitle>
      </template>
    </CardTitle>
    <view class="list_box">
      <MonofilCard v-for="(item, index) in cardList" :key="index" />
    </view>
    <Scan ref="scanRef" />
      <!-- <MonofilCard v-for="(item, index) in cardList" :key="index" :data="item" /> -->
      <wd-tabs v-model="tab" slidable="always">
        <block v-for="item in nodeList" :key="item">
          <wd-tab :title="item.twistedLayer" :name="item.twistedLayer">
            <view class="content">
              <MonofilCard v-for="(m, i) in item.strandedWireDish" :key="i" :data="m" />
            </view>
          </wd-tab>
        </block>
      </wd-tabs>
      <template #bottom>
        <view class="flex justify-center items-center">
          <wd-button block @click="save">
            <text class="text-[#fff]">保存</text>
          </wd-button>
        </view>
      </template>
    </z-paging>
    <Scan ref="scanRef" emitName="scanMono" />
    <StatisticsModal
      v-model:visible="showStatisticsModal"
      :nodeList="nodeList"
      @confirm="handleConfirmSave"
    />
    <wd-toast />
  </view>
</template>

<script setup lang="ts">
import CardTitle from "@/components/card-title/index.vue";
import MonofilCard from "../components/MonofilCard.vue";
import { onLoad, onUnload, onShow, onHide } from "@dcloudio/uni-app";
import StatisticsModal from "../components/StatisticsModal.vue";
import { useToast } from "wot-design-uni";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import Scan from "@/components/scan/index.vue";
import ManageApi from "@/api/product/manage";
import TwistApi from "@/api/product/twist";
import zPaging from "@/components/z-paging/z-paging.vue";
// import { useZebraScan } from "@/hooks/useZebraScan";

// const { init, start, stop, triggerScan } = useZebraScan();

const paramsId = ref();
const pagingRef = ref();
const scanRef = ref();
const cardList = ref<any[]>([]);
const toast = useToast();
const tab = ref("");
const showStatisticsModal = ref(false);

const getScanCode = (code: any) => {
  // let parseData = code.trim();
// 监听标签切换
watch(tab, () => {
  if (tab.value) {
    console.log("tab.value:===========1", tab.value);
    getList();
  }
});

const getScanCode = async (code: any) => {
  console.log("自定义扫描的结果回调函数:", code);
  cardList.value.push({});
  // let parseData = code.trim();
  console.log("code:===========", JSON.parse(code.code));
  console.log("id:=============", JSON.parse(code.code).id);
  const { data } = await TwistApi.getScarn({
    outPutId: JSON.parse(code.code).id,
  });

  // 检查是否已选择标签
  if (!tab.value) {
    toast.error("请先选择一个层");
    return;
  }

  // 找到当前选中的层
  console.log("tab.value:===========2", tab.value);
  const currentLayer = nodeList.value.find((node) => node.twistedLayer === tab.value);
  if (!currentLayer) {
    toast.error("未找到当前选中的层");
    return;
  }

  // 检查当前层是否已存在该单丝
  const exists = currentLayer.strandedWireDish?.some(
    (item: any) => item.monofilamentNumber === data.monofilamentNumber
  );
  if (!exists) {
    const { id, outPutId, wireId, oneLength, ...rest } = data;
    const newItem = {
      wireId: paramsId.value,
      outputId: id,
      amount: oneLength,
      ongLength: oneLength,
      ...rest,
    };

    // 添加到当前层的 strandedWireDish 中
    if (!currentLayer.strandedWireDish) {
      currentLayer.strandedWireDish = [];
    }
    currentLayer.strandedWireDish.push(newItem);

    // 刷新当前层的数据显示
    getList();
  } else {
    toast.error("该单丝已领用，请勿重复扫码");
  }
};

const openScan = () => {
  // uni.scanCode({
  //   onlyFromCamera: true,
  //   success: (res) => {
  //     console.log("条码类型：" + res.scanType);
  //     console.log("条码内容：" + res.result);
  //     cardList.value.push(res.result);
  //   },
  // });
  // triggerScan();
  scanRef.value.triggerScan();
};

onLoad(() => {
const getList = async () => {
  // 从当前选中层的 strandedWireDish 中获取数据
  const currentLayer = nodeList.value.find((node) => node.twistedLayer === tab.value);
  if (currentLayer && currentLayer.strandedWireDish) {
    pagingRef.value.complete(currentLayer.strandedWireDish);
  } else {
    pagingRef.value.complete([]);
  }
};

let nodeList = ref<any[]>([]);
// 获取根号
const getRootNumber = async (wireId: number) => {
  const { code, data, msg } = await TwistApi.getRootNumber({ wireId });
  if (code === 200) {
    nodeList.value = data.nodeList;
    if (data.otherStrandedWireDish && data.otherStrandedWireDish.length > 0) {
      nodeList.value.push({
        strandedWireDish: data.otherStrandedWireDish,
        twistedLayer: "其他",
        twistId: null,
      });
    }
    // 设置默认第一层
    if (nodeList.value && nodeList.value.length > 0 && !tab.value) {
      tab.value = nodeList.value[0].twistedLayer;
      console.log("设置默认第一层:", tab.value);
      // 设置默认标签后，加载第一层的数据
      getList();
    }
  } else {
    toast.error(msg || "获取根号失败");
  }
};

const save = () => {
  // 检查 nodeList 中是否有新的单丝数据需要保存
  let hasNewData = false;

  nodeList.value.forEach((node) => {
    if (node.strandedWireDish && Array.isArray(node.strandedWireDish)) {
      const hasNewInLayer = node.strandedWireDish.some(
        (item: { id?: number }) => item.id === undefined || item.id === null
      );
      if (hasNewInLayer) {
        hasNewData = true;
      }
    }
  });

  if (!hasNewData) {
    toast.error("没有新的单丝数据需要保存");
    return;
  }

  // 显示统计弹框
  showStatisticsModal.value = true;
};

const handleConfirmSave = async () => {
  // 从 nodeList 中收集所有需要保存的新单丝数据
  const newData: any[] = [];

  nodeList.value.forEach((node) => {
    node.strandedWireDish.forEach((item: any) => {
      item.twistId = node.twistId;
    });
    if (node.strandedWireDish && Array.isArray(node.strandedWireDish)) {
      const layerNewData = node.strandedWireDish.filter(
        (item: { id?: number }) => item.id === undefined || item.id === null
      );
      newData.push(...layerNewData);
    }
  });

  if (newData.length === 0) {
    toast.error("没有新的单丝数据需要保存");
    return;
  }

  const { code, msg } = await TwistApi.addStrandedWireDish(newData);
  if (code == 200) {
    toast.success(msg);

    // 清空所有层中已保存的数据（给已保存的数据添加 id）
    nodeList.value.forEach((node) => {
      if (node.strandedWireDish && Array.isArray(node.strandedWireDish)) {
        node.strandedWireDish.forEach((item: any) => {
          if (item.id === undefined || item.id === null) {
            item.id = Date.now(); // 临时标记为已保存
          }
        });
      }
    });

    pagingRef.value.refresh();
    getList();
  } else {
    toast.error("保存失败");
  }
};

onLoad(async (options: any) => {
  // 开启广播监听事件
  uni.$on("scan", getScanCode);
  // init(getScanCode);
  uni.$on("scanMono", getScanCode);
  paramsId.value = options.id;

  // 调用获取根号接口
  getRootNumber(options.id);
  // getRootNumber(118);
});
onUnload(() => {
  // 开启广播监听事件
  uni.$off("scan", getScanCode);
  // stop();
});

onShow(() => {
  // start();
});

onHide(() => {
  // stop();
  uni.$off("scanMono", getScanCode);
});
</script>

<style lang="scss" scoped>
.page {
.list_box {
  height: calc(100vh - 100px);
  background: #f3f9f8;
  .list_box {
    height: calc(100% - 100px);
    overflow: scroll;
  }
}
:deep(.wd-button__content) {
  color: #0d867f;
}
:deep(.zp-paging-container) {
  background: transparent !important;
}
:deep(.zp-paging-container-content) {
  background: transparent !important;
}
:deep(.wd-tabs) {
  background: transparent !important;
}
:deep(.wd-tabs__nav) {
  margin-bottom: 10px;
}
</style>