@bos-alpha/data
Version:
数据管理
84 lines (83 loc) • 8.18 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Row, Col, Input } from 'antd';
import styled from '@emotion/styled';
export var PageGenerator = function (_a) {
var value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange;
var _c = useState([
{
type: '输入参数',
name: 'pageNumber',
desc: '页码',
setLabel: 'pageNumber'
},
{
type: '输入参数',
name: 'pageSize',
desc: '每页对象个数',
setLabel: '值'
},
{
type: '输出参数',
name: 'total',
desc: '全部对象总数',
setLabel: '路径'
},
{
type: '输出参数',
name: 'actualPageSize',
desc: '实际返回的对象个数',
setLabel: '路径'
}
]), list = _c[0], setList = _c[1];
var _d = useState({}), values = _d[0], setValues = _d[1];
console.log('value===', value);
// 将Form.Item设置的json转为数组
useEffect(function () {
// let valObj = {};
// if (value && typeof value === 'object') {
// valObj = value;
// } else if (value && typeof value === 'string') {
// try {
// valObj = JSON.parse(value);
// } catch (err) {}
// }
// if (Object.keys(valObj).length === 0) {
// return;
// }
setValues(__assign({}, value));
}, [value]); // eslint-disable-line
var onInput = function (e, index, key) {
var _a, _b;
var item = list[index];
var newValue = __assign(__assign({}, values), (_a = {}, _a[item.name] = e.target.value, _a));
if (item.name === 'pageNumber') {
newValue = (__assign(__assign({}, values), (_b = {}, _b[key] = e.target.value, _b)));
}
onChange && onChange(newValue);
};
return (_jsx(Container, { children: _jsxs(Col, { children: [_jsxs("div", __assign({ className: "table-header row-item" }, { children: [_jsx("div", __assign({ className: "col-item" }, { children: "\u53C2\u6570\u7C7B\u578B" }), void 0), _jsx("div", __assign({ className: "col-item" }, { children: "\u53C2\u6570\u540D" }), void 0), _jsx("div", __assign({ className: "col-item" }, { children: "\u53C2\u6570\u8BF4\u660E" }), void 0), _jsx("div", __assign({ className: "col-item" }, { children: "\u53C2\u6570\u8BBE\u7F6E" }), void 0)] }), void 0), list.map(function (item, index) { return (_jsxs("div", __assign({ className: "row-item" }, { children: [_jsx("div", __assign({ className: "col-item" }, { children: item.type }), void 0), _jsx("div", __assign({ className: "col-item" }, { children: item.name }), void 0), _jsx("div", __assign({ className: "col-item" }, { children: item.desc }), void 0), _jsx("div", __assign({ className: "col-item" }, { children: item.name === 'pageNumber' ? (_jsxs("div", { children: [_jsxs(Row, __assign({ align: "middle" }, { children: [_jsx(Col, __assign({ span: 10 }, { children: "\u8D77\u59CB\u503C\uFF1A" }), void 0), _jsx(Col, __assign({ span: 14 }, { children: _jsx(Input, { className: "ipt", value: values === null || values === void 0 ? void 0 : values.pageNumber, disabled: disabled, placeholder: "\u8BF7\u8F93\u5165", onInput: function (e) {
return onInput(e, index, 'pageNumber');
} }, void 0) }), void 0)] }), void 0), _jsxs(Row, __assign({ align: "middle" }, { children: [_jsx(Col, __assign({ span: 10 }, { children: "\u6700\u5927\u503C\uFF1A" }), void 0), _jsx(Col, __assign({ span: 14 }, { children: _jsx(Input, { className: "ipt", value: values === null || values === void 0 ? void 0 : values.maxPages, placeholder: "\u8BF7\u8F93\u5165", onInput: function (e) {
return onInput(e, index, 'maxPages');
} }, void 0) }), void 0)] }), void 0)] }, void 0)) : (_jsx("div", { children: _jsxs(Row, __assign({ align: "middle" }, { children: [_jsxs(Col, __assign({ span: 10 }, { children: [item.setLabel, "\uFF1A"] }), void 0), _jsx(Col, __assign({ span: 14 }, { children: _jsx(Input, { className: "ipt", value: values[item.name], placeholder: "\u8BF7\u8F93\u5165", onInput: function (e) {
return onInput(e, index);
} }, void 0) }), void 0)] }), void 0) }, void 0)) }), void 0)] }), index)); })] }, void 0) }, void 0));
};
var Container = styled(Row)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .table-header {\n background: #fafafa;\n height: 32px;\n line-height: 32px;\n font-size: 14px;\n font-weight: 500;\n }\n .flex-center {\n display: flex;\n align-items: center;\n }\n .row-item {\n display: flex;\n align-items: center;\n border-bottom: 1px solid #e8e8e8;\n .col-item {\n width: 120px;\n padding-left: 10px;\n min-height: 32px;\n display: flex;\n align-items: center;\n &:first-of-type {\n width: 100px;\n }\n &:nth-of-type(3) {\n width: 145px;\n }\n &:last-of-type {\n width: 170px;\n }\n & .ipt {\n padding: 0px 6px;\n margin: 5px 0px;\n &:focus {\n box-shadow: none;\n }\n }\n }\n }\n .icon {\n cursor: pointer;\n color: #2787ff;\n font-size: 14px;\n }\n .add-btn {\n padding: 5px 10px;\n border-bottom: 1px solid #e8e8e8;\n & > span {\n cursor: pointer;\n color: #2787ff;\n font-size: 14px;\n & > .icon {\n margin-right: 4px;\n }\n }\n }\n"], ["\n .table-header {\n background: #fafafa;\n height: 32px;\n line-height: 32px;\n font-size: 14px;\n font-weight: 500;\n }\n .flex-center {\n display: flex;\n align-items: center;\n }\n .row-item {\n display: flex;\n align-items: center;\n border-bottom: 1px solid #e8e8e8;\n .col-item {\n width: 120px;\n padding-left: 10px;\n min-height: 32px;\n display: flex;\n align-items: center;\n &:first-of-type {\n width: 100px;\n }\n &:nth-of-type(3) {\n width: 145px;\n }\n &:last-of-type {\n width: 170px;\n }\n & .ipt {\n padding: 0px 6px;\n margin: 5px 0px;\n &:focus {\n box-shadow: none;\n }\n }\n }\n }\n .icon {\n cursor: pointer;\n color: #2787ff;\n font-size: 14px;\n }\n .add-btn {\n padding: 5px 10px;\n border-bottom: 1px solid #e8e8e8;\n & > span {\n cursor: pointer;\n color: #2787ff;\n font-size: 14px;\n & > .icon {\n margin-right: 4px;\n }\n }\n }\n"])));
var templateObject_1;