450 lines
20 KiB
JavaScript
450 lines
20 KiB
JavaScript
"use strict";
|
||
|
||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||
Object.defineProperty(exports, "__esModule", {
|
||
value: true
|
||
});
|
||
exports.default = exports.ProDescriptions = exports.FieldRender = void 0;
|
||
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
||
var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
|
||
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
||
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
||
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
||
var _icons = require("@ant-design/icons");
|
||
var _proForm = _interopRequireWildcard(require("@ant-design/pro-form"));
|
||
var _proSkeleton = _interopRequireDefault(require("@ant-design/pro-skeleton"));
|
||
var _proUtils = require("@ant-design/pro-utils");
|
||
var _antd = require("antd");
|
||
var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
|
||
var _get = _interopRequireDefault(require("rc-util/lib/utils/get"));
|
||
var _react = _interopRequireWildcard(require("react"));
|
||
var _useFetchData = _interopRequireDefault(require("./useFetchData"));
|
||
var _proProvider = require("@ant-design/pro-provider");
|
||
require("antd/lib/descriptions/style");
|
||
var _jsxRuntime = require("react/jsx-runtime");
|
||
var _excluded = ["valueEnum", "render", "renderText", "mode", "plain", "dataIndex", "request", "params", "editable"],
|
||
_excluded2 = ["request", "columns", "params", "dataSource", "onDataSourceChange", "formProps", "editable", "loading", "onLoadingChange", "actionRef", "onRequestError", "emptyText", "contentStyle"]; // 兼容代码-----------
|
||
//----------------------
|
||
// todo remove it
|
||
/**
|
||
* 定义列表属性的类型定义，用于定义列表的一列
|
||
* @typedef {Object} ProDescriptionsItemProps
|
||
* @property {ProSchema} schema - 用于生成表格项的 schema 配置对象
|
||
* @property {boolean} [hide] - 是否隐藏该列，可用于权限控制
|
||
* @property {boolean} [plain] - 是否只展示文本，不展示标签
|
||
* @property {boolean} [copyable] - 是否可以拷贝该列的内容
|
||
* @property {boolean | { showTitle?: boolean }} [ellipsis] - 是否展示省略号，如果是一个对象，可以设置鼠标悬浮时是否展示完整的内容
|
||
* @property {ProFieldFCMode} [mode] - ProField 组件的模式
|
||
* @property {React.ReactNode} [children] - 表格项的子组件
|
||
* @property {number} [order] - 表格项的排序
|
||
* @property {number} [index] - 表格项的索引
|
||
* @template T - 表格数据的类型
|
||
* @template ValueType - 表格项的值类型
|
||
*/
|
||
/**
|
||
* 根据 dataIndex 获取值，支持 dataIndex 为数组
|
||
*
|
||
* @param item
|
||
* @param entity
|
||
*/
|
||
var getDataFromConfig = function getDataFromConfig(item, entity) {
|
||
var dataIndex = item.dataIndex;
|
||
if (dataIndex) {
|
||
var data = Array.isArray(dataIndex) ? (0, _get.default)(entity, dataIndex) : entity[dataIndex];
|
||
if (data !== undefined || data !== null) {
|
||
return data;
|
||
}
|
||
}
|
||
return item.children;
|
||
};
|
||
|
||
/**
|
||
* 这里会处理编辑的功能
|
||
*
|
||
* @param props
|
||
*/
|
||
var FieldRender = exports.FieldRender = function FieldRender(props) {
|
||
var _proTheme$useToken2;
|
||
var valueEnum = props.valueEnum,
|
||
action = props.action,
|
||
index = props.index,
|
||
text = props.text,
|
||
entity = props.entity,
|
||
mode = props.mode,
|
||
render = props.render,
|
||
editableUtils = props.editableUtils,
|
||
valueType = props.valueType,
|
||
plain = props.plain,
|
||
dataIndex = props.dataIndex,
|
||
request = props.request,
|
||
renderFormItem = props.renderFormItem,
|
||
params = props.params,
|
||
emptyText = props.emptyText;
|
||
var form = _proForm.default.useFormInstance();
|
||
var _proTheme$useToken = (_proTheme$useToken2 = _proProvider.proTheme.useToken) === null || _proTheme$useToken2 === void 0 ? void 0 : _proTheme$useToken2.call(_proProvider.proTheme),
|
||
token = _proTheme$useToken.token;
|
||
var fieldConfig = {
|
||
text: text,
|
||
valueEnum: valueEnum,
|
||
mode: mode || 'read',
|
||
proFieldProps: {
|
||
emptyText: emptyText,
|
||
render: render ? function (finText) {
|
||
return render === null || render === void 0 ? void 0 : render(finText, entity, index, action, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
|
||
type: 'descriptions'
|
||
}));
|
||
} : undefined
|
||
},
|
||
ignoreFormItem: true,
|
||
valueType: valueType,
|
||
request: request,
|
||
params: params,
|
||
plain: plain
|
||
};
|
||
|
||
/** 如果是只读模式，fieldProps 的 form是空的，所以需要兜底处理 */
|
||
if (mode === 'read' || !mode || valueType === 'option') {
|
||
var fieldProps = (0, _proUtils.getFieldPropsOrFormItemProps)(props.fieldProps, undefined, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
|
||
rowKey: dataIndex,
|
||
isEditable: false
|
||
}));
|
||
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_proForm.ProFormField, (0, _objectSpread2.default)((0, _objectSpread2.default)({
|
||
name: dataIndex
|
||
}, fieldConfig), {}, {
|
||
fieldProps: fieldProps
|
||
}));
|
||
}
|
||
var renderDom = function renderDom() {
|
||
var _editableUtils$action;
|
||
var formItemProps = (0, _proUtils.getFieldPropsOrFormItemProps)(props.formItemProps, form, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
|
||
rowKey: dataIndex,
|
||
isEditable: true
|
||
}));
|
||
var fieldProps = (0, _proUtils.getFieldPropsOrFormItemProps)(props.fieldProps, form, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
|
||
rowKey: dataIndex,
|
||
isEditable: true
|
||
}));
|
||
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
||
style: {
|
||
display: 'flex',
|
||
gap: token.marginXS,
|
||
alignItems: 'baseline'
|
||
},
|
||
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_proUtils.InlineErrorFormItem, (0, _objectSpread2.default)((0, _objectSpread2.default)({
|
||
name: dataIndex
|
||
}, formItemProps), {}, {
|
||
style: (0, _objectSpread2.default)({
|
||
margin: 0
|
||
}, (formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.style) || {}),
|
||
initialValue: text || (formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.initialValue),
|
||
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_proForm.ProFormField, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fieldConfig), {}, {
|
||
// @ts-ignore
|
||
proFieldProps: (0, _objectSpread2.default)({}, fieldConfig.proFieldProps),
|
||
renderFormItem: renderFormItem ? function () {
|
||
return renderFormItem === null || renderFormItem === void 0 ? void 0 : renderFormItem((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
|
||
type: 'descriptions'
|
||
}), {
|
||
isEditable: true,
|
||
recordKey: dataIndex,
|
||
record: form.getFieldValue([dataIndex].flat(1)),
|
||
defaultRender: function defaultRender() {
|
||
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_proForm.ProFormField, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fieldConfig), {}, {
|
||
fieldProps: fieldProps
|
||
}));
|
||
},
|
||
type: 'descriptions'
|
||
}, form);
|
||
} : undefined,
|
||
fieldProps: fieldProps
|
||
}))
|
||
})), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
||
style: {
|
||
display: 'flex',
|
||
maxHeight: token.controlHeight,
|
||
alignItems: 'center',
|
||
gap: token.marginXS
|
||
},
|
||
children: editableUtils === null || editableUtils === void 0 || (_editableUtils$action = editableUtils.actionRender) === null || _editableUtils$action === void 0 ? void 0 : _editableUtils$action.call(editableUtils, dataIndex || index, {
|
||
cancelText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {}),
|
||
saveText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {}),
|
||
deleteText: false
|
||
})
|
||
})]
|
||
});
|
||
};
|
||
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
||
style: {
|
||
marginTop: -5,
|
||
marginBottom: -5,
|
||
marginLeft: 0,
|
||
marginRight: 0
|
||
},
|
||
children: renderDom()
|
||
});
|
||
};
|
||
var schemaToDescriptionsItem = function schemaToDescriptionsItem(items, entity, action, editableUtils, emptyText) {
|
||
var _items$map;
|
||
var options = [];
|
||
var isBigger58 = (0, _proUtils.compareVersions)(_antd.version, '5.8.0') >= 0;
|
||
// 因为 Descriptions 只是个语法糖，children 是不会执行的，所以需要这里处理一下
|
||
var children = items === null || items === void 0 || (_items$map = items.map) === null || _items$map === void 0 ? void 0 : _items$map.call(items, function (item, index) {
|
||
var _getDataFromConfig, _restItem$label, _restItem$label2;
|
||
if ( /*#__PURE__*/_react.default.isValidElement(item)) {
|
||
return isBigger58 ? {
|
||
children: item
|
||
} : item;
|
||
}
|
||
var _ref = item,
|
||
valueEnum = _ref.valueEnum,
|
||
render = _ref.render,
|
||
renderText = _ref.renderText,
|
||
mode = _ref.mode,
|
||
plain = _ref.plain,
|
||
dataIndex = _ref.dataIndex,
|
||
request = _ref.request,
|
||
params = _ref.params,
|
||
editable = _ref.editable,
|
||
restItem = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
||
var defaultData = (_getDataFromConfig = getDataFromConfig(item, entity)) !== null && _getDataFromConfig !== void 0 ? _getDataFromConfig : restItem.children;
|
||
var text = renderText ? renderText(defaultData, entity, index, action) : defaultData;
|
||
var title = typeof restItem.title === 'function' ? restItem.title(item, 'descriptions', null) : restItem.title;
|
||
|
||
// dataIndex 无所谓是否存在
|
||
// 有些时候不需要 dataIndex 可以直接 render
|
||
var valueType = typeof restItem.valueType === 'function' ? restItem.valueType(entity || {}, 'descriptions') : restItem.valueType;
|
||
var isEditable = editableUtils === null || editableUtils === void 0 ? void 0 : editableUtils.isEditable(dataIndex || index);
|
||
var fieldMode = mode || isEditable ? 'edit' : 'read';
|
||
var showEditIcon = editableUtils && fieldMode === 'read' && editable !== false && (editable === null || editable === void 0 ? void 0 : editable(text, entity, index)) !== false;
|
||
var Component = showEditIcon ? _antd.Space : _react.default.Fragment;
|
||
var contentDom = fieldMode === 'edit' ? text : (0, _proUtils.genCopyable)(text, item, text);
|
||
var field = isBigger58 && valueType !== 'option' ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restItem), {}, {
|
||
key: restItem.key || ((_restItem$label = restItem.label) === null || _restItem$label === void 0 ? void 0 : _restItem$label.toString()) || index,
|
||
label: (title || restItem.label || restItem.tooltip) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_proUtils.LabelIconTip, {
|
||
label: title || restItem.label,
|
||
tooltip: restItem.tooltip,
|
||
ellipsis: item.ellipsis
|
||
}),
|
||
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
|
||
children: [/*#__PURE__*/(0, _react.createElement)(FieldRender, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
|
||
key: item === null || item === void 0 ? void 0 : item.key,
|
||
dataIndex: item.dataIndex || index,
|
||
mode: fieldMode,
|
||
text: contentDom,
|
||
valueType: valueType,
|
||
entity: entity,
|
||
index: index,
|
||
emptyText: emptyText,
|
||
action: action,
|
||
editableUtils: editableUtils
|
||
})), showEditIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EditOutlined, {
|
||
onClick: function onClick() {
|
||
editableUtils === null || editableUtils === void 0 || editableUtils.startEditable(dataIndex || index);
|
||
}
|
||
})]
|
||
})
|
||
}) : /*#__PURE__*/(0, _react.createElement)(_antd.Descriptions.Item, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restItem), {}, {
|
||
key: restItem.key || ((_restItem$label2 = restItem.label) === null || _restItem$label2 === void 0 ? void 0 : _restItem$label2.toString()) || index,
|
||
label: (title || restItem.label || restItem.tooltip) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_proUtils.LabelIconTip, {
|
||
label: title || restItem.label,
|
||
tooltip: restItem.tooltip,
|
||
ellipsis: item.ellipsis
|
||
})
|
||
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
|
||
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FieldRender, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
|
||
dataIndex: item.dataIndex || index,
|
||
mode: fieldMode,
|
||
text: contentDom,
|
||
valueType: valueType,
|
||
entity: entity,
|
||
index: index,
|
||
action: action,
|
||
editableUtils: editableUtils
|
||
})), showEditIcon && valueType !== 'option' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EditOutlined, {
|
||
onClick: function onClick() {
|
||
editableUtils === null || editableUtils === void 0 || editableUtils.startEditable(dataIndex || index);
|
||
}
|
||
})]
|
||
}));
|
||
// 如果类型是 option 自动放到右上角
|
||
if (valueType === 'option') {
|
||
options.push(field);
|
||
return null;
|
||
}
|
||
return field;
|
||
}).filter(function (item) {
|
||
return item;
|
||
});
|
||
return {
|
||
// 空数组传递还是会被判定为有值
|
||
options: options !== null && options !== void 0 && options.length ? options : null,
|
||
children: children
|
||
};
|
||
};
|
||
var ProDescriptionsItem = function ProDescriptionsItem(props) {
|
||
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Descriptions.Item, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
|
||
children: props.children
|
||
}));
|
||
};
|
||
ProDescriptionsItem.displayName = 'ProDescriptionsItem';
|
||
var DefaultProDescriptionsDom = function DefaultProDescriptionsDom(dom) {
|
||
return dom.children;
|
||
};
|
||
var ProDescriptions = exports.ProDescriptions = function ProDescriptions(props) {
|
||
var _props$editable;
|
||
var request = props.request,
|
||
columns = props.columns,
|
||
params = props.params,
|
||
dataSource = props.dataSource,
|
||
onDataSourceChange = props.onDataSourceChange,
|
||
formProps = props.formProps,
|
||
editable = props.editable,
|
||
loading = props.loading,
|
||
onLoadingChange = props.onLoadingChange,
|
||
actionRef = props.actionRef,
|
||
onRequestError = props.onRequestError,
|
||
emptyText = props.emptyText,
|
||
contentStyle = props.contentStyle,
|
||
rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
|
||
var context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
|
||
var action = (0, _useFetchData.default)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
|
||
var data;
|
||
return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
|
||
while (1) switch (_context.prev = _context.next) {
|
||
case 0:
|
||
if (!request) {
|
||
_context.next = 6;
|
||
break;
|
||
}
|
||
_context.next = 3;
|
||
return request(params || {});
|
||
case 3:
|
||
_context.t0 = _context.sent;
|
||
_context.next = 7;
|
||
break;
|
||
case 6:
|
||
_context.t0 = {
|
||
data: {}
|
||
};
|
||
case 7:
|
||
data = _context.t0;
|
||
return _context.abrupt("return", data);
|
||
case 9:
|
||
case "end":
|
||
return _context.stop();
|
||
}
|
||
}, _callee);
|
||
})), {
|
||
onRequestError: onRequestError,
|
||
effects: [(0, _proUtils.stringify)(params)],
|
||
manual: !request,
|
||
dataSource: dataSource,
|
||
loading: loading,
|
||
onLoadingChange: onLoadingChange,
|
||
onDataSourceChange: onDataSourceChange
|
||
});
|
||
|
||
/*
|
||
* 可编辑行的相关配置
|
||
*/
|
||
var editableUtils = (0, _proUtils.useEditableMap)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props.editable), {}, {
|
||
childrenColumnName: undefined,
|
||
dataSource: action.dataSource,
|
||
setDataSource: action.setDataSource
|
||
}));
|
||
|
||
/** 支持 reload 的功能 */
|
||
(0, _react.useEffect)(function () {
|
||
if (actionRef) {
|
||
actionRef.current = (0, _objectSpread2.default)({
|
||
reload: action.reload
|
||
}, editableUtils);
|
||
}
|
||
}, [action, actionRef, editableUtils]);
|
||
|
||
// loading 时展示
|
||
// loading = undefined 但是 request 存在时也应该展示
|
||
if (action.loading || action.loading === undefined && request) {
|
||
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_proSkeleton.default, {
|
||
type: "descriptions",
|
||
list: false,
|
||
pageHeader: false
|
||
});
|
||
}
|
||
var getColumns = function getColumns() {
|
||
// 因为 Descriptions 只是个语法糖，children 是不会执行的，所以需要这里处理一下
|
||
var childrenColumns = (0, _toArray.default)(props.children).filter(Boolean).map(function (item) {
|
||
if (! /*#__PURE__*/_react.default.isValidElement(item)) {
|
||
return item;
|
||
}
|
||
var _ref3 = item === null || item === void 0 ? void 0 : item.props,
|
||
valueEnum = _ref3.valueEnum,
|
||
valueType = _ref3.valueType,
|
||
dataIndex = _ref3.dataIndex,
|
||
ellipsis = _ref3.ellipsis,
|
||
copyable = _ref3.copyable,
|
||
itemRequest = _ref3.request;
|
||
if (!valueType && !valueEnum && !dataIndex && !itemRequest && !ellipsis && !copyable &&
|
||
// @ts-ignore
|
||
item.type.displayName !== 'ProDescriptionsItem') {
|
||
return item;
|
||
}
|
||
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item === null || item === void 0 ? void 0 : item.props), {}, {
|
||
entity: dataSource
|
||
});
|
||
});
|
||
return [].concat((0, _toConsumableArray2.default)(columns || []), (0, _toConsumableArray2.default)(childrenColumns)).filter(function (item) {
|
||
if (!item) return false;
|
||
if (item !== null && item !== void 0 && item.valueType && ['index', 'indexBorder'].includes(item === null || item === void 0 ? void 0 : item.valueType)) {
|
||
return false;
|
||
}
|
||
return !(item !== null && item !== void 0 && item.hideInDescriptions);
|
||
}).sort(function (a, b) {
|
||
if (b.order || a.order) {
|
||
return (b.order || 0) - (a.order || 0);
|
||
}
|
||
return (b.index || 0) - (a.index || 0);
|
||
});
|
||
};
|
||
var _schemaToDescriptions = schemaToDescriptionsItem(getColumns(), action.dataSource || {}, (actionRef === null || actionRef === void 0 ? void 0 : actionRef.current) || action, editable ? editableUtils : undefined, props.emptyText),
|
||
options = _schemaToDescriptions.options,
|
||
children = _schemaToDescriptions.children;
|
||
|
||
/** 如果不是可编辑模式，没必要注入 ProForm */
|
||
var FormComponent = editable ? _proForm.default : DefaultProDescriptionsDom;
|
||
|
||
/** 即使组件返回null了, 在传递的过程中还是会被Description检测到为有值 */
|
||
var title = null;
|
||
if (rest.title || rest.tooltip || rest.tip) {
|
||
title = /*#__PURE__*/(0, _jsxRuntime.jsx)(_proUtils.LabelIconTip, {
|
||
label: rest.title,
|
||
tooltip: rest.tooltip || rest.tip
|
||
});
|
||
}
|
||
var className = context.getPrefixCls('pro-descriptions');
|
||
var isBigger58 = (0, _proUtils.compareVersions)(_antd.version, '5.8.0') >= 0;
|
||
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_proUtils.ErrorBoundary, {
|
||
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FormComponent, (0, _objectSpread2.default)((0, _objectSpread2.default)({
|
||
form: (_props$editable = props.editable) === null || _props$editable === void 0 ? void 0 : _props$editable.form,
|
||
component: false,
|
||
submitter: false
|
||
}, formProps), {}, {
|
||
onFinish: undefined,
|
||
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Descriptions, (0, _objectSpread2.default)((0, _objectSpread2.default)({
|
||
className: className
|
||
}, rest), {}, {
|
||
contentStyle: (0, _objectSpread2.default)({
|
||
minWidth: 0
|
||
}, contentStyle || {}),
|
||
extra: rest.extra ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
|
||
children: [options, rest.extra]
|
||
}) : options,
|
||
title: title,
|
||
items: isBigger58 ? children : undefined,
|
||
children: isBigger58 ? null : children
|
||
}))
|
||
}), "form")
|
||
});
|
||
};
|
||
ProDescriptions.Item = ProDescriptionsItem;
|
||
var _default = exports.default = ProDescriptions; |