Oak-Team
/
oak-general-business
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 38 Wiki Activity

Merge branch 'dev' of codeup.aliyun.com:61c14a7efa282c88e103c23f/oak-general-business into dev

This commit is contained in:
Xu Chang 2022-10-27 20:07:26 +08:00
parent 44c23c6659 d7c1cf7536
commit 5f120c813f
4 changed files with 193 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/amap/location/index.less
View File

@ -7,6 +7,7 @@
&-list { &-list {
height: 500px; height: 500px;
overflow: auto;
&-header { &-header {
display: flex; display: flex;
@ -15,7 +16,8 @@
} }
&-checked { &-checked {
color: var(--oak-brand-color); color: var(--oak-primary-color);
font-size: 24px;
} }
&-loadingBox { &-loadingBox {
@ -24,16 +26,5 @@
justify-content: center; justify-content: center;
min-height: 100px; 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;
}
} }
} }

137
src/components/amap/location/index.tsx
View File

@ -1,23 +1,22 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { import {
Dialog, Modal,
Row, Row,
Col, Col,
List, ModalProps,
Input,
InputValue,
Button, Button,
Loading, Input,
DialogProps, List,
} from 'tdesign-react'; Empty,
import { SearchIcon, CheckCircleFilledIcon } from 'tdesign-icons-react'; Spin,
} from 'antd';
import { SearchOutlined, CheckCircleFilled } from '@ant-design/icons';
import { Geolocation, GeolocationProps } from '@uiw/react-amap'; import { Geolocation, GeolocationProps } from '@uiw/react-amap';
import Map from './../map'; import Map from './../map';
import PositionPicker from './PositionPicker' import PositionPicker from './PositionPicker'
import './index.less'; import './index.less';
const { ListItem, ListItemMeta } = List;
export type LocationProps = { export type LocationProps = {
akey: string; akey: string;
@ -32,7 +31,7 @@ export type LocationProps = {
) => void; ) => void;
geolocationProps?: GeolocationProps; geolocationProps?: GeolocationProps;
useGeolocation?: boolean; useGeolocation?: boolean;
dialogProps?: DialogProps; dialogProps?: ModalProps;
}; };
export type Poi = { export type Poi = {
@ -72,8 +71,8 @@ const Location = (props: LocationProps) => {
} = props; } = props;
const prefixCls = 'oak'; const prefixCls = 'oak';
const searchRef = useRef(); const searchRef = useRef<any>();
const [searchValue, setSearchValue] = useState<InputValue>(''); const [searchValue, setSearchValue] = useState<string>('');
const [refresh, setRefresh] = useState(true); // 点击poi不触发setPositionPickerResult const [refresh, setRefresh] = useState(true); // 点击poi不触发setPositionPickerResult
const [mode, setMode] = useState<Mode>('dragMap'); const [mode, setMode] = useState<Mode>('dragMap');
@ -224,15 +223,18 @@ const Location = (props: LocationProps) => {
return ( return (
<Dialog <Modal
width="80%" width="80%"
okText="确定"
cancelText="取消"
title="选择位置"
{...dialogProps} {...dialogProps}
visible={visible} open={visible}
onClose={() => { onCancel={() => {
onClose && onClose(); onClose && onClose();
clearData(); clearData();
}} }}
onConfirm={() => { onOk={() => {
if (!currentPoi) { if (!currentPoi) {
return; return;
} }
@ -245,8 +247,8 @@ const Location = (props: LocationProps) => {
}} }}
> >
<div className={`${prefixCls}-location`}> <div className={`${prefixCls}-location`}>
<Row> <Row gutter={[16, 16]}>
<Col xs={12} sm={7}> <Col xs={24} sm={14}>
<Map <Map
className={`${prefixCls}-location-map`} className={`${prefixCls}-location-map`}
akey={akey} akey={akey}
@ -290,7 +292,7 @@ const Location = (props: LocationProps) => {
)} )}
</Map> </Map>
</Col> </Col>
<Col xs={12} sm={5}> <Col xs={24} sm={10}>
<div> <div>
<List <List
className={`${prefixCls}-location-list`} className={`${prefixCls}-location-list`}
@ -302,14 +304,11 @@ const Location = (props: LocationProps) => {
ref={searchRef} ref={searchRef}
placeholder="搜索地点" placeholder="搜索地点"
value={searchValue} value={searchValue}
clearable allowClear
onChange={(value) => { onChange={(e) => {
setSearchValue(value); setSearchValue(e.target.value);
}} }}
onClear={() => { prefix={<SearchOutlined />}
setSearchValue('');
}}
prefixIcon={<SearchIcon />}
onFocus={() => { onFocus={() => {
setMode('searchPoi'); setMode('searchPoi');
setFocus(true); setFocus(true);
@ -321,8 +320,7 @@ const Location = (props: LocationProps) => {
{mode === 'searchPoi' && ( {mode === 'searchPoi' && (
<Button <Button
style={{ marginLeft: 5 }} style={{ marginLeft: 5 }}
variant="text" type="link"
theme="primary"
onClick={() => { onClick={() => {
setMode('dragMap'); setMode('dragMap');
setSearchValue(''); setSearchValue('');
@ -347,24 +345,23 @@ const Location = (props: LocationProps) => {
setCurrentPoi(poi); setCurrentPoi(poi);
}} }}
> >
<ListItem <List.Item
action={ actions={[
currentPoi?.id ===
poi.id ? (
<CheckCircleFilledIcon
className={`${prefixCls}-location-list-checked`}
size={24}
/>
) : (
<div <div
style={{ style={{
width: 24, width: 24,
}} }}
/>
)
}
> >
<ListItemMeta {currentPoi?.id ===
poi.id && (
<CheckCircleFilled
className={`${prefixCls}-location-list-checked`}
/>
)}
</div>,
]}
>
<List.Item.Meta
title={poi.name} title={poi.name}
description={`${ description={`${
poi.distance poi.distance
@ -372,7 +369,7 @@ const Location = (props: LocationProps) => {
: '' : ''
}${poi.address}`} }${poi.address}`}
/> />
</ListItem> </List.Item>
</div> </div>
); );
})} })}
@ -382,15 +379,10 @@ const Location = (props: LocationProps) => {
<div <div
className={`${prefixCls}-location-list-loadingBox`} className={`${prefixCls}-location-list-loadingBox`}
> >
<Loading <Spin
delay={0} delay={0}
fullscreen={false} spinning
indicator size="default"
inheritColor={false}
loading
preventScrollThrough
showOverlay
size="medium"
/> />
</div> </div>
)} )}
@ -406,26 +398,23 @@ const Location = (props: LocationProps) => {
); );
}} }}
> >
<ListItem <List.Item
action={ actions={[
currentPoi?.id ===
poi.id ? (
<CheckCircleFilledIcon
className={`${prefixCls}-location-list-checked`}
size={
24
}
/>
) : (
<div <div
style={{ style={{
width: 24, width: 24,
}} }}
/>
)
}
> >
<ListItemMeta {currentPoi?.id ===
poi.id && (
<CheckCircleFilled
className={`${prefixCls}-location-list-checked`}
/>
)}
</div>,
]}
>
<List.Item.Meta
title={ title={
poi.name poi.name
} }
@ -437,16 +426,18 @@ const Location = (props: LocationProps) => {
poi.address poi.address
}`} }`}
/> />
</ListItem> </List.Item>
</div> </div>
); );
}) })
: show && ( : show &&
<div !searchLoading && (
className={`${prefixCls}-location-list-noData`} <Empty
> description="无搜索结果"
无搜素结果 image={
</div> Empty.PRESENTED_IMAGE_SIMPLE
}
/>
)} )}
</React.Fragment> </React.Fragment>
)} )}
@ -455,7 +446,7 @@ const Location = (props: LocationProps) => {
</Col> </Col>
</Row> </Row>
</div> </div>
</Dialog> </Modal>
); );
}; };

