优化快速报价盒型选择；

zhangzzzz
1 parent ae19d4e5
Showing 2 changed files with 265 additions and 39 deletions
src/components/QuickQuote/index.jsx
src/components/QuickQuote/index.less
 /* eslint-disable */
-import React, { useRef, useEffect, useState, useCallback } from "react";
-import { Button, Divider, Tabs, Tree, Radio, Image, Modal, Input, message } from "antd-v4";
+import { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import { Button, Divider, Tabs, Tree, Radio, Image, Modal, Input, message, Badge } from "antd-v4";
 import { ArrowLeftOutlined, FolderFilled, FolderOpenFilled, FileTextFilled, PlusOutlined, MinusOutlined } from "@ant-design/icons";
 import { cloneDeep } from "lodash";
 import commonConfig from "@/utils/config";
@@ -11,6 +11,7 @@ import * as commonBusiness from &quot;@/components/Common/commonBusiness&quot;;
 import CommonViewTable from "@/components/Common/CommonViewTable";
 import StaticEditTable from "@/components/Common/CommonTable";
 import ShowImgM from "@/components/Common/BoxShowImgMaterial/indexNew";
+import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
 import styles from "./index.less";
 import Typesetting from "@/components/Common/Typesetting/typesetting";
 import DynamicSVG from "@/components/Common/BoxDesignCompontent/svg";
@@ -188,6 +189,7 @@ const QuickQuoteEvent = props =&gt; {
     } else if (name.includes("slave")) {
       const boxModel = name.replace("slaveUp", "").replace("slaveDown", "");
       if (sFieldName === "sName") {
+        if (!changeValue.sName) return;
         const dropDownDataSelected = dropDownData.find(item => item.sName === changeValue.sName);
         const { sColumnNameConfig, sColumnNameConfigExclusion, sColumnNameConfigPic } = dropDownDataSelected;
         const upAbleConfigsExtra = commonUtils.convertStrToObj(sColumnNameConfig, []).map(item => ({
@@ -885,6 +887,13 @@ const QuickQuoteEvent = props =&gt; {
     props.onAdd();
   };
+  // 选择盒型弹窗
+  addState.onFieldPopupModal = (showConfig, name) => {
+    if (showConfig.sName === "sName") {
+      props.onSaveState({ boxModelSelectedModalVisible: true, currentBoxModel: name });
+    }
+  };
+
   return {
     ...props,
     onDataChange0: props.onDataChange,
@@ -930,6 +939,7 @@ const QuickQuote = baseProps =&gt; {
           <ContentComponent {...props} />
         </div>
       </div>
+      <BoxModelSelectedModal {...props} />
     </div>
   );
 };
@@ -2019,4 +2029,175 @@ const ManyComponent = props =&gt; {
   );
 };
+// 选择盒型弹窗
+const BoxModelSelectedModal = props => {
+  const { boxModelSelectedModalVisible } = props;
+  if (!boxModelSelectedModalVisible) return "";
+
+  const onCancel = () => {
+    props.onSaveState({
+      boxModelSelectedModalVisible: false,
+    });
+  };
+
+  const [boxConfig, setBoxConfig] = useState({ gdsconfigformslave: [] });
+  const [boxColumn, setBoxColumn] = useState([]);
+  const [boxTypeList, setBoxTypeList] = useState([]);
+  const [boxData, setBoxData] = useState([]);
+  const [treeClassName, setTreeClassName] = useState("");
+  const [boxTypeSelected, setBoxTypeSelected] = useState("全部");
+
+  useEffect(() => {
+    const boxList = [
+      ["sId", "唯一ID"],
+      ["iOrder", "#", 60],
+      // ["sBoxId", "盒型ID"],
+      ["sName", "名称", 119],
+      ["sPackDetailPath", "刀线图", 300],
+      ["sPackPath", "3D图", 300],
+      ["operation", "操作", 80],
+    ];
+
+    const config = {
+      sId: commonUtils.createSid(),
+      // bisMutiSelect: true,
+      gdsconfigformslave: boxList.map(item => ({
+        sId: commonUtils.createSid(),
+        sName: item[0],
+        showName: item[1],
+        iFitWidth: item[2] || 120,
+        bVisible: item[0] !== "sId",
+      })),
+    };
+    setBoxConfig(config);
+    const column = commonFunc.getHeaderConfig(config);
+    setBoxColumn(column);
+
+    const getSqlDropDownData = async ({ sId }, cb) => {
+      const url = `${commonConfig.server_host}business/getSelectLimit/${sId}`;
+      const body = {
+        sKeyUpFilterName: "",
+        pageNum: 1,
+        pageSize: 1000,
+      };
+      const retrunData = await commonServices.postValueService(props.app.token, body, url);
+      const dropDownData = retrunData.data?.dataset?.rows;
+      cb(dropDownData);
+    };
+
+    getSqlDropDownData({ sId: "17428091410008594700322758474000" }, dropDownData => {
+      const boxTypeList = Array.from(new Set(dropDownData.map(item => item.sBoxType || "其它")));
+      setBoxTypeList(boxTypeList);
+      setBoxData(
+        dropDownData.map((item, index) => ({
+          ...item,
+          iOrder: index + 1,
+        }))
+      );
+    });
+  }, []);
+
+  const renderTreeNodes = useMemo(
+    () =>
+      ["全部", ...boxTypeList].map(boxType => (
+        <Tree.TreeNode
+          title={
+            <Badge
+              count={boxType === "全部" ? boxData.length : boxData.filter(item => (item.sBoxType || "其它") === boxType).length}
+              offset={[20, 8]}
+              color="#faad14"
+            >
+              <span>{boxType}</span>
+            </Badge>
+          }
+          key={boxType === "全部" ? 0 : commonUtils.createSid()}
+          treeData={boxType}
+          switcherIcon={<FolderFilled style={{ color: "#f7cc4f", fontSize: 20 }} />}
+        ></Tree.TreeNode>
+      )),
+    [boxTypeList.length]
+  );
+
+  const tableProps = {
+    ...commonBusiness.getTableTypes("box", {
+      ...props,
+      boxData: boxData.filter(item => (boxTypeSelected === "全部" ? true : (item.sBoxType || "其它") === boxTypeSelected)),
+      boxConfig,
+      boxColumn,
+    }),
+    enabled: false,
+    fixedHeight: "calc(100vh - 365px)",
+    noVlistTable: true,
+    onCostomColums: columns => {
+      columns
+        .filter(item => item.dataIndex?.includes("Path"))
+        .forEach(column => {
+          column.render = (value, record, index) => (value ? <img src={value} alt="" width={270} height={270} /> : "暂无图片");
+        });
+
+      columns
+        .filter(item => item.dataIndex === "operation")
+        .forEach(column => {
+          column.fixed = "right";
+          column.render = (value, record, index) => (
+            <Button
+              style={{ marginLeft: 8 }}
+              onClick={() => {
+                props.onDataChange(props.currentBoxModel, "sName", { sName: record.sName }, record.sId, boxData);
+                props.onSaveState({
+                  boxModelSelectedModalVisible: false,
+                });
+              }}
+            >
+              选择
+            </Button>
+          );
+        });
+    },
+  };
+
+  return (
+    <AntdDraggableModal
+      width="min(calc(100vw - 350px), 1100px)"
+      title="盒型选择"
+      visible={boxModelSelectedModalVisible}
+      onCancel={onCancel}
+      footer={
+        <Button type="primary" onClick={onCancel}>
+          关闭
+        </Button>
+      }
+    >
+      <div className={styles.boxModal}>
+        <div
+          className={`${styles.boxTree} ${treeClassName}`}
+          onMouseEnter={() => {
+            setTreeClassName(styles.overFlow);
+          }}
+          onMouseLeave={() => {
+            setTreeClassName("");
+          }}
+        >
+          {boxTypeList.length && (
+            <Tree
+              className={"hide-file-icon"}
+              defaultExpandAll={true}
+              defaultSelectedKeys={["0"]}
+              onSelect={(e, select) => {
+                const { treeData } = select.node;
+                setBoxTypeSelected(treeData);
+              }}
+            >
+              {renderTreeNodes}
+            </Tree>
+          )}
+        </div>
+        <div className={styles.boxTable} key={boxTypeSelected}>
+          <StaticEditTable {...tableProps} />
+        </div>
+      </div>
+    </AntdDraggableModal>
+  );
+};
+
 export default QuickQuote;
@@ -13,6 +13,10 @@
       .ant-btn-primary {
         border-radius: 5px;
       }
+
+      .ant-col-23 {
+        display: flex !important;
+      }
     }
     .back {
@@ -24,43 +28,6 @@
       border-right-width: 0;
     }
-    .leftTree {
-      width: 250px;
-      height: 100%;
-      background: #3274b7;
-      padding: 10px 0 0 10px;
-      overflow: hidden;
-
-      :global {
-        .ant-tree {
-          background: transparent;
-
-          .ant-tree-treenode {
-            padding-bottom: 10px;
-          }
-
-          .ant-tree-title {
-            color: #fff;
-            font-size: 16px;
-            font-weight: bold;
-          }
-
-          .ant-tree-node-content-wrapper.ant-tree-node-selected {
-            background-color: #00a183;
-          }
-
-          .ant-tree-node-content-wrapper:hover {
-            background-color: #009688;
-          }
-        }
-
-      }
-    }
-
-    .overFlow {
-      overflow: auto;
-    }
-
     .rightContent {
       flex: 1;
       background: #f8fafe;
@@ -368,4 +335,82 @@
       }
     }
   }
+}
+
+.leftTree,
+.boxTree {
+  width: 250px;
+  height: 100%;
+  background: #3274b7;
+  padding: 10px 0 0 10px;
+  overflow: hidden;
+
+  :global {
+    .ant-tree {
+      background: transparent;
+
+      .ant-tree-treenode {
+        padding-bottom: 10px;
+      }
+
+      .ant-tree-title {
+        color: #fff;
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .ant-tree-node-content-wrapper.ant-tree-node-selected {
+        background-color: #00a183;
+      }
+
+      .ant-tree-node-content-wrapper:hover {
+        background-color: #009688;
+      }
+    }
+
+  }
+}
+
+.boxTree {
+  background: transparent;
+
+  :global {
+    .ant-tree {
+
+      .ant-tree-title,
+      .ant-badge {
+        color: #5c6374;
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .ant-tree-node-content-wrapper.ant-tree-node-selected {
+        background-color: #bae7ff;
+      }
+
+      .ant-tree-node-content-wrapper:hover {
+        background-color: #bae7ff;
+      }
+    }
+  }
+}
+
+.overFlow {
+  overflow: auto;
+}
+
+.boxModal {
+  width: 100%;
+  height: calc(100vh - 335px);
+  display: flex;
+
+  .boxTree {
+    width: 200px;
+    height: 100%;
+  }
+
+  .boxTable {
+    width: calc(100% - 200px);
+    height: 100%;
+  }
 }
 \ No newline at end of file