@wufengteam/inputs
Version:
平台提供的右侧属性编辑器，需要在主工程中注册
317 lines • 13.8 kB
JavaScript
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
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; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/* eslint-disable no-console */
import React, { useState, useEffect } from 'react';
import { Button, Drawer, Form, Select, List, Space, Input, Collapse } from 'antd';
import { FileTextOutlined, CheckOutlined, LoadingOutlined } from '@ant-design/icons';
import { Page, Footer, Content, Header, Show } from '@alita/flow';
import { wufengController } from '@wufengteam/core';
import { useMap } from 'ahooks';
import { FileExcelIcon, FileExcelActiveIcon } from '../assets/img/comp';
import "./index.css";
import { cssPrefixCls } from '../utils';
var Option = Select.Option;
var Search = Input.Search;
var Panel = Collapse.Panel;
// 可关联的组件类型
var includesComps = ['Input', 'Select', 'MultipleSelect', 'DatePicker', 'TimePicker', 'InputNumber', 'Radio', 'CheckboxGroup', 'InputPhone', 'InputMail', 'Rate', 'SerialNumber'];
var InnerBindForm = function InnerBindForm(_ref) {
var value = _ref.value,
onChange = _ref.onChange;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var _useState3 = useState('self'),
_useState4 = _slicedToArray(_useState3, 2),
searchType = _useState4[0],
setSearchType = _useState4[1];
var _useState5 = useState(),
_useState6 = _slicedToArray(_useState5, 2),
activeKey = _useState6[0],
setActiveKey = _useState6[1];
var _useState7 = useState(value),
_useState8 = _slicedToArray(_useState7, 2),
selfValue = _useState8[0],
setSelfValue = _useState8[1];
var _useState9 = useState([]),
_useState10 = _slicedToArray(_useState9, 2),
appsData = _useState10[0],
setAppsData = _useState10[1];
var _useState11 = useState(''),
_useState12 = _slicedToArray(_useState11, 2),
search = _useState12[0],
setSearch = _useState12[1];
var _useState13 = useState(''),
_useState14 = _slicedToArray(_useState13, 2),
searchTemp = _useState14[0],
setSearchTemp = _useState14[1];
var _useMap = useMap(),
_useMap2 = _slicedToArray(_useMap, 2),
dataMap = _useMap2[0],
_useMap2$ = _useMap2[1],
set = _useMap2$.set,
get = _useMap2$.get;
var _useState15 = useState(1),
_useState16 = _slicedToArray(_useState15, 2),
pageNum = _useState16[0],
updatePageNum = _useState16[1];
if (!window.appId) {
window.appId = sessionStorage.getItem('appId');
}
/**
* 获取表单数据
*/
var qryCatalogChild = function qryCatalogChild(appId, catalogItemName) {
wufengController.getAction('qryCatalogChild', {
appId: appId,
catalogType: 'NCDPAPP',
catalogItemName: catalogItemName
}).then(function (res) {
if (res && res.resultCode === '0') {
var catalogItemId = localStorage.getItem('catalogItemId');
setAppsData(res === null || res === void 0 ? void 0 : res.resultObject.filter(function (item) {
return item.catalogItemId !== catalogItemId;
}));
}
});
};
/**
* 根据表单目录id 查询业务对象
* @param appId
* @param catalogItemId
*/
var findBusiObjectByCatalogItemId = function findBusiObjectByCatalogItemId(catalogItemId) {
var _window = window,
appId = _window.appId;
wufengController.getAction('findBusiObjectByCatalogItemId', {
appId: appId,
catalogItemId: catalogItemId
}).then(function (res) {
if (res && res.resultCode === '0') {
set(catalogItemId, res === null || res === void 0 ? void 0 : res.resultObject);
}
});
};
// 初始化获取当前应用关联表单
useEffect(function () {
qryCatalogChild(window.appId, '');
}, []);
useEffect(function () {
if (searchType === 'self') {
qryCatalogChild(window.appId, search);
}
}, [search, pageNum]);
var onClose = function onClose() {
setVisible(false);
};
var onEnd = function onEnd() {
setVisible(false);
// 减小 dsl 大小，不要传整个大对象，用到啥传啥
onChange === null || onChange === void 0 ? void 0 : onChange({
appId: selfValue === null || selfValue === void 0 ? void 0 : selfValue.appId,
busiObjectCode: selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectCode,
busiObjectCat: selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectCat,
busiObjectId: selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectId,
busiObjectName: selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectName,
labelKey: selfValue === null || selfValue === void 0 ? void 0 : selfValue.labelKey,
attrName: selfValue === null || selfValue === void 0 ? void 0 : selfValue.attrName,
attrCode: selfValue === null || selfValue === void 0 ? void 0 : selfValue.attrCode,
catalogItemId: selfValue === null || selfValue === void 0 ? void 0 : selfValue.catalogItemId,
busiObjectAttrId: selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectAttrId
});
};
useEffect(function () {
setSelfValue(value);
if (value && (value === null || value === void 0 ? void 0 : value.appId) && (value === null || value === void 0 ? void 0 : value.appId) === window.appId) {
findBusiObjectByCatalogItemId(value === null || value === void 0 ? void 0 : value.catalogItemId);
setSearchType('self');
setActiveKey(value === null || value === void 0 ? void 0 : value.catalogItemId);
}
}, [JSON.stringify(value)]);
useEffect(function () {
setSearchTemp('');
setSearch('');
}, [visible]);
var Avatar = function Avatar(_ref2) {
var item = _ref2.item,
isCheck = _ref2.isCheck,
color = _ref2.color;
if (item.remark === 'ED') {
return /*#__PURE__*/React.createElement("img", {
style: {
width: '14px',
height: '14px'
},
src: isCheck ? FileExcelActiveIcon : FileExcelIcon,
alt: ""
});
}
return /*#__PURE__*/React.createElement(FileTextOutlined, {
style: {
color: color
}
});
};
var getSelectTitle = function getSelectTitle() {
if ((value === null || value === void 0 ? void 0 : value.busiObjectName) && (value === null || value === void 0 ? void 0 : value.attrName)) {
return "".concat(selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectName, "-").concat(selfValue === null || selfValue === void 0 ? void 0 : selfValue.attrName);
}
return undefined;
};
var renderList = function renderList(catalogItemId) {
var _a, _b;
// 获取数据。并且过滤可展示组件
var data = (_b = (_a = get(catalogItemId)) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
return includesComps.includes(item === null || item === void 0 ? void 0 : item.compType);
});
return /*#__PURE__*/React.createElement(List, {
size: "small",
dataSource: data,
renderItem: function renderItem(item) {
// 新增catalogItemId判断，防止出现共有属性如obj_id,导致都会被选中
var isCheck = (selfValue === null || selfValue === void 0 ? void 0 : selfValue.attrCode) + (selfValue === null || selfValue === void 0 ? void 0 : selfValue.catalogItemId) === (item === null || item === void 0 ? void 0 : item.attrCode) + catalogItemId;
var color = isCheck ? '#3366EE' : '';
return /*#__PURE__*/React.createElement(List.Item, {
onClick: function onClick() {
setSelfValue(Object.assign(Object.assign({}, get(catalogItemId)), {
labelKey: item === null || item === void 0 ? void 0 : item.attrCode,
attrName: item === null || item === void 0 ? void 0 : item.attrName,
attrCode: item === null || item === void 0 ? void 0 : item.attrCode,
catalogItemId: catalogItemId
}));
}
}, /*#__PURE__*/React.createElement(List.Item.Meta, {
avatar: /*#__PURE__*/React.createElement(Avatar, {
item: item,
isCheck: isCheck,
color: color
}),
title: /*#__PURE__*/React.createElement("span", {
style: {
color: color
}
}, item === null || item === void 0 ? void 0 : item.attrName)
}), isCheck && ( /*#__PURE__*/React.createElement(CheckOutlined, {
style: {
color: color
}
})));
}
});
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
onClick: function onClick(e) {
e.stopPropagation();
setVisible(!visible);
}
}, /*#__PURE__*/React.createElement(Select, {
value: getSelectTitle() || '请选择表单',
dropdownStyle: {
display: 'none'
},
style: {
width: '100%'
}
})), /*#__PURE__*/React.createElement(Drawer, {
className: "".concat(cssPrefixCls, "-BindFormField-Drawer"),
closable: false,
title: "\u9009\u62E9\u8868\u5355\u5B57\u6BB5",
placement: "right",
width: 480,
onClose: onClose,
visible: visible
}, /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", {
style: {
height: '50px'
}
}), /*#__PURE__*/React.createElement(Space, {
size: "small",
style: {
padding: '20px 24px'
}
}, /*#__PURE__*/React.createElement(Select, {
value: searchType,
onChange: function onChange(val) {
setSearchType(val);
setSearch('');
if (val === 'self' && !dataMap.has(window.appId)) {
qryCatalogChild(window.appId, '');
}
},
style: {
width: 100
}
}, /*#__PURE__*/React.createElement(Option, {
value: "self"
}, "\u672C\u5E94\u7528")), /*#__PURE__*/React.createElement(Search, {
placeholder: "\u8BF7\u8F93\u5165".concat(searchType === 'self' ? '表单名称' : '项目名称', "\u641C\u7D22"),
onSearch: function onSearch(e) {
updatePageNum(1);
setSearch(e);
},
value: searchTemp,
onChange: function onChange(e) {
setSearchTemp(e.target.value);
},
className: "".concat(cssPrefixCls, "-searchWrap")
}))), /*#__PURE__*/React.createElement(Content, {
id: "scrollSetId",
style: {
height: 'calc(100vh - 200px)',
overflow: 'auto'
}
}, /*#__PURE__*/React.createElement(Show, {
when: searchType === 'self',
fallback: renderList(window.appId)
}, /*#__PURE__*/React.createElement(Show, {
when: appsData.length > 0,
fallback: /*#__PURE__*/React.createElement(LoadingOutlined, null)
}, /*#__PURE__*/React.createElement(Collapse, {
activeKey: activeKey,
expandIconPosition: "left",
onChange: function onChange(a) {
setActiveKey(a);
if (!a) return;
if (!dataMap.has(a)) {
findBusiObjectByCatalogItemId(a);
}
},
accordion: true
}, appsData.map(function (i) {
return /*#__PURE__*/React.createElement(Panel, {
header: i === null || i === void 0 ? void 0 : i.catalogItemName,
key: i === null || i === void 0 ? void 0 : i.catalogItemId
}, /*#__PURE__*/React.createElement(Show, {
when: dataMap.has(i === null || i === void 0 ? void 0 : i.catalogItemId),
fallback: /*#__PURE__*/React.createElement(LoadingOutlined, null)
}, renderList(i === null || i === void 0 ? void 0 : i.catalogItemId)));
}))))), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Space, {
size: "small",
style: {
padding: '20px 32px',
display: 'flex',
flexDirection: 'row-reverse'
}
}, /*#__PURE__*/React.createElement(Button, {
onClick: onClose
}, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
type: "primary",
onClick: onEnd
}, "\u786E\u8BA4"))))));
};
var BindFormField = function BindFormField(props) {
var name = props.name,
rules = props.rules,
label = props.label;
return /*#__PURE__*/React.createElement(Form.Item, {
label: label,
name: name,
rules: rules
}, /*#__PURE__*/React.createElement(InnerBindForm, null));
};
export default BindFormField;