@cqsjjb/jjb-react-admin-component 3.3.1-beta.6 → 3.3.1-beta.8

package/BMap/index.js

@@ -0,0 +1,167 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+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 = 700,
+  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"
+  }));
+};
+export default BMap;

package/ControlWrapper/index.js

@@ -0,0 +1,65 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Input as OriginInput, Select as OriginSelect, Cascader as OriginCascader, DatePicker as OriginDatePicker, TreeSelect as OriginTreeSelect } from 'antd';
+
+/**
+ * 通用包裹组件
+ * @param {*} WrappedComponent antd 原生组件
+ * @param {*} extraProps 额外的透传配置
+ */
+function withLabel(WrappedComponent, extraProps = {}) {
+  return function Wrapper(props) {
+    const {
+      label,
+      onChange,
+      ...restProps
+    } = props;
+    const handleChange = (val, ...args) => {
+      if (onChange) {
+        // 统一处理空字符串 -> undefined
+        onChange(val === '' ? undefined : val, ...args);
+      }
+    };
+    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
+      style: {
+        width: '100%'
+      },
+      prefix: label
+    }, extraProps, restProps, {
+      onChange: handleChange
+    }));
+  };
+}
+
+// ============ 输入类 ============
+const Input = withLabel(OriginInput);
+
+// ============ 选择类 ============
+const Select = withLabel(OriginSelect, {
+  maxTagCount: 3
+});
+const Cascader = withLabel(OriginCascader, {
+  maxTagCount: 3
+});
+const TreeSelect = withLabel(OriginTreeSelect, {
+  showSearch: true,
+  allowClear: true,
+  showCheckedStrategy: OriginTreeSelect.SHOW_PARENT,
+  treeNodeFilterProp: 'title'
+});
+
+// ============ 日期类 ============
+const DatePicker = withLabel(OriginDatePicker);
+DatePicker.RangePicker = withLabel(OriginDatePicker.RangePicker);
+DatePicker.TimePicker = withLabel(OriginDatePicker.TimePicker);
+DatePicker.WeekPicker = withLabel(OriginDatePicker.WeekPicker);
+DatePicker.MonthPicker = withLabel(OriginDatePicker.MonthPicker);
+DatePicker.QuarterPicker = withLabel(OriginDatePicker.QuarterPicker);
+DatePicker.YearPicker = withLabel(OriginDatePicker.YearPicker);
+export default {
+  Input,
+  Select,
+  Cascader,
+  TreeSelect,
+  DatePicker
+};

package/ControlWrapper/index.less

@@ -0,0 +1,38 @@
+@com-prefix-cls: if(isdefined(@ant-prefix), @ant-prefix, ant);
+
+.@{com-prefix-cls}-form-item-control-label-wrapper {
+  .@{com-prefix-cls}-form-item-control-label-span {
+    border: 1px solid #d9d9d9;
+    height: 32px;
+    line-height: 30px;
+    box-sizing: border-box;
+    margin-right: -1px;
+    padding: 0 2px 0 8px;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    white-space: nowrap;
+  }
+
+  &.@{com-prefix-cls}-form-item-control-label-has {
+    .@{com-prefix-cls}-select-selector, .@{com-prefix-cls}-picker, .@{com-prefix-cls}-input, .@{com-prefix-cls}-input-affix-wrapper {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left-color: transparent !important;
+      &:hover, &:focus, &:focus-within{
+        border-left-color: @colorPrimary !important;
+      }
+    }
+  }
+
+  &-default {
+    .@{com-prefix-cls}-form-item-control-label-span {
+      border-color: #d9d9d9;
+    }
+  }
+
+  &-dark {
+    .@{com-prefix-cls}-form-item-control-label-span {
+      border-color: #424242;
+    }
+  }
+}

package/Editor/index.js

