From af31c58fd2fcca95d4d46b7b1cf52d9df9c76d0a Mon Sep 17 00:00:00 2001 From: 陈鑫涛 <10125295+chen-xintao97@user.noreply.gitee.com> Date: Mon, 11 Aug 2025 11:49:36 +0800 Subject: [PATCH] 盒型设计 --- src/components/Common/BoxDesignCompontent/index.js | 338 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------ src/components/Common/BoxDesignCompontent/svg.js | 6 +++--- 2 files changed, 185 insertions(+), 159 deletions(-) diff --git a/src/components/Common/BoxDesignCompontent/index.js b/src/components/Common/BoxDesignCompontent/index.js index 52bdd23..150c9a0 100644 --- a/src/components/Common/BoxDesignCompontent/index.js +++ b/src/components/Common/BoxDesignCompontent/index.js @@ -107,10 +107,15 @@ const BoxDesignCompontent = baseProps => { const [boxKey, setBoxKey] = useState(new Date().getTime()); const [doubleLayerList, setDoubleLayerList] = useState([]); if (!boxVisible) return ""; + const isEnglish = (str) => { + return /^[A-Za-z]+$/.test(str); + } // 1️⃣ 只负责 tableColum useEffect(() => { if (!tableData?.length) return; - + const keywords = ["盒长", "盒高", "盒宽", "盒身","Box Length", "Box Width", "Box Height","Box Body"]; + // 判断是否是英文 + // isEnglish(item.showName) ? item.sEnglish : item.sChinese const newTableColum = tableData .filter(item => item.bVisible) // 先过滤可见 .map(item => ({ @@ -122,9 +127,18 @@ const BoxDesignCompontent = baseProps => { })) .filter( item => - !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身")) + !keywords.some(keyword => item.showName.includes(keyword)) ) - .map(item => (item.showName === "盒型类别" ? { ...item, showName: "盒型名称" } : item)); + .map(item => { + if (item.showName === '盒型类别') { + return { ...item, showName: '盒型名称' }; + } + if (item.showName.trim() === 'Box Type Category') { + return { ...item, showName: 'Box Name' }; + } + return item; + } + ); setTableColum(newTableColum); }, [tableData]); @@ -133,6 +147,8 @@ const BoxDesignCompontent = baseProps => { useEffect(() => { if (!tableData?.length) return; + const keywords = ['盒身', 'Box Body']; + const bodyList = tableData .filter(item => item.bVisible) .map(item => ({ @@ -140,9 +156,11 @@ const BoxDesignCompontent = baseProps => { isEditable: true, isSelect: false, selectImage: null, - value: "", + value: '', })) - .filter(item => item.showName.includes("盒身")); + .filter(item => + keywords.some(k => item.showName.trim().includes(k)) + ); setBoxBodyList(bodyList); }, [tableData]); @@ -150,6 +168,15 @@ const BoxDesignCompontent = baseProps => { // 3️⃣ 只负责 tableDataList 和 tableDataLists useEffect(() => { if (!tableData?.length) return; + const keywords = ["盒长", "盒高", "盒宽", "Box Length", "Box Width", "Box Height"]; + const keywordMap = { + '盒长': 'L', + '盒宽': 'W', + '盒高': 'D', + 'Box Length': 'L', + 'Box Width': 'W', + 'Box Height': 'D', + }; const newList = tableData .filter(item => item.bVisible) @@ -160,15 +187,17 @@ const BoxDesignCompontent = baseProps => { selectImage: null, value: "", })) - .filter(item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽")) + .filter(item => + keywords.some(keyword => item.showName.includes(keyword)) + ) .map(item => { - let name = ""; - if (item.showName === "盒长") name = "盒长(L)"; - if (item.showName === "盒宽") name = "盒宽(W)"; - if (item.showName === "盒高") name = "盒高(D)"; - return { ...item, sName: name }; + const hitKey = keywords.find(k => item.showName.includes(k)); + // 拼出新名字：原始关键字 + (后缀) + const sName = hitKey + ? `${hitKey} (${keywordMap[hitKey]})` + : item.showName; // 兜底，理论上不会发生 + return { ...item, sName }; }); - setTableDataList(newList); setTableDataLists(newList); }, [tableData]); @@ -322,17 +351,17 @@ const BoxDesignCompontent = baseProps => { const orderLength = slaveData.find(item => item.sCode === "dCHC")?.iValue; const orderWidth = slaveData.find(item => item.sCode === "dCHK")?.iValue; newBoxList.forEach((item, index) => { - if (item.sName === "盒身") { + if (item.sName.trim() === "盒身" || item.sName.trim() === "Box Body") { newBoxList[index].value = masterData.sBoxBody; newBoxList[index].selectImage = masterData.sMakeUpPath; newBoxList[index].type = masterData.sTypes; - } else if (item.sName === "盒长") { + } else if (item.sName.trim() === "盒长" || item.sName.trim() === "Box Length") { newBoxList[index].value = masterData.dBoxLength; - } else if (item.sName === "盒宽") { + } else if (item.sName.trim() === "盒宽" || item.sName.trim() === "Box Width") { newBoxList[index].value = masterData.dBoxWidth; - } else if (item.sName === "盒高") { + } else if (item.sName.trim() === "盒高" || item.sName.trim() === "Box Height") { newBoxList[index].value = masterData.dBoxHeight; - } else if (item.sName === "盒型名称") { + } else if (item.sName === "盒型名称" || item.sName.trim() === "Box Name") { newBoxList[index].value = masterData.sName; } else if (item.sName === "首盒长") { newBoxList[index].value = headLength; @@ -524,10 +553,10 @@ const BoxDesignCompontent = baseProps => { let updatedBoxList = [...boxList]; if (doubleType === 0) { updatedBoxList[index].sTypeName = Number(name) === 0 ? "矩形" : "梯形"; - updatedBoxList[index].sType = Number(name); + updatedBoxList[index].sType = Number(name) } else { updatedBoxList[index].cTypeName = Number(name) === 0 ? "矩形" : "梯形"; - updatedBoxList[index].cType = Number(name); + updatedBoxList[index].cType = Number(name) } setBoxList(updatedBoxList); }; @@ -536,23 +565,23 @@ const BoxDesignCompontent = baseProps => { // const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}`; // return imageUrl; // }; - const removeExtension = filename => { - const lastDotIndex = filename.lastIndexOf("."); + const removeExtension = (filename) => { + const lastDotIndex = filename.lastIndexOf('.'); if (lastDotIndex === -1) { // 如果字符串中没有点，则返回原字符串 return filename; } return filename.substring(0, lastDotIndex); - }; - const getImage = sName => { + } + const getImage = (sName) => { const fileName = removeExtension(sName); const imageUrlNew = `${commonConfig.server_host}file/downloadPrice?sLogoName=${fileName}&date=${new Date().getTime()}`; - return imageUrlNew; - }; + return imageUrlNew + } // 下来框 const renderOptionWithImage = option => { return ( - +
{option.sMakeUpPath ? : ""} {option.sName} @@ -588,18 +617,8 @@ const BoxDesignCompontent = baseProps => { // 判断是新增还是修改 // 存储子表数据 - const boxTypes = boxList.find(item => item.sName === "盒身")?.type; + const boxTypes = boxList.find(item => item.sName === "盒身" || item.sName.trim() === 'Box Body')?.type; const findList = boxTypes === "8" ? doubleTitlieList1 : titleList1; - // boxList.forEach(item=>{ - // if (item.type && item.type.includes('09')) { - // if (item.sName === "左贴边位" || item.sName === "右贴边位" ) { - // item.value = (item.sLength ? Number(item.sLength) : 0) + (item.cLength ? Number(item.cLength) : 0) - // } else { - // item.value = (item.sLength ? Number(item.sWidth) : 0 )+ (item.cLength ? Number(item.cWidth) : 0) - // } - - // } - // }) boxList.forEach((item, index) => { const i = findList.findIndex(i => i.name === item.sName); const slave = slaveData.find(z => z.sCode === findList[i]?.value); @@ -618,18 +637,18 @@ const BoxDesignCompontent = baseProps => { bVisible: item.value ? true : false, sParentId: masterData.sId, sAssignFormula: item.sAssignFormula, - iSLength: item.sLength === undefined ? 0 : item.sLength, - iSWidth: item.sWidth === undefined ? 0 : item.sWidth, - iSType: item.sType === undefined ? 0 : item.sType, + iSLength: !item.sLength ? 0 : item.sLength, + iSWidth: !item.sWidth ? 0 : item.sWidth, + iSType: !item.sType ? 0 : item.sType, iSTypeName: item.sType !== null ? (Number(item.sType) === 0 ? "矩形" : Number(item.sType) === 1 ? "梯形" : null) : null, - sSOffset: item.sOffset === undefined ? 0 : item.sOffset, - iSQuantity: item.sQuantity === undefined ? 0 : item.sQuantity, - iCLength: item.cLength === undefined ? 0 : item.cLength, - iCWidth: item.cWidth === undefined ? 0 : item.cWidth, - iCType: item.cType === undefined ? 0 : item.cType, + sSOffset: !item.sOffset ? 0 : item.sOffset, + iSQuantity: !item.sQuantity ? 0 : item.sQuantity, + iCLength: !item.cLength ? 0 : item.cLength, + iCWidth: !item.cWidth ? 0 : item.cWidth, + iCType: !item.cType ? 0 : item.cType, iCTypeName: item.cType !== null ? (Number(item.cType) === 0 ? "矩形" : Number(item.cType) === 1 ? "梯形" : null) : null, - sCOffset: item.cOffset === undefined ? 0 : item.cOffset, - iCQuantity: item.cQuantity === undefined ? 0 : item.cQuantity, + sCOffset: !item.cOffset ? 0 : item.cOffset, + iCQuantity: !item.cQuantity ? 0 : item.cQuantity, }; // if (item.value !== "") { newSlaveData.push(data); @@ -649,12 +668,12 @@ const BoxDesignCompontent = baseProps => { // 计算展长公式 sLengthFormula let sLengthFormula = ""; let sWidthFormula = ""; - const boxType = boxList.find(item => item.sName === "盒身")?.type; + const boxType = boxList.find(item => item.sName === "盒身"|| item.sName.trim() === "Box Body")?.type; if (boxType === "8") { } else { - const boxLength = Number(boxList.find(item => item.sName === "盒长")?.value); - const boxWidth = Number(boxList.find(item => item.sName === "盒宽")?.value); - const boxHeight = Number(boxList.find(item => item.sName === "盒高")?.value); + const boxLength = Number(boxList.find(item => item.sName === "盒长"|| item.sName.trim() === "Box Length")?.value); + const boxWidth = Number(boxList.find(item => item.sName === "盒宽"|| item.sName.trim() === "Box Width")?.value); + const boxHeight = Number(boxList.find(item => item.sName === "盒高"|| item.sName.trim() === "Box Height")?.value); const zxcw = boxList.find(x => x.sName === "左(下)插位组件"); const zscw = boxList.find(x => x.sName === "左(上)插位组件"); const yscw = boxList.find(x => x.sName === "右(上)插位组件"); @@ -977,13 +996,13 @@ const BoxDesignCompontent = baseProps => { // 存储盒身数据 主表 const newMasterData = { ...masterData, - sBoxBody: boxList.find(item => item.sName === "盒身")?.value || "", - dBoxLength: boxList.find(item => item.sName === "盒长")?.value || "", - dBoxWidth: boxList.find(item => item.sName === "盒宽")?.value || "", - dBoxHeight: boxList.find(item => item.sName === "盒高")?.value || "", - sName: boxList.find(item => item.sName === "盒型名称")?.value || "", - sMakeUpPath: boxList.find(item => item.sName === "盒身")?.selectImage || "", - sTypes: boxList.find(item => item.sName === "盒身")?.type || "", + sBoxBody: boxList.find(item => item.sName === "盒身" || item.sName.trim() === "Box Body")?.value || "", + dBoxLength: boxList.find(item => item.sName === "盒长" || item.sName.trim() === "Box Length")?.value || "", + dBoxWidth: boxList.find(item => item.sName === "盒宽" || item.sName.trim() === "Box Width")?.value || "", + dBoxHeight: boxList.find(item => item.sName === "盒高" || item.sName.trim() === "Box Height")?.value || "", + sName: boxList.find(item => item.sName === "盒型名称" || item.sName.trim() === "Box Name")?.value || "", + sMakeUpPath: boxList.find(item => item.sName === "盒身" || item.sName.trim() === "Box Body") ?.selectImage || "", + sTypes: boxList.find(item => item.sName === "盒身" || item.sName.trim() === "Box Body")?.type || "", sLengthFormula: masterData.sLengthFormula || sLengthFormula, sWidthFormula: masterData.sWidthFormula || sWidthFormula, }; @@ -1044,7 +1063,8 @@ const BoxDesignCompontent = baseProps => {
{topItem.sName}
{topItem?.selectImage ? ( {topItem.value} @@ -1055,7 +1075,7 @@ const BoxDesignCompontent = baseProps => { handleSelects(value, option, findIndexBySname(topItem.sName), 0, 0)} @@ -1153,7 +1173,7 @@ const BoxDesignCompontent = baseProps => { handleSelect(value, option, findIndexBySname(item.sName), 0)} onDropdownVisibleChange={async open => { @@ -1266,7 +1287,7 @@ const BoxDesignCompontent = baseProps => { handleSelects(value, option, findIndexBySname(item.sName), 0, 0)} @@ -1382,7 +1404,7 @@ const BoxDesignCompontent = baseProps => { handleSelect(value, option, findIndexBySname(item.sName), 0)} onDropdownVisibleChange={async open => { @@ -1463,7 +1485,8 @@ const BoxDesignCompontent = baseProps => {
{item?.selectImage ? ( {item.value} { handleSelects(value, option, findIndexBySname(item.sName), 0, 0)} @@ -1623,7 +1647,7 @@ const BoxDesignCompontent = baseProps => { handleSelect(value, option, findIndexBySname(item.sName), 0)} onDropdownVisibleChange={async open => { @@ -1704,7 +1728,8 @@ const BoxDesignCompontent = baseProps => {
{item?.selectImage ? ( {item.value} {
{tableColum && tableColum.length ? tableColum.map((item, index) => { - const uniqueIndex = index + 9; - return ( -
-
-
- {item.showName} -
- handleChange(e, uniqueIndex)} - onFocus={e => handleFocus(e, uniqueIndex)} - onBlur={e => handleBlur(e, uniqueIndex)} - readOnly={!boxList[uniqueIndex]?.isEditable} - style={{ width: " 80%" }} - /> + const uniqueIndex = index + 9; + return ( +
+
+
+ {item.showName}
+ handleChange(e, uniqueIndex)} + onFocus={e => handleFocus(e, uniqueIndex)} + onBlur={e => handleBlur(e, uniqueIndex)} + readOnly={!boxList[uniqueIndex]?.isEditable} + style={{ width: " 80%" }} + />
- ); - }) +
+ ); + }) : ""} {boxBodyList && boxBodyList.length ? boxBodyList.map((item, index) => { - const uniqueIndex = index + 9 + tableColum.length; + const uniqueIndex = index + 9 + tableColum.length; - return ( -
-
-
- {item.showName} -
- {boxList[uniqueIndex]?.selectImage ? ( - {boxList[uniqueIndex].value} - ) : ( - "" - )} - {isDefaultValue ?
{boxList[uniqueIndex]?.value}
: ""} - + return ( +
+
+
+ {item.showName}
+ {boxList[uniqueIndex]?.selectImage ? ( + {boxList[uniqueIndex].value} + ) : ( + "" + )} + {isDefaultValue ?
{boxList[uniqueIndex]?.value}
: ""} +
- ); - }) +
+ ); + }) : ""}
{tableDataList && tableDataList.length && boxType !== "8" ? tableDataList.map((item, index) => { - const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length; + const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length; - return ( -
-
{item.sName}
- handleChange(e, uniqueIndex)} - onFocus={e => handleFocus(e, uniqueIndex)} - onBlur={e => handleBlur(e, uniqueIndex)} - readOnly={!boxList[uniqueIndex]?.isEditable} - style={{ width: " 60%" }} - /> -
- ); - }) + return ( +
+
{item.sName}
+ handleChange(e, uniqueIndex)} + onFocus={e => handleFocus(e, uniqueIndex)} + onBlur={e => handleBlur(e, uniqueIndex)} + readOnly={!boxList[uniqueIndex]?.isEditable} + style={{ width: " 60%" }} + /> +
+ ); + }) : ""}
{doubleLayerList && doubleLayerList.length && boxType === "8" ? doubleLayerList.map((item, index) => { - const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length + tableDataList.length; + const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length + tableDataList.length; - return ( -
-
{item.sName}
- handleChange(e, uniqueIndex)} - onFocus={e => handleFocus(e, uniqueIndex)} - onBlur={e => handleBlur(e, uniqueIndex)} - readOnly={!boxList[uniqueIndex]?.isEditable} - style={{ width: " 60%" }} - /> -
- ); - }) + return ( +
+
{item.sName}
+ handleChange(e, uniqueIndex)} + onFocus={e => handleFocus(e, uniqueIndex)} + onBlur={e => handleBlur(e, uniqueIndex)} + readOnly={!boxList[uniqueIndex]?.isEditable} + style={{ width: " 60%" }} + /> +
+ ); + }) : ""}
diff --git a/src/components/Common/BoxDesignCompontent/svg.js b/src/components/Common/BoxDesignCompontent/svg.js index b906e8f..49dd13f 100644 --- a/src/components/Common/BoxDesignCompontent/svg.js +++ b/src/components/Common/BoxDesignCompontent/svg.js @@ -392,7 +392,7 @@ const SvgBox = props => { const bottomLength = headLength / 2 - orderLength + -bottomLeft - Number(leftOffect); xSvg = Math.max(Math.abs(bottomLength), Math.abs(topLength)); } else if (Number(svgType) === 4) { - xSvg = (scaledDeep * 2 + scaledWidth) / 2; + xSvg = ((boxHeight * 2 + boxLength) / 2) * scale; } else { xSvg = zbtb?.value; } @@ -4945,7 +4945,7 @@ const SvgBox = props => { // 将分组添加到 SVG svg.appendChild(g); } else { - pathList.push(createFull(ysbj?.type, scaledWidth, scaledHeight, dYSCW * scale, scaledWidth, 0)); + pathList.push(createFull(ysbj?.type, scaledHeight, scaledHeight, dYSCW * scale, scaledWidth, 0)); } // 左边 if (zxbj?.type && zxbj?.type === "4009") { @@ -5023,7 +5023,7 @@ const SvgBox = props => { // 将分组添加到 SVG svg.appendChild(g); } else { - pathList.push(createFull(zxbj?.type, scaledWidth, -scaledHeight, -dZXCW * scale, 0, 0)); + pathList.push(createFull(zxbj?.type, scaledHeight, -scaledHeight, -dZXCW * scale, 0, 0)); } pathList.forEach(x => { -- libgit2 0.22.2