Oak-Team
/
oak-frontend-base
13
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 37 Wiki Activity

build

This commit is contained in:
Xu Chang 2023-03-10 20:56:53 +08:00
parent d915ed69e9
commit b780d18157
18 changed files with 250 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/components/entityPicker/index.d.ts vendored
View File

@ -1,8 +1,9 @@
/// <reference types="react" />
declare const _default: (props: import("../..").ReactComponentProps<true, {
entity: StringConstructor;
projection: ObjectConstructor;
multiple: BooleanConstructor;
onSelect: FunctionConstructor;
title: FunctionConstructor;
titleLabel: StringConstructor;
}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export default _default;

15
lib/components/entityPicker/index.js
View File

@ -5,14 +5,14 @@ exports.default = OakComponent({
var entity = this.props.entity;
return entity;
},
projection: function () {
var projection = this.props.projection;
return projection;
},
formData: function (_a) {
var rows = _a.data;
var _b = _a.data, data = _b === void 0 ? [] : _b;
var title = this.props.title;
return {
rows: rows,
rows: data.map(function (ele) { return ({
id: ele.id,
title: title(ele)
}); }),
};
},
isList: true,
@ -21,9 +21,10 @@ exports.default = OakComponent({
},
properties: {
entity: String,
projection: Object,
multiple: Boolean,
onSelect: Function,
title: Function,
titleLabel: String,
},
methods: {},
});

1
lib/components/entityPicker/web.d.ts vendored
View File

@ -7,4 +7,5 @@ export default function Render(props: WebComponentProps<ED, keyof ED, false, {
projection: Record<string, any>;
onSelect: (rows: ED[keyof ED]['Schema'][]) => void;
multiple: boolean;
titleLabel: string;
}, {}>): JSX.Element;

12
lib/components/entityPicker/web.js
View File

@ -3,14 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var antd_1 = require("antd");
function Render(props) {
var _a = props.data, entity = _a.entity, oakFullpath = _a.oakFullpath, oakLoading = _a.oakLoading, rows = _a.rows, projection = _a.projection, onSelect = _a.onSelect, _b = _a.multiple, multiple = _b === void 0 ? false : _b;
var _a = props.data, oakLoading = _a.oakLoading, rows = _a.rows, onSelect = _a.onSelect, titleLabel = _a.titleLabel, _b = _a.multiple, multiple = _b === void 0 ? false : _b;
var t = props.methods.t;
var columns = Object.keys(projection)
.filter(function (ele) { return ele !== 'id'; })
.map(function (ele) { return ({
dataIndex: ele,
title: t("".concat(entity, ":attr.").concat(ele)),
}); });
var columns = [{
dataIndex: 'title',
title: titleLabel,
}];
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(antd_1.Table, { loading: oakLoading, dataSource: rows, rowKey: "id", rowSelection: {
type: multiple ? 'checkbox' : 'radio',
// onSelect: (record) => {

2
lib/components/filter/utils.d.ts vendored
View File

@ -1,4 +1,4 @@
import { ColumnProps, Ops } from './column';
import { ColumnProps, Ops } from '../../types/Filter';
export declare function getOp(column: ColumnProps): string;
export declare function getOp2(column: ColumnProps, op: Ops): string;
export declare function getFilterName(column: ColumnProps): string;

2
lib/components/filter/web.d.ts vendored
View File

@ -1,7 +1,7 @@
/// <reference types="react" />
import { WebComponentProps } from '../../types/Page';
import { ED } from '../../types/AbstractComponent';
import { ColumnProps } from './column';
import { ColumnProps } from '../../types/Filter';
export default function Render(props: WebComponentProps<ED, keyof ED, false, {
entity: keyof ED;
column: ColumnProps;

2
lib/components/filterPanel/web.d.ts vendored
View File

@ -1,7 +1,7 @@
/// <reference types="react" />
import { WebComponentProps } from '../../types/Page';
import { ED } from '../../types/AbstractComponent';
import { ColSpanType, ColumnProps } from '../filter/column';
import { ColSpanType, ColumnProps } from '../../types/Filter';
declare type Width = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
declare type ColumnMapType = {
xxl: ColSpanType;

2
lib/components/foreignKeyFilter/web.d.ts vendored
View File

@ -1,7 +1,7 @@
/// <reference types="react" />
import { WebComponentProps } from '../../types/Page';
import { ED } from '../../types/AbstractComponent';
import { ColumnProps } from '../filter/column';
import { ColumnProps } from '../../types/Filter';
export default function Render(props: WebComponentProps<ED, keyof ED, false, {
entity: keyof ED;
column: ColumnProps;

2
lib/components/foreignKeyFilter/web.js
View File

@ -100,7 +100,7 @@ function Render(props) {
var ids = selectRows.map(function (ele) { return ele.id; });
setFilterAndResetFilter(ids);
setOpen(false);
}, cancelText: t('closed'), onCancel: function () { return setOpen(false); }, width: "50%", destroyOnClose: true }, modalProps, { children: (0, jsx_runtime_1.jsx)(entityPicker_1.default, { multiple: multiple, oakAutoUnmount: true, projection: projection, entity: attribute.ref, oakPath: "$foreignKeyFilter-entity/picker-".concat(entity), onSelect: function (rows) {
}, cancelText: t('closed'), onCancel: function () { return setOpen(false); }, width: "50%", destroyOnClose: true }, modalProps, { children: (0, jsx_runtime_1.jsx)(entityPicker_1.default, { multiple: multiple, oakAutoUnmount: true, oakProjection: projection, entity: attribute.ref, oakPath: "$foreignKeyFilter-entity/picker-".concat(entity), onSelect: function (rows) {
setSelectRows(rows);
if (!multiple) {
var ids = rows.map(function (ele) { return ele.id; });

107
lib/components/upsert/index.js
View File

@ -1,5 +1,7 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var assert_1 = tslib_1.__importDefault(require("assert"));
var usefulFn_1 = require("../../utils/usefulFn");
exports.default = OakComponent({
isList: false,
@ -23,6 +25,14 @@ exports.default = OakComponent({
data: {
transformer: (function () { return []; }),
mtoPickerDict: {},
mtoData: {},
pickerEntity: undefined,
pickerProjection: {},
pickerFilter: {},
pickerTitleFn: undefined,
pickerTitleLabel: '',
pickerAttr: '',
pickerDialogTitle: '',
},
listeners: {
data: function () {
@ -31,13 +41,98 @@ exports.default = OakComponent({
},
lifetimes: {
attached: function () {
var _this = this;
var _a = this.props, attributes = _a.attributes, entity = _a.entity;
var schema = this.features.cache.getSchema();
var _b = (0, usefulFn_1.analyzeDataUpsertTransformer)(schema, entity, attributes, function (k, params) { return _this.t(k, params); }), transformer = _b.transformer, mtoPickerDict = _b.mtoPickerDict;
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a, attributes, entity, schema, _b, transformer, mtoPickerDict;
var _this = this;
return tslib_1.__generator(this, function (_c) {
_a = this.props, attributes = _a.attributes, entity = _a.entity;
schema = this.features.cache.getSchema();
_b = (0, usefulFn_1.analyzeDataUpsertTransformer)(schema, entity, attributes, function (k, params) { return _this.t(k, params); }), transformer = _b.transformer, mtoPickerDict = _b.mtoPickerDict;
this.setState({
transformer: transformer,
mtoPickerDict: mtoPickerDict,
});
return [2 /*return*/];
});
});
},
ready: function () {
var mtoPickerDict = this.state.mtoPickerDict;
for (var k in mtoPickerDict) {
var _a = mtoPickerDict[k], mode = _a.mode, entity = _a.entity, projection = _a.projection, filter = _a.filter, count = _a.count, title = _a.title;
if (mode === 'radio' || mode === 'select') {
// radio的要先取数据出来
(0, assert_1.default)(typeof count === 'number' && count <= 10, 'radio类型的外键选择，总数必须小于10');
this.refreshData(k);
}
}
}
},
methods: {
refreshData: function (attr) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var data;
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, this.fetchData(attr)];
case 1:
data = _b.sent();
this.setState({
mtoData: Object.assign({}, this.state.mtoData, (_a = {},
_a[attr] = data,
_a))
});
return [2 /*return*/];
}
});
});
},
fetchData: function (attr) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a, entity, projection, filter, count, title, entity2, proj, filter2, data, data2;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.state.mtoPickerDict[attr], entity = _a.entity, projection = _a.projection, filter = _a.filter, count = _a.count, title = _a.title;
entity2 = attr === 'entityId' ? this.props.data.entity : entity;
proj = typeof projection === 'function' ? projection() : projection;
filter2 = typeof filter === 'function' ? filter() : filter;
return [4 /*yield*/, this.features.cache.refresh(entity2, {
data: proj,
filter: filter2,
indexFrom: 0,
count: count,
})];
case 1:
data = (_b.sent()).data;
data2 = data.map(function (ele) { return ({
id: ele.id,
title: title(ele),
}); });
return [2 /*return*/, data2];
}
});
});
},
openPicker: function (attr) {
var _a = this.state.mtoPickerDict[attr], entity = _a.entity, projection = _a.projection, filter = _a.filter, count = _a.count, title = _a.title, titleLabel = _a.titleLabel;
var entity2 = attr === 'entityId' ? this.props.data.entity : entity;
var proj = typeof projection === 'function' ? projection() : projection;
var filter2 = typeof filter === 'function' ? filter() : filter;
this.setState({
transformer: transformer,
mtoPickerDict: mtoPickerDict,
pickerEntity: entity2,
pickerProjection: proj,
pickerFilter: filter2,
pickerTitleFn: title,
pickerTitleLabel: titleLabel,
pickerAttr: attr,
pickerDialogTitle: "\u9009\u62E9".concat(this.t("".concat(entity2, ":name"))),
});
},
closePicker: function () {
this.setState({
pickerEntity: undefined,
});
}
}

17
lib/components/upsert/web.pc.d.ts vendored
View File

@ -7,5 +7,20 @@ declare type ED = EntityDict & BaseEntityDict;
export default function render(props: WebComponentProps<ED, keyof EntityDict, false, {
renderData: AttrUpsertRender<ED>[];
children: any;
}, {}>): JSX.Element;
mtoData: Record<string, Array<{
id: string;
title: string;
}>>;
pickerEntity?: keyof ED;
pickerProjection?: ED[keyof ED]['Selection']['data'];
pickerFilter?: ED[keyof ED]['Selection']['filter'];
pickerTitleFn?: (data: any) => string;
pickerTitleLabel?: string;
pickerAttr?: string;
pickerDialogTitle?: string;
}, {
refreshData: (attr: string) => void;
openPicker: (attr: string) => void;
closePicker: () => void;
}>): JSX.Element;
export {};

71
lib/components/upsert/web.pc.js
View File

@ -6,7 +6,9 @@ var antd_1 = require("antd");
var icons_1 = require("@ant-design/icons");
var TextArea = antd_1.Input.TextArea;
var dayjs_1 = tslib_1.__importDefault(require("dayjs"));
function makeAttrInput(attrRender, onValueChange) {
var assert_1 = tslib_1.__importDefault(require("assert"));
var entityPicker_1 = tslib_1.__importDefault(require("../entityPicker"));
function makeAttrInput(attrRender, onValueChange, mtoData, openPicker, closePicker) {
var _a = attrRender, value = _a.value, type = _a.type, params = _a.params, label = _a.label, defaultValue = _a.defaultValue, required = _a.required;
switch (type) {
case 'string':
@ -94,7 +96,39 @@ function makeAttrInput(attrRender, onValueChange) {
}) })));
}
case 'ref': {
var mode = attrRender.mode;
var _b = attrRender, mode = _b.mode, attr_1 = _b.attr, renderValue = _b.renderValue;
switch (mode) {
case 'radio': {
var data = mtoData[attr_1];
if (data) {
return ((0, jsx_runtime_1.jsx)(antd_1.Radio.Group, tslib_1.__assign({ onChange: function (_a) {
var target = _a.target;
return onValueChange(target.value);
}, value: value }, { children: data.map(function (ele) { return ((0, jsx_runtime_1.jsx)(antd_1.Radio, tslib_1.__assign({ value: ele.id }, { children: ele.title }))); }) })));
}
else {
return (0, jsx_runtime_1.jsx)("div", { children: "loading" });
}
}
case 'select': {
var data = mtoData[attr_1];
if (data) {
return ((0, jsx_runtime_1.jsx)(antd_1.Select, { value: value, onChange: onValueChange, style: { width: '40%' }, options: data.map(function (ele) { return ({
value: ele.id,
label: ele.title,
}); }), allowClear: true }));
}
else {
return (0, jsx_runtime_1.jsx)("div", { children: "loading" });
}
}
case 'list': {
return ((0, jsx_runtime_1.jsxs)(antd_1.Space, { children: [(0, jsx_runtime_1.jsx)("div", { children: renderValue }), (0, jsx_runtime_1.jsx)(antd_1.Button, { type: "primary", shape: "circle", icon: (0, jsx_runtime_1.jsx)(icons_1.EditOutlined, {}), onClick: function () { return openPicker(attr_1); } })] }));
}
default: {
(0, assert_1.default)(false, "\u6682\u4E0D\u652F\u6301\u7684mode\u300C".concat(mode, "\u300D"));
}
}
}
default: {
throw new Error("\u3010Abstract Update\u3011\u65E0\u6CD5\u652F\u6301\u7684\u6570\u636E\u7C7B\u522B".concat(type, "\u7684\u6E32\u67D3"));
@ -102,21 +136,28 @@ function makeAttrInput(attrRender, onValueChange) {
}
}
function render(props) {
var _a = props.data, _b = _a.renderData, renderData = _b === void 0 ? [] : _b, children = _a.children;
var update = props.methods.update;
return ((0, jsx_runtime_1.jsxs)(antd_1.Form, tslib_1.__assign({ labelCol: { span: 4 }, layout: "horizontal", style: {
margin: '0px auto',
maxWidth: 675,
} }, { children: [renderData.map(function (ele) { return ((0, jsx_runtime_1.jsx)(antd_1.Form.Item, tslib_1.__assign({ label: ele.label, rules: [
{
required: ele.required,
},
] }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: makeAttrInput(ele, function (value) {
var _a = props.data, _b = _a.renderData, renderData = _b === void 0 ? [] : _b, children = _a.children, mtoData = _a.mtoData, pickerEntity = _a.pickerEntity, pickerAttr = _a.pickerAttr, pickerDialogTitle = _a.pickerDialogTitle, pickerProjection = _a.pickerProjection, pickerFilter = _a.pickerFilter, oakFullpath = _a.oakFullpath, pickerTitleFn = _a.pickerTitleFn, pickerTitleLabel = _a.pickerTitleLabel;
var _c = props.methods, update = _c.update, refreshData = _c.refreshData, openPicker = _c.openPicker, closePicker = _c.closePicker;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(antd_1.Form, tslib_1.__assign({ labelCol: { span: 4 }, layout: "horizontal", style: {
margin: '0px auto',
maxWidth: 675,
} }, { children: [renderData.map(function (ele) { return ((0, jsx_runtime_1.jsx)(antd_1.Form.Item, tslib_1.__assign({ label: ele.label, rules: [
{
required: ele.required,
},
] }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: makeAttrInput(ele, function (value) {
var _a;
var attr = ele.attr;
update((_a = {},
_a[attr] = value,
_a));
}, mtoData, openPicker, closePicker) }) }))); }), children] })), (0, jsx_runtime_1.jsx)(antd_1.Modal, tslib_1.__assign({ title: pickerDialogTitle, open: !!pickerEntity, closable: true, onCancel: closePicker, destroyOnClose: true, footer: null }, { children: (0, jsx_runtime_1.jsx)(entityPicker_1.default, { oakPath: "$".concat(oakFullpath, "-entityPicker"), entity: pickerEntity, oakProjection: pickerProjection, oakFilters: [{ filter: pickerFilter }], title: pickerTitleFn, titleLabel: pickerTitleLabel, onSelect: function (value) {
var _a;
var attr = ele.attr;
var _b = tslib_1.__read(value, 1), id = _b[0].id;
update((_a = {},
_a[attr] = value,
_a[pickerAttr] = id,
_a));
}) }) }))); }), children] })));
closePicker();
} }) }))] }));
}
exports.default = render;

