Commit dd43301aeecd0407da164e392c196b748dbc9f3c
1 parent
5532c55e
盒型排版尺寸
Showing
3 changed files
with
881 additions
and
282 deletions
src/components/Common/BoxDesignCompontent/compontents/doubleLayer.js
0 → 100644
| 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
| @@ -14,6 +14,7 @@ import jsPreviewPdf from "@js-preview/pdf"; | @@ -14,6 +14,7 @@ import jsPreviewPdf from "@js-preview/pdf"; | ||
| 14 | import commonConfig from "@/utils/config"; | 14 | import commonConfig from "@/utils/config"; |
| 15 | import SvgBox from "./svg"; | 15 | import SvgBox from "./svg"; |
| 16 | import styles from "./index.less"; | 16 | import styles from "./index.less"; |
| 17 | +import DoubleLayerBox from "./compontents/doubleLayer"; | ||
| 17 | const BoxDesignEvent = props => { | 18 | const BoxDesignEvent = props => { |
| 18 | const addState = {}; | 19 | const addState = {}; |
| 19 | const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props; | 20 | const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props; |
| @@ -218,6 +219,7 @@ const BoxDesignCompontent = baseProps => { | @@ -218,6 +219,7 @@ const BoxDesignCompontent = baseProps => { | ||
| 218 | setBoxList(newBoxList); | 219 | setBoxList(newBoxList); |
| 219 | } | 220 | } |
| 220 | }, [newBoxList]); | 221 | }, [newBoxList]); |
| 222 | + console.log(boxList, "boxList"); | ||
| 221 | 223 | ||
| 222 | const arraysAreEqual = (arr1, arr2) => { | 224 | const arraysAreEqual = (arr1, arr2) => { |
| 223 | if (arr1.length !== arr2.length) return false; | 225 | if (arr1.length !== arr2.length) return false; |
| @@ -261,7 +263,7 @@ const BoxDesignCompontent = baseProps => { | @@ -261,7 +263,7 @@ const BoxDesignCompontent = baseProps => { | ||
| 261 | box.forEach(x => { | 263 | box.forEach(x => { |
| 262 | x.show = true; | 264 | x.show = true; |
| 263 | }); | 265 | }); |
| 264 | - const title = ["盒底组件", "左贴边位", "右贴边位","上方盒舌","下方盒舌"]; | 266 | + const title = ["盒底组件", "左贴边位", "右贴边位", "上方盒舌", "下方盒舌"]; |
| 265 | box.forEach(x => title.includes(x.sName) && (x.show = false)); | 267 | box.forEach(x => title.includes(x.sName) && (x.show = false)); |
| 266 | setTopBoxList(box.filter(topBoxFilter)); | 268 | setTopBoxList(box.filter(topBoxFilter)); |
| 267 | setLeftBoxList(box.filter(leftBoxFilter)); | 269 | setLeftBoxList(box.filter(leftBoxFilter)); |
| @@ -279,6 +281,7 @@ const BoxDesignCompontent = baseProps => { | @@ -279,6 +281,7 @@ const BoxDesignCompontent = baseProps => { | ||
| 279 | 281 | ||
| 280 | updateLists(); | 282 | updateLists(); |
| 281 | }, [boxList]); | 283 | }, [boxList]); |
| 284 | + const boxType = boxList.find(item => item.sName === "盒身")?.type; | ||
| 282 | 285 | ||
| 283 | const handleFocus = (e, index) => { | 286 | const handleFocus = (e, index) => { |
| 284 | if (boxList && boxList.length) { | 287 | if (boxList && boxList.length) { |
| @@ -355,6 +358,10 @@ const BoxDesignCompontent = baseProps => { | @@ -355,6 +358,10 @@ const BoxDesignCompontent = baseProps => { | ||
| 355 | boxList, | 358 | boxList, |
| 356 | showNew: 0, | 359 | showNew: 0, |
| 357 | }; | 360 | }; |
| 361 | + const dobuleProps = { | ||
| 362 | + ...props, | ||
| 363 | + renderOptionWithImage, | ||
| 364 | + }; | ||
| 358 | // 计算展长展宽 | 365 | // 计算展长展宽 |
| 359 | // 创建盒型 | 366 | // 创建盒型 |
| 360 | const submit = () => { | 367 | const submit = () => { |
| @@ -740,6 +747,17 @@ const BoxDesignCompontent = baseProps => { | @@ -740,6 +747,17 @@ const BoxDesignCompontent = baseProps => { | ||
| 740 | const i = boxList.findIndex(x => x.sName === name); | 747 | const i = boxList.findIndex(x => x.sName === name); |
| 741 | return i || 0; | 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 | return ( | 761 | return ( |
| 744 | <AntdDraggableModal | 762 | <AntdDraggableModal |
| 745 | width="1000px" | 763 | width="1000px" |
| @@ -760,262 +778,521 @@ const BoxDesignCompontent = baseProps => { | @@ -760,262 +778,521 @@ const BoxDesignCompontent = baseProps => { | ||
| 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 | <img | 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 | </div> | 945 | </div> |
| 946 | + ))} | ||
| 947 | + </div> | ||
| 948 | + <div className={styles.boxBottom}> | ||
| 949 | + <div className={styles.svgBox}> | ||
| 950 | + <SvgBox {...svgBoxProps} /> | ||
| 868 | </div> | 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 | </div> | 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 | <img | 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 | </div> | 1087 | </div> |
| 926 | - </div> | ||
| 927 | - ))} | ||
| 928 | - </div> | ||
| 929 | - <div className={styles.boxBottom}> | ||
| 930 | - <div className={styles.svgBox}> | ||
| 931 | - <SvgBox {...svgBoxProps} /> | 1088 | + ))} |
| 932 | </div> | 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 | </div> | 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 | return ( | 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 | </div> | 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 | </div> | 1292 | </div> |
| 1016 | </div> | 1293 | </div> |
| 1017 | </div> | 1294 | </div> |
| 1018 | - </div> | 1295 | + )} |
| 1019 | </AntdDraggableModal> | 1296 | </AntdDraggableModal> |
| 1020 | ); | 1297 | ); |
| 1021 | }; | 1298 | }; |
src/components/Common/Typesetting/typesetting.js
| @@ -38,7 +38,7 @@ const Typesetting = props => { | @@ -38,7 +38,7 @@ const Typesetting = props => { | ||
| 38 | bAdvancedSetting, // 高级设置 | 38 | bAdvancedSetting, // 高级设置 |
| 39 | sSvgPath, | 39 | sSvgPath, |
| 40 | dL = 0, | 40 | dL = 0, |
| 41 | - dW = 0 | 41 | + dW = 0, |
| 42 | } = slaveRowData; | 42 | } = slaveRowData; |
| 43 | const { masterData, selectedNode, slaveData } = state; | 43 | const { masterData, selectedNode, slaveData } = state; |
| 44 | if (!masterData) return; | 44 | if (!masterData) return; |
| @@ -90,8 +90,8 @@ const Typesetting = props => { | @@ -90,8 +90,8 @@ const Typesetting = props => { | ||
| 90 | // dHorizontal = 1; | 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 | const H = masterData?.dWidth || 0; | 95 | const H = masterData?.dWidth || 0; |
| 96 | const D = masterData?.dHeight || 0; | 96 | const D = masterData?.dHeight || 0; |
| 97 | // 动态计算公式值 | 97 | // 动态计算公式值 |
| @@ -188,7 +188,7 @@ const Typesetting = props => { | @@ -188,7 +188,7 @@ const Typesetting = props => { | ||
| 188 | ...result, | 188 | ...result, |
| 189 | }; | 189 | }; |
| 190 | Object.keys(variabless).forEach(key => { | 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 | variabless[key] = 0; | 192 | variabless[key] = 0; |
| 193 | } | 193 | } |
| 194 | }); | 194 | }); |
| @@ -205,7 +205,6 @@ const Typesetting = props => { | @@ -205,7 +205,6 @@ const Typesetting = props => { | ||
| 205 | const boxWidthOffset = evaluateFormula(sSecondLongitudinalOffset, variabless); // 第二列纵向偏移 | 205 | const boxWidthOffset = evaluateFormula(sSecondLongitudinalOffset, variabless); // 第二列纵向偏移 |
| 206 | const isVertical = sSettingMethod === "从上到下"; // true 表示竖向排列，false 表示横向排列 sSettingMethod === '从上到下' | 206 | const isVertical = sSettingMethod === "从上到下"; // true 表示竖向排列，false 表示横向排列 sSettingMethod === '从上到下' |
| 207 | const reference = sSGroupOffset === "首盒"; // 第三列参考 | 207 | const reference = sSGroupOffset === "首盒"; // 第三列参考 |
| 208 | - | ||
| 209 | // 计算内层盒子尺寸 加上间距 | 208 | // 计算内层盒子尺寸 加上间距 |
| 210 | let jInnerHeight = innerHeight; | 209 | let jInnerHeight = innerHeight; |
| 211 | let jInnerWidth = innerWidth; | 210 | let jInnerWidth = innerWidth; |
| @@ -221,13 +220,14 @@ const Typesetting = props => { | @@ -221,13 +220,14 @@ const Typesetting = props => { | ||
| 221 | jInnerWidth = innerWidth; | 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 | // 计算内层盒子宽度 从上向下排列 取首盒加偏移量和次盒加偏移量最大的值 从左往右排列 盒子尺寸 * 2 加上首盒偏移量和次盒偏移量 | 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 | const style = { | 231 | const style = { |
| 232 | width: `${outerWidth}px`, | 232 | width: `${outerWidth}px`, |
| 233 | height: `${outerHeight}px`, | 233 | height: `${outerHeight}px`, |
| @@ -245,19 +245,19 @@ const Typesetting = props => { | @@ -245,19 +245,19 @@ const Typesetting = props => { | ||
| 245 | 245 | ||
| 246 | let rowsMaxLength = | 246 | let rowsMaxLength = |
| 247 | rows * (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset) + dXBJJ) + dSBLB + dXBLB - (reference ? 0 : dSWidthOffset); | 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 | cols = cols - 1; | 249 | cols = cols - 1; |
| 250 | colsMaxLength = cols * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset) + dYBJJ); | 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 | rows = rows - 1; | 254 | rows = rows - 1; |
| 255 | rowsMaxLength = rows * (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset) + dXBJJ); | 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 | // const remainingWidth = | 261 | // const remainingWidth = |
| 262 | // outerWidth - | 262 | // outerWidth - |
| 263 | // (cols * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset)) - boxLengthOffset - (reference ? 0 : dSLengthOffset)); | 263 | // (cols * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset)) - boxLengthOffset - (reference ? 0 : dSLengthOffset)); |
| @@ -268,8 +268,8 @@ const Typesetting = props => { | @@ -268,8 +268,8 @@ const Typesetting = props => { | ||
| 268 | const commonHeightCheck = remainingHeight > jInnerHeight + dXBJJ; | 268 | const commonHeightCheck = remainingHeight > jInnerHeight + dXBJJ; |
| 269 | const commonWidthCheck = remainingWidth > jInnerWidth + dYBJJ; | 269 | const commonWidthCheck = remainingWidth > jInnerWidth + dYBJJ; |
| 270 | const isCustomized = bAdvancedSetting; | 270 | const isCustomized = bAdvancedSetting; |
| 271 | - | ||
| 272 | let remaining = isVertical ? commonHeightCheck : commonWidthCheck; | 271 | let remaining = isVertical ? commonHeightCheck : commonWidthCheck; |
| 272 | + console.log(dSLengthOffset,'次盒横向偏移量'); | ||
| 273 | 273 | ||
| 274 | // 判断 | 274 | // 判断 |
| 275 | // const remaining = false; | 275 | // const remaining = false; |
| @@ -336,7 +336,7 @@ const Typesetting = props => { | @@ -336,7 +336,7 @@ const Typesetting = props => { | ||
| 336 | <div | 336 | <div |
| 337 | key={`${col}-${row}-${index}`} | 337 | key={`${col}-${row}-${index}`} |
| 338 | style={{ | 338 | style={{ |
| 339 | - width: `${innerWidthCombined}px`, | 339 | + width: `${ innerWidthCombined }px`, |
| 340 | height: `${innerHeightCombined}px`, | 340 | height: `${innerHeightCombined}px`, |
| 341 | display: "flex", | 341 | display: "flex", |
| 342 | justifyContent: "center", | 342 | justifyContent: "center", |
| @@ -380,7 +380,7 @@ const Typesetting = props => { | @@ -380,7 +380,7 @@ const Typesetting = props => { | ||
| 380 | <div | 380 | <div |
| 381 | key={`${col}-${row}-${index}-1`} | 381 | key={`${col}-${row}-${index}-1`} |
| 382 | style={{ | 382 | style={{ |
| 383 | - width: `${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`, | 383 | + width: `${(iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth)}px`, |
| 384 | height: `${iSAngle === 90 || iSAngle === 270 ? jInnerHeight : innerHeight}px`, | 384 | height: `${iSAngle === 90 || iSAngle === 270 ? jInnerHeight : innerHeight}px`, |
| 385 | display: "flex", | 385 | display: "flex", |
| 386 | justifyContent: "center", | 386 | justifyContent: "center", |
| @@ -458,12 +458,12 @@ const Typesetting = props => { | @@ -458,12 +458,12 @@ const Typesetting = props => { | ||
| 458 | if (reference) { | 458 | if (reference) { |
| 459 | return col === 0 ? leftPosition : leftPosition; | 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 | } else { | 462 | } else { |
| 463 | if (reference) { | 463 | if (reference) { |
| 464 | return col === 0 ? leftPosition : leftPosition; | 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 => { | @@ -505,59 +505,59 @@ const Typesetting = props => { | ||
| 505 | if (cols > 0) { | 505 | if (cols > 0) { |
| 506 | for (let col = 0; col < cols; col++) { | 506 | for (let col = 0; col < cols; col++) { |
| 507 | const leftPosition = col * innerWidthCombined; | 507 | const leftPosition = col * innerWidthCombined; |
| 508 | - const topPosition = 0 * (innerHeightCombined + dXBJJ); | 508 | + const topPosition = 0 * (innerHeightCombined ); |
| 509 | innerDivs.push(createBoxOne(col, 0, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon)); | 509 | innerDivs.push(createBoxOne(col, 0, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon)); |
| 510 | } | 510 | } |
| 511 | } | 511 | } |
| 512 | if (rows > 0) { | 512 | if (rows > 0) { |
| 513 | for (let row = 0; row < rows; row++) { | 513 | for (let row = 0; row < rows; row++) { |
| 514 | const leftPosition = 0 * innerWidthCombined; | 514 | const leftPosition = 0 * innerWidthCombined; |
| 515 | - const topPosition = row * (innerHeightCombined + dXBJJ); | 515 | + const topPosition = row * (innerHeightCombined); |
| 516 | innerDivs.push(createBoxOne(0, row, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon)); | 516 | innerDivs.push(createBoxOne(0, row, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon)); |
| 517 | } | 517 | } |
| 518 | } | 518 | } |
| 519 | } else { | 519 | } else { |
| 520 | + let hasPushed = false; // 标志变量 | ||
| 520 | for (let col = 0; col < cols; col++) { | 521 | for (let col = 0; col < cols; col++) { |
| 521 | for (let row = 0; row < rows; row++) { | 522 | for (let row = 0; row < rows; row++) { |
| 522 | const leftPosition = col * innerWidthCombined; | 523 | const leftPosition = col * innerWidthCombined; |
| 523 | - const topPosition = row * (innerHeightCombined + dXBJJ); | 524 | + const topPosition = row * (innerHeightCombined); |
| 524 | innerDivs.push(createBox(col, row, 1, leftPosition, topPosition, iFAngle, DisableMateriallIcon)); | 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 | let topPosition = 0; | 547 | let topPosition = 0; |
| 548 | + let leftPosition = 0; | ||
| 531 | if (reference) { | 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 | } else { | 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 | if (dPartsLength !== innerWidth && !innerDivs.length) { | 562 | if (dPartsLength !== innerWidth && !innerDivs.length) { |
| 563 | setDPartsLength(innerWidth); | 563 | setDPartsLength(innerWidth); |
| @@ -575,9 +575,10 @@ const Typesetting = props => { | @@ -575,9 +575,10 @@ const Typesetting = props => { | ||
| 575 | const propsDataHeight = Number(propsData.props.style.height.slice(0, -2)); | 575 | const propsDataHeight = Number(propsData.props.style.height.slice(0, -2)); |
| 576 | const propsDataTop = Number(propsData.props.style.top.slice(0, -2)); | 576 | const propsDataTop = Number(propsData.props.style.top.slice(0, -2)); |
| 577 | // 判断列是否是单独的 | 577 | // 判断列是否是单独的 |
| 578 | - | 578 | + console.log(cols,rows,'rows'); |
| 579 | + | ||
| 579 | const newMaterialLength = parseFloat(propsDataLeft + (remaining ? jInnerWidth : innerWidthCombined) + dZBLB + dYBLB).toFixed(2); // 原纸长 | 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 | let dSinglePQty = isVertical | 584 | let dSinglePQty = isVertical |
| @@ -699,7 +700,7 @@ const Typesetting = props => { | @@ -699,7 +700,7 @@ const Typesetting = props => { | ||
| 699 | Number(slaveDataDetail?.dMaxWidth) >= Number(slaveRowData?.dMachineWidth); | 700 | Number(slaveDataDetail?.dMaxWidth) >= Number(slaveRowData?.dMachineWidth); |
| 700 | 701 | ||
| 701 | const isShow = slaveRowData && slaveRowData.dMachineLength && slaveRowData.dMaxWidth && slaveRowData.dMaxLength && isMax && innerDivs.length > 0; | 702 | const isShow = slaveRowData && slaveRowData.dMachineLength && slaveRowData.dMaxWidth && slaveRowData.dMaxLength && isMax && innerDivs.length > 0; |
| 702 | - | 703 | + |
| 703 | const confirmParam = commonFunc.showLocalMessage(props, "confirmParam", "排版尺寸大于上机尺寸，请确认参数!"); | 704 | const confirmParam = commonFunc.showLocalMessage(props, "confirmParam", "排版尺寸大于上机尺寸，请确认参数!"); |
| 704 | const isJuantong = selectedNode.sTypeKey === "juantong"; | 705 | const isJuantong = selectedNode.sTypeKey === "juantong"; |
| 705 | if (isCustomized && !isShow) { | 706 | if (isCustomized && !isShow) { |