@wufengteam/inputs
Version:
平台提供的右侧属性编辑器，需要在主工程中注册
505 lines • 18.8 kB
JavaScript
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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, { useCallback, useEffect, useMemo, useState } from 'react';
import Icon, { MenuOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Col, Input, message, Modal, Row, Space, Table } from 'antd';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import { wufengController } from '@wufengteam/core';
import { AddIcon, DeleteIcon } from '../../../assets';
import { cssPrefixCls } from '../../../utils';
import createId from '../../../utils/createId';
import BatchEdit from '../../../BatchEdit';
import DraggableBodyRow from '../../../components/DraggableBodyRow';
import "../../index.css";
var TreeOptionSetModal = function TreeOptionSetModal(props) {
// console.log('TreeOptionSetModal', props);
var onChange = props.onChange,
visible = props.visible,
selectedComp = props.selectedComp,
wrapRef = props.wrapRef,
onCancel = props.onCancel;
if (!window.appId) {
window.appId = sessionStorage.getItem('appId');
}
// TODO: 暂时先从window中获取应用id，虽然不保险
var _window = window,
appId = _window.appId;
// 解决第一次获取value值为undefined的问题
var _ref = (selectedComp === null || selectedComp === void 0 ? void 0 : selectedComp.props) || {},
treeData = _ref.treeData,
options = _ref.options,
staticData = _ref.staticData;
var initalData = treeData || options || (staticData === null || staticData === void 0 ? void 0 : staticData.data) || [];
// 选项数据存在低代码静态数据中的额外attrNbr和attrId数据
var _ref2 = (initalData === null || initalData === void 0 ? void 0 : initalData[0]) || {},
extraData = _ref2.extraData;
// 树结构选项数据
var _useState = useState(initalData),
_useState2 = _slicedToArray(_useState, 2),
treeOptionList = _useState2[0],
setTreeOptionList = _useState2[1];
// 树结构选项id集合
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
treeOptionIds = _useState4[0],
setTreeOptionIds = _useState4[1];
// 树结构展开节点id集合
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
expandKeys = _useState6[0],
setExpandKeys = _useState6[1];
// 保存选项数据的额外参数
var _useState7 = useState({
appId: appId,
attrName: '静态数据'
}),
_useState8 = _slicedToArray(_useState7, 2),
extraParams = _useState8[0],
setExtraParams = _useState8[1];
// 自定义选项数据字段表格加载开关
var _useState9 = useState(false),
_useState10 = _slicedToArray(_useState9, 2),
tableLoading = _useState10[0],
setTableLoading = _useState10[1];
// 保存选项数据加载开关
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
saveLoading = _useState12[0],
setSaveLoading = _useState12[1];
var _useState13 = useState(false),
_useState14 = _slicedToArray(_useState13, 2),
batchEditModal = _useState14[0],
setBatchEditModal = _useState14[1];
var initData = function initData(data) {
var ids = [];
var getTreeOptionIds = function getTreeOptionIds(arr) {
return (arr || []).map(function (c) {
var id = c.id;
var item = Object.assign(Object.assign({}, c), {
id: id || createId()
});
ids.push(id);
if (Array.isArray(c.children)) {
item.children = getTreeOptionIds(c.children);
}
return item;
});
};
var newTreeOptionList = getTreeOptionIds(data);
setTreeOptionIds(ids);
setTreeOptionList(function (oldValue) {
return [].concat(_toConsumableArray(oldValue), _toConsumableArray(newTreeOptionList));
});
};
// 获取选项数据保存在低代码静态数据中的一些数据
var getExtraParams = function getExtraParams(id) {
setTableLoading(true);
wufengController.getAction('queryOptionList', {
attrId: id
}).then(function (res) {
setTableLoading(false);
var _ref3 = res || {},
resultCode = _ref3.resultCode,
resultObject = _ref3.resultObject;
if (resultCode === '0') {
if (resultObject === null) {
// setOptionList([]);
console.error('您所存储的选项数据在静态数据中查询不到');
// onChange?.({ data: [], type: 'custom' });
} else {
var _ref4 = resultObject || {},
appid = _ref4.appId,
attrName = _ref4.attrName,
attrDesc = _ref4.attrDesc,
attrNbr = _ref4.attrNbr,
attrId = _ref4.attrId;
setExtraParams({
appId: appid,
attrName: attrName,
attrDesc: attrDesc,
attrNbr: attrNbr,
attrId: attrId
});
// 设置选项数据还是从DSL中获取，不从低代码静态数据中获取
initData(initalData);
}
} else {
console.error('从低代码平台获取静态数据失败');
}
}).catch(function (error) {
setTableLoading(false);
console.error(error);
});
};
useEffect(function () {
if (visible) {
if (extraData === null || extraData === void 0 ? void 0 : extraData.attrId) {
getExtraParams(extraData === null || extraData === void 0 ? void 0 : extraData.attrId);
}
} else {
setTreeOptionIds([]);
setTreeOptionList([]);
}
}, [visible]);
var handleOk = function handleOk() {
var keysMap = {};
var isCheck = '';
var flatTreeOptionList = [];
var checkTreeOptionList = function checkTreeOptionList(arr) {
return arr.map(function (c) {
var newData = Object.assign({}, c);
// 校验value唯一性
if (isCheck === '') {
if (!c.value) {
isCheck = '选项值不能为空';
} else if (keysMap[c.value]) {
isCheck = '选项值不可重复';
} else {
keysMap[c.value] = true;
}
}
if (Array.isArray(c.children)) {
newData.children = checkTreeOptionList(c.children);
}
// delete newData.id;
flatTreeOptionList.push(newData);
return newData;
});
};
var checkResult = checkTreeOptionList(treeOptionList);
if (!isCheck && flatTreeOptionList.length > 0) {
var attrValueDTOList = flatTreeOptionList.map(function (item, index) {
var list = {
appId: appId,
attrValueId: item.id || createId(),
attrValueName: item.title,
attrValue: item.value,
sort: index,
i18nCopywritings: []
};
if ((extraParams === null || extraParams === void 0 ? void 0 : extraParams.attrId) && (extraParams === null || extraParams === void 0 ? void 0 : extraParams.attrNbr)) {
return Object.assign(Object.assign({}, list), {
attrId: extraParams.attrId,
attrNbr: extraParams.attrNbr
});
}
return list;
});
var params = Object.assign(Object.assign({}, extraParams), {
attrValueDTOList: attrValueDTOList
});
setSaveLoading(true);
// 将选项数据保存到低代码平台静态数据中
wufengController.getAction('saveOptionList', params).then(function (res) {
var _a;
setSaveLoading(false);
var _ref5 = res || {},
resultCode = _ref5.resultCode,
resultObject = _ref5.resultObject;
if (resultCode === '0') {
checkResult[0].extraData = {
attrId: resultObject === null || resultObject === void 0 ? void 0 : resultObject.attrId,
attrNbr: resultObject === null || resultObject === void 0 ? void 0 : resultObject.attrNbr
};
if (((_a = props === null || props === void 0 ? void 0 : props.selectedComp) === null || _a === void 0 ? void 0 : _a.type) === 'Cascader') {
onChange === null || onChange === void 0 ? void 0 : onChange({
data: checkResult,
type: 'custom'
});
} else {
onChange === null || onChange === void 0 ? void 0 : onChange(checkResult);
}
onCancel();
} else {
message.error(resultObject || '选项数据保存失败');
onCancel();
}
}).catch(function () {
setSaveLoading(false);
message.error('选项数据保存失败');
onCancel();
});
} else {
message.warn(isCheck);
}
};
var handleAdd = function handleAdd() {
var id = createId();
var newTree = {
title: '显示值',
value: '显示值',
key: '显示值',
id: id,
$$isParent: true
};
var newData = _toConsumableArray(treeOptionList);
newData.push(newTree);
setTreeOptionList(newData);
setTreeOptionIds(function (pre) {
return [].concat(_toConsumableArray(pre), [id]);
});
};
var findItem = function findItem(list, id) {
var item = null;
var recusive = function recusive(arr) {
arr.find(function (c) {
if (c.id === id) {
item = c;
return true;
}
if (Array.isArray(c.children)) {
return recusive(c.children);
}
return false;
});
};
recusive(list);
return item;
};
var handleChangeValue = function handleChangeValue(val, valKey, record) {
var id = record.id;
var newData = _toConsumableArray(treeOptionList);
var item = findItem(newData, id);
item[valKey] = val;
if (valKey === 'title' && !item.isValueEdited) {
item.value = val;
item.key = val;
}
if (valKey === 'value') {
item.key = val;
item.isValueEdited = true;
}
setTreeOptionList(newData);
};
var addCatalog = function addCatalog(_ref6) {
var id = _ref6.id;
var newData = _toConsumableArray(treeOptionList);
var item = findItem(newData, id);
var newId = createId();
var newTree = {
title: '显示值',
value: '显示值',
key: '显示值',
id: newId
};
if (item.children) {
item.children.push(newTree);
} else {
item.children = [newTree];
}
setTreeOptionIds(function (pre) {
return [].concat(_toConsumableArray(pre), [newId]);
});
setTreeOptionList(newData);
};
var deleteCatalog = function deleteCatalog(_ref7) {
var id = _ref7.id;
var newSource = _toConsumableArray(treeOptionList);
var recusiveDelete = function recusiveDelete(list, deleteId) {
return list.filter(function (c) {
var item = c;
if (item.id !== deleteId) {
if (Array.isArray(item.children)) {
item.children = recusiveDelete(item.children, deleteId);
}
return true;
}
return false;
});
};
newSource = recusiveDelete(newSource, id);
if (!newSource.length) {
message.warn('至少保留一项');
return;
}
setTreeOptionIds(function (pre) {
return _toConsumableArray(pre).filter(function (c) {
return c !== id;
});
});
setTreeOptionList(newSource);
};
// 自定义数据表格表头配置
var customColumns = useMemo(function () {
var cols = [{
title: '显示值',
key: 'title',
dataIndex: 'title',
render: function render(_, record) {
return /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
span: 3
}, (record === null || record === void 0 ? void 0 : record.$$isParent) && /*#__PURE__*/React.createElement(MenuOutlined, {
style: {
cursor: 'grab',
color: '#999',
marginTop: '5px'
}
})), /*#__PURE__*/React.createElement(Col, {
span: 21
}, /*#__PURE__*/React.createElement(Input, {
size: "small",
value: record.title,
onChange: function onChange(e) {
return handleChangeValue(e.target.value, 'title', record);
},
maxLength: 100
})));
}
}, {
title: '选项值',
key: 'value',
dataIndex: 'value',
render: function render(_, record) {
return /*#__PURE__*/React.createElement(Input, {
size: "small",
value: record.value,
onChange: function onChange(e) {
return handleChangeValue(e.target.value, 'value', record);
}
});
}
},
// {
// title: '是否禁用',
// key: 'disabled',
// width: '85px',
// render: (_, record: any) => (
// <Switch
// checkedChildren="启用"
// unCheckedChildren="关闭"
// size="small"
// checked={record.disabled}
// onChange={(e) => handleChangeValue(e, 'disabled', record)}
// />
// ),
// },
{
title: '操作',
key: 'ctrl',
render: function render(_, record) {
return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Icon, {
component: AddIcon,
onClick: function onClick() {
return addCatalog(record);
},
className: "".concat(cssPrefixCls, "-icon")
}), /*#__PURE__*/React.createElement(Icon, {
component: DeleteIcon,
onClick: function onClick() {
return deleteCatalog(record);
},
className: "".concat(cssPrefixCls, "-icon")
}));
}
}];
return cols;
}, [treeOptionList]);
var components = {
body: {
row: DraggableBodyRow
}
};
var moveRow = useCallback(function (dragIndex, hoverIndex) {
var dragRow = treeOptionList[dragIndex];
if (dragRow === null || dragRow === void 0 ? void 0 : dragRow.$$isParent) {
setTreeOptionList(update(treeOptionList, {
$splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]]
}));
} else {
message.info('子级节点不支持进行移动！');
}
}, [treeOptionList]);
return /*#__PURE__*/React.createElement(Modal, {
width: 800,
maskClosable: false,
className: "".concat(cssPrefixCls, "-treecolumns-modal"),
title: "\u9879\u76EE\u8BBE\u7F6E",
visible: visible,
getContainer: wrapRef === null || wrapRef === void 0 ? void 0 : wrapRef.current,
confirmLoading: saveLoading,
onOk: handleOk,
onCancel: onCancel
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(cssPrefixCls, "-treecolumns-panel")
}, /*#__PURE__*/React.createElement("div", {
className: "panelHd"
}, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
icon: /*#__PURE__*/React.createElement(PlusOutlined, {
style: {
color: '#47E'
}
}),
size: "small",
type: "primary",
ghost: true,
onClick: handleAdd
}, "\u6DFB\u52A0\u9009\u9879"), /*#__PURE__*/React.createElement(Button, {
style: {
width: '110px'
},
icon: /*#__PURE__*/React.createElement(PlusOutlined, {
style: {
color: 'rgba(28, 36, 46, 0.75)'
}
}),
size: "small",
onClick: function onClick() {
setBatchEditModal(true);
}
}, "\u6279\u91CF\u6DFB\u52A0"), /*#__PURE__*/React.createElement(Button, {
size: "small",
onClick: function onClick() {
// console.log('treeOptionIds', treeOptionIds);
setExpandKeys(treeOptionIds);
}
}, "\u5168\u90E8\u5C55\u5F00"))), /*#__PURE__*/React.createElement("div", {
className: "panelBd"
}, /*#__PURE__*/React.createElement(DndProvider, {
backend: HTML5Backend
}, /*#__PURE__*/React.createElement(Table, {
loading: tableLoading,
columns: customColumns,
dataSource: treeOptionList,
expandedRowKeys: expandKeys,
onExpandedRowsChange: setExpandKeys,
className: "table",
pagination: false,
rowKey: "id",
components: components,
onRow: function onRow(_, index) {
var attrs = {
index: index,
moveRow: moveRow
};
return attrs;
}
}))), /*#__PURE__*/React.createElement(BatchEdit
// type="TreeOptionSet"
, {
// type="TreeOptionSet"
titleKey: "title",
isCascade: true,
visible: batchEditModal,
onCancel: function onCancel() {
setBatchEditModal(false);
},
onOk: function onOk(batchData) {
// console.log('batchData', batchData);
initData(batchData);
// setTreeOptionList(batchData);
setBatchEditModal(false);
}
})));
};
export default TreeOptionSetModal;