xlyErp / xlyUmi

Commit a8d427f4e17167d50572dca45952d31046601a38

Authored by 陈鑫涛
1 parent 1d6da65a

双盒盒型设计

Inline Side-by-side
Showing 2 changed files with 1343 additions and 801 deletions
src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js
  View file @a8d427f
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";  
5 import { Select, Button, message, Input, Spin } from "antd-v4"; 3 import { Select, Button, message, Input, Spin } from "antd-v4";
6 import { CompressOutlined, ExpandOutlined } from "@ant-design/icons"; 4 import { CompressOutlined, ExpandOutlined } from "@ant-design/icons";
7 import * as commonUtils from "@/utils/utils"; 5 import * as commonUtils from "@/utils/utils";
@@ -14,8 +12,69 @@ import CommonViewTable from "@/components/Common/CommonViewTable"; @@ -14,8 +12,69 @@ import CommonViewTable from "@/components/Common/CommonViewTable";
14 import StaticEditTable from "@/components/Common/CommonTable"; 12 import StaticEditTable from "@/components/Common/CommonTable";
15 import jsPreviewPdf from "@js-preview/pdf"; 13 import jsPreviewPdf from "@js-preview/pdf";
16 import commonConfig from "@/utils/config"; 14 import commonConfig from "@/utils/config";
17 -const DoubleLayerBox = props => {  
18 - console.log("🚀 ~ DoubleLayerBox:", props); 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);
  75 + const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData, options = [] } = props;
  76 + const { slaveData = {}, masterData = {} } = props.state;
  77 + const { boxVisible } = baseProps;
19 const [boxList, setBoxList] = useState([]); 78 const [boxList, setBoxList] = useState([]);
20 const [tableColum, setTableColum] = useState([]); // 盒身类型 79 const [tableColum, setTableColum] = useState([]); // 盒身类型
21 const [tableDataList, setTableDataList] = useState([]); // 盒长 80 const [tableDataList, setTableDataList] = useState([]); // 盒长
@@ -24,298 +83,954 @@ const DoubleLayerBox = props => { @@ -24,298 +83,954 @@ const DoubleLayerBox = props => {
24 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息 83 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
25 const [leftBoxList, setLeftBoxList] = useState([]); // 左边 84 const [leftBoxList, setLeftBoxList] = useState([]); // 左边
26 const [rightBoxList, setRightBoxList] = useState([]); 85 const [rightBoxList, setRightBoxList] = useState([]);
27 - const [loading, setLoading] = useState(false);  
28 - const { renderOptionWithImage } = props;  
29 - let boxData = {  
30 - value: "",  
31 - sName: "",  
32 - isEditable: true,  
33 - isSelect: false,  
34 - selectValue: null,  
35 - selectLabel: "",  
36 - selectImage: null,  
37 - type: null,  
38 - show: true,  
39 - showName: "", // 参数名称  
40 - sAssignFormula: null,  
41 - code: "",  
42 - };  
43 - const options = props.options;  
44 - const top = [ 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]);
  128 + const titleList = [
  129 + "上方盒舌",
  130 + "盒底组件",
  131 + "下方盒舌",
  132 + "左(上)插位组件",
  133 + "左贴边位",
  134 + "左(下)插位组件",
  135 + "右(上)插位组件",
  136 + "右贴边位",
  137 + "右(下)插位组件",
  138 + ];
  139 + const titleList1 = [
  140 + { name: "上方盒舌", value: "dSFHS" },
  141 + { name: "盒底组件", value: "dHDC" },
  142 + { name: "下方盒舌", value: "dXFHS" },
  143 + { name: "左(上)插位组件", value: "dZSCW" },
45 { name: "左贴边位", value: "dZTBW" }, 144 { name: "左贴边位", value: "dZTBW" },
46 - { name: "上插位组件", value: "dZSCW" }, 145 + { name: "左(下)插位组件", value: "dZXCW" },
  146 + { name: "右(上)插位组件", value: "dYSCW" },
47 { name: "右贴边位", value: "dYTBW" }, 147 { name: "右贴边位", value: "dYTBW" },
  148 + { name: "右(下)插位组件", value: "dYXCW" },
48 ]; 149 ];
49 - setTopBoxList(  
50 - top.map(item => {  
51 - boxData.sName = item.name;  
52 - boxData.showName = item.name;  
53 - boxData.code = item.value;  
54 - return boxData;  
55 - })  
56 - ); 150 + 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 + // 盒身信息
  163 + titleList.forEach((item, index) => {
  164 + newBoxList.push({
  165 + value: "",
  166 + sName: item,
  167 + isEditable: true,
  168 + isSelect: false,
  169 + selectValue: null,
  170 + selectLabel: "",
  171 + selectImage: null,
  172 + type: null,
  173 + show: true,
  174 + showName: item, // 参数名称
  175 + sAssignFormula: null,
  176 + });
  177 + });
  178 + // 部件信息
  179 + if (slaveData && slaveData.length) {
  180 + slaveData.forEach((item, index) => {
  181 + const i = titleList1.findIndex(i => {
  182 + return i.value === item.sCode;
  183 + });
  184 + if (i !== -1) {
  185 + const x = newBoxList.findIndex(z => z.sName === titleList1[i].name);
  186 + newBoxList[x].value = item.iValue;
  187 + newBoxList[x].type = item.sTypes;
  188 + newBoxList[x].showName = item.sName;
  189 + newBoxList[x].selectImage = item.sMakeUpPath;
  190 + newBoxList[x].sName = titleList1[i].name;
  191 + newBoxList[x].sAssignFormula = item.sAssignFormula;
  192 + newBoxList[x].bVisible = item.bVisible;
  193 + }
  194 + });
  195 + }
  196 + // 盒身信息
  197 + if (masterData) {
  198 + newBoxList.forEach((item, index) => {
  199 + if (item.sName === "盒身") {
  200 + newBoxList[index].value = masterData.sBoxBody;
  201 + newBoxList[index].selectImage = masterData.sMakeUpPath;
  202 + newBoxList[index].type = masterData.sTypes;
  203 + } else if (item.sName === "盒长") {
  204 + newBoxList[index].value = masterData.dBoxLength;
  205 + } else if (item.sName === "盒宽") {
  206 + newBoxList[index].value = masterData.dBoxWidth;
  207 + } else if (item.sName === "盒高") {
  208 + newBoxList[index].value = masterData.dBoxHeight;
  209 + } else if (item.sName === "盒型名称") {
  210 + newBoxList[index].value = masterData.sName;
  211 + }
  212 + });
  213 + }
  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) => {
  223 + if (arr1.length !== arr2.length) return false;
  224 + return arr1.every((item, index) => item.sName === arr2[index].sName);
  225 + };
  226 + 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;
  335 + }
  336 + setBoxList(updatedBoxList);
  337 + };
  338 + const getImage = fileName => {
  339 + // 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}`;
  341 + return imageUrl;
  342 + };
  343 + console.log(boxList, "boxList");
  344 +
  345 + // 下来框
  346 + const renderOptionWithImage = option => {
  347 + return (
  348 + <Select.Option key={option.sId} value={option.sCode} label={option.sName} image={getImage(option.sMakeUpPath)}>
  349 + <div style={{ display: "flex", alignItems: "center" }}>
  350 + {option.sMakeUpPath ? <img src={getImage(option.sMakeUpPath)} style={{ width: 24, height: 24, marginRight: 8 }} /> : ""}
  351 + <span>{option.sName}</span>
  352 + </div>
  353 + </Select.Option>
  354 + );
  355 + };
