Commit 484c5ff1806918db5e4fc851670a24f1491d8abd
1 parent
9af7a5d6
修复快速报价
Showing
2 changed files
with
134 additions
and
102 deletions
src/components/Common/BoxDesignCompontent/index.js
| ... | ... | @@ -81,90 +81,77 @@ const BoxDesignCompontent = baseProps => { |
| 81 | 81 | const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息 |
| 82 | 82 | const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值 |
| 83 | 83 | const [topBoxList, setTopBoxList] = useState([]); // 盒身信息 |
| 84 | + const [topDoubleBoxList, setTopDoubleBoxList] = useState([]); // 盒身信息 | |
| 84 | 85 | const [leftBoxList, setLeftBoxList] = useState([]); // 左边 |
| 85 | 86 | const [rightBoxList, setRightBoxList] = useState([]); |
| 86 | 87 | const [boxKey, setBoxKey] = useState(new Date().getTime()); |
| 87 | - const [doubleLayerList,setDoubleLayerList] = useState([]) | |
| 88 | + const [doubleLayerList, setDoubleLayerList] = useState([]); | |
| 88 | 89 | if (!boxVisible) return ""; |
| 89 | -// 1️⃣ 只负责 tableColum | |
| 90 | -useEffect(() => { | |
| 91 | - if (!tableData?.length) return; | |
| 90 | + // 1️⃣ 只负责 tableColum | |
| 91 | + useEffect(() => { | |
| 92 | + if (!tableData?.length) return; | |
| 92 | 93 | |
| 93 | - const newTableColum = tableData | |
| 94 | - .filter(item => item.bVisible) // 先过滤可见 | |
| 95 | - .map(item => ({ | |
| 96 | - ...item, | |
| 97 | - isEditable: true, | |
| 98 | - isSelect: false, | |
| 99 | - selectImage: null, | |
| 100 | - value: '', | |
| 101 | - })) | |
| 102 | - .filter( | |
| 103 | - item => | |
| 104 | - !( | |
| 105 | - item.showName.includes('盒长') || | |
| 106 | - item.showName.includes('盒高') || | |
| 107 | - item.showName.includes('盒宽') || | |
| 108 | - item.showName.includes('盒身') | |
| 109 | - ) | |
| 110 | - ) | |
| 111 | - .map(item => | |
| 112 | - item.showName === '盒型类别' | |
| 113 | - ? { ...item, showName: '盒型名称' } | |
| 114 | - : item | |
| 115 | - ); | |
| 94 | + const newTableColum = tableData | |
| 95 | + .filter(item => item.bVisible) // 先过滤可见 | |
| 96 | + .map(item => ({ | |
| 97 | + ...item, | |
| 98 | + isEditable: true, | |
| 99 | + isSelect: false, | |
| 100 | + selectImage: null, | |
| 101 | + value: "", | |
| 102 | + })) | |
| 103 | + .filter( | |
| 104 | + item => | |
| 105 | + !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身")) | |
| 106 | + ) | |
| 107 | + .map(item => (item.showName === "盒型类别" ? { ...item, showName: "盒型名称" } : item)); | |
| 116 | 108 | |
| 117 | - setTableColum(newTableColum); | |
| 118 | -}, [tableData]); | |
| 109 | + setTableColum(newTableColum); | |
| 110 | + }, [tableData]); | |
| 119 | 111 | |
| 120 | -// 2️⃣ 只负责 boxBodyList | |
| 121 | -useEffect(() => { | |
| 122 | - if (!tableData?.length) return; | |
| 112 | + // 2️⃣ 只负责 boxBodyList | |
| 113 | + useEffect(() => { | |
| 114 | + if (!tableData?.length) return; | |
| 123 | 115 | |
| 124 | - const bodyList = tableData | |
| 125 | - .filter(item => item.bVisible) | |
| 126 | - .map(item => ({ | |
| 127 | - ...item, | |
| 128 | - isEditable: true, | |
| 129 | - isSelect: false, | |
| 130 | - selectImage: null, | |
| 131 | - value: '', | |
| 132 | - })) | |
| 133 | - .filter(item => item.showName.includes('盒身')); | |
| 116 | + const bodyList = tableData | |
| 117 | + .filter(item => item.bVisible) | |
| 118 | + .map(item => ({ | |
| 119 | + ...item, | |
| 120 | + isEditable: true, | |
| 121 | + isSelect: false, | |
| 122 | + selectImage: null, | |
| 123 | + value: "", | |
| 124 | + })) | |
| 125 | + .filter(item => item.showName.includes("盒身")); | |
| 134 | 126 | |
| 135 | - setBoxBodyList(bodyList); | |
| 136 | -}, [tableData]); | |
| 127 | + setBoxBodyList(bodyList); | |
| 128 | + }, [tableData]); | |
| 137 | 129 | |
| 138 | -// 3️⃣ 只负责 tableDataList 和 tableDataLists | |
| 139 | -useEffect(() => { | |
| 140 | - if (!tableData?.length) return; | |
| 130 | + // 3️⃣ 只负责 tableDataList 和 tableDataLists | |
| 131 | + useEffect(() => { | |
| 132 | + if (!tableData?.length) return; | |
| 141 | 133 | |
| 142 | - const newList = tableData | |
| 143 | - .filter(item => item.bVisible) | |
| 144 | - .map(item => ({ | |
| 145 | - ...item, | |
| 146 | - isEditable: true, | |
| 147 | - isSelect: false, | |
| 148 | - selectImage: null, | |
| 149 | - value: '', | |
| 150 | - })) | |
| 151 | - .filter( | |
| 152 | - item => | |
| 153 | - item.showName.includes('盒长') || | |
| 154 | - item.showName.includes('盒高') || | |
| 155 | - item.showName.includes('盒宽') | |
| 156 | - ) | |
| 157 | - .map(item => { | |
| 158 | - let name = ''; | |
| 159 | - if (item.showName === '盒长') name = '盒长(L)'; | |
| 160 | - if (item.showName === '盒宽') name = '盒宽(W)'; | |
| 161 | - if (item.showName === '盒高') name = '盒高(D)'; | |
| 162 | - return { ...item, sName: name }; | |
| 163 | - }); | |
| 134 | + const newList = tableData | |
| 135 | + .filter(item => item.bVisible) | |
| 136 | + .map(item => ({ | |
| 137 | + ...item, | |
| 138 | + isEditable: true, | |
| 139 | + isSelect: false, | |
| 140 | + selectImage: null, | |
| 141 | + value: "", | |
| 142 | + })) | |
| 143 | + .filter(item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽")) | |
| 144 | + .map(item => { | |
| 145 | + let name = ""; | |
| 146 | + if (item.showName === "盒长") name = "盒长(L)"; | |
| 147 | + if (item.showName === "盒宽") name = "盒宽(W)"; | |
| 148 | + if (item.showName === "盒高") name = "盒高(D)"; | |
| 149 | + return { ...item, sName: name }; | |
| 150 | + }); | |
| 164 | 151 | |
| 165 | - setTableDataList(newList); | |
| 166 | - setTableDataLists(newList); | |
| 167 | -}, [tableData]); | |
| 152 | + setTableDataList(newList); | |
| 153 | + setTableDataLists(newList); | |
| 154 | + }, [tableData]); | |
| 168 | 155 | const titleList = [ |
| 169 | 156 | "上方盒舌", |
| 170 | 157 | "盒底组件", |
| ... | ... | @@ -187,6 +174,7 @@ useEffect(() => { |
| 187 | 174 | { name: "右贴边位", value: "dYTBW" }, |
| 188 | 175 | { name: "右(下)插位组件", value: "dYXCW" }, |
| 189 | 176 | ]; |
| 177 | + | |
| 190 | 178 | const newBoxList = []; |
| 191 | 179 | |
| 192 | 180 | // const boxs = titleList.length + tableData.length; |
| ... | ... | @@ -200,7 +188,7 @@ useEffect(() => { |
| 200 | 188 | titleList.push(item.showName); |
| 201 | 189 | }); |
| 202 | 190 | // 这里处理双盒的初始数据 |
| 203 | - titleList.push(...["首盒长", "首盒宽", "次盒长", "次盒宽"]) | |
| 191 | + titleList.push(...["首盒长", "首盒宽", "次盒长", "次盒宽"]); | |
| 204 | 192 | // 盒身信息 |
| 205 | 193 | titleList.forEach((item, index) => { |
| 206 | 194 | newBoxList.push({ |
| ... | ... | @@ -219,21 +207,25 @@ useEffect(() => { |
| 219 | 207 | }); |
| 220 | 208 | // 部件信息 |
| 221 | 209 | if (slaveData && slaveData.length) { |
| 222 | - slaveData.forEach((item, index) => { | |
| 223 | - const i = titleList1.findIndex(i => { | |
| 224 | - return i.value === item.sCode; | |
| 210 | + if (boxType !== "8") { | |
| 211 | + slaveData.forEach((item, index) => { | |
| 212 | + const i = titleList1.findIndex(i => { | |
| 213 | + return i.value === item.sCode; | |
| 214 | + }); | |
| 215 | + if (i !== -1) { | |
| 216 | + const x = newBoxList.findIndex(z => z.sName === titleList1[i].name); | |
| 217 | + newBoxList[x].value = item.iValue; | |
| 218 | + newBoxList[x].type = item.sTypes; | |
| 219 | + newBoxList[x].showName = item.sName; | |
| 220 | + newBoxList[x].selectImage = item.sMakeUpPath; | |
| 221 | + newBoxList[x].sName = titleList1[i].name; | |
| 222 | + newBoxList[x].sAssignFormula = item.sAssignFormula; | |
| 223 | + newBoxList[x].bVisible = item.bVisible; | |
| 224 | + } | |
| 225 | 225 | }); |
| 226 | - if (i !== -1) { | |
| 227 | - const x = newBoxList.findIndex(z => z.sName === titleList1[i].name); | |
| 228 | - newBoxList[x].value = item.iValue; | |
| 229 | - newBoxList[x].type = item.sTypes; | |
| 230 | - newBoxList[x].showName = item.sName; | |
| 231 | - newBoxList[x].selectImage = item.sMakeUpPath; | |
| 232 | - newBoxList[x].sName = titleList1[i].name; | |
| 233 | - newBoxList[x].sAssignFormula = item.sAssignFormula; | |
| 234 | - newBoxList[x].bVisible = item.bVisible; | |
| 235 | - } | |
| 236 | - }); | |
| 226 | + } else { | |
| 227 | + // 双盒盒型单独处理 | |
| 228 | + } | |
| 237 | 229 | } |
| 238 | 230 | // 盒身信息 |
| 239 | 231 | if (masterData) { |
| ... | ... | @@ -260,7 +252,6 @@ useEffect(() => { |
| 260 | 252 | } |
| 261 | 253 | }, [newBoxList]); |
| 262 | 254 | |
| 263 | - | |
| 264 | 255 | const arraysAreEqual = (arr1, arr2) => { |
| 265 | 256 | if (arr1.length !== arr2.length) return false; |
| 266 | 257 | return arr1.every((item, index) => item.sName === arr2[index].sName); |
| ... | ... | @@ -343,12 +334,9 @@ useEffect(() => { |
| 343 | 334 | sAssignFormula: null, |
| 344 | 335 | }); |
| 345 | 336 | }); |
| 346 | - // boxList.push() | |
| 347 | - setDoubleLayerList(box) | |
| 337 | + setDoubleLayerList(box); | |
| 348 | 338 | } else { |
| 349 | 339 | } |
| 350 | - console.log(boxList,'boxList'); | |
| 351 | - | |
| 352 | 340 | }, [boxType]); |
| 353 | 341 | const handleFocus = (e, index) => { |
| 354 | 342 | if (boxList && boxList.length) { |
| ... | ... | @@ -844,7 +832,55 @@ useEffect(() => { |
| 844 | 832 | |
| 845 | 833 | <div className={styles.boxBody} key={boxKey}> |
| 846 | 834 | <div className={styles.boxTop}> |
| 847 | - {topBoxList.map((topItem, index) => ( | |
| 835 | + {boxType !== '8' && topBoxList.map((topItem, index) => ( | |
| 836 | + <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}> | |
| 837 | + <div className={styles.boxTitle}>{topItem.sName}</div> | |
| 838 | + {topItem?.selectImage ? ( | |
| 839 | + <img | |
| 840 | + src={topItem?.selectImage} | |
| 841 | + alt={topItem.value} | |
| 842 | + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }} | |
| 843 | + /> | |
| 844 | + ) : ( | |
| 845 | + "" | |
| 846 | + )} | |
| 847 | + | |
| 848 | + <Select | |
| 849 | + optionLabelProp="label" | |
| 850 | + className="mySelects" | |
| 851 | + style={{ width: 180 }} | |
| 852 | + defaultValue={options.length ? options[0].value : ""} | |
| 853 | + onSelect={(value, option) => handleSelect(value, option, index, 0)} | |
| 854 | + onDropdownVisibleChange={async open => { | |
| 855 | + if (open) { | |
| 856 | + props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions | |
| 857 | + } | |
| 858 | + }} | |
| 859 | + > | |
| 860 | + {!loading ? options.map(option => renderOptionWithImage(option)) : ""} | |
| 861 | + </Select> | |
| 862 | + <div className={styles.boxInput}> | |
| 863 | + {/* <div className={styles.text}>参数:</div> */} | |
| 864 | + <Input | |
| 865 | + value={topItem?.showName} | |
| 866 | + onChange={e => handleChangeName(e, index)} | |
| 867 | + onFocus={e => handleFocus(e, index)} | |
| 868 | + onBlur={e => handleBlur(e, index)} | |
| 869 | + readOnly={!topItem?.isEditable} | |
| 870 | + className={styles.text} | |
| 871 | + /> | |
| 872 | + <Input | |
| 873 | + value={topItem?.value} | |
| 874 | + onChange={e => handleChange(e, index)} | |
| 875 | + onFocus={e => handleFocus(e, index)} | |
| 876 | + onBlur={e => handleBlur(e, index)} | |
| 877 | + readOnly={!topItem?.isEditable} | |
| 878 | + style={{ width: " 80%" }} | |
| 879 | + /> | |
| 880 | + </div> | |
| 881 | + </div> | |
| 882 | + ))} | |
| 883 | + {boxType === '8' && topDoubleBoxList.map((topItem, index) => ( | |
| 848 | 884 | <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}> |
| 849 | 885 | <div className={styles.boxTitle}>{topItem.sName}</div> |
| 850 | 886 | {topItem?.selectImage ? ( |
| ... | ... | @@ -1075,7 +1111,7 @@ useEffect(() => { |
| 1075 | 1111 | }) |
| 1076 | 1112 | : ""} |
| 1077 | 1113 | <div className={styles.boxFlexs}> |
| 1078 | - {tableDataList && tableDataList.length && boxType !== '8' | |
| 1114 | + {tableDataList && tableDataList.length && boxType !== "8" | |
| 1079 | 1115 | ? tableDataList.map((item, index) => { |
| 1080 | 1116 | const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length; |
| 1081 | 1117 | |
| ... | ... | @@ -1095,9 +1131,9 @@ useEffect(() => { |
| 1095 | 1131 | }) |
| 1096 | 1132 | : ""} |
| 1097 | 1133 | </div> |
| 1098 | - | |
| 1099 | - <div className={styles.boxFlexs}> | |
| 1100 | - {doubleLayerList && doubleLayerList.length && boxType === '8' | |
| 1134 | + | |
| 1135 | + <div className={styles.boxFlexs}> | |
| 1136 | + {doubleLayerList && doubleLayerList.length && boxType === "8" | |
| 1101 | 1137 | ? doubleLayerList.map((item, index) => { |
| 1102 | 1138 | const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length + tableDataList.length; |
| 1103 | 1139 | ... | ... |
src/components/QuickQuote/index.jsx
| ... | ... | @@ -2826,7 +2826,7 @@ const ManyComponent = props => { |
| 2826 | 2826 | const radios = GetBestAlgorithm(props); |
| 2827 | 2827 | slaveData[boxModelKey] = { |
| 2828 | 2828 | ...slaveData[boxModelKey], |
| 2829 | - radioValue: radios.sCode, | |
| 2829 | + radioValue: radios?.sCode || 0, | |
| 2830 | 2830 | }; |
| 2831 | 2831 | props.setState(pre => ({ ...pre, slaveData, bestAlgorithm: commonUtils.createSid(), onCalcPrices: true })); |
| 2832 | 2832 | } else { |
| ... | ... | @@ -2841,10 +2841,6 @@ const ManyComponent = props => { |
| 2841 | 2841 | }); |
| 2842 | 2842 | props.setState(pre => ({ ...pre, onCalcPrices: false })); |
| 2843 | 2843 | } |
| 2844 | - | |
| 2845 | - // setTimeout(() => { | |
| 2846 | - | |
| 2847 | - // }, 500); | |
| 2848 | 2844 | }; |
| 2849 | 2845 | const { bestAlgorithm, onCalcPrices } = state; |
| 2850 | 2846 | useEffect(() => { | ... | ... |