fastlion-amis
Version:
一种MIS页面生成工具
990 lines (989 loc) • 52.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormTableRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var Item_1 = require("./Item");
var Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button"));
var helper_1 = require("../../utils/helper");
var api_1 = require("../../utils/api");
var tpl_builtin_1 = require("../../utils/tpl-builtin");
var findIndex_1 = (0, tslib_1.__importDefault)(require("lodash/findIndex"));
var SimpleMap_1 = require("../../utils/SimpleMap");
var icons_1 = require("../../components/icons");
var find_1 = (0, tslib_1.__importDefault)(require("lodash/find"));
var crud_1 = require("../../store/crud");
var cloneDeep_1 = (0, tslib_1.__importDefault)(require("lodash/cloneDeep"));
var immutable_1 = require("immutable");
var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
var FormTable = /** @class */ (function (_super) {
(0, tslib_1.__extends)(FormTable, _super);
function FormTable(props) {
var _this = _super.call(this, props) || this;
_this.entityId = 1;
_this.subForms = {};
_this.rowPrinstine = [];
_this.editting = {};
// Jay
// 为原有的行数据添加isOrigin标识，代表是原有的
var items = Array.isArray(props.value) ? (0, cloneDeep_1.default)(props.value) : [];
// 这是针对于非异步请求的数据
items.forEach(function (item) { return item.isOrigin = true; });
_this.state = {
columns: _this.buildColumns(props),
editIndex: -1,
// items: Array.isArray(props.value) ? props.value.concat() : [],
items: items,
operationType: undefined,
insertItems: [],
updateItems: [],
deleteItems: [],
hasClickedToolbar: false,
editStatus: false
};
_this.entries = new SimpleMap_1.SimpleMap();
_this.buildItemProps = _this.buildItemProps.bind(_this);
_this.confirmEdit = _this.confirmEdit.bind(_this);
_this.cancelEdit = _this.cancelEdit.bind(_this);
_this.handleSaveTableOrder = _this.handleSaveTableOrder.bind(_this);
_this.handleTableSave = _this.handleTableSave.bind(_this);
_this.getEntryId = _this.getEntryId.bind(_this);
_this.subFormRef = _this.subFormRef.bind(_this);
_this.handlePageChange = _this.handlePageChange.bind(_this);
_this.emitValue = _this.emitValue.bind(_this);
// Jay
_this.startEdit = _this.startEdit.bind(_this);
_this.handleInputChange = _this.handleInputChange.bind(_this);
_this.handleStoreChange = (0, debounce_1.default)(_this.handleStoreChange.bind(_this), 600);
_this.renderHeaderToolbar = _this.renderHeaderToolbar.bind(_this);
_this.renderFooterToolbar = _this.renderFooterToolbar.bind(_this);
_this.editing = false;
// Aug
_this.handleTableBatchEdit = _this.handleTableBatchEdit.bind(_this);
_this.handleAction = _this.handleAction.bind(_this);
_this.startRowEdit = _this.startRowEdit.bind(_this);
_this.removeItem = _this.removeItem.bind(_this);
return _this;
}
// Jay
// DidMount时没有增删改，对form组件的store.inputTableData[name]赋值为空对象
FormTable.prototype.componentDidMount = function () {
this.emitValue();
};
FormTable.prototype.componentDidUpdate = function (prevProps, prevState) {
var _a, _b, _c;
var props = this.props;
var toUpdate = null;
if (props.columns !== prevProps.columns) {
toUpdate = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, toUpdate), { columns: this.buildColumns(props) });
}
if (props.value !== prevProps.value) {
// Jay
// 为原有的行数据添加isOrigin标识，代表是原有的
// ...this.state.items是为了保留之前的数据
// 因为有这种情况出现，通过form的target传过来的数据会把之前value覆盖掉（例如form.target + picker回显），导致input-table之前的值丢失
// new Set去重sdk会出错
// 通过autoFill填充的数据直接覆盖之前的数据
// 通过顶部工具栏添加的数据也是需要保留之前的数据
// props.updateType === 'reload' 当数据来源为reload，直接覆盖之前的数据
var temp = Array.isArray(props.value) ? this.props.autoFillObj[this.props.name] || props.updateType === 'reload' ? props.value : (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (!this.editing ? this.state.items : this.items), true), props.value.slice(this.state.items.length), true) : [];
this.editing && (this.editing = false);
// 这行是针对于异步请求获取的value
// !this.state.hasClickedToolbar是指不是通过点击工具栏（picker）等动作获取数据
// autoFillObj：wrapControl传过来的props，Options.tsx syncAutoFill方法: 只有点击具有autoFill的表单项，才会保存autoFill对象到store.autoFillObj
var isOrigin_1 = (((_a = prevProps.value) === null || _a === void 0 ? void 0 : _a.length) === 0 || !prevProps.value) && !this.state.hasClickedToolbar && !this.props.autoFillObj[this.props.name];
var items = (0, immutable_1.List)(temp);
items.forEach(function (item) {
if (isOrigin_1) {
item.isOrigin = true;
}
});
toUpdate = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, toUpdate), { items: items.toJSON().filter(function (iobj) { return !!iobj; }), editIndex: -1, raw: undefined });
// Jay 重置store.autoFillObj，若不重置，则this.props.autoFillObj[this.props.name]就有可能一直为true，就无法判断是否是autoFill回传的数据
if (this.props.autoFillObj[this.props.name]) {
(_b = this.props.store) === null || _b === void 0 ? void 0 : _b.setAutoFillObj({});
}
// Aug 重置store.updateType
if (props.updateType === 'reload') {
(_c = props.store) === null || _c === void 0 ? void 0 : _c.setUpdateType();
}
}
toUpdate && this.setState(toUpdate, this.handleInputChange);
};
FormTable.prototype.componentWillUnmount = function () {
this.entries.dispose();
};
FormTable.prototype.subFormRef = function (form, x, y) {
this.subForms[x + "-" + y] = form;
};
FormTable.prototype.startRowEdit = function (val) {
if (val === void 0) { val = true; }
this.setState({ editStatus: val });
};
FormTable.prototype.validate = function () {
return (0, tslib_1.__awaiter)(this, void 0, Promise, function () {
var _a, value, minLength, maxLength, __, columns, subForms_1, results, msg, uniqueColumn_1;
var _this = this;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.props, value = _a.value, minLength = _a.minLength, maxLength = _a.maxLength, __ = _a.translate, columns = _a.columns;
// todo: 如果当前正在编辑中，表单提交了，应该先让正在编辑的东西提交然后再做验证。
if (~this.state.editIndex) {
return [2 /*return*/, __('Table.editing')];
}
if (!(minLength && (!Array.isArray(value) || value.length < minLength))) return [3 /*break*/, 1];
return [2 /*return*/, __('Combo.minLength', { minLength: minLength })];
case 1:
if (!(maxLength && Array.isArray(value) && value.length > maxLength)) return [3 /*break*/, 2];
return [2 /*return*/, __('Combo.maxLength', { maxLength: maxLength })];
case 2:
subForms_1 = [];
Object.keys(this.subForms).forEach(function (key) { return _this.subForms[key] && subForms_1.push(_this.subForms[key]); });
if (!subForms_1.length) return [3 /*break*/, 4];
return [4 /*yield*/, Promise.all(subForms_1.map(function (item) { return item.validate(); }))];
case 3:
results = _b.sent();
msg = ~results.indexOf(false) ? __('Form.validateFailed') : '';
uniqueColumn_1 = '';
if (!msg &&
Array.isArray(columns) &&
Array.isArray(value) &&
columns.some(function (item) {
if (item.unique && item.name) {
var exists_1 = [];
return value.some(function (obj) {
var value = (0, helper_1.getVariable)(obj, item.name);
if (~exists_1.indexOf(value)) {
uniqueColumn_1 = "" + (item.label || item.name);
return true;
}
exists_1.push(value);
return false;
});
}
return false;
})) {
msg = __('InputTable.uniqueError', {
label: uniqueColumn_1
});
}
return [2 /*return*/, msg];
case 4: return [2 /*return*/];
}
});
});
};
FormTable.prototype.emitValue = function () {
var items = (this.state.items).filter(function (item) { return !item.__isPlaceholder; });
var onChange = this.props.onChange;
onChange === null || onChange === void 0 ? void 0 : onChange(items);
// Jay
this.handleInputChange();
};
FormTable.prototype.doAction = function (action, ctx) {
var rest = [];
for (var _i = 2; _i < arguments.length; _i++) {
rest[_i - 2] = arguments[_i];
}
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _a, onAction, valueField, env, onChange, editable, needConfirm, addable, addApi, __, items_1, toAdd_1, payload, items_2, toRemove;
var _this = this;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.props, onAction = _a.onAction, valueField = _a.valueField, env = _a.env, onChange = _a.onChange, editable = _a.editable, needConfirm = _a.needConfirm, addable = _a.addable, addApi = _a.addApi, __ = _a.translate;
if (!(action.actionType === 'add')) return [3 /*break*/, 6];
if (addable === false) {
return [2 /*return*/];
}
items_1 = this.state.items.concat();
if (!(addApi || action.payload)) return [3 /*break*/, 4];
toAdd_1 = null;
if (!(0, api_1.isEffectiveApi)(addApi, ctx)) return [3 /*break*/, 2];
return [4 /*yield*/, env.fetcher(addApi, ctx)];
case 1:
payload = _b.sent();
if (payload && !payload.ok) {
env.notify('error', payload.msg || __('fetchFailed'));
return [2 /*return*/];
}
else if (payload && payload.ok) {
toAdd_1 = payload.data;
}
return [3 /*break*/, 3];
case 2:
toAdd_1 = (0, tpl_builtin_1.dataMapping)(action.payload, ctx);
_b.label = 3;
case 3:
toAdd_1 = Array.isArray(toAdd_1) ? toAdd_1 : [toAdd_1];
toAdd_1.forEach(function (toAdd) {
if (!valueField ||
!(0, find_1.default)(items_1, function (item) { return item[valueField] == toAdd[valueField]; })) {
// 不要重复加入
items_1.push(toAdd);
}
});
this.setState({
items: items_1
}, function () {
_this.emitValue();
if (toAdd_1.length === 1 && needConfirm !== false) {
_this.startEdit(items_1.length - 1, true);
}
});
return [2 /*return*/];
case 4: return [2 /*return*/, this.addItem(items_1.length - 1)];
case 5: return [3 /*break*/, 7];
case 6:
if (action.actionType === 'remove' ||
action.actionType === 'delete') {
if (!valueField) {
return [2 /*return*/, env.alert(__('Table.valueField'))];
}
else if (!action.payload) {
return [2 /*return*/, env.alert(__('Table.playload'))];
}
items_2 = this.state.items.concat();
toRemove = (0, tpl_builtin_1.dataMapping)(action.payload, ctx);
toRemove = Array.isArray(toRemove) ? toRemove : [toRemove];
toRemove.forEach(function (toRemove) {
var idx = (0, findIndex_1.default)(items_2, function (item) { return item[valueField] == toRemove[valueField]; });
if (~idx) {
items_2.splice(idx, 1);
}
});
this.setState({
items: items_2
}, function () { return _this.emitValue(); });
// todo 如果配置删除 Api 怎么办？
return [2 /*return*/];
}
_b.label = 7;
case 7: return [2 /*return*/, onAction && onAction.apply(void 0, (0, tslib_1.__spreadArray)([action, ctx], rest, false))];
}
});
});
};
FormTable.prototype.copyItem = function (index) {
var _this = this;
var needConfirm = this.props.needConfirm;
var items = this.editing ? this.items : this.state.items.concat(); // Jay
// Jay
var item = items[index];
if (item.isOrigin) {
item = (0, cloneDeep_1.default)(items[index]);
delete item.isOrigin;
}
// items.splice(index + 1, 0, items[index]);
items.splice(index + 1, 0, item);
index = Math.min(index + 1, items.length - 1);
this.setState({
items: items
}, function () {
if (needConfirm === false) {
_this.emitValue();
}
else {
_this.startEdit(index, true);
}
});
};
// Jay 整理insert、update、delete数据结构
FormTable.prototype.arrangeData = function (temp) {
var deleteItems = this.state.deleteItems;
var items = temp || this.state.items;
var data = {};
var insertItems = items.filter(function (item) { return !item.isOrigin || item.isAdd; });
var updateItems = items.filter(function (item) { return item.isOrigin && item.isUpdate; });
if (insertItems.length !== 0) {
data.insert = (0, cloneDeep_1.default)(insertItems).map(function (item) {
item.isAdd && delete item.isAdd;
item.isUpdate && delete item.isUpdate;
// 对主从表的ids、items、selectedItems做兼容处理，如果还有问题就去处理主从表 LionTable.tsx renderToolBars
item.items && delete item.items;
item.selectedItems && delete item.selectedItems;
item.ids && delete item.ids;
return item;
});
}
if (updateItems.length !== 0) {
data.update = (0, cloneDeep_1.default)(updateItems).map(function (item) {
delete item.isOrigin;
delete item.isUpdate;
item.items && delete item.items;
item.selectedItems && delete item.selectedItems;
item.ids && delete item.ids;
return item;
});
}
if (deleteItems.length !== 0) {
data.delete = (0, cloneDeep_1.default)(deleteItems).map(function (item) {
delete item.isOrigin;
item.isUpdate && delete item.isUpdate;
item.items && delete item.items;
item.selectedItems && delete item.selectedItems;
item.ids && delete item.ids;
return item;
});
}
return data;
};
FormTable.prototype.addItem = function (index) {
var _this = this;
var _a = this.props, needConfirm = _a.needConfirm, scaffold = _a.scaffold, columns = _a.columns;
var items = this.editing ? this.items : this.state.items.concat(); // Jay
var value = {
__isPlaceholder: true
};
if (Array.isArray(columns)) {
columns.forEach(function (column) {
if (typeof column.value !== 'undefined' &&
typeof column.name === 'string') {
(0, helper_1.setVariable)(value, column.name, column.value);
}
// Jay
// 新建行时每列的值为null
else if (typeof column.name === 'string') {
value[column.name] = null;
}
});
}
value = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, value), scaffold);
if (needConfirm === false) {
delete value.__isPlaceholder;
}
items.splice(index + 1, 0, value);
index = Math.min(index + 1, items.length - 1);
this.setState({
items: items,
hasClickedToolbar: true,
editStatus: true
}, function () {
if (needConfirm === false) {
// this.emitValue();
// Aug 修复新增时table数据域没有更新的问题
_this.handleInputChange(items);
_this.handleStoreChange(items);
}
else {
_this.startEdit(index, true);
}
});
};
FormTable.prototype.startEdit = function (index, isCreate) {
if (isCreate === void 0) { isCreate = false; }
this.setState({
editIndex: index,
isCreateMode: isCreate,
raw: (this.editing ? this.items : this.state.items)[index],
columns: this.buildColumns(this.props, isCreate)
});
};
FormTable.prototype.confirmEdit = function () {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _a, addApi, updateApi, data, env, __, subForms, items, item, isNew, remote, ctx, operationType;
var _this = this;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.props, addApi = _a.addApi, updateApi = _a.updateApi, data = _a.data, env = _a.env, __ = _a.translate;
subForms = [];
Object.keys(this.subForms).forEach(function (key) { return _this.subForms[key] && subForms.push(_this.subForms[key]); });
subForms.forEach(function (form) { return form.flush(); });
items = this.state.items.concat();
item = (0, tslib_1.__assign)({}, items[this.state.editIndex]);
isNew = item.__isPlaceholder;
remote = null;
ctx = (0, helper_1.createObject)(data, item);
delete ctx.__isPlaceholder;
if (!(isNew && (0, api_1.isEffectiveApi)(addApi, (0, helper_1.createObject)(data, item)))) return [3 /*break*/, 2];
return [4 /*yield*/, env.fetcher(addApi, {
insert: [(0, tslib_1.__assign)({}, ctx)]
})];
case 1:
// remote = await env.fetcher(addApi, createObject(data, item));
remote = _b.sent();
return [3 /*break*/, 4];
case 2:
if (!(0, api_1.isEffectiveApi)(updateApi, (0, helper_1.createObject)(data, item))) return [3 /*break*/, 4];
return [4 /*yield*/, env.fetcher(updateApi, {
update: [(0, tslib_1.__assign)({}, ctx)]
})];
case 3:
// remote = await env.fetcher(updateApi, createObject(data, item));
remote = _b.sent();
_b.label = 4;
case 4:
if (remote && !remote.ok) {
env.notify('error', remote.msg || __('saveFailed'));
return [2 /*return*/];
}
else if (remote && remote.ok) {
item = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, ((isNew ? addApi : updateApi).replaceData
? {}
: item)), remote.data);
}
delete item.__isPlaceholder;
operationType = this.state.operationType;
if (operationType === 'add') {
if (!item.isOrigin) {
this.setState({
insertItems: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], this.state.insertItems, true), [item], false)
}, this.handleInputChange);
}
}
else if (operationType === 'edit') {
// 未提交表单前编辑新增行不计入updateItems
if (item.isOrigin) {
item.isUpdate = true;
this.setState({
updateItems: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], this.state.updateItems, true), [item], false)
}, this.handleInputChange);
}
else {
// 如果编辑的是新增行，则替换掉insertItems中对应的元素
this.setState({
insertItems: this.state.items.filter(function (item) { return !item.isOrigin; })
}, this.handleInputChange);
}
}
items.splice(this.state.editIndex, 1, item);
this.setState({
editIndex: -1,
items: items,
raw: undefined
}, this.emitValue);
return [2 /*return*/];
}
});
});
};
FormTable.prototype.cancelEdit = function () {
var items = this.state.items.concat();
if (this.state.isCreateMode) {
items = items.filter(function (item) { return !item.__isPlaceholder; });
}
else if (this.state.raw) {
items.splice(this.state.editIndex, 1, this.state.raw);
}
this.setState({
editIndex: -1,
raw: undefined,
items: items
}, this.emitValue);
};
FormTable.prototype.removeItem = function (index) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _a, value, onChange, deleteApi, deleteConfirmText, env, data, __, newValue, item, ctx, result, updateItems;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.props, value = _a.value, onChange = _a.onChange, deleteApi = _a.deleteApi, deleteConfirmText = _a.deleteConfirmText, env = _a.env, data = _a.data, __ = _a.translate;
newValue = Array.isArray(this.state.items) ? this.editing ? this.items : this.state.items : [];
item = newValue[index];
if (!item) {
return [2 /*return*/];
}
ctx = (0, helper_1.createObject)(data, item);
if (!(0, api_1.isEffectiveApi)(deleteApi, ctx)) return [3 /*break*/, 2];
// 提交数据的结构改成和运行平台的增删改
// const result = await env.fetcher(deleteApi, ctx);
ctx.isOrigin && delete ctx.isOrigin;
ctx.isUpdate && delete ctx.isUpdate;
return [4 /*yield*/, env.fetcher(deleteApi, {
delete: [(0, tslib_1.__assign)({}, ctx)]
})];
case 1:
result = _b.sent();
if (!result.ok) {
env.notify('error', __('deleteFailed'));
return [2 /*return*/];
}
_b.label = 2;
case 2:
this.removeEntry(item);
newValue.splice(index, 1);
// onChange(newValue)
// Jay
// 这样是让componentDidUpdate中的this.state.items始终是最新值
// this.setState({
// items: newValue
// }, () => {
// onChange(newValue)
// })
// Aug 修复删除时table数据域没有更新的问题
this.handleInputChange(newValue);
this.handleStoreChange(newValue);
// Jay
if (this.state.operationType === 'delete') {
// 未提交表单前删除新增行不计入deleteItems
// 若编辑过原有的行，然后再删除该行则不计入updateItems
if (item.isOrigin) {
updateItems = newValue.filter(function (item) { return item.isOrigin && item.isUpdate; });
this.setState({
updateItems: updateItems,
deleteItems: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], this.state.deleteItems, true), [item], false)
}
// Aug 上面已经有了这里就不用了吧
// , this.handleInputChange
);
}
else {
// 未提交表单前删除新增行，要把insertItems的item删除掉
this.setState({
insertItems: newValue.filter(function (item) { return !item.isOrigin; })
}
// Aug 上面已经有了这里就不用了吧
// , this.handleInputChange
);
}
}
return [2 /*return*/];
}
});
});
};
FormTable.prototype.buildItemProps = function (item, index) {
if (this.props.needConfirm === false) {
return {
quickEditEnabled: true
};
}
else if (!this.props.editable &&
!this.props.addable &&
!this.state.isCreateMode) {
return null;
}
var perPage = this.props.perPage;
var page = this.state.page || 1;
var offset = 0;
if (typeof perPage === 'number' && perPage) {
offset = (page - 1) * perPage;
}
return {
quickEditEnabled: this.state.editIndex === index + offset
};
};
FormTable.prototype.buildColumns = function (props, isCreateMode) {
if (isCreateMode === void 0) { isCreateMode = false; }
var columns = Array.isArray(props.columns)
? props.columns.concat()
: [];
var operation = {
type: 'operation',
label: '',
className: 'v-middle nowrap',
fixed: 'right',
width: '1%',
innerClassName: 'm-n'
};
columns.push(operation);
return columns;
};
FormTable.prototype.columnToQuickEdit = function (column) {
var quickEdit = {
type: 'input-text'
};
if ((column.type &&
/^input\-|(?:select|picker|checkbox|checkboxes|editor|transfer|radios)$/i.test(column.type)) ||
~['textarea', 'combo', 'condition-builder', 'group'].indexOf(column.type)) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column), { label: '' });
}
return quickEdit;
};
// Jay
// input-table增删改的回调
FormTable.prototype.handleInputChange = function (items) {
// onInputTableChange是form(index.tsx)的handleInputTableChange方法
// onInputTableChange是form(index.tsx)->wrapControl->wrapControl包裹的组件(如input-table)的props
var _a = this.props, onInputTableChange = _a.onInputTableChange, name = _a.name;
onInputTableChange === null || onInputTableChange === void 0 ? void 0 : onInputTableChange(this.arrangeData(items), name);
};
FormTable.prototype.handleStoreChange = function (items) {
var _a;
(_a = this.props.formStore) === null || _a === void 0 ? void 0 : _a.changeValue(this.props.name, items);
};
FormTable.prototype.handleTableSave = function (rows, diff, rowIndexes) {
var _a, _b;
var perPage = this.props.perPage;
if (~this.state.editIndex) {
var items_3 = this.editing ? this.items : this.state.items.concat(); // Jay
var origin = items_3[this.state.editIndex];
if (!origin) {
return;
}
var value = (0, tslib_1.__assign)({}, rows);
this.entries.set(value, this.entries.get(origin) || this.entityId++);
this.entries.delete(origin);
items_3.splice(this.state.editIndex, 1, value);
this.setState({
items: items_3
});
return;
}
var page = this.state.page;
var items = this.editing ? this.items : this.state.items.concat(); // Jay
if (Array.isArray(rows)) {
rowIndexes.forEach(function (rowIndex, index) {
var indexes = rowIndex.split('.').map(function (item) { return parseInt(item, 10); });
if (page && page > 1 && typeof perPage === 'number') {
indexes[0] += (page - 1) * perPage;
}
var origin = (0, helper_1.getTree)(items, indexes);
var data = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, origin), diff[index]);
items = (0, helper_1.spliceTree)(items, indexes, 1, data);
});
}
else {
var indexes = rowIndexes
.split('.')
.map(function (item) { return parseInt(item, 10); });
if (page && page > 1 && typeof perPage === 'number') {
indexes[0] += (page - 1) * perPage;
}
var origin = (0, helper_1.getTree)(items, indexes);
var data = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, origin), diff);
// Jay
// needConfirm为false的情况下，编辑原有行添加isUpdate的标识
if (data.isOrigin && !data.isAdd) {
data.isUpdate = true;
}
items = (0, helper_1.spliceTree)(items, indexes, 1, data);
this.entries.set(data, this.entries.get(origin) || this.entityId++);
// this.entries.delete(origin); // 反正最后都会清理的，先不删了吧。
}
// Jay 优化编辑时的性能
(_b = (_a = this.props).setEdited) === null || _b === void 0 ? void 0 : _b.call(_a);
this.editing = true;
this.items = items;
this.handleInputChange(items);
this.handleStoreChange(items);
// this.setState(
// {
// items
// },
// () => {
// this.emitValue()
// // 不改变store.data里的数据了，反正最后都是提交inputTableData里的数据
// // 数据太多时更新会很卡，可以进行分页，将perPage调小
// // this.props.formStore?.changeValue(this.props.name, items)
// // this.handleInputChange()
// }
// );
};
//Aug input-table批量修改
FormTable.prototype.handleTableBatchEdit = function (values) {
var _this = this;
this.state.items.forEach(function (item, index) {
_this.handleTableSave(item, values, index + '');
});
};
FormTable.prototype.handleSaveTableOrder = function (moved, rows) {
var onChange = this.props.onChange;
onChange(rows.map(function (item) { return ((0, tslib_1.__assign)({}, item)); }));
};
FormTable.prototype.handlePageChange = function (page) {
this.setState({ page: page });
};
FormTable.prototype.removeEntry = function (entry) {
if (this.entries.has(entry)) {
this.entries.delete(entry);
}
};
FormTable.prototype.getEntryId = function (entry) {
if (!this.entries.has(entry)) {
this.entries.set(entry, this.entityId++);
}
return String(this.entries.get(entry));
};
// Jay
// 以下是CRUD.tsx组件渲染工具栏的逻辑
FormTable.prototype.renderStatistics = function () {
var _a = this.props, store = _a.store, cx = _a.classnames, __ = _a.translate, alwaysShowPagination = _a.alwaysShowPagination;
if (store.lastPage <= 1 && !alwaysShowPagination) {
return null;
}
return (react_1.default.createElement("div", { className: cx('Crud-statistics') }, __('CRUD.stat', {
page: store.page,
lastPage: store.lastPage,
total: store.total
})));
};
FormTable.prototype.renderFilterToggler = function () {
var _a = this.props, store = _a.store, cx = _a.classnames, __ = _a.translate;
if (!store.filterTogggable) {
return null;
}
return (react_1.default.createElement("button", { onClick: function () { return store.setFilterVisible(!store.filterVisible); }, className: cx('Button Button--sm Button--default', {
'is-active': store.filterVisible
}) },
react_1.default.createElement(icons_1.Icon, { icon: "filter", className: "icon m-r-xs" }),
__('CRUD.filter')));
};
FormTable.prototype.renderExportCSV = function () {
var _a = this.props, store = _a.store, ns = _a.classPrefix, cx = _a.classnames, __ = _a.translate, loadDataOnce = _a.loadDataOnce, api = _a.api;
return (react_1.default.createElement(Button_1.default, { classPrefix: ns, onClick: function () {
return store.exportAsCSV({
loadDataOnce: loadDataOnce,
api: api
});
}, size: "sm" }, __('CRUD.exportCSV')));
};
FormTable.prototype.renderToolbar = function (toolbar, index, childProps, toolbarRenderer) {
var _this = this;
if (index === void 0) { index = 0; }
if (childProps === void 0) { childProps = {}; }
if (!toolbar) {
return null;
}
var type = toolbar.type || toolbar;
if (type === 'bulkActions' || type === 'bulk-actions') {
}
else if (type === 'filter-toggler') {
return this.renderFilterToggler();
}
else if (type === 'export-csv') {
return this.renderExportCSV();
}
else if (Array.isArray(toolbar)) {
var children = toolbar
.map(function (toolbar, index) { return ({
dom: _this.renderToolbar(toolbar, index, childProps, toolbarRenderer),
toolbar: toolbar
}); })
.filter(function (item) { return item.dom; });
var len = children.length;
var cx_1 = this.props.classnames;
if (len) {
return (react_1.default.createElement("div", { className: cx_1('Crud-toolbar'), key: index }, children.map(function (_a, index) {
var toolbar = _a.toolbar, child = _a.dom;
var type = toolbar.type || toolbar;
var align = toolbar.align || (type === 'pagination' ? 'right' : 'left');
return (react_1.default.createElement("div", { key: index, className: cx_1('Crud-toolbar-item', align ? "Crud-toolbar-item--" + align : '', toolbar.className), onClick: function () {
if (!_this.state.hasClickedToolbar) {
_this.setState({ hasClickedToolbar: true });
}
} }, child));
})));
}
return null;
}
var result = toolbarRenderer
? toolbarRenderer(toolbar, index)
: undefined;
if (result !== void 0) {
return result;
}
var _a = this.props, render = _a.render, store = _a.store;
var $$editable = childProps.$$editable;
// Jay
// actionType为dialog和ajax时 不传 handleAction，依然可以生效
var toolbarProps = {};
if (toolbar.actionType === "export") {
toolbarProps.onAction = this.handleAction;
}
return render("toolbar/" + index, toolbar, (0, tslib_1.__assign)((0, tslib_1.__assign)({
// 包两层，主要是为了处理以下 case
// 里面放了个 form，form 提交过来的时候不希望把 items 这些发送过来。
// 因为会把数据呈现在地址栏上。
data: (0, helper_1.createObject)((0, helper_1.createObject)(store.filterData, {
items: childProps.items,
selectedItems: childProps.selectedItems,
unSelectedItems: childProps.unSelectedItems
}), {}) }, toolbarProps), { $$editable: $$editable }));
};
FormTable.prototype.renderHeaderToolbar = function (childProps, toolbarRenderer) {
var _a = this.props, toolbar = _a.toolbar, toolbarInline = _a.toolbarInline, headerToolbar = _a.headerToolbar;
if (toolbar) {
if (Array.isArray(headerToolbar)) {
headerToolbar = toolbarInline
? headerToolbar.concat(toolbar)
: [headerToolbar, toolbar];
}
else if (headerToolbar) {
headerToolbar = [headerToolbar, toolbar];
}
else {
headerToolbar = toolbar;
}
}
return this.renderToolbar(headerToolbar || [], 0, childProps, toolbarRenderer);
};
FormTable.prototype.renderFooterToolbar = function (childProps, toolbarRenderer) {
var _a = this.props, toolbar = _a.toolbar, toolbarInline = _a.toolbarInline, footerToolbar = _a.footerToolbar;
if (toolbar) {
if (Array.isArray(footerToolbar)) {
footerToolbar = toolbarInline
? footerToolbar.concat(toolbar)
: [footerToolbar, toolbar];
}
else if (footerToolbar) {
footerToolbar = [footerToolbar, toolbar];
}
else {
footerToolbar = toolbar;
}
}
return this.renderToolbar(footerToolbar, 0, childProps, toolbarRenderer);
};
// actionType为dialog和ajax时 不传 handleAction，依然可以生效
// handleAction 暂时仅支持export
FormTable.prototype.handleAction = function (e, action, ctx, throwErrors, delegate) {
var _this = this;
var _a, _b, _c, _d, _e, _f;
if (throwErrors === void 0) { throwErrors = false; }
var _g = this.props, onAction = _g.onAction, store = _g.store, messages = _g.messages, pickerMode = _g.pickerMode, env = _g.env, pageField = _g.pageField, stopAutoRefreshWhenModalIsOpen = _g.stopAutoRefreshWhenModalIsOpen;
if (action.actionType === 'dialog') {
// store.setCurrentAction(action);
// const idx: number = (ctx as any).index;
// const length = store.items.length;
// stopAutoRefreshWhenModalIsOpen && clearTimeout(this.timer);
// store.openDialog(ctx, {
// hasNext: idx < length - 1,
// nextIndex: idx + 1,
// hasPrev: idx > 0,
// prevIndex: idx - 1,
// index: idx
// });
}
// else if (action.actionType === 'ajax') {
// store.setCurrentAction(action);
// const data = ctx;
// // 由于 ajax 一段时间后再弹出，肯定被浏览器给阻止掉的，所以提前弹。
// const redirect = action.redirect && filter(action.redirect, data);
// redirect && action.blank && env.jumpTo(redirect, action);
// return store
// .saveRemote(action.api!, data, {
// successMessage:
// (action.messages && action.messages.success) ||
// (messages && messages.saveSuccess),
// errorMessage:
// (action.messages && action.messages.failed) ||
// (messages && messages.saveFailed)
// })
// .then(async (payload: object) => {
// const data = createObject(ctx, payload);
// if (action.feedback && isVisible(action.feedback, data)) {
// await this.openFeedback(action.feedback, data);
// stopAutoRefreshWhenModalIsOpen && clearTimeout(this.timer);
// }
// const redirect = action.redirect && filter(action.redirect, data);
// redirect && !action.blank && env.jumpTo(redirect, action);
// action.reload
// ? this.reloadTarget(action.reload, data)
// : redirect
// ? null
// : this.search(undefined, undefined, true, true);
// action.close && this.closeTarget(action.close);
// })
// .catch(() => { });
// }
else if (pickerMode &&
(action.actionType === 'confirm' || action.actionType === 'submit')) {
store.setCurrentAction(action);
return Promise.resolve({
items: store.selectedItems.concat()
});
}
// else if (action.actionType === 'label-design') {
// templateDesign(ctx, env.fetcher, action.api, this.search, env.getModalContainer)
// }
else if (action.actionType === 'export') {
store.setCurrentAction(action);
var exportData = {};
var _ids_1 = '';
var _selectedItems = (_c = (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.selectedItems) === null || _c === void 0 ? void 0 : _c.toJSON();
_selectedItems.map(function (_select) {
_ids_1 += _select.hasOwnProperty(_this.props.primaryField) ? _select[_this.props.primaryField] + ',' : '';
});
exportData = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, exportData), (_e = (_d = this.props) === null || _d === void 0 ? void 0 : _d.store) === null || _e === void 0 ? void 0 : _e.query), (_f = this.props) === null || _f === void 0 ? void 0 : _f.storeData);
exportData.selectedItems = _selectedItems;
exportData.primaryField = this.props.primaryField;
exportData.ids = ((action === null || action === void 0 ? void 0 : action.exportType) === 2 ? ctx[this.props.primaryField] : _ids_1.slice(0, _ids_1.length - 1));
store.openLionExport(exportData, env, true);
return false;
}
else {
onAction(e, action, ctx, throwErrors, delegate || this.context);
}
};
// Jay end
FormTable.prototype.render = function () {
var _this = this;
var _a;
var _b = this.props, className = _b.className, value = _b.value, showAddBtn = _b.showAddBtn, disabled = _b.disabled, render = _b.render, placeholder = _b.placeholder, draggable = _b.draggable, addable = _b.addable, columnsTogglable = _b.columnsTogglable, combineNum = _b.combineNum, combineFromIndex = _b.combineFromIndex, __ = _b.translate, canAccessSuperData = _b.canAccessSuperData, expandConfig = _b.expandConfig, affixRow = _b.affixRow, prefixRow = _b.prefixRow, formInited = _b.formInited, perPage = _b.perPage, cx = _b.classnames, label = _b.label;
var editStatus = this.state.editStatus;
if (formInited === false) {
return null;
}
var items = this.state.items;
var showPager = false;
var page = this.state.page || 1;
var offset = 0;
var lastPage = 1;
if (typeof perPage === 'number' && perPage && items.length > perPage) {
lastPage = Math.ceil(items.length / perPage);
items = items.slice((page - 1) * perPage, page * perPage);
showPager = true;
offset = (page - 1) * perPage;
}
return (react_1.default.createElement("div", { className: cx('InputTable', className) },
render('body', {
type: 'mobile-table-horizontal',
placeholder: __(placeholder),
columns: this.state.columns,
affixHeader: false,
prefixRow: prefixRow,
affixRow: affixRow,
autoFillHeight: (_a = this.props.autoFillHeight) !== null && _a !== void 0 ? _a : true
}, {
value: undefined,
saveImmediately: true,
disabled: disabled,
draggable: draggable && !~this.state.editIndex,
items: items,
getEntryId: this.getEntryId,
onSave: this.handleTableSave,
onSaveOrder: this.handleSaveTableOrder,
onBatchEdit: this.handleTableBatchEdit,
buildItemProps: this.buildItemProps,
quickEditFormRef: this.subFormRef,
columnsTogglable: columnsTogglable,
combineNum: combineNum,
combineFromIndex: combineFromIndex,
expandConfig: expandConfig,
canAccessSuperData: canAccessSuperData,
reUseRow: false,
offset: offset,
// Jay
itemBadge: this.props.itemBadge,
headerToolbarRender: this.renderHeaderToolbar,
footerToolbarRender: this.renderFooterToolbar,
mobileLayout: this.props.mobileLayout,
editStatus: editStatus,
startRowEdit: this.startRowEdit,
removeItem: function (index) { _this.setState({ operationType: 'delete' }, function () { return _this.removeItem(index); }); },
markoperationType: function (operationType) { return _this.setState({ operationType: operationType }); },
labelName: label,
tableType: 'input-table' //来自input-table不需要分页，把加载更多按钮去掉
}),
(addable && showAddBtn !== false) || showPager ? (react_1.default.createElement("div", { className: cx('InputTable-toolbar') }, addable && showAddBtn !== false ? (react_1.default.createElement("div", { className: 'add-row', onClick: function () { return _this.addItem(_this.state.items.length); } },
react_1.default.createElement("i", { className: "fa fa-plus", style: { fontSize: 18, color: "#ccc" }, "aria-hidden": "true" }))) : null)) : null));
};
FormTable.defaultProps = {
placeholder: '空',
scaffold: {},
addBtnIcon: 'plus',
copyBtnIcon: 'copy',
editBtnIcon: 'pencil',
deleteBtnIcon: 'minus',
confirmBtnIcon: 'check',
cancelBtnIcon: 'close',
valueField: '',
mobileLayout: 'vertical'
};
FormTable.propsList = [
'onChange',
'name',
'columns',