57 const svgBoxProps = { 356 const svgBoxProps = {
58 ...props, 357 ...props,
59 - boxList: [], 358 + boxList,
60 showNew: 0, 359 showNew: 0,
61 }; 360 };
62 - return (  
63 - <div className={styles.boxBody}>  
64 - <div className={styles.boxTop}>  
65 - {topBoxList.map((topItem, index) => (  
66 - <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>  
67 - <div className={styles.boxTitle}>{topItem.sName}</div>  
68 - {topItem?.selectImage ? (  
69 - <img  
70 - src={topItem?.selectImage}  
71 - alt={topItem.value}  
72 - style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}  
73 - />  
74 - ) : (  
75 - ""  
76 - )} 361 + const dobuleProps = {
  362 + ...props,
  363 + renderOptionWithImage,
  364 + };
  365 + // 计算展长展宽
  366 + // 创建盒型
  367 + const submit = () => {
  368 + const newSlaveData = [];
  369 + // 判断是新增还是修改
77 370
78 - <Select  
79 - optionLabelProp="label"  
80 - className="mySelects"  
81 - style={{ width: 180 }}  
82 - defaultValue={options.length ? options[0].value : ""}  
83 - onSelect={(value, option) => handleSelect(value, option, index, 0)}  
84 - onDropdownVisibleChange={async open => {  
85 - if (open) {  
86 - props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions  
87 - }  
88 - }}  
89 - >  
90 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
91 - </Select>  
92 - <div className={styles.boxInput}>  
93 - {/* <div className={styles.text}>参数：</div> */}  
94 - <Input  
95 - value={topItem?.showName}  
96 - onChange={e => handleChangeName(e, index)}  
97 - onFocus={e => handleFocus(e, index)}  
98 - onBlur={e => handleBlur(e, index)}  
99 - readOnly={!topItem?.isEditable}  
100 - className={styles.text}  
101 - />  
102 - <Input  
103 - value={topItem?.value}  
104 - onChange={e => handleChange(e, index)}  
105 - onFocus={e => handleFocus(e, index)}  
106 - onBlur={e => handleBlur(e, index)}  
107 - readOnly={!topItem?.isEditable}  
108 - style={{ width: " 80%" }}  
109 - />  
110 - </div>  
111 - </div>  
112 - ))}  
113 - </div>  
114 - <div className={styles.boxLeft}>  
115 - {leftBoxList.map((item, index) => (  
116 - <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>  
117 - <div className={styles.boxTitle}>{titleList[index + 3]}</div> 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" : "");
118 439
119 - <Select  
120 - optionLabelProp="label"  
121 - className="mySelects"  
122 - style={{ width: 180 }}  
123 - defaultValue={options.length ? options[0].value : ""}  
124 - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}  
125 - onDropdownVisibleChange={async open => {  
126 - if (open) {  
127 - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions  
128 - }  
129 - }}  
130 - >  
131 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
132 - </Select>  
133 - <div className={styles.boxInput}>  
134 - {item?.selectImage ? ( 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 +
  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 + };
  750 +
  751 + // 单独处理双层盒型
  752 + if (boxType === "8") {
  753 + console.log(newBoxList, boxList, "topBoxList");
  754 + }
  755 + 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 + {/* 盒身信息 */}
  775 +
  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 ? (
135 <img 782 <img
136 - src={item?.selectImage}  
137 - alt={item.value}  
138 - style={{  
139 - width: 40,  
140 - height: 30,  
141 - marginRight: 8,  
142 - position: "absolute",  
143 - left: 20,  
144 - top: -35,  
145 - zIndex: 10,  
146 - }} 783 + src={topItem?.selectImage}
  784 + alt={topItem.value}
  785 + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
147 /> 786 />
148 ) : ( 787 ) : (
149 "" 788 ""
150 )} 789 )}
151 - <Input  
152 - value={item?.showName}  
153 - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}  
154 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
155 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
156 - readOnly={!item?.isEditable}  
157 - className={styles.text}  
158 - />  
159 - <Input  
160 - value={item?.value}  
161 - onChange={e => handleChange(e, findIndexBySname(item.sName))}  
162 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
163 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
164 - readOnly={!item?.isEditable}  
165 - style={{ width: " 80%" }}  
166 - />  
167 - </div>  
168 - </div>  
169 - ))}  
170 - </div>  
171 - <div className={styles.boxRight}>  
172 - {rightBoxList.map((item, index) => (  
173 - <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>  
174 - <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>  
175 790
176 - <Select  
177 - optionLabelProp="label"  
178 - className="mySelects"  
179 - style={{ width: 180 }}  
180 - defaultValue={options.length ? options[0].value : ""}  
181 - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}  
182 - onDropdownVisibleChange={async open => {  
183 - if (open) {  
184 - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions  
185 - }  
186 - }}  
187 - >  
188 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
189 - </Select>  
190 - <div className={styles.boxInput}>  
191 - {item?.selectImage ? (  
192 - <img  
193 - src={item?.selectImage}  
194 - alt={item.value}  
195 - style={{  
196 - width: 40,  
197 - height: 30,  
198 - marginRight: 8,  
199 - position: "absolute",  
200 - left: 20,  
201 - top: -35,  
202 - zIndex: 10,  
203 - }} 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}
204 /> 814 />
205 - ) : (  
206 - ""  
207 - )} 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>
  824 + </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>
208 831
209 - <Input  
210 - value={item?.showName}  
211 - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}  
212 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
213 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
214 - readOnly={!item?.isEditable}  
215 - className={styles.text}  
216 - />  
217 - <Input  
218 - value={item?.value}  
219 - onChange={e => handleChange(e, findIndexBySname(item.sName))}  
220 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
221 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
222 - readOnly={!item?.isEditable}  
223 - style={{ width: " 80%" }}  
224 - /> 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%" }}
  879 + />
  880 + </div>
