xlyErp / xlyUmi

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

const FormItem = Form.Item;
// const EachInputHeight = 32;
// const Padding = 16;
// const tableHeaderHeight = 29;
// const tabHeight = 119;
export default class CommonView extends Component {
  // componentWillReceiveProps(nextProps) {
  //   if (nextProps.AutoTableHeight === undefined) {
  //     const masterConfig = nextProps.masterconfig ? nextProps.masterconfig : nextProps.masterConfig;
  //     const masterShowConfigNoMemo = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && !item.sName.toLowerCase().endsWith('memo') && item.sControlName.indexOf('_') === -1) : [];
  //     const masterShowConfigMemo = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.sName.toLowerCase().endsWith('memo') && item.sControlName.indexOf('_') === -1) : [];
  //     const iNoMemo = masterShowConfigNoMemo.length / 4;
  //     const iMemo = masterShowConfigMemo.length; /* 产品部要求 备注设置成一行到底 */
  //     const Aheight = (Math.ceil(iNoMemo) + iMemo) * EachInputHeight;
  //     const searchMainFormHeight = Aheight + Padding;
  //     const tableHeight = window.innerHeight - tabHeight - searchMainFormHeight - tableHeaderHeight;
  //     // let AutoTableHeight = `calc( 100vh - ${AutoHeight}px - 22px )`;
  //     // const { formRoute } = nextProps;
  //     // if (commonUtils.isNotEmptyObject(formRoute) && formRoute !== '/indexPage/commonBill' && formRoute !== '/indexPage/commonNewBill' && formRoute !== '/indexPage/workOrderNew' && formRoute !== '/indexPage/workOrderPack' && formRoute !== '/indexPage/processCard' && formRoute !== '/indexPage/processCardPack' && formRoute !== '/indexPage/quotation' && formRoute !== '/indexPage/quotationPack' && formRoute !== '/indexPage/elemachineInfo') { /* 单独算基础信息表格高度 */
  //     //   AutoTableHeight = `calc( 100vh - ${AutoHeight}px + 80px )`;
  //     // }
  //     this.props.onSaveState({
  //       AutoTableHeight: tableHeight,
  //     });
  //   }
  // }
  constructor(props) {
    super(props);
    this.state = {
      openNewTabFlag: false,
      commonFieldPopupVisible: false,
      commonFieldPopupTbName: 'name',
      commonFieldPopupShowConfig: {},
      randomId: commonUtils.createSid(),
      previewVisible: false, /* 图片预览弹窗 */
      previewImage: '', /* 预览图片地址 */
      expanded: false,
      bShowArrow: true,
    };
    this.showConfigEnabledJson = {};
  }

  componentDidMount() {
    this.handleArrow();
  }

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

  componentDidUpdate() {
    this.handleArrow();
  }

  // shouldComponentUpdate(nextProps) {
  //   const { masterData, expandView, enabled } = this.props;
  //   return masterData !== nextProps.masterData || expandView !== nextProps.expandView || enabled !== nextProps.enabled;
  // }
  onOpenNewTab = () => {
    const dom = document.getElementsByClassName(`${this.state.randomId}-CommonListSelectTree`)[0];
    dom.parentElement.parentElement.style.display = 'none';
    this.setState({
      openNewTabFlag: true,
    });
  };

  handleArrow = () => {
    const { expanded } = this.state;
    if (this.rowRef) {
      const { scrollHeight, clientHeight } = this.rowRef;
      const { height } = this.rowRef.getBoundingClientRect();
      if (!expanded && height && scrollHeight === clientHeight) { // 收缩、高度不为0，没有滚动条
        if (this.arrowRef && this.arrowRef.style.display !== 'none') {
          this.arrowRef.style.display = 'none';
        }
      }
    }
  }

  handleToggle = () => {
    const { expandView } = this.props;
    this.props.onSaveState({ expandView: !expandView });
  };
  handleViewClick = (name, sName, record, index, myConfig) => {
    this.props.onViewClick(name, sName, record, index, myConfig);
  };
  /* 字段弹窗 */
  handleFieldPopupModal= (showConfig, name) => {
    this.setState({
      commonFieldPopupVisible: true,
      commonFieldPopupTbName: name,
      commonFieldPopupShowConfig: showConfig,
    });
  }
  /* 所有备注非编辑状态下点击链接可以弹出备注窗体 */
  handleMemoShow = (name, sName, record, index, showConfig) => {
    if (commonUtils.isNotEmptyObject(record)) {
      const sMemo = showConfig.sName;
      const title = showConfig.showName;
      const sCurrMemoProps = {
        title,
        name,
        sValue: record[sName],
        sMemoField: sMemo,
        bVisibleMemo: true,
        sRecord: record,
        sMemoConfig: showConfig,
        bOnlyShow: true,
      };
      this.props.onSaveState({ sCurrMemoProps });
    }
  }
  handleSelectCommonFieldPopup = (name, selectConfig, selectData) => {
    const { commonFieldPopupTbName, commonFieldPopupShowConfig } = this.state;
    this.props.onSelectCommonPopup(name, selectConfig, selectData, commonFieldPopupTbName, commonFieldPopupShowConfig);
  };
  handleSelectCancel = (modelVisible) => {
    this.setState({
      [modelVisible]: false,
    });
  };

