@beisen-phoenix/lookup/lib/components/advancedCmpt/index.js

---

import _extends from "@babel/runtime/helpers/extends";
import "core-js/modules/es6.function.name";
import "core-js/modules/es6.array.find";
import "core-js/modules/es6.object.assign";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import * as React from 'react';
import './index.css';
import utils from '@beisen-phoenix/common-utils';
import SelectedPanel from './SelectedPanel';
import isEmpty from 'lodash/isEmpty';
import clonedeep from 'lodash.clonedeep'; //import BasicTable from '@beisen-phoenix/data-table'

import BasicTable from '@beisen-phoenix/table';
import SearchForm from '@beisen-phoenix/search-form';
var classes = utils.BEMClass('lookup-advanced');
import { callFetch, getUpdateData, resetCalculateHeight, calculateModalHeight, getValueUseKey } from '../../util.js';

///多选中后列表
var AdvancedCmpt =
/*#__PURE__*/
function (_React$Component) {
  _inherits(AdvancedCmpt, _React$Component);

  // 默认配置
  function AdvancedCmpt(props) {
    var _this;

    _classCallCheck(this, AdvancedCmpt);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(AdvancedCmpt).call(this, props));
    _this.tableRef = React.createRef();

    _this.resetCalcHeight = function () {
      var multiple = _this.props.multiple; //此判断仅限于lookup嵌入到Modal内的计算

      var data = resetCalculateHeight('.phoenix-lookup-advanced__mainContainer', 72);

      if (data) {
        _this.setState(Object.assign(data, {
          isReSizeHeight: true
        }));
      }
    };

    _this.clearItem = function (item) {
      var data = _this.state.selectValue.filter(function (n) {
        return n.value != item.value || n.key != item.key;
      });

      _this.setState({
        selectValue: data
      });
    };

    _this.clearAll = function () {
      _this.setState({
        selectValue: []
      });
    };

    _this.resetLoading = function (loading) {
      _this.setState({
        loading: loading
      });
    };

    _this.initTableData = function (param, pagination, data) {
      var advFormatListData = _this.props.advFormatListData;
      var tableMeta = _this.state.tableMeta;
      var rdata = advFormatListData && advFormatListData(data) || data;
      tableMeta.data = rdata || [];

      _this.setState({
        tableMeta: tableMeta,
        //table的数据
        searchParam: Object.assign(param, pagination),
        //保存搜索条件
        loading: false,
        isReSizeHeight: false
      });
    };

    _this.getListInfo = function (param, pagination) {
      var _this$props = _this.props,
          advanceSearchUrl = _this$props.advanceSearchUrl,
          advanceSearchFunction = _this$props.advanceSearchFunction,
          advMetaParam = _this$props.advMetaParam;
      var tableMeta = _this.state.tableMeta;

      _this.setState(Object.assign({
        isReSizeHeight: true
      }, {
        pagination: pagination
      })); //调用外部函数


      if (advanceSearchFunction) {
        advanceSearchFunction(param, function (data) {
          _this.initTableData(param, pagination, data);
        });
      } //调用外部接口，内部发请求
      else if (advanceSearchUrl) {
          _this.resetLoading(true);

          callFetch(advanceSearchUrl, Object.assign(param, advMetaParam), function (res) {
            _this.initTableData(param, pagination, res.data);
          }, function (res) {
            _this.resetLoading(false);

            console.log(res);
          });
        } //其他情况不成立，将外部初始化的数据传回
        else {
            _this.initTableData(param, pagination, tableMeta.data);
          }
    };

    _this.onSearchFormChange = function (value) {
      var pagination = _this.state.pagination;

      _this.getListInfo(value, clonedeep(pagination));
    };

    _this.tableOnChange = function (data) {
      var searchParam = _this.state.searchParam;
      var pagination = {
        pageIndex: data.current,
        pageSize: data.pageSize
      };

      _this.getListInfo(clonedeep(searchParam), clonedeep(pagination));
    };

    _this.getSelected = function () {
      //return (this.tableRef.current as any).getSelectRows()
      return _this.state.selectValue;
    };

    _this.getSelectedRowsData = function (rows) {
      var selectValue = _this.state.selectValue;

      var _rows = (rows || []).filter(function (n) {
        return !(selectValue || []).find(function (s) {
          return n.key == s.key;
        });
      });

      return (selectValue || []).concat(_rows || []);
    };

    _this.renderTable = function () {
      var _this$state = _this.state,
          tableMeta = _this$state.tableMeta,
          scrollY = _this$state.scrollY,
          pagination = _this$state.pagination,
          loading = _this$state.loading,
          selectValue = _this$state.selectValue;
      var _this$props2 = _this.props,
          multiple = _this$props2.multiple,
          tablePrimaryKey = _this$props2.tablePrimaryKey; //统一属性，统一返回值信息，此处存在一个问题，就是默认的返回值与列表的返回值会存在差异，看是否有人提出再进行处理

      var transformObjData = function transformObjData(data) {
        return Object.assign({
          label: data.label || data.name || data.text,
          value: getValueUseKey(data, tablePrimaryKey) || data.id || data.value
        }, data);
      };

      var transformArrayData = function transformArrayData(data) {
        return (data || []).map(function (n) {
          return transformObjData(n);
        });
      }; //超出maxSize值，不允许填加


      var limitMaxSize = function limitMaxSize(data) {
        var maxSize = _this.props.maxSize;
        return maxSize && (data || []).splice(0, maxSize) || data;
      };

      var rowSelection = {
        type: multiple ? 'multiple' : 'single',
        // onChange: this.tableOnChange,
        getInitProps: function getInitProps(data) {
          return {
            checked: !!(selectValue || []).find(function (n) {
              var value = getValueUseKey(data, tablePrimaryKey) || data.value;
              return n.value == value;
            })
          };
        },
        onSelectAll: function onSelectAll(selectRows, selected, event) {
          var selectValue = _this.state.selectValue;

          _this.setState({
            selectValue: selected ? limitMaxSize((selectValue || []).concat(transformArrayData(selectRows.filter(function (n) {
              var _nv = getValueUseKey(n, tablePrimaryKey) || n.value;

              return !selectValue.find(function (v) {
                var _vv = getValueUseKey(v, tablePrimaryKey) || v.value;

                return _vv == _nv;
              });
            })))) : selectValue.filter(function (n) {
              var _nv = getValueUseKey(n, tablePrimaryKey) || n.value;

              return !selectRows.find(function (v) {
                var _vv = getValueUseKey(v, tablePrimaryKey) || v.value;

                return _vv == _nv;
              });
            })
          });
        },
        //table选中触发
        onSelect: function onSelect(record, selectedRows, selected, evt) {
          //超出maxSize值，不允许填加
          var _this$props3 = _this.props,
              maxSize = _this$props3.maxSize,
              multiple = _this$props3.multiple;
          var selectValue = _this.state.selectValue;

          if (selected) {
            var _r = transformObjData(record);

            var _v = maxSize && selectValue.length > maxSize - 1 ? [] : [_r];

            _this.setState({
              selectValue: multiple ? (selectValue || []).concat(_v) : _v
            });
          }
        },
        //table取消选中触发
        onSelectInvert: function onSelectInvert(record, selectedRows, selected, evt) {
          if (!selected) {
            var _selectValue = _this.state.selectValue;
            var key = getValueUseKey(record, tablePrimaryKey) || record.value;

            _this.setState({
              selectValue: _selectValue.filter(function (n) {
                return !((getValueUseKey(n, tablePrimaryKey) || n.value) == key);
              })
            });
          }
        }
      };
      var paginationCfg = {
        total: tableMeta.data && tableMeta.data.length,
        onChange: function onChange(pageSize) {
          var searchParam = _this.state.searchParam;

          _this.getListInfo(clonedeep(searchParam), clonedeep(pageSize));
        }
      };
      return React.createElement(BasicTable, _extends({
        keygen: "id",
        fit: false,
        fixed: "both",
        autoHeight: false,
        ref: _this.tableRef,
        rowsInView: 15,
        rowSelection: rowSelection
      }, tableMeta, {
        height: scrollY,
        showSelectCount: false,
        pagination: Object.assign(paginationCfg, pagination),
        loading: loading
      }));
    };

    _this.state = {
      selectValue: props.selectValue || [],
      searchFormMeta: props.searchFormMeta || [],
      tableMeta: props.tableMeta || [],
      scrollY: 0,
      clientHeight: calculateModalHeight(props.modalHeight, 116),
      isReSizeHeight: false,
      current: 0,
      pagination: props.pagination || {
        pageIndex: 0,
        pageSize: 15
      },
      loading: false,
      searchParam: {}
    };
    _this.clearItem = _this.clearItem.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(AdvancedCmpt, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var _this$props4 = this.props,
          advMetaParam = _this$props4.advMetaParam,
          advMetaUrl = _this$props4.advMetaUrl,
          advFormatMetaData = _this$props4.advFormatMetaData; //发送获取searchForm\table数据描述接口

      if (advMetaParam && advMetaUrl) {
        this.resetLoading(true);
        callFetch(advMetaUrl, advMetaParam, advFormatMetaData, function (res) {
          var data = advFormatMetaData && advFormatMetaData(res.data);

          _this2.setState({
            searchFormMeta: data.searchFormMeta || [],
            tableMeta: data.tableMeta || [],
            loading: false
          });
        }, function (res) {
          _this2.resetLoading(false);
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState, snapshot) {
      var prop = getUpdateData(['selectValue'], this.props, prevProps);

      if (!isEmpty(prop)) {
        this.setState(prop);
      }

      var isReSizeHeight = this.state.isReSizeHeight;

      if (!isReSizeHeight) {
        setTimeout(this.resetCalcHeight, 200);
      }
    }
  }, {
    key: "renderSelectedPanel",
    value: function renderSelectedPanel() {
      var _this$props5 = this.props,
          multiple = _this$props5.multiple,
          translation = _this$props5.translation,
          maxSize = _this$props5.maxSize;
      var _this$state2 = this.state,
          selectValue = _this$state2.selectValue,
          clientHeight = _this$state2.clientHeight;
      return multiple ? React.createElement("div", {
        className: classes({
          element: 'selected'
        }),
        style: {
          height: clientHeight + 'px'
        }
      }, React.createElement(SelectedPanel, {
        translation: translation,
        maxSize: maxSize,
        data: selectValue,
        onClearItem: this.clearItem,
        onClearAll: this.clearAll
      })) : null;
    }
  }, {
    key: "render",
    value: function render() {
      var searchFormMeta = this.state.searchFormMeta;
      var getContainer = this.props.getContainer;
      var selectedPnl = this.renderSelectedPanel();
      var table = this.renderTable();
      return React.createElement("div", {
        className: classes({
          element: 'mainContainer'
        })
      }, React.createElement("div", {
        className: classes({
          element: 'container'
        })
      }, React.createElement(SearchForm, _extends({
        zIndex: 1100
      }, searchFormMeta, {
        onChange: this.onSearchFormChange,
        getContainer: getContainer
      })), table), selectedPnl);
    }
  }]);

  return AdvancedCmpt;
}(React.Component);

AdvancedCmpt.defaultProps = {
  tablePrimaryKey: 'value'
};
export { AdvancedCmpt as default };