新增HeaderBack,用于下级页面返回
parent
d169df6f21
commit
7143b29fb3
|
|
@ -0,0 +1,18 @@
|
|||
import type { FC, ReactNode } from "react";
|
||||
|
||||
export interface HeaderBackProps {
|
||||
/** 标题 */
|
||||
title: ReactNode;
|
||||
/** 历史记录对象,用于返回上一页,默认使用 window.history.back */
|
||||
history?: {
|
||||
goBack?: () => void;
|
||||
[key: string]: any;
|
||||
};
|
||||
/** 是否显示返回按钮,默认为 true */
|
||||
previous?: boolean;
|
||||
}
|
||||
|
||||
/** 头部返回组件 */
|
||||
declare const HeaderBack: FC<HeaderBackProps>;
|
||||
|
||||
export default HeaderBack;
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import { ArrowLeftOutlined } from "@ant-design/icons";
|
||||
import { Divider } from "antd";
|
||||
import "./index.less";
|
||||
|
||||
/**
|
||||
* 头部返回组件
|
||||
*/
|
||||
function HeaderBack(props) {
|
||||
const { title, history, previous = true } = props;
|
||||
|
||||
return (
|
||||
<div className="header-back">
|
||||
<div className="action">
|
||||
{
|
||||
previous
|
||||
&& (
|
||||
<>
|
||||
<div
|
||||
className="back"
|
||||
onClick={() => history?.goBack?.() || window.history.back()}
|
||||
>
|
||||
<ArrowLeftOutlined style={{ fontSize: 14 }} />
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<Divider type="vertical" style={{ backgroundColor: "#dcdfe6", marginLeft: 15, marginRight: 15 }} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
<div className="title">{title}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeaderBack;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.header-back {
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,18 @@
|
|||
import { Button, Col, Form, Input, Modal, Row, Spin } from "antd";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
const MapSelector = ({
|
||||
visible,
|
||||
onClose,
|
||||
longitude,
|
||||
latitude,
|
||||
onConfirm, // 新增确认回调
|
||||
}) => {
|
||||
/**
|
||||
* 定位组件弹窗
|
||||
*/
|
||||
const MapSelector = (props) => {
|
||||
const {
|
||||
visible,
|
||||
onClose,
|
||||
longitude,
|
||||
latitude,
|
||||
onConfirm,
|
||||
} = props;
|
||||
|
||||
const mapContainerRef = useRef(null);
|
||||
const mapInstanceRef = useRef(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@ import { Button, Col, Form, Input, Row } from "antd";
|
|||
import { useState } from "react";
|
||||
import MapSelector from "./MapSelector";
|
||||
|
||||
/**
|
||||
* 定位组件
|
||||
*/
|
||||
const Map = (props) => {
|
||||
const {
|
||||
longitudeProps = "longitude",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ import { useState } from "react";
|
|||
import { Document, Page, pdfjs } from "react-pdf";
|
||||
import { getFileUrl } from "../../utils/index";
|
||||
|
||||
/**
|
||||
* PDF查看组件
|
||||
*/
|
||||
function Pdf(props) {
|
||||
const {
|
||||
visible = false,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
import { Image } from "antd";
|
||||
import { getFileUrl } from "../../utils/index";
|
||||
|
||||
/**
|
||||
* 在查看页面中图片预览组件
|
||||
*/
|
||||
const PreviewImg = (props) => {
|
||||
const { files = [], fileUrlKey = "filePath" } = props;
|
||||
|
||||
const fileUrl = getFileUrl();
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@ import { Button, Space } from "antd";
|
|||
import { useState } from "react";
|
||||
import Pdf from "../Pdf";
|
||||
|
||||
/**
|
||||
* 在查看页面中PDF查看组件
|
||||
*/
|
||||
const PreviewPdf = (props) => {
|
||||
const {
|
||||
files = [],
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ function TablePro(props) {
|
|||
rowKey = 'id',
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
const storeIndex = props.storeIndex || `${window.process.env.app.antd["ant-prefix"]}_${Math.random().toString(36).substring(2)}`;
|
||||
function calcColumns() {
|
||||
showIndex && columns.unshift(getIndexColumn(props.pagination));
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { Tag, Tooltip } from "antd";
|
||||
import PreviewImg from "~/components/PreviewImg";
|
||||
|
||||
/**
|
||||
* 在表格组件中图片查看组件
|
||||
*/
|
||||
const TooltipPreviewImg = (props) => {
|
||||
const { files = [], fileUrlKey = "filePath" } = props;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue