xlyErp / xlyUmi

Commit dd43301aeecd0407da164e392c196b748dbc9f3c

Authored by 陈鑫涛
1 parent 5532c55e

盒型排版尺寸

Inline Side-by-side
Showing 3 changed files with 881 additions and 282 deletions
src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js 0 → 100644
  View file @dd43301
  1 +/* eslint-disable */
  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";
  6 +import { CompressOutlined, ExpandOutlined } from "@ant-design/icons";
  7 +import * as commonUtils from "@/utils/utils";
  8 +import * as commonFunc from "@/components/Common/commonFunc";
  9 +import * as commonBusiness from "@/components/Common/commonBusiness";
  10 +import * as commonServices from "@/services/services";
  11 +import CommonBase from "@/components/Common/CommonBase";
  12 +import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
  13 +import CommonViewTable from "@/components/Common/CommonViewTable";
  14 +import StaticEditTable from "@/components/Common/CommonTable";
  15 +import jsPreviewPdf from "@js-preview/pdf";
  16 +import commonConfig from "@/utils/config";
  17 +const DoubleLayerBox = props => {
  18 + console.log("🚀 ~ DoubleLayerBox:", props);
  19 + const [boxList, setBoxList] = useState([]);
  20 + const [tableColum, setTableColum] = useState([]); // 盒身类型
  21 + const [tableDataList, setTableDataList] = useState([]); // 盒长
  22 + const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息
  23 + const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值
  24 + const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
  25 + const [leftBoxList, setLeftBoxList] = useState([]); // 左边
  26 + 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 = [
  45 + { name: "左贴边位", value: "dZTBW" },
  46 + { name: "上插位组件", value: "dZSCW" },
  47 + { name: "右贴边位", value: "dYTBW" },
  48 + ];
  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 + );
  57 + const svgBoxProps = {
  58 + ...props,
  59 + boxList: [],
  60 + showNew: 0,
  61 + };
  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 + )}
  77 +
  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>
  118 +
  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 ? (
  135 + <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 + }}
  147 + />
  148 + ) : (
  149 + ""
  150 + )}
  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 +
  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 + }}
  204 + />
  205 + ) : (
  206 + ""
  207 + )}
  208 +
  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 + />
  225 + </div>
  226 + </div>
  227 + ))}
  228 + </div>
  229 + <div className={styles.boxBottom}>
  230 + <div className={styles.svgBox}>
  231 + <SvgBox {...svgBoxProps} />
  232 + </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;
  259 +
  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 }}
  271 + />
  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>
  290 + </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;
  299 +
  300 + 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 + />
  311 + </div>
  312 + );
  313 + })
  314 + : ""}
  315 + </div>
  316 + </div>
  317 + </div>
  318 + </div>
  319 + );
  320 +};
  321 +export default DoubleLayerBox;
... ...
src/components/Common/BoxDesignCompontent/index.js
  View file @dd43301
... ... @@ -14,6 +14,7 @@ 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";
17 18 const BoxDesignEvent = props => {
18 19 const addState = {};
19 20 const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props;
... ... @@ -218,6 +219,7 @@ const BoxDesignCompontent = baseProps =&gt; {
218 219 setBoxList(newBoxList);
219 220 }
220 221 }, [newBoxList]);
  222 + console.log(boxList, "boxList");
