fix: 芯线分层领用

spring

2026-07-31 a8cc9d60a80afd7362e1d0fd31fb4307a6e04e2e

 src/pages/production/twist/receive/steelCore/index.vue

@@ -1,53 +1,55 @@
<template>
  <view class="list">
  <view class="list_box">
    <z-paging
      ref="pagingRef"
      v-model="cardList"
      :fixed="false"
      :auto-show-back-to-top="true"
      :loading-more-enabled="false"
      @query="getList"
    >
      <template #top>
        <CardTitle title="芯线领用" :hideAction="false" :full="false">
        <CardTitle title="芯线领用" :hideAction="false">
          <template #action>
            <wd-button type="icon" icon="scan" color="#0D867F" @click="openScan"></wd-button>
            <wd-button type="icon" icon="add-circle" color="#0D867F" @click="addReport"></wd-button>
            <wd-button type="icon" icon="add-circle" color="#0D867F" @click="openAddForm"></wd-button>
          </template>
        </CardTitle>
      </template>
      <wd-card v-for="(item, index) in cardList" :key="index" type="rectangle" custom-class="round">
        <template #title>
          <view class="flex justify-between">
            <view>
              <wd-icon name="a-rootlist" color="#0D867F"></wd-icon>
              <text class="text-[#252525] ml-2 font-medium">{{ item.model }}</text>
            </view>
            <view class="text-[#A8A8A8]" @click="toEdit(item.id)">编辑</view>
          </view>
        </template>
        <ProductionCard :data="cardAttr" :value="item" color="#0D867F" />
      </wd-card>

      <!-- 层级 tabs -->
      <wd-tabs v-model="tab" slidable="always" class="tabs-container">
        <block v-for="item in nodeList" :key="item.twistedLayer">
          <wd-tab :title="item.twistedLayer" :name="item.twistedLayer">
            <scroll-view class="content" scroll-y>
              <SteelCoreCard
                v-for="(m, i) in item.strandedWireDish"
                :key="i"
                :data="m"
                @delete="handleDeleteCard(item, m)"
              />
            </scroll-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>
    <wd-popup v-model="addDialog.visible" position="bottom" custom-class="yl-popup">

    <!-- 新增钢芯弹窗 -->
    <wd-popup v-model="showAddForm" position="bottom" custom-class="yl-popup">
      <view class="action px-3">
        <wd-button type="text" @click="cancelAdd">取消</wd-button>
        <wd-button type="text" @click="submitAdd">确定</wd-button>
      </view>
      <SteelCore ref="addFormRef" mode="add" :wireId="paramsId" @refresh="reloadList" />
      <SteelCoreForm ref="addFormRef" mode="add" :wireId="paramsId" />
    </wd-popup>
    <wd-popup v-model="editDialog.visible" position="bottom" custom-class="yl-popup">
      <view class="action px-3">
        <wd-button type="text" @click="cancelEdit">取消</wd-button>
        <wd-button type="text" @click="submitEdit">确定</wd-button>
      </view>
      <SteelCore
        ref="editFormRef"
        mode="edit"
        :wireId="paramsId"
        :editData="editDialog.currentItem"
        @refresh="reloadList"
      />
    </wd-popup>

    <Scan ref="scanRef" emitName="scanSteelCore" />
    <wd-toast />
  </view>
@@ -55,11 +57,10 @@

<script setup lang="ts">
import CardTitle from "@/components/card-title/index.vue";
import ProductionCard from "../../../components/ProductionCard.vue";
import SteelCoreCard from "../../components/SteelCoreCard.vue";
import SteelCoreForm from "./form.vue";
import { useToast } from "wot-design-uni";
import SteelCore from "./form.vue";
import { onLoad, onUnload, onShow, onHide } from "@dcloudio/uni-app";
import ManageApi from "@/api/product/manage";
import TwistApi from "@/api/product/twist";
import zPaging from "@/components/z-paging/z-paging.vue";
import Scan from "@/components/scan/index.vue";
@@ -67,174 +68,306 @@
const paramsId = ref();
const pagingRef = ref();
const addFormRef = ref();
const editFormRef = ref();
const scanRef = ref();
const toast = useToast();
const isPageVisible = ref(false); // 标记页面是否可见
const addDialog = reactive({
  visible: false,
});
const editDialog = reactive({
  visible: false,
  currentItem: null as any,
  editId: undefined as number | undefined,
});
const cardList = ref<any[]>([]);
const tab = ref("");
const nodeList = ref<any[]>([]);
const showAddForm = ref(false);
const isPageVisible = ref(false);

const cardAttr = ref<any[]>([
  {
    label: "样品编号",
    prop: "monofilamentNumber",
  },
  {
    label: "数量",
    prop: "amount",
    unitProp: "unit",
  },
  {
    label: "重量",
    prop: "weight",
    unitProp: "weightUnit",
  },
  {
    label: "厂家",
    prop: "supplier",
    span: 16,
  },
]);
// 监听标签切换
watch(tab, () => {
  if (tab.value) {
    getList();
  }
});

