@wufengteam/inputs
Version:
平台提供的右侧属性编辑器，需要在主工程中注册
514 lines (513 loc) • 20.8 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _icons = _interopRequireWildcard(require("@ant-design/icons"));
var _antd = require("antd");
var _reactDnd = require("react-dnd");
var _reactDndHtml5Backend = require("react-dnd-html5-backend");
var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
var _core = require("@wufengteam/core");
var _assets = require("../../../assets");
var _utils = require("../../../utils");
var _createId = _interopRequireDefault(require("../../../utils/createId"));
var _BatchEdit = _interopRequireDefault(require("../../../BatchEdit"));
var _DraggableBodyRow = _interopRequireDefault(require("../../../components/DraggableBodyRow"));
require("../../index.css");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 */
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 = (0, _react.useState)(initalData),
_useState2 = _slicedToArray(_useState, 2),
treeOptionList = _useState2[0],
setTreeOptionList = _useState2[1];
// 树结构选项id集合
var _useState3 = (0, _react.useState)([]),
_useState4 = _slicedToArray(_useState3, 2),
treeOptionIds = _useState4[0],
setTreeOptionIds = _useState4[1];
// 树结构展开节点id集合
var _useState5 = (0, _react.useState)([]),
_useState6 = _slicedToArray(_useState5, 2),
expandKeys = _useState6[0],
setExpandKeys = _useState6[1];
// 保存选项数据的额外参数
var _useState7 = (0, _react.useState)({
appId: appId,
attrName: '静态数据'
}),
_useState8 = _slicedToArray(_useState7, 2),
extraParams = _useState8[0],
setExtraParams = _useState8[1];
// 自定义选项数据字段表格加载开关
var _useState9 = (0, _react.useState)(false),
_useState10 = _slicedToArray(_useState9, 2),
tableLoading = _useState10[0],
setTableLoading = _useState10[1];
// 保存选项数据加载开关
var _useState11 = (0, _react.useState)(false),
_useState12 = _slicedToArray(_useState11, 2),
saveLoading = _useState12[0],
setSaveLoading = _useState12[1];
var _useState13 = (0, _react.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 || (0, _createId.default)()
});
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);
_core.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);
});
};
(0, _react.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 || (0, _createId.default)(),
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);
// 将选项数据保存到低代码平台静态数据中
_core.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 {
_antd.message.error(resultObject || '选项数据保存失败');
onCancel();
}
}).catch(function () {
setSaveLoading(false);
_antd.message.error('选项数据保存失败');
onCancel();
});
} else {
_antd.message.warn(isCheck);
}
};
var handleAdd = function handleAdd() {
var id = (0, _createId.default)();
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 = (0, _createId.default)();
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) {
_antd.message.warn('至少保留一项');
return;
}
setTreeOptionIds(function (pre) {
return _toConsumableArray(pre).filter(function (c) {
return c !== id;
});
});
setTreeOptionList(newSource);
};
// 自定义数据表格表头配置
var customColumns = (0, _react.useMemo)(function () {
var cols = [{
title: '显示值',
key: 'title',
dataIndex: 'title',
render: function render(_, record) {
return /*#__PURE__*/_react.default.createElement(_antd.Row, null, /*#__PURE__*/_react.default.createElement(_antd.Col, {
span: 3
}, (record === null || record === void 0 ? void 0 : record.$$isParent) && /*#__PURE__*/_react.default.createElement(_icons.MenuOutlined, {
style: {
cursor: 'grab',
color: '#999',
marginTop: '5px'
}
})), /*#__PURE__*/_react.default.createElement(_antd.Col, {
span: 21
}, /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement(_antd.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.default.createElement(_antd.Space, null, /*#__PURE__*/_react.default.createElement(_icons.default, {
component: _assets.AddIcon,
onClick: function onClick() {
return addCatalog(record);
},
className: "".concat(_utils.cssPrefixCls, "-icon")
}), /*#__PURE__*/_react.default.createElement(_icons.default, {
component: _assets.DeleteIcon,
onClick: function onClick() {
return deleteCatalog(record);
},
className: "".concat(_utils.cssPrefixCls, "-icon")
}));
}
}];
return cols;
}, [treeOptionList]);
var components = {
body: {
row: _DraggableBodyRow.default
}
};
var moveRow = (0, _react.useCallback)(function (dragIndex, hoverIndex) {
var dragRow = treeOptionList[dragIndex];
if (dragRow === null || dragRow === void 0 ? void 0 : dragRow.$$isParent) {
setTreeOptionList((0, _immutabilityHelper.default)(treeOptionList, {
$splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]]
}));
} else {
_antd.message.info('子级节点不支持进行移动！');
}
}, [treeOptionList]);
return /*#__PURE__*/_react.default.createElement(_antd.Modal, {
width: 800,
maskClosable: false,
className: "".concat(_utils.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.default.createElement("div", {
className: "".concat(_utils.cssPrefixCls, "-treecolumns-panel")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "panelHd"
}, /*#__PURE__*/_react.default.createElement(_antd.Space, null, /*#__PURE__*/_react.default.createElement(_antd.Button, {
icon: /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, {
style: {
color: '#47E'
}
}),
size: "small",
type: "primary",
ghost: true,
onClick: handleAdd
}, "\u6DFB\u52A0\u9009\u9879"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
style: {
width: '110px'
},
icon: /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, {
style: {
color: 'rgba(28, 36, 46, 0.75)'
}
}),
size: "small",
onClick: function onClick() {
setBatchEditModal(true);
}
}, "\u6279\u91CF\u6DFB\u52A0"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
size: "small",
onClick: function onClick() {
// console.log('treeOptionIds', treeOptionIds);
setExpandKeys(treeOptionIds);
}
}, "\u5168\u90E8\u5C55\u5F00"))), /*#__PURE__*/_react.default.createElement("div", {
className: "panelBd"
}, /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
backend: _reactDndHtml5Backend.HTML5Backend
}, /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement(_BatchEdit.default
// 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);
}
})));
};
var _default = exports.default = TreeOptionSetModal;