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

absUpsert

This commit is contained in:
Xu Chang 2023-03-29 22:06:15 +08:00
parent 11552a6025
commit 468c8262ed
14 changed files with 371 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
lib/components/map/location/index.d.ts vendored
View File

@ -3,11 +3,18 @@ declare type LocationProps = {
poiName?: string;
coordinate?: [number, number];
areaId?: string;
onSelect: (selected: {
onLocated: (selected: {
poiName: string;
coordinate: [number, number];
areaId: string;
}) => void;
};
export declare type Poi = {
id: string;
areaId: string;
poiName: string;
detail: string;
coordinate: [number, number];
};
export default function Location(props: LocationProps): JSX.Element | null;
export {};

42
lib/components/map/location/index.js
View File

@ -7,7 +7,8 @@ var antd_1 = require("antd");
var icons_1 = require("@ant-design/icons");
var map_1 = tslib_1.__importDefault(require("../map"));
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
var features_1 = require("../../../platforms/web/features");
// todo
var useFeatures_1 = tslib_1.__importDefault(require("../../../../lib/hooks/useFeatures"));
function Location(props) {
var _a = tslib_1.__read((0, react_1.useState)('dragMap'), 2), mode = _a[0], setMode = _a[1];
var _b = tslib_1.__read((0, react_1.useState)(''), 2), searchValue = _b[0], setSearchValue = _b[1];
@ -15,12 +16,13 @@ function Location(props) {
var _d = tslib_1.__read((0, react_1.useState)(), 2), pois = _d[0], setPois = _d[1];
var _e = tslib_1.__read((0, react_1.useState)(), 2), currentPoi = _e[0], setCurrentPoi = _e[1];
var searchRef = (0, react_1.useRef)();
var featureGeo = (0, features_1.useFeatures)().geo;
var featureGeo = (0, useFeatures_1.default)().geo;
(0, react_1.useEffect)(function () {
if (searchValue) {
if ((searchValue === null || searchValue === void 0 ? void 0 : searchValue.length) > 1) {
setSearchLoading(true);
featureGeo.searchPoi(searchValue).then(function (_a) {
var result = _a.result;
setSearchLoading(false);
setPois(result);
// setCurrentPoi(pois[0]);
}, function (error) {
@ -29,36 +31,40 @@ function Location(props) {
setSearchLoading(false);
});
}
else {
setPois(undefined);
}
}, [searchValue]);
if (window.innerWidth < 500) {
// 窄屏
return null;
}
var center = (currentPoi === null || currentPoi === void 0 ? void 0 : currentPoi.coordinate) || props.coordinate;
return ((0, jsx_runtime_1.jsxs)(antd_1.Row, tslib_1.__assign({ gutter: [16, 16], style: {
width: '100%',
minHeight: 500,
} }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 14 }, { children: (0, jsx_runtime_1.jsx)(map_1.default, { style: { height: '100%' }, id: "location-map", center: props.coordinate, markers: props.coordinate ? [props.coordinate] : undefined }) })), (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 10 }, { children: (0, jsx_runtime_1.jsx)(antd_1.List, tslib_1.__assign({ className: web_module_less_1.default["location-list"], header: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default["location-list-header"] }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Input, { ref: searchRef, placeholder: "\u641C\u7D22\u5730\u70B9", value: searchValue, allowClear: true, onChange: function (e) {
setSearchValue(e.target.value);
}, prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), onFocus: function () {
setMode('searchPoi');
}, onBlur: function () {
} }), mode === 'searchPoi' && ((0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ style: { marginLeft: 5 }, type: "link", onClick: function () {
var _a;
setMode('dragMap');
setSearchValue('');
//@ts-ignore
(_a = searchRef === null || searchRef === void 0 ? void 0 : searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
} }, { children: "\u53D6\u6D88" })))] })) }, { children: mode === 'searchPoi' && ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: searchLoading ? ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default['location-list-loadingBox'] }, { children: (0, jsx_runtime_1.jsx)(antd_1.Spin, { delay: 0, spinning: true, size: "default" }) }))) : ((pois === null || pois === void 0 ? void 0 : pois.length)
minHeight: 600,
} }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 14 }, { children: (0, jsx_runtime_1.jsx)(map_1.default, { style: { height: '100%' }, id: "location-map", center: center, markers: center ? [center] : undefined }) })), (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 10 }, { children: (0, jsx_runtime_1.jsx)(antd_1.List, tslib_1.__assign({ className: web_module_less_1.default["location-list"], header: (0, jsx_runtime_1.jsx)(antd_1.Input, { ref: searchRef, placeholder: "\u8BF7\u8F93\u5165\u5B8C\u6574\u540D\u79F0\uFF08\u5982\u201C\u6D59\u6C5F\u5927\u5B66\u201D\uFF09\u800C\u975E\u7B80\u79F0\uFF08\u5982\u201C\u6D59\u5927\u201D\uFF09", value: searchValue, allowClear: true, onChange: function (e) {
setSearchValue(e.target.value);
}, prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), onFocus: function () {
setMode('searchPoi');
}, onBlur: function () {
} }) }, { children: mode === 'searchPoi' && ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: searchLoading ? ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default['location-list-meta'] }, { children: (0, jsx_runtime_1.jsx)(antd_1.Spin, { delay: 0, spinning: true, size: "default" }) }))) : ((pois === null || pois === void 0 ? void 0 : pois.length)
? pois.map(function (poi, index) {
return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ onClick: function () {
console.log(poi);
setCurrentPoi(poi);
props.onLocated({
poiName: poi.detail,
coordinate: poi.coordinate,
areaId: poi.areaId,
});
} }, { children: (0, jsx_runtime_1.jsx)(antd_1.List.Item, tslib_1.__assign({ actions: [
(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: {
width: 24,
} }, { children: (currentPoi === null || currentPoi === void 0 ? void 0 : currentPoi.id) ===
poi.id && ((0, jsx_runtime_1.jsx)(icons_1.CheckCircleFilled, { className: web_module_less_1.default['location-list-checked'] })) })),
] }, { children: (0, jsx_runtime_1.jsx)(antd_1.List.Item.Meta, { title: poi.poiName }) })) }), poi.id));
] }, { children: (0, jsx_runtime_1.jsx)(antd_1.List.Item.Meta, { title: poi.detail }) })) }), poi.id));
})
: ((0, jsx_runtime_1.jsx)(antd_1.Empty, { description: "\u6CA1\u6709".concat(searchValue, "\u76F8\u5173\u7684\u5730\u540D\u641C\u7D22\u7ED3\u679C"), image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE }))) })) })) }))] })));
: ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default['location-list-meta'] }, { children: (0, jsx_runtime_1.jsx)(antd_1.Empty, { description: "\u6CA1\u6709".concat(searchValue, "\u76F8\u5173\u7684\u5730\u540D\u641C\u7D22\u7ED3\u679C"), image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE }) })))) })) })) }))] })));
}
exports.default = Location;