221 223  
222 224 const arraysAreEqual = (arr1, arr2) => {
223 225 if (arr1.length !== arr2.length) return false;
... ... @@ -261,7 +263,7 @@ const BoxDesignCompontent = baseProps =&gt; {
261 263 box.forEach(x => {
262 264 x.show = true;
263 265 });
264   - const title = ["盒底组件", "左贴边位", "右贴边位","上方盒舌","下方盒舌"];
  266 + const title = ["盒底组件", "左贴边位", "右贴边位", "上方盒舌", "下方盒舌"];
265 267 box.forEach(x => title.includes(x.sName) && (x.show = false));
266 268 setTopBoxList(box.filter(topBoxFilter));
267 269 setLeftBoxList(box.filter(leftBoxFilter));
... ... @@ -279,6 +281,7 @@ const BoxDesignCompontent = baseProps =&gt; {
279 281  
280 282 updateLists();
281 283 }, [boxList]);
  284 + const boxType = boxList.find(item => item.sName === "盒身")?.type;
282 285  
283 286 const handleFocus = (e, index) => {
284 287 if (boxList && boxList.length) {
... ... @@ -355,6 +358,10 @@ const BoxDesignCompontent = baseProps =&gt; {
355 358 boxList,
356 359 showNew: 0,
357 360 };
  361 + const dobuleProps = {
  362 + ...props,
  363 + renderOptionWithImage,
  364 + };
358 365 // 计算展长展宽
359 366 // 创建盒型
360 367 const submit = () => {
... ... @@ -740,6 +747,17 @@ const BoxDesignCompontent = baseProps =&gt; {
740 747 const i = boxList.findIndex(x => x.sName === name);
741 748 return i || 0;
742 749 };
  750 +
  751 + // 单独处理双层盒型
  752 + 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 +
  760 + }
743 761 return (
744 762 <AntdDraggableModal
745 763 width="1000px"
... ... @@ -760,262 +778,521 @@ const BoxDesignCompontent = baseProps =&gt; {
760 778 }}
761 779 >
762 780 {/* 盒身信息 */}
763   - <div className={styles.boxBody} key={boxKey}>
764   - <div className={styles.boxTop}>
765   - {topBoxList.map((topItem, index) => (
766   - <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
767   - <div className={styles.boxTitle}>{topItem.sName}</div>
768   - {topItem?.selectImage ? (
769   - <img
770   - src={topItem?.selectImage}
771   - alt={topItem.value}
772   - style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
773   - />
774   - ) : (
775   - ""
776   - )}
777   -
778   - <Select
779   - optionLabelProp="label"
780   - className="mySelects"
781   - style={{ width: 180 }}
782   - defaultValue={options.length ? options[0].value : ""}
783   - onSelect={(value, option) => handleSelect(value, option, index, 0)}
784   - onDropdownVisibleChange={async open => {
785   - if (open) {
786   - props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions
787   - }
788   - }}
789   - >
790   - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
791   - </Select>
792   - <div className={styles.boxInput}>
793   - {/* <div className={styles.text}>参数：</div> */}
794   - <Input
795   - value={topItem?.showName}
796   - onChange={e => handleChangeName(e, index)}
797   - onFocus={e => handleFocus(e, index)}
798   - onBlur={e => handleBlur(e, index)}
799   - readOnly={!topItem?.isEditable}
800   - className={styles.text}
801   - />
802   - <Input
803   - value={topItem?.value}
804   - onChange={e => handleChange(e, index)}
805   - onFocus={e => handleFocus(e, index)}
806   - onBlur={e => handleBlur(e, index)}
807   - readOnly={!topItem?.isEditable}
808   - style={{ width: " 80%" }}
809   - />
810   - </div>
811   - </div>
812   - ))}
813   - </div>
814   - <div className={styles.boxLeft}>
815   - {leftBoxList.map((item, index) => (
816   - <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
817   - <div className={styles.boxTitle}>{titleList[index + 3]}</div>
818   -
819   - <Select
820   - optionLabelProp="label"
821   - className="mySelects"
822   - style={{ width: 180 }}
823   - defaultValue={options.length ? options[0].value : ""}
824   - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
825   - onDropdownVisibleChange={async open => {
826   - if (open) {
827   - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
828   - }
829   - }}
830   - >
831   - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
832   - </Select>
833   - <div className={styles.boxInput}>
834   - {item?.selectImage ? (
  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 ? (
835 788 <img
836   - src={item?.selectImage}
837   - alt={item.value}
838   - style={{
839   - width: 40,
840   - height: 30,
841   - marginRight: 8,
842   - position: "absolute",
843   - left: 20,
844   - top: -35,
845   - zIndex: 10,
846   - }}
  789 + src={topItem?.selectImage}
  790 + alt={topItem.value}
  791 + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
847 792 />
848 793 ) : (
849 794 ""
850 795 )}
851   - <Input
852   - value={item?.showName}
853   - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
854   - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
855   - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
856   - readOnly={!item?.isEditable}
857   - className={styles.text}
858   - />
859   - <Input
860   - value={item?.value}
861   - onChange={e => handleChange(e, findIndexBySname(item.sName))}
862   - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
863   - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
864   - readOnly={!item?.isEditable}
865   - style={{ width: " 80%" }}
866   - />
  796 +
  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>
  837 +
  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>
  887 + </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>
867 945 </div>
  946 + ))}
  947 + </div>
  948 + <div className={styles.boxBottom}>
  949 + <div className={styles.svgBox}>
  950 + <SvgBox {...svgBoxProps} />
868 951 </div>
869   - ))}
  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;
  1018 +
  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 + : ""}
  1034 + </div>
  1035 + </div>
  1036 + </div>
