fx-form-widget
Version:
378 lines (362 loc) • 14 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _popconfirm = _interopRequireDefault(require("antd/lib/popconfirm"));
var _message2 = _interopRequireDefault(require("antd/lib/message"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _button = _interopRequireDefault(require("antd/lib/button"));
var _react = _interopRequireWildcard(require("react"));
var _icons = require("@ant-design/icons");
var _proComponents = require("@ant-design/pro-components");
var _renderWidget = require("../ContentWrap/renderWidget");
var _nanoid = require("nanoid");
var _widgets = require("../../widgets");
var _index = require("../../index");
var _BatchImportModal = _interopRequireDefault(require("../BatchImportModal"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var DefaultWidgets = _widgets.Widgets;
var actions = {
title: '操作',
valueType: 'option',
width: 80,
render: function render() {
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
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["default"].createElement("div", {
className: "required-mask"
}, title);
}
return title;
};
var EditableTable = function EditableTable(props) {
var ContentContext = (0, _react.useContext)(_index.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 = (0, _react.useState)(false),
visible = _useState[0],
setVisible = _useState[1];
var _useState2 = (0, _react.useState)([]),
columns = _useState2[0],
setColumns = _useState2[1];
var _useState3 = (0, _react.useState)({}),
dataColumns = _useState3[0],
setDataColumns = _useState3[1];
var _useState4 = (0, _react.useState)([]),
dataSource = _useState4[0],
setDataSource = _useState4[1];
var _useState5 = (0, _react.useState)([]),
editableKeys = _useState5[0],
setEditableRowKeys = _useState5[1];
var formRef = (0, _react.useRef)();
var _useState6 = (0, _react.useState)(1),
current = _useState6[0],
setCurrent = _useState6[1];
var allDataSource = (0, _react.useRef)(value || []);
// 将所有的数据进行输出
var onDataChange = function onDataChange(value) {
var newSchema = (0, _extends2["default"])({}, 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 ? (0, _renderWidget.setRules)(viewSchema) : []
},
renderFormItem: function renderFormItem() {
if (!Widget) {
return null;
}
return /*#__PURE__*/_react["default"].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, [(0, _extends2["default"])({}, dataColumns, {
editableId: (0, _nanoid.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() {};
(0, _react.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);
_message2["default"].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 = (0, _react.useCallback)(function () {
setVisible(false);
}, []);
var handleOkClick = (0, _react.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);
}, []);
(0, _react.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["default"].createElement(_button["default"], {
ghost: true,
disabled: readonly,
size: "small",
icon: icon,
type: "primary",
onClick: onClick
}, title);
}
return null;
};
(0, _react.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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_proComponents.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["default"].createElement(_icons.PlusOutlined, null), handleAddTabelColum), renderButton(showBulkImportButton, '批量导入', /*#__PURE__*/_react["default"].createElement(_icons.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["default"].createElement(_popconfirm["default"], {
title: "\u5220\u9664\u6B64\u884C\uFF1F",
onConfirm: handleDeleteClick,
okText: "\u786E\u5B9A",
key: "delete",
cancelText: "\u53D6\u6D88"
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
type: "link"
}, "\u5220\u9664"))];
}
}
}), /*#__PURE__*/_react["default"].createElement(_BatchImportModal["default"], {
visible: visible,
formId: formId,
subformWid: wid,
maxCount: maxCountNumber,
onCancel: handleCloseClick,
getImportData: handleOkClick
}));
};
var _default = exports["default"] = EditableTable;