@wufengteam/inputs
Version:
平台提供的右侧属性编辑器，需要在主工程中注册
329 lines • 13.7 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, Skeleton } 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 InfiniteScroll from 'react-infinite-scroll-component';
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 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(0),
_useState16 = _slicedToArray(_useState15, 2),
total = _useState16[0],
setTotal = _useState16[1];
var _useState17 = useState(1),
_useState18 = _slicedToArray(_useState17, 2),
pageNum = _useState18[0],
updatePageNum = _useState18[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');
set(appId, res === null || res === void 0 ? void 0 : res.resultObject.filter(function (item) {
return item.catalogItemId !== catalogItemId;
}));
}
});
};
/**
* 获取应用数据
*/
var queryAppInitialVersionPageWithPermission = function queryAppInitialVersionPageWithPermission(appName) {
wufengController.getAction('queryAppInitialVersionPageWithPermission', {
appName: appName,
pageNum: pageNum,
pageSize: 20
}).then(function (res) {
var _a, _b, _c, _d, _e;
if (res && res.resultCode === '0') {
setTotal(Number.parseInt((_a = res === null || res === void 0 ? void 0 : res.resultObject) === null || _a === void 0 ? void 0 : _a.total, 10));
if (pageNum === 1) {
setAppsData(((_b = res === null || res === void 0 ? void 0 : res.resultObject) === null || _b === void 0 ? void 0 : _b.list) && ((_c = res === null || res === void 0 ? void 0 : res.resultObject) === null || _c === void 0 ? void 0 : _c.list.length) > 0 ? (_d = res === null || res === void 0 ? void 0 : res.resultObject) === null || _d === void 0 ? void 0 : _d.list.filter(function (item) {
return item.appId !== window.appId;
}) : []);
} else {
var appsDataTemp = appsData.concat((_e = res === null || res === void 0 ? void 0 : res.resultObject) === null || _e === void 0 ? void 0 : _e.list);
setAppsData(appsDataTemp);
}
}
});
};
// 初始化获取当前应用关联表单
useEffect(function () {
qryCatalogChild(window.appId, '');
}, []);
useEffect(function () {
if (searchType === 'self') {
qryCatalogChild(window.appId, search);
} else {
queryAppInitialVersionPageWithPermission(search);
}
}, [search, pageNum]);
var onClose = function onClose() {
setVisible(false);
};
var onEnd = function onEnd() {
setVisible(false);
// 减小 dsl 大小，不要传整个大对象，用到啥传啥
console.log('selfValue', selfValue);
onChange === null || onChange === void 0 ? void 0 : onChange({
appId: selfValue === null || selfValue === void 0 ? void 0 : selfValue.appId,
catalogItemId: selfValue === null || selfValue === void 0 ? void 0 : selfValue.catalogItemId,
catalogItemName: selfValue === null || selfValue === void 0 ? void 0 : selfValue.catalogItemName,
catalogItemType: selfValue === null || selfValue === void 0 ? void 0 : selfValue.catalogItemType,
remark: selfValue === null || selfValue === void 0 ? void 0 : selfValue.remark,
busiObjectId: selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectId
});
};
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) {
queryAppInitialVersionPageWithPermission('');
qryCatalogChild(value === null || value === void 0 ? void 0 : value.appId, '');
setSearchType('other');
setActiveKey(value === null || value === void 0 ? void 0 : value.appId);
}
}, [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 renderList = function renderList(appId) {
var data = get(appId);
return /*#__PURE__*/React.createElement(List, {
size: "small",
dataSource: data,
renderItem: function renderItem(item) {
var isCheck = (selfValue === null || selfValue === void 0 ? void 0 : selfValue.catalogItemId) === (item === null || item === void 0 ? void 0 : item.catalogItemId);
var color = isCheck ? '#3366EE' : '';
return /*#__PURE__*/React.createElement(List.Item, {
onClick: function onClick() {
setSelfValue(item);
}
}, /*#__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.catalogItemName)
}), 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: (selfValue === null || selfValue === void 0 ? void 0 : selfValue.catalogItemName) || '请选择表单',
dropdownStyle: {
display: 'none'
},
style: {
width: '100%'
}
})), /*#__PURE__*/React.createElement(Drawer, {
className: "".concat(cssPrefixCls, "-BindForm-Drawer"),
closable: false,
title: "\u9009\u62E9\u8868\u5355",
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, '');
}
if (val === 'other' && appsData.length === 0) {
queryAppInitialVersionPageWithPermission('');
}
},
style: {
width: 100
}
}, /*#__PURE__*/React.createElement(Option, {
value: "self"
}, "\u672C\u5E94\u7528"), /*#__PURE__*/React.createElement(Option, {
value: "other"
}, "\u5168\u90E8\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 === 'other',
fallback: renderList(window.appId)
}, /*#__PURE__*/React.createElement(Show, {
when: appsData.length > 0,
fallback: /*#__PURE__*/React.createElement(LoadingOutlined, null)
}, /*#__PURE__*/React.createElement(InfiniteScroll, {
dataLength: appsData === null || appsData === void 0 ? void 0 : appsData.length,
next: function next() {
updatePageNum(pageNum + 1);
},
hasMore: (appsData === null || appsData === void 0 ? void 0 : appsData.length) + 1 < total,
loader: /*#__PURE__*/React.createElement(Skeleton, {
paragraph: {
rows: 1
},
active: true
}),
scrollableTarget: "scrollSetId",
key: "init"
}, /*#__PURE__*/React.createElement(Collapse, {
activeKey: activeKey,
expandIconPosition: "right",
onChange: function onChange(a) {
setActiveKey(a);
if (!a) return;
if (!dataMap.has(a)) {
qryCatalogChild(a, '');
}
},
accordion: true
}, appsData.map(function (i) {
return /*#__PURE__*/React.createElement(Panel, {
header: i === null || i === void 0 ? void 0 : i.appName,
key: i === null || i === void 0 ? void 0 : i.appId
}, /*#__PURE__*/React.createElement(Show, {
when: dataMap.has(i === null || i === void 0 ? void 0 : i.appId),
fallback: /*#__PURE__*/React.createElement(LoadingOutlined, null)
}, renderList(i === null || i === void 0 ? void 0 : i.appId)));
})))))), /*#__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 BindForm = function BindForm(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 BindForm;