@wufengteam/inputs
Version:
平台提供的右侧属性编辑器，需要在主工程中注册
630 lines • 36.3 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); }
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
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; }
var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
/* eslint-disable no-console */
import React, { useEffect, useState, useRef, useContext } from 'react';
import { Table, Form, Input, Popconfirm, Space, Select } from 'antd';
import { v4 as uuidv4 } from 'uuid';
import Icon, { CaretDownOutlined, CaretRightOutlined, PlusOutlined } from '@ant-design/icons';
import { AddIcon, DeleteIcon } from '../../../assets';
import "./index.css";
import { cssPrefixCls } from '../../../utils';
var EditableContext = /*#__PURE__*/React.createContext(null);
var EditableRow = function EditableRow(_a) {
var index = _a.index,
props = __rest(_a, ["index"]);
var _Form$useForm = Form.useForm(),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
form = _Form$useForm2[0];
return /*#__PURE__*/React.createElement(Form, {
form: form,
component: false
}, /*#__PURE__*/React.createElement(EditableContext.Provider, {
value: form
}, /*#__PURE__*/React.createElement("tr", Object.assign({}, props))));
};
var EditableCell = function EditableCell(_a) {
var _b, _c, _d, _e, _f, _g;
var title = _a.title,
editable = _a.editable,
children = _a.children,
dataIndex = _a.dataIndex,
record = _a.record,
_a$keyList = _a.keyList,
keyList = _a$keyList === void 0 ? [] : _a$keyList,
_a$usedParams = _a.usedParams,
usedParams = _a$usedParams === void 0 ? [] : _a$usedParams,
fieldsOptions = _a.fieldsOptions,
getUsedComps = _a.getUsedComps,
handleSave = _a.handleSave,
restProps = __rest(_a, ["title", "editable", "children", "dataIndex", "record", "keyList", "usedParams", "fieldsOptions", "getUsedComps", "handleSave"]);
var formRef = useRef(null);
var form = useContext(EditableContext);
// @ts-ignore
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
fields = _useState2[0],
setFields = _useState2[1]; // 表单字段值下拉选择
var keyListSource = (record === null || record === void 0 ? void 0 : record.keyList) || _toConsumableArray(keyList) || [];
useEffect(function () {
var _a, _b, _c, _d;
if (record) {
form.setFieldsValue({
dataKey: record.dataKey,
dataType: record.dataType,
dataValue: record.dataValue
});
var newFields = [];
var subFieldsOptions;
var dataKeyObj = {};
if (record.dataKey) {
dataKeyObj = keyListSource === null || keyListSource === void 0 ? void 0 : keyListSource.find(function (i) {
return i.value === record.dataKey;
});
}
var _ref = dataKeyObj !== null && dataKeyObj !== void 0 ? dataKeyObj : {},
_ref$dataKeyType = _ref.dataKeyType,
dataKeyType = _ref$dataKeyType === void 0 ? '' : _ref$dataKeyType;
if (!['object', 'objectArray', 'array', 'fieldArray'].includes(dataKeyType)) {
newFields = (_a = fieldsOptions === null || fieldsOptions === void 0 ? void 0 : fieldsOptions.filter(function (i) {
return !(i === null || i === void 0 ? void 0 : i.compType.includes('SubForm'));
})) === null || _a === void 0 ? void 0 : _a.filter(function (i) {
return {
label: i.attrName,
value: i.attrCode
};
});
} else if ((_c = (_b = dataKeyType.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, 'array')) {
// 数组=>子表单
setFields([]);
newFields = fieldsOptions === null || fieldsOptions === void 0 ? void 0 : fieldsOptions.filter(function (i) {
return i === null || i === void 0 ? void 0 : i.compType.includes('SubForm');
});
if (record.dataValue && record.dataType === '2') {
var tempFields = newFields.find(function (i) {
return i.attrCode === record.dataValue;
});
subFieldsOptions = tempFields ? (_d = tempFields === null || tempFields === void 0 ? void 0 : tempFields.subFormFields) === null || _d === void 0 ? void 0 : _d.map(function (item) {
return item;
}) : [];
}
}
setFields(newFields);
handleSave(Object.assign(Object.assign({}, record), {
subFieldsOptions: subFieldsOptions,
dataKeyType: dataKeyType,
children: dataKeyType === 'param' ? undefined : record.children
}));
}
}, [record === null || record === void 0 ? void 0 : record.dataKey, record === null || record === void 0 ? void 0 : record.dataType, record === null || record === void 0 ? void 0 : record.dataValue, fieldsOptions]);
var save = function save(otherProps) {
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var values;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
_context.next = 3;
return form.validateFields();
case 3:
values = _context.sent;
// console.log('save values', { ...values });
handleSave(Object.assign(Object.assign(Object.assign({}, record), values), otherProps));
_context.next = 9;
break;
case 7:
_context.prev = 7;
_context.t0 = _context["catch"](0);
case 9:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 7]]);
}));
};
var childNode = children;
var type = form.getFieldValue('dataType');
switch (dataIndex) {
case 'dataKey':
// 参数名
childNode = /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
alignItems: 'center',
gap: 8
}
}, children, /*#__PURE__*/React.createElement(Form.Item, {
style: {
margin: 0,
flex: 1
},
name: dataIndex
}, /*#__PURE__*/React.createElement(Select, {
disabled: !editable,
ref: formRef,
onChange: function onChange() {
form.setFieldsValue({
dataValue: ''
});
save({
subFieldsOptions: undefined,
children: []
});
},
options: keyListSource === null || keyListSource === void 0 ? void 0 : keyListSource.filter(function (item) {
return !usedParams.includes(item === null || item === void 0 ? void 0 : item.value);
})
}, keyListSource.map(function (item) {
return /*#__PURE__*/React.createElement(Select.Option, {
data: item,
key: item.value
}, item.label);
}))));
break;
case 'dataType':
if (record.dataKeyType !== 'object') {
childNode = /*#__PURE__*/React.createElement(React.Fragment, null, !((record === null || record === void 0 ? void 0 : record.dataKeyType) === 'object' || ((_d = (_c = (_b = record === null || record === void 0 ? void 0 : record.dataKeyType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === null || _c === void 0 ? void 0 : _c.includes) === null || _d === void 0 ? void 0 : _d.call(_c, 'array')) && (record === null || record === void 0 ? void 0 : record.dataType) === '1') && ( /*#__PURE__*/React.createElement(Form.Item, {
style: {
margin: 0
},
name: dataIndex
}, /*#__PURE__*/React.createElement(Select, {
disabled: !editable,
ref: formRef,
onChange: function onChange() {
form.setFieldsValue({
dataValue: ''
});
save();
},
options: valueTypeList
}))));
}
break;
case 'dataValue':
// 参数值
if (record.dataKeyType !== 'object') {
if (type === '1' && !((record === null || record === void 0 ? void 0 : record.dataKeyType) === 'object' || ((_g = (_f = (_e = record === null || record === void 0 ? void 0 : record.dataKeyType) === null || _e === void 0 ? void 0 : _e.toLowerCase()) === null || _f === void 0 ? void 0 : _f.includes) === null || _g === void 0 ? void 0 : _g.call(_f, 'array')) && (record === null || record === void 0 ? void 0 : record.dataType) === '1')) {
// 固定值
childNode = /*#__PURE__*/React.createElement(Form.Item, {
style: {
margin: 0
},
name: dataIndex
}, /*#__PURE__*/React.createElement(Input, {
disabled: !editable,
ref: formRef,
onBlur: function onBlur() {
save();
},
value: record === null || record === void 0 ? void 0 : record.dataValue
}));
}
// else {
// // 表单字段值
// const usedComponentsTemp = (getUsedComps && getUsedComps()) || [];
// if (record?.dataValue) {
// const index = usedComponentsTemp.findIndex(item => item === record?.dataValue);
// if (index > -1) {
// usedComponentsTemp.splice(index, 1);
// }
// }
// childNode = (
// <Form.Item style={{ margin: 0 }} name={dataIndex}>
// <Select
// disabled={!editable}
// ref={formRef}
// value={record?.dataValue}
// fieldNames={{ label: 'attrName', value: 'attrCode' }}
// onChange={() => {
// save();
// }}
// options={(record.fields || fields)?.filter(item => !usedComponentsTemp.includes(item?.attrCode))}
// />
// </Form.Item>
// );
// }
}
break;
default:
break;
}
return /*#__PURE__*/React.createElement("td", Object.assign({}, restProps), childNode);
};
// 值类型
export var valueTypeList = [{
label: '固定值',
value: '1'
}
// {
// label: '表单字段值',
// value: '2',
// },
];
var KVTable = function KVTable(props) {
var _a;
var _props$allowEdit = props.allowEdit,
allowEdit = _props$allowEdit === void 0 ? true : _props$allowEdit,
tableData = props.tableData,
localFieldList = props.localFieldList,
getUsedComps = props.getUsedComps,
onDataUpdate = props.onDataUpdate,
_props$onlyEdit = props.onlyEdit,
onlyEdit = _props$onlyEdit === void 0 ? false : _props$onlyEdit,
_props$showHeader = props.showHeader,
showHeader = _props$showHeader === void 0 ? true : _props$showHeader,
_props$showAddItem = props.showAddItem,
showAddItem = _props$showAddItem === void 0 ? false : _props$showAddItem,
_props$keyList = props.keyList,
keyList = _props$keyList === void 0 ? [] : _props$keyList,
tableKey = props.tableKey,
isClear = props.isClear;
// 数据源
var _useState3 = useState(tableData !== null && tableData !== void 0 ? tableData : []),
_useState4 = _slicedToArray(_useState3, 2),
dataSource = _useState4[0],
setDataSource = _useState4[1];
// 已用的参数 字符串数组
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
usedParams = _useState6[0],
setUsedParams = _useState6[1];
// 已用的参数 对象数组
var _useState7 = useState([]),
_useState8 = _slicedToArray(_useState7, 2),
usedParamsWithKey = _useState8[0],
setUsedParamsWithKey = _useState8[1];
useEffect(function () {
// 清空 缓存数据
setUsedParams([]);
setUsedParamsWithKey([]);
}, [isClear]);
useEffect(function () {
if (onDataUpdate) {
onDataUpdate(tableKey, dataSource);
}
}, [JSON.stringify(dataSource)]);
useEffect(function () {
setDataSource(tableData !== null && tableData !== void 0 ? tableData : []);
}, [JSON.stringify(tableData)]);
// 基础表格列数据配置(包含Key，Value)
var baseColumnsData = [{
title: '参数名',
dataIndex: 'dataKey',
width: allowEdit ? '25%' : '30%',
editable: allowEdit !== null && allowEdit !== void 0 ? allowEdit : false,
render: function render() {
return null;
}
}, {
title: '填充类型',
dataIndex: 'dataType',
width: allowEdit ? '25%' : '30%',
editable: allowEdit !== null && allowEdit !== void 0 ? allowEdit : false,
render: function render() {
return null;
}
}, {
title: '参数值',
dataIndex: 'dataValue',
width: allowEdit ? '40%' : '70%',
editable: (_a = onlyEdit || allowEdit) !== null && _a !== void 0 ? _a : false,
render: function render() {
return null;
}
}];
// 覆盖默认的 table 元素
var components = {
body: {
row: EditableRow,
cell: EditableCell
}
};
// 更新节点:add-新增，delete-删除，save-修改
var updateTableData = function updateTableData(record, list) {
var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
var propsKey = record.key,
parentKey = record.parentKey,
subFieldsOptions = record.subFieldsOptions;
list.forEach(function (item) {
var tableChildren = (item === null || item === void 0 ? void 0 : item.children) || [];
if (type === 'add') {
if (item.key === propsKey) {
var _ref2 = record.dataKey ? (keyList === null || keyList === void 0 ? void 0 : keyList.find(function (i) {
return i.value === record.dataKey;
})) || {} : {},
_ref2$children = _ref2.children,
dataKeyListChildren = _ref2$children === void 0 ? [] : _ref2$children;
tableChildren.push({
key: uuidv4(),
isLeaf: true,
parentKey: propsKey,
dataKey: '',
dataKeyType: '',
dataType: '1',
dataValue: '',
editable: true,
keyPlaceholder: 'key',
placeholder: 'value',
keyList: dataKeyListChildren,
fields: subFieldsOptions
});
// 有子表的数据比正常数据多一个children字段
item.children = tableChildren;
} else {
updateTableData(record, tableChildren, type);
}
} else if (type === 'delete') {
if ((item === null || item === void 0 ? void 0 : item.key) === parentKey) {
var finalIndex = tableChildren.findIndex(function (i) {
return i.key === propsKey;
});
if (finalIndex > -1) {
tableChildren.splice(finalIndex, 1);
item.children = tableChildren;
} else {
updateTableData(record, tableChildren, type);
}
} else {
updateTableData(record, tableChildren, type);
}
} else if (type === 'update') {
if ((item === null || item === void 0 ? void 0 : item.key) === parentKey) {
var _finalIndex = tableChildren.findIndex(function (i) {
return i.key === propsKey;
});
if (_finalIndex > -1) {
tableChildren.splice(_finalIndex, 1, Object.assign(Object.assign({}, tableChildren[_finalIndex]), record));
item.children = tableChildren;
} else {
updateTableData(record, tableChildren, type);
}
} else {
updateTableData(record, tableChildren, type);
}
}
});
};
// 删除节点
var handleDelete = function handleDelete(record) {
if (record.parentKey) {
updateTableData(record, dataSource, 'delete');
setDataSource(_toConsumableArray(dataSource));
} else {
var newList = _toConsumableArray(dataSource);
var index = newList.findIndex(function (i) {
return i.key === record.key;
});
if (index > -1) {
newList.splice(index, 1);
}
setDataSource(_toConsumableArray(newList));
}
if (record === null || record === void 0 ? void 0 : record.dataKey) {
var deleteParams = [];
deleteParams.push(record === null || record === void 0 ? void 0 : record.dataKey);
if ((record === null || record === void 0 ? void 0 : record.children) && Array.isArray(record === null || record === void 0 ? void 0 : record.children) && (record === null || record === void 0 ? void 0 : record.children.length) > 0) {
record === null || record === void 0 ? void 0 : record.children.forEach(function (item) {
deleteParams.push(item === null || item === void 0 ? void 0 : item.dataKey);
});
}
setUsedParams(usedParams.filter(function (item) {
return !deleteParams.includes(item);
}));
setUsedParamsWithKey(usedParamsWithKey.filter(function (item) {
return !deleteParams.includes(item === null || item === void 0 ? void 0 : item.dataKey);
}));
}
};
// 修改节点
var handleSave = function handleSave(row) {
if (row.parentKey) {
updateTableData(row, dataSource, 'update');
setDataSource(_toConsumableArray(dataSource));
} else {
var newList = _toConsumableArray(dataSource);
var index = newList.findIndex(function (i) {
return i.key === row.key;
});
if (index > -1) {
newList.splice(index, 1, Object.assign({}, row));
}
setDataSource(_toConsumableArray(newList));
}
if (row === null || row === void 0 ? void 0 : row.dataKey) {
var usedParamsWithKeyTemp = usedParamsWithKey;
var currnetKey = row === null || row === void 0 ? void 0 : row.key;
var currnetDataKey = row === null || row === void 0 ? void 0 : row.dataKey;
var _index = usedParamsWithKeyTemp.findIndex(function (i) {
return i.key === currnetKey;
});
if (_index > -1) {
// 存在
usedParamsWithKeyTemp.splice(_index, 1, {
key: currnetKey,
dataKey: currnetDataKey
});
} else {
usedParamsWithKeyTemp.push({
key: currnetKey,
dataKey: currnetDataKey
});
}
setUsedParamsWithKey(usedParamsWithKeyTemp);
setUsedParams(usedParamsWithKeyTemp.map(function (item) {
return item === null || item === void 0 ? void 0 : item.dataKey;
}));
}
};
// 新增根节点
var handleAdd = function handleAdd(record) {
if (record) {
// 新增子节点
updateTableData(record, dataSource, 'add');
setDataSource(_toConsumableArray(dataSource));
} else {
// 新增根节点
setDataSource([].concat(_toConsumableArray(dataSource), [{
key: uuidv4(),
dataKey: '',
dataKeyType: '',
dataType: '1',
dataValue: '',
editable: true,
keyPlaceholder: 'key',
placeholder: 'value'
}]));
}
};
// 表格列数据配置 (ColumnTypes[number] & { editable?: boolean; dataIndex: string })
var columnsDataConfig = !allowEdit ? baseColumnsData : [].concat(baseColumnsData, [{
title: '操作',
dataIndex: 'operation',
fixed: 'right',
// width: allowEdit ? '10%' : '0%',
render: function render(_, record) {
var _a, _b, _c;
return allowEdit && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) >= 1 ? ( /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Popconfirm, {
title: "\u786E\u8BA4\u5220\u9664?",
placement: "topRight",
onConfirm: function onConfirm() {
// if (dataSource.length === 1) {
// message.error('至少保留一项KEY-VALUE配置');
// return;
// }
handleDelete(record);
},
overlayClassName: "".concat(cssPrefixCls, "-kvTablePopconfirm")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(cssPrefixCls, "-optionOperationButton")
}, /*#__PURE__*/React.createElement(Icon, {
component: DeleteIcon
}))), showAddItem && (record === null || record === void 0 ? void 0 : record.dataKey) && ((record === null || record === void 0 ? void 0 : record.dataKeyType) === 'object' || ((_c = (_b = (_a = record === null || record === void 0 ? void 0 : record.dataKeyType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, 'array')) && (record === null || record === void 0 ? void 0 : record.dataType) === '1') && ( /*#__PURE__*/React.createElement("div", {
className: "".concat(cssPrefixCls, "-optionOperationButton")
}, /*#__PURE__*/React.createElement(Icon, {
component: AddIcon,
onClick: function onClick() {
return handleAdd(record);
},
className: "".concat(cssPrefixCls, "-icon")
}))))) : null;
}
}]);
var columns = columnsDataConfig === null || columnsDataConfig === void 0 ? void 0 : columnsDataConfig.map(function (col) {
// if (!col.editable) {
// return col;
// }
return Object.assign(Object.assign({}, col), {
onCell: function onCell(record) {
return {
record: record,
editable: col.editable,
dataIndex: col.dataIndex,
usedParams: usedParams,
title: (col === null || col === void 0 ? void 0 : col.title) === 'Key' ? (record === null || record === void 0 ? void 0 : record.keyPlaceholder) || (col === null || col === void 0 ? void 0 : col.title) : (record === null || record === void 0 ? void 0 : record.placeholder) || (col === null || col === void 0 ? void 0 : col.title),
keyList: keyList,
getUsedComps: getUsedComps,
fieldsOptions: localFieldList,
handleSave: handleSave
};
}
});
});
return /*#__PURE__*/React.createElement("div", {
className: "".concat(cssPrefixCls, "-tabLayout")
}, /*#__PURE__*/React.createElement(Table, {
components: components,
rowClassName: "".concat(cssPrefixCls, "-editableRow"),
pagination: false,
columns: columns,
bordered: true,
showHeader: showHeader,
dataSource: dataSource,
size: "small",
className: "".concat(cssPrefixCls, "-dataReceiveKvTableStyle"),
expandable: showAddItem ? {
indentSize: 20,
// expandedRowRender: (record: any) => <></>,
expandIcon: function expandIcon(_ref3) {
var expanded = _ref3.expanded,
onExpand = _ref3.onExpand,
record = _ref3.record;
var _a;
if (record && ((_a = record === null || record === void 0 ? void 0 : record.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
return expanded ? ( /*#__PURE__*/React.createElement(CaretDownOutlined, {
onClick: function onClick(e) {
e === null || e === void 0 ? void 0 : e.stopPropagation();
onExpand(record, e);
},
className: "".concat(cssPrefixCls, "-expandIcon")
})) : ( /*#__PURE__*/React.createElement(CaretRightOutlined, {
onClick: function onClick(e) {
e === null || e === void 0 ? void 0 : e.stopPropagation();
onExpand(record, e);
},
className: "".concat(cssPrefixCls, "-expandIcon")
}));
}
return null;
}
} : {}
}), allowEdit && ( /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(cssPrefixCls, "-addBtn"),
onClick: function onClick() {
return handleAdd();
}
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlusOutlined, {
style: {
paddingRight: 4
}
}), "\u6DFB\u52A0\u53C2\u6570")))));
};
export default KVTable;