const toEdit = (id: number) => {
  const itemToEdit = cardList.value.find((item) => item.id === id);
  if (itemToEdit) {
    editDialog.currentItem = itemToEdit;
    editDialog.editId = id;
    editDialog.visible = true;
// 获取钢芯层级数据（参照PC端 getSteelCoreDishTypeByWire）
const fetchSteelCoreData = async (wireId: number) => {
  const { code, data, msg } = await TwistApi.getSteelCoreDishTypeByWire(wireId);
  if (code === 200 && data) {
    nodeList.value = data.nodeList || [];

    // 追加"其他"层
    if (data.otherStrandedWireDish && data.otherStrandedWireDish.length > 0) {
      nodeList.value.push({
        strandedWireDish: data.otherStrandedWireDish,
        twistedLayer: "其他",
        twistId: null,
      });
    }

    // 设置默认第一层
    if (nodeList.value.length > 0 && !tab.value) {
      tab.value = nodeList.value[0].twistedLayer;
      getList();
    }
  } else {
    toast.error(msg || "获取钢芯层级数据失败");
  }
};

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

// 打开新增表单
const openAddForm = () => {
  if (!tab.value) {
    toast.error("请先选择一个层");
    return;
  }
  if (addFormRef.value) {
    addFormRef.value.resetFormData();
  }
  addDialog.visible = true;
  showAddForm.value = true;
};

// 提交新增
const submitAdd = async () => {
  const success = await addFormRef.value.submit();
  if (success) {
    addDialog.visible = false;
  const formData = await addFormRef.value.submit();
  if (!formData) return;

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

  // 同层重复检查
  if (formData.monofilamentNumber) {
    const exists = currentLayer.strandedWireDish?.some(
      (item: any) => item.monofilamentNumber === formData.monofilamentNumber
    );
    if (exists) {
      toast.error("该钢芯已领用，请勿重复添加");
      return;
    }
  }

  // 添加到当前层
  if (!currentLayer.strandedWireDish) {
    currentLayer.strandedWireDish = [];
  }
  currentLayer.strandedWireDish.push({
    ...formData,
    wireId: paramsId.value,
  });

  getList();
  showAddForm.value = false;
  toast.success("添加成功");
};

const cancelAdd = () => {
  toast.show("取消");
  addDialog.visible = false;
  showAddForm.value = false;
};

const submitEdit = async () => {
  const success = await editFormRef.value.submitEdit(cardList.value, editDialog.editId);
  if (success) {
    editDialog.visible = false;
    reloadList();
  }
};

const cancelEdit = () => {
  toast.show("取消");
  editDialog.visible = false;
};

const getList = async () => {
  const { code, data } = await ManageApi.getStrandedWireDish({
    wireId: paramsId.value,
    type: "钢芯",
  });
  if (code == 200) {
    pagingRef.value.complete(data);
  }
};

const reloadList = () => {
  pagingRef.value.refresh();
};

// 扫码相关方法
const openScan = () => {
  scanRef.value.triggerScan();
};

// 获取扫码数据
const getScanCode = async (code: any) => {
  // 检查页面是否可见，如果不可见则不处理扫码数据
  if (!isPageVisible.value) {
    return;
  }

  try {
    const parseData = JSON.parse(code.code);

    // 检查必需字段：model、supplier、diskMaterial
    const requiredFields = ["model", "supplier", "diskMaterial"];
    const missingFields = requiredFields.filter((field) => !parseData[field]);

    if (missingFields.length > 0) {
      toast.error(`二维码错误，请更换二维码！`);
    if (!tab.value) {
      toast.error("请先选择一个层");
      return;
    }

    // 打开新增弹框并填充扫码获取的信息
    addDialog.visible = true;
    const currentLayer = nodeList.value.find((node) => node.twistedLayer === tab.value);
    if (!currentLayer) {
      toast.error("未找到当前选中的层");
      return;
    }

    // 等待弹框打开后填充表单数据
    // 使用双重等待：nextTick + setTimeout 确保组件已完全挂载
    nextTick(() => {
      setTimeout(() => {
        if (addFormRef.value) {
          addFormRef.value.fillFormData(parseData);
          toast.success("扫码成功，请确认信息");
        } else {
          toast.error("表单加载失败，请重试");
        }
      }, 200); // 延迟200ms确保弹框和组件已完全渲染
    });
    const parseData = JSON.parse(code.code);

    // 检查必需字段
    const requiredFields = ["model", "supplier", "diskMaterial"];
    const missingFields = requiredFields.filter((field) => !parseData[field]);
    if (missingFields.length > 0) {
      toast.error("二维码错误，请更换二维码！");
      return;
    }

    // 同层重复检查
    if (parseData.monofilamentNumber) {
      const exists = currentLayer.strandedWireDish?.some(
        (item: any) => item.monofilamentNumber === parseData.monofilamentNumber
      );
      if (exists) {
        toast.error("该钢芯已领用，请勿重复扫码");
        return;
      }
    }

    // 构建新钢芯数据
    const newItem = {
      wireId: paramsId.value,
      diskMaterial: parseData.diskMaterial || "",
      model: parseData.model || "",
      monofilamentNumber: parseData.monofilamentNumber || "",
      amount: parseData.oneLength || parseData.amount || "",
      weight: parseData.weight || "",
      supplier: parseData.supplier || "",
      type: "钢芯",
    };

    if (!currentLayer.strandedWireDish) {
      currentLayer.strandedWireDish = [];
    }
    currentLayer.strandedWireDish.push(newItem);
    getList();
    toast.success("扫码成功");
  } catch (error) {
    toast.error("二维码异常，请更换二维码！");
  }
};

onLoad((options: any) => {
  // 开启广播监听事件
// 打开扫描
const openScan = () => {
  scanRef.value.triggerScan();
};

// 保存（批量提交）
const save = () => {
  // 检查是否有新数据需要保存
  let hasNewData = false;
  let newCount = 0;

  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;
        newCount += node.strandedWireDish.filter(
          (item: { id?: number }) => item.id === undefined || item.id === null
        ).length;
      }
    }
  });

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

  // 确认保存
  uni.showModal({
    title: "提示",
    content: `确认保存 ${newCount} 条钢芯领用数据吗？`,
    success: async (res) => {
      if (res.confirm) {
        await handleConfirmSave();
      }
    },
  });
};

// 执行批量保存
const handleConfirmSave = async () => {
  const newData: any[] = [];

  nodeList.value.forEach((node) => {
    // 附加上下级 twistId
    if (node.strandedWireDish && Array.isArray(node.strandedWireDish)) {
      node.strandedWireDish.forEach((item: any) => {
        item.saleTwistId = node.twistId;
      });
      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
    fetchSteelCoreData(paramsId.value);
  } else {
    toast.error(msg || "保存失败");
  }
};

// 删除卡片
const handleDeleteCard = async (layer: any, cardData: any) => {
  uni.showModal({
    title: "提示",
    content: "确定要删除该钢芯吗？",
    success: async (res) => {
      if (res.confirm) {
        try {
          // 已保存的数据调用接口删除
          if (cardData.id !== undefined && cardData.id !== null) {
            const { code, msg } = await TwistApi.deleteStrandedWireDish(cardData.id);
            if (code !== 200) {
              toast.error(msg || "删除失败");
              return;
            }
          }

          // 前端移除
          if (layer.strandedWireDish && Array.isArray(layer.strandedWireDish)) {
            const index = layer.strandedWireDish.findIndex(
              (item: any) => item.monofilamentNumber === cardData.monofilamentNumber
            );
            if (index !== -1) {
              layer.strandedWireDish.splice(index, 1);
              toast.success("删除成功");
              getList();
            }
          }
        } catch (error: any) {
          toast.error(error.msg || "删除失败");
        }
      }
    },
  });
};

onLoad(async (options: any) => {
  uni.$on("scanSteelCore", getScanCode);
  paramsId.value = options.id;
  fetchSteelCoreData(options.id);
});

onShow(() => {
  // 页面显示时标记为可见
  isPageVisible.value = true;
});

onHide(() => {
  // 页面隐藏时标记为不可见
  isPageVisible.value = false;
});

onUnload(() => {
  // 取消广播监听事件
  uni.$off("scanSteelCore", getScanCode);
  isPageVisible.value = false;
});
</script>

<style lang="scss" scoped>
.list {
  height: calc(100vh - 120px);
  padding: 12px;
.list_box {
  height: calc(100vh - 50px);
  background: #f3f9f8;

  :deep() {
    .round {
      border-radius: 4px;
    }
  }
  display: flex;
  flex-direction: column;
}

.action {
@@ -245,4 +378,64 @@
:deep(.wd-button__content) {
  color: #0d867f;
}

.tabs-container {
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}

.content {
  height: calc(100vh - 200px);
  width: 100%;
}

:deep(.zp-paging-container) {
  background: transparent !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.zp-paging-container-content) {
  background: transparent !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.wd-tabs) {
  background: transparent !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:deep(.wd-tabs__nav) {
  margin-bottom: 10px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f3f9f8;
}

:deep(.wd-tabs__content) {
  flex: 1;
  overflow: visible;
}

:deep(.wd-tab__pane) {
  height: 100%;
}

:deep(.zp-paging-container-top) {
  flex-shrink: 0;
}

:deep(.zp-paging-container-bottom) {
  flex-shrink: 0;
  padding: 8px 12px;
}
</style>