  /* 预览缩略图 */
  handlePreviewImage= (e, dataUrlArr) => {
    if (commonUtils.isNotEmptyObject(dataUrlArr)) {
      const { token } = this.props.app;
      const previewImageArr = [];
      dataUrlArr.forEach((item) => {
        const dataPreviewUrl = `${commonConfig.file_host}file/download?savePathStr=${item}&width=800&&height=500&sModelsId=100&token=${token}`; /* 预览 */
        previewImageArr.push(dataPreviewUrl);
      });
      this.setState({
        previewImage: previewImageArr,
        previewVisible: true,
      });
    }
  };

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

  handleKeyDown = (masterShowConfig = [], e, record, sName) => {
    let { keyCode } = e;
    if (keyCode === 13) {
      keyCode = 39;
    }

    if ([37, 39].includes(keyCode)) {
      const masterSortConfig = masterShowConfig.filter(item => this.showConfigEnabledJson[item.sName]).sort((a, b) => a.iOrder - b.iOrder);
      const iIndex = masterSortConfig.findIndex(item => item.sName === sName);
      if (iIndex === -1) return;
      let iNewIndex = keyCode === 37 ? iIndex - 1 : iIndex + 1;
      iNewIndex = Math.max(0, iNewIndex);
      iNewIndex = Math.min(iNewIndex, masterSortConfig.length - 1);
      if (iIndex !== iNewIndex) {
        commonUtils.focus(masterSortConfig[iNewIndex].sName, e, this.rowRef);
      }
    }
  }

  handleFieldDoubleClick = (name, sName, sId) => {
    if (this.props.handleFieldDoubleClick) {
      this.props.handleFieldDoubleClick(name, sName, sId);
    } else {
      console.log('事件未配置');
    }
  };

