xlyErp / xlyUmi

Commit 887c32fffed3b162755606f411b9db35f1371dd3

Authored by 陈鑫涛
1 parent 8dff3662

双盒盒型

Inline Side-by-side
Showing 2 changed files with 580 additions and 1072 deletions
src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js
  View file @887c32f
1 /* eslint-disable */ 1 /* eslint-disable */
2 import React, { useRef, useState, useEffect } from "react"; 2 import React, { useRef, useState, useEffect } from "react";
  3 +import styles from "../index.less";
  4 +import SvgBox from "../svg";
3 import { Select, Button, message, Input, Spin } from "antd-v4"; 5 import { Select, Button, message, Input, Spin } from "antd-v4";
4 import { CompressOutlined, ExpandOutlined } from "@ant-design/icons"; 6 import { CompressOutlined, ExpandOutlined } from "@ant-design/icons";
5 import * as commonUtils from "@/utils/utils"; 7 import * as commonUtils from "@/utils/utils";
@@ -12,69 +14,9 @@ import CommonViewTable from "@/components/Common/CommonViewTable"; @@ -12,69 +14,9 @@ import CommonViewTable from "@/components/Common/CommonViewTable";
12 import StaticEditTable from "@/components/Common/CommonTable"; 14 import StaticEditTable from "@/components/Common/CommonTable";
13 import jsPreviewPdf from "@js-preview/pdf"; 15 import jsPreviewPdf from "@js-preview/pdf";
14 import commonConfig from "@/utils/config"; 16 import commonConfig from "@/utils/config";
15 -import SvgBox from "../svg";  
16 -import styles from "./index.less";  
17 -import DoubleLayerBox from "./compontents/doubleLayer";  
18 -const BoxDesignEvent = props => {  
19 - const addState = {};  
20 - const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props;  
21 - const [tableData, setTableData] = useState({});  
22 - const [options, setOptions] = useState([]);  
23 - const [loading, setLoading] = useState(false); // 加载状态  
24 -  
25 - addState.getSqlOptions = async type => {  
26 - setLoading(true);  
27 - const { app, token, makeConfig } = props;  
28 - // const quickQuoteConfig = config.gdsconfigformslave.find(item => item.sControlName === "BtnQuickQuote") || {};  
29 - const { sId } = makeConfig;  
30 - if (!sId) return;  
31 - const url = `${commonConfig.server_host}business/getSelectLimit/${sId}?sModelsId=${sId}`;  
32 - const body = {  
33 - pageNum: 1,  
34 - pageSize: 20,  
35 - sKeyUpFilterName: "",  
36 - sSqlCondition: {  
37 - sType: type,  
38 - },  
39 - };  
40 - const data = await commonServices.postValueService(token, body, url);  
41 - if (data) {  
42 - const option = data.data.dataset.rows;  
43 - option.sort((a, b) => {  
44 - if (a.sCode === "") {  
45 - return -1; // 将 id 为 1 的元素排在前面  
46 - }  
47 - if (b.sCode === "") {  
48 - return 1;  
49 - }  
50 - return 0; // 其他元素保持原顺序  
51 - });  
52 - setOptions(data.data.dataset.rows);  
53 - }  
54 - setLoading(false);  
55 - };  
56 -  
57 - useEffect(() => {  
58 - if (!formData.length) return;  
59 -  
60 - const data = formData[0].gdsconfigformslave.filter(Item => Item.bVisible);  
61 - setTableData(data);  
62 - props.onSaveState(pre => ({ ...pre, data }));  
63 - }, [formData.length]);  
64 -  
65 - return {  
66 - ...props,  
67 - tableData,  
68 - ...addState,  
69 - options,  
70 - loading,  
71 - };  
72 -};  
73 -const BoxDesignCompontent = baseProps => {  
74 - const props = BoxDesignEvent(baseProps); 17 +const DoubleLayerBox = props => {
75 const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData, options = [] } = props; 18 const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData, options = [] } = props;
76 const { slaveData = {}, masterData = {} } = props.state; 19 const { slaveData = {}, masterData = {} } = props.state;
77 - const { boxVisible } = baseProps;  
78 const [boxList, setBoxList] = useState([]); 20 const [boxList, setBoxList] = useState([]);
79 const [tableColum, setTableColum] = useState([]); // 盒身类型 21 const [tableColum, setTableColum] = useState([]); // 盒身类型
80 const [tableDataList, setTableDataList] = useState([]); // 盒长 22 const [tableDataList, setTableDataList] = useState([]); // 盒长
@@ -83,82 +25,85 @@ const BoxDesignCompontent = baseProps => { @@ -83,82 +25,85 @@ const BoxDesignCompontent = baseProps => {
83 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息 25 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
84 const [leftBoxList, setLeftBoxList] = useState([]); // 左边 26 const [leftBoxList, setLeftBoxList] = useState([]); // 左边
85 const [rightBoxList, setRightBoxList] = useState([]); 27 const [rightBoxList, setRightBoxList] = useState([]);
86 - const [boxKey, setBoxKey] = useState(new Date().getTime());  
87 - if (!boxVisible) return "";  
88 - useEffect(() => {  
89 - if (tableData && tableData.length) {  
90 - const newTableColum = tableData.map(item => {  
91 - return {  
92 - ...item,  
93 - isEditable: true,  
94 - isSelect: false,  
95 - selectImage: null,  
96 - value: "",  
97 - };  
98 - });  
99 - const newList = newTableColum.filter(  
100 - item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽")  
101 - );  
102 - const newLists = newTableColum.filter(  
103 - item =>  
104 - !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身"))  
105 - );  
106 - const bodyList = newTableColum.filter(item => item.showName.includes("盒身"));  
107 - newLists.forEach(x => {  
108 - if (x.showName === "盒型类别") {  
109 - x.showName = "盒型名称";  
110 - }  
111 - });  
112 - setTableColum(newLists);  
113 - setBoxBodyList(bodyList);  
114 - newList.forEach(item => {  
115 - let name = "";  
116 - if (item.showName === "盒长") {  
117 - name = item.showName + "(L)";  
118 - } else if (item.showName === "盒宽") {  
119 - name = item.showName + "(W)";  
120 - } else if (item.showName === "盒高") {  
121 - name = item.showName + "(D)";  
122 - }  
123 - item.sName = name;  
124 - });  
125 - setTableDataList(newList);  
126 - }  
127 - }, [tableData]); 28 + // useEffect(() => {
  29 + // if (tableData && tableData.length) {
  30 + // const newTableColum = tableData.map(item => {
  31 + // return {
  32 + // ...item,
  33 + // isEditable: true,
  34 + // isSelect: false,
  35 + // selectImage: null,
  36 + // value: "",
  37 + // };
  38 + // });
  39 + // const newList = newTableColum.filter(
  40 + // item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽")
  41 + // );
  42 + // const newLists = newTableColum.filter(
  43 + // item =>
  44 + // !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身"))
  45 + // );
  46 + // const bodyList = newTableColum.filter(item => item.showName.includes("盒身"));
  47 + // newLists.forEach(x => {
  48 + // if (x.showName === "盒型类别") {
  49 + // x.showName = "盒型名称";
  50 + // }
  51 + // });
  52 + // setTableColum(newLists);
  53 + // setBoxBodyList(bodyList);
  54 + // newList.forEach(item => {
  55 + // let name = "";
  56 + // if (item.showName === "盒长") {
  57 + // name = item.showName + "(L)";
  58 + // } else if (item.showName === "盒宽") {
  59 + // name = item.showName + "(W)";
  60 + // } else if (item.showName === "盒高") {
  61 + // name = item.showName + "(D)";
  62 + // }
  63 + // item.sName = name;
  64 + // });
  65 + // setTableDataList(newList);
  66 + // }
  67 + // }, [tableData]);
128 const titleList = [ 68 const titleList = [
129 - "上方盒舌",  
130 - "盒底组件",  
131 - "下方盒舌",  
132 "左(上)插位组件", 69 "左(上)插位组件",
133 - "左贴边位",  
134 - "左(下)插位组件", 70 + "上插位组件",
135 "右(上)插位组件", 71 "右(上)插位组件",
136 - "右贴边位", 72 + "左偏移",
  73 + "左插位组件",
  74 + "左(下)插位组件",
  75 + "右偏移",
  76 + "右插位组件",
137 "右(下)插位组件", 77 "右(下)插位组件",
  78 + "盒型名称",
  79 + "盒身",
  80 + "个数",
  81 + "首盒长(L)",
  82 + "首盒宽(W)",
  83 + "次盒长(L)",
  84 + "次盒宽(W)",
138 ]; 85 ];
139 const titleList1 = [ 86 const titleList1 = [
140 - { name: "上方盒舌", value: "dSFHS" },  
141 - { name: "盒底组件", value: "dHDC" },  
142 - { name: "下方盒舌", value: "dXFHS" },  
143 { name: "左(上)插位组件", value: "dZSCW" }, 87 { name: "左(上)插位组件", value: "dZSCW" },
144 - { name: "左贴边位", value: "dZTBW" },  
145 - { name: "左(下)插位组件", value: "dZXCW" }, 88 + { name: "上插位组件", value: "dSCW" },
146 { name: "右(上)插位组件", value: "dYSCW" }, 89 { name: "右(上)插位组件", value: "dYSCW" },
147 - { name: "右贴边位", value: "dYTBW" }, 90 + { name: "左偏移", value: "dZPY" },
  91 + { name: "左插位组件", value: "dZCW" },
  92 + { name: "左(下)插位组件", value: "dZXCW" },
  93 + { name: "右偏移", value: "dYPY" },
  94 + { name: "右插位组件", value: "dYCW" },
148 { name: "右(下)插位组件", value: "dYXCW" }, 95 { name: "右(下)插位组件", value: "dYXCW" },
149 ]; 96 ];
  97 + // tableColum.forEach(item => {
  98 + // titleList.push(item.showName);
  99 + // });
  100 + // boxBodyList.forEach(item => {
  101 + // titleList.push(item.showName);
  102 + // });
  103 + // tableDataList.forEach(item => {
  104 + // titleList.push(item.showName);
  105 + // });
150 const newBoxList = []; 106 const newBoxList = [];
151 -  
152 - // const boxs = titleList.length + tableData.length;  
153 - tableColum.forEach(item => {  
154 - titleList.push(item.showName);  
155 - });  
156 - boxBodyList.forEach(item => {  
157 - titleList.push(item.showName);  
158 - });  
159 - tableDataList.forEach(item => {  
160 - titleList.push(item.showName);  
161 - });  
162 // 盒身信息 107 // 盒身信息
163 titleList.forEach((item, index) => { 108 titleList.forEach((item, index) => {
164 newBoxList.push({ 109 newBoxList.push({
@@ -175,7 +120,6 @@ const BoxDesignCompontent = baseProps => { @@ -175,7 +120,6 @@ const BoxDesignCompontent = baseProps => {
175 sAssignFormula: null, 120 sAssignFormula: null,
176 }); 121 });
177 }); 122 });
178 - // 部件信息  
179 if (slaveData && slaveData.length) { 123 if (slaveData && slaveData.length) {
180 slaveData.forEach((item, index) => { 124 slaveData.forEach((item, index) => {
181 const i = titleList1.findIndex(i => { 125 const i = titleList1.findIndex(i => {
@@ -211,137 +155,21 @@ const BoxDesignCompontent = baseProps => { @@ -211,137 +155,21 @@ const BoxDesignCompontent = baseProps => {
211 } 155 }
212 }); 156 });
213 } 157 }
214 - // 有数据的时候 盒型设计需要赋值  
215 - useEffect(() => {  
216 - if (newBoxList.length > 0 && !arraysAreEqual(boxList, newBoxList)) {  
217 - setBoxList(newBoxList);  
218 - }  
219 - }, [newBoxList]);  
220 - console.log(boxList, "boxList");  
221 -  
222 const arraysAreEqual = (arr1, arr2) => { 158 const arraysAreEqual = (arr1, arr2) => {
223 if (arr1.length !== arr2.length) return false; 159 if (arr1.length !== arr2.length) return false;
224 return arr1.every((item, index) => item.sName === arr2[index].sName); 160 return arr1.every((item, index) => item.sName === arr2[index].sName);
225 }; 161 };
  162 + // 有数据的时候 盒型设计需要赋值
226 useEffect(() => { 163 useEffect(() => {
227 - const type = boxList.find(item => item.sName === "盒身")?.type;  
228 - const updateLists = () => {  
229 - const topBoxFilter = item => item.sName === "上方盒舌" || item.sName === "盒底组件" || item.sName === "下方盒舌";  
230 -  
231 - const leftBoxFilter = item => item.sName === "左(上)插位组件" || item.sName === "左贴边位" || item.sName === "左(下)插位组件";  
232 -  
233 - const rightBoxFilter = item => item.sName === "右(上)插位组件" || item.sName === "右贴边位" || item.sName === "右(下)插位组件";  
234 -  
235 - if (type === "2" || type === 2 || type === "4" || type === 4 || type === 3 || type === "3" || type === 5 || type === "5") {  
236 - const box = [...boxList];  
237 - box.forEach(x => {  
238 - x.show = true;  
239 - });  
240 - if (type === "2" || type === 2) {  
241 - box.forEach(x => x.sName === "盒底组件" && (x.show = false));  
242 - } else if (type === "4" || type === 4) {  
243 - const title = ["盒底组件", "左贴边位", "右贴边位"];  
244 - box.forEach(x => title.includes(x.sName) && (x.show = false));  
245 - } else if (type === "3" || type === 3) {  
246 - const title = ["左(上)插位组件", "右(下)插位组件", "盒底组件"];  
247 - box.forEach(x => title.includes(x.sName) && (x.show = false));  
248 - } else if (type === "5" || type === 5) {  
249 - const title = ["盒底组件"];  
250 - box.forEach(x => title.includes(x.sName) && (x.show = false));  
251 - }  
252 - setTopBoxList(box.filter(topBoxFilter));  
253 - setLeftBoxList(box.filter(leftBoxFilter));  
254 - if (type === 3 || type === "3") {  
255 - setRightBoxList(box.filter(rightBoxFilter).reverse());  
256 - } else {  
257 - setRightBoxList(box.filter(rightBoxFilter));  
258 - }  
259 - } else if (type === "7" || type === 7) {  
260 - const box = [...boxList];  
261 - box.forEach(x => {  
262 - x.show = true;  
263 - });  
264 - const title = ["盒底组件", "左贴边位", "右贴边位", "上方盒舌", "下方盒舌"];  
265 - box.forEach(x => title.includes(x.sName) && (x.show = false));  
266 - setTopBoxList(box.filter(topBoxFilter));  
267 - setLeftBoxList(box.filter(leftBoxFilter));  
268 - setRightBoxList(box.filter(rightBoxFilter));  
269 - } else {  
270 - const box = [...boxList];  
271 - box.forEach(x => {  
272 - x.show = true;  
273 - });  
274 - setTopBoxList(box.filter(topBoxFilter));  
275 - setLeftBoxList(box.filter(leftBoxFilter));  
276 - setRightBoxList(box.filter(rightBoxFilter));  
277 - }  
278 - };  
279 -  
280 - updateLists();  
281 - }, [boxList]);  
282 - const boxType = boxList.find(item => item.sName === "盒身")?.type;  
283 -  
284 - const handleFocus = (e, index) => {  
285 - if (boxList && boxList.length) {  
286 - const updatedBoxList = [...boxList];  
287 - updatedBoxList[index].isEditable = true;  
288 - setBoxList(updatedBoxList);  
289 - }  
290 - };  
291 -  
292 - const handleBlur = (e, index) => {  
293 - if (boxList && boxList.length) {  
294 - const updatedBoxList = [...boxList];  
295 - updatedBoxList[index].isEditable = false;  
296 - setBoxList(updatedBoxList);  
297 - }  
298 - };  
299 -  
300 - const handleChange = (e, index) => {  
301 - const updatedBoxList = [...boxList];  
302 - updatedBoxList[index].value = e.target.value;  
303 - setBoxList(updatedBoxList);  
304 - };  
305 -  
306 - const handleChangeName = (e, index) => {  
307 - const updatedBoxList = [...boxList];  
308 - updatedBoxList[index].showName = e.target.value;  
309 - setBoxList(updatedBoxList);  
310 - };  
311 -  
312 - const handleSelect = (name, selectConfig, index, type) => {  
313 - let updatedBoxList = [...boxList];  
314 - updatedBoxList[index].type = name;  
315 - updatedBoxList[index].selectImage = selectConfig.image;  
316 - // 选择盒身数据全部清空  
317 -  
318 - const typeList = [1, 2, 3, 4];  
319 - if (typeList.includes(type)) {  
320 - const table1 = tableColum.map(x => x.showName);  
321 - const table2 = boxBodyList.map(x => x.showName);  
322 - const table3 = tableDataList.map(x => x.showName);  
323 - const tableTitle = table1.concat(table2, table3);  
324 - updatedBoxList.forEach((x, i) => {  
325 - if (i !== index && !tableTitle.includes(x.sName)) {  
326 - x.value = "";  
327 - x.type = null;  
328 - x.selectValue = null;  
329 - x.selectImage = null;  
330 - // x.showName =  
331 - }  
332 - });  
333 - setIsDefaultValue(false);  
334 - updatedBoxList[index].value = selectConfig.label; 164 + if (newBoxList.length > 0 && !arraysAreEqual(boxList, newBoxList)) {
  165 + setBoxList(newBoxList);
335 } 166 }
336 - setBoxList(updatedBoxList);  
337 - }; 167 + }, [newBoxList]);
338 const getImage = fileName => { 168 const getImage = fileName => {
339 // const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&sModelsId=100&token=${props.token}`; 169 // const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&sModelsId=100&token=${props.token}`;
340 const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}`; 170 const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}`;
341 return imageUrl; 171 return imageUrl;
342 }; 172 };
343 - console.log(boxList, "boxList");  
344 -  
345 // 下来框 173 // 下来框
346 const renderOptionWithImage = option => { 174 const renderOptionWithImage = option => {
347 return ( 175 return (
@@ -358,618 +186,191 @@ const BoxDesignCompontent = baseProps => { @@ -358,618 +186,191 @@ const BoxDesignCompontent = baseProps => {
358 boxList, 186 boxList,
359 showNew: 0, 187 showNew: 0,
360 }; 188 };
361 - const dobuleProps = {  
362 - ...props,  
363 - renderOptionWithImage,  
364 - };  
365 - // 计算展长展宽  
366 - // 创建盒型  
367 - const submit = () => {  
368 - const newSlaveData = [];  
369 - // 判断是新增还是修改  
370 -  
371 - // 存储子表数据  
372 - boxList.forEach((item, index) => {  
373 - const i = titleList1.findIndex(i => i.name === item.sName);  
374 - const slave = slaveData.find(z => z.sCode === titleList1[i]?.value);  
375 - if (i !== -1) {  
376 - const data = {  
377 - ...slaveData[0],  
378 - handleType: slave ? "update" : "add",  
379 - sName: item.showName,  
380 - sCode: titleList1[i].value,  
381 - iValue: item.value,  
382 - iOrder: index + 1,  
383 - iRowNum: index + 1,  
384 - sId: slave ? slave.sId : commonUtils.createSid(),  
385 - sMakeUpPath: item.selectImage,  
386 - sTypes: item.type,  
387 - bVisible: item.value ? true : false,  
388 - sParentId: masterData.sId,  
389 - sAssignFormula: item.sAssignFormula,  
390 - };  
391 - // if (item.value !== "") {  
392 - newSlaveData.push(data);  
393 - // }  
394 - }  
395 - });  
396 - const submitSlaveData = [];  
397 - slaveData.forEach(item => {  
398 - const i = newSlaveData.findIndex(x => x.scode === item.code);  
399 - if (i === -1) {  
400 - submitSlaveData.push({ ...item, handleType: "del" });  
401 - }  
402 - });  
403 - submitSlaveData.concat(newSlaveData);  
404 -  
405 - // 处理计算公式  
406 - // 计算展长公式 sLengthFormula  
407 - let sLengthFormula = "";  
408 - let sWidthFormula = "";  
409 - const boxType = boxList.find(item => item.sName === "盒身")?.type;  
410 - const boxLength = Number(boxList.find(item => item.sName === "盒长")?.value);  
411 - const boxWidth = Number(boxList.find(item => item.sName === "盒宽")?.value);  
412 - const boxHeight = Number(boxList.find(item => item.sName === "盒高")?.value);  
413 - const zxcw = boxList.find(x => x.sName === "左(下)插位组件");  
414 - const zscw = boxList.find(x => x.sName === "左(上)插位组件");  
415 - const yscw = boxList.find(x => x.sName === "右(上)插位组件");  
416 - const yxcw = boxList.find(x => x.sName === "右(下)插位组件");  
417 - const hdzj = boxList.find(x => x.sName === "盒底组件");  
418 - const zxcwType = zxcw?.type;  
419 - const zxcwValue = zxcw?.value;  
420 - const zscwType = zscw?.type;  
421 - const zscwValue = zscw?.value;  
422 - const yscwType = yscw?.type;  
423 - const yscwValue = yscw?.value;  
424 - const yxcwType = yxcw?.type;  
425 - const yxcwValue = yxcw?.value;  
426 - let leftTopValue = 0;  
427 - let leftTop = "";  
428 - let rightTopValue = 0;  
429 - let rightTop = "";  
430 - let leftBottomValue = 0;  
431 - let leftBottom = "";  
432 - let rightBottomValue = 0;  
433 - let rightBottom = "";  
434 - if (boxType && boxType === "1") {  
435 - // 四面盒  
436 - const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;  
437 - const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;  
438 - sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W * 2" + (ytbw ? " +dYTBW" : "");  
439 -  
440 - if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {  
441 - leftBottomValue = Number(zxcwValue) + boxHeight;  
442 - leftBottom = " + dZXCW + W";  
443 - } else if (zxcwType === "4002" || zxcwType === "4003") {  
444 - leftBottomValue = Number(zxcwValue);  
445 - leftBottom = " + dZXCW";  
446 - } else if (zxcwType === "4004") {  
447 - leftBottomValue = Number(zxcwValue) + boxHeight * 2;  
448 - leftBottom = " + dZXCW + W * 2";  
449 - } else if (zxcwType === "4005") {  
450 - leftBottomValue = boxHeight * 2;  
451 - leftBottom = "+ W * 2";  
452 - }  
453 - if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {  
454 - rightTopValue = Number(yscwValue) + boxHeight;  
455 - rightTop = "dYSCW + W + ";  
456 - } else if (yscwType === "6002" || yscwType === "6003") {  
457 - rightTopValue = Number(yscwValue);  
458 - rightTop = "dYSCW + ";  
459 - } else if (yscwType === "6004") {  
460 - rightTopValue = Number(yscwValue) + boxHeight * 2;  
461 - rightTop = "dYSCW + W * 2+ ";  
462 - } else if (yscwType === "6005") {  
463 - rightTopValue = boxHeight * 2;  
464 - rightTop = "W * 2+ ";  
465 - }  
466 - if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {  
467 - leftTopValue = Number(zscwValue) + boxHeight;  
468 - leftTop = "dZSCW + W +";  
469 - } else if (zscwType === "3002" || zscwType === "3003") {  
470 - leftTopValue = Number(zscwValue);  
471 - leftTop = "dZSCW +";  
472 - } else if (zscwType === "3004") {  
473 - leftTopValue = Number(zscwValue) + boxHeight * 2;  
474 - leftTop = "dZSCW + W * 2 +";  
475 - } else if (zscwType === "3005") {  
476 - leftTopValue = boxHeight * 2;  
477 - leftTop = "W * 2 +";  
478 - }  
479 - if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {  
480 - rightBottomValue = Number(yxcwValue) + boxHeight;  
481 - rightBottom = "+ dYXCW + W";  
482 - } else if (yxcwType === "7002" || yxcwType === "7003") {  
483 - rightBottomValue = Number(yxcwValue);  
484 - rightBottom = "+ dYXCW ";  
485 - } else if (yxcwType === "7004") {  
486 - rightBottomValue = Number(yxcwValue) + boxHeight * 2;  
487 - rightBottom = "+ dYXCW + W * 2";  
488 - } else if (yxcwType === "7005") {  
489 - rightBottomValue = boxHeight * 2;  
490 - rightBottom = "+ W * 2";  
491 - }  
492 - sWidthFormula =  
493 - (leftTopValue > rightTopValue ? leftTop : rightTop) +  
494 - "D" +  
495 - (hdzj ? " + dHDC" : leftBottomValue > rightBottomValue ? leftBottom : rightBottom);  
496 - } else if (boxType && boxType === "2") {  
497 - // 单折  
498 - const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;  
499 - const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;  
500 - sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W" + (ytbw ? " +dYTBW" : "");  
501 - if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {  
502 - leftBottomValue = Number(zxcwValue) + boxHeight;  
503 - leftBottom = " + dZXCW + W";  
504 - } else if (zxcwType === "4002" || zxcwType === "4003") {  
505 - leftBottomValue = Number(zxcwValue);  
506 - leftBottom = " + dZXCW";  
507 - } else if (zxcwType === "4004") {  
508 - leftBottomValue = Number(zxcwValue) + boxHeight * 2;  
509 - leftBottom = " + dZXCW + W * 2";  
510 - } else if (zxcwType === "4005") {  
511 - leftBottomValue = boxHeight * 2;  
512 - leftBottom = "+ W * 2";  
513 - }  
514 - if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {  
515 - rightTopValue = Number(yscwValue) + boxHeight;  
516 - rightTop = "dYSCW + W + ";  
517 - } else if (yscwType === "6002" || yscwType === "6003") {  
518 - rightTopValue = Number(yscwValue);  
519 - rightTop = "dYSCW + ";  
520 - } else if (yscwType === "6004") {  
521 - rightTopValue = Number(yscwValue) + boxHeight * 2;  
522 - rightTop = "dYSCW + W * 2+ ";  
523 - } else if (yscwType === "6005") {  
524 - rightTopValue = boxHeight * 2;  
525 - rightTop = "W * 2+ ";  
526 - }  
527 - if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {  
528 - leftTopValue = Number(zscwValue) + boxHeight;  
529 - leftTop = "dZSCW + W +";  
530 - } else if (zscwType === "3002" || zscwType === "3003") {  
531 - leftTopValue = Number(zscwValue);  
532 - leftTop = "dZSCW +";  
533 - } else if (zscwType === "3004") {  
534 - leftTopValue = Number(zscwValue) + boxHeight * 2;  
535 - leftTop = "dZSCW + W * 2 +";  
536 - } else if (zscwType === "3005") {  
537 - leftTopValue = boxHeight * 2;  
538 - leftTop = "W * 2 +";  
539 - }  
540 - if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {  
541 - rightBottomValue = Number(yxcwValue) + boxHeight;  
542 - rightBottom = "+ dYXCW + W";  
543 - } else if (yxcwType === "7002" || yxcwType === "7003") {  
544 - rightBottomValue = Number(yxcwValue);  
545 - rightBottom = "+ dYXCW ";  
546 - } else if (yxcwType === "7004") {  
547 - rightBottomValue = Number(yxcwValue) + boxHeight * 2;  
548 - rightBottom = "+ dYXCW + W * 2";  
549 - } else if (yxcwType === "7005") {  
550 - rightBottomValue = boxHeight * 2;  
551 - rightBottom = "+ W * 2";  
552 - }  
553 - sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);  
554 - } else if (boxType && boxType === "3") {  
555 - const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;  
556 - const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;  
557 - sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L + W * 2" + (ytbw ? " +dYTBW" : "");  
558 - if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {  
559 - leftBottomValue = Number(zxcwValue) + boxHeight;  
560 - leftBottom = " + dZXCW + W";  
561 - } else if (zxcwType === "4002" || zxcwType === "4003") {  
562 - leftBottomValue = Number(zxcwValue);  
563 - leftBottom = " + dZXCW";  
564 - } else if (zxcwType === "4004") {  
565 - leftBottomValue = Number(zxcwValue) + boxHeight * 2;  
566 - leftBottom = " + dZXCW + W * 2";  
567 - } else if (zxcwType === "4005") {  
568 - leftBottomValue = boxHeight * 2;  
569 - leftBottom = "+ W * 2";  
570 - }  
571 - if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {  
572 - rightTopValue = Number(yscwValue) + boxHeight;  
573 - rightTop = "dYSCW + W + ";  
574 - } else if (yscwType === "6002" || yscwType === "6003") {  
575 - rightTopValue = Number(yscwValue);  
576 - rightTop = "dYSCW + ";  
577 - } else if (yscwType === "6004") {  
578 - rightTopValue = Number(yscwValue) + boxHeight * 2;  
579 - rightTop = "dYSCW + W * 2+ ";  
580 - } else if (yscwType === "6005") {  
581 - rightTopValue = boxHeight * 2;  
582 - rightTop = "W * 2+ ";  
583 - }  
584 - if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {  
585 - leftTopValue = Number(zscwValue) + boxHeight;  
586 - leftTop = "dZSCW + W +";  
587 - } else if (zscwType === "3002" || zscwType === "3003") {  
588 - leftTopValue = Number(zscwValue);  
589 - leftTop = "dZSCW +";  
590 - } else if (zscwType === "3004") {  
591 - leftTopValue = Number(zscwValue) + boxHeight * 2;  
592 - leftTop = "dZSCW + W * 2 +";  
593 - } else if (zscwType === "3005") {  
594 - leftTopValue = boxHeight * 2;  
595 - leftTop = "W * 2 +";  
596 - }  
597 - if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {  
598 - rightBottomValue = Number(yxcwValue) + boxHeight;  
599 - rightBottom = "+ dYXCW + W";  
600 - } else if (yxcwType === "7002" || yxcwType === "7003") {  
601 - rightBottomValue = Number(yxcwValue);  
602 - rightBottom = "+ dYXCW ";  
603 - } else if (yxcwType === "7004") {  
604 - rightBottomValue = Number(yxcwValue) + boxHeight * 2;  
605 - rightBottom = "+ dYXCW + W * 2";  
606 - } else if (yxcwType === "7005") {  
607 - rightBottomValue = boxHeight * 2;  
608 - rightBottom = "+ W * 2";  
609 - }  
610 - sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);  
611 - } else if (boxType && boxType === "4") {  
612 - // 天地盒  
613 - const zxcw = boxList.find(x => x.sName === "左(下)插位组件");  
614 - const zscw = boxList.find(x => x.sName === "左(上)插位组件");  
615 - const yscw = boxList.find(x => x.sName === "右(上)插位组件");  
616 - const yxcw = boxList.find(x => x.sName === "右(下)插位组件");  
617 - const zxcwType = zxcw?.type;  
618 - const zxcwValue = zxcw?.value;  
619 - const zscwType = zscw?.type;  
620 - const zscwValue = zscw?.value;  
621 - const yscwType = yscw?.type;  
622 - const yscwValue = yscw?.value;  
623 - const yxcwType = yxcw?.type;  
624 - const yxcwValue = yxcw?.value;  
625 - let leftValue = "";  
626 - let rightValue = "";  
627 - let topValue = "";  
628 - let bottomValue = "";  
629 - if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {  
630 - // leftValue = leftValue + Number(zxcwValue) + boxHeight * 2;  
631 - leftValue = "dZXCW + D * 2 +";  
632 - } else if (zxcwType === "4002" || zxcwType === "4003") {  
633 - leftValue = "dZXCW + D +";  
634 - } else if (zxcwType === "4004") {  
635 - leftValue = "dZXCW + D * 3 +";  
636 - } else if (zxcwType === "4005") {  
637 - leftValue = "D * 3 +";  
638 - }  
639 - if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {  
640 - rightValue = "+ dYSCW + D * 2";  
641 - } else if (yscwType === "6002" || yscwType === "6003") {  
642 - rightValue = "+ dYSCW + D";  
643 - } else if (yscwType === "6004") {  
644 - rightValue = "+ dYSCW + D * 3";  
645 - } else if (yscwType === "6005") {  
646 - rightValue = " + D * 3";  
647 - }  
648 - if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {  
649 - topValue = "dZSCW + D * 2 +";  
650 - } else if (zscwType === "3002" || zscwType === "3003") {  
651 - topValue = "dZSCW + D +";  
652 - } else if (zscwType === "3004") {  
653 - topValue = "dZSCW + D * 3 +";  
654 - } else if (zscwType === "3005") {  
655 - topValue = "D * 3+";  
656 - }  
657 - if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {  
658 - bottomValue = "+ dYXCW + D * 2";  
659 - } else if (yxcwType === "7002" || yxcwType === "7003") {  
660 - bottomValue = "+ dYXCW + D ";  
661 - } else if (yxcwType === "7004") {  
662 - bottomValue = "+ dYXCW + D * 3";  
663 - } else if (yxcwType === "7005") {  
664 - bottomValue = "+ D * 3";  
665 - }  
666 - // viewBoxWidth = Number(boxLength) + leftValue + rightValue;  
667 - // viewBoxHeight = Number(boxWidth) + topValue + bottomValue;  
668 - sLengthFormula = leftValue + "L" + rightValue;  
669 - sWidthFormula = topValue + "W" + bottomValue;  
670 - } else if (boxType && boxType === "5") {  
671 - // 飞机盒  
672 - const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;  
673 - const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;  
674 - sLengthFormula = (ztbw ? "dZTBW+ " : "") + "D * 2 + W * 2" + (ytbw ? " +dYTBW" : "");  
675 - if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {  
676 - leftBottomValue = Number(zxcwValue) + boxHeight;  
677 - leftBottom = " + dZXCW + D";  
678 - } else if (zxcwType === "4002" || zxcwType === "4003") {  
679 - leftBottomValue = Number(zxcwValue);  
680 - leftBottom = " + dZXCW";  
681 - } else if (zxcwType === "4004") {  
682 - leftBottomValue = Number(zxcwValue) + boxHeight * 2;  
683 - leftBottom = " + dZXCW + D * 2";  
684 - } else if (zxcwType === "4005") {  
685 - leftBottomValue = boxHeight * 2;  
686 - leftBottom = "+ D * 2";  
687 - }  
688 - if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {  
689 - rightTopValue = Number(yscwValue) + boxHeight;  
690 - rightTop = "dYSCW + D + ";  
691 - } else if (yscwType === "6002" || yscwType === "6003") {  
692 - rightTopValue = Number(yscwValue);  
693 - rightTop = "dYSCW + ";  
694 - } else if (yscwType === "6004") {  
695 - rightTopValue = Number(yscwValue) + boxHeight * 2;  
696 - rightTop = "dYSCW + D * 2+ ";  
697 - } else if (yscwType === "6005") {  
698 - rightTopValue = boxHeight * 2;  
699 - rightTop = "D * 2+ ";  
700 - }  
701 - if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {  
702 - leftTopValue = Number(zscwValue) + boxHeight;  
703 - leftTop = "dZSCW + D +";  
704 - } else if (zscwType === "3002" || zscwType === "3003") {  
705 - leftTopValue = Number(zscwValue);  
706 - leftTop = "dZSCW +";  
707 - } else if (zscwType === "3004") {  
708 - leftTopValue = Number(zscwValue) + boxHeight * 2;  
709 - leftTop = "dZSCW + D * 2 +";  
710 - } else if (zscwType === "3005") {  
711 - leftTopValue = boxHeight * 2;  
712 - leftTop = "D * 2 +";  
713 - }  
714 - if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {  
715 - rightBottomValue = Number(yxcwValue) + boxHeight;  
716 - rightBottom = "+ dYXCW + D";  
717 - } else if (yxcwType === "7002" || yxcwType === "7003") {  
718 - rightBottomValue = Number(yxcwValue);  
719 - rightBottom = "+ dYXCW ";  
720 - } else if (yxcwType === "7004") {  
721 - rightBottomValue = Number(yxcwValue) + boxHeight * 2;  
722 - rightBottom = "+ dYXCW + D * 2";  
723 - } else if (yxcwType === "7005") {  
724 - rightBottomValue = boxHeight * 2;  
725 - rightBottom = "+ D * 2";  
726 - }  
727 - sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "L" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);  
728 - }  
729 -  
730 - // 存储盒身数据 主表  
731 - const newMasterData = {  
732 - ...masterData,  
733 - sBoxBody: boxList.find(item => item.sName === "盒身")?.value || "",  
734 - dBoxLength: boxList.find(item => item.sName === "盒长")?.value || "",  
735 - dBoxWidth: boxList.find(item => item.sName === "盒宽")?.value || "",  
736 - dBoxHeight: boxList.find(item => item.sName === "盒高")?.value || "",  
737 - sName: boxList.find(item => item.sName === "盒型名称")?.value || "",  
738 - sMakeUpPath: boxList.find(item => item.sName === "盒身")?.selectImage || "",  
739 - sTypes: boxList.find(item => item.sName === "盒身")?.type || "",  
740 - sLengthFormula: masterData.sLengthFormula || sLengthFormula,  
741 - sWidthFormula: masterData.sWidthFormula || sWidthFormula,  
742 - };  
743 189
744 - onOk({ slaveData: newSlaveData, masterData: newMasterData }); // 提交数据  
745 - };  
746 - const findIndexBySname = name => {  
747 - const i = boxList.findIndex(x => x.sName === name);  
748 - return i || 0;  
749 - }; 190 + useEffect(() => {
  191 + if (!boxList.length) return;
  192 + const slicedArray = boxList.slice(9, 12);
  193 + // 处理盒型部分
  194 + setBoxBodyList(slicedArray);
  195 + }, [boxList]);
  196 + console.log(tableDataList, "boxList");
750 197
751 - // 单独处理双层盒型  
752 - if (boxType === "8") {  
753 - console.log(newBoxList, boxList, "topBoxList");  
754 - }  
755 return ( 198 return (
756 - <AntdDraggableModal  
757 - width="1000px"  
758 - height="calc(100vh - 50px)"  
759 - title={title}  
760 - visible={boxVisible}  
761 - onCancel={onCancel}  
762 - okText="创建"  
763 - onOk={submit}  
764 - bodyStyle={{  
765 - height: "calc(95vh - 105px)",  
766 - overflowY: "auto",  
767 - display: "flex",  
768 - flexDirection: "column",  
769 - }}  
770 - style={{  
771 - top: 50,  
772 - }}  
773 - >  
774 - {/* 盒身信息 */} 199 + <div className={styles.boxBody}>
  200 + <div className={styles.boxTop}>
  201 + {topBoxList.map((topItem, index) => (
  202 + <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
  203 + <div className={styles.boxTitle}>{topItem.sName}</div>
  204 + {topItem?.selectImage ? (
  205 + <img
  206 + src={topItem?.selectImage}
  207 + alt={topItem.value}
  208 + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
  209 + />
  210 + ) : (
  211 + ""
  212 + )}
  213 +
  214 + <Select
  215 + optionLabelProp="label"
  216 + className="mySelects"
  217 + style={{ width: 180 }}
  218 + defaultValue={options.length ? options[0].value : ""}
  219 + onSelect={(value, option) => handleSelect(value, option, index, 0)}
  220 + onDropdownVisibleChange={async open => {
  221 + if (open) {
  222 + props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions
  223 + }
  224 + }}
  225 + >
  226 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  227 + </Select>
  228 + <div className={styles.boxInput}>
  229 + {/* <div className={styles.text}>参数：</div> */}
  230 + <Input
  231 + value={topItem?.showName}
  232 + onChange={e => handleChangeName(e, index)}
  233 + onFocus={e => handleFocus(e, index)}
  234 + onBlur={e => handleBlur(e, index)}
  235 + readOnly={!topItem?.isEditable}
  236 + className={styles.text}
  237 + />
  238 + <Input
  239 + value={topItem?.value}
  240 + onChange={e => handleChange(e, index)}
  241 + onFocus={e => handleFocus(e, index)}
  242 + onBlur={e => handleBlur(e, index)}
  243 + readOnly={!topItem?.isEditable}
  244 + style={{ width: " 80%" }}
  245 + />
  246 + </div>
  247 + </div>
  248 + ))}
  249 + </div>
  250 + <div className={styles.boxLeft}>
  251 + {leftBoxList.map((item, index) => (
  252 + <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
  253 + <div className={styles.boxTitle}>{titleList[index + 3]}</div>
775 254
776 - <div className={styles.boxBody} key={boxKey}>  
777 - <div className={styles.boxTop}>  
778 - {topBoxList.map((topItem, index) => (  
779 - <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>  
780 - <div className={styles.boxTitle}>{topItem.sName}</div>  
781 - {topItem?.selectImage ? ( 255 + <Select
  256 + optionLabelProp="label"
  257 + className="mySelects"
  258 + style={{ width: 180 }}
  259 + defaultValue={options.length ? options[0].value : ""}
  260 + onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
  261 + onDropdownVisibleChange={async open => {
  262 + if (open) {
  263 + props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
  264 + }
  265 + }}
  266 + >
  267 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  268 + </Select>
  269 + <div className={styles.boxInput}>
  270 + {item?.selectImage ? (
782 <img 271 <img
783 - src={topItem?.selectImage}  
784 - alt={topItem.value}  
785 - style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }} 272 + src={item?.selectImage}
  273 + alt={item.value}
  274 + style={{
  275 + width: 40,
  276 + height: 30,
  277 + marginRight: 8,
  278 + position: "absolute",
  279 + left: 20,
  280 + top: -35,
  281 + zIndex: 10,
  282 + }}
786 /> 283 />
787 ) : ( 284 ) : (
788 "" 285 ""
789 )} 286 )}
790 -  
791 - <Select  
792 - optionLabelProp="label"  
793 - className="mySelects"  
794 - style={{ width: 180 }}  
795 - defaultValue={options.length ? options[0].value : ""}  
796 - onSelect={(value, option) => handleSelect(value, option, index, 0)}  
797 - onDropdownVisibleChange={async open => {  
798 - if (open) {  
799 - props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions  
800 - }  
801 - }}  
802 - >  
803 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
804 - </Select>  
805 - <div className={styles.boxInput}>  
806 - {/* <div className={styles.text}>参数：</div> */}  
807 - <Input  
808 - value={topItem?.showName}  
809 - onChange={e => handleChangeName(e, index)}  
810 - onFocus={e => handleFocus(e, index)}  
811 - onBlur={e => handleBlur(e, index)}  
812 - readOnly={!topItem?.isEditable}  
813 - className={styles.text}  
814 - />  
815 - <Input  
816 - value={topItem?.value}  
817 - onChange={e => handleChange(e, index)}  
818 - onFocus={e => handleFocus(e, index)}  
819 - onBlur={e => handleBlur(e, index)}  
820 - readOnly={!topItem?.isEditable}  
821 - style={{ width: " 80%" }}  
822 - />  
823 - </div> 287 + <Input
  288 + value={item?.showName}
  289 + onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
  290 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  291 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  292 + readOnly={!item?.isEditable}
  293 + className={styles.text}
  294 + />
  295 + <Input
  296 + value={item?.value}
  297 + onChange={e => handleChange(e, findIndexBySname(item.sName))}
  298 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  299 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  300 + readOnly={!item?.isEditable}
  301 + style={{ width: " 80%" }}
  302 + />
824 </div> 303 </div>
825 - ))}  
826 - </div>  
827 - <div className={styles.boxLeft}>  
828 - {leftBoxList.map((item, index) => (  
829 - <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>  
830 - <div className={styles.boxTitle}>{titleList[index + 3]}</div> 304 + </div>
  305 + ))}
  306 + </div>
  307 + <div className={styles.boxRight}>
  308 + {rightBoxList.map((item, index) => (
  309 + <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
  310 + <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>
831 311
832 - <Select  
833 - optionLabelProp="label"  
834 - className="mySelects"  
835 - style={{ width: 180 }}  
836 - defaultValue={options.length ? options[0].value : ""}  
837 - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}  
838 - onDropdownVisibleChange={async open => {  
839 - if (open) {  
840 - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions  
841 - }  
842 - }}  
843 - >  
844 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
845 - </Select>  
846 - <div className={styles.boxInput}>  
847 - {item?.selectImage ? (  
848 - <img  
849 - src={item?.selectImage}  
850 - alt={item.value}  
851 - style={{  
852 - width: 40,  
853 - height: 30,  
854 - marginRight: 8,  
855 - position: "absolute",  
856 - left: 20,  
857 - top: -35,  
858 - zIndex: 10,  
859 - }}  
860 - />  
861 - ) : (  
862 - ""  
863 - )}  
864 - <Input  
865 - value={item?.showName}  
866 - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}  
867 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
868 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
869 - readOnly={!item?.isEditable}  
870 - className={styles.text}  
871 - />  
872 - <Input  
873 - value={item?.value}  
874 - onChange={e => handleChange(e, findIndexBySname(item.sName))}  
875 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
876 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
877 - readOnly={!item?.isEditable}  
878 - style={{ width: " 80%" }} 312 + <Select
  313 + optionLabelProp="label"
  314 + className="mySelects"
  315 + style={{ width: 180 }}
  316 + defaultValue={options.length ? options[0].value : ""}
  317 + onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
  318 + onDropdownVisibleChange={async open => {
  319 + if (open) {
  320 + props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
  321 + }
  322 + }}
  323 + >
  324 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  325 + </Select>
  326 + <div className={styles.boxInput}>
  327 + {item?.selectImage ? (
  328 + <img
  329 + src={item?.selectImage}
  330 + alt={item.value}
  331 + style={{
  332 + width: 40,
  333 + height: 30,
  334 + marginRight: 8,
  335 + position: "absolute",
  336 + left: 20,
  337 + top: -35,
  338 + zIndex: 10,
  339 + }}
879 /> 340 />
880 - </div>  
881 - </div>  
882 - ))}  
883 - </div>  
884 - <div className={styles.boxRight}>  
885 - {rightBoxList.map((item, index) => (  
886 - <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>  
887 - <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>  
888 -  
889 - <Select  
890 - optionLabelProp="label"  
891 - className="mySelects"  
892 - style={{ width: 180 }}  
893 - defaultValue={options.length ? options[0].value : ""}  
894 - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}  
895 - onDropdownVisibleChange={async open => {  
896 - if (open) {  
897 - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions  
898 - }  
899 - }}  
900 - >  
901 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
902 - </Select>  
903 - <div className={styles.boxInput}>  
904 - {item?.selectImage ? (  
905 - <img  
906 - src={item?.selectImage}  
907 - alt={item.value}  
908 - style={{  
909 - width: 40,  
910 - height: 30,  
911 - marginRight: 8,  
912 - position: "absolute",  
913 - left: 20,  
914 - top: -35,  
915 - zIndex: 10,  
916 - }}  
917 - />  
918 - ) : (  
919 - ""  
920 - )} 341 + ) : (
  342 + ""
  343 + )}
921 344
922 - <Input  
923 - value={item?.showName}  
924 - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}  
925 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
926 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
927 - readOnly={!item?.isEditable}  
928 - className={styles.text}  
929 - />  
930 - <Input  
931 - value={item?.value}  
932 - onChange={e => handleChange(e, findIndexBySname(item.sName))}  
933 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
934 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
935 - readOnly={!item?.isEditable}  
936 - style={{ width: " 80%" }}  
937 - />  
938 - </div> 345 + <Input
  346 + value={item?.showName}
  347 + onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
  348 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  349 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  350 + readOnly={!item?.isEditable}
  351 + className={styles.text}
  352 + />
  353 + <Input
  354 + value={item?.value}
  355 + onChange={e => handleChange(e, findIndexBySname(item.sName))}
  356 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  357 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  358 + readOnly={!item?.isEditable}
  359 + style={{ width: " 80%" }}
  360 + />
939 </div> 361 </div>
940 - ))}  
941 - </div>  
942 - <div className={styles.boxBottom}>  
943 - <div className={styles.svgBox}>  
944 - <SvgBox {...svgBoxProps} />  
945 </div> 362 </div>
  363 + ))}
  364 + </div>
  365 + <div className={styles.boxBottom}>
  366 + <div className={styles.svgBox}>
  367 + <SvgBox {...svgBoxProps} />
  368 + </div>
  369 + <div className={styles.content}>
946 <div className={styles.content}> 370 <div className={styles.content}>
947 - {tableColum && tableColum.length  
948 - ? tableColum.map((item, index) => {  
949 - const uniqueIndex = index + 9;  
950 - return (  
951 - <div key={uniqueIndex} className={styles.boxFlex}>  
952 - <div className={styles.boxInput}>  
953 - <div className={styles.text} style={{ width: "120px" }}>  
954 - {item.showName}  
955 - </div>  
956 - <Input  
957 - value={boxList[uniqueIndex]?.value}  
958 - onChange={e => handleChange(e, uniqueIndex)}  
959 - onFocus={e => handleFocus(e, uniqueIndex)}  
960 - onBlur={e => handleBlur(e, uniqueIndex)}  
961 - readOnly={!boxList[uniqueIndex]?.isEditable}  
962 - style={{ width: " 80%" }}  
963 - />  
964 - </div>  
965 - </div>  
966 - );  
967 - })  
968 - : ""}  
969 {boxBodyList && boxBodyList.length 371 {boxBodyList && boxBodyList.length
970 ? boxBodyList.map((item, index) => { 372 ? boxBodyList.map((item, index) => {
971 - const uniqueIndex = index + 9 + tableColum.length;  
972 - 373 + const uniqueIndex = index + 9;
973 return ( 374 return (
974 <div key={uniqueIndex} className={styles.boxFlex}> 375 <div key={uniqueIndex} className={styles.boxFlex}>
975 <div className={styles.boxInput}> 376 <div className={styles.boxInput}>
@@ -1005,32 +406,10 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -1005,32 +406,10 @@ const BoxDesignCompontent = baseProps =&gt; {
1005 ); 406 );
1006 }) 407 })
1007 : ""} 408 : ""}
1008 - <div className={styles.boxFlexs}>  
1009 - {tableDataList && tableDataList.length  
1010 - ? tableDataList.map((item, index) => {  
1011 - const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;  
1012 -  
1013 - return (  
1014 - <div key={uniqueIndex} className={styles.boxInputs}>  
1015 - <div className={styles.text}>{item.sName}</div>  
1016 - <Input  
1017 - value={boxList[uniqueIndex]?.value}  
1018 - onChange={e => handleChange(e, uniqueIndex)}  
1019 - onFocus={e => handleFocus(e, uniqueIndex)}  
1020 - onBlur={e => handleBlur(e, uniqueIndex)}  
1021 - readOnly={!boxList[uniqueIndex]?.isEditable}  
1022 - style={{ width: " 60%" }}  
1023 - />  
1024 - </div>  
1025 - );  
1026 - })  
1027 - : ""}  
1028 - </div>  
1029 </div> 409 </div>
1030 </div> 410 </div>
1031 </div> 411 </div>
1032 - </AntdDraggableModal> 412 + </div>
1033 ); 413 );
1034 }; 414 };
1035 -  
1036 -export default CommonBase(BoxDesignCompontent); 415 +export default DoubleLayerBox;
src/components/Common/BoxDesignCompontent/index.js
  View file @887c32f
@@ -83,7 +83,9 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -83,7 +83,9 @@ const BoxDesignCompontent = baseProps =&gt; {
83 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息 83 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
84 const [topDoubleBoxList, setTopDoubleBoxList] = useState([]); // 盒身信息 84 const [topDoubleBoxList, setTopDoubleBoxList] = useState([]); // 盒身信息
85 const [leftBoxList, setLeftBoxList] = useState([]); // 左边 85 const [leftBoxList, setLeftBoxList] = useState([]); // 左边
  86 + const [leftDoubleBoxList, setLeftDoubleBoxList] = useState([]); // 左边
86 const [rightBoxList, setRightBoxList] = useState([]); 87 const [rightBoxList, setRightBoxList] = useState([]);
  88 + const [rightDoubleBoxList, setRightDoubleBoxList] = useState([]);
87 const [boxKey, setBoxKey] = useState(new Date().getTime()); 89 const [boxKey, setBoxKey] = useState(new Date().getTime());
88 const [doubleLayerList, setDoubleLayerList] = useState([]); 90 const [doubleLayerList, setDoubleLayerList] = useState([]);
89 if (!boxVisible) return ""; 91 if (!boxVisible) return "";
@@ -174,7 +176,17 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -174,7 +176,17 @@ const BoxDesignCompontent = baseProps =&gt; {
174 { name: "右贴边位", value: "dYTBW" }, 176 { name: "右贴边位", value: "dYTBW" },
175 { name: "右(下)插位组件", value: "dYXCW" }, 177 { name: "右(下)插位组件", value: "dYXCW" },
176 ]; 178 ];
177 - 179 + const doubleTitlieList = [
  180 + "左上插位组件",
  181 + "上插位组件",
  182 + "右上插位组件",
  183 + "左偏移",
  184 + "左插位组件",
  185 + "左下插位组件",
  186 + "右偏移",
  187 + "右插位组件",
  188 + "右下插位组件",
  189 + ];
178 const newBoxList = []; 190 const newBoxList = [];
179 191
180 // const boxs = titleList.length + tableData.length; 192 // const boxs = titleList.length + tableData.length;
@@ -188,7 +200,7 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -188,7 +200,7 @@ const BoxDesignCompontent = baseProps =&gt; {
188 titleList.push(item.showName); 200 titleList.push(item.showName);
189 }); 201 });
190 // 这里处理双盒的初始数据 202 // 这里处理双盒的初始数据
191 - titleList.push(...["首盒长", "首盒宽", "次盒长", "次盒宽"]); 203 + titleList.push(...["首盒长", "首盒宽", "次盒长", "次盒宽"], ...doubleTitlieList);
192 // 盒身信息 204 // 盒身信息
193 titleList.forEach((item, index) => { 205 titleList.forEach((item, index) => {
194 newBoxList.push({ 206 newBoxList.push({
@@ -317,12 +329,10 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -317,12 +329,10 @@ const BoxDesignCompontent = baseProps =&gt; {
317 useEffect(() => { 329 useEffect(() => {
318 if (!boxType) return; 330 if (!boxType) return;
319 if (boxType === "8") { 331 if (boxType === "8") {
320 - const doubleList = ["首盒长", "首盒宽", "次盒长", "次盒宽"];  
321 - let box = [];  
322 - doubleList.forEach(item => {  
323 - box.push({ 332 + const createBox = names =>
  333 + names.map(sName => ({
324 value: "", 334 value: "",
325 - sName: item, 335 + sName,
326 isEditable: true, 336 isEditable: true,
327 isSelect: false, 337 isSelect: false,
328 selectValue: null, 338 selectValue: null,
@@ -330,11 +340,13 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -330,11 +340,13 @@ const BoxDesignCompontent = baseProps =&gt; {
330 selectImage: null, 340 selectImage: null,
331 type: null, 341 type: null,
332 show: true, 342 show: true,
333 - showName: item, // 参数名称 343 + showName: sName,
334 sAssignFormula: null, 344 sAssignFormula: null,
335 - });  
336 - });  
337 - setDoubleLayerList(box); 345 + }));
  346 + setDoubleLayerList(createBox(["首盒长", "首盒宽", "次盒长", "次盒宽"]));
  347 + setTopDoubleBoxList(createBox(["左上插位组件", "上插位组件", "右上插位组件"]));
  348 + setLeftDoubleBoxList(createBox(["左偏移", "左插位组件", "左下插位组件"]));
  349 + setRightDoubleBoxList(createBox(["右偏移", "右插位组件", "右下插位组件"]));
338 } else { 350 } else {
339 } 351 }
340 }, [boxType]); 352 }, [boxType]);
@@ -832,217 +844,334 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -832,217 +844,334 @@ const BoxDesignCompontent = baseProps =&gt; {
832 844
833 <div className={styles.boxBody} key={boxKey}> 845 <div className={styles.boxBody} key={boxKey}>
834 <div className={styles.boxTop}> 846 <div className={styles.boxTop}>
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 + {boxType !== "8" &&
  848 + topBoxList.map((topItem, index) => (
  849 + <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
  850 + <div className={styles.boxTitle}>{topItem.sName}</div>
  851 + {topItem?.selectImage ? (
  852 + <img
  853 + src={topItem?.selectImage}
  854 + alt={topItem.value}
  855 + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
  856 + />
  857 + ) : (
  858 + ""
  859 + )}
847 860
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 - /> 861 + <Select
  862 + optionLabelProp="label"
  863 + className="mySelects"
  864 + style={{ width: 180 }}
  865 + defaultValue={options.length ? options[0].value : ""}
  866 + onSelect={(value, option) => handleSelect(value, option, index, 0)}
  867 + onDropdownVisibleChange={async open => {
  868 + if (open) {
  869 + props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions
  870 + }
  871 + }}
  872 + >
  873 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  874 + </Select>
  875 + <div className={styles.boxInput}>
  876 + {/* <div className={styles.text}>参数：</div> */}
  877 + <Input
  878 + value={topItem?.showName}
  879 + onChange={e => handleChangeName(e, index)}
  880 + onFocus={e => handleFocus(e, index)}
  881 + onBlur={e => handleBlur(e, index)}
  882 + readOnly={!topItem?.isEditable}
  883 + className={styles.text}
  884 + />
  885 + <Input
  886 + value={topItem?.value}
  887 + onChange={e => handleChange(e, index)}
  888 + onFocus={e => handleFocus(e, index)}
  889 + onBlur={e => handleBlur(e, index)}
  890 + readOnly={!topItem?.isEditable}
  891 + style={{ width: " 80%" }}
  892 + />
  893 + </div>
880 </div> 894 </div>
881 - </div>  
882 - ))}  
883 - {boxType === '8' && topDoubleBoxList.map((topItem, index) => (  
884 - <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>  
885 - <div className={styles.boxTitle}>{topItem.sName}</div>  
886 - {topItem?.selectImage ? (  
887 - <img  
888 - src={topItem?.selectImage}  
889 - alt={topItem.value}  
890 - style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}  
891 - />  
892 - ) : (  
893 - ""  
894 - )} 895 + ))}
  896 + {boxType === "8" &&
  897 + topDoubleBoxList.map((topItem, index) => (
  898 + <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
  899 + <div className={styles.boxTitle}>{topItem.sName}</div>
  900 + {topItem?.selectImage ? (
  901 + <img
  902 + src={topItem?.selectImage}
  903 + alt={topItem.value}
  904 + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
  905 + />
  906 + ) : (
  907 + ""
  908 + )}
895 909
896 - <Select  
897 - optionLabelProp="label"  
898 - className="mySelects"  
899 - style={{ width: 180 }}  
900 - defaultValue={options.length ? options[0].value : ""}  
901 - onSelect={(value, option) => handleSelect(value, option, index, 0)}  
902 - onDropdownVisibleChange={async open => {  
903 - if (open) {  
904 - props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions  
905 - }  
906 - }}  
907 - >  
908 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
909 - </Select>  
910 - <div className={styles.boxInput}>  
911 - {/* <div className={styles.text}>参数：</div> */}  
912 - <Input  
913 - value={topItem?.showName}  
914 - onChange={e => handleChangeName(e, index)}  
915 - onFocus={e => handleFocus(e, index)}  
916 - onBlur={e => handleBlur(e, index)}  
917 - readOnly={!topItem?.isEditable}  
918 - className={styles.text}  
919 - />  
920 - <Input  
921 - value={topItem?.value}  
922 - onChange={e => handleChange(e, index)}  
923 - onFocus={e => handleFocus(e, index)}  
924 - onBlur={e => handleBlur(e, index)}  
925 - readOnly={!topItem?.isEditable}  
926 - style={{ width: " 80%" }}  
927 - /> 910 + <Select
  911 + optionLabelProp="label"
  912 + className="mySelects"
  913 + style={{ width: 180 }}
  914 + defaultValue={options.length ? options[0].value : ""}
  915 + onSelect={(value, option) => handleSelect(value, option, index, 0)}
  916 + onDropdownVisibleChange={async open => {
  917 + if (open) {
  918 + props.getSqlOptions(4); // 在下拉菜单打开时调用 getSqlOptions
  919 + }
  920 + }}
  921 + >
  922 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  923 + </Select>
  924 + <div className={styles.boxInput}>
  925 + {/* <div className={styles.text}>参数：</div> */}
  926 + <Input
  927 + value={topItem?.showName}
  928 + onChange={e => handleChangeName(e, index)}
  929 + onFocus={e => handleFocus(e, index)}
  930 + onBlur={e => handleBlur(e, index)}
  931 + readOnly={!topItem?.isEditable}
  932 + className={styles.text}
  933 + />
  934 + <Input
  935 + value={topItem?.value}
  936 + onChange={e => handleChange(e, index)}
  937 + onFocus={e => handleFocus(e, index)}
  938 + onBlur={e => handleBlur(e, index)}
  939 + readOnly={!topItem?.isEditable}
  940 + style={{ width: " 80%" }}
  941 + />
  942 + </div>
928 </div> 943 </div>
929 - </div>  
930 - ))} 944 + ))}
931 </div> 945 </div>
932 <div className={styles.boxLeft}> 946 <div className={styles.boxLeft}>
933 - {leftBoxList.map((item, index) => (  
934 - <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>  
935 - <div className={styles.boxTitle}>{titleList[index + 3]}</div> 947 + {boxType !== "8" &&
  948 + leftBoxList.map((item, index) => (
  949 + <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
  950 + <div className={styles.boxTitle}>{titleList[index + 3]}</div>
936 951
937 - <Select  
938 - optionLabelProp="label"  
939 - className="mySelects"  
940 - style={{ width: 180 }}  
941 - defaultValue={options.length ? options[0].value : ""}  
942 - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}  
943 - onDropdownVisibleChange={async open => {  
944 - if (open) {  
945 - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions  
946 - }  
947 - }}  
948 - >  
949 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
950 - </Select>  
951 - <div className={styles.boxInput}>  
952 - {item?.selectImage ? (  
953 - <img  
954 - src={item?.selectImage}  
955 - alt={item.value}  
956 - style={{  
957 - width: 40,  
958 - height: 30,  
959 - marginRight: 8,  
960 - position: "absolute",  
961 - left: 20,  
962 - top: -35,  
963 - zIndex: 10,  
964 - }} 952 + <Select
  953 + optionLabelProp="label"
  954 + className="mySelects"
  955 + style={{ width: 180 }}
  956 + defaultValue={options.length ? options[0].value : ""}
  957 + onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
  958 + onDropdownVisibleChange={async open => {
  959 + if (open) {
  960 + props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
  961 + }
  962 + }}
  963 + >
  964 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  965 + </Select>
  966 + <div className={styles.boxInput}>
  967 + {item?.selectImage ? (
  968 + <img
  969 + src={item?.selectImage}
  970 + alt={item.value}
  971 + style={{
  972 + width: 40,
  973 + height: 30,
  974 + marginRight: 8,
  975 + position: "absolute",
  976 + left: 20,
  977 + top: -35,
  978 + zIndex: 10,
  979 + }}
  980 + />
  981 + ) : (
  982 + ""
  983 + )}
  984 + <Input
  985 + value={item?.showName}
  986 + onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
  987 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  988 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  989 + readOnly={!item?.isEditable}
  990 + className={styles.text}
965 /> 991 />
966 - ) : (  
967 - ""  
968 - )}  
969 - <Input  
970 - value={item?.showName}  
971 - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}  
972 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
973 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
974 - readOnly={!item?.isEditable}  
975 - className={styles.text}  
976 - />  
977 - <Input  
978 - value={item?.value}  
979 - onChange={e => handleChange(e, findIndexBySname(item.sName))}  
980 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
981 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
982 - readOnly={!item?.isEditable}  
983 - style={{ width: " 80%" }}  
984 - /> 992 + <Input
  993 + value={item?.value}
  994 + onChange={e => handleChange(e, findIndexBySname(item.sName))}
  995 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  996 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  997 + readOnly={!item?.isEditable}
  998 + style={{ width: " 80%" }}
  999 + />
  1000 + </div>
985 </div> 1001 </div>
986 - </div>  
987 - ))} 1002 + ))}
  1003 + {boxType === "8" &&
  1004 + leftDoubleBoxList.map((item, index) => (
  1005 + <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
  1006 + <div className={styles.boxTitle}>{doubleTitlieList[index + 3]}</div>
  1007 +
  1008 + <Select
  1009 + optionLabelProp="label"
  1010 + className="mySelects"
  1011 + style={{ width: 180 }}
  1012 + defaultValue={options.length ? options[0].value : ""}
  1013 + onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
  1014 + onDropdownVisibleChange={async open => {
  1015 + if (open) {
  1016 + props.getSqlOptions(4); // 在下拉菜单打开时调用 getSqlOptions
  1017 + }
  1018 + }}
  1019 + >
  1020 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  1021 + </Select>
  1022 + <div className={styles.boxInput}>
  1023 + {item?.selectImage ? (
  1024 + <img
  1025 + src={item?.selectImage}
  1026 + alt={item.value}
  1027 + style={{
  1028 + width: 40,
  1029 + height: 30,
  1030 + marginRight: 8,
  1031 + position: "absolute",
  1032 + left: 20,
  1033 + top: -35,
  1034 + zIndex: 10,
  1035 + }}
  1036 + />
  1037 + ) : (
  1038 + ""
  1039 + )}
  1040 + <Input
  1041 + value={item?.showName}
  1042 + onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
  1043 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  1044 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  1045 + readOnly={!item?.isEditable}
  1046 + className={styles.text}
  1047 + />
  1048 + <Input
  1049 + value={item?.value}
  1050 + onChange={e => handleChange(e, findIndexBySname(item.sName))}
  1051 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  1052 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  1053 + readOnly={!item?.isEditable}
  1054 + style={{ width: " 80%" }}
  1055 + />
  1056 + </div>
  1057 + </div>
  1058 + ))}
988 </div> 1059 </div>
989 <div className={styles.boxRight}> 1060 <div className={styles.boxRight}>
990 - {rightBoxList.map((item, index) => (  
991 - <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>  
992 - <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div> 1061 + {boxType !== "8" &&
  1062 + rightBoxList.map((item, index) => (
  1063 + <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
  1064 + <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>
993 1065
994 - <Select  
995 - optionLabelProp="label"  
996 - className="mySelects"  
997 - style={{ width: 180 }}  
998 - defaultValue={options.length ? options[0].value : ""}  
999 - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}  
1000 - onDropdownVisibleChange={async open => {  
1001 - if (open) {  
1002 - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions  
1003 - }  
1004 - }}  
1005 - >  
1006 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
1007 - </Select>  
1008 - <div className={styles.boxInput}>  
1009 - {item?.selectImage ? (  
1010 - <img  
1011 - src={item?.selectImage}  
1012 - alt={item.value}  
1013 - style={{  
1014 - width: 40,  
1015 - height: 30,  
1016 - marginRight: 8,  
1017 - position: "absolute",  
1018 - left: 20,  
1019 - top: -35,  
1020 - zIndex: 10,  
1021 - }} 1066 + <Select
  1067 + optionLabelProp="label"
  1068 + className="mySelects"
  1069 + style={{ width: 180 }}
  1070 + defaultValue={options.length ? options[0].value : ""}
  1071 + onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
  1072 + onDropdownVisibleChange={async open => {
  1073 + if (open) {
  1074 + props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
  1075 + }
  1076 + }}
  1077 + >
  1078 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  1079 + </Select>
  1080 + <div className={styles.boxInput}>
  1081 + {item?.selectImage ? (
  1082 + <img
  1083 + src={item?.selectImage}
  1084 + alt={item.value}
  1085 + style={{
  1086 + width: 40,
  1087 + height: 30,
  1088 + marginRight: 8,
  1089 + position: "absolute",
  1090 + left: 20,
  1091 + top: -35,
  1092 + zIndex: 10,
  1093 + }}
  1094 + />
  1095 + ) : (
  1096 + ""
  1097 + )}
  1098 +
  1099 + <Input
  1100 + value={item?.showName}
  1101 + onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
  1102 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  1103 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  1104 + readOnly={!item?.isEditable}
  1105 + className={styles.text}
1022 /> 1106 />
1023 - ) : (  
1024 - ""  
1025 - )} 1107 + <Input
  1108 + value={item?.value}
  1109 + onChange={e => handleChange(e, findIndexBySname(item.sName))}
  1110 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  1111 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  1112 + readOnly={!item?.isEditable}
  1113 + style={{ width: " 80%" }}
  1114 + />
  1115 + </div>
  1116 + </div>
  1117 + ))}
  1118 + {boxType === "8" &&
  1119 + rightDoubleBoxList.map((item, index) => (
  1120 + <div key={index + 6} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
  1121 + <div className={styles.boxTitle}>{doubleTitlieList[index + 6]}</div>
  1122 +
  1123 + <Select
  1124 + optionLabelProp="label"
  1125 + className="mySelects"
  1126 + style={{ width: 180 }}
  1127 + defaultValue={options.length ? options[0].value : ""}
  1128 + onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
  1129 + onDropdownVisibleChange={async open => {
  1130 + if (open) {
  1131 + props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
  1132 + }
  1133 + }}
  1134 + >
  1135 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  1136 + </Select>
  1137 + <div className={styles.boxInput}>
  1138 + {item?.selectImage ? (
  1139 + <img
  1140 + src={item?.selectImage}
  1141 + alt={item.value}
  1142 + style={{
  1143 + width: 40,
  1144 + height: 30,
  1145 + marginRight: 8,
  1146 + position: "absolute",
  1147 + left: 20,
  1148 + top: -35,
  1149 + zIndex: 10,
  1150 + }}
  1151 + />
  1152 + ) : (
  1153 + ""
  1154 + )}
1026 1155
1027 - <Input  
1028 - value={item?.showName}  
1029 - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}  
1030 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
1031 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
1032 - readOnly={!item?.isEditable}  
1033 - className={styles.text}  
1034 - />  
1035 - <Input  
1036 - value={item?.value}  
1037 - onChange={e => handleChange(e, findIndexBySname(item.sName))}  
1038 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
1039 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
1040 - readOnly={!item?.isEditable}  
1041 - style={{ width: " 80%" }}  
1042 - /> 1156 + <Input
  1157 + value={item?.showName}
  1158 + onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
  1159 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  1160 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  1161 + readOnly={!item?.isEditable}
  1162 + className={styles.text}
  1163 + />
  1164 + <Input
  1165 + value={item?.value}
  1166 + onChange={e => handleChange(e, findIndexBySname(item.sName))}
  1167 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  1168 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  1169 + readOnly={!item?.isEditable}
  1170 + style={{ width: " 80%" }}
  1171 + />
  1172 + </div>
1043 </div> 1173 </div>
1044 - </div>  
1045 - ))} 1174 + ))}
1046 </div> 1175 </div>
1047 <div className={styles.boxBottom}> 1176 <div className={styles.boxBottom}>
1048 <div className={styles.svgBox}> 1177 <div className={styles.svgBox}>