卷筒类单独配置

陈鑫涛
1 parent d7151f0d
Showing 4 changed files with 191 additions and 66 deletions
src/components/Common/Typesetting/typesetting.js
src/components/QuickQuote/index.css
src/components/QuickQuote/index.jsx
src/components/QuickQuote/index.less
@@ -23,7 +23,7 @@ const Typesetting = props =&gt; {
     isMobile,
   } = props;
   if (!slaveRowData) return;
-  const {
+  let {
     dSBLB, // 上边留白
     dXBLB, // 下边留白
     dZBLB, // 左边留白
@@ -38,7 +38,14 @@ const Typesetting = props =&gt; {
     sColumnNameConfig,
     bAdvancedSetting, // 高级设置
   } = slaveRowData;
+  
   const { masterData, selectedNode, slaveData } = state;
+  // 如果是卷筒类 那么上下左右留白等于左留白
+  if (selectedNode && selectedNode.sTypeKey === 'juantong') {
+    dSBLB = dZBLB
+    dXBLB = dZBLB
+    dYBLB = dZBLB
+  }
   // 生成盒子图片
   const [boxKey, setBoxKey] = useState(new Date().getTime());
   const [boxKeys, setBoxKeys] = useState(new Date().getTime());
@@ -12,38 +12,16 @@
 .quickQuote .content :global .ant-btn-primary {
   border-radius: 5px;
 }
+.quickQuote .content :global .ant-col-23 {
+  display: flex !important;
+}
 .quickQuote .content .back {
   position: absolute;
-  top: 16px;
-  left: 360px;
+  top: 5px;
+  left: 218px;
   z-index: 10;
-}
-.quickQuote .content .leftTree {
-  width: 250px;
-  height: 100%;
-  background: #3274b7;
-  padding: 10px 0 0 10px;
-  overflow: hidden;
-}
-.quickQuote .content .leftTree :global .ant-tree {
-  background: transparent;
-}
-.quickQuote .content .leftTree :global .ant-tree .ant-tree-treenode {
-  padding-bottom: 10px;
-}
-.quickQuote .content .leftTree :global .ant-tree .ant-tree-title {
-  color: #fff;
-  font-size: 16px;
-  font-weight: bold;
-}
-.quickQuote .content .leftTree :global .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
-  background-color: #00a183;
-}
-.quickQuote .content .leftTree :global .ant-tree .ant-tree-node-content-wrapper:hover {
-  background-color: #009688;
-}
-.quickQuote .content .overFlow {
-  overflow: auto;
+  border: 1px solid #d7d7d7;
+  border-right-width: 0;
 }
 .quickQuote .content .rightContent {
   flex: 1;
@@ -101,46 +79,65 @@
 .quickQuote .content .rightContent .viewTable1 :global .viewStyle .ant-col {
   margin-bottom: 2px;
 }
-.quickQuote .content .rightContent .viewTable .subViewTable,
-.quickQuote .content .rightContent .viewTable1 .subViewTable {
+.quickQuote .content .rightContent .viewTableDownView :global .viewStyle,
+.quickQuote .content .rightContent .viewTableDownView1 :global .viewStyle {
+  padding-right: 14px;
+}
+.quickQuote .content .rightContent .viewTableDownView :global .viewStyle .ant-form-item-label,
+.quickQuote .content .rightContent .viewTableDownView1 :global .viewStyle .ant-form-item-label {
+  flex: 0 0 70px !important;
+  max-width: 70px !important;
+}
+.quickQuote .content .rightContent .viewTableDownView :global .viewStyle .ant-form-item-control,
+.quickQuote .content .rightContent .viewTableDownView1 :global .viewStyle .ant-form-item-control {
+  max-width: calc(100% - 95px);
+}
+.quickQuote .content .rightContent .viewTableDownView .subViewTable,
+.quickQuote .content .rightContent .viewTableDownView1 .subViewTable {
   width: 100%;
   height: auto;
 }
-.quickQuote .content .rightContent .viewTable .subViewTable :global .ant-form-item-row,
-.quickQuote .content .rightContent .viewTable1 .subViewTable :global .ant-form-item-row {
+.quickQuote .content .rightContent .viewTableDownView .subViewTable :global .ant-form-item-row,
+.quickQuote .content .rightContent .viewTableDownView1 .subViewTable :global .ant-form-item-row {
   flex-direction: row-reverse;
 }
-.quickQuote .content .rightContent .viewTable .subViewTable :global .ant-form-item-label,
-.quickQuote .content .rightContent .viewTable1 .subViewTable :global .ant-form-item-label {
+.quickQuote .content .rightContent .viewTableDownView .subViewTable :global .ant-form-item-label,
+.quickQuote .content .rightContent .viewTableDownView1 .subViewTable :global .ant-form-item-label {
   flex: 0 0 25px !important;
   max-width: 25px !important;
 }
-.quickQuote .content .rightContent .viewTable .subViewTable :global .ant-form-item-label > label,
-.quickQuote .content .rightContent .viewTable1 .subViewTable :global .ant-form-item-label > label {
+.quickQuote .content .rightContent .viewTableDownView .subViewTable :global .ant-form-item-label > label,
+.quickQuote .content .rightContent .viewTableDownView1 .subViewTable :global .ant-form-item-label > label {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
 }
-.quickQuote .content .rightContent .viewTable .subViewTable :global .ant-form-item-label > label::before,
-.quickQuote .content .rightContent .viewTable1 .subViewTable :global .ant-form-item-label > label::before {
+.quickQuote .content .rightContent .viewTableDownView .subViewTable :global .ant-form-item-label > label::before,
+.quickQuote .content .rightContent .viewTableDownView1 .subViewTable :global .ant-form-item-label > label::before {
   content: none;
   width: 0;
 }
-.quickQuote .content .rightContent .viewTable .subViewTable :global .ant-form-item-label > label::after,
-.quickQuote .content .rightContent .viewTable1 .subViewTable :global .ant-form-item-label > label::after {
+.quickQuote .content .rightContent .viewTableDownView .subViewTable :global .ant-form-item-label > label::after,
+.quickQuote .content .rightContent .viewTableDownView1 .subViewTable :global .ant-form-item-label > label::after {
   content: none;
   width: 0;
 }
-.quickQuote .content .rightContent .viewTable .subViewTable :global .ant-form-item-control,
-.quickQuote .content .rightContent .viewTable1 .subViewTable :global .ant-form-item-control {
+.quickQuote .content .rightContent .viewTableDownView .subViewTable :global .ant-form-item-control,
+.quickQuote .content .rightContent .viewTableDownView1 .subViewTable :global .ant-form-item-control {
   flex: 1;
   max-width: calc(100% - 25px);
 }
-.quickQuote .content .rightContent .viewTable .subViewTable :global .viewStyle > .ant-col-24,
-.quickQuote .content .rightContent .viewTable1 .subViewTable :global .viewStyle > .ant-col-24 {
+.quickQuote .content .rightContent .viewTableDownView .subViewTable :global .viewStyle > .ant-col-24,
+.quickQuote .content .rightContent .viewTableDownView1 .subViewTable :global .viewStyle > .ant-col-24 {
   padding-left: 100px;
 }
+.quickQuote .content .rightContent .viewTableDownView1 :global .viewStyle .ant-form-item-control {
+  max-width: calc(100% - 60px);
+}
+.quickQuote .content .rightContent .viewTableDownView2 {
+  background-color: #3275b734;
+}
 .quickQuote .content .rightContent .viewTable1 {
   padding: 0 20px 0 0;
 }
@@ -290,3 +287,89 @@
   background-color: #53b637;
   border-color: #53b637;
 }
+.leftTree,
+.boxTree {
+  width: 250px;
+  height: 100%;
+  background: var(--xly-skin-header-color, #383d41);
+  padding: 10px 0 0 10px;
+  overflow: hidden;
+}
+.leftTree :global .ant-tree,
+.boxTree :global .ant-tree {
+  background: transparent;
+}
+.leftTree :global .ant-tree .ant-tree-treenode,
+.boxTree :global .ant-tree .ant-tree-treenode {
+  padding-bottom: 10px;
+}
+.leftTree :global .ant-tree .ant-tree-title,
+.boxTree :global .ant-tree .ant-tree-title {
+  color: #fff;
+  font-size: 14px;
+  font-family: Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif !important;
+}
+.leftTree :global .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
+.boxTree :global .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
+  background-color: #00a183;
+}
+.leftTree :global .ant-tree .ant-tree-node-content-wrapper:hover,
+.boxTree :global .ant-tree .ant-tree-node-content-wrapper:hover {
+  background-color: #009688;
+}
+.boxTree {
+  background: transparent;
+}
+.boxTree :global .ant-tree .ant-tree-title,
+.boxTree :global .ant-tree .ant-badge {
+  color: #5c6374;
+  font-size: 16px;
+  font-weight: bold;
+}
+.boxTree :global .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
+  background-color: #bae7ff;
+}
+.boxTree :global .ant-tree .ant-tree-node-content-wrapper:hover {
+  background-color: #bae7ff;
+}
+.overFlow {
+  overflow: auto;
+}
+.boxModal {
+  width: 100%;
+  height: calc(100vh - 335px);
+  display: flex;
+}
+.boxModal .boxTree {
+  width: 200px;
+  height: 100%;
+}
+.boxModal .boxTable {
+  width: calc(100% - 200px);
+  height: 100%;
+}
+.downOperations {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+}
+.downOperations :global button {
+  padding: 0;
+  width: 16px;
+  height: 16px;
+}
+.downOperations :global button > span {
+  font-size: 10px;
+}
+.sParamConfig :global .ant-form-item-label label::before {
+  content: "";
+  display: block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: #ff4d4f;
+  margin-right: 2px;
+}
@@ -84,6 +84,7 @@ const QuickQuoteEvent = props =&gt; {
   const { bLinkFieledClick } = props;
   const [hideBackBtn, setHideBackBtn] = useState(false);
   const [enabled, setEnabled] = useState(props.enabled);
+
   useEffect(() => {
     setHideBackBtn(!bLinkFieledClick);
     setEnabled(!bLinkFieledClick || props.enabled);
@@ -1297,9 +1298,10 @@ const MasterComponent = props =&gt; {
   const ableConfigs = masterConfig.gdsconfigformslave.filter(item => item.sName && item.bVisible);
   // 处理长宽样式
-  const viewConfigs = ((selectedNode?.bBox && selectedNode.sTypeKey !== "kapai" && selectedNode?.bBox && selectedNode.sTypeKey !== "juantong") )
-    ? ableConfigs
-    : ableConfigs.filter(x => x.sName !== "dHeight");
+  const viewConfigs =
+    selectedNode?.bBox && selectedNode.sTypeKey !== "kapai" && selectedNode?.bBox && selectedNode.sTypeKey !== "juantong"
+      ? ableConfigs
+      : ableConfigs.filter(x => x.sName !== "dHeight");
   if (selectedNode?.bBox && selectedNode.sTypeKey !== "kapai" && selectedNode?.bBox && selectedNode.sTypeKey !== "juantong") {
     viewConfigs.forEach(item => {
       if (item.sName === "dLength" || item.sName === "dWidth") {
@@ -1437,8 +1439,24 @@ const BoxComponent = props =&gt; {
       });
     let boxConfigList = [];
     if (iTag === 20) {
-      const showNameKeyList = ["dZBLB", "dSBLB", "dYBLB", "dXBLB", "dZBJJ", "dYBJJ", "dSBJJ", "dXBJJ"];
+      let showNameKeyList = ["dZBLB", "dSBLB", "dYBLB", "dXBLB", "dZBJJ", "dYBJJ", "dSBJJ", "dXBJJ"];
+      if (selectedNode.sTypeKey === "juantong") {
+        showNameKeyList = ["dZBLB", "dZBJJ", "dYBJJ", "dSBJJ", "dXBJJ"];
+      }
       boxConfigList = boxConfig?.gdsconfigformslave?.filter(item => item.bVisible && showNameKeyList.includes(item.sName)) || [];
+      if (selectedNode.sTypeKey === "juantong") {
+        const mappings = {
+          dZBLB: "留边",
+          dXBJJ: "跳距",
+          dYBJJ: "间距",
+        };
+
+        boxConfigList.forEach(item => {
+          if (mappings[item.sName]) {
+            item.showName = mappings[item.sName];
+          }
+        });
+      }
     }
     const newConfig = [...boxConfigList, ...config];
     return {
@@ -1474,6 +1492,7 @@ const BoxComponent = props =&gt; {
   }
   // 拼板信息表单
   const upViewProps20 = getUpViewPropsByITag(20);
+  // 如果是卷筒类需要单独处理
   const { sBackProcessData = [] } = slaveRowData;
@@ -1742,10 +1761,27 @@ const BoxComponent = props =&gt; {
         dHorizontalType: dHorizontalType, // 判断
         dPortraitType: dPortraitType,
       };
+      let juantongConfig = {
+
+      }
+      if (selectedNode.sTypeKey === 'juantong') {
+        const {dYBJJ,dXBJJ,dZBLB} = slaveData[index]
+        juantongConfig = {
+          dColGap:dYBJJ,
+          dRowGap:dXBJJ,
+          iCol:dPortraitType,
+          iRow:dHorizontalType,
+          dCutEdge:dZBLB
+        }
+      }
+      const newSlaveData = {
+        ...juantongConfig,
+        ...updatedProduct
+      }
       // 更新状态
       props.setState(prevState => ({
         ...prevState,
-        slaveData: slaveData.map((item, i) => (i === index ? updatedProduct : item)),
+        slaveData: slaveData.map((item, i) => (i === index ? newSlaveData : item)),
       }));
     }
@@ -100,7 +100,6 @@
             }
           }
         }
-
       }
       .viewTableDownView,
@@ -133,7 +132,7 @@
               flex: 0 0 25px !important;
               max-width: 25px !important;
-              >label {
+              > label {
                 display: flex;
                 width: 100%;
                 align-items: center;
@@ -156,7 +155,7 @@
               max-width: calc(100% - 25px);
             }
-            .viewStyle>.ant-col-24 {
+            .viewStyle > .ant-col-24 {
               padding-left: 100px;
             }
           }
@@ -247,13 +246,13 @@
         display: flex;
         position: relative;
-        >div:first-child {
+        > div:first-child {
           flex: 1;
           border-right: 1px solid #d7d7d7;
         }
-        >div:nth-child(2) {
-          >div:first-child {
+        > div:nth-child(2) {
+          > div:first-child {
             display: flex;
           }
         }
@@ -293,7 +292,6 @@
           position: relative;
           overflow: hidden;
         }
-
       }
       .boxPinbanBtn {
@@ -374,7 +372,7 @@
 .boxTree {
   width: 250px;
   height: 100%;
-  background: #3274b7;
+   background: var(--xly-skin-header-color, #383d41);
   padding: 10px 0 0 10px;
   overflow: hidden;
@@ -388,8 +386,11 @@
       .ant-tree-title {
         color: #fff;
-        font-size: 16px;
-        font-weight: bold;
+        font-size: 14px;
+        font-family: Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,
+          Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif !important;
+
+        // font-weight: bold;
       }
       .ant-tree-node-content-wrapper.ant-tree-node-selected {
@@ -400,7 +401,6 @@
         background-color: #009688;
       }
     }
-
   }
 }
@@ -409,7 +409,6 @@
   :global {
     .ant-tree {
-
       .ant-tree-title,
       .ant-badge {
         color: #5c6374;
@@ -462,7 +461,7 @@
       width: 16px;
       height: 16px;
-      >span {
+      > span {
         font-size: 10px;
       }
     }
@@ -474,7 +473,7 @@
     .ant-form-item-label {
       label {
         &::before {
-          content: '';
+          content: "";
           display: block;
           width: 5px;
           height: 5px;
@@ -485,4 +484,4 @@
       }
     }
   }
-}
 \ No newline at end of file
+}