fx-form-widget
Version:
280 lines (272 loc) • 10.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _image = _interopRequireDefault(require("antd/lib/image"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _classnames = _interopRequireDefault(require("classnames"));
var _nanoid = require("nanoid");
var _tools = require("./tools");
var _plusConfigProvider = _interopRequireDefault(require("@fle-ui/plus-config-provider"));
require("./index.less");
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 ignoreLayoutWidget = ['uploadPic', 'uploadFile', 'textarea'];
var DetailRender = function DetailRender(props) {
var _props$dataList = props.dataList,
dataList = _props$dataList === void 0 ? [] : _props$dataList,
_props$column = props.column,
column = _props$column === void 0 ? 2 : _props$column,
_props$showBorder = props.showBorder,
showBorder = _props$showBorder === void 0 ? false : _props$showBorder,
getAnchorInfo = props.getAnchorInfo;
var _useState = (0, _react.useState)([]),
detailList = _useState[0],
setDetailList = _useState[1];
var columnStyle = {
width: "calc(100% /" + column + ")"
};
var wholeStyle = {
width: '100%'
};
(0, _react.useEffect)(function () {
var filterDataList = dataList === null || dataList === void 0 ? void 0 : dataList.filter(function (item) {
return item.wid;
});
var tempDataList = [];
var separatorIndexList = [];
var anchorInfoList = [];
filterDataList.forEach(function (item, index) {
if (item.wid && item.wid.indexOf('separator') === 0) {
separatorIndexList.push(index);
}
});
if (separatorIndexList.length) {
separatorIndexList.forEach(function (item, index) {
if (index === 0 && separatorIndexList[index - 1] !== undefined && separatorIndexList[index - 1] !== 0) {
tempDataList.push({
type: 'formItem',
data: refillColumn(filterDataList.slice(0, item))
});
}
// 单个分隔线
tempDataList.push({
type: 'separator',
data: filterDataList.slice(item, item + 1)[0]
});
// 对应表单字段
if (separatorIndexList[index + 1] !== undefined) {
// 分割线之间的表单
tempDataList.push({
type: 'formItem',
data: refillColumn(filterDataList.slice(item + 1, separatorIndexList[index + 1]))
});
} else {
if (filterDataList.slice(item + 1).length) {
tempDataList.push({
type: 'formItem',
data: refillColumn(filterDataList.slice(item + 1))
});
}
}
});
} else {
tempDataList.push({
type: 'formItem',
data: refillColumn(filterDataList)
});
}
// 写入锚点信息
tempDataList.forEach(function (item) {
if (item.type === 'separator' || item.type === 'group') {
anchorInfoList.push({
title: item.data.title,
anchor: item.data.wid
});
}
});
getAnchorInfo && getAnchorInfo(anchorInfoList);
setDetailList(tempDataList);
}, [dataList]);
// 填充表单
var refillColumn = function refillColumn(list) {
var listLength = list.length;
var ignoreWidgetIndexList = [];
var tempList = [];
listLength && [].concat(list).forEach(function (item, index) {
if (isIgnoreWidget(item.wid)) {
ignoreWidgetIndexList.push(index);
}
});
if (!ignoreWidgetIndexList.length) {
// 当不存在需要忽略的组件时
if (listLength && showBorder && !!(listLength % column)) {
// 补齐
for (var i = 1; i <= column - listLength % column; i++) {
list.push({
wid: "refill_" + (0, _nanoid.nanoid)(6),
fieldName: '',
title: '',
value: '-'
});
}
}
} else {
ignoreWidgetIndexList.forEach(function (item, index) {
if (index === 0 && item !== 0) {
tempList = tempList.concat(refillColumn(list.slice(0, item)));
}
tempList.push(list[item]);
if (ignoreWidgetIndexList[index + 1] !== undefined) {
// 分割线之间的表单
tempList = tempList.concat(refillColumn(list.slice(item + 1, ignoreWidgetIndexList[index + 1])));
} else {
if (list.slice(item + 1).length) {
tempList = tempList.concat(refillColumn(list.slice(item + 1)));
}
}
});
list = tempList;
}
return list;
};
// 判断是否需要特殊处理的组件
var isIgnoreWidget = function isIgnoreWidget(wid) {
if (wid && ignoreLayoutWidget.indexOf(wid.split('_')[0]) !== -1) {
return true;
}
return false;
};
var renderValue = function renderValue(item) {
var widgetType = '';
var showValue = '';
if (item !== null && item !== void 0 && item.wid) {
widgetType = item === null || item === void 0 ? void 0 : item.wid.split('_')[0];
}
if (widgetType) {
// 动态表单配置出来 存在wid
switch (widgetType) {
case 'uploadPic':
// 图片 预览
showValue = item.value.map(function (fileItem) {
return /*#__PURE__*/React.createElement(_image["default"], {
key: (0, _nanoid.nanoid)(6),
width: 100,
src: fileItem.url
});
});
showValue = /*#__PURE__*/React.createElement(_image["default"].PreviewGroup, null, showValue);
break;
case 'uploadFile':
// 附件 下载
showValue = item.value.map(function (fileItem) {
return /*#__PURE__*/React.createElement("span", {
key: (0, _nanoid.nanoid)(6),
className: "file_item",
onClick: function onClick() {
return (0, _tools.downloadFile)(fileItem.url, fileItem.name);
}
}, fileItem.name);
});
break;
case 'rate':
showValue = item.value + '分';
break;
case 'datePicker':
showValue = String(item.value);
break;
case 'refill':
showValue = '';
break;
default:
// 默认
if (Array.isArray(item.value)) {
// 返回值是数组时
showValue = item.value.join('/');
} else {
// 返回值是字符串时
showValue = item.value;
}
break;
}
} else {
// 系统自带的
showValue = item.value;
}
return /*#__PURE__*/React.createElement("div", {
className: "value_style",
title: typeof showValue !== 'object' ? showValue : ''
}, showValue);
};
// 渲染基础字段
var renderDetailList = function renderDetailList(datalist) {
if (datalist.length) {
return /*#__PURE__*/React.createElement("div", {
className: (0, _classnames["default"])('detailRender_wrapper_hasData', {
wrapperBorderStyle: showBorder
}),
key: (0, _nanoid.nanoid)(6)
}, datalist.map(function (item) {
return /*#__PURE__*/React.createElement("div", {
key: (0, _nanoid.nanoid)(6),
className: (0, _classnames["default"])('detailRender_wrapper_item', {
itemBorderStyle: showBorder,
wholeStyle: isIgnoreWidget(item.wid)
}),
style: isIgnoreWidget(item.wid) ? wholeStyle : columnStyle
}, /*#__PURE__*/React.createElement("div", {
className: (0, _classnames["default"])('detailRender_wrapper_item_label', {
labelBorderStyle: showBorder
}),
style: showBorder ? isIgnoreWidget(item.wid) ? {
width: "calc((100% /" + column + ")/4)"
} : {} : {}
}, /*#__PURE__*/React.createElement("span", {
title: item.title
}, item.title)), /*#__PURE__*/React.createElement("div", {
className: (0, _classnames["default"])('detailRender_wrapper_item_value', {
valueBorderStyle: showBorder,
wrap_value: isIgnoreWidget(item.wid)
})
}, (0, _tools.isNotNullValue)(item.value) ? renderValue(item) : '--'));
}));
} else {
return /*#__PURE__*/React.createElement("div", {
className: "detailRender_wrapper_noData",
key: (0, _nanoid.nanoid)(6)
}, "\u6682\u65E0\u6570\u636E");
}
};
// 渲染分割线
var renderSeparator = function renderSeparator(data, wid) {
var _data$title = data.title,
title = _data$title === void 0 ? '' : _data$title,
_data$value = data.value,
value = _data$value === void 0 ? 'none' : _data$value;
return /*#__PURE__*/React.createElement("div", {
className: "separator_wrap",
key: (0, _nanoid.nanoid)(6),
id: wid
}, /*#__PURE__*/React.createElement("div", {
className: "separator_title"
}, title), /*#__PURE__*/React.createElement("div", {
className: (0, _classnames["default"])('separator_content', {
dotted: value === 'dotted',
solid: value === 'solid',
crudeSolid: value === 'crudeSolid',
lineNone: value === 'none'
})
}));
};
return /*#__PURE__*/React.createElement(_plusConfigProvider["default"], null, /*#__PURE__*/React.createElement("div", {
className: "detailRender_wrapper"
}, detailList.map(function (item) {
if (item.type === 'separator') {
return renderSeparator(item.data, item.wid);
} else if (item.type === 'formItem') {
return renderDetailList(item.data);
}
})));
};
var _default = exports["default"] = DetailRender;