870 1037 </div>
871   - <div className={styles.boxRight}>
872   - {rightBoxList.map((item, index) => (
873   - <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
874   - <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>
875   -
876   - <Select
877   - optionLabelProp="label"
878   - className="mySelects"
879   - style={{ width: 180 }}
880   - defaultValue={options.length ? options[0].value : ""}
881   - onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
882   - onDropdownVisibleChange={async open => {
883   - if (open) {
884   - props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
885   - }
886   - }}
887   - >
888   - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
889   - </Select>
890   - <div className={styles.boxInput}>
891   - {item?.selectImage ? (
  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 ? (
892 1045 <img
893   - src={item?.selectImage}
894   - alt={item.value}
895   - style={{
896   - width: 40,
897   - height: 30,
898   - marginRight: 8,
899   - position: "absolute",
900   - left: 20,
901   - top: -35,
902   - zIndex: 10,
903   - }}
  1046 + src={topItem?.selectImage}
  1047 + alt={topItem.value}
  1048 + style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
904 1049 />
905 1050 ) : (
906 1051 ""
907 1052 )}
908 1053  
909   - <Input
910   - value={item?.showName}
911   - onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
912   - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
913   - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
914   - readOnly={!item?.isEditable}
915   - className={styles.text}
916   - />
917   - <Input
918   - value={item?.value}
919   - onChange={e => handleChange(e, findIndexBySname(item.sName))}
920   - onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
921   - onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
922   - readOnly={!item?.isEditable}
923   - style={{ width: " 80%" }}
924   - />
  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>
925 1087 </div>
926   - </div>
927   - ))}
928   - </div>
929   - <div className={styles.boxBottom}>
930   - <div className={styles.svgBox}>
931   - <SvgBox {...svgBoxProps} />
  1088 + ))}
