spring
8 天以前 646135b9c54d6ccf5d47af30bf208bdfe5005017
src/pages/production/twist/receive/monofil.vue
@@ -11,16 +11,27 @@
        <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="openManualInput"
            ></wd-button>
          </template>
        </CardTitle>
      </template>
      <!-- <MonofilCard v-for="(item, index) in cardList" :key="index" :data="item" /> -->
      <wd-tabs v-model="tab" slidable="always">
      <wd-tabs v-model="tab" slidable="always" class="tabs-container">
        <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>
            <scroll-view class="content" scroll-y>
              <MonofilCard
                v-for="(m, i) in item.strandedWireDish"
                :key="i"
                :data="m"
                @delete="handleDeleteCard(item, m)"
              />
            </scroll-view>
          </wd-tab>
        </block>
      </wd-tabs>
@@ -38,6 +49,32 @@
      :nodeList="nodeList"
      @confirm="handleConfirmSave"
    />
    <!-- 手动输入质量追溯号弹框 -->
    <wd-popup v-model="showManualInput" position="center" :close-on-click-modal="false">
      <view class="manual-input-modal">
        <view class="modal-header">
          <text class="title">手动领用单丝</text>
          <wd-icon name="close" @click="closeManualInput" />
        </view>
        <view class="modal-content">
          <view class="input-label">单丝编号</view>
          <wd-input
            v-model="manualOutPutId"
            placeholder="请输入单丝编号"
            clearable
            @clear="manualOutPutId = ''"
          />
        </view>
        <view class="modal-footer">
          <wd-button @click="closeManualInput" type="default">取消</wd-button>
          <wd-button type="primary" @click="handleManualConfirm" custom-class="confirm-btn">
            确定
          </wd-button>
        </view>
      </view>
    </wd-popup>
    <wd-toast />
  </view>