  render() {
    const { sModelsId, enabled, sUseInfo, app, sModelsType, tableConfigType, isEnabledPlcNo } = this.props;
    const { commonFieldPopupVisible, randomId, previewVisible, previewImage, expanded, bShowArrow } = this.state;
    let { masterData } = this.props;
    masterData = masterData === undefined ? {} : masterData;

    let masterShowConfig = [];
    const masterConfig = this.props.onMergeMasterConfig();
    if (commonUtils.isNotEmptyObject(masterConfig)) {
      if (tableConfigType) {
        masterShowConfig = masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.sControlName.split('_')[1] === tableConfigType);
      } else {
        masterShowConfig = masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.sControlName.indexOf('_') === -1);
      }
    }

    const formItemLayout = { labelCol: { span: 2, style: { color: 'rgba(0, 0, 0, 0.65)', backgroundColor: '#BFEFFF' } }, wrapperCol: { span: 22 } };

    /* 获取分割区域数组 */
    const DeliverArr = commonUtils.isNotEmptyObject(masterConfig) && commonUtils.isNotEmptyArr(masterConfig?.gdsconfigformslave) ?
      masterConfig?.gdsconfigformslave.filter(item => (
        item.sControlName &&
        item.sControlName.indexOf('DividerArea') !== -1 &&
        item.sControlName.indexOf('.hide') === -1
      )) : [];

    // 若原始数组发现元素是有分割的，则插入一条
    if( commonUtils.isNotEmptyArr(DeliverArr) && commonUtils.isNotEmptyArr(masterShowConfig)){
      DeliverArr.forEach((bItem) => {
        // 遍历数组 A 找到匹配的元素
        const iIndex = masterShowConfig.findIndex(item => commonUtils.isNotEmptyObject(bItem.sActiveKey) &&
          bItem.sActiveKey === item.sName);
        if(iIndex > -1){
          const newItem = bItem;
          newItem.iColValue = 24;
          masterShowConfig.splice(iIndex, 0, newItem);
        }
      });
    }

    /* 字段弹窗功能 */
    let commonFieldPopupProps = {};
    let commonFieldPopupTitle = '选择弹窗';
    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, /* 拖动偏移高度 */
          };
        }
      }
    }

    if (!this.initLoaded && commonUtils.isNotEmptyObject(masterConfig)) {
      this.initLoaded = 1;
      const arrowConfig = masterConfig.gdsconfigformslave.find(item => item.sControlName === 'commonViewArrow');
      if (arrowConfig) {
        this.initLoaded = 2;
        const { bVisible, sDefault } = arrowConfig;
        if (bVisible && sDefault === '1') {
          this.setState({
            expanded: true,
          });
        }
        if (!bVisible) {
          this.setState({
            expanded: true,
            bShowArrow: false,
          });
        }
      }
    }
    if (this.initLoaded === 1 && masterData.handleType === 'add') {
      this.initLoaded = 2;
      this.setState({
        expanded: true,
      });
    }

    return (
      <Tooltip title="master" placement="topLeft" visible={this.props.showTableName}>
        <FormItem
          className={`searchMainForm searchMainForm_${app.currentPane.key || 0}`}
          style={{
            overflow: this.props.isAutoHeight ? 'auto' : '',
            height: this.props.isAutoHeight ? this.props.AutoTableHeight : '',
          }}
        >
          {
            bShowArrow && location.pathname !== '/indexPage/commonCostomTabBill' && commonUtils.isNotEmptyArr(masterShowConfig) ? (
              <div
                className="searchMainFormArrow"
                style={{ position: 'absolute', bottom: 0, right: -8, zIndex: -1, height: 20, fontSize: 14 }}
                ref={(ref) => { this.arrowRef = ref; }}
              >
                <DoubleRightOutlined
                  rotate={expanded ? -90 : 90}
                  onClick={() => {
                    const resize = new Event('resize');
                    window.dispatchEvent(resize);
                    this.setState({ expanded: !expanded });
                  }}
                />
              </div>
            ) : ''
          }
          <Row type="flex" className={`${!expanded ? 'searchMainFormArrowMaxHeight' : ''}`} style={{ height: 'auto', maxHeight:'52vh', overflow: 'auto' }} ref={(ref) => { this.rowRef = ref; }}>
            {
              masterShowConfig.map((child) => {
                const sMemo = child.sName.toLowerCase().endsWith('memo');
                const iRowNum = child.iColValue === 1 ? 6 : 1; /* 每个字段占的网格个数 ，网格总个数是24 */
                const iColValue = sMemo ? 24 : child.iColValue * iRowNum; /* 跨度 */
                // const iColValue = sMemo ? 24 : child.iColValue * 6; /* 跨度 */
                const iOrder = sMemo ? 100 : child.iOrder > 100 ? 100 : child.iOrder; /* 排序 */
                if (commonUtils.isNotEmptyObject(child.sControlName) && 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 sFormulaMemo = child.sName.toString() === 'sFormulaMemo' ? 'none' : 'block';
                // sUseInfo是指被其他单据调用，或者被审核
                let enabledNew = (enabled && !child.bReadonly && !child.specialControl && commonUtils.isEmpty(sUseInfo));
                if (child.iTag === 1) {
                  enabledNew = false;
                } else if (child.iTag === 3 && !masterData.bCheck) { /* 当非审核状态下, 初始值为3才能编辑 */
                  enabledNew = true;
                }
                // 设备信息页面修改MES系统PLC编号，控制是否输入
                if (sModelsType === 'element/machineInfo' && child.sName === 'iPlcNo') {
                  enabledNew = isEnabledPlcNo;
                }

                /* 红冲中的单据 不可修改 */
                if (commonUtils.isNotEmptyObject(masterData) && ((commonUtils.isNotEmptyObject(masterData.sMinusSrcId)) || commonUtils.isNotEmptyObject(masterData.sMinusUsed))) {
                  if (app?.currentPane?.copyTo?.name && app.currentPane.copyTo.name.toLowerCase().includes('portion')) {
                    // 部分红冲中可修改的字段
                    // const iIndex = child.sControlName && child.sControlName.includes('portionField');
                    // enabledNew = iIndex !== -1;

                    // 部分红冲时备注可以更改
                    if ((!child.sControlName || !child.sControlName.toLowerCase().includes('memo')) && !['tCreateDate'].includes(child?.sName)) {
                      enabledNew = false;
                    }
                  } else {
                    // eslint-disable-next-line
                    if (!['tCreateDate'].includes(child?.sName)) {
                      enabledNew = false;
                    }
                  }
                }

                // 被使用的材料不可修改字段
                if (masterData?.bMaterialsUsed) {
                  const materialsUsedFieldsConfig = masterConfig.gdsconfigformslave.find(item => item.sControlName === "materialsUsedFields");
                  if (materialsUsedFieldsConfig) {
                    const { sDefault = '' } = materialsUsedFieldsConfig;
                    if (sDefault.split(',').includes(child.sName)) {
                      enabledNew = false;
                    }
                  }
                }

                // 被使用的产品不可修改字段
                if (masterData?.bProductIdUsed) {
                  const productUsedFieldsConfig = masterConfig.gdsconfigformslave.find(item => item.sControlName === "productUsedFields");
                  if (productUsedFieldsConfig) {
                    const { sDefault = '' } = productUsedFieldsConfig;
                    if (sDefault.split(',').includes(child.sName)) {
                      enabledNew = false;
                    }
                  }
                }

                this.showConfigEnabledJson[child.sName] = enabledNew;
                const showTypeProps = {
                  app,
                  iColValue,
                  slaveData: this.props.slaveData,
                  record: masterData,
                  name: 'master',
                  form: this.props.form,
                  formId: sModelsId,
                  getSqlDropDownData: this.props.getSqlDropDownData,
                  getSqlCondition: this.props.getSqlCondition,
                  handleSqlDropDownNewRecord: this.props.handleSqlDropDownNewRecord,
                  getFloatNum: this.props.getFloatNum,
                  getDateFormat: this.props.getDateFormat,
                  onChange: this.props.onChange,
                  showConfig: child,
                  tableConfig: masterConfig,
                  formItemLayout: sMemo ? formItemLayout : {},
                  textArea: sMemo,
                  enabled: enabledNew,
                  dataValue: masterData[child.sName],
                  bTable: false,
                  onFilterDropDownData: this.props.onFilterDropDownData,
                  onDropDownBlur: this.props.onDropDownBlur,
                  onViewClick: this.handleViewClick,
                  onMemoShow: this.handleMemoShow,
                  onSaveState: this.props.onSaveState,
                  onFieldPopupModal: this.handleFieldPopupModal, /* 字段选择弹窗 */
                  onPreviewImage: this.handlePreviewImage, /* 预览缩略图 */
                  onCostomChange: this.props.onCostomChange, // 控件后自定义按钮事件
                  sBtnSendDialogConfigList: this.props.sBtnSendDialogConfigList, // 校验并获取物料主数据按钮配置
                  onToolBarBtnClick: this.props.onToolBarBtnClick, // 工具栏按钮事件
                  onExecInstructSet: this.props.onExecInstructSet, // 调用指令集
                  onFieldDoubleClick: this.handleFieldDoubleClick,
                  onKeyDown: this.handleKeyDown.bind(this, masterShowConfig),
                };
                return (
                  <Col key={child.sId} span={iColValue} order={iOrder} style={{ display: sFormulaMemo, position: 'relative' }}>
                    <ShowType {...showTypeProps} />
                    {masterData !== undefined && commonUtils.isEmptyObject(masterData[child.sName]) &&
                    (
                      [
                        'sBillNo',
                        'sMakePerson',
                        'tCheckDate',
                        'sCheckPerson',
                        'sUpdatePerson',
                        'tUpdate',
                        'tMakeDate',
                      ].includes(child.sName)
                    ) ?
                      <Col style={{ display: enabled ? 'block' : 'none' }} className="speacialNote" key={child.sId} span="12">
                        {sModelsType !== 'smg/sendMailMsg' ? '保存后自动生成' : '发送消息无需生成单据号'}
                      </Col> : '' }
                  </Col>
                );
              })
            }
          </Row>
          {
            /*
            <button
            className={expandView ? styles.collapseB : styles.collapseA}
            onClick={this.handleToggle}
            >
            <span>{expandView ? '缩略展示' : '显示全部'}</span><Icon type={expandView ? 'up' : 'down'} />
            </button>
            */
          }
          {
            previewVisible && commonUtils.isNotEmptyArr(previewImage) ?
              <AntdDraggableModal
                width={800}
                zIndex={1000}
                visible={previewVisible}
                title="预览图片"
                footer={null}
                onCancel={this.handleCancelModal.bind(this, 'previewVisible')}
              >
                <img alt="example" style={{ width: '100%' }} src={previewImage[0]} />
              </AntdDraggableModal>
              : ''
          }
          {
            commonFieldPopupVisible ?
              <AntdDraggableModal
                width={1300}
                zIndex={1000}
                title={commonFieldPopupTitle}
                visible={commonFieldPopupVisible}
                onCancel={this.handleSelectCancel.bind(this, 'commonFieldPopupVisible')}
                footer={null}
                onSaveState={this.props.onSaveState}
                className={`${randomId}-CommonListSelectTree`}
              >
                <CommonListSelectTree {...commonFieldPopupProps} />
              </AntdDraggableModal>
              : ''
          }
        </FormItem>
      </Tooltip>
    );
  }
}