leadmap-web-front-end
v0.3.7
Published
upload demo ```typescript 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";
Downloads
4
Readme
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>
</>
);
}
菜单绑定渲染懒加载路由
/**
* @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>
)
}