qiangmj / ebc-Mes

/* eslint-disable object-curly-newline,prefer-destructuring */
import React, { Component } from "react";
import "@ant-design/compatible/assets/index.css";
import { Row, Col, Divider } from "antd";
import ShowType from "@/components/Common/CommonComponent";
import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
import CommonListSelectTree from "@/components/Common/CommonListSelectTree";
import CommonListSelect from "@/components/Common/CommonListSelect";
import * as commonUtils from "@/utils/utils"; /* 通用方法 */
import * as commonFunc from "@/components/Common/commonFunc";

class CommonViewTableRc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      openNewTabFlag: false,
      commonFieldPopupVisible: false,
      commonFieldPopupTbName: "name",
      commonFieldPopupShowConfig: {},
      randomId: commonUtils.createSid()
    };
  }

  componentWillReceiveProps() {
    if (this.state.openNewTabFlag) {
      const dom = document.getElementsByClassName(
        `${this.state.randomId}-CommonListSelectTree`
      )[0];
      dom.parentElement.parentElement.style.display = "block";
      this.setState({
        openNewTabFlag: false
      });
    }
  }

  componentDidMount() {
    const { delayComputed } = this.props;
    if (delayComputed) {
      setTimeout(() => {
        this.handleDealWithBorder();
      }, 200);
    } else {
      this.handleDealWithBorder();
    }
  }

  componentDidUpdate() {
    const { delayComputed } = this.props;
    if (delayComputed) {
      setTimeout(() => {
        this.handleDealWithBorder();
      }, 200);
    } else {
      this.handleDealWithBorder();
    }
  }

  // shouldComponentUpdate(nextProps) {
  //   const { masterData, expandView, enabled } = this.props;
  //   return masterData !== nextProps.masterData || expandView !== nextProps.expandView || enabled !== nextProps.enabled;
  // }

  // 处理重复边框
  handleDealWithBorder = () => {
    if (!this.rowRef) return;

    const { width, height } = this.rowRef.getBoundingClientRect();
    if (width < 10 || height < 10) return;

    const oCols = this.rowRef.childNodes;
    const positionList = [];
    oCols.forEach(item => {
      positionList.push(item.getBoundingClientRect());
    });

    oCols.forEach((item, index) => {
      const oItem = item.querySelector(".ant-form-item");
      if (oItem) {
        oItem.classList.remove("extraBorderRight");
        oItem.classList.remove("extraBorderBottom");
        const position = positionList[index];
        let hasRightDom = positionList.some(
          data => data.left >= position.right && data.top === position.top
        );
        if (!hasRightDom) {
          oItem.classList.add("extraBorderRight");
        }

        let hasBottomDom = positionList.some(
          data => data.top >= position.bottom && data.right > position.left
        );
        if (!hasBottomDom) {
          oItem.classList.add("extraBorderBottom");
        }
      }
    });
  };

  onOpenNewTab = () => {
    const dom = document.getElementsByClassName(
      `${this.state.randomId}-CommonListSelectTree`
    )[0];
    dom.parentElement.parentElement.style.display = "none";
    this.setState({
      openNewTabFlag: true
    });
  };
  handleToggle = () => {
    const { expandView } = this.props;
    this.props.onSaveState({ expandView: !expandView });
  };
  handleViewClick = (name, sName, sId) => {
    this.props.onViewClick(name, sName, sId);
  };
  /* 字段弹窗 */
  handleFieldPopupModal = (showConfig, name, type) => {
    if (type) {
      this.setState({
        commonFieldPopupVisible: true,
        commonFieldPopupType: type,
        commonFieldPopupShowConfig: showConfig
      });
    } else {
      this.setState({
        commonFieldPopupVisible: true,
        commonFieldPopupTbName: name,
        commonFieldPopupShowConfig: showConfig
      });
    }
  };
  handleSelectCommonFieldPopup = (name, selectConfig, selectData) => {
    const { commonFieldPopupTbName, commonFieldPopupShowConfig } = this.state;
    this.handleSelectCommonPopupNew(
      name,
      selectConfig,
      selectData,
      commonFieldPopupTbName,
      commonFieldPopupShowConfig
    );
  };

  handleSelectCommonPopupNew = (
    currentPaneName,
    selectConfig,
    selectData,
    tbName
  ) => {
    const {
      [`${tbName}SelectedRowKeys`]: tableSelectedRowKeys,
      masterData
    } = this.props;
    let { [`${tbName}Data`]: tableData } = this.props;
    if (
      commonUtils.isNotEmptyArr(tableData) &&
      commonUtils.isNotEmptyArr(selectData)
    ) {
      const iIndex =
        commonUtils.isNotEmptyArr(tableSelectedRowKeys) &&
        commonUtils.isNotEmptyObject(tableSelectedRowKeys[0])
          ? tableData.findIndex(item => item.sId === tableSelectedRowKeys[0])
          : -1;
      selectData.forEach((item, index) => {
        const newCopyTo = {};
        newCopyTo.master = masterData;
        const sName =
          selectConfig.sKeyUpFilter; /* 将后台配置筛选字段作为 列字段 */
        let sValue = "";
        if (iIndex > -1) {
          newCopyTo.slave = tableData[iIndex];
          sValue = tableData[iIndex][sName];
        }
        if (
          selectData.length === 1 ||
          (index === 0 && commonUtils.isEmptyObject(sValue))
        ) {
          let tableDataRow = {}; // 取默认值
          if (tbName === "master") {
            tableDataRow = {
              ...tableData,
              ...commonFunc.getAssignFieldValue(
                selectConfig.sAssignField,
                item,
                newCopyTo
              )
            }; // 取赋值字段
            tableData = tableDataRow;
            tableData.handleType = commonUtils.isEmpty(tableData.handleType)
              ? "update"
              : tableData.handleType;
          }
        }

        if (tbName === "master") {
          this.handleMasterChange(
            tbName,
            selectConfig.sName,
            {},
            null,
            null,
            false,
            tableData
          );
        }
      });
    }
  };

  handleMasterChange = (
    name,
    sFieldName,
    changeValue,
    sId,
    dropDownData,
    isWait,
    masterDataNew
  ) => {
    const { masterData: masterDataOld } = this.state;
    const { sModelsId, masterConfig } = this.props;
    const addState = {};
    let masterData =
      masterDataNew === undefined
        ? masterDataOld === undefined
          ? {}
          : masterDataOld
        : masterDataNew;
    let { handleType } = masterData;
    handleType = commonUtils.isEmpty(handleType) ? "update" : handleType;
    if (
      !commonUtils.isEmpty(masterConfig.gdsconfigformslave) &&
      commonUtils.isNotEmptyArr(masterConfig.gdsconfigformslave) &&
      !commonUtils.isEmpty(sFieldName)
    ) {
      masterConfig.gdsconfigformslave
        .filter(
          item =>
            !commonUtils.isEmpty(item.sSqlCondition) &&
            !commonUtils.isEmpty(item.sChineseDropDown) &&
            (item.sChineseDropDown.includes(`#${sFieldName}`) ||
              item.sChineseDropDown.includes(`*${sFieldName}`)) &&
            (item.sSqlCondition.includes(sFieldName) ||
              item.sSqlCondition.includes(sFieldName.replace("Name", "Id")))
        )
        .forEach(item => {
          commonUtils.setStoreDropDownData(sModelsId, name, item.sName, []);
        });
    }

    masterData = { ...masterData, ...changeValue, handleType };

    if (isWait) {
      return { masterData, ...addState };
    } else {
      this.props.onSaveState({ masterData, ...addState });
      return { masterData, ...addState };
    }
  };

  handleSelectCancel = modelVisible => {
    this.setState({
      [modelVisible]: false
    });
  };

  render() {
    // eslint-disable-next-line no-unused-vars
    const {
      iColValueView,
      viewRow = {},
      app,
      tableConfigType,
      viewConfigs,
      tableConfig,
      tableName,
      enabled,
      viewOrder
    } = this.props;
    const {
      commonFieldPopupVisible,
      randomId,
      commonFieldPopupShowConfig,
      commonFieldPopupType
    } = this.state;
    // eslint-disable-next-line no-unused-vars
    let masterShowConfig = [];
    if (tableConfigType) {
      masterShowConfig = commonUtils.isNotEmptyObject(tableConfig)
        ? tableConfig.gdsconfigformslave.filter(
            item =>
              item.bVisible &&
              item.sName !== "" &&
              item.sControlName.split("_")[1] === tableConfigType
          )
        : [];
    } else {
      masterShowConfig = commonUtils.isNotEmptyObject(tableConfig)
        ? tableConfig.gdsconfigformslave.filter(
            item =>
              item.bVisible &&
              item.sName !== "" &&
              item.sControlName.indexOf("_") === -1
          )
        : [];
    }
    const formItemLayout = {
      labelCol: {
        span: 7,
        style: { color: "rgba(0, 0, 0, 0.65)", backgroundColor: "#BFEFFF" }
      },
      wrapperCol: { span: 17 }
    };

    /* 字段弹窗功能 */
    let commonFieldPopupProps = {};
    let commonFieldPopupTitle = "选择弹窗";
    if (commonFieldPopupType === "CommonListSelect") {
      const { sModelsId } = this.props;
      const commonFieldPopupConfig = commonFieldPopupShowConfig;
      commonFieldPopupTitle = commonFieldPopupConfig.sActiveName || "详情";
      commonFieldPopupProps = {
        app: {
          ...this.props.app,
          currentPane: {
            name: "commonPopup",
            config: commonFieldPopupConfig,
            conditonValues: this.props.getSqlCondition(commonFieldPopupConfig),
            title: commonFieldPopupTitle,
            route: "/indexPage/commonList",
            formRoute: "/indexPage/commonList",
            formId: commonFieldPopupConfig.sActiveId,
            key: sModelsId + commonFieldPopupConfig.sId,
            sModelsType: "search/commonPopup",
            // select: this.handleSelectCommonFieldPopup,
            select: () => {},
            selectCancel: this.handleSelectCancel.bind(
              this,
              "commonFieldPopupVisible"
            )
          }
        },
        dispatch: this.props.dispatch,
        content: this.props.content,
        id: randomId,
        onOpenNewTab: this.onOpenNewTab,
        outerMasterData: this.props.masterData,
        realizeHeight: this.props.realizeHeight /* 拖动偏移高度 */,
        readOnly: true
      };
    } else if (commonUtils.isNotEmptyObject(this.props)) {
      let commonFieldPopupConfig = {};
      const { masterConfig, sModelsId } = this.props;
      if (commonUtils.isNotEmptyObject(masterConfig)) {
        const iIndex = masterConfig.gdsconfigformslave.findIndex(
          item =>
            commonUtils.isNotEmptyObject(item.sName) &&
            item.sDropDownType === "popup"
        );
        if (iIndex > -1) {
          commonFieldPopupConfig = masterConfig.gdsconfigformslave[iIndex];
          commonFieldPopupTitle =
            commonUtils.isNotEmptyObject(commonFieldPopupConfig) &&
            commonUtils.isNotEmptyObject(commonFieldPopupConfig.sActiveName)
              ? commonFieldPopupConfig.sActiveName
              : commonFieldPopupTitle;
          commonFieldPopupProps = {
            app: {
              ...this.props.app,
              currentPane: {
                name: "commonPopup",
                config: commonFieldPopupConfig,
                conditonValues: this.props.getSqlCondition(
                  commonFieldPopupConfig
                ),
                title: commonFieldPopupTitle,
                route: "/indexPage/commonList",
                formRoute: "/indexPage/commonList",
                formId: commonFieldPopupConfig.sActiveId,
                key: sModelsId + commonFieldPopupConfig.sId,
                sModelsType: "search/commonPopup",
                select: this.handleSelectCommonFieldPopup,
                selectCancel: this.handleSelectCancel.bind(
                  this,
                  "commonFieldPopupVisible"
                )
              }
            },
            dispatch: this.props.dispatch,
            content: this.props.content,
            id: randomId,
            onOpenNewTab: this.onOpenNewTab,
            outerMasterData: this.props.masterData,
            realizeHeight: this.props.realizeHeight /* 拖动偏移高度 */
          };
        }
      }
    }

    // 解决新增数据时组件没有刷新问题
    const viewRowSId = viewRow.sId || commonUtils.createSid();

    return commonUtils.isNotEmptyArr(viewConfigs) ? (
      <Col key={viewRowSId} span={iColValueView} order={viewOrder || 5}>
        <Row
          type="flex"
          ref={ref => {
            this.rowRef = ref;
          }}
          className="viewStyle"
          style={{ height: "auto", overflowY: "auto", overflowX: "hidden" }}
        >
          {viewConfigs &&
            viewConfigs.map(child => {
              const iOrder =
                child.showName === "针位"
                  ? 0
                  : sMemo
                    ? 100
                    : child.iOrder; /* 排序 */
              if (child.sControlName.indexOf("DividerArea") !== -1) {
                return (
                  <Col key={child.sId} span={24} order={iOrder}>
                    <Divider
                      orientation={child.sDefault || "center"}
                      orientationMargin={
                        child.sDefault === "left" ? 0 : undefined
                      }
                      style={{
                        margin: "6px 0",
                        borderTopColor: "rgba(0, 0, 0, 0.3)"
                      }}
                    >
                      {child.sDefault === "left" ? (
                        <div>
                          <div
                            style={{
                              borderTop: "1px solid rgba(0, 0, 0, 0.3)",
                              width: 15,
                              position: "absolute",
                              left: 0,
                              top: 16
                            }}
                          />
                          <div
                            style={{
                              width: 4,
                              height: 4,
                              background: "black",
                              position: "absolute",
                              top: 15,
                              left: 26,
                              borderRadius: "50%"
                            }}
                          />
                        </div>
                      ) : (
                        ""
                      )}
                      <span
                        style={
                          child.sDefault === "left"
                            ? { padding: "0 0 0 36px" }
                            : {}
                        }
                      >
                        {child.showName}
                      </span>
                    </Divider>
                  </Col>
                );
              }

              const iRowNum =
                child.iColValue === 1
                  ? 6
                  : 1; /* 1个字段占的网格个数 ，网格总个数是24 */
              const iColValue = sMemo
                ? 24
                : child.iColValue *
                  iRowNum; /* 跨度 */ /* 产品部要求 备注设置成一行到底 */
              const sMemo = child.sName.toLowerCase().endsWith("memo");
              let enabledNew =
                enabled && !child.bReadonly && !child.specialControl;
              const sFormulaMemo =
                child.sName.toString() === "sFormulaMemo" ? "none" : "block";
              if (child.iTag === 1) {
                enabledNew = false;
              } else if (child.iTag === 3) {
                enabledNew = true;
              }

              if (!this.props.bMesBill && this.props.enabledNew !== undefined) {
                enabledNew = this.props.enabledNew;
              }

              const showTypeProps = {
                app,
                iColValue,
                name: tableName,
                record: viewRow,
                sId: commonUtils.isNotEmptyObject(viewRow)
                  ? viewRow.sId
                  : commonUtils.createSid(),
                form: this.props.form,
                getSqlDropDownData: this.props.getSqlDropDownData,
                getSqlCondition: this.props.getSqlCondition,
                handleSqlDropDownNewRecord: this.props
                  .handleSqlDropDownNewRecord,
                getFloatNum: this.props.getFloatNum,
                onChange: this.props.onDataChange,
                showConfig: child,
                slaveConfig: this.props[`${tableName}Config`],
                formItemLayout,
                textArea: sMemo,
                enabled: enabledNew,
                dataValue: commonUtils.isNotEmptyObject(viewRow)
                  ? viewRow[child.sName]
                  : null,
                bTable: true,
                bViewTable: true,
                formRoute: this.props.formRoute,
                onViewClick: this.handleViewClick,
                onFieldDoubleClick: this.props.handleFieldDoubleClick,
                getDateFormat: this.props.getDateFormat,
                onFieldPopupModal: this.handleFieldPopupModal,
                onBllbClick: this.props.onBllbClick, // 不良类别弹窗
                onCostomChange: this.props.onCostomChange, // 控件后自定义按钮事件,
                onExecInstructSet: this.props.onExecInstructSet, // 调用指令集
                handleReportInfo: this.props.handleReportInfo,
                showTooltip: this.props.showTooltip
              };
              return (
                <Col
                  key={`${child.sId}${child.showName}`}
                  span={iColValue}
                  order={iOrder}
                  style={{
                    display: sFormulaMemo,
                    position: "relative",
                    order: iOrder
                  }}
                >
                  <ShowType {...showTypeProps} />
                </Col>
              );
            })}
        </Row>
        {commonFieldPopupVisible ? (
          <AntdDraggableModal
            width={1000}
            height={520}
            zIndex={1000}
            style={{ top: 20 }}
            title={commonFieldPopupTitle}
            visible={commonFieldPopupVisible}
            onCancel={this.handleSelectCancel.bind(
              this,
              "commonFieldPopupVisible"
            )}
            footer={null}
            onSaveState={this.props.onSaveState}
            className={`${randomId}-CommonListSelectTree mesCommonModal`}
          >
            {[""].map(() => {
              const { commonFieldPopupType } = this.state;
              const { sControlName } = commonFieldPopupShowConfig;
              if (
                commonFieldPopupType === "CommonListSelect" ||
                sControlName?.startsWith("Pad")
              ) {
                return <CommonListSelect {...commonFieldPopupProps} />;
              } else {
                return <CommonListSelectTree {...commonFieldPopupProps} />;
              }
            })}
          </AntdDraggableModal>
        ) : (
          ""
        )}
      </Col>
    ) : (
      ""
    );
  }
}

