change user search text.

This commit is contained in:
Simba
2021-01-05 23:12:16 +08:00
parent 82f5b016e5
commit 856df5ebe3
4 changed files with 200 additions and 175 deletions
+2 -1
View File
@@ -315,7 +315,8 @@ let LangEn = {
transfigurationPromptText: "Transfiguration Prompt", transfigurationPromptText: "Transfiguration Prompt",
transfigurationPrompt: "You will login as this user.Please visit this link in other browser, if in current browser, you will logout.", transfigurationPrompt: "You will login as this user.Please visit this link in other browser, if in current browser, you will logout.",
allUsers: "All users", allUsers: "All users",
partialUsers: "Partial users" partialUsers: "Partial users",
searchUser: "Search user"
}, },
model: { model: {
usernameRule: "only lowercase letter and number and _ is permitted.", usernameRule: "only lowercase letter and number and _ is permitted.",
+2 -1
View File
@@ -315,7 +315,8 @@ let LangZh = {
transfigurationPromptText: "变身提示", transfigurationPromptText: "变身提示",
transfigurationPrompt: "您将使用该用户的身份登录。请复制以下链接到其他浏览器访问,在当前浏览器访问会导致当前用户登录信息失效。", transfigurationPrompt: "您将使用该用户的身份登录。请复制以下链接到其他浏览器访问,在当前浏览器访问会导致当前用户登录信息失效。",
allUsers: "全部用户", allUsers: "全部用户",
partialUsers: "局部用户" partialUsers: "局部用户",
searchUser: "搜索用户"
}, },
model: { model: {
usernameRule: "用户名只能包含字母,数字和\"_\"", usernameRule: "用户名只能包含字母,数字和\"_\"",
+195 -172
View File
@@ -1,40 +1,42 @@
import React from 'react'; import React from "react";
import {Link, RouteComponentProps} from 'react-router-dom'; import { Link, RouteComponentProps } from "react-router-dom";
import './List.less'; import "./List.less";
import SortDirection from '../../common/model/base/SortDirection'; import SortDirection from "../../common/model/base/SortDirection";
import Pager from '../../common/model/base/Pager'; import Pager from "../../common/model/base/Pager";
import StringUtil from '../../common/util/StringUtil'; import StringUtil from "../../common/util/StringUtil";
import FileUtil from '../../common/util/FileUtil'; import FileUtil from "../../common/util/FileUtil";
import DateUtil from '../../common/util/DateUtil'; import DateUtil from "../../common/util/DateUtil";
import FilterPanel from '../widget/filter/FilterPanel'; import FilterPanel from "../widget/filter/FilterPanel";
import TableEmpty from '../widget/TableEmpty'; import TableEmpty from "../widget/TableEmpty";
import User from "../../common/model/user/User"; import User from "../../common/model/user/User";
import TankComponent from "../../common/component/TankComponent"; import TankComponent from "../../common/component/TankComponent";
import TankTitle from "../widget/TankTitle"; import TankTitle from "../widget/TankTitle";
import {ColumnProps} from 'antd/lib/table'; import { ColumnProps } from "antd/lib/table";
import {Table, Button, Modal, Tag, Tooltip} from "antd"; import { Table, Button, Modal, Tag, Tooltip } from "antd";
import {CheckCircleOutlined, PlusOutlined, StopOutlined, UserSwitchOutlined} from '@ant-design/icons'; import {
import {UserRoleMap} from "../../common/model/user/UserRole"; CheckCircleOutlined,
import {UserStatus, UserStatusMap} from "../../common/model/user/UserStatus"; PlusOutlined,
import {DeleteOutlined, EditOutlined, ExclamationCircleFilled} from "@ant-design/icons/lib"; StopOutlined,
UserSwitchOutlined,
} from "@ant-design/icons";
import { UserRoleMap } from "../../common/model/user/UserRole";
import { UserStatus, UserStatusMap } from "../../common/model/user/UserStatus";
import {
DeleteOutlined,
EditOutlined,
ExclamationCircleFilled,
} from "@ant-design/icons/lib";
import MessageBoxUtil from "../../common/util/MessageBoxUtil"; import MessageBoxUtil from "../../common/util/MessageBoxUtil";
import Color from "../../common/model/base/option/Color"; import Color from "../../common/model/base/option/Color";
import TransfigurationModal from "./widget/TransfigurationModal"; import TransfigurationModal from "./widget/TransfigurationModal";
import Lang from "../../common/model/global/Lang"; import Lang from "../../common/model/global/Lang";
import Moon from "../../common/model/global/Moon"; import Moon from "../../common/model/global/Moon";
interface IProps extends RouteComponentProps {}
interface IProps extends RouteComponentProps { interface IState {}
}
interface IState {
}
export default class List extends TankComponent<IProps, IState> { export default class List extends TankComponent<IProps, IState> {
//获取分页的一个帮助器 //获取分页的一个帮助器
pager: Pager<User> = new Pager<User>(this, User, 10); pager: Pager<User> = new Pager<User>(this, User, 10);
@@ -44,9 +46,7 @@ export default class List extends TankComponent<IProps, IState> {
this.state = {}; this.state = {};
} }
componentDidMount() { componentDidMount() {
//刷新一下列表 //刷新一下列表
let that = this; let that = this;
@@ -62,52 +62,44 @@ export default class List extends TankComponent<IProps, IState> {
} }
refresh() { refresh() {
let that = this; let that = this;
//如果没有任何的排序,默认使用时间倒序 //如果没有任何的排序,默认使用时间倒序
if (!that.pager.getCurrentSortFilter()) { if (!that.pager.getCurrentSortFilter()) {
that.pager.setFilterValue('orderCreateTime', SortDirection.DESC); that.pager.setFilterValue("orderCreateTime", SortDirection.DESC);
} }
that.pager.httpList(); that.pager.httpList();
} }
toggleStatus(user: User) { toggleStatus(user: User) {
let that = this let that = this;
user.httpToggleStatus(function () { user.httpToggleStatus(function () {
MessageBoxUtil.success(Lang.t("operationSuccess")) MessageBoxUtil.success(Lang.t("operationSuccess"));
that.updateUI() that.updateUI();
}) });
} }
delete(user: User) { delete(user: User) {
let that = this let that = this;
Modal.confirm({ Modal.confirm({
title: Lang.t("user.deleteHint", user.username), title: Lang.t("user.deleteHint", user.username),
icon: <ExclamationCircleFilled twoToneColor={Color.WARNING}/>, icon: <ExclamationCircleFilled twoToneColor={Color.WARNING} />,
onOk: () => { onOk: () => {
user.httpDel(function () { user.httpDel(function () {
MessageBoxUtil.success(Lang.t("operationSuccess")) MessageBoxUtil.success(Lang.t("operationSuccess"));
that.refresh() that.refresh();
}) });
}, },
}); });
} }
transfiguration(user: User) { transfiguration(user: User) {
let that = this;
let that = this TransfigurationModal.open(user);
TransfigurationModal.open(user)
} }
render() { render() {
let that = this; let that = this;
//router中传入的路由相关对象 //router中传入的路由相关对象
@@ -116,146 +108,175 @@ export default class List extends TankComponent<IProps, IState> {
//pager对象 //pager对象
let pager = this.pager; let pager = this.pager;
let user: User = Moon.getSingleton().user let user: User = Moon.getSingleton().user;
const columns: ColumnProps<User>[] = [{ const columns: ColumnProps<User>[] = [
title: Lang.t("user.avatar"), {
dataIndex: 'avatarUrl', title: Lang.t("user.avatar"),
render: (text: any, record: User, index: number): React.ReactNode => ( dataIndex: "avatarUrl",
<Link to={StringUtil.prePath(match.path) + '/detail/' + record.uuid}> render: (text: any, record: User, index: number): React.ReactNode => (
<img alt="avatar" className='avatar-small cursor' src={record.getAvatarUrl()}/> <Link to={StringUtil.prePath(match.path) + "/detail/" + record.uuid}>
</Link> <img
), alt="avatar"
}, { className="avatar-small cursor"
title: Lang.t("user.username"), src={record.getAvatarUrl()}
dataIndex: 'username', />
render: (text: any, record: User, index: number): React.ReactNode => {
return <div>
<div>
<Link to={StringUtil.prePath(match.path) + '/detail/' + record.uuid}>{record.username}</Link>
</div>
{
user.uuid === record.uuid && (
<div className="text-danger">(It's you)</div>
)
}
</div>
},
}, {
title: Lang.t("user.role"),
dataIndex: 'role',
render: (text: any, record: User, index: number): React.ReactNode => (
<Tag color={UserRoleMap[record.role].color}>{UserRoleMap[record.role].name}</Tag>
),
}, {
title: Lang.t("user.singleFileSizeLimit"),
dataIndex: 'sizeLimit',
render: (text: any, record: User, index: number): React.ReactNode => (
<span>{FileUtil.humanFileSize(record.sizeLimit)}</span>
),
}, {
title: Lang.t("user.totalFileSize"),
dataIndex: 'totalSize',
render: (text: any, record: User, index: number): React.ReactNode => (
<span>{FileUtil.humanFileSize(record.totalSize)}</span>
),
}, {
title: Lang.t("user.totalFileSizeLimit"),
dataIndex: 'totalSizeLimit',
render: (text: any, record: User, index: number): React.ReactNode => (
<span>{FileUtil.humanFileSize(record.totalSizeLimit)}</span>
),
}, {
title: Lang.t("user.status"),
dataIndex: 'status',
render: (text: any, record: User, index: number): React.ReactNode => (
<Tag color={UserStatusMap[record.status].color}>{UserStatusMap[record.status].name}</Tag>
),
}, {
title: Lang.t("user.lastLogin"),
dataIndex: 'lastTime',
render: (text: any, record: User, index: number): React.ReactNode => (
<div>
<div>{record.lastIp}</div>
<div>{DateUtil.simpleDateTime(record.lastTime)}</div>
</div>
),
}, {
title: Lang.t("createTime"),
dataIndex: 'createTime',
sorter: true,
sortOrder: pager.getDefaultSortOrder('createTime'),
sortDirections: [SortDirection.DESCEND, SortDirection.ASCEND],
render: (text: any, record: User, index: number): React.ReactNode => (
DateUtil.simpleDateTime(text)
),
}, {
title: Lang.t("operation"),
dataIndex: 'action',
render: (text: any, record: User) => (
<span>
<Link title={Lang.t("edit")}
to={StringUtil.prePath(match.path) + '/edit/' + record.uuid}>
<Tooltip title={Lang.t("edit")}>
<EditOutlined className="btn-action"/>
</Tooltip>
</Link> </Link>
),
},
{
title: Lang.t("user.username"),
dataIndex: "username",
render: (text: any, record: User, index: number): React.ReactNode => {
return (
<div>
<div>
<Link
to={StringUtil.prePath(match.path) + "/detail/" + record.uuid}
>
{record.username}
</Link>
</div>
{user.uuid === record.uuid && (
<div className="text-danger">(It's you)</div>
)}
</div>
);
},
},
{
title: Lang.t("user.role"),
dataIndex: "role",
render: (text: any, record: User, index: number): React.ReactNode => (
<Tag color={UserRoleMap[record.role].color}>
{UserRoleMap[record.role].name}
</Tag>
),
},
{
title: Lang.t("user.singleFileSizeLimit"),
dataIndex: "sizeLimit",
render: (text: any, record: User, index: number): React.ReactNode => (
<span>{FileUtil.humanFileSize(record.sizeLimit)}</span>
),
},
{
title: Lang.t("user.totalFileSize"),
dataIndex: "totalSize",
render: (text: any, record: User, index: number): React.ReactNode => (
<span>{FileUtil.humanFileSize(record.totalSize)}</span>
),
},
{
title: Lang.t("user.totalFileSizeLimit"),
dataIndex: "totalSizeLimit",
render: (text: any, record: User, index: number): React.ReactNode => (
<span>{FileUtil.humanFileSize(record.totalSizeLimit)}</span>
),
},
{
title: Lang.t("user.status"),
dataIndex: "status",
render: (text: any, record: User, index: number): React.ReactNode => (
<Tag color={UserStatusMap[record.status].color}>
{UserStatusMap[record.status].name}
</Tag>
),
},
{
title: Lang.t("user.lastLogin"),
dataIndex: "lastTime",
render: (text: any, record: User, index: number): React.ReactNode => (
<div>
<div>{record.lastIp}</div>
<div>{DateUtil.simpleDateTime(record.lastTime)}</div>
</div>
),
},
{
title: Lang.t("createTime"),
dataIndex: "createTime",
sorter: true,
sortOrder: pager.getDefaultSortOrder("createTime"),
sortDirections: [SortDirection.DESCEND, SortDirection.ASCEND],
render: (text: any, record: User, index: number): React.ReactNode =>
DateUtil.simpleDateTime(text),
},
{
title: Lang.t("operation"),
dataIndex: "action",
render: (text: any, record: User) => (
<span>
<Link
title={Lang.t("edit")}
to={StringUtil.prePath(match.path) + "/edit/" + record.uuid}
>
<Tooltip title={Lang.t("edit")}>
<EditOutlined className="btn-action" />
</Tooltip>
</Link>
{ {record.status === UserStatus.OK && record.uuid !== user.uuid && (
record.status === UserStatus.OK && record.uuid !== user.uuid && (
<Tooltip title={Lang.t("user.disableUser")}> <Tooltip title={Lang.t("user.disableUser")}>
<StopOutlined className="btn-action" style={{color: Color.DANGER}} <StopOutlined
onClick={this.toggleStatus.bind(this, record)}/> className="btn-action"
style={{ color: Color.DANGER }}
onClick={this.toggleStatus.bind(this, record)}
/>
</Tooltip> </Tooltip>
) )}
}
{ {record.status === UserStatus.DISABLED &&
record.status === UserStatus.DISABLED && record.uuid !== user.uuid && ( record.uuid !== user.uuid && (
<Tooltip title={Lang.t("user.activeUser")}> <Tooltip title={Lang.t("user.activeUser")}>
<CheckCircleOutlined className="btn-action" style={{color: Color.SUCCESS}} <CheckCircleOutlined
onClick={this.toggleStatus.bind(this, record)}/> className="btn-action"
</Tooltip> style={{ color: Color.SUCCESS }}
) onClick={this.toggleStatus.bind(this, record)}
} />
</Tooltip>
)}
{ {record.status === UserStatus.DISABLED &&
record.status === UserStatus.DISABLED && record.uuid !== user.uuid && ( record.uuid !== user.uuid && (
<Tooltip title={Lang.t("user.deleteUser")}> <Tooltip title={Lang.t("user.deleteUser")}>
<DeleteOutlined className="btn-action" style={{color: Color.DANGER}} <DeleteOutlined
onClick={this.delete.bind(this, record)}/> className="btn-action"
</Tooltip> style={{ color: Color.DANGER }}
) onClick={this.delete.bind(this, record)}
} />
</Tooltip>
)}
{ {record.uuid !== user.uuid && (
record.uuid !== user.uuid && (
<Tooltip title={Lang.t("user.transfiguration")}> <Tooltip title={Lang.t("user.transfiguration")}>
<UserSwitchOutlined className="btn-action" style={{color: Color.PRIMARY}} <UserSwitchOutlined
onClick={this.transfiguration.bind(this, record)}/> className="btn-action"
style={{ color: Color.PRIMARY }}
onClick={this.transfiguration.bind(this, record)}
/>
</Tooltip> </Tooltip>
) )}
} </span>
),
},
];
</span>
),
}];
return ( return (
<div className="page-user-list"> <div className="page-user-list">
<TankTitle name={Lang.t("layout.users")}> <TankTitle name={Lang.t("layout.users")}>
<Link to={'/user/create'}> <Link to={"/user/create"}>
<Button type={"primary"} icon={<PlusOutlined/>}>{Lang.t("user.createUser")}</Button> <Button type={"primary"} icon={<PlusOutlined />}>
{Lang.t("user.createUser")}
</Button>
</Link> </Link>
</TankTitle> </TankTitle>
<div> <div>
<FilterPanel filters={pager.filters} onChange={this.search.bind(this)}/> <FilterPanel
filters={pager.filters}
onChange={this.search.bind(this)}
/>
</div> </div>
<Table <Table
rowKey="uuid" rowKey="uuid"
@@ -264,11 +285,13 @@ export default class List extends TankComponent<IProps, IState> {
columns={columns} columns={columns}
pagination={pager.getPagination()} pagination={pager.getPagination()}
onChange={pager.tableOnChange.bind(pager)} onChange={pager.tableOnChange.bind(pager)}
locale={{emptyText: (<TableEmpty pager={pager} onRefresh={this.refresh.bind(this)}/>)}} locale={{
emptyText: (
<TableEmpty pager={pager} onRefresh={this.refresh.bind(this)} />
),
}}
/> />
</div> </div>
); );
} }
} }
+1 -1
View File
@@ -106,7 +106,7 @@ export default class MobileList extends TankComponent<IProps, IState> {
<div> <div>
<Input.Search <Input.Search
className="mb10" className="mb10"
placeholder={Lang.t("matter.searchFile")} placeholder={Lang.t("user.searchUser")}
onSearch={(value) => this.searchFile(value)} onSearch={(value) => this.searchFile(value)}
onChange={this.changeSearch.bind(this)} onChange={this.changeSearch.bind(this)}
enterButton enterButton