knk
Version:
react components based on react
240 lines (236 loc) • 7.96 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
var _excluded = ["isOver", "connectDragSource", "connectDropTarget", "moveRow"];
/**
* 通用可拖动排序表格
*/
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Table, message, Spin } from 'antd';
import { DndProvider, DragSource, DropTarget } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import { fetch } from '../../../common/api';
import { getPageData, isObjEmpty, filterEmptyData } from '../../../common/tool';
import '../../../style/index.less';
var dragingIndex = -1;
var BodyRow = /*#__PURE__*/function (_React$Component) {
_inherits(BodyRow, _React$Component);
var _super = _createSuper(BodyRow);
function BodyRow() {
_classCallCheck(this, BodyRow);
return _super.apply(this, arguments);
}
_createClass(BodyRow, [{
key: "render",
value: function render() {
var _this$props = this.props,
isOver = _this$props.isOver,
connectDragSource = _this$props.connectDragSource,
connectDropTarget = _this$props.connectDropTarget,
moveRow = _this$props.moveRow,
restProps = _objectWithoutProperties(_this$props, _excluded);
var style = _objectSpread(_objectSpread({}, restProps.style), {}, {
cursor: 'move'
});
var className = restProps.className;
if (isOver) {
if (restProps.index > dragingIndex) {
className += ' drop-over-downward';
}
if (restProps.index < dragingIndex) {
className += ' drop-over-upward';
}
}
return connectDragSource(connectDropTarget( /*#__PURE__*/React.createElement("tr", _extends({}, restProps, {
className: className,
style: style
}))));
}
}]);
return BodyRow;
}(React.Component);
var rowSource = {
beginDrag: function beginDrag(props) {
dragingIndex = props.index;
return {
index: props.index
};
}
};
var rowTarget = {
drop: function drop(props, monitor) {
var dragIndex = monitor.getItem().index;
var hoverIndex = props.index;
// Don't replace items with themselves
if (dragIndex === hoverIndex) {
return;
}
// Time to actually perform the action
props.moveRow(dragIndex, hoverIndex);
// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
monitor.getItem().index = hoverIndex;
}
};
var DragableBodyRow = DropTarget('row', rowTarget, function (connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver()
};
})(DragSource('row', rowSource, function (connect) {
return {
connectDragSource: connect.dragSource()
};
})(BodyRow));
var DragSortTable = function DragSortTable(props) {
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
loading = _useState2[0],
setLoading = _useState2[1];
var _useState3 = useState({}),
_useState4 = _slicedToArray(_useState3, 2),
tableData = _useState4[0],
setTableData = _useState4[1];
useEffect(function () {
handleGetData({
page: 1,
pageSize: 10
});
}, []);
var components = {
body: {
row: DragableBodyRow
}
};
var moveRow = function moveRow(dragIndex, hoverIndex) {
var tableDataArr = tableData.content || [];
var dragRow = tableDataArr[dragIndex];
var resultData = update({
tableDataArr: tableDataArr
}, {
tableDataArr: {
$splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]]
}
});
setTableData({
content: resultData.tableDataArr
});
};
var handleGetData = function handleGetData(data) {
var apiPath = props.apiPath,
apiData = props.apiData,
apiMethod = props.apiMethod;
setLoading(true);
var sendData = filterEmptyData(_objectSpread(_objectSpread({}, apiData), data));
fetch(apiPath, sendData, apiMethod).then(function (res) {
// 判断如果卸载,则不再设置数据
if (!res.data || !res.data.content) res.data.content = [];
res.data.content.map(function (item, inx) {
item.key = inx;
});
setLoading(false);
setTableData(res.data);
}).catch(function (err) {
setLoading(false);
message.error("\u83B7\u53D6\u6570\u636E\u5931\u8D25:".concat(err.message));
});
};
var handleChangePage = function handleChangePage(page, filters, sorter) {
var sortType = props.sortType;
var orders = {};
if (!isObjEmpty(sorter)) {
sortType.map(function (item) {
if (item.text === sorter.columnKey) {
orders = {
sortType: item.value,
isDesc: sorter.order === 'descend' ? 1 : 0
};
}
});
}
handleGetData(_objectSpread({
page: page.current,
pageSize: page.pageSize
}, orders));
};
var tableTitle = props.tableTitle,
columns = props.columns,
isShowPagination = props.isShowPagination,
isShowBordered = props.isShowBordered,
rightLink = props.rightLink,
rightLinkTitle = props.rightLinkTitle,
pageSizeOptions = props.pageSizeOptions,
rowKeyFun = props.rowKeyFun,
scroll = props.scroll;
var pageData;
if (isShowPagination && pageSizeOptions) {
pageData = _objectSpread(_objectSpread({}, getPageData(tableData)), {}, {
pageSizeOptions: pageSizeOptions
});
} else pageData = _objectSpread({}, getPageData(tableData));
return /*#__PURE__*/React.createElement("div", {
className: "drap-sort-table"
}, /*#__PURE__*/React.createElement(Spin, {
spinning: loading
}, tableTitle ? /*#__PURE__*/React.createElement("h3", null, tableTitle, rightLink ? /*#__PURE__*/React.createElement("a", {
className: "right-link pull-right",
href: rightLink,
target: "_blank",
rel: "noopener noreferrer"
}, rightLinkTitle) : null) : null, /*#__PURE__*/React.createElement(DndProvider, {
backend: HTML5Backend
}, /*#__PURE__*/React.createElement(Table, {
columns: columns,
bordered: isShowBordered,
pagination: isShowPagination ? pageData : false,
dataSource: tableData.content || [],
onChange: handleChangePage,
rowKey: rowKeyFun,
scroll: scroll,
components: components,
onRow: function onRow(record, index) {
return {
index: index,
moveRow: moveRow
};
}
}))));
};
DragSortTable.propTypes = {
rightLink: PropTypes.string,
// table 右侧链接
rightLinkTitle: PropTypes.string,
// table 右侧链接文案
tableTitle: PropTypes.string,
// table名字
columns: PropTypes.array.isRequired,
// 表格的配置项
isShowBordered: PropTypes.bool,
// table是否带有边框,
isShowPagination: PropTypes.bool,
// table是否展示分页
apiPath: PropTypes.string.isRequired,
// api接口,由于直接诶读取data.data的数组数据,所以该API不能使用分页
apiData: PropTypes.object,
// api请求附加的数据
apiMethod: PropTypes.string,
// api请求method,
sortType: PropTypes.array,
// table排序类型 [{ text: 'sortName', value: 'sortValue'}],
pageSizeOptions: PropTypes.array,
rowKeyFun: PropTypes.func,
scroll: PropTypes.object
};
DragSortTable.defaultProps = {
isShowBordered: true
};
export default DragSortTable;