fastlion-amis
Version:
一种MIS页面生成工具
137 lines (136 loc) • 7.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var antd_1 = require("antd");
var react_1 = tslib_1.__importStar(require("react"));
var tableColumns = [
{
title: '标题',
key: 'title',
type: 'text',
width: 100,
options: []
},
{
title: '打印',
key: 'printType',
type: 'select',
width: 40,
options: [
{ label: '是', value: 'all' },
{ label: '否', value: 'none' },
]
},
{
title: '宽度(mm)',
key: 'width',
type: 'input',
width: 60,
options: []
},
// {
// title: '分组',
// key: 'grouping',
// type: 'select',
// width: 80,
// options: [
// { label: '否', value: 'none' },
// { label: '是', value: 'group' },
// { label: '分组并起栏', value: 'column' },
// { label: '分组并起页', value: 'page' }
// ]
// },
{
title: '排序',
key: 'sort',
type: 'select',
width: 40,
options: [
{ label: '否', value: 'none' },
{ label: '升序', value: 'asc' },
{ label: '降序', value: 'desc' }
]
},
{
title: '统计',
key: 'statistic',
type: 'select',
width: 45,
options: [
{ label: '否', value: 'none' },
{ label: '是', value: 'Sum' }
]
}
];
var TableSetting = function (_a) {
var superRole = _a.superRole, tableValues = _a.tableValues, onTableValuesChange = _a.onTableValuesChange;
var _b = (0, react_1.useState)(0), selectedRowKey = _b[0], setSelectedRowKey = _b[1];
var groupName = tableValues[selectedRowKey].groupName;
var handleConfigTableChange = function (rowKey, columnKey, value) {
onTableValuesChange(tableValues.map(function (row, index) {
if (index == rowKey) {
var tempRow = row;
tempRow[columnKey] = value;
return tempRow;
}
return row;
}));
};
var handleMove = function (moveUp) {
var swap = function (rows, currentIndex, targetIndex) {
var currentRow = rows[currentIndex];
rows[currentIndex] = rows[targetIndex];
rows[targetIndex] = currentRow;
};
var tempRows = tableValues.slice();
var currentGroup = tempRows[selectedRowKey].group;
var currentLength = tempRows.filter(function (row) { return row.group == currentGroup; }).length;
var targetGroup = tempRows[selectedRowKey + (moveUp ? -1 : 1)].group;
var targetLength = tempRows.filter(function (row) { return row.group == targetGroup; }).length;
var targetRowKey;
if (currentGroup == targetGroup) {
targetRowKey = selectedRowKey + (moveUp ? -1 : 1);
swap(tempRows, selectedRowKey, targetRowKey);
}
else {
targetRowKey = selectedRowKey + (moveUp ? (-targetLength) : targetLength);
var currentStart = tempRows.findIndex(function (row) { return row.group == currentGroup; });
var currentEnd = tempRows.filter(function (row) { return row.group == currentGroup; }).length + currentStart - 1;
var targetStart = tempRows.findIndex(function (row) { return row.group == targetGroup; });
var targetEnd = tempRows.filter(function (row) { return row.group == targetGroup; }).length + targetStart - 1;
var start = moveUp ? currentStart : targetStart;
var end = moveUp ? currentEnd : targetEnd;
var length = moveUp ? targetLength : currentLength;
for (var i = start; i <= end; i++) {
for (var j = i; i < j + length; j--) {
swap(tempRows, j, j - 1);
}
}
}
onTableValuesChange(tempRows);
setSelectedRowKey(targetRowKey);
};
return (react_1.default.createElement("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' } },
react_1.default.createElement(antd_1.Row, { style: { height: 30 } },
react_1.default.createElement(antd_1.Col, null,
react_1.default.createElement(antd_1.Button, { onClick: function () { return handleMove(true); }, disabled: selectedRowKey == 0 || !superRole, type: "link" }, "\u4E0A\u79FB")),
react_1.default.createElement(antd_1.Col, null,
react_1.default.createElement(antd_1.Button, { onClick: function () { return handleMove(false); }, disabled: selectedRowKey == tableValues.length - 1 || !superRole, type: "link" }, "\u4E0B\u79FB"))),
react_1.default.createElement("div", { style: { flex: 1, marginTop: 8, overflow: 'auto' } },
react_1.default.createElement("table", { id: "report-print-column-config-table", className: "column-config-table", width: 342, cellSpacing: 0 },
react_1.default.createElement("thead", null,
react_1.default.createElement("tr", null, tableColumns.map(function (column) { return (react_1.default.createElement("th", { key: column.key, style: { width: column.width } }, column.title)); }))),
react_1.default.createElement("tbody", null, tableValues.map(function (row, index) { return (react_1.default.createElement("tr", { key: index }, tableColumns.map(function (column) {
var value = row[column.key];
var isSelectedCell = column.key == 'title' && index == selectedRowKey;
var isGroupCell = column.key == 'title' && (groupName ? groupName === row.groupName : index == selectedRowKey);
return (react_1.default.createElement("td", { key: column.key, title: column.key == 'title' ? value : undefined, onClick: column.key == 'title' ? function () { return setSelectedRowKey(index); } : undefined, style: { backgroundColor: isGroupCell ? '#3574ee' : isSelectedCell ? 'black' : undefined, color: isSelectedCell ? 'white' : undefined } },
column.type == 'text' && react_1.default.createElement(react_1.default.Fragment, null, value),
column.type == 'select' &&
react_1.default.createElement(antd_1.Select, { disabled: !superRole, size: 'small', showArrow: false, value: value, getPopupContainer: function () { return document.getElementById('report-print-column-config-table'); }, dropdownClassName: 'column-config-table-select-dropdown', onChange: function (value) { return handleConfigTableChange(index, column.key, value); } }, column.options.map(function (option, index) { return (react_1.default.createElement(antd_1.Select.Option, { key: index, value: option.value }, option.label)); })),
column.type == 'input' &&
react_1.default.createElement(antd_1.InputNumber, { style: { width: '100%', border: 'none' }, disabled: !superRole, size: "small", controls: false, value: value, min: 0, max: 200, onChange: function (value) { return handleConfigTableChange(index, column.key, value); } })));
}))); }))))));
};
exports.default = TableSetting;
//# sourceMappingURL=./renderers/Lion/LabelPrint/components/report/TableSetting.js.map