From 91ec52e25138454ffc776eac2a6ae21495642fc5 Mon Sep 17 00:00:00 2001 From: 陈鑫涛 <10125295+chen-xintao97@user.noreply.gitee.com> Date: Wed, 13 Aug 2025 15:34:34 +0800 Subject: [PATCH] 功能页面拖拽排序 --- src/components/Common/BoxDesignCompontent/index.js | 351 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- src/components/Common/BoxDesignCompontent/svg.js | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------- src/components/Common/CommonTable/index.js | 2 +- src/components/QuickQuote/index.css | 40 ++++++++++++++++++++++++++++++---------- src/components/QuickQuote/index.less | 6 +++--- 5 files changed, 291 insertions(+), 221 deletions(-) diff --git a/src/components/Common/BoxDesignCompontent/index.js b/src/components/Common/BoxDesignCompontent/index.js index 150c9a0..e9ea7c6 100644 --- a/src/components/Common/BoxDesignCompontent/index.js +++ b/src/components/Common/BoxDesignCompontent/index.js @@ -22,18 +22,22 @@ const BoxDesignEvent = props => { setLoading(true); if (!type) { setLoading(false); + if (!tableData?.length) return + const shape = tableData?.find(x => x.iTag === 70)?.showDropDown + const JsonShape = JSON.parse(shape) + const arr = Array.from(Object.values(JsonShape)); setOptions([ { sId: "0", sCode: "0", - sName: "矩形", + sName: arr[0], sMakeUpPath: "", sTypes: "0", }, { sId: "1", sCode: "1", - sName: "梯形", + sName: arr[1], sMakeUpPath: "", sTypes: "1", }, @@ -89,7 +93,7 @@ const BoxDesignEvent = props => { }; const BoxDesignCompontent = baseProps => { const props = BoxDesignEvent(baseProps); - const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData, options = [] } = props; + const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData = [], options = [] } = props; const { slaveData = {}, masterData = {} } = props.state; const { boxVisible } = baseProps; const [boxList, setBoxList] = useState([]); @@ -106,18 +110,15 @@ const BoxDesignCompontent = baseProps => { const [rightDoubleBoxList, setRightDoubleBoxList] = useState([]); 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 + const [shapeList, setShapeList] = useState([]) + const [doublePrompt, setDoublePrompt] = useState([]) + + // if (!boxVisible) return ""; + // 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) // 先过滤可见 + .filter(item => item.bVisible).filter(item => item.iTag === 10) // 先过滤可见 .map(item => ({ ...item, isEditable: true, @@ -125,32 +126,14 @@ const BoxDesignCompontent = baseProps => { selectImage: null, value: "", })) - .filter( - item => - !keywords.some(keyword => item.showName.includes(keyword)) - ) - .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]); + }, [tableData.length]); - // 2️⃣ 只负责 boxBodyList + // 2️⃣ 只负责 boxBodyList 盒身 useEffect(() => { if (!tableData?.length) return; - - const keywords = ['盒身', 'Box Body']; - const bodyList = tableData - .filter(item => item.bVisible) + .filter(item => item.bVisible).filter(item => item.iTag === 20) .map(item => ({ ...item, isEditable: true, @@ -158,17 +141,14 @@ const BoxDesignCompontent = baseProps => { selectImage: null, value: '', })) - .filter(item => - keywords.some(k => item.showName.trim().includes(k)) - ); - setBoxBodyList(bodyList); - }, [tableData]); + }, [tableData.length]); // 3️⃣ 只负责 tableDataList 和 tableDataLists + useEffect(() => { if (!tableData?.length) return; - const keywords = ["盒长", "盒高", "盒宽", "Box Length", "Box Width", "Box Height"]; + // const keywords = ["盒长", "盒高", "盒宽", "Box Length", "Box Width", "Box Height"]; const keywordMap = { '盒长': 'L', '盒宽': 'W', @@ -179,28 +159,44 @@ const BoxDesignCompontent = baseProps => { }; const newList = tableData - .filter(item => item.bVisible) + .filter(item => item.bVisible).filter(item => item.iTag === 30) .map(item => ({ ...item, isEditable: true, isSelect: false, selectImage: null, value: "", - })) - .filter(item => - keywords.some(keyword => item.showName.includes(keyword)) - ) - .map(item => { - const hitKey = keywords.find(k => item.showName.includes(k)); + })).map(item => { // 拼出新名字：原始关键字 + (后缀) - const sName = hitKey - ? `${hitKey} (${keywordMap[hitKey]})` - : item.showName; // 兜底，理论上不会发生 + const sName = `${item.showName} (${keywordMap[item.showName?.trim()]})` return { ...item, sName }; }); setTableDataList(newList); setTableDataLists(newList); - }, [tableData]); + const shape = tableData.find(x => x.iTag === 70)?.showDropDown + if (!shape) return + const JsonShape = JSON.parse(shape) + const shapeLists = Array.from(Object.values(JsonShape)) + setShapeList(shapeLists) + const prompt = tableData.filter(x => x.iTag === 80) + setDoublePrompt(prompt) + }, [tableData.length]); + + // 获取itag为40的数据 + const upViewPropsAll = Array.isArray(tableData) + ? tableData + .filter(item => item.bVisible) + .filter(item => [40, 50, 60].includes(item.iTag)) + : []; + let titleListConfiguration = upViewPropsAll?.map(item => { + return item.showName + }) + const btnName = Array.isArray(tableData) + ? tableData + .filter(item => item.bVisible) // 过滤出可见的项目 + .find(item => [11].includes(item.iTag))?.showName || '' + : ''; + const titleList = [ "上方盒舌", "盒底组件", @@ -211,7 +207,7 @@ const BoxDesignCompontent = baseProps => { "右(上)插位组件", "右贴边位", "右(下)插位组件", - ]; + ] const titleList1 = [ { name: "上方盒舌", value: "dSFHS" }, { name: "盒底组件", value: "dHDC" }, @@ -223,6 +219,12 @@ const BoxDesignCompontent = baseProps => { { name: "右贴边位", value: "dYTBW" }, { name: "右(下)插位组件", value: "dYXCW" }, ]; + // const titleList1 = upViewPropsAll?.map(item=>{ + // return { + // name:item.showName, + // value:item.sName + // } + // }) const doubleTitlieList = [ "左上插位组件", "上插位组件", @@ -275,7 +277,7 @@ const BoxDesignCompontent = baseProps => { selectImage: null, type: null, show: true, - showName: item, // 参数名称 + showName: upViewPropsAll?.find(x => x.sName === titleList1.find(x => x.name === item)?.value)?.showName, // 参数名称 sAssignFormula: null, sLength: null, sWidth: null, @@ -289,10 +291,11 @@ const BoxDesignCompontent = baseProps => { cTypeName: null, // 盒型名称 cOffset: null, // 偏移 cQuantity: null, // 数量 + sCode: titleList1.find(x => x.name === item)?.value, + showNames: upViewPropsAll?.find(x => x.sName === titleList1.find(x => x.name === item)?.value)?.showName }); }); // 部件信息 - const boxTypes = masterData.sTypes; if (slaveData && slaveData.length) { if (boxTypes !== "8") { @@ -302,27 +305,31 @@ const BoxDesignCompontent = baseProps => { }); if (i !== -1) { const x = newBoxList.findIndex(z => z.sName === titleList1[i].name); - Object.assign(newBoxList[x], { - value: item.iValue, - type: item.sTypes, - showName: item.sName, - selectImage: item.sMakeUpPath, - sName: titleList1[i].name, - sAssignFormula: item.sAssignFormula, - bVisible: item.bVisible, - sLength: item.iSLength, - sWidth: item.iSWidth, - sType: item.iSType, - sTypeName: item.iSType !== null ? (Number(item.iSType) === 0 ? "矩形" : Number(item.iSType) === 1 ? "梯形" : null) : null, - sOffset: item.sSOffset, - sQuantity: item.iSQuantity, - cLength: item.iCLength, - cWidth: item.iCWidth, - cType: item.iCType, - cTypeName: item.iCType !== null ? (Number(item.iCType) === 0 ? "矩形" : Number(item.iCType) === 1 ? "梯形" : null) : null, - cOffset: item.sCOffset, - cQuantity: item.iCQuantity, - }); + if (x !== -1) { + Object.assign(newBoxList[x], { + value: item.iValue, + type: item.sTypes, + showName: item.sName, + selectImage: item.sMakeUpPath, + sName: titleList1[i].name, + sAssignFormula: item.sAssignFormula, + bVisible: item.bVisible, + sLength: item.iSLength, + sWidth: item.iSWidth, + sType: item.iSType, + sTypeName: item.iSType !== null ? shapeList[item.iSType] : null, + sOffset: item.sSOffset, + sQuantity: item.iSQuantity, + cLength: item.iCLength, + cWidth: item.iCWidth, + cType: item.iCType, + cTypeName: item.iCType !== null ? shapeList[item.iCType] : null, + cOffset: item.sCOffset, + cQuantity: item.iCQuantity, + showNames: upViewPropsAll?.find(x => x.sName === item.sCode)?.showName + }); + } + } }); } else { @@ -351,17 +358,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.trim() === "盒身" || item.sName.trim() === "Box Body") { + 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.trim() === "盒长" || item.sName.trim() === "Box Length") { + } else if (item.sName?.trim() === "盒长" || item.sName?.trim() === "Box Length") { newBoxList[index].value = masterData.dBoxLength; - } else if (item.sName.trim() === "盒宽" || item.sName.trim() === "Box Width") { + } else if (item.sName?.trim() === "盒宽" || item.sName?.trim() === "Box Width") { newBoxList[index].value = masterData.dBoxWidth; - } else if (item.sName.trim() === "盒高" || item.sName.trim() === "Box Height") { + } else if (item.sName?.trim() === "盒高" || item.sName?.trim() === "Box Height") { newBoxList[index].value = masterData.dBoxHeight; - } else if (item.sName === "盒型名称" || item.sName.trim() === "Box Name") { + } else if (item.sName === "盒型名称" || item.sName?.trim() === "Box Name") { newBoxList[index].value = masterData.sName; } else if (item.sName === "首盒长") { newBoxList[index].value = headLength; @@ -386,7 +393,7 @@ const BoxDesignCompontent = baseProps => { return arr1.every((item, index) => item.sName === arr2[index].sName); }; useEffect(() => { - const type = boxList.find(item => item.sName === "盒身")?.type; + const type = boxList.find(item => item.sName === boxBodyList[0]?.showName)?.type; const updateLists = () => { const topBoxFilter = item => item.sName === "上方盒舌" || item.sName === "盒底组件" || item.sName === "下方盒舌"; @@ -452,7 +459,7 @@ const BoxDesignCompontent = baseProps => { updateLists(); }, [boxList]); - const boxType = boxList.find(item => item.sName === "盒身")?.type; + const boxType = boxList.find(item => item.sName === boxBodyList[0]?.showName)?.type; // 监听盒身类型 useEffect(() => { if (!boxType) return; @@ -552,10 +559,10 @@ const BoxDesignCompontent = baseProps => { const handleSelects = (name, selectConfig, index, type, doubleType) => { let updatedBoxList = [...boxList]; if (doubleType === 0) { - updatedBoxList[index].sTypeName = Number(name) === 0 ? "矩形" : "梯形"; + updatedBoxList[index].sTypeName = shapeList[Number(name)]; updatedBoxList[index].sType = Number(name) } else { - updatedBoxList[index].cTypeName = Number(name) === 0 ? "矩形" : "梯形"; + updatedBoxList[index].cTypeName = shapeList[Number(name)]; updatedBoxList[index].cType = Number(name) } setBoxList(updatedBoxList); @@ -603,6 +610,9 @@ const BoxDesignCompontent = baseProps => { ...props, boxList, showNew: 0, + tableColum, + boxBodyList, + tableDataList // dSvgBoxWidth: 500, // dSvgBoxHeight: 250, }; @@ -617,7 +627,7 @@ const BoxDesignCompontent = baseProps => { // 判断是新增还是修改 // 存储子表数据 - const boxTypes = boxList.find(item => item.sName === "盒身" || item.sName.trim() === 'Box Body')?.type; + const boxTypes = boxList.find(item => item.sName === boxBodyList[0]?.showName)?.type; const findList = boxTypes === "8" ? doubleTitlieList1 : titleList1; boxList.forEach((item, index) => { const i = findList.findIndex(i => i.name === item.sName); @@ -640,13 +650,13 @@ const BoxDesignCompontent = baseProps => { 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, + iSTypeName: item.sType !== null ? shapeList[item.iSType] : null, 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, + iCTypeName: item.cType !== null ? shapeList[item.iCType] : null, sCOffset: !item.cOffset ? 0 : item.cOffset, iCQuantity: !item.cQuantity ? 0 : item.cQuantity, }; @@ -668,12 +678,12 @@ const BoxDesignCompontent = baseProps => { // 计算展长公式 sLengthFormula let sLengthFormula = ""; let sWidthFormula = ""; - const boxType = boxList.find(item => item.sName === "盒身"|| item.sName.trim() === "Box Body")?.type; + const boxType = boxList.find(item => item.sName === boxBodyList[0]?.showName)?.type; if (boxType === "8") { } else { - 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 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 === "右(上)插位组件"); @@ -994,15 +1004,16 @@ const BoxDesignCompontent = baseProps => { // const sDoubleSize = JSON.stringify([headLength,headWidth,orderLength,orderWidth]) // 存储盒身数据 主表 + // boxList.find(item => item.sName === boxBodyList[0]?.showName)?.type; const newMasterData = { ...masterData, - 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 || "", + sBoxBody: boxList.find(item => item.sName.trim() === boxBodyList[0]?.showName)?.value || "", + dBoxLength: boxList.find(item => item.sName?.trim() === tableDataList[0].showName)?.value || "", + dBoxWidth: boxList.find(item => item.sName?.trim() === tableDataList[1].showName)?.value || "", + dBoxHeight: boxList.find(item => item.sName?.trim() === tableDataList[2].showName)?.value || "", + sName: boxList.find(item => item.sName?.trim() === tableColum[0].showName)?.value || "", + sMakeUpPath: boxList.find(item => item.sName === boxBodyList[0]?.showName)?.selectImage || "", + sTypes: boxList.find(item => item.sName.trim() === boxBodyList[0]?.showName)?.type || "", sLengthFormula: masterData.sLengthFormula || sLengthFormula, sWidthFormula: masterData.sWidthFormula || sWidthFormula, }; @@ -1041,7 +1052,7 @@ const BoxDesignCompontent = baseProps => { title={title} visible={boxVisible} onCancel={onCancel} - okText="创建" + okText={btnName} onOk={submit} bodyStyle={{ height: "calc(95vh - 105px)", @@ -1060,7 +1071,7 @@ const BoxDesignCompontent = baseProps => { {boxType !== "8" && topBoxList.map((topItem, index) => (
-
{topItem.sName}
+
{topItem.showNames}
{topItem?.selectImage ? ( { { onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))} onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))} readOnly={!topItem?.isEditable} - style={{ width: " 80%" }} - placeholder="长" + style={{ width: 60 }} + placeholder={doublePrompt[2].showName} /> { onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))} onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))} readOnly={!topItem?.isEditable} - style={{ width: " 80%" }} - placeholder="宽" + style={{ width: 60 }} + placeholder={doublePrompt[3].showName} />
{ onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))} onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))} readOnly={!topItem?.isEditable} - style={{ width: " 80%" }} - placeholder="偏移" + style={{ width: 60 }} + placeholder={doublePrompt[5].showName} />
-
- 层2{" "} +
+ {doublePrompt[1].showName}
{ onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))} onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))} readOnly={!topItem?.isEditable} - style={{ width: " 80%" }} - placeholder="长" + style={{ width: 60 }} + placeholder={doublePrompt[2].showName} /> { onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))} onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))} readOnly={!topItem?.isEditable} - style={{ width: " 80%" }} - placeholder="宽" + style={{ width: 60 }} + placeholder={doublePrompt[3].showName} />
{ onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))} onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))} readOnly={!topItem?.isEditable} - style={{ width: " 80%" }} - placeholder="偏移" + style={{ width: 60 }} + placeholder={doublePrompt[5].showName} />
@@ -1246,7 +1257,7 @@ const BoxDesignCompontent = baseProps => { handleSelect(value, option, findIndexBySname(item.sName), 0)} onDropdownVisibleChange={async open => { @@ -1320,7 +1331,7 @@ const BoxDesignCompontent = baseProps => { {item.type && item.type.includes("09") ? (
-
+
层1{" "}
{ onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="长" + style={{ width: 60 }} + placeholder={doublePrompt[2].showName} /> { onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="宽" + style={{ width: 60 }} + placeholder={doublePrompt[3].showName} />
{ onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="偏移" + style={{ width: 60 }} + placeholder={doublePrompt[5].showName} />
-
+
层2{" "}
{ onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="长" + style={{ width: 60 }} + placeholder={doublePrompt[2].showName} /> { onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="宽" + style={{ width: 60 }} + placeholder={doublePrompt[3].showName} />
{ onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="偏移" + style={{ width: 60 }} + placeholder={doublePrompt[5].showName} />
@@ -1468,7 +1479,7 @@ const BoxDesignCompontent = baseProps => { handleSelect(value, option, findIndexBySname(item.sName), 0)} onDropdownVisibleChange={async open => { @@ -1563,7 +1574,7 @@ const BoxDesignCompontent = baseProps => { {item.type && item.type.includes("09") ? (
-
+
层1{" "}
{ onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="长" + style={{ width: 60 }} + placeholder={doublePrompt[2].showName} /> { onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="宽" + style={{ width: 60 }} + placeholder={doublePrompt[3].showName} />
{ onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="偏移" + style={{ width: 60 }} + placeholder={doublePrompt[5].showName} />
-
+
层2{" "}
{ onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="长" + style={{ width: 60 }} + placeholder={doublePrompt[2].showName} /> { onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="宽" + style={{ width: 60 }} + placeholder={doublePrompt[3].showName} />
{ onFocus={e => handleFocus(e, findIndexBySname(item.sName))} onBlur={e => handleBlur(e, findIndexBySname(item.sName))} readOnly={!item?.isEditable} - style={{ width: " 80%" }} - placeholder="偏移" + style={{ width: 60 }} + placeholder={doublePrompt[5].showName} />
@@ -1711,7 +1722,7 @@ const BoxDesignCompontent = baseProps => { handleSelect(value, option, uniqueIndex, 1)} onDropdownVisibleChange={async open => { diff --git a/src/components/Common/BoxDesignCompontent/svg.js b/src/components/Common/BoxDesignCompontent/svg.js index 49dd13f..6e40dc0 100644 --- a/src/components/Common/BoxDesignCompontent/svg.js +++ b/src/components/Common/BoxDesignCompontent/svg.js @@ -58,7 +58,9 @@ const SvgBox = props => { const svgContainerRef = useRef(null); const svgRef = useRef(null); const [boxKey, setBoxKey] = useState(new Date().getTime()); - const { boxList, dSvgBoxWidth, dSvgBoxHeight, iFAngle } = props; + const { boxList, dSvgBoxWidth, dSvgBoxHeight, iFAngle, tableColum, + boxBodyList, + tableDataList, showNew } = props; const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); const [deep, setDeep] = useState(0); @@ -82,13 +84,28 @@ const SvgBox = props => { svg.innerHTML = ""; if (!(boxList && boxList.length)) return; // 获取盒型类型 - const svgTypes = boxList.find(x => x.sName === "盒身")?.type || 1; - setSvgType(svgTypes); + let svgTypes; // 获取盒长、盒宽、盒高 - const boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) || 0; - const boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) || 0; - let boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0; + let boxLength + let boxWidth + let boxHeight + if (showNew === 0) { + if (!(boxBodyList && boxBodyList.length)) return + svgTypes = boxList.find(x => x.sName?.trim() === boxBodyList[0].showName)?.type || 1 + if (!(tableDataList && tableDataList.length)) return + boxLength = Number(boxList.find(x => x.sName?.trim() === tableDataList[0].showName)?.value) || 0; + boxWidth = Number(boxList.find(x => x.sName?.trim() === tableDataList[1].showName)?.value) || 0; + boxHeight = Number(boxList.find(x => x.sName?.trim() === tableDataList[2].showName)?.value) || 0; + } else { + svgTypes = boxList.find(x => x.sName === "盒身")?.type || 1 + boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) || 0; + boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) || 0; + boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0; + } + + + setSvgType(svgTypes); setWidth(boxLength); setHeight(boxWidth); @@ -130,12 +147,13 @@ const SvgBox = props => { // 展宽 if (boxList && boxList.length) { // 如果存在部件和盒舌 取最大的 - const top = topOffect(boxList, boxLength, boxWidth, boxHeight); - const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight); + const top = topOffect(boxList, boxLength, boxWidth, boxHeight, props); + const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight, props); + console.log("🚀 ~ initSVG ~ bottom:", top, bottom) max = Number(top) + Number(bottom); if (Number(svgType) === 8) { - const top = topOffect(boxList, headLength, headWidth); - const bottom = bottomOffect(boxList, orderLength, orderWidth); + const top = topOffect(boxList, headLength, headWidth, props); + const bottom = bottomOffect(boxList, orderLength, orderWidth, props); max = Number(top) + Number(bottom); } } @@ -217,9 +235,12 @@ const SvgBox = props => { } viewBoxWidth = Number(boxLength) + leftValue + rightValue; viewBoxHeight = Number(boxWidth) + topValue + bottomValue; + } else if (Number(svgType) === 5) { - viewBoxWidth = (boxHeight + boxWidth) * 2 + dYTBW + dZTBW +doubleTotal + viewBoxWidth = (boxHeight + boxWidth) * 2 + dYTBW + dZTBW + doubleTotal viewBoxHeight = boxLength + max; + console.log("🚀 ~ initSVG ~ viewBoxHeight:", viewBoxHeight, boxLength, max) + } else if (Number(svgType) === 6) { viewBoxWidth = boxWidth + 2; viewBoxHeight = boxLength + 2; @@ -333,19 +354,19 @@ const SvgBox = props => { const heightScale = (dSvgBoxHeight ? dSvgBoxHeight : 250) / viewBoxHeight; scale = Math.min(widthScale, heightScale); let ySvg = dSvgBoxHeight - ? topOffect(boxList, boxLength, boxWidth, boxHeight) * scale - : topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; + ? topOffect(boxList, boxLength, boxWidth, boxHeight, props) * scale + : topOffect(boxList, boxLength, boxWidth, boxHeight, props) * scale; let bottom = 0; let xSvg = 0; if (Number(svgType) !== 8) { - bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight); + bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight, props); } else { - bottom = bottomOffect(boxList, orderLength, orderWidth); + bottom = bottomOffect(boxList, orderLength, orderWidth, props); } if (Number(svgType) === 4) { - // ySvg = ySvg + boxHeight * scale; + } else if (Number(svgType) === 8) { - ySvg = topOffect(boxList, headLength, headWidth) * scale; + ySvg = topOffect(boxList, headLength, headWidth, props) * scale; } ySvg = ySvg + 50 * scale; @@ -392,7 +413,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 = ((boxHeight * 2 + boxLength) / 2) * scale; + xSvg = (boxHeight * 2 + boxLength) / 2; } else { xSvg = zbtb?.value; } @@ -410,13 +431,13 @@ const SvgBox = props => { svgContainerRef.current.style.height = `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`; } else { scale = 0.5; - let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; + let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight, props) * scale; if (Number(svgType) === 4) { - // ySvg = ySvg + boxHeight; + } else if (Number(svgType) === 8) { - ySvg = topOffect(boxList, headLength, headWidth) * scale; + ySvg = topOffect(boxList, headLength, headWidth, props) * scale; } - ySvg = ySvg + 50 * scale; + ySvg = Number(ySvg) + 50 * scale; let xSvg = 0; if (Number(svgType) === 7) { xSvg = scaledWidth + dZXCW * scale; @@ -461,7 +482,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; } else { xSvg = zbtb?.value; } @@ -479,7 +500,7 @@ const SvgBox = props => { svgContainerRef.current.style.height = `${dSvgBoxHeight ? dSvgBoxHeight : 250}px`; } } else if (props.showNew === 1) { - let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; + let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight, props) * scale; let leftSize = 0; let topSize = 0; if (Number(svgType) === 4) { @@ -547,7 +568,7 @@ const SvgBox = props => { ); const bottomLength = headLength / 2 - orderLength + -bottomLeft - Number(leftOffect); leftSize = Math.max(Math.abs(bottomLength), Math.abs(topLength)); - ySvg = topOffect(boxList, headLength, headWidth); + ySvg = topOffect(boxList, headLength, headWidth, props); } else { leftSize = zbtb?.value; if (zbtb?.type === "8009") { @@ -573,7 +594,7 @@ const SvgBox = props => { // svgContainerRef.current.style.transform = 'translate(-50%, -50%)'; } else if (props.showNew === 2) { // g.setAttribute("transform", `rotate(${iFAngle, dSvgBoxWidth/2,dSvgBoxHeight*2})`); - let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale; + let ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight, props) * scale; let leftSize = 0; let topSize = 0; if (Number(svgType) === 4) { @@ -638,7 +659,7 @@ const SvgBox = props => { ); const bottomLength = headLength / 2 - orderLength + -bottomLeft - Number(leftOffect); leftSize = Math.max(Math.abs(bottomLength), Math.abs(topLength)); - ySvg = topOffect(boxList, headLength, headWidth); + ySvg = topOffect(boxList, headLength, headWidth, props); } else { leftSize = zbtb?.value; } @@ -4945,7 +4966,7 @@ const SvgBox = props => { // 将分组添加到 SVG svg.appendChild(g); } else { - pathList.push(createFull(ysbj?.type, scaledHeight, scaledHeight, dYSCW * scale, scaledWidth, 0)); + pathList.push(createFull(ysbj?.type, scaledWidth, scaledHeight, dYSCW * scale, scaledWidth, 0)); } // 左边 if (zxbj?.type && zxbj?.type === "4009") { @@ -5023,7 +5044,7 @@ const SvgBox = props => { // 将分组添加到 SVG svg.appendChild(g); } else { - pathList.push(createFull(zxbj?.type, scaledHeight, -scaledHeight, -dZXCW * scale, 0, 0)); + pathList.push(createFull(zxbj?.type, scaledWidth, -scaledHeight, -dZXCW * scale, 0, 0)); } pathList.forEach(x => { @@ -5162,13 +5183,23 @@ const SvgBox = props => { } }; // 计算头部偏移 - const topOffect = (list, length, width, height) => { + const topOffect = (list, length, width, height, props) => { const val = list.filter(x => x.type); const sfhs = val.find(x => x.sName === "上方盒舌"); const zscw = val.find(x => x.sName === "左(上)插位组件"); const yscw = val.find(x => x.sName === "右(上)插位组件"); - const box = val.find(x => x.sName === "盒身"); + const { boxBodyList, showNew } = props + let box + if (showNew === 0) { + if (!(boxBodyList && boxBodyList.length)) return + box = list.find(x => x.sName?.trim() === boxBodyList[0].showName) || null + + } else { + box = list.find(x => x.sName === "盒身") || null + + } const svg = Number(box?.type); + console.log("🚀 ~ topOffect ~ svg:", svg, showNew) if (svg === 6) return 0; const dZ = Number(zscw?.value) || 0; @@ -5236,17 +5267,25 @@ const SvgBox = props => { } top = sfhs?.value || 0; } - - if (svg === 4) top += height; - return isNaN(top) ? 0 : top; + // if (svg === 4) top = Number(top) + Number(height); + return isNaN(top) ? 0 : Number(top); }; - const bottomOffect = (list, length, width, height) => { + const bottomOffect = (list, length, width, height, props) => { const val = list.filter(x => x.type); const sfhs = val.find(x => x.sName === "下方盒舌"); const zscw = val.find(x => x.sName === "左(下)插位组件"); const yscw = val.find(x => x.sName === "右(下)插位组件"); const hdzj = val.find(x => x.sName === "盒底组件"); - const box = val.find(x => x.sName === "盒身"); + const { boxBodyList, showNew } = props + let box + if (showNew === 0) { + if (!(boxBodyList && boxBodyList.length)) return + box = list.find(x => x.sName?.trim() === boxBodyList[0].showName) || null + + } else { + box = list.find(x => x.sName === "盒身") || null + + } const svg = Number(box?.type); if (svg === 6) return 0; @@ -5327,7 +5366,7 @@ const SvgBox = props => { top = sfhs?.value || 0; } - if (svg === 4) top += height; + // if (svg === 4) top = Number(top) + Number(height); return isNaN(top) ? 0 : top; }; // 上方盒舌左边 diff --git a/src/components/Common/CommonTable/index.js b/src/components/Common/CommonTable/index.js index ddb3309..1e4976c 100644 --- a/src/components/Common/CommonTable/index.js +++ b/src/components/Common/CommonTable/index.js @@ -7135,7 +7135,7 @@ class CommonTableRc extends React.Component { expandedRowRender: this.props.setExpandedRowRender === 'Y' ? expandedRow : null, defaultExpandAllRows: this.props.defaultExpandAllRows || null, }} - scroll={{ x: this.scrollX, y: commonUtils.isNotEmptyObject(autoHeight) ? autoHeight : 544 }} + scroll={{ x: this.scrollX, y: commonUtils.isNotEmptyNumber(autoHeight) ? autoHeight : 544 }} summary={this.genFooter} size="small" sticky={this.sticky} diff --git a/src/components/QuickQuote/index.css b/src/components/QuickQuote/index.css index 6c68d99..39bb629 100644 --- a/src/components/QuickQuote/index.css +++ b/src/components/QuickQuote/index.css @@ -77,7 +77,7 @@ .quickQuote .content .rightContent .viewTable :global .ant-form-item-control, .quickQuote .content .rightContent .viewTable1 :global .ant-form-item-control { flex: 1; - max-width: calc(100% - 70x); + max-width: calc(100% - 70px); } .quickQuote .content .rightContent .viewTable :global .viewStyle .ant-input-number, .quickQuote .content .rightContent .viewTable1 :global .viewStyle .ant-input-number { @@ -101,6 +101,14 @@ .quickQuote .content .rightContent .viewTableDownView1 :global .viewStyle .ant-form-item-control { max-width: calc(100% - 95px); } +.quickQuote .content .rightContent .viewTableDownView :global .ant-form-item-required, +.quickQuote .content .rightContent .viewTableDownView1 :global .ant-form-item-required { + color: #ff4d4f !important; +} +.quickQuote .content .rightContent .viewTableDownView :global .ant-form-item-required::before, +.quickQuote .content .rightContent .viewTableDownView1 :global .ant-form-item-required::before { + content: '' !important; +} .quickQuote .content .rightContent .viewTableDownView .subViewTable, .quickQuote .content .rightContent .viewTableDownView1 .subViewTable { width: 100%; @@ -299,15 +307,17 @@ flex-basis: 50px !important; } .quickQuote .content .rightContent .materialsLine .materialsBtns { - width: 80px; + width: 10%; display: flex; align-items: center; justify-content: space-around; + padding-bottom: 10px; } .quickQuote .content .rightContent .materialsLine .materialsBtns :global button { padding: 0; width: 16px; height: 16px; + line-height: 12px; } .quickQuote .content .rightContent .materialsLine .materialsBtns :global button > span { font-size: 10px; @@ -316,6 +326,14 @@ background-color: #53b637; border-color: #53b637; } +.quickQuote .content .rightContent .productNameBtns { + position: absolute; + top: 1px; + right: 2px; +} +.quickQuote .content .rightContent .productNameBtns :global button { + width: 20px; +} .leftTree, .boxTree { width: 250px; @@ -391,18 +409,20 @@ } .downOperations :global button { padding: 0; - width: 16px; + width: 16px !important; height: 16px; + line-height: 12px; } .downOperations :global button > span { font-size: 10px; } .sParamConfig :global .ant-form-item-label label::before { - content: ""; - display: block; - width: 5px; - height: 5px; - border-radius: 50%; - background-color: #ff4d4f; - margin-right: 2px; + content: "" !important; + display: block !important; + width: 5px !important; + min-width: 5px; + height: 5px !important; + border-radius: 50% !important; + background-color: #ff4d4f !important; + margin-right: 2px !important; } diff --git a/src/components/QuickQuote/index.less b/src/components/QuickQuote/index.less index 1b7e5ca..6abe1e7 100644 --- a/src/components/QuickQuote/index.less +++ b/src/components/QuickQuote/index.less @@ -407,7 +407,7 @@ padding: 0; width: 16px; height: 16px; - + line-height: 12px; >span { font-size: 10px; } @@ -539,9 +539,9 @@ :global { button { padding: 0; - width: 16px; + width: 16px !important; height: 16px; - + line-height: 12px; >span { font-size: 10px; } -- libgit2 0.22.2