absUpsert

lib/components/map/location/index.d.ts

@@ -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 {};

lib/components/map/location/index.js

@@ -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,
+            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: 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) {
+        } }, { 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);
+                            setSearchValue(e.target.value);
-                                }, prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), onFocus: function () {
+                        }, prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), onFocus: function () {
-                                    setMode('searchPoi');
+                            setMode('searchPoi');
-                                }, onBlur: function () {
+                        }, onBlur: function () {
-                                } }), mode === 'searchPoi' && ((0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ style: { marginLeft: 5 }, type: "link", onClick: 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)
-                                    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)
                             ? 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;

lib/components/map/map/index.d.ts

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

lib/components/map/map/index.js

@@ -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) {
+        if (props.center && map) {
-            map && map.getView().setCenter((0, proj_1.fromLonLat)(props.center));
+            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');
+            var markerLayer = map.getAllLayers().find(function (ele) { return ele instanceof Vector_2.default; });
-            if (!markerLayer) {
+            (0, assert_1.default)(markerLayer && markerLayer instanceof Vector_2.default);
-                markerLayer = new Vector_2.default({
-                    source: new Vector_1.default(),
-                });
-                map.getLayers().set('markLayer', markerLayer);
-            }
             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
+                        radius: 10
-                    }),
-                    // 线样式
-                    stroke: new style_1.Stroke({
-                        color: '#0F0',
-                        lineCap: 'round',
-                        width: 5
                     }),
                     // 填充样式
                     fill: new style_1.Fill({
-                        color: '#00F'
+                        color: 'red',
                     })
                 }));
                 feature.setId('markers');

lib/components/upsert/web.pc.js

@@ -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 = {},
+                        update(tslib_1.__assign((_a = {}, _a[attr] = value, _a), extra));
-                            _a[attr] = value,
-                            _a));
                     }) }) }))); }), children] })));
 }
 exports.default = render;

lib/types/AbstractComponent.d.ts

@@ -47,17 +47,16 @@ export interface OakAbsRefAttrPickerRender<ED extends EntityDict & BaseEntityDic
     required?: boolean;
     value: string;
 }
-export declare type OakAbsGeoAttrsDef = {
+export interface OakAbsGeoAttrDef {
-    amapSecurityJsCode: string;
+    type: 'geo';
-    amapKey: string;
+    category: 'point';
-    type: 'getPoint';
     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 = {

lib/types/AbstractComponent.js

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

lib/utils/usefulFn.d.ts

@@ -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;

lib/utils/usefulFn.js

@@ -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这些内置属性
+            return makeNativeFixedPart(ele);
-            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]; },
-            };
         }
-        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;

src/components/map/location/index.tsx

@@ -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}
+                    center={center}
-                    markers={props.coordinate ? [props.coordinate] : undefined}
+                    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>

src/components/map/map/index.tsx

@@ -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(() => {
+    const [map, setMap] = useState<OlMap>();
-        map = new 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) {
+        if (props.center && map) {
-            map && map.getView().setCenter(fromLonLat(props.center))
+            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>;
+            const markerLayer = map.getAllLayers().find(
-            if (!markerLayer) {
+                ele => ele instanceof VectorLayer
-                markerLayer = new VectorLayer({
+            );
-                    source: new VectorSource(),
+            assert(markerLayer && markerLayer instanceof VectorLayer);
-                });
-                map.getLayers().set('markLayer', markerLayer);
-            }
             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
+                            radius: 10
-                        }),
-                        // 线样式
-                        stroke: new Stroke({
-                            color: '#0F0',
-                            lineCap: 'round',       // 设置线的两端为圆头
-                            width: 5                
                         }),
                         // 填充样式
                         fill: new Fill({
-                            color: '#00F'
+                            color: 'red',
                         })
                     })
                 );

src/components/upsert/web.pc.tsx

@@ -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,
                                         })
                                     })
                                 }

src/types/AbstractComponent.ts

@@ -63,10 +63,9 @@ export interface OakAbsRefAttrPickerRender<
     value: string;
 };
 
-export type OakAbsGeoAttrsDef = {
+export interface OakAbsGeoAttrDef {
-    amapSecurityJsCode: string;
+    type: 'geo';
-    amapKey: string;
+    category: 'point';
-    type: 'getPoint';
     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> =

src/utils/usefulFn.ts

@@ -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这些内置属性
+            return makeNativeFixedPart(ele);
-            const {
+            
-                type,
+        } else if (ele.type === 'ref') {
-                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 {
             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,