qiangmj / ebc-Mes

import React, { useEffect } from "react";
import { cloneDeep } from "lodash";
import { Modal, Space, Button, Tree } from "antd";

import * as commonUtils from "@/utils/utils";
import * as commonFunc from "@/components/Common/commonFunc";
import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";
import CommonViewTable from "@/components/Common/CommonViewTable";

import styles from "./index.less";

const useModalEvent = props => {
  const { formData = [], fixedConditonValues = {}, sValue: sValueStr } = props;

  useEffect(
    async () => {
      if (!formData.length) return;

      const config = formData[0];
      const conditonValues = props.onGetSqlConditionValues(config);
      const treeConfig =
        config.gdsconfigformslave.find(item => item.bTree) || {};
      const treeConditonValues = props.onGetSqlConditionValues(treeConfig);

      const result = {
        ...((await props.onGetDataSet({
          name: "slave",
          configData: config,
          condition: {
            sSqlCondition: { ...conditonValues, ...fixedConditonValues }
          },
          isWait: true
        })) || {}),
        ...((await props.onGetTreeDataSet({
          configData: treeConfig,
          condition: {
            sSqlCondition: { ...treeConditonValues, ...fixedConditonValues }
          },
          isWait: true
        })) || {}),
        slaveConfig: config,
        slaveColumn: commonFunc.getHeaderConfig(config)
      };

      const bTree = result.treeData?.[0]?.children.length;
      result.bTree = bTree;

      if (bTree) {
        for (let i = 0; i < result.treeData[0].children.length; i++) {
          result[`slave${i}Data`] = cloneDeep(result.slaveData);
        }
        result.treeSelectedKeys = [result.treeData[0].children[0].key];
      }

      const sValue = commonUtils.convertStrToObj(sValueStr, {});
      const { detail = [] } = sValue;
      if (bTree) {
        result.treeData[0].children.forEach((treeNode, index) => {
          const nodeIndex = detail.findIndex(
            item => item.node.sId === treeNode.sId
          );
          if (nodeIndex !== -1) {
            const detailData = detail[nodeIndex];
            result[`slave${index}Data`].forEach(item => {
              const iIndex = detailData.data.findIndex(i => i.sId === item.sId);
              if (iIndex !== -1) {
                item.dWasteQty = detailData.data[iIndex].dWasteQty;
              }
            });
          }
        });
      } else {
        result.slaveData?.forEach(item => {
          const iIndex = detail.findIndex(i => i.sId === item.sId);
          if (iIndex !== -1) {
            item.dWasteQty = detail[iIndex].dWasteQty;
          }
        });
      }

      props.onSaveState(result);
    },
    [formData.length]
  );

  // 监听键盘事件
  useEffect(() => {
    const getCurrent = element => {
      let current = element;
      while (current !== null) {
        const classes = current.classList;
        for (let i = 0; i < classes.length; i++) {
          if (classes[i].startsWith("ant-col-order-")) {
            return current;
          }
        }
        current = current.parentNode;
      }
      return null;
    };

    const keydownEvent = event => {
      const focusedElement = document.activeElement;
      if (
        !["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"].includes(event.key)
      )
        return;
      if (focusedElement.tagName.toLowerCase() !== "input") return;
      if (!focusedElement.classList.contains("ant-input-number-input")) return;

      const oColDom = getCurrent(focusedElement);
      const classes = oColDom.classList;
      let currentIndex = -1;
      try {
        for (let i = 0; i < classes.length; i++) {
          if (classes[i].startsWith("ant-col-order-")) {
            currentIndex = Number(classes[i].replace("ant-col-order-", "")) - 1;
          }
        }
      } catch (error) {}

      if (currentIndex === -1) return;
      const oParent = oColDom.parentNode;
      const totalSize = oParent.children.length;

      let newIndex = currentIndex;

      switch (event.key) {
        case "ArrowLeft":
          event.preventDefault();
          newIndex = currentIndex - 1;
          break;
        case "ArrowUp":
          event.preventDefault();
          newIndex = currentIndex - 3;
          break;
        case "ArrowRight":
          event.preventDefault();
          newIndex = currentIndex + 1;
          break;
        case "ArrowDown":
          event.preventDefault();
          newIndex = currentIndex + 3;
          break;
        default:
          break;
      }

      if (newIndex < 0 || newIndex >= totalSize) return;

      try {
        oParent
          .querySelector(".ant-col-order-" + (newIndex + 1))
          .querySelector(".ant-input-number-input")
          .focus();
      } catch (error) {}
    };

    document.addEventListener("keydown", keydownEvent);
    return () => {
      document.removeEventListener("keydown", keydownEvent);
    };
  }, []);

  return {
    ...props
  };
};