225 </div> 881 </div>
226 - </div>  
227 - ))}  
228 - </div>  
229 - <div className={styles.boxBottom}>  
230 - <div className={styles.svgBox}>  
231 - <SvgBox {...svgBoxProps} /> 882 + ))}
232 </div> 883 </div>
233 - <div className={styles.content}>  
234 - {tableColum && tableColum.length  
235 - ? tableColum.map((item, index) => {  
236 - const uniqueIndex = index + 9;  
237 - return (  
238 - <div key={uniqueIndex} className={styles.boxFlex}>  
239 - <div className={styles.boxInput}>  
240 - <div className={styles.text} style={{ width: "120px" }}>  
241 - {item.showName}  
242 - </div>  
243 - <Input  
244 - value={boxList[uniqueIndex]?.value}  
245 - onChange={e => handleChange(e, uniqueIndex)}  
246 - onFocus={e => handleFocus(e, uniqueIndex)}  
247 - onBlur={e => handleBlur(e, uniqueIndex)}  
248 - readOnly={!boxList[uniqueIndex]?.isEditable}  
249 - style={{ width: " 80%" }}  
250 - />  
251 - </div>  
252 - </div>  
253 - );  
254 - })  
255 - : ""}  
256 - {boxBodyList && boxBodyList.length  
257 - ? boxBodyList.map((item, index) => {  
258 - const uniqueIndex = index + 9 + tableColum.length; 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>
259 888
260 - return (  
261 - <div key={uniqueIndex} className={styles.boxFlex}>  
262 - <div className={styles.boxInput}>  
263 - <div className={styles.text} style={{ width: "120px" }}>  
264 - {item.showName}  
265 - </div>  
266 - {boxList[uniqueIndex]?.selectImage ? (  
267 - <img  
268 - src={boxList[uniqueIndex]?.selectImage}  
269 - alt={boxList[uniqueIndex].value}  
270 - style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }} 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 + )}
  921 +
  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>
  939 + </div>
  940 + ))}
  941 + </div>
  942 + <div className={styles.boxBottom}>
  943 + <div className={styles.svgBox}>
  944 + <SvgBox {...svgBoxProps} />
  945 + </div>
  946 + <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%" }}
271 /> 963 />
272 - ) : (  
273 - ""  
274 - )}  
275 - {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}  
276 - <Select  
277 - optionLabelProp="label"  
278 - className="mySelects"  
279 - style={{ width: "80%" }}  
280 - defaultValue={boxList[uniqueIndex]?.value}  
281 - onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}  
282 - onDropdownVisibleChange={async open => {  
283 - if (open) {  
284 - props.getSqlOptions(10); // 盒身  
285 - }  
286 - }}  
287 - >  
288 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
289 - </Select> 964 + </div>
290 </div> 965 </div>
291 - </div>  
292 - );  
293 - })  
294 - : ""}  
295 - <div className={styles.boxFlexs}>  
296 - {tableDataList && tableDataList.length  
297 - ? tableDataList.map((item, index) => {  
298 - const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length; 966 + );
  967 + })
  968 + : ""}
  969 + {boxBodyList && boxBodyList.length
  970 + ? boxBodyList.map((item, index) => {
  971 + const uniqueIndex = index + 9 + tableColum.length;
299 972
300 return ( 973 return (
301 - <div key={uniqueIndex} className={styles.boxInputs}>  
302 - <div className={styles.text}>{item.sName}</div>  
303 - <Input  
304 - value={boxList[uniqueIndex]?.value}  
305 - onChange={e => handleChange(e, uniqueIndex)}  
306 - onFocus={e => handleFocus(e, uniqueIndex)}  
307 - onBlur={e => handleBlur(e, uniqueIndex)}  
308 - readOnly={!boxList[uniqueIndex]?.isEditable}  
309 - style={{ width: " 60%" }}  
310 - /> 974 + <div key={uniqueIndex} className={styles.boxFlex}>
  975 + <div className={styles.boxInput}>
  976 + <div className={styles.text} style={{ width: "120px" }}>
  977 + {item.showName}
  978 + </div>
  979 + {boxList[uniqueIndex]?.selectImage ? (
  980 + <img
  981 + src={boxList[uniqueIndex]?.selectImage}
  982 + alt={boxList[uniqueIndex].value}
  983 + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}
  984 + />
  985 + ) : (
  986 + ""
  987 + )}
  988 + {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}
  989 + <Select
  990 + optionLabelProp="label"
  991 + className="mySelects"
  992 + style={{ width: "80%" }}
  993 + defaultValue={boxList[uniqueIndex]?.value}
  994 + onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}
  995 + onDropdownVisibleChange={async open => {
  996 + if (open) {
  997 + props.getSqlOptions(10); // 盒身
  998 + }
  999 + }}
  1000 + >
  1001 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  1002 + </Select>
  1003 + </div>
311 </div> 1004 </div>
312 ); 1005 );
313 }) 1006 })
314 : ""} 1007 : ""}
  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>
315 </div> 1029 </div>
316 </div> 1030 </div>
317 </div> 1031 </div>
318 - </div> 1032 + </AntdDraggableModal>
319 ); 1033 );
320 }; 1034 };
321 -export default DoubleLayerBox; 1035 +
  1036 +export default CommonBase(BoxDesignCompontent);
src/components/Common/BoxDesignCompontent/index.js
  View file @a8d427f
