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 1 /* eslint-disable */
2 2 import React, { useRef, useState, useEffect } from "react";
  3 +import styles from "../index.less";
  4 +import SvgBox from "../svg";
3 5 import { Select, Button, message, Input, Spin } from "antd-v4";
4 6 import { CompressOutlined, ExpandOutlined } from "@ant-design/icons";
5 7 import * as commonUtils from "@/utils/utils";
... ... @@ -12,69 +14,9 @@ import CommonViewTable from "@/components/Common/CommonViewTable";
12 14 import StaticEditTable from "@/components/Common/CommonTable";
13 15 import jsPreviewPdf from "@js-preview/pdf";
14 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 18 const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData, options = [] } = props;
76 19 const { slaveData = {}, masterData = {} } = props.state;
77   - const { boxVisible } = baseProps;
78 20 const [boxList, setBoxList] = useState([]);
79 21 const [tableColum, setTableColum] = useState([]); // 盒身类型
80 22 const [tableDataList, setTableDataList] = useState([]); // 盒长
... ... @@ -83,82 +25,85 @@ const BoxDesignCompontent = baseProps => {
83 25 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
84 26 const [leftBoxList, setLeftBoxList] = useState([]); // 左边
85 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 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 86 const titleList1 = [
140   - { name: "上方盒舌", value: "dSFHS" },
141   - { name: "盒底组件", value: "dHDC" },
142   - { name: "下方盒舌", value: "dXFHS" },
143 87 { name: "左(上)插位组件", value: "dZSCW" },
144   - { name: "左贴边位", value: "dZTBW" },
145   - { name: "左(下)插位组件", value: "dZXCW" },
  88 + { name: "上插位组件", value: "dSCW" },
146 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 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 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 108 titleList.forEach((item, index) => {
164 109 newBoxList.push({
... ... @@ -175,7 +120,6 @@ const BoxDesignCompontent = baseProps => {
175 120 sAssignFormula: null,
176 121 });
177 122 });
178   - // 部件信息
179 123 if (slaveData && slaveData.length) {
180 124 slaveData.forEach((item, index) => {
181 125 const i = titleList1.findIndex(i => {
... ... @@ -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 158 const arraysAreEqual = (arr1, arr2) => {
223 159 if (arr1.length !== arr2.length) return false;
224 160 return arr1.every((item, index) => item.sName === arr2[index].sName);
225 161 };
  162 + // 有数据的时候 盒型设计需要赋值
226 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 168 const getImage = fileName => {
339 169 // const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&sModelsId=100&token=${props.token}`;
340 170 const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}`;
341 171 return imageUrl;
342 172 };
343   - console.log(boxList, "boxList");
344   -
345 173 // 下来框
346 174 const renderOptionWithImage = option => {
347 175 return (
... ... @@ -358,618 +186,191 @@ const BoxDesignCompontent = baseProps => {
358 186 boxList,
359 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 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 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 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 361 </div>
940   - ))}
941   - </div>
942   - <div className={styles.boxBottom}>
943   - <div className={styles.svgBox}>
944   - <SvgBox {...svgBoxProps} />
945 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 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 371 {boxBodyList && boxBodyList.length
970 372 ? boxBodyList.map((item, index) => {
971   - const uniqueIndex = index + 9 + tableColum.length;
972   -
  373 + const uniqueIndex = index + 9;
973 374 return (
974 375 <div key={uniqueIndex} className={styles.boxFlex}>
975 376 <div className={styles.boxInput}>
... ... @@ -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 409 </div>
1030 410 </div>
1031 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 83 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
84 84 const [topDoubleBoxList, setTopDoubleBoxList] = useState([]); // 盒身信息
85 85 const [leftBoxList, setLeftBoxList] = useState([]); // 左边
  86 + const [leftDoubleBoxList, setLeftDoubleBoxList] = useState([]); // 左边
86 87 const [rightBoxList, setRightBoxList] = useState([]);
  88 + const [rightDoubleBoxList, setRightDoubleBoxList] = useState([]);
87 89 const [boxKey, setBoxKey] = useState(new Date().getTime());
88 90 const [doubleLayerList, setDoubleLayerList] = useState([]);
89 91 if (!boxVisible) return "";
... ... @@ -174,7 +176,17 @@ const BoxDesignCompontent = baseProps =&gt; {
174 176 { name: "右贴边位", value: "dYTBW" },
175 177 { name: "右(下)插位组件", value: "dYXCW" },
176 178 ];
177   -
  179 + const doubleTitlieList = [
  180 + "左上插位组件",
  181 + "上插位组件",
  182 + "右上插位组件",
  183 + "左偏移",
  184 + "左插位组件",
  185 + "左下插位组件",
  186 + "右偏移",
  187 + "右插位组件",
  188 + "右下插位组件",
  189 + ];
178 190 const newBoxList = [];
179 191  
180 192 // const boxs = titleList.length + tableData.length;
... ... @@ -188,7 +200,7 @@ const BoxDesignCompontent = baseProps =&gt; {
188 200 titleList.push(item.showName);
189 201 });
190 202 // 这里处理双盒的初始数据
191   - titleList.push(...["首盒长", "首盒宽", "次盒长", "次盒宽"]);
  203 + titleList.push(...["首盒长", "首盒宽", "次盒长", "次盒宽"], ...doubleTitlieList);
192 204 // 盒身信息
193 205 titleList.forEach((item, index) => {
194 206 newBoxList.push({
... ... @@ -317,12 +329,10 @@ const BoxDesignCompontent = baseProps =&gt; {
317 329 useEffect(() => {
318 330 if (!boxType) return;
319 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 334 value: "",
325   - sName: item,
  335 + sName,
326 336 isEditable: true,
327 337 isSelect: false,
328 338 selectValue: null,
... ... @@ -330,11 +340,13 @@ const BoxDesignCompontent = baseProps =&gt; {
330 340 selectImage: null,
331 341 type: null,
332 342 show: true,
333   - showName: item, // 参数名称
  343 + showName: sName,
334 344 sAssignFormula: null,
335   - });
336   - });
337   - setDoubleLayerList(box);
  345 + }));
  346 + setDoubleLayerList(createBox(["首盒长", "首盒宽", "次盒长", "次盒宽"]));
  347 + setTopDoubleBoxList(createBox(["左上插位组件", "上插位组件", "右上插位组件"]));
  348 + setLeftDoubleBoxList(createBox(["左偏移", "左插位组件", "左下插位组件"]));
  349 + setRightDoubleBoxList(createBox(["右偏移", "右插位组件", "右下插位组件"]));
338 350 } else {
339 351 }
340 352 }, [boxType]);
... ... @@ -832,217 +844,334 @@ const BoxDesignCompontent = baseProps =&gt; {
832 844  
833 845 <div className={styles.boxBody} key={boxKey}>
834 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 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 943 </div>
929   - </div>
930   - ))}
  944 + ))}
931 945 </div>
932 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 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 1059 </div>
989 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 1173 </div>
1044   - </div>
1045   - ))}
  1174 + ))}
1046 1175 </div>
1047 1176 <div className={styles.boxBottom}>
1048 1177 <div className={styles.svgBox}>
... ...