| | |
| | | <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"> |
| | | <scroll-view class="content" scroll-y> |
| | | <MonofilCard v-for="(m, i) in item.strandedWireDish" :key="i" :data="m" /> |
| | | </view> |
| | | </scroll-view> |
| | | </wd-tab> |
| | | </block> |
| | | </wd-tabs> |
| | |
| | | :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> |
| | |
| | | const toast = useToast(); |
| | | const tab = ref(""); |
| | | const showStatisticsModal = ref(false); |
| | | const showManualInput = ref(false); |
| | | const manualOutPutId = ref(""); |
| | | |
| | | // 监听标签切换 |
| | | watch(tab, () => { |
| | |
| | | // 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 = []; |
| | | try { |
| | | // 检查是否已选择标签 |
| | | if (!tab.value) { |
| | | toast.error("请先选择一个层"); |
| | | return; |
| | | } |
| | | currentLayer.strandedWireDish.push(newItem); |
| | | |
| | | // 刷新当前层的数据显示 |
| | | getList(); |
| | | } else { |
| | | toast.error("该单丝已领用,请勿重复扫码"); |
| | | // 找到当前选中的层 |
| | | console.log("tab.value:===========2", tab.value); |
| | | const currentLayer = nodeList.value.find((node) => node.twistedLayer === tab.value); |
| | | if (!currentLayer) { |
| | | toast.error("未找到当前选中的层"); |
| | | return; |
| | | } |
| | | console.log("tab.value:===========3", currentLayer); |
| | | // 在发起请求前,先校验该单丝是否已在当前或其他层级被领用 |
| | | const scannedOutputId = JSON.parse(code.code).id; |
| | | const alreadyUsed = nodeList.value.some((node) => |
| | | (node.strandedWireDish || []).some((item: any) => item.outputId === scannedOutputId) |
| | | ); |
| | | if (alreadyUsed) { |
| | | toast.error("该单丝已领用,请勿重复扫码"); |
| | | return; |
| | | } |
| | | const { data } = await TwistApi.getScarn({ |
| | | outPutId: scannedOutputId, |
| | | 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 () => { |
| | |
| | | |
| | | nodeList.value.forEach((node) => { |
| | | node.strandedWireDish.forEach((item: any) => { |
| | | item.twistId = node.twistId; |
| | | item.saleTwistId = node.twistId; |
| | | }); |
| | | if (node.strandedWireDish && Array.isArray(node.strandedWireDish)) { |
| | | const layerNewData = node.strandedWireDish.filter( |
| | |
| | | |
| | | <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> |