const CommonViewTable = props => {
  const addState = {};
  // 自定义表单是否可以编辑
  const costomEnabled = useCostomEnabled(props);
  addState.enabled = costomEnabled;

  return <CommonViewTableRc {...props} {...addState} />;
};

const getResultByStr = (props, sDefault, defaultResult = false) => {
  const { app, viewRow = {}, tableName } = props;
  const allTableData = commonFunc.getAllTableData(props);
  // 当前页面所有选中数据(为空时默认获取第一条)
  const [allTableSelectedData, allTableSelectedOneData] = Object.keys(
    allTableData
  ).reduce(
    ([result, result1], tableName) => {
      let tableData = allTableData[tableName] || [];
      tableData = Array.isArray(tableData) ? tableData : [tableData];
      const { [`${tableName}SelectedRowKeys`]: selectedRowKeys = [] } = props;
      let filterData = tableData.filter(
        item =>
          selectedRowKeys.includes(item.sSlaveId) ||
          selectedRowKeys.includes(item.sId)
      );
      if (!filterData.length && tableData.length) {
        filterData = [tableData[0]];
      }
      result = {
        ...result,
        [tableName]: filterData
      };

      result1 = {
        ...result1,
        [tableName]: filterData[0] || {}
      };

      return [result, result1];
    },
    [{}, {}]
  );
  const globalData = commonUtils.getAppData("globalData");
  const commonData = {
    userinfo: app.userinfo,
    currentSelectedMachineTask: globalData.currentSelectedMachineTask,
    currentStartWorkMachineTask: globalData.currentStartWorkMachineTask,
    currentWorkOrderInfo: globalData.currentWorkOrderInfo
  };

  let strNew = sDefault;
  const tempData = {
    ...commonData,
    ...allTableSelectedOneData,
    currentRecord: viewRow,
    [tableName]: viewRow
  };

  let result = defaultResult;
  try {
    Object.keys(tempData).forEach(key => {
      const reg = new RegExp(`${key}\\.`, "g");
      strNew = strNew.replace(reg, `tempData["${key}"].`);
      const reg1 = new RegExp(`${key}@`, "g");
      strNew = strNew.replace(reg1, `tempData["${key}"]`);
    });
    const evalStr = eval("`" + strNew + "`");
    result = eval(evalStr);
  } catch (error) {
    console.log("=====自定义表单是否可以编辑报错", {
      tempData,
      str: sDefault,
      error
    });
  }
  return result;
};

// 自定义表单是否可以编辑
const useCostomEnabled = props => {
  const { tableConfig = {}, enabled = false, enabledCostom } = props;
  if (enabledCostom !== undefined) {
    return enabledCostom;
  }
  const { gdsconfigformslave = [] } = tableConfig;
  const formEnabledCondition = gdsconfigformslave.find(
    item => item.sControlName === "formEnabledCondition" && item.bVisible
  );

  if (!formEnabledCondition) return enabled;
  const { sDefault } = formEnabledCondition;
  if (!sDefault) return enabled;

  return getResultByStr(props, sDefault, enabled);
};

export default CommonViewTable;