fx-form-widget
Version:
273 lines (266 loc) • 9.25 kB
JavaScript
import _Image from "antd/es/image";
import * as React from 'react';
import { useEffect, useState } from 'react';
import classnames from 'classnames';
import { nanoid } from 'nanoid';
import { downloadFile, isNotNullValue } from './tools';
import PlusConfigProvier from '@fle-ui/plus-config-provider';
import './index.less';
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 = useState([]),
detailList = _useState[0],
setDetailList = _useState[1];
var columnStyle = {
width: "calc(100% /" + column + ")"
};
var wholeStyle = {
width: '100%'
};
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_" + 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, {
key: nanoid(6),
width: 100,
src: fileItem.url
});
});
showValue = /*#__PURE__*/React.createElement(_Image.PreviewGroup, null, showValue);
break;
case 'uploadFile':
// 附件 下载
showValue = item.value.map(function (fileItem) {
return /*#__PURE__*/React.createElement("span", {
key: nanoid(6),
className: "file_item",
onClick: function onClick() {
return 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: classnames('detailRender_wrapper_hasData', {
wrapperBorderStyle: showBorder
}),
key: nanoid(6)
}, datalist.map(function (item) {
return /*#__PURE__*/React.createElement("div", {
key: nanoid(6),
className: classnames('detailRender_wrapper_item', {
itemBorderStyle: showBorder,
wholeStyle: isIgnoreWidget(item.wid)
}),
style: isIgnoreWidget(item.wid) ? wholeStyle : columnStyle
}, /*#__PURE__*/React.createElement("div", {
className: classnames('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: classnames('detailRender_wrapper_item_value', {
valueBorderStyle: showBorder,
wrap_value: isIgnoreWidget(item.wid)
})
}, isNotNullValue(item.value) ? renderValue(item) : '--'));
}));
} else {
return /*#__PURE__*/React.createElement("div", {
className: "detailRender_wrapper_noData",
key: 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: nanoid(6),
id: wid
}, /*#__PURE__*/React.createElement("div", {
className: "separator_title"
}, title), /*#__PURE__*/React.createElement("div", {
className: classnames('separator_content', {
dotted: value === 'dotted',
solid: value === 'solid',
crudeSolid: value === 'crudeSolid',
lineNone: value === 'none'
})
}));
};
return /*#__PURE__*/React.createElement(PlusConfigProvier, 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);
}
})));
};
export default DetailRender;