From bc8888335349704ded236f137a21a3849f5321a5 Mon Sep 17 00:00:00 2001 From: 陈鑫涛 <10125295+chen-xintao97@user.noreply.gitee.com> Date: Fri, 27 Jun 2025 17:20:04 +0800 Subject: [PATCH] 根据字段展示是否出血 --- src/components/Common/BoxDesignCompontent/index.js | 215 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------------------------------------------- src/components/Common/BoxDesignCompontent/svg.js | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------- src/components/QuickQuote/index.jsx | 13 ++++++++++--- 3 files changed, 188 insertions(+), 121 deletions(-) diff --git a/src/components/Common/BoxDesignCompontent/index.js b/src/components/Common/BoxDesignCompontent/index.js index dc83b1d..c46ca15 100644 --- a/src/components/Common/BoxDesignCompontent/index.js +++ b/src/components/Common/BoxDesignCompontent/index.js @@ -53,16 +53,13 @@ const BoxDesignEvent = props => { setLoading(false); }; - useEffect( - () => { - if (!formData.length) return; + useEffect(() => { + if (!formData.length) return; - const data = formData[0].gdsconfigformslave.filter(Item => Item.bVisible); - setTableData(data); - props.onSaveState(pre => ({ ...pre, data })); - }, - [formData.length] - ); + const data = formData[0].gdsconfigformslave.filter(Item => Item.bVisible); + setTableData(data); + props.onSaveState(pre => ({ ...pre, data })); + }, [formData.length]); return { ...props, @@ -87,51 +84,48 @@ const BoxDesignCompontent = baseProps => { const [rightBoxList, setRightBoxList] = useState([]); const [boxKey, setBoxKey] = useState(new Date().getTime()); if (!boxVisible) return ""; - useEffect( - () => { - if (tableData && tableData.length) { - const newTableColum = tableData.map(item => { - return { - ...item, - isEditable: true, - isSelect: false, - selectImage: null, - value: "", - }; - }); - // const last = newTableColum.pop(); - // const newList = [last, ...newTableColum]; - const newList = newTableColum.filter( - item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") - ); - const newLists = newTableColum.filter( - item => - !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身")) - ); - const bodyList = newTableColum.filter(item => item.showName.includes("盒身")); - newLists.forEach(x => { - if (x.showName === "盒型类别") { - x.showName = "盒型名称"; - } - }); - setTableColum(newLists); - setBoxBodyList(bodyList); - newList.forEach(item => { - let name = ""; - if (item.showName === "盒长") { - name = item.showName + "(L)"; - } else if (item.showName === "盒宽") { - name = item.showName + "(W)"; - } else if (item.showName === "盒高") { - name = item.showName + "(D)"; - } - item.sName = name; - }); - setTableDataList(newList); - } - }, - [tableData] - ); + useEffect(() => { + if (tableData && tableData.length) { + const newTableColum = tableData.map(item => { + return { + ...item, + isEditable: true, + isSelect: false, + selectImage: null, + value: "", + }; + }); + // const last = newTableColum.pop(); + // const newList = [last, ...newTableColum]; + const newList = newTableColum.filter( + item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") + ); + const newLists = newTableColum.filter( + item => + !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身")) + ); + const bodyList = newTableColum.filter(item => item.showName.includes("盒身")); + newLists.forEach(x => { + if (x.showName === "盒型类别") { + x.showName = "盒型名称"; + } + }); + setTableColum(newLists); + setBoxBodyList(bodyList); + newList.forEach(item => { + let name = ""; + if (item.showName === "盒长") { + name = item.showName + "(L)"; + } else if (item.showName === "盒宽") { + name = item.showName + "(W)"; + } else if (item.showName === "盒高") { + name = item.showName + "(D)"; + } + item.sName = name; + }); + setTableDataList(newList); + } + }, [tableData]); const titleList = [ "上方盒舌", "盒底组件", @@ -219,68 +213,72 @@ const BoxDesignCompontent = baseProps => { }); } // 有数据的时候 盒型设计需要赋值 - useEffect( - () => { - if (newBoxList.length > 0 && !arraysAreEqual(boxList, newBoxList)) { - setBoxList(newBoxList); - } - }, - [newBoxList] - ); + useEffect(() => { + if (newBoxList.length > 0 && !arraysAreEqual(boxList, newBoxList)) { + setBoxList(newBoxList); + } + }, [newBoxList]); const arraysAreEqual = (arr1, arr2) => { if (arr1.length !== arr2.length) return false; return arr1.every((item, index) => item.sName === arr2[index].sName); }; - useEffect( - () => { - const type = boxList.find(item => item.sName === "盒身")?.type; - const updateLists = () => { - const topBoxFilter = item => item.sName === "上方盒舌" || item.sName === "盒底组件" || item.sName === "下方盒舌"; + useEffect(() => { + const type = boxList.find(item => item.sName === "盒身")?.type; + const updateLists = () => { + const topBoxFilter = item => item.sName === "上方盒舌" || item.sName === "盒底组件" || item.sName === "下方盒舌"; - const leftBoxFilter = item => item.sName === "左(上)插位组件" || item.sName === "左贴边位" || item.sName === "左(下)插位组件"; + const leftBoxFilter = item => item.sName === "左(上)插位组件" || item.sName === "左贴边位" || item.sName === "左(下)插位组件"; - const rightBoxFilter = item => item.sName === "右(上)插位组件" || item.sName === "右贴边位" || item.sName === "右(下)插位组件"; + const rightBoxFilter = item => item.sName === "右(上)插位组件" || item.sName === "右贴边位" || item.sName === "右(下)插位组件"; - if (type === "2" || type === 2 || type === "4" || type === 4 || type === 3 || type === "3" || type === 5 || type === "5") { - const box = [...boxList]; - box.forEach(x => { - x.show = true; - }); - if (type === "2" || type === 2) { - box.forEach(x => x.sName === "盒底组件" && (x.show = false)); - } else if (type === "4" || type === 4) { - const title = ["盒底组件", "左贴边位", "右贴边位"]; - box.forEach(x => title.includes(x.sName) && (x.show = false)); - } else if (type === "3" || type === 3) { - const title = ["左(上)插位组件", "右(下)插位组件", "盒底组件"]; - box.forEach(x => title.includes(x.sName) && (x.show = false)); - } else if (type === "5" || type === 5) { - const title = ["盒底组件"]; - box.forEach(x => title.includes(x.sName) && (x.show = false)); - } - setTopBoxList(box.filter(topBoxFilter)); - setLeftBoxList(box.filter(leftBoxFilter)); - if (type === 3 || type === "3") { - setRightBoxList(box.filter(rightBoxFilter).reverse()); - } else { - setRightBoxList(box.filter(rightBoxFilter)); - } + if (type === "2" || type === 2 || type === "4" || type === 4 || type === 3 || type === "3" || type === 5 || type === "5") { + const box = [...boxList]; + box.forEach(x => { + x.show = true; + }); + if (type === "2" || type === 2) { + box.forEach(x => x.sName === "盒底组件" && (x.show = false)); + } else if (type === "4" || type === 4) { + const title = ["盒底组件", "左贴边位", "右贴边位"]; + box.forEach(x => title.includes(x.sName) && (x.show = false)); + } else if (type === "3" || type === 3) { + const title = ["左(上)插位组件", "右(下)插位组件", "盒底组件"]; + box.forEach(x => title.includes(x.sName) && (x.show = false)); + } else if (type === "5" || type === 5) { + const title = ["盒底组件"]; + box.forEach(x => title.includes(x.sName) && (x.show = false)); + } + setTopBoxList(box.filter(topBoxFilter)); + setLeftBoxList(box.filter(leftBoxFilter)); + if (type === 3 || type === "3") { + setRightBoxList(box.filter(rightBoxFilter).reverse()); } else { - const box = [...boxList]; - box.forEach(x => { - x.show = true; - }); - setTopBoxList(box.filter(topBoxFilter)); - setLeftBoxList(box.filter(leftBoxFilter)); setRightBoxList(box.filter(rightBoxFilter)); } - }; + } else if (type === "7" || type === 7) { + const box = [...boxList]; + box.forEach(x => { + x.show = true; + }); + const title = ["盒底组件", "左(下)插位组件", "右(上)插位组件","上方盒舌","下方盒舌"]; + box.forEach(x => title.includes(x.sName) && (x.show = false)); + setTopBoxList(box.filter(topBoxFilter)); + setLeftBoxList(box.filter(leftBoxFilter)); + setRightBoxList(box.filter(rightBoxFilter)); + } else { + const box = [...boxList]; + box.forEach(x => { + x.show = true; + }); + setTopBoxList(box.filter(topBoxFilter)); + setLeftBoxList(box.filter(leftBoxFilter)); + setRightBoxList(box.filter(rightBoxFilter)); + } + }; - updateLists(); - }, - [boxList] - ); + updateLists(); + }, [boxList]); const handleFocus = (e, index) => { if (boxList && boxList.length) { @@ -338,7 +336,7 @@ const BoxDesignCompontent = baseProps => { }; const getImage = fileName => { // const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&sModelsId=100&token=${props.token}`; - const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}` + const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}`; return imageUrl; }; // 下来框 @@ -346,7 +344,7 @@ const BoxDesignCompontent = baseProps => { return (
- {option.sMakeUpPath ? : ""} + {option.sMakeUpPath ? : ""} {option.sName}
@@ -484,7 +482,10 @@ const BoxDesignCompontent = baseProps => { rightBottomValue = boxHeight * 2; rightBottom = "+ W * 2"; } - sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (hdzj? ' + dHDC': (leftBottomValue > rightBottomValue ? leftBottom : rightBottom)) ; + sWidthFormula = + (leftTopValue > rightTopValue ? leftTop : rightTop) + + "D" + + (hdzj ? " + dHDC" : leftBottomValue > rightBottomValue ? leftBottom : rightBottom); } else if (boxType && boxType === "2") { // 单折 const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; diff --git a/src/components/Common/BoxDesignCompontent/svg.js b/src/components/Common/BoxDesignCompontent/svg.js index 06666f5..7716ebe 100644 --- a/src/components/Common/BoxDesignCompontent/svg.js +++ b/src/components/Common/BoxDesignCompontent/svg.js @@ -76,7 +76,7 @@ const SvgBox = props => { const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // 创建 svg.innerHTML = ""; - if (!(boxList && boxList.length)) return + if (!(boxList && boxList.length)) return; // 获取盒型类型 const svgTypes = boxList.find(x => x.sName === "盒身")?.type || 1; setSvgType(svgTypes); @@ -222,10 +222,12 @@ const SvgBox = props => { svgContainerRef.current.style.width = `${dSvgBoxWidth ? dSvgBoxWidth : 500}px`; svgContainerRef.current.style.height = `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`; } else { - scale = 0.6; + scale = 0.5; let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; if (Number(svgType) === 4) { ySvg = ySvg + boxHeight; + } else if (Number(svgType) === 7) { + ySvg = ySvg + boxWidth / 2 + dZSCW; } ySvg = ySvg + 50 * scale; svg.setAttribute( @@ -374,7 +376,7 @@ const SvgBox = props => { pathList.push(createText(-dZTBW * 0.4, scaledDeep / 2, 10 * scales, dZTBW)); } // 右边贴边 - + pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0, dSFHS * scale, dXFHS * scale)); if (ybtb?.type && dYTBW) { pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW)); @@ -1044,6 +1046,66 @@ const SvgBox = props => { g.appendChild(createPathElements(rect.x, rect.y, rect.width, rect.height)); }); svg.appendChild(g); + } else if (Number(svgType) === 7) { + const rectangles = [{ x: 0, y: 0, width: scaledWidth, height: scaledHeight }]; + rectangles.forEach(rect => { + g.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); + }); + // svg.appendChild(g); + let pathList = []; + // 左上部件 + pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0)); + if ((zsbj?.type === "3001" && zsbj?.value) || (zsbj?.type === "3006" && zsbj?.value) || (zsbj?.type === "3007" && zsbj?.value)) { + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); + pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW)); + } else if (zsbj?.type === "3004" && zsbj?.value) { + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales)); + pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales)); + pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); + pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW)); + } else if (zsbj?.type === "3005" && zsbj?.value) { + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales)); + pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W")); + pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales)); + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); + pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")); + } else if (zsbj?.type && dZSCW) { + pathList.push(createText(scaledWidth / 2, -(dZSCW / 2 - 5), 10 * scales, dZSCW)); + } + // 右下部件 + pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW, 0, scaledDeep)); + if ((yxbj?.type === "7001" && yxbj?.value) || (yxbj?.type === "7006" && yxbj?.value) || (yxbj?.type === "7007" && yxbj?.value)) { + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW)); + } else if (yxbj?.type === "7004" && yxbj?.value) { + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales)); + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); + pathList.push( + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales) + ); + pathList.push( + createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W") + ); + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW)); + } else if (yxbj?.type === "7005" && yxbj?.value) { + pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales)); + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W")); + pathList.push( + createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales) + ); + pathList.push( + createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scale, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scale, "W") + ); + } else if (dYXCW && yxbj?.type) { + pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW)); + } + pathList.forEach(x => { + g.appendChild(x); + }); + svg.appendChild(g); } }; // 计算头部偏移 @@ -1083,12 +1145,11 @@ const SvgBox = props => { const max = Math.max(z, y); - if (max > ((sfhs?.value || 0))) { + if (max > (sfhs?.value || 0)) { top = max; } else { top = sfhs?.value; } - } else { top = max; } @@ -1113,7 +1174,7 @@ const SvgBox = props => { } top = addValue > sfhs?.value ? addValue : sfhs?.value; } else { - top = addValue > sfhs?.value ? max : sfhs?.value; + top = (addValue || 0) > sfhs?.value ? max : sfhs?.value; } } else if (zscw?.type) { const max = dZSCW; @@ -1142,7 +1203,6 @@ const SvgBox = props => { top = sfhs?.value; } - // 处理天地盒默认加上高 if (Number(svgType) === 4) { top = top + height; @@ -1195,7 +1255,6 @@ const SvgBox = props => { } else { top = max; } - } else if (yscw?.type) { const max = dYSCW; if ( @@ -1217,7 +1276,7 @@ const SvgBox = props => { } top = addValue > sfhs?.value ? addValue : sfhs?.value; } else { - top = addValue > sfhs?.value ? max : sfhs?.value; + top = addValue?addValue:0 > sfhs?.value ? max : sfhs?.value; } } else if (zscw?.type) { const max = dZSCW; @@ -1403,7 +1462,7 @@ const SvgBox = props => { return data; }; // 右边贴位 - const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY,dSFHS,dXFHS) => { + const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY, dSFHS, dXFHS) => { if (!size) return createNoneProject(); let data = {}; switch (trapezoidLeftType) { @@ -1420,7 +1479,7 @@ const SvgBox = props => { data = createWelt3Right(height, size, offsetX, offsetY); break; case "9005": - data = createWelt4Right(height, size, offsetX, offsetY,dSFHS,dXFHS); + data = createWelt4Right(height, size, offsetX, offsetY, dSFHS, dXFHS); break; default: data = createNoneProject(); diff --git a/src/components/QuickQuote/index.jsx b/src/components/QuickQuote/index.jsx index 4b6b264..a6eebc9 100644 --- a/src/components/QuickQuote/index.jsx +++ b/src/components/QuickQuote/index.jsx @@ -1469,11 +1469,16 @@ const BoxComponent = props => { if (item.sName === "sPaperDirection" && selectedNode.sTypeKey === "huace") { return false; } + // 判断bPartsDimension 是否显示展长展宽，0不显示，1显示 if (selectedNode.bPartsDimension === false && (item.sName === "dPartsLength" || item.sName === "dPartsWidth")) { return false; } + + if (!selectedNode.bBleed && item.sName === "dBleed") { + return false; + } return item.iTag === iTag; }); @@ -1533,8 +1538,9 @@ const BoxComponent = props => { x.sName === "dPartsWidth" || x.sName === "dRowGap" || x.sName === "dColGap" || + x.sName === "dBleed" || x.sName === "sPaperDirection", - default: x => x.sName === "sMagnification" || x.sName === "dPartsLength" || x.sName === "dPartsWidth" || x.sName === "dSumPQty", + default: x => x.sName === "dBleed" || x.sName === "sMagnification" || x.sName === "dPartsLength" || x.sName === "dPartsWidth" || x.sName === "dSumPQty", }; if (selectedNode.sProductType === "不干胶") { upViewProps12.viewConfigs = upViewProps12.viewConfigs.filter(filterConditions.juantong); @@ -1542,6 +1548,7 @@ const BoxComponent = props => { if (!(selectedNode.sTypeKey === "huace" && slaveRowData.sBoxModel === "封面")) { upViewProps12.viewConfigs = upViewProps12.viewConfigs.filter(filterConditions.default); } + // 拼板信息表单 const upViewProps20 = getUpViewPropsByITag(20); // 如果是卷筒类需要单独处理 @@ -1876,10 +1883,10 @@ const BoxComponent = props => { }; let boxList = []; - const {sStripType = 0} = selectedNode; + const { sStripType = 0 } = selectedNode; if ( (slaveRowData.sColumnNameConfig && masterData.dLength && masterData.dWidth && masterData.dHeight) || - (Number(sStripType) === 1 && slaveRowData.sColumnNameConfig && masterData.dLength && masterData.dWidth) + (Number(sStripType) === 1 && slaveRowData.sColumnNameConfig && masterData.dLength && masterData.dWidth) ) { const slaveNewData = JSON.parse(slaveRowData.sColumnNameConfig); const tables = [ -- libgit2 0.22.2