@@ -0,0 +1,310 @@
+import '@wangeditor-next/editor/dist/css/style.css';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { message } from 'antd';
+import { http, tools } from '@cqsjjb/jjb-common-lib';
+import { createEditor, createToolbar } from '@wangeditor-next/editor';
+
+/**
+ * 工具函数：标准化 HTML 内容为空值
+ */
+function normalizeEmptyHtml(html) {
+  if (!html) return '';
+  const cleaned = html.replace(/\s+/g, '').toLowerCase();
+  return cleaned === '<p><br></p>' || cleaned === '<p></p>' || cleaned === '' ? '' : html;
+}
+
+/**
+ * 校验上传文件类型和大小
+ */
+function validateFile(file, {
+  validTypes,
+  validExts,
+  maxSize,
+  typeName
+}) {
+  const ext = file.name.split('.').pop().toLowerCase();
+  if (!validTypes.includes(file.type) && !validExts.includes(ext)) {
+    message.error(`只能上传${typeName}文件（${validExts.join(', ')}）`);
+    return false;
+  }
+  if (file.size > maxSize) {
+    message.error(`${typeName}大小不能超过 ${maxSize / 1024 / 1024}MB`);
+    return false;
+  }
+  return true;
+}
+
+/**
+ * 通用上传函数
+ */
+async function handleUpload(file, insertFn, options) {
+  const {
+    typeName,
+    validTypes,
+    validExts,
+    maxSize,
+    uploadServer,
+    uploadFileName,
+    uploadHeaders,
+    application,
+    uploadCustomRequest
+  } = options;
+  try {
+    if (!validateFile(file, {
+      validTypes,
+      validExts,
+      maxSize,
+      typeName
+    })) {
+      return;
+    }
+
+    // 自定义上传
+    if (typeof uploadCustomRequest === 'function') {
+      const url = await uploadCustomRequest(file);
+      insertFn(url, file.name);
+      return;
+    }
+
+    // 默认上传
+    const formData = new FormData();
+    formData.append(uploadFileName, file);
+    const resp = await fetch(uploadServer, {
+      method: 'POST',
+      headers: {
+        ...uploadHeaders,
+        ...(application ? {
+          tenantCode: application.tenantCode
+        } : {})
+      },
+      body: formData
+    });
+    const res = await resp.json();
+    if (res?.data?.fileUrl) {
+      insertFn(res.data.fileUrl, file.name);
+    } else if (Array.isArray(res?.data)) {
+      res.data.forEach(url => insertFn(url, file.name));
+    } else {
+      message.error(res?.respDesc || `${typeName}上传失败`);
+    }
+  } catch (e) {
+    console.error(e);
+    message.error(`${typeName}上传失败`);
+  }
+}
+const RCEditor = /*#__PURE__*/forwardRef(function RCEditor(props, ref) {
+  const {
+    value,
+    bordered = true,
+    mode = 'default',
+    height = 300,
+    disabled = false,
+    zIndex = 1000,
+    uploadUrl = `${window.process.env.app.API_HOST}/attachment/files/upload-speed-simple`,
+    uploadFileName = 'file',
+    uploadHeaders = {},
+    uploadCustomRequest,
+    placeholder = '请输入...',
+    uploadImageFileSize = 5 * 1024 * 1024,
+    uploadVideoFileSize = 50 * 1024 * 1024,
+    borderStyle = 'solid',
+    borderColor = '#e8e8e8',
+    borderWidth = 1,
+    borderRadius = 2,
+    onBlur = tools.noop,
+    onFocus = tools.noop,
+    onChange = tools.noop
+  } = props;
+
+  // 编辑器
+  const editorRef = useRef(null);
+  // 工具栏
+  const toolbarRef = useRef(null);
+  // 编辑器实例
+  const editorInstanceRef = useRef(null);
+  // 最后一次的html
+  const lastHtmlRef = useRef('');
+  // 是否是第一次聚焦
+  const isFirstFocusRef = useRef(true);
+  // 应用配置
+  const appConfig = tools.toObject(window.process?.env?.app);
+
+  // 上传地址
+  const uploadServer = useMemo(() => {
+    if (!appConfig) return uploadUrl;
+    return http.HTTP_URL_REG.test(uploadUrl) ? uploadUrl : `${appConfig.API_HOST}${uploadUrl}`;
+  }, [appConfig, uploadUrl]);
+
+  // 初始化编辑器
+  useEffect(() => {
+    if (!editorRef.current) return;
+    const editor = createEditor({
+      selector: editorRef.current,
+      config: {
+        placeholder,
+        readOnly: disabled,
+        onChange(editor) {
+          // 获取html
+          let html = editor.getHtml();
+          // 标准化html
+          html = normalizeEmptyHtml(html);
+          // 存储最后一次的html
+          lastHtmlRef.current = html;
+
+          // 如果不是第一次聚焦，并且有onChange函数，则调用onChange函数
+          if (!isFirstFocusRef.current && tools.isFunction(onChange)) {
+            onChange(html);
+          }
+        },
+        onFocus: () => {
+          // 如果是第一次聚焦，则设置为不是第一次聚焦
+          if (isFirstFocusRef.current) {
+            isFirstFocusRef.current = false;
+            return;
+          }
+          // 调用onFocus函数
+          tools.isFunction(onFocus) && onFocus();
+        },
+        onBlur: () => tools.isFunction(onBlur) && onBlur(),
+        // 菜单配置
+        MENU_CONF: {
+          uploadImage: {
+            server: uploadServer,
+            fieldName: uploadFileName,
+            maxFileSize: uploadImageFileSize,
+            headers: {
+              ...uploadHeaders,
+              ...(appConfig ? {
+                tenantCode: appConfig.tenantCode
+              } : {})
+            },
+            timeout: 60000,
+            customUpload: async (file, insertFn) => {
+              await handleUpload(file, insertFn, {
+                typeName: '图片',
+                validTypes: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/webp'],
+                validExts: ['png', 'jpg', 'jpeg', 'gif', 'webp'],
+                maxSize: uploadImageFileSize,
+                uploadServer,
+                uploadFileName,
+                uploadHeaders,
+                appConfig,
+                uploadCustomRequest
+              });
+            }
+          },
+          uploadVideo: {
+            server: uploadServer,
+            fieldName: uploadFileName,
+            maxFileSize: uploadVideoFileSize,
+            headers: {
+              ...uploadHeaders,
+              ...(appConfig ? {
+                tenantCode: appConfig.tenantCode
+              } : {})
+            },
+            timeout: 120000,
+            customUpload: async (file, insertFn) => {
+              await handleUpload(file, insertFn, {
+                typeName: '视频',
+                validTypes: ['video/mp4', 'video/webm', 'video/ogg', 'video/mkv'],
+                validExts: ['mp4', 'webm', 'ogg', 'mkv'],
+                maxSize: uploadVideoFileSize,
+                uploadServer,
+                uploadFileName,
+                uploadHeaders,
+                appConfig,
+                uploadCustomRequest
+              });
+            }
+          }
+        }
+      },
+      mode
+    });
+    createToolbar({
+      editor,
+      selector: toolbarRef.current,
+      config: {},
+      mode
+    });
+
+    // 初始化内容
+    const initialHtml = normalizeEmptyHtml(value || '');
+    // 设置html
+    editor.setHtml(initialHtml);
+    // 存储最后一次的html
+    lastHtmlRef.current = initialHtml;
+    // 禁用编辑器
+    if (disabled) editor.disable();
+    // 存储编辑器实例
+    editorInstanceRef.current = editor;
+    // 销毁编辑器
+    return () => {
+      try {
+        editor.destroy();
+      } catch (e) {}
+      editorInstanceRef.current = null;
+    };
+  }, []);
+
+  // 受控 value
+  useEffect(() => {
+    // 获取编辑器实例
+    const editor = editorInstanceRef.current;
+    if (!editor) return;
+    // 标准化html
+    const safeHtml = normalizeEmptyHtml(value || '');
+    if (safeHtml !== lastHtmlRef.current) {
+      editor.setHtml(safeHtml);
+      // 存储最后一次的html
+      lastHtmlRef.current = safeHtml;
+    }
+  }, [value]);
+
+  // disabled 切换
+  useEffect(() => {
+    const editor = editorInstanceRef.current;
+    if (!editor) return;
+    // 禁用编辑器
+    if (disabled) editor.disable();
+    // 启用编辑器
+    else editor.enable();
+  }, [disabled]);
+  // 暴露编辑器实例
+  useImperativeHandle(ref, () => ({
+    // 获取编辑器实例
+    getEditorInstance: () => editorInstanceRef.current,
+    // 获取html
+    getHtml: () => normalizeEmptyHtml(editorInstanceRef.current?.getHtml?.() || ''),
+    // 设置html
+    setHtml: html => {
+      if (!editorInstanceRef.current) return;
+      const safeHtml = normalizeEmptyHtml(html || '');
+      editorInstanceRef.current.setHtml(safeHtml);
+      lastHtmlRef.current = safeHtml;
+    },
+    // 获取纯文本
+    getPlainText: () => editorInstanceRef.current?.getText?.() || ''
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      zIndex,
+      border: bordered ? `${borderWidth}px ${borderStyle} ${borderColor}` : 'none',
+      overflow: 'hidden',
+      borderRadius
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: toolbarRef,
+    style: {
+      borderBottom: bordered ? `${borderWidth}px ${borderStyle} ${borderColor}` : 'none'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: editorRef,
+    style: {
+      height,
+      overflowY: 'auto'
+    }
+  }));
+});
+export default RCEditor;

package/ErrorBoundary/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Result } from 'antd';
+export default class ErrorBoundary extends React.Component {
+  state = {
+    hasError: false,
+    errorInfo: '',
+    errorStack: undefined
+  };
+  componentDidCatch(error, info) {
+    this.setState({
+      hasError: true,
+      errorInfo: error.message,
+      errorStack: info.componentStack
+    });
+  }
+  render() {
+    if (this.state.hasError) {
+      return /*#__PURE__*/React.createElement(Result, {
+        status: "error",
+        title: "\u62B1\u6B49\uFF0C\u5E94\u7528\u5185\u90E8\u53D1\u751F\u5F02\u5E38\u9519\u8BEF\u3002",
+        subTitle: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, this.state.errorInfo), /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: 700,
+            display: 'inline-block',
+            overflow: 'auto',
+            maxHeight: 400,
+            textAlign: 'left',
+            whiteSpace: 'pre-line'
+          }
+        }, this.state.errorStack))
+      });
+    }
+    return this.props.children;
+  }
+}