4
src/components/func/debugPanel/web.module.less
View File

@ -1,9 +1,5 @@
.container { .container {
height: 100vh;
display: flex; display: flex;
flex-direction: column;
justify-content: 'center';
align-items: 'center';
} }

96
src/components/func/debugPanel/web.tsx
View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { Button, Space, Drawer, DialogPlugin } from 'tdesign-react'; import { Button, Space, Drawer, Modal, Tooltip } from 'antd';
import { ChevronUpIcon } from 'tdesign-icons-react'; import { UpOutlined } from '@ant-design/icons';
// import { saveAs } from 'file-saver';
export default function render(this: any) { export default function render(this: any) {
const { placement = 'bottom', style = {} } = this.props; const { placement = 'bottom', style = {} } = this.props;
@ -9,14 +8,14 @@ export default function render(this: any) {
return ( return (
<React.Fragment> <React.Fragment>
<Button <Button
variant="text" type="text"
shape="circle" shape="circle"
theme="primary" icon={<UpOutlined style={{ fontSize: 16 }} />}
icon={<ChevronUpIcon />}
style={{ style={{
position: 'fixed', position: 'fixed',
bottom: 0, bottom: 0,
right: '45vw', right: '45vw',
zIndex: 999,
...style, ...style,
}} }}
onClick={() => { onClick={() => {
@ -26,69 +25,87 @@ export default function render(this: any) {
<Drawer <Drawer
placement={placement} placement={placement}
visible={visible} open={visible}
onClose={() => { onClose={() => {
this.setVisible(false); this.setVisible(false);
}} }}
header="Debug控制台" title="Debug控制台"
footer={<></>} footer={<></>}
> >
<input <input
type="file" type="file"
accept='application/json' accept="application/json"
hidden hidden
id="upload" id="upload"
onChange={() => { onChange={() => {
const that = this; 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) { if (typeof FileReader === undefined) {
alert('浏览器版本太老了'); alert('浏览器版本太老了');
} } else {
else {
const reader = new FileReader(); const reader = new FileReader();
reader.readAsText(file); reader.readAsText(file);
reader.onload = function () { reader.onload = function () {
try { try {
const data = JSON.parse(this.result as string); const data = JSON.parse(
this.result as string
);
that.features.localStorage.resetAll(data); that.features.localStorage.resetAll(data);
window.location.reload(); window.location.reload();
} } catch (err) {
catch(err) {
console.error(err); console.error(err);
} }
} };
} }
}} }}
/> />
<Space breakLine={true} direction="horizontal" size="medium"> <Space wrap={true}>
<Tooltip title="页面结构">
<Button <Button
theme="primary" size="large"
type="primary"
shape="circle" shape="circle"
onClick={() => this.printRunningTree()} onClick={() => this.printRunningTree()}
> >
R R
</Button> </Button>
</Tooltip>
<Tooltip title="Store数据">
<Button <Button
theme="primary" size="large"
type="primary"
shape="circle" shape="circle"
onClick={() => this.printDebugStore()} onClick={() => this.printDebugStore()}
> >
S S
</Button> </Button>
</Tooltip>
<Tooltip title="页面缓存">
<Button <Button
theme="primary" size="large"
type="primary"
shape="circle" shape="circle"
onClick={() => this.printCachedStore()} onClick={() => this.printCachedStore()}
> >
C C
</Button> </Button>
</Tooltip>
<Tooltip title="下载Store">
<Button <Button
theme="primary" size="large"
type="primary"
shape="circle" shape="circle"
onClick={() => { onClick={() => {
const data = this.features.localStorage.loadAll(); const data =
this.features.localStorage.loadAll();
const element = document.createElement('a'); const element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(data))); element.setAttribute(
'href',
'data:text/plain;charset=utf-8,' +
encodeURIComponent(JSON.stringify(data))
);
element.setAttribute('download', 'data.json'); element.setAttribute('download', 'data.json');
element.style.display = 'none'; element.style.display = 'none';
@ -101,39 +118,48 @@ export default function render(this: any) {
> >
D D
</Button> </Button>
</Tooltip>
<Tooltip title="上传Store">
<Button <Button
theme="primary" size="large"
type="primary"
shape="circle" shape="circle"
onClick={() => { onClick={() => {
const element = document.getElementById('upload'); const element =
document.getElementById('upload');
element!.click(); element!.click();
}} }}
> >
U U
</Button> </Button>
</Tooltip>
<Tooltip title="重置Store">
<Button <Button
theme="warning" size="large"
type="primary"
danger
shape="circle" shape="circle"
onClick={() => { onClick={() => {
const confirmDia = DialogPlugin.confirm!({ const modal = Modal.confirm!({
header: '重置数据', title: '重置数据',
body: '重置后，原来的数据不可恢复', content: '重置后，原来的数据不可恢复',
confirmBtn: '确定', okText: '确定',
cancelBtn: '取消', cancelText: '取消',
onConfirm: ({ e }) => { onOk: (e) => {
this.resetInitialData(); this.resetInitialData();
confirmDia.hide!(); modal.destroy!();
window.location.reload(); window.location.reload();
}, },
onClose: ({ e, trigger }) => { onCancel: (e) => {
confirmDia.hide!(); modal.destroy!();
}, },
}); });
}} }}
> >
Reset Reset
</Button> </Button>
</Tooltip>
</Space> </Space>
</Drawer> </Drawer>
</React.Fragment> </React.Fragment>