fx-form-widget/es/packages/previewPlatform/component/EditableTable/index.js

动态表单组件库

import _Popconfirm from "antd/es/popconfirm";
import _message from "antd/es/message";
import _extends from "@babel/runtime/helpers/extends";
import _Button from "antd/es/button";
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { PlusOutlined, CloudUploadOutlined } from '@ant-design/icons';
import { EditableProTable } from '@ant-design/pro-components';
import { setRules } from '../ContentWrap/renderWidget';
import { nanoid } from 'nanoid';
import { Widgets } from '../../widgets';
import { Context } from '../../index';
import BatchImportModal from '../BatchImportModal';
var DefaultWidgets = Widgets;
var actions = {
  title: '操作',
  valueType: 'option',
  width: 80,
  render: function render() {
    return /*#__PURE__*/React.createElement(_Button, {
      type: "link"
    });
  },
  fixed: 'right',
  align: 'center'
};
var serialNumber = {
  title: '序号',
  width: 80,
  editable: false,
  render: function render(_, __, index) {
    return index + 1;
  },
  fixed: 'left',
  align: 'center'
};
var renderTitle = function renderTitle(title, required) {
  // 外界自定义的节点,需要自己去加入星号以及其他操作
  if (typeof title !== 'string') {
    return title;
  }

  // 渲染表格必填项
  if (required) {
    return /*#__PURE__*/React.createElement("div", {
      className: "required-mask"
    }, title);
  }
  return title;
};
var EditableTable = function EditableTable(props) {
  var ContentContext = useContext(Context);
  var onSchemaChange = ContentContext.onSchemaChange,
    formId = ContentContext.formId;
  var _props$schemaChildren = props.schemaChildrenData,
    schemaChildrenData = _props$schemaChildren === void 0 ? [] : _props$schemaChildren,
    _props$viewSchema = props.viewSchema,
    viewSchema = _props$viewSchema === void 0 ? {} : _props$viewSchema,
    _props$canEditable = props.canEditable,
    canEditable = _props$canEditable === void 0 ? true : _props$canEditable,
    schema = props.schema,
    wid = props.wid,
    value = props.value;
  var subFormAddButtonText = viewSchema.subFormAddButtonText,
    showActionButton = viewSchema.showActionButton,
    maxCountNumber = viewSchema.maxCountNumber,
    articlePageNumber = viewSchema.articlePageNumber,
    _viewSchema$showBulkI = viewSchema.showBulkImportButton,
    showBulkImportButton = _viewSchema$showBulkI === void 0 ? true : _viewSchema$showBulkI,
    title = viewSchema.title,
    readonly = viewSchema.readonly,
    showSerialNumberButton = viewSchema.showSerialNumberButton;
  var _useState = useState(false),
    visible = _useState[0],
    setVisible = _useState[1];
  var _useState2 = useState([]),
    columns = _useState2[0],
    setColumns = _useState2[1];
  var _useState3 = useState({}),
    dataColumns = _useState3[0],
    setDataColumns = _useState3[1];
  var _useState4 = useState([]),
    dataSource = _useState4[0],
    setDataSource = _useState4[1];
  var _useState5 = useState([]),
    editableKeys = _useState5[0],
    setEditableRowKeys = _useState5[1];
  var formRef = useRef();
  var _useState6 = useState(1),
    current = _useState6[0],
    setCurrent = _useState6[1];
  var allDataSource = useRef(value || []);

  // 将所有的数据进行输出
  var onDataChange = function onDataChange(value) {
    var newSchema = _extends({}, schema);
    newSchema.viewSchema.data = value;
    onSchemaChange('edit', newSchema);
  };
  var onChange = function onChange(value) {
    var _props$onChange;
    setDataSource(value);
    removeDataSources(allDataSource.current, value);
    onDataChange(allDataSource.current);
    (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, value);
  };
  var removeDataSource = function removeDataSource(dataSource, column) {
    var editableId = column.editableId;
    var index = dataSource.findIndex(function (data) {
      return data.editableId === editableId;
    });
    if (index < 0) {
      return;
    }
    dataSource.splice(index, 1, column);
  };
  var removeDataSources = function removeDataSources(dataSource, columns) {
    columns.forEach(function (column) {
      removeDataSource(dataSource, column);
    });
  };

  // 将subform中的内容转化为tableClounm
  var renderSubForm2TablClounm = function renderSubForm2TablClounm(children, showActionButton, showSerialNumberButton) {
    var columns = children.map(function (schemaData) {
      var wid = schemaData.wid,
        widget = schemaData.widget,
        filename = schemaData.filename,
        viewSchema = schemaData.viewSchema;
      var _ref = viewSchema,
        title = _ref.title,
        required = _ref.required;
      var dataIndex = filename ? filename : wid;
      var Widget = DefaultWidgets[widget];
      return {
        title: renderTitle(title, required),
        dataIndex: dataIndex,
        key: dataIndex,
        width: 150,
        formItemProps: {
          rules: required ? setRules(viewSchema) : []
        },
        renderFormItem: function renderFormItem() {
          if (!Widget) {
            return null;
          }
          return /*#__PURE__*/React.createElement(Widget, {
            schema: viewSchema
          });
        }
      };
    });
    if (showActionButton) {
      columns.push(actions);
    }
    if (showSerialNumberButton) {
      columns.unshift(serialNumber);
    }
    setColumns(columns);
  };

  // 如果当前页大于每一页,就向后前进一页,如果删除页当前数据为空前进一页
  var gotoPrevPageOrNextPage = function gotoPrevPageOrNextPage(current, data) {
    // 前面一页添加满了以后第二页进行自动添加
    if (data.length === +articlePageNumber) {
      setCurrent(current + 1);
      getSliceDataSource(current + 1);
      return;
    }

    // 当前页为一条数据，删除以后应该回到前面一页
    if (data.length === 1 && current > 1) {
      setCurrent(current - 1);
      getSliceDataSource(current - 1);
      return;
    }
    if (data.length === 1 && current === 1) {
      setDataSource([]);
    }
  };

  // 新增一行
  var handleAddTabelColum = function handleAddTabelColum() {
    var newDataSource = [].concat(allDataSource.current, [_extends({}, dataColumns, {
      editableId: nanoid(6)
    })]);
    allDataSource.current = newDataSource;
    onDataChange(allDataSource.current);

    // message.success('新增成功');

    var newEditableRowKeys = newDataSource.map(function (item) {
      return item.editableId;
    });
    setEditableRowKeys(newEditableRowKeys);
    if (dataSource.length < +articlePageNumber) {
      getSliceDataSource(current);
      return;
    }
    gotoPrevPageOrNextPage(current, dataSource);
  };

  // 批量导入
  var handleAddTabelColumByBatchimport = function handleAddTabelColumByBatchimport() {
    // 计算本次导入还可以导入多少条
    // const canBatchImportTotal = +maxCountNumber! - allDataSource.current.length;

    // if (canBatchImportTotal < 0) {
    //   return;
    // }

    // // 批量导入接口返回的数据
    // allDataSource.current = [...allDataSource.current,...[]];
    // onDataChange(allDataSource.current);
    setVisible(true);
  };

  // 全部导入
  var handleAllExportByExcel = function handleAllExportByExcel() {};
  useEffect(function () {
    renderSubForm2TablClounm(schemaChildrenData, showActionButton, showSerialNumberButton);
  }, [schemaChildrenData, showActionButton, showSerialNumberButton]);

  // 监听删除某一项数据
  var onDeleteColunm = function onDeleteColunm(id) {
    var index = allDataSource.current.findIndex(function (dataSoure) {
      return dataSoure.editableId === id;
    });
    var newEditableKeys = [].concat(editableKeys);
    var editableKeysIndex = newEditableKeys.findIndex(function (editableId) {
      return editableId === id;
    });
    if (index < 0) {
      return;
    }
    allDataSource.current.splice(index, 1);
    onDataChange(allDataSource.current);
    if (editableKeysIndex < 0) {
      return;
    }
    newEditableKeys.splice(index, 1);
    setEditableRowKeys(newEditableKeys);
    _message.success('删除成功');
    if (dataSource.length === 1) {
      gotoPrevPageOrNextPage(current, dataSource);
      return;
    }
    getSliceDataSource(current);
  };
  var onCurrentePageChange = function onCurrentePageChange(current) {
    setCurrent(current);
    getSliceDataSource(current);
  };

  // 获取分页以后的数据
  var getSliceDataSource = function getSliceDataSource(current) {
    var prevTotal = (current - 1) * +articlePageNumber;
    var total = current * +articlePageNumber;
    var newDataSoure = allDataSource.current.slice(prevTotal, total);
    setDataSource(newDataSoure);
  };

  // 缓存事件
  var handleCloseClick = useCallback(function () {
    setVisible(false);
  }, []);
  var handleOkClick = useCallback(function (tableData) {
    setVisible(false);
    if (!tableData || !tableData.length) {
      return;
    }
    allDataSource.current = [].concat(tableData.slice(0, maxCountNumber - allDataSource.current.length), allDataSource.current);
    // 导入数据完成以后返回第一页
    var newEditableRowKeys = allDataSource.current.map(function (item) {
      return item.editableId;
    });
    setEditableRowKeys(newEditableRowKeys);
    onDataChange(allDataSource.current);
    getSliceDataSource(1);
  }, []);
  useEffect(function () {
    var dataColumns = {};
    schemaChildrenData.forEach(function (schemaData) {
      var wid = schemaData.wid,
        filename = schemaData.filename;
      var dataIndex = filename ? filename : wid;
      dataColumns[dataIndex] = void 0;
    });
    setDataColumns(dataColumns);
  }, [schemaChildrenData]);
  var renderButton = function renderButton(showActionButton, title, icon, onClick) {
    if (allDataSource.current.length >= maxCountNumber) {
      return null;
    }
    if (showActionButton) {
      return /*#__PURE__*/React.createElement(_Button, {
        ghost: true,
        disabled: readonly,
        size: "small",
        icon: icon,
        type: "primary",
        onClick: onClick
      }, title);
    }
    return null;
  };
  useEffect(function () {
    if (!value) {
      return;
    }
    allDataSource.current = value;
    setDataSource(value.slice(0, Number(articlePageNumber)));
    var defalutEditableKeys = value.map(function (item) {
      return item.editableId;
    });
    setEditableRowKeys(defalutEditableKeys);
  }, [value]);
  var pagination = {
    showSizeChanger: true,
    current: current,
    total: allDataSource.current.length,
    pageSize: articlePageNumber,
    pageSizeOptions: [articlePageNumber],
    onChange: onCurrentePageChange
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditableProTable, {
    bordered: true,
    columns: columns,
    rowKey: "editableId",
    value: dataSource,
    formRef: formRef,
    scroll: {
      x: true
    },
    recordCreatorProps: false,
    headerTitle: title,
    maxLength: maxCountNumber,
    pagination: pagination,
    controlled: true,
    onChange: onChange,
    toolBarRender: function toolBarRender() {
      return [renderButton(true, subFormAddButtonText, /*#__PURE__*/React.createElement(PlusOutlined, null), handleAddTabelColum), renderButton(showBulkImportButton, '批量导入', /*#__PURE__*/React.createElement(CloudUploadOutlined, null), handleAddTabelColumByBatchimport)];
    },
    editable: {
      type: 'multiple',
      editableKeys: canEditable ? editableKeys : [],
      actionRender: function actionRender(record) {
        var editableId = record.editableId;
        var handleDeleteClick = function handleDeleteClick() {
          onDeleteColunm(editableId);
        };
        return [/*#__PURE__*/React.createElement(_Popconfirm, {
          title: "\u5220\u9664\u6B64\u884C\uFF1F",
          onConfirm: handleDeleteClick,
          okText: "\u786E\u5B9A",
          key: "delete",
          cancelText: "\u53D6\u6D88"
        }, /*#__PURE__*/React.createElement(_Button, {
          type: "link"
        }, "\u5220\u9664"))];
      }
    }
  }), /*#__PURE__*/React.createElement(BatchImportModal, {
    visible: visible,
    formId: formId,
    subformWid: wid,
    maxCount: maxCountNumber,
    onCancel: handleCloseClick,
    getImportData: handleOkClick
  }));
};
export default EditableTable;