@@ -14,7 +14,6 @@ import jsPreviewPdf from &quot;@js-preview/pdf&quot;; @@ -14,7 +14,6 @@ import jsPreviewPdf from &quot;@js-preview/pdf&quot;;
14 import commonConfig from "@/utils/config"; 14 import commonConfig from "@/utils/config";
15 import SvgBox from "./svg"; 15 import SvgBox from "./svg";
16 import styles from "./index.less"; 16 import styles from "./index.less";
17 -import DoubleLayerBox from "./compontents/doubleLayer";  
18 const BoxDesignEvent = props => { 17 const BoxDesignEvent = props => {
19 const addState = {}; 18 const addState = {};
20 const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props; 19 const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props;
@@ -78,55 +77,94 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -78,55 +77,94 @@ const BoxDesignCompontent = baseProps =&gt; {
78 const [boxList, setBoxList] = useState([]); 77 const [boxList, setBoxList] = useState([]);
79 const [tableColum, setTableColum] = useState([]); // 盒身类型 78 const [tableColum, setTableColum] = useState([]); // 盒身类型
80 const [tableDataList, setTableDataList] = useState([]); // 盒长 79 const [tableDataList, setTableDataList] = useState([]); // 盒长
  80 + const [tableDataLists, setTableDataLists] = useState([]); // 盒长
81 const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息 81 const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息
82 const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值 82 const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值
83 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息 83 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
84 const [leftBoxList, setLeftBoxList] = useState([]); // 左边 84 const [leftBoxList, setLeftBoxList] = useState([]); // 左边
85 const [rightBoxList, setRightBoxList] = useState([]); 85 const [rightBoxList, setRightBoxList] = useState([]);
86 const [boxKey, setBoxKey] = useState(new Date().getTime()); 86 const [boxKey, setBoxKey] = useState(new Date().getTime());
  87 + const [doubleLayerList,setDoubleLayerList] = useState([])
87 if (!boxVisible) return ""; 88 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 last = newTableColum.pop();  
100 - // const newList = [last, ...newTableColum];  
101 - const newList = newTableColum.filter(  
102 - item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽")  
103 - );  
104 - const newLists = newTableColum.filter(  
105 - item =>  
106 - !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身"))  
107 - );  
108 - const bodyList = newTableColum.filter(item => item.showName.includes("盒身"));  
109 - newLists.forEach(x => {  
110 - if (x.showName === "盒型类别") {  
111 - x.showName = "盒型名称";  
112 - }  
113 - });  
114 - setTableColum(newLists);  
115 - setBoxBodyList(bodyList);  
116 - newList.forEach(item => {  
117 - let name = "";  
118 - if (item.showName === "盒长") {  
119 - name = item.showName + "(L)";  
120 - } else if (item.showName === "盒宽") {  
121 - name = item.showName + "(W)";  
122 - } else if (item.showName === "盒高") {  
123 - name = item.showName + "(D)";  
124 - }  
125 - item.sName = name;  
126 - });  
127 - setTableDataList(newList);  
128 - }  
129 - }, [tableData]); 89 +// 1️⃣ 只负责 tableColum
  90 +useEffect(() => {
  91 + if (!tableData?.length) return;
  92 +
  93 + const newTableColum = tableData
  94 + .filter(item => item.bVisible) // 先过滤可见
  95 + .map(item => ({
  96 + ...item,
  97 + isEditable: true,
  98 + isSelect: false,
  99 + selectImage: null,
  100 + value: '',
  101 + }))
  102 + .filter(
  103 + item =>
  104 + !(
  105 + item.showName.includes('盒长') ||
  106 + item.showName.includes('盒高') ||
  107 + item.showName.includes('盒宽') ||
  108 + item.showName.includes('盒身')
  109 + )
  110 + )
  111 + .map(item =>
  112 + item.showName === '盒型类别'
  113 + ? { ...item, showName: '盒型名称' }
  114 + : item
  115 + );
  116 +
  117 + setTableColum(newTableColum);
  118 +}, [tableData]);
  119 +
  120 +// 2️⃣ 只负责 boxBodyList
  121 +useEffect(() => {
  122 + if (!tableData?.length) return;
  123 +
  124 + const bodyList = tableData
  125 + .filter(item => item.bVisible)
  126 + .map(item => ({
  127 + ...item,
  128 + isEditable: true,
  129 + isSelect: false,
  130 + selectImage: null,
  131 + value: '',
  132 + }))
  133 + .filter(item => item.showName.includes('盒身'));
  134 +
  135 + setBoxBodyList(bodyList);
  136 +}, [tableData]);
  137 +
  138 +// 3️⃣ 只负责 tableDataList 和 tableDataLists
  139 +useEffect(() => {
  140 + if (!tableData?.length) return;
  141 +
  142 + const newList = tableData
  143 + .filter(item => item.bVisible)
  144 + .map(item => ({
  145 + ...item,
  146 + isEditable: true,
  147 + isSelect: false,
  148 + selectImage: null,
  149 + value: '',
  150 + }))
  151 + .filter(
  152 + item =>
  153 + item.showName.includes('盒长') ||
  154 + item.showName.includes('盒高') ||
  155 + item.showName.includes('盒宽')
  156 + )
  157 + .map(item => {
  158 + let name = '';
  159 + if (item.showName === '盒长') name = '盒长(L)';
  160 + if (item.showName === '盒宽') name = '盒宽(W)';
  161 + if (item.showName === '盒高') name = '盒高(D)';
  162 + return { ...item, sName: name };
  163 + });
  164 +
  165 + setTableDataList(newList);
  166 + setTableDataLists(newList);
  167 +}, [tableData]);