6
lib/types/AbstractComponent.d.ts vendored
View File

@ -34,7 +34,8 @@ export interface OakAbsRefAttrPickerDef<ED extends EntityDict & BaseEntityDict,
attr: string;
entity: T;
projection: ED[T]['Selection']['data'] | (() => ED[T]['Selection']['data']);
title: (row: ED[T]['Schema']) => string;
title: (row: Partial<ED[T]['Schema']>) => string;
titleLabel: string;
filter?: ED[T]['Selection']['filter'] | (() => ED[T]['Selection']['filter']);
count?: number;
label?: string;
@ -44,7 +45,8 @@ export declare type OakAbsRefAttrPickerRender<ED extends EntityDict & BaseEntity
type: 'ref';
attr: string;
label: string;
value: any;
value: string;
renderValue: any;
required?: boolean;
mode: OakAbsRefAttrPickerDef<ED, T>['mode'];
};

40
lib/types/Filter.d.ts vendored Normal file
View File

@ -0,0 +1,40 @@
/// <reference types="react" />
import { Dayjs } from 'dayjs';
export declare type Ops = '$gt' | '$lt' | '$gte' | '$lte' | '$eq' | '$ne' | '$startsWith' | '$endsWith' | '$includes' | '$in' | '$nin' | '$between' | '$text' | '$search';
export declare type ColSpanType = 1 | 2 | 3 | 4;
export declare type ValueType = string | boolean | number | Array<Dayjs> | Dayjs;
export declare type ColumnProps = {
attr: string;
label?: string;
type: 'text' | 'date' | 'picker' | 'select' | 'boolean';
placeholder?: string;
op?: Ops;
selectProps?: {
options?: Array<{
label: string;
value: string;
}>;
transformInOption: (option: string | number | Record<string, any>) => void;
transformOutOption: (option: string | number | Record<string, any>) => void;
};
dateProps?: {
range?: boolean;
showTime?: boolean;
};
refProps?: {
projection?: Record<string, any>;
filter?: Record<string, any>;
sorter?: Record<string, any>;
router?: {
pathname: string;
props?: Record<string, any>;
state?: Record<string, any>;
};
component?: React.ReactNode;
inputKey?: 'name' | string;
};
transformFilter?: (column: ColumnProps, value: ValueType) => Record<string, any>;
transformValue?: (column: ColumnProps, filter: Record<string, any>) => string;
filterName?: string;
colSpan?: ColSpanType;
};