</template>
@@ -47,7 +84,7 @@
import MonofilCard from "../components/MonofilCard.vue";
import StatisticsModal from "../components/StatisticsModal.vue";
import { useToast } from "wot-design-uni";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { onLoad, onUnload, onShow, onHide } from "@dcloudio/uni-app";
import Scan from "@/components/scan/index.vue";
import ManageApi from "@/api/product/manage";
import TwistApi from "@/api/product/twist";
@@ -61,67 +98,167 @@
const toast = useToast();
const tab = ref("");
const showStatisticsModal = ref(false);
const showManualInput = ref(false);
const manualOutPutId = ref("");
const isPageVisible = ref(false); // 标记页面是否可见
// 监听标签切换
watch(tab, () => {
  if (tab.value) {
    console.log("tab.value:===========1", tab.value);
    getList();
  }
});
const getScanCode = async (code: any) => {
  console.log("自定义扫描的结果回调函数:", code);
  // 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("请先选择一个层");
  // 检查页面是否可见,如果不可见则不处理扫码数据
  if (!isPageVisible.value) {
    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 = [];
  try {
    // 检查是否已选择标签
    if (!tab.value) {
      toast.error("请先选择一个层");
      return;
    }
    currentLayer.strandedWireDish.push(newItem);
    // 刷新当前层的数据显示
    getList();
  } else {
    toast.error("该单丝已领用,请勿重复扫码");
    // 找到当前选中的层
    const currentLayer = nodeList.value.find((node) => node.twistedLayer === tab.value);
    if (!currentLayer) {
      toast.error("未找到当前选中的层");
      return;
    }
    // 解析扫码数据,现在二维码只包含id
    const scanData = JSON.parse(code.code);
    const outPutId = scanData.id;
    if (!outPutId) {
      toast.error("二维码格式错误,缺少id信息");
      return;
    }
    // 调用接口获取拉丝详细信息
    const { data: tagData } = await TwistApi.getTagByIdLs({
      outPutId: outPutId,
    });
    // 判断层级是否匹配(如果接口返回的数据中有layer字段)
    if (tagData.layer && tagData.layer !== currentLayer.twistedLayer) {
      toast.error(
        `领用层级不对,当前层是:${currentLayer.twistedLayer},领用单丝层是:${tagData.layer}`
      );
      // return;
    }
    // 调用单丝领用扫码接口
    const { data } = await TwistApi.getScarn({
      outPutId: outPutId,
      twistId: currentLayer.twistId,
    });
    // 检查当前层是否已存在该单丝
    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("该单丝已领用,请勿重复扫码");
    }
  } catch (error) {
    toast.error("二维码异常,请更换二维码!");
  }
};
const openScan = () => {
  scanRef.value.triggerScan();
};
// 打开手动输入弹框
const openManualInput = () => {
  // 检查是否已选择标签
  if (!tab.value) {
    toast.error("请先选择一个层");
    return;
  }
  showManualInput.value = true;
};
// 关闭手动输入弹框
const closeManualInput = () => {
  showManualInput.value = false;
  manualOutPutId.value = "";
};
// 手动输入确认
const handleManualConfirm = async () => {
  if (!manualOutPutId.value.trim()) {
    toast.error("请输入质量追溯号");
    return;
  }
  try {
    const { data } = await TwistApi.selectByMonofilamentNumber({
      monofilamentNumber: manualOutPutId.value.trim(),
    });
    // 找到当前选中的层
    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();
      // 关闭弹框并清空输入
      closeManualInput();
      toast.success("添加成功");
    } else {
      toast.error("该单丝已领用,请勿重复添加");
    }
  } catch (error: any) {
    toast.error(error.msg || "查询失败");
  }
};
const getList = async () => {
@@ -150,7 +287,6 @@
    // 设置默认第一层
    if (nodeList.value && nodeList.value.length > 0 && !tab.value) {
      tab.value = nodeList.value[0].twistedLayer;
      console.log("设置默认第一层:", tab.value);
      // 设置默认标签后,加载第一层的数据
      getList();
    }
@@ -226,6 +362,44 @@
  }
};
// 删除卡片
const handleDeleteCard = async (layer: any, cardData: any) => {
  // 显示确认提示
  uni.showModal({
    title: "提示",
    content: "确定要删除该单丝吗?",
    success: async (res) => {
      if (res.confirm) {
        try {
          // 如果有id,调用接口删除
          if (cardData.id !== undefined && cardData.id !== null) {
            const { code, msg } = await TwistApi.deleteStrandedWireDish(cardData.id);
            if (code !== 200) {
              toast.error(msg || "删除失败");
              return;
            }
          }
          // 前端直接删除(无论是否有id,都从前端删除)
          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("scanMono", getScanCode);
@@ -235,30 +409,134 @@
  getRootNumber(options.id);
  // getRootNumber(118);
});
onShow(() => {
  // 页面显示时标记为可见
  isPageVisible.value = true;
});
onHide(() => {
  // 页面隐藏时标记为不可见
  isPageVisible.value = false;
});
onUnload(() => {
  // 开启广播监听事件
  // 取消广播监听事件
  uni.$off("scanMono", getScanCode);
  isPageVisible.value = false;
});
</script>
<style lang="scss" scoped>
.list_box {
  height: calc(100vh - 100px);
  height: calc(100vh - 50px);
  background: #f3f9f8;
  display: flex;
  flex-direction: column;
}
// 手动输入弹框样式
.manual-input-modal {
  width: 320px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    .title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
  .modal-content {
    padding: 20px;
    .input-label {
      font-size: 14px;
      color: #333;
      margin-bottom: 8px;
      font-weight: 500;
    }
  }
  .modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
  }
}
:deep(.manual-input-modal .confirm-btn) {
  background-color: #0d867f !important;
  border-color: #0d867f !important;
  .wd-button__content {
    color: #fff !important;
  }
}
// tab容器样式
.tabs-container {
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}
.content {
  height: calc(100vh - 200px);
  width: 100%;
}
:deep(.wd-button__content) {
  color: #0d867f;
}
: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;
}
</style>