932 1089 </div>
933   - <div className={styles.content}>
934   - {tableColum && tableColum.length
935   - ? tableColum.map((item, index) => {
936   - const uniqueIndex = index + 9;
937   - return (
938   - <div key={uniqueIndex} className={styles.boxFlex}>
939   - <div className={styles.boxInput}>
940   - <div className={styles.text} style={{ width: "120px" }}>
941   - {item.showName}
942   - </div>
943   - <Input
944   - value={boxList[uniqueIndex]?.value}
945   - onChange={e => handleChange(e, uniqueIndex)}
946   - onFocus={e => handleFocus(e, uniqueIndex)}
947   - onBlur={e => handleBlur(e, uniqueIndex)}
948   - readOnly={!boxList[uniqueIndex]?.isEditable}
949   - style={{ width: " 80%" }}
950   - />
951   - </div>
952   - </div>
953   - );
954   - })
955   - : ""}
956   - {boxBodyList && boxBodyList.length
957   - ? boxBodyList.map((item, index) => {
958   - const uniqueIndex = index + 9 + tableColum.length;
959   -
960   - return (
961   - <div key={uniqueIndex} className={styles.boxFlex}>
962   - <div className={styles.boxInput}>
963   - <div className={styles.text} style={{ width: "120px" }}>
964   - {item.showName}
965   - </div>
966   - {boxList[uniqueIndex]?.selectImage ? (
967   - <img
968   - src={boxList[uniqueIndex]?.selectImage}
969   - alt={boxList[uniqueIndex].value}
970   - style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}
  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>
  1144 + </div>
  1145 + ))}
  1146 + </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>
  1151 +
  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 + )}
  1184 +
  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 (
  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%" }}
971 1226 />
972   - ) : (
973   - ""
974   - )}
975   - {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}
976   - <Select
977   - optionLabelProp="label"
978   - className="mySelects"
979   - style={{ width: "80%" }}
980   - defaultValue={boxList[uniqueIndex]?.value}
981   - onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}
982   - onDropdownVisibleChange={async open => {
983   - if (open) {
984   - props.getSqlOptions(10); // 盒身
985   - }
986   - }}
987   - >
988   - {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
989   - </Select>
  1227 + </div>
990 1228 </div>
991   - </div>
992   - );
993   - })
994   - : ""}
995   - <div className={styles.boxFlexs}>
996   - {tableDataList && tableDataList.length
997   - ? tableDataList.map((item, index) => {
998   - const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;
  1229 + );
  1230 + })
  1231 + : ""}
  1232 + {boxBodyList && boxBodyList.length
  1233 + ? boxBodyList.map((item, index) => {
  1234 + const uniqueIndex = index + 9 + tableColum.length;
999 1235  
1000 1236 return (
1001   - <div key={uniqueIndex} className={styles.boxInputs}>
1002   - <div className={styles.text}>{item.sName}</div>
1003   - <Input
1004   - value={boxList[uniqueIndex]?.value}
1005   - onChange={e => handleChange(e, uniqueIndex)}
1006   - onFocus={e => handleFocus(e, uniqueIndex)}
1007   - onBlur={e => handleBlur(e, uniqueIndex)}
1008   - readOnly={!boxList[uniqueIndex]?.isEditable}
1009   - style={{ width: " 60%" }}
1010   - />
  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>
1011 1267 </div>
1012 1268 );
1013 1269 })
1014 1270 : ""}
  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>
1015 1292 </div>
1016 1293 </div>
1017 1294 </div>
1018   - </div>
  1295 + )}
1019 1296 </AntdDraggableModal>
1020 1297 );
1021 1298 };
... ...
src/components/Common/Typesetting/typesetting.js
  View file @dd43301
