排版

陈鑫涛
1 parent 29b14319
Showing 6 changed files with 174 additions and 59 deletions
src/components/Common/Typesetting/typesetting.js
src/components/QuickQuote/index.jsx
src/mobile/components/SelectInput.jsx
src/mobile/quotation/detailNew.jsx
src/mobile/quotation/quotationDetail.css
src/mobile/quotation/quotationDetail.less
@@ -20,8 +20,10 @@ const Typesetting = props =&gt; {
     boxWidth,
     boxHeight,
     textSize,
+    isMobile,
   } = props;
-  if (!slaveRowData) return
+  console.log("🚀 ~ Typesetting:", props);
+  if (!slaveRowData) return;
   const {
     dSBLB, // 上边留白
     dXBLB, // 下边留白
@@ -52,6 +54,8 @@ const Typesetting = props =&gt; {
   const [dMaterialsKQty, setDMaterialsKQty] = useState(0);
   const [dPartsLength, setDPartsLength] = useState(0);
+  // 横板
+  const { dHorizontal, dPortrait, dHorizontalType, dPortraitType } = slaveRowData;
   // 使用 useRef 获取 DOM 元素
   const boxRef = useRef(null);
   const boxsRef = useRef(null);
@@ -67,8 +71,10 @@ const Typesetting = props =&gt; {
   const slaveDataDetail = slaveData?.find(item => item.sTreeNodeName === selectedNode.showName && item.sBoxModel === boxModel);
   const maxWidth = Number(slaveDataDetail?.dMaxLength);
   const maxHeight = Number(slaveDataDetail?.dMaxWidth);
+
   const outerWidth = Number(slaveDataDetail?.dMaxLength); // 默认取最大上机尺寸
   const outerHeight = Number(slaveDataDetail?.dMaxWidth); // 默认取最大上机尺寸
+  console.log("🚀 ~ maxWidth:", dHorizontal, dPortrait,dHorizontalType,dPortraitType, outerWidth, outerHeight);
   // 确认是竖向排列还是横向排列
   const L = masterData?.dLength;
@@ -215,7 +221,6 @@ const Typesetting = props =&gt; {
   // 每个盒子加上边距 和第二组偏移量 如果根据次盒再加上次盒偏移量
   let cols = Math.floor(outerWidth / (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset)));
   let rows = Math.floor(outerHeight / (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset)));
-
   let colsMaxLength = (cols - 1) * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset)) + innerWidthCombined;
   while (colsMaxLength >= outerWidth && cols > 0) {
     cols = cols - 1;
@@ -240,6 +245,28 @@ const Typesetting = props =&gt; {
   const commonHeightCheck = remainingHeight > jInnerHeight;
   const commonWidthCheck = remainingWidth > jInnerWidth;
   const remaining = isVertical ? commonHeightCheck : commonWidthCheck;
+  console.log(
+    cols,
+    rows,
+    innerWidth,
+    innerHeight,
+    jInnerWidth,
+    jInnerHeight,
+    innerWidthCombined,
+    innerHeightCombined,
+    remainingWidth,
+    remainingHeight,
+    colsMaxLength,
+    rowsMaxLength,
+    remaining,
+    isVertical,
+    boxLengthOffset,
+    boxWidthOffset,
+    dSLengthOffset,
+    dFLengthOffset,
+    "rowsMaxLength"
+  );
+
   // 抵扣盒默认展示 svg
   // const isSvg = props.slaveRowData.sName === "扣抵盒";
   // 组装svg数据
@@ -265,16 +292,16 @@ const Typesetting = props =&gt; {
         position: "absolute",
         left: `${leftPosition}px`,
         top: `${topPosition}px`,
-        transform: `rotateZ(${offsetZ}deg)`,
+
         zIndex: 10,
       }}
       onDoubleClick={() => {
         onClick();
       }}
     >
-      {/* <img src={icon} width="100%" height="100%" /> */}
-      <DynamicSVG {...svgProps} />
-      {/* {isSvg ? <DynamicSVG {...props} /> : <img src={icon} width="100%" height="100%" />} */}
+      <div style={{ transform: `rotateZ(${offsetZ}deg)` }}>
+        <DynamicSVG {...svgProps} />
+      </div>
     </div>
   );
   const createBox = (col, row, index, leftPosition, topPosition, offsetZ, icon) => (
@@ -299,24 +326,25 @@ const Typesetting = props =&gt; {
       <div
         key={`${col}-${row}-${index}`}
         style={{
-          width: `${(iSAngle === 90 || iSAngle === 270) ? jInnerWidth:innerWidth}px`,
-          height: `${(iFAngle === 90 || iFAngle === 270) ? jInnerHeight:innerHeight}px`,
+          width: `${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`,
+          height: `${iFAngle === 90 || iFAngle === 270 ? jInnerHeight : innerHeight}px`,
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
           position: "absolute",
           left: `${dFLengthOffset + dYBJJ}px`,
           top: `${iFAngle === 90 || iFAngle === 270 ? 0 : dFWidthOffset + dXBJJ}px`,
-          transform: `rotateZ(${iFAngle}deg)`,
         }}
       >
-        <DynamicSVG {...svgProps} />
+        <div style={{ transform: `rotateZ(${iFAngle}deg)` }}>
+          <DynamicSVG {...svgProps} />
+        </div>
       </div>
       <div
         key={`${col}-${row}-${index}-1`}
         style={{
-          width: `${(iSAngle === 90 || iSAngle === 270) ? jInnerWidth:innerWidth}px`,
-          height: `${(iSAngle === 90 || iSAngle === 270) ? jInnerHeight:innerHeight}px`,
+          width: `${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`,
+          height: `${iSAngle === 90 || iSAngle === 270 ? jInnerHeight : innerHeight}px`,
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
@@ -325,10 +353,11 @@ const Typesetting = props =&gt; {
           top: `${
             isVertical ? jInnerHeight + dXBJJ + dFWidthOffset + dSWidthOffset : iSAngle === 90 || iSAngle === 270 ? 0 : dSWidthOffset + dXBJJ
           }px`,
-          transform: `rotateZ(${iSAngle}deg)`,
         }}
       >
-        <DynamicSVG {...svgProps} />
+        <div style={{ transform: `rotateZ(${iSAngle}deg)` }}>
+          <DynamicSVG {...svgProps} />
+        </div>
       </div>
     </div>
   );
@@ -362,12 +391,13 @@ const Typesetting = props =&gt; {
           position: "absolute",
           left: `${dFLengthOffset + dYBJJ}px`,
           top: `${dFWidthOffset + dXBJJ}px`,
-          transform: `rotateZ(${iFAngle}deg)`,
         }}
       >
         {/* <img src={icon} width="100%" height="100%" /> */}
         {/* {isSvg ? <DynamicSVG {...props} /> : <img src={icon} width="100%" height="100%" />} */}
-        <DynamicSVG {...svgProps} />
+        <div style={{ transform: `rotateZ(${iFAngle}deg)` }}>
+          <DynamicSVG {...svgProps} />
+        </div>
       </div>
     </div>
   );
