@cqsjjb/jjb-react-admin-component 3.1.4 → 3.2.0-beta.0

package/BMap/index.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+export interface BMapProps {
+  /** 初始经度 默认-116.404 */
+  lng?: number;
+  /** 初始纬度 默认-39.915 */
+  lat?: number;
+  /** 标题 默认-百度地图 */
+  title?: string;
+  /** 地图弹窗宽度 默认-700 */
+  width?: number;
+  /** 确认事件 返回选择的位置信息 */
+  onOk?: (data: {
+    // 经度
+    lng: number;
+    // 纬度
+    lat: number;
+    // 选择的位置信息对象
+    comp?: {
+      // 省份
+      province: string;
+      // 城市
+      city: string;
+      // 区县
+      district: string;
+      // 街道
+      street: string;
+      // 门牌号
+      streetNumber: string;
+    };
+    // 选择的位置详细信息文本
+    compText?: string;
+  }) => void;
+  /** 取消事件 */
+  onCancel?: () => void;
+}
+
+declare const BMap: React.FC<BMapProps>;
+
+export default BMap;

package/BMap/index.js

@@ -0,0 +1,185 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Col, message, Modal, Result, Row } from 'antd';
+import './index.less';
+const _B_MAP_SEARCH_ = '_B_MAP_SEARCH_';
+const _B_MAP_DEFAULT_POINT_ = {
+  lng: 116.404,
+  lat: 39.915
+};
+const BMap = ({
+  lng: propLng,
+  lat: propLat,
+  title,
+  width,
+  onOk,
+  onCancel
+}) => {
+  const [lng, setLng] = useState(_B_MAP_DEFAULT_POINT_.lng);
+  const [lat, setLat] = useState(_B_MAP_DEFAULT_POINT_.lat);
+  const GL = useRef(null);
+  const mapRef = useRef(null);
+
+  /** 初始化地图 */
+  useEffect(() => {
+    if (typeof window.BMapGL === 'undefined') {
+      message.error('未导入百度地图文件，生成地图失败！').then(() => null);
+      return;
+    }
+    const initLng = propLng || _B_MAP_DEFAULT_POINT_.lng;
+    const initLat = propLat || _B_MAP_DEFAULT_POINT_.lat;
+    setLng(initLng);
+    setLat(initLat);
+    const point = new window.BMapGL.Point(initLng, initLat);
+    const map = new window.BMapGL.Map(GL.current);
+    mapRef.current = map;
+    map.centerAndZoom(point, 18);
+    map.enableScrollWheelZoom(true);
+    map.addControl(new window.BMapGL.ScaleControl());
+    map.addControl(new window.BMapGL.ZoomControl());
+    map.addControl(new window.BMapGL.NavigationControl3D());
+    map.addControl(new window.BMapGL.CityListControl({
+      anchor: window.BMAP_ANCHOR_TOP_LEFT,
+      offset: new window.BMapGL.Size(10, 10),
+      onChangeSuccess: e => {
+        map.clearOverlays();
+        setLng(e.point.lng);
+        setLat(e.point.lat);
+        const p = new window.BMapGL.Point(e.point.lng, e.point.lat);
+        const marker = new window.BMapGL.Marker(p);
+        map.addOverlay(marker);
+      }
+    }));
+    const locationControl = new window.BMapGL.LocationControl({
+      anchor: window.BMAP_ANCHOR_BOTTOM_LEFT,
+      offset: new window.BMapGL.Size(20, 20)
+    });
+    locationControl.addEventListener('locationError', () => message.error('未知原因，定位失败！'));
+    map.addControl(locationControl);
+    const marker = new window.BMapGL.Marker(point);
+    map.addOverlay(marker);
+    map.addEventListener('click', e => {
+      map.clearOverlays();
+      setLng(e.latlng.lng);
+      setLat(e.latlng.lat);
+      const p = new window.BMapGL.Point(e.latlng.lng, e.latlng.lat);
+      const marker = new window.BMapGL.Marker(p);
+      map.addOverlay(marker);
+    });
+    setTimeout(() => {
+      const autoComplete = new window.BMapGL.Autocomplete({
+        input: _B_MAP_SEARCH_,
+        location: map
+      });
+      let myValue;
+      autoComplete.addEventListener('onconfirm', e => {
+        const value = e.item.value;
+        myValue = value.province + value.city + value.district + value.street + value.business;
+        setPlace();
+      });
+      function setPlace() {
+        const local = new window.BMapGL.LocalSearch(map, {
+          onSearchComplete: myFun
+        });
+        map.clearOverlays();
+        function myFun() {
+          const pp = local.getResults().getPoi(0).point;
+          setLng(pp.lng);
+          setLat(pp.lat);
+          map.centerAndZoom(pp, 18);
+          map.addOverlay(new window.BMapGL.Marker(pp));
+        }
+        local.search(myValue);
+      }
+    }, 500);
+  }, [propLng, propLat]);
+
+  /** 重置地图 */
+  const onResetMap = useCallback(() => {
+    if (!mapRef.current) return;
+    const map = mapRef.current;
+    map.clearOverlays();
+    setLng(_B_MAP_DEFAULT_POINT_.lng);
+    setLat(_B_MAP_DEFAULT_POINT_.lat);
+    const point = new window.BMapGL.Point(_B_MAP_DEFAULT_POINT_.lng, _B_MAP_DEFAULT_POINT_.lat);
+    const marker = new window.BMapGL.Marker(point);
+    map.centerAndZoom(_B_MAP_DEFAULT_POINT_, 18);
+    map.addOverlay(marker);
+  }, []);
+
+  /** 确认操作 */
+  const handleOk = useCallback(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    const point = new window.BMapGL.Point(lng, lat);
+    const geocoder = new window.BMapGL.Geocoder();
+    geocoder.getLocation(point, (rs = {}) => {
+      const comp = rs?.addressComponents;
+      onOk && onOk({
+        lng,
+        lat,
+        comp,
+        compText: comp && [comp.province, comp.city, comp.district, comp.street, comp.streetNumber].join('') || undefined
+      });
+    });
+  }, [lng, lat, onOk]);
+  const hasMapScript = typeof window.BMapGL !== 'undefined';
+  return /*#__PURE__*/React.createElement(Modal, {
+    open: true,
+    destroyOnClose: true,
+    title: title,
+    width: width,
+    footer: hasMapScript && /*#__PURE__*/React.createElement(Row, {
+      align: "middle",
+      justify: "space-between"
+    }, /*#__PURE__*/React.createElement(Col, null, "\u5F53\u524D\u5750\u6807\uFF1A", [lng, lat].join('-')), /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(Button, {
+      ghost: true,
+      type: "primary",
+      style: {
+        marginRight: 12
+      },
+      onClick: onResetMap
+    }, "\u91CD\u7F6E\u5730\u56FE"), /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      onClick: handleOk
+    }, "\u786E\u8BA4\u5750\u6807"))),
+    maskClosable: false,
+    onCancel: () => onCancel && onCancel()
+  }, hasMapScript ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: GL,
+    style: {
+      height: 500,
+      userSelect: 'none'
+    }
+  }), /*#__PURE__*/React.createElement("input", {
+    id: _B_MAP_SEARCH_,
+    type: "text",
+    maxLength: 30,
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57\u67E5\u8BE2"
+  })) : /*#__PURE__*/React.createElement(Result, {
+    status: "error",
+    title: "\u52A0\u8F7D\u5730\u56FE\u5931\u8D25\uFF0C\u7F3A\u5C11\u5FC5\u8981\u7684\u6587\u4EF6\uFF01"
+  }));
+};
+BMap.defaultProps = {
+  lng: 0,
+  lat: 0,
+  title: '百度地图',
+  width: 700
+};
+BMap.propTypes = {
+  lng: PropTypes.number,
+  lat: PropTypes.number,
+  width: PropTypes.number,
+  // 地图宽度
+  title: PropTypes.string,
+  // 标题
+  onOk: PropTypes.func,
+  // 确认事件
+  onCancel: PropTypes.func // 取消事件
+};
+export default BMap;

