排版

陈鑫涛
1 parent 89f2e12c
Showing 2 changed files with 86 additions and 84 deletions
src/components/Common/Typesetting/typesetting.js
src/components/QuickQuote/index.jsx
@@ -87,11 +87,10 @@ const Typesetting = props =&gt; {
   // 如果需要自定义排版数
   // 确认是竖向排列还是横向排列
  
-  const L = masterData?.dLength || 0;
-  const W = masterData?.dWidth || 0 ;
+  const L = Number(masterData?.dLength) || 0;
+  const W = masterData?.dWidth || 0;
   const H = masterData?.dWidth || 0;
   const D = masterData?.dHeight || 0;
-
   // 动态计算公式值
   const evaluateFormula = (formula, variables) => {
     if (!formula) return 0; // 如果公式为空，返回0
@@ -118,8 +117,9 @@ const Typesetting = props =&gt; {
     D,
     ...props.slaveRowData,
   };
+  const { sStripType = 0 } = props.state.selectedNode;
   let boxList = [];
-  if (sColumnNameConfig) {
+  if (sColumnNameConfig ) {
     const slaveNewData = JSON.parse(sColumnNameConfig);
     const tables = [
       { name: "盒型类别", value: slaveRowData.sBoxType, type: null },
@@ -142,7 +142,7 @@ const Typesetting = props =&gt; {
     slaveNewData.forEach(x => {
       let key = 0;
       if (x.sAssignFormula) {
-        key = evaluateFormula(x.sAssignFormula, variables);
+        key = parseFloat(evaluateFormula(x.sAssignFormula, variables)).toFixed(2) || 0;
       } else {
         key = slaveRowData[x.sName];
       }
@@ -176,7 +176,7 @@ const Typesetting = props =&gt; {
     });
   }
  
-  const result = boxList.reduce((acc, { sCode, value }) => ({ ...acc, [sCode]: value }), {});
+  const result = boxList?.reduce((acc, { sCode, value }) => ({ ...acc, [sCode]: value }), {});
  
   // 计算表达式结果
   const variabless = {
@@ -187,26 +187,6 @@ const Typesetting = props =&gt; {
     ...props.slaveRowData,
     ...result,
   };
-  const evaluateFormulas = (formula, variables) => {
-    if (!formula) return ""; // 如果公式为空，返回空字符串
-
-    提; //取公式中的变量名
-    const variableNames = formula.match(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g) || [];
-
-    // 替换公式中的变量为实际值
-    let modifiedFormula = formula;
-    variableNames.forEach(name => {
-      if (variables[name] !== undefined) {
-        modifiedFormula = modifiedFormula.replace(new RegExp(`\\b${name}\\b`, "g"), variables[name]);
-      }
-    });
-
-    return modifiedFormula;
-  };
-  // const s = `((dYXCW + D) >= dSFHS) && ((dYXCW + D) >= dZSCW) 
-  // ? (dSFHS >= dZSCW ? -(dYXCW + D - dSFHS) * 2 : -((dYXCW + D) - dZSCW)) * 2 
-  // : dSFHS >= dZSCW ? (dYXCW + D >= dZSCW) ? -(dSFHS - (dYXCW + D)) * 2 : -(dSFHS - dZXCW) * 2 : (dYXCW + D >= dSFHS) ? -(dZSCW - (dYXCW + D)) * 2 : -(dZXCW - dSFHS) * 2`
-  // const ddd = evaluateFormula(s, variabless);
   let DisableMateriallIcon = L ? sPackDetailPath : null;
   // 盒子展长展开公式计算
   const innerWidth = slaveRowData.sTypes === "6" ? evaluateFormula(sWidthFormula, variabless) : evaluateFormula(sLengthFormula, variabless);
@@ -220,15 +200,16 @@ const Typesetting = props =&gt; {
   const boxWidthOffset = evaluateFormula(sSecondLongitudinalOffset, variabless); // 第二列纵向偏移
   const isVertical = sSettingMethod === "从上到下"; // true 表示竖向排列，false 表示横向排列 sSettingMethod === '从上到下'
   const reference = sSGroupOffset === "首盒"; // 第三列参考
-
+  console.log(innerWidth,innerHeight,dFWidthOffset,dFLengthOffset,dSWidthOffset,dSLengthOffset,boxLengthOffset,boxWidthOffset,'typeSetting');
+  
   // 计算内层盒子尺寸 加上间距
-  let jInnerHeight = innerHeight + dXBJJ * 2;
-  let jInnerWidth = innerWidth + dYBJJ * 2;
+  let jInnerHeight = innerHeight;
+  let jInnerWidth = innerWidth;
   let dSvgBoxWidth = innerWidth;
   let dSvgBoxHeight = innerHeight;
   if (iFAngle === 90 || iFAngle === 270 || iSAngle === 90 || iSAngle === 270) {
-    jInnerHeight = innerWidth + dYBJJ + dYBJJ;
-    jInnerWidth = innerHeight + dXBJJ + dXBJJ;
+    jInnerHeight = innerWidth;
+    jInnerWidth = innerHeight;
     // dSvgBoxHeight = jInnerHeight;
     // dSvgBoxWidth = jInnerWidth;
   }
@@ -301,11 +282,6 @@ const Typesetting = props =&gt; {
       }
     }
   }
-
-  // 抵扣盒默认展示 svg
-  // const isSvg = props.slaveRowData.sName === "扣抵盒";
-  // 组装svg数据
-
   const svgProps = {
     ...props,
     boxList,
@@ -340,7 +316,7 @@ const Typesetting = props =&gt; {
       </div>
     </div>
   );
-  
+
   const createBox = (col, row, index, leftPosition, topPosition, offsetZ, icon) => (
     <div
       key={`${col}-${row}-${index}`}
@@ -369,14 +345,23 @@ const Typesetting = props =&gt; {
           justifyContent: "center",
           alignItems: "center",
           position: "absolute",
-          left: `${dFLengthOffset + dYBJJ}px`,
-          top: `${iFAngle === 90 || iFAngle === 270 ? dFLengthOffset : dFWidthOffset + dXBJJ}px`,
+          left: `${dFLengthOffset}px`,
+          top: `${iFAngle === 90 || iFAngle === 270 ? dFLengthOffset : dFWidthOffset}px`,
         }}
       >
         <div style={{ transform: `rotateZ(${iFAngle}deg)` }}>
-          {!sSvgPath ? <DynamicSVG {...svgProps} /> : <img src={sSvgPath} width={ `${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`} height={ `${iFAngle === 90 || iFAngle === 270 ? jInnerHeight : innerHeight}px`} />}
+          {!sSvgPath ? (
+            <DynamicSVG {...svgProps} />
+          ) : (
+            <img
+              src={sSvgPath}
+              width={`${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`}
+              height={`${iFAngle === 90 || iFAngle === 270 ? jInnerHeight : innerHeight}px`}
+            />
+          )}
         </div>
       </div>
+      {/* 次盒 */}
       <div
         key={`${col}-${row}-${index}-1`}
         style={{
@@ -386,14 +371,24 @@ const Typesetting = props =&gt; {
           justifyContent: "center",
           alignItems: "center",
           position: "absolute",
-          left: `${isVertical ? dSLengthOffset  :iSAngle === 90 || iSAngle === 270 ? innerHeight + dFLengthOffset + dSLengthOffset + dYBJJ * 2: innerWidth + dFLengthOffset + dSLengthOffset + dYBJJ * 2}px`,
-          top: `${
-            isVertical ? jInnerHeight + dXBJJ + dFWidthOffset + dSWidthOffset : iSAngle === 90 || iSAngle === 270 ? dSWidthOffset : dSWidthOffset + dXBJJ
+          left: `${
+            isVertical ? dSLengthOffset : iSAngle === 90 || iSAngle === 270
+              ? innerHeight + dFLengthOffset + dSLengthOffset + dYBJJ
+              : innerWidth + dFLengthOffset + dSLengthOffset + dYBJJ
           }px`,
+          top: `${isVertical ? jInnerHeight + dFWidthOffset + dSWidthOffset + dXBJJ: iSAngle === 90 || iSAngle === 270 ? dSWidthOffset : dSWidthOffset}px`,
         }}
       >
         <div style={{ transform: `rotateZ(${iSAngle}deg)` }}>
-          {!sSvgPath ? <DynamicSVG {...svgProps} /> : <img src={sSvgPath} width={ `${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`} height={`${iSAngle === 90 || iSAngle === 270 ? jInnerHeight : innerHeight}px`} />}
+          {!sSvgPath ? (
+            <DynamicSVG {...svgProps} />
+          ) : (
+            <img
+              src={sSvgPath}
+              width={`${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`}
+              height={`${iSAngle === 90 || iSAngle === 270 ? jInnerHeight : innerHeight}px`}
+            />
+          )}
         </div>
       </div>
     </div>
@@ -426,8 +421,8 @@ const Typesetting = props =&gt; {
           justifyContent: "center",
           alignItems: "center",
           position: "absolute",
-          left: `${dFLengthOffset + dYBJJ}px`,
-          top: `${dFWidthOffset + dXBJJ}px`,
+          left: `${dFLengthOffset}px`,
+          top: `${dFWidthOffset}px`,
         }}
       >
         {/* <img src={icon} width="100%" height="100%" /> */}
@@ -486,14 +481,13 @@ const Typesetting = props =&gt; {
   }, [radioValue, slaveRowData, masterData, selectedNode, slaveData]);
   // 生成里层 div 的数组
   const innerDivs = [];
- 
-  console.log(cols,rows,'cols');
-  
+      console.log("🚀 ~ typeSetting:",cols, rows,dZBLB,dSBLB)
+
   for (let col = 0; col < cols; col++) {
     for (let row = 0; row < rows; row++) {
-      const leftPosition = col * innerWidthCombined;
-      const topPosition = row * innerHeightCombined;
-      innerDivs.push(createBox(col, row, 1, leftPosition + dZBLB, topPosition + dSBLB, iFAngle, DisableMateriallIcon));
+      const leftPosition = col * (innerWidthCombined + dYBJJ);
+      const topPosition = row * (innerHeightCombined + dXBJJ);
+      innerDivs.push(createBox(col, row, 1, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
     }
     // 如果可以放下首盒
     if (remaining) {
@@ -506,10 +500,10 @@ const Typesetting = props =&gt; {
           leftPosition = col * innerWidthCombined;
           topPosition = rows * innerHeightCombined;
         } else {
-          leftPosition = col * innerWidthCombined;
-          topPosition = rows * innerHeightCombined;
+          leftPosition = col * (innerWidthCombined + dYBJJ); ;
+          topPosition = rows *( innerHeightCombined + dXBJJ);
         }
-        innerDivs.push(createBoxOne(col, rows, 3, leftPosition + dZBLB, topPosition + dSBLB, iFAngle, DisableMateriallIcon));
+        innerDivs.push(createBoxOne(col, rows, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
       } else {
         for (let index = 0; index < rows; index++) {
           // 先默认为首盒参考
@@ -522,7 +516,7 @@ const Typesetting = props =&gt; {
             topPosition = index * (innerHeightCombined + boxWidthOffset + dSWidthOffset);
             leftPosition = cols * (innerWidthCombined + boxLengthOffset + dSLengthOffset);
           }
-          innerDivs.push(createDiv(col, index, 3, leftPosition + dZBLB, topPosition + dSBLB, iFAngle, DisableMateriallIcon));
+          innerDivs.push(createDiv(col, index, 3, leftPosition  + (col * dYBJJ), topPosition + (index * dXBJJ), iFAngle, DisableMateriallIcon));
         }
       }
     }
@@ -533,20 +527,19 @@ const Typesetting = props =&gt; {
     if (maxLength > innerWidth) {
       let leftPosition = 0;
       let topPosition = 0;
-      
-      innerDivs.push(createBoxOne(0, rows, 3, leftPosition + dZBLB, topPosition + dSBLB, iFAngle, DisableMateriallIcon));
+      innerDivs.push(createBoxOne(0, rows, 3, leftPosition , topPosition , iFAngle, DisableMateriallIcon));
     }
   }
- // 如果第一列
+  // 如果第一列
   if (rows === 0) {
-    const maxWidth = Number(slaveDataDetail?.dMaxWidth)
+    const maxWidth = Number(slaveDataDetail?.dMaxWidth);
     if (maxWidth > innerHeight) {
-       let leftPosition = 0;
+      let leftPosition = 0;
       let topPosition = 0;
-      innerDivs.push(createBoxOne(cols, 0, 3, leftPosition + dZBLB, topPosition + dSBLB, iFAngle, DisableMateriallIcon));
+      innerDivs.push(createBoxOne(cols, 0, 3, leftPosition , topPosition, iFAngle, DisableMateriallIcon));
     }
   }
-  console.log(cols, '列数', rows, '行数');
+  
   // 判断展开长展开宽是否变化
   if (dPartsLength !== innerWidth && !innerDivs.length) {
     setDPartsLength(innerWidth);
@@ -562,11 +555,11 @@ const Typesetting = props =&gt; {
     const propsDataHeight = Number(propsData.props.style.height.slice(0, -2));
     const propsDataTop = Number(propsData.props.style.top.slice(0, -2));
     // 判断列是否是单独的
-    const newMaterialLength = propsDataLeft + (remaining ? jInnerWidth : innerWidthCombined) - dYBJJ; // 原纸长
-    const newMaterialWidth = propsDataTop + propsDataHeight - dSBLB;
+    const newMaterialLength = parseFloat(propsDataLeft + (remaining ? jInnerWidth : innerWidthCombined) + dSBLB + dXBLB).toFixed(2); // 原纸长
+    const newMaterialWidth = parseFloat(propsDataTop + propsDataHeight + dZBLB + dYBLB).toFixed(2);
  
     // 计算开数
-    const dSinglePQty = isVertical
+    let dSinglePQty = isVertical
       ? remaining
         ? cols + cols * (rows * 2)
         : cols * (rows * 2)
@@ -574,6 +567,10 @@ const Typesetting = props =&gt; {
       ? rows + rows * (cols * 2)
       : rows * (cols * 2);
     // 计算竖版数量
+      if ((cols === 1 && rows === 0 )|| (cols === 0 && rows === 1 )) {
+        dSinglePQty = 1
+      }
+
     const dHorizontalType = isVertical ? cols : remaining ? cols * 2 + 1 : cols * 2;
     const dPortraitType = isVertical ? (remaining ? rows * 2 + 1 : rows * 2) : remaining ? rows : rows;
  
@@ -643,15 +640,15 @@ const Typesetting = props =&gt; {
     setTimeout(() => {
       if (typesettingBox.current) {
         typesettingBox.current.style.backgroundColor = "#b7e0ff";
-        typesettingBox.current.style.marginTop = dSBLB + "px";
-        typesettingBox.current.style.marginLeft = dZBLB + "px";
+        // typesettingBox.current.style.margin = [dSBLB, dYBLB, dXBLB, dZBLB].map(item => item + "px").join(" ");
         typesettingBox.current.style.width = newMaterialLength + dYBLB + "px";
         typesettingBox.current.style.height = newMaterialWidth + dXBLB + "px";
+        // typesettingBox.current.style.top = dSBLB + "px";
+        // typesettingBox.current.style.left = dZBLB + "px";
       }
       if (typesettingBoxs.current) {
-          typesettingBoxs.current.style.backgroundColor = "#b7e0ff";
-        typesettingBoxs.current.style.marginTop = dSBLB + "px";
-        typesettingBoxs.current.style.marginLeft = dZBLB + "px";
+        typesettingBoxs.current.style.backgroundColor = "#b7e0ff";
+        // typesettingBox.current.style.margin = [dSBLB, dYBLB, dXBLB, dZBLB].map(item => item + "px").join(" ");
         typesettingBoxs.current.style.width = newMaterialLength + dYBLB + "px";
         typesettingBoxs.current.style.height = newMaterialWidth + dXBLB + "px";
       }
@@ -673,11 +670,11 @@ const Typesetting = props =&gt; {
     isShow,
     "isMax"
   );
-  const confirmParam = commonFunc.showLocalMessage(props, 'confirmParam', '排版尺寸大于上机尺寸，请确认参数!');
+  const confirmParam = commonFunc.showLocalMessage(props, "confirmParam", "排版尺寸大于上机尺寸，请确认参数!");
  
   if (isCustomized && !isShow) {
     if (isMobile) return;
-    message.error( confirmParam);
+    message.error(confirmParam);
   }
   const onClick = () => {
     if (isMobile) return;
@@ -716,11 +713,13 @@ const Typesetting = props =&gt; {
             right: 0,
             zIndex: 10,
             maxHeight: `${clientHeight}`,
-            padding: `${dSBLB}px ${dYBLB}px ${dXBLB}px ${dZBLB}px`,
+            // padding: `${dSBLB}px ${dYBLB}px ${dXBLB}px ${dZBLB}px`,
           }}
         >
           <div style={style} ref={boxRef}>
-            {boxList.length ? innerDivs : []}
+           <div style={{ position: "absolute", width: `${materialLength}px`, height: `${materialWidth}px`, marginLeft:`${dZBLB}px`, marginTop:`${dSBLB}px`,marginRight:`${dYBLB}px`, marginBottom:`${dXBLB}px` }}>
+              {boxList.length ? innerDivs : []}
+            </div>
             <div
               ref={typesettingBox}
               style={{
@@ -745,7 +744,7 @@ const Typesetting = props =&gt; {
                     transformOrigin: "top left",
                   }}
                 >
-                  <span style={{ color: "red", display: "inline-block", width: "50px" }}>{materialLength}</span>
+                  <span style={{ color: "red", display: "inline-block", width: "100px" }}>{materialLength}</span>
                   <div className={styles.maxWidthLeft}>
                     <VerticalRightOutlined />
                     <div
@@ -1004,7 +1003,7 @@ const Typesetting = props =&gt; {
               wordBreak: "break-all", // 确保长单词换行
             }}
           >
-           {confirmParam}
+            {confirmParam}
           </span>
         </div>
       )}
@@ -1037,7 +1036,9 @@ const Typesetting = props =&gt; {
           }}
         >
           <div style={{ ...style, position: "absolute", left: "50%" }} ref={boxsRef}>
-            {boxList.length ? innerDivs : []}
+            <div style={{ position: "absolute", width: `${materialLength}px`, height: `${materialWidth}px`, marginLeft:`${dZBLB}px`, marginTop:`${dSBLB}px`,marginRight:`${dYBLB}px`, marginBottom:`${dXBLB}px`}}>
+              {boxList.length ? innerDivs : []}
+            </div>
             <div
               ref={typesettingBoxs}
               style={{
@@ -1060,7 +1061,7 @@ const Typesetting = props =&gt; {
                     color: "#333",
                   }}
                 >
-                  <span style={{ color: "red", display: "inline-block", width: "50px" }}>{materialLength}</span>
+                  <span style={{ color: "red", display: "inline-block", width: "100px" }}>{materialLength}</span>
                   <div className={styles.maxWidthLeft}>
                     <LeftOutlined style={{ fontSize: "20px" }} />
                     <div
@@ -1120,11 +1121,11 @@ const Typesetting = props =&gt; {
                     color: "#333",
                   }}
                 >
-                  <span style={{ color: "red", display: "inline-block", width: "50px" }}>{materialWidth}</span>
+                  <span style={{ color: "red", display: "inline-block", width: "100px" }}>{materialWidth}</span>
                   <div
                     style={{
                       position: "absolute",
-                      top: `-${materialWidth / 2 - dSBLB}px`,
+                      top: `-${materialWidth / 2 }px`,
                       left: "14px",
                       width: "20px",
                     }}
@@ -1135,7 +1136,7 @@ const Typesetting = props =&gt; {
                         height: `${materialWidth * 0.3}px`,
                         position: "absolute",
                         right: "10px",
-                        top: `${materialWidth / 2 - dSBLB + 8}px`,
+                        top: `${materialWidth / 2  + 8}px`,
                         width: "2px",
                         backgroundColor: "#333",
                       }}
@@ -1146,7 +1147,7 @@ const Typesetting = props =&gt; {
                         width: "30px",
                         backgroundColor: "#333",
                         position: "absolute",
-                        top: `${materialWidth / 2 - dSBLB}px`,
+                        top: `${materialWidth / 2 }px`,
                         right: "-4.5px",
                       }}
                     />
@@ -215,6 +215,7 @@ const QuickQuoteEvent = props =&gt; {
             upAbleConfigsExtra: sColumnNameConfig,
           };
         } else {
+          if(!slaveData[0]) return
            const sColumnNameConfig = commonUtils.convertStrToObj(slaveData[0].sColumnNameConfig, []).map(item => ({
             ...item,
             iColValue: item.iColValue || 6,
@@ -2004,7 +2005,7 @@ const BoxComponent = props =&gt; {
     slaveNewData.forEach(x => {
       let key = 0;
       if (x.sAssignFormula) {
-        key = evaluateFormula(x.sAssignFormula, variables);
+        key =  parseFloat(evaluateFormula(x.sAssignFormula, variables)).toFixed(2);
         slaveRowData[x.sName] = key;
       } else {
         key = slaveRowData[x.sName];