@zykj2024/much-library 1.1.7-beta.3 → 1.1.7-beta.5

package/dist/McContainer/demo/standard.js

@@ -0,0 +1,219 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 标准用法
+ * description: 标准用法功能全面，可以直接用于常规页面。设置`autoBackPagination`为`true`时，非第一页删除最后一条数据后，会自动跳转到上一页。
+ * transform: true
+ */
+
+import { Button, Col, Row, Space } from 'antd';
+import { AddOutlined } from 'much-icons';
+import { McCascader, McContainer, McDateRange, McInput, McPopoverButton } from "../..";
+import { useEffect, useRef, useState } from 'react';
+import { deleteMockRequest, fetchMockRequest } from "../mock";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default (function () {
+  var mcContainerRef = useRef();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    total = _useState2[0],
+    setTotal = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dataSource = _useState4[0],
+    setDataSource = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedRows = _useState8[0],
+    setSelectedRows = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    searchJsonStr = _useState10[0],
+    setSearchJsonStr = _useState10[1];
+  var onDelete = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(id) {
+      var _mcContainerRef$curre;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return deleteMockRequest(id);
+          case 2:
+            (_mcContainerRef$curre = mcContainerRef.current) === null || _mcContainerRef$curre === void 0 || _mcContainerRef$curre.query();
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onDelete(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var columns = [{
+    title: 'ID',
+    dataIndex: 'id',
+    width: 100
+  }, {
+    title: '姓名',
+    dataIndex: 'name',
+    width: 100
+  }, {
+    title: '年龄',
+    dataIndex: 'age',
+    width: 100
+  }, {
+    title: '城市',
+    dataIndex: 'city',
+    width: 100
+  }, {
+    title: '日期',
+    dataIndex: 'date',
+    width: 180
+  }, {
+    title: '爱好',
+    dataIndex: 'funny',
+    width: 100
+  }, {
+    title: '地址',
+    dataIndex: 'address',
+    width: 100
+  }, {
+    title: '电话',
+    dataIndex: 'phone',
+    width: 100
+  }, {
+    title: '邮箱',
+    dataIndex: 'email',
+    width: 100
+  }, {
+    title: '描述',
+    dataIndex: 'desc',
+    width: 100
+  }, {
+    title: '操作',
+    dataIndex: 'option',
+    fixed: 'right',
+    width: 100,
+    render: function render(_, record, index) {
+      return /*#__PURE__*/_jsxs(Space, {
+        size: 16,
+        children: [/*#__PURE__*/_jsx("a", {
+          children: "\u7F16\u8F91"
+        }), /*#__PURE__*/_jsx(McPopoverButton, {
+          onConfirm: function onConfirm() {
+            return onDelete(index);
+          }
+        })]
+      });
+    }
+  }];
+  var queryItems = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(McInput, {
+      label: "\u59D3\u540D",
+      name: "name",
+      style: {
+        width: 270
+      }
+    }), /*#__PURE__*/_jsx(McCascader, {
+      label: "\u57CE\u5E02",
+      name: "city",
+      city: true,
+      style: {
+        width: 270
+      }
+    }), /*#__PURE__*/_jsx(McDateRange, {
+      label: "\u65E5\u671F",
+      name: "date",
+      style: {
+        width: 270
+      }
+    })]
+  });
+  useEffect(function () {
+    var _mcContainerRef$curre2;
+    (_mcContainerRef$curre2 = mcContainerRef.current) === null || _mcContainerRef$curre2 === void 0 || _mcContainerRef$curre2.setDefaultQueryParams({
+      name: '姓名1'
+    });
+  }, []);
+  var onQuery = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(values) {
+      var _yield$fetchMockReque, data, total;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            setSearchJsonStr(JSON.stringify(values !== null && values !== void 0 ? values : {}));
+            setLoading(true);
+            _context2.next = 4;
+            return fetchMockRequest(values);
+          case 4:
+            _yield$fetchMockReque = _context2.sent;
+            data = _yield$fetchMockReque.data;
+            total = _yield$fetchMockReque.total;
+            setDataSource(data || []);
+            setTotal(total || 0);
+            setLoading(false);
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function onQuery(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Row, {
+      children: /*#__PURE__*/_jsxs(Col, {
+        children: ["\u641C\u7D22\u53C2\u6570\uFF1A", /*#__PURE__*/_jsx("span", {
+          children: searchJsonStr
+        })]
+      })
+    }), /*#__PURE__*/_jsx(McContainer, {
+      ref: mcContainerRef,
+      height: "500px",
+      loading: loading,
+      onQuery: onQuery,
+      queryItems: queryItems,
+      actionBar: /*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        icon: /*#__PURE__*/_jsx(AddOutlined, {}),
+        children: "\u65B0\u589E"
+      }),
+      batchNum: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length,
+      onCancel: function onCancel() {
+        return setSelectedRows([]);
+      },
+      batchBtns: /*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        children: "\u6279\u91CF\u5220\u9664"
+      }),
+      autoBackPagination: true,
+      tableProps: {
+        columns: columns,
+        dataSource: dataSource,
+        rowKey: 'id',
+        pagination: {
+          total: total
+        },
+        rowSelection: {
+          selectedRowKeys: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (item) {
+            return item.id;
+          }),
+          preserveSelectedRowKeys: true,
+          onChange: function onChange(selectedRowKeys, selectedRows) {
+            return setSelectedRows(selectedRows);
+          }
+        }
+      }
+    })]
+  });
+});

package/dist/McContainer/index.css

@@ -0,0 +1,123 @@
+.mc-container {
+  position: relative;
+}
+.mc-container__ceiling {
+  width: calc(100% - 40px);
+  height: 24px;
+  position: absolute;
+  left: 16px;
+  z-index: 9;
+}
+.mc-container__wrapper {
+  height: 100%;
+  padding: 24px 24px 50px 16px;
+  overflow-y: auto;
+  border-top-right-radius: 12px;
+}
+.mc-container__query {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.mc-container__query .mc-input,
+.mc-container__query .mc-search,
+.mc-container__query .mc-select,
+.mc-container__query .mc-cascader,
+.mc-container__query .mc-input-number {
+  width: 270px;
+}
+.mc-container__query .mc-date-range {
+  width: 330px;
+}
+.mc-container__divider {
+  height: 1px;
+  margin: 24px 0;
+  background: #ebebeb;
+}
+.mc-container__action-bar {
+  position: sticky;
+  top: -24px;
+  z-index: 9;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 16px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 24px 0 16px;
+  margin-top: -24px;
+  overflow: hidden;
+}
+.mc-container__batch-bar {
+  position: sticky;
+  z-index: 9;
+  padding-bottom: 8px;
+}
+.mc-container__batch-bar__inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  background: #325cf7;
+  border-radius: 4px;
+}
+.mc-container__batch-bar__inner button.ant-btn {
+  background: transparent;
+  color: #fff;
+  border-color: transparent;
+  padding: 4px;
+  margin-left: 16px;
+}
+.mc-container__batch-bar__inner button.ant-btn:hover {
+  background-color: transparent !important;
+  color: #fff !important;
+  border-color: transparent !important;
+}
+.mc-container__batch-num {
+  color: #fff;
+  font-size: 14px;
+  opacity: 0.8;
+}
+.mc-container__batch-btns {
+  position: relative;
+  margin-left: 16px;
+}
+.mc-container__batch-btns::before {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: 0;
+  display: block;
+  width: 1px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.3);
+  content: '';
+}
+.mc-container__table .ant-spin-nested-loading {
+  position: static;
+}
+.mc-container__table .ant-spin-nested-loading .ant-spin-container {
+  position: static;
+}
+.mc-container__table__expand-icon > svg {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.mc-container__pagination {
+  padding: 8px 0 16px;
+  margin: 0 !important;
+  width: calc(100% - 40px);
+  position: absolute;
+  left: 16px;
+  bottom: 0;
+  z-index: 9;
+}

package/dist/McContainer/index.d.ts

@@ -0,0 +1,192 @@
+import { ButtonProps, TableProps } from 'antd';
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import './index.less';
+/** 请求参数 */
+type QueryParamsType<T = any> = {
+    /** 当前页码 */
+    current: number;
+    /** 每页显示的记录数 */
+    pageSize: number;
+} & T;
+/** 批量操作配置接口 */
+interface BatchConfig {
+    /** 是否显示批量操作按钮 */
+    show?: boolean;
+    /** 批量操作按钮的文本 */
+    buttonText?: string;
+    /** 批量操作按钮的属性 */
+    buttonProps?: ButtonProps;
+    /** 批量操作按钮在操作栏中的位置 */
+    order?: number;
+}
+/** McContainer 组件 Props 类型定义 */
+export interface McContainerProps<T> {
+    /** 组件的自定义样式 */
+    style?: CSSProperties;
+    /** 组件的自定义类名 */
+    className?: string;
+    /**
+     * 页面容器的高度
+     * @default 'calc(100vh - 88px)' 即视口高度-菜单header高度56px-页面上下内边距16px*2
+     */
+    height?: string;
+    /**
+     * 页面容器的背景色
+     * @default '#ffffff'
+     */
+    backgroundColor?: string;
+    /**
+     * 是否展示头部遮罩
+     * @default true
+     */
+    showCell?: boolean;
+    /**
+     * 是否触发首次查询
+     * @description 若使用场景为需自定义默认查询参数，可将该属性设置为false，
+     * 并手动调用setDefaultQueryParams方法重新设置默认查询参数，而后调用query方法触发查询
+     * @default true
+     */
+    immediateQuery?: boolean;
+    /**
+     * 加载中状态（已覆盖table组件的loading）
+     * @default false
+     */
+    loading?: boolean;
+    /** 加载loading下方的文案，默认为测试中 */
+    loadingText?: string;
+    /**
+     * 查询项（不受展开、收起按钮控制显示隐藏的查询项）
+     * @description 建议结合 McSelect、McCascader、McDateRange、McInput 等组件使用
+     */
+    queryItems?: ReactElement;
+    /**
+     * 是否显示查询按钮
+     * @default true
+     */
+    showQuery?: boolean;
+    /**
+     * 是否显示重置按钮
+     * @default true
+     */
+    showReset?: boolean;
+    /**
+     * 是否显示展开、收起按钮
+     * @default false
+     */
+    showCollapse?: boolean;
+    /** 可折叠的查询项（可通过展开、收起按钮控制显示隐藏的查询项） */
+    collapsibleQueryItems?: ReactElement;
+    /**
+     * 查询回调事件
+     * @param params - 分页参数
+     * @param filters - 过滤条件
+     * @param sorter - 排序条件
+     * @param extra - 额外信息，包含当前数据源和触发的操作类型
+     */
+    onQuery?: (params: QueryParamsType<T>, filters?: Record<string, any>, sorter?: Record<string, any>, extra?: {
+        currentDataSource: any[];
+        action: 'paginate' | 'sort' | 'filter';
+    }) => void;
+    /**
+     * 重置按钮回调事件
+     * @description 若设置该属性，则在点击重置按钮时不再触发onQuery事件
+     */
+    onReset?: (params?: QueryParamsType<T>) => void;
+    /**
+     * 查询区自定义渲染
+     * @description 若设置为null，则不显示查询区
+     */
+    queryRender?: ReactNode;
+    /**
+     * 操作栏
+     * @description 若未设置该项，则不显示
+     */
+    actionBar?: ReactElement;
+    /**
+     * 操作栏自定义渲染
+     * @param batchEl - 批量操作按钮实例
+     */
+    actionBarRender?: (batchEl: ReactNode) => ReactNode;
+    /**
+     * 批量操作已选项数量
+     * @description 当数量大于0时，显示批量操作栏
+     */
+    batchNum?: number;
+    /**
+     * 批量操作按钮区
+     * @description 若未设置该项，则不显示
+     */
+    batchBtns?: ReactNode;
+    /** 批量操作按钮配置 */
+    batch?: BatchConfig;
+    /** 批量操作取消按钮回调事件 */
+    onCancel?: () => void;
+    /** 表格组件属性 */
+    tableProps?: TableProps<any>;
+    /**
+     * 数据表格区自定义渲染
+     * @description 若设置为null，则不显示数据表格区
+     */
+    tableRender?: ReactNode;
+    /**
+     * 当前分页数据为空且非第一页时，是否自动会退到上一个分页
+     * @default false
+     */
+    autoBackPagination?: boolean;
+    /**
+     * 折叠事件的回调
+     * @param collapsed - 是否折叠
+     */
+    onCollapse?: (collapsed: boolean) => void;
+}
+/** McContainer 组件 Ref 类型定义 */
+export interface McContainerRef<T = any> {
+    /**
+     * 调用查询的方法
+     * @description 可通过传参更新查询参数的状态后触发查询，所设置的属性仅会覆盖原查询参数对应的属性
+     * @param params - 查询参数，仅支持设置过name属性的查询项
+     */
+    query: (params?: QueryParamsType<T>) => void;
+    /**
+     * 调用重置的方法
+     * @description 重置查询参数为默认值
+     */
+    reset: () => void;
+    /**
+     * 设置默认查询参数
+     * @description 用于重置使用，仅对设置过name属性的查询项有效
+     * 仅对设置过name属性的查询项（和current、pageSize）有效，查询项自身已绑定value属性的除外，需自行编写相关业务逻辑代码进行状态管理；
+     * 可通过该方法配置默认查询的分页参数；
+     * 设置的查询参数将覆盖原有默认值，如：setDefaultQueryParams({pageSize: 10, status: 1})，设置后的默认查询参数为{current: 1, pageSize: 10, status: 1}
+     * 原有默认值 {current: 1, pageSize: 20}（若未开启分页功能，默认值为{}
+     * @param params - 默认查询参数
+     */
+    setDefaultQueryParams: (params: QueryParamsType<T>) => void;
+    /**
+     * 设置单个查询项的参数
+     * @description 仅支持设置过name属性的查询项
+     * @param name - 查询项名称
+     * @param value - 查询项值
+     */
+    setQueryParam: (name: keyof QueryParamsType<T>, value: any) => void;
+    /**
+     * 获取单个查询项的参数
+     * @description 仅支持设置过name属性的查询项
+     * @param name - 查询项名称
+     */
+    getQueryParam: (name: keyof QueryParamsType<T>) => any;
+    /**
+     * 获取所有查询项的参数
+     * @returns 当前可见的查询项的参数集
+     */
+    getQueryParams: () => QueryParamsType<T>;
+    /**
+     * 重置查询参数
+     * @description 重置为默认查询参数
+     */
+    resetQueryParams: () => void;
+}
+declare const McContainer: <T>(props: McContainerProps<T> & {
+    ref?: React.ForwardedRef<McContainerRef<T>>;
+}) => JSX.Element;
+export default McContainer;