根据字段展示是否出血

陈鑫涛
1 parent 391e5816
Showing 3 changed files with 188 additions and 121 deletions
src/components/Common/BoxDesignCompontent/index.js
src/components/Common/BoxDesignCompontent/svg.js
src/components/QuickQuote/index.jsx
@@ -53,16 +53,13 @@ const BoxDesignEvent = props =&gt; {
     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 =&gt; {
   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 =&gt; {
     });
   }
   // 有数据的时候 盒型设计需要赋值
-  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 =&gt; {
   };
   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 =&gt; {
     return (
       <Select.Option key={option.sId} value={option.sCode} label={option.sName} image={getImage(option.sMakeUpPath)}>
         <div style={{ display: "flex", alignItems: "center" }}>
-          {option.sMakeUpPath ? <img src={getImage(option.sMakeUpPath)}  style={{ width: 24, height: 24, marginRight: 8 }} /> : ""}
+          {option.sMakeUpPath ? <img src={getImage(option.sMakeUpPath)} style={{ width: 24, height: 24, marginRight: 8 }} /> : ""}
           <span>{option.sName}</span>
         </div>
       </Select.Option>
@@ -484,7 +482,10 @@ const BoxDesignCompontent = baseProps =&gt; {
         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;
@@ -76,7 +76,7 @@ const SvgBox = props =&gt; {
     const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); // 创建 <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 =&gt; {
         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 =&gt; {
         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 =&gt; {
         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 =&gt; {
         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 =&gt; {
         }
         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 =&gt; {
       top = sfhs?.value;
     }
-    
     // 处理天地盒默认加上高
     if (Number(svgType) === 4) {
       top = top + height;
@@ -1195,7 +1255,6 @@ const SvgBox = props =&gt; {
       } else {
         top = max;
       }
-      
     } else if (yscw?.type) {
       const max = dYSCW;
       if (
@@ -1217,7 +1276,7 @@ const SvgBox = props =&gt; {
         }
         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 =&gt; {
     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 =&gt; {
         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();
@@ -1469,11 +1469,16 @@ const BoxComponent = props =&gt; {
         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 =&gt; {
       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 =&gt; {
   if (!(selectedNode.sTypeKey === "huace" && slaveRowData.sBoxModel === "封面")) {
     upViewProps12.viewConfigs = upViewProps12.viewConfigs.filter(filterConditions.default);
   }
+ 
   // 拼板信息表单
   const upViewProps20 = getUpViewPropsByITag(20);
   // 如果是卷筒类需要单独处理
@@ -1876,10 +1883,10 @@ const BoxComponent = props =&gt; {
   };
   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 = [