package/BMap/index.less

@@ -0,0 +1,36 @@
+#_B_MAP_SEARCH_ {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 10;
+    color: rgb(102 102 102);
+    box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
+    border: none;
+    height: 32px;
+    line-height: 32px;
+    width: 300px;
+    padding: 0 10px;
+    font-size: 12px;
+    outline: none;
+    border-radius: 3px;
+  }
+  
+  .tangram-suggestion-main {
+    z-index: 1000;
+    margin-top: 6px;
+  
+    .tangram-suggestion {
+      border: none;
+      box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
+      border-radius: 3px;
+    }
+  }
+  
+  #selCityWd {
+    box-sizing: content-box;
+  }
+  
+  .city_content_top {
+    box-sizing: content-box;
+  }
+  

package/ControlWrapper/index.d.ts

@@ -1,73 +1,59 @@
-// @ts-ignore
 import * as React from 'react';
-// @ts-ignore
-import { Moment } from 'moment';
-// @ts-ignore
-import { DefaultOptionType, FieldNamesType } from 'antd/es/cascader';
-import { ComponentProps } from '../types';
+import { Dayjs } from 'dayjs';
+import {
+  Input as OriginInput,
+  Select as OriginSelect,
+  Cascader as OriginCascader,
+  DatePicker as OriginDatePicker,
+  TreeSelect as OriginTreeSelect,
+} from 'antd';
 