2
lib/types/Filter.js Normal file
View File

@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

17
lib/utils/usefulFn.js
View File

@ -191,10 +191,7 @@ function analyzeDataUpsertTransformer(dataSchema, entity, attrUpsertDefs, t) {
};
}
else {
var attr_1 = ele.attr, label = ele.label, mode = ele.mode, projection = ele.projection, filter = ele.filter, title_1 = ele.title, count = ele.count, allowNull = ele.allowNull;
var rel = (0, relation_1.judgeRelation)(dataSchema, entity, attr_1);
(0, assert_1.default)(rel === 2 || rel === ele.entity);
var refEntity = typeof rel === 'string' ? rel : attr_1;
var attr_1 = ele.attr, label = ele.label, mode = ele.mode, refEntity = ele.entity, projection = ele.projection, filter = ele.filter, title_1 = ele.title, count = ele.count, allowNull = ele.allowNull, titleLabel = ele.titleLabel;
(0, assert_1.default)(!mtoPickerDict[attr_1]);
mtoPickerDict[attr_1] = {
mode: mode,
@ -204,12 +201,15 @@ function analyzeDataUpsertTransformer(dataSchema, entity, attrUpsertDefs, t) {
title: title_1,
filter: filter,
count: count,
titleLabel: titleLabel,
};
var mtoAttr_1 = attr_1 === 'entityId' ? refEntity : attr_1.slice(0, attr_1.length - 2);
return {
type: 'ref',
attr: typeof rel === 'string' ? "".concat(attr_1, "Id") : 'entityId',
attr: attr_1,
mode: mode,
get: function (data) { return title_1(data[attr_1]); },
get: function (data) { return data && data[attr_1]; },
getRenderValue: function (data) { return data && title_1(data[mtoAttr_1]); },
label: label || t("".concat(refEntity, ":name")),
required: !allowNull,
};
@ -218,9 +218,10 @@ function analyzeDataUpsertTransformer(dataSchema, entity, attrUpsertDefs, t) {
return {
transformer: function (data) {
return transformerFixedPart.map(function (ele) {
var get = ele.get;
var get = ele.get, getRenderValue = ele.getRenderValue;
var value = get(data);
return tslib_1.__assign({ value: value }, ele);
var renderValue = getRenderValue && getRenderValue(data);
return tslib_1.__assign({ value: value, renderValue: renderValue }, ele);
});
},
mtoPickerDict: mtoPickerDict,

2
src/components/foreignKeyFilter/web.tsx
View File

@ -219,7 +219,7 @@ export default function Render(
<EntityPicker
multiple={multiple}
oakAutoUnmount={true}
projection={projection}
oakProjection={projection}
entity={attribute.ref}
oakPath={`$foreignKeyFilter-entity/picker-${entity}`}
onSelect={(

1
src/types/Filter.ts
View File

@ -64,5 +64,4 @@ export type ColumnProps = {
) => string;
filterName?: string;
colSpan?: ColSpanType;
placeholder?: string;
};