1
lib/components/map/map/index.d.ts vendored
View File

@ -6,6 +6,7 @@ declare type MapProps = {
zoom?: number;
unzoomable?: boolean;
undragable?: boolean;
disableWheelZoom?: boolean;
style?: object;
autoLocate?: boolean;
markers?: Array<[number, number]>;

63
lib/components/map/map/index.js
View File

@ -2,6 +2,7 @@
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var assert_1 = tslib_1.__importDefault(require("assert"));
var react_1 = require("react");
var Map_1 = tslib_1.__importDefault(require("ol/Map"));
var Feature_1 = tslib_1.__importDefault(require("ol/Feature"));
@ -9,22 +10,23 @@ var XYZ_1 = tslib_1.__importDefault(require("ol/source/XYZ"));
var Vector_1 = tslib_1.__importDefault(require("ol/source/Vector"));
var Tile_1 = tslib_1.__importDefault(require("ol/layer/Tile"));
var Vector_2 = tslib_1.__importDefault(require("ol/layer/Vector"));
var MultiPoint_1 = tslib_1.__importDefault(require("ol/geom/MultiPoint"));
var style_1 = require("ol/style");
var View_1 = tslib_1.__importDefault(require("ol/View"));
var proj_1 = require("ol/proj");
var DragPan_1 = tslib_1.__importDefault(require("ol/interaction/DragPan"));
var MouseWheelZoom_1 = tslib_1.__importDefault(require("ol/interaction/MouseWheelZoom"));
require("ol/ol.css");
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
var locate_1 = require("../../../utils/locate");
var geom_1 = require("ol/geom");
var prefix = Math.ceil(Math.random() * 1000);
var DEFAULT_CENTER = [120.123, 30.259]; // 浙大玉泉
var DEFAULT_ZOOM = 15;
function Map(props) {
var map;
var id = props.id;
var _a = tslib_1.__read((0, react_1.useState)(), 2), map = _a[0], setMap = _a[1];
(0, react_1.useEffect)(function () {
map = new Map_1.default({
var map2 = new Map_1.default({
target: "map-".concat(id || prefix),
layers: [
new Tile_1.default({
@ -46,58 +48,69 @@ function Map(props) {
controls: props.unzoomable ? [] : undefined,
});
if (props.undragable) {
map.getInteractions().forEach(function (ele) {
map2.getInteractions().forEach(function (ele) {
if (ele instanceof DragPan_1.default) {
ele.setActive(false);
}
});
}
if (props.disableWheelZoom) {
map2.getInteractions().forEach(function (ele) {
if (ele instanceof MouseWheelZoom_1.default) {
ele.setActive(false);
}
});
}
if (props.autoLocate) {
(0, locate_1.locate)().then(function (_a) {
var latitude = _a.latitude, longitude = _a.longitude;
map.getView().setCenter((0, proj_1.fromLonLat)([longitude, latitude]));
map2.getView().setCenter((0, proj_1.fromLonLat)([longitude, latitude]));
});
}
setMap(map2);
}, []);
(0, react_1.useEffect)(function () {
if (props.center) {
map && map.getView().setCenter((0, proj_1.fromLonLat)(props.center));
if (props.center && map) {
var originCenter = map.getView().getCenter();
if (originCenter) {
var oc2 = (0, proj_1.toLonLat)(originCenter);
if (oc2[0] !== props.center[0] || oc2[1] !== props.center[1]) {
map.getView().animate({
center: (0, proj_1.fromLonLat)(props.center),
duration: 500,
});
}
}
else {
map.getView().setCenter((0, proj_1.fromLonLat)(props.center));
}
}
}, [props.center]);
(0, react_1.useEffect)(function () {
// marker好像没有效果，以后再调
if (props.markers && map) {
var markerLayer = map.getLayers().get('markLayer');
if (!markerLayer) {
markerLayer = new Vector_2.default({
source: new Vector_1.default(),
});
map.getLayers().set('markLayer', markerLayer);
}
var markerLayer = map.getAllLayers().find(function (ele) { return ele instanceof Vector_2.default; });
(0, assert_1.default)(markerLayer && markerLayer instanceof Vector_2.default);
var feature = markerLayer.getSource().getFeatureById('markers');
if (feature) {
feature.setGeometry(new MultiPoint_1.default(props.markers.map(function (ele) { return (0, proj_1.fromLonLat)(ele); })));
// feature.setGeometry(new MultiPoint(props.markers.map(ele => fromLonLat(ele))));
feature.setGeometry(new geom_1.Point((0, proj_1.fromLonLat)(props.markers[0])));
}
else {
feature = new Feature_1.default(new MultiPoint_1.default(props.markers.map(function (ele) { return (0, proj_1.fromLonLat)(ele); })));
// feature = new Feature(new MultiPoint(props.markers.map(ele => fromLonLat(ele))));
feature = new Feature_1.default(new geom_1.Point((0, proj_1.fromLonLat)(props.markers[0])));
feature.setStyle(new style_1.Style({
image: new style_1.Circle({
// 点的颜色
fill: new style_1.Fill({
color: '#F00'
color: 'red',
}),
// 圆形半径
radius: 5
}),
// 线样式
stroke: new style_1.Stroke({
color: '#0F0',
lineCap: 'round',
width: 5
radius: 10
}),
// 填充样式
fill: new style_1.Fill({
color: '#00F'
color: 'red',
})
}));
feature.setId('markers');

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

@ -2,17 +2,23 @@
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
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"));
var refAttr_1 = tslib_1.__importDefault(require("../refAttr"));
var location_1 = tslib_1.__importDefault(require("../map/location"));
var map_1 = tslib_1.__importDefault(require("../map/map"));
function makeAttrInput(attrRender, onValueChange) {
var _a = attrRender, value = _a.value, type = _a.type, params = _a.params, label = _a.label, defaultValue = _a.defaultValue, required = _a.required;
var _a = tslib_1.__read((0, react_1.useState)(false), 2), sl = _a[0], setSl = _a[1];
var _b = tslib_1.__read((0, react_1.useState)(undefined), 2), poi = _b[0], setPoi = _b[1];
var _c = attrRender, value = _c.value, type = _c.type, params = _c.params, label = _c.label, defaultValue = _c.defaultValue, required = _c.required;
switch (type) {
case 'string':
case 'varchar':
case 'char': {
case 'char':
case 'poiName': {
return ((0, jsx_runtime_1.jsx)(antd_1.Input, { allowClear: !required, placeholder: "\u8BF7\u8F93\u5165".concat(label), value: value, defaultValue: defaultValue, maxLength: params && params.length, onChange: function (_a) {
var value = _a.target.value;
onValueChange(value);
@ -97,6 +103,40 @@ function makeAttrInput(attrRender, onValueChange) {
case 'ref': {
return ((0, jsx_runtime_1.jsx)(refAttr_1.default, { multiple: false, entityId: value, pickerRender: attrRender, onChange: function (value) { onValueChange(value); } }));
}
case 'coordinate': {
var coordinate = (value || {}).coordinate;
var extra = attrRender.extra;
var poiNameAttr_1 = (extra === null || extra === void 0 ? void 0 : extra.poiName) || 'poiName';
var areaIdAttr_1 = (extra === null || extra === void 0 ? void 0 : extra.areaId) || 'areaId';
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Modal, tslib_1.__assign({ width: '80vw', open: sl, closable: false, onCancel: function () { return setSl(false); }, okText: "\u786E\u8BA4", cancelText: "\u53D6\u6D88", okButtonProps: {
disabled: !poi,
}, onOk: function () {
var _a;
if (poi) {
var poiName = poi.poiName, coordinate_1 = poi.coordinate, areaId = poi.areaId;
onValueChange({
type: 'point',
coordinate: coordinate_1,
}, (_a = {},
_a[poiNameAttr_1] = poiName,
_a[areaIdAttr_1] = areaId,
_a));
}
setSl(false);
} }, { children: (0, jsx_runtime_1.jsx)(location_1.default, { coordinate: coordinate, onLocated: function (poi) { return setPoi(poi); } }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: {
display: 'flex',
flexDirection: 'column',
width: '100%',
} }, { children: (0, jsx_runtime_1.jsxs)(antd_1.Space, tslib_1.__assign({ direction: "vertical", size: 8 }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Space, tslib_1.__assign({ align: "center" }, { children: (0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ type: "dashed", onClick: function () {
setSl(true);
} }, { children: value
? '重选位置'
: '选择位置' })) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: {
display: 'flex',
flexDirection: 'column',
width: '100%',
} }, { children: (0, jsx_runtime_1.jsx)(map_1.default, { undragable: true, disableWheelZoom: true, style: { height: 300 }, autoLocate: true, center: coordinate, markers: coordinate ? [coordinate] : undefined }) }))] })) }))] }));
}
default: {
throw new Error("\u3010Abstract Update\u3011\u65E0\u6CD5\u652F\u6301\u7684\u6570\u636E\u7C7B\u522B".concat(type, "\u7684\u6E32\u67D3"));
}
@ -112,12 +152,10 @@ function render(props) {
{
required: ele.required,
},
] }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: makeAttrInput(ele, function (value) {
] }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: makeAttrInput(ele, function (value, extra) {
var _a;
var attr = ele.attr;
update((_a = {},
_a[attr] = value,
_a));
update(tslib_1.__assign((_a = {}, _a[attr] = value, _a), extra));
}) }) }))); }), children] })));
}
exports.default = render;

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

