@wufengteam/wform
Version:
@wufengteam/wform
542 lines • 22.2 kB
JavaScript
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
/* eslint-disable no-console */
import React from 'react';
import { Tooltip } from 'antd';
import { LocationPreview, ImgPreview, FileDownloadList, RichTextPreview, TablePreview } from '@wufengteam/datapreview';
import DataQueryPreview from '../DataQueryPreview';
import { prefix, plusXing } from '../../utils';
import { getCompPropsById } from '../../utils/dsl';
import { isPlainObject } from '../../utils/tool';
// @ts-ignore
import imageIcon from './assets/image.png';
// @ts-ignore
import videoIcon from './assets/video.png';
// @ts-ignore
import fileIcon from './assets/attach.png';
// @ts-ignore
import signIcon from './assets/edit.png';
// @ts-ignore
import tableIcon from './assets/table.png';
// @ts-ignore
import richTextIcon from './assets/richText.png';
// @ts-ignore
import locationIcon from './assets/location.png';
import "./index.css";
var cssClsPrefix = "".concat(prefix, "-data");
// @ts-ignore
var findTitlesByValues = function findTitlesByValues(data, values) {
var result = [];
function search(children, vals) {
// eslint-disable-next-line no-restricted-syntax
var _iterator = _createForOfIteratorHelper(children),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var item = _step.value;
if (vals.includes(item.value)) {
result.push(item.title);
}
if (item.children && item.children.length > 0) {
search(item.children, values);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
search(data, values);
return result;
};
var ColumnsRender = function ColumnsRender(parames) {
var _a, _b, _c, _d;
var dataSource = parames.dataSource,
attrCode = parames.attrCode,
appId = parames.appId,
dsl = parames.dsl,
platform = parames.platform,
getEngineApis = parames.getEngineApis,
_parames$ellipsis = parames.ellipsis,
ellipsis = _parames$ellipsis === void 0 ? true : _parames$ellipsis;
// 开关组件字段渲染
if (attrCode.startsWith('Switch')) {
return /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, "".concat(dataSource) === 'true' ? '开启' : '关闭', " ");
}
if (!dataSource) return /*#__PURE__*/React.createElement("span", null, "-");
var value = dataSource;
if (!(typeof dataSource === 'string' && /^\d{16,}$/.test(dataSource))) {
try {
value = JSON.parse(dataSource);
} catch (error) {
value = dataSource;
}
}
// 图片上传、文本识别组件字段渲染
if (attrCode.startsWith('image') || attrCode.startsWith('ImgUpload') || attrCode.startsWith('TextRecognition')) {
var data = [];
if (value && Array.isArray(value)) {
value.map(function (item) {
return data.push(Object.assign(Object.assign({}, item), {
appId: appId
}));
});
}
return /*#__PURE__*/React.createElement(ImgPreview, {
title: "\u56FE\u7247\u4E0B\u8F7D",
data: data,
platform: platform,
getEngineApis: getEngineApis
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-preview-btn"),
style: {
color: '#0dd19a',
background: 'rgba(13, 240, 192, 0.3)',
display: 'flex',
width: 'fit-content',
cursor: 'pointer'
}
}, /*#__PURE__*/React.createElement("img", {
alt: "",
src: imageIcon
}), /*#__PURE__*/React.createElement("span", null, value && Array.isArray(value) && value.length || 0)));
}
// 视频上传、视频上传组件字段渲染
if (attrCode.startsWith('video') || attrCode.startsWith('Video')) {
var _data = [];
if (value && Array.isArray(value)) {
value.map(function (item) {
return _data.push(Object.assign(Object.assign({}, item), {
appId: appId
}));
});
}
return /*#__PURE__*/React.createElement(FileDownloadList, {
data: _data,
platform: platform,
title: "\u89C6\u9891",
getEngineApis: getEngineApis
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-preview-btn"),
style: {
color: '#47e',
background: 'rgba(68, 119, 238, 0.2)'
}
}, /*#__PURE__*/React.createElement("img", {
alt: "",
src: videoIcon
}), /*#__PURE__*/React.createElement("span", null, value && Array.isArray(value) && value.length || 0)));
}
// 签名组件字段渲染
if (attrCode.startsWith('Autograph')) {
return /*#__PURE__*/React.createElement(ImgPreview, {
title: "\u56FE\u7247\u4E0B\u8F7D",
data: [value],
platform: platform,
getEngineApis: getEngineApis
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-preview-btn"),
style: {
color: '#f88c2d',
background: 'rgba(248, 140, 45, 0.3)'
}
}, /*#__PURE__*/React.createElement("img", {
alt: "",
src: signIcon
}), /*#__PURE__*/React.createElement("span", null, "1")));
}
// 附件上传、附件下载、附件校验组件字段渲染
if (attrCode.startsWith('StdUpload') || attrCode.startsWith('CheckUpload') || attrCode.startsWith('Attachments')) {
return /*#__PURE__*/React.createElement(FileDownloadList, {
data: value,
platform: platform,
title: "\u9644\u4EF6\u4E0A\u4F20",
getEngineApis: getEngineApis
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-preview-btn"),
style: {
color: '#7a7bfb',
background: 'rgba(122, 123, 251, 0.3)'
}
}, /*#__PURE__*/React.createElement("img", {
alt: "",
src: fileIcon
}), /*#__PURE__*/React.createElement("span", null, value && Array.isArray(value) && value.length || 0)));
}
// 添加成员、添加部门组件字段渲染
if ((attrCode.startsWith('AddMember') || attrCode.startsWith('AddDepartment')) && Array.isArray(value)) {
var nameList = (value || []).map(function (it) {
if ((it === null || it === void 0 ? void 0 : it.isSonOrg) === 1) {
return "".concat(it === null || it === void 0 ? void 0 : it.orgName, "(\u542B\u5B50\u90E8\u95E8)");
}
return (it === null || it === void 0 ? void 0 : it.staffName) || (it === null || it === void 0 ? void 0 : it.orgName);
});
return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsis ? ( /*#__PURE__*/React.createElement(Tooltip, {
title: nameList.join('、')
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-ellipsis")
}, nameList.join('、')))) : ( /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, nameList.join('、'))));
}
// 关联数据组件字段渲染
if (attrCode.startsWith('DataLinkage')) {
return /*#__PURE__*/React.createElement("span", null, "-");
}
// 下拉复选、复选组组件字段渲染
if ((attrCode.startsWith('CheckboxGroup') || attrCode.startsWith('MultipleSelect')) && Array.isArray(value)) {
var dslData = {};
try {
dslData = JSON.parse(dsl);
} catch (error) {
dslData = {};
}
// DSL与options前置处理
var options;
var formData = dslData.formData || [];
if (formData.length > 0) {
options = (_a = formData.find(function (item) {
return item.compCode === attrCode;
})) === null || _a === void 0 ? void 0 : _a.options;
// 显示值和选项值转置
if (Array.isArray(options) && options.length > 0) {
var map = new Map();
options === null || options === void 0 ? void 0 : options.forEach(function (item) {
map.set(item.value, item.title);
});
options = map;
}
}
if (options) {
var valueList = value.map(function (i) {
return options === null || options === void 0 ? void 0 : options.get("".concat(i));
});
return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsis ? ( /*#__PURE__*/React.createElement(Tooltip, {
title: valueList.join('、')
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-ellipsis")
}, valueList.join('、')))) : ( /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, valueList.join('、'))));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsis ? ( /*#__PURE__*/React.createElement(Tooltip, {
title: value.join('、')
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-ellipsis")
}, value.join('、')))) : ( /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, value.join('、'))));
}
// 树选择组件字段渲染
if (attrCode.startsWith('TreeSelect')) {
var _dslData = {};
try {
_dslData = JSON.parse(dsl);
} catch (error) {
_dslData = {};
}
var _options;
var _formData = _dslData.formData || [];
if (_formData.length > 0) {
_options = (_b = _formData.find(function (item) {
return item.compCode === attrCode;
})) === null || _b === void 0 ? void 0 : _b.options;
}
if (_options && Array.isArray(_options)) {
var vals = Array.isArray(value) ? value.map(function (i) {
return "".concat(i);
}) : ["".concat(value)];
var _valueList = findTitlesByValues(_options, vals);
return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsis ? ( /*#__PURE__*/React.createElement(Tooltip, {
title: _valueList.join('、')
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-ellipsis")
}, _valueList.join('、')))) : ( /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, _valueList.join('、'))));
}
if (Array.isArray(value) && value.length > 0) {
return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsis ? ( /*#__PURE__*/React.createElement(Tooltip, {
title: value.join('、')
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-ellipsis")
}, value.join('、')))) : ( /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, value.join('、'))));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsis ? ( /*#__PURE__*/React.createElement(Tooltip, {
title: value
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-ellipsis")
}, value))) : ( /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, value)));
}
// 下拉单选、单选组组件字段渲染
if (attrCode.startsWith('Select') || attrCode.startsWith('Radio')) {
var _dslData2 = {};
try {
_dslData2 = JSON.parse(dsl);
} catch (error) {
_dslData2 = {};
}
// DSL与options前置处理
var _options2;
var _formData2 = _dslData2.formData || [];
if (_formData2.length > 0) {
_options2 = (_c = _formData2.find(function (item) {
return item.compCode === attrCode;
})) === null || _c === void 0 ? void 0 : _c.options;
// 显示值和选项值转置
if (Array.isArray(_options2) && _options2.length > 0) {
var _map = new Map();
_options2 === null || _options2 === void 0 ? void 0 : _options2.forEach(function (item) {
_map.set(item.value, item.title);
});
_options2 = _map;
}
}
return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsis ? ( /*#__PURE__*/React.createElement(Tooltip, {
title: (_options2 === null || _options2 === void 0 ? void 0 : _options2.get("".concat(value))) || value
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-ellipsis")
}, (_options2 === null || _options2 === void 0 ? void 0 : _options2.get("".concat(value))) || value))) : ( /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, (_options2 === null || _options2 === void 0 ? void 0 : _options2.get("".concat(value))) || value)));
}
// 时间段选择组件字段渲染
if (attrCode.startsWith('RangePicker')) {
return /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, (value || []).join(' 至 '), " ");
}
// 密码框组件字段渲染
if (attrCode.startsWith('Password')) {
return /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, plusXing(value, 0, 0, '*'), " ");
}
// 级联组件字段渲染
if (attrCode.startsWith('Cascader')) {
var _dslData3 = {};
try {
_dslData3 = JSON.parse(dsl);
} catch (error) {
_dslData3 = {};
}
var _options3;
var _formData3 = _dslData3.formData || [];
var cascaderValue = [];
if (_formData3.length > 0) {
_options3 = (_d = _formData3.find(function (item) {
return item.compCode === attrCode;
})) === null || _d === void 0 ? void 0 : _d.options;
var titleMapByValue = {};
var getTitleMapByValue = function getTitleMapByValue(data) {
data.forEach(function (i) {
if (i.value) {
titleMapByValue[i.value] = i.title;
}
if (Array.isArray(i.children) && i.children.length > 0) {
getTitleMapByValue(i.children);
}
});
};
if (Array.isArray(_options3)) {
getTitleMapByValue(_options3);
cascaderValue = value.map(function (i) {
return titleMapByValue[i];
});
}
}
return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsis ? ( /*#__PURE__*/React.createElement(Tooltip, {
title: (cascaderValue || []).join('/')
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-ellipsis")
}, (cascaderValue || []).join('/')))) : ( /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, (cascaderValue || []).join('/'))));
}
// 地址组件字段渲染
if (attrCode.startsWith('Address')) {
var addressValue = ((value === null || value === void 0 ? void 0 : value.label) || []).join('/');
return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsis ? ( /*#__PURE__*/React.createElement(Tooltip, {
title: addressValue
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-ellipsis")
}, addressValue, " "))) : ( /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, addressValue, " ")));
}
// 定位组件字段渲染
if (attrCode.startsWith('Location')) {
return /*#__PURE__*/React.createElement("div", {
style: {
cursor: 'pointer'
}
}, /*#__PURE__*/React.createElement(LocationPreview, {
data: value,
platform: platform
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(cssClsPrefix, "-preview-btn"),
style: {
maxWidth: '100%',
width: 'fit-content',
display: 'flex',
justifyContent: 'space-between',
color: '#47e',
background: 'rgba(68, 119, 238, 0.2)'
}
}, /*#__PURE__*/React.createElement("img", {
style: {
width: '16px',
height: '16px'
},
alt: "",
src: locationIcon
}), /*#__PURE__*/React.createElement("div", {
style: {
maxWidth: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
lineHeight: '20px'
}
}, value === null || value === void 0 ? void 0 : value.name))));
}
// 富文本组件字段渲染
if (attrCode.startsWith('QuillEditor') || attrCode.startsWith('RichTextEditor')) {
var htmlText = '';
if (value) {
var re = new RegExp('<[^<>]+>', 'g');
htmlText = value.replace(re, '');
}
return /*#__PURE__*/React.createElement("div", {
style: {
cursor: 'pointer',
width: '100%'
}
}, /*#__PURE__*/React.createElement(RichTextPreview, {
data: value,
platform: platform,
title: "\u5BCC\u6587\u672C\u8BE6\u60C5"
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(cssClsPrefix, "-preview-btn"),
style: {
maxWidth: '100%',
width: 'fit-content',
display: 'flex',
justifyContent: 'space-between',
color: '#47e',
background: 'rgba(68, 119, 238, 0.2)'
}
}, /*#__PURE__*/React.createElement("img", {
style: {
width: '16px',
height: '16px'
},
alt: "",
src: richTextIcon
}), /*#__PURE__*/React.createElement("div", {
style: {
maxWidth: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}
}, htmlText))));
}
// 多行文本组件字段渲染
if (attrCode.startsWith('TextArea')) {
return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsis ? ( /*#__PURE__*/React.createElement(Tooltip, {
title: dataSource
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-ellipsis")
}, dataSource, " "))) : ( /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, dataSource, " ")));
}
// 子表单组件字段渲染
if (attrCode.startsWith('EditableTable') || attrCode.startsWith('SubForm')) {
var editableTableColums = {};
var _dslData4 = {};
try {
_dslData4 = JSON.parse(dsl);
} catch (error) {
_dslData4 = {};
}
var targetProps = getCompPropsById(_dslData4.components, attrCode);
if (isPlainObject(targetProps)) {
if (attrCode.startsWith('SubForm')) {
var _targetProps$subFormF = targetProps.subFormFields,
subFormFields = _targetProps$subFormF === void 0 ? [] : _targetProps$subFormF;
subFormFields.forEach(function (item) {
var _ref = (item === null || item === void 0 ? void 0 : item.props) || {},
fieldName = _ref.fieldName,
name = _ref.name;
editableTableColums[fieldName] = name;
});
}
if (attrCode.startsWith('EditableTable')) {
var _targetProps$tableIte = targetProps.tableItem,
tableItem = _targetProps$tableIte === void 0 ? [] : _targetProps$tableIte;
tableItem.forEach(function (item) {
var _ref2 = (item === null || item === void 0 ? void 0 : item.props) || {},
fieldName = _ref2.fieldName,
name = _ref2.name;
editableTableColums[fieldName] = name;
});
}
}
return /*#__PURE__*/React.createElement(TablePreview, {
title: "\u8868\u683C",
data: value,
columns: editableTableColums,
platform: platform,
getEngineApis: getEngineApis
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-preview-btn"),
style: {
color: '#f88c2d',
background: 'rgba(248, 140, 45, 0.3)'
}
}, /*#__PURE__*/React.createElement("img", {
style: {
width: '16px',
height: '16px'
},
alt: "",
src: tableIcon
}), /*#__PURE__*/React.createElement("span", null, value && Array.isArray(value) && value.length || 0)));
}
// 关联表单组件字段渲染
if (attrCode.startsWith('BindTable')) {
return /*#__PURE__*/React.createElement(DataQueryPreview, {
value: value,
dsl: dsl,
attrCode: attrCode,
platform: platform,
getEngineApis: getEngineApis
});
}
var value2 = value;
if (isPlainObject(value) || Array.isArray(value)) {
value2 = JSON.stringify(value);
} else if (value === true || value === false) {
// 关联数据选择表单为外部数据源且字段为开关时
value2 = String(value);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsis ? ( /*#__PURE__*/React.createElement(Tooltip, {
title: value2
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-ellipsis")
}, value2))) : ( /*#__PURE__*/React.createElement("span", {
className: "".concat(cssClsPrefix, "-cell")
}, value2)));
// TODO: 其他组件有需要再处理
};
export default ColumnsRender;