@antdp/antdp-ui
Version:
基于antd封装的组件
431 lines (428 loc) • 21.1 kB
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"] = void 0;
Object.defineProperty(exports, "getChildFormItemFun", {
enumerable: true,
get: function get() {
return _utils.getChildItemFun;
}
});
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _CardPro = _interopRequireDefault(require("../CardPro"));
var _UploadGrid = _interopRequireDefault(require("../UploadGrid"));
var _InputCount = _interopRequireDefault(require("../InputCount"));
var _zh_CN = _interopRequireDefault(require("antd/es/locale/zh_CN"));
require("moment/locale/zh-cn");
var _zh_CN2 = _interopRequireDefault(require("antd/es/date-picker/locale/zh_CN"));
var _icons = require("@ant-design/icons");
var _formLayout = require("./formLayout");
var _context = require("./Hide/context");
var _store = _interopRequireDefault(require("./Hide/store"));
var _Hide = _interopRequireDefault(require("./Hide"));
var _jsxRuntime = require("react/jsx-runtime");
var _utils = require("./utils");
var _excluded = ["collapseAttributes", "panelAttributes", "visible", "type", "extra", "formDatas", "colspan", "header", "defaultFormLayout", "defaultFormItemLayout", "size", "formHide", "initialHide"],
_excluded2 = ["label", "name", "attributes", "type", "options", "onlyimg", "defaultFormItemLayout", "full", "defaultRowColspan", "hideInForm", "descItem", "render", "isHide"],
_excluded3 = ["value", "label"];
/* eslint-disable camelcase */
var Panel = _antd.Collapse.Panel;
var FormItem = _antd.Form.Item;
var Option = _antd.Select.Option;
var Search = _antd.Input.Search;
var RangePicker = _antd.DatePicker.RangePicker,
MonthPicker = _antd.DatePicker.MonthPicker;
var QuickForm = function QuickForm(props, ref) {
var collapseAttributes = props.collapseAttributes,
panelAttributes = props.panelAttributes,
_props$visible = props.visible,
visible = _props$visible === void 0 ? false : _props$visible,
_props$type = props.type,
type = _props$type === void 0 ? 'cardform' : _props$type,
extra = props.extra,
formDatas = props.formDatas,
_props$colspan = props.colspan,
colspan = _props$colspan === void 0 ? 3 : _props$colspan,
header = props.header,
_props$defaultFormLay = props.defaultFormLayout,
defaultFormLayout = _props$defaultFormLay === void 0 ? 'vertical' : _props$defaultFormLay,
_props$defaultFormIte = props.defaultFormItemLayout,
defaultFormItemLayout = _props$defaultFormIte === void 0 ? _formLayout.formDefaultFormItemLayout : _props$defaultFormIte,
_props$size = props.size,
size = _props$size === void 0 ? 'default' : _props$size,
formHide = props.formHide,
initialHide = props.initialHide,
otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useFormItemHide = (0, _store["default"])(formHide),
_useFormItemHide2 = (0, _slicedToArray2["default"])(_useFormItemHide, 1),
hide = _useFormItemHide2[0];
_react["default"].useMemo(function () {
return hide.setInitialValues(initialHide || {}, true);
}, []);
var HideFormItemDoM = []; // 隐藏的表单
var FormItemDoM = [];
var rowcolspan; // col 里的布局
var formitemlayout; // formitem 的布局
for (var i = 0; i < formDatas.length; i++) {
if (formDatas[i].hideInForm) {
HideFormItemDoM.push(formDatas[i]);
} else {
FormItemDoM.push(formDatas[i]);
}
}
// 计算一个row里排几个表单；
var result = [];
for (var _i = 0, j = FormItemDoM.length; _i < j; _i++) {
if (FormItemDoM[_i].full) {
result.push(FormItemDoM.slice(_i, _i + 1));
} else {
if (FormItemDoM[_i + 1] && FormItemDoM[_i + 1].full) {
result.push(FormItemDoM.slice(_i, _i + 1));
} else if (FormItemDoM[_i].defaultcolspan) {
result.push(FormItemDoM.slice(_i, _i + FormItemDoM[_i].defaultcolspan));
_i = _i + FormItemDoM[_i].defaultcolspan - 1;
} else {
result.push(FormItemDoM.slice(_i, _i + colspan));
_i = _i + colspan - 1;
}
}
}
// 渲染成表单;
var CollapseFormDoM = function CollapseFormDoM(item, idx) {
var label = item.label,
name = item.name,
attributes = item.attributes,
type = item.type,
options = item.options,
onlyimg = item.onlyimg,
defaultFormItemLayout = item.defaultFormItemLayout,
full = item.full,
defaultRowColspan = item.defaultRowColspan,
hideInForm = item.hideInForm,
descItem = item.descItem,
render = item.render,
isHide = item.isHide,
otherts = (0, _objectWithoutProperties2["default"])(item, _excluded2);
var dataList = options || [];
var optionDatas = dataList && dataList.length > 0 && dataList.map(function (_ref, _idx) {
var value = _ref.value,
label = _ref.label,
others = (0, _objectWithoutProperties2["default"])(_ref, _excluded3);
if (type === 'select' || type === 'Select') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
value: value
}, others), {}, {
children: label
}), _idx);
} else if (type === 'radio' || type === 'Radio') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Radio.Button, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
value: value
}, others), {}, {
children: label
}), _idx);
}
});
var selectOption = optionDatas ? optionDatas : [];
var rowcolspan_num = [_formLayout.colLayout_one, _formLayout.colLayout_two, _formLayout.colLayout_third, _formLayout.colLayout_fourth];
var formitemlayout_num = [_formLayout.fromItemLayout_conspan_one, _formLayout.fromItemLayout_conspan_two, _formLayout.fromItemLayout_conspan_third, _formLayout.fromItemLayout_conspan_fourth];
if (colspan && full) {
rowcolspan = _formLayout.colLayout_one;
if (colspan === 3 || colspan === 4) {
if (props.defaultFormItemLayout) {
// 如果FormCollapse组件上带有defaulFormItemLayout参数
formitemlayout = props.defaultFormItemLayout;
// eslint-disable-next-line max-depth
if (item.defaultFormItemLayout || item.defaultRowColspan) {
// 如果FormCollapse组件内部的某个小组件带有defaulFormItemLayout参数
formitemlayout = item.defaultFormItemLayout;
rowcolspan = item.defaultRowColspan; // 单独的表单col 布局
}
} else if (item.defaultFormItemLayout || item.defaultRowColspan) {
//FormCollapse组件内部只有某个小组件带了defaulFormItemLayout参数
formitemlayout = item.defaultFormItemLayout;
rowcolspan = item.defaultRowColspan; // 单独的表单col 布局
} else {
formitemlayout = _formLayout.fromItemLayout_third_row;
}
} else {
formitemlayout = _formLayout.fromItemLayout_two_row;
}
} else {
rowcolspan = rowcolspan_num[colspan - 1];
if (props.defaultFormItemLayout) {
formitemlayout = props.defaultFormItemLayout;
if (item.defaultFormItemLayout || item.defaultRowColspan) {
// 如果FormCollapse组件内部的某个小组件带有defaultFormItemLayout参数
formitemlayout = item.defaultFormItemLayout;
rowcolspan = item.defaultRowColspan; // 单独的表单col 布局
}
} else if (item.defaultFormItemLayout || item.defaultRowColspan) {
formitemlayout = item.defaultFormItemLayout || formitemlayout_num[colspan - 1];
rowcolspan = item.defaultRowColspan; // 单独的表单col 布局
} else {
formitemlayout = formitemlayout_num[colspan - 1];
}
}
// 上传图片的按钮展示
var uploadButtonDom = function uploadButtonDom() {
if (item.attributes.listType === 'picture-card') {
if (item.attributes.imageUrl && item.attributes.imageUrl !== '') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
src: item.attributes.imageUrl,
alt: "avatar",
style: {
width: '100%'
}
});
} else if (item.attributes.fileList) {
// 上传的图片大于或等于8张时 并且 没有onlyimg参数，显示icon上传按钮
if (item.attributes.fileList.length >= 8 && !onlyimg) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [item.attributes.loading === 'loading' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoadingOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlusOutlined, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "ant-upload-text",
children: "\u4E0A\u4F20"
})]
});
// 上传的图片大于或等于maxCount张时 并且 有onlyimg参数，不显示上传按钮
} else if (item.attributes.maxCount && item.attributes.fileList.length >= item.attributes.maxCount && onlyimg) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [item.attributes.loading === 'loading' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoadingOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlusOutlined, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "ant-upload-text",
children: "\u4E0A\u4F20"
})]
});
}
} else {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Button, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.UploadOutlined, {}), "\u4E0A\u4F20"]
})
});
}
};
var renderItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
style: {
display: item.hideInForm ? 'none' : 'block',
padding: defaultFormLayout && defaultFormLayout === 'vertical' ? '0px 12px 8px 12px' : '0'
},
className: defaultFormLayout && defaultFormLayout === 'vertical' ? 'antdp-FormCol' : ''
}, rowcolspan), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FormItem, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
className: "antdp-FormItem",
colon: false,
label: label,
name: name
}, defaultFormLayout && defaultFormLayout === 'vertical' ? null : formitemlayout), otherts), {}, {
children: name ? function () {
// 组件基础参数
var componentprams = (0, _objectSpread2["default"])({
size: size ? size : 'small'
}, attributes);
if (type === 'select' || type === 'Select') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Select, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
dropdownMatchSelectWidth: false,
allowClear: true,
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9".concat(label, " ")
}, componentprams), {}, {
children: selectOption
}));
} else if (type === 'radio' || type === 'Radio') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Radio.Group, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
size: size ? size : 'small'
}, attributes), {}, {
children: selectOption
}));
} else if (type === 'datePicker' || type === 'DatePicker') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.DatePicker, (0, _objectSpread2["default"])({
locale: _zh_CN2["default"],
style: {
width: '100%'
},
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9".concat(label, " ")
}, componentprams));
} else if (type === 'monthPicker' || type === 'MonthPicker') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthPicker, (0, _objectSpread2["default"])({
locale: _zh_CN2["default"],
style: {
width: '100%'
},
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9".concat(label, " ")
}, componentprams));
} else if (type === 'rangePicker' || type === 'RangePicker') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(RangePicker, (0, _objectSpread2["default"])({
locale: _zh_CN2["default"],
style: {
width: '100%'
}
}, componentprams));
} else if (type === 'timepicker' || type === 'timePicker' || type === 'TimePicker') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TimePicker, (0, _objectSpread2["default"])({
locale: _zh_CN2["default"],
style: {
width: '100%'
},
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9".concat(label, " ")
}, componentprams));
} else if (type === 'cascader' || type === 'Cascader') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Cascader, (0, _objectSpread2["default"])({
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9".concat(label, " ")
}, componentprams));
} else if (type === 'textarea' || type === 'TextArea') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input.TextArea, (0, _objectSpread2["default"])({
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165".concat(label, " ")
}, componentprams));
} else if (type === 'inputNumber' || type === 'InputNumber') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.InputNumber, (0, _objectSpread2["default"])({
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165".concat(label, " "),
style: {
width: '100%'
}
}, componentprams));
} else if (type === 'treeSelect' || type === 'TreeSelect') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TreeSelect, (0, _objectSpread2["default"])({
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u9009\u62E9".concat(label, " ")
}, componentprams));
} else if (type === 'checkbox' || type === 'Checkbox') {
if (item.options && item.options.length > 0 || item.option && item.option.length > 0) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Checkbox.Group, (0, _objectSpread2["default"])({
options: item.options || item.option
}, attributes));
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Checkbox, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, attributes), {}, {
children: label || item.checkboxLable
}));
} else if (type === 'UploadGrid' || type === 'uploadGrid') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_UploadGrid["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, attributes), {}, {
children: uploadButtonDom()
}));
} else if (type === 'autoComplete' || type === 'AutoComplete') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.AutoComplete, (0, _objectSpread2["default"])({
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165".concat(label, " ")
}, componentprams));
} else if (type === 'Password') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input.Password, (0, _objectSpread2["default"])({
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165".concat(label, " ")
}, componentprams));
} else if (type === 'inputCount' || type === 'InputCount') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputCount["default"], (0, _objectSpread2["default"])({
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165".concat(label, " ")
}, attributes));
} else if (type === 'render') {
return render && render;
} else {
if (attributes && attributes.type === 'Search' || type === 'InputSearch') {
var suffix = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AudioOutlined, {
style: {
fontSize: 16,
color: '#fff'
}
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Search, (0, _objectSpread2["default"])({
suffix: suffix,
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165".concat(label, " ")
}, componentprams));
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input, (0, _objectSpread2["default"])({
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165".concat(label, " ")
}, componentprams));
}
}() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input, (0, _objectSpread2["default"])({
placeholder: attributes && attributes.disabled ? '' : "\u8BF7\u8F93\u5165".concat(label, " "),
size: size
}, attributes))
}))
}), idx);
if (isHide && name) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Hide["default"], {
name: name,
children: renderItem
}, idx);
}
return renderItem;
};
// 隐藏的表单集合
var hideCollapseForm = HideFormItemDoM.map(function (item, idx) {
return CollapseFormDoM(item, idx);
});
// 表单集合
var CollapseForm = result.map(function (it, indix) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Row, {
children: it.map(function (item, idx) {
return CollapseFormDoM(item, idx);
})
}, indix);
});
// Form+表单集合
var FormDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HideContext.Provider, {
value: hide,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
locale: _zh_CN["default"],
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Form, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
layout: defaultFormLayout ? defaultFormLayout : 'horizontal',
ref: ref
}, defaultFormLayout && defaultFormLayout === 'vertical' ? null : formitemlayout), otherProps), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Row, {
children: hideCollapseForm
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: CollapseForm
})]
}))
})
});
// type 为 modal时没有折叠，没有标题，直接显示form表单内容
if (type === 'modal') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
margin: -10
},
children: FormDom
});
}
// type 为CardPro 带标题
if (type === 'CardPro') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardPro["default"], {
title: header,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "antdp-FormBox",
children: FormDom
})
});
}
// type 为cardform 时 显示表单，分割线 分离每个表单
if (type === 'cardform') {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
className: "antdp-FormTitle",
children: header
}), FormDom, /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Divider, {
type: "horizontal",
className: "antdp-FormDivider"
})]
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Collapse, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
defaultActiveKey: !visible ? ['1'] : ''
}, collapseAttributes), {}, {
className: "antdp-mb10",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
header: header
}, panelAttributes), {}, {
extra: extra,
children: FormDom
}), "1")
}));
};
var FormForward = /*#__PURE__*/(0, _react.forwardRef)(QuickForm);
var QForm = FormForward;
QForm.useHideContext = _context.useHideContext;
QForm.useFormItemHide = _store["default"];
var _default = exports["default"] = QForm;