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 1 /* eslint-disable */
2 2 import React, { useRef, useState, useEffect } from "react";
3   -import styles from "../index.less";
4   -import SvgBox from "../svg";
5 3 import { Select, Button, message, Input, Spin } from "antd-v4";
6 4 import { CompressOutlined, ExpandOutlined } from "@ant-design/icons";
7 5 import * as commonUtils from "@/utils/utils";
... ... @@ -14,8 +12,69 @@ import CommonViewTable from "@/components/Common/CommonViewTable";
14 12 import StaticEditTable from "@/components/Common/CommonTable";
15 13 import jsPreviewPdf from "@js-preview/pdf";
16 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 78 const [boxList, setBoxList] = useState([]);
20 79 const [tableColum, setTableColum] = useState([]); // 盒身类型
21 80 const [tableDataList, setTableDataList] = useState([]); // 盒长
... ... @@ -24,298 +83,954 @@ const DoubleLayerBox = props => {
24 83 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
25 84 const [leftBoxList, setLeftBoxList] = useState([]); // 左边
26 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 144 { name: "左贴边位", value: "dZTBW" },
46   - { name: "上插位组件", value: "dZSCW" },
  145 + { name: "左(下)插位组件", value: "dZXCW" },
  146 + { name: "右(上)插位组件", value: "dYSCW" },
47 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 356 const svgBoxProps = {
58 357 ...props,
59   - boxList: [],
  358 + boxList,
60 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 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 881 </div>
226   - </div>
227   - ))}
228   - </div>
229   - <div className={styles.boxBottom}>
230   - <div className={styles.svgBox}>
231   - <SvgBox {...svgBoxProps} />
  882 + ))}
232 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 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 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 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 1029 </div>
316 1030 </div>
317 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 14 import commonConfig from "@/utils/config";
15 15 import SvgBox from "./svg";
16 16 import styles from "./index.less";
17   -import DoubleLayerBox from "./compontents/doubleLayer";
18 17 const BoxDesignEvent = props => {
19 18 const addState = {};
20 19 const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props;
... ... @@ -78,55 +77,94 @@ const BoxDesignCompontent = baseProps =&gt; {
78 77 const [boxList, setBoxList] = useState([]);
79 78 const [tableColum, setTableColum] = useState([]); // 盒身类型
80 79 const [tableDataList, setTableDataList] = useState([]); // 盒长
  80 + const [tableDataLists, setTableDataLists] = useState([]); // 盒长
81 81 const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息
82 82 const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值
83 83 const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
84 84 const [leftBoxList, setLeftBoxList] = useState([]); // 左边
85 85 const [rightBoxList, setRightBoxList] = useState([]);
86 86 const [boxKey, setBoxKey] = useState(new Date().getTime());
  87 + const [doubleLayerList,setDoubleLayerList] = useState([])
87 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 168 const titleList = [
131 169 "上方盒舌",
132 170 "盒底组件",
... ... @@ -161,6 +199,8 @@ const BoxDesignCompontent = baseProps =&gt; {
161 199 tableDataList.forEach(item => {
162 200 titleList.push(item.showName);
163 201 });
  202 + // 这里处理双盒的初始数据
  203 + titleList.push(...["首盒长", "首盒宽", "次盒长", "次盒宽"])
164 204 // 盒身信息
165 205 titleList.forEach((item, index) => {
166 206 newBoxList.push({
... ... @@ -219,7 +259,7 @@ const BoxDesignCompontent = baseProps =&gt; {
219 259 setBoxList(newBoxList);
220 260 }
221 261 }, [newBoxList]);
222   - console.log(boxList, "boxList");
  262 +
223 263  
224 264 const arraysAreEqual = (arr1, arr2) => {
225 265 if (arr1.length !== arr2.length) return false;
... ... @@ -282,7 +322,34 @@ const BoxDesignCompontent = baseProps =&gt; {
282 322 updateLists();
283 323 }, [boxList]);
284 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 353 const handleFocus = (e, index) => {
287 354 if (boxList && boxList.length) {
288 355 const updatedBoxList = [...boxList];
... ... @@ -342,6 +409,8 @@ const BoxDesignCompontent = baseProps =&gt; {
342 409 const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&scale=0.1&sModelsId=100&token=${props.token}`;
343 410 return imageUrl;
344 411 };
  412 + console.log(boxList, "boxList");
  413 +
345 414 // 下来框
346 415 const renderOptionWithImage = option => {
347 416 return (
... ... @@ -750,13 +819,7 @@ const BoxDesignCompontent = baseProps =&gt; {
750 819  
751 820 // 单独处理双层盒型
752 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 824 return (
762 825 <AntdDraggableModal
... ... @@ -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 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 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 949 </div>
1035 950 </div>
1036   - </div>
  951 + ))}
1037 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 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 1007 </div>
1145   - ))}
  1008 + </div>
  1009 + ))}
  1010 + </div>
  1011 + <div className={styles.boxBottom}>
  1012 + <div className={styles.svgBox}>
  1013 + <SvgBox {...svgBoxProps} />
1146 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 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 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 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 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 1119 </div>
1293 1120 </div>
1294 1121 </div>
1295   - )}
  1122 + </div>
1296 1123 </AntdDraggableModal>
1297 1124 );
1298 1125 };
... ...