130 const titleList = [ 168 const titleList = [
131 "上方盒舌", 169 "上方盒舌",
132 "盒底组件", 170 "盒底组件",
@@ -161,6 +199,8 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -161,6 +199,8 @@ const BoxDesignCompontent = baseProps =&gt; {
161 tableDataList.forEach(item => { 199 tableDataList.forEach(item => {
162 titleList.push(item.showName); 200 titleList.push(item.showName);
163 }); 201 });
  202 + // 这里处理双盒的初始数据
  203 + titleList.push(...["首盒长", "首盒宽", "次盒长", "次盒宽"])
164 // 盒身信息 204 // 盒身信息
165 titleList.forEach((item, index) => { 205 titleList.forEach((item, index) => {
166 newBoxList.push({ 206 newBoxList.push({
@@ -219,7 +259,7 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -219,7 +259,7 @@ const BoxDesignCompontent = baseProps =&gt; {
219 setBoxList(newBoxList); 259 setBoxList(newBoxList);
220 } 260 }
221 }, [newBoxList]); 261 }, [newBoxList]);
222 - console.log(boxList, "boxList"); 262 +
223 263
224 const arraysAreEqual = (arr1, arr2) => { 264 const arraysAreEqual = (arr1, arr2) => {
225 if (arr1.length !== arr2.length) return false; 265 if (arr1.length !== arr2.length) return false;
@@ -282,7 +322,34 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -282,7 +322,34 @@ const BoxDesignCompontent = baseProps =&gt; {
282 updateLists(); 322 updateLists();
283 }, [boxList]); 323 }, [boxList]);
284 const boxType = boxList.find(item => item.sName === "盒身")?.type; 324 const boxType = boxList.find(item => item.sName === "盒身")?.type;
285 - 325 + // 监听盒身类型
  326 + useEffect(() => {
  327 + if (!boxType) return;
  328 + if (boxType === "8") {
  329 + const doubleList = ["首盒长", "首盒宽", "次盒长", "次盒宽"];
  330 + let box = [];
  331 + doubleList.forEach(item => {
  332 + box.push({
  333 + value: "",
  334 + sName: item,
  335 + isEditable: true,
  336 + isSelect: false,
  337 + selectValue: null,
  338 + selectLabel: "",
  339 + selectImage: null,
  340 + type: null,
  341 + show: true,
  342 + showName: item, // 参数名称
  343 + sAssignFormula: null,
  344 + });
  345 + });
  346 + // boxList.push()
  347 + setDoubleLayerList(box)
  348 + } else {
  349 + }
  350 + console.log(boxList,'boxList');
  351 +
  352 + }, [boxType]);
286 const handleFocus = (e, index) => { 353 const handleFocus = (e, index) => {
287 if (boxList && boxList.length) { 354 if (boxList && boxList.length) {
288 const updatedBoxList = [...boxList]; 355 const updatedBoxList = [...boxList];
@@ -342,6 +409,8 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -342,6 +409,8 @@ const BoxDesignCompontent = baseProps =&gt; {
342 const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}`; 409 const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}`;
343 return imageUrl; 410 return imageUrl;
344 }; 411 };
  412 + console.log(boxList, "boxList");
  413 +
345 // 下来框 414 // 下来框
346 const renderOptionWithImage = option => { 415 const renderOptionWithImage = option => {
347 return ( 416 return (
@@ -750,13 +819,7 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -750,13 +819,7 @@ const BoxDesignCompontent = baseProps =&gt; {
750 819
751 // 单独处理双层盒型 820 // 单独处理双层盒型
752 if (boxType === "8") { 821 if (boxType === "8") {
753 - const top = [  
754 - { name: "左贴边位", value: "dZTBW" },  
755 - { name: "上插位组件", value: "dZSCW" },  
756 - { name: "右贴边位", value: "dYTBW" },  
757 - ];  
758 - console.log(topBoxList,options,'topBoxList');  
759 - 822 + console.log(newBoxList, boxList, "topBoxList");
760 } 823 }
761 return ( 824 return (
762 <AntdDraggableModal 825 <AntdDraggableModal
@@ -778,521 +841,285 @@ const BoxDesignCompontent = baseProps =&gt; { @@ -778,521 +841,285 @@ const BoxDesignCompontent = baseProps =&gt; {
778 }} 841 }}
779 > 842 >
780 {/* 盒身信息 */} 843 {/* 盒身信息 */}
781 - {boxType && boxType === "8" ? (  
782 - <div className={styles.boxBody} key={boxKey}>  
783 - <div className={styles.boxTop}>  
784 - {topBoxList.map((topItem, index) => (  
785 - <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>  
786 - <div className={styles.boxTitle}>{topItem.sName}</div>  
787 - {topItem?.selectImage ? (  
788 - <img  
789 - src={topItem?.selectImage}  
790 - alt={topItem.value}  
791 - style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}  
792 - />  
793 - ) : (  
794 - ""  
795 - )}  
796 844
797 - <Select  
798 - optionLabelProp="label"  
799 - className="mySelects"  
800 - style={{ width: 180 }}  
801 - defaultValue={options.length ? options[0].value : ""}  
802 - onSelect={(value, option) => handleSelect(value, option, index, 0)}  
803 - onDropdownVisibleChange={async open => {  
804 - if (open) {  
805 - props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions  
806 - }  
807 - }}  
808 - >  
809 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
810 - </Select>  
811 - <div className={styles.boxInput}>  
812 - {/* <div className={styles.text}>参数：</div> */}  
813 - <Input  
814 - value={topItem?.showName}  
815 - onChange={e => handleChangeName(e, index)}  
816 - onFocus={e => handleFocus(e, index)}  
817 - onBlur={e => handleBlur(e, index)}  
818 - readOnly={!topItem?.isEditable}  
819 - className={styles.text}  
820 - />  
821 - <Input  
822 - value={topItem?.value}  
823 - onChange={e => handleChange(e, index)}  
824 - onFocus={e => handleFocus(e, index)}  
825 - onBlur={e => handleBlur(e, index)}  
826 - readOnly={!topItem?.isEditable}  
827 - style={{ width: " 80%" }}  
828 - />  
829 - </div>  
830 - </div>  
831 - ))}  
832 - </div>  
833 - <div className={styles.boxLeft}>  
834 - {leftBoxList.map((item, index) => (  
835 - <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>  
836 - <div className={styles.boxTitle}>{titleList[index + 3]}</div> 845 + <div className={styles.boxBody} key={boxKey}>
  846 + <div className={styles.boxTop}>
  847 + {topBoxList.map((topItem, index) => (
  848 + <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
  849 + <div className={styles.boxTitle}>{topItem.sName}</div>
  850 + {topItem?.selectImage ? (
  851 + <img
  852 + src={topItem?.selectImage}
  853 + alt={topItem.value}
  854 + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
  855 + />
  856 + ) : (
  857 + ""
  858 + )}
837 859
838 - <Select  
839 - optionLabelProp="label"  
840 - className="mySelects"  
841 - style={{ width: 180 }}  
842 - defaultValue={options.length ? options[0].value : ""}  
843 - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}  
844 - onDropdownVisibleChange={async open => {  
845 - if (open) {  
846 - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions  
847 - }  
848 - }}  
849 - >  
850 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
851 - </Select>  
852 - <div className={styles.boxInput}>  
853 - {item?.selectImage ? (  
854 - <img  
855 - src={item?.selectImage}  
856 - alt={item.value}  
857 - style={{  
858 - width: 40,  
859 - height: 30,  
860 - marginRight: 8,  
861 - position: "absolute",  
862 - left: 20,  
863 - top: -35,  
864 - zIndex: 10,  
865 - }}  
866 - />  
867 - ) : (  
868 - ""  
869 - )}  
870 - <Input  
871 - value={item?.showName}  
872 - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}  
873 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
874 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
875 - readOnly={!item?.isEditable}  
876 - className={styles.text}  
877 - />  
878 - <Input  
879 - value={item?.value}  
880 - onChange={e => handleChange(e, findIndexBySname(item.sName))}  
881 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
882 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
883 - readOnly={!item?.isEditable}  
884 - style={{ width: " 80%" }}  
885 - />  
886 - </div> 860 + <Select
  861 + optionLabelProp="label"
  862 + className="mySelects"
  863 + style={{ width: 180 }}
  864 + defaultValue={options.length ? options[0].value : ""}
  865 + onSelect={(value, option) => handleSelect(value, option, index, 0)}
  866 + onDropdownVisibleChange={async open => {
  867 + if (open) {
  868 + props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions
  869 + }
  870 + }}
  871 + >
  872 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  873 + </Select>
  874 + <div className={styles.boxInput}>
  875 + {/* <div className={styles.text}>参数：</div> */}
  876 + <Input
  877 + value={topItem?.showName}
  878 + onChange={e => handleChangeName(e, index)}
  879 + onFocus={e => handleFocus(e, index)}
  880 + onBlur={e => handleBlur(e, index)}
  881 + readOnly={!topItem?.isEditable}
  882 + className={styles.text}
  883 + />
  884 + <Input
  885 + value={topItem?.value}
  886 + onChange={e => handleChange(e, index)}
  887 + onFocus={e => handleFocus(e, index)}
  888 + onBlur={e => handleBlur(e, index)}
  889 + readOnly={!topItem?.isEditable}
  890 + style={{ width: " 80%" }}
  891 + />
887 </div> 892 </div>
888 - ))}  
889 - </div>  
890 - <div className={styles.boxRight}>  
891 - {rightBoxList.map((item, index) => (  
892 - <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>  
893 - <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>  
894 -  
895 - <Select  
896 - optionLabelProp="label"  
897 - className="mySelects"  
898 - style={{ width: 180 }}  
899 - defaultValue={options.length ? options[0].value : ""}  
900 - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}  
901 - onDropdownVisibleChange={async open => {  
902 - if (open) {  
903 - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions  
904 - }  
905 - }}  
906 - >  
907 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
908 - </Select>  
909 - <div className={styles.boxInput}>  
910 - {item?.selectImage ? (  
911 - <img  
912 - src={item?.selectImage}  
913 - alt={item.value}  
914 - style={{  
915 - width: 40,  
916 - height: 30,  
917 - marginRight: 8,  
918 - position: "absolute",  
919 - left: 20,  
920 - top: -35,  
921 - zIndex: 10,  
922 - }}  
923 - />  
924 - ) : (  
925 - ""  
926 - )}  
927 -  
928 - <Input  
929 - value={item?.showName}  
930 - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}  
931 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
932 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
933 - readOnly={!item?.isEditable}  
934 - className={styles.text}  
935 - />  
936 - <Input  
937 - value={item?.value}  
938 - onChange={e => handleChange(e, findIndexBySname(item.sName))}  
939 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
940 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
941 - readOnly={!item?.isEditable}  
942 - style={{ width: " 80%" }}  
943 - />  
944 - </div>  
945 - </div>  
946 - ))}  
947 - </div>  
948 - <div className={styles.boxBottom}>  
949 - <div className={styles.svgBox}>  
950 - <SvgBox {...svgBoxProps} />  
951 </div> 893 </div>
952 - <div className={styles.content}>  
953 - {tableColum && tableColum.length  
954 - ? tableColum.map((item, index) => {  
955 - const uniqueIndex = index + 9;  
956 - return (  
957 - <div key={uniqueIndex} className={styles.boxFlex}>  
958 - <div className={styles.boxInput}>  
959 - <div className={styles.text} style={{ width: "120px" }}>  
960 - {item.showName}  
961 - </div>  
962 - <Input  
963 - value={boxList[uniqueIndex]?.value}  
964 - onChange={e => handleChange(e, uniqueIndex)}  
965 - onFocus={e => handleFocus(e, uniqueIndex)}  
966 - onBlur={e => handleBlur(e, uniqueIndex)}  
967 - readOnly={!boxList[uniqueIndex]?.isEditable}  
968 - style={{ width: " 80%" }}  
969 - />  
970 - </div>  
971 - </div>  
972 - );  
973 - })  
974 - : ""}  
975 - {boxBodyList && boxBodyList.length  
976 - ? boxBodyList.map((item, index) => {  
977 - const uniqueIndex = index + 9 + tableColum.length;  
978 -  
979 - return (  
980 - <div key={uniqueIndex} className={styles.boxFlex}>  
981 - <div className={styles.boxInput}>  
982 - <div className={styles.text} style={{ width: "120px" }}>  
983 - {item.showName}  
984 - </div>  
985 - {boxList[uniqueIndex]?.selectImage ? (  
986 - <img  
987 - src={boxList[uniqueIndex]?.selectImage}  
988 - alt={boxList[uniqueIndex].value}  
989 - style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}  
990 - />  
991 - ) : (  
992 - ""  
993 - )}  
994 - {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}  
995 - <Select  
996 - optionLabelProp="label"  
997 - className="mySelects"  
998 - style={{ width: "80%" }}  
999 - defaultValue={boxList[uniqueIndex]?.value}  
1000 - onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}  
1001 - onDropdownVisibleChange={async open => {  
1002 - if (open) {  
1003 - props.getSqlOptions(10); // 盒身  
1004 - }  
1005 - }}  
1006 - >  
1007 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
1008 - </Select>  
1009 - </div>  
1010 - </div>  
1011 - );  
1012 - })  
1013 - : ""}  
1014 - <div className={styles.boxFlexs}>  
1015 - {tableDataList && tableDataList.length  
1016 - ? tableDataList.map((item, index) => {  
1017 - const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length; 894 + ))}
  895 + </div>
  896 + <div className={styles.boxLeft}>
  897 + {leftBoxList.map((item, index) => (
  898 + <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
  899 + <div className={styles.boxTitle}>{titleList[index + 3]}</div>
1018 900
1019 - return (  
1020 - <div key={uniqueIndex} className={styles.boxInputs}>  
1021 - <div className={styles.text}>{item.sName}</div>  
1022 - <Input  
1023 - value={boxList[uniqueIndex]?.value}  
1024 - onChange={e => handleChange(e, uniqueIndex)}  
1025 - onFocus={e => handleFocus(e, uniqueIndex)}  
1026 - onBlur={e => handleBlur(e, uniqueIndex)}  
1027 - readOnly={!boxList[uniqueIndex]?.isEditable}  
1028 - style={{ width: " 60%" }}  
1029 - />  
1030 - </div>  
1031 - );  
1032 - })  
1033 - : ""} 901 + <Select
  902 + optionLabelProp="label"
  903 + className="mySelects"
  904 + style={{ width: 180 }}
  905 + defaultValue={options.length ? options[0].value : ""}
  906 + onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
  907 + onDropdownVisibleChange={async open => {
  908 + if (open) {
  909 + props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
  910 + }
  911 + }}
  912 + >
  913 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  914 + </Select>
  915 + <div className={styles.boxInput}>
  916 + {item?.selectImage ? (
  917 + <img
  918 + src={item?.selectImage}
  919 + alt={item.value}
  920 + style={{
  921 + width: 40,
  922 + height: 30,
  923 + marginRight: 8,
  924 + position: "absolute",
  925 + left: 20,
  926 + top: -35,
  927 + zIndex: 10,
  928 + }}
  929 + />
  930 + ) : (
  931 + ""
  932 + )}
  933 + <Input
  934 + value={item?.showName}
  935 + onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
  936 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  937 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  938 + readOnly={!item?.isEditable}
  939 + className={styles.text}
  940 + />
  941 + <Input
  942 + value={item?.value}
  943 + onChange={e => handleChange(e, findIndexBySname(item.sName))}
  944 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  945 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  946 + readOnly={!item?.isEditable}
  947 + style={{ width: " 80%" }}
  948 + />
1034 </div> 949 </div>
1035 </div> 950 </div>
1036 - </div> 951 + ))}
1037 </div> 952 </div>
1038 - ) : (  
1039 - <div className={styles.boxBody} key={boxKey}>  
1040 - <div className={styles.boxTop}>  
1041 - {topBoxList.map((topItem, index) => (  
1042 - <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>  
1043 - <div className={styles.boxTitle}>{topItem.sName}</div>  
1044 - {topItem?.selectImage ? ( 953 + <div className={styles.boxRight}>
  954 + {rightBoxList.map((item, index) => (
  955 + <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
  956 + <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>
  957 +
  958 + <Select
  959 + optionLabelProp="label"
  960 + className="mySelects"
  961 + style={{ width: 180 }}
  962 + defaultValue={options.length ? options[0].value : ""}
  963 + onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
  964 + onDropdownVisibleChange={async open => {
  965 + if (open) {
  966 + props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
  967 + }
  968 + }}
  969 + >
  970 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  971 + </Select>
  972 + <div className={styles.boxInput}>
  973 + {item?.selectImage ? (
1045 <img 974 <img
1046 - src={topItem?.selectImage}  
1047 - alt={topItem.value}  
1048 - style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }} 975 + src={item?.selectImage}
  976 + alt={item.value}
  977 + style={{
  978 + width: 40,
  979 + height: 30,
  980 + marginRight: 8,
  981 + position: "absolute",
  982 + left: 20,
  983 + top: -35,
  984 + zIndex: 10,
  985 + }}
1049 /> 986 />
1050 ) : ( 987 ) : (
1051 "" 988 ""
1052 )} 989 )}
1053 990
1054 - <Select  
1055 - optionLabelProp="label"  
1056 - className="mySelects"  
1057 - style={{ width: 180 }}  
1058 - defaultValue={options.length ? options[0].value : ""}  
1059 - onSelect={(value, option) => handleSelect(value, option, index, 0)}  
1060 - onDropdownVisibleChange={async open => {  
1061 - if (open) {  
1062 - props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions  
1063 - }  
1064 - }}  
1065 - >  
1066 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
1067 - </Select>  
1068 - <div className={styles.boxInput}>  
1069 - {/* <div className={styles.text}>参数：</div> */}  
1070 - <Input  
1071 - value={topItem?.showName}  
1072 - onChange={e => handleChangeName(e, index)}  
1073 - onFocus={e => handleFocus(e, index)}  
1074 - onBlur={e => handleBlur(e, index)}  
1075 - readOnly={!topItem?.isEditable}  
1076 - className={styles.text}  
1077 - />  
1078 - <Input  
1079 - value={topItem?.value}  
1080 - onChange={e => handleChange(e, index)}  
1081 - onFocus={e => handleFocus(e, index)}  
1082 - onBlur={e => handleBlur(e, index)}  
1083 - readOnly={!topItem?.isEditable}  
1084 - style={{ width: " 80%" }}  
1085 - />  
1086 - </div>  
1087 - </div>  
1088 - ))}  
1089 - </div>  
1090 - <div className={styles.boxLeft}>  
1091 - {leftBoxList.map((item, index) => (  
1092 - <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>  
1093 - <div className={styles.boxTitle}>{titleList[index + 3]}</div>  
1094 -  
1095 - <Select  
1096 - optionLabelProp="label"  
1097 - className="mySelects"  
1098 - style={{ width: 180 }}  
1099 - defaultValue={options.length ? options[0].value : ""}  
1100 - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}  
1101 - onDropdownVisibleChange={async open => {  
1102 - if (open) {  
1103 - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions  
1104 - }  
1105 - }}  
1106 - >  
1107 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
1108 - </Select>  
1109 - <div className={styles.boxInput}>  
1110 - {item?.selectImage ? (  
1111 - <img  
1112 - src={item?.selectImage}  
1113 - alt={item.value}  
1114 - style={{  
1115 - width: 40,  
1116 - height: 30,  
1117 - marginRight: 8,  
1118 - position: "absolute",  
1119 - left: 20,  
1120 - top: -35,  
1121 - zIndex: 10,  
1122 - }}  
1123 - />  
1124 - ) : (  
1125 - ""  
1126 - )}  
1127 - <Input  
1128 - value={item?.showName}  
1129 - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}  
1130 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
1131 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
1132 - readOnly={!item?.isEditable}  
1133 - className={styles.text}  
1134 - />  
1135 - <Input  
1136 - value={item?.value}  
1137 - onChange={e => handleChange(e, findIndexBySname(item.sName))}  
1138 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
1139 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
1140 - readOnly={!item?.isEditable}  
1141 - style={{ width: " 80%" }}  
1142 - />  
1143 - </div> 991 + <Input
  992 + value={item?.showName}
  993 + onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
  994 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  995 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  996 + readOnly={!item?.isEditable}
  997 + className={styles.text}
  998 + />
  999 + <Input
  1000 + value={item?.value}
  1001 + onChange={e => handleChange(e, findIndexBySname(item.sName))}
  1002 + onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
  1003 + onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
  1004 + readOnly={!item?.isEditable}
  1005 + style={{ width: " 80%" }}
  1006 + />
1144 </div> 1007 </div>
1145 - ))} 1008 + </div>
  1009 + ))}
  1010 + </div>
  1011 + <div className={styles.boxBottom}>
  1012 + <div className={styles.svgBox}>
  1013 + <SvgBox {...svgBoxProps} />
1146 </div> 1014 </div>
1147 - <div className={styles.boxRight}>  
1148 - {rightBoxList.map((item, index) => (  
1149 - <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>  
1150 - <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div> 1015 + <div className={styles.content}>
  1016 + {tableColum && tableColum.length
  1017 + ? tableColum.map((item, index) => {
  1018 + const uniqueIndex = index + 9;
  1019 + return (
  1020 + <div key={uniqueIndex} className={styles.boxFlex}>
  1021 + <div className={styles.boxInput}>
  1022 + <div className={styles.text} style={{ width: "120px" }}>
  1023 + {item.showName}
  1024 + </div>
  1025 + <Input
  1026 + value={boxList[uniqueIndex]?.value}
  1027 + onChange={e => handleChange(e, uniqueIndex)}
  1028 + onFocus={e => handleFocus(e, uniqueIndex)}
  1029 + onBlur={e => handleBlur(e, uniqueIndex)}
  1030 + readOnly={!boxList[uniqueIndex]?.isEditable}
  1031 + style={{ width: " 80%" }}
  1032 + />
  1033 + </div>
  1034 + </div>
  1035 + );
  1036 + })
  1037 + : ""}
  1038 + {boxBodyList && boxBodyList.length
  1039 + ? boxBodyList.map((item, index) => {
  1040 + const uniqueIndex = index + 9 + tableColum.length;
1151 1041
1152 - <Select  
1153 - optionLabelProp="label"  
1154 - className="mySelects"  
1155 - style={{ width: 180 }}  
1156 - defaultValue={options.length ? options[0].value : ""}  
1157 - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}  
1158 - onDropdownVisibleChange={async open => {  
1159 - if (open) {  
1160 - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions  
1161 - }  
1162 - }}  
1163 - >  
1164 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
1165 - </Select>  
1166 - <div className={styles.boxInput}>  
1167 - {item?.selectImage ? (  
1168 - <img  
1169 - src={item?.selectImage}  
1170 - alt={item.value}  
1171 - style={{  
1172 - width: 40,  
1173 - height: 30,  
1174 - marginRight: 8,  
1175 - position: "absolute",  
1176 - left: 20,  
1177 - top: -35,  
1178 - zIndex: 10,  
1179 - }}  
1180 - />  
1181 - ) : (  
1182 - ""  
1183 - )} 1042 + return (
  1043 + <div key={uniqueIndex} className={styles.boxFlex}>
  1044 + <div className={styles.boxInput}>
  1045 + <div className={styles.text} style={{ width: "120px" }}>
  1046 + {item.showName}
  1047 + </div>
  1048 + {boxList[uniqueIndex]?.selectImage ? (
  1049 + <img
  1050 + src={boxList[uniqueIndex]?.selectImage}
  1051 + alt={boxList[uniqueIndex].value}
  1052 + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}
  1053 + />
  1054 + ) : (
  1055 + ""
  1056 + )}
  1057 + {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}
  1058 + <Select
  1059 + optionLabelProp="label"
  1060 + className="mySelects"
  1061 + style={{ width: "80%" }}
  1062 + defaultValue={boxList[uniqueIndex]?.value}
  1063 + onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}
  1064 + onDropdownVisibleChange={async open => {
  1065 + if (open) {
  1066 + props.getSqlOptions(10); // 盒身
  1067 + }
  1068 + }}
  1069 + >
  1070 + {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
  1071 + </Select>
  1072 + </div>
  1073 + </div>
  1074 + );
  1075 + })
  1076 + : ""}
  1077 + <div className={styles.boxFlexs}>
  1078 + {tableDataList && tableDataList.length && boxType !== '8'
  1079 + ? tableDataList.map((item, index) => {
  1080 + const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;
1184 1081
1185 - <Input  
1186 - value={item?.showName}  
1187 - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}  
1188 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
1189 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
1190 - readOnly={!item?.isEditable}  
1191 - className={styles.text}  
1192 - />  
1193 - <Input  
1194 - value={item?.value}  
1195 - onChange={e => handleChange(e, findIndexBySname(item.sName))}  
1196 - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}  
1197 - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}  
1198 - readOnly={!item?.isEditable}  
1199 - style={{ width: " 80%" }}  
1200 - />  
1201 - </div>  
1202 - </div>  
1203 - ))}  
1204 - </div>  
1205 - <div className={styles.boxBottom}>  
1206 - <div className={styles.svgBox}>  
1207 - <SvgBox {...svgBoxProps} />  
1208 - </div>  
1209 - <div className={styles.content}>  
1210 - {tableColum && tableColum.length  
1211 - ? tableColum.map((item, index) => {  
1212 - const uniqueIndex = index + 9;  
1213 return ( 1082 return (
1214 - <div key={uniqueIndex} className={styles.boxFlex}>  
1215 - <div className={styles.boxInput}>  
1216 - <div className={styles.text} style={{ width: "120px" }}>  
1217 - {item.showName}  
1218 - </div>  
1219 - <Input  
1220 - value={boxList[uniqueIndex]?.value}  
1221 - onChange={e => handleChange(e, uniqueIndex)}  
1222 - onFocus={e => handleFocus(e, uniqueIndex)}  
1223 - onBlur={e => handleBlur(e, uniqueIndex)}  
1224 - readOnly={!boxList[uniqueIndex]?.isEditable}  
1225 - style={{ width: " 80%" }}  
1226 - />  
1227 - </div> 1083 + <div key={uniqueIndex} className={styles.boxInputs}>
  1084 + <div className={styles.text}>{item.sName}</div>
  1085 + <Input
  1086 + value={boxList[uniqueIndex]?.value}
  1087 + onChange={e => handleChange(e, uniqueIndex)}
  1088 + onFocus={e => handleFocus(e, uniqueIndex)}
  1089 + onBlur={e => handleBlur(e, uniqueIndex)}
  1090 + readOnly={!boxList[uniqueIndex]?.isEditable}
  1091 + style={{ width: " 60%" }}
  1092 + />
1228 </div> 1093 </div>
1229 ); 1094 );
1230 }) 1095 })
1231 : ""} 1096 : ""}
1232 - {boxBodyList && boxBodyList.length  
1233 - ? boxBodyList.map((item, index) => {  
1234 - const uniqueIndex = index + 9 + tableColum.length; 1097 + </div>
  1098 +
  1099 + <div className={styles.boxFlexs}>
  1100 + {doubleLayerList && doubleLayerList.length && boxType === '8'
  1101 + ? doubleLayerList.map((item, index) => {
  1102 + const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length + tableDataList.length;
1235 1103
1236 return ( 1104 return (
1237 - <div key={uniqueIndex} className={styles.boxFlex}>  
1238 - <div className={styles.boxInput}>  
1239 - <div className={styles.text} style={{ width: "120px" }}>  
1240 - {item.showName}  
1241 - </div>  
1242 - {boxList[uniqueIndex]?.selectImage ? (  
1243 - <img  
1244 - src={boxList[uniqueIndex]?.selectImage}  
1245 - alt={boxList[uniqueIndex].value}  
1246 - style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}  
1247 - />  
1248 - ) : (  
1249 - ""  
1250 - )}  
1251 - {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}  
1252 - <Select  
1253 - optionLabelProp="label"  
1254 - className="mySelects"  
1255 - style={{ width: "80%" }}  
1256 - defaultValue={boxList[uniqueIndex]?.value}  
1257 - onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}  
1258 - onDropdownVisibleChange={async open => {  
1259 - if (open) {  
1260 - props.getSqlOptions(10); // 盒身  
1261 - }  
1262 - }}  
1263 - >  
1264 - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}  
1265 - </Select>  
1266 - </div> 1105 + <div key={uniqueIndex} className={styles.boxInputs}>
  1106 + <div className={styles.text}>{item.sName}</div>
  1107 + <Input
  1108 + value={boxList[uniqueIndex]?.value}
  1109 + onChange={e => handleChange(e, uniqueIndex)}
  1110 + onFocus={e => handleFocus(e, uniqueIndex)}
  1111 + onBlur={e => handleBlur(e, uniqueIndex)}
  1112 + readOnly={!boxList[uniqueIndex]?.isEditable}
  1113 + style={{ width: " 60%" }}
  1114 + />
1267 </div> 1115 </div>
1268 ); 1116 );
1269 }) 1117 })
1270 : ""} 1118 : ""}
1271 - <div className={styles.boxFlexs}>  
1272 - {tableDataList && tableDataList.length  
1273 - ? tableDataList.map((item, index) => {  
1274 - const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;  
1275 -  
1276 - return (  
1277 - <div key={uniqueIndex} className={styles.boxInputs}>  
1278 - <div className={styles.text}>{item.sName}</div>  
1279 - <Input  
1280 - value={boxList[uniqueIndex]?.value}  
1281 - onChange={e => handleChange(e, uniqueIndex)}  
1282 - onFocus={e => handleFocus(e, uniqueIndex)}  
1283 - onBlur={e => handleBlur(e, uniqueIndex)}  
1284 - readOnly={!boxList[uniqueIndex]?.isEditable}  
1285 - style={{ width: " 60%" }}  
1286 - />  
1287 - </div>  
1288 - );  
1289 - })  
1290 - : ""}  
1291 - </div>  
1292 </div> 1119 </div>
1293 </div> 1120 </div>
1294 </div> 1121 </div>
1295 - )} 1122 + </div>
1296 </AntdDraggableModal> 1123 </AntdDraggableModal>
1297 ); 1124 );
1298 }; 1125 };