leadmap

• upload demo

import React, { useEffect, useRef, useState } from "react";
import { Progress, Row, Col, } from "antd";
import { ProgressProps } from "antd/lib/progress";
import { UploaderCore } from "leadmap-web-front-end";



export function MyUpload() {
  const [precent, setPrecent] = useState(0);
  const [status, setStatus] = useState<ProgressProps["status"]>("normal");
  const [file, setFile] = useState<File>(null);
  const [downloadurl, setDownloadurl] = useState<string>(null);

  const uploader = useRef<UploaderCore>(null);
  const ok_file = useRef<File>(null);


  useEffect(() => {
    if (!file) {
      return;
    }

    new UploaderCore({
      "downloadUrl": "http://183.129.204.238:19007/fastdfs/",
      "endpoint": "http://192.168.1.45:8005/upload/part/file",
      "onError": (error) => {
        setStatus("exception");
        console.error("Failed because: " + error);
      },
      "onProgress": (bytesSent, bytesTotal) => {
        const percentage = (bytesSent / bytesTotal * 100).toFixed(2);
        setPrecent(+percentage);
        console.log(bytesSent, bytesTotal, percentage + "%")
      },
      "onSuccess": (url, id, upload) => {
        ok_file.current = upload.file as File;
        setDownloadurl(url);
        setPrecent(100);
        setStatus("success");
        console.log("下载地址 %s, 文件id %s", url, id);
      }
    }).read(file, _uploader => {
      uploader.current = _uploader;
    });

    return () => uploader.current = null;
  }, [file]);

  // new Blob([{}], {"t"})

  useEffect(() => {
    if (!uploader.current) return;

    if (status === "active") {
      uploader.current.start();
    } else if (status === "normal") {
      uploader.current.abort();
    }
  }, [status]);


  return (
    <>
      <Row>
        <Col span={12} push={6}>
          <Progress percent={precent} status={status} />
        </Col>
      </Row>
      <Row>
        <Col span={12} push={6}>
          <input type="file" onChange={(ev) => {
            if (file !== ev.target.files[0]) {
              setPrecent(0);
              setStatus("normal");
            }
            setFile(ev.target.files[0]);
          }} />
          <button onClick={() => {
            if (file) setStatus("active");
          }}>start</button>
          <button onClick={() => {
            if (file) setStatus("normal");
          }}>stop</button>
        </Col>
      </Row>
      <Row>
        <Col span={12} push={6}>
          { status === "success" ? <a href={downloadurl}>{`下载: ${ok_file.current.name}`}</a> : null }
        </Col>
      </Row>
    </>
  );
}

• 菜单绑定渲染懒加载路由（不再维护dynamic_renders_routers）

/**
 * @interface 权限菜单定义
 * @description page 表示唯一路由，label 表示菜单中文名
 */
export
interface subMenus_t {
  label: string;
  page: string;
  icon?: string;
  subMenus?: subMenus_t[];
  menuApi?: any;
}


const menus: subMenus_t[];
// 之后赋值到menus 


// 一个渲染懒路由的示例
class A extends React.Component {


  render() {

    return (
      <>
      {
        dynamic_renders_routers(menus, {
          "page1": { // <Route /> 组件属性 和其它扩展属性
            "path": "page1", // 相对路由，跟随之前的路由
            "toload": [() => import("../page1.jsx"), { other: "附加属性" }]
          },
          "page2": {
            "path": "/page2", // 绝对路由
            "toload": () => import("../page2.jsx")
          },
          "*": {
            "path": "/404",
            "toload": () => import("../404.jsx")
          }
        }, {
          with_switch: {
            // <Switch />组件属性
          },
          with_Redirect: {
            // <Redirect />组件属性
          }
        })
      }
      </>
    )

  }
}

• 懒加载路由，单组件

import { LazyRoute } from "leadmap-web-front-end";

const Detail = () => import("../../common/work_order_detail/index.jsx");

function() {

  return (
    <Switch>
      <Route exact path={match.url} render={rest => <Ywgdgl {...rest} menu={menu} snapshot={ref.current} />} />
      <LazyRoute path={match.url + "/查看详情"} renderFactory="component" toload={[Detail, { aaa: 1022 }]} />
      <LazyRoute path={match.url + "/确认处理情况"} renderFactory="component" toload={[Detail, { aaa: 1022 }]} />
      <Redirect to={match.url} />
    </Switch>
  )
  
}

• 错误捕捉

import { ErrorCatch } from 'leadmap-web-front-end';
import { notification } from 'antd';

function err_handler(error: Error) {
  notification.error({
    message: error.name,
    description: (
      <>
        <code style={{ overflow: 'auto' }}><pre>{`${error.message}`}</pre></code>
      </>
    ),
    duration: null,
  });
}

// 渲染异常
function App() {
  let a = 10;
  return <div>{a.b}</div>;
}

export default ErrorCatch(err_handler)(App);

• 工具类函数
  • blob转url： BlobToDataURL
  • url转img： DataUrlToImage
  • img转url： ImageToDataURL
  • base64转blob： Base64ToBlob
  • img转blob： ImageToBlob