@@ -389,7 +419,6 @@ const Typesetting = props =&gt; {
   const calculateTopPosition = (row, reference, isVertical, topPosition, dSWidthOffset, dXBJJ) => {
     if (isVertical) {
       if (reference) {
-        
         return row === 0 ? topPosition : topPosition + boxWidthOffset * row;
       } else {
         return row === 0 ? topPosition : topPosition + (dSWidthOffset + boxWidthOffset) * row;
@@ -404,23 +433,20 @@ const Typesetting = props =&gt; {
   };
   const scaleXD = (clientWidth - 50) / (outerWidth + 110);
   const scaleYD = (clientHeight - 5) / (outerHeight + 90);
-  useEffect(
-    () => {
-      // 计算缩放比例
-      // setBoxKey(new Date().getTime());
-      setTimeout(() => {
-        const scaleX = (clientWidth - 50) / (outerWidth + 110);
-        const scaleY = (clientHeight - 5) / (outerHeight + 90);
-        const newScale = Math.min(scaleX, scaleY);
-        setScale(newScale);
-        if (boxRef.current) {
-          boxRef.current.style.transform = `scale(${scaleX}, ${scaleY})`;
-          boxRef.current.style.transformOrigin = "top left";
-        }
-      }, 0);
-    },
-    [radioValue, slaveRowData, masterData, selectedNode, slaveData]
-  );
+  useEffect(() => {
+    // 计算缩放比例
+    // setBoxKey(new Date().getTime());
+    setTimeout(() => {
+      const scaleX = (clientWidth - 50) / (outerWidth + 110);
+      const scaleY = (clientHeight - 5) / (outerHeight + 90);
+      const newScale = Math.min(scaleX, scaleY);
+      setScale(newScale);
+      if (boxRef.current) {
+        boxRef.current.style.transform = `scale(${scaleX}, ${scaleY})`;
+        boxRef.current.style.transformOrigin = "top left";
+      }
+    }, 0);
+  }, [radioValue, slaveRowData, masterData, selectedNode, slaveData]);
   // 生成里层 div 的数组
   const innerDivs = [];
   for (let col = 0; col < cols; col++) {
@@ -476,17 +502,21 @@ const Typesetting = props =&gt; {
     const propsDataWidth = Number(propsData.props.style.width.slice(0, -2));
     const propsDataHeight = Number(propsData.props.style.height.slice(0, -2));
     const propsDataTop = Number(propsData.props.style.top.slice(0, -2));
-    
-    const newMaterialLength = propsDataLeft + innerWidthCombined; // 原纸长
+    // 判断列是否是单独的
+    const newMaterialLength = propsDataLeft + (remaining ? jInnerWidth : innerWidthCombined); // 原纸长
     const newMaterialWidth = propsDataTop + propsDataHeight - dSBLB;
     // 计算开数
-    const dSinglePQty = variables
+    const dSinglePQty = isVertical
       ? remaining
         ? cols + cols * (rows * 2)
         : cols * (rows * 2)
       : remaining
-        ? rows + rows * (cols * 2)
-        : rows * (cols * 2);
+      ? rows + rows * (cols * 2)
+      : rows * (cols * 2);
+    // 计算竖版数量
+    const dHorizontalType = isVertical ? cols : remaining ? cols * 2 + 1 : cols * 2;
+    const dPortraitType = isVertical ? rows * 2 : remaining ? rows : rows;
+
     const newDProductQty = masterData.dProductQty;
     const dMaterialsKQty = slaveDataDetail.dMaterialsKQty || 1;
     if (
@@ -516,7 +546,9 @@ const Typesetting = props =&gt; {
         newMaterialLength,
         newMaterialWidth,
         innerWidth,
-        innerHeight
+        innerHeight,
+        dHorizontalType,
+        dPortraitType
       );
     } else if (dProductQty !== newDProductQty) {
       setDProductQty(newDProductQty);
@@ -533,7 +565,9 @@ const Typesetting = props =&gt; {
         slaveDataDetail.dWlcd,
         slaveDataDetail.dWlkd,
         innerWidth,
-        innerHeight
+        innerHeight,
+        dHorizontalType,
+        dPortraitType
       );
     }
     openEdition = (((newMaterialLength * newMaterialWidth) / (maxWidth * maxHeight)) * 100).toFixed(2);
@@ -550,8 +584,9 @@ const Typesetting = props =&gt; {
   }
   const isMax = slaveDataDetail?.dMaxLength && Number(slaveDataDetail?.dMaxLength) >= Number(slaveRowData?.dMachineLength);
   const isShow = slaveRowData && slaveRowData.dMachineLength && slaveRowData.dMaxWidth && slaveRowData.dMaxLength && isMax && innerDivs.length;
-  
+
   const onClick = () => {
+    if (isMobile) return;
     setIsModalOpen(true);
     // setBoxKeys(new Date().getTime());
     setTimeout(() => {
@@ -1525,7 +1525,8 @@ const BoxComponent = props =&gt; {
   // 使用 useCallback 确保回调函数的稳定性
   const handleSaveState = useCallback(
-    (length, width, slaveData, masterData, dSinglePQty, dMaterialsKQty, dProductQty, scale, dWlcd, dWlkd, innerWidth, innerHeight) => {
+    (length, width, slaveData, masterData, dSinglePQty, dMaterialsKQty, dProductQty, scale, dWlcd, dWlkd, innerWidth, innerHeight,dHorizontal,dPortrait) => {
+      console.log("🚀 ~ dPortrait:",dHorizontal,dPortrait)
       // 查找符合条件的索引
       const { selectedNode } = props.state;
@@ -1564,6 +1565,10 @@ const BoxComponent = props =&gt; {
           scale: scale,
           dPartsLength: innerWidth,
           dPartsWidth: innerHeight,
+          dHorizontal:dHorizontal,
+          dPortrait:dPortrait,
+          dHorizontalType:dHorizontal,
+          dPortraitType:dPortrait,
         };
         // 更新状态
         props.setState(prevState => ({
@@ -1707,6 +1712,7 @@ const BoxComponent = props =&gt; {
     dSvgBoxHeight: 300,
     showNew: 1,
   };
+  const isShowImg = boxList.find(x=>x.sName === '盒身')?.type !== '' || false
   return (
     <Tabs
       key={boxModel}
@@ -1773,7 +1779,7 @@ const BoxComponent = props =&gt; {
                       <div className={styles.boxPart1Right}>
                         <div className={styles.boxRreview}>
                           <Image.PreviewGroup>
-                            {slaveRowData.sPackDetailPathUpLoad ? (
+                            {!isShowImg ? (
                               <Image width={300} src={slaveRowData.sPackDetailPathUpLoad} />
                             ) : svgProps.boxList.length ? (
                               <div style={{ width: " 300px", height: "300px" }}>
@@ -59,9 +59,9 @@ const SelectInput = props =&gt; {
   const handleConfirm = () => {
     if (!values[0]) {
       setVisible(false);
-
       return;
     }
+    // 判断是否是
     const index = columns.findIndex(item => item.value === values[0]);
     const data = coplyColumns[index];
     data[itemDetail.sName] = data[itemDetail.sName] ? data[itemDetail.sName] : data.label || data.sName || data.sProcessName || data.sColorName;
 import { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import { history } from "umi";
-import { Toast, Input, Tabs, Selector, Grid, Image, Button, Checkbox, Switch, Dialog, Radio } from "antd-mobile";
-import { AddOutline, MinusOutline, EditFill } from "antd-mobile-icons";
+import { Toast, Input, Tabs, Selector, Grid, Image, Button, Checkbox, Switch, Dialog, Radio, Space } from "antd-mobile";
+import { AddOutline, MinusOutline, EditFill, CloseOutline } from "antd-mobile-icons";
 import commonConfig from "@/utils/config";
 import * as commonServices from "@/services/services";
 import * as commonFunc from "@/components/Common/commonFunc";
@@ -286,6 +286,14 @@ const QuickQuoteEvent = props =&gt; {
           dMachineLength: slaveData[saveIndex].dWlcd,
         };
       }
+
+      if (sFieldName === "dMaxLength") {
+        slaveData[saveIndex] = {
+          ...slaveData[saveIndex],
+          dMaxLength: changeValue.dMachineLength,
+          dMaxWidth: changeValue.dMachineWidth,
+        };
+      }
       setState(pre => ({ ...pre, slaveData, ...extraState }));
     } else if (name === "finished") {
       const { productProcessInfo = [] } = masterData;
@@ -939,7 +947,6 @@ const QuickQuoteEvent = props =&gt; {
 };
 // 入口
 const QuotationAllprogressDetail = baseProps => {
-  // const masterProps = getProps(baseProps);
   const props = QuickQuoteEvent(baseProps);
   const { selectedNode, slaveConfig, quotationData, app, sModelsId, masterData } = props;
   const { showName, sUnit } = quotationData;
@@ -1019,7 +1026,6 @@ const QuotationAllprogressDetail = baseProps =&gt; {
     // 取上机尺寸
     return commonUtils.convertStrToObj(sColumnNameConfigStr, []);
   };
-
   return (
     <div className={styles.quotationDetailBox}>
       <QuotationDetail {...props} />
@@ -1179,7 +1185,7 @@ const QuotationTabs = props =&gt; {
   };
   return (
     <div>
-      <div>
+      <div className={styles.tabsBox}>
         <Tabs
           activeKey={activeKey}
           onChange={key => {
@@ -1188,12 +1194,23 @@ const QuotationTabs = props =&gt; {
         >
           {sAllPartsNameList && sAllPartsNameList.length
             ? sAllPartsNameList.map((pane, index) => (
-                <Tabs.Tab key={pane} title={pane}>
+                <Tabs.Tab key={pane} title={pane} style={{ position: "relative" }}>
                   <BoxComponent {...tabsProps} paneKey={pane} />
+                  {/* <CloseOutline className={styles.tabClearBtn}/> */}
                 </Tabs.Tab>
               ))
             : ""}
         </Tabs>
+        {/* <Button
+          className={styles.tabAddBtn}
+          color="primary"
+          fill="solid"
+          size="small"
+          style={{ width: "1.93rem", height: "1.93rem", display: "flex", justifyContent: "center", alignItems: "center", textAlign: "center" }}
+          onClick={() => {}}
+        >
+          <AddOutline />
+        </Button> */}
       </div>
     </div>
   );
@@ -1423,6 +1440,7 @@ const BoxComponent = props =&gt; {
   useEffect(() => {
     if (!sBackProcessData) return;
     const newSwitchStates = downAbleConfigsNew;
+  console.log("🚀 ~ switchStates:", switchStates)
     setSwitchStates(newSwitchStates);
   }, [downAbleConfigsNew, boxModel]); // 依赖数组
@@ -1469,7 +1487,8 @@ const BoxComponent = props =&gt; {
     tableName: "finished",
   };
   const calcMethodData = commonUtils.convertStrToObj(slaveRowData?.sColumnNameConfigExclusion, []);
-  const radioValue = calcMethodData[0]?.sCode;
+  // const radioValue = null;
+  const { radioValue = calcMethodData[0]?.sCode } = slaveRowData
   const [materialLength, setMaterialLength] = useState(0);
   const [materialWidth, setMaterialWidth] = useState(0);
   // 使用 useCallback 确保回调函数的稳定性
@@ -1563,6 +1582,7 @@ const BoxComponent = props =&gt; {
     boxWidth: 190,
     boxHeight: 150,
     textSize: 9,
+    isMobile: true,
     // boxPicData,
   };
   const showImgMProps = {
@@ -1664,7 +1684,10 @@ const BoxComponent = props =&gt; {
     );
   };
   const { loading } = props;
-
+  const calcMethod = calcMethodData.map(item => ({
+    value: item.sCode,
+    label: item.showName,
+  }));
   return (
     <div>
       <Selector
@@ -1725,7 +1748,14 @@ const BoxComponent = props =&gt; {
                 <Grid.Item>
                   <div className={styles.customer} key={x.id || x.showName}>
                     <div>{x.showName}</div>
-                    <SelectInput {...upViewProps20} itemDetail={x} bCanInput={true} />
+                    <SelectInput
+                      {...upViewProps20}
+                      itemDetail={x}
+                      bCanInput={() => {
+                        // if (x.showDropDown) return false;
+                        return true;
+                      }}
+                    />
                   </div>
                 </Grid.Item>
               ))
@@ -1740,6 +1770,22 @@ const BoxComponent = props =&gt; {
           <ShowImgM {...showImgMProps} />
         </div>
       </div>
+      <Radio.Group
+        value={radioValue}
+        onChange={e => {
+          const iIndex = slaveData.findIndex(item => item.sId === slaveRowData.sId);
+          console.log("🚀 ~ iIndex:", iIndex)
+          slaveData[iIndex].radioValue = e;
+          props.setState(pre => ({
+            ...pre,
+            slaveData: slaveData,
+          }));
+        }}
+      >
+        {calcMethod.map(item => (
+          <Radio value={item.value} style={{marginRight:'0.5rem'}}> {item.label}</Radio>
+        ))}
+      </Radio.Group>
       <div>
         <MaterialsComponent {...props} slaveRowData={slaveRowData} boxModel={boxModel} />
       </div>
@@ -126,3 +126,17 @@
   margin-top: 1rem;
   background-color: #dededf;
 }
+.tabsBox {
+  position: relative;
+  width: 100%;
+}
+.tabsBox .tabAddBtn {
+  position: absolute;
+  right: 0;
+  top: 0.75rem;
+}
+.tabsBox .tabClearBtn {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
@@ -115,23 +115,37 @@
     width: 3.5rem;
   }
 }
-.projectBtn{
+.projectBtn {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.boxTitle{
+.boxTitle {
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 2rem;
   margin-top: 1rem;
 }
-.quotationBody{
+.quotationBody {
   font-size: 1.25rem;
-  .line{
+  .line {
     width: 100%;
     height: 1px;
     margin-top: 1rem;
     background-color: #dededf;
   }
-}
 \ No newline at end of file
+}
+.tabsBox {
+  position: relative;
+  width: 100%;
+  .tabAddBtn {
+    position: absolute;
+    right: 0;
+    top: .75rem;
+  }
+  .tabClearBtn{
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}