-interface BaseProps<T> extends ComponentProps {
-  // 输入内容
-  value?: T;
-  // 标签
+/** 公共扩展 props */
+interface ExtraProps<T> {
+  /** 标签文本 */
   label?: string;
-  // 标签宽度
+  /** 标签宽度 (Col span) */
   labelSpan?: number;
-  // 内容清空
-  allowClear?: boolean;
-  // 占位符
-  placeholder?: string;
-  // 输出事件
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 受控值 */
+  value?: T;
+  /** 值变化回调 */
   onChange?: (value: T) => void;
 }
 
-interface InputProps<T> extends BaseProps<T> {
-  // 文本长度
-  maxLength?: number;
-}
+/** 包装后的类型工具 */
+type WithExtraProps<C, T = any> = React.FC<
+  React.ComponentProps<C> & ExtraProps<T>
+>;
 
-interface SelectProps<T> extends BaseProps<T> {
-  // 设置 Select 的模式为多选或标签
-  mode?: 'multiple' | 'tags';
-  // 最多显示多少个tag
-  maxTagCount?: number;
-}
+declare const ControlWrapper: {
+  /** 输入框 */
+  Input: WithExtraProps<typeof OriginInput, string | number>;
 
-interface CascaderProps<T> extends BaseProps<T> {
-  // 可选项数据源
-  options?: DefaultOptionType[];
-  // 支持多选节点
-  multiple?: boolean;
-  // 自定义 options 中 label value children 的字段
-  fieldNames?: FieldNamesType;
-  // 最多显示多少个tag
-  maxTagCount?: number;
-  // 定义选中项回填的方式
-  showCheckedStrategy?: 'SHOW_CHILD' | 'SHOW_PARENT';
-}
+  /** 下拉选择 */
+  Select: WithExtraProps<typeof OriginSelect, string | number>;
 
-interface DatePickerProps<T> {
-  // 标签
-  label?: string;
-  // 输入
-  value?: T;
-  // 格式日期
-  format?: string;
-  // 输出事件
-  onChange?: (value: T) => void;
-}
+  /** 级联选择 */
+  Cascader: WithExtraProps<typeof OriginCascader, (string | number)[]>;
 
-declare const ControlWrapper: {
-  // 输入
-  Input: React.FC<InputProps<string | number>>;
-  // 选择
-  Select: React.FC<SelectProps<string | number>>;
-  // 级联选择
-  Cascader: React.FC<CascaderProps<string[] | number[]>>;
-  // 日期选择
-  DatePicker: React.FC<DatePickerProps<Moment>> & {
-    // 日期范围选择
-    RangePicker: React.FC<DatePickerProps<Moment[]>>
+  /** 树形选择 */
+  TreeSelect: WithExtraProps<typeof OriginTreeSelect, string | number>;
+
+  /** 日期选择 */
+  DatePicker: WithExtraProps<typeof OriginDatePicker, Dayjs> & {
+    /** 时间选择 */
+    TimePicker: WithExtraProps<typeof OriginDatePicker.TimePicker, Dayjs>;
+    /** 日期范围选择 */
+    RangePicker: WithExtraProps<typeof OriginDatePicker.RangePicker, Dayjs[]>;
+    /** 周选择 */
+    WeekPicker: WithExtraProps<typeof OriginDatePicker.WeekPicker, Dayjs>;
+    /** 月选择 */
+    MonthPicker: WithExtraProps<typeof OriginDatePicker.MonthPicker, Dayjs>;
+    /** 季度选择 */
+    QuarterPicker: WithExtraProps<typeof OriginDatePicker.QuarterPicker, Dayjs>;
+    /** 年选择 */
+    YearPicker: WithExtraProps<typeof OriginDatePicker.YearPicker, Dayjs>;
   };
 };