Merge branch 'dev' of codeup.aliyun.com:61c14a7efa282c88e103c23f/oak-general-business into dev
This commit is contained in:
commit
5f120c813f
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
&-list {
|
||||
height: 500px;
|
||||
overflow: auto;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
|
|
@ -15,7 +16,8 @@
|
|||
}
|
||||
|
||||
&-checked {
|
||||
color: var(--oak-brand-color);
|
||||
color: var(--oak-primary-color);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&-loadingBox {
|
||||
|
|
@ -24,16 +26,5 @@
|
|||
justify-content: center;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
&-noData {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
min-height: 100px;
|
||||
align-items: center;
|
||||
color: var(--oak-text-color-placeholder);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +1,22 @@
|
|||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
Modal,
|
||||
Row,
|
||||
Col,
|
||||
List,
|
||||
Input,
|
||||
InputValue,
|
||||
ModalProps,
|
||||
Button,
|
||||
Loading,
|
||||
DialogProps,
|
||||
} from 'tdesign-react';
|
||||
import { SearchIcon, CheckCircleFilledIcon } from 'tdesign-icons-react';
|
||||
Input,
|
||||
List,
|
||||
Empty,
|
||||
Spin,
|
||||
} from 'antd';
|
||||
import { SearchOutlined, CheckCircleFilled } from '@ant-design/icons';
|
||||
import { Geolocation, GeolocationProps } from '@uiw/react-amap';
|
||||
import Map from './../map';
|
||||
import PositionPicker from './PositionPicker'
|
||||
import './index.less';
|
||||
|
||||
const { ListItem, ListItemMeta } = List;
|
||||
|
||||
export type LocationProps = {
|
||||
akey: string;
|
||||
|
|
@ -32,7 +31,7 @@ export type LocationProps = {
|
|||
) => void;
|
||||
geolocationProps?: GeolocationProps;
|
||||
useGeolocation?: boolean;
|
||||
dialogProps?: DialogProps;
|
||||
dialogProps?: ModalProps;
|
||||
};
|
||||
|
||||
export type Poi = {
|
||||
|
|
@ -72,8 +71,8 @@ const Location = (props: LocationProps) => {
|
|||
} = props;
|
||||
const prefixCls = 'oak';
|
||||
|
||||
const searchRef = useRef();
|
||||
const [searchValue, setSearchValue] = useState<InputValue>('');
|
||||
const searchRef = useRef<any>();
|
||||
const [searchValue, setSearchValue] = useState<string>('');
|
||||
const [refresh, setRefresh] = useState(true); // 点击poi不触发setPositionPickerResult
|
||||
const [mode, setMode] = useState<Mode>('dragMap');
|
||||
|
||||
|
|
@ -224,15 +223,18 @@ const Location = (props: LocationProps) => {
|
|||
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
<Modal
|
||||
width="80%"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
title="选择位置"
|
||||
{...dialogProps}
|
||||
visible={visible}
|
||||
onClose={() => {
|
||||
open={visible}
|
||||
onCancel={() => {
|
||||
onClose && onClose();
|
||||
clearData();
|
||||
}}
|
||||
onConfirm={() => {
|
||||
onOk={() => {
|
||||
if (!currentPoi) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -245,8 +247,8 @@ const Location = (props: LocationProps) => {
|
|||
}}
|
||||
>
|
||||
<div className={`${prefixCls}-location`}>
|
||||
<Row>
|
||||
<Col xs={12} sm={7}>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={24} sm={14}>
|
||||
<Map
|
||||
className={`${prefixCls}-location-map`}
|
||||
akey={akey}
|
||||
|
|
@ -290,7 +292,7 @@ const Location = (props: LocationProps) => {
|
|||
)}
|
||||
</Map>
|
||||
</Col>
|
||||
<Col xs={12} sm={5}>
|
||||
<Col xs={24} sm={10}>
|
||||
<div>
|
||||
<List
|
||||
className={`${prefixCls}-location-list`}
|
||||
|
|
@ -302,14 +304,11 @@ const Location = (props: LocationProps) => {
|
|||
ref={searchRef}
|
||||
placeholder="搜索地点"
|
||||
value={searchValue}
|
||||
clearable
|
||||
onChange={(value) => {
|
||||
setSearchValue(value);
|
||||
allowClear
|
||||
onChange={(e) => {
|
||||
setSearchValue(e.target.value);
|
||||
}}
|
||||
onClear={() => {
|
||||
setSearchValue('');
|
||||
}}
|
||||
prefixIcon={<SearchIcon />}
|
||||
prefix={<SearchOutlined />}
|
||||
onFocus={() => {
|
||||
setMode('searchPoi');
|
||||
setFocus(true);
|
||||
|
|
@ -321,8 +320,7 @@ const Location = (props: LocationProps) => {
|
|||
{mode === 'searchPoi' && (
|
||||
<Button
|
||||
style={{ marginLeft: 5 }}
|
||||
variant="text"
|
||||
theme="primary"
|
||||
type="link"
|
||||
onClick={() => {
|
||||
setMode('dragMap');
|
||||
setSearchValue('');
|
||||
|
|
@ -347,24 +345,23 @@ const Location = (props: LocationProps) => {
|
|||
setCurrentPoi(poi);
|
||||
}}
|
||||
>
|
||||
<ListItem
|
||||
action={
|
||||
currentPoi?.id ===
|
||||
poi.id ? (
|
||||
<CheckCircleFilledIcon
|
||||
className={`${prefixCls}-location-list-checked`}
|
||||
size={24}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: 24,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<List.Item
|
||||
actions={[
|
||||
<div
|
||||
style={{
|
||||
width: 24,
|
||||
}}
|
||||
>
|
||||
{currentPoi?.id ===
|
||||
poi.id && (
|
||||
<CheckCircleFilled
|
||||
className={`${prefixCls}-location-list-checked`}
|
||||
/>
|
||||
)}
|
||||
</div>,
|
||||
]}
|
||||
>
|
||||
<ListItemMeta
|
||||
<List.Item.Meta
|
||||
title={poi.name}
|
||||
description={`${
|
||||
poi.distance
|
||||
|
|
@ -372,7 +369,7 @@ const Location = (props: LocationProps) => {
|
|||
: ''
|
||||
}${poi.address}`}
|
||||
/>
|
||||
</ListItem>
|
||||
</List.Item>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
@ -382,15 +379,10 @@ const Location = (props: LocationProps) => {
|
|||
<div
|
||||
className={`${prefixCls}-location-list-loadingBox`}
|
||||
>
|
||||
<Loading
|
||||
<Spin
|
||||
delay={0}
|
||||
fullscreen={false}
|
||||
indicator
|
||||
inheritColor={false}
|
||||
loading
|
||||
preventScrollThrough
|
||||
showOverlay
|
||||
size="medium"
|
||||
spinning
|
||||
size="default"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -406,26 +398,23 @@ const Location = (props: LocationProps) => {
|
|||
);
|
||||
}}
|
||||
>
|
||||
<ListItem
|
||||
action={
|
||||
currentPoi?.id ===
|
||||
poi.id ? (
|
||||
<CheckCircleFilledIcon
|
||||
className={`${prefixCls}-location-list-checked`}
|
||||
size={
|
||||
24
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: 24,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<List.Item
|
||||
actions={[
|
||||
<div
|
||||
style={{
|
||||
width: 24,
|
||||
}}
|
||||
>
|
||||
{currentPoi?.id ===
|
||||
poi.id && (
|
||||
<CheckCircleFilled
|
||||
className={`${prefixCls}-location-list-checked`}
|
||||
/>
|
||||
)}
|
||||
</div>,
|
||||
]}
|
||||
>
|
||||
<ListItemMeta
|
||||
<List.Item.Meta
|
||||
title={
|
||||
poi.name
|
||||
}
|
||||
|
|
@ -437,16 +426,18 @@ const Location = (props: LocationProps) => {
|
|||
poi.address
|
||||
}`}
|
||||
/>
|
||||
</ListItem>
|
||||
</List.Item>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
: show && (
|
||||
<div
|
||||
className={`${prefixCls}-location-list-noData`}
|
||||
>
|
||||
无搜素结果
|
||||
</div>
|
||||
: show &&
|
||||
!searchLoading && (
|
||||
<Empty
|
||||
description="无搜索结果"
|
||||
image={
|
||||
Empty.PRESENTED_IMAGE_SIMPLE
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
|
@ -455,7 +446,7 @@ const Location = (props: LocationProps) => {
|
|||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: 'center';
|
||||
align-items: 'center';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import { Button, Space, Drawer, DialogPlugin } from 'tdesign-react';
|
||||
import { ChevronUpIcon } from 'tdesign-icons-react';
|
||||
// import { saveAs } from 'file-saver';
|
||||
import { Button, Space, Drawer, Modal, Tooltip } from 'antd';
|
||||
import { UpOutlined } from '@ant-design/icons';
|
||||
|
||||
export default function render(this: any) {
|
||||
const { placement = 'bottom', style = {} } = this.props;
|
||||
|
|
@ -9,14 +8,14 @@ export default function render(this: any) {
|
|||
return (
|
||||
<React.Fragment>
|
||||
<Button
|
||||
variant="text"
|
||||
type="text"
|
||||
shape="circle"
|
||||
theme="primary"
|
||||
icon={<ChevronUpIcon />}
|
||||
icon={<UpOutlined style={{ fontSize: 16 }} />}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
right: '45vw',
|
||||
zIndex: 999,
|
||||
...style,
|
||||
}}
|
||||
onClick={() => {
|
||||
|
|
@ -26,114 +25,141 @@ export default function render(this: any) {
|
|||
|
||||
<Drawer
|
||||
placement={placement}
|
||||
visible={visible}
|
||||
open={visible}
|
||||
onClose={() => {
|
||||
this.setVisible(false);
|
||||
}}
|
||||
header="Debug控制台"
|
||||
title="Debug控制台"
|
||||
footer={<></>}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
accept='application/json'
|
||||
accept="application/json"
|
||||
hidden
|
||||
id="upload"
|
||||
onChange={()=>{
|
||||
onChange={() => {
|
||||
const that = this;
|
||||
const file = (document.getElementById('upload') as any).files[0];
|
||||
const file = (document.getElementById('upload') as any)
|
||||
.files[0];
|
||||
if (typeof FileReader === undefined) {
|
||||
alert('浏览器版本太老了');
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(file);
|
||||
reader.onload = function() {
|
||||
reader.onload = function () {
|
||||
try {
|
||||
const data = JSON.parse(this.result as string);
|
||||
const data = JSON.parse(
|
||||
this.result as string
|
||||
);
|
||||
that.features.localStorage.resetAll(data);
|
||||
window.location.reload();
|
||||
}
|
||||
catch(err) {
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Space breakLine={true} direction="horizontal" size="medium">
|
||||
<Button
|
||||
theme="primary"
|
||||
shape="circle"
|
||||
onClick={() => this.printRunningTree()}
|
||||
>
|
||||
R
|
||||
</Button>
|
||||
<Button
|
||||
theme="primary"
|
||||
shape="circle"
|
||||
onClick={() => this.printDebugStore()}
|
||||
>
|
||||
S
|
||||
</Button>
|
||||
<Button
|
||||
theme="primary"
|
||||
shape="circle"
|
||||
onClick={() => this.printCachedStore()}
|
||||
>
|
||||
C
|
||||
</Button>
|
||||
<Button
|
||||
theme="primary"
|
||||
shape="circle"
|
||||
onClick={() => {
|
||||
const data = this.features.localStorage.loadAll();
|
||||
const element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(data)));
|
||||
element.setAttribute('download', 'data.json');
|
||||
<Space wrap={true}>
|
||||
<Tooltip title="页面结构">
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
shape="circle"
|
||||
onClick={() => this.printRunningTree()}
|
||||
>
|
||||
R
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="Store数据">
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
shape="circle"
|
||||
onClick={() => this.printDebugStore()}
|
||||
>
|
||||
S
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
<Tooltip title="页面缓存">
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
shape="circle"
|
||||
onClick={() => this.printCachedStore()}
|
||||
>
|
||||
C
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="下载Store">
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
shape="circle"
|
||||
onClick={() => {
|
||||
const data =
|
||||
this.features.localStorage.loadAll();
|
||||
const element = document.createElement('a');
|
||||
element.setAttribute(
|
||||
'href',
|
||||
'data:text/plain;charset=utf-8,' +
|
||||
encodeURIComponent(JSON.stringify(data))
|
||||
);
|
||||
element.setAttribute('download', 'data.json');
|
||||
|
||||
element.click();
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
|
||||
document.body.removeChild(element);
|
||||
}}
|
||||
>
|
||||
D
|
||||
</Button>
|
||||
element.click();
|
||||
|
||||
<Button
|
||||
theme="primary"
|
||||
shape="circle"
|
||||
onClick={() => {
|
||||
const element = document.getElementById('upload');
|
||||
element!.click();
|
||||
}}
|
||||
>
|
||||
U
|
||||
</Button>
|
||||
<Button
|
||||
theme="warning"
|
||||
shape="circle"
|
||||
onClick={() => {
|
||||
const confirmDia = DialogPlugin.confirm!({
|
||||
header: '重置数据',
|
||||
body: '重置后，原来的数据不可恢复',
|
||||
confirmBtn: '确定',
|
||||
cancelBtn: '取消',
|
||||
onConfirm: ({ e }) => {
|
||||
this.resetInitialData();
|
||||
confirmDia.hide!();
|
||||
window.location.reload();
|
||||
},
|
||||
onClose: ({ e, trigger }) => {
|
||||
confirmDia.hide!();
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
document.body.removeChild(element);
|
||||
}}
|
||||
>
|
||||
D
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="上传Store">
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
shape="circle"
|
||||
onClick={() => {
|
||||
const element =
|
||||
document.getElementById('upload');
|
||||
element!.click();
|
||||
}}
|
||||
>
|
||||
U
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="重置Store">
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
danger
|
||||
shape="circle"
|
||||
onClick={() => {
|
||||
const modal = Modal.confirm!({
|
||||
title: '重置数据',
|
||||
content: '重置后，原来的数据不可恢复',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: (e) => {
|
||||
this.resetInitialData();
|
||||
modal.destroy!();
|
||||
window.location.reload();
|
||||
},
|
||||
onCancel: (e) => {
|
||||
modal.destroy!();
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</Drawer>
|
||||
</React.Fragment>
|
||||
|
|
|
|||
Loading…
Reference in New Issue