antd 去掉
This commit is contained in:
parent
c2948fb958
commit
0ca74d9787
|
|
@ -1,37 +1,24 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Card, Avatar, Tag, Space } from 'antd';
|
||||
import {
|
||||
PictureFilled,
|
||||
} from '@ant-design/icons';
|
||||
const { Meta } = Card;
|
||||
|
||||
import { Avatar, Tag, Cell } from 'tdesign-mobile-react';
|
||||
|
||||
export default function render() {
|
||||
const { t, click } = this.props;
|
||||
const { iState, name, mobile, nickname, avatar, stateColor, userState } = this.state;
|
||||
const { iState, name, mobile, nickname, avatar, stateColor, userState } =
|
||||
this.state;
|
||||
return (
|
||||
<div className="cell" onClick={() => click()}>
|
||||
{avatar ? (
|
||||
<img className="avatar" src="{{item.avatar}}" />
|
||||
) : (
|
||||
<div className="img-view">
|
||||
<PictureFilled />
|
||||
</div>
|
||||
)}
|
||||
<div className="user-info">
|
||||
<div className="row">
|
||||
<div className="nickname">{nickname || '未设置'}</div>
|
||||
<Tag color={stateColor[userState]}>
|
||||
{userState}
|
||||
</Tag>
|
||||
</div>
|
||||
<div className="name">姓名：
|
||||
{name || '未设置'}</div>
|
||||
<Cell
|
||||
onClick={() => click()}
|
||||
image={<img className="avatar" src={avatar} />}
|
||||
title={name || '未设置'}
|
||||
description={
|
||||
<div>
|
||||
<div className="mobile">
|
||||
手机号：
|
||||
{mobile || '未设置'}
|
||||
</div>
|
||||
<Tag theme={stateColor[userState]} content={userState} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Input, Card, Avatar } from 'antd';
|
||||
|
||||
export default function render() {
|
||||
const { rows } = this.state;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
{
|
||||
"action": {
|
||||
"create": "创建",
|
||||
"update": "更新",
|
||||
"delete": "删除",
|
||||
"confirm": "确定"
|
||||
"confirm": "确定",
|
||||
"cancel": "取消",
|
||||
"tip": "提示"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,40 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Button, Checkbox, Form, Input } from 'antd';
|
||||
import React from 'react';
|
||||
import { Button, Input, Textarea } from 'tdesign-mobile-react';
|
||||
|
||||
export default function render() {
|
||||
return (
|
||||
<div>
|
||||
<Form
|
||||
name="basic"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
initialValues={{ remember: true }}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label="姓名"
|
||||
required
|
||||
>
|
||||
<Input
|
||||
onChange={this.setValue}
|
||||
oak:value="name"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="手机号"
|
||||
required
|
||||
>
|
||||
<Input
|
||||
onChange={this.setValue}
|
||||
oak:value="phone"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="所在地区"
|
||||
required
|
||||
>
|
||||
<Input
|
||||
placeholder="所在地区"
|
||||
onChange={this.setValue}
|
||||
oak:value="areaText"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="详细地址"
|
||||
rules={[{ required: true, message: '请输入详细地址' }]}
|
||||
>
|
||||
<Input.TextArea showCount maxLength={100} oak:value="detail" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<Input
|
||||
required={true}
|
||||
label="姓名"
|
||||
placeholder="姓名"
|
||||
onChange={this.setValue}
|
||||
oak:value="name"
|
||||
/>
|
||||
<Input
|
||||
required={true}
|
||||
label="手机号"
|
||||
placeholder="手机号"
|
||||
onChange={this.setValue}
|
||||
oak:value="phone"
|
||||
/>
|
||||
<Input
|
||||
required={true}
|
||||
label="所在地区"
|
||||
placeholder="所在地区"
|
||||
onChange={this.setValue}
|
||||
oak:value="areaText"
|
||||
/>
|
||||
<Textarea
|
||||
label="详细地址"
|
||||
maxlength={100}
|
||||
oak:value="detail"
|
||||
placeholder="详细地址"
|
||||
/>
|
||||
|
||||
<Button
|
||||
block
|
||||
size="middle"
|
||||
type="primary"
|
||||
theme="primary"
|
||||
onClick={(event) => {
|
||||
this.confirm();
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,18 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Card, Form, Input, Checkbox, Button, Tabs } from 'antd';
|
||||
import { LockOutlined, FieldNumberOutlined, MobileOutlined } from '@ant-design/icons';
|
||||
import React from 'react';
|
||||
import { isMobile, isPassword, isCaptcha } from 'oak-domain/lib/utils/validator';
|
||||
import { DesktopIcon, LockOnIcon, MobileIcon } from 'tdesign-icons-react';
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
MessagePlugin,
|
||||
Checkbox,
|
||||
Tabs,
|
||||
} from 'tdesign-react';
|
||||
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
const { TabPanel } = Tabs;
|
||||
const { FormItem } = Form;
|
||||
|
||||
export default function render() {
|
||||
const { onlyCaptcha, onlyPassword } = this.props;
|
||||
|
|
@ -15,121 +23,111 @@ export default function render() {
|
|||
const allowSubmit = validMobile && (validCaptcha || validPassword);
|
||||
|
||||
const LoginPassword = (
|
||||
<Form
|
||||
name="normal_login"
|
||||
className="login-form"
|
||||
initialValues={{ remember: true }}
|
||||
>
|
||||
<Form.Item
|
||||
name="mobile"
|
||||
>
|
||||
<Form colon={true} labelWidth={0}>
|
||||
<FormItem name="mobile">
|
||||
<Input
|
||||
allowClear
|
||||
clearable
|
||||
value={mobile}
|
||||
type="tel"
|
||||
data-attr="mobile"
|
||||
maxLength={11}
|
||||
prefix={<MobileOutlined className="site-form-item-icon" />}
|
||||
maxlength={11}
|
||||
prefixIcon={<MobileIcon className="site-form-item-icon" />}
|
||||
placeholder="Mobile"
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.onInput(e)}
|
||||
onChange={(value, context) => {
|
||||
this.setState({
|
||||
mobile: value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="password"
|
||||
>
|
||||
</FormItem>
|
||||
<FormItem name="password">
|
||||
<Input
|
||||
allowClear
|
||||
clearable
|
||||
value={password}
|
||||
data-attr="password"
|
||||
prefix={<LockOutlined className="site-form-item-icon" />}
|
||||
prefixIcon={<LockOnIcon className="site-form-item-icon" />}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.onInput(e)}
|
||||
onChange={(value, context) => {
|
||||
this.setState({
|
||||
password: value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Form.Item name="remember" valuePropName="checked" noStyle>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</FormItem>
|
||||
|
||||
<Form.Item>
|
||||
<FormItem>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
block
|
||||
theme="primary"
|
||||
type="submit"
|
||||
className="login-form-button"
|
||||
disabled={!allowSubmit}
|
||||
onClick={() => this.loginByMobile()}
|
||||
>
|
||||
Log in
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
const LoginCaptcha = (
|
||||
<Form
|
||||
name="normal_login"
|
||||
className="login-form"
|
||||
initialValues={{ remember: true }}
|
||||
>
|
||||
<Form.Item
|
||||
name="mobile"
|
||||
>
|
||||
<Input.Group compact>
|
||||
<Input
|
||||
allowClear
|
||||
value={mobile}
|
||||
data-attr="mobile"
|
||||
type="tel"
|
||||
maxLength={11}
|
||||
prefix={<MobileOutlined className="site-form-item-icon" />}
|
||||
placeholder="Mobile"
|
||||
style={{ width: 'calc(100% - 65px)' }}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.onInput(e)}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{
|
||||
width: 65,
|
||||
}}
|
||||
disabled={!validMobile || counter > 0}
|
||||
onClick={() => this.sendCaptcha()}
|
||||
>
|
||||
{counter > 0 ? counter : 'Send'}
|
||||
</Button>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="captcha"
|
||||
>
|
||||
<Form colon={true} labelWidth={0}>
|
||||
<FormItem name="mobile">
|
||||
<Input
|
||||
allowClear
|
||||
clearable
|
||||
value={mobile}
|
||||
data-attr="mobile"
|
||||
type="tel"
|
||||
maxlength={11}
|
||||
prefixIcon={<MobileIcon className="site-form-item-icon" />}
|
||||
placeholder="Mobile"
|
||||
style={{ width: 'calc(100% - 65px)' }}
|
||||
onChange={(value, context) => {
|
||||
this.setState({
|
||||
mobile: value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="captcha">
|
||||
<Input
|
||||
clearable
|
||||
value={captcha}
|
||||
data-attr="captcha"
|
||||
prefix={<FieldNumberOutlined className="site-form-item-icon" />}
|
||||
type="number"
|
||||
maxLength={4}
|
||||
maxlength={4}
|
||||
placeholder="Captcha"
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.onInput(e)}
|
||||
onChange={(value, context) => {
|
||||
this.setState({
|
||||
captcha: value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Form.Item name="remember" valuePropName="checked" noStyle>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
theme="primary"
|
||||
disabled={!validMobile || counter > 0}
|
||||
onClick={() => this.sendCaptcha()}
|
||||
>
|
||||
{counter > 0 ? counter : 'Send'}
|
||||
</Button>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</FormItem>
|
||||
|
||||
<FormItem>
|
||||
<Button
|
||||
theme="primary"
|
||||
className="login-form-button"
|
||||
disabled={!allowSubmit}
|
||||
onClick={() => this.loginByMobile()}
|
||||
>
|
||||
Log in
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
if (onlyCaptcha) {
|
||||
|
|
@ -159,23 +157,36 @@ export default function render() {
|
|||
);
|
||||
}
|
||||
return (
|
||||
<div className='page-body'>
|
||||
<div className="page-body">
|
||||
<div
|
||||
style={{
|
||||
flex: 2,
|
||||
}}
|
||||
/>
|
||||
<div style={{
|
||||
flex: 2,
|
||||
}} />
|
||||
<Card className="card">
|
||||
<Tabs defaultActiveKey="1" size="large" tabBarStyle={{ width: '100%' }}>
|
||||
<TabPane tab="in Password" key="1">
|
||||
minHeight: 500,
|
||||
lineHeight: 22,
|
||||
}}>
|
||||
<Tabs
|
||||
theme="normal"
|
||||
placement="top"
|
||||
defaultValue="1"
|
||||
size="medium"
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<TabPanel label="in Password" value="1">
|
||||
{LoginPassword}
|
||||
</TabPane>
|
||||
<TabPane tab="in Captcha" key="2">
|
||||
</TabPanel>
|
||||
<TabPanel label="in Captcha" key="2">
|
||||
{LoginCaptcha}
|
||||
</TabPane>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</Card>
|
||||
<div style={{
|
||||
flex: 3,
|
||||
}} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
flex: 3,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,61 +1,57 @@
|
|||
import React, { Component } from 'react';
|
||||
import { List, Modal, Typography, Button } from 'antd';
|
||||
const { Title } = Typography;
|
||||
import { PhoneOutlined, MinusOutlined } from '@ant-design/icons';
|
||||
import React from 'react';
|
||||
import { CellGroup, Cell, Button, Dialog } from 'tdesign-mobile-react';
|
||||
import { Icon } from 'tdesign-icons-react';
|
||||
|
||||
export default function render() {
|
||||
const { mobiles, confirmDeleteModalVisible, deleteIdx } = this.state;
|
||||
return (
|
||||
<div className='page-body'>
|
||||
<List
|
||||
grid={{ gutter: 16, column: 1 }}
|
||||
itemLayout="horizontal"
|
||||
dataSource={mobiles}
|
||||
renderItem={(item, idx) => (
|
||||
<List.Item>
|
||||
<div className='card'>
|
||||
<text>{item.mobile}</text>
|
||||
<Button
|
||||
type='primary'
|
||||
shape='circle'
|
||||
icon={<MinusOutlined style={{ fontSize: 20 }} />}
|
||||
size="large"
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
confirmDeleteModalVisible: true,
|
||||
deleteIdx: idx,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
<div className="page-body">
|
||||
<CellGroup>
|
||||
{mobiles?.map((ele, index) => (
|
||||
<Cell
|
||||
key={index}
|
||||
title={ele.mobile}
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
confirmDeleteModalVisible: true,
|
||||
deleteIdx: index,
|
||||
});
|
||||
}}
|
||||
leftIcon={<Icon name="mobile" />}
|
||||
rightIcon={<Icon name="delete" />}
|
||||
/>
|
||||
))}
|
||||
</CellGroup>
|
||||
<div style={{ flex: 1 }} />
|
||||
<div className='btn-box'>
|
||||
<Button size='large' type="primary" block onClick={() => this.goAddMobile()}>
|
||||
增加
|
||||
</Button>
|
||||
</div>
|
||||
<Modal
|
||||
closable={false}
|
||||
<Button
|
||||
size="large"
|
||||
theme="primary"
|
||||
block
|
||||
onClick={() => this.goAddMobile()}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
<Dialog
|
||||
visible={confirmDeleteModalVisible}
|
||||
onOk={async () => {
|
||||
title="确认删除手机号吗？"
|
||||
confirmBtn="确定"
|
||||
cancelBtn="取消"
|
||||
content="删除后，不可恢复"
|
||||
destroyOnClose
|
||||
onClose={() => {
|
||||
this.setState({
|
||||
confirmDeleteModalVisible: false,
|
||||
deleteIdx: undefined,
|
||||
});
|
||||
}}
|
||||
onConfirm={async () => {
|
||||
this.execute('remove', undefined, `${deleteIdx}`);
|
||||
this.setState({
|
||||
confirmDeleteModalVisible: false,
|
||||
deleteIdx: undefined,
|
||||
});
|
||||
}}
|
||||
onCancel={() => this.setState({
|
||||
confirmDeleteModalVisible: false,
|
||||
deleteIdx: undefined,
|
||||
})}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
>
|
||||
确认删除手机号吗？
|
||||
</Modal>
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export default OakPage({
|
|||
const isPlayingAnother = token && token.userId !== token.playerId;
|
||||
const isRoot =
|
||||
player?.userRole$user &&
|
||||
player.userRole$user[0].roleId === ROOT_ROLE_ID;
|
||||
player.userRole$user[0]?.roleId === ROOT_ROLE_ID;
|
||||
return {
|
||||
avatar,
|
||||
nickname,
|
||||
|
|
|
|||
|
|
@ -1,86 +1,85 @@
|
|||
import React, { Component } from 'react';
|
||||
import { UserOutlined, RightOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Image, Button, List, Drawer, Input } from 'antd';
|
||||
import React from 'react';
|
||||
import { UserCircleIcon } from 'tdesign-icons-react';
|
||||
import { Avatar, Button, Cell, CellGroup, Input, Popup } from 'tdesign-mobile-react';
|
||||
|
||||
export default function render() {
|
||||
const { avatar, nickname, isLoggedIn, refreshing, mobile, mobileCount, showDrawer, oakDirty } = this.state;
|
||||
const mobileText = mobileCount > 1 ? `${mobileCount}条手机号` : ( mobile || '未设置');
|
||||
return (
|
||||
<div className='page-body'>
|
||||
<div className='userInfo'>
|
||||
{
|
||||
avatar ? <Avatar src={<Image src={avatar} className="avatar" />} /> : <Avatar icon={<UserOutlined />} size={120} />
|
||||
}
|
||||
<div className="page-body">
|
||||
<div className="userInfo">
|
||||
{avatar ? (
|
||||
<Avatar image={avatar} size="48px" />
|
||||
) : (
|
||||
<Avatar icon={<UserCircleIcon />} size="48px" />
|
||||
)}
|
||||
<span className="nickname">{nickname || '未设置'}</span>
|
||||
{
|
||||
isLoggedIn ?
|
||||
<Button
|
||||
size="small"
|
||||
disabled={refreshing}
|
||||
loading={refreshing}
|
||||
onClick={() => this.setState({
|
||||
{isLoggedIn ? (
|
||||
<Button
|
||||
theme="primary"
|
||||
size="small"
|
||||
disabled={refreshing}
|
||||
loading={refreshing}
|
||||
onClick={() =>
|
||||
this.setState({
|
||||
showDrawer: true,
|
||||
})}
|
||||
>
|
||||
更新
|
||||
</Button> :
|
||||
<Button
|
||||
size="small"
|
||||
disabled={refreshing}
|
||||
loading={refreshing}
|
||||
onClick={() => this.doLogin()}
|
||||
>
|
||||
登录
|
||||
</Button>
|
||||
}
|
||||
})
|
||||
}
|
||||
>
|
||||
{this.t('common:action.update')}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="small"
|
||||
disabled={refreshing}
|
||||
loading={refreshing}
|
||||
onClick={() => this.doLogin()}
|
||||
>
|
||||
{this.t('login')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className='cell'>
|
||||
<List>
|
||||
<List.Item style={{
|
||||
marginLeft: 20,
|
||||
marginRight: 20,
|
||||
}}>
|
||||
<List.Item.Meta
|
||||
title="手机号"
|
||||
description={mobileText}
|
||||
onClick={() => this.goMyMobile()}
|
||||
/>
|
||||
<RightOutlined />
|
||||
</List.Item>
|
||||
</List>
|
||||
</div>
|
||||
<Drawer
|
||||
height={150}
|
||||
closable={false}
|
||||
<CellGroup>
|
||||
<Cell
|
||||
title="手机号"
|
||||
arrow
|
||||
note={mobileText}
|
||||
onClick={() => this.goMyMobile()}
|
||||
/>
|
||||
</CellGroup>
|
||||
<Popup
|
||||
placement="bottom"
|
||||
visible={showDrawer}
|
||||
onClose={() => {
|
||||
onVisibleChange={() => {
|
||||
this.setState({ showDrawer: false });
|
||||
this.resetUpdateData();
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
size="large"
|
||||
placeholder="请输入昵称"
|
||||
oak:value="0.user.nickname"
|
||||
value={nickname}
|
||||
onChange={this.setValue}
|
||||
/>
|
||||
<div style={{ height: 15 }} />
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
disabled={!oakDirty}
|
||||
block
|
||||
onClick={async () => {
|
||||
await this.execute('update', undefined, '0.user');
|
||||
this.setState({ showDrawer: false });
|
||||
this.resetUpdateData();
|
||||
}}
|
||||
>
|
||||
{this.t('common:confirm')}
|
||||
</Button>
|
||||
</Drawer>
|
||||
<div style={{ backgroundColor: '#fff', padding: 10 }}>
|
||||
<Input
|
||||
label="昵称"
|
||||
placeholder="请输入昵称"
|
||||
value={nickname}
|
||||
onChange={(value) => {
|
||||
this.setUpdateData('0.user.nickname', value);
|
||||
}}
|
||||
/>
|
||||
<div style={{ height: 15 }} />
|
||||
<Button
|
||||
size="large"
|
||||
theme="primary"
|
||||
disabled={!oakDirty}
|
||||
block
|
||||
onClick={async () => {
|
||||
await this.execute('update', undefined, '0.user');
|
||||
this.setState({ showDrawer: false });
|
||||
this.resetUpdateData();
|
||||
}}
|
||||
>
|
||||
{this.t('common:action.confirm')}
|
||||
</Button>
|
||||
</div>
|
||||
</Popup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
{
|
||||
"action": {
|
||||
"create": "创建",
|
||||
"delete": "删除",
|
||||
"confirm": "确定"
|
||||
}
|
||||
"login": "登录"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,12 @@
|
|||
import * as React from 'react';
|
||||
import { Input, Tooltip, Button } from 'antd';
|
||||
const { Search } = Input;
|
||||
import { Fab } from 'tdesign-mobile-react';
|
||||
import { Icon } from 'tdesign-icons-react';
|
||||
|
||||
import UserCell from '../../../components/user/cell';
|
||||
|
||||
export default function render() {
|
||||
return (
|
||||
<div>
|
||||
<Search
|
||||
placeholder="请输入"
|
||||
value={this.state.searchValue || ''}
|
||||
enterButton="搜索"
|
||||
size="middle"
|
||||
loading={this.state.oakLoading}
|
||||
onChange={this.searchChange}
|
||||
allowClear
|
||||
onSearch={(value, event) => {
|
||||
// value清空
|
||||
if (value) {
|
||||
this.searchConfirm();
|
||||
} else {
|
||||
this.searchCancel();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ height: '100vh' }}>
|
||||
{this.state.userData?.map((ele, index) => {
|
||||
return (
|
||||
<UserCell
|
||||
|
|
@ -36,19 +18,19 @@ export default function render() {
|
|||
);
|
||||
})}
|
||||
|
||||
<Tooltip title="创建">
|
||||
<Button
|
||||
className="add-btn"
|
||||
type="primary"
|
||||
shape="circle"
|
||||
size="large"
|
||||
onClick={(event) => {
|
||||
this.goNewUser();
|
||||
}}
|
||||
>
|
||||
+
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Fab
|
||||
style={{
|
||||
bottom: 50,
|
||||
right: 16,
|
||||
}}
|
||||
buttonProps={{
|
||||
theme: 'primary',
|
||||
}}
|
||||
onClick={(event) => {
|
||||
this.goNewUser();
|
||||
}}
|
||||
icon={<Icon name="add" />}
|
||||
></Fab>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Button, Checkbox, Form, Input, DatePicker, Radio } from 'antd';
|
||||
import moment from 'moment';
|
||||
import { Button, Checkbox, Input } from 'tdesign-mobile-react';
|
||||
|
||||
export default function render() {
|
||||
const onChange = (data, dataString) => {
|
||||
|
|
@ -9,44 +8,43 @@ export default function render() {
|
|||
const { gender, GenderOptions, IDCardTypeOptions, birth } = this.state;
|
||||
return (
|
||||
<div className="web-mobile-container">
|
||||
<Form
|
||||
<Input
|
||||
required={true}
|
||||
label="昵称"
|
||||
onChange={this.setValue}
|
||||
oak:value="nickname"
|
||||
/>
|
||||
<Input
|
||||
required={true}
|
||||
label="姓名"
|
||||
onChange={this.setValue}
|
||||
oak:value="name"
|
||||
/>
|
||||
<Input
|
||||
required={true}
|
||||
label="姓名"
|
||||
onChange={this.setValue}
|
||||
oak:value="name"
|
||||
/>
|
||||
<Input
|
||||
type="证件号"
|
||||
onChange={this.setValue}
|
||||
oak:value="idNumber"
|
||||
/>
|
||||
{/* <Form
|
||||
name="basic"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
initialValues={{ remember: true }}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label="昵称"
|
||||
required
|
||||
>
|
||||
<Input
|
||||
onChange={this.setValue}
|
||||
oak:value="nickname"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
||||
<Form.Item
|
||||
label="姓名"
|
||||
required
|
||||
>
|
||||
<Input
|
||||
onChange={this.setValue}
|
||||
oak:value="name"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="出生日期"
|
||||
required
|
||||
>
|
||||
<Form.Item label="出生日期" required>
|
||||
<DatePicker onChange={onChange} value={moment(birth)} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="性别"
|
||||
required
|
||||
>
|
||||
<Form.Item label="性别" required>
|
||||
<Radio.Group
|
||||
options={GenderOptions}
|
||||
onChange={this.setValue}
|
||||
|
|
@ -55,10 +53,7 @@ export default function render() {
|
|||
oak:value="gender"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="证件类别"
|
||||
required
|
||||
>
|
||||
<Form.Item label="证件类别" required>
|
||||
<Radio.Group
|
||||
options={IDCardTypeOptions}
|
||||
onChange={this.setValue}
|
||||
|
|
@ -67,23 +62,18 @@ export default function render() {
|
|||
buttonStyle="solid"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="证件号"
|
||||
required
|
||||
>
|
||||
<Form.Item label="证件号" required>
|
||||
<Input
|
||||
type="number"
|
||||
onChange={this.setValue}
|
||||
oak:value="idNumber"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
</Form> */}
|
||||
|
||||
<Button
|
||||
block
|
||||
size="middle"
|
||||
type="primary"
|
||||
theme="primary"
|
||||
onClick={(event) => {
|
||||
this.confirm();
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import UserCell from '../../../components/user/cell';
|
||||
|
||||
export default function render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"navigationBarTitleText": "修改权限",
|
||||
"usingComponents": {
|
||||
"t-dialog": "../../../miniprogram_npm/tdesign/dialog/dialog",
|
||||
"t-tag": "../../../miniprogram_npm/tdesign/tag/tag",
|
||||
"t-fab": "../../../miniprogram_npm/tdesign/fab/fab",
|
||||
"t-icon": "../../../miniprogram_npm/tdesign/icon/icon",
|
||||
"fab": "../../../components/UI/fab/index"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
/** index.wxss **/
|
||||
@import "../../../config/styles/_base.less";
|
||||
@import "../../../config/styles/_mixins.less";
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: @background-color-base;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
.safe-area-inset-bottom();
|
||||
}
|
||||
|
||||
.card-view {
|
||||
margin: @size-spacing-base;
|
||||
margin-bottom: 0rpx;
|
||||
padding: @size-spacing-base;
|
||||
border-radius: 4rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 20rpx 0 rgba(212, 217, 223, 0.5);
|
||||
background-color: #fff;
|
||||
}
|
||||
.row {
|
||||
margin-left: @size-spacing-base;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.col {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
margin-bottom: 8rpx;
|
||||
font-size: @size-font-large;
|
||||
}
|
||||
.mobile {
|
||||
font-size: @size-font-base;
|
||||
color: @text-color;
|
||||
}
|
||||
.avatar {
|
||||
height: 140rpx;
|
||||
width: 140rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.img-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 140rpx;
|
||||
width: 140rpx;
|
||||
border-radius: 50%;
|
||||
background-color: @background-color-base;
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
import { firstLetterUpperCase } from 'oak-domain/lib/utils/string';
|
||||
import { composeFileUrl } from '../../../../src/utils/extraFile';
|
||||
|
||||
export default OakPage(
|
||||
{
|
||||
path: 'userManage:list',
|
||||
entity: 'user',
|
||||
projection: {
|
||||
id: 1,
|
||||
name: 1,
|
||||
nickname: 1,
|
||||
mobile$user: {
|
||||
$entity: 'mobile',
|
||||
data: {
|
||||
id: 1,
|
||||
userId: 1,
|
||||
mobile: 1,
|
||||
},
|
||||
},
|
||||
extraFile$entity: {
|
||||
$entity: 'extraFile',
|
||||
data: {
|
||||
id: 1,
|
||||
tag1: 1,
|
||||
origin: 1,
|
||||
bucket: 1,
|
||||
objectId: 1,
|
||||
filename: 1,
|
||||
extra1: 1,
|
||||
type: 1,
|
||||
entity: 1,
|
||||
extension: 1,
|
||||
},
|
||||
filter: {
|
||||
tag1: 'avatar',
|
||||
},
|
||||
indexFrom: 0,
|
||||
count: 1,
|
||||
},
|
||||
},
|
||||
filters: [
|
||||
// 由调用者注入oakFilter
|
||||
{
|
||||
filter: async ({ features, props, onLoadOptions }) => {
|
||||
const { userIds } = props;
|
||||
return {
|
||||
id: {
|
||||
$in: userIds,
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
],
|
||||
isList: true,
|
||||
formData: async function ({ data: users, props, features }) {
|
||||
const filter = await this.getFilterByName('name');
|
||||
return {
|
||||
users: users?.map((ele: any) => {
|
||||
const { mobile$user, extraFile$entity } =
|
||||
ele || {};
|
||||
const mobile = mobile$user && mobile$user[0]?.mobile;
|
||||
const avatar =
|
||||
extraFile$entity &&
|
||||
extraFile$entity[0] &&
|
||||
composeFileUrl(extraFile$entity[0]);
|
||||
const user2 = Object.assign({}, ele, {
|
||||
mobile,
|
||||
avatar,
|
||||
});
|
||||
return user2;
|
||||
}),
|
||||
searchValue: (
|
||||
filter?.$or as [{ name: { $includes: string } }]
|
||||
)[0].name.$includes,
|
||||
};
|
||||
},
|
||||
properties: {
|
||||
entity: String,
|
||||
entityId: String,
|
||||
userIds: Array,
|
||||
},
|
||||
data: {
|
||||
show: false,
|
||||
searchValue: '',
|
||||
deleteIndex: '',
|
||||
},
|
||||
lifetimes: {},
|
||||
methods: {
|
||||
onRemove(event: any) {
|
||||
const { index } = event.target.dataset;
|
||||
this.setState({
|
||||
show: true,
|
||||
deleteIndex: index,
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.setState({
|
||||
show: false,
|
||||
deleteIndex: '',
|
||||
})
|
||||
},
|
||||
handleConfirm() {
|
||||
const { entity } = this.props;
|
||||
const entityStr = firstLetterUpperCase(entity);
|
||||
const { deleteIndex } = this.state;
|
||||
deleteIndex && this.toggleNode({}, false, `${deleteIndex}.user${entityStr}$user`);
|
||||
this.setState({
|
||||
show: false,
|
||||
})
|
||||
},
|
||||
goSearch() {
|
||||
this.navigateTo({
|
||||
url: '/user/search',
|
||||
toUrl: '/userRelation/detail'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Input, Card, Avatar } from 'antd';
|
||||
const Search = Input.Search;
|
||||
const Meta = Card.Meta;
|
||||
|
||||
export default function render() {
|
||||
const { users } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Search
|
||||
placeholder="请输入"
|
||||
value={this.state.searchValue || ''}
|
||||
enterButton="搜索"
|
||||
size="middle"
|
||||
loading={this.state.oakLoading}
|
||||
onChange={this.searchChange}
|
||||
allowClear
|
||||
onSearch={(value, event) => {
|
||||
// value清空
|
||||
if (value) {
|
||||
this.searchConfirm();
|
||||
} else {
|
||||
this.searchCancel();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{
|
||||
users?.map(
|
||||
(user, index) => {
|
||||
<Card key={index} onClick={this.handleCardClick}>
|
||||
<Meta
|
||||
avatar={<Avatar src={user.avatar} />}
|
||||
title={user.name}
|
||||
description={user.nickname}
|
||||
/>
|
||||
</Card>;
|
||||
}
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!-- index.wxml -->
|
||||
<view class="container">
|
||||
<view class="col">
|
||||
<block wx:for="{{users}}" wx:key="index">
|
||||
<view class="card-view">
|
||||
<block wx:if="{{item.avatar}}">
|
||||
<image class="avatar" src="{{item.avatar}}" mode="aspectFit" />
|
||||
</block>
|
||||
<block wx:else>
|
||||
<view class="img-view">
|
||||
<t-icon name="image" size="xl" />
|
||||
</view>
|
||||
</block>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
<text class="nickname">{{item.nickname || '未设置'}}</text>
|
||||
<text class="mobile">姓名: {{item.name || '未设置'}}</text>
|
||||
<text class="mobile">手机: {{item.mobile || '未设置'}}</text>
|
||||
</view>
|
||||
<t-tag theme="primary" shape="round" size="large" data-index="{{index}}" bind:tap="onRemove">
|
||||
<t-icon name="delete" size="16px" slot="icon" />
|
||||
移除
|
||||
</t-tag>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<t-fab icon="add" bind:click="goSearch" />
|
||||
<t-dialog visible="{{show}}" title="确定移除吗" confirm-btn="确定" cancel-btn="取消" bind:cancel="handleCancel" bind:confirm="handleConfirm"></t-dialog>
|
||||
</view>
|
||||
|
|
@ -1,35 +1,11 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Input, Card, Avatar } from 'antd';
|
||||
const Search = Input.Search;
|
||||
const Meta = Card.Meta;
|
||||
|
||||
export default function render() {
|
||||
const { rows } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Search
|
||||
placeholder="请输入"
|
||||
value={this.state.searchValue || ''}
|
||||
enterButton="搜索"
|
||||
size="middle"
|
||||
loading={this.state.oakLoading}
|
||||
onChange={this.searchChange}
|
||||
allowClear
|
||||
onSearch={(value, event) => {
|
||||
// value清空
|
||||
if (value) {
|
||||
this.searchConfirm();
|
||||
} else {
|
||||
this.searchCancel();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{rows?.map((item, index) => {
|
||||
<Card key={index} onClick={this.handleCardClick}>
|
||||
<Meta title={item.name} />
|
||||
</Card>;
|
||||
})}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,10 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Input, Card, Avatar } from 'antd';
|
||||
const Search = Input.Search;
|
||||
const Meta = Card.Meta;
|
||||
|
||||
export default function render() {
|
||||
const { users } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Search
|
||||
placeholder="请输入"
|
||||
value={this.state.searchValue || ''}
|
||||
enterButton="搜索"
|
||||
size="middle"
|
||||
loading={this.state.oakLoading}
|
||||
onChange={this.searchChange}
|
||||
allowClear
|
||||
onSearch={(value, event) => {
|
||||
// value清空
|
||||
if (value) {
|
||||
this.searchConfirm();
|
||||
} else {
|
||||
this.searchCancel();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{
|
||||
users?.map(
|
||||
(user, index) => {
|
||||
<Card key={index} onClick={this.handleCardClick}>
|
||||
<Meta
|
||||
avatar={<Avatar src={user.avatar} />}
|
||||
title={user.name}
|
||||
description={user.nickname}
|
||||
/>
|
||||
</Card>;
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,10 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Input, Card, Avatar } from 'antd';
|
||||
const Search = Input.Search;
|
||||
const Meta = Card.Meta;
|
||||
|
||||
export default function render() {
|
||||
const { users } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Search
|
||||
placeholder="请输入"
|
||||
value={this.state.searchValue || ''}
|
||||
enterButton="搜索"
|
||||
size="middle"
|
||||
loading={this.state.oakLoading}
|
||||
onChange={this.searchChange}
|
||||
allowClear
|
||||
onSearch={(value, event) => {
|
||||
// value清空
|
||||
if (value) {
|
||||
this.searchConfirm();
|
||||
} else {
|
||||
this.searchCancel();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{
|
||||
users?.map(
|
||||
(user, index) => {
|
||||
<Card key={index} onClick={this.handleCardClick}>
|
||||
<Meta
|
||||
avatar={<Avatar src={user.avatar} />}
|
||||
title={user.name}
|
||||
description={user.nickname}
|
||||
/>
|
||||
</Card>;
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,11 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Input, Card, Avatar } from 'antd';
|
||||
const Search = Input.Search;
|
||||
const Meta = Card.Meta;
|
||||
|
||||
export default function render() {
|
||||
const { rows } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Search
|
||||
placeholder="请输入"
|
||||
value={this.state.searchValue || ''}
|
||||
enterButton="搜索"
|
||||
size="middle"
|
||||
loading={this.state.oakLoading}
|
||||
onChange={this.searchChange}
|
||||
allowClear
|
||||
onSearch={(value, event) => {
|
||||
// value清空
|
||||
if (value) {
|
||||
this.searchConfirm();
|
||||
} else {
|
||||
this.searchCancel();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{rows?.map((item, index) => {
|
||||
<Card key={index} onClick={this.handleCardClick}>
|
||||
<Meta title={item.name} />
|
||||
</Card>;
|
||||
})}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,10 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Input, Card, Avatar } from 'antd';
|
||||
const Search = Input.Search;
|
||||
const Meta = Card.Meta;
|
||||
|
||||
export default function render() {
|
||||
const { users } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Search
|
||||
placeholder="请输入"
|
||||
value={this.state.searchValue || ''}
|
||||
enterButton="搜索"
|
||||
size="middle"
|
||||
loading={this.state.oakLoading}
|
||||
onChange={this.searchChange}
|
||||
allowClear
|
||||
onSearch={(value, event) => {
|
||||
// value清空
|
||||
if (value) {
|
||||
this.searchConfirm();
|
||||
} else {
|
||||
this.searchCancel();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{
|
||||
users?.map(
|
||||
(user, index) => {
|
||||
<Card key={index} onClick={this.handleCardClick}>
|
||||
<Meta
|
||||
avatar={<Avatar src={user.avatar} />}
|
||||
title={user.name}
|
||||
description={user.nickname}
|
||||
/>
|
||||
</Card>;
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,7 @@
|
|||
"version": "1.0.0",
|
||||
"description": "oak框架中公共业务逻辑的实现",
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^4.7.0",
|
||||
"@fingerprintjs/fingerprintjs": "^3.3.3",
|
||||
"antd": "^4.21.5",
|
||||
"classnames": "^2.3.1",
|
||||
"moment": "^2.29.4",
|
||||
"oak-common-aspect": "file:../oak-common-aspect",
|
||||
|
|
@ -19,9 +17,9 @@
|
|||
"peerDependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.1.0",
|
||||
"tdesign-icons-react": "^0.1.3",
|
||||
"tdesign-mobile-react": "^0.1.2",
|
||||
"tdesign-react": "^0.37.0"
|
||||
"tdesign-icons-react": "^0.1.4",
|
||||
"tdesign-mobile-react": "^0.2.0",
|
||||
"tdesign-react": "^0.37.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.12.13",
|
||||
|
|
@ -57,6 +55,7 @@
|
|||
"get:area": "ts-node ./scripts/getAmapArea.ts",
|
||||
"clean:dir": "ts-node ./scripts/cleanDtsAndJs",
|
||||
"test": "ts-node ./test/test.ts",
|
||||
"postinstall": "npm run prebuild",
|
||||
"prepare": "rimraf node_modules/react & rimraf node_modules/react-dom & rimraf node_modules/react-router"
|
||||
},
|
||||
"main": "lib/index"
|
||||
|
|
|
|||
Loading…
Reference in New Issue