@ -47,17 +47,16 @@ export interface OakAbsRefAttrPickerRender<ED extends EntityDict & BaseEntityDic
required?: boolean;
value: string;
}
export declare type OakAbsGeoAttrsDef = {
amapSecurityJsCode: string;
amapKey: string;
type: 'getPoint';
export interface OakAbsGeoAttrDef {
type: 'geo';
category: 'point';
attributes?: {
areaId?: string;
poiName?: string;
coordinate?: string;
};
};
export declare type OakAbsAttrUpsertDef<ED extends EntityDict & BaseEntityDict> = OakAbsRefAttrPickerDef<ED, keyof ED> | string;
}
export declare type OakAbsAttrUpsertDef<ED extends EntityDict & BaseEntityDict> = OakAbsGeoAttrDef | OakAbsRefAttrPickerDef<ED, keyof ED> | string;
import { DataType, DataTypeParams } from 'oak-domain/lib/types/schema/DataTypes';
export declare type AttrRender = {
label: string;
@ -70,7 +69,7 @@ export declare type AttrRender = {
export declare type OakNativeAttrUpsertRender = {
label: string;
value: any;
type: Omit<DataType, 'ref'>;
type: Omit<DataType, 'ref'> | 'coordinate' | 'poiName';
params?: DataTypeParams;
required?: boolean;
attr: string;
@ -79,6 +78,7 @@ export declare type OakNativeAttrUpsertRender = {
label: string;
value: string;
}>;
extra?: any;
};
export declare type AttrUpsertRender<ED extends EntityDict & BaseEntityDict> = OakNativeAttrUpsertRender | OakAbsRefAttrPickerRender<ED, keyof ED>;
export declare type ColumnDefProps = {

1
lib/types/AbstractComponent.js
View File

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

2
lib/utils/usefulFn.d.ts vendored
View File

@ -9,7 +9,7 @@ export declare function getAttributes(attributes: Record<string, Attribute>): Re
export declare function resolvePath<ED extends EntityDict & BaseEntityDict>(dataSchema: StorageSchema<ED>, entity: keyof ED, path: string): {
entity: keyof ED;
attr: string;
attrType: "ref" | DataType;
attrType: DataType | "ref";
attribute: Attribute;
};
export declare function makeDataTransformer<ED extends EntityDict & BaseEntityDict>(dataSchema: StorageSchema<ED>, entity: string, attrDefs: OakAbsAttrDef[], t: (k: string, params?: object) => string, colorDict?: ColorDict<ED>): DataTransformer;

53
lib/utils/usefulFn.js
View File

@ -170,32 +170,53 @@ function makeDataTransformer(dataSchema, entity, attrDefs, t, colorDict) {
}
exports.makeDataTransformer = makeDataTransformer;
function analyzeDataUpsertTransformer(dataSchema, entity, attrUpsertDefs, t) {
var geoDef = undefined;
var makeNativeFixedPart = function (attr) {
var attrDef = dataSchema[entity].attributes[attr]; // upsert应该不会涉及createAt这些内置属性
var type = attrDef.type, required = attrDef.notNull, defaultValue = attrDef.default, enumeration = attrDef.enumeration, params = attrDef.params;
var label = t("".concat(entity, ":attr.").concat(attr));
(0, assert_1.default)(type !== 'ref');
return {
attr: attr,
label: label,
type: type,
required: required,
defaultValue: defaultValue,
enumeration: enumeration,
params: params,
get: function (data) { return data && data[attr]; },
};
};
var transformerFixedPart = attrUpsertDefs.map(function (ele) {
if (typeof ele === 'string') {
var rel = (0, relation_1.judgeRelation)(dataSchema, entity, ele);
(0, assert_1.default)(rel === 1);
var attrDef = dataSchema[entity].attributes[ele]; // upsert应该不会涉及createAt这些内置属性
var type = attrDef.type, required = attrDef.notNull, defaultValue = attrDef.default, enumeration = attrDef.enumeration, params = attrDef.params;
var label = t("".concat(entity, ":attr.").concat(ele));
(0, assert_1.default)(type !== 'ref');
return {
attr: ele,
label: label,
type: type,
required: required,
defaultValue: defaultValue,
enumeration: enumeration,
params: params,
get: function (data) { return data && data[ele]; },
};
return makeNativeFixedPart(ele);
}
else {
else if (ele.type === 'ref') {
var attr = ele.attr, label = ele.label, rest = tslib_1.__rest(ele, ["attr", "label"]);
var rel = (0, relation_1.judgeRelation)(dataSchema, entity, attr);
var origAttr_1 = rel === 2 ? 'entityId' : "".concat(attr, "Id");
return tslib_1.__assign(tslib_1.__assign({ required: !!(dataSchema[entity].attributes[origAttr_1].notNull), label: label || (rel === 2 ? t("".concat(attr, ":name")) : t("".concat(entity, ":attr.").concat(attr))) }, rest), { get: function (data) { return data && data[origAttr_1]; }, attr: origAttr_1 });
}
});
else if (ele.type === 'geo') {
(0, assert_1.default)(!geoDef, '只能定义一个geo渲染对象');
geoDef = ele;
}
}).filter(function (ele) { return !!ele; });
if (geoDef) {
// 暂时只放出poiName和coordinate
var attributes = geoDef.attributes;
var attr = (attributes === null || attributes === void 0 ? void 0 : attributes.coordinate) || 'coordinate';
transformerFixedPart.push(Object.assign(makeNativeFixedPart(attr), {
type: 'coordinate',
extra: attributes,
}));
attr = (attributes === null || attributes === void 0 ? void 0 : attributes.poiName) || 'poiName';
transformerFixedPart.push(Object.assign(makeNativeFixedPart(attr), {
type: 'poiName',
}));
}
return function (data) {
return transformerFixedPart.map(function (ele) {
var get = ele.get;

20
src/components/map/location/index.tsx
View File

@ -21,7 +21,7 @@ type LocationProps = {
poiName?: string;
coordinate?: [number, number];
areaId?: string;
onSelect: (selected: {
onLocated: (selected: {
poiName: string,
coordinate: [number, number],
areaId: string
@ -30,10 +30,11 @@ type LocationProps = {
type Mode = 'dragMap' | 'searchPoi';
type Poi = {
export type Poi = {
id: string;
areaId: string;
poiName: string;
detail: string;
coordinate: [number, number];
};
@ -73,6 +74,7 @@ export default function Location(props: LocationProps) {
return null;
}
const center = currentPoi?.coordinate || props.coordinate;
return (
<Row gutter={[16, 16]} style={{
width: '100%',
@ -82,8 +84,8 @@ export default function Location(props: LocationProps) {
<Map
style={{ height: '100%' }}
id="location-map"
center={props.coordinate}
markers={props.coordinate ? [props.coordinate] : undefined}
center={center}
markers={center? [center] : undefined}
/>
</Col>
<Col xs={24} sm={10}>
@ -92,7 +94,7 @@ export default function Location(props: LocationProps) {
header={
<Input
ref={searchRef}
placeholder="搜索地点"
placeholder="请输入完整名称（如“浙江大学”）而非简称（如“浙大”）"
value={searchValue}
allowClear
onChange={(e) => {
@ -163,9 +165,15 @@ export default function Location(props: LocationProps) {
<div
key={poi.id}
onClick={() => {
console.log(poi);
setCurrentPoi(
poi
);
props.onLocated({
poiName: poi.detail,
coordinate: poi.coordinate,
areaId: poi.areaId,
});
}}
>
<List.Item
@ -186,7 +194,7 @@ export default function Location(props: LocationProps) {
>
<List.Item.Meta
title={
poi.poiName
poi.detail
}
/>
</List.Item>

75
src/components/map/map/index.tsx
View File

@ -1,4 +1,5 @@
import React, { useEffect } from 'react';
import assert from 'assert';
import React, { useEffect, useState } from 'react';
import OlMap from 'ol/Map';
import Feature from 'ol/Feature';
import XYZ from 'ol/source/XYZ';
@ -9,11 +10,13 @@ import MultiPoint from 'ol/geom/MultiPoint';
import { Style, Circle, Fill, Stroke } from 'ol/style';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
import { fromLonLat, toLonLat } from 'ol/proj';
import DragPan from 'ol/interaction/DragPan';
import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';
import 'ol/ol.css';
import Styles from './web.module.less';
import { locate } from '../../../utils/locate';
import { Point } from 'ol/geom';
const prefix = Math.ceil(Math.random() * 1000);
@ -23,6 +26,7 @@ type MapProps = {
zoom?: number;
unzoomable?: boolean;
undragable?: boolean;
disableWheelZoom?: boolean;
style?: object;
autoLocate?: boolean;
markers?: Array<[number, number]>;
@ -32,10 +36,12 @@ const DEFAULT_CENTER = [120.123, 30.259]; // 浙大玉泉
const DEFAULT_ZOOM = 15;
export default function Map(props: MapProps) {
let map: OlMap;
const { id } = props;
useEffect(() => {
map = new OlMap({
const [map, setMap] = useState<OlMap>();
useEffect(() => {
const map2 = new OlMap({
target: `map-${id || prefix}`,
layers: [
new TileLayer({
@ -58,7 +64,7 @@ export default function Map(props: MapProps) {
});
if (props.undragable) {
map.getInteractions().forEach(
map2.getInteractions().forEach(
(ele) => {
if (ele instanceof DragPan) {
ele.setActive(false);
@ -66,56 +72,71 @@ export default function Map(props: MapProps) {
}
);
}
if (props.disableWheelZoom) {
map2.getInteractions().forEach(
(ele) => {
if (ele instanceof MouseWheelZoom) {
ele.setActive(false);
}
}
)
}
if (props.autoLocate) {
locate().then(
({ latitude, longitude }) => {
map.getView().setCenter(fromLonLat([longitude, latitude]));
map2.getView().setCenter(fromLonLat([longitude, latitude]));
}
);
}
setMap(map2);
}, []);
useEffect(() => {
if (props.center) {
map && map.getView().setCenter(fromLonLat(props.center))
if (props.center && map) {
const originCenter = map.getView().getCenter();
if (originCenter) {
const oc2 = toLonLat(originCenter);
if (oc2[0] !== props.center[0] || oc2[1] !== props.center[1]) {
map.getView().animate({
center: fromLonLat(props.center),
duration: 500,
});
}
}
else {
map.getView().setCenter(fromLonLat(props.center));
}
}
}, [props.center]);
useEffect(() => {
// marker好像没有效果，以后再调
if (props.markers && map) {
let markerLayer = map.getLayers().get('markLayer') as VectorLayer<VectorSource>;
if (!markerLayer) {
markerLayer = new VectorLayer({
source: new VectorSource(),
});
map.getLayers().set('markLayer', markerLayer);
}
const markerLayer = map.getAllLayers().find(
ele => ele instanceof VectorLayer
);
assert(markerLayer && markerLayer instanceof VectorLayer);
let feature = markerLayer.getSource()!.getFeatureById('markers');
if (feature) {
feature.setGeometry(new MultiPoint(props.markers.map(ele => fromLonLat(ele))));
// feature.setGeometry(new MultiPoint(props.markers.map(ele => fromLonLat(ele))));
feature.setGeometry(new Point(fromLonLat(props.markers[0])));
}
else {
feature = new Feature(new MultiPoint(props.markers.map(ele => fromLonLat(ele))));
// feature = new Feature(new MultiPoint(props.markers.map(ele => fromLonLat(ele))));
feature = new Feature(new Point(fromLonLat(props.markers[0])));
feature.setStyle(
new Style({
image: new Circle({
// 点的颜色
fill: new Fill({
color: '#F00'
color: 'red',
}),
// 圆形半径
radius: 5
}),
// 线样式
stroke: new Stroke({
color: '#0F0',
lineCap: 'round', // 设置线的两端为圆头
width: 5
radius: 10
}),
// 填充样式
fill: new Fill({
color: '#00F'
color: 'red',
})
})
);

97
src/components/upsert/web.pc.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { EntityDict } from 'oak-domain/lib/types/Entity';
import { EntityDict as BaseEntityDict } from 'oak-domain/lib/base-app-domain';
import {
@ -21,14 +21,23 @@ import dayjs from 'dayjs';
import { AttrRender, AttrUpsertRender, OakAbsRefAttrPickerDef, OakAbsRefAttrPickerRender, OakNativeAttrUpsertRender } from '../../types/AbstractComponent';
import { WebComponentProps } from '../../types/Page';
import RefAttr from '../refAttr';
import Location, { Poi } from '../map/location';
import Map from '../map/map';
type ED = EntityDict & BaseEntityDict;
function makeAttrInput(attrRender: AttrUpsertRender<ED>, onValueChange: (value: any) => void) {
function makeAttrInput(attrRender: AttrUpsertRender<ED>, onValueChange: (value: any, extra?: Record<string, any>) => void) {
const [sl, setSl] = useState(false);
const [poi, setPoi] = useState<{
poiName: string;
coordinate: [number, number];
areaId: string;
} | undefined>(undefined);
const { value, type, params, label, defaultValue, required } = attrRender as OakNativeAttrUpsertRender;
switch (type) {
case 'string':
case 'varchar':
case 'char': {
case 'char':
case 'poiName': {
return (
<Input
allowClear={!required}
@ -191,10 +200,87 @@ function makeAttrInput(attrRender: AttrUpsertRender<ED>, onValueChange: (value:
multiple={false}
entityId={value}
pickerRender={attrRender as OakAbsRefAttrPickerRender<ED, keyof ED>}
onChange={(value: string) => {onValueChange(value)}}
onChange={(value: string) => { onValueChange(value) }}
/>
);
}
case 'coordinate': {
const { coordinate } = value || {};
const { extra } = attrRender as OakNativeAttrUpsertRender;
const poiNameAttr = extra?.poiName || 'poiName';
const areaIdAttr = extra?.areaId || 'areaId';
return (
<>
<Modal
width='80vw'
open={sl}
closable={false}
onCancel={() => setSl(false)}
okText="确认"
cancelText="取消"
okButtonProps={{
disabled: !poi,
}}
onOk={() => {
if (poi) {
const { poiName, coordinate, areaId } = poi;
onValueChange({
type: 'point',
coordinate,
}, {
[poiNameAttr]: poiName,
[areaIdAttr]: areaId,
});
}
setSl(false);
}}
>
<Location
coordinate={coordinate}
onLocated={(poi) => setPoi(poi)}
/>
</Modal>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
}}
>
<Space direction="vertical" size={8}>
<Space align="center">
<Button
type="dashed"
onClick={() => {
setSl(true);
}}
>
{value
? '重选位置'
: '选择位置'}
</Button>
</Space>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
}}
>
<Map
undragable={true}
disableWheelZoom={true}
style={{ height: 300 }}
autoLocate={true}
center={coordinate}
markers={coordinate ? [coordinate] : undefined}
/>
</div>
</Space>
</div>
</>
);
}
default: {
throw new Error(`【Abstract Update】无法支持的数据类别${type}的渲染`);
}
@ -234,10 +320,11 @@ export default function render(props: WebComponentProps<
>
<>
{
makeAttrInput(ele, (value) => {
makeAttrInput(ele, (value, extra) => {
const { attr } = ele;
update({
[attr]: value,
...extra,
})
})
}

13
src/types/AbstractComponent.ts
View File

@ -63,10 +63,9 @@ export interface OakAbsRefAttrPickerRender<
value: string;
};
export type OakAbsGeoAttrsDef = {
amapSecurityJsCode: string;
amapKey: string;
type: 'getPoint';
export interface OakAbsGeoAttrDef {
type: 'geo';
category: 'point';
attributes?: {
areaId?: string;
poiName?: string;
@ -74,7 +73,9 @@ export type OakAbsGeoAttrsDef = {
};
};
export type OakAbsAttrUpsertDef<ED extends EntityDict & BaseEntityDict> =
| OakAbsGeoAttrDef
| OakAbsRefAttrPickerDef<ED, keyof ED>
| string;
@ -82,7 +83,6 @@ import {
DataType,
DataTypeParams,
} from 'oak-domain/lib/types/schema/DataTypes';
import { ActionDef } from './Page';
export type AttrRender = {
label: string;
value: any;
@ -95,12 +95,13 @@ export type AttrRender = {
export type OakNativeAttrUpsertRender = {
label: string;
value: any;
type: Omit<DataType, 'ref'>;
type: Omit<DataType, 'ref'> | 'coordinate' | 'poiName';
params?: DataTypeParams;
required?: boolean;
attr: string;
defaultValue?: any;
enumeration?: Array<{ label: string; value: string }>;
extra?: any;
};
export type AttrUpsertRender<ED extends EntityDict & BaseEntityDict> =

72
src/utils/usefulFn.ts
View File

@ -17,6 +17,8 @@ import {
AttrUpsertRender,
OakAbsDerivedAttrDef,
OakAbsRefAttrPickerDef,
OakAbsGeoAttrDef,
OakNativeAttrUpsertRender,
} from '../types/AbstractComponent';
import { Attributes } from 'oak-domain/lib/types';
import { get } from 'oak-domain/lib/utils/lodash';
@ -248,31 +250,36 @@ export function analyzeDataUpsertTransformer<
attrUpsertDefs: OakAbsAttrUpsertDef<ED>[],
t: (k: string, params?: object) => string
) {
let geoDef: OakAbsGeoAttrDef | undefined = undefined;
const makeNativeFixedPart = (attr: string) => {
const attrDef = dataSchema[entity].attributes[attr]; // upsert应该不会涉及createAt这些内置属性
const {
type,
notNull: required,
default: defaultValue,
enumeration,
params,
} = attrDef;
const label = t(`${entity}:attr.${attr}`);
assert(type !== 'ref');
return {
attr,
label,
type: type as OakNativeAttrUpsertRender['type'],
required,
defaultValue,
enumeration,
params,
get: (data?: Record<string, any>) => data && data[attr],
};
};
const transformerFixedPart = attrUpsertDefs.map((ele) => {
if (typeof ele === 'string') {
const rel = judgeRelation(dataSchema, entity, ele);
assert(rel === 1);
const attrDef = dataSchema[entity].attributes[ele]; // upsert应该不会涉及createAt这些内置属性
const {
type,
notNull: required,
default: defaultValue,
enumeration,
params,
} = attrDef;
const label = t(`${entity}:attr.${ele}`);
assert(type !== 'ref');
return {
attr: ele,
label,
type,
required,
defaultValue,
enumeration,
params,
get: (data?: Record<string, any>) => data && data[ele],
};
} else {
return makeNativeFixedPart(ele);
} else if (ele.type === 'ref') {
const {
attr,
label,
@ -288,10 +295,29 @@ export function analyzeDataUpsertTransformer<
attr: origAttr,
};
}
});
else if (ele.type === 'geo') {
assert(!geoDef, '只能定义一个geo渲染对象');
geoDef = ele;
}
}).filter(
ele => !!ele
);
if (geoDef) {
// 暂时只放出poiName和coordinate
const { attributes } = geoDef as OakAbsGeoAttrDef;
let attr = attributes?.coordinate || 'coordinate';
transformerFixedPart.push(Object.assign(makeNativeFixedPart(attr), {
type: 'coordinate',
extra: attributes,
}));
attr = attributes?.poiName || 'poiName';
transformerFixedPart.push(Object.assign(makeNativeFixedPart(attr), {
type: 'poiName',
}));
}
return (data: any) =>
transformerFixedPart.map((ele) => {
const { get } = ele;
const { get } = ele!;
const value = get(data);
return {
value,