... ... @@ -38,7 +38,7 @@ const Typesetting = props =&gt; {
38 38 bAdvancedSetting, // 高级设置
39 39 sSvgPath,
40 40 dL = 0,
41   - dW = 0
  41 + dW = 0,
42 42 } = slaveRowData;
43 43 const { masterData, selectedNode, slaveData } = state;
44 44 if (!masterData) return;
... ... @@ -90,8 +90,8 @@ const Typesetting = props =&gt; {
90 90 // dHorizontal = 1;
91 91 // 如果需要自定义排版数
92 92 // 确认是竖向排列还是横向排列
93   - const L = slaveRowData.dL? Number(dL) : Number(masterData?.dLength) || 0;
94   - const W = slaveRowData.dW? Number(dW) : masterData?.dWidth || 0;
  93 + const L = slaveRowData.dL ? Number(dL) : Number(masterData?.dLength) || 0;
  94 + const W = slaveRowData.dW ? Number(dW) : masterData?.dWidth || 0;
95 95 const H = masterData?.dWidth || 0;
96 96 const D = masterData?.dHeight || 0;
97 97 // 动态计算公式值
... ... @@ -188,7 +188,7 @@ const Typesetting = props =&gt; {
188 188 ...result,
189 189 };
190 190 Object.keys(variabless).forEach(key => {
191   - if (variabless[key] === null || variabless[key] === undefined || variabless[key] === '') {
  191 + if (variabless[key] === null || variabless[key] === undefined || variabless[key] === "") {
192 192 variabless[key] = 0;
193 193 }
194 194 });
... ... @@ -205,7 +205,6 @@ const Typesetting = props =&gt; {
205 205 const boxWidthOffset = evaluateFormula(sSecondLongitudinalOffset, variabless); // 第二列纵向偏移
206 206 const isVertical = sSettingMethod === "从上到下"; // true 表示竖向排列，false 表示横向排列 sSettingMethod === '从上到下'
207 207 const reference = sSGroupOffset === "首盒"; // 第三列参考
208   -
209 208 // 计算内层盒子尺寸 加上间距
210 209 let jInnerHeight = innerHeight;
211 210 let jInnerWidth = innerWidth;
... ... @@ -221,13 +220,14 @@ const Typesetting = props =&gt; {
221 220 jInnerWidth = innerWidth;
222 221 }
223 222  
224   - const innerHeightCombined = isVertical
225   - ? jInnerHeight * 2 + dSWidthOffset + dFWidthOffset + dXBJJ
226   - : Math.max(jInnerHeight + dFWidthOffset, jInnerHeight + dSWidthOffset) + dXBJJ; // 计算内层盒子高度 从上向下排列 取首盒加偏移量和次盒加偏移量最大的值 从左往右排列 盒子尺寸 * 2 加上首盒偏移量和次盒偏移量
  223 + const innerHeightCombined = (isVertical
  224 + ? jInnerHeight * 2 + dSWidthOffset + dFWidthOffset
  225 + : Math.max(jInnerHeight + dFWidthOffset, jInnerHeight + dSWidthOffset)) + dXBJJ; // 计算内层盒子高度 从上向下排列 取首盒加偏移量和次盒加偏移量最大的值 从左往右排列 盒子尺寸 * 2 加上首盒偏移量和次盒偏移量
227 226 // 计算内层盒子宽度 从上向下排列 取首盒加偏移量和次盒加偏移量最大的值 从左往右排列 盒子尺寸 * 2 加上首盒偏移量和次盒偏移量
228   - const innerWidthCombined = isVertical
229   - ? Math.max(jInnerWidth + dFLengthOffset, jInnerWidth + dSLengthOffset) + dYBJJ
230   - : jInnerWidth * 2 + dSLengthOffset + dFLengthOffset + dYBJJ;
  227 + const innerWidthCombined = (isVertical
  228 + ? Math.max(jInnerWidth + dFLengthOffset, jInnerWidth + dSLengthOffset)
  229 + : jInnerWidth * 2 + dSLengthOffset + dFLengthOffset) + dYBJJ;
  230 +
231 231 const style = {
232 232 width: `${outerWidth}px`,
233 233 height: `${outerHeight}px`,
... ... @@ -245,19 +245,19 @@ const Typesetting = props =&gt; {
245 245  
246 246 let rowsMaxLength =
247 247 rows * (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset) + dXBJJ) + dSBLB + dXBLB - (reference ? 0 : dSWidthOffset);
248   - while (colsMaxLength >= outerWidth && cols > 0) {
  248 + while (colsMaxLength > outerWidth && cols > 0) {
249 249 cols = cols - 1;
250 250 colsMaxLength = cols * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset) + dYBJJ);
251 251 }
252 252  
253   - while (rowsMaxLength >= outerHeight && rows > 0) {
  253 + while (rowsMaxLength > outerHeight && rows > 0) {
254 254 rows = rows - 1;
255 255 rowsMaxLength = rows * (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset) + dXBJJ);
256 256 }
257 257 // 最大上机长 上机宽 开料尺寸
258 258 // 计算剩余空间 每组都算上偏移量 那么剩余需要加上后面偏移的总量
259   - const remainingWidth = outerWidth - colsMaxLength - (boxLengthOffset + (reference ? 0 : dSLengthOffset) + dYBJJ);
260   - const remainingHeight = outerHeight - rowsMaxLength - (boxWidthOffset + (reference ? 0 : dSWidthOffset) + dXBJJ);
  259 + const remainingWidth = outerWidth - colsMaxLength + (boxLengthOffset + (reference ? 0 : dSLengthOffset));
  260 + const remainingHeight = outerHeight - rowsMaxLength + (boxWidthOffset + (reference ? 0 : dSWidthOffset));
261 261 // const remainingWidth =
262 262 // outerWidth -
263 263 // (cols * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset)) - boxLengthOffset - (reference ? 0 : dSLengthOffset));
... ... @@ -268,8 +268,8 @@ const Typesetting = props =&gt; {
268 268 const commonHeightCheck = remainingHeight > jInnerHeight + dXBJJ;
269 269 const commonWidthCheck = remainingWidth > jInnerWidth + dYBJJ;
270 270 const isCustomized = bAdvancedSetting;
271   -
272 271 let remaining = isVertical ? commonHeightCheck : commonWidthCheck;
  272 + console.log(dSLengthOffset,'次盒横向偏移量');
273 273  
274 274 // 判断
275 275 // const remaining = false;
... ... @@ -336,7 +336,7 @@ const Typesetting = props =&gt; {
336 336 <div
337 337 key={`${col}-${row}-${index}`}
338 338 style={{
339   - width: `${innerWidthCombined}px`,
  339 + width: `${ innerWidthCombined }px`,
340 340 height: `${innerHeightCombined}px`,
341 341 display: "flex",
342 342 justifyContent: "center",
... ... @@ -380,7 +380,7 @@ const Typesetting = props =&gt; {
380 380 <div
381 381 key={`${col}-${row}-${index}-1`}
382 382 style={{
383   - width: `${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`,
  383 + width: `${(iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth)}px`,
384 384 height: `${iSAngle === 90 || iSAngle === 270 ? jInnerHeight : innerHeight}px`,
385 385 display: "flex",
386 386 justifyContent: "center",
... ... @@ -458,12 +458,12 @@ const Typesetting = props =&gt; {
458 458 if (reference) {
459 459 return col === 0 ? leftPosition : leftPosition;
460 460 }
461   - return col === 0 ? leftPosition : leftPosition + boxLengthOffset * col;
  461 + return col === 0 ? leftPosition : leftPosition + (boxLengthOffset + dYBJJ) * col;
462 462 } else {
463 463 if (reference) {
464 464 return col === 0 ? leftPosition : leftPosition;
465 465 }
466   - return col === 0 ? leftPosition : leftPosition + boxLengthOffset * col + dSLengthOffset * col;
  466 + return col === 0 ? leftPosition : leftPosition + (boxLengthOffset + dYBJJ) * col + dSLengthOffset * col;
467 467 }
468 468 };
469 469 // 计算上偏移
... ... @@ -505,59 +505,59 @@ const Typesetting = props =&gt; {
505 505 if (cols > 0) {
506 506 for (let col = 0; col < cols; col++) {
507 507 const leftPosition = col * innerWidthCombined;
508   - const topPosition = 0 * (innerHeightCombined + dXBJJ);
  508 + const topPosition = 0 * (innerHeightCombined );
509 509 innerDivs.push(createBoxOne(col, 0, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
510 510 }
511 511 }
512 512 if (rows > 0) {
513 513 for (let row = 0; row < rows; row++) {
514 514 const leftPosition = 0 * innerWidthCombined;
515   - const topPosition = row * (innerHeightCombined + dXBJJ);
  515 + const topPosition = row * (innerHeightCombined);
516 516 innerDivs.push(createBoxOne(0, row, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
517 517 }
518 518 }
519 519 } else {
  520 + let hasPushed = false; // 标志变量
520 521 for (let col = 0; col < cols; col++) {
521 522 for (let row = 0; row < rows; row++) {
522 523 const leftPosition = col * innerWidthCombined;
523   - const topPosition = row * (innerHeightCombined + dXBJJ);
  524 + const topPosition = row * (innerHeightCombined);
524 525 innerDivs.push(createBox(col, row, 1, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
525 526 }
526 527 // 如果可以放下首盒
527   - if (remaining) {
528   - if (isVertical) {
529   - let leftPosition = 0;
  528 + }
  529 + if (remaining) {
  530 + if (isVertical) {
  531 + let leftPosition = 0;
  532 + let topPosition = 0;
  533 + if (reference) {
  534 + // 是否首盒
  535 + // 首盒的上边距下边距 末尾盒子的上下边距 添加那一行的上边距
  536 + leftPosition = cols - 1 * innerWidthCombined + dFLengthOffset;
  537 + topPosition = rows * (innerHeightCombined ) + dFWidthOffset;
  538 + } else {
  539 + leftPosition = cols - 1 * innerWidthCombined;
  540 + topPosition = rows * (innerHeightCombined);
  541 + }
  542 + innerDivs.push(createBoxOne(cols - 1, rows, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
  543 + } else {
  544 + // 只会在横向排的时候
  545 + for (let index = 0; index < rows; index++) {
  546 + // 先默认为首盒参考
530 547 let topPosition = 0;
  548 + let leftPosition = 0;
531 549 if (reference) {
532   - // 是否首盒
533   - // 首盒的上边距下边距 末尾盒子的上下边距 添加那一行的上边距
534   - leftPosition = col * innerWidthCombined + dFLengthOffset;
535   - topPosition = rows * (innerHeightCombined + dXBJJ) + dFWidthOffset;
  550 + topPosition = index * (innerHeightCombined + boxWidthOffset) ;
  551 + leftPosition = cols * (innerWidthCombined + boxLengthOffset) ;
536 552 } else {
537   - leftPosition = col * innerWidthCombined;
538   - topPosition = rows * (innerHeightCombined + dXBJJ);
539   - }
540   - innerDivs.push(createBoxOne(col, rows, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
541   - } else {
542   - for (let index = 0; index < rows; index++) {
543   - // 先默认为首盒参考
544   - let topPosition = 0;
545   - let leftPosition = 0;
546   - if (reference) {
547   - topPosition = index * (innerHeightCombined + boxWidthOffset);
548   - leftPosition = cols * (innerWidthCombined + boxLengthOffset + dXBJJ);
549   - } else {
550   - topPosition = index * (innerHeightCombined + boxWidthOffset + dSWidthOffset + dXBJJ);
551   - leftPosition = cols * (innerWidthCombined + boxLengthOffset + dSLengthOffset);
552   - }
553   - innerDivs.push(createDiv(col, index, 3, leftPosition + col * dYBJJ, topPosition + index * dXBJJ, iFAngle, DisableMateriallIcon));
  553 + topPosition = index * (innerHeightCombined + boxWidthOffset + dSWidthOffset) ;
  554 + leftPosition = cols * (innerWidthCombined + boxLengthOffset + dSLengthOffset) + dYBJJ;
554 555 }
  556 + innerDivs.push(createDiv(cols - 1, index, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
555 557 }
556 558 }
557 559 }
558 560 }
559   - console.log(cols,rows,'cols');
560   -
561 561 // 判断展开长展开宽是否变化
562 562 if (dPartsLength !== innerWidth && !innerDivs.length) {
563 563 setDPartsLength(innerWidth);
... ... @@ -575,9 +575,10 @@ const Typesetting = props =&gt; {
575 575 const propsDataHeight = Number(propsData.props.style.height.slice(0, -2));
576 576 const propsDataTop = Number(propsData.props.style.top.slice(0, -2));
577 577 // 判断列是否是单独的
578   -
  578 + console.log(cols,rows,'rows');
  579 +
579 580 const newMaterialLength = parseFloat(propsDataLeft + (remaining ? jInnerWidth : innerWidthCombined) + dZBLB + dYBLB).toFixed(2); // 原纸长
580   - const newMaterialWidth = parseFloat(propsDataTop + propsDataHeight + dSBLB + dXBLB).toFixed(2);
  581 + const newMaterialWidth = parseFloat(propsDataTop + propsDataHeight + dSBLB + dXBLB - (rows >= 1 ? dXBJJ : 0)).toFixed(2);
581 582  
582 583 // 计算开数
583 584 let dSinglePQty = isVertical
... ... @@ -699,7 +700,7 @@ const Typesetting = props =&gt; {
699 700 Number(slaveDataDetail?.dMaxWidth) >= Number(slaveRowData?.dMachineWidth);
700 701  
701 702 const isShow = slaveRowData && slaveRowData.dMachineLength && slaveRowData.dMaxWidth && slaveRowData.dMaxLength && isMax && innerDivs.length > 0;
702   -
  703 +
703 704 const confirmParam = commonFunc.showLocalMessage(props, "confirmParam", "排版尺寸大于上机尺寸，请确认参数!");
704 705 const isJuantong = selectedNode.sTypeKey === "juantong";
705 706 if (isCustomized && !isShow) {
... ...