@ccs-design/rc-pro-component/es/CcsProLayout/index.js

ccs design basic react component

import "antd/es/spin/style";
import _Spin from "antd/es/spin";
import "antd/es/empty/style";
import _Empty from "antd/es/empty";
import "antd/es/card/style";
import _Card from "antd/es/card";
import "antd/es/form/style";
import _Form from "antd/es/form";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { useState, useEffect, useRef, useImperativeHandle, useMemo, useContext } from 'react';
import classNames from 'classnames';
import useDeepCompareEffect from 'use-deep-compare-effect';
import { useEventEmitter } from 'ahooks';
import _debounce from 'lodash/debounce';
import { CcsWaterMark } from '..';
import FormComponent from './form';
import ToolbarComponent from './toolbar';
import CcsTable from '../CcsTable';
import ProLayoutBreadcrumb from './breadcrumb';
import { AuthContext, GlobalContext } from '../CcsBasicLayout/context';
import './index.less';
import { showLogWarning } from '../utils';
export var classPrefix = 'ccs-prolayout';
/**
 * 布局组件 包括form、查询、toolbar、table 自动初始化数据
 * @param CcsProLayoutPropsType
 * @param ref
 * @returns
 */

function CcsProLayout(props) {
  var init = props.init,
      auth = props.auth,
      table = props.table,
      title = props.title,
      proRef = props.proRef,
      loading = props.loading,
      toolbar = props.toolbar,
      isSimple = props.isSimple,
      watermark = props.watermark,
      className = props.className,
      tableStyle = props.tableStyle,
      breadcrumb = props.breadcrumb,
      tableHeader = props.tableHeader,
      searchEvent = props.searchEvent,
      _props$formItems = props.formItems,
      formItems = _props$formItems === void 0 ? [] : _props$formItems,
      _props$formInitValues = props.formInitValues,
      formInitValues = _props$formInitValues === void 0 ? {} : _props$formInitValues,
      onSearchBefore = props.onSearchBefore,
      onSearchAfter = props.onSearchAfter;

  var _useContext = useContext(AuthContext),
      onAuth = _useContext.onAuth;

  var _ref = table || {},
      _ref$fillSpace = _ref.fillSpace,
      fillSpace = _ref$fillSpace === void 0 ? true : _ref$fillSpace,
      pagination = _ref.pagination,
      request = _ref.request,
      _ref$requestParam = _ref.requestParam,
      requestParam = _ref$requestParam === void 0 ? {} : _ref$requestParam,
      columns = _ref.columns; // table 高度撑满剩余空间


  var heightRef = useRef(null); // 查询form

  var _Form$useForm = _Form.useForm(),
      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
      form = _Form$useForm2[0]; // table data


  var _useState = useState({
    totalNum: 0,
    result: [],
    pageSize: 10,
    pageNo: 1
  }),
      _useState2 = _slicedToArray(_useState, 2),
      data = _useState2[0],
      setData = _useState2[1]; // 是否启用权限按钮


  var _useContext2 = useContext(GlobalContext),
      IsAuthButton = _useContext2.IsAuthButton,
      IsTabsPage = _useContext2.IsTabsPage;

  console.log('IsAuthButton', IsAuthButton); // 权限判断

  var isAuth = useMemo(function () {
    if (auth && IsAuthButton) {
      return !!onAuth(auth);
    }

    if (!auth && IsAuthButton) {
      showLogWarning('CcsProLayout：未传入auth权限标识');
    }

    return true;
  }, []); // 获取数据

  var onRequest = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
      var pageNo,
          pageSize,
          restParams,
          formValues,
          pageValue,
          params,
          newParams,
          requestResult,
          newRequestResult,
          _newRequestResult$dat,
          totalNum,
          size,
          no,
          result,
          _args = arguments;

      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              pageNo = _args.length > 0 && _args[0] !== undefined ? _args[0] : 1;
              pageSize = _args.length > 1 && _args[1] !== undefined ? _args[1] : (pagination ? pagination.defaultPageSize : 10) || 10;
              restParams = _args.length > 2 && _args[2] !== undefined ? _args[2] : {};

              if (!(!isAuth || !request)) {
                _context.next = 5;
                break;
              }

              return _context.abrupt("return");

            case 5:
              // 构建查询条件:表单数据、请求额外参数、分页参数、其他参数
              formValues = (form === null || form === void 0 ? void 0 : form.getFieldsValue()) || {};
              pageValue = pagination === false ? {} : {
                pageNo: pageNo,
                pageSize: pageSize
              };
              params = _objectSpread(_objectSpread({
                query: _objectSpread(_objectSpread({}, formValues), requestParam)
              }, pageValue), restParams); // onSearchBefore 请求前回传参数，可以在父组件进行修改

              newParams = onSearchBefore ? onSearchBefore(params) : params; // 发起请求

              setData(function (d) {
                return _objectSpread(_objectSpread({}, d), {}, {
                  loading: true
                });
              });
              _context.next = 12;
              return request(newParams);

            case 12:
              requestResult = _context.sent;

              // 请求结果
              if (requestResult && requestResult.success) {
                // onSearchAfter 处理请求结果
                newRequestResult = onSearchAfter ? onSearchAfter(requestResult) : requestResult;
                _newRequestResult$dat = newRequestResult.data, totalNum = _newRequestResult$dat.totalNum, size = _newRequestResult$dat.pageSize, no = _newRequestResult$dat.pageNo, result = _newRequestResult$dat.result;
                setData({
                  pageNo: no,
                  pageSize: size,
                  loading: false,
                  result: result || [],
                  totalNum: totalNum || 0
                });
              } else {
                setData(function (d) {
                  return _objectSpread(_objectSpread({}, d), {}, {
                    loading: false
                  });
                });
              }

            case 14:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function onRequest() {
      return _ref2.apply(this, arguments);
    };
  }(); // 尺寸变化重设尺寸


  var resizeFn = _debounce(function () {
    if (!fillSpace) return;

    if (heightRef.current) {
      var _heightRef$current;

      var h = (_heightRef$current = heightRef.current) === null || _heightRef$current === void 0 ? void 0 : _heightRef$current.getBoundingClientRect();
      heightRef.current.style.minHeight = "calc(100vh - ".concat(h.top, "px - 10px)");
    }
  }, 200); // 高度占满剩余空间


  useEffect(function () {
    resizeFn();
    window.addEventListener('resize', resizeFn);
    return function () {
      window.removeEventListener('resize', resizeFn);
    };
  }, []); // 初始查询

  useDeepCompareEffect(function () {
    if (init !== false && request) {
      onRequest();
    }
  }, [requestParam || {}]); // 查询按钮

  var _onSearch = function onSearch() {
    if (searchEvent) searchEvent();
    onRequest();
  }; // 重置


  var _onReset = function onReset() {
    form === null || form === void 0 ? void 0 : form.resetFields();
    onRequest();
  }; // 刷新


  var _onReload = function onReload() {
    onRequest(data.pageNo, data.pageSize);
  }; // form 数据 查询，重载，重置方法


  useImperativeHandle(proRef, function () {
    return {
      onSearch: function onSearch() {
        _onSearch();
      },
      onReload: function onReload() {
        _onReload();
      },
      onReset: function onReset() {
        _onReset();
      },
      onChangeData: setData,
      formValues: form.getFieldsValue(),
      data: data
    };
  }); // 分页查询

  var handlePageChange = function handlePageChange(paginationTable, filters, sorter) {
    onRequest(paginationTable.current || 0, paginationTable.pageSize || 10, {
      filters: filters,
      sorter: sorter
    });
  }; // 发布订阅、组件通信模式


  var event$ = useEventEmitter(); // table

  var ProTable = /*#__PURE__*/React.createElement(_Spin, {
    spinning: loading || data.loading || false
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames('ccs-prolayout', className)
  }, /*#__PURE__*/React.createElement(_Card, {
    hoverable: true,
    bodyStyle: {
      padding: 0
    },
    style: {
      borderRadius: 0
    },
    bordered: false
  }, title ? /*#__PURE__*/React.createElement("div", {
    className: "ccs-prolayout-title"
  }, title) : null, breadcrumb || !IsTabsPage && breadcrumb !== false ? /*#__PURE__*/React.createElement(ProLayoutBreadcrumb, null) : null, formItems.length || toolbar ? /*#__PURE__*/React.createElement(ToolbarComponent, {
    isSimple: isSimple,
    form: form,
    formItems: formItems,
    formInitValues: formInitValues,
    toolbar: toolbar,
    columns: columns,
    onSearch: _onSearch,
    onReset: _onReset,
    event$: event$
  }) : null),
  /** 传入formItem、非精简模式、有查询权限 */
  formItems.length > 1 && !isSimple ? /*#__PURE__*/React.createElement(FormComponent, {
    form: form,
    formItems: formItems,
    formInitValues: formInitValues,
    onReset: _onReset,
    onSearch: _onSearch,
    event$: event$
  }) : null, tableHeader ? /*#__PURE__*/React.createElement("div", {
    className: "ccs-prolayout-table-header"
  }, tableHeader) : null, /*#__PURE__*/React.createElement("div", {
    className: classNames({
      'ccs-prolayout-table-content': !isSimple
    }),
    ref: heightRef,
    style: tableStyle
  }, isAuth ? /*#__PURE__*/React.createElement(CcsTable, _extends({
    onChange: handlePageChange,
    data: data,
    event$: event$,
    size: isSimple ? 'small' : 'middle' // 精简模式size：small

  }, table, {
    columns: columns
  })) : /*#__PURE__*/React.createElement(_Empty, {
    style: {
      margin: 0,
      padding: '32px 0',
      color: 'red'
    },
    image: _Empty.PRESENTED_IMAGE_DEFAULT,
    description: "\u6CA1\u6709\u6570\u636E\u8BF7\u6C42\u6743\u9650"
  }))));
  return watermark ? /*#__PURE__*/React.createElement(CcsWaterMark, {
    content: watermark,
    fontColor: "rgba(0,0,0,.15)"
  }, ProTable) : ProTable;
}

export default CcsProLayout;