@antdp/edit-table/esm/EditTable/index.js

基于antd封装的组件

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["columns", "dataSource", "onBeforeSave", "onSave", "rowKey", "optIsFirst", "optConfig", "isOptDelete", "initValue", "onValuesChange", "isAdd", "onErr", "multiple", "onBeforeAdd", "isOpt", "addBtnProps", "store"];
import React, { useState } from 'react';
import { Table, Button, message } from 'antd';
import { useStore } from './Store';
export { default as Store } from "./Store";
import Tr, { EditForms } from './Tr';
import Td, { EditableCellItem } from './Td';
import Operation from './Operation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var EditableTable = (props, ref) => {
  var {
      columns,
      dataSource = [],
      onBeforeSave,
      onSave,
      rowKey = 'id',
      optIsFirst = false,
      optConfig = {},
      isOptDelete = false,
      initValue = {},
      onValuesChange,
      isAdd,
      onErr,
      multiple = false,
      onBeforeAdd,
      isOpt = true,
      addBtnProps = {},
      store
    } = props,
    rest = _objectWithoutPropertiesLoose(props, _excluded);
  var [formsRef] = useStore(store);
  var [editingKey, setEditingKey] = useState([]);
  var [newAdd, setNewAdd] = React.useState([]);
  /** editingKey 和 newAdd 移出 id */
  var removeKey = id => {
    setEditingKey(arr => arr.filter(k => "" + k !== "" + id));
    setNewAdd(arr => arr.filter(k => "" + k !== "" + id));
  };

  /** 获取行 所有编辑字段 */
  var fields = React.useMemo(() => {
    return columns.filter(item => {
      return item.editable;
    }).map(item => item.dataIndex);
  }, [columns]);

  /** 重置 某个表单 */
  var restForm = function restForm(key, obj) {
    if (obj === void 0) {
      obj = {};
    }
    var stores = formsRef.getStore();
    if (stores["" + key]) {
      stores["" + key].setFieldsValue(obj);
    }
  };

  /** 获取某个表单 */
  var getForm = id => {
    var stores = formsRef.getStore();
    return stores["" + id];
  };

  /** 判断是否编辑 */
  var isEditing = record => editingKey.includes("" + record[rowKey]);
  /** 判断是否是新增的 */
  var isAddEdit = record => newAdd.includes("" + record[rowKey]);

  /** 新增  */
  var add = () => {
    // 新增之前的调用方法
    if (onBeforeAdd && !onBeforeAdd()) {
      return;
    }
    if (newAdd.length === 1 && !multiple) {
      message.warning('只能新增一行');
      return;
    }
    if (editingKey.length === 1 && !multiple) {
      message.warning('只能编辑一行');
      return;
    }
    var id = (new Date().getTime() * Math.round(10)).toString();
    var newItem = _extends({}, initValue || {}, {
      [rowKey]: id
    });
    var list = dataSource.concat([newItem]);
    setEditingKey(arr => arr.concat([id]));
    setNewAdd(arr => arr.concat([id]));
    onSave && onSave(list, newItem);
  };

  /** 编辑 */
  var edit = record => {
    var obj = _extends({}, record);
    restForm(record[rowKey], obj);
    setEditingKey(arr => arr.concat(["" + record[rowKey]]));
  };

  /** 取消编辑  */
  var cancel = id => {
    removeKey(id);
    restForm(id, {});
  };

  /** 删除行 */
  var onDelete = (id, rowItem, index) => {
    var list = dataSource.filter(item => "" + item[rowKey] !== "" + id);
    removeKey(id);
    onSave && onSave(list, rowItem, rowItem, index);
  };

  /** 保存 */
  var save = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(function* (key, record, indx) {
      try {
        var row = yield getForm(key).validateFields();
        if (onBeforeSave && !onBeforeSave(row, record, indx)) {
          return;
        }
        var newData = [...dataSource];
        var index = newData.findIndex(item => "" + key === "" + item[rowKey]);
        if (index > -1) {
          var item = newData[index];
          newData.splice(index, 1, _extends({}, item, row));
        } else {
          newData.push(row);
        }
        onSave && onSave(newData, row, record, indx);
        removeKey(key);
        getForm(key).resetFields(fields);
      } catch (errInfo) {
        onErr && onErr(errInfo);
      }
    });
    return function save(_x, _x2, _x3) {
      return _ref.apply(this, arguments);
    };
  }();
  /** 操作列配置 */
  var operation = isOpt && Operation({
    optConfig,
    isEditing,
    isAddEdit,
    save,
    isOptDelete,
    cancel,
    onDelete,
    edit,
    newAdd,
    editingKey,
    rowKey,
    multiple
  }) || [];
  var optColumns = optIsFirst ? operation.concat(columns) : columns.concat(operation);
  var mergedColumns = optColumns.map(col => {
    if (!col.editable) {
      return col;
    }
    return _extends({}, col, {
      onCell: record => ({
        record,
        multiple,
        rowKey,
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
        inputNode: col.inputNode,
        rules: col.rules || [],
        itemAttr: col.itemAttr,
        type: col.type,
        attr: col.attr,
        tip: col.tip,
        tipAttr: col.tipAttr,
        isList: col.isList,
        listAttr: col.listAttr
      })
    });
  });
  // 表单值更新 表单更新值适用单个 不使用多个
  var onChange = (id, form, value, allValue) => {
    if (onValuesChange) {
      var list = dataSource.map(item => {
        if ("" + id === "" + item[rowKey]) {
          return _extends({}, item, allValue);
        }
        return _extends({}, item);
      });
      onValuesChange(list, value, allValue, id, form);
    }
  };
  React.useImperativeHandle(ref, () => ({
    save,
    onDelete,
    edit,
    cancel,
    add,
    isEditing,
    editingKey,
    newAdd,
    forms: formsRef
  }));
  return /*#__PURE__*/_jsx(React.Fragment, {
    children: /*#__PURE__*/_jsxs(EditForms.Provider, {
      value: {
        formsRef,
        onValuesChange: onChange,
        dataSource,
        rowKey
      },
      children: [/*#__PURE__*/_jsx(Table, _extends({
        size: "small",
        bordered: true
      }, rest, {
        components: {
          body: {
            row: Tr,
            cell: Td
          }
        },
        rowKey: rowKey,
        dataSource: dataSource,
        columns: mergedColumns,
        rowClassName: "editable-row",
        pagination: false
      })), isAdd && /*#__PURE__*/_jsx(Button, _extends({
        type: "dashed",
        block: true,
        children: "\u6DFB\u52A0\u4E00\u884C\u6570\u636E"
      }, addBtnProps || {}, {
        style: _extends({
          marginTop: 10
        }, (addBtnProps || {}).style || {}),
        onClick: add
      }))]
    })
  });
};
var InitEditTable = /*#__PURE__*/React.forwardRef(EditableTable);
var EditorTable = InitEditTable;
EditorTable.useStore = useStore;
EditorTable.Item = EditableCellItem;
export default EditorTable;