const SetCountModalComponent = baseProps => {
  const props = useModalEvent(useCommonBase(baseProps));

  const { bVisible, formData = [] } = props;

  if (!formData.length) return "";

  const title = props.slaveData?.[0]?.sType || "废品类别";

  const handleOk = () => {
    const { treeData = [], employeeData = {}, bTree } = props;
    const { sEmployeeName = "数量" } = employeeData;
    const addState = {};
    addState.title = sEmployeeName;
    if (bTree) {
      // 左侧有树
      addState.bTree = true;
      const detail = [];
      const allData = treeData[0].children.reduce((pre, treeNode, index) => {
        const tableData = props[`slave${index}Data`] || [];
        const tableDataFilter = tableData.filter(item => item.dWasteQty);
        if (tableDataFilter.length) {
          const temp = {
            node: treeNode,
            data: tableDataFilter
          };
          detail.push(temp);
        }
        pre = [...pre, ...tableData];
        return pre;
      }, []);
      addState.detail = detail;
      addState.count = allData.reduce((pre, item) => {
        if (typeof item.dWasteQty === "number" && item.dWasteQty) {
          pre += item.dWasteQty;
        }
        return pre;
      }, 0);
    } else {
      // 左侧没有树
      const { slaveData = [] } = props;
      addState.count = slaveData.reduce((pre, item) => {
        if (typeof item.dWasteQty === "number" && item.dWasteQty) {
          pre += item.dWasteQty;
        }
        return pre;
      }, 0);
      addState.detail = slaveData.filter(item => item.dWasteQty);
    }

    props.onOk(addState);
  };

  return (
    <Modal
      title={title}
      open={bVisible}
      width={1000}
      height={520}
      zIndex={1000}
      style={{ top: 20 }}
      className="mesCommonModal"
      footer={
        <Space>
          <Button size="large" onClick={props.onCancel}>
            取消
          </Button>
          <Button size="large" type="primary" onClick={handleOk}>
            确定
          </Button>
        </Space>
      }
      onCancel={props.onCancel}
    >
      <div className={styles.modal}>
        <div
          className={styles.tree}
          style={!props.treeData?.length ? { width: 0, border: 0 } : {}}
        >
          <TreeComponent {...props} />
        </div>
        <div className={styles.content}>
          <ContentComponent {...props} />
        </div>
      </div>
    </Modal>
  );
};

const TreeComponent = props => {
  const { treeData, treeSelectedKeys } = props;

  if (commonUtils.isEmptyObject(treeData)) return "";

  return (
    <Tree
      fieldNames={{
        title: "showName"
      }}
      showLine
      showIcon
      defaultExpandAll
      selectedKeys={treeSelectedKeys}
      treeData={treeData}
      onSelect={(selectedKeys, { node }) => {
        if (node.children?.length) return;
        props.onSaveState({
          treeSelectedKeys: selectedKeys
        });
      }}
    />
  );
};

const ContentComponent = props => {
  const { slaveConfig, treeData = [], treeSelectedKeys = [] } = props;

  let currentTreeNodeIndex = treeData[0]?.children?.findIndex(
    item => item.key === treeSelectedKeys[0]
  );
  currentTreeNodeIndex =
    currentTreeNodeIndex === undefined ? -1 : currentTreeNodeIndex;
  const slaveNo = currentTreeNodeIndex === -1 ? "" : currentTreeNodeIndex;

  const slaveData = props[`slave${slaveNo}Data`] || [];

  const viewRow = {};
  const idMap = {};
  const viewConfigs = slaveData.map((item, index) => {
    viewRow.sId = `viewRowSid${index + 1}`;
    viewRow[`dName${index + 1}`] =
      item.dWasteQty === 0 ? undefined : item.dWasteQty;
    idMap[`dName${index + 1}`] = item.sId;
    return {
      sId: `sId${index + 1}`,
      iOrder: index + 1,
      sName: `dName${index + 1}`,
      sControlName: `dName${index + 1}`,
      showName: item.sName,
      iColValue: 8,
      keyboard: false
    };
  });

  const viewProps = {
    ...props,
    viewConfigs,
    tableConfig: slaveConfig,
    iColValueView: 24,
    viewRow,
    tableName: "slave",
    onDataChange: (tableName, sName, returnValue) => {
      const iIndex = slaveData.findIndex(item => item.sId === idMap[sName]);
      if (iIndex !== -1) {
        slaveData[iIndex].dWasteQty = returnValue[sName];
        props.onSaveState({ [`slave${slaveNo}Data`]: slaveData });
      }
    }
  };

  return <CommonViewTable {...viewProps} />;
};

export default SetCountModalComponent;